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

/* /Components/Common/Accordion/Accordion.razor.rz.scp.css */
.accordion-body[b-yrb7ppqdy0] {
    padding: var(--spacingVerticalM) var(--spacingHorizontalM);
}

/* FluentAccordionItem has no end slot, and its start slot is the second column of its heading's grid, between the
   chevron and the title. In the last column the content ends the heading instead. Positioned, so it paints above the
   header button's full-width click area and stays clickable. */
.accordion-end[b-yrb7ppqdy0] {
    grid-column: -2;
    position: relative;
}
/* /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: a neutral one, unless the host sets the two custom properties
 * below to suit what it is drawn on.
 */
.plaque[b-0o1kqcg66k] {
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: var(--borderRadiusXLarge);
}

/* 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, var(--colorNeutralBackground4));
    color: var(--agency-logo-blank-ink, var(--colorNeutralForeground3));
}

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

.initials[b-0o1kqcg66k] {
    font-weight: var(--fontWeightBold);
    letter-spacing: .03em;
}

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

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

.is-small .initials[b-0o1kqcg66k] {
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
}

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

.is-medium .initials[b-0o1kqcg66k] {
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

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

.is-large .initials[b-0o1kqcg66k] {
    font-size: var(--fontSizeBase500);
    line-height: var(--lineHeightBase500);
}

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

    .is-large .initials[b-0o1kqcg66k] {
        font-size: var(--fontSizeBase400);
        line-height: var(--lineHeightBase400);
    }
}
/* /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] {
    /* 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: var(--spacingVerticalS);
    padding: 0;
}

.logo-row[b-e1m9dzck6b] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacingHorizontalL);
}

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

@media (max-width: 560px) {
    .logo-row[b-e1m9dzck6b] {
        flex-direction: column;
    }
}
/* /Components/Common/B2CConfigForm/ArrayB2CConfigFieldComponent.razor.rz.scp.css */
/* Entries that are groups: one closed section per line, inside one outline. */
.b2c-entries[b-kjeea90so9] {
    display: flex;
    flex-direction: column;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
}

.b2c-row-value[b-kjeea90so9] {
    flex: 1 1 auto;
    min-width: 0;
}

.b2c-row-actions[b-kjeea90so9] {
    display: flex;
    flex: none;
    align-items: center;
}
/* /Components/Common/B2CConfigForm/B2CConfigForm.razor.rz.scp.css */
/* Single values, two to a row where there is room. */
.b2c-fields[b-iv0ra5wvur] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacingVerticalL) var(--spacingHorizontalXL);
    align-items: start;
}

@media (max-width: 600px) {
    .b2c-fields[b-iv0ra5wvur] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Common/B2CConfigForm/B2CConfigFormField.razor.rz.scp.css */
.b2c-field[b-lfrgb0b38q] {
    min-width: 0;
}

/* A long value, a group or a list takes the whole row of the grid it is in. */
.b2c-field-wide[b-lfrgb0b38q] {
    grid-column: 1 / -1;
}
/* /Components/Common/B2CConfigForm/ColorB2CConfigFieldComponent.razor.rz.scp.css */
.color-swatch[b-qlknqycf37] {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--app-surface-raised);
    cursor: pointer;
}

.color-swatch:focus-visible[b-qlknqycf37] {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: var(--strokeWidthThin);
}
/* /Components/Common/B2CConfigForm/FileB2CConfigFieldComponent.razor.rz.scp.css */
/* The uploaded image, shrunk to fit its card without cropping. */
.file-preview[b-iiy71rxpix] {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}
/* /Components/Common/B2CConfigForm/ObjectB2CConfigFieldComponent.razor.rz.scp.css */
.b2c-group[b-k2di4zqc0q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM);
    min-width: 0;
}

/* A group inside a group: named, and indented behind a rule, so the nesting shows without another card. */
.b2c-group-nested[b-k2di4zqc0q] {
    padding-inline-start: var(--spacingHorizontalL);
    border-inline-start: var(--strokeWidthThick) solid var(--colorNeutralStroke2);
}

/* The group's fields, two to a row where there is room. */
.b2c-fields[b-k2di4zqc0q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacingVerticalL) var(--spacingHorizontalXL);
    align-items: start;
}

@media (max-width: 600px) {
    .b2c-fields[b-k2di4zqc0q] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /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-content[b-vrp2dvv0gm] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    background-color: var(--app-surface-canvas);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    min-height: 32px;
}

/* FluentText has no flex-grow parameter: the message pushes the retry button to the end. */
.branch-select-error-content[b-vrp2dvv0gm]  .branch-select-error-message {
    flex: 1;
}

.branch-select-out-of-scope[b-vrp2dvv0gm] {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--spacingHorizontalM);
    color: var(--colorNeutralForeground1);
}
/* /Components/Common/BulkAssignment/BulkAssignDialog.razor.rz.scp.css */
.bulk-assign-empty[b-0uhps0ednm] {
    width: 100%;
    padding: var(--spacingVerticalXL) var(--spacingHorizontalL);
    border: var(--strokeWidthThin) dashed var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusXLarge);
    background-color: var(--app-surface-canvas);
    text-align: center;
}

.bulk-assign-card[b-0uhps0ednm] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalS);
    width: 100%;
    padding: var(--spacingVerticalM) var(--spacingHorizontalM);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadius3XLarge);
    background-color: var(--app-surface-raised);
}

/* Sits in the dialog's action row, left of the buttons; it gives way (with an ellipsis) when space runs out. */
.bulk-assign-summary[b-0uhps0ednm] {
    flex: 1;
    align-self: center;
    min-width: 0;
}
/* /Components/Common/BulkAssignment/BulkAssignToolbarAction.razor.rz.scp.css */
.bulk-assign[b-6j04j4xwre] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

/* No Fluent container takes a background, so the selection bar's tint lives here. */
.bulk-assign.selecting[b-6j04j4xwre] {
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalXXS) var(--spacingVerticalXXS) var(--spacingHorizontalM);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--colorBrandBackground2);
}

/* Keeps the live region mounted without taking a slot in the row. */
.selection-status[b-6j04j4xwre] {
    display: contents;
}
/* /Components/Common/CoverageTableForm/CoverageTableColumnSelectField.razor.rz.scp.css */
/* min-width: 0 because a grid item defaults to min-width: auto, so a long option label would otherwise stretch the cell
   past its column instead of being ellipsized by the select. */
.cell[b-zvpyq6qjcu] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
    min-width: 0;
}

.cell-value[b-zvpyq6qjcu] {
    flex: 1 1 auto;
    min-width: 0;
}

.cell-warning[b-zvpyq6qjcu] {
    display: inline-flex;
    flex: 0 0 auto;
}

.invalid-products[b-zvpyq6qjcu] {
    min-width: 280px;
}

.invalid-products ul[b-zvpyq6qjcu] {
    margin: var(--spacingVerticalXS) 0 0;
    padding-inline-start: var(--spacingHorizontalL);
}

.cell-editable[b-zvpyq6qjcu] {
    cursor: pointer;
}

/* An inherited value reads fainter than the row's own. */
.cell-inherited[b-zvpyq6qjcu] {
    opacity: 0.6;
}
/* /Components/Common/CoverageTableForm/CoverageTableForm.razor.rz.scp.css */
.coverage-table-form[b-hg9koa6krs] {
    width: 100%;
    height: 100%;
}

/* FluentDataGrid columns have no cell overflow or vertical-alignment parameter. */
[b-hg9koa6krs] .coverage-table-column {
    overflow: visible !important;
    display: grid;
    align-content: center;
}

/* FluentStack has Height but no MinHeight, and no white-space parameter; the badge would wrap without it. */
[b-hg9koa6krs] .coverage-tree-row-header {
    min-height: 32px;
    white-space: nowrap;
}

/* The background goes on the cells, not on `tr`: in grid mode `tr { display: contents }`, so the row
   generates no box of its own and is never painted. `tr:hover` still works, it does not need a box.
   FluentDataGrid has no per-row background parameter; RowStyle would be an inline style on that boxless `tr`. */
[b-hg9koa6krs] .coverage-tree-row > td {
    background-color: var(--coverage-row-bg, transparent);
    transition: background-color var(--durationFaster) var(--curveLinear);
}

[b-hg9koa6krs] .coverage-tree-row:hover > td {
    background-color: var(--coverage-row-bg-hover, transparent);
}

[b-hg9koa6krs] .coverage-tree-row-generic {
    --coverage-row-bg: color-mix(in srgb, var(--colorBrandBackground) 14%, transparent);
    --coverage-row-bg-hover: color-mix(in srgb, var(--colorBrandBackground) 21%, transparent);
}

[b-hg9koa6krs] .coverage-tree-row-type {
    --coverage-row-bg: color-mix(in srgb, var(--colorBrandBackground) 9%, transparent);
    --coverage-row-bg-hover: color-mix(in srgb, var(--colorBrandBackground) 16%, transparent);
}

[b-hg9koa6krs] .coverage-tree-row-company {
    --coverage-row-bg: color-mix(in srgb, var(--colorBrandBackground) 4%, transparent);
    --coverage-row-bg-hover: color-mix(in srgb, var(--colorBrandBackground) 11%, transparent);
}

/* A product row keeps the table's own background: it is the level every other tone is compared to. */
[b-hg9koa6krs] .coverage-tree-row-product {
    --coverage-row-bg: transparent;
    --coverage-row-bg-hover: color-mix(in srgb, var(--colorBrandBackground) 7%, transparent);
}
/* /Components/Common/ErrorDialog.razor.rz.scp.css */
/* FluentText sets a line height only together with its size; the message keeps body size at a looser line. */
.error-dialog[b-qzp2k1p2ld]  .error-message {
    line-height: var(--lineHeightBase400);
}

.error-section[b-qzp2k1p2ld] {
    margin-bottom: var(--spacingVerticalXL);
}

.validation-error[b-qzp2k1p2ld] {
    padding: var(--spacingVerticalM) var(--spacingHorizontalM);
    background: var(--app-intent-danger-bg);
    border: var(--strokeWidthThin) solid var(--app-intent-danger-border);
    border-left: var(--strokeWidthThicker) solid var(--app-intent-danger-strong);
    border-radius: var(--borderRadiusLarge);
}

.suggestion-item[b-qzp2k1p2ld] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacingHorizontalS);
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    background: var(--app-intent-info-bg);
    border-radius: var(--borderRadiusLarge);
    color: var(--colorNeutralForeground1);
}

.trace-id[b-qzp2k1p2ld] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalSNudge);
    margin-top: var(--spacingVerticalXL);
    padding-top: var(--spacingVerticalL);
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
/* /Components/Common/Facts/Fact.razor.rz.scp.css */
/* The label keeps one width on every row; when the row can't also fit the value, the value wraps under it. */
.fact[b-l0x5nsd9ev] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacingVerticalXXS) var(--spacingHorizontalL);
    min-width: 0;
}

.fact-label[b-l0x5nsd9ev] {
    flex: 0 1 11rem;
    min-width: 0;
}

/* A side column: both columns start narrower, so a row of about 340px still holds label and value side by side. */
.fact-narrow .fact-label[b-l0x5nsd9ev] {
    flex-basis: 9.5rem;
}

.fact-narrow .fact-value[b-l0x5nsd9ev] {
    flex-basis: 10rem;
}

.fact-value[b-l0x5nsd9ev] {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
/* /Components/Common/Facts/FactList.razor.rz.scp.css */
.facts[b-yclykp8l78] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalS);
    min-width: 0;
    margin: 0;
}
/* /Components/Common/FileUpload/FileUploadField.razor.rz.scp.css */
/* Fills its column like the other fields, a start-aligned stack (a dialog's body) too. */
.file-upload[b-oeaciz48op] {
    width: 100%;
    min-width: 0;
}

/* FluentInputFile has no parameter for its content's width: Fluent centres the content at its own width, and the drop
   zone fills the field rather than shrinking to its text. */
.file-upload[b-oeaciz48op]  .fluent-inputfile-container > * {
    width: 100%;
    box-sizing: border-box;
}

/* Fluent gives its progress row a fixed 50px whether or not a file is being read, which pushed the prompt past the
   zone's height; the row (our ProgressTemplate, empty until a file is being read) only takes room while it shows
   progress. FluentInputFile has no parameter for it. */
.file-upload[b-oeaciz48op]  .inputfile-progress:empty {
    display: none;
}

.file-upload-browse[b-oeaciz48op] {
    color: var(--colorBrandForeground1);
    text-decoration: underline;
    cursor: pointer;
}

/* FluentStack has no max-width or min-width parameter: a long file name ends in an ellipsis inside the zone. */
.file-upload[b-oeaciz48op]  .file-upload-chosen {
    max-width: 100%;
    min-width: 0;
}
/* /Components/Common/InsuranceCompanyLogo/InsuranceCompanyLogo.razor.rz.scp.css */
/* The box keeps its size in a row of text; the logo is scaled into it, never stretched or cropped. */
.insurance-company-logo[b-t8nfk2p0v8] {
    flex: 0 0 auto;
    object-fit: contain;
}

.insurance-company-logo-empty[b-t8nfk2p0v8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.size-small[b-t8nfk2p0v8] {
    width: 40px;
    height: 24px;
}

.size-medium[b-t8nfk2p0v8] {
    width: 56px;
    height: 24px;
}

.size-large[b-t8nfk2p0v8] {
    width: 80px;
    height: 40px;
}

/* The container decides: a product card's or a page header's logo box. */
.size-fill[b-t8nfk2p0v8] {
    width: 100%;
    height: 100%;
}
/* /Components/Common/InsuranceCompanyLogo/InsuranceCompanyLogoTile.razor.rz.scp.css */
/* White in both themes, for the logos' sake: the static inverted foreground is Fluent's one colour that stays white. */
.logo-tile[b-nriaqiw15n] {
    flex: none;
    display: inline-grid;
    /* One definite cell, so the logo's 100% height is the tile's and a tall logo scales down instead of overflowing. */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    box-sizing: border-box;
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalXS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--colorNeutralForegroundStaticInverted);
    overflow: hidden;
}

/* Fluent has no size tokens for a box; rem keeps a tile in proportion to the text beside it when the reader enlarges
   the text. */
