@import '_content/InsuranceUp.Packages.UpGrid.Razor/InsuranceUp.Packages.UpGrid.Razor.qu6frxjalr.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Common/AgencyLogo/AgencyLogo.razor.rz.scp.css */
/*
 * The plaque. A landscape rectangle that a wordmark fits inside without being cropped, and that an agency with
 * no logo fills with its initials instead — same silhouette either way, so a list keeps one rhythm.
 *
 * An uploaded mark is given no ground of its own. Painting one behind it was a guess about what agencies upload
 * — dark ink on white — and the guess shows as a white border around everything that is not that, which is most
 * photographs and every logo that already carries its own background. Whatever is in the file is what is drawn.
 *
 * Initials are ours to draw, so those do get a ground; the host sets its two custom properties.
 */
.plaque[b-0o1kqcg66k] {
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: 7px;
}

/* Initials are not a logo, and the plaque says so by not pretending to be a lit sign. */
.plaque.is-blank[b-0o1kqcg66k] {
    background: var(--agency-logo-blank-surface, rgba(127, 127, 127, .14));
    color: var(--agency-logo-blank-ink, var(--neutral-foreground-hint, #767676));
}

.plaque img[b-0o1kqcg66k] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.initials[b-0o1kqcg66k] {
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
}

/* ---- sizes ------------------------------------------------------------ */

.is-small[b-0o1kqcg66k] {
    width: 44px;
    height: 32px;
    border-radius: 6px;
}

.is-small .initials[b-0o1kqcg66k] {
    font-size: 11.5px;
}

.is-medium[b-0o1kqcg66k] {
    width: 60px;
    height: 44px;
}

.is-medium .initials[b-0o1kqcg66k] {
    font-size: 14px;
}

.is-large[b-0o1kqcg66k] {
    width: 88px;
    height: 64px;
    border-radius: 9px;
}

.is-large .initials[b-0o1kqcg66k] {
    font-size: 20px;
}

@media (max-width: 520px) {
    .is-large[b-0o1kqcg66k] {
        width: 68px;
        height: 50px;
    }

    .is-large .initials[b-0o1kqcg66k] {
        font-size: 16px;
    }
}
/* /Components/Common/AgencyLogo/AgencyLogoField.razor.rz.scp.css */
/*
 * Logo and name are one fact about an agency, so this sits at the top of the settings form beside the name, and
 * shows the mark at the size the chooser will draw it.
 */
.logo-field[b-e1m9dzck6b] {
    --agency-logo-blank-surface: rgba(127, 127, 127, .14);
    --agency-logo-blank-ink: var(--neutral-foreground-hint, #767676);

    /* A fieldset defaults to min-inline-size: min-content, which makes it refuse to shrink into the dialog. */
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.logo-label[b-e1m9dzck6b] {
    margin-bottom: 8px;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
}

.logo-row[b-e1m9dzck6b] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.logo-controls[b-e1m9dzck6b] {
    flex: 1;
    min-width: 0;
}

.logo-drop[b-e1m9dzck6b] {
    margin: 0;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.logo-drop label[b-e1m9dzck6b] {
    color: var(--accent-fill-rest);
    text-decoration: underline;
    cursor: pointer;
}

.logo-footer[b-e1m9dzck6b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 8px;
}

.logo-hint[b-e1m9dzck6b] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--neutral-foreground-hint, #767676);
}

.logo-error[b-e1m9dzck6b] {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--error);
}

@media (max-width: 560px) {
    .logo-row[b-e1m9dzck6b] {
        flex-direction: column;
    }
}
/* /Components/Common/BranchSelector/BranchSelect.razor.rz.scp.css */
.branch-selected-option[b-vrp2dvv0gm] {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branch-select-error[b-vrp2dvv0gm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.branch-select-error-content[b-vrp2dvv0gm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius);
    min-height: 32px;
}

.branch-select-error-message[b-vrp2dvv0gm] {
    flex: 1;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
}

/* /Components/Common/ErrorDialog.razor.rz.scp.css */

[b-qzp2k1p2ld].error-dialog .error-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

[b-qzp2k1p2ld].error-dialog .error-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-qzp2k1p2ld].error-dialog .error-header-text {
    flex: 1;
    min-width: 0;
}

[b-qzp2k1p2ld].error-dialog .error-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
}

[b-qzp2k1p2ld].error-dialog .error-codes {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    font-family: var(--font-mono);
}

[b-qzp2k1p2ld].error-dialog .error-message {
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
}

[b-qzp2k1p2ld].error-dialog .error-section {
    margin-bottom: 20px;
}

[b-qzp2k1p2ld].error-dialog .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

[b-qzp2k1p2ld].error-dialog .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-qzp2k1p2ld].error-dialog .validation-errors {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-qzp2k1p2ld].error-dialog .validation-error {
    padding: 12px;
    background: var(--fill-color-critical-subtle);
    border: 1px solid var(--neutral-stroke-accessible-rest);
    border-radius: 6px;
    border-left: 3px solid var(--fill-color-critical-primary);
}

[b-qzp2k1p2ld].error-dialog .validation-error-field {
    font-weight: 600;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

[b-qzp2k1p2ld].error-dialog .validation-error-message {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

[b-qzp2k1p2ld].error-dialog .validation-error-value {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-family: var(--font-mono);
}

[b-qzp2k1p2ld].error-dialog .suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-qzp2k1p2ld].error-dialog .suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--fill-color-accent-subtle);
    border-radius: 6px;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

[b-qzp2k1p2ld].error-dialog .trace-id {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 20px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-family: var(--font-mono);
}
/* /Components/Common/MarkdownSection/MarkdownSection.razor.rz.scp.css */
[b-ng5klrqgku] th {
    padding: 0 5px 0 5px;
    border-width: 1px;
}

[b-ng5klrqgku] td {
    padding: 0 5px 0 5px;
    border-width: 1px;
}

[b-ng5klrqgku] .snippet {
    margin-bottom: 0.5rem;
    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    overflow-y: auto;
}

[b-ng5klrqgku] .hljs {
    background-color: var(--neutral-layer-2);
    tab-size: 2em;
}

[b-ng5klrqgku] .hljs-copy-button {
    border-color: var(--neutral-fill-strong-rest);
    color: var(--accent-fill-rest);
    top: 0.4rem;
    /*background-color: var(--neutral-layer-2) !important;*/
    /*background-image: url('data:image/svg+xml;utf-8,<svg style="fill: none; width: 16px; height: 16px;" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="black"  /></svg>');*/
}

[b-ng5klrqgku] .hljs-copy-button:hover {
    border-color: var(--neutral-fill-strong-hover);
}

[b-ng5klrqgku] .hljs-copy-button:active {
    border-color: var(--neutral-fill-strong-active);
}

[b-ng5klrqgku] .hljs-copy {
    cursor: pointer;
    border-color: var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    color: var(--accent-fill-rest);
    background-color: var(--neutral-layer-2);
    top: 0.4rem;
}

[b-ng5klrqgku] .hljs-copy {
    position: absolute;
    transform: translateX(calc(100% + 1.125em));
    right: 1em;
    transition: background-color 200ms ease, transform 200ms ease-out;
}

[b-ng5klrqgku] .hljs-copy-wrapper {
    position: relative;
    overflow: hidden
}

[b-ng5klrqgku] .hljs-copy-wrapper:hover .hljs-copy, .hljs-copy:focus[b-ng5klrqgku] {
    transform: translateX(0);
}
/* /Components/Common/PropertyBox/PropertyBox.razor.rz.scp.css */
/* /Components/Common/PropertyBox/PropertyBoxContainer.razor.rz.scp.css */
:root[b-yea4jleymy] {
    --min-item-size: 120px;
}

.property-box-container[b-yea4jleymy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-item-size), 1fr));
    gap: 24px;
}

.property-box-container[b-yea4jleymy]  > * {
    min-width: 0;
}
/* /Components/Common/Splitter/Splitter.razor.rz.scp.css */
[b-tvtaaqsux8].wrapper fluent-splitter > div {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[b-tvtaaqsux8].wrapper fluent-splitter > div::-webkit-scrollbar {
    display: none;
}
/* /Components/Layout/AgentSetup/AgentSetupLayout.razor.rz.scp.css */
[b-vn819en3ks].layout {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "head"
        "main";
    background-color: var(--fill-color);
    color: var(--neutral-foreground-rest);
}

[b-vn819en3ks].layout > header {
    grid-area: head;
}

[b-vn819en3ks].layout > .body-content {
    grid-area: main;
}

[b-vn819en3ks].layout > .body-content > .container {
    width: 100%;
    height: 100%;
    max-width: 1320px;
    padding: 24px 12px;
    margin: 0 auto;
}

[b-vn819en3ks] .header-right {
    margin-left: auto;
}

[b-vn819en3ks].layout > header fluent-button[appearance=stealth]:not(:hover)::part(control),
[b-vn819en3ks].layout > header fluent-anchor[appearance=stealth]:not(:hover)::part(control),
[b-vn819en3ks].layout > header fluent-anchor[appearance=stealth].logo::part(control) {
    background-color: var(--neutral-layer-4);
}

[b-vn819en3ks].layout > header {
    background-color: var(--neutral-layer-4);
    color: var(--accent-fill-rest);
    margin-bottom: 0;
}

[b-vn819en3ks] .header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--type-ramp-plus-2-font-size);
}

[b-vn819en3ks] .header-title fluent-anchor {
    font-size: var(--type-ramp-plus-2-font-size);
    color: var(--accent-fill-rest);
}
/* /Components/Layout/Authentication/AuthenticationLayout.razor.rz.scp.css */
.auth-layout[b-d8ga82idmu] {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: #0d151f;
    background-image: radial-gradient(at 47% 33%, hsl(210.00, 68%, 31%) 0, transparent 59%),
    radial-gradient(at 82% 65%, hsl(214.08, 88%, 38%) 0, transparent 55%);
}

