as the flex container so CSS isolation actually applies — a
* MudStack swallows the scoped [b-xxxx] attribute and silently no-ops. */
.ColourCell[b-fgjqwxs0mb] {
display: flex;
align-items: center;
gap: 12px;
}
/* Small clickable colour swatch — previews the row's BrandColourHex. */
.DistributorColourSwatch[b-fgjqwxs0mb] {
width: 28px;
height: 28px;
border-radius: 4px;
border: 1px solid var(--mud-palette-lines-default);
flex: 0 0 28px;
}
/* Wrapping
for the MudColorPicker. Scoped isolation lands on this
* div; ::deep reaches into the Mud internals to force the input/control
* elements to fill the wrapper rather than auto-sizing to content. */
.DistributorColourPicker[b-fgjqwxs0mb] {
width: 160px;
flex: 0 0 160px;
}
.DistributorColourPicker[b-fgjqwxs0mb] .mud-picker,
.DistributorColourPicker[b-fgjqwxs0mb] .mud-input-control,
.DistributorColourPicker[b-fgjqwxs0mb] .mud-input,
.DistributorColourPicker[b-fgjqwxs0mb] .mud-input-slot,
.DistributorColourPicker[b-fgjqwxs0mb] input {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Inline DisplayName edit — same constrained width as the colour picker
* so the grid columns visually align. */
.DisplayNameField[b-fgjqwxs0mb] {
width: 240px;
}
/* /Pages/Catalogue/CatalogueListingListPage.razor.rz.scp.css */
.PaperWrapper[b-apdj8eh7hy] {
display: flex;
width: max-content;
}
.PaperWrapper[b-apdj8eh7hy] .Selector .mud-input-control-input-container {
min-width: 180px;
max-width: 200px;
}
/* /Pages/Catalogue/CatalogueOwnedBuyChoiceDialog.razor.rz.scp.css */
.ChoiceRow[b-7q2zcef94m] {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.ChoiceCard[b-7q2zcef94m] {
flex: 1 1 220px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 20px 16px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.ChoiceCard:hover[b-7q2zcef94m],
.ChoiceCard:focus-visible[b-7q2zcef94m] {
border-color: var(--mud-palette-primary);
background-color: var(--mud-palette-primary-hover);
outline: none;
}
/* /Pages/CoachMarks/CoachTagHandOffDialog.razor.rz.scp.css */
/* The hand-off task, shown exactly as it will be pasted: monospace, line breaks kept, long
selector lines wrapped rather than scrolled so nothing is hidden off the edge of the dialog. */
.coachmark-handoff-text[b-kckvjg6qy8] {
margin: 0;
max-height: 60vh;
overflow: auto;
font-family: Consolas, "Courier New", monospace;
font-size: 0.8rem;
line-height: 1.4;
white-space: pre-wrap;
overflow-wrap: anywhere;
user-select: text;
}
/* /Pages/CoachMarks/CoachTourEdit.razor.rz.scp.css */
/* CSS Isolation - the coach-mark editor.
Only the anchor picker lives here: a miniature screen with the twelve places a viewport-anchored
bubble can sit. Everything else on the page is stock MudBlazor. */
/* The miniature screen. 16:10 rather than square so it reads as a browser window at a glance - the
whole point is that an author recognises what they are looking at without a label. */
.coachmark-grid[b-t61wt45yb7] {
position: relative;
width: 240px;
height: 150px;
box-sizing: border-box;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
background: var(--mud-palette-background-grey);
}
/* The element-mode variant. Same twelve spots, but arranged around a target in the middle rather
than inside the edges of a screen — because that is what the choice means here: which side of the
element the bubble sits on. */
.coachmark-grid-element[b-t61wt45yb7] {
background: var(--mud-palette-surface);
}
.coachmark-grid-target[b-t61wt45yb7] {
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 22px;
margin: -11px 0 0 -32px;
border: 1px dashed var(--mud-palette-text-secondary);
border-radius: 3px;
background: var(--mud-palette-background-grey);
}
/* One of the twelve spots: a small bubble with a triangle showing which way it points. The triangle
is the reason there are twelve and not nine - "top, right end" and "right, top end" sit in the
same corner and are told apart only by which way they aim. Showing that is the job of this
control, so the beak is drawn rather than described. */
.coachmark-spot[b-t61wt45yb7] {
position: absolute;
width: 26px;
height: 16px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.coachmark-spot-body[b-t61wt45yb7] {
position: absolute;
inset: 0;
border: 1px solid var(--mud-palette-text-secondary);
border-radius: 2px;
background: var(--mud-palette-surface);
transition: background 90ms linear, border-color 90ms linear;
}
.coachmark-spot-beak[b-t61wt45yb7] {
position: absolute;
border: 4px solid transparent;
}
.coachmark-spot:hover .coachmark-spot-body[b-t61wt45yb7] {
border-color: #1668b8;
background: rgba(22, 104, 184, 0.18);
}
.coachmark-spot:focus-visible[b-t61wt45yb7] {
outline: 2px solid #1668b8;
outline-offset: 2px;
border-radius: 3px;
}
.coachmark-spot[aria-pressed="true"] .coachmark-spot-body[b-t61wt45yb7] {
border-color: #1668b8;
background: #1668b8;
}
/* Beak geometry, one rule per side. It hangs off the edge of the little bubble and points outward,
the same way the real one does. */
.coachmark-spot-top-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-top-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-top-end .coachmark-spot-beak[b-t61wt45yb7] {
bottom: 100%;
left: 6px;
border-bottom-color: var(--mud-palette-text-secondary);
}
.coachmark-spot-bottom-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-bottom-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-bottom-end .coachmark-spot-beak[b-t61wt45yb7] {
top: 100%;
left: 6px;
border-top-color: var(--mud-palette-text-secondary);
}
.coachmark-spot-left-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-left-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-left-end .coachmark-spot-beak[b-t61wt45yb7] {
right: 100%;
top: 4px;
border-right-color: var(--mud-palette-text-secondary);
}
.coachmark-spot-right-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-right-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot-right-end .coachmark-spot-beak[b-t61wt45yb7] {
left: 100%;
top: 4px;
border-left-color: var(--mud-palette-text-secondary);
}
.coachmark-spot[aria-pressed="true"].coachmark-spot-top-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-top-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-top-end .coachmark-spot-beak[b-t61wt45yb7] {
border-bottom-color: #1668b8;
}
.coachmark-spot[aria-pressed="true"].coachmark-spot-bottom-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-bottom-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-bottom-end .coachmark-spot-beak[b-t61wt45yb7] {
border-top-color: #1668b8;
}
.coachmark-spot[aria-pressed="true"].coachmark-spot-left-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-left-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-left-end .coachmark-spot-beak[b-t61wt45yb7] {
border-right-color: #1668b8;
}
.coachmark-spot[aria-pressed="true"].coachmark-spot-right-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-right-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-spot[aria-pressed="true"].coachmark-spot-right-end .coachmark-spot-beak[b-t61wt45yb7] {
border-left-color: #1668b8;
}
/* Beaks point the OTHER way in element mode, and this is the difference between the two pickers
rather than a detail. A viewport bubble points outward, past the edge it sits against. An element
bubble points INWARD, at the target in the middle: sitting above the element means the triangle
is underneath the bubble, aimed down at it. */
.coachmark-grid-element .coachmark-spot-top-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-top-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-top-end .coachmark-spot-beak[b-t61wt45yb7] {
bottom: auto;
top: 100%;
border-bottom-color: transparent;
border-top-color: var(--mud-palette-text-secondary);
}
.coachmark-grid-element .coachmark-spot-bottom-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-bottom-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-bottom-end .coachmark-spot-beak[b-t61wt45yb7] {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--mud-palette-text-secondary);
}
.coachmark-grid-element .coachmark-spot-left-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-left-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-left-end .coachmark-spot-beak[b-t61wt45yb7] {
right: auto;
left: 100%;
border-right-color: transparent;
border-left-color: var(--mud-palette-text-secondary);
}
.coachmark-grid-element .coachmark-spot-right-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-right-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot-right-end .coachmark-spot-beak[b-t61wt45yb7] {
left: auto;
right: 100%;
border-left-color: transparent;
border-right-color: var(--mud-palette-text-secondary);
}
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-top-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-top-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-top-end .coachmark-spot-beak[b-t61wt45yb7] {
border-top-color: #1668b8;
}
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-bottom-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-bottom-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-bottom-end .coachmark-spot-beak[b-t61wt45yb7] {
border-bottom-color: #1668b8;
}
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-left-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-left-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-left-end .coachmark-spot-beak[b-t61wt45yb7] {
border-left-color: #1668b8;
}
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-right-start .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-right-middle .coachmark-spot-beak[b-t61wt45yb7],
.coachmark-grid-element .coachmark-spot[aria-pressed="true"].coachmark-spot-right-end .coachmark-spot-beak[b-t61wt45yb7] {
border-right-color: #1668b8;
}
/* Placement around the perimeter. The two spellings of each corner sit side by side rather than on
top of each other - they are different choices and have to be separately clickable. */
.coachmark-spot-top-start[b-t61wt45yb7] { top: 10px; left: 12px; }
.coachmark-spot-top-middle[b-t61wt45yb7] { top: 10px; left: 50%; margin-left: -13px; }
.coachmark-spot-top-end[b-t61wt45yb7] { top: 10px; right: 46px; }
.coachmark-spot-right-start[b-t61wt45yb7] { top: 34px; right: 10px; }
.coachmark-spot-right-middle[b-t61wt45yb7] { top: 50%; margin-top: -8px; right: 10px; }
.coachmark-spot-right-end[b-t61wt45yb7] { bottom: 34px; right: 10px; }
.coachmark-spot-bottom-start[b-t61wt45yb7] { bottom: 10px; left: 12px; }
.coachmark-spot-bottom-middle[b-t61wt45yb7]{ bottom: 10px; left: 50%; margin-left: -13px; }
.coachmark-spot-bottom-end[b-t61wt45yb7] { bottom: 10px; right: 46px; }
.coachmark-spot-left-start[b-t61wt45yb7] { top: 34px; left: 10px; }
.coachmark-spot-left-middle[b-t61wt45yb7] { top: 50%; margin-top: -8px; left: 10px; }
.coachmark-spot-left-end[b-t61wt45yb7] { bottom: 34px; left: 10px; }
/* /Pages/ContactSync/AutoContactSyncMap.razor.rz.scp.css */
[b-hvxz8ae3uu] .table-fixed {
table-layout: auto;
}
[b-hvxz8ae3uu] .table-fixed th,
[b-hvxz8ae3uu] .table-fixed td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[b-hvxz8ae3uu] .mud-table-container {
overflow-x: auto;
}
/* Fix for inline editable customer ID field */
[b-hvxz8ae3uu] .mud-input-text {
font-size: 0.875rem;
}
/* #7421 — ROW-PER-MAPPING GROUPING, WITHOUT HIERARCHY.
The dashboard renders one row per PSA mapping, so a tenant with several occupies several adjacent
rows. An earlier version shaded and indented the second and later rows; that implied a
parent/child relationship the data does not have, and told the operator a split depended on the
mapping it came from when either can be removed independently. (Sudhir, 2026-09-15.)
What remains is a separator line on the row that STARTS each tenant's group — the groups stay
readable, and no row is rendered as lesser than another. Every colour is a MudBlazor palette
variable so it tracks the live light/dark toggle. */
/* First row of each tenant's group: a hairline above it separates one tenant from the next. */
[b-hvxz8ae3uu] .contactsync-row-group-start > td {
border-top: 1px solid var(--mud-palette-lines-default);
}
/* Pending split: a mapping that exists but has no PSA customer yet. Warning-tinted because it is an
UNFINISHED state that blocks enabling — a state, not a rank. */
[b-hvxz8ae3uu] .contactsync-row-pending-split {
background-color: var(--mud-palette-warning-hover);
box-shadow: inset 3px 0 0 0 var(--mud-palette-warning);
}
/* /Pages/ContactSync/Components/ContactSyncApplyDefaultDialog.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* /Pages/ContactSync/Components/ContactSyncDefaultSettingsEditor.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* /Pages/ContactSync/Components/ContactSyncTrackingLegendDialog.razor.rz.scp.css */
.contactsync-tracking-legend-dialog__layout[b-sdmay035i7] {
min-width: 920px;
display: flex;
flex-direction: column;
gap: 16px;
}
.contactsync-tracking-legend-dialog__summary-grid[b-sdmay035i7] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.contactsync-tracking-legend-dialog__section-grid[b-sdmay035i7] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.contactsync-tracking-legend-dialog__summary-card[b-sdmay035i7],
.contactsync-tracking-legend-dialog__section-card[b-sdmay035i7] {
height: 100%;
}
.contactsync-tracking-legend-dialog__item-grid[b-sdmay035i7] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.contactsync-tracking-legend-dialog__item-card[b-sdmay035i7] {
display: flex;
flex-direction: column;
gap: 10px;
}
.contactsync-tracking-legend-dialog__visual[b-sdmay035i7] {
display: grid;
justify-content: flex-start;
align-items: center;
min-width: 0;
}
.contactsync-tracking-legend-dialog__description[b-sdmay035i7] {
min-width: 0;
}
@media (max-width: 1280px) {
.contactsync-tracking-legend-dialog__summary-grid[b-sdmay035i7] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.contactsync-tracking-legend-dialog__layout[b-sdmay035i7] {
min-width: 0;
}
.contactsync-tracking-legend-dialog__summary-grid[b-sdmay035i7] {
grid-template-columns: minmax(0, 1fr);
}
.contactsync-tracking-legend-dialog__section-grid[b-sdmay035i7] {
grid-template-columns: minmax(0, 1fr);
}
.contactsync-tracking-legend-dialog__item-grid[b-sdmay035i7] {
grid-template-columns: minmax(0, 1fr);
}
}
/* /Pages/Dashboard/CustomerStatus/DashboardCustomerDisabledTenantNotes.razor.rz.scp.css */
/* CSS Isolation */
.CardItem[b-nviflih9wf] {
margin: 4px;
max-width: 600px;
min-width: 600px;
max-height: 600px;
overflow: auto;
}
.CardItem table td[b-nviflih9wf]{
vertical-align: top
}
/* /Pages/Dashboard/CustomerStatus/DashboardCustomerStatus.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Dashboard/CustomerStatus/DatesPicker.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Dashboard/DashboardCustomerSecurity.razor.rz.scp.css */
.ChartGrid[b-8gccvffhav] {
margin-top: 14px;
}
/* /Pages/Dashboard/DashboardTenantAzureBaseline.razor.rz.scp.css */
.baseline-scroll[b-oz8gvisggt] {
overflow-x: auto;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #fff;
}
.baseline-table[b-oz8gvisggt] {
border-collapse: collapse;
font-size: 11px;
width: max-content;
}
.baseline-table th[b-oz8gvisggt],
.baseline-table td[b-oz8gvisggt] {
border: 1px solid #d1d5db;
padding: 2px 4px;
text-align: right;
white-space: nowrap;
min-width: 70px;
}
.baseline-table th[b-oz8gvisggt] {
background: #f3f4f6;
font-weight: 600;
position: sticky;
top: 0;
z-index: 2;
text-align: center;
}
.baseline-table th.sub-col[b-oz8gvisggt],
.baseline-table td.sub-col[b-oz8gvisggt] {
text-align: left;
position: sticky;
left: 0;
z-index: 3;
background: #ffffff;
min-width: 260px;
font-weight: 500;
}
.baseline-table th.sub-col[b-oz8gvisggt] {
background: #f3f4f6;
z-index: 4;
}
.baseline-table .sub-meta[b-oz8gvisggt] {
color: #6b7280;
font-size: 10px;
font-weight: 400;
}
.baseline-table td .cell-main[b-oz8gvisggt] {
font-weight: 700;
line-height: 1.1;
}
.baseline-table td .cell-sub[b-oz8gvisggt] {
color: #475569;
font-size: 9px;
line-height: 1.1;
}
.baseline-table td.pending[b-oz8gvisggt] {
background: #f9fafb;
color: #9ca3af;
}
.baseline-table td.busy[b-oz8gvisggt] {
background: #dbeafe;
color: #1e3a8a;
}
.baseline-table td.has[b-oz8gvisggt] {
background: #d1fae5;
color: #065f46;
}
.baseline-table td.cached[b-oz8gvisggt] {
background: #e0e7ff;
color: #3730a3;
font-style: italic;
}
.baseline-table td.empty[b-oz8gvisggt] {
background: #fef3c7;
color: #92400e;
}
.baseline-table td.fail[b-oz8gvisggt] {
background: #fee2e2;
color: #991b1b;
cursor: help;
}
.baseline-table td.total-col[b-oz8gvisggt],
.baseline-table th.total-col[b-oz8gvisggt] {
background: #f9fafb;
font-weight: 700;
position: sticky;
right: 0;
min-width: 80px;
}
.baseline-table td.total-col.has[b-oz8gvisggt] {
background: #d1fae5;
}
.baseline-table .year-divider[b-oz8gvisggt] {
border-right: 2px solid #6b7280 !important;
}
.legend-swatch[b-oz8gvisggt] {
display: inline-block;
width: 12px;
height: 12px;
vertical-align: middle;
border: 1px solid #d1d5db;
margin: 0 4px 0 12px;
}
.legend-swatch.has[b-oz8gvisggt] { background: #d1fae5; }
.legend-swatch.empty[b-oz8gvisggt] { background: #fef3c7; }
.legend-swatch.busy[b-oz8gvisggt] { background: #dbeafe; }
.legend-swatch.fail[b-oz8gvisggt] { background: #fee2e2; }
.legend-swatch.cached[b-oz8gvisggt] { background: #e0e7ff; }
/* /Pages/Dashboard/DashboardTenantAzureCoverage.razor.rz.scp.css */
.coverage-scroll[b-h7zvk2jz18] {
overflow-x: auto;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #fff;
}
.coverage-table[b-h7zvk2jz18] {
border-collapse: collapse;
font-size: 12px;
width: max-content;
}
.coverage-table th[b-h7zvk2jz18],
.coverage-table td[b-h7zvk2jz18] {
border: 1px solid #d1d5db;
padding: 4px 6px;
text-align: center;
white-space: nowrap;
}
.coverage-table th[b-h7zvk2jz18] {
background: #f3f4f6;
font-weight: 600;
position: sticky;
top: 0;
z-index: 2;
}
.coverage-table th.sub-col[b-h7zvk2jz18],
.coverage-table td.sub-col[b-h7zvk2jz18] {
text-align: left;
position: sticky;
left: 0;
z-index: 3;
background: #ffffff;
min-width: 240px;
font-weight: 500;
}
.coverage-table th.sub-col[b-h7zvk2jz18] {
background: #f3f4f6;
z-index: 4;
}
.coverage-table .sub-meta[b-h7zvk2jz18] {
color: #6b7280;
font-size: 10px;
font-weight: 400;
}
.coverage-table td.has[b-h7zvk2jz18] {
background: #d1fae5;
color: #065f46;
font-weight: 700;
}
.coverage-table td.empty[b-h7zvk2jz18] {
background: #fef3c7;
color: #92400e;
}
.coverage-table td.fail[b-h7zvk2jz18] {
background: #fee2e2;
color: #991b1b;
font-weight: 700;
cursor: help;
}
.coverage-table td.miss[b-h7zvk2jz18] {
background: #f3f4f6;
color: #9ca3af;
}
.coverage-table td.total-col[b-h7zvk2jz18],
.coverage-table th.total-col[b-h7zvk2jz18] {
background: #f9fafb;
font-weight: 700;
position: sticky;
right: 0;
}
.coverage-table td.total-col.has[b-h7zvk2jz18] {
background: #d1fae5;
}
.coverage-table td.total-col.empty[b-h7zvk2jz18] {
background: #fef3c7;
}
.coverage-table td.total-col.fail[b-h7zvk2jz18] {
background: #fee2e2;
}
.coverage-table .year-divider[b-h7zvk2jz18] {
border-right: 2px solid #6b7280 !important;
}
.legend-swatch[b-h7zvk2jz18] {
display: inline-block;
width: 12px;
height: 12px;
vertical-align: middle;
border: 1px solid #d1d5db;
margin: 0 4px 0 12px;
}
.legend-swatch.has[b-h7zvk2jz18] { background: #d1fae5; }
.legend-swatch.empty[b-h7zvk2jz18] { background: #fef3c7; }
.legend-swatch.fail[b-h7zvk2jz18] { background: #fee2e2; }
/* /Pages/Dashboard/DashboardTenantSecurity.razor.rz.scp.css */
.ChartGrid[b-h8r7nhz6r6] {
margin-top: -14px;
}
/* /Pages/Dashboard/LicensingSummary/EmptyLayout.razor.rz.scp.css */
*[b-bmq0nns9cv] {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
@page {
margin: 1.3cm;
}
/* /Pages/Dashboard/Mailbox/TenantMailboxGrid.razor.rz.scp.css */
body[b-efv47bcfqy] {
}
/* /Pages/Dashboard/SignatureUsage/DashboardEntityBannerResults.razor.rz.scp.css */
.banner-result-thumb[b-sjqi7md5hz] {
max-height: 40px;
max-width: 140px;
object-fit: contain;
}
/* /Pages/Dashboard/SignatureUsage/DashboardEntitySurveyResults.razor.rz.scp.css */
/* Custom rating-distribution bar: one horizontal stacked bar of coloured segments (red -> green),
with the active score's label centred on it and a "count (percentage)" caption below. Hover-driven
(no legend) so it matches the reference design. */
.survey-dist[b-7upm5wt8p8] {
position: relative;
width: 100%;
height: 48px;
}
.survey-dist-bar[b-7upm5wt8p8] {
display: flex;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
background: var(--mud-palette-background-grey);
}
.survey-dist-seg[b-7upm5wt8p8] {
height: 100%;
cursor: pointer;
transition: filter 120ms ease;
}
.survey-dist-seg:hover[b-7upm5wt8p8] {
filter: brightness(1.06);
}
.survey-dist-label[b-7upm5wt8p8] {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
transform: translateX(-50%);
white-space: nowrap;
color: #fff;
font-weight: 600;
font-size: 1rem;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
transition: left 120ms ease;
}
.survey-dist-caption[b-7upm5wt8p8] {
margin-top: 0.5rem;
text-align: center;
color: var(--mud-palette-text-secondary);
}
/* /Pages/Dashboard/TenantMfa/AcceptRiskDialog.razor.rz.scp.css */
.Title[b-xxr3z812wh] {
font-weight: bolder;
font-size: larger;
}
.ReasonTextBox[b-xxr3z812wh] {
}
.ButtonContainer button[b-xxr3z812wh] {
/*min-width: 72px;*/
}
/* /Pages/Diagnostics/DeveloperTools.razor.rz.scp.css */
.ForceAlign[b-4oao7suipk] {
margin-left: 12px !important;
}
/* /Pages/Diagnostics/DistiApiCheck/DistiApiCheck.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* /Pages/Diagnostics/EcpComponents/CodeExample.razor.rz.scp.css */
/* CSS Isolation — editor-style code window. Deliberate custom CSS: MudBlazor has no code
panel and the token colours target markup injected via MarkupString (hence ::deep). */
.code-window[b-0vlu3kckx9] {
border-radius: 2px;
overflow: hidden;
background: #1e1e2e;
border: 1px solid #313244;
}
.code-header[b-0vlu3kckx9] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: #181825;
border-bottom: 1px solid #313244;
border-left: 3px solid #89b4fa;
}
.code-header[b-0vlu3kckx9] .code-icon {
color: #89b4fa;
}
.code-header[b-0vlu3kckx9] .code-title {
color: #a6adc8;
font-family: 'Cascadia Code', Consolas, monospace;
}
.code-lang[b-0vlu3kckx9] {
color: #89b4fa;
background: rgba(137, 180, 250, 0.12);
border: 1px solid rgba(137, 180, 250, 0.35);
border-radius: 2px;
padding: 1px 8px;
font-size: 0.7rem;
font-family: 'Cascadia Code', Consolas, monospace;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.code-header[b-0vlu3kckx9] .code-copy {
color: #a6adc8;
}
.code-body[b-0vlu3kckx9] {
margin: 0;
padding: 14px 16px;
overflow-x: auto;
color: #cdd6f4;
font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
font-size: 0.8rem;
line-height: 1.6;
tab-size: 4;
}
.code-body[b-0vlu3kckx9] .tok-tag {
color: #89b4fa;
}
.code-body[b-0vlu3kckx9] .tok-attr {
color: #f9e2af;
}
.code-body[b-0vlu3kckx9] .tok-str {
color: #a6e3a1;
}
.code-body[b-0vlu3kckx9] .tok-razor {
color: #f38ba8;
}
.code-body[b-0vlu3kckx9] .tok-kw {
color: #cba6f7;
}
.code-body[b-0vlu3kckx9] .tok-com {
color: #6c7086;
font-style: italic;
}
/* /Pages/Diagnostics/EcpComponents/EcpComponents.razor.rz.scp.css */
/* CSS Isolation — hero banner for the component library page. ::deep is required because the
MudPaper/MudText elements are rendered by child components and do not carry the scope attribute. */
.ecp-components-page[b-f9z39wue6o] .components-hero {
background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-info) 100%);
border-radius: var(--mud-default-borderradius);
}
.ecp-components-page[b-f9z39wue6o] .components-hero .mud-typography {
color: var(--mud-palette-primary-text);
}
.ecp-components-page[b-f9z39wue6o] .components-hero .mud-icon-root {
color: var(--mud-palette-primary-text);
opacity: 0.85;
}
/* /Pages/Diagnostics/EcpGridPageTemplate.razor.rz.scp.css */
.AcknowledgeContainer ul[b-btyrisbp3q] {
list-style: disc !important;
padding: revert;
}
.AcknowledgeContainer li[b-btyrisbp3q] {
display: list-item !important;
text-align: inherit !important;
unicode-bidi: inherit !important;
}
.AcknowledgeContainer li > ul[b-btyrisbp3q] {
padding-left: 20px;
}
.AcknowledgeContainer button[b-btyrisbp3q] {
text-transform: lowercase !important;
max-height: 50px;
}
/* /Pages/Diagnostics/EcpTabbedGridTemplate/EcpTabbedGridTemplate.razor.rz.scp.css */
body[b-8v84gk1zqe] {
}
/* /Pages/Document/DocumentView.razor.rz.scp.css */
@media print {
.e-richtexteditor[b-cdze3pub88], .e-rte-content[b-cdze3pub88], .e-rte-content .e-content[b-cdze3pub88] {
height: auto !important;
overflow: visible !important;
}
/* Hide scrollbars */
.e-rte-content .e-content[b-cdze3pub88] {
scrollbar-width: none; /* Firefox */
}
.e-rte-content .e-content[b-cdze3pub88]::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
/* Hide app bar*/
.mud-appbar[b-cdze3pub88] {
display: none !important;
}
.mud-toolbar[b-cdze3pub88] {
display: none !important;
}
}
/* Hidden in normal screen unless body has .print-only */
body.print-only *[b-cdze3pub88] {
display: none !important;
}
body.print-only #content-container[b-cdze3pub88],
body.print-only #content-container *[b-cdze3pub88] {
display: block !important;
}
body.print-only #content-container[b-cdze3pub88] {
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body.print-only #content-container img[b-cdze3pub88],
body.print-only #content-container pre[b-cdze3pub88],
body.print-only #content-container code[b-cdze3pub88] {
display: block !important;
}
/* /Pages/EmailSignature/EmailSignatureCampaignAddDialog.razor.rz.scp.css */
.campaign-banner-thumb[b-qgi0city59] {
max-height: 48px;
max-width: 160px;
object-fit: contain;
}
/* /Pages/EmailSignature/EmailSignatureCampaignEditDialog.razor.rz.scp.css */
.campaign-banner-thumb[b-q6ccltd7g7] {
max-height: 48px;
max-width: 160px;
object-fit: contain;
}
/* /Pages/EmailSignature/EmailSignatureCampaignList.razor.rz.scp.css */
/* Campaigns management page — spacing comes from MudBlazor utility classes; nothing custom yet. */
/* /Pages/EmailSignature/EmailSignatureList.razor.rz.scp.css */
/* Inline signature thumbnail: a fixed, clipped frame that renders the full signature scaled down.
The iframe is laid out at full size (600x400) then scaled to fit the 96x64 frame, so the preview
is a faithful miniature of the real signature. pointer-events are disabled on the iframe so the
click lands on the container (which opens the full preview panel). */
.sig-thumb[b-1fyr3vszgu] {
width: 96px;
height: 64px;
overflow: hidden;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
background: #fff;
cursor: pointer;
position: relative;
}
.sig-thumb-frame[b-1fyr3vszgu] {
width: 600px;
height: 400px;
border: 0;
transform: scale(0.16);
transform-origin: top left;
pointer-events: none;
}
.sig-thumb-empty[b-1fyr3vszgu] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--mud-palette-text-disabled);
}
/* Drag-and-drop reorder: the Order cell is both the drag source (grip handle) and the drop
target. The dashed outline marks the row the dragged component would take the place of. */
.sig-order-cell[b-1fyr3vszgu] {
min-height: 32px;
padding: 2px 4px;
border-radius: 4px;
}
.sig-drag-handle[b-1fyr3vszgu] {
cursor: grab;
color: var(--mud-palette-text-secondary);
}
.sig-drag-over[b-1fyr3vszgu] {
outline: 2px dashed var(--mud-palette-info);
outline-offset: -2px;
}
/* Secondary halves of the compact columns: rule-summary values and the "by: name" line. */
.sig-summary-value[b-1fyr3vszgu] {
color: var(--mud-palette-text-secondary);
}
/* The condition tree outline in the Applies-to tooltip keeps its line breaks and indentation. */
.sig-condition-outline[b-1fyr3vszgu] {
white-space: pre;
text-align: left;
}
/* /Pages/EmailSignature/EmailSignatureOptionsDialog.razor.rz.scp.css */
/* Fixed dialog-content height so switching tabs never resizes the dialog: the tab header keeps
its natural height and the panel area fills the rest, scrolling when a tab's content is taller. */
.sig-options-root[b-5mdmvkvfu8] {
height: 70vh;
display: flex;
flex-direction: column;
}
.sig-options-root[b-5mdmvkvfu8] .mud-tabs {
height: 100%;
display: flex;
flex-direction: column;
}
.sig-options-root[b-5mdmvkvfu8] .mud-tabs-panels {
flex: 1;
overflow-y: auto;
}
/* /Pages/EmailSignature/EmailSignatureUserFieldList.razor.rz.scp.css */
/* Drag-to-reorder cell — matches the signature-components grid look & feel. */
.sig-order-cell[b-6hkvafb16g] {
min-height: 32px;
padding: 2px 4px;
border-radius: 4px;
}
.sig-drag-handle[b-6hkvafb16g] {
cursor: grab;
color: var(--mud-palette-text-secondary);
}
.sig-drag-over[b-6hkvafb16g] {
outline: 2px dashed var(--mud-palette-info);
outline-offset: -2px;
}
/* /Pages/EmailSignature/EmailSignatureUserSettingsList.razor.rz.scp.css */
/* Cells whose value is inherited (no stored row) are muted, so an explicitly stored value stands out
and it is obvious which settings "restore default" would actually change. */
[b-fm508cup06] .sig-setting-inherited {
opacity: 0.55;
}
/* Keep the setting columns compact — the inline editors otherwise stretch the row height. */
[b-fm508cup06] .mud-table-cell .mud-input-control {
margin-top: 0;
}
/* /Pages/EmailSignature/RibbonInsertIconDialog.razor.rz.scp.css */
/* Icon picker grid — previews use the Font Awesome webfont where available, inline SVG
otherwise (icons newer than the loaded FA version, e.g. X). */
.sig-icon-grid[b-aylxrlwn1k] {
display: flex;
flex-wrap: wrap;
gap: 4px;
max-height: 230px;
overflow-y: auto;
padding: 4px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
}
.sig-icon-tile[b-aylxrlwn1k] {
width: 72px;
height: 58px;
border: 2px solid transparent;
border-radius: 4px;
background: transparent;
cursor: pointer;
color: var(--mud-palette-text-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 4px 2px;
}
.sig-icon-tile:hover[b-aylxrlwn1k] {
background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}
.sig-icon-tile.selected[b-aylxrlwn1k] {
border-color: var(--mud-palette-info);
}
.sig-icon-glyph[b-aylxrlwn1k] {
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.sig-icon-glyph svg[b-aylxrlwn1k] {
width: 20px;
height: 20px;
}
.sig-icon-label[b-aylxrlwn1k] {
font-size: 0.62rem;
line-height: 1.1;
color: var(--mud-palette-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 68px;
}
/* Live preview swatch (approximation of the rendered PNG). */
.sig-icon-preview[b-aylxrlwn1k] {
display: flex;
align-items: center;
justify-content: center;
}
.sig-icon-preview.circle[b-aylxrlwn1k],
.sig-icon-preview.circle-outline[b-aylxrlwn1k] {
border-radius: 50%;
}
.sig-icon-preview.square[b-aylxrlwn1k],
.sig-icon-preview.square-outline[b-aylxrlwn1k] {
border-radius: 12%;
}
/* /Pages/EmailSignature/RibbonInsertImageDialog.razor.rz.scp.css */
/* Thumbnail gallery of the entity-shared signature images. */
.sig-image-gallery[b-r3zpx8td22] {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-height: 220px;
overflow-y: auto;
padding: 4px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
}
.sig-image-tile[b-r3zpx8td22] {
position: relative;
width: 84px;
height: 84px;
border: 2px solid transparent;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mud-palette-background-gray, #fafafa);
cursor: pointer;
}
.sig-image-tile.selected[b-r3zpx8td22] {
border-color: var(--mud-palette-info);
}
.sig-image-tile img[b-r3zpx8td22] {
max-width: 76px;
max-height: 76px;
object-fit: contain;
}
/* Delete overlay in the tile corner — visible on hover. */
.sig-image-tile[b-r3zpx8td22] .sig-image-delete {
position: absolute;
top: 0;
right: 0;
padding: 2px;
background: rgba(255, 255, 255, 0.85);
opacity: 0;
}
.sig-image-tile:hover[b-r3zpx8td22] .sig-image-delete {
opacity: 1;
}
/* /Pages/EmailSignature/RibbonSurveyDialog.razor.rz.scp.css */
/* Fixed-width label column so the Shape / Fill / Colour radio rows align. ::deep because the
class lands on MudText's own root element, which Blazor CSS isolation does not scope. */
.survey-option-row[b-ha9e9x9wuu] .survey-option-label {
width: 72px;
flex-shrink: 0;
}
/* /Pages/EmailSignature/RibbonTemplatePickerDialog.razor.rz.scp.css */
/* Vertically scrollable list of template previews; 10px gap between rows. */
.tmpl-list[b-j6fw1le4da] {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 70vh;
overflow-y: auto;
padding-right: 4px;
}
/* One template: near-full-size preview on the left, name + Select on the right. No border of
its own — the preview box below carries the frame, and a second box around preview + Select
reads as a border around a border. The radius stays for the current-template outline. */
.tmpl-row[b-j6fw1le4da] {
display: flex;
gap: 12px;
align-items: stretch;
border-radius: 6px;
padding: 8px;
}
.tmpl-row-current[b-j6fw1le4da] {
outline: 2px solid var(--mud-palette-info);
}
.tmpl-preview[b-j6fw1le4da] {
flex: 1;
min-width: 0;
height: 240px;
overflow: hidden;
background: #fff;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
}
.tmpl-frame[b-j6fw1le4da] {
width: 100%;
height: 100%;
border: 0;
}
.tmpl-actions[b-j6fw1le4da] {
flex: 0 0 140px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 6px;
}
/* Template name: small, grey, above the Select button. */
.tmpl-name[b-j6fw1le4da] {
font-size: 0.72rem;
color: var(--mud-palette-text-secondary);
text-align: center;
word-break: break-word;
}
/* /Pages/EmailSignature/SignatureConditionBlock.razor.rz.scp.css */
/* CSS Isolation */
/* A nested group: indented under its parent with a left rule, so the tree reads as blocks. */
.sig-cond-block[b-96ue0yek9x] {
border-left: 3px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
background-color: var(--mud-palette-background-gray);
margin-left: 12px;
}
.sig-cond-root[b-96ue0yek9x] {
padding: 0;
}
/* The operator written between two items, indented like the items it joins. */
.sig-cond-join[b-96ue0yek9x] {
display: block;
padding-left: 32px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--mud-palette-text-secondary);
}
.sig-cond-not[b-96ue0yek9x] {
font-weight: 700;
color: var(--mud-palette-warning);
}
.sig-cond-op-select[b-96ue0yek9x] {
max-width: 140px;
}
/* /Pages/EmailSignature/SignatureExchangePanel.razor.rz.scp.css */
/* The auth token is a long unbroken base64url string. Without an explicit break it either overflows
its column or stretches the grid; monospace makes it checkable character by character against what
ends up in the customer's transport rule. */
.ecp-setup-token[b-wiq84yx8do] {
font-family: Consolas, "Courier New", monospace;
font-size: 0.8rem;
word-break: break-all;
}
/* The generated PowerShell is read, copied and pasted — never edited here — so it renders as a
scrollable block rather than a text field. Horizontal scrolling is deliberate: wrapping a
backtick-continued PowerShell line changes what it means when pasted. */
.ecp-setup-script[b-wiq84yx8do] {
margin: 0.5rem 0 0 0;
padding: 0.75rem;
max-height: 26rem;
overflow: auto;
font-family: Consolas, "Courier New", monospace;
font-size: 0.8rem;
line-height: 1.45;
background-color: var(--mud-palette-background-grey);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
white-space: pre;
}
/* /Pages/EmailSignature/SignatureHtmlEditor.razor.rz.scp.css */
/* Monaco needs an explicit container height — it sizes to its parent, and inside a
MudTabPanel the parent otherwise collapses to 0. Matches the design surface height. */
.html-source-editor[b-ry2o5419xr] .monaco-editor-container {
height: 550px;
}
/* ── CodeTwo-style ribbon ─────────────────────────────────────────────────── */
.sig-ribbon[b-ry2o5419xr] {
border: 1px solid var(--mud-palette-lines-default);
border-bottom: none;
border-radius: 4px 4px 0 0;
/* No overflow:hidden here — the colour dropdowns overhang the ribbon's bottom edge
and would be clipped. The tab strip rounds its own top corners instead. */
background: var(--mud-palette-surface);
position: relative;
z-index: 30; /* keep the colour dropdowns above the editor canvas */
}
/* Tab strip across the top (Main / Table layout) — same surface colour as the ribbon,
separated by a hairline; the active tab is marked by colour + underline. */
.ribbon-tabs[b-ry2o5419xr] {
display: flex;
background: var(--mud-palette-surface);
border-bottom: 1px solid var(--mud-palette-lines-default);
border-radius: 3px 3px 0 0;
}
.ribbon-tab[b-ry2o5419xr] {
border: none;
background: transparent;
color: var(--mud-palette-text-secondary);
padding: 8px 20px;
font-size: 0.85rem;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -1px; /* underline sits on the strip's hairline */
}
.ribbon-tab:hover[b-ry2o5419xr] {
color: var(--mud-palette-text-primary);
}
.ribbon-tab.active[b-ry2o5419xr] {
color: var(--mud-palette-info);
border-bottom-color: var(--mud-palette-info);
}
/* Row of captioned tool groups. */
.ribbon-groups[b-ry2o5419xr] {
display: flex;
align-items: stretch;
flex-wrap: wrap;
padding: 4px 8px 2px 8px;
}
[b-ry2o5419xr] .ribbon-group {
display: flex;
flex-direction: column;
padding: 0 10px;
border-right: 1px solid var(--mud-palette-lines-default);
}
[b-ry2o5419xr] .ribbon-group:last-child {
border-right: none;
}
[b-ry2o5419xr] .ribbon-group-buttons {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
min-height: 58px; /* uniform group height — Font group's two rows set the tallest case */
}
[b-ry2o5419xr] .ribbon-group-caption {
text-align: center;
font-size: 0.7rem;
color: var(--mud-palette-text-secondary);
margin-top: 2px;
padding-bottom: 2px;
}
/* Large command icons at 32px — MudBlazor's Size.Large (36px) reads too heavy next to
Office ribbons. Duplicated under ::deep for markup inside child-content fragments. */
.ribbon-btn-inner .mud-icon-root[b-ry2o5419xr],
[b-ry2o5419xr] .ribbon-btn-inner .mud-icon-root {
font-size: 32px;
}
/* Icon-over-label buttons. */
[b-ry2o5419xr] .ribbon-btn {
min-width: 56px;
padding: 4px 6px;
text-transform: none;
}
[b-ry2o5419xr] .ribbon-btn-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
[b-ry2o5419xr] .ribbon-btn-label {
font-size: 0.7rem;
line-height: 1.1;
white-space: normal;
max-width: 76px;
color: var(--mud-palette-text-primary);
}
/* Two-row stack inside the Font group (selects above, format buttons below). */
.ribbon-font-stack[b-ry2o5419xr] {
display: flex;
flex-direction: column;
}
[b-ry2o5419xr] .ribbon-font-select {
width: 150px;
}
[b-ry2o5419xr] .ribbon-size-select {
width: 80px;
}
/* Compact the MudSelects so the Font group's two rows fit the uniform group height. */
[b-ry2o5419xr] .ribbon-font-select .mud-input,
[b-ry2o5419xr] .ribbon-size-select .mud-input {
font-size: 0.8rem;
}
[b-ry2o5419xr] .ribbon-font-select.mud-input-control,
[b-ry2o5419xr] .ribbon-size-select.mud-input-control {
margin: 0;
}
/* Active-state highlight on toggle buttons (HTML source, Preview, Sample email, Gridlines)
and format buttons (bold on bold text, etc.). Must read clearly in BOTH themes — the old
theme-hover tint was invisible in dark mode: accent fill plus an accent ring. */
[b-ry2o5419xr] .fmt-active {
background: rgba(33, 150, 243, 0.15); /* fallback for browsers without color-mix */
background: color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
box-shadow: inset 0 0 0 1px var(--mud-palette-info);
border-radius: 4px;
}
/* Dimmed content for disabled ribbon buttons (Table layout tools outside a table). */
[b-ry2o5419xr] .ribbon-btn-disabled {
opacity: 0.4;
}
/* Text/highlight colour dropdowns — plain in-ribbon elements (no popover portal) so the
editor's selection survives the interaction. */
.ribbon-color-wrap[b-ry2o5419xr] {
position: relative;
}
.ribbon-icon-btn[b-ry2o5419xr] {
display: flex;
align-items: center;
background: transparent;
border: none;
padding: 6px;
border-radius: 4px;
cursor: pointer;
color: var(--mud-palette-text-primary);
}
.ribbon-icon-btn:hover[b-ry2o5419xr] {
background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}
.ribbon-palette-popup[b-ry2o5419xr] {
position: absolute;
top: 100%;
left: 0;
z-index: 20;
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
width: 250px;
}
/* Inline (static) MudColorPicker inside the colour dropdowns — spectrum, sliders, hex input. */
[b-ry2o5419xr] .ribbon-color-picker {
width: 100%;
box-shadow: none;
}
.ribbon-tab:disabled[b-ry2o5419xr] {
opacity: 0.4;
cursor: default;
}
/* Preview surface (standalone Preview and the sample email thread). Deliberately WHITE in
both themes — signatures are judged against how the sent email renders, and emails are
read on white (same choice Word and CodeTwo make). Text colour is pinned dark so the
dark theme's light text doesn't wash out on the white surface. */
.sig-email-page[b-ry2o5419xr] {
border: 1px solid var(--mud-palette-lines-default);
border-radius: 0 0 4px 4px;
background: #fff;
color: #212121;
padding: 14px 18px;
}
/* Sandboxed iframe carrying the resolved signature; height is set to the content by
signatureSelection.resizePreviewFrame after each render. */
.sig-preview-frame[b-ry2o5419xr] {
display: block;
width: 100%;
border: 0;
background: #fff;
margin: 12px 0;
}
/* HTML / Plain text switch shown at the top of the preview renditions. */
.sig-preview-tabs[b-ry2o5419xr] {
display: flex;
gap: 4px;
margin-bottom: 10px;
}
/* Fixed colours — the pills sit on the always-white preview surface, so theme variables
would render light-on-white in dark mode. */
.sig-preview-tab[b-ry2o5419xr] {
border: 1px solid #c4c4c4;
background: transparent;
color: #666;
padding: 3px 14px;
font-size: 0.8rem;
border-radius: 12px;
cursor: pointer;
}
.sig-preview-tab.active[b-ry2o5419xr] {
color: #fff;
background: var(--mud-palette-info);
border-color: var(--mud-palette-info);
}
/* Plain-text rendition — fixed-width like plain-text emails render in Outlook. */
.sig-preview-text[b-ry2o5419xr] {
white-space: pre-wrap;
font-family: Consolas, "Courier New", monospace;
font-size: 0.85rem;
color: #000;
margin: 12px 0;
}
.sig-thread[b-ry2o5419xr] {
font-family: Calibri, Arial, sans-serif;
font-size: 0.85rem;
color: #8a8a8a;
}
.sig-thread p[b-ry2o5419xr] {
margin: 0 0 10px;
}
/* Symbol dropdown — grid of character tiles, with a footer hint pointing at the Icon dialog
for the concepts Unicode has no monochrome glyph for (fax, globe, building). */
.ribbon-char-popup[b-ry2o5419xr] {
width: auto;
}
.ribbon-char-menu[b-ry2o5419xr] {
display: grid;
grid-template-columns: repeat(10, 32px);
gap: 4px;
padding: 8px;
width: auto;
max-height: 320px;
overflow-y: auto;
}
.ribbon-char-hint[b-ry2o5419xr] {
border-top: 1px solid var(--mud-palette-lines-default);
padding: 6px 8px;
font-size: 0.7rem;
color: var(--mud-palette-text-secondary);
}
.ribbon-char-item[b-ry2o5419xr] {
width: 32px;
height: 32px;
font-size: 16px;
background: transparent;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
cursor: pointer;
color: var(--mud-palette-text-primary);
}
.ribbon-char-item:hover[b-ry2o5419xr] {
background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}
/* Raw-button trigger for in-ribbon dropdowns (needs its own reset — no MudButton base). */
[b-ry2o5419xr] .ribbon-menu-trigger {
background: transparent;
border: none;
cursor: pointer;
border-radius: 4px;
}
[b-ry2o5419xr] .ribbon-menu-trigger:hover {
background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}
/* Placeholder dropdown — scrollable token list (descriptions only; token in tooltip).
Rules are duplicated under ::deep because scope-attribute placement varies for markup
rendered through the ribbon's child-content fragments. */
.ribbon-token-menu[b-ry2o5419xr],
[b-ry2o5419xr] .ribbon-token-menu {
width: 230px;
max-height: 320px;
overflow-y: auto;
padding: 4px;
}
.ribbon-token-item[b-ry2o5419xr],
[b-ry2o5419xr] .ribbon-token-item {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 6px 10px;
font-size: 0.8rem;
border-radius: 4px;
cursor: pointer;
color: var(--mud-palette-text-primary);
}
.ribbon-token-item:hover[b-ry2o5419xr],
[b-ry2o5419xr] .ribbon-token-item:hover {
background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
}
/* Colour swatch grids inside the text/highlight colour menus. */
.ribbon-palette[b-ry2o5419xr] {
display: grid;
grid-template-columns: repeat(8, 22px);
gap: 4px;
padding: 8px;
}
.ribbon-swatch[b-ry2o5419xr] {
width: 22px;
height: 22px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 3px;
cursor: pointer;
padding: 0;
}
.ribbon-swatch:hover[b-ry2o5419xr] {
outline: 2px solid var(--mud-palette-info);
}
/* "No fill / clear colour" swatch: a white square crossed by a red diagonal — the
conventional "no colour" indicator. Clicking it removes the applied colour. */
.ribbon-swatch-clear[b-ry2o5419xr] {
background-color: #fff;
background-image: linear-gradient(to top right, transparent 0 calc(50% - 1px), #f44336 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%);
}
/* The ribbon replaces Radzen's toolbar (ShowToolbar="false") — square off the top
corners so the canvas visually attaches to the ribbon. */
.sig-editor-shell[b-ry2o5419xr] .rz-html-editor {
border-radius: 0 0 4px 4px;
}
/* Editing canvas — same white-in-both-themes rule as the preview surface: signatures are
authored against the white background emails render on, and the dark theme's inherited
light text would wash out on it. */
.sig-editor-shell[b-ry2o5419xr] .rz-html-editor-content {
background: #fff;
color: #212121;
}
/* Word-style gridlines editing aid: faint dashed outlines make borderless table structure
visible. Outlines don't affect layout and exist only in the canvas CSS — the saved HTML
and the sent email are untouched. */
.sig-editor-shell.show-gridlines[b-ry2o5419xr] .rz-html-editor-content table,
.sig-editor-shell.show-gridlines[b-ry2o5419xr] .rz-html-editor-content td,
.sig-editor-shell.show-gridlines[b-ry2o5419xr] .rz-html-editor-content th {
outline: 1px dashed #b8b8b8;
outline-offset: -1px;
}
/* Hide-if-empty region cue: grays and outlines the content wrapped in a
… comment so the designer can see what disappears from
sent mail when its tokens are blank. Editor-only — the "ecp-hide-if-empty" class is added by
signatureSelection.decorateConditional and stripped by CleanEditorArtifacts before the body is
stored or sent, so it never reaches the signature. */
.sig-editor-shell[b-ry2o5419xr] .rz-html-editor-content .ecp-hide-if-empty {
opacity: 0.5;
outline: 1px dashed #1976d2;
outline-offset: 1px;
}
/* /Pages/EmailSignature/SignaturePreviewPanel.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
These rules live HERE, next to the markup they style, and not on the page that hosts this
component. Blazor's CSS isolation rewrites each rule to match only elements declared in the
matching .razor file, so leaving them on the parent page silently styled nothing once this
markup moved into a component — the thumbnails rendered unscaled and unclipped and the
verdict backgrounds vanished. Every element below is a plain div or iframe declared in
SignaturePreviewPanel.razor, which is what makes the scoping work; the MudText elements use
MudBlazor's own global classes instead, because isolation never reaches inside a child
component's rendered output.
*/
/* One component's verdict. Deliberately NOT interactive: there is nothing to click, and a
MudListItem's hover highlight plus click ripple made it look as though there were. */
.sig-trace-row[b-vgrcn4sa8a] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px;
margin-bottom: 8px;
border-radius: 4px;
border: 1px solid var(--mud-palette-lines-default);
}
/* Verdict is carried by the row background, so it reads before any text is parsed. Low-alpha tints of
the theme's own success/error colours, so they hold up in both light and dark themes rather than
fighting a hard-coded green/red. */
.sig-trace-included[b-vgrcn4sa8a] {
background: rgba(var(--mud-palette-success-rgb), 0.16);
}
.sig-trace-skipped[b-vgrcn4sa8a] {
background: rgba(var(--mud-palette-error-rgb), 0.12);
}
/* Same trick as the components list: lay the iframe out at full size, then scale it down, so the
miniature is a faithful rendering rather than a squashed one. The fixed, clipping box is what stops
a full-size signature from taking over the sidebar. pointer-events are off because the thumbnail is
illustrative — nothing here responds to a click. */
.sig-trace-thumb[b-vgrcn4sa8a] {
flex: 0 0 auto;
width: 96px;
height: 64px;
overflow: hidden;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
background: #fff;
position: relative;
}
.sig-trace-thumb-frame[b-vgrcn4sa8a] {
width: 600px;
height: 400px;
border: 0;
transform: scale(0.16);
transform-origin: top left;
pointer-events: none;
}
.sig-trace-thumb-empty[b-vgrcn4sa8a] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 0.7rem;
text-align: center;
color: var(--mud-palette-text-disabled);
}
/* min-width:0 lets the text column shrink inside the flex row instead of forcing it wider than the
sidebar when a component name or reason is long. */
.sig-trace-body[b-vgrcn4sa8a] {
min-width: 0;
}
/* /Pages/EmailSignature/SignatureUserPreviewPanel.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
The "why this signature" trace styles used to live here. They moved to
SignaturePreviewPanel.razor.css when that markup became its own component: isolation rewrites
each rule to match only elements declared in the matching .razor file, so rules left behind
here matched nothing and the trace rendered unstyled.
*/
/* /Pages/EmailSignatureTemplate/EmailSignatureTemplateList.razor.rz.scp.css */
/* Inline template thumbnail: a fixed, clipped frame that renders the full template scaled down.
The iframe is laid out at full size (600x400) then scaled to fit the 96x64 frame, so the preview
is a faithful miniature of the real template. pointer-events are disabled on the iframe so the
click lands on the container (which opens the full preview panel). */
.sig-thumb[b-d7tall7139] {
width: 96px;
height: 64px;
overflow: hidden;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
background: #fff;
cursor: pointer;
position: relative;
}
.sig-thumb-frame[b-d7tall7139] {
width: 600px;
height: 400px;
border: 0;
transform: scale(0.16);
transform-origin: top left;
pointer-events: none;
}
.sig-thumb-empty[b-d7tall7139] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--mud-palette-text-disabled);
}
/* /Pages/Esd/EsdHome.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* /Pages/Esd/EsdTicketDetailPage.razor.rz.scp.css */
/* The tabs and the side column sit side by side from the medium breakpoint, stacked below it. */
.esd-ticket-main[b-5bjtjzb0i0] {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
.esd-ticket-side[b-5bjtjzb0i0] {
flex: 0 0 auto;
width: 100%;
}
@media (min-width: 960px) {
.esd-ticket-side[b-5bjtjzb0i0] {
width: 380px;
}
}
/* /Pages/Esd/EsdTicketListPage.razor.rz.scp.css */
/* The queue and its preview panel sit side by side from the medium breakpoint, stacked below it. */
.esd-queue-column[b-4ysi48888o] {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
.esd-preview-column[b-4ysi48888o] {
flex: 0 0 auto;
width: 100%;
}
@media (min-width: 960px) {
.esd-preview-column[b-4ysi48888o] {
width: 360px;
}
}
/* /Pages/Gdap/GdapOnboardingTest/GdapOnboardingTest.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Gdap/Template/ApplyGdapTemplateDialog.razor.rz.scp.css */
/* /Pages/Gdap/Template/GdapRelationshipsPanel.razor.rz.scp.css */
/* /Pages/Gdap/Template/GdapRoleSelectDialog.razor.rz.scp.css */
/* No scoped styles — MudBlazor dialogs render in a portal outside the component tree */
/* /Pages/Gdap/Template/GdapTemplateEdit.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Gdap/Template/GdapTemplateList.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Integrations/Components/ContactSyncIntegrationPanel.razor.rz.scp.css */
/* Contact Sync Integration Panel Styles */
/* /Pages/Integrations/Components/ContactSyncLicenseSelectionDialog.razor.rz.scp.css */
/* Contact Sync License Selection Dialog Styles */
/* /Pages/Integrations/Components/ServiceDeskIntegrationPanel.razor.rz.scp.css */
/* Service Desk Integration Panel Styles */
/* /Pages/Location/CSV/LocationImporter.razor.rz.scp.css */
.Results[b-96j2ki9azj] {
max-height: 150px;
overflow-y: auto;
padding: 5px;
}
.ResultItem[b-96j2ki9azj] {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* /Pages/Location/LocationAdd.razor.rz.scp.css */
.TenantButtonContainer[b-lqyftnu0qp] {
display: inline-block;
margin: 5px;
}
/* /Pages/M365/DelegatedConsentTestPage.razor.rz.scp.css */
/* CSS Isolation */
.perm-detail[b-xqdqpcy9tz] {
color: var(--mud-palette-text-secondary);
font-size: 0.78rem;
}
/* /Pages/M365/OneDriveDelegationTestPage.razor.rz.scp.css */
/* CSS Isolation */
.perm-detail[b-0bpfqw1jgr] {
color: var(--mud-palette-text-secondary);
font-size: 0.78rem;
}
.onedrive-url[b-0bpfqw1jgr] {
word-break: break-all;
}
.dev-steps[b-0bpfqw1jgr] {
background: var(--mud-palette-background-grey);
padding: 12px;
border-radius: 4px;
overflow-x: auto;
font-size: 0.8rem;
line-height: 1.4;
white-space: pre;
margin: 0;
}
/* /Pages/M365/TenantPermissionsPage.razor.rz.scp.css */
/* CSS Isolation */
.perm-detail[b-z33fuhmi3v] {
color: var(--mud-palette-text-secondary);
}
/* /Pages/My/MyTaskList.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Newsletter/NewsletterList.razor.rz.scp.css */
/* Force card to flex column so thumbnail grows and content pins to bottom */
[b-ikyjqgp9dp] .newsletter-card {
display: flex !important;
flex-direction: column !important;
}
/* Thumbnail fills all available space above the card content */
.newsletter-thumbnail[b-ikyjqgp9dp] {
flex: 1 1 auto;
min-height: 180px;
background-color: transparent;
}
/* "Add Newsletter" placeholder card — dashed border with centred content */
[b-ikyjqgp9dp] .newsletter-add-card {
border: 2px dashed var(--mud-palette-primary);
background-color: transparent !important;
}
.newsletter-add-content[b-ikyjqgp9dp] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 280px;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.newsletter-add-content:hover[b-ikyjqgp9dp] {
opacity: 1;
}
/* Override MudItem to 5 columns on large screens (20% each) */
@media (min-width: 1280px) {
[b-ikyjqgp9dp] .mud-grid > .mud-grid-item-lg-2 {
flex-basis: 20% !important;
max-width: 20% !important;
}
}
/* /Pages/Notifications/DescriptionDialog.razor.rz.scp.css */
/* CSS Isolation */
/* Component-specific styles here */
/* /Pages/Notifications/UserVerificationReport.razor.rz.scp.css */
/* UserVerificationReport Styles */
/* /Pages/Policy/AdHoc/AdHocApplyTemplateWizard.razor.rz.scp.css */
fieldset.UrlContainer[b-8intp4bsn5] {
border: 1px solid lightgrey !important;
margin: 4px !important;
padding: 16px !important;
border-radius: 5px;
}
.UrlContainer legend[b-8intp4bsn5] {
padding-left: 4px;
padding-right: 4px;
}
/* /Pages/Policy/AdHoc/AdHocComplianceObjectsDialog.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* A UPN or display name can be a long unbroken token; wrap it rather than run past the dialog edge. */
.adhoc-compliance-objects-body[b-841oen9mbd] {
overflow-wrap: anywhere;
}
/* /Pages/Policy/AdHoc/AdHocEnforcementConfirmDialog.razor.rz.scp.css */
/* The preview list wraps instead of clipping at the dialog edge, and scrolls vertically when long.
Palette variables only, so it reads in light and dark mode. */
.adhoc-enforce-list[b-t7hc4og7gp] {
list-style: none;
margin: 0;
padding: 0;
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
}
.adhoc-enforce-item[b-t7hc4og7gp] {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 10px;
border-bottom: 1px solid var(--mud-palette-divider);
overflow-wrap: anywhere;
}
.adhoc-enforce-item:last-child[b-t7hc4og7gp] {
border-bottom: none;
}
.adhoc-enforce-name[b-t7hc4og7gp] {
color: var(--mud-palette-text-primary);
font-weight: 500;
}
.adhoc-enforce-change[b-t7hc4og7gp] {
color: var(--mud-palette-text-secondary);
font-size: 0.8125rem;
white-space: pre-wrap;
}
/* /Pages/Policy/AdHoc/AdHocGoldenTenantReviewPage.razor.rz.scp.css */
/* CSS Isolation — Golden Tenant review page */
[b-jxqzaudy57] .golden-warning-row {
background-color: var(--mud-palette-warning-hover);
}
/* /Pages/Policy/AdHoc/AdHocRollbackConfirmDialog.razor.rz.scp.css */
/* A setting value can be a long unbroken token (a JSON document, a GUID list), and the old message box
let it run past the dialog edge. Wrap it instead. MudBlazor does not play well with CSS isolation, so
the rule targets a plain div wrapper, not the MudText inside it. */
.adhoc-rollback-body[b-uter8eglz3] {
overflow-wrap: anywhere;
}
/* /Pages/Policy/AdHoc/AdHocSettingDetailDialog.razor.rz.scp.css */
/* Restore list styling inside HTML content rendered via MarkupString */
[b-6xp10w7uod] .content-container ul,
[b-6xp10w7uod] .content-container ol {
list-style-position: outside;
padding-left: 24px;
margin-top: 8px;
margin-bottom: 8px;
}
[b-6xp10w7uod] .content-container ul {
list-style-type: disc;
}
[b-6xp10w7uod] .content-container ol {
list-style-type: decimal;
}
[b-6xp10w7uod] .content-container li {
margin-bottom: 4px;
line-height: 1.5;
}
/* Conditional Access tabs (#5884, item 6). ::deep because the classes below sit on MudBlazor
children as well as plain markup — the whole reason 23 rules in the CA folder were inert. */
[b-6xp10w7uod] .adhoc-detail-ca-intro {
color: var(--mud-palette-text-secondary);
}
/* Policy documents and JSONPaths are both long. Each block scrolls inside its own container so the
dialog, and the page behind it, never scroll sideways. */
[b-6xp10w7uod] .adhoc-detail-ca-scroll {
overflow-x: auto;
max-width: 100%;
}
[b-6xp10w7uod] .adhoc-detail-ca-payload {
margin: 0;
padding: 0.75rem;
background-color: var(--mud-palette-background-gray);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
color: var(--mud-palette-text-primary);
font-family: var(--mud-typography-caption-family, monospace);
font-size: 0.8125rem;
line-height: 1.5;
}
[b-6xp10w7uod] .adhoc-detail-ca-path,
[b-6xp10w7uod] .adhoc-detail-ca-value {
color: var(--mud-palette-text-secondary);
font-family: var(--mud-typography-caption-family, monospace);
}
/* /Pages/Policy/AdHoc/AdHocSettingsCatalogPage.razor.rz.scp.css */
/* Non-rectifiable / manual intervention row styling */
[b-ya1janhy48] .manual-intervention-row {
background-color: rgba(255, 152, 0, 0.18) !important;
}
/* /Pages/Policy/AdHoc/AdHocTemplateEditPage.razor.rz.scp.css */
/* MudDataGrid group header styling */
.template-settings-group-header[b-y216j6sd0r] {
gap: 12px;
min-height: 36px;
}
/* Muted row style for excluded/disabled settings */
[b-y216j6sd0r] .template-settings-item-row-muted {
opacity: 0.55;
}
/* Pending root-removal rows should appear struck through until propagation approval */
[b-y216j6sd0r] .template-settings-item-row-stale {
text-decoration: line-through;
}
/* Non-rectifiable / manual intervention row styling */
[b-y216j6sd0r] .manual-intervention-row {
background-color: rgba(255, 152, 0, 0.18) !important;
}
/* Published toggle wrapper */
.publish-toggle-wrapper[b-y216j6sd0r] {
display: inline-flex;
}
/* ================================================================
Full-width settings grid
================================================================ */
/* Settings MudDataGrid — compact display */
[b-y216j6sd0r] .setting-grid {
font-size: 0.8125rem;
}
/* /Pages/Policy/AdHoc/AdHocTemplateGroupEditPage.razor.rz.scp.css */
/* Non-rectifiable / manual intervention row styling */
[b-8pm9pbt3nt] .manual-intervention-row {
background-color: rgba(255, 152, 0, 0.18) !important;
}
/* Settings MudDataGrid — compact display */
[b-8pm9pbt3nt] .templategroup-settings-grid {
font-size: 0.8125rem;
}
/* /Pages/Policy/AdHoc/AdHocTemplateListPage.razor.rz.scp.css */
/* Blinking dot indicator for "Updates available" chips */
.blink-dot[b-fm4bimlqmm] {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mud-palette-error);
animation: blink-b-fm4bimlqmm 1s ease-in-out infinite;
margin-right: 4px;
vertical-align: middle;
}
@keyframes blink-b-fm4bimlqmm {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.blink-dot[b-fm4bimlqmm] {
animation: none;
}
}
/* /Pages/Policy/AdHoc/AdHocTenantAssignmentPage.razor.rz.scp.css */
/* Chart datapoint tooltips — larger, high-contrast text for readability.
MudBlazor renders tooltips as containing + .
The has inline font-size="12px" and fill="white" — override with !important. */
[b-5rlizmjycn] .mud-chart .svg-tooltip text {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
}
/* Tooltip background — slightly larger, rounded, subtle shadow */
[b-5rlizmjycn] .mud-chart .svg-tooltip rect {
rx: 6 !important;
ry: 6 !important;
}
/* /Pages/Policy/AdHoc/AdHocTenantCompliancePage.razor.rz.scp.css */
/* Compliance item row styling for MudDataGrid RowClassFunc */
[b-epvtcewtud] .compliance-item-row-muted {
opacity: 0.6;
}
/* License or permission restricted — greyed out to indicate the setting cannot run */
[b-epvtcewtud] .compliance-item-row-restricted {
opacity: 0.45;
background-color: rgba(158, 158, 158, 0.08) !important;
}
/* Non-rectifiable / manual intervention row styling */
[b-epvtcewtud] .manual-intervention-row {
background-color: rgba(255, 152, 0, 0.18) !important;
}
/* Paused section — dims the entire compliance area */
.compliance-paused-section[b-epvtcewtud] {
opacity: 0.4;
}
/* When Enforce mode is active, impact text turns red */
[b-epvtcewtud] .enforce-mode-active .impact-text {
color: var(--mud-palette-error) !important;
}
/* Chart datapoint tooltips — larger, high-contrast text for readability.
MudBlazor renders tooltips as containing + .
The has inline font-size="12px" and fill="white" — override with !important. */
[b-epvtcewtud] .mud-chart .svg-tooltip text {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
}
/* Tooltip background — slightly larger, rounded, subtle shadow */
[b-epvtcewtud] .mud-chart .svg-tooltip rect {
rx: 6 !important;
ry: 6 !important;
}
/* /Pages/Policy/AdHoc/AdHocTrackingReportPage.razor.rz.scp.css */
/* Scoped styles for AdHocTrackingReportPage */
/* /Pages/Policy/AdHoc/CA/AdHocConditionalAccessBindingsView.razor.rz.scp.css */
/* Plain selectors, NOT ::deep — every element styled here is written in this component's own markup,
so the scope attribute lands on it. ::deep is for reaching into a CHILD component's rendered DOM,
and using it unnecessarily widens the selector past this component.
Nothing here targets a Mud* element. The two requiredness chips are styled entirely through
MudChip's Color and Variant props, which is what keeps them theme-correct without a stylesheet
rule that could silently fail to apply. That failure mode is measured twice in this folder: 23 of
the 31 dialog rules had never applied before 2026-09-01, and after ::deep was added 22 of the 41
CA rules still did not, because the dialogs have no plain HTML ancestor for ::deep to anchor on.
The dialog rules now live in wwwroot/css/app.css (#7521). */
.ca-bindings-scroll[b-gwig3ecll7] {
overflow-x: auto;
max-width: 100%;
}
/* JSONPaths and default values are both long and both monospace. Palette variables so they track
the active theme rather than assuming a light ground. */
.ca-bindings-path[b-gwig3ecll7],
.ca-bindings-value[b-gwig3ecll7] {
color: var(--mud-palette-text-secondary);
font-family: var(--mud-typography-caption-family, monospace);
}
/* /Pages/Policy/AdHoc/CA/AdHocConditionalAccessBreakGlassDialog.razor.rz.scp.css */
/* Register an account: the object id field and the Check button share one row and centre on each
other; the helper text sits on its own line below (#5884, DEV-02 2026-09-25). */
/* Replaces the inline min-width. flex-basis lets the field take the spare width, and min() stops a
24rem floor overflowing a narrow dialog: there, flex-wrap drops the button below the field. */
.breakglass-register[b-e60l0mpgqk] .breakglass-objectid {
flex: 1 1 24rem;
min-width: min(24rem, 100%);
}
/* The field's own helper line would be ~3px below the input box; match that, aligned with the
field's outlined border. Colour comes from mud-text-secondary, a palette variable, so it follows
light and dark mode. */
.breakglass-register[b-e60l0mpgqk] .breakglass-objectid-help {
display: block;
margin-top: 3px;
padding-left: 14px;
}
/* /Pages/Policy/AdHoc/CA/AdHocConditionalAccessCopiesView.razor.rz.scp.css */
/* Plain selectors: the wrapper is this component's own markup, so the scope attribute lands on it.
Colours come from MudBlazor props and the mud-text-secondary palette class only, so the view
follows light and dark mode with nothing to override (#5884). */
.ca-copies-scroll[b-4dglxfdzcq] {
overflow-x: auto;
max-width: 100%;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
}
/* /Pages/Policy/AdHoc/CA/AdHocConditionalAccessDefinitionView.razor.rz.scp.css */
/* Plain selectors, not ::deep — every element styled here is written in this component's own
markup. Nothing targets a Mud* element, so nothing needs to reach past the isolation boundary. */
.ca-definition-scroll[b-khklflex4j] {
overflow-x: auto;
max-width: 100%;
}
/* Every colour is a palette variable, so the block is legible on the dark ground as well as the
light one. A hardcoded background here is the classic way a JSON block ends up dark-on-dark. */
.ca-definition-payload[b-khklflex4j] {
margin: 0;
padding: 0.75rem;
background-color: var(--mud-palette-background-gray);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
color: var(--mud-palette-text-primary);
font-family: var(--mud-typography-caption-family, monospace);
font-size: 0.8125rem;
line-height: 1.5;
white-space: pre;
}
/* PLACEHOLDER vs LITERAL. Both are bare lowercase GUIDs in the stored document and the colour is
the only thing that separates them, so both colours are semantic — warning for "this is not the
value a tenant gets", success for "this reaches Graph exactly as printed". Palette variables
only: a hex here would invert wrongly the moment the theme flips. */
.ca-definition-plain[b-khklflex4j] {
color: inherit;
}
.ca-definition-placeholder[b-khklflex4j] {
color: var(--mud-palette-warning);
background-color: var(--mud-palette-warning-hover);
border-radius: 3px;
padding: 0 3px;
font-weight: 600;
}
.ca-definition-literal[b-khklflex4j] {
color: var(--mud-palette-success);
font-weight: 500;
}
.ca-definition-legend[b-khklflex4j] {
display: flex;
flex-wrap: wrap;
gap: 0.375rem 1rem;
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--mud-palette-text-secondary);
}
.ca-definition-key[b-khklflex4j] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.ca-definition-key code[b-khklflex4j] {
font-family: var(--mud-typography-caption-family, monospace);
color: var(--mud-palette-text-primary);
}
.ca-definition-dot[b-khklflex4j] {
display: inline-block;
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
}
.ca-definition-dot-placeholder[b-khklflex4j] {
background-color: var(--mud-palette-warning);
}
.ca-definition-dot-literal[b-khklflex4j] {
background-color: var(--mud-palette-success);
}
/* /Pages/Policy/AdHoc/CA/AdHocConditionalAccessSnapshotsDialog.razor.rz.scp.css */
/* Theme-aware only: palette variables track light and dark mode. */
.adhoc-ca-snapshot-muted[b-dax6ue1620] {
color: var(--mud-palette-text-secondary);
}
/* /Pages/Policy/PayloadComparisonDialog.razor.rz.scp.css */
.mud-dialog .outline-none[b-o22ml5ge0o] {
height: 100%;
}
[b-o22ml5ge0o] .monaco-editor-container {
height: 100%;
}
/* /Pages/Policy/PolicyAddFromLibraryDialog.razor.rz.scp.css */
.mud-dialog .outline-none[b-rexh63a2hh] {
height: 100%;
}
[b-rexh63a2hh] .monaco-editor-container {
height: 100%;
}
/* /Pages/Policy/PolicyApplyTemplateToTenantDialog.razor.rz.scp.css */
.mud-dialog .outline-none[b-ct9z9jpi0p] {
height: 100%;
}
/* /Pages/Policy/PolicyComparisonDialog.razor.rz.scp.css */
.mud-dialog .outline-none[b-0k382zrguq] {
height: 100%;
}
[b-0k382zrguq] .monaco-editor-container {
height: 100%;
}
/* /Pages/Policy/PolicyManageTemplateDialog.razor.rz.scp.css */
.mud-dialog .outline-none[b-its7onhuph] {
height: 100%;
}
[b-its7onhuph] .monaco-editor-container {
height: 100%;
}
/* /Pages/Policy/PolicyTemplateEditComponent.razor.rz.scp.css */
.split[b-vb6kzkghx1] {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
border: solid;
background: border-box;
border-style: groove;
border-width: thin;
box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 0px;
}
.right[b-vb6kzkghx1] {
right: 0;
background-color: white;
}
/* /Pages/Policy/PolicyTemplateEditPage.razor.rz.scp.css */
.split[b-9qh9vpn7oo] {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
border: solid;
background: border-box;
border-style: groove;
border-width: thin;
box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 0px;
}
.right[b-9qh9vpn7oo] {
right: 0;
background-color: white;
}
/* /Pages/Policy/PolicyViewerEditorDialog.razor.rz.scp.css */
.mud-dialog .outline-none[b-45ur9j2b8z] {
height: 100%;
}
[b-45ur9j2b8z] .monaco-editor-container {
height: 100%;
}
/* /Pages/Policy/TenantPolicyVariableEditComponent.razor.rz.scp.css */
/* CSS Isolation */
[b-u8ig3sudvi] .mud-table-dense * .mud-table-row .mud-table-cell {
padding: 2px !important;
}
/* /Pages/Preview/Preview.razor.rz.scp.css */
/* CSS Isolation */
.Book[b-bqpfiwivvq] {
font-size: larger;
font-weight: bolder;
}
.Book1[b-bqpfiwivvq] {
/* background: red;*/
}
.Book2[b-bqpfiwivvq] {
/*background: orangered;*/
}
.Book3[b-bqpfiwivvq] {
/*background: orange;*/
}
.Book4[b-bqpfiwivvq] {
/*background: yellow;*/
}
.Book5[b-bqpfiwivvq] {
/*background: yellowgreen;*/
}
.Book6[b-bqpfiwivvq] {
/*background: green;*/
}
.Link[b-bqpfiwivvq],
a[b-bqpfiwivvq] {
margin: 10px;
padding: 5px;
border: 1px solid grey;
background: whitesmoke;
cursor: pointer;
box-shadow: 0 8px 10px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.Link:hover[b-bqpfiwivvq]{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
/* Remove default list styles (bullets and margins) */
.Vertical-Menu[b-bqpfiwivvq] {
list-style-type: none; /* Remove bullet points */
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
justify-content: center; /* Center the menu items horizontally */
z-index: 1111;
}
.Horizontal-Menu[b-bqpfiwivvq] {
list-style-type: none; /* Remove bullet points */
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
display: flex; /* Use flexbox to display items in a row */
justify-content: center; /* Center the menu items horizontally */
}
/* Style each list item */
.Horizontal-Menu li[b-bqpfiwivvq] {
margin-right: 20px; /* Space between menu items */
}
.Vertical-Menu li[b-bqpfiwivvq] {
margin-bottom: 5px;
}
/* Remove margin from the last item */
.Horizontal-Menu li:last-child[b-bqpfiwivvq] {
margin-right: 0;
}
/* Style links */
.Link[b-bqpfiwivvq],
.Vertical-Menu a[b-bqpfiwivvq],
.Horizontal-Menu a[b-bqpfiwivvq] {
text-decoration: none; /* Remove underline from links */
color: orange; /* Dark gray text color */
font-weight: bold; /* Make text bold */
padding: 10px 20px; /* Add some padding around the text */
display: block; /* Make the link fill the entire list item */
border-radius: 5px; /* Add rounded corners */
transition: background-color 0.3s; /* Smooth background transition on hover */
}
/* Add hover effect */
.Link:hover[b-bqpfiwivvq],
.Vertical-Menu a:hover[b-bqpfiwivvq],
.Horizontal-Menu a:hover[b-bqpfiwivvq] {
background-color: orange; /* Blue background on hover */
color: #333; /* White text on hover */
}
/* Optional: Add a border or highlight to the active menu item */
.Vertical-Menu a.active[b-bqpfiwivvq],
.Horizontal-Menu a.active[b-bqpfiwivvq] {
background-color: whitesmoke; /* Blue background for active link */
color: orange; /* text for active link */
}
/* Style for the floating link container */
.Floater[b-bqpfiwivvq] {
position: fixed; /* Fixed position relative to the viewport */
/*right: 20px;*/ /* 20px from the right edge of the screen */
/*bottom: 20px;*/ /* 20px from the bottom edge of the screen */
background-color: transparent; /* Background color of the link */
padding: 10px 15px; /* Add some padding around the link */
/* border-radius: 50px; /* Rounded corners for a pill shape */
/* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Optional shadow effect */
z-index: 10000; /* Make sure the floating link appears above other content */
transition: background-color 0.3s ease; /* Smooth background color change */
}
.Floating-Trial[b-bqpfiwivvq] {
right: 20px;
top: 30px;
}
.Floating-Link[b-bqpfiwivvq] {
right: 20px;
bottom: 20px;
}
.Floating-Menu[b-bqpfiwivvq] {
left: 20px;
top: 250px;
text-align: center;
}
/* Style for the link itself */
.Floating-Trial a[b-bqpfiwivvq],
.Floating-Link a[b-bqpfiwivvq] {
color: orange; /* White text color */
text-decoration: none; /* Remove underline */
font-size: 16px; /* Set a reasonable font size */
font-weight: bold; /* Make the link bold */
display: block; /* Make the link fill the entire container */
text-align: center; /* Center the text inside the link */
}
/* Hover effect */
.Floating-Trial:hover[b-bqpfiwivvq],
.Floating-Link:hover[b-bqpfiwivvq] {
background-color: transparent; /* Darker blue on hover */
}
/* /Pages/Preview/SubscriptionMenuEdit.razor.rz.scp.css */
/* CSS Isolation */
.GroupRow[b-uwss5vpq2y] {
background: grey !important;
}
th .GroupRowButtons[b-uwss5vpq2y] {
text-align: end !important;
}
/* /Pages/Room/RoomList.razor.rz.scp.css */
/* CSS isolation for the Rooms list page. Styling is handled by MudBlazor utility classes. */
/* /Pages/ScheduledTasks/ScheduledTaskList.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/ScheduledTasks/ScheduledTaskListRoot.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Search/DocumentSearch.razor.rz.scp.css */
/* EcpBot answer card — typography for the MudMarkdown-rendered content.
::deep is required because MudMarkdown emits its own (non-scoped) elements. */
.ecpbot-answer[b-k5qz6q133g] h1,
.ecpbot-answer[b-k5qz6q133g] h2,
.ecpbot-answer[b-k5qz6q133g] h3,
.ecpbot-answer[b-k5qz6q133g] h4 {
margin-top: 1.1rem;
margin-bottom: 0.4rem;
font-weight: 600;
line-height: 1.3;
}
.ecpbot-answer[b-k5qz6q133g] h1 { font-size: 1.4rem; }
.ecpbot-answer[b-k5qz6q133g] h2 { font-size: 1.25rem; }
.ecpbot-answer[b-k5qz6q133g] h3 { font-size: 1.1rem; }
.ecpbot-answer[b-k5qz6q133g] h4 { font-size: 1rem; }
.ecpbot-answer[b-k5qz6q133g] p {
margin: 0.5rem 0;
line-height: 1.6;
}
.ecpbot-answer[b-k5qz6q133g] ul,
.ecpbot-answer[b-k5qz6q133g] ol {
margin: 0.5rem 0;
padding-left: 1.6rem;
}
.ecpbot-answer[b-k5qz6q133g] li {
margin: 0.25rem 0;
line-height: 1.6;
}
.ecpbot-answer[b-k5qz6q133g] li > p {
margin: 0.15rem 0;
}
.ecpbot-answer[b-k5qz6q133g] code {
background-color: rgba(0, 0, 0, 0.06);
padding: 0.1rem 0.35rem;
border-radius: 3px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
}
.ecpbot-answer[b-k5qz6q133g] pre {
background-color: rgba(0, 0, 0, 0.06);
padding: 0.75rem 1rem;
border-radius: 6px;
overflow-x: auto;
margin: 0.75rem 0;
}
.ecpbot-answer[b-k5qz6q133g] pre code {
background: transparent;
padding: 0;
font-size: 0.9rem;
}
.ecpbot-answer[b-k5qz6q133g] blockquote {
border-left: 3px solid var(--mud-palette-secondary);
margin: 0.75rem 0;
padding: 0.25rem 1rem;
color: var(--mud-palette-text-secondary);
}
.ecpbot-answer[b-k5qz6q133g] table {
border-collapse: collapse;
margin: 0.75rem 0;
width: 100%;
}
.ecpbot-answer[b-k5qz6q133g] th,
.ecpbot-answer[b-k5qz6q133g] td {
border: 1px solid var(--mud-palette-lines-default);
padding: 0.4rem 0.7rem;
text-align: left;
}
.ecpbot-answer[b-k5qz6q133g] th {
background-color: rgba(0, 0, 0, 0.04);
font-weight: 600;
}
.ecpbot-answer[b-k5qz6q133g] a {
color: var(--mud-palette-secondary);
text-decoration: none;
}
.ecpbot-answer[b-k5qz6q133g] a:hover {
text-decoration: underline;
}
.ecpbot-answer[b-k5qz6q133g] hr {
border: none;
border-top: 1px solid var(--mud-palette-lines-default);
margin: 1rem 0;
}
/* Tighten the very first/last element so the card padding does the work. */
.ecpbot-answer[b-k5qz6q133g] > :first-child {
margin-top: 0;
}
.ecpbot-answer[b-k5qz6q133g] > :last-child {
margin-bottom: 0;
}
/* /Pages/ServiceDesk/ServiceDeskTrackingReport.razor.rz.scp.css */
/* Ensure MudDataGrid child row content uses full width */
[b-v39ee7agli] .mud-table-child-content {
width: 100%;
}
/* /Pages/ServiceDesk/TicketActionTriage.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* /Pages/Settings/FallbackHtmlPreviewDialog.razor.rz.scp.css */
/* Make the preview area large so the fallback HTML has room to show. */
.fallback-html-preview[b-lp5m52yl21] {
min-height: 70vh;
overflow: auto;
}
/* /Pages/Settings/PageTenantPermissions.razor.rz.scp.css */
/* CSS Isolation */
/* The left panel is natural height (the reference). The middle and right
panels stretch to match it via the grid's default align-items:stretch.
Their MudPaper carries inline "position:relative; overflow:hidden" (inline
so it survives CSS-isolation scoping on the component root). The content
below sits in an absolutely-positioned overlay so a long list can never
push the row taller than the left panel — it scrolls internally instead.
This keeps all three panels exactly equal height. */
.panel-body[b-w0jweevoiz] {
position: absolute;
inset: 0;
padding: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* The panel height (calc(100vh - 300px)) lives INLINE on each MudPaper's Style attribute, NOT
here. MudBlazor renders its own root element, which CSS-isolation does NOT stamp with this
component's scope attribute, so an isolated class like `.left-panel` never matches a MudPaper
root — only inline Style (immune to scoping) reliably reaches it. A fixed height (not
max-height) keeps the panel full-height even with only a few rows; the internal lists scroll,
so it never clips. The middle/right panels carry the same inline height. */
/* Make the tab body fill the panel below the search so the list grows to the
panel's full height (no bottom gap) and scrolls internally. The legend is a
sibling after the tabs, so it stays pinned and visible. */
.left-panel[b-w0jweevoiz] .mud-tabs {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.left-panel[b-w0jweevoiz] .mud-tabs-panels {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.left-panel[b-w0jweevoiz] .mud-tab-panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.page-tree[b-w0jweevoiz] {
flex: 1 1 auto;
min-height: 0;
max-height: calc(100vh - 440px);
overflow-y: auto;
}
.legend-dot[b-w0jweevoiz] {
font-size: 0.9rem;
line-height: 1;
margin-right: -0.5rem;
}
.legend-gated[b-w0jweevoiz] {
color: var(--mud-palette-error);
}
.legend-contains[b-w0jweevoiz] {
color: #9c27b0;
}
/* Gated-pages quick list (Gated tab). Same scroll box as the tree so switching
tabs keeps the left panel a stable height. */
.gated-list[b-w0jweevoiz] {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
max-height: calc(100vh - 440px);
overflow-y: auto;
}
.gated-item[b-w0jweevoiz] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
border-radius: var(--mud-default-borderradius);
cursor: pointer;
color: var(--mud-palette-text-primary);
}
.gated-item:hover[b-w0jweevoiz] {
background-color: var(--mud-palette-action-default-hover);
}
.gated-item.selected[b-w0jweevoiz] {
background-color: var(--mud-palette-primary-hover);
}
.gated-item-icon[b-w0jweevoiz] {
flex: 0 0 auto;
}
.gated-item-text[b-w0jweevoiz] {
flex: 1 1 auto;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gated-item-count[b-w0jweevoiz] {
flex: 0 0 auto;
font-size: 0.75rem;
opacity: 0.8;
}
/* Permission rows (required + available) */
.perm-list[b-w0jweevoiz] {
display: flex;
flex-direction: column;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
overflow: hidden;
/* This list is a direct flex child of the column-flex .panel-body. Because it has
overflow:hidden, its automatic flex min-size is 0 (per the flex spec), so when the
panel content is taller than the panel the flex algorithm would otherwise squeeze it
to zero height and clip the row entirely. Pin it so it always keeps its content height
(the available-perms list scrolls inside .perm-scroll, so this never starves that). */
flex: 0 0 auto;
}
.perm-row[b-w0jweevoiz] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.25rem 0.25rem 0.75rem;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.perm-row:last-child[b-w0jweevoiz] {
border-bottom: none;
}
.perm-row:hover[b-w0jweevoiz] {
background-color: var(--mud-palette-action-default-hover);
}
.perm-row-icon[b-w0jweevoiz] {
flex: 0 0 auto;
color: var(--mud-palette-text-secondary);
}
.perm-value[b-w0jweevoiz] {
flex: 1 1 auto;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 0.85rem;
}
/* Middle-panel chrome above the available-permissions list (route header, impact, required
permissions, add-permission heading + search) — pinned at the top at its natural height so
nothing between the header and the list can grow/push it down, exactly like the right panel's
.fallback-chrome. The available list (.perm-scroll) is the single grower below it. */
.perm-chrome[b-w0jweevoiz] {
flex: 0 0 auto;
}
/* Available-permissions area fills the remaining panel height and scrolls. */
.perm-scroll[b-w0jweevoiz] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Fallback HTML editor fills the remaining panel height.
A plain textarea (not MudTextField) is used here deliberately: it is a
scoped element we fully control, so it fills reliably without depending on
MudBlazor's internal input DOM via ::deep (which would not bind reliably). */
.fallback-html[b-w0jweevoiz] {
flex: 20 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Chrome above the fallback body (heading, hint, component dropdown) — fixed height
at the top so nothing between the dropdown and the example can grow/push it down. */
.fallback-chrome[b-w0jweevoiz] {
flex: 0 0 auto;
}
/* Live example of the selected fallback component. Fills the space directly under
the dropdown (the component renders at the top of this box), scrolls if tall. */
.fallback-preview[b-w0jweevoiz] {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
padding: 12px;
}
/* The example component (PermissionUpgradeFallback) uses a top margin meant for the
real full-page fallback; pull it tight under the dropdown in this preview context. */
.fallback-preview[b-w0jweevoiz] .mud-container {
margin-top: 0 !important;
}
.fallback-textarea[b-w0jweevoiz] {
flex: 1 1 auto;
min-height: 0;
width: 100%;
resize: none;
border: 1px solid var(--mud-palette-lines-inputs);
border-radius: var(--mud-default-borderradius);
padding: 12px;
font-family: inherit;
font-size: 0.875rem;
line-height: 1.4;
background: transparent;
color: var(--mud-palette-text-primary);
}
.fallback-textarea:focus[b-w0jweevoiz] {
outline: none;
border-color: var(--mud-palette-primary);
border-width: 2px;
padding: 11px;
}
/* /Pages/Subscription/SubscriptionAuthorityButton.razor.rz.scp.css */
/* Spacing for the button, wherever it is hosted - the page header on the tabbed edit page, the
licenses banner on the workflow one. Deliberately NOT on the button itself: MudTooltip
anchors its popover to the element it wraps, so a margin there widens the anchor box and the
tooltip is placed that much further from the button. */
.authority-button[b-zo1yy60p5v] {
display: inline-flex;
margin-left: 16px;
}
/* The Authority config tooltip's surface. MudTooltip is set to Color.Transparent so its own
one-line dark strip does not sit behind this, which leaves the card AND its arrow to be drawn
here - a MudTooltip arrow takes its colour from the tooltip, so a transparent tooltip has an
invisible one. Palette variables, not literals, so the card follows the active theme.
The negative margin cancels .mud-tooltip's own 4px/8px padding, which would otherwise sit
between this card's edge and the arrow anchored to it. */
.authority-tooltip[b-zo1yy60p5v] {
position: relative;
width: 500px;
margin: -4px -8px;
padding: 16px;
text-align: left;
white-space: normal;
border-radius: var(--mud-default-borderradius);
background-color: var(--mud-palette-surface);
box-shadow: var(--mud-elevation-8);
}
/* Points back at the button. Placement.Left puts the card to the button's left, so the arrow sits
on the card's right edge, centred vertically. 10px is the exact gap MudBlazor translates a
Left-placed tooltip away from its owner, so the arrow lands on the button rather than floating
short of it. The drop shadow is what makes it visible at all - the card is surface-coloured and
so is the page behind the gap, leaving an unshadowed triangle white on white. */
.authority-tooltip[b-zo1yy60p5v]::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -10px;
border: 10px solid transparent;
border-left-color: var(--mud-palette-surface);
filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.16));
}
/* /Pages/Subscription/SubscriptionAuthorityEditDialog.razor.rz.scp.css */
/* The cell whose addresses will actually be asked is outlined in the success colour, so the
grid answers "which of these counts?" at a glance without reading the summary. ::deep because
the outline lives on MudTextField's own elements, which this component does not render. */
[b-fozon69x6g] .authority-in-effect .mud-input-outlined-border {
border-color: var(--mud-palette-success);
border-width: 2px;
}
[b-fozon69x6g] .authority-in-effect .mud-input-label {
color: var(--mud-palette-success);
}
[b-fozon69x6g] .authority-asked-label {
min-width: 10rem;
}
/* /Pages/Subscription/SubscriptionTenantEdit/ScheduledItems.razor.rz.scp.css */
/* Alignment is no longer done here.
This grid was a hand-written MudSimpleTable whose columns were aligned by the legacy global
HeadAlignCentre / TryCentre classes. Those align the header and the cell through SEPARATE rules,
so the two drifted apart, and a :first-child rule hard-coded whichever column happened to be
first — which is how Request ID ended up with a left header in a row of centred ones.
It is now an EcpGrid: each column declares Alignment (and optionally HeaderAlignment), and
EcpGridColumn / EcpGridTemplateColumn apply the GridLeft / GridCentre / GridRight class to the
header AND the cell from that one setting. A header and its cell can no longer disagree. */
/* /Pages/Subscription/SubscriptionTenantEdit/SubscriptionTenantEdit.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/SupportUser/BulkSupportUserCreate.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/TaskType/TaskTypeList.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Templates/TemplateComponentBlank.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* /Pages/Templates/TemplatePageBlank.razor.rz.scp.css */
/* CSS Isolation */
/*
DEV note: MudBlazor does NOT play well with css-isolation
Use div or span wrappers
*/
/* /Pages/Tenant/Add/CustomerAcknowledgementDialog.razor.rz.scp.css */
.MarkDownContainer[b-375h3s3ghh] {
border: grey solid 2px;
border-radius: 15px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.HtmlContainer[b-375h3s3ghh] {
border: grey solid 2px;
border-radius: 15px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.HR[b-375h3s3ghh] {
min-width: 90vw;
}
/* /Pages/Tenant/Bulk/BulkUnmanagedTenantOnboard.razor.rz.scp.css */
/* CSS Isolation */
/* /Pages/Tenant/Components/OnboardingDiagnosticsDialog.razor.rz.scp.css */
.onboarding-diagnostics-detail[b-iw6lyllwei] {
white-space: pre-wrap;
word-break: break-word;
font-size: 0.75rem;
background: var(--mud-palette-background-grey);
padding: 6px 8px;
border-radius: 4px;
margin: 4px 0 0 0;
}
/* /Pages/Tenant/Components/TenantTagColorSwatch.razor.rz.scp.css */
/* The swatch fill comes from an inline style (it is data); everything else lives here.
The element is a