.tile-small[b-nriaqiw15n] {
    width: 5rem;
    height: 2.5rem;
}

.tile-medium[b-nriaqiw15n] {
    width: 6.5rem;
    height: 3.25rem;
    padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
}

.tile-extra-small[b-nriaqiw15n] {
    width: 3.5rem;
    height: 1.75rem;
    padding: var(--spacingVerticalNone) var(--spacingHorizontalXXS);
    border-radius: var(--borderRadiusMedium);
}

.tile-large[b-nriaqiw15n] {
    width: 7.5rem;
    height: 3.75rem;
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
}
/* /Components/Common/InsuranceCompanySelector/InsuranceCompanySelect.razor.rz.scp.css */
/* A company in the list: its logo tile, then its name. */
.company-option[b-xpo3ombay1] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}
/* /Components/Common/MarkdownSection/MarkdownSection.razor.rz.scp.css */
/* Tables read as the panel's own grids do: hairline theme borders, a shaded header, room in every cell. */
[b-ng5klrqgku] table {
    width: 100%;
    border-collapse: collapse;
}

[b-ng5klrqgku] th,
[b-ng5klrqgku] td {
    padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    text-align: start;
    vertical-align: top;
}

[b-ng5klrqgku] th {
    background-color: var(--app-surface-sunken);
    font-weight: var(--fontWeightSemibold);
}

[b-ng5klrqgku] .snippet {
    margin-bottom: var(--spacingVerticalS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    overflow-y: auto;
}

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

[b-ng5klrqgku] .hljs-copy-button {
    border-color: var(--colorNeutralStrokeAccessible);
    color: var(--colorBrandForeground1);
    top: 0.4rem;
}

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

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

[b-ng5klrqgku] .hljs-copy {
    cursor: pointer;
    border-color: var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    color: var(--colorBrandForeground1);
    background-color: var(--app-surface-canvas);
    top: 0.4rem;
}

[b-ng5klrqgku] .hljs-copy {
    position: absolute;
    transform: translateX(calc(100% + 1.125em));
    right: 1em;
    transition: background-color var(--durationNormal) var(--curveEasyEase), transform var(--durationNormal) var(--curveDecelerateMid);
}

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

/* The copy button is added by MarkdownSection.razor.js, so it carries no scope attribute: both selectors need ::deep. */
[b-ng5klrqgku] .hljs-copy-wrapper:hover .hljs-copy, [b-ng5klrqgku] .hljs-copy:focus {
    transform: translateX(0);
}
/* /Components/Common/NumericQuantityInput.razor.rz.scp.css */
/* The value takes the row; the clear button keeps its own width beside it. */
.quantity-value[b-j4zadel1v7] {
    flex: 1;
    width: 100%;
}
/* /Components/Common/PageHeader/PageHeader.razor.rz.scp.css */
/* Stretched: pages put the header in a vertical stack that would otherwise shrink it to its content, and a wrapping
   row that narrow pushes the actions onto a line of their own. */
.page-header[b-02cy8ptrfb] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-self: stretch;
    gap: var(--spacingHorizontalM);
    margin-bottom: var(--app-section-gap);
}

/* FluentStack has no flex-basis or min-width parameter: the title column takes the line beside the actions. */
.page-header[b-02cy8ptrfb]  .page-header-text {
    flex: 1 1 20rem;
    min-width: 0;
}

/* FluentStack has no colour parameter; the facts under the title inherit this muted one. */
.page-header[b-02cy8ptrfb]  .page-header-meta {
    color: var(--colorNeutralForeground3);
}
/* /Components/Common/PartnerSelector/PartnerAssignmentSelect.razor.rz.scp.css */
.partner-field[b-i4vk03wz7c] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* FluentAutocomplete's Width sizes its field wrapper, not the fluent-text-input inside it, and no parameter reaches that. */
.partner-field[b-i4vk03wz7c]  fluent-text-input {
    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-i4vk03wz7c] {
    cursor: not-allowed;
    pointer-events: auto;
}

.partner-field.denied[b-i4vk03wz7c]  * {
    pointer-events: none;
}
/* /Components/Common/PropertyBox/PropertyBox.razor.rz.scp.css */
.property-box[b-cv200zcnju] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalMNudge);
    min-width: 0;
}

/* The icon keeps its size; only the text shrinks when the column is narrow. */
.property-box[b-cv200zcnju]  > :first-child {
    flex-shrink: 0;
}

/* FluentStack has no flex-grow or min-width parameter. The text takes the rest of the box after the icon, so a field
   shown as the value can fill the box rather than its own content width. */
.property-box[b-cv200zcnju]  .property-box-text {
    flex: 1;
    min-width: 0;
}

/* FluentText has no word-break parameter. */
.property-box[b-cv200zcnju]  .property-box-title,
.property-box[b-cv200zcnju]  .property-box-value {
    word-break: break-word;
}

.property-box[b-cv200zcnju]  .property-box-value {
    min-width: 0;
}
/* /Components/Common/PropertyBox/PropertyBoxContainer.razor.rz.scp.css */
.property-box-container[b-yea4jleymy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-item-size, 120px), 1fr));
    gap: var(--spacingHorizontalXXL);
}

.property-box-container[b-yea4jleymy]  > * {
    min-width: 0;
}
/* /Components/Common/SectionCard/SectionCard.razor.rz.scp.css */
.section-card-header[b-fjofdsvlo7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacingHorizontalS);
    min-height: 48px;
    padding: var(--spacingVerticalS) var(--spacingHorizontalL);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* FluentStack has no flex-grow or min-width parameter: the heading takes the row's free space and may shrink. */
.section-card-header[b-fjofdsvlo7]  .section-card-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.section-card-body[b-fjofdsvlo7] {
    padding: var(--spacingVerticalM) var(--spacingHorizontalL) var(--spacingVerticalL);
}

/* A header-only card has nothing to divide from. */
.section-card-header:last-child[b-fjofdsvlo7] {
    border-bottom: none;
}

/* Content that draws nothing — a settings card whose switch is off — leaves the card a header only, rather than a
   header over an empty padded band. */
.section-card-body:empty[b-fjofdsvlo7] {
    display: none;
}

.section-card-header:has(+ .section-card-body:empty)[b-fjofdsvlo7] {
    border-bottom: none;
}
/* /Components/Common/Splitter/Splitter.razor.rz.scp.css */
/* Fills the page area below the header; each side scrolls on its own. */
.splitter-host[b-tvtaaqsux8] {
    height: calc(100dvh - var(--header-height) - 2 * var(--app-page-gutter));
}

/* Under a page header of its own: the height its flex column leaves. */
.splitter-fill[b-tvtaaqsux8] {
    flex: 1;
    min-height: 0;
    height: auto;
}

.pane[b-tvtaaqsux8] {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.pane[b-tvtaaqsux8]::-webkit-scrollbar {
    display: none;
}

.pane-start[b-tvtaaqsux8] {
    padding-right: var(--spacingHorizontalSNudge);
}

.pane-end[b-tvtaaqsux8] {
    padding-left: var(--spacingHorizontalSNudge);
}
/* /Components/Common/States/EmptyState.razor.rz.scp.css */
.empty-state-icon[b-l4tbyryykz] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacingVerticalS);
    border-radius: 50%;
    background-color: var(--icon-bg);
}

.empty-state-description[b-l4tbyryykz] {
    max-width: 48ch;
}

.intent-neutral[b-l4tbyryykz] {
    --icon-bg: var(--app-intent-neutral-bg);
}

.intent-info[b-l4tbyryykz] {
    --icon-bg: var(--app-intent-info-bg);
}

.intent-success[b-l4tbyryykz] {
    --icon-bg: var(--app-intent-success-bg);
}

.intent-warning[b-l4tbyryykz] {
    --icon-bg: var(--app-intent-warning-bg);
}

.intent-danger[b-l4tbyryykz] {
    --icon-bg: var(--app-intent-danger-bg);
}
/* /Components/Common/Tabs/Tab.razor.rz.scp.css */
.tab-header[b-ac7z9nyzze] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
}

/* The panel's full height when its Tabs fill (Tabs Fill), so content can fill it too; otherwise as tall as its
   content. */
.tab-panel[b-ac7z9nyzze] {
    box-sizing: border-box;
    height: 100%;
    padding-top: var(--spacingVerticalM);
}
/* /Components/Common/Tabs/Tabs.razor.rz.scp.css */
/* Takes the height left in its parent flex column. */
.tabs-fill[b-yd4oyt4czh] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* FluentTabs takes a height, but has no parameter that gives the open panel the height left under the tab strip: the
   tabs become a column whose open panel grows into it and scrolls past it. */
.tabs-fill[b-yd4oyt4czh]  > .fluent-tabs {
    display: flex;
    flex-direction: column;
}

.tabs-fill[b-yd4oyt4czh]  > .fluent-tabs > .fluent-tab-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* FluentTabs has no slot beside its tab strip. This is a grid of the strip and the end content on one row and the open
   panel under both; the tabs hand their strip and panels to it as a subgrid, keeping their own box. The strip never
   shrinks below its tabs: when the row is short the end content gives way instead (a button's label wraps). Declared
   after the fill rules, which it replaces when both apply (a grid row then gives the panel the height left). */
.tabs-with-end[b-yd4oyt4czh] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--spacingHorizontalM);
}

.tabs-with-end[b-yd4oyt4czh]  > .fluent-tabs {
    display: grid;
    grid-area: 1 / 1 / -1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.tabs-with-end[b-yd4oyt4czh]  > .fluent-tabs > .fluent-tab-panel {
    grid-column: 1 / -1;
}

.tabs-end[b-yd4oyt4czh] {
    grid-area: 1 / 2;
    align-self: center;
}
/* /Components/Common/Theming/ThemeScope.razor.rz.scp.css */
.theme-scope[b-c0mm3gg4se] {
    display: contents;
    color: var(--colorNeutralForeground1);
}

.theme-scope--pending[b-c0mm3gg4se] {
    visibility: hidden;
}
/* /Components/Common/UpPersona.razor.rz.scp.css */
.up-persona[b-woih5z1atg] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    min-width: 0;
    max-width: 100%;
}

.up-persona-text[b-woih5z1atg] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Layout/Authentication/AuthenticationLayout.razor.rz.scp.css */
/* Flat and matte: no gradient and no glass, because the pages put exactly one lit object on it. Drawn inside a dark
   ThemeScope, so every token resolves to its dark value. */
.stage[b-d8ga82idmu] {
    min-height: 100dvh;
    background: var(--app-surface-canvas);
    color: var(--colorNeutralForeground1);
}
/* /Components/Layout/Authentication/AuthPlate.razor.rz.scp.css */
/*
 * The plate: the only raised object on the authentication layout's matte field.
 *
 * Accent colour is spent only where something is happening — the focus ring, the chevron under the pointer, and
 * the edge of the plate that is lit — and nothing here is coloured to be decorative. Drawn inside a dark
 * ThemeScope, so every token resolves to its dark value.
 */
.plate[b-3dcqgd16jq] {
    --plate-live: var(--colorBrandForeground1);

    /* Only the initials fallback of an agency mark is drawn by us; an uploaded mark arrives with its own ground. */
    --agency-logo-blank-surface: color-mix(in srgb, var(--colorNeutralForeground1) 7%, transparent);
    --agency-logo-blank-ink: var(--colorNeutralForeground3);

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacingHorizontalXL);
    width: 100%;
    padding: var(--spacingVerticalL) var(--spacingHorizontalXL);
    appearance: none;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadius2XLarge);
    background: var(--app-surface-raised);
    color: var(--colorNeutralForeground1);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: background var(--durationFast) var(--curveEasyEase),
    border-color var(--durationFast) var(--curveEasyEase),
    opacity var(--durationGentle) var(--curveEasyEase);
}

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

.plate:hover:not(:disabled)[b-3dcqgd16jq],
.plate:focus-visible[b-3dcqgd16jq],
.plate.is-chosen[b-3dcqgd16jq] {
    background: var(--colorNeutralBackground1Hover);
    border-color: var(--colorNeutralStroke1);
}

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

.plate:focus-visible[b-3dcqgd16jq] {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: var(--strokeWidthThick);
}

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

.plate-mark[b-3dcqgd16jq] {
    display: grid;
    place-items: center;
}

/* The name and hint are FluentText; this only keeps a long agency name wrapping inside the plate. */
.plate-text[b-3dcqgd16jq] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXXS);
    min-width: 0;
    overflow-wrap: anywhere;
}

.plate-go[b-3dcqgd16jq] {
    display: grid;
    place-items: center;
    color: var(--colorNeutralForeground3);
    transition: transform var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);
}

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

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

/* A choice that reloads the application takes a second or two; the chosen plate runs a bar, the rest step back. */
.plate.is-waiting[b-3dcqgd16jq] {
    opacity: .32;
}

.plate-progress[b-3dcqgd16jq] {
    position: absolute;
    inset: auto 0 0 0;
    height: var(--strokeWidthThick);
    opacity: 0;
    overflow: hidden;
}

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

.plate-progress[b-3dcqgd16jq]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    background: var(--plate-live);
    animation: sweep-b-3dcqgd16jq calc(var(--durationUltraSlow) * 2.2) var(--curveEasyEase) infinite;
}

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

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

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