.content[b-d8ga82idmu] {
    position: relative;
    z-index: 1;
    max-width: 550px;
    padding: 40px;
    backdrop-filter: blur(8px) saturate(200%);
    -webkit-backdrop-filter: blur(8px) saturate(200%);
    background-color: rgba(10, 10, 20, 0.24);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    overflow: auto;
}

[b-d8ga82idmu] fluent-text-field::part(root) {
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    margin-bottom: 6px;
}

[b-d8ga82idmu] fluent-button.auth-btn, [b-d8ga82idmu] .auth-btn > fluent-button {
    height: 48px;
    font-size: 16px;
    background-color: #007BFF;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[b-d8ga82idmu] fluent-button.auth-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

[b-d8ga82idmu] fluent-label[typo="typography.h2"] {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    display: block;
    margin-bottom: 8px;
}

[b-d8ga82idmu] fluent-label[typo="typography.h5"] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
    display: block;
    font-weight: normal;
}

@media screen and (max-width: 600px) {
    .content[b-d8ga82idmu] {
        width: 90%;
        padding: 25px;
    }
}

@media screen and (min-width: 600px) {
    .content[b-d8ga82idmu] {
        width: 50vw;
    }
}
/* /Components/Layout/Chooser/ChooserLayout.razor.rz.scp.css */
/*
 * The field the chooser is drawn on: flat, matte, and near-black with a blue cast, so the only lit things on the
 * page are the agencies' own marks. Deliberately without the radial blur the login layout carries — a blurred
 * gradient behind a list of logos competes with exactly the thing the page is asking somebody to look at.
 */
.stage[b-e4nmjvfg6y] {
    min-height: 100vh;
    min-height: 100dvh;
    background: #0a0f16;
    color: #e8eef6;
}
/* /Components/Layout/Main/AgentInfo.razor.rz.scp.css */
/*
 * The acting agency in the header. The mark is given a real plaque rather than being dropped straight onto the
 * header's own fill, because a logo is drawn for white paper and the header is not white paper.
 */
.agent-group[b-wa0ijjhc4z] {
    --agency-logo-blank-surface: rgba(127, 127, 127, .2);
    --agency-logo-blank-ink: var(--neutral-foreground-rest);

    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.agent[b-wa0ijjhc4z] {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 260px;
    padding: 4px 10px 4px 4px;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.agent:hover[b-wa0ijjhc4z] {
    background: rgba(127, 127, 127, .16);
    border-color: rgba(127, 127, 127, .28);
}

.agent:focus-visible[b-wa0ijjhc4z],
.agent-switch:focus-visible[b-wa0ijjhc4z] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

/* Quiet until wanted: the header's job is to say which agency, not to advertise leaving it. */
.agent-switch[b-wa0ijjhc4z] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.agent-switch:hover[b-wa0ijjhc4z] {
    background: rgba(127, 127, 127, .16);
    border-color: rgba(127, 127, 127, .28);
    color: var(--accent-fill-rest);
}

.agent-switch[b-wa0ijjhc4z]  svg {
    width: 18px;
    height: 18px;
    fill: currentcolor;
}

.agent-name[b-wa0ijjhc4z] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    /* The header has a fixed height and agency names do not; one line, and the rest is in the tooltip. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .agent-name[b-wa0ijjhc4z] {
        display: none;
    }
}
/* /Components/Layout/Main/CallCenter/AloTechCallCenterImplementation.razor.rz.scp.css */
#softphone-iframe[b-kvj943w0bj] {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 999;
}

#hidden-softphone-iframe[b-kvj943w0bj] {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 0;
    width: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

[b-kvj943w0bj].alo-tech-container > .open-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    border-radius: 50%;
    height: 42px;
    width: 42px;
}

[b-kvj943w0bj].alo-tech-container > .close-btn {
    position: absolute;
    right: 20px;
    bottom: 530px;
    z-index: 9999;
}
/* /Components/Layout/Main/Header.razor.rz.scp.css */
[b-d0sls5ccab].header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

[b-d0sls5ccab].header-right > .splitter {
    height: 30px;
    width: .87px;
    border-radius: 4px;
    background-color: var(--neutral-foreground-hint);
}


[b-d0sls5ccab] fluent-button[appearance=stealth]:not(:hover)::part(control),
[b-d0sls5ccab] fluent-anchor[appearance=stealth]:not(:hover)::part(control),
[b-d0sls5ccab] fluent-anchor[appearance=stealth].logo::part(control) {
    background-color: var(--neutral-layer-2);
}

[b-d0sls5ccab].header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--type-ramp-plus-2-font-size);
}

[b-d0sls5ccab].header-title fluent-anchor {
    font-size: var(--type-ramp-plus-2-font-size);
    color: var(--accent-fill-rest);
}
/* /Components/Layout/Main/MainLayout.razor.rz.scp.css */
[b-v4epqdkgp9].layout {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "head head"
        "nav main";
    background-color: var(--fill-color);
    color: var(--neutral-foreground-rest);
    position: relative;

    --header-height: 60px;
}

[b-v4epqdkgp9].layout > header {
    grid-area: head;
    background-color: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    margin-bottom: 0;
    height: var(--header-height);
    border-bottom: 1px solid rgba(115, 115, 115, 0.4);
}

[b-v4epqdkgp9].layout > .nav-menu-container {
    grid-area: nav;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 14px;
    background-color: var(--neutral-layer-2);
    border-right: 1px solid rgba(115, 115, 115, 0.4);
}

[b-v4epqdkgp9].layout > .body-content {
    grid-area: main;
    padding: calc(var(--design-unit) * 5px);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[b-v4epqdkgp9].layout > .body-content::-webkit-scrollbar {
    display: none;
}

/* /Components/Layout/Main/NavMenu.razor.rz.scp.css */
[b-ykgewcnb3z].nav-menu-container .positioning-region {
    background-color: transparent;
}

[b-ykgewcnb3z].nav-menu-container .fluent-nav-link.active .positioning-region:hover {
    background-color: var(--accent-base-color);
}

[b-ykgewcnb3z].nav-menu-container .positioning-region::before {
    content: none !important;
}

[b-ykgewcnb3z].nav-menu-container .fluent-nav-link {
    border-radius: 5px;
}

[b-ykgewcnb3z].nav-menu-container .fluent-nav-link.active {
    background-color: var(--accent-base-color);
}

[b-ykgewcnb3z].nav-menu-container .toggle-btn {
    margin-top: auto;
}
/* /Components/Modules/AgentSetup/Components/AgentSetupFailed.razor.rz.scp.css */
.wrapper[b-31cd3p9mwj] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    height: 100%;
    width: 100%;
}
/* /Components/Modules/AgentSetup/Components/AgentSetupFinished.razor.rz.scp.css */
.loading-wrapper[b-czwhvqzbd4] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
/* /Components/Modules/AgentSetup/Components/AgentSetupForm.razor.rz.scp.css */
.grid[b-1x0pxjo1wu] {
    display: grid;
    grid-template-areas: "step-indicator form";
    grid-template-columns: auto 1fr;
    gap: 20px;
}

[b-1x0pxjo1wu].grid .form {
    grid-area: form;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 30px;
    height: 100%;
    width: 100%;
    padding: 50px;
}

.form > header[b-1x0pxjo1wu] {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 5px;
}

