/* 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: #0A0B11;
	color: #E4E8F7;
}

/* 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: #9BA3C4;
	--_bpInk30: #565F89;
	--_bpInk10: #C0CAF524;
	--_bpSurfaceVeil: #13151F99;
	--_bpWarnWash: #E0AF6826;
	--_bpWarnInk: #E0AF68;
}

/* 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: #C0CAF51C;
	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 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
	white-space: nowrap;
}

.comp.compButtonBar.compButtonBar ._button._selected {
	box-shadow: 0 0 0 1px #C0CAF524;
}

.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: 0px;
	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 #F7768E, 0 0 0 1px #C0CAF545;
}

.comp.compMessages ._message.SUCCESS {
	box-shadow: 0 0 0 1px #9ECE6A, 0 0 0 1px #C0CAF545;
}

.comp.compMessages ._message.WARNING {
	box-shadow: 0 0 0 1px #E0AF68, 0 0 0 1px #C0CAF545;
}

.comp.compMessages ._message.INFORMATION {
	box-shadow: 0 0 0 1px #7AA2F7, 0 0 0 1px #C0CAF545;
}

/* 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: calc(100vw - 32px);
	box-sizing: border-box;
	background: #1A1D29;
	border: none;
	box-shadow: 0 0 0 1px #C0CAF524, 0 0 0 1px #C0CAF545;
}

.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 #9ECE6A, 0 0 0 1px #C0CAF545;
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO:has(img[src*="errorValidation"]) {
	box-shadow: 0 0 0 1px #F7768E, 0 0 0 1px #C0CAF545;
}

.comp.compGrid._ROWLAYOUT._SEPTENARYBG._LIGHT._LIGHTLOW._EXTRAROUND._PADDINGTWO .comp.compText {
	font: 500 13px/20px 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
	color: #E4E8F7;
	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: #C0CAF514;
	color: #E4E8F7;
}

.comp.compTable ._tablePagination ._leftArrow,
.comp.compTable ._tablePagination ._rightArrow,
.comp.compTable ._tablePagination ._noclick {
	color: #9BA3C4;
	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 #C0CAF545;
	border-radius: 8px;
	background: #13151F;
	color: #E4E8F7;
	font: 500 13px/20px 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}

/* 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: #13151F;
}

.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: #3D3420;
}

/* 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 appears on submit, so a reserve for it grew every field by 24px
   and a dialog jumped by 24px per invalid field (QA-0166). It sits on the LABEL's line
   instead, right-aligned: the label hangs 13 to 31px above the box, a space every field
   already owns, so the field's footprint never changes. Below the box it cannot fit the
   48px field gap: the message (10px offset, 18px line) and the next label (31px) need 59. */
.comp.compTextBox:not(._noLabel) > ._validationMessages,
.comp.compTextArea:not(._noLabel) > ._validationMessages,
.comp.compDropdown:not(._noLabel) > ._validationMessages,
.comp.compPhoneNumber:not(._noLabel) > ._validationMessages,
.comp.compCalendar:not(._noLabel) > ._validationMessages {
	top: auto;
	bottom: 100%;
	left: auto;
	right: 0px;
	margin: 0px 0px 13px 0px;
	max-width: 70%;
	align-items: flex-end;
	text-align: right;
}

/* A field with no label (a rule row, an inline filter) has no label line: a message there
   lands on whatever sits above it (QA-0225). It stays below the box, and the field takes
   the room for it while the message shows, so it never covers the next row either. */
.comp.compTextBox._noLabel:has(> ._validationMessages),
.comp.compTextArea._noLabel:has(> ._validationMessages),
.comp.compDropdown._noLabel:has(> ._validationMessages),
.comp.compPhoneNumber._noLabel:has(> ._validationMessages),
.comp.compCalendar._noLabel:has(> ._validationMessages) {
	margin-bottom: 24px;
}

