/* Table pagination: the clickable controls.

   Previous / Next and the unselected page numbers are transparent, so they
   take the colour of whatever is behind them. On accountHome's card view that
   is the page ground (#F9FAFB), which reads grey against the white cards.

   This lives in the style document because the platform gives these elements
   no theme variable for background. Checked against
   ui-app/client/dist/styleProperties/Table.json: `._pageNumber` (unselected)
   exposes border, border-radius, colour and height; `._leftArrow` /
   `._rightArrow` expose height, border, border-radius and margin-right. None
   of them exposes a background, and `._clickable` is not named by any selector
   in that manifest.

   Nor can a component style slot reach them: in Table.tsx the two arrow boxes
   are class-only, with no getStyleObject() call, so they have no
   sub-component to patch. Only `pageNumbers` / `selectedPageNumber` do.

   The strip itself is left transparent on purpose, so it keeps taking the
   page's own background.

   Scope: every Table in the app, not just accountHome. The rendered DOM
   carries no page-scoped class, and `_design7` alone is shared by nine pages,
   so there is no tighter selector available. */
.comp.compTable ._tablePagination ._clickable {
	background-color: #FFFFFF;
}

.comp.compTable ._tablePagination {
	padding-left: 20px;
}

/* Shell breadcrumb.

   The top bar's crumb is a TextList whose items come from splitting the page's
   own `properties.title.name` on commas, so "User Management,Users" renders as
   two list items. The chevron between them, and the weight and colour on the
   final crumb, are what a component style slot cannot express: TextList
   exposes `list`, `listItem` and `listItemIcon`, and none of them can target
   only the items after the first, or only the last.

   The crumb colours live here rather than on the component for a specific
   reason: a `listItem-color` style leaf renders as an INLINE style on every
   <li>, and an inline style beats a stylesheet rule, so the last-child colour
   below could never win while that leaf existed.

   Scoped to the shell's own breadcrumb so the TextList on `designGuide` is
   untouched. The hook is the wrapper GRID's id: a Grid renders its component
   key as the DOM id, but a TextList does not render one at all, which is why
   the rule hangs off `#shellCrumbWrap` rather than the list itself. Both keys
   were chosen to start with a letter so they are valid CSS identifiers. */
#shellCrumbWrap li.listItem {
	color: #808284;
}

#shellCrumbWrap li.listItem + li.listItem::before {
	content: '\203A';
	margin-right: 8px;
	color: #ABABAD;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	vertical-align: -1px;
}

#shellCrumbWrap li.listItem:last-child {
	color: #2C2E32;
	font-weight: 600;
}

/* The Prompt used to need eight rules here, for the draft bar, the saved
   notice and the confirmation block. They are gone: the component now
   publishes `promptNotice*`, `promptConfirm*`, `promptApprove*` and
   `promptWarningFontColor` alongside its original 29, and sitezump sets them
   in the theme like any other variable. Nothing about the Prompt is styled
   from this document. */

/* Generated by theme_mono.py. Restates the colour rules of the app style
   document `style` in this theme's tokens; same selectors, later in the cascade. */

/* The ground under everything, so nothing between first paint and the app's own
   body rule shows the browser's white. */
html, body {
	background: #F4F4F2;
	color: #191918;
}

/* AI Studio's board: the custom properties BlueprintEditor sets from literals and
   publishes no variable for. The doubled class outranks the component's own rule.
   The root is cleared here so the board sits on the canvas: it paints the same
   --_bpSurface as its cards, and BlueprintEditor never applies a page's own style
   leaves to its root (it reads stylePropertiesWithPseudoStates.comp without
   resolving the pseudo-states first, unlike every other component). */
.comp.compBlueprintEditor.compBlueprintEditor {
	background: transparent;
	--_bpInkBody: #62625E;
	--_bpInk30: #A2A29C;
	--_bpInk10: #ECEBE6;
	--_bpSurfaceVeil: #FFFFFF99;
	--_bpWarnWash: #A35F0014;
	--_bpWarnInk: #A35F00;
}

/* ButtonBar track and labels: the guide's `.seg`, for what ButtonBar publishes no
   variable for. Doubled classes outrank the component's own rules. A ButtonBar's
   buttons are <button>s, which do not inherit the page font (they rendered Arial). */
.comp.compButtonBar.compButtonBar {
	background: #F2F1EC;
	padding: 3px;
	height: 32px;
	box-sizing: border-box;
	align-items: center;
	width: fit-content;
	flex-shrink: 0;
}