.form > footer[b-1x0pxjo1wu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form > footer > .right[b-1x0pxjo1wu] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.step-indicator[b-1x0pxjo1wu] {
    grid-area: step-indicator;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;

    --step-size: 38px;
}

[b-1x0pxjo1wu].step-indicator > .steps {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.step-indicator .step[b-1x0pxjo1wu] {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-height: var(--step-size);
}

[b-1x0pxjo1wu].step-indicator .step > .step-number {
    border-radius: 50%;
    height: var(--step-size);
    width: var(--step-size);
    font-size: 20px;
    z-index: 5;
    background-color: var(--fill-color);
}

.step-indicator .progress[b-1x0pxjo1wu] {
    position: absolute;
    top: calc(var(--design-unit) * 5px);
    left: calc(var(--design-unit) * 5px + (var(--step-size) / 2) - (4px / 2));
    width: 4px;
    height: calc(100% - (var(--design-unit) * 5px * 2));
    z-index: 3;
    background-color: var(--neutral-stroke-hover);
}

.step-indicator .progress > .progress-bar[b-1x0pxjo1wu] {
    width: 100%;
    background-color: var(--accent-fill-rest);
    transition: height 0.5s ease-in-out;
}
/* /Components/Modules/AgentSetup/Components/AgentSetupLoading.razor.rz.scp.css */
.loading-wrapper[b-woh2qntdom] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
/* /Components/Modules/AgentSetup/Components/AgentSetupResult.razor.rz.scp.css */
/* Column scroller: the card is centered when short and scrolls when tall. The page layout caps this area to
   the viewport, so the wrapper itself must scroll. */
.result-wrapper[b-814r3412rt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 24px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* .result-card sits on a <FluentCard> child component, so scoped styles must cross the component boundary with
   ::deep. height:auto + flex:0 0 auto override FluentCard's fill-the-parent height so the card grows to content;
   margin-block:auto centers it when short. */
.result-wrapper[b-814r3412rt]  .result-card {
    width: 100%;
    max-width: 560px;
    height: auto;
    flex: 0 0 auto;
    margin-block: auto;
}

/* The payment phase is a two-column layout, so it gets more width to use the available space. It is
   top-anchored (not vertically centered) so the plan list's max-height calc below is predictable. */
.result-wrapper[b-814r3412rt]  .result-card--pay {
    max-width: 940px;
    margin-block: 0;
}

.amount-highlight[b-814r3412rt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-divider-rest);
}

/* Payment phase: split the plan info (left) from the payment summary + action (right) so the amount and the
   "pay" button are visible at a glance instead of buried under the long plan-details list. */
.pay[b-814r3412rt] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pay__header[b-814r3412rt] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pay__columns[b-814r3412rt] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.pay__info[b-814r3412rt] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    /* The plan list can be long (every branch is a chip). Cap it to the viewport and scroll it inside the
       card so the scrollbar sits right next to the chips — instead of the whole page scrolling with a
       scrollbar detached far to the right. The 290px reserve covers the top bar (~98px), the wrapper
       padding (48px) and the card's header/padding (~134px) so the card fits without an outer scrollbar.
       If the viewport is too short for even this, the wrapper still scrolls as a fallback and the action
       panel stays put (sticky). */
    max-height: calc(100vh - 290px);
    overflow-y: auto;
    padding-right: 8px;
}

.pay__action[b-814r3412rt] {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    border: 1px solid var(--neutral-stroke-divider-rest);
    /* Keep the action visible while the info column scrolls. */
    position: sticky;
    top: 0;
}

/* Narrow screens: stack, and show the payment action first so it stays visible at a glance. */
@media (max-width: 820px) {
    .pay__columns[b-814r3412rt] {
        flex-direction: column;
    }

    .pay__action[b-814r3412rt] {
        flex-basis: auto;
        width: 100%;
        position: static;
        order: -1;
    }
}
/* /Components/Modules/AgentSetup/Components/Steps/PlanDetails.razor.rz.scp.css */
.plan-details[b-9692tzroiq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-group[b-9692tzroiq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-group-header[b-9692tzroiq] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-chips[b-9692tzroiq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-chip[b-9692tzroiq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: default;
}

.chip-dot[b-9692tzroiq] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.chip-module[b-9692tzroiq] {
    color: #6cb8ff;
    background: rgba(56, 158, 255, 0.14);
    border-color: rgba(56, 158, 255, 0.35);
}

.chip-feature[b-9692tzroiq] {
    color: #c2a6ff;
    background: rgba(160, 120, 255, 0.14);
    border-color: rgba(160, 120, 255, 0.35);
}

.chip-branch[b-9692tzroiq] {
    color: #6ee0d2;
    background: rgba(62, 201, 180, 0.13);
    border-color: rgba(62, 201, 180, 0.32);
}

.chip-overflow[b-9692tzroiq] {
    cursor: help;
    font-weight: 600;
    background: rgba(62, 201, 180, 0.22);
    border-style: dashed;
}

/* Markdown tooltip body for module/feature chips */
.chip-tip[b-9692tzroiq] {
    max-width: 340px;
    font-size: 12px;
    line-height: 1.45;
}

.chip-tip[b-9692tzroiq]  p {
    margin: 0;
}

.chip-tip[b-9692tzroiq]  strong {
    color: #fff;
}

.chip-tip[b-9692tzroiq]  ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.chip-tip[b-9692tzroiq]  li {
    margin: 2px 0;
}

/* Full branch list inside the "+N more" tooltip */
.branch-tip[b-9692tzroiq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 340px;
}

.branch-tip-item[b-9692tzroiq] {
    font-size: 12px;
    line-height: 1.2;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(62, 201, 180, 0.16);
    color: #6ee0d2;
    white-space: nowrap;
}
/* /Components/Modules/AgentSetup/Pages/AgentSetupPage.razor.rz.scp.css */
.agent-setup-outer[b-m6ydbc3w88] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.agent-setup[b-m6ydbc3w88] {
    height: 100%;
    width: 100%;
    max-height: 700px;
}
/* /Components/Modules/Authentication/Components/UpdateMyUserForm.razor.rz.scp.css */
.name-fields[b-g4awaa83pq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 20px;
    max-width: 560px;
    margin-bottom: 20px;
}
/* /Components/Modules/Authentication/Components/UpdatePasswordForm.razor.rz.scp.css */
.password-fields[b-brb16hio5w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 20px;
    max-width: 560px;
    margin-bottom: 20px;
}

.password-field-wide[b-brb16hio5w] {
    grid-column: 1 / -1;
}
/* /Components/Modules/Authentication/Pages/Login.razor.rz.scp.css */
.password-container[b-flo8quwirv] {
    position: relative;
    margin-bottom: 24px;
}

.forgot-password-link[b-flo8quwirv] {
    position: absolute;
    right: 0;
    bottom: -20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.forgot-password-link:hover[b-flo8quwirv] {
    text-decoration: underline;
    color: rgba(255, 255, 255, 1);
}

.button-container[b-flo8quwirv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.register-link[b-flo8quwirv] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.register-link a[b-flo8quwirv] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

.register-link a:hover[b-flo8quwirv] {
    text-decoration: underline;
}
/* /Components/Modules/Authentication/Pages/MyProfile.razor.rz.scp.css */
/*
 * Profile as a settings cabinet: sections down the left, one section's contents on the right.
 *
 * Colour carries state and nothing else. The three tones are mixed against the theme's own foreground, so each one
 * darkens on a light theme and lightens on a dark one instead of sitting at a fixed hex that only reads in one.
 */
.page-title[b-bxxvwqj8ws] {
    max-width: 1400px;
    margin: 0 auto 18px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
}

/* Blazor moves focus here on every navigation; the ring belongs on things you can act on. */
.page-title:focus[b-bxxvwqj8ws] {
    outline: none;
}

.settings[b-bxxvwqj8ws] {
    --line: rgba(127, 127, 127, .28);
    --hint: var(--neutral-foreground-hint, #767676);
    --tone-open: color-mix(in oklab, #13a10e 62%, var(--neutral-foreground-rest));
    --tone-closed: color-mix(in oklab, #e9835e 62%, var(--neutral-foreground-rest));
    --tone-live: var(--accent-fill-rest);

    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    width: 100%;
    max-width: 1400px;
    /* Centred in the shell's content area, and tall enough that a short section still fills a page. */
    margin-inline: auto;
    min-height: min(620px, calc(100vh - 190px));
    background: var(--neutral-layer-1);
    border: 1px solid var(--line);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    overflow: hidden;
}

/* ---- the section list ------------------------------------------------ */

.settings-nav[b-bxxvwqj8ws] {
    background: var(--neutral-layer-2);
    border-right: 1px solid var(--line);
}

.who[b-bxxvwqj8ws] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 17px;
    border-bottom: 1px solid var(--line);
}

.avatar[b-bxxvwqj8ws] {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone-live) 18%, transparent);
    color: var(--tone-live);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.who-text[b-bxxvwqj8ws] {
    min-width: 0;
}

.who-name[b-bxxvwqj8ws] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.who-org[b-bxxvwqj8ws] {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--hint);
    overflow-wrap: anywhere;
}

.who-org.is-unset[b-bxxvwqj8ws] {
    font-style: italic;
}

.sections[b-bxxvwqj8ws] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.section-link[b-bxxvwqj8ws] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-left: 2px solid transparent;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
}

.section-link:hover[b-bxxvwqj8ws] {
    background: rgba(127, 127, 127, .1);
}

.section-link:focus-visible[b-bxxvwqj8ws] {
    outline: 1px solid var(--tone-live);
    outline-offset: -2px;
}

.section-link.is-current[b-bxxvwqj8ws] {
    border-left-color: var(--tone-live);
    background: color-mix(in srgb, var(--tone-live) 12%, transparent);
    color: var(--tone-live);
    font-weight: 600;
}

.section-link[b-bxxvwqj8ws]  svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: currentcolor;
}

/* ---- the pane -------------------------------------------------------- */

.pane[b-bxxvwqj8ws] {
    padding: 24px 28px 30px;
}

.pane-title[b-bxxvwqj8ws] {
    margin: 0 0 5px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
}

.pane-lead[b-bxxvwqj8ws] {
    margin: 0 0 16px;
    max-width: 68ch;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--hint);
}

.pane-title + .rows[b-bxxvwqj8ws],
.pane-title + .facts[b-bxxvwqj8ws],
.pane-warning + .rows[b-bxxvwqj8ws] {
    margin-top: 14px;
}

.pane-warning[b-bxxvwqj8ws] {
    margin: 12px 0 0;
    max-width: 68ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tone-closed);
}

/* ---- identity -------------------------------------------------------- */

.facts[b-bxxvwqj8ws] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px 28px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.fact[b-bxxvwqj8ws] {
    min-width: 0;
}

.fact dt[b-bxxvwqj8ws] {
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--hint);
}

.fact dd[b-bxxvwqj8ws] {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.fact-ref[b-bxxvwqj8ws] {
    font-family: var(--monospace-font, ui-monospace, "SF Mono", Consolas, monospace);
    font-size: 13px;
}

/* ---- sign-in methods ------------------------------------------------- */

.rows[b-bxxvwqj8ws] {
    display: flex;
    flex-direction: column;
}

.row[b-bxxvwqj8ws] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    column-gap: 13px;
    row-gap: 5px;
    padding: 15px 0;
}

.row + .row[b-bxxvwqj8ws] {
    border-top: 1px solid var(--line);
}

.row-icon[b-bxxvwqj8ws] {
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone-open) 15%, transparent);
    color: var(--tone-open);
}

.row.is-closed .row-icon[b-bxxvwqj8ws] {
    background: color-mix(in srgb, var(--tone-closed) 15%, transparent);
    color: var(--tone-closed);
}

.row.is-required .row-icon[b-bxxvwqj8ws] {
    background: color-mix(in srgb, var(--tone-live) 16%, transparent);
    color: var(--tone-live);
}

/* Nothing was read about this method, so its icon claims nothing either. */
.row:not(.is-open):not(.is-closed):not(.is-required) .row-icon[b-bxxvwqj8ws] {
    background: rgba(127, 127, 127, .14);
    color: var(--hint);
}

.row-icon[b-bxxvwqj8ws]  svg {
    width: 18px;
    height: 18px;
    fill: currentcolor;
}

.row-title[b-bxxvwqj8ws] {
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
}