@media (max-width: 520px) {
    .plate[b-3dcqgd16jq] {
        gap: var(--spacingHorizontalM);
        padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .plate[b-3dcqgd16jq],
    .plate[b-3dcqgd16jq]::before,
    .plate-go[b-3dcqgd16jq] {
        transition: none;
    }

    /* The bar still has to say "working", so it stays — it just stops travelling. */
    .plate-progress[b-3dcqgd16jq]::after {
        width: 100%;
        animation: none;
        opacity: .55;
    }
}
/* /Components/Layout/Authentication/AuthScreen.razor.rz.scp.css */
/*
 * The mark on its own line, then the question on the left and the answer on the right, both hung from the same top
 * line so the first thing to act on starts level with what it answers. The whole block is centred on the field.
 * Under 980px everything stacks in reading order.
 *
 * Accent colour is not spent here at all: the rail is ink on the field, and whatever the page puts in the answer
 * column — a plate, a primary button — is the only thing that carries the brand.
 */
.auth-screen[b-qquq1ku9rp] {
    display: grid;
    grid-template-columns: minmax(18rem, 25rem) minmax(0, 30rem);
    grid-template-areas:
        "brand  ."
        "rail   answer";
    align-items: start;
    align-content: center;
    justify-content: center;
    column-gap: calc(var(--spacingHorizontalXXXL) * 2 + var(--spacingHorizontalL));
    row-gap: calc(var(--spacingVerticalXXXL) + var(--spacingVerticalS));
    min-height: 100dvh;
    padding: calc(var(--spacingVerticalXXXL) * 2) calc(var(--spacingHorizontalXXXL) + var(--spacingHorizontalS));
}

.auth-screen.is-list[b-qquq1ku9rp] {
    grid-template-columns: minmax(18rem, 25rem) minmax(0, 35rem);
}

/* A grid or a two-column form: the question gives up some of its room, and the gap some of its air. */
.auth-screen.is-workspace[b-qquq1ku9rp] {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 52rem);
    column-gap: calc(var(--spacingHorizontalXXXL) + var(--spacingHorizontalXL));
}

/* ---- the areas: the type inside them is FluentText ---------------------- */

.brand[b-qquq1ku9rp] {
    grid-area: brand;
}

.rail[b-qquq1ku9rp] {
    grid-area: rail;
    max-width: 42ch;
}

/* ---- the answer ------------------------------------------------------- */

.answer[b-qquq1ku9rp] {
    grid-area: answer;
    min-width: 0;
}

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

/* One entrance for the whole page: the question, then the answer. */
.rail[b-qquq1ku9rp],
.answer[b-qquq1ku9rp] {
    animation: rise-b-qquq1ku9rp var(--durationSlower) var(--curveDecelerateMid) backwards;
}

.answer[b-qquq1ku9rp] {
    animation-delay: var(--durationFast);
}

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

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

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

@media (max-width: 980px) {
    .auth-screen[b-qquq1ku9rp],
    .auth-screen.is-list[b-qquq1ku9rp],
    .auth-screen.is-workspace[b-qquq1ku9rp] {
        grid-template-columns: minmax(0, 35rem);
        grid-template-areas:
            "brand"
            "rail"
            "answer";
        row-gap: calc(var(--spacingVerticalXXXL) + var(--spacingVerticalS));
        padding: calc(var(--spacingVerticalXXXL) + var(--spacingVerticalXXL)) var(--spacingHorizontalXXL);
    }

    /* A grid keeps every column it can get once it is the only thing on the line. */
    .auth-screen.is-workspace[b-qquq1ku9rp] {
        grid-template-columns: minmax(0, 52rem);
    }

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

@media (max-width: 520px) {
    .auth-screen[b-qquq1ku9rp],
    .auth-screen.is-list[b-qquq1ku9rp],
    .auth-screen.is-workspace[b-qquq1ku9rp] {
        align-content: start;
        row-gap: var(--spacingVerticalXXL);
        padding: var(--spacingVerticalXXL) var(--spacingHorizontalL);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rail[b-qquq1ku9rp],
    .answer[b-qquq1ku9rp] {
        animation: none;
    }
}
/* /Components/Layout/Dialogs/KeyboardShortcutsDialog.razor.rz.scp.css */
.section[b-wuej5uxiwo] {
    margin: var(--spacingVerticalL) 0 var(--spacingVerticalS);
    color: var(--colorNeutralForeground1);
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase300);
}

.shortcuts[b-wuej5uxiwo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacingVerticalS) var(--spacingHorizontalL);
    margin: 0;
}

.shortcuts dd[b-wuej5uxiwo] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalXXS);
    margin: 0;
}

kbd[b-wuej5uxiwo],
[b-wuej5uxiwo] kbd {
    min-width: var(--spacingHorizontalXL);
    padding: 0 var(--spacingHorizontalXS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-bottom-width: var(--strokeWidthThick);
    border-radius: var(--borderRadiusSmall);
    background-color: var(--app-surface-sunken);
    color: var(--colorNeutralForeground2);
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase300);
    text-align: center;
}
/* /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[b-wa0ijjhc4z] {
    --agency-logo-blank-ink: var(--colorNeutralForeground1);

    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    max-width: 260px;
    padding: var(--spacingVerticalXS) var(--spacingHorizontalMNudge) var(--spacingVerticalXS) var(--spacingHorizontalXS);
    appearance: none;
    border: var(--strokeWidthThin) solid transparent;
    border-radius: var(--borderRadiusXLarge);
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--durationFast) var(--curveEasyEase), border-color var(--durationFast) var(--curveEasyEase);
}

.agent:hover[b-wa0ijjhc4z] {
    background: var(--colorSubtleBackgroundHover);
    border-color: var(--colorNeutralStroke2);
}

.agent:focus-visible[b-wa0ijjhc4z],
.agent-switch:focus-visible[b-wa0ijjhc4z] {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: var(--strokeWidthThin);
}

/* 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: var(--strokeWidthThin) solid transparent;
    border-radius: var(--borderRadiusXLarge);
    color: var(--colorNeutralForeground3);
    text-decoration: none;
    transition: background var(--durationFast) var(--curveEasyEase), border-color var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);
}

.agent-switch:hover[b-wa0ijjhc4z] {
    background: var(--colorSubtleBackgroundHover);
    border-color: var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

/* FluentText has no breakpoint visibility parameter. */
@media (max-width: 720px) {
    [b-wa0ijjhc4z] .agent-name {
        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;
}

/* FluentButton has no position parameter; both buttons float over the softphone's corner. */
[b-kvj943w0bj].alo-tech-container > .open-btn {
    position: absolute;
    right: var(--spacingHorizontalL);
    bottom: var(--spacingVerticalL);
}

[b-kvj943w0bj].alo-tech-container > .close-btn {
    position: absolute;
    right: var(--spacingHorizontalXL);
    bottom: 530px;
    z-index: 9999;
}
/* /Components/Layout/Main/Header.razor.rz.scp.css */
.header[b-d0sls5ccab] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalL);
    padding: 0 var(--spacingHorizontalL);
}

.brand[b-d0sls5ccab] {
    display: flex;
    align-items: baseline;
    gap: var(--spacingHorizontalS);
    color: var(--colorNeutralForeground1);
    text-decoration: none;
}

.brand img[b-d0sls5ccab] {
    align-self: center;
}

/* The menu button is for a phone, where MainLayout.razor.css hides the sidebar (same width). Fluent has no parameter
   that shows a component at one screen width only, and the button has to be there on the first paint with the
   hidden sidebar. */
[b-d0sls5ccab] .menu-button {
    display: none;
}

/* A phone's header holds the menu button, the brand, the assistant, the agency and the user in 360px or so: tighter
   spacing, no version label, and the assistant and user buttons (their labels already hidden, AssistantToggle.razor.css
   and UserMenu.razor.css) without Fluent's 96px minimum button width, which it has no parameter for. Wider, the row
   overflowed the screen and the page scrolled sideways. */
@media (max-width: 768px) {
    .header[b-d0sls5ccab] {
        gap: var(--spacingHorizontalS);
        padding: 0 var(--spacingHorizontalM);
    }

    [b-d0sls5ccab] .menu-button {
        display: inline-flex;
    }

    [b-d0sls5ccab] .version {
        display: none;
    }

    [b-d0sls5ccab] .user-button,
    [b-d0sls5ccab] .assistant-toggle {
        min-width: 0;
    }

    /* Icon alone here, so as narrow as an icon-only button, without the gap the icon keeps for the hidden label;
       IconOnly can't follow the screen width. */
    [b-d0sls5ccab] .assistant-toggle {
        padding-inline: var(--spacingHorizontalSNudge);
    }

    [b-d0sls5ccab] .assistant-toggle > [slot="start"] {
        margin-inline-end: 0;
    }
}

/* FluentDivider has no height parameter, and v5's vertical divider has a minimum height taller than the header;
   without resetting it the line runs out below. */
[b-d0sls5ccab] .splitter {
    height: 28px;
    min-height: 0;
    align-self: center;
}
/* /Components/Layout/Main/MainLayout.razor.rz.scp.css */
.layout[b-v4epqdkgp9] {
    height: 100dvh;
    width: 100vw;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "head head"
        "nav main";
    background-color: var(--app-surface-canvas);
    color: var(--colorNeutralForeground1);
    position: relative;

    --header-height: 60px;
}

.layout.with-assistant[b-v4epqdkgp9] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "head head head"
        "nav main assistant";

    --assistant-panel-width: 420px;
}

/* The assistant panel takes the right edge, so the call-centre widget moves to the left of it. Not on a phone, where
   the panel takes the whole width (below). */
@media (min-width: 769px) {
    .layout.with-assistant[b-v4epqdkgp9]  .alo-tech-container > .open-btn {
        right: calc(var(--assistant-panel-width) + var(--spacingHorizontalL));
    }

    .layout.with-assistant[b-v4epqdkgp9]  .alo-tech-container > .close-btn {
        right: calc(var(--assistant-panel-width) + var(--spacingHorizontalXL));
    }

    .layout.with-assistant[b-v4epqdkgp9]  #softphone-iframe {
        right: var(--assistant-panel-width);
    }
}

[b-v4epqdkgp9].layout > header {
    grid-area: head;
    height: var(--header-height);
    background-color: var(--app-surface-raised);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

[b-v4epqdkgp9].layout > .nav-shell {
    grid-area: nav;
}

.body-content[b-v4epqdkgp9] {
    grid-area: main;
    min-width: 0;
    overflow-y: auto;
    padding: var(--app-page-gutter);
    scrollbar-width: none;
}

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

/* A phone (768px and under, where Fluent's own layout turns mobile too): the sidebar is hidden and the page takes the
   whole width; the header's menu button opens the menu in a drawer instead. A media query rather than a render
   decision, so the first paint, before the app connects, already has the phone layout. */
@media (max-width: 768px) {
    .layout[b-v4epqdkgp9] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "main";
    }

    [b-v4epqdkgp9].layout > .nav-shell {
        display: none;
    }

    /* No room beside the page, so the open assistant takes its place; the header's assistant button brings the page
       back. */
    .layout.with-assistant[b-v4epqdkgp9] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "assistant";

        --assistant-panel-width: 100%;
    }

    .layout.with-assistant > .body-content[b-v4epqdkgp9] {
        display: none;
    }
}
/* /Components/Layout/Main/NavMenu.razor.rz.scp.css */
/*
 * Only what Fluent's parameters can't express. Width, padding, headers, dividers, labels and badges are set on the
 * components in NavMenu.razor.
 */

/* Anchors the drag edge to the menu. */
.nav-shell[b-ykgewcnb3z] {
    position: relative;
    display: flex;
    min-height: 0;
}

/* FluentBadge has no placement or reveal parameter. Shortcut badges appear where the pointer or keyboard focus is,
   so the resting menu stays quiet. They float over the row's end (FluentNavItem is already position: relative)
   rather than taking room, so a long label isn't pushed onto a second line and the badge's own text never wraps. */
[b-ykgewcnb3z] .nav-shortcut {
    position: absolute;
    top: 50%;
    right: var(--spacingHorizontalS);
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--durationFast) var(--curveEasyEase);
}

[b-ykgewcnb3z] .fluent-navitem:hover .nav-shortcut,
[b-ykgewcnb3z] .fluent-navitem:focus-visible .nav-shortcut {
    opacity: 1;
}

/* Fluent's regular icons are drawn with a thin outline and have no weight parameter; a half-pixel stroke in the same
   colour gives them a little more. Active icons are the filled set and need none. */
[b-ykgewcnb3z] .fluent-navitem:not(.active) svg {
    stroke: currentColor;
    stroke-width: calc(var(--strokeWidthThin) / 2);
    stroke-linejoin: round;
}

/* FluentNav has no icon-rail mode: collapsed, centre each icon in the narrow column. */
[b-ykgewcnb3z] .nav-collapsed .fluent-navitem {
    justify-content: center;
}

/* Fluent places the active item's marker by its static position, which the centring above moves onto the icon. Pin
   it to the start of the row instead, beside the icon. */
[b-ykgewcnb3z] .nav-collapsed .fluent-navitem.active::after {
    inset-inline-start: 0;
    margin-inline-start: 0;
}

/* The label stack takes the row's full width (FluentStack's default), which would otherwise squeeze the icon. */
[b-ykgewcnb3z] .fluent-navitem svg {
    flex-shrink: 0;
}

/* Keeps the toggle at the bottom of the menu while a long menu scrolls (Margin.TopAuto handles a short one). The
   item's own background is the nav's (FluentNav BackgroundColor), so it covers what scrolls under it. */
[b-ykgewcnb3z] .nav-toggle {
    position: sticky;
    bottom: 0;
}

/* Where the menu scrolls, the toggle covers part of the item under it. A hairline above it, like the dividers between
   groups, marks it as the menu's footer rather than one more item. FluentNavItem has no border parameter. */
[b-ykgewcnb3z] .nav-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* The draggable edge: a hairline that thickens into the brand colour while hovered or dragged. */
.nav-resizer[b-ykgewcnb3z] {
    position: absolute;
    top: 0;
    right: calc(var(--spacingHorizontalXS) * -1);
    bottom: 0;
    z-index: 1;
    width: var(--spacingHorizontalS);
    cursor: col-resize;
    touch-action: none;
}

.nav-resizer[b-ykgewcnb3z]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--strokeWidthThick);
    transform: translateX(-50%);
    background-color: transparent;
    transition: background-color var(--durationFast) var(--curveEasyEase);
}

.nav-resizer:hover[b-ykgewcnb3z]::after,
.nav-resizer:focus-visible[b-ykgewcnb3z]::after,
.nav-resizing .nav-resizer[b-ykgewcnb3z]::after {
    background-color: var(--colorBrandStroke1);
}

.nav-resizer:focus-visible[b-ykgewcnb3z] {
    outline: none;
}