.comp.compButtonBar.compButtonBar ._button {
	flex: none;
	padding: 0px 12px;
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	white-space: nowrap;
}

.comp.compButtonBar.compButtonBar ._button._selected {
	box-shadow: 0 1px 2px rgba(25,25,24,.1);
}

.comp.compButtonBar.compButtonBar ._button:hover:not(._selected) {
	background: transparent;
}

/* Tabs `_highlight` is the same segmented control: the track is padded and pill-shaped,
   and the highlighter (inline `height: 100%` of the padded track) is trimmed to the
   option inside it. Horizontal only: a vertical rail sizes its highlighter to the row.
   A track wider than its column (Organization's six tabs on a phone) scrolls inside itself
   instead of pushing the whole page sideways (QA-0308). */
.comp.compTabs._highlight._horizontal > .tabsContainer {
	padding: 3px;
	border-radius: 999px;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	box-sizing: border-box;
	flex-shrink: 0;
}

.comp.compTabs._highlight._horizontal > .tabsContainer::-webkit-scrollbar {
	display: none;
}

.comp.compTabs._highlight._horizontal > .tabsContainer > .tabHighlighter {
	height: calc(100% - 6px) !important;
}

.comp.compTabs._highlight > .tabsContainer > .tabDiv {
	white-space: nowrap;
}

.comp.compTabs._highlight._vertical > .tabsContainer {
	padding: 3px;
	border-radius: 10px;
	box-sizing: border-box;
}

/* Toasts: a hairline ring in each kind's hue. The Messages theme has one shadow
   for every kind, so the per-kind ring can only live here. */
.comp.compMessages ._message.ERROR {
	box-shadow: 0 0 0 1px #C0362C, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compMessages ._message.SUCCESS {
	box-shadow: 0 0 0 1px #1E7A46, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compMessages ._message.WARNING {
	box-shadow: 0 0 0 1px #A35F00, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compMessages ._message.INFORMATION {
	box-shadow: 0 0 0 1px #2E6DB4, 0 6px 16px rgba(25,25,24,.08);
}

/* Page toasts: THE toast (theme_mono.TOAST_*). A ROWLAYOUT Grid with the five slots
   _SEPTENARYBG _LIGHT _LIGHTLOW _EXTRAROUND _PADDINGTWO is a toast. */