.row-state[b-bxxvwqj8ws] {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.row-state:empty[b-bxxvwqj8ws] {
    display: none;
}

.row-state.is-open[b-bxxvwqj8ws] {
    color: var(--tone-open);
    background: color-mix(in srgb, var(--tone-open) 15%, transparent);
}

.row-state.is-closed[b-bxxvwqj8ws] {
    color: var(--tone-closed);
    background: color-mix(in srgb, var(--tone-closed) 15%, transparent);
}

.row-state.is-required[b-bxxvwqj8ws] {
    color: var(--tone-live);
    background: color-mix(in srgb, var(--tone-live) 16%, transparent);
}

.row-note[b-bxxvwqj8ws] {
    grid-column: 2 / -1;
    margin: 0;
    max-width: 68ch;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--hint);
}

.row-actions[b-bxxvwqj8ws] {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 5px;
}

.row-form[b-bxxvwqj8ws] {
    grid-column: 2 / -1;
    margin-top: 14px;
    padding: 18px 20px 4px;
    border: 1px solid var(--line);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: rgba(127, 127, 127, .07);
}

/* ---- narrow screens -------------------------------------------------- */

@media (max-width: 860px) {
    .settings[b-bxxvwqj8ws] {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-nav[b-bxxvwqj8ws] {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .sections[b-bxxvwqj8ws] {
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
    }

    .section-link[b-bxxvwqj8ws] {
        border-left: none;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .section-link.is-current[b-bxxvwqj8ws] {
        border-left: none;
        border-bottom-color: var(--tone-live);
    }

    .pane[b-bxxvwqj8ws] {
        padding: 18px 16px 22px;
    }
}
/* /Components/Modules/Authentication/Pages/ResetPassword.razor.rz.scp.css */
@media screen and (max-width: 600px) {
    .content[b-93qg2ek2p0] {
        width: 100vw;
    }
}

@media screen and (min-width: 600px) {
    .content[b-93qg2ek2p0] {
        width: 50vw;
    }
}

[b-93qg2ek2p0] .mb-2 {
    margin-bottom: 20px !important;
}

[b-93qg2ek2p0] .back-button {
    width: 3rem;
    height: 3rem;
}

[b-93qg2ek2p0] .w-100-percent {
    width: 100%;
}

[b-93qg2ek2p0] fluent-text-field, [b-93qg2ek2p0] .submit-button {
    width: 100%;
}

[b-93qg2ek2p0] fluent-text-field::part(root), [b-93qg2ek2p0] .submit-button {
    height: 40px;
}

.password-field[b-93qg2ek2p0] {
    width: 100%;
}

.error-message[b-93qg2ek2p0] {
    color: red;
}

.password-container[b-93qg2ek2p0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.field-validation-error[b-93qg2ek2p0] {
    color: red;
}

.input-validation-error[b-93qg2ek2p0] {
    border: 2px solid red;
}
/* /Components/Modules/Billing/Pages/BillingPage.razor.rz.scp.css */
/* Cap the line length on wide screens so the summary and table stay readable instead of stretching edge to
   edge, and center the page within the body content area. */
.billing-page[b-82t6ds56yq] {
    max-width: 1200px;
    margin-inline: auto;
    width: 100%;
}

/* Current-subscription card body. */
.sub[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Hero: plan identity on the left, the amount + primary action on the right. Wraps to a stack when the card
   is too narrow to hold both side by side. */
.sub-hero[b-82t6ds56yq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.sub-identity[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.sub-eyebrow[b-82t6ds56yq] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.sub-plan[b-82t6ds56yq] {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
}

/* Live-usage lines under the plan identity (actual seats / connected insurers). */
.sub-usage[b-82t6ds56yq] {
    font-size: 13px;
    line-height: 1.3;
    color: var(--neutral-foreground-hint);
}

/* Plan-level action, anchored to the right edge of the hero on wide cards. The money that used to sit here now
   lives in the billing band, where it comes with the date that makes it actionable. */
.sub-actions[b-82t6ds56yq] {
    display: flex;
    align-items: flex-start;
    margin-inline-start: auto;
}

/* Status pill: a dot + label colored by lifecycle state, matching the chip idiom used elsewhere in setup. */
.status-pill[b-82t6ds56yq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-dot[b-82t6ds56yq] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-pill--active[b-82t6ds56yq] {
    color: #4ad6a0;
    background: rgba(74, 214, 160, 0.13);
    border-color: rgba(74, 214, 160, 0.34);
}

.status-pill--past-due[b-82t6ds56yq] {
    color: #ff9b8a;
    background: rgba(255, 122, 99, 0.14);
    border-color: rgba(255, 122, 99, 0.36);
}

.status-pill--canceled[b-82t6ds56yq] {
    color: var(--neutral-foreground-hint);
    background: rgba(140, 140, 140, 0.13);
    border-color: rgba(140, 140, 140, 0.32);
}

/* Stat band: equal inset cells that fill the available width and wrap as the card narrows. */
.stat-grid[b-82t6ds56yq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.stat-cell[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    /* The card surface is --neutral-layer-card-container, which equals --neutral-layer-2; using --neutral-layer-1
       (one step lighter) makes the cells read as raised tiles against the card instead of blending into it. */
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
}

/* The uppercase micro-label marks the stat cells as the secondary tier, below the hero. */
.stat-label[b-82t6ds56yq] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.stat-value[b-82t6ds56yq] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Saved-card actions (change / remove) sit under the masked PAN inside the Payment Method stat cell. */
.card-actions[b-82t6ds56yq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

@media (max-width: 600px) {
    .sub-actions[b-82t6ds56yq] {
        margin-inline-start: 0;
    }

    .sub-plan[b-82t6ds56yq] {
        font-size: 26px;
    }
}

/* Saved-cards section: the list of provider-stored cards with a default badge + per-card actions. */
.cards-section[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-list[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-row[b-82t6ds56yq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
}

.card-identity[b-82t6ds56yq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.card-pan[b-82t6ds56yq] {
    font-weight: 600;
    letter-spacing: 0.04em;
}

.card-meta[b-82t6ds56yq] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #9aa0a6);
}

.card-default-badge[b-82t6ds56yq] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4ad6a0;
    background: rgba(74, 214, 160, 0.13);
    border: 1px solid rgba(74, 214, 160, 0.34);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ── Billing band ─────────────────────────────────────────────────────────────────────────────────────────
   The page's answer to "do I owe anything, how much, and by when". One derived state sets the accent, and
   every part of the band reads from it, so the paid / due / overdue cases are told apart by colour and shape
   before a single date is read. The default is the neutral (free / closed) treatment; the three billed states
   override it. Green already means "active" on this page's status pill, so it is reused rather than reinvented;
   amber is the one hue this band adds, for the state the page previously had no way to show at all. */
.bill[b-82t6ds56yq] {
    --bill-accent: var(--neutral-foreground-hint);
    --bill-wash: rgba(140, 140, 140, 0.10);
    --bill-edge: rgba(140, 140, 140, 0.30);

    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-layer-1);
    border: 1px solid var(--bill-edge);
    /* The statement stripe: the state is legible from the edge of the card alone. */
    border-inline-start: 3px solid var(--bill-accent);
}

.bill--paid[b-82t6ds56yq] {
    --bill-accent: #4ad6a0;
    --bill-wash: rgba(74, 214, 160, 0.11);
    --bill-edge: rgba(74, 214, 160, 0.32);
}

.bill--due[b-82t6ds56yq] {
    --bill-accent: #f0b429;
    --bill-wash: rgba(240, 180, 41, 0.12);
    --bill-edge: rgba(240, 180, 41, 0.34);
}

.bill--overdue[b-82t6ds56yq] {
    --bill-accent: #ff7a63;
    --bill-wash: rgba(255, 122, 99, 0.12);
    --bill-edge: rgba(255, 122, 99, 0.34);
}

.bill-head[b-82t6ds56yq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Same pill idiom as the subscription status chip, so the two read as one family. */
.bill-state[b-82t6ds56yq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--bill-accent);
    background: var(--bill-wash);
    border: 1px solid var(--bill-edge);
    white-space: nowrap;
}

.bill-state-dot[b-82t6ds56yq] {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* The one number a worried agent looks for: days left, or days late. */
.bill-countdown[b-82t6ds56yq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--bill-accent);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.bill-figures[b-82t6ds56yq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

.bill-figure[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bill-figure--end[b-82t6ds56yq] {
    margin-inline-start: auto;
}

.bill-figure-label[b-82t6ds56yq] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.bill-figure-value[b-82t6ds56yq] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--neutral-foreground-rest);
}

/* Money keeps the 30px figure size the hero amount used to occupy, so the page's rhythm is unchanged — but it
   is now stated in the state's colour, next to the date it is due. */
.bill-figure-value--money[b-82t6ds56yq] {
    font-size: 30px;
    color: var(--bill-accent);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.bill-figure-note[b-82t6ds56yq] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.bill-note[b-82t6ds56yq] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
    max-width: 70ch;
}

.bill-actions[b-82t6ds56yq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Rail ─────────────────────────────────────────────────────────────────────────────────────────────────
   Where today sits between the two dates that matter. In the paid state that is the period the last payment
   bought — which is what makes upfront billing legible without a paragraph of explanation. Once overdue the
   same rail spans the window left before the plan is dropped. */
.rail[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rail-track[b-82t6ds56yq] {
    position: relative;
    block-size: 6px;
    border-radius: 999px;
    background: var(--neutral-stroke-divider-rest);
    /* Breathing room for the marker, which overhangs the track. */
    margin-block: 5px;
}

.rail-fill[b-82t6ds56yq] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 999px;
    background: var(--bill-accent);
    opacity: 0.5;
}

/* Today: a diamond, so it is never mistaken for one of the two round period ends. */
.rail-now[b-82t6ds56yq] {
    position: absolute;
    box-sizing: border-box;
    inset-block-start: -3px;
    /* Centres the 12px marker on its percentage without a direction-dependent transform. */
    margin-inline-start: -6px;
    inline-size: 12px;
    block-size: 12px;
    border-radius: 3px;
    background: var(--bill-accent);
    border: 2px solid var(--neutral-layer-1);
    transform: rotate(45deg);
}

.rail-stops[b-82t6ds56yq] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rail-stop[b-82t6ds56yq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rail-stop b[b-82t6ds56yq] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.rail-stop span[b-82t6ds56yq] {
    font-size: 11px;
    line-height: 1.2;
    color: var(--neutral-foreground-hint);
}

.rail-stop--end[b-82t6ds56yq] {
    text-align: end;
}

/* The single piece of motion on the page: the fill grows to today's position on load, which is the gesture
   that says "this is a period you are partway through". */
@media (prefers-reduced-motion: no-preference) {
    .rail-fill[b-82t6ds56yq] {
        animation: billing-rail-fill-in-b-82t6ds56yq 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
}

@keyframes billing-rail-fill-in-b-82t6ds56yq {
    from {
        inline-size: 0;
    }
}
/* /Components/Modules/CaseManagement/Detail/Components/CaseActivities.razor.rz.scp.css */
[b-xnprkcw8sb] .activity {
    margin-left: 64px;
    position: relative;
    width: calc(100% - 64px);
}

[b-xnprkcw8sb] .activity .icon-button {
    position: absolute;
    left: -48px;
    border-radius: 50%;
    top: 0;
    z-index: 1;
    background: var(--fill-color);
}

[b-xnprkcw8sb] .activity .line {
    position: absolute;
    left: -33px;
    top: 0;
    width: 2px;
    background-color: var(--neutral-layer-3);
    height: calc(100% + 36px);
}

[b-xnprkcw8sb] .activity:last-child .line {
    display: none;
}
/* /Components/Modules/CaseManagement/Detail/Components/CaseAssetAccordion.razor.rz.scp.css */
/* CaseAssetAccordion component styles moved from inline <style> */
.edit-icon-btn[b-kvnnyrdb85] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: background-color .15s ease-in-out;
    position: relative;
}

.edit-icon-btn:hover[b-kvnnyrdb85] {
    background-color: var(--neutral-layer-3);
}

/* Düzenle ikonunun üzerindeyken chevron hover'ını kapat */
fluent-accordion-item:has(.edit-icon-btn:hover)[b-kvnnyrdb85]::part(expand-icon) {
    background-color: transparent !important;
}

/* Düzenle ikonunun üzerindeyken header (control) hover arka planını kapat */
fluent-accordion-item:has(.edit-icon-btn:hover)[b-kvnnyrdb85]::part(control) {
    background-color: transparent !important;
}


/* /Components/Modules/CaseManagement/Detail/Components/CaseCustomerAccordion.razor.rz.scp.css */
/* CaseCustomerAccordion component styles moved from inline <style> */
.edit-icon-btn[b-qex2lo9yqv] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: background-color .15s ease-in-out;
    position: relative;
}

.edit-icon-btn:hover[b-qex2lo9yqv] {
    background-color: var(--neutral-layer-3);
}

/* Düzenle ikonunun üzerindeyken chevron hover'ını kapat */
fluent-accordion-item:has(.edit-icon-btn:hover)[b-qex2lo9yqv]::part(expand-icon) {
    background-color: transparent !important;
}

/* Düzenle ikonunun üzerindeyken header (control) hover arka planını kapat */
fluent-accordion-item:has(.edit-icon-btn:hover)[b-qex2lo9yqv]::part(control) {
    background-color: transparent !important;
}


/* /Components/Modules/CaseManagement/Detail/Components/CaseNotes.razor.rz.scp.css */
[b-rrmgx24sk0] .note {
    margin-left: 64px;
    position: relative;
    width: calc(100% - 64px);
}

[b-rrmgx24sk0] .note .icon-button {
    position: absolute;
    left: -48px;
    border-radius: 50%;
    top: 0;
    z-index: 1;
    background: var(--fill-color);
}

[b-rrmgx24sk0] .note .line {
    position: absolute;
    left: -33px;
    top: 0;
    width: 2px;
    background-color: var(--neutral-layer-3);
    height: calc(100% + 36px);
}

[b-rrmgx24sk0] .note:last-child .line {
    display: none;
}
/* /Components/Modules/CaseManagement/Detail/Components/CaseState.razor.rz.scp.css */
[b-firtjhbadc] .state-button {
    border-radius: 50%;
    width: 42px;
    height: 42px;
}
/* /Components/Modules/Contacts/Components/CustomerContacts.razor.rz.scp.css */
[b-38udtyu7oj] .contact {
    margin-left: 68px;
    position: relative;
    width: calc(100% - 68px);
}

[b-38udtyu7oj] .contact .icon-button {
    position: absolute;
    left: -48px;
    border-radius: 50%;
    top: 0;
    z-index: 1;
    background: var(--fill-color);
    width: 36px;
    height: 36px;
}

[b-38udtyu7oj] .contact .line {
    position: absolute;
    left: -33px;
    top: 0;
    width: 2px;
    background-color: var(--neutral-layer-3);
    height: calc(100% + 36px);
}

[b-38udtyu7oj] .contact:last-child .line {
    display: none;
}

[b-38udtyu7oj] .contact .bottom-right {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
/* /Components/Modules/CoverageGroupSelection/CoverageGroupSelection.razor.rz.scp.css */
[b-yi9x4vplzm] .coverage-group-selection {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-yi9x4vplzm] .coverage-group-selection__toolbar {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
}

[b-yi9x4vplzm] .coverage-group-selection__title {
    font-weight: 600;
}

[b-yi9x4vplzm] .coverage-group-selection__grid {
    width: 100%;
}

[b-yi9x4vplzm] .coverage-group-card {
    border: 1px solid var(--neutral-stroke-strong-rest);
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    cursor: pointer;
    background-color: rgba(15, 23, 42, 0.015);
}

[b-yi9x4vplzm] .coverage-group-card:hover {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

[b-yi9x4vplzm] .coverage-group-card--selected {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px var(--accent-fill-rest);
    background-color: rgba(0, 120, 212, 0.08);
}

[b-yi9x4vplzm] .coverage-group-card--loading {
    pointer-events: none;
    border-color: var(--neutral-stroke-layer-rest);
}

[b-yi9x4vplzm] .coverage-group-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.25);
}

[b-yi9x4vplzm] .coverage-group-card__title {
    flex: 1;
}

[b-yi9x4vplzm] .coverage-group-card__description {
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
}

[b-yi9x4vplzm] .coverage-group-card__status {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(0, 120, 212, 0.12);
}

[b-yi9x4vplzm] .coverage-group-selection__error,
[b-yi9x4vplzm] .coverage-group-selection__empty {
    padding: 2rem;
    display: flex;
    justify-content: center;
}

[b-yi9x4vplzm] .coverage-group-selection__error-title {
    text-align: center;
}

[b-yi9x4vplzm] .coverage-group-selection__empty-text {
    color: var(--neutral-foreground-rest);
    text-align: center;
}

[b-yi9x4vplzm] .coverage-group-tooltip__content {
    width: 80vw;
    max-height: 720px;
    overflow: auto;
    padding: 0.75rem;
}
/* /Components/Modules/CoverageTableForm/CoverageTableForm.razor.rz.scp.css */
[b-8fkd4zy06g] .coverage-table-column {
    overflow: visible !important;
    display: grid;
    align-content: center;
}
/* /Components/Modules/CustomerManagement/Grid/CustomersPage.razor.rz.scp.css */
[b-823wwx1qvb].wrapper .fluent-data-grid-cell {
    padding-left: 0px;
    border: none;
}

[b-823wwx1qvb].wrapper .fluent-data-grid {
    overflow-x: auto;
}

[b-823wwx1qvb].wrapper .fluent-button-group {
    display: flex;
    flex-direction: column;
}

[b-823wwx1qvb].wrapper .fluent-button-pair {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

[b-823wwx1qvb].wrapper .paginator {
    width: 100%;
}

.wrapper[b-823wwx1qvb] {
    max-width: 100%;
}
/* /Components/Modules/Dashboard/Components/OpenCaseBacklogPivotChart.razor.rz.scp.css */
[b-w9d2vhsa48] .backlog-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

[b-w9d2vhsa48] .backlog-summary-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
}

[b-w9d2vhsa48] .backlog-summary-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fluent-color-neutral-foreground-3);
}

[b-w9d2vhsa48] .backlog-summary-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--fluent-color-neutral-foreground-1);
}

[b-w9d2vhsa48] .backlog-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(59, 130, 246, 0.16);
    color: rgba(191, 219, 254, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.35);
    width: fit-content;
}

[b-w9d2vhsa48] .backlog-summary-badge.delayed {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.35);
    color: rgba(254, 215, 170, 0.95);
}

[b-w9d2vhsa48] .backlog-case-type-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    width: 100%;
}

[b-w9d2vhsa48] .backlog-type-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 16px 30px rgba(8, 15, 35, 0.35);
}

[b-w9d2vhsa48] .backlog-type-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

[b-w9d2vhsa48] .backlog-type-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fluent-color-neutral-foreground-1);
}

[b-w9d2vhsa48] .backlog-type-metrics {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

[b-w9d2vhsa48] .backlog-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

[b-w9d2vhsa48] .backlog-total .label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fluent-color-neutral-foreground-3);
}

[b-w9d2vhsa48] .backlog-total .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fluent-color-neutral-foreground-1);
}