.nav-resizing[b-ykgewcnb3z] {
    cursor: col-resize;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    [b-ykgewcnb3z] .nav-shortcut,
    .nav-resizer[b-ykgewcnb3z]::after {
        transition: none;
    }
}
/* /Components/Layout/Main/UserMenu.razor.rz.scp.css */
.user-name[b-jauhkt6tdt] {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .user-name[b-jauhkt6tdt] {
        display: none;
    }
}
/* /Components/Modules/AgentSetup/Components/Steps/AgentInfoAgentSetupStep.razor.rz.scp.css */
/* Country code and number are one phone: a narrow box and a wide one, on one baseline even if a label wraps. */
.phone[b-8qqnjjurvy] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--spacingHorizontalS);
    align-items: end;
}
/* /Components/Modules/AgentSetup/Components/Steps/PlanDetails.razor.rz.scp.css */
/* A module's or a feature's description is Markdown: a paragraph, sometimes a list, set tight for a tooltip. */
.tip[b-9692tzroiq]  p {
    margin: 0;
}

.tip[b-9692tzroiq]  ul {
    margin: var(--spacingVerticalXS) 0 0;
    padding-inline-start: var(--spacingHorizontalL);
}

.tip[b-9692tzroiq]  li {
    margin: var(--spacingVerticalXXS) 0;
}
/* /Components/Modules/AgentSetup/Components/Steps/UserInfoAgentSetupStep.razor.rz.scp.css */
/* Country code and number are one phone: a narrow box and a wide one, on one baseline even if a label wraps. */
.phone[b-ipjq4u9eo0] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--spacingHorizontalS);
    align-items: end;
}
/* /Components/Modules/Assistant/AssistantActionCard.razor.rz.scp.css */
/* The slip sits a layer above the panel. Its left edge carries where the change stands; no Fluent parameter draws a
   single edge. */
.action-slip[b-kcgjoon77j] {
    --slip-status: var(--colorNeutralStroke1);
    padding: var(--spacingVerticalM) var(--spacingHorizontalM) var(--spacingVerticalM) var(--spacingHorizontalL);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-left: var(--strokeWidthThickest) solid var(--slip-status);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--app-surface-raised);
}

.action-slip.waiting[b-kcgjoon77j] {
    --slip-status: var(--app-intent-warning-strong);
}

.action-slip.running[b-kcgjoon77j] {
    --slip-status: var(--app-intent-info-strong);
}

.action-slip.done[b-kcgjoon77j] {
    --slip-status: var(--app-intent-success-strong);
}

.action-slip.failed[b-kcgjoon77j] {
    --slip-status: var(--app-intent-danger-strong);
}

/* A form's two columns: what each value is, then the value. */
.action-fields[b-kcgjoon77j] {
    display: grid;
    grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
    column-gap: var(--spacingHorizontalL);
    row-gap: var(--spacingVerticalS);
    align-items: baseline;
    margin: 0;
}

.action-fields dt[b-kcgjoon77j] {
    margin: 0;
}

.action-fields dd[b-kcgjoon77j] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* A change that won't be made keeps its record of what was proposed, set back. */
.action-slip.void .action-fields dd[b-kcgjoon77j] {
    color: var(--colorNeutralForeground3);
}
/* /Components/Modules/Assistant/AssistantBlocksView.razor.rz.scp.css */
/* Wide tables scroll inside the panel rather than widening it. */
.assistant-table[b-0ndo4792rd] {
    max-width: 100%;
    overflow-x: auto;
}

.assistant-markdown[b-0ndo4792rd] {
    overflow-wrap: anywhere;
}

.assistant-markdown[b-0ndo4792rd]  p {
    margin: 0 0 var(--spacingVerticalS);
}

.assistant-markdown[b-0ndo4792rd]  table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.assistant-markdown[b-0ndo4792rd]  th,
.assistant-markdown[b-0ndo4792rd]  td {
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
    text-align: left;
}
/* /Components/Modules/Assistant/AssistantChart.razor.rz.scp.css */
.assistant-chart[b-p84jm08c7p] {
    width: 100%;
    height: 280px;
}
/* /Components/Modules/Assistant/AssistantFrame.razor.rz.scp.css */
.assistant-frame[b-01s2072ia5] {
    width: 100%;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusXLarge);
    background: transparent;
}
/* /Components/Modules/Assistant/AssistantMessageView.razor.rz.scp.css */
.assistant-message[b-vd154e15r5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalSNudge);
    max-width: 100%;
}

.assistant-text[b-vd154e15r5] {
    overflow-wrap: anywhere;
}

.assistant-text[b-vd154e15r5]  table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.assistant-text[b-vd154e15r5]  th,
.assistant-text[b-vd154e15r5]  td {
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
    text-align: left;
}

.assistant-text[b-vd154e15r5]  p {
    margin: 0 0 var(--spacingVerticalS);
}

/* Records the assistant links to, written as [label](customer:ID) and rendered by AssistantMarkdown. */
.assistant-text[b-vd154e15r5]  a.assistant-record-link {
    display: inline-block;
    padding: 0 var(--spacingHorizontalS);
    border-radius: var(--borderRadiusCircular);
    background-color: var(--app-surface-sunken);
    color: var(--colorBrandForegroundLink);
    text-decoration: none;
    white-space: nowrap;
}

.assistant-text[b-vd154e15r5]  a.assistant-record-link:hover {
    color: var(--colorBrandForegroundLinkHover);
    text-decoration: underline;
}

/* The queries behind an answer, for the user who asks how it was found. */
.query[b-vd154e15r5] {
    margin: 0;
    padding: var(--spacingVerticalS) var(--spacingHorizontalS);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--app-surface-sunken);
    font-family: var(--fontFamilyMonospace);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Modules/Assistant/AssistantPanel.razor.rz.scp.css */
.assistant-panel[b-y1dqu57tgj] {
    grid-area: assistant;
    width: var(--assistant-panel-width, 420px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM);
    padding: var(--spacingVerticalM) var(--spacingHorizontalM) var(--spacingVerticalS);
    background-color: var(--app-surface-canvas);
    border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* Takes the header's free width so a long chat title shortens instead of pushing the buttons out. */
[b-y1dqu57tgj] .panel-title {
    flex: 1;
    min-width: 0;
}

.history[b-y1dqu57tgj] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXXS);
}

.history-row[b-y1dqu57tgj] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
    border-radius: var(--borderRadiusMedium);
}

.history-row.current[b-y1dqu57tgj] {
    background-color: var(--colorSubtleBackgroundSelected);
}

/* Stretched, so a long title is held to the row's width and ends in an ellipsis. */
.history-open[b-y1dqu57tgj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacingVerticalXXS);
    padding: var(--spacingVerticalS) var(--spacingHorizontalS);
    border: none;
    border-radius: var(--borderRadiusMedium);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.history-open:hover:not(:disabled)[b-y1dqu57tgj],
.starter:hover:not(:disabled)[b-y1dqu57tgj] {
    background-color: var(--colorSubtleBackgroundHover);
}

.history-open:focus-visible[b-y1dqu57tgj],
.starter:focus-visible[b-y1dqu57tgj] {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: calc(var(--strokeWidthThick) * -1);
}

.messages[b-y1dqu57tgj] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXL);
    padding-right: var(--spacingHorizontalXS);
}

.starters[b-y1dqu57tgj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXS);
}

.starter[b-y1dqu57tgj] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacingHorizontalMNudge);
    padding: var(--spacingVerticalMNudge) var(--spacingHorizontalM);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.attachment[b-y1dqu57tgj] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--borderRadiusLarge);
}
/* /Components/Modules/Assistant/AssistantToggle.razor.rz.scp.css */
/* A phone's header has no room for the label (Header.razor.css); the icon and the button's title remain. */
@media (max-width: 768px) {
    .assistant-toggle-label[b-k7yaancuts] {
        display: none;
    }
}
/* /Components/Modules/Assistant/AssistantUserMessage.razor.rz.scp.css */
.user-message[b-txr1wvzvqp] {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacingVerticalXXS);
    max-width: 85%;
}

/* The answers run unboxed, the width of the panel; the user's words sit in a fill that follows the theme. */
.user-bubble[b-txr1wvzvqp] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalSNudge);
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    border-radius: var(--borderRadius2XLarge);
    background-color: var(--colorNeutralBackground1Selected);
}

.user-text[b-txr1wvzvqp] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.user-image[b-txr1wvzvqp] {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: var(--borderRadiusXLarge);
}

/* Kept in the layout and only faded in, so nothing below moves when it shows; it still takes the keyboard's focus. */
.user-actions[b-txr1wvzvqp] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalXXS);
    opacity: 0;
    transition: opacity var(--durationFaster) var(--curveDecelerateMid);
}

.user-message:hover .user-actions[b-txr1wvzvqp],
.user-message:focus-within .user-actions[b-txr1wvzvqp] {
    opacity: 1;
}

/* A touch screen has no hover to reveal them. */
@media (hover: none) {
    .user-actions[b-txr1wvzvqp] {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-actions[b-txr1wvzvqp] {
        transition: none;
    }
}

.when[b-txr1wvzvqp] {
    margin-right: var(--spacingHorizontalXS);
}
/* /Components/Modules/Authentication/Components/RobotActivationCode.razor.rz.scp.css */
.robot-code[b-clt5oegpok] {
    letter-spacing: .06em;
    overflow-wrap: anywhere;
}
/* /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: var(--spacingVerticalL) var(--spacingHorizontalXL);
    max-width: 560px;
    margin-bottom: var(--spacingVerticalXL);
}
/* /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: var(--spacingVerticalL) var(--spacingHorizontalXL);
    max-width: 560px;
    margin-bottom: var(--spacingVerticalXL);
}

.password-field-wide[b-brb16hio5w] {
    grid-column: 1 / -1;
}
/* /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: a method's state takes the panel's intent tokens, and the current section and
 * a required method the brand's own tint, with the darker brand text that clears 4.5:1 on it (the lighter one does
 * not). Fluent tunes each pair of text and fill for a light theme and a dark one.
 */
.page-title[b-bxxvwqj8ws] {
    max-width: 1400px;
    margin: 0 auto var(--spacingVerticalL);
    font-size: var(--fontSizeBase600);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase600);
}

/* 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] {
    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(--app-surface-raised);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    overflow: hidden;
}

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

.settings-nav[b-bxxvwqj8ws] {
    background: var(--app-surface-canvas);
    border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.avatar[b-bxxvwqj8ws] {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightBold);
    letter-spacing: .02em;
}

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

.sections[b-bxxvwqj8ws] {
    display: flex;
    flex-direction: column;
    padding: var(--spacingVerticalS) 0;
}

.section-link[b-bxxvwqj8ws] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalM);
    padding: var(--spacingVerticalMNudge) var(--spacingHorizontalL);
    border-left: var(--strokeWidthThick) solid transparent;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
    color: var(--colorNeutralForeground1);
    text-decoration: none;
}

.section-link:hover[b-bxxvwqj8ws] {
    background: var(--colorSubtleBackgroundHover);
}

.section-link:focus-visible[b-bxxvwqj8ws] {
    outline: var(--strokeWidthThin) solid var(--colorStrokeFocus2);
    outline-offset: calc(var(--strokeWidthThick) * -1);
}

.section-link.is-current[b-bxxvwqj8ws] {
    border-left-color: var(--colorBrandForeground2);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    font-weight: var(--fontWeightSemibold);
}

/* FluentIcon has no flex-shrink parameter; a long label must not squeeze the icon. */
.section-link[b-bxxvwqj8ws]  svg {
    flex: none;
}

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

.pane[b-bxxvwqj8ws] {
    padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalXXXL);
}

.pane-title[b-bxxvwqj8ws] {
    margin: 0 0 var(--spacingVerticalXS);
    font-size: var(--fontSizeBase500);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase500);
}

/* FluentText has no max-width parameter: the lead, the warning and the row notes keep to a reading measure. */
[b-bxxvwqj8ws] .measure {
    max-width: 68ch;
}

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

.facts[b-bxxvwqj8ws] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--spacingVerticalM) var(--spacingHorizontalXXL);
    margin: var(--spacingVerticalM) 0 var(--spacingVerticalL);
    padding-bottom: var(--spacingVerticalL);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

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

.fact dd[b-bxxvwqj8ws] {
    margin: 0;
    overflow-wrap: anywhere;
}

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

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

.row + .row[b-bxxvwqj8ws] {
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.row-icon[b-bxxvwqj8ws] {
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--app-intent-success-bg);
    color: var(--app-intent-success-fg);
}

.row.is-closed .row-icon[b-bxxvwqj8ws] {
    background: var(--app-intent-warning-bg);
    color: var(--app-intent-warning-fg);
}

.row.is-required .row-icon[b-bxxvwqj8ws] {
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
}

/* 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: var(--app-intent-neutral-bg);
    color: var(--app-intent-neutral-fg);
}

.row-title[b-bxxvwqj8ws] {
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase400);
}

.row-state[b-bxxvwqj8ws] {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalMNudge);
    border-radius: var(--borderRadiusCircular);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase200);
    white-space: nowrap;
}

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

.row-state.is-open[b-bxxvwqj8ws] {
    color: var(--app-intent-success-fg);
    background: var(--app-intent-success-bg);
}

.row-state.is-closed[b-bxxvwqj8ws] {
    color: var(--app-intent-warning-fg);
    background: var(--app-intent-warning-bg);
}

.row-state.is-required[b-bxxvwqj8ws] {
    color: var(--colorBrandForeground2);
    background: var(--colorBrandBackground2);
}

/* FluentText and FluentStack have no grid-placement parameter: the note and the actions run under the title. */
[b-bxxvwqj8ws] .row-note,
[b-bxxvwqj8ws] .row-actions {
    grid-column: 2 / -1;
}

.row-form[b-bxxvwqj8ws] {
    grid-column: 2 / -1;
    margin-top: var(--spacingVerticalM);
    padding: var(--spacingVerticalL) var(--spacingHorizontalXL) var(--spacingVerticalXS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--app-surface-canvas);
}

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