.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO {
	padding: 8px 14px 8px 10px;
	gap: 8px;
	align-items: center;
	width: max-content;
	max-width: min(480px, calc(100vw - 32px));
	box-sizing: border-box;
	background: #FFFFFF;
	border: none;
	box-shadow: 0 0 0 1px #ECEBE6, 0 6px 16px rgba(25,25,24,.08);
	z-index: 110;
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO .comp.compGrid._ROWLAYOUT {
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO:has(img[src*="successValidation"]) {
	box-shadow: 0 0 0 1px #1E7A46, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO:has(img[src*="errorValidation"]) {
	box-shadow: 0 0 0 1px #C0362C, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO .comp.compText {
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #191918;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: left;
	min-width: 0;
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO .comp.compText * {
	font: inherit;
	color: inherit;
	margin: 0;
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO .comp.compImage,
.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO .comp.compImage img {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO .comp.compIcon {
	font-size: 16px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Pager states the Table publishes no variable for: hover, the arrows' label, the
   ellipsis and the rows-per-page select. The doubled classes outrank the Table's
   per-design rules, which carry five. The pill's fill is with its outline below;
   hover is the secondary button's (QA-0401). */
.comp.comp.compTable.compTable ._tablePagination ._clickable:hover {
	background-color: #F4F4F2;
	color: #191918;
}

.comp.compTable ._tablePagination ._leftArrow,
.comp.compTable ._tablePagination ._rightArrow,
.comp.compTable ._tablePagination ._noclick {
	color: #62625E;
	gap: 6px;
	padding: 0px 10px;
}

.comp.compTable ._tablePagination ._leftArrow i,
.comp.compTable ._tablePagination ._rightArrow i {
	font-size: 11px;
}

.comp.compTable ._tablePagination select._tableSize {
	height: 32px;
	padding: 0px 8px;
	border: 1px solid #D6D5CF;
	border-radius: 8px;
	background: #FFFFFF;
	color: #191918;
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* A sticky column (`position: sticky` inline on its cells) needs an opaque cell, or the
   columns scrolling under it show through. The row hover is a translucent tint on every
   cell, so a sticky cell takes the same tint flattened onto the panel instead. */
.comp.comp.compTable.compTable ._row._dataRow > .comp.compTableColumn.compTableColumn[style*="sticky"] {
	background: #FFFFFF;
}

.comp.comp.compTable.compTable ._row._dataRow:hover > .comp.compTableColumn.compTableColumn[style*="sticky"],
.comp.comp.compTable.compTable ._row._dataRow._selected > .comp.compTableColumn.compTableColumn[style*="sticky"] {
	background: #E8E8E7;
}

/* Fields position their label and support text absolutely, outside their own box,
   so a stack of fields only gets room for them from its gap. A field that shows
   support text reserves its height below itself, so the next label never lands on
   it. Support text is there from the first paint, so the reserve never moves anything. */
.comp.compTextBox:has(._supportText:not(:empty)),
.comp.compTextArea:has(._supportText:not(:empty)),
.comp.compDropdown:has(._supportText:not(:empty)),
.comp.compPhoneNumber:has(._supportText:not(:empty)) {
	margin-bottom: 24px;
}

/* A validation message sits UNDER its own box, left-aligned, as wide as the box, and wraps
   (CXZ-992). On the label's line (QA-0166) a long message in a narrow box ("Enter valid email
   addresses, separated by commas." in a 240px CC box) wrapped inside 70% of the box and grew
   UP, over the field's own label and into the row above. Below the box a message needs room
   the 48px field gap does not have (the next label hangs 31px above its box), so while a
   message shows, the field takes two caption lines (42px) below itself and its help text
   gives way to the message. In a row, the field's neighbours take the same room, so the boxes
   stay on one line. A row is a `_ROWLAYOUT` Grid or one whose inline style is a row: the
   browser writes `flex-direction: row` plus `flex-wrap: wrap` back as `flex-flow: wrap`, and a
   column always says `column`. A field with no label (QA-0225) follows the same rule. */
.comp.compTextBox > ._validationMessages,
.comp.compTextArea > ._validationMessages,
.comp.compDropdown > ._validationMessages,
.comp.compPhoneNumber > ._validationMessages,
.comp.compCalendar > ._validationMessages {
	top: 100%;
	bottom: auto;
	left: 0px;
	right: auto;
	width: 100%;
	max-width: 100%;
	margin: 6px 0px 0px 0px;
	align-items: flex-start;
	text-align: left;
	box-sizing: border-box;
}

.comp.compTextBox.compTextBox:has(> ._validationMessages),
.comp.compTextArea.compTextArea:has(> ._validationMessages),
.comp.compDropdown.compDropdown:has(> ._validationMessages),
.comp.compPhoneNumber.compPhoneNumber:has(> ._validationMessages),
.comp.compCalendar.compCalendar:has(> ._validationMessages),
.comp.compGrid:is(._ROWLAYOUT, [style*="flex-direction: row"], [style*="flex-flow: row"], [style*="flex-flow: wrap"]):has(> .comp > ._validationMessages) > .comp {
	margin-bottom: 42px;
}

.comp.compTextBox:has(> ._validationMessages) > ._supportText,
.comp.compTextArea:has(> ._validationMessages) > ._supportText,
.comp.compDropdown:has(> ._validationMessages) > ._supportText,
.comp.compPhoneNumber:has(> ._validationMessages) > ._supportText,
.comp.compCalendar:has(> ._validationMessages) > ._supportText {
	display: none;
}

/* A date field's label above the box starts at the box edge, like every other field
   (QA-0387). The catalog's `._hasLeftIcon ._label { padding-left: 24px }` is for a label
   floating INSIDE the box beside the icon. Calendar takes the label-line message too (QA-0389). */
.comp.compCalendar._hasLeftIcon > ._label._noFloat,
.comp.compCalendar._hasLeftIcon._isActive > ._label {
	padding-left: 0px;
}

/* A field's label hangs ABOVE its box (absolute, `bottom: 100%`), so a second line grows
   UPWARD into whatever sits above the field: "Return per sq ft, each payout (INR)" on a
   184px box covered the Payout frequency box above it (CXZ-992). The label line holds one
   line: a label longer than its box ends in an ellipsis instead of wrapping. Give a long
   label a wider box or shorter words on the page. */
.comp.compTextBox > ._label,
.comp.compTextArea > ._label,
.comp.compDropdown > ._label,
.comp.compPhoneNumber > ._label,
.comp.compCalendar > ._label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	box-sizing: border-box;
}

/* FileSelector has no label-line placement, so its message always sits below the field and
   covered the Save button under it in dialogs (QA-0375). Same reserve, only while it shows. */
.comp.compFileSelector:has(> ._validationMessages) {
	margin-bottom: 24px;
}

/* A switch that is OFF had no edge: the n300 track (enabled) and the chip track with a hairline
   (read-only) under a white knob all but vanished on the canvas and on cards (QA-0319). The
   off track takes an n400 edge in every state (an inset ring: the live track has no border, so
   nothing moves; the read-only track already has a 1px border, which takes the colour instead),
   and the read-only off track is n200 rather than the chip colour, so it reads as a switch that
   is off, and still quieter than a live one.
   `_outlined` draws its own ring and is left alone. */
.comp.comp.compToggleButton.compToggleButton._off:not(._outlined) {
	box-shadow: inset 0 0 0 1px #A2A29C;
}

.comp.comp.compToggleButton.compToggleButton._off._disabled:not(._outlined) {
	background-color: #DEDDD8;
	border-color: #A2A29C;
	box-shadow: none;
}

/* A `_bigDesign1` phone's label sits inside the box at the text box's 5px offset once it
   is filled, focused or noFloat (the catalog leaves it centred, over the flag; QA-0205). */
.comp.compPhoneNumber._bigDesign1._hasValue > ._label,
.comp.compPhoneNumber._bigDesign1._isActive > ._label,
.comp.compPhoneNumber._bigDesign1 > ._label._noFloat {
	top: 5px;
	margin-top: 0px;
}

/* Dialogs (QA-0171): the x sits at the dialog's 24px inset. `_design1` carries it in the
   title row (inside the padding); the row's own 10px bottom margin is dropped so the title
   row is the 24px line and the theme's 16px gap. `_design2` floats it at 10px / 16px from
   the corner, so it is placed at the padding. A dialog whose page zeroed the padding
   (inline `padding: 0`) had its title and x in the very corner: the title row takes the
   inset itself unless the page padded that row. */
.comp.compPopup .modal > .TitleIconGrid > .closeButtonPosition {
	margin-bottom: 0px;
}

.comp.compPopup .modal > .design2CloseButton {
	top: 24px;
	right: 24px;
}

.comp.compPopup .modal[style*="padding: 0px;"] > .TitleIconGrid:not([style*="padding"]),
.comp.compPopup .modal[style*="padding: 0vw;"] > .TitleIconGrid:not([style*="padding"]) {
	padding: 24px 24px 16px 24px;
}

/* FileSelector writes its label, placeholder and upload-button edge as literals
   (FileSelectorStyle.tsx: #333333CC, #0000004D, #DFE8F066), dark-on-dark in dark. */
/* The table pager as one outlined pill (QA-0293): Previous, the numbers and Next sit edge to edge
   (tablePaginationGap 0) and share one edge; the arrows carry its ends. Classes doubled to beat
   the catalog's per-design `border: none` (6 classes). The selected number has its own catalog
   rule on top of that, so it is listed again with `_selected` doubled; without the edge its fill
   covered the pill's top and bottom line and looked taller than the pill (QA-0307). */
body .comp.compTable ._tablePagination._tablePagination > ._leftArrow._leftArrow,
body .comp.compTable ._tablePagination._tablePagination > ._pageNumber._pageNumber,
body .comp.compTable ._tablePagination._tablePagination > ._noclick._noclick,
body .comp.compTable ._tablePagination._tablePagination > ._rightArrow._rightArrow,
body .comp.compTable ._tablePagination._tablePagination > ._pageNumber._pageNumber._selected._selected {
	border-top: 1px solid #D6D5CF;
	border-bottom: 1px solid #D6D5CF;
	box-sizing: border-box;
}
body .comp.compTable ._tablePagination._tablePagination > ._leftArrow._leftArrow {
	border-left: 1px solid #D6D5CF;
	padding-left: 16px;
}
body .comp.compTable ._tablePagination._tablePagination > ._rightArrow._rightArrow {
	border-right: 1px solid #D6D5CF;
	padding-right: 16px;
}
body .comp.compTable ._tablePagination > ._modesContainer {
	margin-right: 12px;
}
/* The pill is filled like a secondary button, panel under the edge (QA-0401): on the canvas it read
   as loose text in a ring, while the rows-per-page select beside it is already panel-filled. The
   current page keeps its chip fill. Hover (above) has one class more than these, so it still shows. */
body .comp.compTable ._tablePagination._tablePagination > ._leftArrow._leftArrow,
body .comp.compTable ._tablePagination._tablePagination > ._pageNumber._pageNumber,
body .comp.compTable ._tablePagination._tablePagination > ._noclick._noclick,
body .comp.compTable ._tablePagination._tablePagination > ._rightArrow._rightArrow {
	background-color: #FFFFFF;
}
body .comp.compTable ._tablePagination._tablePagination > ._pageNumber._pageNumber._selected._selected {
	background-color: #F2F1EC;
}

/* PhoneNumber draws its flag as a 44px sprite at scale(0.5) around the centre, so the visible flag
   starts 11px in; in `_bigDesign1` rows that is off the column the neighbouring values start on
   (QA-0285). No variable reaches the flag. */
body .comp.compPhoneNumber._bigDesign1 ._flag {
	transform-origin: left center;
}

/* The scaled flag keeps its 44px layout box, so the dial code sat behind 11px of empty sprite box
   (22px in `_bigDesign1`, whose flag is drawn from its left edge) plus the 2px gap: 13 to 24px from
   the flag, on every phone field (QA-0454). The box gives back the part the flag does not draw, and
   the flag and code stand 8px apart. The flag itself does not move. */
body .comp.compPhoneNumber ._dropdownSelect ._selectedOption {
	gap: 8px;
}
body .comp.compPhoneNumber ._dropdownSelect ._selectedOption ._flag {
	margin-right: -11px;
}
body .comp.compPhoneNumber._bigDesign1 ._dropdownSelect ._selectedOption ._flag {
	margin-right: -22px;
}

/* An inline FileUpload's file-name half is the field: its edge (a theme variable) gets the
   field's rounded left corners and meets the button on the right (QA-0276). */
body .comp.compFileUpload._inline_design1 ._fileUploadText,
body .comp.compFileUpload._inline_design2 ._fileUploadText,
body .comp.compFileUpload._inline_design3 ._fileUploadText {
	border-radius: 10px 0 0 10px;
	border-right: none;
	box-sizing: border-box;
}

body .comp.compFileSelector ._label {
	color: #62625E;
	font: 500 12px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* FileSelectorStyle.tsx also writes its fonts as literals in Inter (`400 14px/14px Inter` and
   friends), so its placeholder, upload button and file name were the one Inter text among the
   platform-font fields (QA-0354). Restated in the theme's family at the field's text size. */
body .comp.compFileSelector ._fileUploadPlaceholderText {
	color: #62625E;
	font: 400 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body .comp.compFileSelector ._progressBarUploadButton {
	border-color: #D6D5CF;
	color: #191918;
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body .comp.compFileSelector ._progressBarFileUploadText {
	font: 500 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The upload field shares `progressBarBackgroundColor` / `progressBarBorderRadius` with the
   ProgressBar meter, so the meter's chip track and pill ends painted it (QA-0028). Restate it
   as a field: panel fill, edge border, 10px radius, no shadow, text at the 14px field inset. */
body .comp.compFileSelector ._progressBarfileUpload {
	background-color: #FFFFFF;
	border: 1px solid #D6D5CF;
	border-radius: 10px;
	box-shadow: none;
}
body .comp.compFileSelector ._InnerProgressBarContainer {
	padding: 0px 0px 0px 14px;
}
/* The upload button sat 15px short of the field's right edge (10px box padding plus 5px inner
   padding), so a strip of the field fill showed after it (SZ-931). The box gives up its right
   padding and the button runs to the edge, full height, with the field's inner corner radius. */
body .comp.compFileSelector ._progressBarfileUpload {
	padding-right: 0px;
	overflow: hidden;
}
/* That right padding was also the inset of the chosen-file row, so its delete icon sat flush
   against the field's right border (LZT-2222). The row takes the field's 14px inset back. */
body .comp.compFileSelector ._progressBarfileUpload ._uploadingFileContainer {
	padding-right: 14px;
}
body .comp.compFileSelector ._InnerProgressBarContainer ._progressBarUploadButton {
	align-self: stretch;
	height: auto;
	border-radius: 0px;
	border-top: none;
	border-bottom: none;
	border-right: none;
	padding: 0px 16px;
}

/* The image picker (commonComponents/FileBrowser) styles itself from a plain CSS
   file with literal colours and publishes no variables. `body` lifts each rule one
   step above the file's own. */
body ._fileBrowser ._searchInputContainer {
	border: 1px solid transparent;
	background-color: #F2F1EC;
	color: #62625E;
	border-radius: 999px;
	height: 40px;
	padding: 0px 14px;
}
body ._fileBrowser ._searchInputContainer:focus-within {
	background-color: #FFFFFF;
	border-color: #74746F;
	box-shadow: 0 0 0 3px #1919181F;
}
body ._fileBrowser ._searchInputContainer input {
	background-color: transparent;
	color: #191918;
}
body ._fileBrowser button,
body ._fileBrowser ._upload {
	height: 32px;
	background-color: #FFFFFF;
	border: 1px solid #D6D5CF;
	color: #191918;
	border-radius: 8px;
	box-shadow: none;
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	padding: 0px 12px;
}
body ._fileBrowser button:hover,
body ._fileBrowser ._upload:hover {
	background-color: #1919180F;
}
body ._fileBrowser button:disabled {
	background-color: transparent;
	border-color: #ECEBE6;
	color: #8A8A84;
}
body ._fileBrowser ._files ._eachFile::after {
	border-color: #ECEBE6;
	border-radius: 10px;
}
body ._fileBrowser ._files ._eachFile._selected::before,
body ._fileBrowser ._files ._eachFile._selectable:hover::before {
	border-color: #191918;
	border-radius: 12px;
}
body ._fileBrowser ._files ._eachFile._selectable:hover,
body ._fileBrowser ._files ._eachFile._directory:hover {
	background-color: #1919180F;
}
body ._fileBrowser ._files ._eachFile ._imageLabel {
	color: #191918;
	background-color: #F2F1EC;
}
body ._fileBrowser ._confirmationBoxContent,
body ._fileBrowser ._popupBackground ._popupContainer,
body ._fileBrowser ._iroContainer,
body ._fileBrowser ._fullScreenButton,
body ._fileBrowser ._imageZOOM {
	background: #FFFFFF;
	color: #191918;
}
body ._fileBrowser ._confirmationBoxContent {
	border-radius: 14px;
	padding: 16px;
}
body ._fileBrowser ._controlLabel,
body ._fileBrowser ._controlInput span {
	color: #191918;
}
body ._fileBrowser ._controlInput {
	background-color: #F2F1EC;
}
body ._fileBrowser ._controlHeader {
	border-bottom-color: #191918;
}

/* The top bar's hairline appears once the page scrolls, as in the guide. The
   shell's page slot is the scroller (`#shellContentFrame > .comp.compPage`) and the
   bar is its sibling, so the timeline is hoisted to the frame with timeline-scope.
   Without scroll-driven animation support the bar simply keeps no rule. */
@keyframes mlxShellBarEdge {
	from { border-bottom-color: transparent; }
	to { border-bottom-color: #ECEBE6; }
}

@supports (animation-timeline: scroll()) {
	#shellContentFrame { timeline-scope: --mlxShellScroll; }
	#shellContentFrame > .comp.compPage { scroll-timeline: --mlxShellScroll block; }
	#shellContentFrame > [id="1kgkhjBQWZr8ZqydKOz7Iw"] {
		animation: mlxShellBarEdge linear both;
		animation-timeline: --mlxShellScroll;
		animation-range: 0px 8px;
	}
}

/* The page scrolls under the glass bar, so the slot runs to the top of the frame and
   its scrollbar would start behind the bar. The track begins below it instead. The
   app styles the scrollbar with ::-webkit-scrollbar (scrollbar-width stays auto), so
   Chromium and Safari honour the track margin; elsewhere it is ignored harmlessly. */
#shellContentFrame > .comp.compPage::-webkit-scrollbar-track {
	margin-top: 56px;
}

/* Sidebar menu: no scrollbar at rest. While the pointer is in the menu a 4px pill shows,
   6px clear of the top and bottom, from the text colour at 28%; 40% under the pointer. */
[id="4qNsWVVmOpUjywdqpDqmZL"][id="4qNsWVVmOpUjywdqpDqmZL"]::-webkit-scrollbar, [id="18fQ1iv9K0sVatxl0MSFpw"][id="18fQ1iv9K0sVatxl0MSFpw"]::-webkit-scrollbar {
	width: 4px;
}
[id="4qNsWVVmOpUjywdqpDqmZL"][id="4qNsWVVmOpUjywdqpDqmZL"]::-webkit-scrollbar-track, [id="18fQ1iv9K0sVatxl0MSFpw"][id="18fQ1iv9K0sVatxl0MSFpw"]::-webkit-scrollbar-track {
	background: transparent;
	margin: 6px 0px;
}
[id="4qNsWVVmOpUjywdqpDqmZL"][id="4qNsWVVmOpUjywdqpDqmZL"]::-webkit-scrollbar-thumb, [id="18fQ1iv9K0sVatxl0MSFpw"][id="18fQ1iv9K0sVatxl0MSFpw"]::-webkit-scrollbar-thumb {
	background-color: transparent;
	border-radius: 4px;
}
[id="4qNsWVVmOpUjywdqpDqmZL"][id="4qNsWVVmOpUjywdqpDqmZL"]:hover::-webkit-scrollbar-thumb, [id="18fQ1iv9K0sVatxl0MSFpw"][id="18fQ1iv9K0sVatxl0MSFpw"]:hover::-webkit-scrollbar-thumb {
	background-color: rgba(25,25,24,0.28);
}
[id="4qNsWVVmOpUjywdqpDqmZL"][id="4qNsWVVmOpUjywdqpDqmZL"]::-webkit-scrollbar-thumb:hover, [id="18fQ1iv9K0sVatxl0MSFpw"][id="18fQ1iv9K0sVatxl0MSFpw"]::-webkit-scrollbar-thumb:hover,
[id="4qNsWVVmOpUjywdqpDqmZL"][id="4qNsWVVmOpUjywdqpDqmZL"]::-webkit-scrollbar-thumb:active, [id="18fQ1iv9K0sVatxl0MSFpw"][id="18fQ1iv9K0sVatxl0MSFpw"]::-webkit-scrollbar-thumb:active {
	background-color: rgba(25,25,24,0.40);
}

#shellCrumbWrap li.listItem {
	color: #62625E;
}

#shellCrumbWrap li.listItem + li.listItem::before {
	color: #8A8A84;
}

#shellCrumbWrap li.listItem:last-child {
	color: #191918;
}

/* The theme switcher's chosen option: ink label and icon on the raised pill. The
   component has one label colour variable for every option. */
.comp.compThemeSwitcher._segmented ._option._active ._label,
.comp.compThemeSwitcher._segmented ._option._active ._themeIcon,
.comp.compThemeSwitcher._segmented ._option:hover ._label {
	color: #191918;
}

/* Icons have no colour variable either, and the collapsed rail's trigger is a bare
   <button>, whose UA colour is black: invisible on the dark rail. Muted at rest,
   ink on hover and on the chosen option, in the rail and in the popover panel. */
.comp.compThemeSwitcher ._trigger,
.comp.compThemeSwitcher ._themeIcon,
._themeSwitcherPanel ._themeIcon,
._themeSwitcherPanel ._label {
	color: #62625E;
}

.comp.compThemeSwitcher ._trigger:hover {
	background: #1919180F;
	color: #191918;
}

.comp.compThemeSwitcher._segmented ._option._active ._themeIcon,
._themeSwitcherPanel ._option._active ._themeIcon,
._themeSwitcherPanel ._option._active ._label,
._themeSwitcherPanel ._option:hover ._themeIcon,
._themeSwitcherPanel ._option:hover ._label {
	color: #191918;
}

/* The page loader is one GIF of ink dots (leadzump global/blackloader.gif, which the
   shell puts in Store.pageData._global.loaderUrl for every page's Loader Image). In dark
   it vanished on the canvas, so it takes the filter static icon images get from
   Theme.iconImageFilter (QA-0485). */
img[src*="blackloader.gif"] {
	filter: none;
}

/* Menu rows in a popover (row actions such as Edit and Delete, `_text` `_quaternary`).
   Pages paint their hover with Theme.backgroundColorFour, the chip colour, which in dark
   is all but the popover's float colour, so the row's extent never showed (QA-0486).
   Button applies a page's :hover leaf inline from its hover state, hence !important. */
.popoverContainer .comp.compButton._text._quaternary:hover {
	background-color: #F2F1EC !important;
}

/* A day that is both today and the selected one keeps the selected fill with its on_solid
   text. The catalog's today tint (`._date._dateToday`) comes after the selected fill at the
   same weight (7 classes), so it covered the ink under the white text (QA-0530, QA-0490).
   The class is repeated to reach 8 classes, for every calendar design. */
.comp.compCalendar.compCalendar.compCalendar ._date._dateSelectable._dateToday._dateSelected {
	background: #191918;
	color: #FFFFFF;
	border-color: #191918;
}

/* The date popup is a float: its body, header and arrows take the float fill and the
   container the float shadow (a 1px ring in dark). The catalog paints the body with an
   unset variable whose default is #FFFFFF, so dark ink days were white on white, and the
   header, arrows and the not-in-month and disabled cells with <colorSeven>, a dark band and
   dark discs on it (QA-0578). Those cells go clear; a selected one keeps its fill. The class
   is repeated to reach 7 classes (8 for the arrows, 9 for the cells), one over the catalog,
   for every calendar design. */
.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._dropdownContainer,
.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._calendarBodyBrowseYears,
.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._calendarBodyBrowseMonths,
.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._calendarHeader,
.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._calendarHeader ._leftArrow,
.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._calendarHeader ._rightArrow {
	background: #FFFFFF;
}

.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._dropdownContainer {
	box-shadow: 0 1px 2px rgba(25,25,24,.05), 0 12px 32px rgba(25,25,24,.08);
}

.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._date._dateNotInMonth:not(._dateSelected),
.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._date._dateDisabled:not(._dateSelected) {
	background: transparent;
}

/* Phone width: a dialog is at most the screen less a 16px gutter each side, so a fixed
   width (420px, 560px) or a min-width (420px on the dialog, 360px to 470px on the body the
   Organization dialogs carry) no longer runs off a 380px screen (QA-0580). The page's leaves
   are inline: the cap is a max-width, which an inline width cannot outrank, and a min-width,
   which does outrank it, is cleared on the dialog and on its body (its direct child). A dialog
   that had a min-width takes the whole capped width instead, as wide as it may be. A dialog the
   page made full screen (inline `width: 100%` or `100vw`, the QA-0564 forms and QA-0560
   sheets) is left alone. */
@media screen and (max-width: 640px) {
	.comp.compPopup .backdrop > .modal:not([style^="width: 100"]):not([style*=" width: 100"]) {
		max-width: calc(100vw - 32px);
	}

	.comp.compPopup .backdrop > .modal[style*="min-width"]:not([style*="min-width: 0"]):not([style^="width: 100"]):not([style*=" width: 100"]),
	.comp.compPopup .backdrop > .modal:not([style^="width: 100"]):not([style*=" width: 100"]):has(> .comp[style*="min-width"]:not([style*="min-width: 0"])) {
		width: calc(100vw - 32px);
		min-width: 0px !important;
	}

	.comp.compPopup .backdrop > .modal:not([style^="width: 100"]):not([style*=" width: 100"]) > .comp {
		max-width: 100%;
	}

	.comp.compPopup .backdrop > .modal:not([style^="width: 100"]):not([style*=" width: 100"]) > .comp[style*="min-width"] {
		min-width: 0px !important;
	}
}

/* Phone width: a compact pager, so a middle page (`1 2 3 4 5 ... 7` with both arrows) fits a
   320px screen (QA-0580, the page leaves dealReport carried in QA-0570). An empty Previous /
   Next label is dropped with its gap, the numbers are 26px with 3px sides and the ellipsis
   20px with none. Same selectors as the pill above, so the catalog's per-design sizes lose. */
@media screen and (max-width: 640px) {
	body .comp.compTable ._tablePagination._tablePagination > ._leftArrow._leftArrow > ._prev:empty,
	body .comp.compTable ._tablePagination._tablePagination > ._rightArrow._rightArrow > ._next:empty {
		display: none;
	}

	body .comp.compTable ._tablePagination._tablePagination > ._pageNumber._pageNumber,
	body .comp.compTable ._tablePagination._tablePagination > ._pageNumber._pageNumber._selected._selected {
		min-width: 26px;
		padding-left: 3px;
		padding-right: 3px;
	}

	body .comp.compTable ._tablePagination._tablePagination > ._noclick._noclick:not(._pageNumber) {
		min-width: 20px;
		padding-left: 0px;
		padding-right: 0px;
	}
}

/* Phone width: the page scrollers (the page itself, its grids, a table's card list) keep
   scrolling but show no scrollbar. Windows draws the app's 6px ::-webkit-scrollbar beside
   the content even at phone width (QA-POLISH, leadzumptwo only). Chromium drops every
   ::-webkit-scrollbar rule on an element with scrollbar-width set, Safari ignores
   scrollbar-width, so both are given. */
@media screen and (max-width: 640px) {
	.comp.compPage,
	.comp.compPage .comp.compGrid,
	.comp.compPage ._tableContainer {
		scrollbar-width: none;
	}

	.comp.compPage::-webkit-scrollbar,
	.comp.compPage .comp.compGrid::-webkit-scrollbar,
	.comp.compPage ._tableContainer::-webkit-scrollbar {
		display: none;
	}
}