[b-w9d2vhsa48] .backlog-total .share {
    font-size: 0.75rem;
    color: var(--fluent-color-neutral-foreground-3);
}

[b-w9d2vhsa48] .backlog-total.open {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.12);
}

[b-w9d2vhsa48] .backlog-total.delayed {
    border-color: rgba(249, 115, 22, 0.35);
    background: rgba(249, 115, 22, 0.12);
}

[b-w9d2vhsa48] .backlog-subtype-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-w9d2vhsa48] .backlog-subtype-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

[b-w9d2vhsa48] .backlog-subtype-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

[b-w9d2vhsa48] .backlog-subtype-header .name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--fluent-color-neutral-foreground-1);
}

[b-w9d2vhsa48] .backlog-subtype-header .shares {
    font-size: 0.75rem;
    color: var(--fluent-color-neutral-foreground-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

[b-w9d2vhsa48] .backlog-subtype-header .shares .separator {
    opacity: 0.5;
}

[b-w9d2vhsa48] .backlog-subtype-header .shares .open {
    color: rgba(125, 211, 252, 0.9);
}

[b-w9d2vhsa48] .backlog-subtype-header .shares .delayed {
    color: rgba(251, 191, 36, 0.9);
}

[b-w9d2vhsa48] .backlog-subtype-metrics {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

[b-w9d2vhsa48] .backlog-subtype-metrics .metric {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

[b-w9d2vhsa48] .backlog-subtype-metrics .metric.open {
    border-color: rgba(59, 130, 246, 0.35);
}

[b-w9d2vhsa48] .backlog-subtype-metrics .metric.delayed {
    border-color: rgba(249, 115, 22, 0.35);
}

[b-w9d2vhsa48] .backlog-subtype-metrics .metric-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fluent-color-neutral-foreground-3);
}

[b-w9d2vhsa48] .backlog-subtype-metrics .metric-value {
    font-weight: 600;
    color: var(--fluent-color-neutral-foreground-1);
}

[b-w9d2vhsa48] .backlog-chart-container {
    width: 100%;
    height: 360px;
}

@media (max-width: 768px) {
    [b-w9d2vhsa48] .backlog-type-metrics {
        justify-content: flex-start;
    }
}
/* /Components/Modules/Dashboard/DashboardPage.razor.rz.scp.css */
[b-q5g2xb1gce] .chart-summary-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 160px), 1fr));
    gap: var(--gap, 12px);
    width: 100%;
}
/* /Components/Modules/Home/Home.razor.rz.scp.css */
.wrapper[b-bbazrfpnza] {
    margin: 30px auto;
    max-width: 1200px;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .wrapper[b-bbazrfpnza] {
        padding: 0 40px;
    }
}