@media (max-width: 860px) {
    /* The section list on top at its own height; the section takes the rest of the cabinet's minimum height (two
       auto rows shared it, leaving an empty band under the list). */
    .settings[b-bxxvwqj8ws] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

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

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

    .section-link[b-bxxvwqj8ws] {
        border-left: none;
        border-bottom: var(--strokeWidthThick) solid transparent;
        white-space: nowrap;
    }

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

    .pane[b-bxxvwqj8ws] {
        padding: var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalXL);
    }
}
/* /Components/Modules/Billing/Components/BillingActivities.razor.rz.scp.css */
/* The labels of a changed field share one width so the values line up. FluentText has no width parameter. */
.billing-activities[b-6yntenmj60]  .field-label {
    width: 140px;
}
/* /Components/Modules/Billing/Components/BillingPaymentsTable.razor.rz.scp.css */
.num[b-ogjz4yyone] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Modules/Billing/Pages/BillingPage.razor.rz.scp.css */
/* Cap the line length on wide screens so the summary and the history 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%;
}

/* The uppercase micro-label marks a figure, a stat or a list as the secondary tier, below the plan name. FluentText
   has no text-transform or letter-spacing parameter. */
.billing-page[b-82t6ds56yq]  .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Stat band: equal inset cells that fill the available width and wrap as the card narrows. FluentGrid's items take
   fixed fractions of the row; these take as many columns as fit. */
.stat-grid[b-82t6ds56yq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--spacingHorizontalM);
}

/* The cells sit on the canvas inside the raised card, so they read as tiles pressed into it. */
.stat-cell[b-82t6ds56yq] {
    padding: var(--spacingVerticalMNudge) var(--spacingHorizontalL);
    border-radius: var(--borderRadiusMedium);
    background: var(--app-surface-canvas);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* One provider-stored card: its identity, the default badge and its actions. */
.card-row[b-82t6ds56yq] {
    padding: var(--spacingVerticalS) var(--spacingHorizontalMNudge);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
}

/* ── 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 with the panel's success, warning and danger intents, the same ones the state badge uses. */
.bill[b-82t6ds56yq] {
    --bill-accent: var(--app-intent-neutral-fg);
    --bill-edge: var(--app-intent-neutral-border);

    padding: var(--spacingVerticalXL) var(--spacingHorizontalXL);
    border-radius: var(--borderRadiusMedium);
    background: var(--app-surface-canvas);
    border: var(--strokeWidthThin) solid var(--bill-edge);
    /* The statement stripe: the state is legible from the edge of the card alone. */
    border-inline-start: var(--strokeWidthThicker) solid var(--bill-accent);
    /* Days, amounts and dates line up; the figures inside inherit it. */
    font-variant-numeric: tabular-nums;
}

.bill--paid[b-82t6ds56yq] {
    --bill-accent: var(--app-intent-success-fg);
    --bill-edge: var(--app-intent-success-border);
}

.bill--due[b-82t6ds56yq] {
    --bill-accent: var(--app-intent-warning-fg);
    --bill-edge: var(--app-intent-warning-border);
}

.bill--overdue[b-82t6ds56yq] {
    --bill-accent: var(--app-intent-danger-fg);
    --bill-edge: var(--app-intent-danger-border);
}

/* The explainer is a sentence or two; a full-width line of it is hard to read. FluentText has no max-width. */
.bill-note[b-82t6ds56yq] {
    max-width: 70ch;
}

/* ── 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-track[b-82t6ds56yq] {
    position: relative;
    block-size: 6px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralStroke2);
    /* Breathing room for the marker, which overhangs the track. */
    margin-block: var(--spacingVerticalXS);
}

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

/* Today: a diamond, so it is never mistaken for one of the two round period ends. Its border is the band's surface,
   cutting it out of the track. */
.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: calc(var(--spacingHorizontalSNudge) * -1);
    inline-size: 12px;
    block-size: 12px;
    border-radius: var(--borderRadiusSmall);
    background: var(--bill-accent);
    border: var(--strokeWidthThick) solid var(--app-surface-canvas);
    transform: rotate(45deg);
}

/* 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/Create/Components/CaseSubjectFields.razor.rz.scp.css */
/* A field with the button that fills it (create an asset, search policies) at its end: the field takes the rest of
   the row. */
.case-subject-field[b-hp4570w7ce] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Modules/CaseManagement/Create/Components/CreateComplaintCaseDialog.razor.rz.scp.css */
/* The asset picker takes the row beside its create button. A div, because FluentStack has no flex-grow parameter for
   its children. */
.asset-field[b-2xp6x9hukm] {
    flex: 1;
    min-width: 0;
}

/* A search button sits at the bottom of its row, level with the field beside it. FluentGridItem has no align-self
   parameter. */
.complaint-case-fields[b-2xp6x9hukm]  .search-action {
    align-self: flex-end;
}
/* /Components/Modules/CaseManagement/Detail/Components/CaseActivities.razor.rz.scp.css */
/* Each activity is indented to make room for the timeline at its left. SectionCard has no margin or width
   parameter. */
[b-xnprkcw8sb] .activity {
    margin-left: calc(var(--spacingHorizontalXXXL) * 2);
    position: relative;
    width: calc(100% - var(--spacingHorizontalXXXL) * 2);
}

/* The activity's marker sits on the timeline, left of its card. FluentButton has no position parameter. */
[b-xnprkcw8sb] .activity .icon-button {
    position: absolute;
    left: -48px;
    top: 0;
    z-index: 1;
}

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

[b-xnprkcw8sb] .activity:last-child .line {
    display: none;
}

[b-xnprkcw8sb] .activity-author {
    flex-direction: row-reverse;
}

/* The labels of a changed field share one width so the values line up. FluentText has no width parameter. */
[b-xnprkcw8sb] .field-label {
    width: 100px;
}

/* FluentStack has no border or radius parameter. */
[b-xnprkcw8sb] .rule-hit,
[b-xnprkcw8sb] .automation-box {
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
}

/* The automation box takes the rest of the row after its label. FluentStack has no flex-grow parameter. */
[b-xnprkcw8sb] .automation-box {
    flex: 1;
}
/* /Components/Modules/CaseManagement/Detail/Components/CaseHeaderCard.razor.rz.scp.css */
/* The rule names share one width so the scores line up. FluentText has no width parameter. */
.priority-rules[b-ui3viy80rq]  .priority-rule-label {
    min-width: 100px;
}
/* /Components/Modules/CaseManagement/Detail/Components/CaseNotes.razor.rz.scp.css */
.notes[b-rrmgx24sk0] {
    width: 100%;
    flex: 1;
}

/* Each note is indented to make room for the timeline at its left. SectionCard has no margin or width parameter. */
[b-rrmgx24sk0] .note {
    margin-left: calc(var(--spacingHorizontalXXXL) * 2);
    position: relative;
    width: calc(100% - var(--spacingHorizontalXXXL) * 2);
}

/* The note's marker sits on the timeline, left of its card. FluentButton has no position parameter. */
[b-rrmgx24sk0] .note .icon-button {
    position: absolute;
    left: -48px;
    top: 0;
    z-index: 1;
}

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

[b-rrmgx24sk0] .note:last-child .line {
    display: none;
}
/* /Components/Modules/CaseManagement/Detail/Components/CaseState.razor.rz.scp.css */
.case-state[b-firtjhbadc] {
    width: 100%;
}

/* Four equal columns, so the circles are evenly spaced whatever their labels' widths, with the divider in a narrow
   column of its own between success and fail. FluentGrid's twelve columns cannot hold four equal items beside it. */
.case-states[b-firtjhbadc] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto minmax(0, 1fr);
    column-gap: var(--spacingHorizontalS);
}

/* FluentDivider has no height parameter, and v5's vertical divider has an 84px minimum height, taller than the states:
   the row grew past them and left a gap under the labels. Reset, the line spans the states, as the header's does. */
.case-states[b-firtjhbadc]  .state-divider {
    min-height: 0;
}
/* /Components/Modules/CaseManagement/Detail/Components/SetCaseAssetDialog.razor.rz.scp.css */
/* The asset picker takes the row beside its create button. A div, because FluentStack has no flex-grow parameter for
   its children. */
.asset-field[b-g7fxha9t63] {
    flex: 1;
    min-width: 0;
}
/* /Components/Modules/Contacts/Components/CustomerContacts.razor.rz.scp.css */
/* Each contact is indented to make room for the timeline at its left. SectionCard has no margin or width
   parameter. */
[b-38udtyu7oj] .contact {
    margin-left: calc(var(--spacingHorizontalXXXL) * 2 + var(--spacingHorizontalXS));
    position: relative;
    width: calc(100% - var(--spacingHorizontalXXXL) * 2 - var(--spacingHorizontalXS));
}

/* The contact's marker (a Large, 40px circle) sits on the timeline, left of its card. FluentButton has no position
   parameter. */
[b-38udtyu7oj] .contact .icon-button {
    position: absolute;
    left: -48px;
    top: 0;
    z-index: 1;
}

/* Centred under the 40px marker. */
[b-38udtyu7oj] .contact .line {
    position: absolute;
    left: -29px;
    top: 0;
    width: var(--strokeWidthThick);
    background-color: var(--colorNeutralStroke2);
    height: calc(100% + 36px);
}

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

[b-38udtyu7oj] .contact .bottom-right {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

[b-38udtyu7oj] .contact-author {
    flex-direction: row-reverse;
}

/* The labels of a contact's fields share one width so the values line up. FluentText has no width parameter. */
[b-38udtyu7oj] .contact-field-label {
    width: 140px;
}
/* /Components/Modules/CoverageGroupSelection/CoverageGroupSelection.razor.rz.scp.css */
.coverage-group-selection[b-yi9x4vplzm] {
    width: 100%;
}

/* FluentCard has no border-colour, radius, transition or selected-state parameter; `position` anchors the status mark. */
[b-yi9x4vplzm] .coverage-group-card {
    border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadius3XLarge);
    transition: border-color var(--durationNormal) var(--curveEasyEase),
    box-shadow var(--durationNormal) var(--curveEasyEase),
    transform var(--durationNormal) var(--curveEasyEase);
    position: relative;
}

[b-yi9x4vplzm] .coverage-group-card:hover {
    border-color: var(--colorBrandStroke1);
    box-shadow: var(--shadow8);
    transform: translateY(-2px);
}

[b-yi9x4vplzm] .coverage-group-card--selected {
    border-color: var(--colorBrandStroke1);
    box-shadow: 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1);
    background-color: var(--colorBrandBackground2);
}

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

[b-yi9x4vplzm] .coverage-group-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2);
}

[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: var(--colorBrandBackground2Hover);
}

.coverage-group-preview[b-yi9x4vplzm] {
    height: 460px;
    overflow: auto;
}
/* /Components/Modules/CustomerManagement/Detail/Components/Tabs/CustomerConsentsTab.razor.rz.scp.css */
/* The history icon drops to the middle of the first text line. FluentIcon's Margin has no step this small. */
.consents[b-lf24rihb4j]  .consent-icon {
    margin-top: var(--spacingVerticalXXS);
}
/* /Components/Modules/CustomerManagement/Detail/Components/Vehicle/AddCustomerVehicleDialog.razor.rz.scp.css */
/* The brand search takes the row beside its type-code button. */
.brand-field[b-90h2qd8vwp] {
    width: 100%;
    flex: 1;
}
/* /Components/Modules/CustomerManagement/Detail/Components/Vehicle/EditCustomerVehicleDialog.razor.rz.scp.css */
/* The brand search takes the row beside its type-code button. */
.brand-field[b-cvm29fphv6] {
    width: 100%;
    flex: 1;
}
/* /Components/Modules/CustomerManagement/Detail/Components/Vehicle/ScanVehicleRegistrationQrDialog.razor.rz.scp.css */
.registration-camera[b-izmcii6e64] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--borderRadiusMedium);
    background: var(--app-surface-sunken);
}

.registration-camera video[b-izmcii6e64] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Where to hold the code: the decoder reads the whole frame, the square only guides the hand. */
.registration-camera[b-izmcii6e64]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: var(--strokeWidthThick) dashed var(--colorBrandStroke1);
    border-radius: var(--borderRadiusMedium);
    pointer-events: none;
}
/* /Components/Modules/CustomerManagement/Detail/Components/Vehicle/VehicleRegistrationQrButton.razor.rz.scp.css */
/* The hook for the script's listeners, sized to the button so a file held over it can be outlined. The menu opens
   in the top layer and the file input is hidden, so neither takes room here. */
.registration-qr[b-e94sukejz3] {
    display: inline-flex;
    border-radius: var(--borderRadiusMedium);
}

/* A file is held over the button: show that letting go will read it. */
.registration-qr.dropping[b-e94sukejz3] {
    outline: var(--strokeWidthThick) dashed var(--colorBrandStroke1);
    outline-offset: var(--strokeWidthThick);
}
/* /Components/Modules/Dashboard/Components/ChartCard.razor.rz.scp.css */
/* The figures share the row, as many per line as fit. */
.chart-summary[b-k8o1hqegfv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacingVerticalM) var(--spacingHorizontalM);
    width: 100%;
}

.chart-canvas[b-k8o1hqegfv] {
    width: 100%;
}
/* /Components/Modules/Dashboard/Components/SalesOpportunityFunnelChart.razor.rz.scp.css */
/* The chart script needs a sized element to draw into. */
.funnel-canvas[b-xocdeqotwi] {
    width: 100%;
    height: 380px;
}
/* /Components/Modules/Dashboard/DashboardPage.razor.rz.scp.css */
/* The header filters keep fixed widths so the row doesn't reflow as selections change. They are counted in the body
   text size (130, 160 and 180px at Fluent's 14px) so a date still fits when the panel's text size is larger. */
.filter-date[b-q5g2xb1gce] {
    width: calc(var(--fontSizeBase300) * 9.3);
}

.filter[b-q5g2xb1gce] {
    width: calc(var(--fontSizeBase300) * 11.5);
}

.filter-wide[b-q5g2xb1gce] {
    width: calc(var(--fontSizeBase300) * 13);
}
/* /Components/Modules/Home/Home.razor.rz.scp.css */
.wrapper[b-bbazrfpnza] {
    margin: var(--spacingVerticalXXXL) auto;
    max-width: 1200px;
    padding: 0 var(--spacingHorizontalXL);
}

