@import '_content/Overcast.CustomerPortal.Client.UILibrary/Overcast.CustomerPortal.Client.UILibrary.rdpmx14ygj.bundle.scp.css';

/* /App.razor.rz.scp.css */
.not-found[b-eedxy7u8or] {
    padding: 1.25rem;
    font-size: 1.25rem;
}
/* /Features/ActiveJobsites/Components/ActiveJobsiteRequestMenuContent.razor.rz.scp.css */
.active-jobsite-request-menu-content[b-n55yserzw3] {
    list-style: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: white;
    z-index: 10;
    padding: 0;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    overflow: clip;
}

.active-jobsite-request-menu-content li[b-n55yserzw3] {
    list-style: none;
    background-color: white;
    color: var(--clr-blk, #112333);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    
    button {
        padding: 0.25rem 0.75rem;
        white-space: nowrap;
    }

    &:hover[b-n55yserzw3] {
        background-color: var(--clr-bh, #dfebeb);
    }
}

.req-btn[b-n55yserzw3] {
    cursor: not-allowed;
    color: #4D4E51;
}
/* /Features/ActiveJobsites/Components/ActiveJobsiteRequestMenuIcon.razor.rz.scp.css */
.request-menu-icon[b-s5cpclz3cr] {
    position: relative;
}
/* /Features/ActiveJobsites/Components/AssetsOnsiteModal.razor.rz.scp.css */
.assets-onsite-modal-title[b-32tnpnxp8j] {
    color: var(--clr-blk, #112333);
    margin-bottom: 0.5rem; /* 8px */
}

.assets-onsite-subtitle[b-32tnpnxp8j] {
    align-self: end;
    color: var(--clr-dn, #636363);
}

.assets-onsite-list[b-32tnpnxp8j] {
    background-color: white;
    border-radius: 8px;
    height: 419px;
    overflow: auto;
    
    li:not(:first-child) {
        border-top: 1px solid var(--clr-ln_70, #eaeaeab3);
    }
    
    li[b-32tnpnxp8j] {
        padding: 0.625rem 1rem;
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 20px 1fr;
        grid-template-areas: 
            "date  date"
            "asset pricing";
    }
}

.asset-delivery-date[b-32tnpnxp8j] {
    grid-area: date;
    color: var(--clr-dn, #636363);
    line-height: 1.5;
    font-size: 0.8175rem; /* 13px */
}

.asset-info-cell[b-32tnpnxp8j] {
    grid-area: asset;
    display: flex;
    align-items: center;
    column-gap: 0.125rem;
}

.asset-po-and-pricebook-wrapper[b-32tnpnxp8j] {
    grid-area: pricing;
    display: flex;
    align-items: center;
    justify-content: end;
    column-gap: 0.5rem;
}

.timeline-button[b-32tnpnxp8j] {
    margin-right: 0.25rem;
}
/* /Features/ActiveJobsites/Components/BillableServicesModal.razor.rz.scp.css */
.billable-services-subtitle[b-5mmxv2p4hg] {
    color: var(--clr-dn, #636363);
}

.billable-services-list[b-5mmxv2p4hg] {
    background-color: white;
    border-radius: 8px;
    height: 419px;
    overflow: auto;

    li:not(:first-child) {
        border-top: 1px solid var(--clr-ln_70, #eaeaeab3);
    }

    li[b-5mmxv2p4hg] {
        padding: 0.625rem 1rem;
        display: grid;
        grid-template-columns: 90px 2fr 3fr;
        grid-template-rows: 20px 1fr;
        grid-template-areas: 
            "date       date    date"
            "referrence service asset";
    }
}

.service-delivery-date[b-5mmxv2p4hg] {
    grid-area: date;
    color: var(--clr-dn, #636363);
    line-height: 1.5;
    font-size: 0.8175rem; /* 13px */
}

.service-ref-id[b-5mmxv2p4hg] {
    grid-area: referrence;
    text-align: left;
}

.service-name[b-5mmxv2p4hg] {
    span {
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        color: var(--clr-dn2, #4d4e51);
        background-color: var(--clr-ln2, #f1f1f1)
    }
}

.asset-name[b-5mmxv2p4hg] {
    text-align: right;
}

.ref-id-button[b-5mmxv2p4hg] {
    text-align: left;
}
/* /Features/ActiveJobsites/Components/CardView/ActiveJobsitesCardGrid.razor.rz.scp.css */
/* styles moved to WebApp/wwwroot/css/card-views-shared.css */
/* /Features/ActiveJobsites/Components/CardView/JobsiteCard.razor.rz.scp.css */
.jobsite-card[b-7fdkdncxb5] {
    width: 100%;
    max-width: 900px;
    height: 100%;
    min-height: 380px;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: white;
    background-position: 50% 62.5%;
    background-repeat: no-repeat;
    background-image: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/card-watermarks/location-marker-watermark.svg");
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);

    &:hover {
        box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    &:hover:has(.active-jobsite-request-menu-content)[b-7fdkdncxb5] {
        z-index: 10;
    }
}

.header-container[b-7fdkdncxb5] {
    display: flex;
    gap: 0.5rem;
    min-height: 80px;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: #edededa6;
}

.star-cell[b-7fdkdncxb5] {
    align-self: center;
}

.jobsite-header-details[b-7fdkdncxb5] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

.jobsite-header-details-left[b-7fdkdncxb5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jobsite-header-details-right[b-7fdkdncxb5] {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: 1fr 1.5rem;
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "po    elipsis"
        "blank arrow  ";
}

.po-cell[b-7fdkdncxb5] {
    grid-area: po;
    color: var(--clr-dn, #636363);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.ellipsis-cell[b-7fdkdncxb5] {
    grid-area: elipsis;
}

[b-7fdkdncxb5] .jobsite-launch-arrow {
    --size: 1.5rem; /* 24px */
    --gap-from-other-icon: 0.375rem; /* 6px */
    grid-area: arrow;
    width: var(--size);
    height: var(--size);
    align-content: center;
    justify-items: center;
    transform-origin: center;
}

.jobsite-card:not(:hover)[b-7fdkdncxb5]  .jobsite-launch-arrow {
    transform: scaleY(0);
}

.jobsite-card:hover[b-7fdkdncxb5]  .jobsite-launch-arrow {
    transform: scaleY(1);

    &:hover {
        transform: scale(1.25);
    }
}

.pill[b-7fdkdncxb5] {
    background-color: var(--clr-dn_80, #636363cc);
    width: fit-content;
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    
    &.placeholder {
        width: 90px;
        height: 24px;
    }
}

.ref-cell[b-7fdkdncxb5] {
    color: var(--clr-wht, #fafeff);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.name-cell[b-7fdkdncxb5] {
    overflow: hidden;
    color: var(--clr-blk_75, #112333bf);
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    
    &:has(.e-skeleton) {
        width: 280px;
    }
}

.address-cell[b-7fdkdncxb5] {
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-overflow: ellipsis;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;

    &:has(.e-skeleton) {
        width: 280px;
    }
}

.content-container[b-7fdkdncxb5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0 1rem;
}

.grid-item[b-7fdkdncxb5] {
}

.grid-item.blank[b-7fdkdncxb5] {
}

.footer-container[b-7fdkdncxb5] {
    display: flex;
    justify-content: space-between;
}

.total-balance[b-7fdkdncxb5] {
    border-radius: 2.5rem;
    color: var(--clr-1p_80, #005b5ecc);
    background-color: var(--clr-1p_10, #005b5e1a);
    padding: 0.25rem 0.75rem;
    min-width: fit-content;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    align-content: center;

    &.total-balance-number {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
    }

    &.total-balance-label[b-7fdkdncxb5] {
        font-size: 1rem;
        line-height: 1.5;
    }
}

.grid-segment[b-7fdkdncxb5] {
    display: flex;
    padding: 0.25rem 0.75rem;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.25rem;
    width: 100%;

    &.warn {
        background-color: var(--clr-err50,  #fbecec);
    }

    &.align-left[b-7fdkdncxb5] {
        text-align: left;
    }

    &.align-center[b-7fdkdncxb5] {
        text-align: right;
    }

    &.align-right[b-7fdkdncxb5] {
        text-align: right;
        justify-content: space-between;
    }
}

button.grid-segment:hover[b-7fdkdncxb5],
a.grid-segment:hover[b-7fdkdncxb5] {
    box-shadow:0 0 4px 2px rgba(0, 0, 0, 0.1) inset;
}

button.grid-segment:not(.warn):hover[b-7fdkdncxb5],
a.grid-segment:not(.warn):hover[b-7fdkdncxb5] {
    border-top-left-radius: 1000vmax;
    border-bottom-left-radius: 1000vmax;
}

.grid-segment-icon[b-7fdkdncxb5] {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1; /* square */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000vmax;
    background-color: var(--clr-1s_10, #00A8941a);
    .warn & {
        background-color: var(--clr-err_50, #edb0b080);
    }
}

.grid-segment-title[b-7fdkdncxb5] {
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;

    .warn & {
        color: var(--clr-err300, #d43f3f);
    }
}

button .grid-segment-title[b-7fdkdncxb5] {
    color: var(--clr-1p_80, #005b5ecc);
}

.grid-segment-subtitle[b-7fdkdncxb5] {
    color: var(--clr-dn, #636363);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .875rem; /* 14px */
    line-height: 1.5;
}

.placeholder-segment-text[b-7fdkdncxb5] {
    width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .jobsite-card[b-7fdkdncxb5]  .jobsite-launch-arrow {
        transition: transform 250ms ease-in-out;
    }
}
/* /Features/ActiveJobsites/Components/Grid/ActiveJobsitesGrid.razor.rz.scp.css */
.active-jobsites-grid-wrapper[b-xxo3iif9m4] {
    margin-top: 1rem;
}

[b-xxo3iif9m4] #active-jobsites-grid .e-gridcontent .e-content {
    min-height: 8rem;
}

[b-xxo3iif9m4] #active-jobsites-grid td {
    height: 3.25rem; /* 52px */
}

[b-xxo3iif9m4] #active-jobsites-grid th.spend-column,
[b-xxo3iif9m4] #active-jobsites-grid th.spend-column > div,
[b-xxo3iif9m4] #active-jobsites-grid td:has(.popup) {
    overflow: visible;
}

.open-invoices-critical[b-xxo3iif9m4] {
    color: var(--clr-err300, #d43f3f);
}

[b-xxo3iif9m4] #active-jobsites-grid td.spend-column {
    overflow: visible;
    padding: 0;
}

[b-xxo3iif9m4] #active-jobsites-grid td.tri-colon {
    overflow: visible;
}

[b-xxo3iif9m4] #active-jobsites-grid .request-menu-icon > button {
    transform: rotate(90deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-xxo3iif9m4] #active-jobsites-grid td:has(.grid-action-items-container) {
    padding-left: 0;
}

.jobsite-launch-arrow[b-xxo3iif9m4] {
    --size: 1.5rem; /* 24px */
    --gap-from-other-icon: 0.375rem; /* 6px */
    height: var(--size);
    align-content: center;
    justify-items: center;
    transform-origin: center;
}

[b-xxo3iif9m4] #active-jobsites-grid .e-gridcontent .e-content {
    overflow-y: hidden;
}

[b-xxo3iif9m4] #active-jobsites-grid tr:not(:hover) td .jobsite-launch-arrow {
    width: 0;
    transform: scaleX(0);
}

[b-xxo3iif9m4] #active-jobsites-grid tr:hover td .jobsite-launch-arrow {
    transform: scaleX(1);
    width: calc(var(--size) + var(--gap-from-other-icon));
    padding-left: var(--gap-from-other-icon);
    
    &:hover {
        transform: scale(1.25);
    }
}

.grid-action-items-container[b-xxo3iif9m4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.width-fit[b-xxo3iif9m4] {
    width: fit-content;
}

@media (prefers-reduced-motion: no-preference) {
    [b-xxo3iif9m4] #active-jobsites-grid tr td .jobsite-launch-arrow {
        transition: transform 125ms ease-in-out,
                    width 125ms ease-in-out;
    }
}

.date-btn[b-xxo3iif9m4] {
    overflow: hidden;
    color: var(--clr-1p, #005B5E);
    text-overflow: ellipsis;
    font-family: Matter, Inter, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}
/* /Features/ActiveJobsites/Components/JobSpendContent.razor.rz.scp.css */
.job-spend-content[b-56oo57hat9] {
    position: absolute;
    display: flex;
    background-color: white;
    z-index: 10;
    column-gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    
    hr {
        border-color: #fff;
    }
}

.spend-title[b-56oo57hat9] {
    overflow: hidden;
    color: var(--clr-blk, #112333);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.05em;
}

.spend-subtitle[b-56oo57hat9] {
    color: var(--clr-dn, #636363);
    font-size: 0.8125rem;
    line-height: 1.5;
    float: right;
}
/* /Features/ActiveJobsites/Components/JobSpendIcon.razor.rz.scp.css */
.job-spend-icon[b-pk3dk90wrr] {
    width: 100%;
    height: 100%;
    position: relative;
}

.job-spend-icon > button[b-pk3dk90wrr] {
    margin: 0.25rem 0.5rem;
}
/* /Features/ActiveJobsites/Components/MultiJobsiteCard.razor.rz.scp.css */
.multi-jobsite-card[b-t52jkd1a7k] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    column-gap: 1rem;
}

.multi-jobsite-list[b-t52jkd1a7k] {
    height: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    padding: 0.75rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
}

.jobsite-list-item:hover[b-t52jkd1a7k] {
    cursor: pointer;
}

.jobsite-list-item.selected:hover[b-t52jkd1a7k] {
    cursor: default;
}

.jobsite-list-item:hover .jobsite-list-item-link[b-t52jkd1a7k],
.jobsite-list-item:hover .jobsite-list-item-address[b-t52jkd1a7k] {
    text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
}

@supports (-webkit-text-stroke-width: 0.04ex) { /* 2017+, mobile 2022+ */
    .jobsite-list-item:hover .jobsite-list-item-link[b-t52jkd1a7k],
    .jobsite-list-item:hover .jobsite-list-item-address[b-t52jkd1a7k] { 
        text-shadow: -0.01ex 0 0 currentColor, 0.01ex 0 0 currentColor;
        -webkit-text-stroke-width: 0.01ex; 
    }
}

.jobsite-list-item.selected:hover .jobsite-list-item-link[b-t52jkd1a7k],
.jobsite-list-item.selected:hover .jobsite-list-item-address[b-t52jkd1a7k] {
    text-shadow: none;
}

@supports (-webkit-text-stroke-width: 0.04ex) { /* 2017+, mobile 2022+ */
    .jobsite-list-item.selected:hover .jobsite-list-item-link[b-t52jkd1a7k],
    .jobsite-list-item.selected:hover .jobsite-list-item-address[b-t52jkd1a7k] { 
        text-shadow: none;
        -webkit-text-stroke-width: inherit; 
    }
}

.jobsite-list-item-row[b-t52jkd1a7k] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 0.25rem;
    width: 325px;
    white-space: normal;
    text-align: left;
}

.jobsite-list-item-link[b-t52jkd1a7k] {
    color: var(--clr-1p, #005B5E);
    font-family: Matter, Inter, Arial, sans-serif;
    font-size: 1rem;
}

.jobsite-list-item[b-t52jkd1a7k] {
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.jobsite-list-item.selected[b-t52jkd1a7k] {
    box-shadow: rgba(0, 0, 0, 0.08) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.08) 0px 6px 16px 0px inset, rgba(198, 198, 198, 0.5) 0px 8px 15px 0px inset;
}

.jobsite-list-item.selected .jobsite-list-item-link[b-t52jkd1a7k],
.jobsite-list-item.selected .jobsite-list-item-address[b-t52jkd1a7k] {
    opacity: 0.8;
}

.jobsite-list-item-address[b-t52jkd1a7k] {
    color: var(--clr-dn, #636363);
    font-family: Inter, Matter, Arial, sans-serif;
    font-size: 0.875rem;
}
/* /Features/ActiveJobsites/Components/MultiJobsiteList.razor.rz.scp.css */
.multi-jobsite-list[b-u35zmwpbps] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    padding: 0.75rem;
}

.jobsite-list-item-row[b-u35zmwpbps] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 0.25rem;
}

.jobsite-list-item-link[b-u35zmwpbps] {
    color: var(--clr-1p, #005B5E);
    font-family: Matter, Inter, Arial, sans-serif;
    font-size: 1rem;
    text-decoration: underline;
    text-underline-position: from-font;
}

.jobsite-list-item-address[b-u35zmwpbps] {
    color: var(--clr-dn, #636363);
    font-family: Inter, Matter, Arial, sans-serif;
    font-size: 0.875rem;
}
/* /Features/ActiveJobsites/Components/MyJobsites/MyJobsitesItemStar.razor.rz.scp.css */
.my-jobsite-item-star-button[b-ar956c9tak] {
    position: relative;
    
    &[data-active="false"] {
        .grid-star-icon {
            fill: transparent;
            path {
                stroke: var(--clr-dn_80, #636363cc);;
            }
        }
        
        &:hover[b-ar956c9tak] {
            .grid-star-icon {
                fill: var(--clr-dn, #636363);
                path {
                    stroke: var(--clr-dn, #636363);
                }
            }
        }
    }

    &[data-active="true"][b-ar956c9tak] {
        .grid-star-icon {
            fill: var(--clr-1s_70, #00A894b3);
            path {
                stroke: var(--clr-1s_70, #00A894b3);
            }
        }

        &:hover[b-ar956c9tak] {
            .grid-star-icon {
                fill: var(--clr-1s, #00A894);
                path {
                    stroke: var(--clr-1s, #00A894);
                }
            }
        }
    }
}

.popup[b-ar956c9tak] {
    position: absolute;
    left: 2rem;
    top: -0.5rem;
    background-color: var(--clr-1s, #00A894);
    color: var(--clr-wht, #fafeff);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    width: 7.5rem; /* 120px */
    min-height: 52px;
    white-space: normal;
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .popup[b-ar956c9tak] {
        transition: clip-path 250ms ease-in-out;
        transform-origin: top left;
    }
    
    .popup.popup-hidden[b-ar956c9tak] {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }
    
    .popup.popup-visible[b-ar956c9tak] {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    
    .grid-star-icon[b-ar956c9tak],
    .grid-star-icon path[b-ar956c9tak] {
        transition: fill 250ms ease-in-out,
                    stroke 250ms ease-in-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup[b-ar956c9tak] {
        transition: opacity 125ms ease-in-out;
    }

    .popup.popup-hidden[b-ar956c9tak] {
        opacity: 0;
    }

    .popup.popup-visible[b-ar956c9tak] {
        Opacity: 1;
    }
}

.grid-star-icon.animated[b-ar956c9tak],
.grid-star-icon.animated path[b-ar956c9tak] {
    transition: unset !important;
    animation: blink-b-ar956c9tak 800ms forwards !important;
}

@keyframes blink-b-ar956c9tak {
    0%, 32%, 67%, 99%{
        fill: var(--clr-dn, #636363);
        stroke: var(--clr-dn, #636363);
    }
    33%, 66%, 100% {
        fill: transparent;
        stroke: var(--clr-dn_80, #636363cc);
    }
}
/* /Features/ActiveJobsites/Components/MyJobsites/MyJobsitesToggleButton.razor.rz.scp.css */
.my-jobsites-toggle-button[b-iw3aaim2ha] {
    display: grid;
    grid-template-columns: 28px 1fr 32px;
    column-gap: 0.5rem;
    font-size: 1.875rem;
    line-height: 1.5;
    letter-spacing: -0.05em;
    border-radius: 1000vmax;
    height: 3.8125rem;
    align-items: center;
    align-content: end;
    padding: 0.5rem 0.75rem;

    &:hover {
        font-weight: 500;
        .my-jobsites-count {
            font-weight: 400;
        }
    }
    
    .my-jobsites-count[b-iw3aaim2ha] {
        align-content: center;
        justify-items: center;
        text-align: center;
        border-radius: 1000vmax;
        width: 100%;
        aspect-ratio: 1; /* square */
        font-size: 1.125rem;
        line-height: 1;
        letter-spacing: -0.05em;
        
        &.counter-3-digit {
            font-size: 1rem;
        }
        
        &.counter-4-digit[b-iw3aaim2ha] {
            font-size: 0.875rem;
        }
    }
    
    &[data-state="none-saved"][b-iw3aaim2ha],
    &[data-state="all-jobsites"][b-iw3aaim2ha] {
        background-color: var(--clr-mn, #c6c6c6);
        color: var(--clr-dn, #636363);
        box-shadow: 0 4px 6px -4px rgba(24, 39, 75, 0.12), 0 8px 8px -4px rgba(24, 39, 75, 0.08);

        .star-icon {
            fill: transparent;
            
            path {
                stroke: var(--clr-dn, #636363);
            }
        }
        
        .my-jobsites-count[b-iw3aaim2ha] {
            color: white;
            background-color: var(--clr-dn_80, #636363cc);
        }
    }
    
    &[data-state="my-jobsites"][b-iw3aaim2ha] {
        background-color: var(--clr-1s, #00A894);
        color: var(--clr-wht, #fafeff); ;
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25) inset;

        .star-icon {
            fill: var(--clr-wht, #fafeff);

            path {
                stroke: var(--clr-wht, #fafeff);
            }
        }

        .my-jobsites-count[b-iw3aaim2ha] {
            color: white;
            background-color: var(--clr-1p_80, #005b5ecc);
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    .my-jobsites-toggle-button[b-iw3aaim2ha],
    .my-jobsites-count[b-iw3aaim2ha] {
        transition:
                color 250ms ease-in-out,
                background-color 250ms ease-in-out,
                scale 75ms ease-in-out;
    }

    .star-icon[b-iw3aaim2ha] {
        transition: fill 250ms ease-in-out;
        
        path  {
            transition: stroke 250ms ease-in-out;
        }
    }

    .my-jobsites-toggle-button:active[b-iw3aaim2ha] {
        scale: 0.975;
    }
}
/* /Features/ActiveServices/Components/ActiveServicesGrid.razor.rz.scp.css */
.asset-info-cell[b-41zg4pruw1] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

.service-status-pill[b-41zg4pruw1] {
    --text-color: var(--clr-dn, #636363);
    --background-color: white;
    border-radius: 1000vmax;
    min-height: 1.75rem; /* 28px */
    padding-inline: 0.75rem;
    align-content: center;
    text-align: center;
    display: block;
    width: fit-content;
    color: var(--text-color);
    background-color: var(--background-color);
    
    &[data-status="scheduled"],
    &[data-status="completed"] {
        --text-color: #274E73;
        --background-color: #ADC4DA80;
    }
    &[data-status="posted"][b-41zg4pruw1] {
        --text-color: #AD5430;
        --background-color: #FCC8B380;
    }
}

.active-services-grid[b-41zg4pruw1]  {
    .extra-right-padding {
        th&,
        td& {
            padding-right: 1.5rem !important;
        }
    }
}
/* /Features/ActiveServices/Components/CardView/JobsiteServiceCard.razor.rz.scp.css */
.service-details-card[b-obr2phz5gn] {
    width: 100%;
    max-width: 900px;
    height: 100%;
    min-height: 368px;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    background-color: white;
    background-position: 50% 75%;
    background-repeat: no-repeat;
    background-image: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/card-watermarks/calendar-watermark.svg");

    &.card-view:hover {
        box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
    }
}

.header-container[b-obr2phz5gn] {
    display: flex;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: #edededa6;
}

.service-header-details[b-obr2phz5gn] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

.service-header-details-left[b-obr2phz5gn] {
    display: grid;
    column-gap: 0.75rem;
    grid-template-columns: auto auto auto;
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "ref . ."
        "service-date type range";
}

.service-header-details-right[b-obr2phz5gn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ref-cell[b-obr2phz5gn] {
    grid-area: ref;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;
    align-self: center;
    margin: 0.25rem 0;
}

.service-date-cell[b-obr2phz5gn] {
    grid-area: service-date;
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-overflow: ellipsis;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    align-self: center;
}

.type-cell[b-obr2phz5gn] {
    grid-area: type;
}

.range-cell[b-obr2phz5gn] {
    grid-area: range;
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-overflow: ellipsis;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    align-self: center;
}

.po-cell[b-obr2phz5gn] {
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-overflow: ellipsis;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.content-container[b-obr2phz5gn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0 1rem;
}

.footer-container[b-obr2phz5gn] {
    display: flex;
    justify-content: space-between;
}

.grid-item[b-obr2phz5gn] {
    max-width: 200px;
    min-height: 50px;
}

.grid-segment[b-obr2phz5gn] {
    display: flex;
    padding: 0.25rem 0.75rem;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.25rem;
    width: 100%;
    
    &.warn {
        background-color: var(--clr-err50, #fbecec);
    }

    &.align-left[b-obr2phz5gn] {
        text-align: left;
    }

    &.align-center[b-obr2phz5gn] {
        text-align: right;
    }

    &.align-right[b-obr2phz5gn] {
        text-align: right;
        justify-content: space-between;
    }
}

button.grid-segment:hover[b-obr2phz5gn],
a.grid-segment:hover[b-obr2phz5gn] {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1) inset;
}

button.grid-segment:not(.warn):hover[b-obr2phz5gn],
a.grid-segment:not(.warn):hover[b-obr2phz5gn] {
    border-top-left-radius: 1000vmax;
    border-bottom-left-radius: 1000vmax;
}

.grid-segment-icon[b-obr2phz5gn] {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1; /* square */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000vmax;
    background-color: var(--clr-1s_10, #00A8941a);
    .warn & {
        background-color: var(--clr-err_50, #edb0b080);
    }
}

.grid-segment-labels[b-obr2phz5gn] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 2.875rem;
}

.grid-segment-title[b-obr2phz5gn] {
    overflow: visible;
    color: var(--clr-1p_80, #005b5ecc);
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    .warn & {
        color: var(--clr-err300, #d43f3f);
    }
}

.grid-segment-subtitle[b-obr2phz5gn] {
    color: var(--clr-dn, #636363);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .875rem; /* 14px */
    line-height: 1.5;
}

.placeholder-segment-text[b-obr2phz5gn] {
    width: 100%;
}

.pill[b-obr2phz5gn] {
    background-color: var(--clr-dn_80, #636363cc);
    color: var(--clr-wht, #FAFEFF);
    width: fit-content;
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;

    &.placeholder {
        width: 90px;
        height: 24px;
    }
}

.tag-item[b-obr2phz5gn],
.status-item[b-obr2phz5gn],
.flag[b-obr2phz5gn] {
    color: var(--text-color);
    background-color: var(--flag-color);
    width: fit-content;
    font-size: 1rem;
    white-space: nowrap;
    padding: 0.125rem 0.5rem;
}

.tag-item[b-obr2phz5gn] {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
}

.status-item[b-obr2phz5gn] {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 22px;
}

.tag-item[b-obr2phz5gn],
.status-item[b-obr2phz5gn] {
    &[data-status="pending"],
    &[data-status="completed"],
    &[data-status="scheduled"] {
        --flag-color: #adc4da7f;
        --text-color: #274e73;
    }

    &[data-status="billable"][b-obr2phz5gn],
    &[data-status="posted"][b-obr2phz5gn] {
        --flag-color: #fcc8b37f;
        --text-color: #ad5430;
    }

    &[data-status="invoiced"][b-obr2phz5gn] {
        --flag-color: #c4c4c67f;
        --text-color: #4d4e51;
    }
}

.empty-date[b-obr2phz5gn] {
    & .grid-segment-title {
        color: var(--clr-dn, #636363);
        font-weight: 400;
    }
}

.tonnage[b-obr2phz5gn] {
    & .grid-segment-title {
        color: var(--clr-dn, #636363);
    }
}

.requester[b-obr2phz5gn] {
    & .grid-segment-title {
        color: var(--clr-dn, #636363);
    }
}

[b-obr2phz5gn] .oc-btn-textprimary:has(img) {
    column-gap: 0.125rem;
    font-size: 18px;

    & span {
        top: -1px;
        position: relative;
    }
}

.footer-container.loading-state[b-obr2phz5gn] {
    margin-top: 175px;
}

[b-obr2phz5gn] .error-state {
    min-height: 350px;
    width: 100%;
    padding: 1rem;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.asset-name-button:hover[b-obr2phz5gn]  .grid-segment-title {
    text-decoration: underline;
}
/* /Features/ActiveServices/Components/ServicesForJobsitesCardGrid.razor.rz.scp.css */
/* other styles moved to WebApp/wwwroot/css/card-views-shared.css */

.loading-service-details-card[b-yod8kq6aul] {
    min-width: 625px;
    min-height: 350px;
    width: 100%;
    height: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    transform: scale(1.01);
    background-color: white;
    background-position: 50% 75%;
    background-repeat: no-repeat;
    background-image: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/card-watermarks/calendar-watermark.svg");
}
/* /Features/ActiveServices/Components/ServicesGridForJobsite.razor.rz.scp.css */
.services-grid-for-jobsite[b-qnrx1ykh4k] {
    overflow-x: auto;
}

[b-qnrx1ykh4k] #job-services-grid {
    min-width: 1360px;
}

.asset-info-cell[b-qnrx1ykh4k] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

.service-status-pill[b-qnrx1ykh4k] {
    --text-color: var(--clr-dn, #636363);
    --background-color: white;
    border-radius: 1000vmax;
    min-height: 1.75rem; /* 28px */
    padding-inline: 0.75rem;
    align-content: center;
    text-align: center;
    display: block;
    width: fit-content;
    color: var(--text-color);
    background-color: var(--background-color);

    &[data-status="pending"]{
        --text-color: #274E73;
        --background-color: #ADC4DA80;
    }
    &[data-status="posted"][b-qnrx1ykh4k],
    &[data-status="billable"][b-qnrx1ykh4k] {
        --text-color: #AD5430;
        --background-color: #FCC8B380;
    }
}
/* /Features/Administration/CompanySettings.razor.rz.scp.css */
.company-settings-wrapper[b-gwf8n55ds1] {
    width: min(100%, 550px);
    row-gap: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
}

.overview-breakdown[b-gwf8n55ds1] {
    padding: 0.75rem;
    border-radius: 8px;
    background-color: white;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2 / span 2;
    row-gap: 0.5rem;
    
    .details-key-value {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2 / span 2;
        column-gap: 0;
        
        label,
        span{
            color: var(--clr-dn, #636363) !important;
            padding: 0.25rem 0.5rem;
        }
    }
}

.contact-info-blurb[b-gwf8n55ds1] {
    grid-column: span 2 / span 2;
    display:  flex;
    align-items: center;
    column-gap: 0.5rem;
    
    img {
        display: inline;
    }
}

.error-state[b-gwf8n55ds1] {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: var(--glass-shadow);
    margin: 0.5rem;
}

[b-gwf8n55ds1] a {
    align-self: center;
    padding: 0.25rem 0.5rem;
    color: var(--clr-1p, #005b5e);
    text-decoration: underline;
    cursor: pointer;
    &:hover {
        opacity: 75%;
    }
}
/* /Features/Administration/UsersGrid.razor.rz.scp.css */
[b-syg0339e09] #admin-users-grid .e-gridcontent {
    max-height: calc(100svh - (8.25rem + var(--reserved-min-svh-height)));
    overflow: auto;
}

.user-row[b-syg0339e09] {
    display: flex;
    flex-direction: column;
    
    .user-name-span {
        display: flex;
        align-items: center;
        column-gap: 0.375rem;
    }
}
/* /Features/ApplicationFrame/Components/ActiveBanner.razor.rz.scp.css */
.active-banner[b-i44h16sxla] {
    height: 100%;
    width: 100%;
    border-radius: 0.25rem;
    background-color: var(--clr-1s_10, #00A8941a);
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.75rem;
}

.active-banner > .active-banner-content[b-i44h16sxla],
.active-banner > .active-banner-content > button[b-i44h16sxla]
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-banner > .left-content.active-banner-content[b-i44h16sxla],
.active-banner > .left-content.active-banner-content > button[b-i44h16sxla] {
    column-gap: 0.5rem;

    & > span {
        color: var(--clr-1p, #005B5E);
        font-family: Matter, Inter, Arial, sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -0.03em;
    }
}

.active-banner > .right-content.active-banner-content[b-i44h16sxla],
.active-banner > .right-content.active-banner-content > button[b-i44h16sxla] {
    column-gap: 0.25rem;

    & > .circle {
        border-radius: 40px;
        background-color: var(--clr-1p, #005B5E);
        display: flex;
        padding: 4px;
        justify-content: center;
        align-items: center;
        gap: 10px;

        & > span {
            color: white;
            font-family: Matter, Inter, Arial, sans-serif;
            font-size: 0.6875rem; /* 11px */
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
    }

    & > span[b-i44h16sxla] {
        color: var(--clr-1p, #005B5E);
        font-size: 0.875rem; /* 14px */
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        position: relative;
        display: block;
        transform: translateY(2px);
        
        &::after {
            content: "";
            display: block;
            background-color: var(--clr-1p, #005B5E);
            width: 100%;
            height: 2px;
            left: 50%;
            top:100%;
            transform-origin: center;
            transform: scaleX(0);
        }
    }
}

.active-banner > .right-content.active-banner-content > button:hover > span[b-i44h16sxla]::after {
     transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
    .active-banner > .right-content.active-banner-content > button > span[b-i44h16sxla]::after {
        transition: transform 200ms ease-in-out;
    }
}
/* /Features/ApplicationFrame/Components/AdminCustomerSelector.razor.rz.scp.css */
.customer-selection-wrapper[b-mls5vgzrxt] {
    width: min(100%, 250px);
    margin-top: -0.75rem;
    margin-inline: auto;
}

[b-mls5vgzrxt] .oc-admin-customer-selector {
    border-radius: 100vmax  !important;

    .e-float-text.e-label-bottom {
        transform: translate(0.5rem, -50%) !important;
    }
}

[b-mls5vgzrxt] .oc-admin-customer-selector input {
    color: var(--clr-1p, #005b5e);
}

.full-screen-spinner[b-mls5vgzrxt] {
    z-index: 9999;
    position: fixed;
    inset: 0;
    background: var(--clr-mesh-average, rgb(195, 217, 215));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
}

.full-screen-spinner[b-mls5vgzrxt]  .e-spinner-pane {
    transform: translateY(3.5rem);
}

.no-records-template[b-mls5vgzrxt] {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    justify-content: center;
}
/* /Features/ApplicationFrame/Components/AgingHeader.razor.rz.scp.css */
.aging-insert[b-ba9jv1i7wz] {
    --top-offset: 7px;
    --gap-distance: 0.5rem;
    --critical-bg: var(--clr-err50,  #fbecec);
    --radius: 8px;
    display: flex;
    align-items: center;
    width:100%;
    height: calc(100% - var(--top-offset));
    margin-top: var(--top-offset);
    column-gap: var(--gap-distance);
    background-color: white;
    position: relative;
    padding-inline: 0.75rem;
    border-radius: var(--radius);
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
}

.aging-label[b-ba9jv1i7wz] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1.25rem;
}

.non-critical-wrapper:has(.total)[b-ba9jv1i7wz] {
    position: relative;
    
    &::before {
        content: '';
        background-color: var(--clr-mn, #c6c6c6);
        width: 1px;
        height: 100%;
        position: absolute;
        left: -4px;
        inset-block: 0;
    }
}

.non-critical-wrapper[b-ba9jv1i7wz],
.is-critical-wrapper[b-ba9jv1i7wz] {
    margin-block: 0.75rem;
    width: 100%;
    
    &:has(.fixed) {
        width: fit-content;
        
        &.fixed {
            width: fit-content;
            flex-shrink: 0;
        }
    }
}

.is-critical-wrapper[b-ba9jv1i7wz] {
    background-color: var(--critical-bg);
    padding-inline: calc(var(--gap-distance) / 2);
    margin-inline: calc(var(--gap-distance) / -2);
    
    &.first {
        margin-left: 0;
        padding-left: 0;
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }
    &.last[b-ba9jv1i7wz] {
        margin-right: 0;
        padding-right: 0;
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }
}

.aging-button[b-ba9jv1i7wz] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background-color: white;
    position: relative;

    &.total {
        min-width: 9rem; /* 144px */
    }
    
    &.fixed[b-ba9jv1i7wz] {
        width: fit-content;
        flex-shrink: 0;
    }
    
    &.unbilled[b-ba9jv1i7wz] {
        margin-block: 0.75rem;
        background-color: var(--clr-ln, #eaeaea);
        min-width: 145px;
    }
    &.critical[b-ba9jv1i7wz] {
        background-color: var(--critical-bg);
    }
    
    &.unbilled[b-ba9jv1i7wz] {
        &::before {
            content: '';
            background-color: var(--clr-mn, #c6c6c6);
            width: 1px;
            height: 100%;
            position: absolute;
            left: -4px;
            inset-block: 0;
        }
    }

    .big-screen[b-ba9jv1i7wz] {
        white-space: nowrap;
    }
    
    .small-screen[b-ba9jv1i7wz] {
        display: none;
    }
}

button.aging-button[b-ba9jv1i7wz] {
    cursor: pointer;
    
    &:hover {
        box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.08) inset,
        0 6px 16px 0 rgba(0, 0, 0, 0.08) inset,
        0 8px 15px 0 rgba(198, 198, 198, 0.25) inset;
    }
    
    &.active[b-ba9jv1i7wz] {
        box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.08) inset,
        0 6px 16px 0 rgba(0, 0, 0, 0.08) inset,
        0 8px 15px 0 rgba(198, 198, 198, 0.50) inset;
    }
    
    &.active:hover[b-ba9jv1i7wz] {
        box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.08) inset,
        0 6px 16px 0 rgba(0, 0, 0, 0.08) inset,
        0 8px 15px 0 rgba(198, 198, 198, 0.75) inset;
    }
}

.days-to-pay-value[b-ba9jv1i7wz] {
    text-align: right;
    min-height: 1.5rem;
}

.aging-action-buttons[b-ba9jv1i7wz] {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: fit-content;
    flex-shrink: 0;
    min-width: 185px;
}

[b-ba9jv1i7wz] .action-button {
    height: fit-content;
}

@media (width < 1690px) {
    .aging-button[b-ba9jv1i7wz] {
        padding: 0.375rem; /* 6 px */

        &.total {
            min-width: 7.5rem; /* 120px */
        }
        
        &.unbilled[b-ba9jv1i7wz] {
            min-width: 96px !important;
        }
    }
    
    .fnt-body-bld[b-ba9jv1i7wz] {
        font-size: 0.75rem !important;
    }
}

@media (width < 1550px)
{
    .aging-button[b-ba9jv1i7wz] {
        min-width: fit-content;
        flex-grow: 1;

        .small-screen:not(#a) {
            display: inline;
        }
        
        .big-screen:not(#a)[b-ba9jv1i7wz] {
            display: none;
        }
    }
}
/* /Features/ApplicationFrame/Components/CustomerInfoSummaryCard.razor.rz.scp.css */
.card-insert[b-k5iwe58jq3] {
    background-color: white;
    border-radius: 8px;
    height: 100%;
    padding: 0.75rem;
    max-height: 6.5rem; /* 104px */
    overflow: auto;
}

p[b-k5iwe58jq3] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

p[data-nowrap="true"][b-k5iwe58jq3] {
    white-space: nowrap;
}
/* /Features/ApplicationFrame/Components/NavigationBlade.razor.rz.scp.css */
.navigation-blade[b-aeare8vquv] {
    --panel-width: min(450px, 100vw);
    width: var(--panel-width);
    inset-block: 0;
    position: fixed;
    z-index: 100;
    background: white;
    box-shadow: var(--glass-shadow);
    padding:  0.75rem;
    
    &[aria-hidden="true"] {
        left: calc(-1 * var(--panel-width) - 0.5rem);
    }
    
    &[aria-hidden="false"][b-aeare8vquv] {
        left: 0;
    }
}

.close-blade-button[b-aeare8vquv] {
    --swell-size: 0.5rem;
    margin: calc(-1 * var(--swell-size));
    padding: var(--swell-size);
    
    &:hover img {
        transform: scale(1.25);
    }
}

.navigation-blade-header[b-aeare8vquv] {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.navigation-nav-links[b-aeare8vquv] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.5rem;
}

[b-aeare8vquv] .nav-link-button,
.nav-link-button[b-aeare8vquv] {
    width: 100%;
    min-height: 30px;
    padding: 0.75rem 0.75rem 0.75rem 2.625rem;
    position: relative;
    text-align: left;
    font-family: Matter, Inter, Arial, sans-serif;
    text-decoration: none;
    
    &:not(.preview):hover {
        background-color: var(--clr-bh, #dfebeb);
    }
}

.nav-link-button[b-aeare8vquv]::before,
[b-aeare8vquv] .nav-link-button::before {
    content: '';
    position: absolute;
    transform-origin: center;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 100%;
    right: 0;
    background-color: var(--clr-1p, #005b5e);    
}

.nav-link-button.page-active[b-aeare8vquv],
[b-aeare8vquv] .nav-link-button.page-active {
    color: var(--clr-1p, #005b5e);
    font-size: 1.25rem;
    letter-spacing: -0.05em;
    font-weight: 600;
    line-height: 1.5;
}

.nav-link-button.page-active[b-aeare8vquv]::before,
[b-aeare8vquv] .nav-link-button.page-active::before {
    transform: translateY(-50%) scaleY(1);
}

.nav-link-button:not(.page-active)[b-aeare8vquv],
[b-aeare8vquv] .nav-link-button:not(.page-active) {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1.25rem; /* 20px */
    letter-spacing: -0.05em;
    line-height: 1.5;
    font-weight: 400;
}

.nav-link-button:not(.page-active)&:not(.preview):hover[b-aeare8vquv],
[b-aeare8vquv] .nav-link-button:not(.page-active)&:not(.preview):hover {
    font-weight: 500 !important;
}

[b-aeare8vquv] .nav-link-button:not(.preview):hover,
.nav-link-button:not(.preview):hover[b-aeare8vquv] {
    background-color: var(--clr-bh, #dfebeb);
}

[b-aeare8vquv] .nav-link-button.preview,
.nav-link-button.preview[b-aeare8vquv] {
    display: flex;
    color: #87878BCC; /* color 2n200 80%, not in customer portal colors */
    cursor: not-allowed;
    column-gap: 1rem;
}

[b-aeare8vquv] .mini-contact-us-popup-wrapper,
[b-aeare8vquv] .mini-contact-us-popup-wrapper > button {
    width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .navigation-blade[b-aeare8vquv] {
        transition: left 250ms ease-in-out;
    }

    .close-blade-button img[b-aeare8vquv],
    .nav-link-button[b-aeare8vquv]{
        transition: transform 150ms ease-in-out;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .navigation-blade[b-aeare8vquv] {
        background: white;
    }
}
/* /Features/ApplicationFrame/Components/PrimaryContactSummary.razor.rz.scp.css */
.loading-state[b-l5zyvpk5a0] {
    min-height: 120px;
}

.error-state[b-l5zyvpk5a0] {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: var(--glass-shadow);
    margin: 0.5rem;
}

.contact-container[b-l5zyvpk5a0] {
    position: relative;
    margin-right: auto;
    width: fit-content;
    overflow: visible;
    --block-padding: 0.25rem;
    /* 23px image height + block padding: 2 * 0.25rem = 31px or 1.9375rem */
    height: calc(23px + 2 * var(--block-padding));
}

.contact-button[b-l5zyvpk5a0] {
    padding-left: 0.75rem;
    padding-block: var(--block-padding);
    padding-right: 1.5rem;
    column-gap: 0.5rem;
    display:flex;
    align-items: center;
    position: relative;
    border-radius: 1000vmax;
    cursor: pointer;
    background-color: white;
    border: none;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    
    &::before {
        width: 1rem;
        position: absolute;
        right: 0.5rem;
        rotate: 0deg;
        transform: translateY(3px);
        content: var(--svg-chevron-down);
        transform-origin: center;
    }
    
    &:hover[b-l5zyvpk5a0]::before {
        scale: 1.5;
    }
    
    &[aria-expanded="true"][b-l5zyvpk5a0]::before {
        rotate: 180deg;
    }
    
    &:focus[b-l5zyvpk5a0],
    &:focus-visible[b-l5zyvpk5a0] {
        outline: 2px solid var(--clr-1s, #00A894);
        outline-offset: 2px;
    }
}

.animated-height[b-l5zyvpk5a0] {
    display: grid;
    grid-template-rows: 0fr;
    
    &:has(> .contact-details[aria-expanded="true"]) {
        grid-template-rows: 1fr;
    }
}

.contact-details[b-l5zyvpk5a0] {
    z-index: 1;
    position: relative;
    margin-top: 0.5rem;
    overflow: hidden;
    background: white;
    box-shadow: var(--glass-shadow);
    border-radius: 8px;
    opacity: 0;
    
    &[aria-expanded="true"] {
        opacity: 1;
    }
}

.contact-name-and-title[b-l5zyvpk5a0] {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--clr-mn, #c6c6c6);
}

.details-list[b-l5zyvpk5a0] {
    list-style: none;
    
    li {
        padding: 0.25rem 0.75rem;
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
    }
}

.contact-icon[b-l5zyvpk5a0] {
    padding: 0.1875rem;
    border-radius: 1000vmax;
    background-color: white;
}

@media (prefers-reduced-motion: no-preference) {
    .contact-button[b-l5zyvpk5a0]::before {
        transition: all 250ms ease-in-out;
        transition-property: scale, rotate, transform ;
    }

    .animated-height[b-l5zyvpk5a0] {
        transition: grid-template-rows 500ms ease-in-out;
    }
}

a[b-l5zyvpk5a0] {
    color: var(--clr-1p, #005b5e);
    text-decoration: underline;
    cursor: pointer;
    &:hover {
        opacity: 75%;
    }
}
/* /Features/ApplicationFrame/Components/ProfileMenu.razor.rz.scp.css */
.profile-menu-container[b-swu51jpz0n] {
    position: relative;
    width: fit-content;
    overflow: visible;
    --block-padding: 0.25rem;
    /* 23px image height + block padding: 2 * 0.25rem = 31px or 1.9375rem */
    height: calc(23px + 2 * var(--block-padding));
}

.profile-button[b-swu51jpz0n] {
    padding-left: 0.75rem;
    padding-block: var(--block-padding);
    padding-right: 1.75rem;
    column-gap: 0.5rem;
    display:flex;
    align-items: center;
    position: relative;
    border-radius: 1000vmax;
    cursor: pointer;
    background-color: var(--clr-1p, #005b5e);
    border: none;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

    &::before {
        width: 1rem;
        position: absolute;
        right: 0.5rem;
        rotate: 0deg;
        transform: translateY(3px);
        content: var(--svg-chevron-down-white);
        transform-origin: center;
    }

    &:hover[b-swu51jpz0n]::before {
        scale: 1.5;
    }

    &[aria-expanded="true"][b-swu51jpz0n]::before {
        rotate: 180deg;
    }

    &:focus[b-swu51jpz0n],
    &:focus-visible[b-swu51jpz0n] {
        outline: 2px solid var(--clr-1s, #00A894);
        outline-offset: 2px;
    }
}

.animated-height[b-swu51jpz0n] {
    display: grid;
    grid-template-rows: 0fr;

    &:has(> .user-details[aria-expanded="true"]) {
        grid-template-rows: 1fr;
    }
}

.user-details[b-swu51jpz0n] {
    z-index: 1;
    position: relative;
    margin-top: 0.5rem;
    overflow: hidden;
    background: white;
    box-shadow: var(--glass-shadow);
    border-radius: 8px;
    opacity: 0;

    &[aria-expanded="true"] {
        opacity: 1;
    }
}

.user-info[b-swu51jpz0n] {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--clr-mn, #c6c6c6);
}

.sign-out[b-swu51jpz0n] {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0;
    border: none;
    background-color: transparent;
    width: 100%;
    transition: background-color 150ms ease-in-out;
    cursor: pointer;
    
    &:hover {
        background-color: var(--clr-1p_10, #005b5e1a);
    }

    &:focus-visible[b-swu51jpz0n] {
        outline-offset: -2px;
        outline: 2px solid var(--clr-1s, #00A894);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .profile-button[b-swu51jpz0n]::before {
        transition: all 250ms ease-in-out;
        transition-property: scale, rotate, transform ;
    }

    .animated-height[b-swu51jpz0n] {
        transition: grid-template-rows 500ms ease-in-out;
    }
}
/* /Features/ApplicationFrame/Components/UnsupportSizeAdvisoryModal.razor.rz.scp.css */
/* /Features/AssetActivities/Components/AssetActivityDetailsCard.razor.rz.scp.css */
.asset-timeline-activity-details-card[b-3xls83c19y] {
    min-width: 625px;
    min-height: 350px;
    width: 100%;
    max-width: 646px;
    height: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    background-color: white;
    background-position: 50% 75%;
    background-repeat: no-repeat;
    
    &[data-activity-type="service-order"] {
        background-image: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/card-watermarks/calendar-watermark.svg");
    }
}

.header-container[b-3xls83c19y] {
    display: flex;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: #edededa6;
}

.jobsite-header-details[b-3xls83c19y] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    --child-grid-row-templates: repeat(2, 1fr); /* left and right need to stay in sync so content aligns vertically across the card */

    & > .jobsite-header-details-left,
    & > .jobsite-header-details-right {
        height: 63px;
    }
}

.jobsite-header-details-left[b-3xls83c19y],
.jobsite-header-details-right[b-3xls83c19y] {
    display: grid;
    grid-template-rows: var(--child-grid-row-templates);
    align-items: center;
}

.jobsite-header-details-left[b-3xls83c19y] {
    column-gap: 0.75rem;
    grid-template-columns: auto auto auto;
    grid-template-areas:
        "ref . ."
        "service-date type range";
}

.ref-cell[b-3xls83c19y] {
    grid-area: ref;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;
    align-self: center;
    margin: 0.25rem 0;
}

.service-date-cell[b-3xls83c19y] {
    grid-area: service-date;
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-overflow: ellipsis;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    align-self: center;
}

.type-cell[b-3xls83c19y] {
    grid-area: type;
}

.range-cell[b-3xls83c19y] {
    grid-area: range;
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-overflow: ellipsis;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    align-self: center;
}

.po-cell[b-3xls83c19y] {
    overflow: hidden;
    color: var(--clr-dn, #636363);
    text-overflow: ellipsis;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.content-container[b-3xls83c19y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0 1rem;
}

.footer-container[b-3xls83c19y] {
    display: flex;
    justify-content: space-between;
}

.grid-item[b-3xls83c19y] {
    max-width: 200px;
    min-height: 50px;
}

.grid-segment[b-3xls83c19y] {
    display: flex;
    padding: 0.25rem 0.75rem;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.25rem;
    width: 100%;
    
    &.warn {
        background-color: var(--clr-err50, #fbecec);
    }

    &.align-left[b-3xls83c19y] {
        text-align: left;
    }

    &.align-center[b-3xls83c19y] {
        text-align: right;
    }

    &.align-right[b-3xls83c19y] {
        text-align: right;
        justify-content: space-between;
    }
}

button.grid-segment:hover[b-3xls83c19y],
a.grid-segment:hover[b-3xls83c19y] {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1) inset;
}

button.grid-segment:not(.warn):hover[b-3xls83c19y],
a.grid-segment:not(.warn):hover[b-3xls83c19y] {
    border-top-left-radius: 1000vmax;
    border-bottom-left-radius: 1000vmax;
}

.grid-segment-icon[b-3xls83c19y] {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1; /* square */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000vmax;
    background-color: var(--clr-1s_10, #00A8941a);
    
    .warn & {
        background-color: var(--clr-err_50, #edb0b080);
    }
}

.grid-segment-labels[b-3xls83c19y] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 2.875rem;
}

.grid-segment-title[b-3xls83c19y] {
    overflow: visible;
    color: var(--clr-1p_80, #005b5ecc);
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    .warn & {
        color: var(--clr-err300, #d43f3f);
    }
}

.grid-segment-subtitle[b-3xls83c19y] {
    color: var(--clr-dn, #636363);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .875rem; /* 14px */
    line-height: 1.5;
}

.placeholder-segment-text[b-3xls83c19y] {
    width: 100%;
}

.pill[b-3xls83c19y] {
    background-color: var(--clr-dn_80, #636363cc);
    color: var(--clr-wht, #FAFEFF);
    width: fit-content;
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    
    &.placeholder {
        width: 90px;
        height: 24px;
    }
}

.tag-item[b-3xls83c19y],
.status-item[b-3xls83c19y],
.flag[b-3xls83c19y] {
    color: var(--text-color);
    background-color: var(--flag-color);
    width: fit-content;
    font-size: 1rem;
    white-space: nowrap;
    padding: 0.125rem 0.5rem;
}

.tag-item[b-3xls83c19y] {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
}

.status-item[b-3xls83c19y] {
    display: flex;
    align-items: center;
    justify-self: flex-end;
    margin-right: 0.75rem;
    padding: 0.125rem 0.75rem;
    border-radius: 1000vmax;
}

.tag-item[b-3xls83c19y],
.status-item[b-3xls83c19y] {
    &[data-status="pending"],
    &[data-status="completed"],
    &[data-status="scheduled"] {
        --flag-color: #adc4da7f;
        --text-color: #274e73;
    }

    &[data-status="billable"][b-3xls83c19y],
    &[data-status="posted"][b-3xls83c19y] {
        --flag-color: #fcc8b37f;
        --text-color: #ad5430;
    }

    &[data-status="invoiced"][b-3xls83c19y] {
        --flag-color: #c4c4c67f;
        --text-color: #4d4e51;
    }
}

.empty-date[b-3xls83c19y] {
    & .grid-segment-title {
        color: var(--clr-dn, #636363);
        font-weight: 400;
    }
}

.tonnage[b-3xls83c19y] {
    & .grid-segment-title {
        color: var(--clr-dn, #636363);
    }
}

.requester[b-3xls83c19y] {
    & .grid-segment-title {
        color: var(--clr-dn, #636363);
    }
}

[b-3xls83c19y] .oc-btn-textprimary:has(img) {
    column-gap: 0.125rem;
    font-size: 1rem;

    & span {
        top: -1px;
        position: relative;
    }
}

.footer-container.loading-state[b-3xls83c19y] {
    margin-top: 175px;
}

[b-3xls83c19y] .error-state {
    min-height: 350px;
    width: 100%;
    padding: 1rem;
    align-items: center;
    display: flex;
    flex-direction: column;
}
/* /Features/Assets/Components/AssetCard.razor.rz.scp.css */
.asset-card[b-s7z6sd8cjz] {
    width: 100%;
    max-width: 900px;
    height: 100%;
    min-height: 308px;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    background-color: white;
    background-position: 50% 62.5%;
    background-repeat: no-repeat;
    background-image: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/card-watermarks/forklift-watermark.svg");

    &.card-view:hover {
        box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
    }
}

.header-container[b-s7z6sd8cjz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 40px;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: #edededa6;

    & > .asset-name {
        color: var(--clr-blk, #112333);
        text-overflow: ellipsis;
        font-weight: 600;
        font-size: 1rem;
    }

    & > .asset-po[b-s7z6sd8cjz] {
        color: var(--clr-dn, #636363);
        font-size: 0.875rem; /* 14px */
        letter-spacing: 0.05em;
    }
}

.pill[b-s7z6sd8cjz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.5rem;
    width: fit-content;
    padding: 0.25rem 0.75rem;
    border-radius: 0.75rem;
    
    &.placeholder {
        width: 90px;
        height: 24px;
    }

    &.active[b-s7z6sd8cjz] {
        background: rgba(0, 91, 94, 0.10);
        color: var(--clr-1p, #005B5E);
    }

    &.inactive[b-s7z6sd8cjz] {
        background-color: var(--clr-dn_50, #6363637A);
        color: var(--clr-dn, #636363);
    }
}

.content-container[b-s7z6sd8cjz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0 1rem;
}

.usage-pill-container[b-s7z6sd8cjz] {
    grid-column: 1 / -1; /* Span entire row */
}

.grid-segment[b-s7z6sd8cjz] {
    display: flex;
    padding: 0.25rem 0.75rem;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.25rem;
    width: 100%;

    &.warn {
        background-color: var(--clr-err50,  #fbecec);
    }

    &.align-left[b-s7z6sd8cjz] {
        text-align: left;
    }

    &.align-center[b-s7z6sd8cjz] {
        text-align: right;
    }

    &.align-right[b-s7z6sd8cjz] {
        text-align: right;
        justify-content: space-between;
    }

    &.active .grid-segment-title[b-s7z6sd8cjz] {
        color: var(--clr-1p_80, #005b5ecc);
    }

    &.inactive .grid-segment-title[b-s7z6sd8cjz] {
        color: var(--clr-dn, #636363);
    }
}

button.grid-segment:hover[b-s7z6sd8cjz],
a.grid-segment:hover[b-s7z6sd8cjz] {
    box-shadow:0 0 4px 2px rgba(0, 0, 0, 0.1) inset;
}

button.grid-segment:not(.warn):hover[b-s7z6sd8cjz],
a.grid-segment:not(.warn):hover[b-s7z6sd8cjz] {
    border-top-left-radius: 1000vmax;
    border-bottom-left-radius: 1000vmax;
}

.grid-segment-icon[b-s7z6sd8cjz] {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1; /* square */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000vmax;
    background-color: var(--clr-1s_10, #00A8941a);
    .warn & {
        background-color: var(--clr-err_50, #edb0b080);
    }
}

.grid-segment-title[b-s7z6sd8cjz] {
    overflow: hidden;
    color: var(--clr-1p_80, #005b5ecc);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;

    .warn & {
        color: var(--clr-err300, #d43f3f);
    }
}

.grid-segment-subtitle[b-s7z6sd8cjz] {
    color: var(--clr-dn, #636363);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .875rem; /* 14px */
    line-height: 1.5;
}

.placeholder-segment-text[b-s7z6sd8cjz] {
    width: 100%;
}

.footer-container[b-s7z6sd8cjz] {
    display: flex;
    justify-content: space-between;
}

.no-contract-info[b-s7z6sd8cjz] {
    padding: 3px;
}
/* /Features/Assets/Components/AssetCardGridForJobsite.razor.rz.scp.css */
/* styles moved to WebApp/wwwroot/css/card-views-shared.css */
/* /Features/Assets/Components/AssetsGrid.razor.rz.scp.css */
.asset-name[b-lp2fcyany6] {
    display: flex;
    column-gap: 0.25rem;
}

.billed-usage-pill[b-lp2fcyany6] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 12px;
    gap: 8px;
    border-radius: 40px;
    background: rgba(0, 91, 94, 0.10);
    width: fit-content;
}

.billed-usage-pill > span[b-lp2fcyany6] {
    overflow: hidden;
    color: rgba(0, 91, 94, 0.80);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
}

.action-btns[b-lp2fcyany6] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    column-gap: 0.375rem;
}

.request-service-btn[b-lp2fcyany6] {
    cursor: not-allowed;
}
/* /Features/Assets/Components/AssetsGridForJobsite.razor.rz.scp.css */
.asset-name[b-44v22h1j63] {
    display: flex;
    column-gap: 0.25rem;
}

.billed-usage-pill[b-44v22h1j63] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 12px;
    gap: 8px;
    border-radius: 40px;
    background: rgba(0, 91, 94, 0.10);
    width: fit-content;
}

.billed-usage-pill > span[b-44v22h1j63] {
    overflow: hidden;
    color: rgba(0, 91, 94, 0.80);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
}

.action-btns[b-44v22h1j63] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    column-gap: 0.375rem;
}

.assets-grid-for-jobsite[b-44v22h1j63] {
    max-width: calc(100vw - 2rem); /* Prevent exceeding viewport width */
}

.request-service-btn[b-44v22h1j63] {
    cursor: not-allowed;
}
/* /Features/Assets/Components/LastInvoicedAssetsGrid.razor.rz.scp.css */
.asset-name[b-p8honc66c5] {
    display: flex;
    column-gap: 0.25rem;
}

.grid-header[b-p8honc66c5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 1.875rem;
}

.grid-section-heading[b-p8honc66c5] {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;

    strong {
        font-weight: 600 !important;
    }
}

[b-p8honc66c5] .error-state {
    position: relative;
    height: 6.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

[b-p8honc66c5] #last-invoiced-assets-sfgrid th {
    height: 2.5rem; /* 40px */
}

[b-p8honc66c5] #last-invoiced-assets-sfgrid td {
    height: 3.25rem; /* 52px */
    border-color: white !important;
}

[b-p8honc66c5] .asset-description-label {
    max-width: 80%;
}
/* /Features/AssetTimeline/Components/ActivityDetailsListGroupModal.razor.rz.scp.css */
.timeline-activity-list-popup[b-r7k55hqjti] {
    position: fixed;
}

.timeline-activities-list-selection[b-r7k55hqjti] {
    background: white;
    border-radius: 8px;
    position: absolute;
    right: calc(100% + 0.25rem);
    bottom: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    max-height: 140px;
    overflow: auto;
    box-shadow: var(--glass-shadow);
}

.flag[b-r7k55hqjti] {
    color: var(--text-color);
    background-color: var(--flag-color);
    width: fit-content;
    font-size: 1rem;
    white-space: nowrap;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem
}

.activity-list-item[b-r7k55hqjti] {
    --dot-color: #4c7dad;
    --flag-color: #adc4da7f;
    --text-color: #274e73;
    --dot-label-gap: 0.5rem;
    --outline-color: transparent;

    &:not(:first-child) {
        margin-top: 0.5rem;
    }

    .activity-list-item-button[b-r7k55hqjti] {
        display: flex;
        align-items: center;
        column-gap: var(--dot-label-gap);
        width: 100%;
    }

    &[data-status="scheduled"][b-r7k55hqjti],
    &[data-status="completed"][b-r7k55hqjti]{
        --dot-color: #4c7dad;
        --flag-color: #adc4da7f;
        --text-color: #274e73;

        &:hover {
            --dot-color: #386FA4;
            --outline-color: #224464cc;
        }

        &[aria-selected="true"][b-r7k55hqjti] {
            --dot-color: #386Fa4;
            --outline-color: #224464cc;
        }
    }

    &[data-status="posted"][b-r7k55hqjti] {
        --dot-color: #f88558;
        --flag-color: #fcc8b37f;
        --text-color: #ad5430;

        &:hover {
            --dot-color: #f77845;
            --outline-color: #97492acc;
        }

        &[aria-selected="true"][b-r7k55hqjti] {
            --dot-color: #f77845;
            --outline-color: #97492acc;
        }
    }

    &[data-status="invoiced"][b-r7k55hqjti] {
        --dot-color: #7d7d81;
        --flag-color: #c4c4c67f;
        --text-color: #4d4e51;

        &:hover {
            --dot-color: #6e6f73;
            --outline-color: #434446cc;
        }

        &[aria-selected="true"][b-r7k55hqjti] {
            --dot-color: #6e6f73;
            --outline-color: #434446cc;
        }
    }

    .dot[b-r7k55hqjti] {
        background-color: var(--dot-color);
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 1000vmax;
        position: relative;
        outline: 1px solid var(--outline-color);

        .dot-label {
            color: rgba(250, 254, 255, 0.90);
            display: flex;
            font-size: 1rem;
            line-height: 1.5;
            justify-content: center;
            align-items: center;
            transform: translateY(-2px);
        }

        &[b-r7k55hqjti]::after {
            content: '';
            position: absolute;
            display: block;
            top: 50%;
            right: calc(-1 * var(--dot-label-gap));
            height: 1px;
            width: var(--dot-label-gap);
            background-color: var(--clr-input-brdr, #979e9f);
        }
    }

    &[aria-selected="true"][b-r7k55hqjti] {
        .dot,
        .flag {
            outline: 2px solid var(--outline-color);
            box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.35);
        }
    }
}
/* /Features/AssetTimeline/Components/AssetTimelineCalendar.razor.rz.scp.css */
.overflow-container[b-reyzjqvv69] {
    --dot-size: 1.5rem;
    width: fit-content;
    height: fit-content;
    padding: 0;
    position: relative;
    margin-inline: auto;
    overflow: visible;
    
    .overflow-positioning-frame {
        position: absolute;
        inset-block: 0;
        inset-inline: 10rem;
        pointer-events: none;
    }
}

.main-container[b-reyzjqvv69] {
    --container-height: 325px;
    width: min(100vw, 1054px);
    background-color: #ffffff00;
    height: var(--container-height);
    border-radius: 0.5rem;
    position: relative;
    flex-shrink: 0;
    overflow-x: hidden;
    display: flex;
}

.faux-tool-tip[b-reyzjqvv69] {
    position: absolute;
    top: calc(50% - 200px);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    min-width: 350px;
    pointer-events: all;
}

.faux-tool-tip-close[b-reyzjqvv69] {
    --swell-size: 0.5rem;
    position: absolute;
    padding: var(--swell-size);
    right: calc(var(--swell-size) / -2);
    top: calc(var(--swell-size) / -2);
}

.activity-card[b-reyzjqvv69] {
    position: absolute;
    bottom: calc(50% + 70px);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    width: 350px;
    min-height: 300px;
    max-height: 500px;
    pointer-events: all;
    z-index: 4;
}

.close-activity-card[b-reyzjqvv69] {
    --swell-size: 0.5rem;
    position: absolute;
    padding: var(--swell-size);
    right: calc(var(--swell-size) / -2);
    top: calc(var(--swell-size) / -2);
}

.activity-card-header[b-reyzjqvv69] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 1rem;
    
    .tag-item {
        display: inline-block;
    }
}

.tag-item[b-reyzjqvv69],
.status-item[b-reyzjqvv69] {
    --flag-color: #adc4da7f;
    --text-color: #274e73;
    color: var(--text-color);
    background-color: var(--flag-color);
    width: fit-content;
    font-size: 1rem;
    white-space: nowrap;
    padding: 0.125rem 0.5rem;

    &[data-status="scheduled"],
    &[data-status="completed"] {
        --flag-color: #adc4da7f;
        --text-color: #274e73;
    }

    &[data-status="posted"][b-reyzjqvv69] {
        --flag-color: #fcc8b37f;
        --text-color: #ad5430;
    }

    &[data-status="invoiced"][b-reyzjqvv69] {
        --flag-color: #c4c4c67f;
        --text-color: #4d4e51;
    }

    &.active[b-reyzjqvv69] {
        &[data-status="scheduled"],
        &[data-status="completed"]{
            --flag-color: #adc4da7f;
            --text-color: #274e73;
        }

        &[data-status="posted"][b-reyzjqvv69] {
            --flag-color: #fcc8b37f;
            --text-color: #ad5430;
        }

        &[data-status="invoiced"][b-reyzjqvv69] {
            --flag-color: #c4c4c67f;
            --text-color: #4d4e51;
        }
    }

    &.inactive[b-reyzjqvv69] {
        &[data-status="scheduled"],
        &[data-status="completed"]{
            --flag-color: #ebf1f67f;
            --text-color: #5a87b37f;
        }

        &[data-status="posted"][b-reyzjqvv69] {
            --flag-color: #fef2ec7f;
            --text-color: #f88f657f;
        }

        &[data-status="invoiced"][b-reyzjqvv69] {
            --flag-color: #f1f1f17f;
            --text-color: #87878b7f;
        }
    }
}

.tag-item[b-reyzjqvv69] {
    border-radius: 4px;
    max-width: 100%;
}

.status-item[b-reyzjqvv69] {
    border-radius: 1000vmax;
}

.activity-date[b-reyzjqvv69] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.key-value-details-grid[b-reyzjqvv69] {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 0.25rem;
}

.key-value-details-grid[b-reyzjqvv69]  .details-key-value {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2/ span 2;
}

.key-value-details-grid[b-reyzjqvv69]  .details-key-value > label {
    color: var(--clr-blk, #112333);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.key-value-details-grid[b-reyzjqvv69]  .details-key-value > span {
    color: var(--clr-blk, #112333);
    font-size: 1rem;
    font-weight: 400;
    padding-left: 0.25rem;

    &:has(.oc-user-avatar) {
        .oc-user-avatar {
            display: inline-flex;
        }
    }
}

.reference-link[b-reyzjqvv69] {
    color: var(--clr-link, #3081DF);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-decoration: underline;
    cursor: pointer;
}

/* NOT COPY-PASTE */

.calendar-week[b-reyzjqvv69] {
    display: flex;
    width: 100%;
    justify-content: center;
}

.calendar-section[b-reyzjqvv69] {
    --number-of-sections: 7; /* Number of sections */
    --space: 5px; /* Margin value */
    --swell-size: 1.5rem;

    width: calc((100% / var(--number-of-sections)) - var(--space));
    overflow-y: hidden;
    padding: 0 var(--space); /* Optional: Add consistent spacing */
}

.calendar-pill-header[b-reyzjqvv69] {
    position: relative;
    z-index: 3;
    top: 3%;
    margin: 0 0.25rem;
    display: flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background-color: var(--clr-ln2, #f1f1f1);
    box-shadow: 0 4px 6px 0 rgba(102, 106, 107, 0.25);

    & span {
        color: #6e6f73;
        white-space: nowrap;
        font-size: 0.8125rem; /* 13px */
        line-height: 1.5;
        letter-spacing: 0.05em;
    }
}

.calendar-card[b-reyzjqvv69] {
    display: flex;
    padding: 1rem 0.25rem 0.25rem 0.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    height: 90%;
    position: relative;
    top: 0;
    overflow-y: auto;
}

.calendar-day-item-btn[b-reyzjqvv69] {
    --item-padding: 0.25rem;

    width: 100%;
    min-height: fit-content;
    overflow-x: hidden;
    border-radius: 0.5rem;
    padding: 0.25rem;
    &:hover {
        box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    }

    & .item-inner-container[b-reyzjqvv69] {
        box-sizing: border-box;
        clip-path: inset(0 0 0 0);
    }
}

.asset-ref[b-reyzjqvv69] {
    text-align: start;
    
    > span {
        color: var(--clr-btn-n, #6e6f73);
        font-size: 0.6875rem; /* 11px */
        line-height: 1.5;
        letter-spacing: 0.05em;
        
        &.faux-link {
            font-size: 0.8125rem; /* 13px */
            color: var(--clr-link, #3081DF);
            text-decoration: underline;
            padding: 0.125rem 0.5rem;
            margin-top: 0.375rem;
            display: block;
        }
    }
    
    &.inactive > span[b-reyzjqvv69] {
        color: #87878b;
    }
}

/* /Features/AssetTimeline/Components/AssetTimelineContentComponentToggle.razor.rz.scp.css */
.icons[b-80gvrwfiyy] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.icon[b-80gvrwfiyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 70%;
    border-radius: .25rem;
    padding: 0.5rem 0;
    margin: 0.25rem 0;
    cursor: pointer;
    height: 32px;
    & img {
        margin-bottom: -10px;
    }
}

.icon:hover[b-80gvrwfiyy] {
    opacity: 80%;
}

.icon:focus-visible[b-80gvrwfiyy] {
    outline-offset: 2px;
    outline: 2px solid var(--clr-1s);
}

.icon > img:nth-child(2)[b-80gvrwfiyy] {
    position: relative;
}

.icon > img:not(:only-child):nth-child(1)[b-80gvrwfiyy] {
    position: relative;
}

.icon[b-80gvrwfiyy]::after {
    content: '';
    width: 2rem;
    transform-origin: center;
    transform: scaleX(0);
    height: 0.125rem;
    position: relative;
    bottom: -.365rem;
    left: 0;
    background-color: var(--clr-1p, #005b5e);
}

.dark .icon[b-80gvrwfiyy]::after {
    background-color: #a1b5c3;
}

.icon.selected[b-80gvrwfiyy]::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
    .icon[b-80gvrwfiyy]::after {
        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}
/* /Features/AssetTimeline/Components/AssetTimelineModal.razor.rz.scp.css */
.timeline-white-backdrop[b-p7cz1qrf3w] {
    background: white;
    border-radius: 8px;
    margin-top: var(--vertical-offset);
}

.timeline-modal-header[b-p7cz1qrf3w]{
    padding-top: 0.5rem
}

.timeline-modal-header[b-p7cz1qrf3w],
.timeline-modal-footer[b-p7cz1qrf3w]{
    display: flex;
    justify-content: space-between;
}

.vendor-info[b-p7cz1qrf3w] {
    display: flex;
    column-gap: 0.5rem;
}

.asset-ref-pill[b-p7cz1qrf3w] {
    background-color: #ebf1f6;
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
}

.grid-main-content[b-p7cz1qrf3w]  .e-checkbox-wrapper .e-icons.e-frame,
.grid-main-content[b-p7cz1qrf3w]  .e-checkbox-wrapper .e-label {
    margin-top: 1rem;
}

.grid-main-content-actions[b-p7cz1qrf3w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.625rem;
}

.grid-main-content-actions-left[b-p7cz1qrf3w] {
    display: flex;
    align-items: end;
    column-gap: 1.25rem;
}

.grid-main-content-actions-left[b-p7cz1qrf3w]  .e-checkbox-wrapper {
    padding-bottom: 0.25rem; /* 4px */
}

.pill-wrapper[b-p7cz1qrf3w] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .25rem;
}

.asset-ref[b-p7cz1qrf3w] {
    color: var(--clr-blk, #112333);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.asset-name[b-p7cz1qrf3w] {
    color: #87878B;
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.delivery-date-title[b-p7cz1qrf3w],
.removal-date-title[b-p7cz1qrf3w],
.days-inactive-title[b-p7cz1qrf3w] {
    color: #87878B;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.delivery-date-content[b-p7cz1qrf3w] {
    font-size: 1rem;
    line-height: 1.5;
}

.delivery-date-content-link[b-p7cz1qrf3w],
.removal-date-content-link[b-p7cz1qrf3w] {
    color: var(--clr-link, #3081df) !important;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5;
    
    &:hover {;
        text-decoration: underline;
    }
}

.po-number[b-p7cz1qrf3w],
.removal-date-content[b-p7cz1qrf3w],
.days-inactive-content[b-p7cz1qrf3w],
.customer[b-p7cz1qrf3w],
.vendor[b-p7cz1qrf3w] {
    color: #87878B;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.customer[b-p7cz1qrf3w] {
    text-align: left;
}

.asset-details-summary[b-p7cz1qrf3w],
.vendor[b-p7cz1qrf3w] {
    text-align: right;
}

.timeline-legend[b-p7cz1qrf3w] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    
    .legend-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .legend-dot[b-p7cz1qrf3w] {
        width: 0.5rem;
        aspect-ratio: 1; /* 1:1 - square */
        border-radius: 1000vmax;
        background-color: var(--dot-color);
        
        &[data-status="scheduled"],
        &[data-status="completed"]{
            --dot-color: #386Fa4e5;
        }

        &[data-status="posted"][b-p7cz1qrf3w] {
            --dot-color: #f77845;
        }

        &[data-status="invoiced"][b-p7cz1qrf3w] {
            --dot-color: var(--clr-btn-n, #6e6f73);
        }
    }
    
    .legend-label[b-p7cz1qrf3w] {
        color: var(--clr-btn-n, #6e6f73);
        font-size: 1rem;
        line-height: 1.5;
    }
}

.timeline-newer-button[b-p7cz1qrf3w],
.timeline-older-button[b-p7cz1qrf3w],
.timeline-oldest-button[b-p7cz1qrf3w],
.timeline-newest-button[b-p7cz1qrf3w] {
    --button-size: 1.5rem;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-content: center;
    justify-content: center;
    position: absolute;
    transform: translateY(2.5rem);
    z-index: 10;
}

.timeline-newer-button[b-p7cz1qrf3w],
.timeline-older-button[b-p7cz1qrf3w] {
    top: calc(50% - (-6px + var(--button-size) + var(--vertical-offset)));
}

.timeline-oldest-button[b-p7cz1qrf3w],
.timeline-newest-button[b-p7cz1qrf3w] {
    bottom: calc(50% - (-18px + var(--button-size) + var(--vertical-offset)));
}

.timeline-older-button[b-p7cz1qrf3w],
.timeline-oldest-button[b-p7cz1qrf3w] { left: 2rem; }
.timeline-newer-button[b-p7cz1qrf3w],
.timeline-newest-button[b-p7cz1qrf3w] { right: 2rem; }

.timeline-bookend[b-p7cz1qrf3w] {
    --swell-size: 1.5rem;
    position: absolute;
    top: calc(50% - var(--vertical-offset));
    transform: translateY(calc(-50% + 2.5rem));
    cursor: not-allowed;

    &:has(.vertical-text-left) { left: 2rem; }
    &:has(.vertical-text-right)[b-p7cz1qrf3w] { right: 2rem; }
    
    & .vertical-text-left[b-p7cz1qrf3w] {
        writing-mode: vertical-lr;
        text-orientation: sideways;
        transform: rotate(180deg);
        line-height: 1;
    }

    & .vertical-text-right[b-p7cz1qrf3w] {
        writing-mode: vertical-rl;
        text-orientation: sideways;
        line-height: 1;
    }

    span[b-p7cz1qrf3w] {
        color: rgba(135, 135, 139, 0.80);
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0.02em;
    }
}
/* /Features/AssetTimeline/Components/AssetTimelineTimeline.razor.rz.scp.css */
.overflow-container[b-i2yljyg0uw] {
    --dot-size: 1.5rem;
    --even-dot-spacing: 3rem;
    --odd-dot-spacing: 9rem;
    width: fit-content;
    height: fit-content;
    padding: 0;
    position: relative;
    margin-inline: auto;
    overflow: visible;
    
    .overflow-positioning-frame {
        position: absolute;
        inset-block: 0;
        pointer-events: none;
    }

    &:has(.timeline.even-dots[data-position="current"])[b-i2yljyg0uw] {
        .overflow-positioning-frame {
            inset-inline: var(--even-dot-spacing);
        }
    }
    &:has(.timeline.odd-dots[data-position="current"])[b-i2yljyg0uw] {
        .overflow-positioning-frame {
            inset-inline: var(--even-dot-spacing) var(--odd-dot-spacing);
        }
    }
}

.main-container[b-i2yljyg0uw] {
    --container-height: 289px;
    width: min(100vw, calc(1054px - 2rem));
    background-color: #ffffff00;
    height: var(--container-height);
    border-radius: 0.5rem;
    position: relative;
    flex-shrink: 0;
    overflow-x: hidden;
}

.timeline[b-i2yljyg0uw] {
    --tl-thickness: 2px;
    height: var(--tl-thickness);
    background-color: #adc4da;
    position: absolute;
    top: calc(50% - (var(--tl-thickness)/2));
    inset-inline: var(--even-dot-spacing);

    &.odd-dots {
        inset-inline: var(--even-dot-spacing) var(--odd-dot-spacing);

        &[data-position="next"]:not(.moving-right, .moving-left) {
            inset-inline: calc(var(--odd-dot-spacing) * -10) var(--odd-dot-spacing);
        }
    }
    
    &.odd-dots[data-position="previous"][b-i2yljyg0uw] {
        .dot:last-child .data-flag {
            visibility: hidden;
        }
    }

    &[data-position="previous"][b-i2yljyg0uw] {
        transform: translateX(-108%);
        
        .dot-label {
            pointer-events: none;
        }
    }
    
    &[data-position="current"][b-i2yljyg0uw] {
        transform: translateX(0);
    }
    
    &[data-position="next"][b-i2yljyg0uw] {
        transform: translateX(108%);
        
        .dot-label {
            pointer-events: none;
        }
    }
    
    &[data-position="unimportant"][b-i2yljyg0uw] {
        display: none;
    }
}

.timeline:has(.dot[aria-selected="true"]) .dot[aria-selected="false"]:not(#a#b)[b-i2yljyg0uw] {
    --outline-color: transparent;
    
    .group-date,
    .extra-data {
        color: #87878B;
    }
    
    &.group-dot:not(.all-pending, .all-posted, .all-invoiced)[b-i2yljyg0uw] {
        background: radial-gradient(95.97% 95.97% at 22.86% 14.58%, #C4C4C6 0%, rgba(248, 143, 101, 0.96) 33%, #F8D679 66%, #5A87B3 100%);
        
        .data-flag .data-banner {
            color: #87878B;
            background: linear-gradient(98deg, rgba(196, 196, 198, 0.50) 0%, rgba(252, 200, 179, 0.50) 34.39%, rgba(252, 232, 179, 0.50) 68.77%, rgba(235, 241, 246, 0.50) 104.2%);
        }
    }
    
    &[data-status="scheduled"][b-i2yljyg0uw],
    &[data-status="completed"][b-i2yljyg0uw],
    &.all-pending[b-i2yljyg0uw] {
        --dot-color: #6B93BB;
        --flag-color: #ebf1f67f;
        --text-color: #5a87b3;
    }

    &[data-status="posted"][b-i2yljyg0uw],
    &.all-posted[b-i2yljyg0uw] {
        --dot-color: #f9a584 ;
        --flag-color: #fef2ec7f;
        --text-color: #f88f65;
    }

    &[data-status="invoiced"][b-i2yljyg0uw],
    &.all-invoiced[b-i2yljyg0uw]{
        --dot-color: #939397;
        --flag-color: #f1f1f1;
        --text-color: #87878b;
    }
}

.dot[b-i2yljyg0uw] {
    --dot-color: #386Fa4e5;
    --flag-color: #adc4da7f;
    --text-color: #274e73;
    --outline-color: transparent;
    top: calc(-1 * ((var(--dot-size) - var(--tl-thickness)) / 2));
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 1000vmax;
    transform: translateX(calc(-1 * var(--dot-size)/2));
    position: absolute;
    background-color: var(--dot-color);
    outline: 1px solid var(--outline-color);
    box-shadow: -1px -1px 4px 0 rgba(34, 68, 100, 0.25) inset,
                0 0 4px 0 rgba(0, 0, 0, 0.05) inset,
                1px 2px 4px 0 rgba(173, 196, 218, 0.25) inset;
    
    .dark & {
        --dot-color: #4c7dad;
        --flag-color: #adc4da7f;
        --text-color: #274e73;
        box-shadow: -1px -1px 4px 0 rgba(26, 75, 109, 0.25) inset,
                    0 0 4px 0 rgba(0, 0, 0, 0.05) inset,
                    1px 2px 4px 0 rgba(161, 181, 195, 0.25) inset;;
    }
    
    &[aria-selected="true"][b-i2yljyg0uw] {
        outline-width: 2px;
        font-weight: 700;
    }

    .dot-label[b-i2yljyg0uw] {
        --swell-y-size: 2.5rem;
        --swell-x-size: 5.55rem;
        --dot-overshoot: 0.5rem;
        position: absolute;
        width: var(--dot-size);
        color: #fafeffe5;
        font-size: 1rem;
        line-height: 1.5;
        inset-block: calc((var(--container-height) / -2) + var(--swell-y-size));
        
        &[data-nudge="true"] {
            transform: translateY(-1px);
        }
    }

    &:nth-of-type(odd)[b-i2yljyg0uw] {
        &:has(.dot-label:hover),
        &[aria-selected="true"] {
            .data-line {
                top: calc(var(--space-for-flag) - 2px);
            }
        }
        
        .data-line[b-i2yljyg0uw] {
            top: var(--space-for-flag);

            .data-flag {
                top: calc(-1 * var(--flag-height));
                left: calc(-1 * var(--flag-x-offset));

                &:has(.extra-data) {
                    top: calc(-1 * (var(--flag-height) + 1.5rem));
                }
            }
        }
        
        .dot-label[b-i2yljyg0uw] {
            padding: 0 0 var(--swell-y-size) var(--swell-x-size);
            bottom: calc(var(--dot-overshoot) * -1);
            left: calc(var(--dot-overshoot) * -1);
            clip-path: polygon(0 100%, 0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%);
            
            .dot-label-str {
                position: absolute;
                bottom: var(--dot-overshoot);
                left: var(--dot-overshoot);
                width: var(--dot-size);
                text-align: center;
            }
        }
    }

    &:nth-of-type(even)[b-i2yljyg0uw] {
        &:has(.dot-label:hover),
        &[aria-selected="true"] {
            .data-line {
                top: calc(50% + (var(--dot-size))/ 2 + var(--tl-thickness) + 2px);
            }
        }
        
        .data-line[b-i2yljyg0uw] {
            top: calc(50% + (var(--dot-size))/ 2 + var(--tl-thickness));

            .data-flag {
                bottom: calc(-1 * (var(--flag-height) + 0.25rem));
                right: calc(-1 * var(--flag-x-offset));
                align-items: end;
            }
        }

        .dot-label[b-i2yljyg0uw] {
            padding: var(--swell-y-size) var(--swell-x-size) 0 0;
            top: calc(var(--dot-overshoot) * -1);
            right: calc(var(--dot-overshoot) * -1);
            clip-path: polygon(0 50%, 50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%);

            .dot-label-str {
                position: absolute;
                top: var(--dot-overshoot);
                right: var(--dot-overshoot);
                width: var(--dot-size);
                text-align: center;
            }
        }
    }

    &[data-status="scheduled"][b-i2yljyg0uw],
    &[data-status="completed"][b-i2yljyg0uw],
    &.all-pending[b-i2yljyg0uw] {
        --dot-color: #4c7dad;
        --flag-color: #adc4da7f;
        --text-color: #274e73;
        
        &:has(.dot-label:hover) {
            --dot-color: #386FA4;
            --outline-color: #224464cc;
        }
        
        &[aria-selected="true"][b-i2yljyg0uw] {
            --dot-color: #386Fa4;
            --outline-color: #224464cc;
        }
    }

    &[data-status="posted"][b-i2yljyg0uw],
    &.all-posted[b-i2yljyg0uw] {
        --dot-color: #f88558;
        --flag-color: #fcc8b37f;
        --text-color: #ad5430;

        &:has(.dot-label:hover) {
            --dot-color: #f77845;
            --outline-color: #97492acc;
        }

        &[aria-selected="true"][b-i2yljyg0uw] {
            --dot-color: #f77845;
            --outline-color: #97492acc;
        }
    }

    &[data-status="invoiced"][b-i2yljyg0uw],
    &.all-invoiced[b-i2yljyg0uw] {
        --dot-color: #7d7d81;
        --flag-color: #c4c4c67f;
        --text-color: #4d4e51;

        &:has(.dot-label:hover) {
            --dot-color: #6e6f73;
            --outline-color: #434446cc;
        }

        &[aria-selected="true"][b-i2yljyg0uw] {
            --dot-color: #6e6f73;
            --outline-color: #434446cc;
        }
    }
    
    &.group-dot:not(.all-pending, .all-posted, .all-invoiced)[b-i2yljyg0uw] {
        background: radial-gradient(96% 96% at 23% 15%, #7D7D81 0%, rgba(248, 133, 88, 0.96) 33%, #F7C745 66%, #4C7DAD 100%);

        .data-flag .data-banner {
            color: #4d4e51;
            background: linear-gradient(98deg, rgba(196, 196, 198, 0.50) 0%, rgba(252, 200, 179, 0.50) 35%, rgba(252, 232, 179, 0.50) 69%, rgba(173, 196, 218, 0.50) 104%);
        }
        
        &:has(.dot-label:hover):not([aria-selected="true"])[b-i2yljyg0uw] {
            background: radial-gradient(95.97% 95.97% at 22.86% 14.58%, #7D7D81 0%, rgba(248, 133, 88, 0.96) 33%, #F7C745 66%, #4C7DAD 100%);
            outline: 1px solid #c4c4c6;

            .data-flag .data-banner {
                color: #4d4e51;
                background: linear-gradient(98deg, rgba(196, 196, 198, 0.50) 0%, rgba(252, 200, 179, 0.50) 35%, rgba(252, 232, 179, 0.50) 69%, rgba(173, 196, 218, 0.50) 104%);
            }
        }
        
        &[aria-selected="true"][b-i2yljyg0uw] {
            background: radial-gradient(95.97% 95.97% at 22.86% 14.58%, #7D7D81 0%, rgba(248, 133, 88, 0.96) 33%, #F7C745 66%, #4C7DAD 100%);
            outline: 2px solid #c4c4c6;

            .data-flag .data-banner {
                color: var(--clr-dn2, #4d4e51);
                background: linear-gradient(98deg, rgba(196, 196, 198, 0.50) 0%, rgba(252, 200, 179, 0.50) 35%, rgba(252, 232, 179, 0.50) 69%, rgba(173, 196, 218, 0.50) 104%);
            }
        }
    }
}

.group-item-click-target[b-i2yljyg0uw] {
    display: flex;
    column-gap: 0.5rem;
}

.data-frame[b-i2yljyg0uw] {
    width: 300px;
    height: var(--container-height);
    position: absolute;
    left: 0;
    top: 0;
    transform:
        translateX(calc(-50% + ((var(--dot-size) - var(--tl-thickness)) / 2)))
        translateY(calc(-50% + ((var(--dot-size) - var(--tl-thickness)) / 2)));
    transform-origin: center;
    pointer-events: none;
}

.data-line[b-i2yljyg0uw] {
    --flag-x-offset: 0.25rem;
    --flag-line-thickness: 1px;
    --flag-height: 3.25rem;
    --space-for-flag: calc(var(--flag-height) + 1.75rem);
    position: absolute;
    width: var(--flag-line-thickness);
    height: calc(((var(--container-height) - var(--dot-size)) / 2) - var(--space-for-flag));
    left: 50%;
    background-color: #979E9F;
}

.data-flag[b-i2yljyg0uw] {
    height: var(--flag-height);
    display: flex;
    flex-direction: column;
    position: absolute;
}

.data-banner[b-i2yljyg0uw] {
    width: fit-content;
    padding: 0.125rem 0.5rem;
    color: var(--text-color);
    background-color: var(--flag-color);
    white-space: nowrap;
    border-radius: 4px;
    font-size: 1rem;
}

.group-date[b-i2yljyg0uw],
.extra-data[b-i2yljyg0uw] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.dot.truncate-extra-data .extra-data[b-i2yljyg0uw],
.dot:last-child:nth-of-type(odd) .extra-data[b-i2yljyg0uw] {
    text-overflow: ellipsis;
    overflow-x: hidden;
    max-width: 6.5rem; /* 104px */
    display: block;
    flex-shrink: 0;
}

.faux-tool-tip[b-i2yljyg0uw] {
    position: absolute;
    top: calc(50% - 200px);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    min-width: 350px;
    pointer-events: all;
}

.faux-tool-tip-close[b-i2yljyg0uw] {
    --swell-size: 0.5rem;
    position: absolute;
    padding: var(--swell-size);
    right: calc(var(--swell-size) / -2);
    top: calc(var(--swell-size) / -2);
}

@keyframes moving-left-from-center-b-i2yljyg0uw {
    0% { transform: translateX(0); }
    100% { transform: translateX(-108%); }
}
@keyframes moving-left-from-right-b-i2yljyg0uw {
    0% { transform: translateX(108%); }
    100% { transform: translateX(0); }
}

@keyframes moving-right-from-center-b-i2yljyg0uw {
    0% { transform: translateX(0); }
    100% { transform: translateX(108%); }
}
@keyframes moving-right-from-left-b-i2yljyg0uw {
    0% { transform: translateX(-108%); }
    100% { transform: translateX(0); }
}

@media(prefers-reduced-motion: no-preference) {
    .moving-left[b-i2yljyg0uw] {
        &[data-position="next"] {
            animation: moving-left-from-right-b-i2yljyg0uw 750ms ease-in-out forwards;
        }
        &[data-position="current"][b-i2yljyg0uw] {
            animation: moving-left-from-center-b-i2yljyg0uw 750ms ease-in-out forwards;
        }
    }   
    .moving-right[b-i2yljyg0uw] {
        &[data-position="previous"] {
            animation: moving-right-from-left-b-i2yljyg0uw 750ms ease-in-out forwards;
        }
        &[data-position="current"][b-i2yljyg0uw] {
            animation: moving-right-from-center-b-i2yljyg0uw 750ms ease-in-out forwards;
        }
    }
}
/* /Features/AssetTypeBreakdown/Components/AssetTypeBreakdownCard.razor.rz.scp.css */
.no-selection-message[b-ddkk3ow8ss] {
    color: grey;
    flex-grow: 1;
    text-align: center;
}

.row[b-ddkk3ow8ss] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.row-1[b-ddkk3ow8ss] {
    justify-content: space-between;
}

.row-2[b-ddkk3ow8ss] {
    margin-left: 18%;
}

.row .active-asset-count[b-ddkk3ow8ss] {
    box-shadow: 0 4px 6px -4px rgba(24, 39, 75, 0.12),
                0 8px 8px -4px rgba(24, 39, 75, 0.08);
    border-radius: 0.5rem;
    min-width: 10.4375rem; /* 167px */
}

.detail[b-ddkk3ow8ss] {
    display: flex;
    justify-content: end;
    align-items: center;
    text-align: right;
    padding: 0.5rem;
}

.title[b-ddkk3ow8ss] {
    color: rgba(17, 35, 51, 0.80);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 2.5rem; /* 40px */
}

.subtitle[b-ddkk3ow8ss] {
    color: var(--clr-dn, #636363);
    font-size: 1rem;
}

.title-subtitle.active-asset .title[b-ddkk3ow8ss],
.title-subtitle.active-asset .subtitle[b-ddkk3ow8ss] {
    color: var(--clr-blk, #112333);
}

[b-ddkk3ow8ss] .segment-error {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

[b-ddkk3ow8ss] .details-error {
    width: 300px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

[b-ddkk3ow8ss] .asset-type-breakdown-chart {
    margin-left: calc(-1 * var(--sf-ghost-padding, 10px));
}
/* /Features/AssetTypeBreakdown/Components/AssetTypeBreakdownChart.razor.rz.scp.css */
.asset-type-breakdown-chart[b-lb1eyzilgq] {
    /* SF puts a 10px padding around the donut that you can't get rid of (it's drawn in SVG and cannot be controlled in css) */
    --sf-ghost-padding: 10px;
    height: 100%;
    width: 100%;
}

.asset-type-breakdown-chart[b-lb1eyzilgq]  .e-accumulationchart svg {
    cursor: pointer !important;
}
/* /Features/AssetTypeBreakdown/Components/AssetTypeBreakdownForJobsiteCard.razor.rz.scp.css */
.no-selection-message[b-6dtq7vxkog] {
    color: grey;
}

.asset-type-breakdown-for-jobsite-card[b-6dtq7vxkog] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem;
    padding: 0.5rem;
}

.show-all-toggle-container[b-6dtq7vxkog] {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0.5rem;

    & > div {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 0.5rem;
    }
}

.asset-type-breakdown-for-jobsite-card-grid[b-6dtq7vxkog] {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 12rem 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "chart asset-count invoiced-service-count"
        "chart billable-spend invoiced-spend";
    grid-column-gap: 1rem;
}

.chart[b-6dtq7vxkog] {
    grid-area: chart;
}

.active-asset-count[b-6dtq7vxkog] {
    grid-area: asset-count;
    box-shadow: 0 4px 6px -4px rgba(24, 39, 75, 0.12), 0 8px 8px -4px rgba(24, 39, 75, 0.08);
    border-radius: 0.5rem;
}

.invoiced-service-count[b-6dtq7vxkog] {
    grid-area: invoiced-service-count;
}

.billable-spend[b-6dtq7vxkog] {
    grid-area: billable-spend;
}

.invoiced-spend[b-6dtq7vxkog] {
    grid-area: invoiced-spend;
}

.detail[b-6dtq7vxkog] { 
    display: flex;
    justify-content: end;
    align-items: center;
    text-align: right;
    padding: 0.5rem;
}

.title[b-6dtq7vxkog] {
    color: rgba(17, 35, 51, 0.80);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 2.5rem; /* 40px */
    line-height: 1.5;
}

.subtitle[b-6dtq7vxkog] {
    color: var(--clr-dn, #636363);
    font-size: 1rem;
    line-height: 1.5;
    text-align: right;
}

.title-subtitle.active-asset .title[b-6dtq7vxkog],
.title-subtitle.active-asset .subtitle[b-6dtq7vxkog] {
    color: var(--clr-blk, #112333);
}

[b-6dtq7vxkog] .segment-error {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

[b-6dtq7vxkog] .details-error {
    width: 200%;
    height: 225%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

[b-6dtq7vxkog] .donut-text {
    color: rgba(99, 99, 99, 0.80);
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: -0.0375em;
} 

.empty-asset-count[b-6dtq7vxkog] {
    background-color: var(--clr-ln2, #f1f1f1);
    display: flex;
    flex-direction: column;

    & .empty-asset-count-text {
        color: var(--clr-dn, #636363);
        text-align: center;
        font-size: 1.375rem; /* 22px */
        line-height: 1.5;
        letter-spacing: -0.05em;
    }

    & .empty-asset-count-subtext[b-6dtq7vxkog] {
        color: rgba(17, 35, 51, 0.80);
        font-size: 1rem;
        line-height: 1.5;
        text-align: left;
    }
}

[b-6dtq7vxkog] button.contact-us-button {
    font-weight: 700 !important;
    padding: 0;
}

.billable-spend-btn[b-6dtq7vxkog] {
    cursor: pointer;
    height: 100%;
    width: 100%;
    border-radius: 0.25rem;
    padding: 0.25rem;
}

.billable-spend-btn:hover[b-6dtq7vxkog] {
    box-shadow: rgba(0, 0, 0, 0.08) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.08) 0px 6px 16px 0px inset, rgba(198, 198, 198, 0.5) 0px 8px 15px 0px inset;
} 
/* /Features/AssetTypeBreakdown/Components/AssetTypeBreakdownForJobsiteInvoiceKPIs.razor.rz.scp.css */
.chart[b-70qnh8qcfr] {
    /* SF puts a 10px padding around the donut that you can't get rid of (it's drawn in SVG and cannot be controlled in css) */
    --sf-ghost-padding: 10px;
    width: calc(104px + var(--sf-ghost-padding) * 2);
    height: calc(104px + var(--sf-ghost-padding) * 2);
    grid-area: pie;
    justify-items: center;
    align-content: center;
    position: relative;
    margin: calc(-1 * var(--sf-ghost-padding)); /* negative of SF padding */

    .hover-icon {
        --hover-icon-inset: 0.5rem;
        display: none;
        position: absolute;
        right: var(--hover-icon-inset);
        bottom: var(--hover-icon-inset);
    }

    &[b-70qnh8qcfr]::after {
        content: "";
        position: absolute;
        inset: var(--sf-ghost-padding);
        border-radius: 1000vmax;
    }

    &:hover[b-70qnh8qcfr] {
        &::after {
            box-shadow: var(--glass-shadow);
        }

        .hover-icon[b-70qnh8qcfr] {
            display: block;
        }
    }
}
/* /Features/AssetTypeBreakdown/Components/AssetTypeBreakdownModal.razor.rz.scp.css */
/* /Features/Autopay/AutopayPaymentMode.razor.rz.scp.css */
.radio-buttons-row[b-fvb0i7zt19] {
    display: flex;
    column-gap: 1rem;
    margin-bottom: 0.5rem;
}

.radio-option[b-fvb0i7zt19] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    width: fit-content;
    img {
        position: relative;
    }
}

.e-radio-wrapper[b-fvb0i7zt19] {
    label > span {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;
    }

    &:has(input:checked) label > span[b-fvb0i7zt19] {
        font-weight: 500;
    }
}

.section-header[b-fvb0i7zt19] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}

#payment-mode-info[b-fvb0i7zt19] {
    display: inline-block;
    margin-block-end: -0.25rem;
}
/* /Features/Autopay/EnrollInAutopayModal.razor.rz.scp.css */
.section-header[b-fn7zcc3ffi] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.section-subheader[b-fn7zcc3ffi] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.autopay-form[b-fn7zcc3ffi] {
    margin-bottom: 0.5rem;
}
/* /Features/Autopay/ManageAutopayModal.razor.rz.scp.css */
.disabled-status-reason[b-m5pp2laklk] {
    padding: 0.25rem 0.75rem;
    color: var(--clr-err-bld, #D44040);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    border: 1px solid var(--clr-err-bld, #D44040);
    background-color: var(--clr-err50, #fbecec);
    margin-bottom: 0.5rem;
}
/* /Features/Autopay/Notifications/AutopayNotification.razor.rz.scp.css */
.auto-pay-notifications[b-031zkve35r] {
    margin-bottom: 0.5rem;
}

.notification-row[b-031zkve35r] {
    display: flex;
}

.to-recipient[b-031zkve35r] {
    color: var(--clr-blk, #112333);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.recipient-action-container[b-031zkve35r] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 16px;
}

.to-recipient + .recipient-action-container[b-031zkve35r] {
    margin-top: 0;
}

.remove-recipient-input[b-031zkve35r],
.add-recipient-input[b-031zkve35r] {
    cursor: pointer;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    margin: 0;
    padding: 0;

    img {
        transform-origin: center;
    }
}

.remove-recipient-input[b-031zkve35r] {
    color: var(--clr-err-bld, #d44040);
    margin-right: 0.5rem;
}

.add-recipient-input[b-031zkve35r] {
    display: flex;
    align-items: center;
    color: var(--clr-1p, #005b5e);

    span:not(.screen-reader-only) {
        height: 1.25rem;
    }

    &:hover span:not(.screen-reader-only)[b-031zkve35r] {
        opacity: 80%;
    }
}

[b-031zkve35r] .form-group-full {
    width: 100%;
}

@media(prefers-reduced-motion: no-preference) {
    .remove-recipient-input[b-031zkve35r],
    .add-recipient-input[b-031zkve35r] {
        img {
            transition: scale 150ms ease-in-out;
        }

        &:hover img[b-031zkve35r] {
            scale: 1.25;
        }
    }
}

.section-header[b-031zkve35r] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    margin-top: 0.5rem;
}

@media(prefers-reduced-motion: reduce) {
    .remove-recipient-input:hover[b-031zkve35r],
    .add-recipient-input:hover[b-031zkve35r] {
        opacity: 80%;
    }
}
/* /Features/Autopay/PaymentMethods/AutopayPaymentMethodsEnroll.razor.rz.scp.css */
.payment-method-radio-selector-container[b-04i6qxt1sx] {
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
    padding-top: 0.5rem;
    padding-inline: 0.75rem;
    padding-bottom: 0.25rem;
    position: relative;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);

    & > .top-row {
        display: grid;
        grid-template-columns: 1rem 1fr;
        grid-template-rows: auto;
        column-gap: 0.375rem; /* 6px */
        grid-template-areas:
            "radio label";
    }
    
    .radio-label-text[b-04i6qxt1sx] {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
    }

    &:hover[b-04i6qxt1sx],
    &:has(.e-radio:checked)[b-04i6qxt1sx] {
        background-color: var(--clr-bh, #dfebeb);
    }

    &:has(.e-radio:checked) .radio-label-text[b-04i6qxt1sx] {
        font-weight: 600;
    }

    &.payment-card[b-04i6qxt1sx] {
        grid-template-columns: 1rem 38px 1fr;
        grid-template-areas:
            "radio card-icon label"
            "radio blank details";
    }

    &.disabled[b-04i6qxt1sx] {
        cursor: not-allowed;
        background-color: #c4c4c6; /* this color does not exist in brand colors */ 
    }
}

[b-04i6qxt1sx] .payment-method-radio-selector {
    grid-area: radio;
}

.account-card-rect[b-04i6qxt1sx] {
    grid-area: card-icon;
    width: 100%;
    height: 24px;
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    align-self: center;
    
    &:not(:has(img))::before {
        /* not localized because its a faux icon and also is defined here in the CSS */
        content: "ACH";
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-dn_50, #63636380);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.account-label[b-04i6qxt1sx] {
    grid-area: label;
    text-align: left;
}

.account-details[b-04i6qxt1sx] {
    grid-area: details;
    width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new-method-container[b-04i6qxt1sx] {
    border-radius: 8px;
    width: 100%;
    padding: 0.75rem 0;
    padding-inline: 0.75rem;
    position: relative;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
    background-color: var(--clr-bh, #dfebeb);

    & > .top-row {
        cursor: pointer;
    }
}

.payment-method-selector[b-04i6qxt1sx],
.new-method-container[b-04i6qxt1sx] {
    margin: 0.5rem 0;
}

.top-row[b-04i6qxt1sx] {
    display: flex;
}

.selected-new-method-radio-label[b-04i6qxt1sx] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.new-method-radio-label[b-04i6qxt1sx] {
    color: var(--clr-1p, #005b5e);
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    text-shadow: 0 4px 6px -4px rgba(24, 39, 75, 0.12),
                 0 8px 8px -4px rgba(24, 39, 75, 0.08);
    
    &.disabled {
        color: var(--clr-btn-n, #6e6f73);
        text-shadow: none;
    }
}

.payment-method-section-list-item-container[b-04i6qxt1sx] {
    background-color: #ffffffb3;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    width: 100%;

    &.selected:not(:focus-visible) {
        outline: 1px solid var(--clr-1s, #00A894);
        outline-offset: -1px;
    }

    &:hover[b-04i6qxt1sx] {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
        background-color: #ffffff;
    }
}

.payment-method-section-list-item-container.selected[b-04i6qxt1sx] {
    background-color: var(--clr-bh, #dfebeb);

    &:hover {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
        background-color: var(--clr-bh, #dfebeb);
    }

    &[b-04i6qxt1sx]  .default-marker {
        background-color: var(--clr-1p, #005b5e) !important;
        color: var(--clr-bh, #dfebeb) !important;
    }
}
/* /Features/Autopay/PaymentMethods/AutopayPaymentMethodsForm.razor.rz.scp.css */
[b-mir0hujl4w] .mode-selector {
    margin-bottom: 1rem;
}
/* /Features/Autopay/PaymentMethods/AutopayPaymentMethodsManage.razor.rz.scp.css */
[b-79v7ppwv1z] .default-marker {
    background-color: var(--clr-1p, #005b5e) !important;
    color: var(--clr-bh, #dfebeb) !important;
}

.new-method-btn[b-79v7ppwv1z] {
    display: flex;
    justify-content: end;
}

.payment-method-section-list-item-container[b-79v7ppwv1z] {
    background-color: #ffffffb3;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    width: 100%;

    &.selected:not(:focus-visible) {
        outline: 1px solid var(--clr-1s, #00A894);
        outline-offset: -1px;
    }

    &:hover[b-79v7ppwv1z] {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
    }
}

.payment-method-section-list-item-container.selected[b-79v7ppwv1z] {
}

.payment-method-section-list-item-container:hover[b-79v7ppwv1z] {
    background-color: #ffffff;
}
/* /Features/Autopay/PaymentMethods/AutopayPaymentMethodsSection.razor.rz.scp.css */
.payment-method-section[b-b6dtlk1f9c] {
    padding: 0.5rem 0;
}

.section-header[b-b6dtlk1f9c] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}
/* /Features/Autopay/TermsOfService/AutopayTermsOfService.razor.rz.scp.css */
.autopay-terms-of-service[b-ckr4wos08j] {
    max-height: 2.25rem;
}

.autopay-terms-of-service[b-ckr4wos08j],
.autopay-credit-acknowledgement[b-ckr4wos08j] {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    
    &:has(input:checked) label {
        font-weight: 600;
    }
}

.agreement-label[b-ckr4wos08j],
.acknowledgement-label[b-ckr4wos08j] {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.agreement-label[b-ckr4wos08j] {
    white-space: nowrap;
}

.acknowledgement-label[b-ckr4wos08j] {
    padding-right: 0.25rem;
    display: inline;
}

a[b-ckr4wos08j],
.faux-link[b-ckr4wos08j] {
    color: var(--clr-link, #3081df);
    text-decoration: underline;
    cursor: pointer;
    
    &:hover {
        opacity: 75%;
    }
}

[b-ckr4wos08j] .oc-validation-wrapper {
    margin-top: 0.25rem;
    min-height: 3rem;
}

[b-ckr4wos08j] .validation-message {
    color: var(--clr-err-bld, #d44040);
    font-size: 0.6875rem; /* 11px */
    line-height: 1.5;
    letter-spacing: 0.05em;
}

[b-ckr4wos08j] .mini-contact-us-popup-wrapper {
    display: inline;
    margin-left: -0.375rem;
}

[b-ckr4wos08j] #contact-us-mini-popup {
    transform: translateX(8rem);
}

[b-ckr4wos08j] .faux-link {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.section-header[b-ckr4wos08j] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}
/* /Features/BillingPreferences/Components/BillingPreferencesModal.razor.rz.scp.css */
.billing-preferences-modal-title[b-al1fln7n4m] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.05em;
}

.billing-pref-prompt-section[b-al1fln7n4m] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    margin-top: 0.25rem;
}

.contact-us-prompt-text[b-al1fln7n4m] {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--clr-blk_75, #112333bf);
}

.key-value-list[b-al1fln7n4m] {
    display: grid;
    grid-template-columns: fit-content(155px) 1fr;
    grid-auto-rows: min-content;
}

[b-al1fln7n4m] .details-key-value {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2 / span 2;
    column-gap: 0;

    label,
    span {
        font-size: 1rem;
        line-height: 1.5;
        color: var(--clr-blk_75, #112333bf);
        padding: 0.125rem 0.25rem;
    }
    
    label[b-al1fln7n4m] {
        font-weight: 600;
    }
    span[b-al1fln7n4m] {
        font-weight: 500;
    }
}

[b-al1fln7n4m] .error-state {
    position: relative;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 138px;
}
/* /Features/Catalog/ComingSoonCatalogPreview.razor.rz.scp.css */
.catalog-preview-outside-wrapper[b-fj8upor2ux] {
    width: 100%;
    height: calc(100% - 3rem);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 1rem;
}

.catalog-preview-outer-frame[b-fj8upor2ux] {
    width: 100%;
    flex-grow: 1;
    position: relative;
}

.white-insert[b-fj8upor2ux] {
    position: absolute;
    inset: 0.75rem;
    background: white;
    border-radius: 8px;
}

.gray-insert[b-fj8upor2ux] {
    position: absolute;
    inset: 0.625rem 1rem;
    background-color: var(--clr-ln2, #f1f1f1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon-wrapper[b-fj8upor2ux] {
    padding: 1.1875rem; /* 19px */
}

.feature-header[b-fj8upor2ux] {
    font-size: 1.5625rem; /* 25px */
    line-height: 1.5;
    letter-spacing: -0.05em;
    color: var(--clr-dn, #636363);
}

.feature-description[b-fj8upor2ux] {
    text-align: center;
    margin-block: 0.5rem 1rem;
}
/* /Features/CompletedJobs/Components/CompletedJobsGrid.razor.rz.scp.css */
.open-invoices-critical[b-io9g4ojxxg] {
    color: var(--clr-err300, #d43f3f);
}

.arrow-circle-right[b-io9g4ojxxg] {
    --down-shift: 0.5rem;
    display: none;
    filter: drop-shadow(0px 8px 8px rgba(24, 39, 75, 0.08)) drop-shadow(0px 4px 6px rgba(24, 39, 75, 0.12));
}

[b-io9g4ojxxg] .e-row:hover .arrow-circle-right {
    display: block;
    transform: translateY(var(--down-shift));
    margin-top: calc(var(--down-shift) * -1);
}

[b-io9g4ojxxg] .e-spinner-pane.e-spin-show ~ .e-gridcontent {
    background-color: #00000030;
}

[b-io9g4ojxxg] .e-grid .e-spinner-pane {
    display: none;
}
/* /Features/CompletedJobs/Components/CompletedJobsModal.razor.rz.scp.css */
.dialog-content-container[b-skqd9c0493] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.action-items[b-skqd9c0493] {
    display: flex;
    column-gap: 1rem;

    & > .my-jobsites-toggle {
        align-items: center;
        display: flex;

        & > span {
            margin-left: 0.25rem;
            color: var(--clr-blk, #112333);
            font-family: Inter, Matter, Arial, sans-serif;
            font-size: 0.825rem; /* 13px */
            line-height: 1.5;
            letter-spacing: 0.03em;
        }
    }
}

.banner-item[b-skqd9c0493] {
    height: 2.5rem;
    width: 100%;
    border-radius: 0.25rem;
    background-color: var(--clr-success50, #eef3ea);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
    box-sizing: content-box;

    & > .circle {
        background-color: #B8CCA880;
        border-radius: 1000px;
        padding: 0.5rem;
        margin-right: 0.5rem;
    }

    & > span[b-skqd9c0493] {
        color: var(--clr-success400, #395b1f);
        font-family: Inter, Matter, Arial, sans-serif;
        font-size: 1rem;
        line-height: 1.5;
    }
}

[b-skqd9c0493] .e-switch-wrapper {
    width: 2.25rem;
    height: 1.25rem;
}

[b-skqd9c0493] .e-switch-inner {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

[b-skqd9c0493] .e-switch-off {
    background-color: #ABABAE;
}

[b-skqd9c0493] .e-switch-handle {
    border: 2px solid #AAB7C4;
}
/* /Features/ContactUs/MiniContactUsPopup.razor.rz.scp.css */
.mini-contact-us-popup-wrapper[b-mxpe58eg5c] {
    position: relative;
    overflow: visible;
    isolation: isolate; /* scopes child component z-indexes to new stacking context */
}

.contact-us-popup[b-mxpe58eg5c] {
    position: absolute;
    
    &.anchored-center {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    &.anchored-tl[b-mxpe58eg5c]
    {
        left: 50%;
        top: calc(100% + 0.25rem);
    }
    &.anchored-tr[b-mxpe58eg5c]
    {
        right: 50%;
        top: calc(100% + 0.25rem);
    }
    &.anchored-bl[b-mxpe58eg5c] {
        left: 50%;
        bottom: 75%;
    }
    &.anchored-br[b-mxpe58eg5c] {
        right: 50%;
        bottom: 75%;
    }
}

.contact-info > *[b-mxpe58eg5c] {
    flex-shrink: 0;
}

.close-contact-popup[b-mxpe58eg5c] {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 1;
}
/* /Features/Dashboard/Components/DashboardAssetsCard.razor.rz.scp.css */
.dashboard-assets-card[b-n94nmrvuqo] {
    height: 100%;
    width: 100%;
}

.flex-container[b-n94nmrvuqo] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
}

.dashboard-assets-card-value[b-n94nmrvuqo] {
    overflow: hidden;
    color: white;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 2.5rem;
    font-weight: 600;
}

.dashboard-assets-card-label[b-n94nmrvuqo] {
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.625rem;
}

[b-n94nmrvuqo] .kpi-load-error {
    height: 100%;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (height > 63.75rem) { /* viewports taller than 1020px, adjusted for user font size settings */
    .flex-container[b-n94nmrvuqo] {
        justify-content: center;
    }
}
/* /Features/Dashboard/Components/DashboardContactCard.razor.rz.scp.css */
.dashboard-contact-card[b-im7qw1hfsj] {
    height: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-card-header[b-im7qw1hfsj] {
    color: var(--clr-blk, #112333);
    text-overflow: ellipsis;
    font-size: 1.625rem;
    line-height: 1.5;
}

.contact-card-message[b-im7qw1hfsj] {
    color: var(--clr-blk, #112333);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    max-height: 3rem;
    overflow-y: auto;
    max-width: unset;
    
    > span {
        display: inline-block;
    }
}

.contact-card-footer[b-im7qw1hfsj] {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* /Features/Dashboard/Components/DashboardGridSection.razor.rz.scp.css */
.dashboard-grid-section[b-re9wj2c0y7] {
    display: grid;
    grid-template-areas:
        "jobsites jobsites assets assets invoices invoices"
        "services services services spotlight spotlight spotlight"
        "services services services message message message";
    grid-gap: 1rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 15rem 24rem 12rem;
}

.invoices[b-re9wj2c0y7] {
    grid-area: invoices;
}

.jobsites[b-re9wj2c0y7] {
    grid-area: jobsites;
}

.assets[b-re9wj2c0y7] {
    grid-area: assets;
}

.services[b-re9wj2c0y7] {
    grid-area: services;
}

.spotlight[b-re9wj2c0y7] {
    grid-area: spotlight;
}

.message[b-re9wj2c0y7] {
    grid-area: message;
}

.white-card[b-re9wj2c0y7] {
    border-radius: 16px;
    background: #FFF;

    /* Glass Shadow/Blurr */
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(7.5px);
}

.green-card[b-re9wj2c0y7] {
    border-radius: 16px;
    background: #005B5E;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(7.5px);
}

.grey-card[b-re9wj2c0y7] {
    border-radius: 16px;
    background: radial-gradient(26397.7% 141.42% at 0% 0%, rgba(198, 198, 198, 0.81) 0%, rgba(198, 198, 198, 0.63) 100%);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}


@media (height > 63.75rem) { /* viewports taller than 1020px, adjusted for user font size settings */
    .dashboard-grid-section[b-re9wj2c0y7] {
        height: 100%;
        grid-template-rows: 5fr 8fr 4fr;
        /* mirror the 15rem 24rem 12rem defined outside media query, but switch to FR and reduce fractions */
    }
}
/* /Features/Dashboard/Components/DashboardInvoicesCard.razor.rz.scp.css */
.dashboard-invoices-card[b-23c76aw85n] {
    height: 100%;
    width: 100%;
    position: relative;
}

.corner-container[b-23c76aw85n] {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
}

.last-payment-date[b-23c76aw85n] {
    color: var(--clr-1p_80, #005b5ecc);
    font-size: 1rem;
}

.last-payment-amount[b-23c76aw85n] {
    color: var(--clr-1p_80, #005b5ecc);
    font-size: 1.5rem;
    font-weight: 600;
}

.flex-container[b-23c76aw85n] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
}

.dashboard-invoices-card-value[b-23c76aw85n] {
    overflow: hidden;
    color: var(--clr-1p, #005B5E);
    text-align: center;
    text-overflow: ellipsis;
    font-size: 2.5rem;
    font-weight: 600;
}

.dashboard-invoices-card-label[b-23c76aw85n] {
    color: var(--clr-1p, #005B5E);
    font-size: 1.625rem;
    font-weight: 400;
}

[b-23c76aw85n] .kpi-load-error {
    height: 100%;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (height > 63.75rem) { /* viewports taller than 1020px, adjusted for user font size settings */
    .flex-container[b-23c76aw85n] {
        justify-content: center;
    }
}
/* /Features/Dashboard/Components/DashboardJobsitesCard.razor.rz.scp.css */
.dashboard-jobsites-card[b-2lele6dooi] {
    height: 100%;
    width: 100%;
}

.flex-container[b-2lele6dooi] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
}

.dashboard-jobsites-card-value[b-2lele6dooi] {
    overflow: hidden;
    color: white;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 2.5rem;
    font-weight: 600;
}

.dashboard-jobsites-card-label[b-2lele6dooi] {
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.625rem;
    font-weight: 400;
}

[b-2lele6dooi] .kpi-load-error {
    height: 100%;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (height > 63.75rem) { /* viewports taller than 1020px, adjusted for user font size settings */
    .flex-container[b-2lele6dooi] {
        justify-content: center;
    }
}
/* /Features/Dashboard/Components/DashboardProductSpotlightCard.razor.rz.scp.css */
.dashboard-product-spotlight-card[b-yp9yjd7wex] {
    --card-padding: 1.5rem;

    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas: 
        "header header"
        "details image"
        "footer footer";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 3rem 1fr 2rem;
    row-gap: 0;
    column-gap: 1rem;
    padding: var(--card-padding);
}

.spotlight-header[b-yp9yjd7wex] {
    grid-area: header;
    color: var(--clr-dn, #636363);
    font-size: 2rem;
    font-weight: 400;
    line-height: 150%; 
    display: flex;
    justify-content: start;
    align-items: center;
}

.spotlight-details[b-yp9yjd7wex] {
    grid-area: details;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spotlight-details .spotlight-details-content[b-yp9yjd7wex] {
    & span,
    & li {
        color: var(--clr-dn, #636363);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
    }

    & li[b-yp9yjd7wex] {
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & div[b-yp9yjd7wex] {
        margin-top: 0.5rem;
    }

    & ul[b-yp9yjd7wex] {
        padding-left: var(--card-padding);
    }
}

.spotlight-details .spotlight-details-content[b-yp9yjd7wex] {
    & .spotlight-details-heading,
    & .spotlight-details-description,
    & .features-heading {
        font-weight: 600;
    }
}

.spotlight-image[b-yp9yjd7wex] {
    grid-area: image;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spotlight-footer[b-yp9yjd7wex] {
    grid-area: footer;
    display: flex;
    justify-content: end;
    align-items: end;
}

[b-yp9yjd7wex] .view-catalog-btn[disabled] {
    padding: 0.25rem 1.5rem !important;
    background-color: var(--clr-dn, #636363) !important;
}

.learn-more-btn-wrapper[b-yp9yjd7wex] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

[b-yp9yjd7wex] .learn-more-btn-wrapper > button {
    padding: 0;
    column-gap: 0;

    &::after {
        width: 100% !important;
        left: 0 !important;
        bottom: 0 !important;
    }
}
/* /Features/Dashboard/Components/DashboardQuickLinks.razor.rz.scp.css */
.dashboard-quick-links[b-gtr32avogr] {
    height: 100%;
    border-radius: 1rem;
    background: #FFF;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    padding: 1.5rem;
}

.quick-links-icon[b-gtr32avogr] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 5rem;
    background: rgba(0, 168, 148, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.8625rem;
}

h3[b-gtr32avogr] {
    margin: 0.625rem 0;
    color: var(--clr-dn, #636363);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.5;
}

.quick-links-container[b-gtr32avogr] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    height: 50%;
}

.quick-links-container .quick-links-content[b-gtr32avogr] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: start;
    align-items: start;
}
/* /Features/Dashboard/Components/DashboardSearchBar.razor.rz.scp.css */
.dashboard-search-bar[b-xr0qmymubb] {
    --ux-defined-search-width: 1132px;
    --page-inline-margins: 1.25rem;
    --info-circle-plus-fleg-col-gap: 2rem;
    width: 100%;
    align-content: center;
    justify-items: center;
    position: relative;
}

[b-xr0qmymubb] .search-bar {
    flex-grow: 1;
    height: 2.625rem;
}

[b-xr0qmymubb] .tooltip-circle {
    flex-shrink: 0;
}

.search-container[b-xr0qmymubb], .search-row[b-xr0qmymubb] {
    width: fit-content;
    height: fit-content;
}

.search-row[b-xr0qmymubb] {
    width: min(var(--ux-defined-search-width) + var(--info-circle-plus-fleg-col-gap), calc(100vw - (2 * var(--page-inline-margins))));
    display: flex;
    column-gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.search-results-container[b-xr0qmymubb] {
    --cell-padding-vertical: 0.25rem;
    --cell-padding-horizontal: 0.5rem;
    --row-padding-vertical: 0.625rem;
    --row-padding-horizontal: 0.25rem;

    margin-top: 0.25rem;
    background: white;
    border-radius: 1rem;
    z-index: 5;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 3.5rem;
    left: 50%;
    transform: translateX(calc(-50% - var(--info-circle-plus-fleg-col-gap)/2));
    width: min(
        var(--ux-defined-search-width) ,
        calc(100vw - (2 * var(--page-inline-margins)) - var(--info-circle-plus-fleg-col-gap))
    );
}

.search-results-header[b-xr0qmymubb] {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--clr-ln, #eaeaea);
    color: #434446;
    opacity: 0.75;
    font-size: 1rem;
    line-height: 1.5;
}

.search-results-wrapper[b-xr0qmymubb] {
    max-height: 560px;
    overflow-y: auto;
}

.search-results-container table.search-results[b-xr0qmymubb] {
    table-layout: fixed; /* forces table to respect widths of columns */
    width: 100%;         /* make table fill its container */
    border-collapse: collapse; /* optional: removes gaps between cells */
}

.search-results-footer[b-xr0qmymubb] {
    padding: 0.75rem;
}

[b-xr0qmymubb] .view-all-btn {
    padding: 0;
}

[b-xr0qmymubb] .view-all-btn::after {
    width: 100% !important;
    left: 0 !important;
}

.search-results-container .item-row[b-xr0qmymubb] {
    height: 3rem;
    cursor: pointer;

    &:hover {
        background-color: #EFF3F4;
    }

    &:hover .name-col span[b-xr0qmymubb] {
        opacity: 0.75;
    }
}

.search-results-container td[b-xr0qmymubb] {
    padding: calc(var(--cell-padding-vertical) + var(--row-padding-vertical)) var(--cell-padding-horizontal);
    position: relative;
}

.search-results-container td:first-child[b-xr0qmymubb] {
    padding-left: calc(var(--cell-padding-horizontal) + var(--row-padding-horizontal));
}

.search-results-container td:last-child[b-xr0qmymubb] {
    padding-right: calc(var(--cell-padding-horizontal) + var(--row-padding-horizontal));
}

.name-col[b-xr0qmymubb],
.address-col[b-xr0qmymubb],
.po-col[b-xr0qmymubb] {
    line-height: 1.5;

    & span {
        overflow: hidden;       /* required for ellipsis */
        text-overflow: ellipsis; /* truncates overflowing text */
        white-space: nowrap;    /* prevents wrapping */
    }
}

.name-col[b-xr0qmymubb] {
    width: 35%;
}

.address-col[b-xr0qmymubb] {
    width: 45%;
}

.po-col[b-xr0qmymubb] {
    width: 20%;
}

.name-col[b-xr0qmymubb],
.search-results-container .item-row.no-records[b-xr0qmymubb] {
    color: var(--clr-1p, #005B5E);
    font-size: 1rem;
}

.address-col[b-xr0qmymubb],
.po-col[b-xr0qmymubb] {
    color: var(--clr-dn, #636363);
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.02em;
}

.po-col[b-xr0qmymubb] {
    text-align: right;
}

.search-results-container .item-row.no-records[b-xr0qmymubb] {
    display: block;
    line-height: 1.5;
    width: 100%;
    cursor: not-allowed;
    padding: calc(var(--cell-padding-vertical) + var(--row-padding-vertical)) calc(var(--cell-padding-horizontal) + var(--row-padding-horizontal));
}

.search-results-container[b-xr0qmymubb]  .item-row.no-records {
    display: block;
    width: 100%;
}

.search-results-container[b-xr0qmymubb]  .error-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 7rem;
}

[b-xr0qmymubb] .job-labels-spacer {
    display: inline-block;
}

.dashboard-search-bar-tooltip[b-xr0qmymubb] {
    filter: drop-shadow(0 2px 6px rgba(102, 106, 107, 0.25));
}

@media (prefers-reduced-motion: no-preference) {
    .dashboard-search-bar-tooltip[b-xr0qmymubb] {
        transition: transform 250ms ease-in-out;
        
        &:hover {
            transform-origin: center;
            transform: scale(1.1);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-search-bar-tooltip:hover[b-xr0qmymubb] {
        opacity: 0.75;
    }
}
/* /Features/Dashboard/Components/DashboardServicesCard.razor.rz.scp.css */
.dashboard-services-card[b-nvx67hig14] {
    width: 100%;
    height: 100%;
}

.flex-container[b-nvx67hig14] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 1.5rem;
}

.dashboard-services-card-header[b-nvx67hig14],
.dashboard-services-card-footer[b-nvx67hig14] {
    flex-shrink: 0;
}

.dashboard-services-card-header[b-nvx67hig14] {
    color: var(--clr-dn, #636363);
    font-size: 1.625rem;
    line-height: 1.5;
}

.dashboard-services-card-footer[b-nvx67hig14] {
    text-align: center;
    align-content: center;
    justify-items: center;
}

.services-list[b-nvx67hig14] {
    margin-block: 1.125rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;
    flex-grow: 1;
    overflow-y: auto;
}

.upcoming-services-row[b-nvx67hig14] {
    display: grid;
    grid-template-columns: 6.75rem repeat(3, 1fr);
    gap: 0.5rem;
    align-items: end;
    padding-block: 0.5rem;
}

.service-date-col[b-nvx67hig14],
.jobsite-col[b-nvx67hig14],
.asset-col[b-nvx67hig14],
.service-c0l[b-nvx67hig14] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-date-col[b-nvx67hig14],
.asset-col[b-nvx67hig14],
.jobsite-name[b-nvx67hig14] {
    font-size: 1rem;
    line-height: 1.5;
}

.jobsite-col[b-nvx67hig14] {
    .jobsite-number {
        text-align: right;
        font-size: 0.8125rem; /* 13px */
        line-height: 1.5;
        letter-spacing: 0.02em;
    }
}

.dashboard-truncate[b-nvx67hig14] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-nvx67hig14] .view-all-btn {
    padding: 0.25rem 1.5rem;
}

[b-nvx67hig14] .services-grid-load-error {
    height: 100%;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[b-nvx67hig14] .services-list-skeleton {
    margin: 1rem 0;
}

[b-nvx67hig14] .mini-contact-us-popup-wrapper {
    display: inline-block;
    vertical-align: baseline;
}

.no-upcoming-container[b-nvx67hig14] {
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.no-upcoming-content[b-nvx67hig14] {
    width: 90%; 
    text-align: left; 
    display: inline; 
    align-items: center; 
    color: var(--clr-dn, #636363);
}

.jobsite-number[b-nvx67hig14] {
    font-size: 0.8125rem;
}
/* /Features/InquiryModal/InquiryModal.razor.rz.scp.css */
.inquiry-modal-header[b-2myoiw2fhq] {
    display: flex;
    justify-content: space-between;
}

.inquiry-modal-content > *[b-2myoiw2fhq] {
    padding-bottom: 5px;
}
/* /Features/InvoicedServices/Components/InvoicedServicesForJobsiteGrid.razor.rz.scp.css */
[b-94y5q0fxkp] .e-spinner-pane.e-spin-show ~ .e-gridcontent {
    background-color: #00000030;
}

[b-94y5q0fxkp] .e-grid .e-spinner-pane {
    display: none;
}

.invoiced-services-record-count[b-94y5q0fxkp] {
    color: var(--clr-dn, #636363);
}

.asset-name[b-94y5q0fxkp] {
    display: flex;
    align-items: center;
    column-gap: 0.375rem;
    transform: translateY(6px);
}

.shift-up-3-px[b-94y5q0fxkp] {
    transform: translateY(-3px);
}
/* /Features/InvoicedServices/Components/InvoicedServicesForJobsiteModal.razor.rz.scp.css */
.dialog-content-container[b-fmnx07dx7m] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.action-items[b-fmnx07dx7m] {
    display: flex;
    column-gap: 1rem;
    margin-bottom: 0.5rem;
}
/* /Features/InvoicedServices/Components/InvoicedServicesGrid.razor.rz.scp.css */
[b-qivn6u4aah] .e-spinner-pane.e-spin-show ~ .e-gridcontent {
    background-color: #00000030;
}

[b-qivn6u4aah] .e-grid .e-spinner-pane {
    display: none;
}

.invoiced-services-record-count[b-qivn6u4aah] {
    color: var(--clr-dn, #636363);
}

[b-qivn6u4aah] .asset-name {
    display: flex;
    align-items: center;
    column-gap: 0.375rem;
    transform: translateY(6px);
}

.shift-up-3-px[b-qivn6u4aah] {
    transform: translateY(-3px);
}
/* /Features/InvoicedServices/Components/InvoicedServicesModal.razor.rz.scp.css */
.dialog-content-container[b-vtc2e10ujc] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.action-items[b-vtc2e10ujc] {
    display: flex;
    column-gap: 1rem;
    margin-bottom: 0.5rem;
}
/* /Features/JobsiteDetails/Components/Invoices/InvoicesForJobsiteGrid.razor.rz.scp.css */
.search-sort-and-select[b-wteac5y2kw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

[b-wteac5y2kw] td:has(.actions-btn-group) > div:has(.actions-btn-group) {
    transform: translateY(0.625rem);
}

.jobsite-invoices-grid-wrapper[b-wteac5y2kw] {
    position: relative;
}

.pay-invoices-action-button-container[b-wteac5y2kw] {
    position: absolute;
    right: 0;
    top: -3.6rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 0.5rem;

    & .pay-invoices-action-button {
        padding: 0.5rem 1rem 0.55rem;
    }
}

[b-wteac5y2kw] .error-state {
    height: calc(100svh - 30rem);
    text-align: center;
    justify-items: center;
    align-content: center;
    border-radius: 8px;
}
/* /Features/JobsiteDetails/Components/KPIsHeader/AssetsKPIs.razor.rz.scp.css */
.assets-kpis[b-ed3e4g465d] {
    width: 100%;
    height: 100%;
    display: grid;
    /* Figma shows 400px 400px 538px so for fr units, its reduced to 4 4 5.5 doubled (8 8 11) */
    grid-template-columns: 8fr 8fr 11fr; 
    grid-template-areas: "card-one card-two card-three";
    column-gap: 1rem;
}

.kpi-card[b-ed3e4g465d] {
    background-color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    
    &:has(.contact-us-to-add-contact) {
        padding: 1rem;
    }
}

.first-card[b-ed3e4g465d] {
    grid-area: card-one;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

.second-card[b-ed3e4g465d] {
    grid-area: card-two;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

.third-card[b-ed3e4g465d] {
    grid-area: card-three;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
}

[b-ed3e4g465d] .error-state {
    position: relative;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
} 

.data-card-section[b-ed3e4g465d] {
    padding: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    margin-top: 0.3125rem;
}

button.data-card-section[b-ed3e4g465d] {
    .data-card-value-wrapper,
    .data-card-label{
        transform: translateY(-3px);
    }
}

.data-card-section.active[b-ed3e4g465d],
button.data-card-section:hover[b-ed3e4g465d] {
    border-radius: 8px;
    background: white;
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.08) inset, 0 6px 16px 0 rgba(0, 0, 0, 0.08) inset, 0 8px 15px 0 rgba(198, 198, 198, 0.50) inset;
}

.data-card-value-wrapper[b-ed3e4g465d] {
    width: 100%;
}

.data-card-value-wrapper:has(.data-card-icon-wrapper)[b-ed3e4g465d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.data-card-label[b-ed3e4g465d] {
    text-align: right;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.data-card-value[b-ed3e4g465d] {
    display: block;
    overflow: hidden;
    color: var(--clr-blk, #112333);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 2.5rem;
    line-height: 1.5;
    letter-spacing: -0.05em;
    padding-right: 2px;
}

[b-ed3e4g465d] .kpi-big-value-skeleton {
    padding-block: 0.5rem;
}

.pie-chart[b-ed3e4g465d] {
    max-width: 112px;
    max-height: 112px;
    overflow: hidden;
}
/* /Features/JobsiteDetails/Components/KPIsHeader/InvoicesKPIs.razor.rz.scp.css */
.jobsite-invoice-kpis[b-162849pprn] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "spend assets balance";
    column-gap: 2rem;
    height: 100%;
}

.kpis-section-label[b-162849pprn],
.po-spends-label[b-162849pprn] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--clr-dn_80, #636363cc);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.kpis-section-label[b-162849pprn] {
    top: -1rem;
}

.po-spends-label[b-162849pprn] {
    top: -0.25rem;
}

.kpi-card[b-162849pprn] {
    --kv-pair-rows: 76px 1fr;
    background-color: white;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    padding: 1rem;
    position: relative;
    
    &.top-po-spends {
        grid-area: spend;
    }
    &.assets-by-type[b-162849pprn] {
        grid-area: assets;
        display: flex;
        justify-content: space-between;
        
        .kpi-kv-pair {
            display: grid;
            grid-template-rows: var(--kv-pair-rows);
            text-align: right;
        }
    }
    &.total-outstanding[b-162849pprn] {
        grid-area: balance;
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-template-rows: var(--kv-pair-rows);
        grid-template-areas:
            "icon  key-value"
            "label key-value";
        
        .icon-wrapper {
            --icon-circle-size: 3rem;
            margin-top: 14px;
            grid-area: icon;
            align-content: center;
            justify-items: center;
            width: var(--icon-circle-size);
            height: var(--icon-circle-size);
            border-radius: 1000vmax;
            background-color: var(--clr-bh, #dfebeb);
        }
        
        .kpi-kv-pair[b-162849pprn] {
            text-align: right;
            grid-area: key-value;
            display: grid;
            grid-template-rows: subgrid;
        }
    }
    
    &:has(.spend-po-message-icon)[b-162849pprn] {
        align-content: end;
    }
}

.top-po-spend-list[b-162849pprn] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.po-spend-list-item[b-162849pprn] {
    --marker-size: 1.3125rem; /* 21px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    &::marker {
        visibility: hidden;
    }
}

.list-item-label[b-162849pprn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
}

.list-number-marker[b-162849pprn] {
    width: var(--marker-size);
    height: var(--marker-size);
    border-radius: 1000vmax;
    align-content: center;
    text-align: center;
    background-color: var(--clr-bh, #dfebeb);
    color: var(--clr-1p_80, #005b5ecc);
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
}

.po-spend-po-number[b-162849pprn],
.no-po-label[b-162849pprn],
.po-spend-amount[b-162849pprn] {
    font-size: 1rem;
    line-height: 1.5;
}

.po-spend-po-number[b-162849pprn] {
    color: var(--clr-blk_75, #112333bf);
}

.no-po-label em[b-162849pprn] {
    font-style: italic !important;
}

.no-po-label[b-162849pprn] {
    color: var(--clr-dn_50, #63636380);
}

.list-item-label:has(.e-skeleton)[b-162849pprn] {
    width: 30%;
}

.po-spend-amount[b-162849pprn] {
    color: var(--clr-dn, #636363);
    
    &:has(.e-skeleton) {
        width: 40%;
    }
}

.kpi-kv-value[b-162849pprn] {
    color: var(--clr-blk_75, #112333bf);
    font-size: 2.5rem;
    line-height: 1.5;
    letter-spacing: -0.05em;
    align-content: center;
}

.kpi-kv-label[b-162849pprn] {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.empty-spend-kpo-message[b-162849pprn] {
    margin-top: 0.5rem;
    color: var(--clr-btn-n, #6e6f73);
    max-height: 5rem;
    overflow-x: hidden;

    & .use-po-tip {
        font-weight: 700;
    }
    
    &:has(.lightbulb-icon)[b-162849pprn] {
        padding-left: 1.5em;
        text-indent: -2em;
    }
}

.spend-po-message-icon[b-162849pprn] {
    display: inline;
    
    &.exclaim-icon {
        margin-right: 0.25rem;
        margin-bottom: -4px;
    }
    &.lightbulb-icon[b-162849pprn] {
        margin-bottom: -6px;
    }
}

[b-162849pprn] .error-state {
    border-radius: 1rem;
    text-align: center;
    align-content: center;
    justify-items: center;
}

@media (width < 1590px) {
    .jobsite-invoice-kpis[b-162849pprn] {
        column-gap: 0.5rem;
    }
}
/* /Features/JobsiteDetails/Components/KPIsHeader/JobsiteInfoCard.razor.rz.scp.css */
.jobsite-info-card[b-p88jmm9sm1] {
    --card-padding: 1.5rem;
    background-color: var(--clr-1p, #005b5e);
    border-radius: 8px;
    padding: var(--card-padding);
    height: 100%;
    min-width: 15.25rem; /* 244px */
    position: relative;
}

.card-header[b-p88jmm9sm1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24rem;
    margin-top: 0.125rem;
}

.card-address[b-p88jmm9sm1] {
    max-height: 3rem;
    overflow: auto;
    flex-grow: 1;
}

.back-to-jobs-btn[b-p88jmm9sm1] {
    --main-color: white !important;
    position: absolute;
    right: var(--card-padding);
    bottom: 0;
    padding-inline: 0 !important;

    &::after {
        width: 100%;
        inset-inline: 0;
    }

    img[b-p88jmm9sm1] {
        transform: translateY(-0.125rem); /* 2px */
    }
}

.card-pre-header[b-p88jmm9sm1] {
    display: flex;
    align-items: center;
    gap: 1rem;

    &:has(.job-po){
        display: grid;
        grid-template-columns: fit-content(120px) 1fr fit-content(150px);
    }
}

.job-id[b-p88jmm9sm1] {
    padding: 0.125rem 0.5rem;
    border-radius: 1000vmax;
    color: white;
    background-color: var(--clr-1s, #00A894);
    white-space: nowrap;
}

.job-po[b-p88jmm9sm1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-po[b-p88jmm9sm1],
.job-start[b-p88jmm9sm1] {
    color: var(--clr-ln2, #f1f1f1);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.job-start[b-p88jmm9sm1] {
    margin-left: auto;
    white-space: nowrap;
}

[b-p88jmm9sm1] .error-state {
    position: relative;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* /Features/JobsiteDetails/Components/KPIsHeader/KpiHeaderContainer.razor.rz.scp.css */
.details-kpi-header-container[b-sf2vrf25g7] {
    height: 100%;
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    grid-template-areas:
        "left right";
    grid-column-gap: 1rem;
}

.right-card[b-sf2vrf25g7] {
    background: #f5f5f5;
    padding: 0.75rem;
    border-radius: 1rem;
}
/* /Features/JobsiteDetails/Components/KPIsHeader/OverviewKPIs.razor.rz.scp.css */
.kpi-card-grid[b-cs68wrijki] {
    width: 100%;
    height: 100%;
    display: grid;
    /* Figma shows 400px 400px 538px so for fr units, its reduced to 4 4 5.5 doubled (8 8 11) */
    grid-template-columns: 8fr 8fr 11fr; 
    grid-template-areas: "contact1 contact2 balance";
    column-gap: 1rem;
}

.kpi-card[b-cs68wrijki] {
    background-color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    
    &:has(.contact-us-to-add-contact) {
        padding: 1rem;
    }
}

.primary-contact-card[b-cs68wrijki] {
    grid-area: contact1;
}

.secondary-contact-card[b-cs68wrijki] {
    grid-area: contact2;
}

.standing-balance-card[b-cs68wrijki] {
    grid-area: balance;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

.contact-info[b-cs68wrijki] {
    --icon-size: 3rem;
    display: grid;
    column-gap: 0.5rem;
    grid-template-columns: var(--icon-size) 1fr;
    grid-template-rows: 1.875rem 1fr;
    height: var(--icon-size);
    grid-template-areas:
            "icon name"
            "icon title";
    
    em {
        font-style: italic !important;
    }
    
    .avatar-wrapper[b-cs68wrijki] {
        grid-area: icon;
        aspect-ratio: 1; /* square */
        width: var(--icon-size);
        border-radius: 1000vmax;
        background-color: var(--clr-1s_10, #00A8941a);
        justify-items: center;
        align-content: center;
    }
    
    .contact-name[b-cs68wrijki] {
        grid-area: name;
        white-space: nowrap;
    }
    .contact-title[b-cs68wrijki] {
        grid-area: title;
    }
}

.contact-phone-info[b-cs68wrijki],
.contact-email-info[b-cs68wrijki] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    padding-left: 0.75rem;
    text-decoration: none;
    text-decoration-color: var(--clr-dn, #636363) !important;
    
    
    &:not(:has(.e-skeleton)) {
        padding-block: 0.25rem;
        
        &:hover {
            text-decoration: underline;
        }
    }
}

.contact-phone-number[b-cs68wrijki],
.contact-email-address[b-cs68wrijki],
.contact-us-to-add-contact[b-cs68wrijki] {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.contact-us-to-add-contact[b-cs68wrijki] {
    padding-block: 0.6875rem; /* 11px */
    white-space: nowrap;
}

.contact-phone-number:has(.e-skeleton)[b-cs68wrijki] {
    width: 25%;
}
.contact-email-address:has(.e-skeleton)[b-cs68wrijki] {
    width: 72%;
}

[b-cs68wrijki] .error-state {
    position: relative;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

[b-cs68wrijki] .oc-opacity-75 {
    opacity: 0.75 !important;
}

.open-invoices-value[b-cs68wrijki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.open-invoices-value[b-cs68wrijki],
.total-balance-value[b-cs68wrijki] {
    margin-top: 0.3125rem; /* 5px */
}

.total-balance-value[b-cs68wrijki],
.open-invoices-label[b-cs68wrijki],
.total-balance-label[b-cs68wrijki] {
    text-align: right;
    white-space: nowrap;
}

.open-invoices-icon-wrapper[b-cs68wrijki] {
    aspect-ratio: 1; /* square */
    width: var(--icon-size);
    border-radius: 1000vmax;
    background-color: var(--clr-err50_80, #fbececcc);
    justify-items: center;
    align-content: center;
}

.open-invoices-number[b-cs68wrijki],
.total-balance-number[b-cs68wrijki] {
    overflow: hidden;
    color: var(--clr-blk, #112333);
    text-align: right;
    text-overflow: ellipsis;
    font-size: 2.5rem;
    line-height: 1.5;
    letter-spacing: -0.05em;
}

[b-cs68wrijki] .kpi-big-value-skeleton {
    padding-block: 0.5rem;
}

[b-cs68wrijki] .mini-contact-us-popup-wrapper {
    display: inline-block;
}
/* /Features/JobsiteDetails/Components/KPIsHeader/ServicesKPIs.razor.rz.scp.css */
.jobsite-service-kpis[b-tl1hooiwtd] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "requested pending billable services-by-asset-type services-by-asset-type";
    column-gap: 1rem;
    height: 100%;
}

.kpis-section-label[b-tl1hooiwtd],
.services-by-asset-type-label[b-tl1hooiwtd] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--clr-dn_80, #636363cc);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.kpis-section-label[b-tl1hooiwtd] {
    top: -1rem;
}

.services-by-asset-type-label[b-tl1hooiwtd] {
    top: -0.25rem;
}

.kpi-card[b-tl1hooiwtd] {
    --kv-pair-rows: 76px 1fr;
    background-color: white;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    padding: 1rem;
    position: relative;
}

.requested-services-card[b-tl1hooiwtd],
.pending-services-card[b-tl1hooiwtd],
.billable-services-card[b-tl1hooiwtd] {
    display: grid;
        grid-template-columns: 48px 1fr;
        grid-template-rows: var(--kv-pair-rows);
        grid-template-areas:
            "icon  value"
            "label label";
        
        .icon-wrapper {
            --icon-circle-size: 3rem;
            margin-top: 14px;
            grid-area: icon;
            align-content: center;
            justify-items: center;
            width: var(--icon-circle-size);
            height: var(--icon-circle-size);
            border-radius: 1000vmax;
            background-color: var(--clr-bh, #dfebeb);
        }

    .kpi-kv-value[b-tl1hooiwtd] {
        grid-area: value;
        text-align: right;
    }

    .kpi-kv-label[b-tl1hooiwtd] {
        grid-area: label;
        text-align: right
    }
}

.requested-services-card[b-tl1hooiwtd] {
    grid-area: requested;
}

.pending-services-card[b-tl1hooiwtd] {
    grid-area: pending;
}

.billable-services-card[b-tl1hooiwtd] {
    grid-area: billable;
}

.services-by-asset-type-card[b-tl1hooiwtd] {
    grid-area: services-by-asset-type;    
}

.kpi-kv-value[b-tl1hooiwtd] {
    display: block;
    color: var(--clr-blk_75, #112333bf);
    font-size: 2.5rem;
    line-height: 1.5;
    letter-spacing: -0.05em;
    align-content: center;
}

.kpi-kv-label[b-tl1hooiwtd] {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

[b-tl1hooiwtd] .error-state {
    border-radius: 1rem;
    text-align: center;
    align-content: center;
    justify-items: center;
}

/* if Blazor ever fixes nested scoped css these can be done normally in above parent block */
[b-tl1hooiwtd] .error-state.requested-services-card {
    grid-area: requested;
}
[b-tl1hooiwtd] .error-state.pending-services-card {
    grid-area: pending;
}
[b-tl1hooiwtd] .error-state.billable-services-card {
    grid-area: billable;
}
[b-tl1hooiwtd] .error-state.services-by-asset-type-card {
    grid-area: services-by-asset-type;
}

.loading-chart[b-tl1hooiwtd] {
    display: grid;
    height: 100%;
    justify-items: center;
    align-items: end;
}
/* /Features/JobsiteDetails/Components/Overview/Assets/AssetsOverviewCard.razor.rz.scp.css */
.assets-overview-card[b-jf0dvgx6y7] {
    position: relative;
    padding: 1.5rem !important;
    display: grid;
    grid-template-rows: fit-content(100%) minmax(200px, 1fr) 14.3125rem;
    row-gap: 1rem;

    &:has(tr.e-emptyrow) {
        grid-template-rows: fit-content(100%) minmax(200px, 1fr) 8rem;
    }
}

.assets-summary-label[b-jf0dvgx6y7] {
    position: absolute;
    color: var(--clr-dn, #636363);
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    left: 1.5rem;
    top: 0;
}

.assets-summary-info[b-jf0dvgx6y7] {
    display: grid;
    grid-template-columns: 11fr 9fr;
    column-gap: 2rem;
    min-height: 7.75rem;
}

.general-assets-card[b-jf0dvgx6y7],
.last-serviced-asset-card[b-jf0dvgx6y7] {
    display: grid;
    background-color: white;
    border-radius: 8px;
    height: 100%;
    padding: 1rem;
}

.general-assets-card[b-jf0dvgx6y7] {
    --icon-size: 3rem;
    --big-col-gap: 1.5rem;
    --small-col-gap: 0.5rem;
    grid-template-columns: var(--icon-size) 1fr 1fr;
    column-gap: var(--big-col-gap);
    
    > div:nth-of-type(2) {
        /* gap between columns 1 & 2 of grid to be 8px instead of 24px */
        margin-left: calc(var(--small-col-gap) - var(--big-col-gap)); /* resulting negative margin */
    }
}

.icon-wrapper[b-jf0dvgx6y7] {
    width: var(--icon-size);
    aspect-ratio: 1; /* square */
    border-radius: 1000vmax;
    background-color: var(--clr-1s_10, #00A8941a);
    justify-items: center;
    align-content: center;
}

.active-assets[b-jf0dvgx6y7],
.on-rent-assets[b-jf0dvgx6y7] {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
}

.active-assets-label[b-jf0dvgx6y7],
.active-assets-count[b-jf0dvgx6y7],
.on-rent-assets-count[b-jf0dvgx6y7],
.on-rent-assets-label[b-jf0dvgx6y7] {
    text-align: right;
}

.active-assets[b-jf0dvgx6y7],
.on-rent-assets[b-jf0dvgx6y7],
.last-serviced-asset[b-jf0dvgx6y7] {
    .e-skeleton {
        flex-shrink: 0;
        margin-block: 0.625rem; /* 10px */
    }
}

.active-assets-count[b-jf0dvgx6y7],
.on-rent-assets-count[b-jf0dvgx6y7] {
    line-height: 1.5;
}

.last-serviced-asset-name[b-jf0dvgx6y7] {
    line-height: 1.25;
}

.active-assets-count[b-jf0dvgx6y7],
.on-rent-assets-count[b-jf0dvgx6y7],
.last-serviced-asset-name[b-jf0dvgx6y7] {
    font-size: 2.5rem; /* 40px */
    color: var(--clr-blk, #112333);
    letter-spacing: -0.05em;
}

.last-serviced-asset[b-jf0dvgx6y7] {
    text-align: right;
    align-items: center;
    min-height: 3.75rem; /* 60px */
}

.last-serviced-asset-class[b-jf0dvgx6y7] {
    display: flex;
    justify-content: space-between;
    transform: translateY(-0.1875rem); /* -3px */
}

[b-jf0dvgx6y7] .error-state {
    position: relative;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.breakdown-card-section[b-jf0dvgx6y7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
    padding: 1rem;
    border-radius: 1rem;
    position: relative;
}

[b-jf0dvgx6y7] .asset-type-breakdown-for-jobsite-card .asset-type-breakdown-for-jobsite-card-grid {
    height: 15rem !important;
}
/* /Features/JobsiteDetails/Components/Overview/Modals/ActivitiesListModal.razor.rz.scp.css */
.service-status-pill[b-l19fbkdt0r] {
    --text-color: var(--clr-dn, #636363);
    --background-color: white;
    border-radius: 1000vmax;
    min-height: 1.75rem; /* 28px */
    padding-inline: 0.75rem;
    align-content: center;
    text-align: center;
    display: block;
    width: fit-content;
    color: var(--text-color);
    background-color: var(--background-color);

    &[data-status="scheduled"],
    &[data-status="completed"] {
        --text-color: #274E73;
        --background-color: #ADC4DA80;
    }
    &[data-status="posted"][b-l19fbkdt0r] {
        --text-color: #AD5430;
        --background-color: #FCC8B380;
    }
    &[data-status="invoiced"][b-l19fbkdt0r] {
        --text-color: #4d4e51;
        --background-color: #c4c4c67f;
    }
}

.asset-name[b-l19fbkdt0r] {
    display: flex;
    column-gap: 0.25rem;
    align-items: center;
}
/* /Features/JobsiteDetails/Components/Overview/Modals/BarChartColumnBreakdownModal.razor.rz.scp.css */
.dialog-main-heading[b-en7sbywwtw] {
    color: var(--clr-blk, #112333) !important;
}

.dialog-sub-heading[b-en7sbywwtw] {
    color: var(--clr-dn, #636363) !important;
}

.breakdown-chart-container[b-en7sbywwtw] {
    display: flex;
    flex-direction: column-reverse;
    height: 475px;
    align-items: stretch;
    row-gap: 1rem;
    overflow: auto;
}

.segment-wrapper[b-en7sbywwtw] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 1rem;
    min-height: 1.5rem;
}

.segment[b-en7sbywwtw] {
    border-radius: 8px;
}

.bold-hyperlink-button[b-en7sbywwtw] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-1p, #005b5e);
    text-decoration: underline;
    
    &:hover {
        opacity: 75%;
    }
}
/* /Features/JobsiteDetails/Components/Overview/Services/ServicesByAssetTypeGraph.razor.rz.scp.css */
.column-chart-wrapper[b-duervw2c7o] {
    --pager-section: 4.125rem;
    margin-block: 1rem -1.25rem;
    display: grid;
    grid-template-rows: 1fr 4.125rem;
    
    &:not(:has(.e-skeleton)) {
        --pager-section: 3.125rem;
        .services-by-asset-chart-pager
        {
            margin-block: -3rem -1rem;
        }
    }
}

[b-duervw2c7o] #services-breakdown-by-asset-type-chartSeriesCollection path[title="Path Element"] {
    cursor: pointer;
}

[b-duervw2c7o] #services-breakdown-by-asset-type-chartSeriesCollection path[title="Path Element"]:hover {
    outline: 1px solid var(--clr-1p, #005b5e);
    outline-offset: -1px;
}

.loading-chart[b-duervw2c7o] {
    display: grid;
    height: 100%;
    justify-items: center;
    align-items: end;
}

.services-by-asset-chart-pager[b-duervw2c7o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1rem;
    gap: 0.5rem;
}

.center-controls[b-duervw2c7o] {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
}

[b-duervw2c7o] #services-breakdown-by-asset-type-chart_tooltip_data {
    display: none !important;
}

.empty-data[b-duervw2c7o] {
    background-color: var(--clr-ln2, #f1f1f1);
    height: 100%;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.empty-chart-message[b-duervw2c7o] {
    font-size: 1.5625rem; /* 25px */
    letter-spacing: -0.05em;
    color: var(--clr-dn, #636363);
}

.contact-us-prompt-section[b-duervw2c7o] {
    display: flex;
    align-items: baseline;
    column-gap: 0.125rem;
}
/* /Features/JobsiteDetails/Components/Overview/Services/ServicesOverviewCard.razor.rz.scp.css */
.services-summary-card[b-mvu7n5f5qm] {
    --upcoming-service-grid-section-height: 14.3125rem; /* 229px */
    position: relative;
    padding: 1.5rem !important;
    display: grid;
    grid-template-rows: fit-content(100%) minmax(200px, 1fr) var(--upcoming-service-grid-section-height);
    
    &:has(tr.e-emptyrow),
    &:has(.services-grid-load-error) {
        --upcoming-service-grid-section-height: 8rem;
    }
}

.services-summary-label[b-mvu7n5f5qm] {
    position: absolute;
    color: var(--clr-dn, #636363);
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    left: 1.5rem;
    top: 0;
}

.services-summary-info[b-mvu7n5f5qm] {
    display: grid;
    grid-template-columns: 11fr 9fr;
    column-gap: 2rem;
    min-height: 7.75rem;
}

.general-services-card[b-mvu7n5f5qm],
.next-service-date-card[b-mvu7n5f5qm] {
    display: grid;
    background-color: white;
    border-radius: 8px;
    height: 100%;
    padding: 1rem;
    position: relative;
}

.general-services-card[b-mvu7n5f5qm] {
    --icon-size: 3rem;
    --big-col-gap: 1.5rem;
    --small-col-gap: 0.5rem;
    grid-template-columns: var(--icon-size) 7fr 6fr 6fr;
    column-gap: var(--big-col-gap);
    
    >div:nth-of-type(2) {
        /* gap between columns 1 & 2 of grid to be 8px instead of 24px */
        margin-left: calc(var(--small-col-gap) - var(--big-col-gap)); /* resulting negative margin */
    }
}

.icon-wrapper[b-mvu7n5f5qm] {
    width: var(--icon-size);
    aspect-ratio: 1; /* square */
    border-radius: 1000vmax;
    background-color: var(--clr-1s_10, #00A8941a);
    justify-items: center;
    align-content: center;
}

.requested-services[b-mvu7n5f5qm],
.pending-services[b-mvu7n5f5qm],
.billable-services[b-mvu7n5f5qm] {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
}

.requested-services[b-mvu7n5f5qm],
.pending-services[b-mvu7n5f5qm],
.billable-services[b-mvu7n5f5qm],
.next-service-date[b-mvu7n5f5qm]{
    .e-skeleton {
        flex-shrink: 0;
        margin-block: 0.625rem; /* 10px */
    }
}

.requested-services-label[b-mvu7n5f5qm],
.requested-services-count[b-mvu7n5f5qm],
.pending-services-label[b-mvu7n5f5qm],
.pending-services-count[b-mvu7n5f5qm],
.billable-services-count[b-mvu7n5f5qm],
.billable-services-label[b-mvu7n5f5qm] {
    text-align: right;
}

.requested-services-count[b-mvu7n5f5qm],
.pending-services-count[b-mvu7n5f5qm],
.billable-services-count[b-mvu7n5f5qm],
.next-service-date-value[b-mvu7n5f5qm] {
    font-size: 2.5rem; /* 40px */
    line-height: 1.5;
    color: var(--clr-blk, #112333);
    letter-spacing: -0.05em;
}

.next-service-date[b-mvu7n5f5qm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 3.75rem; /* 60px */
}

.next-service-list[b-mvu7n5f5qm] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    column-gap: 0.5rem;
    width: calc(100% - 9rem);
    overflow-x: auto;
    list-style: none;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.next-service-button[b-mvu7n5f5qm] {
    --inset-x: 0.5rem;
    padding: 0.25rem var(--inset-x);
    background-color: var(--clr-bh, #dfebeb);
    color: var(--clr-1p, #005b5e);
    border-radius: 1000vmax;
    font-size: 1rem;
    line-height: 1.5;
    align-content: center;
    position: relative;
    
    &::after {
        content: '';
        position: absolute;
        inset-inline: var(--inset-x);
        bottom: 0.125rem;
        height: 2px;
        background-color: var(--clr-1p, #005b5e);
        transform: scaleX(0);
    }
    
    &:hover[b-mvu7n5f5qm]::after {
        transform: scaleX(1);
    }
}
.next-service-date-value[b-mvu7n5f5qm] {
    align-self: start;    
}

.next-service-date-label[b-mvu7n5f5qm] {
    align-self: end;
    padding-bottom: 0.5rem;
}

[b-mvu7n5f5qm] .error-state {
    position: relative;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
    .next-service-button[b-mvu7n5f5qm]::after {
        transition: transform 0.2s ease-in-out;
    }
}
/* /Features/JobsiteDetails/Components/Overview/Services/UpcomingServicesGrid.razor.rz.scp.css */
.grid-header[b-3161p64eb9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 1.875rem;
}

.grid-section-heading[b-3161p64eb9] {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;
    
    strong {
        font-weight: 600 !important;
    }
}

.service-asset-info[b-3161p64eb9] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

[b-3161p64eb9] .service-tag {
    background-color: var(--clr-mn_50, #c6c6c680);
}

.service-status-pill[b-3161p64eb9] {
    --text-color: var(--clr-dn, #636363);
    --background-color: white;
    border-radius: 1000vmax;
    min-height: 1.75rem; /* 28px */
    padding-inline: 0.75rem;
    align-content: center;
    text-align: center;
    display: block;
    width: fit-content;
    color: var(--text-color);
    background-color: var(--background-color);

    &[data-status="scheduled"],
    &[data-status="completed"] {
        --text-color: #274E73;
        --background-color: #ADC4DA80;
    }
    &[data-status="posted"][b-3161p64eb9] {
        --text-color: #AD5430;
        --background-color: #FCC8B380;
    }
}

[b-3161p64eb9] .error-state {
    position: relative;
    height: 6.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

[b-3161p64eb9] #upcoming-services-grid th {
    height: 2.5rem; /* 40px */
}
    
[b-3161p64eb9] #upcoming-services-grid td {
    height: 3.25rem; /* 52px */
    border-color: white !important;
}

[b-3161p64eb9] .asset-description-label {
    max-width: 80%;
}
/* /Features/JobsiteKPIs/Components/JobsitesKPIs.razor.rz.scp.css */
.jobsites-kpis[b-m0vw3ytmcr] {
    height: 100%;
    width: 100%;
    position: relative;
    border-radius: 1rem;
    
    &:not(:has(.error-state)) {
        display: grid;
        grid-template-columns: 2fr 3fr 3fr 4fr 4fr;
        grid-template-rows: auto;
        grid-template-areas:
            "active-jobsites jobsite-lifespan assets-onsite services invoices";
        grid-column-gap: 1rem;
    }
}

.kpi-label[b-m0vw3ytmcr] {
    position: absolute;
    left: calc(50% + 0.5rem);
    transform: translateX(-50%);
    top: -0.125rem;
}

[b-m0vw3ytmcr] .error-state {
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

a.card-insert:hover:not(:has(.hover-propagation-block:hover))[b-m0vw3ytmcr],
button.card-insert:hover:not(:has(.hover-propagation-block:hover))[b-m0vw3ytmcr] {
    box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-insert[b-m0vw3ytmcr] {
    width: 100%;
    background-color: white;
    border-radius: 16px;
    height: 100%;
    padding: 0.75rem;
    display: grid;
    overflow: auto;
    text-decoration: none;
    column-gap: 0.5rem;
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    
    .circle-icon-container {
        grid-area: icon;
        width: 100%;
        aspect-ratio: 1; /* square */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1000vmax;
    }
    
    .kpi-value[b-m0vw3ytmcr] {
        color: var(--clr-blk_75, #112333bf);;
        text-align: right;
        text-overflow: ellipsis;
        font-size: clamp(1rem, 2.1vw, 2.375rem);
        line-height: 1.5;
        letter-spacing: -0.05em;
        
        &[data-index="0"] {
            grid-area: value1;
        }
        &[data-index="1"][b-m0vw3ytmcr] {
            grid-area: value2;
        }
    }
    
    .kpi-title[b-m0vw3ytmcr] {
        text-align: right;
        max-width: 100%;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-x: hidden;

        &[data-index="0"] {
            grid-area: title1;
        }
        &[data-index="1"][b-m0vw3ytmcr] {
            grid-area: title2;
        }
    }
}

[b-m0vw3ytmcr] .kpi-value-skeleton {
    width: 100%;
    text-align: right;
    margin-left: auto;

    &.index-0 {
        grid-area: value1;
    }
    &.index-1[b-m0vw3ytmcr] {
        grid-area: value2;
    }
}

#active-jobsites-container[b-m0vw3ytmcr] {
    grid-area: active-jobsites;
    
    .card-insert {
        grid-template-columns: 3rem 1fr;
        grid-template-rows: 1fr 1.5rem;
        grid-template-areas:
            "icon   value1"
            "title1 title1";
    }
}

#jobsite-lifespan-container[b-m0vw3ytmcr] {
    grid-area: jobsite-lifespan;
    
    .card-insert {
        grid-template-columns: 3rem 1fr;
        grid-template-rows: 1fr 1.5rem;
        grid-template-areas:
            "icon    value1"
            "title1  title1";
    }
}

#assets-onsite-container[b-m0vw3ytmcr] {
    grid-area: assets-onsite;
    --pie-diameter: 5.1875rem;
    cursor: pointer;

    .card-insert {
        grid-template-columns: 3rem 1fr var(--pie-diameter);
        grid-template-rows: 1fr 1.5rem;
        grid-template-areas:
            "icon  value1 pie"
            "title1 title1 pie";
    }
    
    .pie-chart[b-m0vw3ytmcr] {
        /* SF puts a 10px padding around the donut that you can't get rid of (it's drawn in SVG and cannot be controlled in css) */
        --sf-ghost-padding: 10px;
        grid-area: pie;
        justify-items: center;
        align-content: center;
        position: relative;
        margin: calc(-1 * var(--sf-ghost-padding)); /* negative of SF padding */
        
        .hover-icon {
            --hover-icon-inset: 0.5rem;
            position: absolute;
            right: var(--hover-icon-inset);
            bottom: var(--hover-icon-inset);
        }

        &[b-m0vw3ytmcr]::after {
            content: "";
            position: absolute;
            inset: var(--sf-ghost-padding);
            border-radius: 1000vmax;
        }

        &[b-m0vw3ytmcr]::before {
            content: "";
            position: absolute;
            inset: calc(var(--sf-ghost-padding) + 13px);
            border-radius: 1000vmax;
        }
    }

    .kpi-value[b-m0vw3ytmcr],
    .kpi-title[b-m0vw3ytmcr],
    [b-m0vw3ytmcr] .kpi-value-skeleton:not(.pie-skeleton) {
        margin-right: min(0.8vw, 1.5rem);
    }
}

.pie-chart .hover-icon[b-m0vw3ytmcr] {
    display: none;
}

button.pie-chart:hover[b-m0vw3ytmcr] {
    &::after {
        box-shadow: var(--glass-shadow);
    }

    &[b-m0vw3ytmcr]::before {
        box-shadow: var(--glass-shadow-inset);
    }

    .hover-icon[b-m0vw3ytmcr] {
        display: block;
    }
}

#services-container[b-m0vw3ytmcr] {
    grid-area: services;

    .card-insert {
        grid-template-columns: 3rem 1fr 1fr;
        grid-template-rows: 1fr 1.5rem;
        grid-template-areas:
            "icon   value1 value2"
            "title1 title1 title2";
    }
}

#invoices-container[b-m0vw3ytmcr] {
    grid-area: invoices;

    .card-insert {
        grid-template-columns: 3rem 2fr 5fr;
        grid-template-rows: 1fr 1.5rem;
        grid-template-areas:
            "icon   value1 value2"
            "title1 title1 title2";
    }
}

[b-m0vw3ytmcr] .asset-type-breakdown-chart {
    max-width: 101px;
    max-height: 101px;
    overflow: hidden;
}
/* /Features/Maps/Components/ExcludedJobPinsModal.razor.rz.scp.css */
.flex-container[b-eqihx2mwx4] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    column-gap: 0.25rem;
    
    img {
        margin-top: 2px;
    }
}

.text-container[b-eqihx2mwx4] {
    width: 90%; 
    text-align: left; 
    display: inline; 
    align-items: center;
    font-size: 1rem;
    color: var(--clr-dn, #636363);
}

[b-eqihx2mwx4] .mini-contact-us-popup-wrapper {
    display: inline-block;
    vertical-align: baseline;
}

.card-container[b-eqihx2mwx4] {
    flex: 1;
    background: white;
    border-radius: 0.5rem;
}

[b-eqihx2mwx4] .hidden-jobs-contact-btn {
    margin-left: -1rem;
}
/* /Features/Maps/Components/JobsitesMapPane.razor.rz.scp.css */
.map-pane[b-vleix4h2wn] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    padding-top: 0.675rem;
    width: 100%;
}

.map-pane.expanded[b-vleix4h2wn] {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    padding: 1rem;
    background: url(_content/Overcast.CustomerPortal.Client.UILibrary/image/dw1-gradient-mesh.webp), var(--clr-mesh-average);
    background-size: cover;
    z-index: 1000;
}

.top-bar[b-vleix4h2wn] {
    display: flex;
    justify-content: space-between;
}

.legend[b-vleix4h2wn],
.legend-keys[b-vleix4h2wn],
.legend-key[b-vleix4h2wn] {
    display: flex;
}

.legend[b-vleix4h2wn] {
    color: var(--clr-blk, #112333);
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    column-gap: 0.5rem;
    margin-bottom: -0.375rem;
}

.legend-label[b-vleix4h2wn] {
    transform: translateY(0.25rem);
}

.legend-keys[b-vleix4h2wn] {
    column-gap: 1rem;
}

.legend-key[b-vleix4h2wn] {
    color: var(--clr-btn-n, #6E6F73);
    font-size: 1rem;
    line-height: 1.5; 
    align-items: center;
    column-gap: 0.25rem;
}

.circle[b-vleix4h2wn] {
    border-radius: 1000px;
    width: 0.75rem;
    height: 0.75rem;
}

.inactive-toggle-wrapper[b-vleix4h2wn] {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.25rem;
    padding-inline: 1rem 0.25rem;
    border-radius: 1000vmax;
    color: var(--clr-btn-n, #6E6F73);
    
    &:has(.e-switch-active) {
        color: var(--clr-blk, #112333);
        font-weight: 500;
    }
}

.completed-jobs-toggle-label[b-vleix4h2wn] {
    cursor: pointer;
}

.inactive-toggle-wrapper[b-vleix4h2wn]  .e-switch-wrapper.e-wrapper.inactive-toggle {
    transform: translateY(0.1875rem); /* 3px */
}

[b-vleix4h2wn] .e-switch-wrapper .e-switch-inner,
[b-vleix4h2wn] .e-switch-wrapper .e-switch-off {
    background-color: #ababae;
}

.right-content[b-vleix4h2wn] {
    display: flex;
    column-gap: 1rem;
}

.hidden-jobsites-btn[b-vleix4h2wn] {
    display: flex;
    column-gap: 0.25rem;
    padding-bottom: 0.25rem;

    & > .count-circle {
        border-radius: 40px;
        background-color: var(--clr-1p, #005B5E);
        display: flex;
        padding: 4px;
        justify-content: center;
        align-items: center;
        gap: 10px;

        & > span {
            color: white;
            font-size: 0.6875rem; /* 11px */
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
    }

    & > span[b-vleix4h2wn] {
        color: var(--clr-1p, #005B5E);
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        position: relative;
        display: block;
        transform: translateY(2px);
        
        &::after {
            content: "";
            display: block;
            background-color: var(--clr-1p, #005B5E);
            width: 100%;
            height: 2px;
            left: 50%;
            top:100%;
            transform-origin: center;
            transform: scaleX(0);
        }
    }

    &:hover > span[b-vleix4h2wn]::after {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hidden-jobsites-btn > span[b-vleix4h2wn]::after {
        transition: transform 200ms ease-in-out;
    }
}

[b-vleix4h2wn] .oc-map {
    position: relative;
    height: 65vh;
    --active-not-selected: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/Map/Pins/location-pin-blue.svg");
    --active-selected: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/Map/Pins/location-pin-active-blue.svg");
    --completed-not-selected: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/Map/Pins/location-pin-grey.svg");
    --completed-selected: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/Map/Pins/location-pin-active-grey.svg");
    --my-jobsites-not-selected: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/Map/Pins/location-pin-green.svg");
    --my-jobsites-selected: url("_content/Overcast.CustomerPortal.Client.UILibrary/SVG/Map/Pins/location-pin-active-green.svg");
}

[b-vleix4h2wn] .oc-map.expanded {
    height: 100%;
}

[b-vleix4h2wn] .active-jobsite-pin {
    background-image: var(--active-not-selected);
    &:hover {
        background-image: var(--active-selected);
    }
}

[b-vleix4h2wn] .active-jobsite-pin.active {
    background-image: var(--active-selected);
}

[b-vleix4h2wn] .completed-jobsite-pin {
    background-image: var(--completed-not-selected);
    &:hover {
        background-image: var(--completed-selected);
    }
}

[b-vleix4h2wn] .completed-jobsite-pin.active {
    background-image: var(--completed-selected);
}

[b-vleix4h2wn] .my-jobsite-pin {
    background-image: var(--my-jobsites-not-selected);
    &:hover {
        background-image: var(--my-jobsites-selected);
    }
}

[b-vleix4h2wn] .my-jobsite-pin.active {
    background-image: var(--my-jobsites-selected);
}

.show-radar[b-vleix4h2wn] {
    display: block; 
    position: absolute; 
    z-index: 1002; 
    left: 40%; 
    top: 50%;
}

.map-pane.expanded .show-radar[b-vleix4h2wn] {
    top: 35%;
}

.show-placeholder[b-vleix4h2wn] {
    display: block;
    width: 100%;

    & > div {
        height: 100%; 
        width: 100%; 
        border-radius: 8px;
        background: #EAEAEA;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(8px);
    }
}

.show-map[b-vleix4h2wn] {
    display: block; 
    height: 100%;
}

.hide-div[b-vleix4h2wn] {
    display: none;
}
/* /Features/OpenInvoices/Components/EmailHistoryModal.razor.rz.scp.css */
.status-pill[b-tu5ej8z3uq] {
    color: var(--clr-blk, #112333);
    background-color: var(--clr-mn, #c6c6c6);
    padding: 0.125rem 0.75rem;
    border-radius: 11px;
    width: fit-content;
    
    &[data-positivity="1"] {
        color: var(--clr-success400, #395b1f);
        background-color: var(--clr-success50_80, #eef3eacc);
    }

    &[data-positivity="0"][b-tu5ej8z3uq] {
        color: var(--clr-warny500, #97792a);
        background-color: var(--clr-warny50, #fef9eccc);   
    }

    &[data-positivity="-1"][b-tu5ej8z3uq] {
        color: var(--clr-err400, #942c2c);
        background-color: var(--clr-err50_80, #fbececcc);
    }
}

.error-state[b-tu5ej8z3uq] {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius:  8px;
    margin-bottom: 0.5rem;
    box-shadow: var(--glass-shadow);
}

[b-tu5ej8z3uq] .e-grid .e-row-cell:has(.status-pill) {
    padding-inline: 0;
}
/* /Features/OpenInvoices/Components/OpenInvoicesGrid.razor.rz.scp.css */
[b-fisktgpx4y] .oc-search {
    margin-bottom: 1rem;
}

[b-fisktgpx4y] .e-grid .e-gridcontent {
    height: var(--tab-content-grid-max-height);
}

.invoice-link[b-fisktgpx4y] {
    text-decoration: underline;
    cursor: pointer;
    width: fit-content;
    
    &[aria-expanded="false"]:not([aria-selected="true"], :hover) {
        opacity: 75%;
    }
    
    &:hover[b-fisktgpx4y] {
        opacity: 1;
        text-decoration-thickness: 2px;
    }
}

[b-fisktgpx4y] td:has(.actions-btn-group) > div:has(.actions-btn-group) {
    transform: translateY(0.625rem);
}

[b-fisktgpx4y] .grid-payment-input {
    transform: translateY(-0.125rem); /* -2px */

    input {
        font-size: 1rem;
        padding-right: 0.5rem !important;
        text-align: right;
    }
}

.open-invoices-wrapper[b-fisktgpx4y] {
    --animation-duration: 250ms;
    position: relative;
}

.open-invoices-wrapper[b-fisktgpx4y]  {
    .bulk-actions-btn-group {
        position: absolute;
        right: 0;
        top: -4rem;
        align-items: center;
    }
}

.grid-selection-summary-wrapper[b-fisktgpx4y] {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.clear-invoice-selection-button[b-fisktgpx4y] {
    padding-right: 0.8125rem;
}

.oc-grid-selection-summary span[b-fisktgpx4y],
.oc-grid-selection-summary strong[b-fisktgpx4y]{
    &:not(:first-child) {
        margin-left: 0.75rem;
    }
}

.oc-grid-selection-summary strong[b-fisktgpx4y] {
    font-weight: 600;
}

.oc-grid-selection-summary span[b-fisktgpx4y] {
    font-weight: 400;
}

.detail-content-wrapper[b-fisktgpx4y] {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(min(92px, 100%), 92px);
    column-gap: 0.25rem;
}

.details-left[b-fisktgpx4y],
.details-right[b-fisktgpx4y] {
    display: grid;
    grid-template-columns: minmax(min(140px, 100%), 140px) 1fr;
    grid-auto-rows: min-content;
    column-gap: 0.25rem;
    row-gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    
    header {
        padding-block: 0.25rem;
        grid-column: span 2 / span 2;
        border-bottom: 1px solid var(--clr-mn, #c6c6c6);
    }
}

.details-phone[b-fisktgpx4y] {
    display: block;
    line-height: 1 !important;
}

[b-fisktgpx4y] #open-invoices-grid {
    min-width: 900px;
}

.processing-blurb[b-fisktgpx4y] {
    padding: 0.25rem 0.75rem;
    display: flex;
    column-gap: 0.25rem;
}

.filter-info-bubble[b-fisktgpx4y] {
    position: absolute;
    top: 3px;
    left: calc(520px + 0.5rem);
}

.filter-info-bubble-text[b-fisktgpx4y] {
    display: flex;
    column-gap: 0.25rem;
    margin-right: -0.5rem;
}
/* /Features/OpenInvoices/Components/OpenInvoicesLoadingGrid.razor.rz.scp.css */
/* /Features/OpenInvoices/Components/Panel_PaymentConfirmation.razor.rz.scp.css */
.payment-confirmation-container[b-z5q9nbykco] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 1rem;
}

.payment-confirmation-container h2[b-z5q9nbykco],
.icon-wrapper img[b-z5q9nbykco] {
    text-align: center;
    margin-inline: auto;
}

.delay-notice-blurb[b-z5q9nbykco] {
    padding: 0.25rem 0.75rem;
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 0.125rem; /* 2px */
    
    img { margin-top: 0.25rem; }
}

.payment-summary-container[b-z5q9nbykco] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.5rem;
    
    header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    
    hr[b-z5q9nbykco] {
        margin-block: 0.5rem;
    }
    
    footer[b-z5q9nbykco] {
        display: flex;
        flex-direction: column;
        align-items: end;
        row-gap: 1rem;
    }
}

.payment-summary-item[b-z5q9nbykco] {
    display: flex;
    align-items: end;
    column-gap: 0.625rem; /* 10px */
    position: relative;
    
    span {
        width: fit-content;
        flex-shrink: 0;
    }
    
    .separator[b-z5q9nbykco] {
        flex-grow: 1;
        height: 1rem;
        margin-bottom: 0.375rem; /* 6px */
        border-bottom: 1px dashed var(--clr-mn, #c6c6c6);
    }
    
    &:has(.balance-blurb)[b-z5q9nbykco] {
        padding-bottom: 1.5rem;
    }
}

.balance-blurb[b-z5q9nbykco] {
    position: absolute;
    right: 0;
    bottom: 0;
}

.reference-number-button[b-z5q9nbykco] {
    color: var(--clr-1p, #005b5e);
    text-decoration: underline;
}

.payment-items-container[b-z5q9nbykco] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.5rem;
    overflow: auto;
    max-height: calc(100svh - 47.5rem);
    --swell-size: 0.5rem;
    padding-inline: var(--swell-size);
    margin-inline: calc(-1 * var(--swell-size));
}

@media (height < 1000px) {
    .payment-confirmation-container[b-z5q9nbykco] {
        height: calc(100svh - 23rem);
        overflow: auto;
    }
    
    .payment-summary-container[b-z5q9nbykco] {
        padding-inline: 0.5rem;
    }
    
    .payment-items-container[b-z5q9nbykco] {
        max-height: unset;
    }
}
/* /Features/OpenInvoices/Components/Panel_PaymentInfo.razor.rz.scp.css */
.payment-method-label[b-3jjt3v4uve] {
    margin-bottom: -0.75rem;
}

.payment-method-selection-container[b-3jjt3v4uve] {
    --swell-size: 0.25rem;
    height: calc(100vh - 24.75rem);
    overflow: auto;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    align-items: start;
    margin-inline: calc(-1 * var(--swell-size));
    padding-inline: var(--swell-size);
    padding-bottom: 1.5rem;
}

.payment-summary-row[b-3jjt3v4uve] {
    display: grid;
    grid-template-columns: minmax(5.5rem, 1fr) 1fr 160px;
    column-gap: 0.5rem;
    position: relative;
    align-items: center;
}

.faux-payment[b-3jjt3v4uve] {
    border-radius: 8px;
    width: 100%;
    padding-top: 0.5rem;
    padding-inline: 0.75rem;
    min-height: 2rem;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
}

.faux-payment[b-3jjt3v4uve]  .e-radio-wrapper {
    transform: translateY(-0.25rem);
}

.error-blurb[b-3jjt3v4uve] {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--clr-err-bld, #d44040);
}

.payment-method-section-list-item-container[b-3jjt3v4uve] {
    background-color: #ffffffb3;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    width: 100%;

    &.selected:not(:focus-visible) {
        outline: 1px solid var(--clr-1s, #00A894);
        outline-offset: -1px;
    }

    &:hover[b-3jjt3v4uve] {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
        background-color: #ffffff;
    }
}

.payment-method-section-list-item-container.selected[b-3jjt3v4uve] {
    background-color: var(--clr-bh, #dfebeb);

    &:hover {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
        background-color: var(--clr-bh, #dfebeb);
    }

    &[b-3jjt3v4uve]  .default-marker {
        background-color: var(--clr-1p, #005b5e) !important;
        color: var(--clr-bh, #dfebeb) !important;
    }
}
/* /Features/OpenInvoices/Components/Panel_PaymentMethodSelector.razor.rz.scp.css */
.payment-method-radio-selector-container[b-5c0dsf748t] {
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
    padding-top: 0.5rem;
    padding-inline: 0.75rem;
    padding-bottom: 0.25rem;
    position:relative;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);

    display: grid;
    grid-template-columns: 1rem 1fr;
    grid-template-rows: auto;
    column-gap: 0.375rem; /* 6px */
    grid-template-areas:
        "radio label";

    .radio-label-text {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
    }
    
    &:hover[b-5c0dsf748t],
    &:has(.e-radio:checked)[b-5c0dsf748t] {
        background-color: var(--clr-bh, #dfebeb);
    }

    &:has(.e-radio:checked) .radio-label-text[b-5c0dsf748t] {
        font-weight: 600;
    }

    &.payment-card[b-5c0dsf748t] {
        grid-template-columns: 1rem 38px 1fr;
        grid-template-areas: 
            "radio card-icon label"    
            "radio blank details";
    }
}

[b-5c0dsf748t] .payment-method-radio-selector { grid-area: radio; }

.account-card-rect[b-5c0dsf748t] {
    grid-area: card-icon;
    width: 100%;
    height: 24px;
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    align-self: center;

    &:not(:has(img))::before {
        /* not localized because its a faux icon and also is defined here in the CSS */
        content: "ACH";
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-dn_50, #63636380);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.account-label[b-5c0dsf748t] { grid-area: label; }
.account-details[b-5c0dsf748t] {
    grid-area: details;
    width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.account-card-pill[b-5c0dsf748t] {
    position: absolute;
    top: 0.625rem;
    right: 1rem;
}

.default-marker[b-5c0dsf748t] {
    padding: 0.25rem 1rem;
    border-radius: 1000vmax;
    background-color: var(--clr-bh, #dfebeb);
    color: var(--clr-1p, #005b5e);
}
/* /Features/OpenInvoices/Components/Panel_SelectionSummary.razor.rz.scp.css */
.payment-items-list[b-k4nagyk2y4] {
    --vertical-margins: 1rem;
    height: calc(100vh - 25.5rem);
    overflow:  auto;
    
    /* makes input focus outline of first line clipped otherwise */
    --top-overflow: 1px;
    padding-top: var(--top-overflow);
    margin-top: calc(-1 * var(--top-overflow));
    margin-bottom: 0.5rem;
    display: grid;
    column-gap: 1rem;
    row-gap: 0.5rem;
    grid-template-columns: 4.75rem 8rem 1fr;
    grid-auto-rows: min-content;
}

.payment-column-heading[b-k4nagyk2y4] {
    display: grid;
    grid-column: span 3 / span 3;
    grid-template-columns: subgrid;
    column-gap: 1rem;
    margin-block-end: calc(var(--vertical-margins) * -1);
    
    .payment-amount-column {
        padding-right: 2rem;
    }
}

.payment-entry-row[b-k4nagyk2y4] {
    display: grid;
    grid-column: span 3 / span 3;
    grid-template-columns: subgrid;
    column-gap: 1rem;
    position: relative;

    + .payment-entry-row {
        margin-top: var(--vertical-margins);
    }
}

.reference-id-column[b-k4nagyk2y4],
.remaining-balance-column[b-k4nagyk2y4],
.payment-amount-column[b-k4nagyk2y4] {
    text-align: right;
}

.account-name-divider[b-k4nagyk2y4] {
    grid-column: span 3 / span 3;
    border-radius: 1000vmax;
    color: var(--clr-1p, #005b5e);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    align-content: center;
    min-height: 1.5rem;
    padding-inline: 0.5rem;
    margin-block-start: var(--vertical-margins);
}

.invoice-payment-input-wrapper[b-k4nagyk2y4] {
    display: flex;
    column-gap: 0.25rem;
}

.invoice-payment-input-wrapper[b-k4nagyk2y4]  input {
    text-align: right;
    padding-right: 0.5rem !important;
}

.invoice-payment-input-wrapper:has(.remaining-balance-info:not(:empty))[b-k4nagyk2y4]  input {
    padding-right: 1.75rem !important;
}

.remaining-balance-info[b-k4nagyk2y4] {
    position: absolute;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    bottom: -1.25rem;
    right: 2.25rem;
}

.validation-warning[b-k4nagyk2y4] {
    color: var(--clr-warn300, #f77845);
    position: absolute;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    bottom: -1.25rem;
    right: 0;
}

.invoice-payment-input-wrapper:has(.validation-warning) .remaining-balance-info[b-k4nagyk2y4] {
    visibility: hidden;
}

.button-stand-in[b-k4nagyk2y4] {
    position: absolute;
    right: 1.75rem;
    top: 0.25rem;
    opacity: 0;
}

.remaining-balance-button[b-k4nagyk2y4] {
    padding: 0.25rem;
    position: absolute;
    right: 1.75rem;
    top: 0.25rem;

    img { transform-origin: center; }
    &:hover[b-k4nagyk2y4] { opacity: 0.75; }
}

.remove-invoice-selection[b-k4nagyk2y4] {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;

    img {
        position: absolute;
        top: 0.5rem;
        left: 0.125rem;
        transform-origin: center;
    }
    &:hover[b-k4nagyk2y4] { opacity: 0.75; }
}

@media (prefers-reduced-motion: no-preference) {
    .remaining-balance-button[b-k4nagyk2y4],
    .remove-invoice-selection[b-k4nagyk2y4] {
        img { transition: transform 150ms ease-in-out; }
        &:hover img[b-k4nagyk2y4] { transform: scale(1.25); }
    }
}

.payment-summary-row[b-k4nagyk2y4] {
    display: grid;
    grid-template-columns: minmax(5.5rem, 1fr) 1fr 160px;
    column-gap: 0.5rem;
    position: relative;
    align-items: center;
}

.payment-summary-row[b-k4nagyk2y4]  input {
    text-align: right;
    padding-right: 1rem !important;
    color: var(--clr-dn, #636363) !important;
}

[b-k4nagyk2y4] .validation-message {
    color: var(--clr-err300, #d43f3f);
    font-size: 0.6875rem; /* 11px */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.05em;
    position: absolute;
    top: 100%;
    right: 0;
    white-space: nowrap;
}

.empty-selections-message[b-k4nagyk2y4] {
    padding-top: min(1.5rem, 5svh);
    text-align: center;
    height: calc(100svh - 22.75rem);
}
/* /Features/OpenInvoices/Components/PaymentPanel.razor.rz.scp.css */
.payment-panel-frame[b-ha70ft5u25] {
    --sidebar-width: 31.5rem;
    --show-hide-button-width: 1.5rem;
    width: var(--sidebar-width, 31.5rem);
    position: fixed;
    top: 0;
    bottom: calc((var(--footer-height) + 1rem) * -1);
    display: flex;
    flex-direction: column;
    padding-bottom: 0.25rem !important;
    border: 0 none transparent;
    transform: translateX(1rem);

    &[aria-expanded="false"] {
        right: calc((var(--sidebar-width, 504px) + var(--show-hide-button-width, 1.5rem) + 10px) * -1);
    }
    
    &[aria-expanded="true"][b-ha70ft5u25] {
        right: 0;
        
        &[data-onscreen="false"]
        {
            right: calc(var(--sidebar-width, 31.5rem) * -1);
        }
    }
}

.show-hide-button[b-ha70ft5u25] {
    width: var(--show-hide-button-width);
    position: absolute;
    left: calc(var(--show-hide-button-width, 1.5rem) * -1);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 1rem 0 1rem 0.25rem;
    border: 0 none transparent;
    clip-path: polygon(-10% -10%, 100% -10%, 100% 110%, -10% 110%);

    span {
        background-color: white;
        border-radius: 100vmax;
        width: 1.25rem;
        height: 4rem;
        align-content: center;
        text-align: center;
    }

    [data-onscreen="true"] &[b-ha70ft5u25] {
        img {
            rotate: -90deg;
        }
    }

    [data-onscreen="false"] &[b-ha70ft5u25] {
        img {
            rotate: 90deg;
        }
    }
}

.payment-panel-content[b-ha70ft5u25] {
    inset: 0.75rem;
    padding: 0.75rem;
    background-color: white;
    position: absolute;
    border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
    .payment-panel-frame[b-ha70ft5u25] {
        transition: right var(--animation-duration, 250ms) ease-in-out;
    }
    
    .show-hide-button[b-ha70ft5u25] {
        img {
            transition: scale 150ms ease-in-out;
            transition-property: scale, rotate;
            transform-origin: center;
        }
        &:hover img[b-ha70ft5u25] {
            scale: 1.25;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .show-hide-button:hover[b-ha70ft5u25] {
        img {
            opacity: 75%;
        }
    }
}

.payment-panel-header[b-ha70ft5u25] {
    position: relative;
    margin-bottom: 0.5rem;
}

.close-payment-panel[b-ha70ft5u25] {
    --top-left-set: -12px;
    --button-padding: 0.5rem;
    position: absolute;
    left: calc(var(--top-left-set) - var(--button-padding));
    top: calc(var(--top-left-set) - var(--button-padding));
    padding: var(--button-padding);
}

.navigation-buttons-wrapper[b-ha70ft5u25] {
    position: absolute;
    --inset-size: 1rem;
    bottom: var(--inset-size);
    inset-inline: var(--inset-size);
}

[b-ha70ft5u25] .payment-footer-buttons {
    .payment-nav-process { order: 3; }
    .payment-nav-back[b-ha70ft5u25] { order: 1; }
    .payment-nav-cancel[b-ha70ft5u25] { order: 2; }
}

[b-ha70ft5u25] .view-receipt-button-wrapper {
    position: absolute;
    inset-inline: 0;
    top: -2rem;
    display: flex;
    justify-content: center;
}
/* /Features/PaidInvoices/Components/PaidInvoiceHistoryGrid.razor.rz.scp.css */
.error-state[b-kx8w5bii8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: var(--glass-shadow);
}

[b-kx8w5bii8n] .oc-search {
    margin-bottom: 1rem;
}

[b-kx8w5bii8n] .e-grid .e-gridcontent,
.error-state[b-kx8w5bii8n] {
    height: var(--tab-content-grid-max-height)
}

[b-kx8w5bii8n] td:has(.actions-btn-group) > div:has(.actions-btn-group) {
    transform: translateY(0.625rem);
}

.account-address[b-kx8w5bii8n] {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


.grid-selection-summary-wrapper[b-kx8w5bii8n] {
    position: absolute;
    right: 1rem;
    top: 0;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.oc-grid-selection-summary span[b-kx8w5bii8n],
.oc-grid-selection-summary strong[b-kx8w5bii8n] {
    &:not(:first-child) {
        margin-left: 0.75rem;
    }
}

.oc-grid-selection-summary strong[b-kx8w5bii8n] {
    font-weight: 600;
}

.oc-grid-selection-summary span[b-kx8w5bii8n] {
    font-weight: 400;
}

.detail-content-wrapper[b-kx8w5bii8n] {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(min(92px, 100%), 92px);
    column-gap: 0.25rem;
}

.details-left[b-kx8w5bii8n],
.details-right[b-kx8w5bii8n] {
    display: grid;
    grid-template-columns: minmax(min(140px, 100%), 140px) 1fr;
    grid-auto-rows: min-content;
    column-gap: 0.25rem;
    row-gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    header {
        padding-block: 0.25rem;
        grid-column: span 2 / span 2;
        border-bottom: 1px solid var(--clr-mn, #c6c6c6);
    }
}

.details-phone[b-kx8w5bii8n] {
    display: block;
    line-height: 1 !important;
}

.processing-blurb[b-kx8w5bii8n] {
    padding: 0.25rem 0.75rem;
    display: flex;
    column-gap: 0.25rem;
}

.paid-by-info-wrapper[b-kx8w5bii8n] {
    display: flex;
    align-items: baseline;
    column-gap: 0.25rem;
}

.paid-by-avatar[b-kx8w5bii8n] {
    align-self: center;
}

.paid-by-info-user[b-kx8w5bii8n] { 
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.e-detailrowexpand *[b-kx8w5bii8n] {
    color: black;
}
/* /Features/PaidInvoices/Components/PaidInvoiceSection.razor.rz.scp.css */
[b-2di4whhd3g] .oc-search {
    margin-bottom: 1rem;
    margin-right: 0.75rem;
    display: inline-flex;
}

[b-2di4whhd3g] > .e-checkbox-wrapper.e-wrapper {
    display: inline-block;
    transform: translateY(-2px);
}

[b-2di4whhd3g] .bulk-actions-btn-group {
    position: absolute;
    right: 1rem;
    top: 1rem;
    align-items: center;
}
/* /Features/PaidInvoices/Components/PaymentDetailsHistoryGrid.razor.rz.scp.css */
[b-mg1dels2sb] .e-grid .e-gridheader .e-columnheader {
    display: none;
}

[b-mg1dels2sb] .e-grid .e-gridcontent {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    clip-path: unset;
}

.error-state[b-mg1dels2sb] {
    min-height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: var(--glass-shadow);
}
/* /Features/PaidInvoices/Components/PaymentDetailsHistoryModal.razor.rz.scp.css */
.payment-details-history-modal-header[b-2wxsjaqco4] {
    display: grid;
    width: fit-content;
}

[b-2wxsjaqco4] .e-grid .e-gridheader .e-columnheader {
    display: none;
}

[b-2wxsjaqco4] .e-grid .e-gridcontent {
    clip-path: unset;
}

.pdh-modal-title[b-2wxsjaqco4] {
    padding-bottom: 4px;
    grid-column: span 2 / span 2;
}

[b-2wxsjaqco4] .details-key-value {
    padding-bottom: 2px;
}

.payment-details-history-modal-grid-label[b-2wxsjaqco4] {
    position: relative;
    margin-top: .375rem;
    bottom: -.25rem;
    color: var(--clr-dn, #636363);
}
/* /Features/PaidInvoices/Components/SingleInvoicePaymentHistoryGrid.razor.rz.scp.css */
.error-state[b-xne9l4kpg9] {
    min-height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: var(--glass-shadow);
}
/* /Features/PaidInvoices/Components/SingleInvoicePaymentHistoryModal.razor.rz.scp.css */
.single-invoice-payment-history-modal-header[b-x227mgvtjx] {
    display: grid;
    width: fit-content;
}

.siph-modal-title[b-x227mgvtjx] {
    padding-bottom: 4px;
    grid-column: span 2 / span 2;
}

[b-x227mgvtjx] .details-key-value {
    padding-bottom: 2px;
}
/* /Features/PaymentHistory/Components/PaymentHistoryGrid.razor.rz.scp.css */
[b-pdyvrreirx] .e-grid .e-gridcontent,
.error-state[b-pdyvrreirx]{
    height: var(--tab-content-grid-max-height)
}

.grid-selection-summary-wrapper[b-pdyvrreirx] {
    position: absolute;
    right: 1rem;
    top: 0;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.oc-grid-selection-summary span[b-pdyvrreirx],
.oc-grid-selection-summary strong[b-pdyvrreirx] {
    &:not(:first-child) {
    margin-left: 0.75rem;
    }
}

.oc-grid-selection-summary strong[b-pdyvrreirx] {
    font-weight: 600;
}

.oc-grid-selection-summary span[b-pdyvrreirx] {
    font-weight: 400;
}

.error-state[b-pdyvrreirx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: var(--glass-shadow);
}

.paid-by-info-wrapper[b-pdyvrreirx] {
    display: flex;
    align-items: baseline;
    column-gap: 0.25rem;
}

.paid-by-avatar[b-pdyvrreirx] {
    align-self: center;
}

.paid-by-info-user[b-pdyvrreirx] {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

[b-pdyvrreirx] td:has(.actions-btn-group) > div:has(.actions-btn-group) {
    transform: translateY(0.375rem);
}

[b-pdyvrreirx] .actions-btn-group-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    & > .icon-button {
        padding-right: 0.5rem;
    }
}
/* /Features/PaymentHistory/Components/PaymentHistorySection.razor.rz.scp.css */
[b-ojrs122v2n] .oc-search {
    margin-bottom: 1rem;
    margin-right: 0.75rem;
    display: inline-flex;
}

[b-ojrs122v2n] > .e-checkbox-wrapper.e-wrapper {
    display: inline-block;
    transform: translateY(-2px);
}
/* /Features/PaymentMethods/Components/AccountCard.razor.rz.scp.css */
.account-card[b-cn66hjgs6q] {
    position: relative;
    container: payment-card / inline-size;
}

@container payment-card (width < 450px) {
    .account-card-autopay[b-cn66hjgs6q] {
        margin-top: -0.375rem;
        margin-bottom: -1rem;
        
        div {
            flex-direction: column;
            align-items: center;
        }
    }
}

.account-card-grid[b-cn66hjgs6q] {
    display: grid;
    --min-card-col: 80px;
    grid-template-columns: auto, minmax(min(var(--min-card-col), 100%), var(--min-card-col)) repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
        "child-content rect nickname nickname pill"
        "child-content rect details  details  autopay";
    grid-row-gap: 0.25rem;
    min-height: 3rem;
    justify-content: space-between;
    align-content: center;
}

.account-card-transclude[b-cn66hjgs6q] {
    grid-area: child-content;
    align-self: center;
    justify-self: start;
}

.account-card-rect[b-cn66hjgs6q] {
    grid-area: rect;
    width: 50px;
    height: 35px;
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    align-self: center;
    justify-self: start;

    &:not(:has(img))::before {
        /* not localized because its a faux icon and also is defined here in the CSS */
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-dn_50, #63636380);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.account-card-rect-card[b-cn66hjgs6q] {
    &:not(:has(img))::before {
        /* not localized because its a faux icon and also is defined here in the CSS */
        content: "CC";
    }
}

.account-card-rect-bank[b-cn66hjgs6q] {
    &:not(:has(img))::before {
        /* not localized because its a faux icon and also is defined here in the CSS */
        content: "ACH";
    }
}


.account-card-nickname[b-cn66hjgs6q] {
    grid-area: nickname;
    justify-self: start;
    align-self: center;
}
.account-card-details[b-cn66hjgs6q] {
    grid-area: details;
    justify-self: start;
    align-self: center;
}

.account-card-pill[b-cn66hjgs6q] {
    grid-area: pill;
    justify-self: end;
}

.account-card-autopay[b-cn66hjgs6q] {
    grid-area: autopay;
    justify-self: end;
}

.default-marker[b-cn66hjgs6q] {
    padding: 0.25rem 1rem;
    border-radius: 1000vmax;
    background-color: var(--clr-bh, #dfebeb);
    color: var(--clr-1p, #005b5e);
}

.account-card-nickname[b-cn66hjgs6q],
.account-card-details[b-cn66hjgs6q] {
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* /Features/PaymentMethods/Components/BankAccounts/BankAccountDetails.razor.rz.scp.css */
.bank-account-details-bank[b-uvuntrrj83] {
    width: min(500px, 100%)
}

.bank-account-details-info[b-uvuntrrj83] {
    margin-bottom: 1rem;
}
/* /Features/PaymentMethods/Components/BankAccounts/BankAccountForm.razor.rz.scp.css */
[b-b2fmci12d0] .bank-account-form {
    width: min(400px, 100%);
}

.bank-account-form-card[b-b2fmci12d0] {
    width: min(504px, 100%);
    position: relative;
}

.bank-account-form[b-b2fmci12d0] {
    margin-top: -4px;
}

.bank-account-form-account-type[b-b2fmci12d0] {
    display: flex;
}

.highlight-section[b-b2fmci12d0] {
    background-color: var(--clr-bh, #dfebeb);
    width: fit-content;
    padding: 1rem;
    border-radius: 0.5rem;
}

.section-header[b-b2fmci12d0] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-family: Inter, Matter, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.5;
}

.section-subheader[b-b2fmci12d0] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-family: Inter, Matter, Arial, sans-serif;
    line-height: 1.5;
}

.section-title[b-b2fmci12d0] {
    text-align: start;
    padding-top: 0.25rem;
}
/* /Features/PaymentMethods/Components/CardAccounts/CardAccountDetails.razor.rz.scp.css */
.card-account-details-card[b-j9cy91ba97] {
    width: min(500px, 100%)
}

.card-account-details-info[b-j9cy91ba97] {
    width: min(717px, 100%);
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    column-gap: 0.5rem;
    margin-bottom: 1rem;
}

.vertical-divider[b-j9cy91ba97] {
    /* lives in the 1px wide middle column of the parent grid */
    width: 100%;
    height: 100%;
    background-color: var(--clr-mn, #c6c6c6);
}

.detail-heading[b-j9cy91ba97] {
    margin-bottom: 0.25rem;
}
/* /Features/PaymentMethods/Components/CardAccounts/CardAccountForm.razor.rz.scp.css */
[b-dr5byi9rye] .card-account-form {
    width: min(400px, 100%);
}

.card-account-form-card[b-dr5byi9rye] {
    width: min(504px, 100%);
    position: relative;
}

.personal-info-form-section[b-dr5byi9rye] {
    margin-top: -4px;
}

.card-pointe-form-section[b-dr5byi9rye] {
    max-height: 7.5rem;
    margin-bottom: 12px;
}

[b-dr5byi9rye] iframe {
    --overreach: 0.5rem;
    margin-left: calc(-1 * var(--overreach));
    margin-right: -0.25rem;
    width: calc(100% + var(--overreach) + 0.25rem);
}

.highlight-section[b-dr5byi9rye] {
    background-color: var(--clr-bh, #dfebeb);
    width: fit-content;
    padding: 1rem;
    border-radius: 0.5rem;
}

.section-header[b-dr5byi9rye] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-family: Inter, Matter, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.5;
}

.section-subheader[b-dr5byi9rye] {
    color: var(--clr-btn-n, #6e6f73);
    font-size: 1rem;
    font-family: Inter, Matter, Arial, sans-serif;
    line-height: 1.5;
}

.section-title[b-dr5byi9rye] {
    text-align: start;
    padding: 0.25rem;
}
/* /Features/PaymentMethods/Components/PaymentMethodActivityGrid.razor.rz.scp.css */
.size-full[b-6aejk7v2f1]  .e-grid .e-gridcontent {
    height: calc(100svh - (16rem + var(--reserved-min-svh-height)) );
}

.size-partial[b-6aejk7v2f1]  .e-grid .e-gridcontent {
    max-height: calc(100svh - (28.125rem + var(--reserved-min-svh-height)) );
}

.caused-by-info-wrapper[b-6aejk7v2f1] {
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

.activity-avatar[b-6aejk7v2f1] {
    align-self: center;
}
/* /Features/PaymentMethods/Components/PaymentMethodHistory.razor.rz.scp.css */
[b-jd96q2i3jb] .oc-search {
    margin-bottom: 1rem;
    margin-top:  0.5rem;
}
/* /Features/PaymentMethods/Components/PaymentMethodPanel.razor.rz.scp.css */
.payment-method-panel[b-whhroap32m] {
    background-color: #ffffffb3;
    border-radius: 16px;
    height: 100%;
    position: relative;
}

[b-whhroap32m] .payment-method-panel-close {
    --swell-size: 0.75rem;
    --visual-padding: 0.25rem;
    position: absolute;
    right: var(--visual-padding);
    top: var(--visual-padding);
    padding: var(--swell-size);
    margin: calc(var(--visual-padding) + -1 * var(--swell-size));
}

.payment-method-panel-content[b-whhroap32m] {
    padding: 1.5rem 1rem 0 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    [b-whhroap32m] .payment-method-panel-close {
        img { transition: transform 150ms ease-in-out; }
        &:hover img[b-whhroap32m] { transform:scale(1.25); }
    }
}
/* /Features/PaymentMethods/Components/PaymentMethodSection.razor.rz.scp.css */
.payment-method-section[b-2lp4ov2wid] {
    --payment-type-width-limit: 528px;
    display: grid;
    grid-template-columns: minmax(min(var(--payment-type-width-limit), 100%), var(--payment-type-width-limit)) 3fr;
    grid-template-rows: auto;
    grid-template-areas: "list content";
    min-height: calc(100svh - (7rem + var(--reserved-min-svh-height)) );
}

.payment-method-section-list[b-2lp4ov2wid] {
    grid-area: list;

    margin-right: 1.5rem;
}

.grouped-category-list[b-2lp4ov2wid] {
    + .grouped-category-list {
        margin-top: 1rem;
    }
}

.empty-payment-methods-text[b-2lp4ov2wid] {
    padding: 1rem;
    text-align: center;
    color: var(--clr-btn-n, #6e6f73);
}

.payment-category-group-header[b-2lp4ov2wid] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.payment-counter[b-2lp4ov2wid] {
    padding-right: 0.25rem;
}

.payment-method-section-content[b-2lp4ov2wid] {
    grid-area: content;
}

.payment-method-section-list-item-container[b-2lp4ov2wid] {
    background-color: #ffffffb3;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    width: 100%;

    &.selected:not(:focus-visible) {
        outline: 1px solid var(--clr-1s, #00A894);
        outline-offset: -1px;
    }

    &:hover[b-2lp4ov2wid] {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
    }
}

.payment-method-section-list-item-container.selected[b-2lp4ov2wid] {
}

.payment-method-section-list-item-container:hover[b-2lp4ov2wid] {
    background-color: #ffffff;
}

@media (width <= 1500px)
{
    .payment-method-section[b-2lp4ov2wid] {
        --payment-type-width-limit: 375px;
    }
}

[b-2lp4ov2wid] .autopay-buttons-wrapper {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

[b-2lp4ov2wid] .autopay-btn {
    display: flex;
    align-items: center;

    img {
        margin-top: -3px;
    }
}

.autopay-disabled-error[b-2lp4ov2wid] {
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--clr-err-bld, #d44040);
    background-color: var(--clr-err50, #fbecec);
    color: var(--clr-err-bld_75, #d44040bf);
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
}
/* /Features/PaymentMethods/Components/RemoveDefaultMethodModal.razor.rz.scp.css */
.remove-default-modal-title[b-wg0z0551mq] {
    margin-bottom: 0.5rem;
}

.remove-default-modal-subtitle[b-wg0z0551mq] {
    font-weight: 600;
    line-height: 1.5;
}

.remove-default-modal-title[b-wg0z0551mq],
.remove-default-modal-subsubtitle[b-wg0z0551mq] {
    font-weight: 400;
    line-height: 1.5;
}

.selection-container[b-wg0z0551mq] {
    margin: 8px 0;
}

.payment-method-selector[b-wg0z0551mq] {
    margin: 16px 4px;
}

.payment-method-section-list-item-container[b-wg0z0551mq] {
    background-color: #ffffffb3;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    width: 100%;

    &.selected:not(:focus-visible) {
        outline: 1px solid var(--clr-1s, #00A894);
        outline-offset: -1px;
    }

    &:hover[b-wg0z0551mq] {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
        background-color: #ffffff;
    }
}

.payment-method-section-list-item-container.selected[b-wg0z0551mq] {
    background-color: var(--clr-bh, #dfebeb);

    &:hover {
        box-shadow: 0 0 5px var(--clr-dn, #636363);
        background-color: var(--clr-bh, #dfebeb);
    }

    &[b-wg0z0551mq]  .default-marker {
        background-color: var(--clr-1p, #005b5e) !important;
        color: var(--clr-bh, #dfebeb) !important;
    }
}
/* /Features/PendingServices/PendingServicesModal.razor.rz.scp.css */
.pending-services-subtitle[b-rrs3dghoya] {
    color: var(--clr-dn, #636363);
}

.pending-services-list[b-rrs3dghoya] {
    background-color: white;
    border-radius: 8px;
    height: 440px;
    overflow: auto;

    li:not(:first-child) {
        border-top: 1px solid var(--clr-ln_70, #eaeaeab3);
    }

    li[b-rrs3dghoya] {
        padding: 0.625rem 1rem;
        display: grid;
        grid-template-columns: 90px 2fr 3fr;
        grid-template-rows: 20px 1fr;
        grid-template-areas: 
            "date       date    date"
            "referrence service asset";
    }
}

.service-delivery-date[b-rrs3dghoya] {
    grid-area: date;
    color: var(--clr-dn, #636363);
    line-height: 1.5;
    font-size: 0.8175rem; /* 13px */
}

.service-ref-id[b-rrs3dghoya] {
    grid-area: referrence;
    text-align: left;
}

.service-name[b-rrs3dghoya] {
    span {
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        color: var(--clr-dn2, #4d4e51);
        background-color: var(--clr-ln2, #f1f1f1)
    }
}

.asset-name[b-rrs3dghoya] {
    text-align: right;
}

.ref-id-button[b-rrs3dghoya] {
    text-align: left;
}
/* /Features/Pricing/Components/PricebookModal.razor.rz.scp.css */
.content-container[b-dmamnzqril] {
    background-color: #fff;
    border-radius: 0.5rem;
}

[b-dmamnzqril] .usage-contract-card {
    margin-bottom: 0.375rem;
}

[b-dmamnzqril] .usage-contract,
[b-dmamnzqril] .pricing {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
}

[b-dmamnzqril] .subheader {
    color: var(--clr-btn-n, #6E6F73);
    font-family: Inter, Matter, Arial, sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

[b-dmamnzqril] .key-value-pairs {
    display: grid;
    width: max-content;
}

[b-dmamnzqril] .details-key-value {
    display: grid;
    grid-column: span 2 / span 2;
    grid-template-columns: subgrid;
    column-gap: 0.25rem;
}

[b-dmamnzqril] .details-key-value label,
[b-dmamnzqril] .details-key-value span {
    color: var(--clr-btn-n, #6E6F73);
    font-family: Inter, Matter, Arial, sans-serif;
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
    letter-spacing: 0.03em;
}

[b-dmamnzqril] .details-key-value label {
    padding-right: 3rem !important;
}

[b-dmamnzqril] .details-key-value span {
    text-align: right;
}

[b-dmamnzqril] .mini-contact-us-popup-wrapper {
    display: inline-block;
    vertical-align: baseline;
}

[b-dmamnzqril] .mini-contact-us-popup-wrapper button {
    font-size: 0.6875rem;
}

.footer-content[b-dmamnzqril] {
    width: 90%;
    float: left;
    text-align: left; 
    display: inline; 
    align-items: center; 
    color: var(--clr-dn, #636363);
    font-size: 0.6875rem;
}
/* /Features/Pricing/Components/UsageContractCard.razor.rz.scp.css */
/* /Features/Pricing/Components/UsageContractModal.razor.rz.scp.css */
.header-container[b-r938touopp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-container[b-r938touopp] {
    background-color: #fff;
    border-radius: 0.5rem;
    height: 9rem;
}

[b-r938touopp] .usage-contract {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
}

.content-container.no-po[b-r938touopp] {
    height: 11rem;
}

.content-container.empty[b-r938touopp] {
    height: 11rem;
    align-items: center;
    justify-content: center;

    & span {
        color: var(--clr-dn, #636363); 
        font-size: 1rem;
        font-weight: 500;
    }
}

.last-usage-period-pill[b-r938touopp] {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    background-color: var(--clr-mn, #c6c6c6);
}

.last-usage-period-pill span[b-r938touopp] {
    color: var(--clr-blk, #112333);
    font-family: Matter, Inter, Arial, sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
    letter-spacing: -0.05em;
}

.above-content-container[b-r938touopp] {
    margin: 0 0 1rem;
}

[b-r938touopp] .usage-contract,
.pricing[b-r938touopp] {
    padding: 0.75rem;
}

.above-content-container[b-r938touopp]  .details-key-value label,
.above-content-container[b-r938touopp]  .details-key-value span {
    color: var(--clr-blk, #112333) !important;
    font-family: Matter, Inter, Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    letter-spacing: -0.05em !important;
}

.above-content-container[b-r938touopp]  .details-key-value label {
    font-weight: 600 !important;
}

.above-content-container[b-r938touopp]  .details-key-value span {
    font-weight: 400 !important;
}

[b-r938touopp] .subheader {
    color: var(--clr-btn-n, #6E6F73);
    font-family: Inter, Matter, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.key-value-pairs[b-r938touopp],
[b-r938touopp] .key-value-pairs {
    display: grid;
    width: max-content;
}

[b-r938touopp] .details-key-value {
    display: grid;
    grid-column: span 2 / span 2;
    grid-template-columns: subgrid;
    column-gap: 0.25rem;
}

[b-r938touopp] .details-key-value label,
[b-r938touopp] .details-key-value span {
    color: var(--clr-btn-n, #6E6F73);
    font-family: Inter, Matter, Arial, sans-serif;
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
    letter-spacing: 0.03em;
}

[b-r938touopp] .details-key-value label {
    padding-right: 3rem !important;
}

[b-r938touopp] .details-key-value span {
    text-align: right;
}
/* /Features/RemovedAssets/Components/RemovedAssetsForJobsiteGrid.razor.rz.scp.css */
.asset-buttons-container[b-j0fqm0f61f] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

.asset-buttons-container[b-j0fqm0f61f],
button:has(.pricebook-icon)[b-j0fqm0f61f] {
    transform: translateY(0.375rem);
}
/* /Features/RemovedAssets/Components/RemovedAssetsForJobsiteModal.razor.rz.scp.css */
.removed-assets-for-jobsite-counter[b-6lvw544tdf] {
    color: var(--clr-dn, #636363);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;
    padding-top: 1rem;
}
/* /Features/RemovedAssets/Components/RemovedAssetsGrid.razor.rz.scp.css */
.asset-buttons-container[b-yl3m47hedw] {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

.asset-buttons-container[b-yl3m47hedw],
button:has(.pricebook-icon)[b-yl3m47hedw] {
    transform: translateY(0.375rem);
}

.jobsite-address[b-yl3m47hedw] {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    color: var(--clr-dn, #636363);
}
/* /Features/RemovedAssets/Components/RemovedAssetsModal.razor.rz.scp.css */
.removed-assets-counter[b-lrkungrgmz] {
    color: var(--clr-dn, #636363);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    letter-spacing: 0.05em;
    padding-top: 1rem;
}
/* /Features/UnbilledActivities/UnbilledActivityForJobsiteGrid.razor.rz.scp.css */
.unbilled-activity-for-jobsite-grid-jobsite-number[b-sn65nvdury] {
    text-decoration: underline;
}

.unbilled-activity-for-jobsite-grid-jobsite-name[b-sn65nvdury] {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    text-decoration: underline;
}

.default-marker[b-sn65nvdury] {
    padding: 0.25rem 1rem;
    border-radius: 1000vmax;
    background-color: var(--clr-mn_50, #c6c6c680);
    color: var(--clr-dn, #636363);
    width: fit-content;
}

[b-sn65nvdury] #unbilled-activity-for-jobsite-sfgrid .e-gridcontent {
    overflow: auto;
    max-height: 445px;
}
/* /Features/UnbilledActivities/UnbilledActivityForJobsiteModal.razor.rz.scp.css */
.unbilled-activity-for-jobsite-model-grid-label[b-2upf8ms4jk] {
    position: relative;
    margin-top: .375rem;
    bottom: -.25rem;
    color: var(--clr-dn, #636363);
}
/* /Features/UnbilledActivities/UnbilledActivityGrid.razor.rz.scp.css */
.unbilled-activity-grid-jobsite-number[b-oz4tv1ivo7] {
    text-decoration: underline;
}

.unbilled-activity-grid-jobsite-name[b-oz4tv1ivo7] {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    text-decoration: underline;
}

.default-marker[b-oz4tv1ivo7] {
    padding: 0.25rem 1rem;
    border-radius: 1000vmax;
    background-color: var(--clr-mn_50, #c6c6c680);
    color: var(--clr-dn, #636363);
    width: fit-content;
}

[b-oz4tv1ivo7] #unbilled-activity-sfgrid .e-gridcontent {
    overflow: auto;
    max-height: 445px;
}
/* /Features/UnbilledActivities/UnbilledActivityModal.razor.rz.scp.css */
.unbilled-activity-model-grid-label[b-i2zvsvog8u] {
    position: relative;
    margin-top: .375rem;
    bottom: -.25rem;
    color: var(--clr-dn, #636363);
}
/* /Layout/AgingHeaderLayout.razor.rz.scp.css */
.home-layout[b-yjr2ktfjrg] {
    padding: 1rem;
}

.aging-header[b-yjr2ktfjrg] {
    min-height: var(--page-level-header-min-height);
    margin-bottom: 1rem;
    height: 1px;
}

.aging-header[b-yjr2ktfjrg]  .oc-grid-layout,
.aging-header[b-yjr2ktfjrg]  .glass.frame {
    height: 100%;
}

[b-yjr2ktfjrg] .home-content:has(#open-invoices-grid) {
    padding-bottom: 0.25rem;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.faux-float-right[b-sgvs2sblz1] {
    margin-inline: auto 1rem;
}

[b-sgvs2sblz1] .current-customer-name,
.current-customer-name[b-sgvs2sblz1] {
    text-align: right;
    margin-inline: auto 0.5rem;
    max-width: 20vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-transform: uppercase;
}
/* /Pages/Authentication.razor.rz.scp.css */
.auth-state-wrapper[b-ql2js2xdbs] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-state[b-ql2js2xdbs] {
    background-color: var(--clr-1p, #005b5e);;
    color: var(--clr-wht, #fafeff);;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    min-width: 150px;
}

[b-ql2js2xdbs] .e-spinner-pane.e-spin-show {
    margin-top: 1rem;
    width: 100%;
    height: 75px;
    left: unset;
    top: unset;
    position: relative;
}
/* /Pages/JobsiteDetails.razor.rz.scp.css */
.jobsite-details-page[b-y0rvy2z7nz] {
    --page-level-header-min-height: 9.6875rem; /* 155px */
    --reserved-min-svh-height:
            calc(var(--header-height)
            + var(--page-level-header-min-height)
            + var(--footer-height)
            + 2rem);
    position: relative;
    display: grid;
    height: 90vh;
    min-height: fit-content;
    margin: 0 1rem;
    grid-template-rows: var(--page-level-header-min-height) 4rem auto;
    grid-template-areas:
        "kpi"
        "banner"
        "tabs";
}

.jobsite-kpi-container[b-y0rvy2z7nz] {
    grid-area: kpi;
    margin-bottom: 1.5rem;
}

.banner-container[b-y0rvy2z7nz] {
    grid-area: banner;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.tabs-container[b-y0rvy2z7nz] {
    grid-area: tabs;
    margin-bottom: 0.125rem;
    min-width: calc(100vw - 2rem);
}

.overview-cards[b-y0rvy2z7nz] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    padding-block: 0.5rem;
    min-height: 700px;
}

.services-summary-card[b-y0rvy2z7nz],
.assets-summary-card[b-y0rvy2z7nz] {
    padding: 1.5rem;
}

.section-card[b-y0rvy2z7nz] {
    border-radius: 1rem;
    background-color: white;
    padding: 1rem;
}

.search-and-sort[b-y0rvy2z7nz] {
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: 1rem;
}

[b-y0rvy2z7nz] .oc-search {
    height: 2rem;
}

.view-switcher-container[b-y0rvy2z7nz] {
    width: 144px;
}

.hidden[b-y0rvy2z7nz] {
    display: none;
}

[b-y0rvy2z7nz] .filter-buttons {
    column-gap: 1rem;
}

[b-y0rvy2z7nz] .advanced-filter-button {
    padding: 0.25rem 0.75rem;
    column-gap: 0.25rem;
    background: white;
    
    span {
        transform: translateY(0.125rem);
    }
}

[b-y0rvy2z7nz] .saved-filters-dropdown {
    margin-top: 0;
    border-color: transparent !important;
    background-color: white !important;
    backdrop-filter: blur(8px);
    box-shadow: var(--glass-shadow) !important;
    border-radius: 8px !important;
    
    &:hover {
        background-color: #fff !important;
        box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }
}

[b-y0rvy2z7nz] .saved-filters-dropdown.e-input-focus:focus-visible {
    outline-offset: 2px;
    outline: 2px solid var(--clr-1s, #00A894);
}

[b-y0rvy2z7nz] .saved-filters-dropdown label {
    background-color: transparent !important;
    color: var(--clr-blk_75) !important;
    
    &:not(.e-label-top) {
        font-size: 1rem !important;
    }
}

[b-y0rvy2z7nz] .saved-filters-dropdown label.e-label-top {
    background-color: #f2f5f5e0 !important;
}

.assets-grid-wrapper[b-y0rvy2z7nz],
.services-grid-wrapper[b-y0rvy2z7nz] {
    margin-top: 1rem;
}

.visit-invoices-prompt[b-y0rvy2z7nz] {
    display: flex;
    align-items: baseline;
    padding-top: 2px;
    column-gap: 0.125rem;
}

.visit-invoices-page-link[b-y0rvy2z7nz] { /* faux textprimary button */
    padding: 0.25rem 0 0.175rem;
    border-radius: 1000vmax;
    position: relative;
    min-width: fit-content;
    transition: all 125ms ease-in;
    transition-property: color, background-color, border-color;
    cursor: pointer;
    background: transparent;
    color: var(--clr-1p, #005b5e);
    border: 1px solid transparent;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 1.5;

    &:focus-visible {
        outline-offset: 2px;
        outline: 2px solid var(--clr-1s, #00A894);
    }
    
    &[b-y0rvy2z7nz]::after {
        content: '';
        background-color: var(--clr-1p, #005b5e);
        width: 100%;
        transform-origin: center;
        transform: scaleX(0);
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    &:hover[b-y0rvy2z7nz] {
        opacity: 80%;

        &::after { transform: scaleX(1); }
    }
}

[b-y0rvy2z7nz] ul.oc-tabbed-page {
    border-radius: 4px;
    background: #f5f5f5;
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
}

[b-y0rvy2z7nz] .catalog-preview-outside-wrapper {
    height: calc(100% - 1rem);
}

@media (prefers-reduced-motion: no-preference) {
    .visit-invoices-page-link[b-y0rvy2z7nz] {
        &::after {
            transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
    }
}

@media (height > 1140px) {
    .overview-cards[b-y0rvy2z7nz] {
        height: calc(100svh - 25rem);
    }
}
/* /Pages/JobsitesPage.razor.rz.scp.css */
.jobsites-page[b-nez4go7bqd] {
    --page-level-header-min-height: 9.6875rem; /* 155px */
    --reserved-min-svh-height:
            calc(var(--header-height)
               + var(--page-level-header-min-height)
               + var(--footer-height)
               + 15.125rem);
    /* 15.125rem(242px) is the added height of pagination controls, grid search, page tab control on this jobsites page etc. */
    --tab-content-grid-max-height: calc(100svh - var(--reserved-min-svh-height));
    
    position: relative;
    display: grid;
    height: 90vh;
    min-height: fit-content;
    margin: 0 1rem;

    grid-template-columns: 1fr 263px;
    grid-template-rows: var(--page-level-header-min-height) 48px auto;
    grid-template-areas:
        "kpi my-jobsites"
        "banner banner"
        "tabs tabs";
}

#kpi-container[b-nez4go7bqd] {
    grid-area: kpi;
    margin-bottom: 1.5rem;
}

#my-jobsites-pill-container[b-nez4go7bqd] {
    grid-area: my-jobsites;
    margin-bottom: 1.5rem;
    align-content: center;
    justify-items: center;
}

#banner-container[b-nez4go7bqd] {
    grid-area: banner;
    margin-bottom: 0.5rem;
}

#tabs-container[b-nez4go7bqd] {
    grid-area: tabs;
    margin-bottom: 1rem;
}

/* My Jobsites Component */
.my-jobsites-pill-component[b-nez4go7bqd] {
    height: 100%;
    width: 100%;

    display: grid;
    padding-left: 1rem;   
}

/* Tabs and Content Component */
.tabs-component[b-nez4go7bqd] {
    height: 100%;
    width: 100%;
}

.tabs-component[b-nez4go7bqd]  .oc-tabbed-page {
    height: 45px;
    border-radius: 0.25rem;
    background: #f5f5f5;
    box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.tabs-component[b-nez4go7bqd]  .oc-tabbed-page li:not(:has(a[aria-selected]), .oc-disabled-tab) {
    opacity: 0.8;
    &:hover {
        opacity: 1;
    }
}

.tabs-component[b-nez4go7bqd]  .oc-tab-content {
    height: 100%;
}

.search-and-sort[b-nez4go7bqd] {
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: 1rem;
}

[b-nez4go7bqd] .oc-search {
    height: 2rem;
}

.view-switcher-container[b-nez4go7bqd] {
    width: 144px;
}

.hidden[b-nez4go7bqd] {
    display: none;
}

[b-nez4go7bqd] .filter-buttons {
    column-gap: 1rem;
}

[b-nez4go7bqd] .advanced-filter-button {
    padding: 0.25rem 0.75rem;
    column-gap: 0.25rem;
    background: white;
    
    span {
        transform: translateY(0.125rem);
    }
}

[b-nez4go7bqd] .saved-filters-dropdown {
    margin-top: 0;
    border-color: transparent !important;
    background-color: white !important;
    backdrop-filter: blur(8px);
    box-shadow: var(--glass-shadow) !important;
    border-radius: 8px !important;
    
    &:hover {
        background-color: #fff !important;
        box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }
}

[b-nez4go7bqd] .saved-filters-dropdown.e-input-focus:focus-visible {
    outline-offset: 2px;
    outline: 2px solid var(--clr-1s, #00A894);
}

[b-nez4go7bqd] .saved-filters-dropdown label {
    background-color: transparent !important;
    color: var(--clr-blk_75) !important;
    
    &:not(.e-label-top) {
        font-size: 1rem !important;
    }
}

[b-nez4go7bqd] .saved-filters-dropdown label.e-label-top {
    background-color: #f2f5f5e0 !important;
}

.assets-grid-wrapper[b-nez4go7bqd],
.services-grid-wrapper[b-nez4go7bqd] {
    margin-top: 1rem;
}

.contact-for-service-prompt-container[b-nez4go7bqd] {
    --height: 2.8125rem; /* 45px */
    height: var(--height);
    position: absolute;
    top: calc(-1 * var(--height));
    right: 0;
    border-radius: 0.25rem;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    background-color: var(--clr-ln_70, #eaeaeab3);
}

[b-nez4go7bqd] .catalog-preview-outside-wrapper {
    height: calc(100% - 3rem);
}

[b-nez4go7bqd] .contact-for-service-button {
    --padding-unit: 0.1875rem; /* all padding based off of multiples of 3px */
    padding:
        calc(2 * var(--padding-unit)) /* top */
        var(--padding-unit)           /* right */
        var(--padding-unit)           /* bottom */
        var(--padding-unit);          /* left */
    
    &::after {
        width: calc(100% - (2 * var(--padding-unit))) !important;
        left: var(--padding-unit) !important;
    }
}
/* /Pages/Launch.razor.rz.scp.css */
.full-screen-spinner[b-0kb06yalvk] {
    z-index: 9999;
    position: fixed;
    inset: 0;
    background: var(--clr-mesh-average, rgb(195, 217, 215));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
}

.full-screen-spinner[b-0kb06yalvk]  .e-spinner-pane {
    transform: translateY(3.5rem);
}
/* /Pages/PaymentReceipt.razor.rz.scp.css */
.receipt-container[b-jk0etxy9p4] {
    height: 100svh;
    padding-block: 2rem;
    display: flex;
    align-items: start;
    justify-content: center;
    overflow: auto;
    
    header {
        display: flex;
        align-items: start;
        justify-content: space-between;
    }
}

.payment-receipt[b-jk0etxy9p4] {
    --block-padding: 2rem;
    --inline-padding: calc(var(--block-padding) * 1.25);
    --receipt-footer-height: 4rem;
    position: relative;
    padding-top: var(--block-padding);
    padding-inline: var(--inline-padding);
    padding-bottom: calc(var(--block-padding) + var(--receipt-footer-height));
    width: min(calc(725px + calc(2 * var(--inline-padding))), 100vw);
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    
    /* setting the min height as an aspect ratio of the width
     * so the page's receipt mimics an 8.5 x 11 sheet of paper 
     * Using the "aspect-ratio" css property would not work because this is to be
     * a minimum height and not a fixed height */
    min-height: min(calc((725px + (2 * var(--inline-padding))) * 1.29), 129vw);
    
    &.error {
        background-color: var(--clr-err50, #fbecec);
        color: var(--clr-err400, #942c2c);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: max(7.5%, 2rem);
        row-gap: 1rem;
        
        p {
            text-align: center;
        }
    }
}

.logo-tagline[b-jk0etxy9p4] {
    display: block;
    margin: -1em 0 0 0;
    line-height: 2;
    color: var(--clr-1p, #005b5e);
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
}

.company-address-info[b-jk0etxy9p4] {
    color: black;
    margin: 0;
    font-size: 0.75rem;
}

.receipt-header-text[b-jk0etxy9p4] {
    h1 {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.5;
        padding-top: 1rem;
        text-align: right;
        color: var(--clr-blk, #112333);
    }
}

.payment-date[b-jk0etxy9p4] {
    font-size: 0.8125rem; /* 13px */
    font-weight: 400;
    line-height: 1.5;
    color: black;
    display: flex;
    min-width: fit-content;
    column-gap: 0.5rem;
    white-space: nowrap;
    
    strong {
        font-weight: 600;
    }
}

.receipt-body[b-jk0etxy9p4],
.receipt-summary[b-jk0etxy9p4] {
    border-bottom: 1px solid var(--clr-1p);
}

.receipt-body-text[b-jk0etxy9p4] {
    color: var(--clr-blk, #112333);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    margin-block: 0.875rem; /* 14px */
    margin-inline: auto;
    
    strong {
        font-weight: 500;
    }
}

.receipt-summary[b-jk0etxy9p4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem 0.75rem;
}

.customer-info-summary[b-jk0etxy9p4] {
    h2 {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: -.05em;
        color: var(--clr-blk, #112333);
        margin: 12px 0 0 0;
    }
}

.customer-address[b-jk0etxy9p4] {
    font-size: 0.8215rem; /* 13px */
}

.mock-city-state-zip[b-jk0etxy9p4] {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.payment-summary[b-jk0etxy9p4] {
    border-left: 1px solid #d8e1e3;
    padding-left: 0.75rem;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    
    > label {
        color: black;
        font-size: 0.6875rem; /* 11px */
        letter-spacing: .1em;
        margin-bottom: 0.25rem;
        margin-top: 0.75rem;
        grid-column: span 2 / span 2;
    }
}

.payment-summary-key-value[b-jk0etxy9p4] {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2 / span 2;
    
    label {
        color: black;
        font-weight: 500;
        letter-spacing: .02em;
    }
    span[b-jk0etxy9p4] { color: var(--clr-blk, #112333); }
}

.receipt-line-items[b-jk0etxy9p4] {
    padding-block: 0.5rem;
    
    > label {
        color: black;
        font-size: 0.6875rem; /* 11px */
        letter-spacing: .1em;
        margin-bottom: 0.25rem;
        margin-top: 0.75rem;
    }
}

.line-items-table[b-jk0etxy9p4] {
    width: 100%;
    
    th {
        text-align: right;
        color: var(--clr-dn, #636363);
        border-bottom: 1px solid #D8E1E3;
        font-size: 0.6875rem; /* 11px */
        padding: 0 0.5rem;
        
        &:first-child,
        &:only-child {
            border-bottom-left-radius: 4px;
        }
        &:last-child[b-jk0etxy9p4],
        &:only-child[b-jk0etxy9p4] {
            border-bottom-right-radius: 4px;
        }
        
        &.th-left[b-jk0etxy9p4] {
            text-align: left;
        }
    }
    
    td[b-jk0etxy9p4] {
        padding: 2px 8px;
        vertical-align: baseline;
        font-size: 0.8125rem; /* 13px */
        letter-spacing:0.02em;
        line-height:1.5;
        
        &:not(.jobsite-cell) {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        
        &.jobsite-cell span[b-jk0etxy9p4] {
            font-size: 0.6875rem; /* 11px */
            letter-spacing: 0.02em;
            line-height: 1.5;
        }
    }
}

.receipt-footer[b-jk0etxy9p4] {
    min-height: var(--receipt-footer-height);
    display: block;
    margin:0;
    font-family: Matter,NirmalaUI,Arial,sans-serif;
    color: var(--clr-blk, #112333);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    padding-top: 1rem;
    position: absolute;
    bottom: var(--block-padding);
    inset-inline: var(--inline-padding);
    border-top: 1px solid var(--clr-1p);
    
    a {
        color: #5380D8;
        margin-left:4px;
        
        &.secret-link {
            color: var(--clr-blk, #112333);
            text-decoration: none;
        }
    }
}

.icon-logo[b-jk0etxy9p4] {
    position: absolute;
    right: 0.5rem;
    top: 1rem;
}

.page-break[b-jk0etxy9p4] {
    display: none;
}

@media print {
    *:not(.logo-tagline)[b-jk0etxy9p4] {
        color: black !important;
        border-color: black !important;
    }
    
    .receipt-container[b-jk0etxy9p4] {
        overflow: auto;
        height: unset;
        max-height: unset;
    }

    .payment-receipt[b-jk0etxy9p4] {
        padding: 0;
        width: 100%;
        min-height: 100%;
        background-color: white;
        border-radius: 0;
        box-shadow: none;
    }

    /* anything smaller than 14px set to 14px */
    .receipt-body-text[b-jk0etxy9p4],
    .customer-address[b-jk0etxy9p4],
    .payment-summary > label[b-jk0etxy9p4],
    .payment-summary-key-value[b-jk0etxy9p4],
    .receipt-line-items > label[b-jk0etxy9p4],
    .line-items-table th[b-jk0etxy9p4],
    .line-items-table td[b-jk0etxy9p4],
    .receipt-footer[b-jk0etxy9p4] {
        font-size: 0.875rem;
    }

    .page-break[b-jk0etxy9p4] {
        display: block;
        page-break-before: always;
    }

    .receipt-footer[b-jk0etxy9p4] {
        position: fixed;
        bottom: 0;
        inset-inline: 0;
    }

    .line-items-table th[b-jk0etxy9p4] {
        border-radius: 0 !important;
    }
    
    a[b-jk0etxy9p4] {
        text-decoration: none;
    }
}
/* /Pages/PDFViewer.razor.rz.scp.css */
#report-viewer[b-54jhk5zny1] {
    height: 100svh;
}
/* /Pages/PortalDashboard.razor.rz.scp.css */
.page-content[b-hmyd8zmiyu] {
    margin: 0 1.25rem 1.25rem;
    display: grid;
    grid-template-areas:
        "search search"
        "content links";
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 2.5rem auto;
    gap: 1rem;
}

.search-bar[b-hmyd8zmiyu] {
    grid-area: search;
}

.grid-section[b-hmyd8zmiyu] {
    grid-area: content;
}

.quick-links[b-hmyd8zmiyu] {
    grid-area: links;
}

@media (height > 63.75rem) { /* viewports taller than 1020px, adjusted for user font size settings */
    .page-content[b-hmyd8zmiyu] {
        min-height: calc(100svh - 9rem);
    }
}
/* /Pages/TermsOfServiceViewer.razor.rz.scp.css */
.pdf-wrapper[b-sj4y8uw5gk],
.large-error[b-sj4y8uw5gk] {
    height: calc(100svh - (var(--header-height) + 40px));
    margin: 20px;
    border-radius: 20px;
    overflow: clip;
}
    
[b-sj4y8uw5gk] .error-state {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

[b-sj4y8uw5gk] #AnnotationToolbar,
[b-sj4y8uw5gk] #FormDesignerToolbar,
[b-sj4y8uw5gk] #RedactionToolbarContainer,
[b-sj4y8uw5gk] .e-pv-fileupload-element{
    display: none;
}

[b-sj4y8uw5gk] .e-pv-sidebar-toolbar {
    top: 0 !important;
    height: 100% !important;
}

@media (width < 1000px) {
    .pdf-wrapper[b-sj4y8uw5gk],
    .large-error[b-sj4y8uw5gk] {
        inset: 0;
        top: var(--header-height);
    }
}