@media (min-width: 1024px) {
    .wrapper[b-bbazrfpnza] {
        padding: 0 60px;
    }
}

@media (min-width: 1200px) {
    .wrapper[b-bbazrfpnza] {
        padding: 0 90px;
    }
}

/* Accordion content styling */
[b-bbazrfpnza] .wrapper fluent-accordion {
    width: 100%;
    max-width: 100%;
}

[b-bbazrfpnza] .wrapper fluent-accordion-item {
    width: 100%;
}

/* Responsive table styling */
[b-bbazrfpnza] .wrapper table {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

@media (max-width: 768px) {
    [b-bbazrfpnza] .wrapper table {
        font-size: 14px;
    }

    [b-bbazrfpnza] .wrapper table th,
    [b-bbazrfpnza] .wrapper table td {
        padding: 8px 12px !important;
    }
}

.illustration-img[b-bbazrfpnza] {
    height: 200px;
    width: auto;
    margin: 10px 0;
}
/* /Components/Modules/Partners/Components/PartnerAssignmentSelect.razor.rz.scp.css */
.partner-field[b-fgekj0h0jj] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.partner-field[b-fgekj0h0jj]  fluent-text-field {
    min-width: 0 !important;
    width: 100% !important;
}

/* Disabled child inputs swallow clicks; kill their pointer-events so the wrapper's
   click handler (access-denied dialog) fires. */
.partner-field.denied[b-fgekj0h0jj] {
    cursor: not-allowed;
    pointer-events: auto;
}

.partner-field.denied[b-fgekj0h0jj]  * {
    pointer-events: none;
}

/* Single-select FluentAutocomplete must render as a compact single-line combobox that
   does not grow taller after a value is picked. The library renders the selected label
   and any start-slot scroll container inline; force them onto one row with ellipsis and
   zero extra vertical margin. */
.partner-field[b-fgekj0h0jj]  .fluent-autocomplete-multiselect {
    display: flex;
    align-items: center;
    min-height: 32px;
    height: 32px;
    width: 100%;
}

/* The start slot (selected chip in multi-select, selected label in single-select) must
   never stack a second row. */
.partner-field[b-fgekj0h0jj]  .fluent-autocomplete-multiselect [slot="start"],
.partner-field[b-fgekj0h0jj]  .fluent-autocomplete-multiselect fluent-horizontal-scroll[slot="start"],
.partner-field[b-fgekj0h0jj]  .fluent-autocomplete-multiselect .auto-height[slot="start"] {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    max-width: 100%;
    max-height: 32px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Single-select selected text: single line, ellipsis, no vertical margin. */
.partner-field[b-fgekj0h0jj]  .fluent-autocomplete-multiselect [slot="start"] .fluent-typography,
.partner-field[b-fgekj0h0jj]  .fluent-autocomplete-multiselect [single-select] .fluent-typography {
    display: block;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep the dropdown popup scrollable at a sane max height (replaces the removed Height="300px"). */
.partner-field[b-fgekj0h0jj]  .fluent-autocomplete-multiselect div[role="listbox"] {
    max-height: 300px;
    overflow-y: auto;
}
/* /Components/Modules/Plugins/Components/PluginGeneralInfoTab.razor.rz.scp.css */
.plugin-info-row[b-swhw9iw21s] {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* /Components/Modules/Plugins/Components/PluginInvocationDialog.razor.rz.scp.css */
.plugin-console[b-8p245jfrnx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 4px;
    background: var(--neutral-layer-2, #f3f3f3);
    font-family: var(--monospace-font, monospace);
    font-size: 12px;
}

.plugin-console-line[b-8p245jfrnx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.plugin-console-ts[b-8p245jfrnx] {
    color: var(--neutral-foreground-hint, #767676);
}

.plugin-console-level[b-8p245jfrnx] {
    font-weight: 700;
}

.plugin-console-msg[b-8p245jfrnx] {
    white-space: pre-wrap;
    word-break: break-word;
}

.plugin-console-data[b-8p245jfrnx] {
    width: 100%;
    margin: 2px 0 0;
    padding: 6px;
    border-radius: 4px;
    background: var(--neutral-layer-1, #fff);
    white-space: pre-wrap;
    word-break: break-word;
}

.plugin-result[b-8p245jfrnx] {
    width: 100%;
    box-sizing: border-box;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    border-radius: 4px;
    background: var(--neutral-layer-2, #f3f3f3);
    font-family: var(--monospace-font, monospace);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Modules/Plugins/Components/UploadPluginDialog.razor.rz.scp.css */
.upload-dropzone[b-9y94kexn1o] {
    width: 100%;
}

.upload-dropzone[b-9y94kexn1o]  .fluent-inputfile-container {
    width: 100%;
}

.upload-dropzone[b-9y94kexn1o]  .fluent-inputfile-container > * {
    width: 100%;
    box-sizing: border-box;
}
/* /Components/Modules/Plugins/Pages/PluginsPage.razor.rz.scp.css */
.plugin-grid[b-mdkxsa5j28] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}

.plugin-card[b-mdkxsa5j28] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: 100%;
    min-height: 210px;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest, #d1d1d1);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.plugin-card:hover[b-mdkxsa5j28] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
    transform: translateY(-2px);
}

.plugin-card:focus-visible[b-mdkxsa5j28] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.plugin-card-head[b-mdkxsa5j28] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plugin-card-title[b-mdkxsa5j28] {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.plugin-card-version[b-mdkxsa5j28] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.plugin-card-version-label[b-mdkxsa5j28] {
    color: var(--neutral-foreground-hint, #767676);
}

.plugin-card-version-value[b-mdkxsa5j28] {
    font-weight: 700;
}

.plugin-card-badges[b-mdkxsa5j28] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}
/* /Components/Modules/PolicyManagement/Components/AddManualPolicyDialog.razor.rz.scp.css */
.prefilled[b-3fmuxkrw4j]  fluent-text-field::part(root),
.prefilled[b-3fmuxkrw4j]  fluent-number-field::part(root),
.prefilled[b-3fmuxkrw4j]  fluent-select::part(control) {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}
/* /Components/Modules/Proposals/Create/Components/CreateProposalForm.razor.rz.scp.css */
.create-proposal-form[b-kea4hc7hrr] {
    display: grid;
    grid-template-areas: 
            "title title"
            "form boxes";
    grid-template-columns: 5fr 3fr;
    grid-template-rows: auto calc(100vh - var(--header-height) - 62px);
    row-gap: 16px;
    column-gap: 24px;
}

.create-proposal-form > .title[b-kea4hc7hrr] {
    grid-area: title;
}

.create-proposal-form > .form[b-kea4hc7hrr] {
    grid-area: form;
    overflow-y: auto;
}

.create-proposal-form > .boxes[b-kea4hc7hrr] {
    grid-area: boxes;
    overflow-y: auto;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/CompareProposalProductsDialog.razor.rz.scp.css */
.column-cell[b-am4fb69dci] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    gap: 16px;
    height: 100%;
}

.column-cell > img[b-am4fb69dci] {
    height: 40px;
    max-width: 80px;
    object-fit: contain;
    margin-top: -16px;
}

[b-am4fb69dci] .column-cell > .title {
    text-align: center;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    margin-top: -10px;
}

[b-am4fb69dci] .fluent-data-grid-cell[cell-type="columnheader"] {
    height: 100%;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/CustomerProposalDocumentDialog.razor.rz.scp.css */
.customer-document-dialog[b-950rdvs31f] {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.document-options-menu[b-950rdvs31f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

@media (max-width: 600px) {
    .customer-document-dialog[b-950rdvs31f] {
        padding: 8px;
    }

    .products-table th[b-950rdvs31f],
    .products-table td[b-950rdvs31f] {
        padding: 6px 8px;
    }
}

.table-scroll[b-950rdvs31f] {
    width: 100%;
    overflow-x: auto;
}

.products-table[b-950rdvs31f] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.products-table th[b-950rdvs31f],
.products-table td[b-950rdvs31f] {
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
}

.products-table thead th[b-950rdvs31f] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.products-table tbody tr[b-950rdvs31f] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    cursor: pointer;
}

.products-table tbody tr:hover[b-950rdvs31f] {
    background-color: var(--neutral-fill-stealth-hover);
}

.products-table tbody tr.row-selected[b-950rdvs31f] {
    background-color: var(--neutral-fill-stealth-selected);
}

.col-select[b-950rdvs31f] {
    width: 40px;
}

.col-price[b-950rdvs31f] {
    text-align: right;
    white-space: nowrap;
}

.company-cell[b-950rdvs31f] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.company-cell img[b-950rdvs31f] {
    height: 24px;
    max-width: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.company-cell span[b-950rdvs31f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-cell[b-950rdvs31f] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.price[b-950rdvs31f] {
    color: var(--success);
    font-weight: 700;
    white-space: nowrap;
}

.muted[b-950rdvs31f] {
    color: var(--neutral-foreground-hint);
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/ProposalDetailProductsFilterDialog.razor.rz.scp.css */
.filters .filter-item[b-d88koaeqxl] {
    max-height: 120px;
    overflow-y: auto;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/ProposalProductCoveragesDialog.razor.rz.scp.css */
.outer[b-9qbwrliwjf] {
    height: 650px;
    overflow-y: auto;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/PurchaseProposalProductDialog.razor.rz.scp.css */
[b-zd47mocmgb].wrapper .premium-detail {
    height: 90px;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    align-items: center;
}

[b-zd47mocmgb].wrapper .premium-detail > .img > img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 4px;
}

[b-zd47mocmgb].wrapper .premium-detail > .img {
    height: calc(90px - calc(var(--design-unit) * 5px) * 2);
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-zd47mocmgb].wrapper .premium-detail > .name,
[b-zd47mocmgb].wrapper .premium-detail > .price {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Modules/Proposals/Detail/Components/Products/CompareProposalProducts.razor.rz.scp.css */
.compare-panel[b-zap0hego77] {
    background-color: var(--neutral-layer-2);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    padding: 1.25rem;
    height: 125px;
    position: fixed;
    width: 100%;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 200px;
    column-gap: 24px;
    align-items: center;
}

[b-zap0hego77] .compare-items {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    overflow-x: auto;
    max-height: 100%;
}

[b-zap0hego77] .compare-items > .compare-item {
    flex-shrink: 0;
    width: 300px;
    position: relative;
}

[b-zap0hego77] .compare-items > .compare-item > .compare-item-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 100%;
    height: 100%;
    align-items: center;
    column-gap: 16px;
}

[b-zap0hego77] .compare-items > .compare-item > .compare-item-grid > .img-box {
    height: 100%;
}

[b-zap0hego77] .compare-items > .compare-item > .compare-item-grid > .img-box > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[b-zap0hego77] .compare-items > .compare-item > .compare-item-grid > h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-zap0hego77] .compare-items > .compare-item > .compare-item-grid > .dismiss-compare-item {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
/* /Components/Modules/Proposals/Detail/Components/Products/ProposalDetailProductItem.razor.rz.scp.css */
[b-1i4ukqe5ga] .product-item {
    height: 132px;
    display: grid;
    grid-template-columns:
            120px minmax(100px, 1fr) minmax(80px, max-content) minmax(88px, max-content);
    grid-template-rows: calc(100% - 32px) 32px;
    grid-template-areas:
        "img name top-right top-right"
        "img type buttons buttons";
    column-gap: 24px;
    row-gap: 4px;
    border: 3px var(--success) solid;
}

[b-1i4ukqe5ga] .product-item[without-logo=true] {
    grid-template-columns: minmax(100px, 1fr) minmax(80px, max-content) minmax(88px, max-content);
    grid-template-areas:
        "name top-right top-right"
        "type buttons buttons";
}

[b-1i4ukqe5ga] .product-item[compare-active=true] {
    grid-template-columns:
            24px 120px minmax(100px, 1fr) minmax(80px, max-content) minmax(88px, max-content);
    grid-template-areas:
        "compare-checkbox img name top-right top-right"
        "compare-checkbox img type buttons buttons";
}

[b-1i4ukqe5ga] .product-item[compare-active=true][without-logo=true] {
    grid-template-columns:
            24px minmax(100px, 1fr) minmax(80px, max-content) minmax(88px, max-content);
    grid-template-areas:
        "compare-checkbox name top-right top-right"
        "compare-checkbox type buttons buttons";
}

[b-1i4ukqe5ga] .product-item[state=Failed] {
    border: 3px var(--error) solid;
}

[b-1i4ukqe5ga] .product-item[state=Waiting] {
    border: 3px var(--accent-base-color) solid;
}

[b-1i4ukqe5ga] .product-item > .img {
    grid-area: img;
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-1i4ukqe5ga] .product-item > .img > img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

[b-1i4ukqe5ga] .product-item > .name {
    grid-area: name;
}

[b-1i4ukqe5ga] .product-item > .name > .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-1i4ukqe5ga] .product-item > .name > .proposal-number {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    opacity: 0.6;
    font-size: 0.85rem;
}

[b-1i4ukqe5ga] .product-item > .name > .proposal-number > span {
    font-size: 0.85rem;
}

[b-1i4ukqe5ga] .product-item > .name > .proposal-number fluent-button {
    padding: 0;
    min-width: auto;
    height: auto;
}

[b-1i4ukqe5ga] .product-item > .name > .proposal-number fluent-button::part(content) {
    color: inherit;
}

[b-1i4ukqe5ga] .product-item > .name > .proposal-number fluent-button::part(icon) {
    color: inherit;
}

[b-1i4ukqe5ga] .product-item > .type {
    grid-area: type;
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: 12px;
}

[b-1i4ukqe5ga] .product-item > .top-right {
    grid-area: top-right;
}

[b-1i4ukqe5ga] .product-item > .top-right > .waiting {
    padding-top: 12px;
}

[b-1i4ukqe5ga] .product-item > .top-right > .purchase {
    display: flex;
    height: 100%;
    justify-content: end;
    align-items: start;
    row-gap: 2px;
    column-gap: 12px;
    flex-wrap: nowrap;
}

[b-1i4ukqe5ga] .product-item > .top-right > .failed {
    display: flex;
    height: 100%;
    justify-content: end;
    align-items: start;
    row-gap: 2px;
    column-gap: 12px;
    flex-wrap: nowrap;
}

[b-1i4ukqe5ga] .product-item > .purchase > .price {
    text-wrap: nowrap;
}

[b-1i4ukqe5ga] .product-item > .buttons {
    grid-area: buttons;
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: 4px;
}

[b-1i4ukqe5ga] .product-item > .buttons > .installment-select {
    width: auto;
    min-width: 3ch;
    margin-right: 4px;
}

[b-1i4ukqe5ga] .product-item > .compare-checkbox {
    grid-area: compare-checkbox;
    display: flex;
    justify-content: start;
    align-items: center;
}
/* /Components/Modules/Proposals/Detail/Components/ProposalDetailLayout.razor.rz.scp.css */
[b-clswhkemfu].wrapper .proposal-splitter > div {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[b-clswhkemfu].wrapper .proposal-splitter > div::-webkit-scrollbar {
    display: none;
}
/* /Components/Modules/Users/Components/MyAgenciesList.razor.rz.scp.css */
/*
 * Memberships as rows in the profile's settings pane. The tones are mixed against the theme's own foreground so
 * they hold up on a light theme and a dark one alike.
 *
 * Each agency leads with its own mark. The plaque is given the panel's card surface rather than a flat white,
 * so a logo with a transparent background sits on the same paper as the row it is in.
 */
.rows[b-esakyikzob],
.empty[b-esakyikzob] {
    --line: rgba(127, 127, 127, .28);
    --hint: var(--neutral-foreground-hint, #767676);
    --tone-live: var(--accent-fill-rest);

    --agency-logo-blank-surface: rgba(127, 127, 127, .14);
    --agency-logo-blank-ink: var(--hint);
}

.rows[b-esakyikzob] {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.row[b-esakyikzob] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 5px;
    padding: 15px 0;
}

.row + .row[b-esakyikzob] {
    border-top: 1px solid var(--line);
}

/* ::deep, because the plaque is another component's root element and never carries this one's scope. */
.row[b-esakyikzob]  .row-mark {
    grid-row: 1 / span 2;
}

/* The agency being acted for is the only one whose initials borrow the accent. */
.row.is-current[b-esakyikzob]  .row-mark.is-blank {
    background: color-mix(in srgb, var(--tone-live) 18%, transparent);
    color: var(--tone-live);
}

.row-title[b-esakyikzob] {
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.row-badge[b-esakyikzob] {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone-live) 16%, transparent);
    color: var(--tone-live);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.row-actions[b-esakyikzob] {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 5px;
}

/* ---- nothing to list -------------------------------------------------- */

.empty[b-esakyikzob] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 18px;
    max-width: 60ch;
}

.empty-icon[b-esakyikzob] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: rgba(127, 127, 127, .14);
    color: var(--hint);
}

.empty-icon[b-esakyikzob]  svg {
    width: 22px;
    height: 22px;
    fill: currentcolor;
}

.empty-title[b-esakyikzob] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
}

.empty-note[b-esakyikzob] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hint);
}
/* /Components/Modules/Users/Components/MyInvitesList.razor.rz.scp.css */
/*
 * Invitations as rows in the profile's settings pane. An invitation is an offer, not a membership, so its mark
 * stays neutral until it is accepted — the accent belongs to agencies you are actually in.
 */
.rows[b-8myqpj8fq8],
.empty[b-8myqpj8fq8] {
    --line: rgba(127, 127, 127, .28);
    --hint: var(--neutral-foreground-hint, #767676);
    --tone-live: var(--accent-fill-rest);

    --agency-logo-blank-surface: rgba(127, 127, 127, .14);
    --agency-logo-blank-ink: var(--hint);
}

.rows[b-8myqpj8fq8] {
    display: flex;
    flex-direction: column;
}

.row[b-8myqpj8fq8] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 6px;
    padding: 15px 0;
}

.row + .row[b-8myqpj8fq8] {
    border-top: 1px solid var(--line);
}

/*
 * ::deep, because the plaque is another component's root element and never carries this one's scope.
 *
 * The span is counted rather than written as 1 / -1: these rows are implicit, and a negative line number cannot
 * reach an implicit track — it would silently collapse the mark into the first row instead.
 */
.row[b-8myqpj8fq8]  .row-mark {
    grid-row: 1 / span 2;
}

.row.has-roles[b-8myqpj8fq8]  .row-mark {
    grid-row: 1 / span 3;
}

.row-title[b-8myqpj8fq8] {
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.row-date[b-8myqpj8fq8] {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: nowrap;
    color: var(--hint);
}

.row-roles[b-8myqpj8fq8] {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.role[b-8myqpj8fq8] {
    padding: 2px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--hint);
}

.row-actions[b-8myqpj8fq8] {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 4px;
}

/* ---- nothing waiting -------------------------------------------------- */

.empty[b-8myqpj8fq8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 60ch;
}

.empty-icon[b-8myqpj8fq8] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: rgba(127, 127, 127, .14);
    color: var(--hint);
}

.empty-icon[b-8myqpj8fq8]  svg {
    width: 22px;
    height: 22px;
    fill: currentcolor;
}

.empty-title[b-8myqpj8fq8] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--hint);
}
/* /Components/Modules/Users/Pages/Switch.razor.rz.scp.css */
/*
 * The agency chooser.
 *
 * One idea carries the page: an agency's logo is a dark mark printed on white — that is how it arrives, on the
 * door, the letterhead and every policy PDF — so a dark page cannot show one without giving it a light ground.
 * That constraint is the design. Each agency sits behind a lit plaque, the plaques are the only lit objects on a
 * matte field, and the eye therefore lands on the decision without anything having to point at it.
 *
 * Accent colour is spent only where something is happening: the focus ring, the chevron under the pointer, and
 * the edge of the plate that was chosen. Nothing here is coloured to be decorative.
 */
.chooser[b-f2uacb19hx] {
    --plate: #131b26;
    --plate-lit: #18222f;
    --edge: rgba(255, 255, 255, .07);
    --edge-lit: rgba(255, 255, 255, .15);
    --ink: #e8eef6;
    --ink-soft: #8496a9;
    --live: #5b9bff;

    /* Only the initials fallback is drawn by us; an uploaded mark arrives with its own ground or none. */
    --agency-logo-blank-surface: rgba(255, 255, 255, .07);
    --agency-logo-blank-ink: #93a5b8;

    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 560px);
    gap: 80px;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 64px 40px;
    color: var(--ink);
}

.waiting[b-f2uacb19hx] {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---- the statement --------------------------------------------------- */

.rail[b-f2uacb19hx] {
    align-self: center;
    max-width: 42ch;
}

.eyebrow[b-f2uacb19hx] {
    margin: 0 0 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/*
 * Light at a large size. A 700-weight hero is what every dashboard opens with; this page is asking a calm
 * question, once, and the type says so.
 */
.ask[b-f2uacb19hx] {
    margin: 0 0 20px;
    font-size: clamp(30px, 4.4vw, 42px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -.015em;
}

.lead[b-f2uacb19hx] {
    margin: 0;
    max-width: 36ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.whoami[b-f2uacb19hx] {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--edge);
}

.whoami-label[b-f2uacb19hx] {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.whoami-name[b-f2uacb19hx] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.whoami-mail[b-f2uacb19hx] {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.signout[b-f2uacb19hx] {
    display: inline-block;
    margin-top: 16px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease;
}

.signout:hover[b-f2uacb19hx] {
    color: var(--ink);
    border-bottom-color: var(--live);
}

.signout:focus-visible[b-f2uacb19hx] {
    outline: 2px solid var(--live);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- the plates ------------------------------------------------------ */

.plates[b-f2uacb19hx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: center;
    width: 100%;
}

.plate[b-f2uacb19hx] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 16px 20px;
    appearance: none;
    border: 1px solid var(--edge);
    border-radius: 12px;
    background: var(--plate);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: background .18s ease, border-color .18s ease, opacity .22s ease;
}

/* Grows from the middle of the live edge rather than appearing whole, so the plate reads as being picked up. */
.plate[b-f2uacb19hx]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--live);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.plate:hover:not(:disabled)[b-f2uacb19hx],
.plate:focus-visible[b-f2uacb19hx] {
    background: var(--plate-lit);
    border-color: var(--edge-lit);
}

.plate:hover:not(:disabled)[b-f2uacb19hx]::before,
.plate:focus-visible[b-f2uacb19hx]::before,
.plate.is-chosen[b-f2uacb19hx]::before {
    transform: scaleY(1);
}

.plate:focus-visible[b-f2uacb19hx] {
    outline: 2px solid var(--live);
    outline-offset: 2px;
}

.plate:disabled[b-f2uacb19hx] {
    cursor: default;
}

.plate-name[b-f2uacb19hx] {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.005em;
    overflow-wrap: anywhere;
}

.plate-go[b-f2uacb19hx] {
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    transition: transform .18s ease, color .18s ease;
}

.plate:hover:not(:disabled) .plate-go[b-f2uacb19hx],
.plate:focus-visible .plate-go[b-f2uacb19hx] {
    transform: translateX(4px);
    color: var(--live);
}

.plate-go[b-f2uacb19hx]  svg {
    width: 20px;
    height: 20px;
    fill: currentcolor;
}

/* ---- committing ------------------------------------------------------ */

/*
 * A switch rewrites the auth cookie and reloads the whole application, so there is a real second or two here.
 * The page spends it saying what it is doing: the chosen plate stays lit and runs a bar, the rest step back.
 */
.plate.is-chosen[b-f2uacb19hx] {
    background: var(--plate-lit);
    border-color: var(--edge-lit);
}

.plate.is-waiting[b-f2uacb19hx] {
    opacity: .32;
}

.plate-progress[b-f2uacb19hx] {
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    opacity: 0;
    overflow: hidden;
}

.plate.is-chosen .plate-progress[b-f2uacb19hx] {
    opacity: 1;
}

.plate-progress[b-f2uacb19hx]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    background: var(--live);
    animation: sweep-b-f2uacb19hx 1.1s ease-in-out infinite;
}

@keyframes sweep-b-f2uacb19hx {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(360%);
    }
}

/* ---- arrival --------------------------------------------------------- */

/*
 * One orchestrated entrance, top to bottom: the question, then the agencies in the order they are offered in.
 */
.rail[b-f2uacb19hx],
.plate[b-f2uacb19hx] {
    animation: rise-b-f2uacb19hx .42s cubic-bezier(.2, .7, .3, 1) backwards;
}

.rail[b-f2uacb19hx] {
    animation-delay: 60ms;
}

.plate[b-f2uacb19hx] {
    animation-delay: calc(150ms + var(--index) * 60ms);
}

@keyframes rise-b-f2uacb19hx {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- narrow screens -------------------------------------------------- */

@media (max-width: 980px) {
    .chooser[b-f2uacb19hx] {
        grid-template-columns: minmax(0, 560px);
        gap: 40px;
        padding: 56px 24px;
    }

    .rail[b-f2uacb19hx] {
        max-width: none;
    }

    .lead[b-f2uacb19hx] {
        max-width: 52ch;
    }
}

@media (max-width: 520px) {
    .chooser[b-f2uacb19hx] {
        gap: 32px;
        padding: 40px 18px;
    }

    .plate[b-f2uacb19hx] {
        gap: 14px;
        padding: 13px 15px;
    }

    .plate-name[b-f2uacb19hx] {
        font-size: 15.5px;
    }

    .whoami[b-f2uacb19hx] {
        margin-top: 32px;
    }
}

/* ---- reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rail[b-f2uacb19hx],
    .plate[b-f2uacb19hx] {
        animation: none;
    }

    .plate[b-f2uacb19hx],
    .plate[b-f2uacb19hx]::before,
    .plate-go[b-f2uacb19hx],
    .signout[b-f2uacb19hx] {
        transition: none;
    }

    /* The bar still has to say "working", so it stays — it just stops travelling. */
    .plate-progress[b-f2uacb19hx]::after {
        width: 100%;
        animation: none;
        opacity: .55;
    }
}
/* /Components/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hpchcb9mvi],
.components-reconnect-repeated-attempt-visible[b-hpchcb9mvi],
.components-reconnect-failed-visible[b-hpchcb9mvi],
.components-pause-visible[b-hpchcb9mvi],
.components-resume-failed-visible[b-hpchcb9mvi],
.components-rejoining-animation[b-hpchcb9mvi] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-retrying[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-failed[b-hpchcb9mvi],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-hpchcb9mvi] {
    display: block;
}


#components-reconnect-modal[b-hpchcb9mvi] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-hpchcb9mvi 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-hpchcb9mvi 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-hpchcb9mvi 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

}

#components-reconnect-modal[b-hpchcb9mvi]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-hpchcb9mvi 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-hpchcb9mvi {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-hpchcb9mvi {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-hpchcb9mvi {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-hpchcb9mvi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-hpchcb9mvi] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-hpchcb9mvi] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

#components-reconnect-modal button:hover[b-hpchcb9mvi] {
    background-color: #3b6ea2;
}

#components-reconnect-modal button:active[b-hpchcb9mvi] {
    background-color: #6b9ed2;
}

.components-rejoining-animation[b-hpchcb9mvi] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-hpchcb9mvi] {
    position: absolute;
    border: 3px solid #0087ff;
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-hpchcb9mvi 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-hpchcb9mvi] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-hpchcb9mvi {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}