@media (min-width: 768px) {
    .wrapper[b-bbazrfpnza] {
        padding: 0 calc(var(--spacingHorizontalXXXL) + var(--spacingHorizontalS));
    }
}

@media (min-width: 1024px) {
    .wrapper[b-bbazrfpnza] {
        padding: 0 calc(var(--spacingHorizontalXXXL) * 2);
    }
}

@media (min-width: 1200px) {
    .wrapper[b-bbazrfpnza] {
        padding: 0 calc(var(--spacingHorizontalXXXL) * 3);
    }
}

/* The free-trial note: one brand edge so it reads as the announcement's key fact. */
.trial[b-bbazrfpnza] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacingHorizontalM);
    max-width: 880px;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-inline-start: var(--strokeWidthThickest) solid var(--colorBrandStroke1);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--app-surface-raised);
}

/* 16:9 YouTube embed that keeps its ratio at any width. */
.video[b-bbazrfpnza] {
    width: 100%;
    max-width: 880px;
    aspect-ratio: 16 / 9;
    border-radius: var(--borderRadiusLarge);
    overflow: hidden;
    background-color: var(--app-surface-sunken);
}

.video iframe[b-bbazrfpnza] {
    width: 100%;
    height: 100%;
    border: 0;
}
/* /Components/Modules/InsuranceCompanyManagement/Components/AgentInsuranceCompanyConnectionForm.razor.rz.scp.css */
/* FluentIcon has no cursor parameter; the wrapper carries it and sizes to the icon. */
.field-hint[b-x7a7ki0460] {
    display: inline-flex;
    cursor: help;
}
/* /Components/Modules/MyAgent/Components/MyAgentErrorSummary.razor.rz.scp.css */
.error-summary[b-qru86p9jsf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXS);
    margin: 0;
    padding: 0;
    list-style: none;
}

.error-summary li[b-qru86p9jsf] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacingHorizontalS);
}
/* /Components/Modules/MyAgent/Components/MyAgentNav.razor.rz.scp.css */
/* The menu stays in view while a long section scrolls under it. */
.settings-nav[b-yfsiuwazyi] {
    position: sticky;
    top: 0;
}

/* Narrow screens: the menu sits above the settings and scrolls away with them. */
@media (max-width: 960px) {
    .settings-nav[b-yfsiuwazyi] {
        position: static;
    }
}
/* /Components/Modules/MyAgent/Components/MyAgentSaveBar.razor.rz.scp.css */
/*
 * Floats at the bottom of the scrolling area: a raised bar rather than a page footer, so it reads as the one
 * action of the whole page whichever tab is open.
 */
.savebar[b-wyfonky55i] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacingVerticalS) var(--spacingHorizontalM);
    margin-top: var(--app-section-gap);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    background-color: var(--app-surface-raised);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    box-shadow: var(--shadow8);
}

.savebar-status[b-wyfonky55i] {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--spacingHorizontalS);
    min-width: 0;
}

.savebar-status-dirty[b-wyfonky55i]::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--app-intent-warning-strong);
}
/* /Components/Modules/MyAgent/Components/SettingsSection.razor.rz.scp.css */
.settings-section-body[b-9bjyyqkj7v] {
    min-width: 0;
}

/* The section's cards (SectionCard) hold settings forms; the rules below lay those forms out. */
.settings-section-body[b-9bjyyqkj7v]  .section-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalL);
}

/* FluentDataGrid has no cell vertical-alignment parameter, and MultiLine lines its cells up at the top. A grid of
   settings (the masked fields) holds a control in every row, which left each row's name and switch above the middle
   of the picker next to them; centred and given room above and below, a row reads as one line. */
.settings-section-body[b-9bjyyqkj7v]  .fluent-data-grid td[multiline=true] {
    align-content: center;
    padding-block: var(--spacingVerticalS);
}

/* Fields: two columns where there is room, one on a phone. */
.settings-section-body[b-9bjyyqkj7v]  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacingVerticalL) var(--spacingHorizontalXL);
    align-items: start;
}

/* Fluent fields and stacks have no grid-placement parameter. */
.settings-section-body[b-9bjyyqkj7v]  .span-full {
    grid-column: 1 / -1;
}

/* FluentText has no wrap-anywhere parameter; an error or a preview can be one long link. */
.settings-section-body[b-9bjyyqkj7v]  .wrap-anywhere {
    overflow-wrap: anywhere;
}

/* Repeating items (campaign keys, automations, identity providers): each its own well. */
.settings-section-body[b-9bjyyqkj7v]  .item-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    background-color: var(--app-surface-canvas);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
}

.settings-section-body[b-9bjyyqkj7v]  .item-card-inactive {
    opacity: 0.6;
}

/* FluentTextInput has no flex-grow parameter: in a row with its buttons, the box takes the rest. */
.settings-section-body[b-9bjyyqkj7v]  .item-row-grow {
    flex: 1 1 auto;
    min-width: 0;
}

/* Choices shown side by side as large buttons (priority templates). */
.settings-section-body[b-9bjyyqkj7v]  .choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--spacingHorizontalS);
}

/* FluentButton has no height parameter. */
.settings-section-body[b-9bjyyqkj7v]  .choice-grid .choice {
    min-height: 80px;
}

.settings-section-body[b-9bjyyqkj7v]  .choice-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacingVerticalXS);
    text-align: center;
}

/* FluentBadge has no font parameter. */
.settings-section-body[b-9bjyyqkj7v]  .mono {
    font-family: var(--fontFamilyMonospace);
}

.settings-section-body[b-9bjyyqkj7v]  .parameter-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXS);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

.settings-section-body[b-9bjyyqkj7v]  .parameter-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

@media (max-width: 600px) {
    .settings-section-body[b-9bjyyqkj7v]  .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Modules/MyAgent/MyAgentPage.razor.rz.scp.css */
/* The header, the menu and the open section as one block as wide as the menu and the section together, centred on a
   screen wider than that rather than left against its edge. */
.agent-page[b-ob89q45n7a] {
    width: 100%;
    max-width: calc(18rem + var(--spacingHorizontalXXL) + 64rem);
    margin-inline: auto;
}

/* The menu on the left, the open section on the right; one column on a narrow screen, the menu on top. Both have
   fixed measures rather than shares of the screen: the menu fits its longest name on one line, and the section stops
   at a width a form reads well at — on a wide monitor its fields would otherwise run two thousand pixels long. */
.agent-layout[b-ob89q45n7a] {
    display: grid;
    grid-template-columns: 18rem minmax(0, 64rem);
    gap: var(--spacingHorizontalXXL);
    align-items: start;
}

/* The form itself is the right-hand column; EditForm draws the element, so the rule reaches it through ::deep. */
.agent-layout[b-ob89q45n7a]  .agent-panels {
    display: flex;
    flex-direction: column;
    gap: var(--app-stack-gap);
    min-width: 0;
}

/* Only there to switch every control off for read-only users; it draws nothing of its own. */
.agent-fieldset[b-ob89q45n7a] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.agent-panel[hidden][b-ob89q45n7a] {
    display: none;
}

@media (max-width: 960px) {
    .agent-layout[b-ob89q45n7a] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--app-stack-gap);
    }
}
/* /Components/Modules/MyAgent/Tabs/CaseAutomationsTab.razor.rz.scp.css */
/* Which cases an automation or an assignment rule covers: three filters side by side, stacked on a phone. */
.automation-grid[b-xsfhiwbfn8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacingVerticalL) var(--spacingHorizontalL);
    align-items: start;
}

/* The chosen priority template: what it favours and its rule table, read across the card. A table wider than the
   card scrolls on its own instead of pushing the page sideways. */
.template-rules[b-xsfhiwbfn8] {
    overflow-x: auto;
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    background-color: var(--app-surface-canvas);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
}

@media (max-width: 960px) {
    .automation-grid[b-xsfhiwbfn8] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Modules/MyAgent/Tabs/GeneralTab.razor.rz.scp.css */
/* Country code and number are one phone: a narrow box and a wide one on the same line. The narrow one is wide enough
   for its label on one line, and both boxes sit on the same baseline even if a label does wrap. */
.phone[b-pfpl170rm5] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--spacingHorizontalS);
    align-items: end;
}
/* /Components/Modules/MyAgent/Tabs/SignInPageTab.razor.rz.scp.css */
/* The swatch sits at the input's baseline, the text box takes the rest. */
.color-swatch[b-mkgyzbkwx9] {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--app-surface-raised);
    cursor: pointer;
}

.color-swatch:focus-visible[b-mkgyzbkwx9] {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: var(--strokeWidthThin);
}

/* FluentTextInput has no flex-grow parameter. */
[b-mkgyzbkwx9] .color-value {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Modules/Plugins/Components/PluginGeneralInfoTab.razor.rz.scp.css */
/* The values line up after one label width. FluentText has no min-width parameter. */
.plugin-info[b-swhw9iw21s]  .plugin-info-label {
    min-width: 160px;
}
/* /Components/Modules/Plugins/Components/PluginInvocationDialog.razor.rz.scp.css */
/* The trace and span ids line up after one label width. FluentText has no min-width parameter. */
.plugin-invocation[b-8p245jfrnx]  .trace-label {
    min-width: 80px;
}

/* A scrolling log in the monospace font. FluentStack has no max-height, overflow, radius, background or font
   parameter. */
.plugin-invocation[b-8p245jfrnx]  .plugin-console {
    max-height: 320px;
    overflow-y: auto;
    border-radius: var(--borderRadiusMedium);
    background: var(--app-surface-canvas);
    font-family: var(--fontFamilyMonospace);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
}

/* The time, level and message of a line share its baseline; long data wraps under them. */
.plugin-console-line[b-8p245jfrnx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacingHorizontalSNudge);
}

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

.plugin-console-data[b-8p245jfrnx] {
    width: 100%;
    margin: var(--spacingVerticalXXS) 0 0;
    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalSNudge);
    border-radius: var(--borderRadiusMedium);
    background: var(--app-surface-raised);
    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: var(--spacingVerticalS) var(--spacingHorizontalS);
    border-radius: var(--borderRadiusMedium);
    background: var(--app-surface-canvas);
    font-family: var(--fontFamilyMonospace);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Modules/Plugins/Components/PluginVersionsTab.razor.rz.scp.css */
/* A version's values line up after one label width. FluentText has no min-width parameter. */
[b-s3j59jja1x] .version-label {
    min-width: 130px;
}
/* /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: var(--spacingVerticalL) var(--spacingHorizontalL);
    width: 100%;
}

.plugin-card[b-mdkxsa5j28] {
    width: 100%;
    height: 100%;
    min-height: 210px;
    padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL);
    box-sizing: border-box;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    background: var(--app-surface-raised);
    cursor: pointer;
    transition: box-shadow var(--durationFast) var(--curveEasyEase),
    border-color var(--durationFast) var(--curveEasyEase),
    transform var(--durationFast) var(--curveEasyEase);
}

.plugin-card:hover[b-mdkxsa5j28] {
    border-color: var(--colorBrandStroke1);
    box-shadow: var(--shadow16);
    transform: translateY(-2px);
}

.plugin-card:focus-visible[b-mdkxsa5j28] {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: var(--strokeWidthThick);
}

/* A long slug breaks anywhere rather than widen the card. FluentText has no wrap-anywhere parameter. */
.plugin-card[b-mdkxsa5j28]  .plugin-card-title {
    overflow-wrap: anywhere;
}
/* /Components/Modules/PolicyManagement/Components/AddManualPolicyDialog.razor.rz.scp.css */
/* Fields prefilled from the claim redirect carry the brand stroke, so the user checks them before saving.
   `.prefilled` sits on the field wrapper; the input's own strokes come from these tokens. The inputs have no
   stroke-colour parameter, and no Appearance value (outline, underline, filled) marks a field this way. */
[b-3fmuxkrw4j] .prefilled fluent-text-input,
[b-3fmuxkrw4j] .prefilled fluent-dropdown {
    --colorNeutralStroke1: var(--colorBrandStroke1);
    --colorNeutralStroke1Hover: var(--colorBrandStroke1);
    --colorNeutralStrokeAccessible: var(--colorBrandStroke1);
}
/* /Components/Modules/PolicyManagement/Components/PolicyDetail/PolicyAssetPanel.razor.rz.scp.css */
/* A Turkish licence plate looks the same in either theme: black on white, with the blue country band. */
.plate[b-sdr9167dv0] {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: var(--strokeWidthThick) solid black; /* theming-allow: literal-color — a plate is black on white in either theme */
    border-radius: var(--borderRadiusMedium);
    background-color: white; /* theming-allow: literal-color — a plate is black on white in either theme */
    color: black; /* theming-allow: literal-color — a plate is black on white in either theme */
    font-family: var(--fontFamilyMonospace);
    font-weight: var(--fontWeightBold);
    font-size: var(--fontSizeBase500);
    line-height: var(--lineHeightBase500);
}

.plate-country[b-sdr9167dv0] {
    display: grid;
    place-items: end center;
    padding: var(--spacingVerticalNone) var(--spacingHorizontalXS) var(--spacingVerticalXS);
    background-color: #003da5; /* theming-allow: literal-color — the EU/TR country band blue is fixed by regulation */
    color: white; /* theming-allow: literal-color — the country code is always white on the band */
    font-size: var(--fontSizeBase100);
    line-height: var(--lineHeightBase100);
}

.plate-number[b-sdr9167dv0] {
    padding: var(--spacingVerticalXS) var(--spacingHorizontalM);
}

.asset-title[b-sdr9167dv0] {
    min-width: 0;
}
/* /Components/Modules/PolicyManagement/Components/PolicyDetail/PolicyDetailHeader.razor.rz.scp.css */
/* Back link, logo, title, actions; the coverage period on a row of its own under them. */
.policy-head[b-ww6df0fo5c] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacingVerticalL) var(--spacingHorizontalXL);
    margin-bottom: var(--spacingVerticalXL);
}

.policy-logo[b-ww6df0fo5c] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: var(--spacingVerticalXS) var(--spacingHorizontalXS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    background-color: var(--app-surface-raised);
    color: var(--colorNeutralForeground3);
    overflow: hidden;
}