/* 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;
}

/* 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 #565F89;
}

.comp.comp.compToggleButton.compToggleButton._off._disabled:not(._outlined) {
	background-color: #282D40;
	border-color: #565F89;
	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 #C0CAF545;
	border-bottom: 1px solid #C0CAF545;
	box-sizing: border-box;
}
body .comp.compTable ._tablePagination._tablePagination > ._leftArrow._leftArrow {
	border-left: 1px solid #C0CAF545;
	padding-left: 16px;
}
body .comp.compTable ._tablePagination._tablePagination > ._rightArrow._rightArrow {
	border-right: 1px solid #C0CAF545;
	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: #13151F;
}
body .comp.compTable ._tablePagination._tablePagination > ._pageNumber._pageNumber._selected._selected {
	background-color: #C0CAF51C;
}

/* 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: 0px 0 0 0px;
	border-right: none;
	box-sizing: border-box;
}

body .comp.compFileSelector ._label {
	color: #9BA3C4;
	font: 500 12px/18px 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}
/* 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: #9BA3C4;
	font: 400 14px/20px 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}
body .comp.compFileSelector ._progressBarUploadButton {
	border-color: #C0CAF545;
	color: #E4E8F7;
	font: 500 13px/20px 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}
body .comp.compFileSelector ._progressBarFileUploadText {
	font: 500 14px/20px 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}

/* 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: #13151F;
	border: 1px solid #C0CAF545;
	border-radius: 0px;
	box-shadow: none;
}
body .comp.compFileSelector ._InnerProgressBarContainer {
	padding: 0px 5px 0px 14px;
}

/* 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: #C0CAF51C;
	color: #9BA3C4;
	border-radius: 999px;
	height: 40px;
	padding: 0px 14px;
}
body ._fileBrowser ._searchInputContainer:focus-within {
	background-color: #13151F;
	border-color: #686F93;
	box-shadow: 0 0 0 3px #FBBF2459;
}
body ._fileBrowser ._searchInputContainer input {
	background-color: transparent;
	color: #E4E8F7;
}
body ._fileBrowser button,
body ._fileBrowser ._upload {
	height: 32px;
	background-color: #13151F;
	border: 1px solid #C0CAF545;
	color: #E4E8F7;
	border-radius: 8px;
	box-shadow: none;
	font: 500 13px/20px 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
	padding: 0px 12px;
}
body ._fileBrowser button:hover,
body ._fileBrowser ._upload:hover {
	background-color: #FBBF2414;
}
body ._fileBrowser button:disabled {
	background-color: transparent;
	border-color: #C0CAF524;
	color: #757DA2;
}
body ._fileBrowser ._files ._eachFile::after {
	border-color: #C0CAF524;
	border-radius: 10px;
}
body ._fileBrowser ._files ._eachFile._selected::before,
body ._fileBrowser ._files ._eachFile._selectable:hover::before {
	border-color: #E4E8F7;
	border-radius: 12px;
}
body ._fileBrowser ._files ._eachFile._selectable:hover,
body ._fileBrowser ._files ._eachFile._directory:hover {
	background-color: #FBBF2414;
}
body ._fileBrowser ._files ._eachFile ._imageLabel {
	color: #E4E8F7;
	background-color: #C0CAF51C;
}
body ._fileBrowser ._confirmationBoxContent,
body ._fileBrowser ._popupBackground ._popupContainer,
body ._fileBrowser ._iroContainer,
body ._fileBrowser ._fullScreenButton,
body ._fileBrowser ._imageZOOM {
	background: #1A1D29;
	color: #E4E8F7;
}
body ._fileBrowser ._confirmationBoxContent {
	border-radius: 14px;
	padding: 16px;
}
body ._fileBrowser ._controlLabel,
body ._fileBrowser ._controlInput span {
	color: #E4E8F7;
}
body ._fileBrowser ._controlInput {
	background-color: #C0CAF51C;
}
body ._fileBrowser ._controlHeader {
	border-bottom-color: #E4E8F7;
}

/* 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: #C0CAF524; }
}

@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(228,232,247,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(228,232,247,0.40);
}

#shellCrumbWrap li.listItem {
	color: #9BA3C4;
}

#shellCrumbWrap li.listItem + li.listItem::before {
	color: #757DA2;
}

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

/* 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: #E4E8F7;
}

/* 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: #9BA3C4;
}

.comp.compThemeSwitcher ._trigger:hover {
	background: #FBBF2414;
	color: #E4E8F7;
}

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

/* 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: invert(0.85);
}

/* 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: #C0CAF514 !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: #FBBF24;
	color: #0A0B11;
	border-color: #FBBF24;
}

/* 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: #1A1D29;
}

.comp.compCalendar.compCalendar.compCalendar.compCalendar.compCalendar ._dropdownContainer {
	box-shadow: 0 0 0 1px #C0CAF524;
}

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