/* A chip, not text: FluentText's Size200 brings a 16px line, the chip keeps the 20px one. */
.policy-number[b-ww6df0fo5c] {
    padding: var(--spacingVerticalNone) var(--spacingHorizontalS);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--app-surface-sunken);
    color: var(--colorNeutralForeground2);
    font-family: var(--fontFamilyMonospace);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase300);
}

.policy-actions[b-ww6df0fo5c] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacingHorizontalS);
}

.policy-period[b-ww6df0fo5c] {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .policy-head[b-ww6df0fo5c] {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .policy-actions[b-ww6df0fo5c] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
/* /Components/Modules/PolicyManagement/Components/PolicyDetail/PolicyInsuredCard.razor.rz.scp.css */
/* A plain block, not a FluentStack: the persona is inline, and its line box is part of the gap above the facts. */
.insured-person[b-oj0kiwcw0o] {
    margin-bottom: var(--spacingVerticalM);
}
/* /Components/Modules/PolicyManagement/Components/PolicyDetail/PolicyPeriodBar.razor.rz.scp.css */
.period[b-t7yrkhwbvg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacingVerticalXS) var(--spacingHorizontalM);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--app-surface-raised);
    font-variant-numeric: tabular-nums;
}

.period-track[b-t7yrkhwbvg] {
    position: relative;
    height: 8px;
    border-radius: var(--borderRadiusCircular);
    background-color: var(--colorNeutralBackground5);
}

.period-elapsed[b-t7yrkhwbvg] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--borderRadiusCircular);
    background-color: var(--colorBrandBackground);
}

.period-track-cancelled .period-elapsed[b-t7yrkhwbvg] {
    background-color: var(--colorNeutralForeground4);
}

.period-today[b-t7yrkhwbvg] {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border: var(--strokeWidthThicker) solid var(--colorBrandBackground);
    border-radius: 50%;
    background-color: var(--app-surface-raised);
}

.period-remaining[b-t7yrkhwbvg] {
    grid-column: 2;
}
/* /Components/Modules/PolicyManagement/Components/PolicyDetail/PolicyPremiumCard.razor.rz.scp.css */
.currency-switch[b-yewqqg71x0] {
    display: inline-flex;
    gap: var(--spacingHorizontalXXS);
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalXXS);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--app-surface-sunken);
}

.premium[b-yewqqg71x0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: var(--spacingVerticalMNudge) var(--spacingHorizontalM);
    font-variant-numeric: tabular-nums;
}

/* Holds the column's width when a row has no difference to show. */
.premium-delta[b-yewqqg71x0] {
    min-width: 6rem;
    text-align: right;
}

.premium-foot[b-yewqqg71x0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacingVerticalXS) var(--spacingHorizontalL);
    margin-top: var(--spacingVerticalM);
    padding-top: var(--spacingVerticalM);
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    font-variant-numeric: tabular-nums;
}
/* /Components/Modules/PolicyManagement/Components/PolicyDetail/PolicyVersionsPanel.razor.rz.scp.css */
/* A plain block, not FluentCheckbox's Margin: the checkbox field is inline-grid, and its line box is part of the gap. */
.versions-filter[b-prt2jpoioq] {
    margin-bottom: var(--spacingVerticalS);
}

.versions[b-prt2jpoioq] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.version[b-prt2jpoioq] {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacingHorizontalM);
    padding: var(--spacingVerticalMNudge) 0;
}

/* The line joining one version's dot to the next. */
.version:not(:last-child)[b-prt2jpoioq]::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: -10px;
    left: 9px;
    width: 2px;
    background-color: var(--colorNeutralStroke2);
}

.version-dot[b-prt2jpoioq] {
    width: 20px;
    height: 20px;
    border: var(--strokeWidthThick) solid var(--colorNeutralStroke1);
    border-radius: 50%;
    background-color: var(--app-surface-raised);
}

.version-selected .version-dot[b-prt2jpoioq] {
    border-color: var(--colorBrandBackground);
    background-color: var(--colorBrandBackground);
    box-shadow: inset 0 0 0 var(--strokeWidthThicker) var(--app-surface-raised);
}

.version-meta[b-prt2jpoioq] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Modules/PolicyManagement/Components/PolicyDocumentDialog.razor.rz.scp.css */
.document-embed[b-uoefrlcz3b] {
    height: 70vh;
}
/* /Components/Modules/PolicyManagement/Components/PolicyHealthInfoTab.razor.rz.scp.css */
.health-insureds[b-f37ah5xlma] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--spacingVerticalXL) var(--spacingHorizontalXXL);
}
/* /Components/Modules/PolicyManagement/Components/PolicyReceiptDocumentDialog.razor.rz.scp.css */
.document-embed[b-kqvdz2rdfd] {
    height: 70vh;
}
/* /Components/Modules/PolicyManagement/Pages/PolicyDetailPage.razor.rz.scp.css */
/* Two columns under the header: the policy's own facts on the left, the insured and the detail tabs on the right. */
.policy-body[b-4jghl182il] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--spacingHorizontalXL);
}

@media (max-width: 960px) {
    .policy-body[b-4jghl182il] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Modules/PolicyTransfers/Components/PolicyTransferDetail.razor.rz.scp.css */
.num[b-kv1kir7ikw] {
    font-variant-numeric: tabular-nums;
}

/* "A trigger is running": a steady dot, the polling keeps the numbers moving. */
.live[b-kv1kir7ikw] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
}

.live[b-kv1kir7ikw]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--borderRadiusCircular);
    background: var(--app-intent-success-strong);
}

/* Outcome: the one figure of the page, then where those policies ended up. Baseline alignment has no FluentStack
   parameter; tabular figures reach the text inside by inheritance. */
.outcome-total[b-kv1kir7ikw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacingHorizontalS);
    font-variant-numeric: tabular-nums;
}

.outcome-bar[b-kv1kir7ikw] {
    display: flex;
    height: 12px;
    gap: var(--spacingHorizontalXXS);
    overflow: hidden;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralBackground4);
}

/* Segments share the bar by their counts (inline flex-grow); a tiny count still shows as a sliver. */
.outcome-bar > span[b-kv1kir7ikw] {
    flex-basis: 0;
    min-width: 3px;
}

.outcome-succeeded[b-kv1kir7ikw] {
    background: var(--app-intent-success-strong);
}

.outcome-failed[b-kv1kir7ikw] {
    background: var(--app-intent-danger-strong);
}

.outcome-skipped[b-kv1kir7ikw] {
    background: var(--colorNeutralForeground4);
}

.outcome-legend[b-kv1kir7ikw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacingVerticalS) var(--spacingHorizontalXL);
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.outcome-legend li[b-kv1kir7ikw] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

.swatch[b-kv1kir7ikw] {
    width: 10px;
    height: 10px;
    border-radius: var(--borderRadiusSmall);
}
/* /Components/Modules/PolicyTransfers/Components/PolicyTransferTriggerDetailDialog.razor.rz.scp.css */
.num[b-4s5d9pg37w] {
    font-variant-numeric: tabular-nums;
}
/* Keeps the title's inherited line height, so the header stays as tall as before; FluentText would set its own. */
.trigger-duration[b-4s5d9pg37w] {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightRegular);
}

/* A plain h3: FluentText As="H3" keeps the heading's own reboot margin under the text. */
.section-title[b-4s5d9pg37w] {
    margin: var(--spacingVerticalXL) 0 var(--spacingVerticalS);
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
}

/* Where the run's policies ended up, as three figures; tabular figures reach the text inside by inheritance. */
.mini-stats[b-4s5d9pg37w] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacingHorizontalS);
    font-variant-numeric: tabular-nums;
}

.mini-stats > div[b-4s5d9pg37w] {
    display: flex;
    flex-direction: column;
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background: var(--app-surface-canvas);
}

/* Duration breakdown: each phase's share of the run. */
.phase[b-4s5d9pg37w] {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) 5rem;
    align-items: center;
    gap: var(--spacingHorizontalM);
    font-variant-numeric: tabular-nums;
}

.phase-track[b-4s5d9pg37w] {
    height: 10px;
    overflow: hidden;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralBackground4);
}

.phase-fill[b-4s5d9pg37w] {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorBrandBackground);
}

@media (max-width: 600px) {
    .phase[b-4s5d9pg37w] {
        grid-template-columns: 7rem minmax(0, 1fr) 4rem;
    }
}
/* /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: var(--spacingVerticalL);
    column-gap: var(--spacingHorizontalXXL);
}

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

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

/* A narrow page area (a phone, a portrait tablet) has no room for the summary cards beside the form: the title, the
   form and the cards come one under the other, and the page scrolls as a whole. */
.create-proposal-form-stacked[b-kea4hc7hrr] {
    grid-template-areas:
        "title"
        "form"
        "boxes";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

.create-proposal-form-stacked > .form[b-kea4hc7hrr],
.create-proposal-form-stacked > .boxes[b-kea4hc7hrr] {
    overflow-y: visible;
}
/* /Components/Modules/Proposals/Create/Components/CustomerPart/CustomerProposalFormPart.razor.rz.scp.css */
.customer-option[b-7b1hcy22ii] {
    max-width: 400px;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/CompareProposalProductsDialog.razor.rz.scp.css */
/* FluentText has no wrap-anywhere parameter: a long product name wraps inside its column instead of widening it. */
[b-am4fb69dci] .product-heading > .product-name {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* FluentDataGrid has no cell alignment parameter, and v5 pins multi-line cells to the top: a coverage's values centre
   on their row, level with its remove button. Multi-line rows are as tall as their text, RowSize does not reach
   them, and the cells carry no vertical padding: without this the rows sit flush against each other. */
[b-am4fb69dci] tbody td[multiline=true] {
    align-content: center;
    padding-block: var(--spacingVerticalS);
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/CustomerProposalDocumentDialog.razor.rz.scp.css */
.customer-document-dialog[b-950rdvs31f] {
    width: 100%;
    padding: var(--spacingVerticalL) var(--spacingHorizontalL);
    box-sizing: border-box;
}

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

    .products-table th[b-950rdvs31f],
    .products-table td[b-950rdvs31f] {
        padding: var(--spacingVerticalSNudge) var(--spacingHorizontalS);
    }
}

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

.products-table[b-950rdvs31f] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

.products-table th[b-950rdvs31f],
.products-table td[b-950rdvs31f] {
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    text-align: left;
    vertical-align: middle;
}

.products-table thead th[b-950rdvs31f] {
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    white-space: nowrap;
}

.products-table tbody tr[b-950rdvs31f] {
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    cursor: pointer;
}

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

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

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

.col-channel[b-950rdvs31f],
.col-price[b-950rdvs31f] {
    white-space: nowrap;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/ProposalB2CLinkDialog.razor.rz.scp.css */
/* The link takes the row beside its copy button and wraps anywhere; FluentText has no parameter for either. */
.link-text[b-ouofwdumrc] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/ProposalDetailProductsFilterDialog.razor.rz.scp.css */
/* A heading over its options, one per line; the drawer scrolls as a whole, so no list gets a scroll box of its own. */
.filter-group[b-d88koaeqxl] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalS);
}

/* Logo, name, count: the name takes the line and ends in an ellipsis, the count sits after it. */
.filter-option[b-d88koaeqxl] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    min-width: 0;
}
/* /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/ProposalProductInformationFormDocumentDialog.razor.rz.scp.css */
.document-embed[b-woqf8truz5] {
    height: 70vh;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/ProposalProductPdfDialog.razor.rz.scp.css */
.document-embed[b-vnzqf5mkos] {
    height: 70vh;
}
/* /Components/Modules/Proposals/Detail/Components/Dialogs/PurchaseProposalProductDialog.razor.rz.scp.css */
/* The insurer's logo, the product, then the gross premium at the line's end; the price drops under the product on a
   narrow dialog. */
.purchase-product[b-zd47mocmgb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacingVerticalM) var(--spacingHorizontalL);
    padding: var(--spacingVerticalL) var(--spacingHorizontalL);
}

/* FluentStack has no flex parameter: the product takes the line's free space and gives way before the price. */
.purchase-product[b-zd47mocmgb]  .purchase-name {
    flex: 1 1 12.5rem;
    min-width: 0;
}

.purchase-gross[b-zd47mocmgb] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
}

/* The premium's parts beside the installment that sets them, on a sunken band under the product. */
.purchase-terms[b-zd47mocmgb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacingVerticalM) var(--spacingHorizontalXXL);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    background-color: var(--app-surface-sunken);
}

.purchase-parts[b-zd47mocmgb] {
    display: flex;
    gap: var(--spacingHorizontalXXL);
    margin: 0;
}

.purchase-parts dd[b-zd47mocmgb] {
    margin: 0;
    font-weight: var(--fontWeightSemibold);
}

/* Figures of one width, so the amounts read digit for digit; FluentText has no numeric-variant parameter. */
.amount[b-zd47mocmgb],
.purchase-gross[b-zd47mocmgb]  .amount {
    font-variant-numeric: tabular-nums;
}

/* A payment method the insurance company disabled for this branch: still a clickable tab, but visibly locked. */
[b-zd47mocmgb] .payment-option-tab--disabled {
    opacity: 0.55;
}
/* /Components/Modules/Proposals/Detail/Components/Products/ProposalCompareBar.razor.rz.scp.css */
/* Sticks to the bottom of the scrolling pane, over the products under it: the picks wrap in the space the buttons
   leave at the end. */
.compare-bar[b-l0thoxh2wm] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalM);
    margin-top: var(--spacingVerticalM);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusXLarge);
    background-color: var(--app-surface-raised);
    box-shadow: var(--shadow16);
}

.compare-picks[b-l0thoxh2wm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacingVerticalS) var(--spacingHorizontalS);
}

/* The name gives way to the price, which stays whole. */
.compare-chip[b-l0thoxh2wm]  .compare-price {
    flex: none;
}

.compare-chip[b-l0thoxh2wm] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    max-width: 20rem;
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalXXS) var(--spacingVerticalXXS) var(--spacingHorizontalS);
    border: var(--strokeWidthThin) solid var(--colorBrandStroke2);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--colorBrandBackground2);
}
/* /Components/Modules/Proposals/Detail/Components/Products/ProposalDetailFailedProductItem.razor.rz.scp.css */
/* Logo, the product over its reason, the actions; an opened reason spans the row under the product's column. */
.failed-product[b-f77hzgdlxe] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacingVerticalS) var(--spacingHorizontalL);
    padding: var(--spacingVerticalS) var(--spacingHorizontalL);
}

.failed-info[b-f77hzgdlxe] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXXS);
}

/* FluentText has no flex parameter: a long name shrinks to its ellipsis rather than pushing its type badge off. */
.failed-info[b-f77hzgdlxe]  .failed-name {
    min-width: 0;
}

/* The whole reason, as the insurer wrote it: wrapped, selectable, and scrolling past 15 lines' worth. */
.failed-error[b-f77hzgdlxe] {
    grid-column: 2 / -1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacingHorizontalS);
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--app-surface-sunken);
}

.failed-error-text[b-f77hzgdlxe] {
    flex: 1;
    min-width: 0;
    max-height: 18rem;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--colorNeutralForeground2);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    user-select: text;
}
/* /Components/Modules/Proposals/Detail/Components/Products/ProposalDetailProductItem.razor.rz.scp.css */
/* Logo, product with its price under its name, then the actions; on a narrow pane the actions wrap under the product. */
.product[b-1i4ukqe5ga] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacingVerticalM) var(--spacingHorizontalL);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.picked[b-1i4ukqe5ga] {
    background-color: var(--colorBrandBackground2);
}

/* Gives way down to 10rem, the name ending in an ellipsis, before the actions wrap under it. */
.product-info[b-1i4ukqe5ga] {
    flex: 1 1 10rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXS);
}

/* FluentText has no flex parameter: a long name shrinks to its ellipsis rather than pushing its type badge off. */
.product-info[b-1i4ukqe5ga]  .product-name {
    min-width: 0;
}

/* FluentText has no numeric-variant parameter: figures of one width, so the prices align digit for digit. */
.product-info[b-1i4ukqe5ga]  .price {
    font-variant-numeric: tabular-nums;
}

/* The purchase over the documents, at the row's end, one width on every row so the products' column keeps its edge;
   9.25rem holds "Satın alınıyor" with its spinner, the widest purchase state. */
.product-actions[b-1i4ukqe5ga] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacingVerticalS);
    width: 9.25rem;
}

/* The menus are popovers; out of the row's flex layout, where an in-flow menu still takes a gap. */
.product-menus[b-1i4ukqe5ga] {
    position: absolute;
}
/* /Components/Modules/Proposals/Detail/Components/Products/ProposalDetailProducts.razor.rz.scp.css */
/* At least the pane's height, so the compare bar after the card sits at the pane's bottom even under few products. */
.products-pane[b-j62d5qww1m] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.products-head[b-j62d5qww1m] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM);
    padding: var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalM);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* How the insurers answered, one segment per product: priced, waiting, failed. */
.product-states[b-j62d5qww1m] {
    display: flex;
    gap: var(--spacingHorizontalXXS);
    height: 0.5rem;
}

.product-state[b-j62d5qww1m] {
    flex: 1;
    border-radius: var(--borderRadiusSmall);
}

.group-head[b-j62d5qww1m] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    padding: var(--spacingVerticalM) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalL);
}

.group-mark[b-j62d5qww1m] {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--borderRadiusSmall);
}

/* A coverage group's heading inside a state's group: quieter than the state's, on a sunken band so its rows read as
   one set. */
.coverage-head[b-j62d5qww1m] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
    padding: var(--spacingVerticalXS) var(--spacingHorizontalL);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    background-color: var(--app-surface-sunken);
}

.priced[b-j62d5qww1m] {
    background-color: var(--app-intent-success-strong);
}

/* Not yet answered: the brand's tint, outlined so it still reads on a light surface. */
.waiting[b-j62d5qww1m] {
    border: var(--strokeWidthThin) solid var(--colorBrandStroke1);
    background-color: var(--colorBrandBackground2);
}

/* No price is the insurer's answer, not an alarm: grey, not red. */
.failed[b-j62d5qww1m] {
    background-color: var(--colorNeutralStroke1);
}

.failed-list[b-j62d5qww1m] {
    padding-bottom: var(--spacingVerticalS);
}
/* /Components/Modules/Proposals/Detail/Components/ProposalDetailHeader.razor.rz.scp.css */
/* Back link, branch icon, title, actions: the policy detail header's layout, with the facts on a row of their own
   under the title and the actions. */
.proposal-head[b-1vlz279hnq] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacingVerticalS) var(--spacingHorizontalXL);
}

.proposal-facts[b-1vlz279hnq] {
    grid-column: 3 / -1;
}

.proposal-icon[b-1vlz279hnq] {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--borderRadiusXLarge);
    background-color: var(--colorBrandBackground2);
}

/* A labelled fact beside the state: the plate, the policy period. */
.proposal-chip[b-1vlz279hnq] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--app-surface-raised);
    color: var(--colorNeutralForeground2);
    font-variant-numeric: tabular-nums;
}

.proposal-plate[b-1vlz279hnq] {
    color: var(--colorNeutralForeground1);
    font-weight: var(--fontWeightSemibold);
}

/* The id is for copying and quoting to support, so it is quieter than the facts beside it. */
.proposal-id[b-1vlz279hnq] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalXXS);
    padding-left: var(--spacingHorizontalS);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--app-surface-sunken);
    color: var(--colorNeutralForeground2);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    font-variant-numeric: tabular-nums;
}

.proposal-actions[b-1vlz279hnq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacingHorizontalS);
}

/* A page area too narrow for the title beside the actions: the actions get a row of their own under the facts. */
@container (max-width: 62.5rem) {
    .proposal-head[b-1vlz279hnq] {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .proposal-facts[b-1vlz279hnq] {
        grid-row: 2;
    }

    .proposal-actions[b-1vlz279hnq] {
        grid-row: 3;
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
/* /Components/Modules/Proposals/Detail/Components/ProposalDetailLayout.razor.rz.scp.css */
/* The page area under the app header, as a column: the proposal's header, then the splitter in the height left. A
   size container, so the header lays itself out by the page area's width, the side menu open or not. */
.proposal-detail[b-clswhkemfu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXL);
    height: calc(100dvh - var(--header-height) - 2 * var(--app-page-gutter));
    container-type: inline-size;
}

/* Stacked products and details: the page scrolls as a whole, not each pane in a held height. */
.proposal-detail-stacked[b-clswhkemfu] {
    height: auto;
}
/* /Components/Modules/Templates/Components/CreateTemplateDialog.razor.rz.scp.css */
/* The info icon reads as help, not as a button. FluentIcon has no cursor parameter. */
.content-label[b-zd8z1i1xxj]  .liquid-info {
    cursor: help;
}

/* The example reads at body size inside the smaller tooltip text, keeping the tooltip's line height (FluentText
   Size300 would also raise the line height). */
.liquid-example[b-zd8z1i1xxj] {
    font-size: var(--fontSizeBase300);
}
/* /Components/Modules/Templates/Components/UpdateTemplateDialog.razor.rz.scp.css */
/* The info icon reads as help, not as a button. FluentIcon has no cursor parameter. */
.content-label[b-m7megzclbg]  .liquid-info {
    cursor: help;
}

/* The example reads at body size inside the smaller tooltip text, keeping the tooltip's line height (FluentText
   Size300 would also raise the line height). */
.liquid-example[b-m7megzclbg] {
    font-size: var(--fontSizeBase300);
}

/* The record stamp sits on a sunken fill. FluentCard's Appearance has no Background3 fill (Filled is Background2). */
.audit[b-m7megzclbg]  .audit-card {
    background-color: var(--app-surface-sunken);
}
/* /Components/Modules/Testing/TestExceptionPage.razor.rz.scp.css */
.exception-type[b-h5gxrj92n5] {
    max-width: 300px;
}
/* /Components/Modules/Users/Components/MyAgenciesList.razor.rz.scp.css */
/*
 * Memberships as rows in the profile's settings pane. Every tone is a Fluent token, so they hold up on a light
 * theme and a dark one alike.
 *
 * Each agency leads with its own mark (AgencyLogo); only the agency being acted for tints it with the brand.
 */
.row[b-esakyikzob] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    column-gap: var(--spacingHorizontalM);
    row-gap: var(--spacingVerticalXS);
    padding: var(--spacingVerticalL) 0;
}

.row + .row[b-esakyikzob] {
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* ::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: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
}

.row-title[b-esakyikzob] {
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase300);
    overflow-wrap: anywhere;
}

.row-badge[b-esakyikzob] {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalMNudge);
    border-radius: var(--borderRadiusCircular);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase200);
    white-space: nowrap;
}

/* FluentStack has no grid-placement parameter: the actions run under the name. */
.row[b-esakyikzob]  .row-actions {
    grid-column: 2 / -1;
}

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

.empty-icon[b-esakyikzob] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacingVerticalXS);
    border-radius: 50%;
    background: var(--colorNeutralBackground4);
    color: var(--colorNeutralForeground3);
}
/* /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.
 */
.row[b-8myqpj8fq8] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    column-gap: var(--spacingHorizontalM);
    row-gap: var(--spacingVerticalSNudge);
    padding: var(--spacingVerticalL) 0;
}

.row + .row[b-8myqpj8fq8] {
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/*
 * ::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: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase300);
    overflow-wrap: anywhere;
}

/* FluentText and FluentStack have no grid-placement parameter: the date sits at the end of the name's line, the
   roles and the actions run under it. */
.row[b-8myqpj8fq8]  .row-date {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
}

.row[b-8myqpj8fq8]  .row-roles,
.row[b-8myqpj8fq8]  .row-actions {
    grid-column: 2 / -1;
}

.role[b-8myqpj8fq8] {
    padding: var(--spacingVerticalXXS) var(--spacingHorizontalS);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusCircular);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    color: var(--colorNeutralForeground3);
}

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

.empty-icon[b-8myqpj8fq8] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacingVerticalXS);
    border-radius: 50%;
    background: var(--colorNeutralBackground4);
    color: var(--colorNeutralForeground3);
}
/* /Components/Modules/Users/Pages/Switch.razor.rz.scp.css */
/*
 * The agency chooser. The frame and the plates are AuthScreen's and AuthPlate's; what is left here is the account
 * it is being chosen for.
 */

/* The account sits apart from the question by a rule: it is not part of what is being asked. */
.whoami[b-f2uacb19hx] {
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    overflow-wrap: anywhere;
}
/* /Components/Modules/Webhooks/Components/WebhookEventSelect.razor.rz.scp.css */
/* The info icon reads as help, not as a button. FluentIcon has no cursor parameter. */
.webhook-events[b-qgypw9vqo9]  .event-info {
    cursor: help;
}
/* /Components/ReconnectModal.razor.rz.scp.css */
/* ---- which block shows: Blazor's state classes on the dialog ---------- */

.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;
}

/* Blazor keeps "show" on the dialog when it adds "retrying", which showed both blocks, each with its title; once the
   retries start, the first attempt's block steps aside. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-hpchcb9mvi] {
    display: none;
}

/* ---- the dialog ------------------------------------------------------- */

/*
 * A plain card high on the page: a title, one or two sentences, and — once there is something to do — the buttons
 * for it. Left-aligned like every other dialog in the panel, so it reads as part of the panel rather than as the
 * browser complaining.
 */
#components-reconnect-modal[b-hpchcb9mvi] {
    position: relative;
    width: min(26rem, calc(100vw - var(--spacingHorizontalXXL) * 2));
    /* theming-allow: margin — places the dialog in the viewport, it is not a spacing step */
    margin: 18vh auto auto;
    padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL);
    overflow: hidden;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    background-color: var(--app-surface-raised);
    color: var(--colorNeutralForeground1);
    box-shadow: var(--shadow28);
    opacity: 0;
    transition: display var(--durationUltraSlow) allow-discrete, overlay var(--durationUltraSlow) allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-hpchcb9mvi var(--durationUltraSlow) both;

    /* Held back a moment: a blip the connection recovers from on its own should not flash a dialog. */
    &[open] {
        animation: components-reconnect-modal-slideUp-b-hpchcb9mvi var(--durationSlower) var(--curveDecelerateMid) var(--durationSlow),
        components-reconnect-modal-fadeInOpacity-b-hpchcb9mvi var(--durationSlower) var(--curveEasyEase) var(--durationSlow);
        animation-fill-mode: both;
    }
}

/* Opening a modal focuses the dialog itself; the ring belongs on the buttons inside it, which keep theirs. */
#components-reconnect-modal:focus[b-hpchcb9mvi],
#components-reconnect-modal:focus-visible[b-hpchcb9mvi] {
    outline: none;
}

#components-reconnect-modal[b-hpchcb9mvi]::backdrop {
    background-color: var(--colorBackgroundOverlay);
    animation: components-reconnect-modal-fadeInOpacity-b-hpchcb9mvi var(--durationUltraSlow) var(--curveEasyEase) var(--durationSlow) both;
}

@keyframes components-reconnect-modal-slideUp-b-hpchcb9mvi {
    from {
        transform: translateY(8px);
    }

    to {
        transform: none;
    }
}

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

    to {
        opacity: 1;
    }
}

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

    to {
        opacity: 0;
    }
}

/* ---- still trying ----------------------------------------------------- */

/* A line along the top edge for as long as there is a connection attempt in flight. */
.components-rejoining-animation[b-hpchcb9mvi] {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--strokeWidthThicker);
    overflow: hidden;
}

.components-rejoining-animation[b-hpchcb9mvi]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    background: var(--colorBrandForeground1);
    animation: components-rejoining-sweep-b-hpchcb9mvi calc(var(--durationUltraSlow) * 2.2) var(--curveEasyEase) infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-hpchcb9mvi],
    #components-reconnect-modal[open][b-hpchcb9mvi],
    #components-reconnect-modal[b-hpchcb9mvi]::backdrop {
        animation-duration: 1ms;
    }

    /* The line still has to say "working", so it stays — it just stops travelling. */
    .components-rejoining-animation[b-hpchcb9mvi]::after {
        width: 100%;
        opacity: .55;
        animation: none;
    }
}