@charset "UTF-8";
:root {
  --c-brand: #0F4E66;
  --c-brand-dark: #1F5E77;
  --c-brand-muted: #6E8FA1;
  --c-accent: #E18400;
  --c-danger: #DF3F2D;
  --c-success: #42A951;
  --c-warning: #F6BC00;
  --c-info: #5A79BB;
  --c-cat-brown: #965D1D;
  --c-cat-purple: #773F8F;
  --c-cat-sand: #E3A159;
  --c-brand-light: #167092;
  --c-brand-active: #0c4054;
  --c-brand-deep: #082c3a;
  --c-brand-tint: #bce5f5;
  --c-accent-deep: #C57400;
  --c-danger-deep: #bc2d1d;
  --c-success-deep: #34843f;
  --c-warning-deep: #b98d00;
  --c-danger-ink: #bc2d1d;
  --c-accent-ink: #9A5800;
  --c-warning-ink: #7E6000;
  --c-brand-muted-ink: #4F6B7A;
  --c-surface: #ffffff;
  --c-surface-raised: #ffffff;
  --c-surface-sunken: #E2E7EC;
  --c-brand-fill: #0F4E66;
  --c-canvas-top: #0F4E66;
  --c-canvas-bottom: #082c3a;
  --c-canvas-glow: #167092;
  --c-sidebar-card: #17607D;
  --c-sidebar-label: #A9C2CE;
  --c-sidebar-row-hover: rgba(255, 255, 255, .07);
  --c-sidebar-row-active: #17607D;
  --c-sidebar-submenu: #1F5E77;
  --c-sidebar-line: #6E8FA1;
  --c-bar: #ffffff;
  --c-sidebar: #0F4E66;
  --c-link: #337ab7;
  --c-link-hover: #23527c;
  --c-field-text: #555555;
  --c-match-highlight: #feffde;
  --c-surface-subtle: #f5f5f5;
  --c-surface-muted: #eeeeee;
  --c-row-stripe: #F5F8F9;
  --c-row-hover: #E6EDF0;
  --c-table-row-hover: #EDF2F5;
  --c-warning-wash-a: #fffcee;
  --c-warning-wash-b: #fffef8;
  --c-border: #D5DBE2;
  --c-neutral: #C0C0C0;
  --c-on-fill: #ffffff;
  --c-text: #333333;
  --c-ink: #000000;
  --c-tooltip-surface: #263238;
  --c-tooltip-text: #ffffff;
  --c-shadow: #000000;
  --c-powershell: #012456;
}

[data-theme=light] {
  --c-brand: #0F4E66;
  --c-brand-dark: #1F5E77;
  --c-brand-muted: #6E8FA1;
  --c-accent: #E18400;
  --c-danger: #DF3F2D;
  --c-success: #42A951;
  --c-warning: #F6BC00;
  --c-info: #5A79BB;
  --c-cat-brown: #965D1D;
  --c-cat-purple: #773F8F;
  --c-cat-sand: #E3A159;
  --c-brand-light: #167092;
  --c-brand-active: #0c4054;
  --c-brand-deep: #082c3a;
  --c-brand-tint: #bce5f5;
  --c-accent-deep: #C57400;
  --c-danger-deep: #bc2d1d;
  --c-success-deep: #34843f;
  --c-warning-deep: #b98d00;
  --c-danger-ink: #bc2d1d;
  --c-accent-ink: #9A5800;
  --c-warning-ink: #7E6000;
  --c-brand-muted-ink: #4F6B7A;
  --c-surface: #ffffff;
  --c-surface-raised: #ffffff;
  --c-surface-sunken: #E2E7EC;
  --c-brand-fill: #0F4E66;
  --c-canvas-top: #0F4E66;
  --c-canvas-bottom: #082c3a;
  --c-canvas-glow: #167092;
  --c-sidebar-card: #17607D;
  --c-sidebar-label: #A9C2CE;
  --c-sidebar-row-hover: rgba(255, 255, 255, .07);
  --c-sidebar-row-active: #17607D;
  --c-sidebar-submenu: #1F5E77;
  --c-sidebar-line: #6E8FA1;
  --c-bar: #ffffff;
  --c-sidebar: #0F4E66;
  --c-link: #337ab7;
  --c-link-hover: #23527c;
  --c-field-text: #555555;
  --c-match-highlight: #feffde;
  --c-surface-subtle: #f5f5f5;
  --c-surface-muted: #eeeeee;
  --c-row-stripe: #F5F8F9;
  --c-row-hover: #E6EDF0;
  --c-table-row-hover: #EDF2F5;
  --c-warning-wash-a: #fffcee;
  --c-warning-wash-b: #fffef8;
  --c-border: #D5DBE2;
  --c-neutral: #C0C0C0;
  --c-on-fill: #ffffff;
  --c-text: #333333;
  --c-ink: #000000;
  --c-tooltip-surface: #263238;
  --c-tooltip-text: #ffffff;
  --c-shadow: #000000;
  --c-powershell: #012456;
}

[data-theme=dark] {
  --c-surface: #1E252A;
  --c-surface-raised: #272F35;
  --c-surface-sunken: #14191C;
  --c-text: #E3E7E9;
  --c-ink: #FFFFFF;
  --c-tooltip-surface: #E3E7E9;
  --c-tooltip-text: #14191C;
  --c-brand-fill: #14323F;
  --c-canvas-top: #14323F;
  --c-canvas-bottom: #0A161B;
  --c-canvas-glow: #1E5468;
  --c-sidebar-card: #232C33;
  --c-sidebar-label: #9AA6AE;
  --c-sidebar-row-active: #333F47;
  --c-sidebar-submenu: #141A1E;
  --c-sidebar-line: #3A464E;
  --c-bar: #1E252A;
  --c-sidebar: #1A2126;
  --c-link: #6FA8DC;
  --c-link-hover: #9CC3E8;
  --c-field-text: #C7CDD1;
  --c-match-highlight: #4A431C;
  --c-surface-subtle: #232A2F;
  --c-surface-muted: #2B3339;
  --c-row-stripe: #222B31;
  --c-row-hover: #2A363E;
  --c-table-row-hover: #2C363C;
  --c-warning-wash-a: #2A2620;
  --c-warning-wash-b: #241F1A;
  --c-border: #333C42;
  --c-neutral: #6B767E;
  --c-brand: #2E86AB;
  --c-brand-dark: #2A7D9E;
  --c-brand-muted: #8FA9B8;
  --c-brand-light: #3E8FB5;
  --c-brand-active: #26708F;
  --c-brand-deep: #1E6C8C;
  --c-brand-tint: #14323F;
  --c-danger-ink: #DF3F2D;
  --c-accent-ink: #E18400;
  --c-warning-ink: #F6BC00;
  --c-brand-muted-ink: #8FA9B8;
}

/***************************************************  Sidebar *********************************************************/
/* The collapsed sidebar. It is not hidden any more, just narrowed to its icons, so it still occupies
   space and every bar beside it still has to be offset — see --sidebar-width. */
/* also used in device.js */
/***************************************************  Menu Bar ********************************************************/
/* One row of entries. The bar shows exactly one; the rest wrap below it and are clipped until expanded.
   The row's top inset is derived from the two, so a single row sits centred in the bar. */
/* Between wrapped rows of an open menu bar; without it the rows sit on one another. */
/* The band of page sections, drawn beside the scrolling content so it can reach both edges of the window. */
/* Padding around a page's content, inside the scroller. Named because a sticky header has to bleed out by
   exactly this much to cover the content passing underneath it.
   The scrollbar gutter is reserved on the right only (content.scss), so on the left this is the whole margin,
   the same in every browser whatever its scrollbar is as wide. */
/* The same on the right, where the scrollbar gutter (reserved there, content.scss) already takes part of it:
   --scrollbar-gutter is its width, measured on the scroller (scrollbar-gutter.directive.js), so the content
   ends 16px from the window's edge as it starts 16px from the sidebar. */
/* What a page leaves above its first content: as much as it has beside it. A page's first element starts this
   far down, a whiteframe first thing 5px less for its own margin. */
/* Where a page's content visibly starts from the window's edge. The bars above it (page tabs, menu bar) start
   their first label or button on this line too, so tabs, actions, filters and the table share one left edge. */
/*************************************************  Background ********************************************************/
/****************************************************  General ********************************************************/
/* Buttons and the controls that read as buttons. Slightly rounder than $defaultBorderRadius, which is the
   radius for panels and inputs — the two were drifting apart across the toolbar (4px, 6px, 8px). */
/* Where content starts inside the header bars, measured from the bar's left edge. The breadcrumb in the top
   bar and the first item in the menu bar below it both land here, so the two line up in a column. It is the
   menu item's own margin (10px) plus its padding (12px) — change those together. */
/* The checkbox. Smaller than a button's radius because the box is 18px across, where 5px reads as the
   same softness 8px does at 40px — and nothing else in the app is Material's 2px. */
/* The search field. A soft filled pill rather than an outlined box, so it reads as a place to type rather
   than a control competing with the buttons beside it. */
/* The sidebar's own radius. Larger than the app default: its rows and the organisation card are inset
   panels floating on the sidebar fill, not controls sitting in a form. */
/* What a dialog insets its own content by — Material's md-dialog-content padding. */
/* The device page's section rail. Named because two things have to agree on it: the rail column itself and
   the filter above it, which reads as the head of that column rather than a control floating beside it. */
/* Where the section toolbar and the rail come to rest under the device header, which is sticky at the top
   of the page. The toolbar stops first; the rail stops under it. */
/**************************************************  Breakpoints ******************************************************/
/* The canvas behind signing in and picking an organisation: the brand as a calm diagonal gradient, lit from the lower
   right, with a fine dot grid that fades out downwards. It was a photograph of blurred bubbles: soft where the rest
   of the app is flat, a fixed image in either theme, and a large download for a screen seen for seconds. */
/* Custom scrollbar for scroll containers that are part of the page design (tables, panels,
   dropdown lists) rather than the document itself. WebKit/Blink only - Firefox gets the coarser
   standard properties, every other engine keeps its native scrollbar.

   Include it on the element that carries the overflow:

   .my-scroll-container {
     overflow: auto;
     @include custom-scrollbar();
   }
*/
/* The track is transparent, so only the thumb is drawn and it floats over whatever is behind the
   scroll container. Pass a colour for $track if a container needs the gutter filled instead. */
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotating-border-spin {
  to {
    --border-angle: 360deg;
  }
}
@keyframes icon-pulse-anim {
  0%, 100% {
    opacity: var(--icon-pulse-min-opacity, 0.5);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(var(--icon-pulse-max-scale, 1.25));
  }
}
/* The one monospace stack.
 *
 * There were six, spread over 27 sites — "Roboto Mono","Courier New",monospace; 'Roboto Mono',monospace;
 * 'SF Mono','Monaco','Menlo','Consolas',monospace; 'Courier New',Courier,monospace; and twice a bare
 * monospace — and none of them got Roboto Mono, because it was never loaded: the font link asked for
 * Open Sans alone. Every one of them was rendering a fallback, and because the stacks differed they did
 * not all fall back to the same face. Roboto Mono is loaded now (see the css2 link in index.html and
 * index_dev.html), and this is where it is named.
 *
 * What it is for: values a machine wrote — addresses, mount points, volume and adapter names, capacities,
 * hashes, versions, schedules, script text. Not prose, and not anything a person chose. */
@font-face {
  font-family: MagistralC-Bold;
  src: url(./scss/fonts/MagistralC-Bold.otf) format("embedded-opentype"), url(./scss/fonts/MagistralC-Bold.otf?#iefix) format("truetype");
  font-weight: normal;
  font-style: normal;
}
.version-sidebar-entry, .form-title.active, .form-title:hover {
  background-color: var(--c-accent);
  color: var(--c-ink);
  cursor: pointer;
}

/**********************/
/* IE 11 flex bug fix */
:-ms-fullscreen [class*=flex], :root [class*=flex] {
  flex-basis: auto;
}

input:disabled {
  opacity: 1;
}

/**********************/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select,
textarea,
input {
    font-size: 16px;
  }
}
input {
  /* $border, not the 12% black ink alpha this drew in: panels, cards, tables, pills and the disabled
     field are all on the same hairline, and form fields were the last thing still mixing its own.
   *
   * With its own surface, because $border is a tint rather than an ink alpha: it reads against a white
   * panel and disappears against the sunken ground some forms sit on — the new hardware class page put a
   * transparent field with an #E9EBEE border on an #E9EBEE background, which showed a label and no box.
   * A field is a surface; it should not depend on what is behind it. */
  border: 1px solid var(--c-border);
  background-color: var(--c-surface);
  border-radius: 6px;
  padding: 0 4px;
  height: 30px;
}
input:focus {
  border-color: var(--c-brand);
  outline: none;
}
input[disabled] {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}

html {
  overflow-x: hidden;
  /* angular-material paints <html> (#fafafa light / #303030 dark) and body does not always cover it —
     visible during route transitions and behind short pages. The colour is set for the same reason: it is
     what anything outside body's subtree inherits. */
  background-color: var(--c-surface-sunken);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}

body {
  font-family: "Open Sans", sans-serif, arial, verdana, tahoma;
  padding: 0;
  margin: 0;
  color: var(--c-text);
  background-color: var(--c-surface-sunken);
  /*-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;*/
}

img {
  max-width: 100%;
  height: auto;
}

.info-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.info-footer .footer-link {
  color: var(--c-ink);
}
.info-footer .copyright-wrapper {
  text-align: left;
}
.info-footer .more-info-wrapper {
  text-align: right;
}
.info-footer .more-info-wrapper i {
  font-size: 18px;
  height: 18px;
  vertical-align: middle;
}
.info-footer .version {
  display: none;
}
@media (min-width: 800px) {
  .info-footer .version {
    display: block;
    margin-right: 10px;
  }
}

.presentation-mode-switch md-switch.md-checked:not([disabled]) .md-thumb {
  background-color: color-mix(in srgb, var(--c-accent), transparent 0%);
}
.presentation-mode-switch md-switch.md-checked:not([disabled]) .md-bar {
  background-color: color-mix(in srgb, var(--c-accent), transparent 50%);
}

.version .version-title {
  font-weight: bold;
}

@media (min-width: 600px) {
  .info-footer {
    background-color: color-mix(in srgb, var(--c-ink), transparent 40%);
    color: var(--c-on-fill);
    padding: 2px 10px 2px 10px;
  }
  .info-footer .footer-link {
    color: var(--c-on-fill);
  }
}
@media (max-width: 599px) {
  .info-footer {
    text-align: center;
    color: var(--c-ink);
    padding: 2px 10px 2px 10px;
  }
}
.tooltip-multiline {
  height: auto;
}
.tooltip-multiline .tooltip-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.md-button {
  text-transform: none;
}

.md-tab {
  text-transform: none;
}

.md-datepicker-calendar-pane {
  z-index: 2000;
}

.mark-point {
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background-color: var(--c-danger);
  position: absolute;
}

.md-raised.button-grey {
  background-color: var(--c-neutral) !important;
}
.md-raised.no-border-radius {
  border-radius: 0;
}

md-content {
  background-color: inherit;
}

.main-scrollable-content-wrapper {
  height: 100%;
}
.main-scrollable-content-wrapper.workspace-active {
  padding-top: 0 !important;
}
.main-scrollable-content-wrapper.workspace-active .main-scrollable-content {
  overflow: hidden;
  scrollbar-gutter: auto;
}
.main-scrollable-content-wrapper.page-has-menu {
  padding-top: 52px;
}
.main-scrollable-content-wrapper .main-scrollable-content {
  height: 100%;
  overflow: auto;
  /* The platform scrollbar is 15px of opaque grey against the page. Same treatment the sidebar's list
     already uses, so the two scroll areas match. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
  /* Reserved so the content doesn't shift sideways when a page becomes long enough to scroll. On the right
     only: its width differs per browser (Chrome 11px, Safari 8px, none with macOS overlay scrollbars), and
     reserved on both edges it moved every page's left edge with it, away from the bars above. */
  scrollbar-gutter: stable;
}
.main-scrollable-content-wrapper .main-scrollable-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.main-scrollable-content-wrapper .main-scrollable-content::-webkit-scrollbar-track {
  background: transparent;
}
.main-scrollable-content-wrapper .main-scrollable-content::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.main-scrollable-content-wrapper .main-scrollable-content::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.main-scrollable-content-wrapper .main-scrollable-content::-webkit-scrollbar-corner {
  background: transparent;
}
.main-scrollable-content-wrapper .main-scrollable-content .main-content-padding-container {
  padding-top: 1px;
  margin-top: -1px;
}
.main-scrollable-content-wrapper .main-scrollable-content .main-content-padding-container.page-with-padding {
  padding-right: max(0px, 16px - var(--scrollbar-gutter, 0px));
  padding-bottom: 16px;
  padding-left: 16px;
}

.page-content {
  margin-top: 64px;
  background-color: var(--c-surface-sunken);
}
.page-content .dynamic-content {
  height: 100%;
  overflow: unset;
  /* Its own block formatting context: a page's first margin (the detail forms' #command-section, a card's top
     margin) stays inside it. It collapsed through and pushed this box, which is exactly the height of the
     scrolling area, 23px down, and every short form page scrolled by a few pixels. */
  display: flow-root;
}

.workspace-active {
  height: 100%;
  overflow: hidden;
}

.workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--c-surface-sunken);
}

.workspace-toolbar {
  flex: 0 0 42px;
  min-width: 0;
  /* The line under the row, drawn inside it rather than as its border: the active tab paints over it and so
     joins the page below, as a browser's does. A border lies outside the tab strip, which clips. */
  box-shadow: inset 0 -1px 0 var(--c-border);
  background: var(--c-surface);
  color: var(--c-field-text);
  font-size: 13px;
  font-weight: 600;
}
.workspace-toolbar .workspace-toolbar-title {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--c-border);
}
.workspace-toolbar .workspace-toolbar-title > .material-icons {
  margin-right: 8px;
  color: var(--c-brand);
  font-size: 19px;
}
.workspace-toolbar .workspace-toolbar-actions {
  flex: none;
  margin-left: auto;
  padding: 0 12px 0 8px;
}
.workspace-toolbar .workspace-mode-switch {
  margin-left: 0;
}
.workspace-toolbar .workspace-split-note {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 0 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
.workspace-toolbar .workspace-tabs-more {
  display: flex;
  flex: none;
  align-items: center;
  padding-left: 4px;
}
.workspace-toolbar .workspace-tabs-more-button {
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-field-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.workspace-toolbar .workspace-tabs-more-button:hover {
  background: var(--c-surface-sunken);
}
.workspace-toolbar .workspace-toolbar-button {
  min-width: 0;
  min-height: 30px;
  height: 30px;
  margin: 0 0 0 6px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-field-text);
  font-size: 12px;
  line-height: 28px;
  text-transform: none;
}
.workspace-toolbar .workspace-toolbar-button.is-active {
  border-color: color-mix(in srgb, var(--c-brand), transparent 68%);
  background: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}
.workspace-toolbar .workspace-toolbar-button .material-icons {
  margin-right: 3px;
  font-size: 16px;
  vertical-align: text-bottom;
}

/* In the toolbar's row now, between its title and its buttons. Tabs shrink to their minimum, then the strip
   scrolls sideways without a scrollbar of its own (the wheel and the "+n" list reach the rest), and the
   edge that has more fades out (workspace-tab-strip.directive.js sets the classes). */
.workspace-tabs {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  padding: 5px 8px 0;
  scroll-padding-inline: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.workspace-tabs::-webkit-scrollbar {
  display: none;
}
.workspace-tabs.has-more-right {
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.workspace-tabs.has-more-left {
  mask-image: linear-gradient(90deg, transparent, #000 32px);
}
.workspace-tabs.has-more-left.has-more-right {
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.workspace-tab {
  display: flex;
  position: relative;
  flex: 0 1 220px;
  align-items: center;
  gap: 6px;
  min-width: 110px;
  max-width: 240px;
  padding: 0 8px 0 10px;
  overflow: hidden;
  /* Every tab a tab, active or not: a shape with a light fill and a frame, standing on the row's line (the
     1px below leaves it showing). Text alone read as a label, and only the active tab looked like one. */
  margin-bottom: 1px;
  border: 1px solid var(--c-border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  /* The active one in the colour of the bar the page starts with, covering the row's line: tab and page are
     one piece. */
  /* An inactive tab shows its menu and close only while pointed at or focused: at the narrowest the two
     took half the tab and left about three letters of its title. Its width does not depend on them, so
     nothing moves when they appear. Only where there is a pointer that hovers — on touch they stay. */
}
.workspace-tab > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-tab:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 76%);
  color: var(--c-field-text);
}
.workspace-tab.is-active {
  min-width: 150px;
  margin-bottom: 0;
  border-color: var(--c-border);
  background: var(--c-bar);
  color: var(--c-brand);
  font-weight: 600;
}
.workspace-tab.is-dragging {
  opacity: 0.45;
}
@media (hover: hover) {
  .workspace-tab:not(.is-active):not(:hover):not(:focus-within) .workspace-tab-menu,
.workspace-tab:not(.is-active):not(:hover):not(:focus-within) .workspace-tab-close {
    display: none;
  }
}
.workspace-tab.is-drop-before::before, .workspace-tab.is-drop-after::after {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
  content: "";
}
.workspace-tab.is-drop-before::before {
  left: 0;
}
.workspace-tab.is-drop-after::after {
  right: 0;
}
.workspace-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-brand), transparent 55%);
  outline-offset: -2px;
}

.workspace-tab-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.workspace-tab-action .material-icons {
  font-size: 16px;
}
.workspace-tab-action:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 92%);
  color: var(--c-field-text);
}

.workspace-tab-menu {
  display: flex;
  flex: 0 0 auto;
}

.workspace-tab-menu-content {
  min-width: 210px;
}
.workspace-tab-menu-content .material-icons {
  margin-right: 10px;
  font-size: 18px;
  vertical-align: text-bottom;
}

.workspace-tab-pane {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--c-surface);
}
.workspace-tab-pane iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--c-surface-sunken);
}

.workspace-panes {
  display: grid;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.workspace-panes.is-resizing {
  user-select: none;
}

.workspace-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--c-surface);
}
.workspace-pane .workspace-pane-title {
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 7px 0 12px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-field-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.workspace-pane .workspace-pane-title.is-active {
  box-shadow: inset 0 -2px 0 var(--c-brand);
  color: var(--c-brand);
}
.workspace-pane .workspace-pane-title > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-pane .workspace-pane-title .workspace-pane-history,
.workspace-pane .workspace-pane-title .workspace-pane-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.workspace-pane .workspace-pane-title .workspace-pane-history:hover, .workspace-pane .workspace-pane-title .workspace-pane-history:focus-visible,
.workspace-pane .workspace-pane-title .workspace-pane-refresh:hover,
.workspace-pane .workspace-pane-title .workspace-pane-refresh:focus-visible {
  background: color-mix(in srgb, var(--c-ink), transparent 60%);
  color: var(--c-brand);
  outline: 0;
}
.workspace-pane .workspace-pane-title .workspace-pane-history .material-icons,
.workspace-pane .workspace-pane-title .workspace-pane-refresh .material-icons {
  font-size: 17px;
}
.workspace-pane .workspace-pane-title .workspace-pane-history[disabled],
.workspace-pane .workspace-pane-title .workspace-pane-refresh[disabled] {
  cursor: default;
  opacity: 0.35;
}
.workspace-pane iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--c-surface-sunken);
}

.workspace-divider {
  position: relative;
  z-index: 1;
  cursor: col-resize;
  background: var(--c-surface-sunken);
}
.workspace-divider::after {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 4px;
  height: 36px;
  border-radius: 2px;
  background: var(--c-border);
  content: "";
  transform: translateY(-50%);
}
.workspace-divider:hover, .workspace-divider:active {
  background: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.workspace-divider:hover::after, .workspace-divider:active::after {
  background: var(--c-brand);
}

.workspace-resize-shield {
  position: absolute;
  z-index: 2;
  inset: 0;
  cursor: col-resize;
}

.workspace-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  /* Beside a "New" pill (TableLinkCreator.newBadge) the name is what gives way when the cell is narrower than
     name, pill and button — a column sized by hand, or held at the widths of the rows drawn first while one
     with a pill is drawn later. It shrank without being cut and ran under the pill. Now it stays on one line
     and ends in an ellipsis (the full name is its title, workspace-tab-link.directive.js). Links without a pill
     wrap as before. */
}
.workspace-link > a {
  min-width: 0;
}
.workspace-link.has-badge > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-link.has-badge > .new-badge {
  flex: none;
}
.workspace-link.has-badge .workspace-link-open {
  width: 0;
  margin-left: 0;
}
.workspace-link.has-badge:hover .workspace-link-open, .workspace-link.has-badge:focus-within .workspace-link-open, tr:hover .workspace-link.has-badge .workspace-link-open {
  width: 24px;
  margin-left: 5px;
}
.workspace-link .workspace-link-open {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 0 0 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-brand);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px) scale(0.88);
  transition: opacity 0.14s ease, transform 0.14s ease, background-color 0.14s ease;
}
.workspace-link .workspace-link-open .material-icons {
  font-size: 17px;
  line-height: 17px;
}
.workspace-link .workspace-link-open:hover, .workspace-link .workspace-link-open:focus-visible {
  background: color-mix(in srgb, var(--c-brand), transparent 88%);
  outline: 0;
}
.workspace-link:hover .workspace-link-open, .workspace-link:focus-within .workspace-link-open, tr:hover .workspace-link .workspace-link-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.workspace-link-tooltip {
  position: fixed;
  z-index: 1000;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--c-field-text);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--c-ink), transparent 78%);
  color: var(--c-surface);
  font: 600 12px/1.2 "Open Sans", sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translate(-3px, -50%);
  transition: opacity 0.14s ease, transform 0.14s ease;
  white-space: nowrap;
}
.workspace-link-tooltip::before {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid var(--c-field-text);
  border-bottom: 5px solid transparent;
  content: "";
  transform: translateY(-50%);
}
.workspace-link-tooltip.is-before {
  transform: translate(3px, -50%);
}
.workspace-link-tooltip.is-before::before {
  right: auto;
  left: 100%;
  border-right: 0;
  border-left: 5px solid var(--c-field-text);
}
.workspace-link-tooltip.is-visible {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (hover: none) {
  .workspace-link .workspace-link-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}
body.workspace-pane .page-content {
  margin-top: 0;
}
body.workspace-pane .menu-bar {
  left: 0;
  top: 0;
  width: 100%;
}
body.workspace-pane .page-tabs-bar {
  left: 0;
  top: 0;
  width: 100%;
}
body.workspace-pane .page-tabs-bar ~ .menu-bar {
  top: 44px;
}
body.workspace-pane .footer-strip {
  left: 0;
  width: 100%;
}
body.workspace-pane .helpkit-launcherButton {
  display: none !important;
}
body.workspace-pane .main-scrollable-content-wrapper {
  height: 100%;
}
body.workspace-pane .loading-bar {
  display: none;
}

@media (max-width: 1023px) {
  .workspace-panes {
    display: none !important;
  }
}
@media (max-width: 959px) {
  .workspace-toolbar {
    flex-basis: 38px;
  }
  .workspace-toolbar .workspace-toolbar-title,
.workspace-toolbar .workspace-toolbar-actions {
    padding: 0 8px;
  }
  .workspace-toolbar .workspace-toolbar-button {
    margin-left: 4px;
    padding: 0 6px;
  }
  .workspace-pane-title {
    padding: 0 8px;
  }
}
.ajax-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -32px;
  display: block;
}

.state-circle, .disabled-circle, .enabled-circle {
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-ink);
  border-radius: 12px;
}
.state-circle i, .disabled-circle i, .enabled-circle i {
  font-size: 22px;
  color: var(--c-on-fill);
}

.enabled-circle {
  background-color: var(--c-success);
}

.disabled-circle {
  background-color: var(--c-danger);
}

.true {
  display: block;
}

#view-section {
  padding: 0 20px 20px;
  min-width: 300px;
}

.shadow {
  -moz-box-shadow: 0 0 5px var(--c-neutral);
  box-shadow: 0 0 5px var(--c-neutral);
}

#info-div {
  margin: 20px 0;
  padding: 20px;
}
#info-div h3 {
  margin: 0 0 10px 0;
}

#jobsTable-btn-group {
  margin-bottom: 20px;
}

#job-create-tasks-table-info {
  margin: 10px 0;
}

#command-section .btn {
  border-radius: 0;
  text-shadow: none;
  color: var(--c-ink);
}
#command-section ul li {
  padding: 5px;
}

#search-section {
  float: right;
  margin-bottom: 10px;
}

#table-section {
  clear: both;
}

#content-img-section {
  float: right;
}

#input-section {
  clear: both;
  padding-top: 10px;
}

.pageName {
  padding: 0 0 10px 0;
}

.form-title {
  font-size: 25px;
  padding: 10px;
  background-color: var(--c-brand);
  border: 1px solid var(--c-brand);
  color: var(--c-on-fill);
}
.form-section {
  margin-top: 30px;
  min-width: 325px;
  display: table;
}

.closed {
  display: none;
}

.form-control {
  border-color: var(--c-brand);
  border-radius: 0;
}
.form-control:focus {
  border-color: var(--c-brand);
}

.form-area {
  padding-top: 15px;
  border: 1px solid;
  border-top: 0;
}
.form-area tbody tr:first-child td {
  border: none;
}

.filter-title {
  padding-left: 10px;
}

.error-text {
  color: var(--c-danger);
}

* {
  box-sizing: border-box;
}

.input-group-addon {
  cursor: pointer;
}

.btn {
  border-radius: 0;
  border: 1px solid var(--c-brand);
}

.dropdown-menu {
  border-radius: 0;
  padding-left: 10px;
}

.background-overlay {
  width: 100%;
  height: 100%;
  background-color: var(--c-ink);
  z-index: 10001;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  border: none;
  display: table-cell;
  vertical-align: middle;
  min-height: 10em;
  text-align: center;
  opacity: 0.6;
}

.chosenActions {
  width: 100%;
}
.chosenActions > div > md-menu {
  float: right;
  width: 20px;
  min-width: 20px;
}

.dragAndDropActionList .md-button {
  float: right;
  margin-top: -4px;
  width: 20px;
  min-height: 20px;
  height: 20px;
}
.dragAndDropActionList .md-button > md-icon {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
}
.dragAndDropActionList .dndDraggingSource {
  display: none;
}

.actionList {
  margin-bottom: 20px;
  padding: 0;
}
.actionList .md-button {
  float: right;
  margin-top: -4px;
  width: 20px;
  min-height: 30px;
  height: 30px;
}
.actionList .md-button > md-icon {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  margin-left: -5px;
}
.actionList li {
  list-style-type: none;
  margin-bottom: 4px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: none;
}
.actionList li div .dropdown-toggle {
  width: 180px;
}
.actionList .action {
  height: auto;
}
.actionList .actionText {
  width: 90%;
  white-space: normal;
  word-break: break-all;
  float: left;
  color: var(--c-ink);
}
.actionList .caret-right {
  margin-top: 10px;
  float: right;
}

.dndPlaceholder {
  background-color: var(--c-neutral);
  display: block;
  min-height: 40px;
}

#login-section {
  min-width: 280px;
  margin: auto;
  padding: 80px;
  max-width: 800px;
}

.custom-div {
  background: var(--c-surface);
  border: 1px solid var(--c-neutral);
  box-shadow: 1px 2px 4px color-mix(in srgb, var(--c-shadow), transparent 88%);
  border-radius: 0;
}

a {
  cursor: pointer;
}

.location-header {
  margin: 20px;
}

.locationObject {
  display: block;
  border: 3px solid var(--c-brand);
  text-align: center;
  width: 500px;
  margin: 10px auto;
  padding: 10px;
}

.port {
  border-color: var(--c-brand-muted);
}

.cableObject {
  border: 3px solid var(--c-accent);
  text-align: center;
  width: 150px;
  margin: 10px auto;
  padding: 5px;
  background-color: var(--c-neutral);
}

.important-bold {
  font-weight: bold;
  font-size: 20px;
}

.locationImage {
  padding-top: 5px;
}

#locationTree > ul {
  padding-left: 0;
}
#locationTree > ul > li::before {
  border: 0;
}
#locationTree > ul > li::after {
  border: 0;
}
#locationTree li {
  margin: 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0;
}
#locationTree li a {
  display: inline-block;
  border: 1px solid var(--c-neutral);
  padding: 5px 10px;
  text-decoration: none;
  color: var(--c-ink);
  font-family: "Open Sans", sans-serif, arial, verdana, tahoma;
  font-size: 20px;
  min-width: 32px;
}
#locationTree li:last-child::before {
  height: 30px;
}
#locationTree li ul li a {
  font-size: 15px;
}
#locationTree li::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid var(--c-neutral);
  bottom: 50px;
}
#locationTree li::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 25px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid var(--c-neutral);
}
#locationTree .dropdown-menu li::before {
  border: none;
}
#locationTree .dropdown-menu li::after {
  border: none;
}
#locationTree .dropdown-menu li {
  padding: 10px;
}
#locationTree .dropdown-menu li:hover {
  background-color: var(--c-neutral);
}
#locationTree .btn-group {
  vertical-align: top;
}
#locationTree .closed {
  display: none;
}
#locationTree table tbody tr:first-child td {
  border-top: none;
}

.blue-column {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}

.light-blue-column {
  background-color: var(--c-brand-muted);
  color: var(--c-on-fill);
}

.orange-column {
  background-color: var(--c-accent);
  color: var(--c-ink);
}

.grey-column {
  background-color: var(--c-surface);
  color: var(--c-ink);
}

.alert {
  border-radius: 0;
  background-color: var(--c-surface);
}

.alert_field {
  border-radius: 0;
  background-color: var(--c-accent) !important;
}

.locationHardwareList {
  display: block;
  border: 3px solid var(--c-brand);
  text-align: center;
  width: 500px;
  margin: 10px auto;
  padding: 10px;
}

.locationHardwareMac {
  border: 3px dotted var(--c-brand);
  text-align: center;
  width: 150px;
  margin: 10px auto;
  padding: 5px;
}

.locationHardware {
  border: 3px solid var(--c-brand);
  text-align: center;
  width: 150px;
  margin: 10px auto;
  padding: 5px;
  background-color: var(--c-neutral);
}

.d-block {
  display: block;
  font-weight: bold;
}

.switch-cell div {
  padding: 0 !important;
}
.switch-cell .switch-cell-padding {
  padding-right: 5px !important;
}

.patch-cable {
  text-align: center;
}

#ace-editor {
  position: absolute;
  top: 70px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 15px 15px 15px 2px;
}

.withdrawnHardware {
  color: var(--c-danger) !important;
  font-size: 18px;
  font-weight: bold;
  margin-top: 40px;
}

.group {
  background-color: var(--c-surface);
  padding: 15px;
  border-radius: 5px;
  border: solid 1px color-mix(in srgb, var(--c-ink), transparent 50%);
  margin-top: 15px;
  margin-bottom: 15px;
}

.group-conditions {
  margin-left: 20px;
}

.condition {
  margin-top: 15px;
  margin-bottom: 15px;
}

.ip-plan {
  box-shadow: 0 0 1px var(--c-shadow);
  border-radius: 3px;
  border: 1px solid var(--c-ink);
  padding: 5px;
  text-align: center;
  margin: 5px;
  width: auto;
  height: 28px;
  float: left;
}

.angular-ui-tree-handle {
  background: var(--c-surface);
  border: 1px solid var(--c-neutral);
  color: var(--c-ink);
  padding: 5px 10px;
}
.angular-ui-tree-placeholder {
  background: var(--c-surface);
  border: 2px dashed var(--c-neutral);
  box-sizing: border-box;
}

.angular-ui-tree-empty {
  border: 0;
  min-height: 100px;
  background: transparent none;
  pointer-events: none;
}

.tree-node {
  border: 1px solid var(--c-neutral);
  background: var(--c-brand-muted);
  color: var(--c-on-fill);
}

.tree-node-content {
  margin: 5px;
}

.tree-handle {
  padding: 5px;
  background: var(--c-surface);
  color: var(--c-on-fill);
  margin-right: 10px;
}

pre {
  word-wrap: break-word;
  white-space: pre-line;
}

.hist_create {
  background-color: var(--c-brand-muted);
  color: var(--c-on-fill);
}

.hist_update {
  background-color: var(--c-success);
}

.hist_delete {
  background-color: var(--c-danger);
  color: var(--c-on-fill);
}

.microsoftavchart {
  height: 450px;
}

.tooltip-multiline {
  height: auto;
}

.gettingStarted .install-method-container .install-method-content {
  padding-left: 20px;
}
.gettingStarted section {
  padding-bottom: 20px;
}
.gettingStarted img {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
}
.gettingStarted > a {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

.hardware-list {
  padding: 0;
  margin: 0;
  /* The chips this list holds are .tag now (tag.scss); what is left here is the one layout quirk that
     belongs to a job's device list rather than to the chip. */
}
.hardware-list .tag.finished-with-error .host-info {
  float: left;
  margin: 3px 6px 0 0;
}
.hardware-list .tag.finished-with-error i {
  font-size: 16px;
  margin-top: 1px;
}
.hardware-list .running-hardware-list-item {
  list-style-type: none;
  background: var(--c-neutral) none;
  border-radius: 6px;
  padding: 5px;
  margin-bottom: 5px;
  height: 30px;
  overflow: hidden;
}
.hardware-list .running-hardware-list-item i {
  margin-top: -2px;
}
.hardware-list .running-hardware-list-item .hardware-hostname {
  max-width: 300px;
  overflow: hidden;
}
.hardware-list .running-hardware-list-item .state-circle {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 5px;
}

.columns-filter {
  top: 60px;
  width: 200px;
  max-width: 300px;
  padding-top: 15px;
}

.custom-table thead {
  background-color: var(--c-brand);
}
.custom-table thead tr th {
  color: var(--c-on-fill);
}
.custom-table thead tr th a {
  color: var(--c-on-fill);
}

#job-info-table tbody tr td {
  padding-bottom: 20px;
}
#job-info-table tbody tr td:nth-child(1) {
  padding-right: 20px;
}
#job-info-table tbody tr td:nth-child(2) {
  width: 100%;
}

#filter-section ul {
  list-style: none;
  display: inline;
  float: right;
  margin-bottom: 10px;
}
#filter-section ul li {
  padding: 10px;
  display: inline;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
#filter-section ul li:hover {
  background-color: var(--c-accent);
  color: var(--c-ink);
}

#nav-sidebar .search-input .form-control {
  border: 2px solid var(--c-on-fill);
  border-radius: 0;
}
#nav-sidebar .search-input .input-group-addon {
  height: 10px;
  background-color: var(--c-brand);
  border: none;
}
#nav-sidebar .search-input:hover {
  background-color: var(--c-brand);
}

.taskModal .modal-dialog {
  width: 96%;
}

.load-more-loader md-progress-circular {
  margin: 0 auto;
}
.load-more-loader md-progress-circular path {
  stroke: var(--c-ink);
}

#table-location th {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}

#building-plan #building-plan-table tr td:first-child {
  width: 200px;
  padding: 10px;
}
#building-plan #building-plan-table tbody tr td .btn-group {
  padding: 0 10px 0 0;
}
#building-plan #building-plan-table tbody tr td .btn-group .selected {
  background-color: var(--c-accent);
}

.table-hover .alert_field:hover {
  background-color: var(--c-accent) !important;
}

tr.angular-ui-tree-empty {
  height: 5px;
}

.md-tooltip.infobox {
  opacity: 1 !important;
  font-size: 16px;
  padding: 5px;
}

#saveCronJobDialogTabs > md-tabs-wrapper {
  display: none;
}

.selectbox-table-fix .select2-input {
  width: 100% !important;
}

.history-entry ul {
  list-style-type: none;
  padding: 0;
}
.history-entry ul li.change-entry {
  padding-left: 15px;
  padding-bottom: 5px;
}

.hide-validation-error .md-errors-spacer {
  display: none;
}

.notincmdb {
  background-color: var(--c-accent);
  color: black;
}

.dashboard md-toolbar.md-default-theme.md-hue-3:not(.md-menu-toolbar), .dashboard md-toolbar.md-hue-3:not(.md-menu-toolbar) {
  background-color: var(--c-brand);
  color: white;
}
.dashboard ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.dashboard li :hover {
  background-color: var(--c-brand-muted);
  color: white;
}

.welcome_button {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                           supported by Chrome and Opera */
}
.welcome_button .md-button.md-raised:not([disabled]) {
  box-shadow: 0 2px 5px 0 color-mix(in srgb, var(--c-shadow), transparent 74%);
}
.welcome_button a {
  background-color: var(--c-brand);
  align-content: center;
  width: 200px;
  min-width: 200px !important;
  max-width: 200px !important;
  max-height: 150px !important;
  min-height: 150px !important;
  display: flex;
  overflow: hidden;
  margin: 15px;
  padding: 12px 12px;
  cursor: pointer;
  transition: all 60ms ease-in-out;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: capitalize;
  color: white;
  border: 0 none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 5px 10px color-mix(in srgb, var(--c-shadow), transparent 90%);
}
.welcome_button a:hover {
  transition: all 60ms ease;
  background-color: var(--c-brand-muted);
}
.welcome_button a:active {
  transition: all 60ms ease;
  background-color: var(--c-brand-muted);
}
.welcome_button a:focus {
  outline: 1px dotted var(--c-neutral);
  outline-offset: -4px;
}

.wrap_text {
  word-wrap: break-word;
  white-space: normal;
}

.alertfield {
  color: var(--c-danger) !important;
}

.warningfield {
  color: var(--c-accent) !important;
}

table.table-striped > tbody > tr.highlightfield > td {
  background-color: var(--c-danger);
}
table.table-striped > tbody > tr.highlightfield > td > a {
  color: var(--c-on-fill);
}
table.table-striped > tbody > tr.alertfield > td {
  background-color: var(--c-danger);
}
table.table-striped > tbody > tr.alertfield > td > a {
  color: var(--c-on-fill);
}
table.table-striped > tbody > tr.warningfield > td {
  background-color: var(--c-accent);
}
table.table-striped > tbody > tr.warningfield > td > a {
  color: var(--c-ink);
}

.s36 {
  width: 36px;
  height: 36px;
}

md-menu-content {
  max-height: 90vh;
}

.actionText {
  margin-left: 10px;
}

.clickable-text {
  color: var(--c-on-fill);
  word-break: break-all;
}

.progress-bar {
  color: var(--c-ink);
}

.jobsTable-error-text {
  margin: 5px;
  padding: 5px;
  color: var(--c-danger);
}

.dnstable md-select {
  margin: 0;
  background-color: var(--c-surface);
}

/* The command bar's own spacing. Was an inline style on the element, which no stylesheet could override;
   it behaves the same here and a page that renders its commands elsewhere can now say so.
 *
 * The commands are in the menu bar on every detail page, so the section is empty and its margin is simply
 * what the form has above it: $pageContentTop. A field first in the form sits there, its own 18px taken up
 * in this margin; a whiteframe card first gives its 5px back below. */
#command-section {
  margin-bottom: 16px;
}

/* A detail form's cards keep .whiteframe's 5px on every side; the form takes it back, so the cards' edges
   line up with every page's content. */
.dynamic-content fieldset:has(> .whiteframe:first-child),
.dynamic-content fieldset:has(> div:first-child > .whiteframe:first-child) {
  margin: -5px -5px 0;
}

/* The same cards straight in the form, with no fieldset between: the form is no formatting context of its
   own, so the top margin already collapses into the command section's; only the sides need taking back. */
.dynamic-content form:has(> command-control + .whiteframe) {
  margin-left: -5px;
  margin-right: -5px;
}

.whiteframe {
  overflow: auto;
  background-color: var(--c-surface);
  margin: 5px;
  border-radius: 6px;
}
.whiteframe .whiteframe-header {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.whiteframe .whiteframe-header .whiteframe-header-title {
  align-items: center; /* align vertical */
  vertical-align: middle;
  padding: 10px;
  text-align: left;
}
.whiteframe .whiteframe-content {
  align-items: center; /* align vertical */
  vertical-align: middle;
  padding: 10px;
  text-align: left;
}
.whiteframe .whiteframe-footer {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.whiteframe .whiteframe-footer .whiteframe-footer-content {
  align-items: center; /* align vertical */
  vertical-align: middle;
  padding: 10px;
  text-align: left;
}

.ip-divider {
  padding: 13px 10px 0 10px;
  font-size: 30px;
}

.organisation-config-section {
  margin-top: 10px;
}
.organisation-config-section .download-link-input {
  width: 100%;
  margin: 12px 0;
}
.organisation-config-section .md-button {
  height: 20px;
  margin-top: 10px;
}

.download-url-section {
  margin-top: 15px;
}
@media (min-width: 600px) {
  .download-url-section .download-link-input {
    width: 600px;
  }
}
.download-url-section .md-button {
  height: 20px;
  margin-top: 10px;
}

.multiple-organisations {
  background-color: var(--c-accent);
}

.content-container {
  margin-top: 16px;
}

.input-container-icon {
  position: absolute;
  top: 5px;
  right: 0;
}

.md-tooltip {
  font-size: 14px;
}

.hardware-list-filter-field {
  margin: 0 0 15px 0;
}

.click-disabled {
  cursor: default;
}

#messages-container {
  width: 100%;
  z-index: 1;
  background: var(--c-surface);
  padding: 10px;
  font-size: 16px;
  text-align: center;
}

.version-sidebar-entry, .form-title:hover, .form-title.active {
  padding: 10px;
  border: none;
  display: block;
  background-color: var(--c-accent);
  color: var(--c-on-fill);
}

/* The top bar used to be a brand fill with white contents. It is a surface now — the brand is the logo block
   at the top of the sidebar — so the bar simply takes the same treatment every other non-menu md-toolbar gets
   from material/_surface-reset.scss, and its contents move to the ink ladder below. */
.top-toolbar {
  /* The bar is a white surface on a page that is nearly white, so the edge is the whole of the
     separation — and black at 12% composites to #E0E0E0, which scores 1.32 against the bar drawing it.
     The border token does that job at 1.39, and a one-pixel ambient shadow puts the bar in front of the
     page rather than merely beside it. */
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-shadow), transparent 90%);
  /* The tools row carries a 16px padding of its own, which pushed the breadcrumb out of line with the menu
     bar below. The inset is owned by .bar-breadcrumb instead, using the shared value. */
  /* Beside the sidebar, not over it, so the brand owns one continuous column. Only while the sidenav is
     docked: below that it is off-canvas, the bar spans the full width and shows the logo itself. */
}
.top-toolbar .md-toolbar-tools {
  padding-left: 0;
  /* Below the docked breakpoint the breadcrumb is hidden (hide-md/sm/xs) and the hamburger leads the row
     instead. Material pulls a leading icon button back by -8px and the button's own 8px padding cancels
     it exactly, so with no padding here the glyph sat flush against the screen edge. The button cannot
     carry the inset itself, so the row does — landing the glyph on $barContentInset, the same place the
     breadcrumb sits when it is the one leading. */
}
@media only screen and (max-width: 1279px) {
  .top-toolbar .md-toolbar-tools {
    padding-left: 22px;
  }
}
@media only screen and (min-width: 1280px) {
  .top-toolbar {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    /* The inner tools row is itself position:fixed at left:0, so it does not inherit the offset above and
       its contents were drawing over the sidebar's logo. It has to be moved with the bar. */
  }
  .top-toolbar .md-toolbar-tools.fixed-toolbar {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
  }
}

/* The global search bar. It was a brand fill with white contents and a hairline Material input, the same
   treatment the top bar used to have. It is a surface now, and the field itself is the .search-bar the
   tables use — reused rather than restyled to match, so the border, radius, focus ring and icons cannot
   drift apart from it. */
.searchToolbar {
  background-color: var(--c-bar) !important;
  position: absolute;
  z-index: 10002;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c-shadow), transparent 86%);
  /* The field takes the rest of the bar. min-width: 0 for the same reason the table's does: a flex item's
     automatic minimum would hold it at the input's intrinsic width. The flexing belongs on the element,
     which is the flex item; the form inside it is what gets the height. */
}
.searchToolbar .md-toolbar-tools {
  gap: 12px;
}
.searchToolbar .search-toolbar-close {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: color 120ms ease;
}
.searchToolbar .search-toolbar-close:hover {
  color: var(--c-text);
}
.searchToolbar search-bar {
  flex: 1 1 auto;
  min-width: 0;
}
.searchToolbar .search-bar {
  height: 40px;
}

.fixed-toolbar-wrapper {
  position: fixed;
  height: 64px;
}
.fixed-toolbar-wrapper .md-toolbar-tools {
  max-height: 64px;
  height: 64px;
}

.fixed-toolbar {
  position: fixed;
  left: 0;
}

.top-toolbar {
  z-index: 70;
}
@media only screen and (max-width: 340px) {
  .top-toolbar .hide-on-small-mobile-devices {
    display: none;
  }
}

.xeox-logo {
  width: 160px;
  max-width: 100%; /* it was overflowing rather than scaling in a narrow bar */
  max-height: 40px;
}

.toolbar-menu-right-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  /* One rule for the space between the controls: 4px within a group, and 4 + 12 = 16px between groups —
     setup (Install Agent) · tools (search, help, notifications) · Create · where and who (organisation,
     account). It was a margin on each control, which came out at 8 · 8 · 8 · 16 · 16 · 8. */
  gap: 4px;
  padding: 0 0 0 10px;
}
@media only screen and (max-width: 340px) {
  .toolbar-menu-right-bar {
    padding-left: 0;
    gap: 0;
  }
}
.toolbar-menu-right-bar .md-open > button {
  background-color: var(--c-brand);
}
.toolbar-menu-right-bar .toolbar-entry {
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  /* Search and notifications: a glyph on a white bar and nothing else, so nothing said they could be
     pressed until the pointer was already on them. A resting ground gives them the shape their
     neighbours have — Install Agent has an outline, Create a fill — and the hover then deepens it
     rather than introducing one. */
  /* The organisation and account controls: who you are and what you are looking at, rather than actions
     like the ones beside them. Drawn as a bordered pill with an initials avatar so they read as one
     object and as a different kind of thing from Install Agent and Create. */
  /* Create: a tool-sized box like search or the bell (icon-entry), told apart by a soft accent ground and
     its glyph in the accent colour — tinted, not solid, so it does not compete with the page's own primary
     button. It stands in its own group, 16px from the tools (.create-menu-trigger). */
  /* The one labelled action in the bar, and it should be found: the ground of the tools beside it (an
     outline made it the odd one out), the word, and its arrow in the accent like the "+" for Create. */
}
.toolbar-menu-right-bar .toolbar-entry:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
@media only screen and (max-width: 340px) {
  .toolbar-menu-right-bar .toolbar-entry {
    padding: 4px 4px;
  }
}
.toolbar-menu-right-bar .toolbar-entry .toolbar-entry-title {
  color: var(--c-text);
  padding: 2px;
  font-size: 14px;
}
.toolbar-menu-right-bar .toolbar-entry.icon-entry {
  /* The badge hanging off this chip is absolutely positioned, and with nothing positioned to hang on
     it was placing itself against whatever ancestor happened to be positioned — half of it outside
     the control, leaning on the button beside it. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 12px either side of a 20px glyph — the same inset Install Agent carries around its label, so the
     three controls in this row are built to one rule. As a 36px square the glyph had 8px and the pair
     read as two pinched boxes between two comfortable ones. */
  width: 44px;
  height: 36px;
  padding: 0;
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
  /* The search entry is the glyph itself, so the size has to land on the element as well as on a
     child — the bell is an icon inside a div. */
  font-size: 20px;
  /* Something is running. Ambient rather than urgent — you are not being asked to do anything — so it
     is the chip that changes, and the progress line below sits inside its corners. */
}
.toolbar-menu-right-bar .toolbar-entry.icon-entry.is-busy {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
  color: var(--c-brand);
}
.toolbar-menu-right-bar .toolbar-entry.icon-entry .material-icons {
  font-size: 20px;
}
.toolbar-menu-right-bar .toolbar-entry.identity-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The height and corners of every other control in the bar, rather than a taller pill. */
  height: 36px;
  /* The avatar sits 3px in from top, bottom and left alike (36 − 2 × 1px border − 28, halved); the
     caret ends 8px from the right edge, the inset the caret's glyph needs to look the same. */
  padding: 0 8px 0 3px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  /* Below Material's sm ceiling the label and the caret are hidden and only the avatar is left. The
     frame would then draw a second outline around it, so the chrome goes and the avatar becomes the
     control: the size of the tool buttons beside it (44 × 36, their corners), so the row is one size
     at every width. The bounds match the hide-xs/hide-sm on the label and caret themselves. */
}
.toolbar-menu-right-bar .toolbar-entry.identity-entry .identity-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: var(--c-brand-fill);
  color: var(--c-on-fill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.toolbar-menu-right-bar .toolbar-entry.identity-entry .toolbar-entry-title {
  padding: 0;
  font-weight: 500;
  white-space: nowrap;
}
.toolbar-menu-right-bar .toolbar-entry.identity-entry .identity-caret {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 18px;
}
@media only screen and (max-width: 959px) {
  .toolbar-menu-right-bar .toolbar-entry.identity-entry {
    width: 44px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
  }
  .toolbar-menu-right-bar .toolbar-entry.identity-entry .identity-avatar {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    font-size: 13px;
  }
}
.toolbar-menu-right-bar .toolbar-entry.create-entry {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}
.toolbar-menu-right-bar .toolbar-entry.create-entry:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 78%);
}
.toolbar-menu-right-bar .toolbar-entry.create-entry .material-icons {
  font-size: 22px;
}
.toolbar-menu-right-bar .toolbar-entry.create-entry:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-brand), transparent 55%);
  outline-offset: -2px;
}
.toolbar-menu-right-bar .toolbar-entry.install-agent-entry {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background-color: var(--c-surface-subtle);
  margin-right: 12px;
  /* Its contents carry Material's hide-xs/hide-sm, but the ground is drawn by this element, so
     hiding only the icon and label left an empty 26px box in a phone-width bar. The `display: flex`
     above ties Material's `.hide-xs:not(.show-xs):not(.show)` on specificity and wins on load order,
     so the entry has to hide itself. Bounds match hide-xs + hide-sm: Material's sm ends at 959px. */
}
@media only screen and (max-width: 959px) {
  .toolbar-menu-right-bar .toolbar-entry.install-agent-entry {
    display: none;
  }
}
.toolbar-menu-right-bar .toolbar-entry.install-agent-entry:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.toolbar-menu-right-bar .toolbar-entry.install-agent-entry > div {
  align-items: center;
  gap: 6px;
}
.toolbar-menu-right-bar .toolbar-entry.install-agent-entry i.material-icons {
  font-size: 18px;
  color: var(--c-brand);
}
.toolbar-menu-right-bar .toolbar-entry.install-agent-entry .toolbar-entry-title {
  padding: 0;
}
.toolbar-menu-right-bar .toolbar-entry.cancel-deletion-entry {
  display: inline-block;
  position: relative;
  top: -4px;
  padding: 0;
}
.toolbar-menu-right-bar .create-menu-trigger {
  margin: 0 12px;
}
.toolbar-menu-right-bar .notifications-menu {
  /* Was a 5px block stacked under the glyph by the row's column layout — full width, square ends across
     a rounded chip, and it pushed the bell off centre. Out of the flow and inside the chip's corners,
     it is a line under the icon rather than a second element beside it. */
  /* A count, not a label: two digits at most (the manager caps it at 99+), so it is a pill that fits
     inside the chip's own corner rather than a rectangle hanging off it. The ring is the bar's own
     surface, which is what separates it from the glyph underneath. */
}
.toolbar-menu-right-bar .notifications-menu md-progress-linear {
  position: absolute;
  left: 6px;
  right: 6px;
  /* Material ships width:100% on this element, and a width beats a left/right pair — the line kept the
     chip's full width and hung 6px past its right edge. */
  width: auto;
  bottom: 4px;
  height: 2px;
  min-height: 2px;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
}
.toolbar-menu-right-bar .notifications-menu md-progress-linear div {
  height: 2px;
}
.toolbar-menu-right-bar .notifications-menu md-progress-linear div .md-bar {
  height: 2px;
  background: var(--c-brand);
}
.toolbar-menu-right-bar .notifications-menu md-progress-linear div.md-container {
  height: 2px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 85%);
}
.toolbar-menu-right-bar .notifications-menu .notifications-count {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 16px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--c-danger);
  box-shadow: 0 0 0 2px var(--c-bar);
  /* Centred by flex rather than by line-height: the bar around it sets 20px/1.428, and a block's line
     box is sized by its own strut — so a 16px line-height on the span inside still left the digits
     sitting 11px down, below the pill they belong to. */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  line-height: 1;
}
.toolbar-menu-right-bar .notifications-menu .notifications-count .notifications-count-text {
  font-weight: 700;
  line-height: 1;
  color: var(--c-on-fill);
}

.toolbar-submenu-header {
  height: 10px !important;
  font-weight: 600;
  margin: 0 0 15px 0;
}
.toolbar-submenu-header .notification-action-button {
  white-space: nowrap;
  color: var(--c-brand);
  text-align: right;
}

/* The notifications menu. Two different things live in it — jobs that are running and messages that arrived —
   and they used to look alike: the same 16px semibold title, one grey and one filled with $color-14, which is
   --c-cat-sand, a colour from the chart palette doing duty as "unread". The state is carried by the title's
   weight and a dot now, so nothing in the list is a block of colour. */
.notifications-menu-content {
  max-width: 420px;
  padding: 0 !important;
}
.notifications-menu-content .notifications-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
}
.notifications-menu-content .notifications-header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}
.notifications-menu-content .notifications-header-count {
  padding: 1px 7px;
  border-radius: 999px;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.notifications-menu-content .notification-action-button {
  font-size: 12.5px;
  color: var(--c-link);
  cursor: pointer;
  white-space: nowrap;
}
.notifications-menu-content .notifications-empty {
  padding: 26px 16px;
  text-align: center;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.notifications-menu-content .notifications-empty .material-icons {
  font-size: 30px;
  opacity: 0.45;
}
.notifications-menu-content .notifications-empty p {
  margin: 6px 0 0;
  font-size: 12.5px;
}
.notifications-menu-content .notifications-scroll-container {
  max-height: 400px;
  overflow: auto;
}
.notifications-menu-content .notifications-scroll-container::-webkit-scrollbar {
  width: 5px;
}
.notifications-menu-content .notifications-scroll-container::-webkit-scrollbar-track {
  background: var(--c-surface);
}
.notifications-menu-content .notifications-scroll-container::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
}
.notifications-menu-content .notifications-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.notifications-menu-content .notifications-section {
  padding: 8px 14px 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.notifications-menu-content .notifications-menu-content-item {
  height: auto;
  min-height: 0;
  border-bottom: 1px solid var(--c-border);
  /* A column rather than a block: Material floats the text inside a menu item's button left, which laid the
     title and its description side by side on one line, and a flex container ignores its children's floats. */
  /* A long automation name filled the menu before its own detail did. */
  /* A running job: the whole row opens its card and lights up as one; a small "Stop" appears on hover or focus
     (always on a touch screen) and asks once, in the row, before it stops the job. */
  /* Something is happening to this one right now. The title used to grow animated dots instead. */
}
.notifications-menu-content .notifications-menu-content-item:last-child {
  border-bottom: 0;
}
.notifications-menu-content .notifications-menu-content-item .md-button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: auto !important;
  min-height: 0;
  padding: 9px 14px;
  margin: 0;
  white-space: unset;
  text-align: left;
}
.notifications-menu-content .notifications-menu-content-item .notification-lead {
  flex: none;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
}
.notifications-menu-content .notifications-menu-content-item .notification-lead .material-icons {
  font-size: 17px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.notifications-menu-content .notifications-menu-content-item .notification-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: normal;
}
.notifications-menu-content .notifications-menu-content-item .notification-title {
  display: block;
  font-size: 13.5px;
  line-height: 18px;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notifications-menu-content .notifications-menu-content-item .notification-sub {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notifications-menu-content .notifications-menu-content-item .notification-sub-dot {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.notifications-menu-content .notifications-menu-content-item .notification-act {
  flex: none;
  align-self: center;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.notifications-menu-content .notifications-menu-content-item.is-unread .notification-title {
  font-weight: 600;
}
.notifications-menu-content .notifications-menu-content-item .notification-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--c-brand);
}
.notifications-menu-content .notifications-menu-content-item .notification-running {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 12px 9px 14px;
  cursor: pointer;
}
.notifications-menu-content .notifications-menu-content-item .notification-running:hover, .notifications-menu-content .notifications-menu-content-item .notification-running:focus-visible {
  outline: none;
  background-color: var(--c-surface-subtle);
}
.notifications-menu-content .notifications-menu-content-item .notification-running:hover .notification-stop, .notifications-menu-content .notifications-menu-content-item .notification-running:focus-visible .notification-stop {
  opacity: 1;
}
.notifications-menu-content .notifications-menu-content-item .notification-stop {
  flex: none;
  align-self: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.notifications-menu-content .notifications-menu-content-item .notification-stop:hover {
  border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
  background-color: color-mix(in srgb, var(--c-danger) 10%, transparent);
  color: var(--c-danger);
}
.notifications-menu-content .notifications-menu-content-item .notification-stop:focus {
  outline: none;
}
.notifications-menu-content .notifications-menu-content-item .notification-stop:focus-visible {
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 60%);
}
@media (hover: none) {
  .notifications-menu-content .notifications-menu-content-item .notification-stop {
    opacity: 1;
  }
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px 9px 14px;
  background-color: color-mix(in srgb, var(--c-danger) 9%, transparent);
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-danger);
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm-button {
  flex: none;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 12px;
  color: var(--c-text);
  cursor: pointer;
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm-button:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm-button.is-danger {
  border-color: var(--c-danger);
  background-color: var(--c-danger);
  color: var(--c-on-fill);
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm-button.is-danger:hover {
  filter: brightness(1.06);
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm-button:focus {
  outline: none;
}
.notifications-menu-content .notifications-menu-content-item .notification-confirm-button:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 60%);
}
.notifications-menu-content .notifications-menu-content-item .notification-aborted {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
}
.notifications-menu-content .notifications-menu-content-item .notification-aborted .notification-title,
.notifications-menu-content .notifications-menu-content-item .notification-aborted .notification-sub {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.notifications-menu-content .notifications-menu-content-item .notification-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-brand);
  animation: notification-spin 1s linear infinite;
}
@keyframes notification-spin {
  to {
    transform: rotate(360deg);
  }
}
.notifications-menu-content .see-all-notifications-button.md-button {
  text-align: center !important;
  color: var(--c-brand);
  font-weight: 600;
}

/*
 * How much horizontal space the sidebar occupies right now. Every fixed bar beside it — the toolbar, the
 * menu bar, the top and footer strips, the loader — is positioned against this rather than against
 * $sidenavWidth, so collapsing to the rail moves all of them at once and none of them needs to know the
 * sidebar's state.
 *
 * The class comes from AppController, which is bound to <html>. Three states: full, railed (icons only)
 * and hidden, the last being a page that asked for no sidebar via disableSidebar().
 */
:root {
  --sidebar-width: 280px;
}

:root.sidebar-railed {
  --sidebar-width: 64px;
}

:root.sidebar-hidden {
  --sidebar-width: 0px;
}

.sidebar-wrapper {
  height: 100%;
}
.sidebar-wrapper .md-sidenav-left {
  width: var(--sidebar-width);
}

/* Below the docked breakpoint the sidenav is an overlay drawer, and a drawer has no use for a rail — it is
   either open at full width or off-canvas. Collapsing while docked and then narrowing the window must not
   leave a 64px drawer behind. */
@media only screen and (max-width: 1279px) {
  .sidebar-wrapper .md-sidenav-left {
    width: 280px;
  }
}
/* Below the docked breakpoint the drawer is an overlay, and it should sit over the toolbar rather than
   start beneath it — the brand belongs at the top of the drawer, and the bar behind it has nothing left
   to contribute while it is open. Material ships the drawer at 60 and its backdrop at 59, both under the
   toolbar's 70. Raised just past it, and deliberately still below md-dialog's 79/80 so dialogs, selects,
   menus and toasts keep their order. */
@media only screen and (max-width: 1279px) {
  .sidebar-wrapper .md-sidenav-left {
    z-index: 72;
  }
  /* Appended to the body, so it is not inside .sidebar-wrapper. */
  md-backdrop.md-sidenav-backdrop {
    z-index: 71;
  }
}
.sidebar {
  height: 100%;
  box-shadow: none;
  /* Only has a job while the drawer is an overlay: docked, it cannot be closed and nothing is covering
     the toolbar. */
}
.sidebar .sidebar-close {
  display: none;
}
@media only screen and (max-width: 1279px) {
  .sidebar {
    /* Keeps the wordmark clear of it. Only here — docked, there is no button to avoid. */
  }
  .sidebar .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 1;
    width: 40px;
    height: 64px;
    cursor: pointer;
    color: var(--c-sidebar-label);
    transition: color 120ms ease;
  }
  .sidebar .sidebar-close:hover {
    color: var(--c-on-fill);
  }
  .sidebar .sidebar-brand {
    padding-right: 56px;
  }
}

.sidebar-content {
  height: 100%;
  background-color: var(--c-sidebar);
  /* The logo occupies the band the toolbar used to cover. Its height matches the toolbar so the two line up
     across the seam. */
  /* A column so the footer can sit at the bottom on short pages while still scrolling away on long ones. */
  display: flex;
  flex-direction: column;
  /* The list scrolls, not the whole column, so the footer stays put. With `flex: 1 0 auto` it could not
     shrink, and #sidebar-menu's 100px bottom margin — a leftover reserving room for nothing that renders
     today — pushed the column past the sidebar's height, carrying the footer off the bottom of a short
     window. That is where the control which restores the sidebar lives, and since the rail replaced the
     floating re-open tab it is now the only way back, so it has to be reachable without scrolling.
     min-height: 0 because a flex item's automatic minimum size would otherwise refuse to shrink. */
  /* Help and the collapse control, separated from the nav by a hairline. The collapse toggle used to sit
     up in the organisation row, which put a destructive-looking control next to the org name. */
  /* 40px with its line, as the page's footer bar (.footer-strip) beside it, so the two lines run on as one: 3px
     above, the 32px link, 4px below. It was 6 + 40 + 6, its line 13px above the bar's. */
}
.sidebar-content .sidebar-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 64px;
  padding: 0 20px;
  text-decoration: none;
  /* Only the rail shows this; the wordmark owns the expanded sidebar. */
}
.sidebar-content .sidebar-brand .xeox-logo {
  max-width: 100%;
  max-height: 40px;
}
.sidebar-content .sidebar-brand .xeox-mark {
  display: none;
  width: 34px;
  height: 34px;
}
.sidebar-content .sidebar-brand.powered-by {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.sidebar-content .sidebar-brand.powered-by .powered-by-text {
  font-size: 8px;
  color: var(--c-sidebar-label);
}
.sidebar-content .sidebar-brand.powered-by .powered-by-text .xeox-logo {
  width: 36px;
}
.sidebar-content #sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* The list only started scrolling when it took the overflow off .sidebar-content, whose own scrollbar
     had always been hidden — so the platform's turned up, and on a 64px rail it takes a quarter of the
     width. Drawn from the sidebar's own palette instead: the divider colour at rest, the label colour
     under the pointer, on a transparent track so it floats over the fill rather than cutting a gutter
     out of it. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-sidebar-line) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.sidebar-content #sidebar-menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.sidebar-content #sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-content #sidebar-menu::-webkit-scrollbar-thumb {
  background: var(--c-sidebar-line);
  border-radius: 6px;
}
.sidebar-content #sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: var(--c-sidebar-label);
}
.sidebar-content #sidebar-menu::-webkit-scrollbar-corner {
  background: transparent;
}
.sidebar-content .sidebar-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 3px 8px 4px;
  border-top: 1px solid var(--c-sidebar-line);
}
.sidebar-content .sidebar-footer .sidebar-footer-link {
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--c-sidebar-label);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.sidebar-content .sidebar-footer .sidebar-footer-link .title {
  margin-left: 12px;
}
.sidebar-content .sidebar-footer .sidebar-footer-link:hover {
  background-color: var(--c-sidebar-row-hover);
  color: var(--c-on-fill);
}
.sidebar-content .sidebar-footer .hide-sidebar-button.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  line-height: 1;
  padding: 0;
}
.sidebar-content .sidebar-footer .hide-sidebar-button {
  margin: 0;
  color: var(--c-sidebar-label);
}
.sidebar-content .sidebar-footer .hide-sidebar-button:hover {
  color: var(--c-on-fill);
}

.sidebar-content::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  overflow: hidden;
}

#wrapper {
  padding-left: 0;
  transition: transform 0.15s ease;
}
#wrapper.toggled-small-screen {
  padding-left: 250px;
}
#wrapper.toggled-small-screen #sidebar-wrapper {
  width: 250px;
  height: 100vh;
}

#top-nav {
  background: var(--c-brand) none;
  border: none;
  border-radius: 0;
  color: var(--c-on-fill);
  height: 70px;
}

.navbar-toggle {
  border: 1px solid var(--c-on-fill);
  margin-top: 0;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  top: 70px;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  transition: transform 0.15s ease;
  background-color: var(--c-accent);
  padding: 0;
  box-shadow: 8px 0 10px var(--c-brand);
}

/* How far the nested rule sits from the sidebar edge, and how far the pill floats clear of that rule.
   Named because the current-page marker has to cancel both to stay flush with the edge. */
#sidebar-menu {
  padding: 0;
  /* Was 64px to clear the fixed toolbar. The toolbar no longer overlaps the sidebar — the logo block sits
     in that band instead. */
  margin-top: 0;
}
#sidebar-menu li {
  list-style: none;
  /* The current page: the filled row, plus an accent marker at the sidebar's edge. The marker is what
     distinguishes it from a merely expanded parent, which also carries a fill. */
  /* An expanded module. Only the label brightens — giving it the fill as well made every expanded parent
     look like the current page, which is what the accent marker above is for. The caret already says
     whether it is open. */
  /* Nested items hang off one continuous rule. The rule belongs to the row, not to the link, so it runs
     unbroken down the whole group; the link is a pill floating clear of it, which is what stops the hover
     fill from butting into the line. */
}
#sidebar-menu li a {
  /* Rows are their own rounded hit area rather than full-bleed strips divided by rules. The previous
     design carried an accent border on every row and an accent divider between them, which read as a
     stack of boxes; the label and its icon carry the structure now. */
  display: flex;
  align-items: center;
  margin: 1px 8px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--c-sidebar-label);
  line-height: 20px;
  text-decoration: none;
  height: 40px;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
  /* The action icons are wrapped in a plain <div layout="row">; keep it centred in the row. */
}
#sidebar-menu li a:hover {
  background-color: var(--c-sidebar-row-hover);
  color: var(--c-on-fill);
}
#sidebar-menu li a.module-base .title {
  margin: 0 0 0 12px;
}
#sidebar-menu li a .module-caret {
  font-size: 18px;
  opacity: 0.75;
}
#sidebar-menu li a > div[layout=row] {
  flex: 0 0 auto;
  align-items: center;
}
#sidebar-menu li a.is-current {
  position: relative;
  background-color: var(--c-sidebar-row-active);
  color: var(--c-on-fill);
  font-weight: 600;
}
#sidebar-menu li a.is-current::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -8px; /* cancels the row's own margin, so it sits flush to the edge */
  width: 3px;
  border-radius: 0 2px 2px 0;
  background-color: var(--c-accent);
}
#sidebar-menu li.sidebar-top-entry {
  font-size: 18px;
  /* Inset from all four edges. The bottom used to be 4px, which put the organisation card 5px off the
     first nav entry against 1px between the entries themselves — near enough to read as one more row
     in the list rather than the separate control it is. Matching the other three separates them.
     This rule is what actually applies — the standalone .sidebar-top-entry further down is less
     specific than `#sidebar-menu li.sidebar-top-entry` and never wins. */
  padding: 12px;
  border-bottom: none;
  /* The home tile. It replaces the organisation monogram that sat here, so it takes the accent square:
     it is the one thing in the sidebar you press to change what you are looking at. */
  /* One card holding two actions: the home tile selects sites, the rest switches organisation.
     The card is the wrapper, so neither button paints its own background. */
  /* The licence card (licenseHintFor in sidebar.controller.js): the state in words beside an icon, the date
     where there is one, and one action. A stripe and the icon take the tone: calm while a trial runs, amber
     on its last day or out of licences, red when it is over. It was a grey box with an orange button whose
     sentence was not always there. */
  /* The card owns its own geometry now — the offsets left here were for the old button row and were
     what made the card sit 6px further from the left edge than from the right. */
}
#sidebar-menu li.sidebar-top-entry:hover {
  cursor: default;
}
#sidebar-menu li.sidebar-top-entry .select-sites-btn {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px; /* md-icon-button carries its own min-height */
  max-height: 34px;
  margin: 0 10px;
  padding: 0;
  border-radius: 8px;
  background-color: var(--c-accent);
  color: var(--c-on-fill);
  line-height: 34px;
}
#sidebar-menu li.sidebar-top-entry .select-sites-btn i {
  float: none;
  font-size: 17px;
  line-height: 34px;
}
#sidebar-menu li.sidebar-top-entry .select-sites-btn:hover:not(.org-has-one-site) {
  background-color: var(--c-cat-sand);
}
#sidebar-menu li.sidebar-top-entry .hide-sidebar-button {
  width: 42px;
  color: var(--c-sidebar-label);
}
#sidebar-menu li.sidebar-top-entry .hide-sidebar-button:hover {
  color: var(--c-on-fill);
}
#sidebar-menu li.sidebar-top-entry .hide-sidebar-button i {
  float: none;
}
#sidebar-menu li.sidebar-top-entry .org-card {
  height: 52px;
  padding: 0 10px 0 0;
  border-radius: 10px;
  background-color: var(--c-sidebar-card);
  overflow: hidden;
  transition: background-color 120ms ease;
  /* The whole card responds, not just the button that happens to be under the pointer — it reads as
     one item. Scoped with :has() so a single-organisation account, where switching is disabled, does
     not get feedback for something it cannot do. The home tile keeps its own hover regardless. */
}
#sidebar-menu li.sidebar-top-entry .org-card:has(.change-organisation-btn:not([disabled]):hover) {
  background-color: var(--c-sidebar-row-hover);
}
#sidebar-menu li.sidebar-top-entry .change-organisation-btn {
  height: 52px;
  margin: 0;
  padding: 0 0 0 10px;
  border-radius: 0;
  background-color: transparent;
  /* md-button ships a raised-button shadow. The button is a transparent region inside the card now,
     so the shadow only showed up as a seam down the card. */
  box-shadow: none;
  color: var(--c-on-fill);
  font-weight: normal;
  text-transform: none;
  text-align: left;
  overflow: hidden;
}
#sidebar-menu li.sidebar-top-entry .change-organisation-btn .org-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sidebar-menu li.sidebar-top-entry .change-organisation-btn .org-caret {
  flex: 0 0 auto;
  margin-left: 6px;
  font-size: 20px;
  opacity: 0.8;
}
#sidebar-menu li.sidebar-top-entry .change-organisation-btn:disabled {
  border: none;
}
#sidebar-menu li.sidebar-top-entry .change-organisation-btn:disabled .btn-text {
  color: var(--c-on-fill);
}
#sidebar-menu li.sidebar-top-entry .organisation-name {
  word-break: break-word;
  font-size: 16px;
  font-weight: bold;
}
#sidebar-menu li.sidebar-top-entry .license-hint {
  --tone: var(--c-sidebar-label);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  margin: 0 0 10px;
  padding: 10px 12px 12px;
  border-left: 3px solid var(--tone);
  border-radius: 0 6px 6px 0;
  background: var(--c-sidebar-row-hover);
  text-align: left;
}
#sidebar-menu li.sidebar-top-entry .license-hint.is-warning {
  --tone: var(--c-warning);
}
#sidebar-menu li.sidebar-top-entry .license-hint.is-danger {
  --tone: var(--c-danger);
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__icon {
  float: none;
  padding: 0;
  font-size: 20px;
  color: var(--tone);
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__title {
  color: var(--c-on-fill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__detail {
  color: var(--c-sidebar-label);
  font-size: 12px;
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__action {
  grid-column: 1/3;
  justify-self: start;
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-on-fill);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__action.is-quiet {
  border-color: color-mix(in srgb, rgb(255,255,255), transparent 65%);
  background: transparent;
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__action:hover, #sidebar-menu li.sidebar-top-entry .license-hint .license-hint__action:focus-visible {
  filter: brightness(1.08);
  outline: 0;
}
#sidebar-menu li.sidebar-top-entry .license-hint .license-hint__action.is-quiet:hover, #sidebar-menu li.sidebar-top-entry .license-hint .license-hint__action.is-quiet:focus-visible {
  border-color: var(--c-on-fill);
}
#sidebar-menu li.sidebar-top-entry .license-dot {
  display: none;
}
#sidebar-menu li.sidebar-top-entry .sites-sidebar-entry {
  padding: 0;
  margin: 0;
}
#sidebar-menu li i {
  /* The rows are flex now, so the module icon must not float out of the line box. */
  /* These sit inside a flex row now. The old float + height:0 took them out of the line box, which
     left them riding above the label instead of centred against it. */
}
#sidebar-menu li i.material-icons {
  float: right;
  padding-right: 10px;
}
#sidebar-menu li i.mdl2 {
  flex: 0 0 auto;
  float: none;
  font-size: 18px;
}
#sidebar-menu li i.inactive, #sidebar-menu li i.sidebar-action-icon {
  font-size: 16px;
  padding-right: 8px;
}
#sidebar-menu li i.sidebar-action-icon {
  flex: 0 0 auto;
  float: none;
  height: auto;
  line-height: 1;
  color: var(--c-sidebar-label);
}
#sidebar-menu li i.sidebar-action-icon:hover {
  color: var(--c-on-fill);
}
#sidebar-menu li.open:not(.subMenu) > a:not(.is-current) {
  background-color: transparent;
  color: var(--c-on-fill);
}
#sidebar-menu li.subMenu {
  margin-left: 26px;
  border-left: 1px solid var(--c-sidebar-line);
  /* The pill's clearance above and below is the row's padding rather than the link's margin. As a
     margin it collapsed out through the row — which has nothing of its own, no padding and no top or
     bottom border, to contain it — and landed between the rows, leaving the rule with a 1px break at
     every entry instead of running the length of the group. */
  padding: 1px 0;
}
#sidebar-menu li.subMenu a {
  margin: 0 8px 0 12px;
  padding: 0 10px;
  border-left: none;
  border-radius: 10px;
  color: var(--c-sidebar-label);
}
#sidebar-menu li.subMenu a:hover {
  background-color: var(--c-sidebar-row-hover);
  color: var(--c-on-fill);
}
#sidebar-menu li.subMenu a.is-current {
  background-color: var(--c-sidebar-row-active);
  color: var(--c-on-fill);
  font-weight: 600;
}
#sidebar-menu li.subMenu a.is-current::before {
  /* Back out the rule's indent, its 1px width and the pill's gap, so the marker meets the edge. */
  left: -39px;
}
#sidebar-menu li span {
  font-family: "Open Sans", sans-serif, arial, verdana, tahoma;
}
#sidebar-menu li ul li a {
  border-left: 0;
}
#sidebar-menu li ul li a:hover {
  border-left: 0;
}
#sidebar-menu li.version-sidebar-entry:hover {
  background-color: var(--c-brand);
}
#sidebar-menu .search-input {
  border-top: 1px solid var(--c-on-fill);
}
#sidebar-menu .search-input .input-group-addon {
  height: 10px;
  background-color: var(--c-brand);
  border: none;
}
#sidebar-menu .site-logo {
  width: 60px;
  height: 60px;
  padding: 10px;
  background-color: var(--c-surface-sunken);
}
#sidebar-menu .site-logo:hover:not(.org-has-one-site) {
  background-color: var(--c-neutral);
}
#sidebar-menu .dropdown .dropdown-menu {
  padding: 0;
  background-color: var(--c-brand);
}
#sidebar-menu .dropdown .dropdown-menu .divider {
  margin: 0;
}
#sidebar-menu .dropdown .dropdown-menu li {
  display: block;
  width: 250px;
  padding-left: 20px;
}
#sidebar-menu .dropdown .dropdown-menu li a:hover {
  background: none;
}

.org-has-one-site:hover {
  cursor: default;
}

#page-content-wrapper {
  margin-top: 80px;
  margin-left: 10px;
}

/* Deliberately not @extend %extend_1 any more: that placeholder is the legacy accent block, and it painted
   the organisation row solid orange. The card inside it carries the emphasis now. */
.sidebar-top-entry {
  padding: 8px;
  border: none;
  display: block;
  color: var(--c-on-fill);
}

.version-sidebar-entry {
  background-color: inherit;
  color: var(--c-on-fill);
  border-left: 6px solid var(--c-accent);
}

.circle {
  border-radius: 50%;
}

@media (min-width: 769px) {
  #menu-toggle-small-screen {
    position: fixed;
    left: 250px;
    top: 14px;
    background-color: var(--c-brand-muted);
    font-size: 20px;
    padding: 5px 10px;
  }
  #menu-toggle-big-screen {
    position: fixed;
    left: 250px;
    top: 14px;
    background-color: var(--c-brand-muted);
    font-size: 20px;
    padding: 5px 10px;
  }
}
@media (max-width: 768px) {
  #menu-toggle-small-screen {
    position: fixed;
    left: 14px;
    top: 14px;
    background-color: var(--c-brand-muted);
    font-size: 20px;
    padding: 5px 10px;
  }
  #menu-toggle-big-screen {
    position: fixed;
    left: 14px;
    top: 14px;
    background-color: var(--c-brand-muted);
    font-size: 20px;
    padding: 5px 10px;
  }
  .fixed-brand {
    margin-left: 60px;
  }
}
@media (min-width: 768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled-small-screen {
    padding-left: 0;
  }
  #wrapper.toggled-small-screen #sidebar-wrapper {
    width: 250px;
  }
  #wrapper.toggled-small-screen #page-content-wrapper {
    position: relative;
    margin-right: 0;
    padding-left: 250px;
  }
  #wrapper.toggled-big-screen #sidebar-wrapper {
    width: 0;
  }
  #wrapper.toggled-big-screen #page-content-wrapper {
    position: relative;
    margin-right: 0;
    margin-left: -250px;
    transition: all 0.3s ease;
  }
  #sidebar-wrapper {
    width: 250px;
  }
}
.toolbar-menu-right-bar-menu > md-menu-item > md-icon {
  z-index: 1;
}

.toolbar-menu-right-bar-menu md-icon {
  color: var(--c-ink);
}
.toolbar-menu-right-bar-menu .md-button:not([disabled]):hover {
  box-shadow: none;
}

/* The user menu. Nine entries in one list — your account, five ways to get help, a legal page and the way
   out — with a rule before the last of them and nothing else to tell them apart. */
.user-menu {
  /* A statement, not an entry: where an identity provider holds the password there is nothing to open, and
     this used to be a menu item whose only act was an alert saying so. */
}
.user-menu .user-menu-head {
  padding: 11px 16px 9px;
  border-bottom: 1px solid var(--c-border);
}
.user-menu .user-menu-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu .user-menu-detail {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu .user-menu-section {
  padding: 9px 16px 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.user-menu .user-menu-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 6px 16px 8px;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.user-menu .user-menu-note .material-icons {
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.user-menu .user-menu-note-sub {
  display: block;
  font-size: 11.5px;
}
.user-menu .user-menu-external {
  margin-left: 8px;
  font-size: 14px !important;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  vertical-align: -2px;
}
.user-menu .user-menu-signout .md-button,
.user-menu .user-menu-signout md-icon .material-icons {
  color: var(--c-danger-ink);
}

/* The Create menu holds two different kinds of thing — what starts a wizard, and what opens an empty record —
   which used to be separated by a bare rule that named neither. */
.create-menu .create-menu-section {
  padding: 9px 16px 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.create-menu .create-menu-section:first-child {
  padding-top: 4px;
}

md-toolbar.md-has-open-menu {
  position: absolute !important;
}

.navbar-inverse .navbar-toggle {
  border: 1px solid;
  border-radius: 0;
}

#menu-toggle-small-screen:hover {
  background-color: var(--c-accent);
}

#menu-toggle-big-screen:hover {
  background-color: var(--c-accent);
}

@media (min-width: 1280px) {
  .page-title {
    margin-left: 280px !important;
  }
}
/* The top bar's breadcrumb (navigation.html). Where you are, on one line at every width.
 *
 * Wide: the pages above as quieter links, a chevron between, and this page as the heading. It used to be a
 * row of flex items with nothing keeping them on one line, so a narrower window wrapped them a word to a line;
 * and below lg it was hidden, leaving a bare title on phones and nothing at all between phone and desktop.
 * When the trail does not fit, the pages between fold into "…" (breadcrumb-fit) and the title ellipsises.
 *
 * Narrow (phones, small tablets): a back button to the level above, and the title under its parent's name. */
.bar-breadcrumb {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  /* Beside the hamburger below the docked breakpoint; in line with the menu bar's first item above it. */
  margin-left: 4px;
}
@media only screen and (min-width: 1280px) {
  .bar-breadcrumb {
    margin-left: 22px;
  }
}
.bar-breadcrumb a {
  text-decoration: none;
}

.bar-breadcrumb-trail {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  white-space: nowrap;
}
@media only screen and (max-width: 959px) {
  .bar-breadcrumb-trail {
    display: none;
  }
}

.bar-breadcrumb-crumb {
  display: flex;
  flex: none;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  /* The current page gives way first: it shortens with an ellipsis, the pages above stay whole. */
}
.bar-breadcrumb-crumb a {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  border-radius: 4px;
}
.bar-breadcrumb-crumb a:hover, .bar-breadcrumb-crumb a:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.bar-breadcrumb-crumb.is-current {
  flex: 0 1 auto;
  min-width: 0;
}

/* breadcrumb-fit measures the trail with the title at full width, or it would never overflow. */
.bar-breadcrumb.is-measuring .bar-breadcrumb-crumb.is-current {
  flex-shrink: 0;
}

.bar-breadcrumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}

.bar-breadcrumb-separator.material-icons {
  flex: none;
  margin: 0 3px;
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Folded: the first page, "…" for the ones between, and this page. */
.bar-breadcrumb-fold {
  display: none;
  align-items: center;
}

.bar-breadcrumb.is-folded .bar-breadcrumb-fold {
  display: inline-flex;
}
.bar-breadcrumb.is-folded .bar-breadcrumb-crumb.is-middle {
  display: none;
}

.bar-breadcrumb-fold md-menu {
  display: inline-flex;
}

.bar-breadcrumb-more {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.bar-breadcrumb-more .material-icons {
  font-size: 18px;
}
.bar-breadcrumb-more:hover, .bar-breadcrumb-more:focus-visible {
  color: var(--c-text);
  outline: none;
  background-color: var(--c-surface-muted);
}

/* The pages the folded trail leaves out, in order, each name centred in the menu; a long one ends in an
   ellipsis, with the full name on hover. */
md-menu-content.bar-breadcrumb-menu {
  min-width: 180px;
  max-width: 320px;
  padding: 4px;
}
md-menu-content.bar-breadcrumb-menu md-menu-item {
  min-height: 34px;
  height: auto;
}
md-menu-content.bar-breadcrumb-menu .md-button,
md-menu-content.bar-breadcrumb-menu .bar-breadcrumb-menu-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 34px;
  text-align: center;
  text-transform: none;
}
md-menu-content.bar-breadcrumb-menu .md-button {
  color: var(--c-text);
}
md-menu-content.bar-breadcrumb-menu .md-button:hover, md-menu-content.bar-breadcrumb-menu .md-button:focus {
  background-color: var(--c-surface-subtle);
}
md-menu-content.bar-breadcrumb-menu .bar-breadcrumb-menu-text {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: default;
}
md-menu-content.bar-breadcrumb-menu .bar-breadcrumb-menu-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow: back to the level above, and this page's title under its parent. */
.bar-breadcrumb-back,
.bar-breadcrumb-compact {
  display: none;
}

@media only screen and (max-width: 959px) {
  .bar-breadcrumb-back {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: -6px;
    border-radius: 8px;
    color: var(--c-text);
  }
  .bar-breadcrumb-back .material-icons {
    font-size: 24px;
  }
  .bar-breadcrumb-back:hover, .bar-breadcrumb-back:focus-visible {
    background-color: var(--c-surface-subtle);
    outline: none;
  }
  .bar-breadcrumb-compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.2;
  }
  .bar-breadcrumb-compact-parent,
.bar-breadcrumb-compact-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bar-breadcrumb-compact-parent {
    font-size: 11.5px;
    color: color-mix(in srgb, var(--c-ink), transparent 46%);
  }
  .bar-breadcrumb-compact-parent:hover, .bar-breadcrumb-compact-parent:focus-visible {
    color: var(--c-text);
    outline: none;
  }
  .bar-breadcrumb-compact-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
  }
}
.navbar-collapse.collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.md-panel.md-tooltip.selected-sites-tooltip {
  background-color: var(--c-surface);
  color: var(--c-ink);
  opacity: 1;
  padding: 8px;
  border-radius: 6px;
}
.md-panel.md-tooltip.selected-sites-tooltip .tooltip-title {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.md-panel.md-tooltip.selected-sites-tooltip ul {
  list-style-type: none;
  padding: 0 4px;
  margin: 0;
}

.toolbar-menu-shortcut {
  margin-left: 8px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  white-space: nowrap;
  vertical-align: baseline;
}

/*
 * The rail: the collapsed sidebar, narrowed to its icons rather than taken away.
 *
 * Everything that needs width is dropped — labels, the organisation name, the trial notice, submenu rows,
 * the row action icons — and what remains is centred in $sidebarRailWidth. Only meaningful where the
 * sidenav is docked; below that it is an overlay drawer with no collapsed form.
 */
@media only screen and (min-width: 1280px) {
  .sidebar-wrapper.sidebar-rail {
    /* The labels are hidden rather than wrapped, so nothing should be able to scroll into view sideways. */
    /* Stacked rather than a row: the help link loses its label, so the two are just two icons. */
  }
  .sidebar-wrapper.sidebar-rail .sidebar-content {
    overflow-x: hidden;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-brand {
    justify-content: center;
    padding: 0;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-brand .xeox-logo,
.sidebar-wrapper.sidebar-rail .sidebar-brand .powered-by-text {
    display: none;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-brand .xeox-mark {
    display: block;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu {
    /* Prose, and there is no width for it: a dot on the organisation tile, the words in its flyout. */
    /* The tile carries the accent; without the name beside it a filled card would just be a block of
       fill the width of the rail. */
    /* A submenu row is an indented child of its module. At this width there is nothing to indent from,
       and its parent's flyout is where those items live instead. */
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu li.sidebar-top-entry {
    /* No side inset: the card is the tile, and the tile centres itself. */
    padding: 12px 0;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .license-hint {
    display: none;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .org-card {
    position: relative;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .license-dot {
    display: block;
    position: absolute;
    top: 2px;
    left: calc(50% + 12px);
    z-index: 1;
    width: 10px;
    height: 10px;
    border: 2px solid var(--c-sidebar);
    border-radius: 50%;
    background: var(--c-sidebar-label);
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .license-dot.is-warning {
    background: var(--c-warning);
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .license-dot.is-danger {
    background: var(--c-danger);
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .org-card {
    justify-content: center;
    padding: 0;
    background-color: transparent;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .change-organisation-btn {
    display: none;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu .select-sites-btn {
    margin: 0;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu li.subMenu {
    display: none;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu li a {
    justify-content: center;
    margin: 1px 8px;
    padding: 0;
    /* The row's icon, centred, with the label gone. */
    /* Open-in-new-tab and the help link: hover affordances with nowhere to sit. */
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu li a .title,
.sidebar-wrapper.sidebar-rail #sidebar-menu li a .beta-label,
.sidebar-wrapper.sidebar-rail #sidebar-menu li a .module-caret,
.sidebar-wrapper.sidebar-rail #sidebar-menu li a .inactive {
    display: none;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu li a > span[layout=row] {
    flex: 0 0 auto;
    justify-content: center;
  }
  .sidebar-wrapper.sidebar-rail #sidebar-menu li a > div[layout=row] {
    display: none;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-footer {
    flex-direction: column;
    padding: 6px 0;
    /* Full width so each control's flyout opens flush against the rail's edge, the way the nav rows do
       — the controls themselves are narrower than the rail, and the panel is placed from its row. */
  }
  .sidebar-wrapper.sidebar-rail .sidebar-footer .sidebar-footer-entry {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-footer .sidebar-footer-link {
    justify-content: center;
    height: 40px;
    padding: 0;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-footer .sidebar-footer-link .title {
    display: none;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-footer .hide-sidebar-button {
    margin: 0;
  }
  .sidebar-wrapper.sidebar-rail .sidebar-footer .hide-sidebar-button.md-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    line-height: 40px;
  }
}
/*
 * A module's children, opened beside the rail.
 *
 * A child of the body rather than of its row — see railFlyout.directive.js — so it is styled on its own
 * rather than under the sidebar, and it is the directive, not a selector, that keeps it shut unless the
 * sidebar is railed. top and left are written by the directive from the row's position.
 */
.rail-flyout {
  display: none;
  position: fixed;
  z-index: 75; /* over the toolbar's 70, under md-dialog's 79 */
  min-width: 200px;
  padding: 6px;
  border-radius: 0 10px 10px 0;
  background-color: var(--c-sidebar-submenu);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c-shadow), transparent 76%);
}
.rail-flyout.is-open {
  display: block;
}
.rail-flyout .rail-flyout-title {
  padding: 6px 10px;
  color: var(--c-sidebar-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rail-flyout .rail-flyout-item {
  display: block;
  height: 36px;
  margin: 1px 0;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--c-sidebar-label);
  line-height: 36px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.rail-flyout .rail-flyout-item:hover {
  background-color: var(--c-sidebar-row-hover);
  color: var(--c-on-fill);
}
.rail-flyout .rail-flyout-item.is-current {
  background-color: var(--c-sidebar-row-active);
  color: var(--c-on-fill);
  font-weight: 600;
}
.rail-flyout .rail-flyout-item.rail-flyout-license.is-warning {
  color: var(--c-warning);
}
.rail-flyout .rail-flyout-item.rail-flyout-license.is-danger {
  color: var(--c-danger);
}

/* A row's name and its beta badge share what the hover icons leave: the name gives way (ellipsis), the badge
   stays whole. As inline text in a flex item that would not shrink below it, a long name pushed the badge
   under the icons. */
#sidebar-menu .sub-menu-label,
#sidebar-menu a.module-base > span[layout=row] {
  display: flex;
  align-items: center;
  min-width: 0;
}
#sidebar-menu .sub-menu-title,
#sidebar-menu a.module-base .title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#sidebar-menu .beta-label {
  flex: none;
  margin-right: 6px;
}

md-dialog {
  border-radius: 6px;
  /* Dialog sizes: the content asks for its preferred width and the dialog grows up to the
     angular-material cap (md-dialog { max-width: 80% }). `max-width: 100%` clamps the content
     back to whatever the dialog actually got - a plain `min-width` would push the content past
     the dialog edge on every viewport between the preferred width and 1.25x of it. */
}
md-dialog.md-default-theme {
  border-radius: 6px;
}
md-dialog md-dialog-content {
  height: 100%;
}
md-dialog md-dialog-content .dialog-content-header {
  font-size: 16px;
}
@media (max-width: 959px) {
  md-dialog md-dialog-content .md-dialog-content-body {
    min-height: 80px;
  }
}
md-dialog md-dialog-content .important {
  font-weight: bold;
}
@media (max-width: 959px) {
  md-dialog md-dialog-content {
    margin-bottom: 40px;
  }
}
md-dialog md-dialog-actions {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
md-dialog md-toolbar .dialog-close-icon {
  margin-left: 20px;
}
md-dialog md-toolbar .job-not-started {
  background-color: var(--c-brand-muted);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .job-running {
  background-color: var(--c-accent);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .job-finished {
  background-color: var(--c-success);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .job-finished-with-error {
  background-color: var(--c-danger);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .dialog-header .dialog-sub-header {
  font-size: 14px;
}
md-dialog.split-dialog .md-dialog-content {
  padding: 0;
}
md-dialog.split-dialog .split-dialog-nav {
  border-right: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header h1, md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header h2, md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header h3, md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header h4, md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header h5, md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header h6 {
  padding: 10px;
}
md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-content {
  max-height: 587px;
  overflow: auto;
}
md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-content ul {
  padding: 0;
}
md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-content ul li {
  padding: 10px 10px 10px 20px;
  list-style-type: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
md-dialog.split-dialog .split-dialog-content {
  max-height: 648px;
  overflow: auto;
  padding: 24px;
}
md-dialog.small-dialog md-dialog-content {
  width: 600px;
  max-width: 100%;
}
md-dialog.medium-dialog md-dialog-content {
  width: 1000px;
  max-width: 100%;
}
md-dialog.large-dialog md-dialog-content {
  width: 1200px;
  max-width: 100%;
}
@media (max-width: 959px) {
  md-dialog md-dialog-actions {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: var(--c-surface);
  }
}
md-dialog.no-padding md-dialog-content .md-dialog-content {
  padding: 0;
}
@media (min-width: 960px) {
  md-dialog .dialog-loader {
    min-width: min(750px, 100%);
  }
}

.dialog-description {
  max-width: 120ch;
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
  margin: 0 0 12px 0;
}
.dialog-description code {
  background-color: var(--c-surface-sunken);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
}

.modal {
  overflow: auto;
}

.modal-dialog {
  position: relative;
  display: table;
  overflow-y: auto;
  overflow-x: auto;
  width: auto;
  min-width: 300px;
}

.modal-content {
  border-radius: 0;
}

.modal-header {
  background-color: var(--c-neutral);
  color: var(--c-ink);
}

.close {
  color: var(--c-ink);
}

.mobile-view-table > tbody > tr.mobile-view-row > td {
  padding: 8px;
  text-align: center;
  font-size: 18px;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

md-toolbar:not(.md-menu-toolbar) {
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

md-backdrop.blurred-backdrop {
  opacity: 1;
  background-color: initial;
  backdrop-filter: blur(6px) brightness(50%);
}

.md-custom-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
}
.md-custom-backdrop.no-organisation-selected {
  background-color: var(--c-canvas-top);
  background-image: radial-gradient(120% 90% at 85% 110%, var(--c-canvas-glow) 0%, transparent 55%), linear-gradient(160deg, var(--c-canvas-top) 0%, var(--c-canvas-bottom) 100%);
  background-size: cover;
}
.md-custom-backdrop.no-organisation-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, rgb(255,255,255), transparent 90%) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
}
.md-custom-backdrop.no-organisation-selected > * {
  position: relative;
  z-index: 1;
}
.md-custom-backdrop.no-organisation-selected::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 24px;
  width: 120px;
  height: 32px;
  background: url(/app/resources/xeox-logo.png) left center/contain no-repeat;
}

.storage-provider-hint {
  display: flex;
  align-items: flex-start;
  margin: -5px 0 10px 0;
  line-height: 20px;
  opacity: 0.75;
}
.storage-provider-hint.is-warning {
  color: var(--c-accent);
  opacity: 1;
}
.storage-provider-hint .material-icons {
  font-size: 18px;
  line-height: 20px;
  margin-right: 6px;
}

/* Handing XEOX support the keys to an organisation. The confirm box it replaced said one sentence and gave the
   two answers a person needs — what is granted, and until when — nowhere at all. */
.support-access-dialog .md-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 500;
}
.support-access-dialog .support-access-lead {
  margin: 0;
  font-size: 13.5px;
  color: var(--c-field-text);
}
.support-access-dialog .support-access-when {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.support-access-dialog .support-access-until {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.support-access-dialog .support-access-length {
  margin-left: auto;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.support-access-dialog .support-access-facts {
  display: grid;
  gap: 9px;
}
.support-access-dialog .support-access-fact {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--c-field-text);
}
.support-access-dialog .support-access-fact .material-icons {
  flex: none;
  margin-top: 1px;
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.support-access-dialog .support-access-grant {
  font-weight: 600;
  color: var(--c-brand);
}

.auth-card {
  min-width: 220px;
  margin: 0 auto;
  overflow: hidden;
}
.auth-card .custom-card-header {
  margin-bottom: 6px;
}
.auth-card .custom-card-header .powered-by-text {
  font-size: 8px;
  position: relative;
  bottom: 5px;
  color: var(--c-on-fill);
}
@media (max-width: 599px) {
  .auth-card .custom-card-header .powered-by-text {
    padding-left: 5px;
  }
}
.auth-card .custom-card-header .powered-by-text .xeox-logo {
  width: 36px;
}
.auth-card .auth-card-header {
  position: relative;
  z-index: 10;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.auth-card .auth-card-header .auth-card-logo {
  border-radius: 50%;
  padding: 8px;
  width: 100px;
  background-color: var(--c-surface);
}
.auth-card.oauth-sign-up-card .auth-content {
  padding: 8px;
}
.auth-card.oauth-sign-up {
  margin: 0;
  border: none;
  box-shadow: none;
}
.auth-card.oauth-sign-up .auth-content {
  margin: 0;
  padding: 8px 0;
}
.auth-card.oauth-sign-up .auth-content .info-text {
  font-size: 16px;
}
.auth-card .xeox-logo-mobile-auth {
  width: 260px;
}
.auth-card md-toolbar {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  display: none;
}
@media (max-width: 599px) {
  .auth-card md-toolbar {
    display: block;
  }
  .auth-card .auth-card-header {
    top: 60px;
  }
  .auth-card .auth-content {
    height: calc(100vh - 100px);
    background-color: var(--c-surface);
    padding-top: 50px;
  }
}
.auth-card h1 {
  font-weight: 100;
  text-align: center;
  font-size: 2.3em;
}
.auth-card .md-input-container-login {
  height: 40px;
  padding: 0;
}
.auth-card .md-input-container-login.email-container {
  margin-bottom: 10px;
}
.auth-card .md-toolbar-tools {
  min-height: 140px;
  padding-top: 18px;
}
.auth-card .auth-content .privacy-approval-container md-checkbox {
  margin-right: 15px;
}
.auth-card .auth-content .privacy-approval-container .md-checkbox-link-label {
  margin-top: 10px;
}
.auth-card .auth-content .privacy-approval-container .not-checked-error .md-icon {
  border-color: var(--c-danger);
}
.auth-card .auth-content .privacy-approval-container .not-checked-error.md-checked .md-icon {
  border-color: var(--c-accent);
}
.auth-card .auth-content .sign-up-button-container {
  margin-top: 10px;
}
.auth-card .auth-content .remember-me-wrapper {
  margin: 20px 0;
}
.auth-card .auth-content .info-text {
  font-size: 20px;
  margin: 0 0 15px 0;
  text-align: center;
}
.auth-card .auth-content .info-text-small {
  font-size: 16px;
  text-align: center;
}
.auth-card .auth-content .recaptcha {
  margin-top: 10px;
}
.auth-card .auth-content .button-wrapper {
  margin-top: 20px;
}
.auth-card .auth-content .button-wrapper .login-button-divider {
  width: 100%;
}
.auth-card .auth-content .button-wrapper .login-button-divider .divider-text {
  margin: 10px;
}
.auth-card .auth-content .link-wrapper {
  margin-top: 20px;
}
.auth-card .auth-content.confirmation-container {
  text-align: center;
}
.auth-card .auth-content.confirmation-container .text {
  font-size: 24px;
}
.auth-card .auth-content.confirmation-container .result-icon-container i {
  font-size: 60px;
}
.auth-card .auth-content .link-to-account-container {
  padding: 15px 0;
}
.auth-card .auth-content .link-to-account-container .info-text {
  display: none;
}
.auth-card .auth-content .remember-sign-in-checkbox {
  margin-top: 10px;
}
@media (min-width: 600px) {
  .auth-card .auth-content {
    padding-top: 60px;
  }
  .auth-card .auth-content.custom-card-content {
    padding-top: 8px;
  }
}
.auth-card .auth-content .auth-content-register {
  padding-top: 20px;
}
.auth-card a {
  text-decoration: none;
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
}
.auth-card a:hover {
  opacity: 1;
}
.auth-card .dots-loader {
  font-size: 18px;
  text-align: center;
}
.auth-card .dots-loader:after {
  font-size: 26px;
  content: " .";
  animation: dots 1s steps(5, end) infinite;
}
@keyframes dots {
  0%, 20% {
    color: color-mix(in srgb, var(--c-ink), transparent 100%);
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-shadow), transparent 100%), 0.5em 0 0 color-mix(in srgb, var(--c-shadow), transparent 100%);
  }
  40% {
    color: color-mix(in srgb, var(--c-ink), transparent 0%);
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-shadow), transparent 100%), 0.5em 0 0 color-mix(in srgb, var(--c-shadow), transparent 100%);
  }
  60% {
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-shadow), transparent 0%), 0.5em 0 0 color-mix(in srgb, var(--c-shadow), transparent 100%);
  }
  80%, 100% {
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-shadow), transparent 0%), 0.5em 0 0 color-mix(in srgb, var(--c-shadow), transparent 0%);
  }
}
.auth-card .connecting-to-server-wrapper {
  text-align: center;
  height: 200px;
  line-height: 160px;
}
.auth-card .sign-in-link {
  margin-left: 10px;
}

@media (min-width: 600px) {
  .auth-card {
    margin-top: 50px;
  }
  .auth-card .auth-card-header {
    top: 70px;
  }
}
@media (max-width: 365px) {
  .auth-card .recaptcha {
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
}
.login {
  text-align: center;
  font-size: 14px;
  font-family: "Open Sans", sans-serif, arial, verdana, tahoma;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
}

.login-help {
  width: 100%;
  text-align: center;
  font-size: 12px;
}

.login-background {
  margin-top: 0;
  background-color: var(--c-canvas-top);
  background-image: radial-gradient(120% 90% at 85% 110%, var(--c-canvas-glow) 0%, transparent 55%), linear-gradient(160deg, var(--c-canvas-top) 0%, var(--c-canvas-bottom) 100%);
  background-size: cover;
}
.login-background::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, rgb(255,255,255), transparent 90%) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
}
.login-background > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 600px) {
  .auth-card {
    max-width: 400px;
  }
  .auth-card .auth-content {
    border-radius: 6px;
    background-color: var(--c-surface);
  }
}
/* -- Material Design Table style -------------- */
.shadow-z-1 {
  -webkit-box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--c-shadow), transparent 88%), 0 1px 2px 0 color-mix(in srgb, var(--c-shadow), transparent 76%);
  -moz-box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--c-shadow), transparent 88%), 0 1px 2px 0 color-mix(in srgb, var(--c-shadow), transparent 76%);
  box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--c-shadow), transparent 88%), 0 1px 2px 0 color-mix(in srgb, var(--c-shadow), transparent 76%);
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  background-color: var(--c-surface);
  border-collapse: separate;
}
.table > thead > tr {
  transition: background-color 0.15s ease;
}
.table > thead > tr > th {
  text-align: left;
  /* A column heading is a label, not a sentence: small, tracked and upper-case, so it reads as the
     name of the column rather than competing with the values under it. */
  padding: 9px 12px;
  vertical-align: middle;
  border-top: 0;
  transition: background-color 0.15s ease;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
  border-bottom: 1px solid var(--c-border);
  background-color: var(--c-surface);
  /* The checkbox draws its own border now (checkbox.scss); a heading is not a reason for it to be
     darker than every other one in the app. */
}
.table > thead > tr > th > a {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.table > thead > tr > td {
  text-align: left;
  padding: 9px 12px;
  vertical-align: middle;
  border-top: 0;
  transition: background-color 0.15s ease;
}
.table > thead:first-child > tr:first-child > th {
  border-top: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > thead.not-sticky > tr:first-child > th {
  position: unset;
}
.table > tbody > tr {
  transition: background-color 0.15s ease;
}
@-webkit-keyframes attention {
  from {
    background-color: var(--c-accent);
  }
  to {
    background-color: inherit;
  }
}
@-moz-keyframes attention {
  from {
    background-color: var(--c-accent);
  }
  to {
    background-color: inherit;
  }
}
@-o-keyframes attention {
  from {
    background-color: var(--c-accent);
  }
  to {
    background-color: inherit;
  }
}
@keyframes attention {
  from {
    background-color: var(--c-accent);
  }
  to {
    background-color: inherit;
  }
}
.table > tbody > tr.attention {
  -webkit-animation: attention 1s; /* Safari 4+ */
  -webkit-animation-iteration-count: 3;
  -moz-animation: attention 1s; /* Fx 5+ */
  -moz-animation-iteration-count: 3;
  -o-animation: attention 1s; /* Opera 12+ */
  -o-animation-iteration-count: 3;
  animation: attention 1s; /* IE 10+ */
  animation-iteration-count: 3;
}
.table > tbody > tr > th {
  text-align: left;
  padding: 7px 12px;
  vertical-align: middle;
  border-top: 0;
  transition: background-color 0.15s ease;
}
.table > tbody > tr > td {
  text-align: left;
  /* Was 4px on every side and top-aligned, which left the text of a one-line row sitting high in it
     and put no space at all between columns. Middle-aligned and given a real gutter instead — the
     row grows by 6px, which the panels have room for. */
  padding: 7px 12px;
  vertical-align: middle;
  border-top: 0;
  color: var(--c-text);
  transition: background-color 0.15s ease;
}
.table > tbody + tbody {
  border-top: 1px solid var(--c-border);
}
.table > tfoot > tr {
  transition: background-color 0.15s ease;
}
.table > tfoot > tr > th {
  text-align: left;
  padding: 7px 12px;
  vertical-align: middle;
  border-top: 0;
  transition: background-color 0.15s ease;
}
.table > tfoot > tr > td {
  text-align: left;
  padding: 7px 12px;
  vertical-align: middle;
  border-top: 0;
  transition: background-color 0.15s ease;
}
.table > caption + thead > tr:first-child > th {
  border-top: 0;
}
.table > caption + thead > tr:first-child > td {
  border-top: 0;
}
.table > colgroup + thead > tr:first-child > th {
  border-top: 0;
}
.table > colgroup + thead > tr:first-child > td {
  border-top: 0;
}
.table .table {
  background-color: var(--c-surface);
}
.table .no-border {
  border: 0;
}

.overflow-table {
  /* auto, not scroll: a table narrow enough to fit should not reserve a bar it never uses. */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.overflow-table::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.overflow-table::-webkit-scrollbar-track {
  background: transparent;
}
.overflow-table::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.overflow-table::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.overflow-table::-webkit-scrollbar-corner {
  background: transparent;
}
.overflow-table.table {
  display: block;
}
.overflow-table.table > thead > tr:first-child > th {
  position: unset;
}

.table-centered > thead > tr > th {
  text-align: center;
}
.table-centered > thead > tr > td {
  text-align: center;
}
.table-centered > tbody > tr > th {
  text-align: center;
}
.table-centered > tbody > tr > td {
  text-align: center;
}
.table-centered > tfoot > tr > th {
  text-align: center;
}
.table-centered > tfoot > tr > td {
  text-align: center;
}

/* Condensed used to mean 0.8rem — larger than the 4px the plain table actually used, so it made tables
   roomier. It now does what its name says: the same gutter, less height. */
.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
  padding: 3px 12px;
}

/* Every rule below drew in $color-5 (#C0C0C0), a mid grey strong enough that a table of twenty columns
   read as a grid of boxes before it read as data. The lines are now the same hairline the panels, cards
   and pills use, so a table looks like part of the page rather than a component from another one. The
   heading rule was also 2px; one is enough now that the heading itself is set apart by its type. */
.table-bordered {
  border: 0;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border: 0;
  border-bottom: 1px solid var(--c-border);
}
.table-bordered > tbody > tr > th {
  border: 0;
  border-bottom: 1px solid var(--c-border);
}
.table-bordered > tbody > tr > td {
  border: 0;
  border-bottom: 1px solid var(--c-border);
  background-color: var(--c-surface);
}
.table-bordered > tbody > tr:last-child > td {
  border: none;
}
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border: 0;
  border-bottom: 1px solid var(--c-border);
}

/* Striped tables separate their rows by the stripe alone: a line under every row as well made two dividers per
   row and the list looked busier than its content. The row under the pointer gets a stronger wash, so a row
   can be followed across a wide table. */
.table-striped.table-bordered > tbody > tr > td,
.table-striped.table-bordered > tbody > tr > th {
  border-bottom: 0;
}

.table-striped.table-hover > tbody > tr:hover > td,
.table-striped.table-hover > tbody > tr:hover > th {
  background-color: var(--c-row-hover);
}

.table-striped > tbody > tr {
  /* bootstrap.css stripes the row itself with a hardcoded #f9f9f9, which shows through anywhere a cell
     does not cover. Neutralise it here so striping has a single source. */
}
.table-striped > tbody > tr:nth-child(odd), .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--c-row-stripe);
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--c-row-stripe);
}
.table-striped > tbody > tr:nth-child(odd) > th, .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--c-row-stripe);
}

.table-hover > tbody > tr {
  /* Same vendor leak as the striping above: bootstrap.css hovers the row itself with a hardcoded
     #f5f5f5, which stays light in every theme and shows through wherever a cell is transparent.
     12% black was also heavy enough to read as a selection rather than a pointer; it is a tint of
     the brand now, which says "this row" without shouting it. */
}
.table-hover > tbody > tr:hover {
  background-color: var(--c-table-row-hover);
}
.table-hover > tbody > tr:hover > td {
  background-color: var(--c-table-row-hover);
}
.table-hover > tbody > tr:hover > th {
  background-color: var(--c-table-row-hover);
}

.new-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: 1px;
  cursor: default;
}

.default-notification .minimize-icon {
  position: absolute;
  top: 0;
  right: 5px;
}

.notification-ace-editor {
  top: 488px !important;
  min-height: 300px;
}

.notification-detail-view-dialog .notification-title {
  margin-top: 0;
}

.md-button {
  transition: box-shadow 365ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  /************************************************* Blue Button ******************************************************/
  /********************************************** Light Blue Button ***************************************************/
  /************************************************ Orange Button *****************************************************/
  /************************************************** Grey Button *****************************************************/
  /* The button that starts a panel's one action — Add network card, Create a local user. Icon and label
     on one line with a real gap; Material's default leaves the glyph adrift from the word. Was written
     inline against .nic-cards-bar, which is why the two drifted apart. */
  /*************************************************** Red Button *****************************************************/
  /************************************************** Green Button ****************************************************/
  /************************************************** Other Button ****************************************************/
}
.md-button.btn-blue {
  border: 1px solid var(--c-brand);
  color: var(--c-brand) !important;
}
.md-button.btn-blue:disabled {
  border-color: color-mix(in srgb, var(--c-brand), transparent 62%);
  color: color-mix(in srgb, var(--c-brand), transparent 62%) !important;
}
.md-button.btn-blue.md-icon-button:hover {
  background-color: var(--c-brand);
}
.md-button.btn-blue:hover:not([disabled]), .md-button.btn-blue.btn-active:not([disabled]) {
  background-color: var(--c-brand);
  color: var(--c-on-fill) !important;
}
.md-button.btn-light-blue {
  border: 1px solid var(--c-brand-muted);
  color: var(--c-brand-muted) !important;
}
.md-button.btn-light-blue:disabled {
  border-color: color-mix(in srgb, var(--c-brand-muted), transparent 62%);
  color: color-mix(in srgb, var(--c-brand-muted), transparent 62%) !important;
}
.md-button.btn-light-blue.md-icon-button:hover {
  background-color: var(--c-brand-muted);
}
.md-button.btn-light-blue:hover:not([disabled]), .md-button.btn-light-blue.btn-active:not([disabled]) {
  background-color: var(--c-brand-muted);
  color: var(--c-on-fill) !important;
}
.md-button.btn-orange {
  border: 1px solid var(--c-accent);
  color: var(--c-accent) !important;
}
.md-button.btn-orange:disabled {
  border-color: color-mix(in srgb, var(--c-accent), transparent 62%);
  color: color-mix(in srgb, var(--c-accent), transparent 62%) !important;
}
.md-button.btn-orange.md-icon-button:hover {
  background-color: var(--c-accent);
}
.md-button.btn-orange:hover:not([disabled]), .md-button.btn-orange.btn-active:not([disabled]) {
  background-color: var(--c-accent);
  color: var(--c-ink) !important;
}
.md-button.btn-panel-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.md-button.btn-panel-action .material-icons {
  font-size: 18px;
  line-height: 18px;
}
.md-button.btn-grey {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.md-button.btn-grey:disabled {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
  color: color-mix(in srgb, var(--c-ink), transparent 62%) !important;
}
.md-button.btn-grey.md-icon-button:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.md-button.btn-grey:hover:not([disabled]), .md-button.btn-grey.btn-active:not([disabled]) {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.md-button.btn-red {
  border: 1px solid var(--c-danger);
  color: var(--c-danger) !important;
}
.md-button.btn-red:disabled {
  border-color: color-mix(in srgb, var(--c-danger), transparent 62%);
  color: color-mix(in srgb, var(--c-danger), transparent 62%) !important;
}
.md-button.btn-red.md-icon-button:hover {
  background-color: var(--c-danger);
}
.md-button.btn-red:hover:not([disabled]), .md-button.btn-red.btn-active:not([disabled]) {
  background-color: var(--c-danger);
  color: var(--c-on-fill) !important;
}
.md-button.btn-green {
  border: 1px solid var(--c-success);
  color: var(--c-success) !important;
}
.md-button.btn-green:disabled {
  border-color: color-mix(in srgb, var(--c-success), transparent 62%);
  color: color-mix(in srgb, var(--c-success), transparent 62%) !important;
}
.md-button.btn-green.md-icon-button:hover {
  background-color: var(--c-success);
}
.md-button.btn-green:hover:not([disabled]), .md-button.btn-green.btn-active:not([disabled]) {
  background-color: var(--c-success);
  color: var(--c-on-fill) !important;
}
.md-button.btn-login {
  margin: 0 !important;
  width: 100%;
}
.md-button.btn-login.btn-login-with-image {
  opacity: 1;
}
.md-button.btn-login.btn-login-with-image img {
  margin-right: 10px;
}
.md-button.btn-sticky {
  font-size: 16px;
  margin: 20px 0;
  padding: 3px 15px;
  color: var(--c-ink);
  text-transform: none;
  font-weight: 400;
  min-width: 100px;
}
.md-button.btn-template {
  border: 1px solid var(--c-neutral);
  background-color: var(--c-neutral);
}
.md-button.btn-condition {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.md-button.no-margin {
  margin: 0 !important;
}
.md-button.left {
  border-radius: 10px 0 0 10px;
}
.md-button.middle {
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
}
.md-button.right {
  border-radius: 0 10px 10px 0;
}
.md-button:not([disabled]):hover {
  box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 5px 0 color-mix(in srgb, var(--c-shadow), transparent 86%), 0 1px 10px 0 color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.md-button[disabled] md-icon svg {
  fill: color-mix(in srgb, var(--c-ink), transparent 74%);
}
.md-button.btn-normal {
  background-color: var(--c-surface);
  color: var(--c-ink);
}
.md-button.btn-normal:hover {
  background-color: var(--c-surface);
  color: var(--c-ink);
}
.md-button.btn-no-hover:hover {
  background-color: var(--c-surface);
  color: var(--c-ink);
}
.md-button.btn-icon i {
  margin-left: 10px;
}
.md-button.btn-copy-to-clipboard {
  min-width: 36px;
  line-height: 0;
}
.md-button.md-icon-button {
  border-radius: 6px;
}
.md-button.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.md-button.md-default-theme.md-primary, .md-button .md-button.md-primary {
  color: var(--c-ink);
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.segmented > button {
  border: none;
  margin: 0;
  padding: 0 14px;
  min-height: 26px;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.segmented > button:hover {
  color: var(--c-text);
}
.segmented > button.segmented__btn--active {
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
  color: var(--c-brand);
  font-weight: 600;
}
.segmented > button:focus {
  outline: none;
}
.segmented > button:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.segmented > md-radio-button {
  border: none;
  margin: 0;
  padding: 0 14px;
  min-height: 26px;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  display: block;
}
.segmented > md-radio-button:hover {
  color: var(--c-text);
}
.segmented > md-radio-button .md-container {
  display: none;
}
.segmented > md-radio-button .md-label {
  margin: 0;
  display: block;
  color: inherit;
}
.segmented > md-radio-button.md-checked {
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
  color: var(--c-brand);
  font-weight: 600;
}
.segmented > md-radio-button.md-checked .md-label {
  color: var(--c-brand);
}
.segmented > md-radio-button.md-focused {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.segmented[disabled] > button,
.segmented[disabled] > md-radio-button, .segmented.segmented--disabled > button,
.segmented.segmented--disabled > md-radio-button {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
}
.segmented[disabled] > button.segmented__btn--active, .segmented[disabled] > button.md-checked,
.segmented[disabled] > md-radio-button.segmented__btn--active,
.segmented[disabled] > md-radio-button.md-checked, .segmented.segmented--disabled > button.segmented__btn--active, .segmented.segmented--disabled > button.md-checked,
.segmented.segmented--disabled > md-radio-button.segmented__btn--active,
.segmented.segmented--disabled > md-radio-button.md-checked {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.segmented[disabled] > button.segmented__btn--active .md-label, .segmented[disabled] > button.md-checked .md-label,
.segmented[disabled] > md-radio-button.segmented__btn--active .md-label,
.segmented[disabled] > md-radio-button.md-checked .md-label, .segmented.segmented--disabled > button.segmented__btn--active .md-label, .segmented.segmented--disabled > button.md-checked .md-label,
.segmented.segmented--disabled > md-radio-button.segmented__btn--active .md-label,
.segmented.segmented--disabled > md-radio-button.md-checked .md-label {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.segmented > button[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
}
.segmented > button[disabled].segmented__btn--active {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.segmented.segmented--stacked {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
}
.segmented.segmented--stacked > button,
.segmented.segmented--stacked > md-radio-button {
  text-align: left;
  white-space: normal;
  padding: 6px 12px;
  line-height: 1.4;
}
@media (max-width: 599px) {
  .segmented {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
  }
  .segmented > button,
.segmented > md-radio-button {
    text-align: left;
    white-space: normal;
    padding: 6px 12px;
    line-height: 1.4;
  }
}

form .toggle-box-content {
  padding: 8px;
  overflow: hidden;
}
form md-input-container {
  margin-bottom: 0;
}
form md-input-container.md-input-warning.md-input-invalid > label:after {
  color: var(--c-accent);
}
form md-input-container.md-input-warning.md-input-invalid > input {
  border-color: var(--c-accent);
}
form md-input-container.md-input-warning.md-input-invalid .md-input-message-animation {
  color: var(--c-accent);
}
form md-input-container.md-input-warning.md-input-invalid .select2-choice {
  border-bottom-color: var(--c-accent);
  border-bottom-width: 1px;
}
form md-input-container.md-input-warning.md-input-invalid .select2-container.select2-container-disabled .select2-choice {
  border-bottom-color: var(--c-accent);
  border-bottom-width: 1px;
}

@-webkit-keyframes autofill {
  to {
    color: var(--c-neutral);
    background: transparent;
  }
}
input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

table thead th md-input-container input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--c-on-fill) !important;
}
table thead th md-input-container input::-moz-placeholder { /* Firefox 19+ */
  color: var(--c-on-fill) !important;
}
table thead th md-input-container input:-ms-input-placeholder { /* IE 10+ */
  color: var(--c-on-fill) !important;
}
table thead th md-input-container input:-moz-placeholder { /* Firefox 18- */
  color: var(--c-on-fill) !important;
}

md-checkbox.checkbox-with-hint {
  min-height: 0;
  white-space: normal;
}
md-checkbox.checkbox-with-hint .md-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
}
md-checkbox.checkbox-with-hint .checkbox-hint {
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* ── Date fields ─────────────────────────────────────────────────────────────────────────────────────────────
   The browser's own date input, everywhere one is used (forms, the filter's query builder, billing); its
   calendar is the app's own (dateField.directive.js), below.
 *
 * It drew its calendar button in the light scheme whatever the app's theme — a black glyph on the dark field —
 * and put it straight after the date rather than at the field's end. color-scheme hands the browser the theme
 * for what is still its own (the date's parts, and its calendar where a field keeps it); the button is the app's
 * calendar icon in the field's hint colour, at the far end, brand on hover. */
input[type=date],
input[type=datetime-local],
input[type=time] {
  color-scheme: light;
  /* The date itself fills the field, so the button lands at its end. */
  /* A part not filled in yet (the dd.mm.yyyy guide) reads as a placeholder, not a value. */
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 2px;
  border-radius: 4px;
  background: none;
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z'/%3E%3C/svg%3E") center/18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z'/%3E%3C/svg%3E") center/18px no-repeat;
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--c-brand);
}
input[type=date]::-webkit-datetime-edit,
input[type=datetime-local]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit {
  flex: 1 1 auto;
}
input[type=date]::-webkit-datetime-edit-day-field:not([aria-valuenow]), input[type=date]::-webkit-datetime-edit-month-field:not([aria-valuenow]), input[type=date]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=datetime-local]::-webkit-datetime-edit-day-field:not([aria-valuenow]),
input[type=datetime-local]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=datetime-local]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=time]::-webkit-datetime-edit-day-field:not([aria-valuenow]),
input[type=time]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=time]::-webkit-datetime-edit-year-field:not([aria-valuenow]) {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
input[type=date]::-webkit-datetime-edit-day-field:focus, input[type=date]::-webkit-datetime-edit-month-field:focus, input[type=date]::-webkit-datetime-edit-year-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-day-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-month-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-year-field:focus,
input[type=time]::-webkit-datetime-edit-day-field:focus,
input[type=time]::-webkit-datetime-edit-month-field:focus,
input[type=time]::-webkit-datetime-edit-year-field:focus {
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 82%);
  color: var(--c-text);
}

[data-theme=dark] input[type=date],
[data-theme=dark] input[type=datetime-local],
[data-theme=dark] input[type=time] {
  color-scheme: dark;
}

/* Open with its calendar joined underneath: the brand edge, squared off where the calendar meets it. */
input[type=date].is-date-picker-open {
  border-color: var(--c-brand) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
}
input[type=date].is-date-picker-open.is-date-picker-above {
  border-radius: 0 0 6px 6px !important;
}

/* ── The calendar ────────────────────────────────────────────────────────────────────────────────────────────
   Air Datepicker, drawn through its own custom properties from the app's tokens, so it follows the theme with
   nothing to override per theme. The browser's was a grey square in the system font with the browser's blue.
   A month of rounded day cells; today ringed, the chosen day filled with the brand; the month and year as the
   title, which switches to months and then years; Today and Clear under a hairline. Floating, it has an
   outline and the lists' shadow; joined (.is-joined) it continues the field's brand edge, as a select's list
   does (select2.scss, "The open list"). */
.air-datepicker.xeox-date-picker {
  --adp-font-family: inherit;
  --adp-font-size: 13.5px;
  --adp-width: 264px;
  --adp-z-index: 1000;
  --adp-padding: 8px;
  --adp-transition-offset: 4px;
  --adp-background-color: var(--c-surface-raised);
  --adp-background-color-hover: color-mix(in srgb, var(--c-ink), transparent 95%);
  --adp-background-color-active: color-mix(in srgb, var(--c-ink), transparent 88%);
  --adp-color: var(--c-text);
  --adp-color-secondary: color-mix(in srgb, var(--c-ink), transparent 46%);
  --adp-accent-color: var(--c-brand);
  --adp-color-current-date: var(--c-brand);
  --adp-color-other-month: color-mix(in srgb, var(--c-ink), transparent 74%);
  --adp-color-other-month-hover: color-mix(in srgb, var(--c-ink), transparent 46%);
  --adp-color-disabled: color-mix(in srgb, var(--c-ink), transparent 74%);
  --adp-day-name-color: color-mix(in srgb, var(--c-ink), transparent 62%);
  --adp-border-color: var(--c-border);
  --adp-border-color-inner: var(--c-border);
  --adp-border-color-inline: var(--c-border);
  --adp-border-radius: 6px;
  --adp-nav-height: 36px;
  --adp-nav-arrow-color: color-mix(in srgb, var(--c-ink), transparent 46%);
  --adp-nav-action-size: 30px;
  --adp-nav-color-secondary: color-mix(in srgb, var(--c-ink), transparent 62%);
  --adp-day-cell-height: 32px;
  --adp-month-cell-height: 40px;
  --adp-year-cell-height: 48px;
  --adp-cell-border-radius: 6px;
  --adp-cell-background-color-hover: color-mix(in srgb, var(--c-ink), transparent 95%);
  --adp-cell-background-color-selected: var(--c-brand);
  --adp-cell-background-color-selected-hover: var(--c-brand-light);
  --adp-cell-background-color-in-range: color-mix(in srgb, var(--c-brand), transparent 88%);
  --adp-btn-height: 30px;
  --adp-btn-color: var(--c-brand);
  --adp-btn-color-hover: var(--c-brand);
  --adp-btn-border-radius: 6px;
  --adp-btn-background-color-hover: color-mix(in srgb, var(--c-brand), transparent 92%);
  --adp-btn-background-color-active: color-mix(in srgb, var(--c-brand), transparent 86%);
  box-sizing: border-box;
  min-width: var(--adp-width);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 90%);
}
.air-datepicker.xeox-date-picker.is-joined {
  border-color: var(--c-brand);
  border-top-color: var(--c-border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
.air-datepicker.xeox-date-picker.is-joined.-top- {
  border-top-color: var(--c-brand);
  border-bottom-color: var(--c-border);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
.air-datepicker.xeox-date-picker .air-datepicker--pointer {
  display: none;
}
.air-datepicker.xeox-date-picker .air-datepicker-nav {
  padding: 4px 4px 2px;
  border-bottom: 0;
}
.air-datepicker.xeox-date-picker .air-datepicker-nav--title {
  font-weight: 500;
  color: var(--c-text);
}
.air-datepicker.xeox-date-picker .air-datepicker-nav--title i {
  margin-left: 4px;
  font-style: normal;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.air-datepicker.xeox-date-picker .air-datepicker-nav--action i {
  font-size: 20px;
}
.air-datepicker.xeox-date-picker .air-datepicker-body--day-name {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: none;
}
.air-datepicker.xeox-date-picker .air-datepicker-cell {
  transition: background-color 0.1s ease;
}
.air-datepicker.xeox-date-picker .air-datepicker-cell.-current-:not(.-selected-) {
  box-shadow: inset 0 0 0 1px var(--c-brand);
  font-weight: 500;
}
.air-datepicker.xeox-date-picker .air-datepicker-cell.-selected-, .air-datepicker.xeox-date-picker .air-datepicker-cell.-selected-.-focus- {
  color: var(--c-on-fill);
  font-weight: 500;
}
.air-datepicker.xeox-date-picker .air-datepicker--buttons {
  padding: 4px;
  border-top: 1px solid var(--c-border);
}
.air-datepicker.xeox-date-picker .air-datepicker-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}

/* The calendar inside a popover of the app's own (the period, the date-and-time field): no frame or shadow of
   its own, as wide as its room, and the days between a range's two ends washed in the brand. */
.air-datepicker.xeox-date-picker.is-inline {
  --adp-width: 100%;
  --adp-background-color: transparent;
  --adp-border-color-inline: transparent;
  --adp-cell-background-color-in-range: color-mix(in srgb, var(--c-brand), transparent 86%);
  --adp-cell-background-color-in-range-hover: color-mix(in srgb, var(--c-brand), transparent 78%);
  --adp-cell-border-color-in-range: transparent;
  --adp-background-color-in-range: color-mix(in srgb, var(--c-brand), transparent 86%);
  min-width: 0;
  border: 0;
  box-shadow: none;
}
.air-datepicker.xeox-date-picker.is-inline .air-datepicker-cell.-in-range- {
  color: var(--c-text);
}

.treeview {
  padding: 0;
}
.treeview .treeview-item {
  list-style-type: none;
  position: relative;
}
.treeview .treeview-item .treeview-item-icon {
  position: absolute;
  cursor: pointer;
}
.treeview .treeview-item .treeview-item-label {
  margin-left: 25px;
}
.treeview .treeview-item .treeview-item-label .treeview-item-icon {
  position: relative;
}
.treeview .treeview-item .treeview-item-label .item-label:hover {
  background-color: var(--c-neutral);
  cursor: pointer;
}
.treeview .treeview-item .treeview-item-label .item-label.selected-entry {
  background-color: var(--c-neutral);
}
.treeview .treeview-item .treeview-item-label.sub-items {
  margin-left: 0;
}
.treeview .treeview-item .treeview-item-label.child-organisation {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
}
.treeview .treeview-item .treeview-item-label.child-organisation:hover {
  background-color: initial;
  cursor: default;
}
.treeview .treeview-item .treeview-item-label md-checkbox {
  min-height: 22px;
  margin-left: -10px;
  margin-right: 10px;
}
.treeview .treeview-item .treeview-item-label md-checkbox .md-container {
  margin: 10px;
}
.treeview .treeview-item .treeview-edit-icon {
  font-size: 18px;
  margin-left: 10px;
}
.treeview .treeview-item .treeview {
  margin: 8px 0 8px 25px;
  display: none;
}
.treeview .treeview-item .treeview.active {
  display: block;
}

body .select2-drop {
  border-radius: 0;
}
body .select2-drop.select2-drop-above {
  border-radius: 0;
}
body .select2-container .select2-choice {
  border-radius: 0;
  border: none;
  background-image: none;
  background-color: inherit;
  min-height: 30px;
}
body .select2-container .select2-choice .select2-arrow {
  border-radius: 0;
  border: 0;
  background-image: none;
  background-color: inherit;
}
body .select2-container .select2-choice .select2-search-choice-close {
  top: 9px;
}
body .select2-container.select2-dropdown-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--c-surface);
}
body .select2-container .select2-choices {
  border-radius: 0;
  border: none;
  background-image: none;
  background-color: inherit;
  min-height: 30px;
  /* The same chip as a read-only tag. select2's own is 16px at weight 400 on a solid $color-5, which
     is why the editable tags in the General panel were visibly larger and darker than the system tags
     directly beneath them. The close moves to the right — DOM order is text then close, so it only
     sat on the left because the rule reversed the row. */
  /* The class named twice: select2's own .select2-container-multi.select2-container-disabled rule is
     four classes, so on a read-only selector its #F4F4F4/#DDD chip beat this one and the same chip came
     out in two different greys depending on whether the field could be edited. */
}
body .select2-container .select2-choices .select2-search-choice.select2-search-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 5px 0 9px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface-subtle) none;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-field-text);
}
body .select2-container .select2-choices .select2-search-choice.select2-search-choice .select2-search-choice-close {
  position: static;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 4px;
  /* select2 paints its close sprite through a retina media query that carries !important —
     @media (-webkit-min-device-pixel-ratio: 1.5) { background-image: url('select2x2.png') } — so a
     plain background: none leaves the sprite stacked behind the × below, which is the doubled
     glyph. This is the one place the shorthand cannot win. */
  background: none;
  background-image: none !important;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  /* The close is an <a>, so Bootstrap's a:hover underlined the × on hover. Nothing here declared
     text-decoration, so its one-class rule was running unopposed. */
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
body .select2-container .select2-choices .select2-search-choice.select2-search-choice .select2-search-choice-close::before {
  content: "×";
  font-size: 13px;
  line-height: 1;
}
body .select2-container .select2-choices .select2-search-choice.select2-search-choice .select2-search-choice-close:hover, body .select2-container .select2-choices .select2-search-choice.select2-search-choice .select2-search-choice-close:focus {
  background-color: var(--c-border);
  color: var(--c-text);
  text-decoration: none;
}
body .select2-container.select2-drop-above .select2-choice {
  border-radius: 0;
}
body .select2-container.select2-dropdown-open .select2-choice {
  border-bottom: none;
  background-color: var(--c-surface);
}
body .select2-container.select2-dropdown-open .select2-choices {
  border-bottom: none;
  background-color: var(--c-surface);
}
body .select2-container.select2-dropdown-open.select2-drop-above .select2-choices {
  background-color: var(--c-surface);
}
body .select2-drop-active {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-top: none;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
body .select2-drop-active.select2-drop-above {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%) !important;
}
body .select2-container-active .select2-choice {
  -webkit-box-shadow: none;
  box-shadow: none;
}
body .select2-container-active .select2-choices {
  -webkit-box-shadow: none;
  box-shadow: none;
}
body .select2-container-multi.select2-container-active .select2-choices {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

md-input-container > .select2-container {
  padding: 0;
  height: auto;
}

/* A select is a field, and in a form it stands next to an <input>. It was not built like one: $black_12
   over a transparent ground, 32px tall, against the input's $border over $surface at 30px — so the
   hardware class form showed one white outlined box above one grey darker-outlined box, two controls that
   should read as the same component.
 *
 * .md-input twice to clear [data-theme] md-input-container .md-input, which is where the $black_12 came
 * from. Single selects only: a multi is a chip well that grows with its contents, not a 30px box. */
md-input-container > .select2-container.md-input.md-input:not(.select2-container-multi) {
  height: 30px;
}
md-input-container > .select2-container.md-input.md-input:not(.select2-container-multi):not(.select2-container-disabled) {
  border-color: var(--c-border);
  background-color: var(--c-surface);
}
md-input-container > .select2-container.md-input.md-input:not(.select2-container-multi) .select2-choice {
  min-height: 28px;
  height: 28px;
  line-height: 28px;
  /* Both carried a 2px top margin to sit inside the old 32px box. In a 30px one they hang out of the
     bottom — the arrow by a visible pixel. Centred by line-height instead. */
}
md-input-container > .select2-container.md-input.md-input:not(.select2-container-multi) .select2-choice .select2-chosen,
md-input-container > .select2-container.md-input.md-input:not(.select2-container-multi) .select2-choice .select2-arrow {
  margin-top: 0;
}

/* The launch button, inside the box it belongs to.
 *
 * It sits between the value and the caret rather than outside the field in md-icon-right's 34px slot,
 * which is what made the first row of the General panel three fields wide and the second row two. */
.select2-container .select2-choice .select2-launch {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  border-radius: 4px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
  /* An <a>, so Bootstrap's a:hover underlines it — the same one-class rule the close button had to shut
     out. Stated on both states, because the hover rule is what wins on hover. */
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.select2-container .select2-choice .select2-launch i {
  font-size: 16px;
  line-height: 1;
}
.select2-container .select2-choice .select2-launch:hover, .select2-container .select2-choice .select2-launch:focus {
  background-color: var(--c-surface-sunken);
  color: var(--c-brand);
  text-decoration: none;
}

/* select2 lays the choice out as text, then close, then an absolutely positioned arrow. The button has to
   join that row rather than stack under the value, and the arrow keeps its own corner. */
.select2-container.select2-container .select2-choice {
  display: flex;
  align-items: center;
  /* Named twice to clear select2's own .select2-container.select2-allowclear .select2-choice
     .select2-chosen, which is four classes. That margin's only job was to clear the absolutely positioned
     close and arrow; in a real row it is a 42px hole between the value and the controls. */
}
.select2-container.select2-container .select2-choice .select2-chosen.select2-chosen {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0;
}
.select2-container.select2-container .select2-choice .select2-search-choice-close {
  position: static;
  flex: 0 0 auto;
  margin: 0 4px 0 0;
}
.select2-container.select2-container .select2-choice .select2-arrow {
  position: static;
  flex: 0 0 auto;
}

/* A disabled select is one flat field, the same one a disabled <input> is: $surface-subtle inside a
   $border hairline. It was painting two greys instead — $black_12 on the container, $surface-subtle on the
   square-cornered .select2-choice inset 5px inside it — so the darker outer grey showed as a cap at each
   end of the box. Both shapes, because a disabled multi stacks them the same way. */
md-input-container .select2-container.select2-container-disabled.md-input {
  border: 1px solid var(--c-border);
  background-color: var(--c-surface-subtle);
}
md-input-container .select2-container.select2-container-disabled.md-input .select2-choice,
md-input-container .select2-container.select2-container-disabled.md-input .select2-choices {
  background: none;
  background-color: transparent;
}

table thead th .select2-default {
  color: var(--c-on-fill) !important;
}

/* ── Inside a disabled form ──────────────────────────────────────────────────────────────────────────────────
   Material draws its dotted "disabled" underline — a repeating gradient, just under the field — on every
   .md-input below a [disabled] ancestor, and the select's container carries .md-input. The inputs had it taken
   off (customMaterialDesign.scss); the selects kept it, which is the dotted line under a read-only hardware
   selector. The same rule makes the bottom border transparent — the dots were standing in for it — so with
   the dots gone the frame gets its bottom edge back. Same specificity trick: the attribute twice beats
   Material's generated theme rule. */
[disabled][disabled] md-input-container .select2-container.md-input,
md-input-container .select2-container.md-input[disabled][disabled] {
  background-image: none;
  border-bottom-color: var(--c-border);
}

/* ── The open list ───────────────────────────────────────────────────────────────────────────────────────────
   Every select's list continues its field: the field takes the brand edge while it is open, squares off where
   the list joins it, and the list carries that edge round to rounded far corners. It was a $black_12 box with
   square corners under a field with round ones. Opening above flips it. */
/* .md-input twice and :not(disabled) to clear the field's own $border rule above, which is five classes. */
md-input-container > .select2-container.md-input.md-input:not(.select2-container-disabled).select2-dropdown-open {
  border-color: var(--c-brand);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
md-input-container > .select2-container.md-input.md-input:not(.select2-container-disabled).select2-dropdown-open.select2-drop-above {
  border-radius: 0 0 6px 6px;
}

/* A list under a select without a frame (a table cell, a toolbar): it floats a few pixels below the value
   with an outline of its own. */
body .select2-drop.select2-drop-active {
  margin-top: 4px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 90%);
  overflow: hidden;
}
body .select2-drop.select2-drop-active.select2-drop-above {
  margin-top: -4px;
  border: 1px solid var(--c-border) !important;
}

/* A list under a form field: it joins the field's frame (selectbox marks it .selectbox-joined-drop). */
body .select2-drop.select2-drop-active.selectbox-joined-drop {
  margin-top: 0;
  border: 1px solid var(--c-brand);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
body .select2-drop.select2-drop-active.selectbox-joined-drop.select2-drop-above {
  margin-top: 0;
  border: 1px solid var(--c-brand) !important;
  border-bottom: 0 !important;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}

body .select2-drop {
  /* The search inside a single select's list: a small field of its own, the magnifier drawn rather than
     select2's sprite (a light-theme png), and a spinner in its place while a search runs. */
}
body .select2-drop .select2-search {
  position: relative;
  padding: 6px 6px 2px;
  /* Heights with !important: select2.css sets height: auto !important on this input, which undid every
     height here — the search row came out 20-odd px, shorter than the field it stands in for. */
}
body .select2-drop .select2-search input {
  box-sizing: border-box;
  height: 30px !important;
  min-height: 30px;
  padding: 0 30px 0 9px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-image: none !important;
  background-color: var(--c-surface-subtle);
  font-size: 13.5px;
  color: var(--c-text);
}
body .select2-drop .select2-search input:focus {
  border-color: var(--c-brand);
  outline: none;
}
body .select2-drop .select2-search::after {
  content: "search";
  position: absolute;
  top: calc(50% + 2px);
  right: 14px;
  transform: translateY(-50%);
  font-family: "Material Icons";
  font-size: 17px;
  line-height: 1;
  font-feature-settings: "liga";
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  pointer-events: none;
}
body .select2-drop .select2-search:has(input.select2-active)::after {
  content: "";
  top: calc(50% - 5px);
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--c-brand), transparent 78%);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  transform: none;
  animation: infinite-table-spin 0.8s linear infinite;
}
body .select2-drop .select2-results {
  max-height: 260px;
  margin: 0;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
  /* The row under the pointer in the brand's wash, not select2's saturated blue. */
  /* Waiting for results: placeholder rows in the app's shimmer (infiniteTable.scss) instead of the word
     "Searching…" and select2's gif; one row while more load at the end of a long list. */
}
body .select2-drop .select2-results::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body .select2-drop .select2-results::-webkit-scrollbar-track {
  background: transparent;
}
body .select2-drop .select2-results::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
body .select2-drop .select2-results::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
body .select2-drop .select2-results::-webkit-scrollbar-corner {
  background: transparent;
}
body .select2-drop .select2-results .select2-result-label {
  padding: 6px 10px;
  border-radius: 5px;
}
body .select2-drop .select2-results .select2-highlighted {
  background: color-mix(in srgb, var(--c-brand), transparent 84%);
  color: var(--c-text);
  border-radius: 5px;
}
body .select2-drop .select2-results .select2-no-results,
body .select2-drop .select2-results .select2-selection-limit {
  padding: 8px 10px;
  background: transparent;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
body .select2-drop .select2-results .select2-searching,
body .select2-drop .select2-results .select2-more-results.select2-active {
  position: relative;
  height: 60px;
  padding: 0;
  background: transparent !important;
  font-size: 0;
  color: transparent;
}
body .select2-drop .select2-results .select2-searching::before, body .select2-drop .select2-results .select2-searching::after,
body .select2-drop .select2-results .select2-more-results.select2-active::before,
body .select2-drop .select2-results .select2-more-results.select2-active::after {
  content: "";
  position: absolute;
  left: 10px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--c-surface-subtle) 0px, var(--c-surface-muted) 120px, var(--c-surface-subtle) 240px);
  background-size: 800px 100%;
  animation: infinite-table-shimmer 1.4s linear infinite;
}
body .select2-drop .select2-results .select2-searching::before,
body .select2-drop .select2-results .select2-more-results.select2-active::before {
  top: 13px;
  width: 46%;
}
body .select2-drop .select2-results .select2-searching::after,
body .select2-drop .select2-results .select2-more-results.select2-active::after {
  top: 37px;
  width: 30%;
}
body .select2-drop .select2-results .select2-more-results.select2-active {
  height: 34px;
}
body .select2-drop .select2-results .select2-more-results.select2-active::after {
  display: none;
}

/* You type where you clicked: a single select's list, opening below, is lifted over its field by the field's
   measured height (selectbox's setupSearchInField sets --selectbox-field-height and .selectbox-in-field), and
   its search input is drawn as the field — same height, text where the value was, the magnifier where the
   arrow was. The list is then one outlined box, the field's focus halo round it. The search appearance
   (below) has its own drawing of the same thing. */
body .select2-drop.select2-drop-active.selectbox-in-field:not(.selectbox-search-drop) {
  margin-top: calc(-1 * var(--selectbox-field-height));
  border: 1px solid var(--c-brand) !important;
  border-radius: 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%), 0 10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
body .select2-drop.select2-drop-active.selectbox-in-field:not(.selectbox-search-drop) .select2-search {
  padding: 0;
  border-bottom: 1px solid var(--c-border);
}
body .select2-drop.select2-drop-active.selectbox-in-field:not(.selectbox-search-drop) .select2-search::after {
  top: 50%;
  right: 9px;
}
body .select2-drop.select2-drop-active.selectbox-in-field:not(.selectbox-search-drop) .select2-search:has(input.select2-active)::after {
  top: calc(50% - 7px);
}
body .select2-drop.select2-drop-active.selectbox-in-field:not(.selectbox-search-drop) .select2-search input {
  box-sizing: border-box;
  height: calc(var(--selectbox-field-height) - 2px) !important;
  min-height: 0;
  padding: 0 32px 0 8px;
  border: 0;
  border-radius: 0;
  background-color: var(--c-surface) !important;
  font-size: 14px;
}
body .select2-drop.select2-drop-active.selectbox-in-field:not(.selectbox-search-drop) .select2-search input::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* The input a multi select types into, inside the field's frame rather than over its bottom edge: it was
   30px with a 1px margin in a 30px well, so an empty field lost its bottom border under it. */
body .select2-container-multi .select2-choices .select2-search-field input {
  height: 28px;
  margin: 0;
}

/* A multi select searches in its own chip well: the same spinner, at the well's right end. */
.select2-container-multi .select2-choices:has(input.select2-active) {
  position: relative;
}
.select2-container-multi .select2-choices:has(input.select2-active)::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 10px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--c-brand), transparent 78%);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: infinite-table-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .select2-container-multi .select2-choices:has(input.select2-active)::after,
body .select2-drop .select2-search::after,
body .select2-drop .select2-results .select2-searching::before,
body .select2-drop .select2-results .select2-searching::after {
    animation: none;
  }
}
/* ── The search appearance ───────────────────────────────────────────────────────────────────────────────────
   selectbox appearance="search": a picker that is a way to find something to add (the bundle editor's
   packages) rather than a field holding a value. Drawn as the app's search bar (searchBar.scss) — filled,
   a magnifier, no arrow. Open, its list moves up over it and the list's own search input takes the field's
   place, same height, icon and placeholder (search-placeholder), so you type where you clicked. Opening
   above, it cannot cover the field, and sits against it. */
.select2-container.selectbox-search {
  position: relative;
  width: 100% !important;
  /* Open, the list covers the field; the halo is the list's. */
}
.select2-container.selectbox-search .select2-choice {
  height: 36px !important;
  padding: 0 14px 0 44px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: var(--c-surface-subtle) !important;
  box-shadow: none !important;
  line-height: 34px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container.selectbox-search .select2-choice::before {
  content: "search";
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-family: "Material Icons";
  font-size: 20px;
  line-height: 1;
  font-feature-settings: "liga";
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  pointer-events: none;
}
.select2-container.selectbox-search .select2-choice:hover {
  background: var(--c-surface-muted) !important;
}
.select2-container.selectbox-search .select2-choice .select2-chosen {
  margin-right: 0;
  font-size: 14px;
  color: var(--c-text);
}
.select2-container.selectbox-search .select2-choice .select2-arrow {
  display: none;
}
.select2-container.selectbox-search.select2-default .select2-chosen,
.select2-container.selectbox-search .select2-choice.select2-default .select2-chosen {
  color: color-mix(in srgb, var(--c-ink), transparent 62%) !important;
}
.select2-container.selectbox-search.select2-container-active .select2-choice {
  border-color: var(--c-brand) !important;
  background: var(--c-surface) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%) !important;
}
.select2-container.selectbox-search.select2-dropdown-open .select2-choice {
  border-color: var(--c-brand) !important;
  background: var(--c-surface) !important;
  box-shadow: none !important;
}

body .select2-drop.selectbox-search-drop {
  border: 1px solid var(--c-brand);
  border-radius: 10px;
  background: var(--c-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%), 0 10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
body .select2-drop.selectbox-search-drop.selectbox-in-field {
  margin-top: calc(-1 * var(--selectbox-field-height));
}
body .select2-drop.selectbox-search-drop.select2-drop-above {
  border: 1px solid var(--c-brand) !important;
  border-radius: 10px;
}
body .select2-drop.selectbox-search-drop .select2-search {
  padding: 0;
  border-bottom: 1px solid var(--c-border);
  /* and a line along the foot of the search row while a search runs */
}
body .select2-drop.selectbox-search-drop .select2-search::after {
  content: "search";
  top: 50%;
  right: auto;
  left: 13px;
  font-size: 20px;
}
body .select2-drop.selectbox-search-drop .select2-search:has(input.select2-active)::after {
  top: calc(50% - 8px);
  left: 15px;
  width: 16px;
  height: 16px;
}
body .select2-drop.selectbox-search-drop .select2-search input {
  box-sizing: border-box;
  height: 34px !important;
  min-height: 34px;
  padding: 0 14px 0 43px;
  border: 0;
  border-radius: 0;
  background-color: var(--c-surface) !important;
  font-size: 14px;
}
body .select2-drop.selectbox-search-drop .select2-search input::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
body .select2-drop.selectbox-search-drop .select2-search:has(input.select2-active)::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-brand), transparent 100%), var(--c-brand) 30%, var(--c-brand) 70%, color-mix(in srgb, var(--c-brand), transparent 100%));
  animation: infinite-table-line 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
body .select2-drop.selectbox-search-drop .select2-results {
  max-height: 280px;
}
body .select2-drop.selectbox-search-drop .select2-results .select2-result-label {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
}

/* One WMI group, wherever it is drawn.
 *
 * Hardware Inventory rendered every group as a table, and seven of the eight groups in it hold a single
 * row — a table with six to twenty columns and one row is a record drawn sideways. This is the record, and
 * the same widget draws the group once it has moved into a panel of its own, so nothing gets redrawn on
 * the way. */
.wmi-record {
  /* One of several records — a printer among the printers. */
  /* The same grid the General panel lays fields on, for the same reason: a run of labelled values reads
     as columns, not as one long stack. */
  /* The flag set. A tick means the thing is true, a cross means it was reported false — which is not the
     same as not reported, and is why the off state keeps its label at full strength and only greys the
     mark. */
  /* ng-if leaves exactly one of the pair in the DOM, so which glyph it is has to be said in the markup —
     position cannot tell them apart. */
}
.wmi-record .wmi-record-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 10px;
}
.wmi-record .wmi-record-head .wmi-record-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
}
.wmi-record .wmi-record-head .wmi-record-count {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.wmi-record .wmi-record-entry + .wmi-record-entry {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.wmi-record .wmi-record-entry-title {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
}
.wmi-record .wmi-record-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 20px;
  margin: 0;
}
.wmi-record .wmi-record-fields .wmi-record-field {
  min-width: 0;
}
.wmi-record .wmi-record-fields dt {
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.wmi-record .wmi-record-fields dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-text);
  /* Device ids and ADSI paths have no spaces in them and are longer than any column. */
  overflow-wrap: anywhere;
}
.wmi-record .wmi-record-empty {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.wmi-record .wmi-record-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 12px;
}
.wmi-record .wmi-record-flags .wmi-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-field-text);
  white-space: nowrap;
}
.wmi-record .wmi-record-flags .wmi-flag i {
  font-size: 15px;
  line-height: 1;
}
.wmi-record .wmi-record-flags .wmi-flag.is-on {
  border-color: color-mix(in srgb, var(--c-success), transparent 55%);
  background-color: color-mix(in srgb, var(--c-success), transparent 90%);
  color: var(--c-text);
}
.wmi-record .wmi-record-flags .wmi-flag.is-on i {
  color: var(--c-success);
}
.wmi-record .wmi-record-flags .wmi-flag.is-off i {
  color: var(--c-neutral);
}
.wmi-record .wmi-record-list {
  margin: 0;
  padding-left: 16px;
}
.wmi-record .wmi-record-table {
  margin-bottom: 0;
  /* Array cells render a <ul>; without this they inherit the browser's list indent and the column no
     longer lines up with its heading. */
}
.wmi-record .wmi-record-table td ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wmi-record .inventory-bool {
  font-size: 18px;
  line-height: 18px;
  vertical-align: middle;
}
.wmi-record .inventory-bool.is-true {
  color: var(--c-success);
}
.wmi-record .inventory-bool.is-false {
  color: var(--c-neutral);
}

/* Records appended under a panel that already had content of its own. */
.device-info-extras {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
  /* The records are each inside their own <wmi-record-view>, so they are never siblings — the adjacent
     selector matched nothing and Enclosure sat against the bottom of Monitor. */
}
.device-info-extras wmi-record-view + wmi-record-view .wmi-record {
  margin-top: 16px;
}

/* A run of them, one per group. */
.wmi-record-group + .wmi-record-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}

.md-dialog-content > md-content {
  background: none;
  font-family: "Open Sans", sans-serif, arial, verdana, tahoma;
}
.md-dialog-content > md-content > md-input-container > div > md-select {
  margin: 0;
}
.md-dialog-content > md-card:first-child {
  width: 500px;
}
.md-dialog-content > md-card:first-child > md-card-title {
  padding: 10px;
}

.notUpToDate {
  color: var(--c-accent);
  font-weight: bold;
}

.long-downtime {
  color: var(--c-accent);
  font-weight: bold;
}

.removeErrorsSpacers .md-errors-spacer {
  display: none;
}

.no-installed-updates-dialog {
  width: 460px;
  max-width: calc(100vw - 32px);
}
.no-installed-updates-dialog .no-installed-updates {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  padding: 22px 24px 20px;
}
.no-installed-updates-dialog .no-installed-updates h3 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
.no-installed-updates-dialog .no-installed-updates p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-field-text);
}
.no-installed-updates-dialog .no-installed-updates-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-brand-muted), transparent 86%);
  color: var(--c-brand-muted);
}
.no-installed-updates-dialog .no-installed-updates-icon .material-icons {
  font-size: 22px;
}
.no-installed-updates-dialog .no-installed-updates-facts {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.no-installed-updates-dialog .no-installed-updates-facts li > span,
.no-installed-updates-dialog .no-installed-updates-facts .no-installed-updates-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.no-installed-updates-dialog .no-installed-updates-facts .material-icons {
  font-size: 15px;
}
.no-installed-updates-dialog .no-installed-updates-facts .is-ok {
  color: var(--c-success-deep);
}
.no-installed-updates-dialog .no-installed-updates-facts .no-installed-updates-link {
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--c-link);
  cursor: pointer;
}
.no-installed-updates-dialog .no-installed-updates-facts .no-installed-updates-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.no-installed-updates-dialog .no-installed-updates-facts .no-installed-updates-link:focus {
  outline: none;
}
.no-installed-updates-dialog .no-installed-updates-facts .no-installed-updates-link:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.updates-dialog {
  width: 80%;
  height: 70%;
  border-radius: 6px;
  overflow: hidden;
}
.updates-dialog md-dialog-content {
  height: 100%;
}
.updates-dialog .md-dialog-content {
  height: 100%;
  padding: 16px 20px;
}
.updates-dialog md-toolbar {
  border-radius: 6px 6px 0 0;
}
.updates-dialog md-toolbar .md-toolbar-tools h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.updates-dialog md-dialog-actions {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 91.6%);
}

.updates-filter-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
  margin-bottom: 0;
}
.updates-filter-container .updates-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.updates-filter-container .updates-filter span {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.updates-filter-container .updates-search {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.updates-filter-container .updates-search search-bar {
  max-width: 260px;
  width: 100%;
}

updates-selector {
  height: calc(100% - 50px);
  display: block;
}
updates-selector .updates-selector-wrapper {
  height: 100%;
}
updates-selector .updates-selector-wrapper md-checkbox {
  min-height: unset;
  display: inline-flex;
  align-items: center;
}

.updates-list-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 20px;
}
.updates-list-panel .updates-list-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--c-surface-sunken);
  border-radius: 6px;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.updates-list-panel .updates-list-header .select-all-checkbox {
  min-height: 28px;
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.updates-list-panel .updates-list-header .select-all-checkbox .md-container {
  position: relative;
  top: auto;
  margin-right: 8px;
}
.updates-list-panel .updates-list-header .select-all-checkbox .md-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-left: 0;
  padding-left: 0;
  margin-top: 12px;
}
.updates-list-panel .updates-list-header .updates-count {
  margin-left: auto;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.updates-list-panel .updates-list-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

.update-group {
  margin-bottom: 2px;
}
.update-group + .update-group {
  margin-top: 6px;
}
.update-group .group-header {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  transition: background-color 0.15s;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-surface);
}
.update-group .group-header:hover {
  background-color: var(--c-surface-sunken);
}
.update-group .group-header .toggle-icon-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.update-group .group-header .toggle-icon-btn:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
.update-group .group-header .toggle-icon-btn:focus {
  outline: 2px solid var(--c-info);
  outline-offset: 1px;
}
.update-group .group-header .toggle-icon-btn i {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  transition: transform 0.2s ease;
}
.update-group .group-header .group-checkbox {
  min-height: 22px;
  margin: 0 6px 0 4px;
  display: inline-flex;
  align-items: center;
}
.update-group .group-header .group-name {
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.update-group .group-header .group-badge {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-on-fill);
  background: color-mix(in srgb, var(--c-ink), transparent 74%);
  border-radius: 10px;
  padding: 2px 7px;
  line-height: 1.3;
  min-width: 20px;
  text-align: center;
}
.update-group .group-items {
  padding-left: 12px;
  margin-left: 12px;
  border-left: 2px solid var(--c-border);
}

.update-item {
  border-radius: 6px;
  margin: 2px 0;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.update-item:hover {
  background-color: var(--c-surface-sunken);
}
.update-item.update-item--active {
  background-color: color-mix(in srgb, var(--c-info), transparent 90%);
  box-shadow: inset 3px 0 0 var(--c-info);
}
.update-item.update-item--active .update-title {
  color: var(--c-brand);
  font-weight: 500;
}
.update-item .update-item-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  width: 100%;
  gap: 4px;
}
.update-item .update-checkbox {
  min-height: 22px;
  margin: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.update-item .severity-icon {
  font-size: 15px;
  margin: 0 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--c-info);
}
.update-item .update-title {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.1px;
}
.update-item .mobile-info-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.update-item .mobile-info-trigger:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
.update-item .mobile-info-trigger i {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
}
.update-item.critical .severity-icon {
  color: var(--c-danger);
}
.update-item.critical.update-item--active {
  box-shadow: inset 3px 0 0 var(--c-danger);
}
.update-item.important .severity-icon {
  color: var(--c-accent);
}
.update-item.important.update-item--active {
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.update-item.moderate .severity-icon {
  color: var(--c-info);
}
.update-item.optional .severity-icon {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.update-detail-panel {
  margin-left: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 90%);
  border-radius: 6px;
  padding: 20px;
}

.update-detail-card .update-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
.update-detail-card .update-detail-header .detail-severity-icon {
  font-size: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  padding: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-ink), transparent 90%);
}
.update-detail-card .update-detail-header .detail-severity-icon.critical {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger), transparent 92%);
}
.update-detail-card .update-detail-header .detail-severity-icon.important {
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent), transparent 92%);
}
.update-detail-card .update-detail-header .detail-severity-icon.moderate {
  color: var(--c-info);
  background: color-mix(in srgb, var(--c-info), transparent 92%);
}
.update-detail-card .update-detail-header .update-detail-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  margin: 7px 0;
  line-height: 1.45;
  word-break: break-word;
  letter-spacing: -0.2px;
}
.update-detail-card .update-detail-description {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  line-height: 1.6;
  margin: 0 0 20px;
}
.update-detail-card .update-detail-meta {
  background: var(--c-surface);
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 0 0 1px color-mix(in srgb, var(--c-shadow), transparent 90%);
}
.update-detail-card .update-detail-meta .meta-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
}
.update-detail-card .update-detail-meta .meta-row:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 90%);
}
.update-detail-card .update-detail-meta .meta-row .meta-icon {
  font-size: 15px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  margin-right: 10px;
  flex-shrink: 0;
}
.update-detail-card .update-detail-meta .meta-row .meta-label {
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  min-width: 72px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.update-detail-card .update-detail-meta .meta-row .meta-value {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  word-break: break-all;
}
.update-detail-card .update-detail-meta .meta-row .meta-value--mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 10.5px;
  background: var(--c-surface-sunken);
  padding: 2px 6px;
  border-radius: 6px;
}
.update-detail-card .update-detail-meta .meta-row .meta-link {
  color: var(--c-info);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.15s;
}
.update-detail-card .update-detail-meta .meta-row .meta-link:hover {
  color: var(--c-brand);
  text-decoration: underline;
}

.update-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: color-mix(in srgb, var(--c-ink), transparent 75%);
}
.update-detail-empty i {
  font-size: 44px;
  margin-bottom: 10px;
  opacity: 0.6;
}
.update-detail-empty p {
  font-size: 12.5px;
  margin: 0;
  font-weight: 500;
}

.updates-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
}
.updates-empty i {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.6;
}
.updates-empty p {
  font-size: 12.5px;
  margin: 0;
  font-weight: 500;
}

.updates-info-chart {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.updates-info-chart .updates-badge,
.updates-info-chart .updates-quiet {
  cursor: pointer;
}
.updates-info-chart .updates-badge:focus,
.updates-info-chart .updates-quiet:focus {
  outline: none;
}
.updates-info-chart .updates-badge:focus-visible,
.updates-info-chart .updates-quiet:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.updates-info-chart .updates-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.updates-info-chart .updates-badge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.updates-info-chart .updates-badge.is-critical {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger-ink);
}
.updates-info-chart .updates-badge.is-important {
  background-color: color-mix(in srgb, var(--c-accent), transparent 86%);
  color: var(--c-accent-ink);
}
.updates-info-chart .updates-badge.is-moderate {
  background-color: color-mix(in srgb, var(--c-warning), transparent 78%);
  color: var(--c-warning-ink);
}
.updates-info-chart .updates-badge.is-optional {
  background-color: color-mix(in srgb, var(--c-brand-muted), transparent 84%);
  color: var(--c-brand-muted-ink);
}
.updates-info-chart .updates-badge.is-optional::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.updates-info-chart .updates-quiet {
  display: inline-flex;
  border-radius: 6px;
}
.updates-info-chart .updates-quiet .material-icons {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}
.updates-info-chart .updates-quiet.is-current {
  color: var(--c-success-deep);
}
.updates-info-chart .updates-quiet.is-unknown {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.updates-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.updates-tooltip-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.updates-tooltip-dot.is-critical {
  background-color: var(--c-danger);
}
.updates-tooltip-dot.is-important {
  background-color: var(--c-accent);
}
.updates-tooltip-dot.is-moderate {
  background-color: var(--c-warning);
}
.updates-tooltip-dot.is-optional {
  background-color: var(--c-brand-muted);
}

.updates-tooltip-hint {
  display: block;
  margin-top: 4px;
  opacity: 0.75;
}

@media (max-width: 600px) {
  .updates-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .updates-dialog md-toolbar {
    border-radius: 0;
  }
  .updates-dialog md-toolbar .md-toolbar-tools h2 {
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
  }
  .updates-filter-container {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 0;
  }
  .updates-filter-container .updates-filter {
    width: 100%;
  }
  .updates-filter-container .updates-search {
    justify-content: stretch;
  }
  .updates-filter-container .updates-search search-bar {
    max-width: 100%;
  }
  .updates-dialog .md-dialog-content {
    display: flex;
    flex-direction: column;
    padding: 12px;
    padding-bottom: 88px;
  }
  updates-selector,
updates-selector .updates-selector-wrapper {
    display: block !important;
    height: auto !important;
    min-height: 0;
  }
  .updates-list-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0;
    flex: 0 0 100% !important;
  }
  .updates-list-panel .updates-list-scroll {
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .updates-list-panel .updates-list-header {
    border-radius: 6px;
    padding: 8px 10px;
  }
  .update-detail-panel {
    display: none !important;
  }
  .updates-dialog md-dialog-actions {
    position: relative;
    background: var(--c-surface);
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 91.6%);
    z-index: 2;
  }
  .mobile-update-info-overlay {
    position: fixed;
    inset: 0;
    background: var(--c-surface);
    z-index: 10001;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-info-close {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 10002;
    border: none;
    background: var(--c-surface);
    border-radius: 50%;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 88%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .mobile-info-content {
    padding: 20px 16px;
    margin-top: 10px;
  }
  .mobile-info-content .update-detail-card .update-detail-meta {
    border-radius: 6px;
  }
  .update-group .group-items {
    padding-left: 8px;
    margin-left: 8px;
  }
}
@media (min-width: 601px) and (max-width: 959px) {
  .updates-dialog {
    width: 96vw !important;
    height: 85vh !important;
    border-radius: 6px;
  }
  .updates-dialog .md-dialog-content {
    padding-bottom: 72px;
  }
  .updates-dialog md-dialog-actions {
    position: relative;
    background: var(--c-surface);
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 91.6%);
    z-index: 2;
  }
  .update-detail-panel {
    min-width: 240px;
    padding: 16px;
  }
}
@media (min-width: 1280px) {
  .updates-list-panel {
    min-width: 520px;
  }
  .update-detail-panel {
    min-width: 320px;
  }
}
/* Available updates of one device (services/hardwareManagement/dialogs/availableUpdates.tmpl.html): the search and the
   grouping above, the list and the update in focus side by side below, each scrolling on its own, and what is ticked
   summed up beside the buttons. */
md-dialog.app-dialog.available-updates-dialog {
  width: min(1120px, 100vw - 32px);
  max-width: none;
}
@media (min-width: 960px) {
  md-dialog.app-dialog.available-updates-dialog {
    height: min(780px, 100vh - 64px);
  }
  md-dialog.app-dialog.available-updates-dialog md-dialog-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
}

.available-updates__tools {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--c-border);
}
.available-updates__tools .app-dialog__search {
  flex: 1 1 240px;
  max-width: 480px;
  margin-right: auto;
}

.available-updates__group-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.available-updates {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  min-height: 0;
  width: 100%;
}

.available-updates__list,
.available-updates__detail {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-ink), transparent 76%) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.available-updates__list::-webkit-scrollbar,
.available-updates__detail::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.available-updates__list::-webkit-scrollbar-track,
.available-updates__detail::-webkit-scrollbar-track {
  background: transparent;
}
.available-updates__list::-webkit-scrollbar-thumb,
.available-updates__detail::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 6px;
}
.available-updates__list::-webkit-scrollbar-thumb:hover,
.available-updates__detail::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.available-updates__list::-webkit-scrollbar-corner,
.available-updates__detail::-webkit-scrollbar-corner {
  background: transparent;
}

.available-updates__list {
  border-right: 1px solid var(--c-border);
}
.available-updates__list .app-dialog__empty {
  margin: 24px;
}

.available-updates__group {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 24px;
  border-bottom: 1px solid var(--c-border);
  background-color: var(--c-surface-subtle);
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.available-updates__group {
  cursor: pointer;
  user-select: none;
}
.available-updates__group:hover {
  background-color: var(--c-surface-muted);
}
.available-updates__group:focus {
  outline: none;
}
.available-updates__group:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.available-updates__chevron.material-icons {
  margin: 0 -4px 0 -8px;
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  transition: transform 150ms ease;
}
.is-closed .available-updates__chevron.material-icons {
  transform: rotate(-90deg);
}

.available-updates__group-name {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

/* a closed group's severity mix, and how many of it are selected */
.available-updates__mix {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  font-weight: 400;
}

.available-updates__group-selected {
  font-weight: 500;
  color: var(--c-brand);
}

.available-updates__groups-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 24px;
  border-bottom: 1px solid var(--c-border);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

@media (prefers-reduced-motion: reduce) {
  .available-updates__chevron.material-icons {
    transition: none;
  }
}
.available-updates__group-count {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* One line an update: the name cut short if it must (it is whole in the detail), then restart, severity and size */
.available-updates__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}
.available-updates__row:hover {
  background-color: var(--c-surface-subtle);
}
.available-updates__row.is-current {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
  box-shadow: inset 3px 0 0 var(--c-brand);
}

/* Material's checkbox, a 16px box in line with the text */
md-checkbox.available-updates__check {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
}
md-checkbox.available-updates__check .md-container {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  width: 16px;
  height: 16px;
  transform: none;
}
md-checkbox.available-updates__check .md-icon {
  width: 16px;
  height: 16px;
}
md-checkbox.available-updates__check.md-checked .md-icon:after {
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
}
md-checkbox.available-updates__check.md-indeterminate .md-icon:after {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 0;
  border-width: 0 0 2px 0;
  border-style: solid;
  transform: none;
}
md-checkbox.available-updates__check .md-label {
  display: none;
}

.available-updates__title {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
  cursor: pointer;
}
.available-updates__title:focus-visible {
  outline: none;
  text-decoration: underline;
}

.available-updates__restart {
  display: flex;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.available-updates__restart i.material-icons {
  font-size: 15px;
}

.available-updates__size {
  flex: 0 0 52px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* Critical red, Important amber, Moderate the brand's blue; the rest an outline */
.available-updates__severity {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  font-size: 11px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.available-updates__severity.is-critical {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-danger) 16%, transparent);
  color: var(--c-danger);
}
.available-updates__severity.is-important {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-warning) 20%, transparent);
  color: var(--c-warning-ink);
}
[data-theme=dark] .available-updates__severity.is-important {
  color: var(--c-warning);
}
.available-updates__severity.is-moderate {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-brand) 16%, transparent);
  color: var(--c-brand);
}

.available-updates__detail {
  padding: 18px 24px;
}

.available-updates__detail-title {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.available-updates__desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.available-updates__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  margin: 18px 0 0;
  font-size: 13px;
}
.available-updates__facts dt {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.available-updates__facts dd {
  margin: 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.available-updates__facts a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.available-updates__facts a i.material-icons {
  font-size: 14px;
}

.available-updates__id {
  display: flex;
  align-items: center;
  gap: 4px;
}
.available-updates__id code {
  padding: 1px 6px;
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  font-size: 11.5px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.available-updates__id button {
  display: flex;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.available-updates__id button i.material-icons {
  font-size: 15px;
}
.available-updates__id button:hover {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}

.available-updates__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.available-updates__summary strong {
  font-weight: 600;
  color: var(--c-text);
}

.available-updates__link {
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  color: var(--c-link);
  cursor: pointer;
}
.available-updates__link:hover {
  text-decoration: underline;
}

/* One column on a phone: the list, then the update in focus below it, the whole content scrolling */
@media (max-width: 959px) {
  .available-updates__tools {
    padding: 12px 16px;
  }
  .available-updates {
    grid-template-columns: minmax(0, 1fr);
  }
  .available-updates__list {
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }
  .available-updates__list,
.available-updates__detail {
    overflow: visible;
  }
  .available-updates__group,
.available-updates__row {
    padding-left: 16px;
  }
  .available-updates__detail {
    padding: 16px;
  }
}
/* The subnets (ipplan/subnet/subnet.html): a table per group, nested subnets indented under theirs. */
.subnets-overview {
  margin-top: 16px;
  padding-bottom: 24px;
}

.subnets-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.subnets-overview__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 4px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.subnets-group {
  margin-top: 12px;
}

.subnets-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

.subnets-group__count {
  padding: 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background-color: var(--c-surface);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.subnets-group__empty {
  padding: 14px 16px;
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.subnets-table {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  /* past .table's own "> tbody > tr > td" padding, which made every row 53px and nothing fold */
  /* What folds: the cell's content, 38px open and nothing closed, fading as it goes. */
}
.subnets-table table.table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.subnets-table .subnets-table__subnet {
  width: 26%;
}
.subnets-table .subnets-table__hosts {
  width: 20%;
}
.subnets-table .subnets-table__size {
  width: 90px;
}
.subnets-table .subnets-table__site {
  width: 16%;
}
.subnets-table .subnets-table__actions {
  width: 56px;
}
.subnets-table table.table > thead > tr > th {
  height: 34px;
  padding: 0 10px;
  border-bottom: 1px solid var(--c-border);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.subnets-table table.table > tbody > tr > td {
  padding: 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  vertical-align: middle;
  color: var(--c-text);
  transition: border-color 0.2s ease;
}
.subnets-table table.table > tbody > tr:last-child > td {
  border-bottom: 0;
}
.subnets-table .subnets-cell {
  height: 38px;
  padding: 0 10px;
  overflow: hidden;
  line-height: 38px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: height 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.18s ease;
}
.subnets-table table.table > tbody > tr.is-folded {
  pointer-events: none;
}
.subnets-table table.table > tbody > tr.is-folded > td {
  border-bottom-width: 0;
}
.subnets-table table.table > tbody > tr.is-folded .subnets-cell {
  height: 0;
  opacity: 0;
}
.subnets-table table.table > tbody > tr {
  cursor: pointer;
}
.subnets-table table.table > tbody > tr:hover td {
  background-color: color-mix(in srgb, var(--c-ink), transparent 96%);
}
.subnets-table table.table > tbody > tr.is-foreign {
  cursor: default;
}
.subnets-table table.table > tbody > tr.is-foreign > td {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.subnets-table table.table > tbody > tr.is-foreign:hover td {
  background-color: transparent;
}
.subnets-table .is-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.subnets-table__address,
.subnets-table__range {
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px !important;
}

.subnets-table__range {
  color: color-mix(in srgb, var(--c-ink), transparent 46%) !important;
}

.subnets-table__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  vertical-align: middle;
  cursor: pointer;
}
.subnets-table__toggle i.material-icons {
  font-size: 18px;
  transition: transform 0.2s ease;
}
.subnets-table__toggle.is-collapsed i.material-icons {
  transform: rotate(-90deg);
}
.subnets-table__toggle:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  color: var(--c-text);
}
.subnets-table__toggle.is-leaf {
  cursor: default;
}
.subnets-table__toggle.is-leaf:hover {
  background: none;
}

.subnets-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  vertical-align: 1px;
}

.subnets-site {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  overflow: hidden;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: var(--c-brand);
}
.subnets-site.is-none {
  background-color: color-mix(in srgb, var(--c-warning), transparent 84%);
  color: var(--c-warning-ink);
}

.subnets-muted {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.subnets-table__row-actions {
  text-align: right;
}

.subnets-table__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.subnets-table__action i.material-icons {
  font-size: 17px;
}
.subnets-table__action:hover, .subnets-table__action:focus-visible {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}

.ipplan-legend {
  /* a whiteframe first on the page: flush with every page's content ($pageContentTop in values.scss) */
  margin-top: 16px;
  margin-left: 0;
}
.ipplan-legend > div {
  margin: 10px;
}
.ipplan-legend > div table col:nth-child(1) {
  width: 90px;
}
.ipplan-legend > div table col:nth-child(2) {
  width: 50px;
}
.ipplan-legend > div table col:nth-child(3) {
  width: 130px;
}
.ipplan-legend > div table col:nth-child(4) {
  width: 50px;
}
.ipplan-legend > div table col:nth-child(5) {
  width: 180px;
}
.ipplan-legend > div table col:nth-child(6) {
  width: 50px;
}
.ipplan-legend > div table tr {
  height: 35px;
}
.ipplan-legend > div table tr .ipplan-dhcp-scope {
  width: 40px;
  height: 20px;
}
.ipplan-legend > div table tr .ipplan-gateway {
  padding: 5px;
}

.ipplan-ip-address-set:not(.ipplan-gateway) .ip-container {
  font-weight: bold;
  border: 1px solid black;
}

.ipplan-dhcp-scope {
  border-radius: 0;
  background-color: var(--c-neutral);
}

.ipplan-online span {
  color: var(--c-success);
}

.ipplan-available span {
  color: var(--c-brand-muted);
}

.ipplan-unavailable span {
  color: var(--c-danger);
}

.ipplan-gateway {
  border: 3px solid black;
  border-radius: 6px;
  font-weight: bold;
}

.ip-in-use {
  font-weight: bold;
  border: 1px solid black;
  padding: 3px 7px;
}

.assignedHardwareTable {
  margin-top: 15px;
}
.assignedHardwareTable .creation-info {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}

.ipTable {
  margin-top: 20px;
  margin-bottom: 0;
}
.ipTable .ipplan-item {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 5px;
  width: 100%;
}
.ipTable .ipplan-item.excluded-ip {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
}
.ipTable .ipplan-item.excluded-ip:hover {
  box-shadow: none;
}
.ipTable .ipplan-item md-tooltip p {
  margin: 0;
  padding: 0;
}
.ipTable .ipplan-item .ip-container.has-ip-comments {
  padding: 0 5px;
}
.ipTable .ipplan-item .ip-container .info-icon {
  font-size: 12px;
}
.ipTable .ipplan-item .ip-container .info-icon.excluded-icon {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
}

.interface-detail-dialog-action-button {
  width: 100%;
  margin: 0;
}

.nattable-should-be-closed {
  color: var(--c-danger);
}

.nattable-should-be-open {
  color: var(--c-neutral);
}

.firewall-open-subnet-icon {
  font-size: 20px;
  margin-left: 5px;
  vertical-align: bottom;
}

.subnet-divider {
  padding-top: 20px;
  font-size: 20px;
  margin-left: 16px;
}

.dns-table .certificate-expired {
  color: var(--c-danger);
}
.dns-table .certificate-nearly-expired {
  color: var(--c-accent);
}

.ip-comments-table {
  margin: 0 10px;
}
.ip-comments-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.ip-comments-table tbody tr:last-child {
  border-bottom: none;
}
.ip-comments-table tbody tr td {
  padding: 10px 0;
  text-align: right;
}
.ip-comments-table tbody tr td.creation-info {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}
.ip-comments-table tbody tr td:first-child {
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .subnets-table .subnets-cell,
.subnets-table td,
.subnets-table__toggle i.material-icons {
    transition: none;
  }
}
/* A subnet (ipplan/subnet/subnet-detail.html): cards of plain fields, the way the automation editor's name and
   comment are built (job-details-field), and what the address makes as facts rather than disabled inputs. */
.subnet-form {
  max-width: 880px;
  margin-top: 16px;
  padding-bottom: 32px;
}

.subnet-card {
  margin-bottom: 12px;
  padding: 14px 16px 16px;
  border-radius: 6px;
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

.subnet-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
}

.subnet-card__count {
  padding: 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.subnet-card__empty {
  margin: 0 0 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.subnet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
}
@media (max-width: 768px) {
  .subnet-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.subnet-grid .is-wide {
  grid-column: 1/-1;
}
.subnet-grid .is-address {
  grid-column: span 2;
}
@media (max-width: 768px) {
  .subnet-grid .is-address {
    grid-column: auto;
  }
}

.subnet-field {
  min-width: 0;
}
.subnet-field > label,
.subnet-field .subnet-field__label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.subnet-field input,
.subnet-field textarea {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 16px;
  line-height: 28px;
  color: var(--c-text);
}
.subnet-field input::placeholder,
.subnet-field textarea::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.subnet-field input:focus,
.subnet-field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}
.subnet-field input.ng-invalid.ng-touched,
.subnet-field textarea.ng-invalid.ng-touched {
  border-color: var(--c-danger);
}
.subnet-field textarea {
  height: auto;
  min-height: 30px;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
@media (pointer: coarse) {
  .subnet-field textarea {
    font-size: 16px;
  }
}

.subnet-field__under {
  min-height: 16px;
  margin-top: 3px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.subnet-field__under.is-error,
.subnet-field__under .is-error {
  color: var(--c-danger);
}
.subnet-field__under .is-error + .is-error {
  margin-left: 8px;
}

/* Site and VLAN: select2 in an md-input-container, exactly as on the hardware detail; only its outer margins
   go. The plain fields here are built to the same 30px. */
.subnet-field md-input-container.subnet-select {
  display: block;
  margin: 0;
  padding: 0;
}
.subnet-field md-input-container.subnet-select .md-errors-spacer {
  display: none;
}
.subnet-field md-input-container.subnet-select .select2-container-multi .select2-choices {
  min-height: 28px;
}
.subnet-field md-input-container.subnet-select .select2-container-multi .select2-search-field,
.subnet-field md-input-container.subnet-select .select2-container-multi .select2-search-field input {
  height: 28px;
}
.subnet-field md-input-container.subnet-select .select2-container-multi .select2-search-field input {
  font-family: inherit;
}

/* address / prefix, one field */
.subnet-address {
  display: flex;
  align-items: center;
  gap: 6px;
}
.subnet-address input {
  flex: 1 1 auto;
  font-family: Menlo, Consolas, monospace;
  font-size: 14px;
}
@media (pointer: coarse) {
  .subnet-address input {
    font-size: 16px;
  }
}
.subnet-address .subnet-address__cidr {
  flex: 0 0 76px;
  width: 76px;
}

.subnet-address__slash {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* IPv4 | IPv6, as the other segmented switches */
.subnet-seg {
  display: inline-flex;
  box-sizing: border-box;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.subnet-seg button {
  min-width: 64px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.subnet-seg button:hover {
  color: var(--c-text);
}
.subnet-seg button.is-on {
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
  font-weight: 600;
  color: var(--c-brand);
}
.subnet-seg button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

.subnet-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.subnet-facts dt {
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.subnet-facts dd {
  margin: 0;
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--c-text);
}

.subnet-scan {
  margin-top: 12px !important;
}

.subnet-config {
  width: 100%;
  margin-bottom: 10px;
  border-collapse: collapse;
  font-size: 13px;
}
.subnet-config th {
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--c-border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.subnet-config td {
  height: 36px;
  padding: 0 8px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  word-break: break-all;
}
.subnet-config .subnet-config__key {
  width: 35%;
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.subnet-config .subnet-config__remove {
  width: 40px;
  text-align: right;
}

.subnet-config__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  align-items: center;
}
.subnet-config__add input {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 16px;
  color: var(--c-text);
}
.subnet-config__add input::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.subnet-config__add input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}

/* the row's button, the height of its fields: the brand outline once there is something to add */
.subnet-config__add-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--c-brand);
  border-radius: 6px;
  background-color: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.subnet-config__add-button i.material-icons {
  font-size: 18px;
}
.subnet-config__add-button:hover:not([disabled]) {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
.subnet-config__add-button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.subnet-config__add-button[disabled] {
  border-color: var(--c-border);
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
}

.subnet-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.subnet-icon-button i.material-icons {
  font-size: 18px;
}
.subnet-icon-button:hover, .subnet-icon-button:focus-visible {
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  color: var(--c-danger);
}

/* Devices outside subnets (subnet/dialogs/hardwareOutsideSubnets.tmpl.html), and the frame the IP plan's
   dialogs share (.ip-dialog), built as the AD object dialog:
   tokens only, so it reads in the light theme and the dark one alike. An uncovered address is a warning chip,
   a covered one a quiet one. */
md-dialog.outside-dialog,
md-dialog.ip-dialog {
  width: 900px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background-color: var(--c-surface);
}
md-dialog.outside-dialog md-dialog-content,
md-dialog.ip-dialog md-dialog-content {
  padding: 0;
}

.outside-dialog__head,
.ip-dialog__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--c-border);
}

.outside-dialog__icon,
.ip-dialog__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.outside-dialog__icon i.material-icons,
.ip-dialog__icon i.material-icons {
  font-size: 22px;
}

.outside-dialog__heading,
.ip-dialog__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.outside-dialog__title,
.ip-dialog__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-text);
}

.outside-dialog__sub,
.ip-dialog__sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.outside-dialog__close,
.ip-dialog__close {
  display: flex;
  flex: none;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.outside-dialog__close:hover, .outside-dialog__close:focus-visible,
.ip-dialog__close:hover,
.ip-dialog__close:focus-visible {
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  color: var(--c-text);
}

.outside-dialog__body,
.ip-dialog__body {
  padding: 14px 20px 8px;
}

.outside-dialog__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.outside-dialog__find {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 240px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}
.outside-dialog__find i.material-icons {
  font-size: 17px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.outside-dialog__find input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
}
.outside-dialog__find input::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
@media (pointer: coarse) {
  .outside-dialog__find input {
    font-size: 16px;
  }
}
.outside-dialog__find:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}

.outside-dialog__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.outside-dialog__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.outside-dialog__table th {
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--c-border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.outside-dialog__table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  color: var(--c-text);
}
.outside-dialog__table tbody tr:last-child td {
  border-bottom: 0;
}

.outside-dialog__device {
  width: 26%;
  font-weight: 500;
  word-break: break-word;
}

.outside-dialog__time {
  width: 120px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%) !important;
}

.outside-ip-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 14px 4px 0;
}

.outside-ip-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.outside-ip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 11px;
  background-color: var(--c-surface-subtle);
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.outside-ip.is-outside {
  border-color: color-mix(in srgb, var(--c-warning), transparent 55%);
  background-color: color-mix(in srgb, var(--c-warning), transparent 84%);
  color: var(--c-warning-ink);
}

.outside-ip__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 -3px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.outside-ip__add i.material-icons {
  font-size: 14px;
}
.outside-ip__add:hover, .outside-ip__add:focus-visible {
  background-color: color-mix(in srgb, var(--c-warning), transparent 70%);
}

.outside-dialog__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 4px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.outside-dialog__empty i.material-icons {
  font-size: 20px;
  color: var(--c-success);
}

.outside-dialog__actions,
.ip-dialog__actions {
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
}
.outside-dialog__actions .md-button,
.ip-dialog__actions .md-button {
  min-width: 88px;
  margin: 0;
  padding: 0 16px;
}

/* A subnet's addresses (subnet/ipplan.html). Tokens only, light and dark alike. The four states are the
   legend's colours: online green, seen recently the brand's, not seen for 10+ days the warning's, no agent
   a dashed edge; a gateway is ringed, a DHCP scope underlined, a comment a dot, an excluded address struck. */
.ipmap {
  margin-top: 16px;
  padding-bottom: 24px;
}

.ipmap-card {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 6px;
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

.ipmap-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
}

.ipmap-mono {
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.is-muted {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ipmap-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
}

.ipmap-summary__name {
  min-width: 180px;
}
.ipmap-summary__name h2 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}
.ipmap-summary__name .ipmap-mono {
  margin-bottom: 6px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ipmap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ipmap-stat b {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.ipmap-stat span {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ipmap-stat.is-online b {
  color: var(--c-success);
}
.ipmap-stat.is-stale b {
  color: var(--c-warning-ink);
}

.ipmap-usage {
  flex: 1 1 160px;
  min-width: 160px;
  max-width: 360px;
}

.ipmap-usage__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
}
.ipmap-usage__bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background-color: var(--c-brand);
}

.ipmap-usage__label {
  margin-top: 4px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ipmap-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  font-size: 13px;
  color: var(--c-text);
}
.ipmap-note i.material-icons {
  font-size: 18px;
  color: var(--c-brand);
}

.ipmap-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.ipmap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--c-text);
  cursor: pointer;
}
.ipmap-chip b {
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ipmap-chip:hover:not(.is-static) {
  border-color: var(--c-brand);
}
.ipmap-chip.is-off {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  text-decoration: line-through;
}
.ipmap-chip.is-off .ipmap-swatch {
  opacity: 0.35;
}
.ipmap-chip.is-static {
  border-color: transparent;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: default;
}
.ipmap-chip:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

.ipmap-swatch {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background-color: var(--c-surface-subtle);
}
.ipmap-swatch.is-online {
  background-color: var(--c-success);
}
.ipmap-swatch.is-recent {
  background-color: var(--c-brand);
}
.ipmap-swatch.is-stale {
  background-color: var(--c-warning);
}
.ipmap-swatch.is-noagent {
  border: 1px dashed color-mix(in srgb, var(--c-ink), transparent 62%);
  background: none;
}
.ipmap-swatch.is-gateway {
  box-shadow: inset 0 0 0 1.5px var(--c-text);
  background: none;
}
.ipmap-swatch.is-dhcp {
  border-bottom: 2px solid color-mix(in srgb, var(--c-ink), transparent 62%);
  border-radius: 3px 3px 0 0;
}
.ipmap-swatch.is-comment {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ipmap-find {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 230px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}
.ipmap-find i.material-icons {
  font-size: 17px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.ipmap-find input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
}
.ipmap-find input::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
@media (pointer: coarse) {
  .ipmap-find input {
    font-size: 16px;
  }
}
.ipmap-find:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}

.ipmap-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--c-text);
}

.ipmap-pager__of {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ipmap-pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: none;
  color: var(--c-text);
  cursor: pointer;
}
.ipmap-pager__step[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
  cursor: default;
}
.ipmap-pager__step:hover:not([disabled]) {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.ipmap-grid {
  overflow-x: auto;
}

.ipmap-row {
  display: grid;
  grid-template-columns: repeat(16, minmax(34px, 64px));
  gap: 3px;
  margin-bottom: 3px;
}

.ipmap-grid.is-v6 .ipmap-row {
  grid-template-columns: repeat(8, minmax(80px, 140px));
}

.ipmap-cell {
  position: relative;
  height: 26px;
  padding: 0 2px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: var(--c-surface-subtle);
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.12s ease;
}
.ipmap-cell:hover, .ipmap-cell:focus-visible {
  border-color: var(--c-brand);
  outline: none;
}
.ipmap-cell.is-online {
  background-color: color-mix(in srgb, var(--c-success), transparent 80%);
  color: var(--c-success);
  font-weight: 600;
}
.ipmap-cell.is-recent {
  background-color: color-mix(in srgb, var(--c-brand), transparent 82%);
  color: var(--c-brand);
  font-weight: 600;
}
.ipmap-cell.is-stale {
  background-color: color-mix(in srgb, var(--c-warning), transparent 80%);
  color: var(--c-warning-ink);
  font-weight: 600;
}
.ipmap-cell.is-noagent {
  border: 1px dashed color-mix(in srgb, var(--c-ink), transparent 62%);
  background-color: transparent;
  color: var(--c-text);
}
.ipmap-cell.is-gateway {
  box-shadow: inset 0 0 0 1.5px var(--c-text);
  color: var(--c-text);
}
.ipmap-cell.is-dhcp::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 2px;
  left: 4px;
  height: 2px;
  border-radius: 1px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.ipmap-cell.has-comment::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}
.ipmap-cell.is-excluded {
  text-decoration: line-through;
  opacity: 0.6;
}
.ipmap-cell.is-dim {
  opacity: 0.22;
}
.ipmap-cell.is-linked {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 75%);
  opacity: 1;
}

/* Map and devices. The page is a container, so the switch follows its own width, whether the sidebar is open
   or railed: side by side once the map (16 cells of up to 64px) and a column of devices both fit. */
.ipmap {
  container: ipmap/inline-size;
}

.ipmap-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.ipmap-main > .ipmap-card {
  margin-bottom: 0;
}

@container ipmap (min-width: 1440px) {
  .ipmap-main {
    grid-template-columns: max-content minmax(360px, 640px);
  }
}
/* A device a row: five columns under the map, two lines beside it. */
.ipmap-dev {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 150px;
  grid-template-areas: "name addr mac dns seen";
  gap: 2px 16px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--c-text);
  transition: background-color 0.12s ease;
}
.ipmap-dev:last-child {
  border-bottom: 0;
}
.ipmap-dev:not(.is-head):hover, .ipmap-dev.is-linked {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.ipmap-dev.is-head {
  padding-top: 0;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ipmap-dev__name {
  grid-area: name;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.ipmap-dev__name a {
  color: var(--c-brand);
}

.ipmap-dev__addr {
  grid-area: addr;
  min-width: 0;
}

.ipmap-dev__mac {
  grid-area: mac;
  min-width: 0;
}

.ipmap-dev__dns {
  grid-area: dns;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ipmap-dev__seen {
  grid-area: seen;
  white-space: nowrap;
}
.ipmap-dev__seen .ipmap-swatch {
  margin-right: 6px;
  vertical-align: -1px;
}

.ipmap-dev__line {
  display: block;
}

/* The two-line device row: beside the map on a wide page, and on a phone, where five columns overlapped. */
@container ipmap (min-width: 1440px) {
  .ipmap-dev {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name seen" "addr mac" "dns dns";
    gap: 2px 12px;
  }
  .ipmap-dev.is-head {
    display: none;
  }
  .ipmap-dev__name {
    overflow-wrap: break-word;
  }
  .ipmap-dev__seen,
.ipmap-dev__mac {
    justify-self: end;
    text-align: right;
  }
  .ipmap-dev__seen {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-ink), transparent 46%);
  }
  .ipmap-dev__dns {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-ink), transparent 46%);
  }
  .ipmap-dev__dns.is-empty {
    display: none;
  }
}
@container ipmap (max-width: 719px) {
  .ipmap-dev {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name seen" "addr mac" "dns dns";
    gap: 2px 12px;
  }
  .ipmap-dev.is-head {
    display: none;
  }
  .ipmap-dev__name {
    overflow-wrap: break-word;
  }
  .ipmap-dev__seen,
.ipmap-dev__mac {
    justify-self: end;
    text-align: right;
  }
  .ipmap-dev__seen {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-ink), transparent 46%);
  }
  .ipmap-dev__dns {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-ink), transparent 46%);
  }
  .ipmap-dev__dns.is-empty {
    display: none;
  }
}
/* A phone: each row of 16 as two of 8, so the map fits without scrolling sideways; the search a line of its own. */
@container ipmap (max-width: 599px) {
  .ipmap-row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ipmap-cell {
    height: 30px;
    font-size: 11px;
  }
  .ipmap-find {
    width: 100%;
  }
  .ipmap-card {
    padding: 12px;
  }
  .ipmap-summary {
    gap: 10px 20px;
  }
  .ipmap-summary__name,
.ipmap-usage {
    flex-basis: 100%;
    max-width: none;
  }
}
.ipmap-devices__nat {
  margin-left: 6px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ipmap-devices__comment {
  margin-left: 4px;
  font-size: 14px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  vertical-align: -2px;
}

/* A free address: a device for it, a new one, a NAT/ACL entry or a comment (dialogs/assignHardware.tmpl.html).
   The fields are the subnet page's (.subnet-field, .subnet-select). */
md-dialog.assign-dialog {
  width: 640px;
}

.ip-dialog__title.is-mono {
  font-family: Menlo, Consolas, monospace;
  font-size: 16px;
}

.assign-dialog__seg {
  flex-wrap: wrap;
  height: auto;
  min-height: 30px;
  margin-bottom: 14px;
}

.assign-dialog__count {
  margin-left: 6px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.assign-dialog__pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
}

.assign-dialog__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .assign-dialog__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.subnet-field select {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 16px;
  color: var(--c-text);
}
.subnet-field select:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}

.subnet-field input.is-mono {
  font-family: Menlo, Consolas, monospace;
  font-size: 14px;
}
@media (pointer: coarse) {
  .subnet-field input.is-mono {
    font-size: 16px;
  }
}

.subnet-field input[disabled] {
  background-color: var(--c-surface-subtle);
}

.assign-dialog__comments {
  margin: 0;
  padding: 0;
  list-style: none;
}
.assign-dialog__comments li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
}
.assign-dialog__comments li > i.material-icons {
  margin-top: 2px;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.assign-dialog__comment {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.assign-dialog__add {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* An address in use (dialogs/interfaceDetail.tmpl.html): the assign dialog's frame, the device's state in the
   icon and a pill, the card's details as facts. */
.interface-dialog__icon.is-online {
  background-color: color-mix(in srgb, var(--c-success), transparent 84%);
  color: var(--c-success);
}
.interface-dialog__icon.is-stale {
  background-color: color-mix(in srgb, var(--c-warning), transparent 82%);
  color: var(--c-warning-ink);
}
.interface-dialog__icon.is-noagent {
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.interface-dialog__state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--c-text);
}

.interface-dialog__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
}
@media (max-width: 768px) {
  .interface-dialog__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.interface-dialog__facts .is-wide {
  grid-column: 1/-1;
}
.interface-dialog__facts dt {
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.interface-dialog__facts dd {
  margin: 0;
  font-size: 14px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.interface-dialog__facts dd.is-mono {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
}
.interface-dialog__facts dd.is-empty {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.interface-dialog__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}

.interface-dialog__flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--c-text);
}
.interface-dialog__flag i.material-icons {
  font-size: 14px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* A DHCP scope (dhcp-scope/dhcp-scope-detail.html): the subnet page's cards and fields, a range as one row, the
   range as a bar with its excluded parts hatched. */
.dhcp-scope-form__grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.dhcp-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dhcp-range input {
  flex: 1 1 0;
  min-width: 0;
}

.dhcp-range__dash {
  flex: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.subnet-facts .is-warning {
  color: var(--c-warning-ink);
}

.dhcp-subnet {
  margin-right: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-family: inherit;
  color: var(--c-brand);
  text-decoration: none;
}
.dhcp-subnet:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 80%);
  text-decoration: none;
}

.dhcp-bar {
  position: relative;
  height: 12px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 65%);
}

.dhcp-bar__excluded {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  background: repeating-linear-gradient(135deg, var(--c-surface-subtle) 0 4px, color-mix(in srgb, var(--c-ink), transparent 74%) 4px 6px);
}

.dhcp-bar__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.dhcp-excluded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 28px;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border);
}

.dhcp-excluded__size {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.dhcp-excluded__note {
  grid-column: 1/-1;
  font-size: 11.5px;
}
.dhcp-excluded__note.is-warning {
  color: var(--c-warning-ink);
}
.dhcp-excluded__note.is-error {
  color: var(--c-danger);
}

.dhcp-excluded__add {
  margin-top: 12px;
}

@media (max-width: 768px) {
  .dhcp-scope-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dhcp-excluded {
    grid-template-columns: minmax(0, 1fr) 28px;
  }
  .dhcp-excluded__size {
    display: none;
  }
}
/* A NAT/ACL entry (nattable/nattable-detail.html): the subnet page's cards and fields. */
.nat-forward {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: start;
  gap: 0 10px;
}
@media (max-width: 768px) {
  .nat-forward {
    grid-template-columns: minmax(0, 1fr);
  }
  .nat-forward .nat-forward__arrow {
    display: none;
  }
}

.nat-forward__arrow {
  margin-top: 23px;
  font-size: 20px;
  text-align: center;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.nat-subnet .dhcp-subnet {
  font-size: 11px;
}

/* A DNS record (dns/dns-detail.html): the subnet page's cards; the type switch in the mono face its letters are
   written in, the record as a zone line, the scan's rating and certificate. */
.dns-form .subnet-card > .subnet-field + .subnet-field {
  margin-top: 10px;
}

.dns-types button {
  min-width: 52px;
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.subnet-field__under .is-warning {
  color: var(--c-warning-ink);
}

.dns-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.dns-zone__class {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.dns-zone__type {
  font-weight: 600;
  color: var(--c-brand);
}

.dns-scan__note {
  font-size: 11.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.dns-scan {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}

.dns-scan__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dns-scan__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
}

.dns-scan__sub {
  margin-top: 1px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.dns-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 19px;
  font-weight: 600;
}
.dns-grade.is-ok {
  background-color: color-mix(in srgb, var(--c-success), transparent 84%);
  color: var(--c-success);
}
.dns-grade.is-soon {
  background-color: color-mix(in srgb, var(--c-warning), transparent 82%);
  color: var(--c-warning-ink);
}
.dns-grade.is-expired {
  background-color: color-mix(in srgb, var(--c-danger), transparent 86%);
  color: var(--c-danger);
}

i.material-icons.dns-scan__icon {
  font-size: 28px;
}
i.material-icons.dns-scan__icon.is-ok {
  color: var(--c-success);
}
i.material-icons.dns-scan__icon.is-soon {
  color: var(--c-warning-ink);
}
i.material-icons.dns-scan__icon.is-expired {
  color: var(--c-danger);
}

.widget-container {
  padding: 0;
  background-color: var(--c-surface);
  min-height: 300px;
  overflow-x: hidden;
}
.widget-container md-toolbar {
  background-color: var(--c-surface);
  color: var(--c-ink);
  margin: 0;
}

/*md-progress-circular path {
  stroke: $on-fill;
}*/
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*=col-] {
  display: flex;
  flex-direction: column;
}

.dashboard-wrapper {
  /* Its cards and the attention strip keep .whiteframe's 5px on every side; the page takes it back, so their
     edges line up with every other page's content ($pageContentTop in values.scss). */
  padding-top: calc(16px - 5px);
  margin: 0 -5px;
  /* The first thing on the page: what has gone wrong, as a line of counts that open the list they came from.
     Anything at zero becomes a clause in one quiet sentence instead of a tile of its own. */
  /* Every card on this page carries .whiteframe, which is a 5px margin, so the strip and the inventory line
     take the same inset — otherwise they run 5px wider than everything under them at both ends. */
  /* The inventory, once: five cards that counted the same devices five ways. */
  /* Five short figures on a row as wide as the page: huddled at the left end they left it empty, stretched to
     equal columns they were four fifths air. Spread across it at their own size instead, with the share of the
     estate as a small number beside the count rather than a bar and a sentence under it. */
  /* One module's own numbers, named, so they cannot be read as part of the estate. */
}
.dashboard-wrapper .dashboard-attention {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 5px 5px 10px;
}
.dashboard-wrapper .attention-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: 13px;
  /* Waiting for a decision rather than broken. */
}
.dashboard-wrapper .attention-chip:hover {
  text-decoration: none;
  background-color: var(--c-surface-subtle);
}
.dashboard-wrapper .attention-chip.is-error {
  border-left-color: var(--c-danger);
}
.dashboard-wrapper .attention-chip.is-warning {
  border-left-color: var(--c-accent);
}
.dashboard-wrapper .attention-chip.is-pending {
  border-left-color: var(--c-brand);
}
.dashboard-wrapper .attention-chip .attention-count {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dashboard-wrapper .attention-chip .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.dashboard-wrapper .attention-quiet {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.dashboard-wrapper .dashboard-inventory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 24px;
  margin: 5px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.dashboard-wrapper .inventory-figure {
  color: var(--c-text);
  /* The first figure is the whole estate and carries no share, which left it looking stranded beside four
     numbers that do. A rule after it says what it is: everything following is a part of it. */
}
.dashboard-wrapper .inventory-figure:first-child {
  border-right: 1px solid var(--c-border);
}
.dashboard-wrapper .inventory-figure:hover {
  text-decoration: none;
}
.dashboard-wrapper .inventory-figure:hover .inventory-label {
  color: var(--c-text);
}
.dashboard-wrapper .inventory-figure.is-static {
  pointer-events: none;
}
.dashboard-wrapper .inventory-figure .inventory-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.dashboard-wrapper .inventory-figure .inventory-share {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.dashboard-wrapper .inventory-figure .inventory-label {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.dashboard-wrapper .dashboard-grid .grid-item--full {
  grid-column: 1/-1;
}
.dashboard-wrapper .dashboard-module-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
}
.dashboard-wrapper .dashboard-module-row .module-row-title {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  padding-right: 28px;
  border-right: 1px solid var(--c-border);
}
.dashboard-wrapper .dashboard-module-row .module-row-note {
  margin-left: 6px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.dashboard-wrapper .dashboard-module-row .inventory-figure:first-child {
  border-right: 0;
}
.dashboard-wrapper .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 0;
}
@media (max-width: 1200px) {
  .dashboard-wrapper .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 800px) {
  .dashboard-wrapper .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .dashboard-wrapper .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
.dashboard-wrapper .dashboard-grid .grid-item {
  min-width: 0;
}
.dashboard-wrapper .dashboard-grid .grid-item.grid-item--wide {
  grid-column: span 3;
}
@media (max-width: 1200px) {
  .dashboard-wrapper .dashboard-grid .grid-item.grid-item--wide {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .dashboard-wrapper .dashboard-grid .grid-item.grid-item--wide {
    grid-column: span 1;
  }
}
.dashboard-wrapper .dashboard-grid .grid-item.grid-item--tall {
  grid-row: span 2;
}
.dashboard-wrapper .dashboard-grid .simple-card {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: none !important;
  /* Fill the row it was given, minus its own margin, so cards beside each other end level. */
  height: calc(100% - 10px);
}
.dashboard-wrapper .dashboard-grid > simple-card {
  min-width: 0;
}
.dashboard-wrapper .dashboard-grid > simple-card.grid-item--wide {
  grid-column: span 3;
}
@media (max-width: 1200px) {
  .dashboard-wrapper .dashboard-grid > simple-card.grid-item--wide {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .dashboard-wrapper .dashboard-grid > simple-card.grid-item--wide {
    grid-column: span 1;
  }
}
.dashboard-wrapper .dashboard-grid > simple-card.grid-item--tall {
  grid-row: span 2;
}
.dashboard-wrapper .dashboard-grid, .dashboard-wrapper .statistics-grid {
  /* Flat, and the same everywhere: the cards carry .whiteframe, which shadows some of them and not others
     depending on which z-class each template happened to use. A hairline is the frame on this page. */
}
.dashboard-wrapper .dashboard-grid .grid-cell, .dashboard-wrapper .statistics-grid .grid-cell {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  box-shadow: none !important;
}
.dashboard-wrapper .dashboard-grid .grid-cell:hover .grid-cell-header .grid-cell-header-menu, .dashboard-wrapper .statistics-grid .grid-cell:hover .grid-cell-header .grid-cell-header-menu {
  visibility: visible;
}
.dashboard-wrapper .dashboard-grid .grid-cell.error-cell, .dashboard-wrapper .statistics-grid .grid-cell.error-cell {
  border-left: 3px solid var(--c-danger);
}
.dashboard-wrapper .dashboard-grid .grid-cell.warning-cell, .dashboard-wrapper .statistics-grid .grid-cell.warning-cell {
  border-left: 3px solid var(--c-accent);
}
.dashboard-wrapper .dashboard-grid .grid-cell.info-cell, .dashboard-wrapper .statistics-grid .grid-cell.info-cell {
  border-left: 3px solid var(--c-brand-muted);
}
.dashboard-wrapper .dashboard-grid .grid-cell.success-cell, .dashboard-wrapper .statistics-grid .grid-cell.success-cell {
  border-left: 3px solid var(--c-success);
}
.dashboard-wrapper .dashboard-grid .grid-cell.data-empty, .dashboard-wrapper .statistics-grid .grid-cell.data-empty {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  border-left-color: transparent;
  opacity: 0.5;
}
.dashboard-wrapper .dashboard-grid .grid-cell.data-empty:hover, .dashboard-wrapper .statistics-grid .grid-cell.data-empty:hover {
  transform: none;
  box-shadow: none;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-header, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-header {
  padding: 10px 12px 2px;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-height: 28px;
}
@media (hover: hover) {
  .dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-header .grid-cell-header-menu, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-header .grid-cell-header-menu {
    visibility: hidden;
  }
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body {
  text-align: center;
  padding: 4px 12px 14px;
  font-size: 28px;
  font-weight: 700;
  color: color-mix(in srgb, var(--c-ink), transparent 18%);
  overflow: hidden;
  position: relative;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body .done-icon-container, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body .done-icon-container {
  min-height: 100px;
  padding-top: 15px;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body .done-icon-container .done-icon, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body .done-icon-container .done-icon {
  font-size: 80px;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body table tbody tr td, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body table tbody tr td {
  text-align: left;
  font-size: 16px;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body--loading, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body--error, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body--error {
  text-align: center;
  padding: 8px 12px 12px;
  min-height: 50px;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body--error .error-text, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body--error .error-text {
  font-size: 12px;
  color: var(--c-danger);
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body--error .refresh-button, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body--error .refresh-button {
  margin-top: 4px;
}
.dashboard-wrapper .dashboard-grid .grid-cell .grid-cell-body--error .refresh-button .material-icons, .dashboard-wrapper .statistics-grid .grid-cell .grid-cell-body--error .refresh-button .material-icons {
  font-size: 20px;
  color: var(--c-brand-muted);
}
@media (min-width: 960px) {
  .dashboard-wrapper .dashboard-grid .job-statistics-wrapper, .dashboard-wrapper .statistics-grid .job-statistics-wrapper {
    position: relative;
  }
  .dashboard-wrapper .dashboard-grid .job-statistics-wrapper .job-statistics, .dashboard-wrapper .statistics-grid .job-statistics-wrapper .job-statistics {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
  }
}
@media (max-width: 960px) {
  .dashboard-wrapper .dashboard-grid .job-statistics-wrapper .job-statistics .grid-cell, .dashboard-wrapper .statistics-grid .job-statistics-wrapper .job-statistics .grid-cell {
    max-height: 200px;
  }
  .dashboard-wrapper .dashboard-grid .job-statistics-wrapper .job-statistics .grid-cell .grid-cell-body, .dashboard-wrapper .statistics-grid .job-statistics-wrapper .job-statistics .grid-cell .grid-cell-body {
    max-height: 168px;
  }
}
.dashboard-wrapper .firewall-warnings ul li, .dashboard-wrapper .dns-warnings ul li, .dashboard-wrapper .running-jobs ul li, .dashboard-wrapper .error-jobs ul li, .dashboard-wrapper .active-cron-jobs ul li, .dashboard-wrapper .scheduled-jobs ul li {
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.dashboard-wrapper .firewall-warnings ul li .ports, .dashboard-wrapper .dns-warnings ul li .ports, .dashboard-wrapper .running-jobs ul li .ports, .dashboard-wrapper .error-jobs ul li .ports, .dashboard-wrapper .active-cron-jobs ul li .ports, .dashboard-wrapper .scheduled-jobs ul li .ports {
  color: var(--c-danger);
}
.dashboard-wrapper .firewall-warnings ul li .expired .warning-type, .dashboard-wrapper .dns-warnings ul li .expired .warning-type, .dashboard-wrapper .running-jobs ul li .expired .warning-type, .dashboard-wrapper .error-jobs ul li .expired .warning-type, .dashboard-wrapper .active-cron-jobs ul li .expired .warning-type, .dashboard-wrapper .scheduled-jobs ul li .expired .warning-type {
  color: var(--c-danger);
}
.dashboard-wrapper .firewall-warnings ul li .expiringSoon .warning-type, .dashboard-wrapper .dns-warnings ul li .expiringSoon .warning-type, .dashboard-wrapper .running-jobs ul li .expiringSoon .warning-type, .dashboard-wrapper .error-jobs ul li .expiringSoon .warning-type, .dashboard-wrapper .active-cron-jobs ul li .expiringSoon .warning-type, .dashboard-wrapper .scheduled-jobs ul li .expiringSoon .warning-type {
  color: var(--c-accent);
}
.dashboard-wrapper .firewall-warnings ul li:last-child, .dashboard-wrapper .dns-warnings ul li:last-child, .dashboard-wrapper .running-jobs ul li:last-child, .dashboard-wrapper .error-jobs ul li:last-child, .dashboard-wrapper .active-cron-jobs ul li:last-child, .dashboard-wrapper .scheduled-jobs ul li:last-child {
  border: none;
}
.dashboard-wrapper .firewall-warnings ul li .warning-type {
  font-size: 12px;
}
.dashboard-wrapper .access-denied-container .lock-icon {
  font-size: 50px;
}
.dashboard-wrapper .access-denied-container .access-denied-title {
  font-size: 20px;
  font-weight: bold;
}

@media (min-width: 960px) {
  .device-states-chart-container {
    min-height: 300px;
    max-height: 400px;
  }
  .device-states-chart-container canvas {
    min-height: 400px;
    max-height: 400px;
    width: 100%;
  }
}

/* The update status of a fleet: one bar whose parts are the states, drawn against the number of devices. It
   was three bars scaled to the largest of them, where the longest was always full — half of eight servers and
   43% of forty-four clients drew the same picture, and a fleet with nothing healthy showed an empty track. */
.device-states-status-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  height: 100%;
  gap: 12px;
}
.device-states-status-container .device-states-stack {
  display: flex;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
}
.device-states-status-container .device-states-segment {
  height: 100%;
  cursor: pointer;
  transition: width 0.4s ease, filter 0.15s ease;
}
.device-states-status-container .device-states-segment:hover {
  filter: brightness(1.12);
}
.device-states-status-container .device-states-segment--error {
  background-color: var(--c-danger);
}
.device-states-status-container .device-states-segment--warning {
  background-color: var(--c-accent);
}
.device-states-status-container .device-states-segment--ok {
  background-color: var(--c-success);
}
.device-states-status-container .device-states-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.device-states-status-container .device-states-legend-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
}
.device-states-status-container .device-states-legend-item.is-empty {
  opacity: 0.55;
  cursor: default;
}
.device-states-status-container .device-states-legend-item .device-states-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  align-self: center;
}
.device-states-status-container .device-states-legend-item .device-states-count {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.device-states-status-container .device-states-legend-item .device-states-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.device-states-status-container .device-states-legend-item--error .device-states-swatch {
  background-color: var(--c-danger);
}
.device-states-status-container .device-states-legend-item--warning .device-states-swatch {
  background-color: var(--c-accent);
}
.device-states-status-container .device-states-legend-item--ok .device-states-swatch {
  background-color: var(--c-success);
}

.dashboard-container .content-top-strip .strip-partition {
  background-color: var(--c-surface);
  min-width: 250px;
  max-width: 250px;
  height: 80px;
  margin: auto;
  width: 50%;
}
.dashboard-container .content-top-strip .strip-partition .strip-partition-icon {
  background-color: var(--c-brand-muted);
  width: 80px;
  padding: 15px;
}
.dashboard-container .content-top-strip .strip-partition .strip-partition-icon md-icon {
  height: 50px;
  width: 50px;
}
.dashboard-container .content-top-strip .strip-partition .strip-partition-content {
  align-items: center; /* align vertical */
  vertical-align: middle;
  padding-left: 10px;
  text-align: left;
}
.dashboard-container .content-top-strip .strip-partition .strip-partition-content .strip-partition-title {
  font-size: 1em;
}
.dashboard-container .content-top-strip .strip-partition .strip-partition-content .strip-partition-value {
  font-size: 2em;
}
.dashboard-container .content-top-strip .strip-partition .strip-partition-actions {
  width: 80px;
  text-align: right;
  padding-top: 5px;
}
.dashboard-container .content-top-strip .strip-partition .strip-partition-actions md-icon {
  height: 20px;
  width: 20px;
}
.dashboard-container .filter-container {
  margin-top: 10px;
  margin-bottom: 10px;
}

.display-filter-dialog .filter-description {
  margin-bottom: 10px;
  padding: 0;
}
.display-filter-dialog .rule-wrapper {
  padding: 0;
}
.display-filter-dialog .rule-wrapper .filter-visualizer-wrapper {
  margin: 10px;
}

.menu-bar {
  width: calc(100% - var(--sidebar-width));
  height: 52px;
  position: fixed;
  left: var(--sidebar-width);
  top: 64px;
  z-index: 11;
  /* The colour of the bars above it: title, tabs and commands read as one header, set off from the page by
     the line below. (A grey band of its own put two near-alike greys on top of each other in light mode.) */
  background-color: var(--c-bar);
  /* Separates it from the toolbar above and the content below, now that all three are the same surface. */
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  overflow: hidden;
  /* Under the page's tabs when it has them: the entries act on the open tab. The layout writes the tabs
     right before the bar, so following them is what says they are there (an ng-class on <menu-bar> would
     be dropped: the directive replaces its element and brings an ng-class of its own). */
  /* No hover of its own. The row below owns the whole hover area — this element used to paint a second,
     smaller rounded box inside the row's square one, so hovering lit up two nested shapes. */
  /* Grows to hold every row rather than letting them spill past a fixed 52px. Spilled rows were outside
     the bar's box, so the bar's fill never reached them and they drew straight onto the page content
     below. The bar is position: fixed, so growing it covers that content for as long as it is open
     instead of reflowing the page. */
  /* The direct wrapper only. It shrink-wrapped to the height of its content, so the `height: 100%` on the
     row below resolved against that instead of the bar and every item sat against the top edge. */
  /* The "more entries" caret. As `position: fixed; right: 20px` its 20x20 box landed directly on top of
     the right end of the custom control, and since `.menu-bar div` makes children inherit the bar's
     opaque background it painted a white square over the search field's right border and rounded
     corners — and took the clicks there too, whether or not a caret was rendered. It is a flex child
     now; `order` keeps it at the far right, where it has always appeared. */
}
.page-tabs-bar ~ .menu-bar {
  top: calc(64px + 44px);
}
.menu-bar .menu-entry-title {
  padding: 0;
}
.menu-bar.menu-bar-collapsed {
  overflow: hidden;
}
.menu-bar.menu-bar-expanded {
  height: auto;
  overflow: visible;
  /* Open, it covers the content below rather than pushing it down. */
  z-index: 12;
  /* Open, the row is as tall as its lines and clips nothing. */
  /* The caret points at what it will do: down to bring the rest of the row into view, up to put it
     away again. It pointed down in both states, so an open bar offered to open itself. */
}
.menu-bar.menu-bar-expanded ul {
  height: auto;
  overflow: visible;
}
.menu-bar.menu-bar-expanded .menu-bar-expander .caret {
  transform: rotate(180deg);
}
.menu-bar > div {
  height: 100%;
  display: flex;
  align-items: center;
  /* The bar's right inset. It used to be carried by the custom control's margin and by the fixed
     expander's `right`, which meant the two disagreed about where the right edge was. Owning it here
     keeps the rightmost item 20px off the edge whether or not the expander has a caret to show. */
  padding-right: 20px;
}
.menu-bar div {
  /* Was $color-5, painted over the bar's own background by a blanket `.menu-bar div` rule — which is why
     the bar stayed a mid grey in the dark theme no matter what the bar itself was set to. The bar paints
     itself; its children inherit. */
  background-color: inherit;
  /* Laid out inside the bar rather than positioned against the viewport. As `position: fixed` it was
     anchored to top/height values that merely happened to match the bar's, and it escaped the bar's own
     `overflow: hidden` — so any disagreement between the two showed up as the field sitting proud of the
     bar's bottom edge. As a flex child it cannot diverge. */
}
.menu-bar div ul {
  /* Was a calc() reserving room for the control while it was position:fixed. It is a sibling in the
     flex row now, so the row simply takes what is left. */
  flex: 1 1 auto;
  min-width: 0;
  /* The row carries Material's layout-wrap. Wrapped lines stack downward from the top so the bar shows
     the first and clips the rest — centring them instead pushed the first line up past the bar's own
     top edge, which is what made an overflowing menu render as two half-cut rows.

     The inset that centres a single line is a margin rather than padding, and the shut bar is exactly
     one line tall. Carried as padding it was inside the box that clips, so the line below showed
     through the bottom inset: eight pixels of the next row's buttons, sitting under the first row
     whenever the bar held more than it could fit. */
  align-content: flex-start;
  margin: 8px 0;
  /* Each entry brings a 2px margin on its left; this makes up the rest, so the first entry's hover box
     is on the content's left edge, under the first tab (every wrapped row starts there too). */
  padding: 0 0 0 calc(16px - 2px);
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Wrapped rows sat directly on one another, which is what made an open bar read as cramped. */
  row-gap: 6px;
  list-style-type: none;
  /* The way out goes last, whatever order the page's controller built its menu in. Ordering the flex
     row rather than the array leaves every menu, and anything that looks an entry up by title, exactly
     as it was. */
  /* A panel toggle (the automation editor's toolbox) at the far right, on the side its panel opens.
     On a phone the row wraps and only its first line shows until expanded, so there it leads the row,
     as an icon: always in reach, and the panel then opens full screen with its own close. */
  /* Leading the row, the dangerous one has nothing beside it to be set apart from. */
}
.menu-bar div ul > md-menu.is-way-out {
  order: 1;
}
.menu-bar div ul > md-menu.is-panel {
  order: 2;
  margin-left: auto;
  padding-right: 8px;
}
@media (max-width: 599px) {
  .menu-bar div ul > md-menu.is-panel {
    order: -1;
    margin-left: 0;
    padding-right: 0;
  }
  .menu-bar div ul > md-menu.is-panel .menu-entry-label {
    display: none;
  }
  .menu-bar div ul > md-menu.is-panel .menu-entry-icon {
    margin-right: 0;
  }
}
.menu-bar div ul > md-menu:first-of-type > li.is-danger,
.menu-bar div ul > md-menu:first-of-type > li.starts-group {
  margin-left: 2px;
}
.menu-bar div ul > md-menu:first-of-type > li.is-danger::before,
.menu-bar div ul > md-menu:first-of-type > li.starts-group::before {
  content: none;
}
.menu-bar div ul li {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0 0 0 2px;
  padding: 0 10px;
  /* Flat, as an application's command bar: an icon and a word, a ground only under the pointer. As
     outlined buttons they looked like the filter chips under them and like any button on the page.
     The ones that are not ordinary still say so below (Save filled, Delete red, Cancel muted). */
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--c-text);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  /* A divider where another group begins: the table's own entries, the page's, the way out. */
  /* The one action the page is for. Accent, by the rule the rest of the app follows: accent is the
     primary action of the thing you are looking at, brand is app-level chrome. */
  /* Cancel undoes rather than does: a word, not a control. */
  /* The one you cannot take back. Set apart by a rule as well as by ink, because the difference
     between this and the entry beside it matters more than the difference between any other two. */
  /* A menu rather than an action: it opens something, so it keeps its caret. */
  /* Was opacity .6 over dark text, which at a glance is the same word slightly paler. A disabled
     control is a colour, not a transparency. */
}
.menu-bar div ul li:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.menu-bar div ul li.is-active {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.menu-bar div ul li.is-active .menu-entry-icon {
  color: var(--c-brand);
}
.menu-bar div ul li.is-active:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 80%);
}
.menu-bar div ul li .menu-entry-title {
  display: inline-flex;
  align-items: center;
}
.menu-bar div ul li .menu-entry-icon {
  margin-right: 6px;
  color: var(--c-field-text);
  font-size: 18px;
}
.menu-bar div ul li.starts-group {
  margin-left: 15px;
}
.menu-bar div ul li.starts-group::before {
  content: "";
  position: absolute;
  left: -8px;
  width: 1px;
  height: 20px;
  background-color: var(--c-border);
}
.menu-bar div ul li.is-primary {
  /* Tinted rather than solid, like the "+" in the bar above: the first thing seen in a flat band
     without being the one block in it. Word and icon in the accent's ink, which reads on the tint in
     both themes; the ground deepens on hover. */
  background-color: color-mix(in srgb, var(--c-accent), transparent 84%);
  color: var(--c-accent-ink);
  font-weight: 600;
}
.menu-bar div ul li.is-primary:hover {
  background-color: color-mix(in srgb, var(--c-accent), transparent 74%);
}
.menu-bar div ul li.is-primary .menu-entry-icon {
  color: var(--c-accent-ink);
}
.menu-bar div ul li.is-quiet {
  border-color: transparent;
  color: var(--c-field-text);
}
.menu-bar div ul li.is-quiet:hover {
  border-color: transparent;
  color: var(--c-text);
}
.menu-bar div ul li.is-danger {
  margin-left: 15px;
  color: var(--c-danger-ink);
}
.menu-bar div ul li.is-danger .menu-entry-icon {
  color: var(--c-danger-ink);
}
.menu-bar div ul li.is-danger:hover {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
}
.menu-bar div ul li.is-danger::before {
  content: "";
  position: absolute;
  left: -8px;
  width: 1px;
  height: 20px;
  background-color: var(--c-border);
}
.menu-bar div ul li.has-submenu {
  padding-right: 8px;
}
.menu-bar div ul li.disabled {
  pointer-events: none;
  opacity: 1;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.menu-bar div ul li.disabled .menu-entry-icon {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.menu-bar div ul .menu-bar-submenu-expander {
  position: relative;
  top: 0;
  margin-left: 6px;
  opacity: 0.7;
}
.menu-bar div .menu-bar-custom-control {
  flex: 0 0 200px;
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  /* Pages without a search leave it empty; as an empty 200px slot it kept the row's right end away from
     the edge (an entry placed there, like the toolbox toggle, stood 200px short of it). */
}
.menu-bar div .menu-bar-custom-control:empty {
  display: none;
}
.menu-bar .menu-bar-expander {
  order: 1;
  flex: 0 0 auto;
  height: 20px;
  text-align: center;
  background-color: transparent;
  cursor: pointer;
  /* It takes focus when clicked, being a div the keyboard can reach, and the browser drew a box around
     it for the rest of the time the bar was open. The keyboard still needs telling where it is; a
     pointer does not. */
  /* The caret only exists while the entries wrap past one row (menuBar.directive.js watches
     clientHeight for it). With no caret this is an empty box, so it must claim no width at all —
     otherwise it pushes the search field off the bar's right inset for a control that isn't there. */
}
.menu-bar .menu-bar-expander:focus {
  outline: none;
}
.menu-bar .menu-bar-expander:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 2px;
}
.menu-bar .menu-bar-expander .caret {
  transition: transform 140ms ease;
}
.menu-bar .menu-bar-expander:has(.caret) {
  width: 20px;
  margin-left: 8px;
}

.menu-bar-close-icon {
  vertical-align: middle;
  margin-left: 5px;
  margin-bottom: 2px;
}

@media (max-width: calc(1280px - 1px)) {
  .menu-bar {
    width: 100%;
    left: 0;
  }
}
@media (max-width: 500px) { /* remove custom control from menu if screen is small */
  .menu-bar div {
    /* The `ul` width calc that used to reserve room for the fixed expander is gone: the expander is a
       flex sibling now, so the row takes what is left of its own accord. */
  }
  .menu-bar div .menu-bar-custom-control {
    display: none;
  }
}
/* A page's sections, as a band under the toolbar, above the menu bar (whose entries belong to the open tab).

   They used to be md-tabs inside the page, and a page is drawn inside the scroller — which is inset by the
   content padding and by the scrollbar gutter reserved on both edges. Nothing in there can reach the window's
   edges, so the bar's white strip always stopped short of them. This is rendered beside the scroller, like the
   menu bar, and spans everything to the right of the sidebar. */
.page-tabs-bar {
  position: fixed;
  top: 64px;
  left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  height: 44px;
  z-index: 11;
  display: flex;
  align-items: stretch;
  gap: 22px;
  /* The first tab on the content's left edge, as are the menu bar's buttons below it. */
  padding: 0 16px;
  background-color: var(--c-bar);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.page-tabs-bar .page-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  /* Labels are not always a word: some carry a spinner, an icon or a badge. Whatever they carry sits on
     the same line as the text and at the height of it. */
  white-space: nowrap;
  /* Clicking a tab leaves it focused, and a tab is an <a>: Bootstrap underlines a:focus and the browser
     draws a box around it. Neither belongs on a tab that already says it is the current one. */
  /* The keyboard still needs to show where it is, in the label rather than around it. */
}
.page-tabs-bar .page-tab > * {
  display: inline-flex;
  align-items: center;
}
.page-tabs-bar .page-tab:hover {
  text-decoration: none;
  color: var(--c-text);
}
.page-tabs-bar .page-tab:focus, .page-tabs-bar .page-tab:active {
  text-decoration: none;
  outline: none;
}
.page-tabs-bar .page-tab:focus-visible {
  color: var(--c-brand);
}
.page-tabs-bar .page-tab.is-active {
  color: var(--c-brand);
  font-weight: 600;
  /* Sits on the bar's own hairline rather than above it. */
}
.page-tabs-bar .page-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--c-brand);
}
@media (max-width: 1280px) {
  .page-tabs-bar {
    width: 100%;
    left: 0;
  }
}

/* The content starts below whichever bars the page has. */
.main-scrollable-content-wrapper.page-has-tabs {
  padding-top: 44px;
}
.main-scrollable-content-wrapper.page-has-menu.page-has-tabs {
  padding-top: calc(52px + 44px);
}

/* The files a device holds.

   It was two tabs split by who wrote the file, and the tab that opened was the empty one on seven devices out
   of eight. One list instead, filtered by the chips when there is enough to filter. */
.files-dialog {
  /* Pushed to the far end of the row: it belongs to the list rather than to the chips beside it. */
  /* What the file is, and what it is called where it is stored. */
  /* Sizes and ages read down the column, so they line up and use the same digits. */
}
.files-dialog .files-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 24px 10px;
}
.files-dialog .files-chip {
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-field-text);
  white-space: nowrap;
}
.files-dialog .files-chip:hover {
  text-decoration: none;
  color: var(--c-text);
  border-color: color-mix(in srgb, var(--c-ink), transparent 76%);
}
.files-dialog .files-chip.is-on {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-fill);
  font-weight: 600;
}
.files-dialog .files-chip-count {
  margin-left: 4px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.files-dialog .files-search {
  margin-left: auto;
}
.files-dialog .files-table {
  margin-bottom: 0;
}
.files-dialog .files-table th,
.files-dialog .files-table td {
  padding-left: 24px;
}
.files-dialog .files-table th:not(:first-child),
.files-dialog .files-table td:not(:first-child) {
  padding-left: 10px;
}
.files-dialog .files-table th:last-child,
.files-dialog .files-table td:last-child {
  padding-right: 24px;
}
.files-dialog .files-name {
  display: block;
  color: var(--c-text);
}
.files-dialog .files-sub {
  display: block;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.files-dialog .files-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.files-dialog .files-actions {
  text-align: right;
  white-space: nowrap;
}
.files-dialog .files-actions .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  vertical-align: middle;
}
.files-dialog .files-actions .material-icons:hover {
  color: var(--c-text);
}
.files-dialog .files-actions .files-delete:hover {
  color: var(--c-danger);
}
.files-dialog .files-empty {
  padding: 34px 24px;
  text-align: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  top: 0;
  bottom: 0;
  margin-left: -5px;
}
.timeline .timeline-container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
}
.timeline .timeline-container::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-width: 10px 10px 10px 0;
  border-color: transparent color-mix(in srgb, var(--c-ink), transparent 88%) transparent transparent;
}
.timeline .timeline-container::after {
  left: -16px;
}
.timeline .timeline-container::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: var(--c-surface);
  border: 4px solid var(--c-accent);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
.timeline .timeline-container .timeline-content {
  padding: 1px 30px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  position: relative;
  border-radius: 6px;
}

.cmdb-dashboard-container > section {
  margin-bottom: 20px;
}
.cmdb-dashboard-container > section > section {
  margin-right: 20px;
}

.submenu-button-icon {
  display: inline;
  vertical-align: middle;
}

.submenu-zero-padding {
  padding: 0;
}

.select2-container {
  font-size: 16px;
}
.select2-container.select2-container-disabled {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.select2-container.select2-container-disabled .select2-choice {
  background: none;
  border: none;
}
.select2-container.select2-container-disabled .select2-choice.select2-chosen {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  display: none;
}
.select2-container.select2-container-multi .select2-choices .select2-search-choice {
  line-height: 14px;
  /* The editable tag is the same chip as a read-only one — it was 16px at weight 400 because that
     is what select2 hands you, which is why custom tags were visibly larger than the system tags
     directly beneath them in the General panel.
   *
   * And the same colour. A tag is accent and a device is neutral everywhere the two are listed
   * together (.tag--accent vs .tag in hardwareAndTagList), but inside the selector both came out
   * grey — so the field said something different about the same three tags than the row above it. */
}
.select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 5px 0 9px;
  border: 1px solid var(--c-accent);
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-accent), transparent 88%);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-accent);
  gap: 6px;
  position: relative;
}
.select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag .select2-search-choice-close {
  background: none !important;
  background-image: none !important;
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag .select2-search-choice-close::before {
  content: "×";
  color: color-mix(in srgb, var(--c-accent), transparent 35%);
  line-height: 1;
  display: block;
}
.select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag .select2-search-choice-close:hover, .select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag .select2-search-choice-close:focus {
  background-color: color-mix(in srgb, var(--c-accent), transparent 82%);
  border-radius: 4px;
}
.select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag .select2-search-choice-close:hover::before, .select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag .select2-search-choice-close:focus::before {
  color: var(--c-accent);
  transform: scale(1.15);
}
.select2-container.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-tag .select2-tag {
  /* 500, the weight .tag uses — bold was select2's, and made the same word read heavier inside
     the field than in the row above it. */
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  order: 1;
}
.select2-container.select2-container-multi .select2-choices .select2-search-field input {
  font-size: 16px;
  padding: 2px 0 0 0;
}
.select2-container.select2-container-multi .select2-choices .select2-search-field:not(:only-child) input {
  padding: 0 0 0 4px;
}
.select2-container.select2-container-multi.select2-container-disabled .select2-choices {
  border: none;
  background: none;
}
.select2-container.select2-container-multi.select2-container-disabled .select2-choices .select2-arrow {
  display: none;
}
.select2-container.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice-close {
  cursor: default;
}
.select2-container.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice-close:hover::before, .select2-container.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice-close:focus::before {
  color: var(--c-on-fill);
  transform: none;
}
.select2-container .select2-choice {
  padding: 0 0 0 2px;
}
.select2-container .select2-choice .select2-chosen {
  margin-top: 2px;
}
.select2-container .select2-choice .select2-arrow {
  margin-top: 2px;
}
.select2-container .select2-choices .select2-search-choice:first-child {
  margin-left: 0px;
}
.select2-container .select2-choices .select2-search-field {
  height: 30px;
}

.select2-drop .select2-search input {
  font-size: 16px;
}
.select2-drop .select2-results .select2-result-label {
  font-size: 16px;
}

.md-input-invalid .select2-container.select2-container-disabled .select2-choice {
  border-bottom-color: var(--c-danger);
  border-bottom-width: 1px;
}
.md-input-invalid a.select2-choice {
  border-bottom-color: var(--c-danger);
  border-bottom-width: 1px;
}

md-input-container.disabled label {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

md-select[disabled] .md-select-icon {
  display: none;
}

ip-allow-list {
  display: block;
  margin-top: 18px;
}

.ip-allow-list .ip-allow-list-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ip-allow-list .ip-allow-list-table {
  width: 100%;
  border-collapse: collapse;
}
.ip-allow-list .ip-allow-list-table th {
  padding: 0 8px 4px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.ip-allow-list .ip-allow-list-table td {
  padding: 0 8px 6px 0;
  vertical-align: middle;
}
.ip-allow-list .ip-allow-list-table td:last-child {
  width: 24px;
  padding-right: 0;
}
.ip-allow-list .ip-allow-list-table .ip-allow-list-col-ip {
  width: 40%;
}
.ip-allow-list .ip-allow-list-table .ip-allow-list-col-description {
  width: 60%;
}
.ip-allow-list .ip-allow-list-table input[type=text] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background: var(--c-surface);
  font-size: 14px;
  line-height: 20px;
}
.ip-allow-list .ip-allow-list-table input[type=text]:focus {
  border-color: var(--c-brand);
  outline: none;
}
.ip-allow-list .ip-allow-list-table input[type=text]::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.ip-allow-list .ip-allow-list-table .ip-allow-list-row-invalid input[type=text]:first-child,
.ip-allow-list .ip-allow-list-table tr.ip-allow-list-row-invalid td:first-child input[type=text] {
  border-color: var(--c-danger);
}
.ip-allow-list .ip-allow-list-remove {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.ip-allow-list .ip-allow-list-remove:hover {
  color: var(--c-danger);
}
.ip-allow-list .ip-allow-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  min-height: 18px;
}
.ip-allow-list .ip-allow-list-action,
.ip-allow-list .ip-allow-list-current-added {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
}
.ip-allow-list .ip-allow-list-action i.material-icons,
.ip-allow-list .ip-allow-list-current-added i.material-icons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.ip-allow-list .ip-allow-list-action {
  color: var(--c-brand);
  cursor: pointer;
}
.ip-allow-list .ip-allow-list-action:hover {
  text-decoration: underline;
}
.ip-allow-list .ip-allow-list-current-added {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ip-allow-list .ip-allow-list-current-added i.material-icons {
  color: var(--c-success);
}
.ip-allow-list .ip-allow-list-error,
.ip-allow-list .ip-allow-list-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
}
.ip-allow-list .ip-allow-list-error {
  color: var(--c-danger);
}
.ip-allow-list .ip-allow-list-hint {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ip-allow-list .ip-allow-list-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-accent), transparent 88%);
  color: var(--c-cat-brown);
  font-size: 13px;
  line-height: 1.45;
}
.ip-allow-list .ip-allow-list-warning i.material-icons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--c-accent);
}

/* Per key opt-out from the allowed IP list of the organisation (create/update API key dialog) */
.api-key-bypass-ips {
  margin-top: 18px;
}
.api-key-bypass-ips md-checkbox {
  margin-bottom: 4px;
}
.api-key-bypass-ips .api-key-bypass-ips-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/**
 * angular-ui-notification - Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating
 * @author Alex_Crack
 * @version v0.3.6
 * @link https://github.com/alexcrack/angular-ui-notification
 * @license MIT
 */
/* Include this file in your html if you are using the CSP mode. */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
  display: none !important;
}

ng\:form {
  display: block;
}

.ng-animate-block-transitions {
  transition: 0s all !important;
  -webkit-transition: 0s all !important;
}

/* show the element during a show/hide animation when the
 * animation is ongoing, but the .ng-hide class is active */
.ng-hide-add-active, .ng-hide-remove {
  display: block !important;
}

.ui-notification {
  position: fixed;
  z-index: 98;
  width: 360px;
  box-sizing: border-box;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-left: 4px solid var(--c-brand-muted);
  background: var(--c-surface);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-ink), transparent 82%);
}

.ui-notification.clickable {
  cursor: pointer;
}

.ui-notification.clickable:hover {
  background-color: var(--c-surface-sunken);
}

.ui-notification.killed {
  -webkit-transition: opacity ease 1s;
  -o-transition: opacity ease 1s;
  transition: opacity ease 1s;
  opacity: 0;
}

.ui-notification > h3 {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin: 10px 10px 0 10px;
  padding: 0 0 5px 0;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

.ui-notification a {
  color: var(--c-brand);
}

.ui-notification a:hover {
  text-decoration: underline;
}

.ui-notification > .message {
  margin: 10px 10px 10px 10px;
}

.ui-notification.warning {
  border-left-color: var(--c-cat-sand);
}

.ui-notification.error {
  border-left-color: var(--c-danger);
}

.ui-notification.success {
  border-left-color: var(--c-success);
}

.ui-notification.info {
  border-left-color: var(--c-brand-muted);
}

.ui-notification .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: color-mix(in srgb, var(--c-brand-muted), transparent 55%);
  width: 100%;
  border-bottom-left-radius: 5px;
}

.ui-notification.warning .progress-bar {
  background-color: color-mix(in srgb, var(--c-cat-sand), transparent 55%);
}

.ui-notification.error .progress-bar {
  background-color: color-mix(in srgb, var(--c-danger), transparent 55%);
}

.ui-notification.success .progress-bar {
  background-color: color-mix(in srgb, var(--c-success), transparent 55%);
}

.ui-notification.default-notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  padding: 13px 14px 15px 12px;
}
.ui-notification.default-notification .message-type-icon {
  flex: 0 0 24px;
  margin-top: 1px;
  font-size: 22px;
  color: var(--c-brand-muted);
}
.ui-notification.default-notification .notification-copy {
  min-width: 0;
}
.ui-notification.default-notification .notification-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.ui-notification.default-notification .messages-list {
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
  line-height: 18px;
}
.ui-notification.default-notification .close-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  cursor: pointer;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ui-notification.default-notification .close-icon:hover {
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}

/* Custom notification templates keep the same content hierarchy as the standard one. */
.ui-notification > .default-notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  padding: 13px 14px 13px 12px;
}
.ui-notification > .default-notification .message-type-icon {
  flex: 0 0 24px;
  margin-top: 1px;
  font-size: 22px;
  color: var(--c-brand-muted);
}
.ui-notification > .default-notification .notification-copy {
  min-width: 0;
}
.ui-notification > .default-notification h4 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.ui-notification > .default-notification .close-icon,
.ui-notification > .default-notification .minimize-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  cursor: pointer;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ui-notification > .default-notification .close-icon:hover,
.ui-notification > .default-notification .minimize-icon:hover {
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}

.ui-notification .md-light {
  color: inherit !important;
}

.ui-notification > .btn-grey {
  min-height: 38px;
  margin: 0;
  padding: 0 16px;
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 0;
  color: var(--c-brand);
  text-align: left;
}

.ui-notification.success .message-type-icon {
  color: var(--c-success);
}

.ui-notification.warning .message-type-icon {
  color: var(--c-cat-sand);
}

.ui-notification.error .message-type-icon {
  color: var(--c-danger);
}

/* What the job offers to do next, as small accent pills under its text rather than a full-width bar */
.ui-notification .notification-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ui-notification .notification-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  height: 28px;
  margin: 0;
  padding: 0 12px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--c-brand);
  font-size: 12.5px;
  line-height: 28px;
  text-transform: none;
  color: var(--c-on-fill);
}
.ui-notification .notification-primary-action .material-icons {
  margin: 0;
  font-size: 15px;
  vertical-align: 0;
}

/* Material's theme greys a hovered or focused button and lifts it (rgba(158,158,158,.2), a shadow), which turned the
   pill into white text on light grey. Darker accent instead, flat. */
.ui-notification .md-button.notification-primary-action:not([disabled]),
[data-theme] .ui-notification .md-button.notification-primary-action:not([disabled]) {
  box-shadow: none;
}
.ui-notification .md-button.notification-primary-action:not([disabled]):hover, .ui-notification .md-button.notification-primary-action:not([disabled]).md-focused, .ui-notification .md-button.notification-primary-action:not([disabled]):focus,
[data-theme] .ui-notification .md-button.notification-primary-action:not([disabled]):hover,
[data-theme] .ui-notification .md-button.notification-primary-action:not([disabled]).md-focused,
[data-theme] .ui-notification .md-button.notification-primary-action:not([disabled]):focus {
  background-color: var(--c-brand-active);
  box-shadow: none;
  color: var(--c-on-fill);
}
.ui-notification .md-button.notification-primary-action:not([disabled]):focus-visible,
[data-theme] .ui-notification .md-button.notification-primary-action:not([disabled]):focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

/* A second step beside the main one (Send feedback, Stop): outlined instead of filled */
.ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]),
[data-theme] .ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]) {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--c-border);
  color: var(--c-text);
}
.ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]):hover, .ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]).md-focused, .ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]):focus,
[data-theme] .ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]):hover,
[data-theme] .ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]).md-focused,
[data-theme] .ui-notification .md-button.notification-primary-action.is-quiet:not([disabled]):focus {
  background-color: var(--c-row-hover);
  box-shadow: inset 0 0 0 1px var(--c-border);
  color: var(--c-text);
}

.ui-notification .notification-secondary-actions {
  display: flex;
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

.ui-notification .notification-secondary-action {
  min-height: 38px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: var(--c-brand);
  text-align: center;
}
.ui-notification .notification-secondary-action + .notification-secondary-action {
  border-left: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

.ui-notification .notification-abort {
  color: var(--c-danger);
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.material-icons.md-dark.md-inactive {
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: color-mix(in srgb, var(--c-on-fill), transparent 0%);
}

.material-icons.md-light.md-inactive {
  color: color-mix(in srgb, var(--c-on-fill), transparent 70%);
}

/* Inline loop-cycle indicator icon (used in error texts / summaries). */
.material-icons.loop-cycle-icon {
  font-size: 14px;
  line-height: 1.2;
  vertical-align: text-bottom;
}

selectable-list {
  display: inline-block;
  margin: 0 -1px 0 0;
}
selectable-list .not-text {
  margin-right: 5px;
  color: var(--c-ink);
}
selectable-list .not-operator {
  font-size: 8px;
  border: 1px solid;
  border-radius: 6px;
  margin-left: 10px;
  margin-right: -9px;
  top: -1px;
  right: 3px;
  position: relative;
  display: inline-block;
  padding: 1px;
  color: var(--c-neutral);
}
selectable-list .not-operator.active {
  color: var(--c-ink);
  margin-right: 0;
  margin-left: 2px;
  font-size: 10px;
}
selectable-list.collapsed-list {
  height: 30px;
  overflow-y: auto;
}
selectable-list.collapsed-list .selectable-list-element {
  margin-bottom: 0;
}
selectable-list .selectable-list-element {
  margin-bottom: 5px;
  margin-right: 10px;
}
selectable-list .selectable-list-element .selectable-list-default, selectable-list .selectable-list-element .selectable-list-default-not-selectable {
  padding: 2px 10px 2px 10px;
  background: var(--c-brand);
  color: white;
  text-decoration: none;
  border-radius: 6px;
}
selectable-list .selectable-list-element .selectable-list-default:hover, selectable-list .selectable-list-element .selectable-list-default-not-selectable:hover {
  box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 5px 0 color-mix(in srgb, var(--c-shadow), transparent 86%), 0 1px 10px 0 color-mix(in srgb, var(--c-shadow), transparent 88%);
}
selectable-list .selectable-list-element .selectable-list-default i, selectable-list .selectable-list-element .selectable-list-default-not-selectable i {
  font-size: 12px;
  position: relative;
  right: 5px;
  top: 1px;
}
selectable-list .selectable-list-element.selectable-list-selected .selectable-list-default {
  background-color: var(--c-accent);
}
selectable-list .selectable-list-element.selectable-list-selected .selectable-list-default-not-selectable {
  background-color: var(--c-brand);
}

tag-selector {
  display: block;
  margin-bottom: 14px;
  clear: both;
}

.tag-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tag-filter-bar md-menu {
  display: inline-flex;
}

.tag-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 320px;
  height: 32px;
  padding: 0 6px 0 11px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 86%);
  border-radius: 7px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.tag-filter-button:hover {
  border-color: var(--c-brand);
}
.tag-filter-button:focus {
  outline: none;
}
.tag-filter-button:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}
.tag-filter-button .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.tag-filter-button.is-active {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
  color: var(--c-brand);
}

.tag-filter-button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--c-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  color: var(--c-on-fill);
}

md-menu-content.tag-filter-menu {
  width: 270px;
  max-height: 380px;
  padding: 8px;
  overflow-x: hidden;
}

.md-open-menu-container:has(> md-menu-content.tag-filter-menu) {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

.tag-filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-bottom: 6px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.tag-filter-search:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}
.tag-filter-search .material-icons {
  font-size: 17px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.tag-filter-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
}

.tag-filter-list {
  min-height: 0;
  overflow-y: auto;
}

.tag-filter-option {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
}
.tag-filter-option:hover {
  background-color: var(--c-table-row-hover);
}

.tag-filter-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.tag-filter-toggle:focus {
  outline: none;
}
.tag-filter-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
  border-radius: 6px;
}

.tag-filter-box {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid color-mix(in srgb, var(--c-ink), transparent 62%);
  border-radius: 4px;
}
.tag-filter-box .material-icons {
  font-size: 14px;
  color: var(--c-on-fill);
}

.tag-filter-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-filter-not {
  visibility: hidden;
  flex: 0 0 auto;
  height: 22px;
  margin-right: 5px;
  padding: 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 11.5px;
  color: var(--c-field-text);
  cursor: pointer;
}
.tag-filter-not:focus {
  outline: none;
}
.tag-filter-not:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}

.tag-filter-option:hover .tag-filter-not,
.tag-filter-option:focus-within .tag-filter-not {
  visibility: visible;
}

.tag-filter-option.is-included .tag-filter-toggle {
  font-weight: 600;
  color: var(--c-brand);
}
.tag-filter-option.is-included .tag-filter-box {
  border-color: var(--c-brand);
  background-color: var(--c-brand);
}

.tag-filter-option.is-excluded .tag-filter-name {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--c-danger), transparent 40%);
}
.tag-filter-option.is-excluded .tag-filter-box {
  border-color: var(--c-danger);
  background-color: var(--c-danger);
}
.tag-filter-option.is-excluded .tag-filter-not {
  visibility: visible;
  border-color: var(--c-danger);
  color: var(--c-danger-deep);
}

.tag-filter-empty {
  padding: 8px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.tag-filter-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 8px 2px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: var(--c-field-text);
}

.tag-filter-mode {
  display: inline-grid;
  grid-template-columns: auto auto;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.tag-filter-mode button {
  height: 24px;
  padding: 0 11px;
  border: 0;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 12px;
  color: var(--c-field-text);
  cursor: pointer;
}
.tag-filter-mode button + button {
  border-left: 1px solid var(--c-border);
}
.tag-filter-mode button.is-on {
  background-color: var(--c-brand);
  font-weight: 600;
  color: var(--c-on-fill);
}
.tag-filter-mode button:focus {
  outline: none;
}
.tag-filter-mode button:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 60%);
}

.tag-filter-hint {
  margin-top: 6px;
  padding: 7px 8px 2px;
  border-top: 1px solid var(--c-border);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* The query builder (queryBuilder.html): a group of conditions — whether all or any must hold, a row per
   condition (field, comparison, value), nested groups set in on a brand rule, and the two ways to add. The
   controls are the app's fields: 32px, a hairline, the brand edge when focused. */
.qb {
  /* The field, comparison and value columns, the same widths in every row and every group. */
  --qb-row: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1.3fr) 30px;
  /* all / any, the way the tag filter's "Match any/all" reads (tagSelector.html). */
  /* A field in the row: a button, a select, an input — all one shape. */
  /* A nested group: set in, on a rule in the brand colour, with its own match line and add row. */
  /* A phone: a condition's three parts one under the other, the remove button beside the first. */
}
.qb .qb-match {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.qb .qb-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background-color: var(--c-surface-subtle);
}
.qb .qb-seg button {
  padding: 2px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.qb .qb-seg button.is-on {
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
  color: var(--c-brand);
  font-weight: 600;
}
.qb .qb-seg button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}
.qb .qb-item + .qb-item {
  margin-top: 8px;
}
.qb .qb-row {
  display: grid;
  grid-template-columns: var(--qb-row);
  gap: 8px;
  align-items: center;
}
.qb .qb-control {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13.5px;
  color: var(--c-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.qb .qb-control:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 86%);
}
.qb .qb-control:focus, .qb .qb-control:focus-within, .qb .qb-control.md-focused {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
}
.qb button.qb-field {
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  cursor: pointer;
}
.qb button.qb-field .material-icons {
  flex: none;
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.qb button.qb-field.is-empty .qb-control-text {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.qb .qb-control-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qb md-select.qb-control .md-select-value {
  min-height: 0;
  padding: 0;
  border: 0;
  /* the same chevron as the field button beside it, not Material's triangle */
}
.qb md-select.qb-control .md-select-value .md-select-icon {
  width: 18px;
  margin: 0;
  transform: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.qb md-select.qb-control .md-select-value .md-select-icon::after {
  content: "expand_more";
  top: 0;
  font-family: "Material Icons";
  font-size: 18px;
  line-height: 1;
  font-feature-settings: "liga";
  transform: none;
}
.qb md-select.qb-control:not([disabled]):focus .md-select-value {
  border: 0;
}
.qb .qb-input::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.qb .qb-input[type=date] {
  display: block;
}
.qb .qb-value {
  min-width: 0;
  /* The tag and software-cluster pickers, as the same 32px field as the controls beside them: the frame is
     the container's, select2's own box inside takes its shape and no paint, the text and placeholder the
     row's size and inset. A multi grows with its chips. */
}
.qb .qb-value .qb-value-select .select2-container {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 32px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  background-clip: padding-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.qb .qb-value .qb-value-select .select2-container:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 86%);
}
.qb .qb-value .qb-value-select .select2-container.select2-container-active {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
}
.qb .qb-value .qb-value-select .select2-container.select2-dropdown-open {
  border-color: var(--c-brand);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.qb .qb-value .qb-value-select .select2-container.select2-dropdown-open.select2-drop-above {
  border-radius: 0 0 6px 6px;
}
.qb .qb-value .qb-value-select .select2-container .select2-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: 30px;
  padding: 2px 4px;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none !important;
}
.qb .qb-value .qb-value-select .select2-container .select2-choices .select2-search-choice {
  margin: 0 !important;
}
.qb .qb-value .qb-value-select .select2-container .select2-choices .select2-search-field {
  display: flex;
  align-items: center;
  height: 26px;
}
.qb .qb-value .qb-value-select .select2-container .select2-choices .select2-search-field input {
  height: 24px !important;
  margin: 0;
  padding: 0 6px !important;
  font-size: 13.5px;
  color: var(--c-text);
}
.qb .qb-value .qb-value-select .select2-container .select2-choices .select2-search-field input.select2-default {
  color: color-mix(in srgb, var(--c-ink), transparent 62%) !important;
}
.qb .qb-value .qb-value-select .select2-container .select2-choice {
  height: 30px;
  min-height: 30px;
  padding-left: 10px;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 30px;
  font-size: 13.5px;
}
.qb .qb-autocomplete {
  width: 100%;
  min-width: 0;
  height: 32px;
}
.qb .qb-autocomplete md-autocomplete-wrap {
  height: 32px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: none;
  background-color: var(--c-surface);
}
.qb .qb-autocomplete input {
  height: 30px;
  padding: 0 10px !important;
  font-size: 13.5px;
}
.qb .qb-days {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.qb .qb-days .qb-input {
  max-width: 110px;
}
.qb .qb-row .qb-remove {
  grid-column: 4;
}
.qb .qb-icon-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.qb .qb-icon-button .material-icons {
  font-size: 18px;
}
.qb .qb-icon-button:hover, .qb .qb-icon-button:focus-visible {
  outline: none;
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  color: var(--c-danger);
}
.qb .qb-subgroup {
  padding: 10px 10px 6px 12px;
  border: 1px solid var(--c-border);
  border-left: 2px solid var(--c-brand);
  border-radius: 0 8px 8px 0;
  background-color: var(--c-surface-subtle);
}
.qb .qb-add {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.qb .qb-add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  color: var(--c-link);
  cursor: pointer;
}
.qb .qb-add-button .material-icons {
  font-size: 17px;
}
.qb .qb-add-button:hover, .qb .qb-add-button:focus-visible {
  outline: none;
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.qb .qb-empty {
  padding: 26px 16px;
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  text-align: center;
}
.qb .qb-empty > .material-icons {
  font-size: 24px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.qb .qb-empty-title {
  margin-top: 6px;
  font-weight: 500;
  color: var(--c-text);
}
.qb .qb-empty-text {
  margin: 2px 0 12px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.qb .md-button.qb-empty-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  text-transform: none;
}
.qb .md-button.qb-empty-add .material-icons {
  font-size: 17px;
}
@media (max-width: 768px) {
  .qb .qb-row {
    grid-template-columns: minmax(0, 1fr) 30px;
  }
  .qb .qb-row .qb-condition,
.qb .qb-row .qb-value {
    grid-column: 1/2;
  }
  .qb .qb-row .qb-remove {
    grid-row: 1;
    grid-column: 2;
  }
}

md-dialog {
  border-radius: 4px;
}
md-dialog md-toolbar {
  background: var(--c-surface);
  color: var(--c-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
md-dialog md-toolbar .dialog-close-icon {
  margin-left: 20px;
}
md-dialog md-toolbar .job-not-started {
  background-color: var(--c-brand-muted);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .job-running {
  background-color: var(--c-accent);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .job-finished {
  background-color: var(--c-success);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .job-finished-with-error {
  background-color: var(--c-danger);
  color: var(--c-on-fill);
}
md-dialog md-toolbar .dialog-header .dialog-sub-header {
  font-size: 14px;
}
md-dialog md-dialog-content {
  height: 100%;
}
@media (max-width: 959px) {
  md-dialog md-dialog-content {
    margin-bottom: 64px;
  }
}
md-dialog md-dialog-actions {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
@media (max-width: 959px) {
  md-dialog md-dialog-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--c-surface);
    z-index: 2;
  }
  md-dialog md-dialog-actions md-button {
    flex: 1 1 0;
  }
}
md-dialog.split-dialog .md-dialog-content {
  padding: 0;
  display: flex;
  flex-direction: row;
}
md-dialog.split-dialog .split-dialog-nav {
  flex: 0 0 30%;
  border-right: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  display: flex;
  flex-direction: column;
}
md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-header {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding: 10px;
}
md-dialog.split-dialog .split-dialog-nav .split-dialog-nav-content {
  flex: 1 1 auto;
  overflow: auto;
}
md-dialog.split-dialog .split-dialog-content {
  flex: 1 1 70%;
  overflow: auto;
  padding: 24px;
}
md-dialog.split-dialog .split-dialog-content .filter-name {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--c-ink);
}
@media (max-width: 959px) {
  md-dialog.split-dialog .md-dialog-content {
    flex-direction: column;
  }
  md-dialog.split-dialog .split-dialog-nav {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
    max-height: 40vh;
  }
  md-dialog.split-dialog .split-dialog-content {
    flex: 1 1 auto;
    padding: 16px;
  }
}

@media (max-width: 959px) {
  md-dialog,
md-dialog md-dialog-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
md-backdrop.blurred-backdrop {
  opacity: 1;
  background: none;
  backdrop-filter: blur(6px) brightness(50%);
}

.modal {
  overflow: auto;
}

.modal-dialog {
  position: relative;
  display: table;
  overflow: auto;
  min-width: 300px;
}

.modal-content {
  border-radius: 0;
}

.modal-header {
  background: var(--c-neutral);
  color: var(--c-ink);
}

.close {
  color: var(--c-ink);
}

.mobile-view-table > tbody > tr.mobile-view-row > td {
  padding: 8px;
  text-align: center;
  font-size: 18px;
}

/* Assign tags (widgets/infiniteTable/dialogs/manageTags.tmpl.html): the devices as chips above, one field to find or
   create a tag, and the tags as chips in two groups. It was a split dialog: the devices in a side column, an input and
   a button to add a tag, and every tag a filled blue pill whether picked or not. */
md-dialog.app-dialog.manage-tags-dialog {
  width: 720px;
  /* One height, so a search that leaves a few tags does not shrink the dialog under the pointer */
}
@media (min-width: 960px) {
  md-dialog.app-dialog.manage-tags-dialog {
    height: min(720px, 100vh - 64px);
  }
}
md-dialog.app-dialog.manage-tags-dialog md-dialog-content {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-ink), transparent 76%) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
md-dialog.app-dialog.manage-tags-dialog md-dialog-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
md-dialog.app-dialog.manage-tags-dialog md-dialog-content::-webkit-scrollbar-track {
  background: transparent;
}
md-dialog.app-dialog.manage-tags-dialog md-dialog-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 6px;
}
md-dialog.app-dialog.manage-tags-dialog md-dialog-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-dialog.app-dialog.manage-tags-dialog md-dialog-content::-webkit-scrollbar-corner {
  background: transparent;
}

.manage-tags__devices {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 12px;
  max-height: 104px;
  padding: 10px 24px;
  overflow-y: auto;
  border-bottom: 1px solid var(--c-border);
  background-color: var(--c-surface-subtle);
}

.manage-tags__label {
  flex: 0 0 auto;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.manage-tags__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.manage-tags__picked, .manage-tags__device {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 3px 0 10px;
  border-radius: 12px;
  font-size: 12.5px;
  white-space: nowrap;
}
.manage-tags__picked button, .manage-tags__device button {
  display: flex;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.manage-tags__picked button i.material-icons, .manage-tags__device button i.material-icons {
  font-size: 14px;
}
.manage-tags__picked button:hover, .manage-tags__device button:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.manage-tags__picked button:focus-visible, .manage-tags__device button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.manage-tags__device {
  border: 1px solid var(--c-border);
  background-color: var(--c-surface);
  color: var(--c-text);
}

.manage-tags__picked {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}

.manage-tags__none {
  font-size: 12.5px;
  line-height: 24px;
  color: var(--c-danger);
}

.manage-tags__create {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--c-brand);
  cursor: pointer;
}
.manage-tags__create i.material-icons {
  font-size: 18px;
}
.manage-tags__create span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.manage-tags__create kbd {
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--c-brand), transparent 65%);
  border-radius: 4px;
  background: none;
  box-shadow: none;
  font-size: 11px;
  color: inherit;
}
.manage-tags__create:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 80%);
}

.manage-tags__section {
  margin-top: 16px;
}

.manage-tags__heading {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}
.manage-tags__heading span {
  margin-left: 4px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* A tag to pick: an outline until picked, then filled in the accent with a tick */
.manage-tags__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.manage-tags__tag i.material-icons {
  margin-left: -3px;
  font-size: 15px;
}
.manage-tags__tag mark {
  padding: 0;
  border-radius: 2px;
  background-color: var(--c-match-highlight);
  color: inherit;
}
.manage-tags__tag:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.manage-tags__tag:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.manage-tags__tag.is-on {
  border-color: var(--c-brand);
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
.manage-tags__tag.is-on .manage-tags__count {
  color: inherit;
  opacity: 0.8;
}

.manage-tags__count {
  margin-left: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.manage-tags__note {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

@media (max-width: 959px) {
  .manage-tags__devices {
    padding-left: 16px;
    padding-right: 16px;
  }
  .manage-tags__note {
    display: none;
  }
}
/* Multi-edit (hardware-detail with id "multiedit"): the device form, every section down the page, and beside it
   a panel with the selected devices and the changes that Save will write to all of them. */
.hardware-detail-container.multiEdit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
  /* Four sections from three groups: the group names over them only repeated the section names. */
  /* Changed fields name it on their label, fields whose values differ between the devices say that.
     Fields all devices share look like any other field: that is the normal case. The tag is the label's
     ::before, ordered after the text: ::after is the required star, which Angular Material's theme colours. */
}
@media (max-width: 959px) {
  .hardware-detail-container.multiEdit {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hardware-detail-container.multiEdit .panel-group .panel-group-label {
  display: none !important;
}
.hardware-detail-container.multiEdit .panel-group + .panel-group {
  margin-top: 12px !important;
}
.hardware-detail-container.multiEdit md-input-container label.multiEdit-altered,
.hardware-detail-container.multiEdit md-input-container label.multiEdit-mixed {
  display: flex;
  align-items: center;
  /* the star's own leading space collapses in a flex row */
}
.hardware-detail-container.multiEdit md-input-container label.multiEdit-altered.md-required::after,
.hardware-detail-container.multiEdit md-input-container label.multiEdit-mixed.md-required::after {
  margin-left: 3px;
}
.hardware-detail-container.multiEdit md-input-container label.multiEdit-altered::before,
.hardware-detail-container.multiEdit md-input-container label.multiEdit-mixed::before {
  order: 2;
  margin-left: 8px;
  /* In the label's own size: md-input-container scales the label to 75%, so these come out at ~10.5px. */
  padding: 0 7px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: none;
}
.hardware-detail-container.multiEdit md-input-container label.multiEdit-altered::before {
  content: "Changed";
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
}
.hardware-detail-container.multiEdit md-input-container label.multiEdit-mixed::before {
  content: "Different values";
  color: color-mix(in srgb, var(--c-text) 75%, transparent);
  background-color: color-mix(in srgb, var(--c-ink) 8%, transparent);
}

.multi-edit-panel {
  order: 2;
  position: sticky;
  top: 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 140px);
  min-height: 0;
}
@media (max-width: 959px) {
  .multi-edit-panel {
    position: static;
    max-height: none;
    margin-top: 0;
    order: 0;
  }
}

.multi-edit-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.multi-edit-card:last-child {
  flex: 1 1 auto;
}
.multi-edit-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--c-border);
}
.multi-edit-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-edit-card__body {
  padding: 10px 14px 12px;
  overflow-y: auto;
  min-height: 0;
  max-height: 40vh;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
  transition: opacity 0.15s;
}
.multi-edit-card__body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.multi-edit-card__body::-webkit-scrollbar-track {
  background: transparent;
}
.multi-edit-card__body::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.multi-edit-card__body::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.multi-edit-card__body::-webkit-scrollbar-corner {
  background: transparent;
}
.multi-edit-card__body.is-loading {
  opacity: 0.45;
}
.multi-edit-card:last-child .multi-edit-card__body {
  max-height: none;
}

.multi-edit-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: color-mix(in srgb, var(--c-text) 75%, transparent);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.multi-edit-count.is-active {
  color: var(--c-on-fill);
  background-color: var(--c-success);
}

.multi-edit-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--c-text) 70%, transparent);
  cursor: pointer;
}
.multi-edit-icon-button i {
  font-size: 18px;
}
.multi-edit-icon-button:hover, .multi-edit-icon-button:focus-visible {
  background-color: var(--c-row-hover);
  color: var(--c-text);
}

.multi-edit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.multi-edit-chip {
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 20px;
  color: var(--c-on-fill);
  background-color: var(--c-brand-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-edit-values,
.multi-edit-changes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.multi-edit-values li,
.multi-edit-changes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
}
.multi-edit-values li + li,
.multi-edit-changes li + li {
  border-top: 1px solid var(--c-border);
}
.multi-edit-values .is-empty,
.multi-edit-changes .is-empty {
  font-style: italic;
  color: color-mix(in srgb, var(--c-text) 55%, transparent);
}

.multi-edit-values__host {
  flex: 0 1 45%;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-edit-values__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.multi-edit-changes__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.multi-edit-changes__name {
  font-weight: 500;
}
.multi-edit-changes__diff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-text) 75%, transparent);
  overflow-wrap: anywhere;
}
.multi-edit-changes__diff i {
  font-size: 14px;
}

.multi-edit-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-text) 70%, transparent);
}

md-dialog.multiEdit.split-dialog .split-dialog-nav .split-dialog-nav-content {
  padding: 10px;
}
md-dialog.multiEdit.split-dialog .split-dialog-content .before-after-arrow {
  padding: 0 20px 0 20px;
}
md-dialog.multiEdit.split-dialog .split-dialog-content .changelog-title {
  padding-right: 15px;
  font-weight: bold;
}
md-dialog.multiEdit.split-dialog .split-dialog-content .critical-change {
  background-color: var(--c-accent);
}
md-dialog.multiEdit.split-dialog .split-dialog-content .change-details {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
md-dialog.multiEdit.split-dialog .split-dialog-content .hostname {
  font-weight: bold;
}

/* The device map fills the content area edge to edge. It is absolutely positioned against the page content
   (md-content.page-content), so it is pinned to that box on all four sides rather than sized 100% × 100%
   from where it happens to start: that start was after the scroller's reserved scrollbar gutter, so the
   map ran 11px past the right edge, left an empty strip on the left and put a scrollbar under the page. */
.map-container {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}

/* Nothing on this page scrolls, so the scroller needs no gutter kept free for a scrollbar either. */
.main-scrollable-content:has(.map-container) {
  overflow: hidden;
  scrollbar-gutter: auto;
}

jobs-table .jobs-table-tabs {
  margin-bottom: 15px;
}
jobs-table .jobs-table-header md-input-container {
  margin-top: 30px;
}
jobs-table .jobs-table-header .button-group {
  margin-bottom: 15px;
}
jobs-table .jobs-table-mobile-summary-field {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
jobs-table .jobs-table-mobile-summary-field > li:first-child {
  padding-bottom: 12px;
}
jobs-table .jobs-table-mobile-summary-field > li:nth-child(2) {
  padding-bottom: 12px;
}
jobs-table .table-bordered thead th {
  border-bottom-width: 1px;
}
jobs-table .table-bordered tbody > tr:first-child, jobs-table .table-bordered tbody > tr.job-date-group {
  background-color: var(--c-brand);
  color: white;
}
jobs-table .table-bordered tbody > tr:first-child > td:first-child span, jobs-table .table-bordered tbody > tr.job-date-group > td:first-child span {
  padding-left: 10px;
}
jobs-table .table-bordered tbody > tr:first-child > td:last-child, jobs-table .table-bordered tbody > tr.job-date-group > td:last-child {
  text-align: end;
  position: relative;
}
jobs-table .table-bordered tbody > tr:first-child > td:last-child i, jobs-table .table-bordered tbody > tr.job-date-group > td:last-child i {
  position: absolute;
  top: 6px;
  right: 5px;
}
jobs-table .table-bordered tbody > tr .task-title {
  padding-left: 5px;
  margin-top: 0;
}
jobs-table .table-bordered tbody > tr.job-date-group {
  background-color: var(--c-brand-muted);
}
jobs-table .table-bordered tbody > tr td:last-child {
  min-width: 100px;
}
jobs-table .table-bordered tbody > tr td .md-button {
  min-width: 95px;
  margin-right: 10px !important;
}
jobs-table .table-bordered tbody > tr.no-bottom-border td {
  border-bottom: none;
}
jobs-table .table-bordered tbody > tr.job-category-group td {
  background-color: var(--c-brand-muted);
  color: var(--c-on-fill);
  font-weight: bold;
  border-top: 1px solid var(--c-neutral);
}
jobs-table .table-bordered tbody > tr.job-date-group td {
  background-color: var(--c-neutral);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  jobs-table .table-bordered tbody > tr.job-category-group, jobs-table .table-bordered tbody > tr.job-date-group {
    display: none;
  }
  jobs-table .table-bordered tbody > tr td .md-button {
    display: inline-flex;
  }
}
jobs-table .table-bordered tbody.job-category-collapsed > tr {
  display: none;
}
jobs-table .table-bordered tbody.job-category-collapsed > tr:first-child {
  display: table-row;
}
jobs-table .table-bordered tbody .hardware-states-wrapper {
  margin: 5px 0;
}
jobs-table .table-bordered tbody .hardware-states-wrapper .job-hardware-container {
  margin: 5px;
  overflow: hidden;
}
jobs-table .table-bordered tbody .hardware-states-wrapper .job-hardware-container .hardware-list-wrapper {
  max-height: 150px;
  overflow-y: scroll;
  padding: 0 5px 5px 5px;
  height: 100%;
}
jobs-table .jobs-table-footer {
  font-size: 30px;
}

.wuinstall-output-dialog .no-data-available {
  text-align: center;
  font-size: 16px;
}
.wuinstall-output-dialog table tbody tr td:first-child {
  font-weight: bold;
}
.wuinstall-output-dialog table tbody tr ul {
  list-style-type: none;
  padding: 0;
}

.hardware-job-view {
  padding: 10px;
}
.hardware-job-view .debug-instructions-container .debug-instructions-title {
  padding-top: 10px;
}
.hardware-job-view .terminal-header-container {
  padding-top: 10px;
}
.hardware-job-view .job-info-container.online .info {
  padding: 8px 5px 0px 5px;
}
.hardware-job-view .job-info-container.online .info.status-info {
  padding-top: 0;
}
.hardware-job-view .job-info-container.online .info.status-info .status-circle {
  margin-right: 5px;
  padding-top: 10px;
}
.hardware-job-view .job-info-container .info {
  border-right: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding: 0 5px;
}
.hardware-job-view .job-info-container .info.status-info .status-circle {
  margin-right: 5px;
}
.hardware-job-view .job-info-container .info:last-child {
  border: none;
}

.delete-enabled-cronjob {
  color: var(--c-neutral);
  cursor: pointer;
}

button-group {
  margin-right: 15px;
}
button-group .button-group {
  width: 60px;
}
button-group .button-group-horizontal {
  width: 80px;
}
button-group .button-group-button {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding: 4px;
  width: 40px;
  text-align: center;
}
button-group .button-group-button:first-child {
  border-radius: 6px 0 0 6px;
}
button-group .button-group-button:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}
button-group .button-group-button.active {
  background-color: var(--c-accent);
  color: var(--c-on-fill);
  box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 5px 0 color-mix(in srgb, var(--c-shadow), transparent 86%), 0 1px 10px 0 color-mix(in srgb, var(--c-shadow), transparent 88%);
}

md-radio-button.md-default-theme.md-checked .md-off, md-radio-button.md-checked .md-off {
  border-color: var(--c-accent);
}
md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
  background-color: var(--c-accent);
}

/* Which section of a page you are on. It was drawn in $color-2 — the accent, one of the chart colours —
   while everything else that means "this one is current" is the brand: the sidebar's active row, a filter
   pill, an open link. And the row sat on the page grey between a white bar and white cards with no surface
   of its own, so it read as floating rather than as the head of the page. */
/* A page's own tabs, as opposed to tabs inside a card or a dialog: <md-tabs page-level> hands its row of
   labels to the layout, which draws it in a band across the top of the window (pageTabs.scss). The element
   stays where it is and keeps doing everything else it does — it just stops drawing the row itself. */
md-tabs.is-page-level > md-tabs-wrapper {
  display: none;
}

/* A dialog's tabs take the dialog's gutter.
   A label sits flush with the left edge of the row it is in, so that a page's tabs line up with the column
   of content beneath them. A dialog has no such column — the edge of the row is the edge of the dialog —
   and the labels ended up against it, while the title above and everything below were inset.

   Only where the tabs are the dialog's own first thing: a few dialogs put theirs inside the padded content
   box instead, and those are inset already. */
md-dialog > md-dialog-content > md-tabs > md-tabs-wrapper {
  padding-left: 24px;
  padding-right: 24px;
}

md-tabs {
  /* The label's colour is settled in material/_surface-reset.scss, where it has the weight to beat Material's
     own themed rules; only its shape is set here. Tabs sit at their own width rather than each taking an equal
     share of the row — that is md-stretch-tabs="never" on the element, not a width forced from here: Material
     measures the tabs in JavaScript to place the marker under them, and a width it did not decide leaves the
     marker under the tab you were on before. */
}
md-tabs md-tabs-wrapper {
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
md-tabs md-ink-bar {
  color: var(--c-brand);
  background-color: var(--c-brand);
}
md-tabs .md-tab {
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: normal;
  padding: 12px 0;
  margin-right: 22px;
  /* Material gives every tab a 160px floor, which is what spreads three short words across the page. The
     label decides the width now; Material still measures the tabs afterwards, so the marker lands on them. */
  min-width: 0;
}
md-tabs .md-tab:last-child {
  margin-right: 0;
}
md-tabs .md-tab.md-active {
  color: var(--c-brand);
  font-weight: 600;
}

.md-button.md-fab:hover:not([disabled]) {
  background-color: var(--c-brand-dark);
}

.md-button.md-fab.md-focused:not([disabled]) {
  background-color: var(--c-brand-dark);
}

md-radio-group:not([disabled]) .md-primary.md-checked .md-off {
  border-color: var(--c-brand);
}

md-radio-group:not([disabled]) .md-primary .md-on {
  background-color: var(--c-brand);
}

/* The field label, on the same footing as every other label in the app — the table headings, the adapter
 * and disk fact grids, the update tiles: small, tracked, upper-case, in $field-text. It was 700 weight at
 * 54% black, which for a 10.5px label reads as shouting rather than naming.
 *
 * Specificity, again: Material's own `md-input-container.md-default-theme label` sits at (0,1,2) and its
 * generated theme is injected after style.css, so the rule that was here — at (0,1,2) too, since :not()
 * takes the specificity of its argument — lost the tie and never applied. This is (0,3,2).
 *
 * md-no-float labels are excluded: those sit inside the field as a placeholder rather than above it.
 */
md-input-container:not(.disabled):not(.disabled) label:not(.md-no-float) {
  /* Scaled to .75 by the transform below, so this renders at about 10.5px. */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}

md-input-container md-select:not([disabled]):focus .md-select-value {
  border-bottom-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  border-bottom-width: 1px;
}
md-input-container md-select .md-select-value.md-select-placeholder {
  padding: 0 10px 0 4px;
}

md-select:not([disabled]) .md-select-value {
  color: var(--c-ink);
}

md-select:not([disabled]) .md-select-value .md-text {
  color: var(--c-ink);
  font-weight: 100;
}

md-select {
  height: 30px;
}
md-select .md-select-value {
  border-radius: 6px;
  padding: 0 10px 0 4px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  margin-bottom: 0;
}
md-select:not([disabled]):focus .md-select-value {
  border-bottom-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  border-bottom-width: 1px;
}

/* Material's switch drawn as the app's switch (.table-switch, jobTables.scss): a 36×20 track, grey when off and green
   with a tick in the knob when on. It was orange both ways but for a shade. The theme CSS Material injects comes after
   style.css, so the colours are written to win on specificity. */
md-switch .md-container {
  width: 36px;
  height: 20px;
}

md-switch .md-bar {
  top: 0;
  left: 0;
  width: 36px;
  height: 20px;
  border-radius: 10px;
}

html md-switch .md-bar.md-bar.md-bar {
  background-color: color-mix(in srgb, var(--c-ink), transparent 76%);
}

html md-switch.md-checked .md-bar.md-bar.md-bar {
  background-color: var(--c-success-deep);
  opacity: 1;
}

md-switch .md-thumb-container {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
}

html md-switch .md-thumb.md-thumb.md-thumb {
  background-color: #fff;
}

html md-switch.md-checked .md-thumb.md-thumb.md-thumb {
  background-color: #fff;
}

md-switch .md-thumb.md-thumb {
  width: 16px;
  height: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, rgb(0,0,0), transparent 70%);
}
md-switch .md-thumb.md-thumb::after {
  content: "check";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Material Icons";
  font-size: 12px;
  line-height: 1;
  color: var(--c-success-deep);
  opacity: 0;
  transition: opacity 150ms ease;
}
md-switch .md-thumb.md-thumb .md-ripple-container {
  display: none;
}

md-switch.md-checked .md-thumb.md-thumb::after {
  opacity: 1;
}

md-switch.md-focused .md-thumb:before {
  display: none;
}

md-switch.md-focused .md-bar {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 60%);
}

md-switch[disabled] .md-container {
  opacity: 0.5;
}

md-slider .md-track.md-track-fill {
  background-color: var(--c-accent);
}
md-slider .md-thumb::after {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

/* A disabled field should be the quietest thing in a form; this one was the loudest — a 12% black fill
   under 38% black text, darker than the fields you can actually edit, with Material's dotted underline
   drawn over it.
 *
 * The dotted line is a repeating linear-gradient background-image, and the rule that sets it lives in the
 * theme CSS Material generates at runtime and injects into <head> — after style.css, so it wins every tie
 * on document order. The override that used to be here matched at the same specificity and never applied.
 * The rule to beat is `md-input-container.md-default-theme .md-input[disabled]` at (0,3,1); repeating the
 * attribute takes this to (0,3,2) without naming a theme Material may rename, and without another
 * !important. Both routes to disabled are covered: the attribute on the field, and a disabled ancestor —
 * the hardware form wraps its panels in a fieldset that carries it for a withdrawn device.
 */
[disabled][disabled] md-input-container input.md-input,
[disabled][disabled] md-input-container textarea.md-input,
md-input-container input.md-input[disabled][disabled],
md-input-container textarea.md-input[disabled][disabled] {
  background-color: var(--c-surface-subtle);
  background-image: none;
  border: 1px solid var(--c-border);
  /* 38% black on that fill is about 2.4:1. The value in a read-only field is still information. */
  color: var(--c-field-text);
  cursor: default;
}

/* The field outline on $border too. Material's theme sets it from
 * `md-input-container.md-default-theme .md-input` at (0,2,1); :not([disabled]) takes this to (0,2,2) and
 * says what it means, since the disabled state above draws its own. Deliberately placed before the focus
 * and invalid rules below so those still win — focus is (0,3,2), invalid ties at (0,2,2) on order.
 */
md-input-container input.md-input:not([disabled]),
md-input-container textarea.md-input:not([disabled]) {
  border-color: var(--c-border);
  /* And its own surface. Material's field is transparent, which was fine when the border was an ink alpha
     — it darkened whatever it sat on. $border is a tint, so on the sunken ground the hardware class form
     uses, an #E9EBEE border on an #E9EBEE background showed a label and no box at all. */
  background-color: var(--c-surface);
}

md-input-container.md-input-focused .md-input {
  border-width: 1px;
}
md-input-container .md-input {
  border-width: 1px;
  border-radius: 6px;
  padding: 0 4px;
}
md-input-container .md-input.ng-invalid.ng-dirty {
  border-width: 1px;
}
md-input-container:not(.md-input-invalid).md-input-focused .md-input, md-input-container:not(.md-input-invalid).md-input-focused.md-default-theme .md-input, md-input-container:not(.md-input-invalid).md-input-resized .md-input, md-input-container:not(.md-input-invalid).md-input-resized.md-default-theme .md-input {
  border-color: var(--c-brand-dark);
}
md-input-container:not(.md-input-invalid).md-input-focused label, md-input-container:not(.md-input-invalid).md-input-focused md-icon, md-input-container:not(.md-input-invalid).md-input-focused.md-default-theme label, md-input-container:not(.md-input-invalid).md-input-focused.md-default-theme md-icon, md-input-container:not(.md-input-invalid).md-input-resized label, md-input-container:not(.md-input-invalid).md-input-resized md-icon, md-input-container:not(.md-input-invalid).md-input-resized.md-default-theme label, md-input-container:not(.md-input-invalid).md-input-resized.md-default-theme md-icon {
  color: var(--c-brand-dark);
}
md-input-container label:not(.md-no-float) {
  transform: translate3d(0, 6px, 0) scale(0.75) !important;
}
md-input-container, md-input-container.md-default-theme {
  /* The theme paints the star black at 54% while the field is neither focused nor invalid, with a
     selector that outranked this one: grey on a light page, invisible on a dark one. */
}
md-input-container.md-input-invalid .md-input, md-input-container.md-default-theme.md-input-invalid .md-input {
  border-color: var(--c-danger);
}
md-input-container label.md-required::after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required::after, md-input-container.md-default-theme label.md-required::after, md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required::after {
  color: var(--c-danger);
}

[disabled] md-input-container .md-input {
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

md-progress-circular path, md-progress-circular.md-default-theme path {
  stroke: var(--c-brand-dark);
}

md-select-menu:not(.md-overflow) md-content {
  padding: 0;
}
md-select-menu md-content md-option {
  max-height: 30px;
}

/* The open list of every md-select. Material marked the chosen option in its own primary, a dark blue that all
   but vanished on the dark theme's grey list; it is the brand now, which the dark theme lifts, on the brand's
   tint. And the app's thin scrollbar rather than the browser's white one. The list's own class three times
   over: Material's generated theme rules come after style.css and reach (0,3,3) with .md-dark-theme and
   .md-focused on the option. */
md-select-menu._md._md._md md-content {
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
md-select-menu._md._md._md md-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
md-select-menu._md._md._md md-content::-webkit-scrollbar-track {
  background: transparent;
}
md-select-menu._md._md._md md-content::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
md-select-menu._md._md._md md-content::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
md-select-menu._md._md._md md-content::-webkit-scrollbar-corner {
  background: transparent;
}
md-select-menu._md._md._md md-content md-option:not([disabled]):hover,
md-select-menu._md._md._md md-content md-option:not([disabled]).md-focused,
md-select-menu._md._md._md md-content md-option:not([disabled]):focus {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
}
md-select-menu._md._md._md md-content md-option[selected],
md-select-menu._md._md._md md-content md-option[selected].md-focused,
md-select-menu._md._md._md md-content md-option[selected]:focus,
md-select-menu._md._md._md md-content md-option[selected]:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-weight: 500;
}

/* ========================================================================
 * bootstrap-tour - v0.12.0
 * http://bootstraptour.com
 * ========================================================================
 * Copyright 2012-2015 Ulrich Sossou
 *
 * ========================================================================
 * Licensed under the MIT License (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://opensource.org/licenses/MIT
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================================
 */
/*!
 * Bootstrap v3.1.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 6px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active, .btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px color-mix(in srgb, rgb(0,0,0), transparent 87.5%);
  box-shadow: inset 0 3px 5px color-mix(in srgb, rgb(0,0,0), transparent 87.5%);
}
.btn.disabled, .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: none;
}

.btn-default {
  color: #333;
  background-color: var(--c-surface);
  border-color: #ccc;
}
.btn-default:focus, .btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover, .btn-default:active, .btn-default.active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-default:active:hover, .btn-default.active:hover {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.open > .dropdown-toggle.btn-default:hover {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.btn-default:active:focus, .btn-default.active:focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.open > .dropdown-toggle.btn-default:focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.btn-default:active.focus, .btn-default.active.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.open > .dropdown-toggle.btn-default.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.btn-default:active, .btn-default.active {
  background-image: none;
}

.open > .dropdown-toggle.btn-default {
  background-image: none;
}

.btn-default.disabled:hover, .btn-default[disabled]:hover {
  background-color: var(--c-surface);
  border-color: #ccc;
}

fieldset[disabled] .btn-default:hover {
  background-color: var(--c-surface);
  border-color: #ccc;
}

.btn-default.disabled:focus, .btn-default[disabled]:focus {
  background-color: var(--c-surface);
  border-color: #ccc;
}

fieldset[disabled] .btn-default:focus {
  background-color: var(--c-surface);
  border-color: #ccc;
}

.btn-default.disabled.focus, .btn-default[disabled].focus {
  background-color: var(--c-surface);
  border-color: #ccc;
}

fieldset[disabled] .btn-default.focus {
  background-color: var(--c-surface);
  border-color: #ccc;
}

.btn-default .badge {
  color: var(--c-on-fill);
  background-color: #333;
}

.btn-primary {
  color: var(--c-on-fill);
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary:focus, .btn-primary.focus {
  color: var(--c-on-fill);
  background-color: #286090;
  border-color: #122b40;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active {
  color: var(--c-on-fill);
  background-color: #286090;
  border-color: #204d74;
}

.open > .dropdown-toggle.btn-primary {
  color: var(--c-on-fill);
  background-color: #286090;
  border-color: #204d74;
}

.btn-primary:active:hover, .btn-primary.active:hover {
  color: var(--c-on-fill);
  background-color: #204d74;
  border-color: #122b40;
}

.open > .dropdown-toggle.btn-primary:hover {
  color: var(--c-on-fill);
  background-color: #204d74;
  border-color: #122b40;
}

.btn-primary:active:focus, .btn-primary.active:focus {
  color: var(--c-on-fill);
  background-color: #204d74;
  border-color: #122b40;
}

.open > .dropdown-toggle.btn-primary:focus {
  color: var(--c-on-fill);
  background-color: #204d74;
  border-color: #122b40;
}

.btn-primary:active.focus, .btn-primary.active.focus {
  color: var(--c-on-fill);
  background-color: #204d74;
  border-color: #122b40;
}

.open > .dropdown-toggle.btn-primary.focus {
  color: var(--c-on-fill);
  background-color: #204d74;
  border-color: #122b40;
}

.btn-primary:active, .btn-primary.active {
  background-image: none;
}

.open > .dropdown-toggle.btn-primary {
  background-image: none;
}

.btn-primary.disabled:hover, .btn-primary[disabled]:hover {
  background-color: #337ab7;
  border-color: #2e6da4;
}

fieldset[disabled] .btn-primary:hover {
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn-primary.disabled:focus, .btn-primary[disabled]:focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}

fieldset[disabled] .btn-primary:focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn-primary.disabled.focus, .btn-primary[disabled].focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}

fieldset[disabled] .btn-primary.focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn-primary .badge {
  color: #337ab7;
  background-color: var(--c-surface);
}

.btn-success {
  color: var(--c-on-fill);
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success:focus, .btn-success.focus {
  color: var(--c-on-fill);
  background-color: #449d44;
  border-color: #255625;
}
.btn-success:hover, .btn-success:active, .btn-success.active {
  color: var(--c-on-fill);
  background-color: #449d44;
  border-color: #398439;
}

.open > .dropdown-toggle.btn-success {
  color: var(--c-on-fill);
  background-color: #449d44;
  border-color: #398439;
}

.btn-success:active:hover, .btn-success.active:hover {
  color: var(--c-on-fill);
  background-color: #398439;
  border-color: #255625;
}

.open > .dropdown-toggle.btn-success:hover {
  color: var(--c-on-fill);
  background-color: #398439;
  border-color: #255625;
}

.btn-success:active:focus, .btn-success.active:focus {
  color: var(--c-on-fill);
  background-color: #398439;
  border-color: #255625;
}

.open > .dropdown-toggle.btn-success:focus {
  color: var(--c-on-fill);
  background-color: #398439;
  border-color: #255625;
}

.btn-success:active.focus, .btn-success.active.focus {
  color: var(--c-on-fill);
  background-color: #398439;
  border-color: #255625;
}

.open > .dropdown-toggle.btn-success.focus {
  color: var(--c-on-fill);
  background-color: #398439;
  border-color: #255625;
}

.btn-success:active, .btn-success.active {
  background-image: none;
}

.open > .dropdown-toggle.btn-success {
  background-image: none;
}

.btn-success.disabled:hover, .btn-success[disabled]:hover {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

fieldset[disabled] .btn-success:hover {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success.disabled:focus, .btn-success[disabled]:focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

fieldset[disabled] .btn-success:focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success.disabled.focus, .btn-success[disabled].focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

fieldset[disabled] .btn-success.focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success .badge {
  color: #5cb85c;
  background-color: var(--c-surface);
}

.btn-info {
  color: var(--c-on-fill);
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:focus, .btn-info.focus {
  color: var(--c-on-fill);
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.btn-info:hover, .btn-info:active, .btn-info.active {
  color: var(--c-on-fill);
  background-color: #31b0d5;
  border-color: #269abc;
}

.open > .dropdown-toggle.btn-info {
  color: var(--c-on-fill);
  background-color: #31b0d5;
  border-color: #269abc;
}

.btn-info:active:hover, .btn-info.active:hover {
  color: var(--c-on-fill);
  background-color: #269abc;
  border-color: #1b6d85;
}

.open > .dropdown-toggle.btn-info:hover {
  color: var(--c-on-fill);
  background-color: #269abc;
  border-color: #1b6d85;
}

.btn-info:active:focus, .btn-info.active:focus {
  color: var(--c-on-fill);
  background-color: #269abc;
  border-color: #1b6d85;
}

.open > .dropdown-toggle.btn-info:focus {
  color: var(--c-on-fill);
  background-color: #269abc;
  border-color: #1b6d85;
}

.btn-info:active.focus, .btn-info.active.focus {
  color: var(--c-on-fill);
  background-color: #269abc;
  border-color: #1b6d85;
}

.open > .dropdown-toggle.btn-info.focus {
  color: var(--c-on-fill);
  background-color: #269abc;
  border-color: #1b6d85;
}

.btn-info:active, .btn-info.active {
  background-image: none;
}

.open > .dropdown-toggle.btn-info {
  background-image: none;
}

.btn-info.disabled:hover, .btn-info[disabled]:hover {
  background-color: #5bc0de;
  border-color: #46b8da;
}

fieldset[disabled] .btn-info:hover {
  background-color: #5bc0de;
  border-color: #46b8da;
}

.btn-info.disabled:focus, .btn-info[disabled]:focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}

fieldset[disabled] .btn-info:focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}

.btn-info.disabled.focus, .btn-info[disabled].focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}

fieldset[disabled] .btn-info.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}

.btn-info .badge {
  color: #5bc0de;
  background-color: var(--c-surface);
}

.btn-warning {
  color: var(--c-on-fill);
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning:focus, .btn-warning.focus {
  color: var(--c-on-fill);
  background-color: #ec971f;
  border-color: #985f0d;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active {
  color: var(--c-on-fill);
  background-color: #ec971f;
  border-color: #d58512;
}

.open > .dropdown-toggle.btn-warning {
  color: var(--c-on-fill);
  background-color: #ec971f;
  border-color: #d58512;
}

.btn-warning:active:hover, .btn-warning.active:hover {
  color: var(--c-on-fill);
  background-color: #d58512;
  border-color: #985f0d;
}

.open > .dropdown-toggle.btn-warning:hover {
  color: var(--c-on-fill);
  background-color: #d58512;
  border-color: #985f0d;
}

.btn-warning:active:focus, .btn-warning.active:focus {
  color: var(--c-on-fill);
  background-color: #d58512;
  border-color: #985f0d;
}

.open > .dropdown-toggle.btn-warning:focus {
  color: var(--c-on-fill);
  background-color: #d58512;
  border-color: #985f0d;
}

.btn-warning:active.focus, .btn-warning.active.focus {
  color: var(--c-on-fill);
  background-color: #d58512;
  border-color: #985f0d;
}

.open > .dropdown-toggle.btn-warning.focus {
  color: var(--c-on-fill);
  background-color: #d58512;
  border-color: #985f0d;
}

.btn-warning:active, .btn-warning.active {
  background-image: none;
}

.open > .dropdown-toggle.btn-warning {
  background-image: none;
}

.btn-warning.disabled:hover, .btn-warning[disabled]:hover {
  background-color: #f0ad4e;
  border-color: #eea236;
}

fieldset[disabled] .btn-warning:hover {
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning.disabled:focus, .btn-warning[disabled]:focus {
  background-color: #f0ad4e;
  border-color: #eea236;
}

fieldset[disabled] .btn-warning:focus {
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning.disabled.focus, .btn-warning[disabled].focus {
  background-color: #f0ad4e;
  border-color: #eea236;
}

fieldset[disabled] .btn-warning.focus {
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning .badge {
  color: #f0ad4e;
  background-color: var(--c-surface);
}

.btn-danger {
  color: var(--c-on-fill);
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger:focus, .btn-danger.focus {
  color: var(--c-on-fill);
  background-color: #c9302c;
  border-color: #761c19;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active {
  color: var(--c-on-fill);
  background-color: #c9302c;
  border-color: #ac2925;
}

.open > .dropdown-toggle.btn-danger {
  color: var(--c-on-fill);
  background-color: #c9302c;
  border-color: #ac2925;
}

.btn-danger:active:hover, .btn-danger.active:hover {
  color: var(--c-on-fill);
  background-color: #ac2925;
  border-color: #761c19;
}

.open > .dropdown-toggle.btn-danger:hover {
  color: var(--c-on-fill);
  background-color: #ac2925;
  border-color: #761c19;
}

.btn-danger:active:focus, .btn-danger.active:focus {
  color: var(--c-on-fill);
  background-color: #ac2925;
  border-color: #761c19;
}

.open > .dropdown-toggle.btn-danger:focus {
  color: var(--c-on-fill);
  background-color: #ac2925;
  border-color: #761c19;
}

.btn-danger:active.focus, .btn-danger.active.focus {
  color: var(--c-on-fill);
  background-color: #ac2925;
  border-color: #761c19;
}

.open > .dropdown-toggle.btn-danger.focus {
  color: var(--c-on-fill);
  background-color: #ac2925;
  border-color: #761c19;
}

.btn-danger:active, .btn-danger.active {
  background-image: none;
}

.open > .dropdown-toggle.btn-danger {
  background-image: none;
}

.btn-danger.disabled:hover, .btn-danger[disabled]:hover {
  background-color: #d9534f;
  border-color: #d43f3a;
}

fieldset[disabled] .btn-danger:hover {
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-danger.disabled:focus, .btn-danger[disabled]:focus {
  background-color: #d9534f;
  border-color: #d43f3a;
}

fieldset[disabled] .btn-danger:focus {
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-danger.disabled.focus, .btn-danger[disabled].focus {
  background-color: #d9534f;
  border-color: #d43f3a;
}

fieldset[disabled] .btn-danger.focus {
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-danger .badge {
  color: #d9534f;
  background-color: var(--c-surface);
}

.btn-link {
  color: #337ab7;
  font-weight: normal;
  border-radius: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-link:active, .btn-link.active, .btn-link[disabled] {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-link {
  border-color: transparent;
}
.btn-link:hover, .btn-link:focus, .btn-link:active {
  border-color: transparent;
}
.btn-link:hover, .btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover {
  color: #777777;
  text-decoration: none;
}

fieldset[disabled] .btn-link:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:focus {
  color: #777777;
  text-decoration: none;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 6px;
}

.btn-xs, .btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 6px;
}

.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 5px;
}

input[type=submit].btn-block, input[type=reset].btn-block, input[type=button].btn-block {
  width: 100%;
}

.btn-group, .btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.btn-group > .btn, .btn-group-vertical > .btn {
  position: relative;
  float: left;
}

.btn-group > .btn:hover, .btn-group-vertical > .btn:hover, .btn-group > .btn:focus, .btn-group-vertical > .btn:focus, .btn-group > .btn:active, .btn-group-vertical > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn.active {
  z-index: 2;
}

.btn-group .btn + .btn, .btn-group .btn + .btn-group {
  margin-left: -1px;
}
.btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
  margin-left: -1px;
}

.btn-toolbar {
  margin-left: -5px;
}
.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group {
  float: left;
}
.btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group {
  margin-left: 5px;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group .dropdown-toggle:active {
  outline: 0;
}
.btn-group.open .dropdown-toggle {
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px color-mix(in srgb, rgb(0,0,0), transparent 87.5%);
  box-shadow: inset 0 3px 5px color-mix(in srgb, rgb(0,0,0), transparent 87.5%);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}

.btn .caret {
  margin-left: 0;
}

.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}

.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}

.btn-group-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  float: none;
}
.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-radius: 4px 4px 0 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-radius: 0 0 4px 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn {
  float: none;
  display: table-cell;
  width: 1%;
}
.btn-group-justified > .btn-group {
  float: none;
  display: table-cell;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
  left: auto;
}

[data-toggle=buttons] > .btn input[type=radio], [data-toggle=buttons] > .btn-group > .btn input[type=radio], [data-toggle=buttons] > .btn input[type=checkbox], [data-toggle=buttons] > .btn-group > .btn input[type=checkbox] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  font-family: "Open Sans", sans-serif, arial, verdana, tahoma;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 14px;
  background-color: var(--c-surface);
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid color-mix(in srgb, rgb(0,0,0), transparent 80%);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px color-mix(in srgb, rgb(0,0,0), transparent 80%);
  box-shadow: 0 5px 10px color-mix(in srgb, rgb(0,0,0), transparent 80%);
}
.popover.top {
  margin-top: -10px;
}
.popover.right {
  margin-left: 10px;
}
.popover.bottom {
  margin-top: 10px;
}
.popover.left {
  margin-left: -10px;
}

.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}

.popover-content {
  padding: 9px 14px;
}

.popover > .arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 11px;
}
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  content: "";
}
.popover.top > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: #999999;
  border-top-color: color-mix(in srgb, rgb(0,0,0), transparent 75%);
  bottom: -11px;
}
.popover.top > .arrow:after {
  content: " ";
  bottom: 1px;
  margin-left: -10px;
  border-bottom-width: 0;
  border-top-color: var(--c-surface);
}
.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: #999999;
  border-right-color: color-mix(in srgb, rgb(0,0,0), transparent 75%);
}
.popover.right > .arrow:after {
  content: " ";
  left: 1px;
  bottom: -10px;
  border-left-width: 0;
  border-right-color: var(--c-surface);
}
.popover.bottom > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999999;
  border-bottom-color: color-mix(in srgb, rgb(0,0,0), transparent 75%);
  top: -11px;
}
.popover.bottom > .arrow:after {
  content: " ";
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
  border-bottom-color: var(--c-surface);
}
.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999999;
  border-left-color: color-mix(in srgb, rgb(0,0,0), transparent 75%);
}
.popover.left > .arrow:after {
  content: " ";
  right: 1px;
  border-right-width: 0;
  border-left-color: var(--c-surface);
  bottom: -10px;
}

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

.collapse {
  display: none;
}
.collapse.in {
  display: block;
}

tr.collapse.in {
  display: table-row;
}

tbody.collapse.in {
  display: table-row-group;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.tour-backdrop {
  position: absolute;
  z-index: 1100;
  background-color: var(--c-ink);
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.popover[class*=tour-] {
  z-index: 1102;
}
.popover[class*=tour-] .popover-navigation {
  padding: 9px 14px;
  overflow: hidden;
}
.popover[class*=tour-] .popover-navigation *[data-role=end] {
  float: right;
}
.popover[class*=tour-] .popover-navigation *[data-role=prev], .popover[class*=tour-] .popover-navigation *[data-role=next], .popover[class*=tour-] .popover-navigation *[data-role=end] {
  cursor: pointer;
}
.popover[class*=tour-] .popover-navigation *[data-role=prev].disabled, .popover[class*=tour-] .popover-navigation *[data-role=next].disabled, .popover[class*=tour-] .popover-navigation *[data-role=end].disabled {
  cursor: default;
}
.popover[class*=tour-].orphan {
  position: fixed;
  margin-top: 0;
}
.popover[class*=tour-].orphan .arrow {
  display: none;
}

.cronjob-frequency-buttons i {
  font-size: 12px;
  position: relative;
  left: 5px;
}

.download-textfile-dialog-content md-input-container {
  margin: 15px 0 0 0;
}
.download-textfile-dialog-content h3 {
  margin: 0;
}
.download-textfile-dialog-content #ace-editor {
  position: relative;
  top: 0;
  min-height: 300px;
  min-width: 500px;
  height: calc(100vh - 300px);
}

/* Where the toolbox starts: on the line under the bars the page actually shows. It was toolbar + menu bar,
   from before the page tabs sat above the menu bar — it then covered the lower part of the menu bar, and in a
   workspace tab (no toolbar) it left a gap. The wrapper says which bars there are; a pane has no toolbar. */
.toolbox .md-sidenav-right.toolbox-fixed {
  --toolbox-toolbar: 64px;
  --toolbox-tabs: 0px;
  --toolbox-menu: 0px;
  --toolbox-top: calc(var(--toolbox-toolbar) + var(--toolbox-tabs) + var(--toolbox-menu));
}

.page-has-tabs .toolbox .md-sidenav-right.toolbox-fixed {
  --toolbox-tabs: 44px;
}

.page-has-menu .toolbox .md-sidenav-right.toolbox-fixed {
  --toolbox-menu: 52px;
}

body.workspace-pane .toolbox .md-sidenav-right.toolbox-fixed {
  --toolbox-toolbar: 0px;
}

.toolbox .md-sidenav-right.toolbox-fixed {
  position: fixed;
  width: 300px;
  max-width: 300px;
  top: var(--toolbox-top);
  bottom: 0;
  height: calc(100vh - var(--toolbox-top)) !important;
  min-height: calc(100vh - var(--toolbox-top)) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s ease, max-width 0.3s ease;
  /* A panel heading, as high as a row of the menu bar beside it, rather than a 65px Material toolbar with a
     20px title. */
}
@media (max-width: 599px) {
  .toolbox .md-sidenav-right.toolbox-fixed {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  transition: background 0.15s;
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-resize-handle:hover {
  background: color-mix(in srgb, var(--c-brand), transparent 85%);
}
.toolbox .md-sidenav-right.toolbox-fixed md-toolbar {
  min-height: 44px;
  height: 44px;
  background-color: var(--c-bar);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.toolbox .md-sidenav-right.toolbox-fixed md-toolbar .md-toolbar-tools {
  height: 44px;
  max-height: 44px;
  padding: 0 10px 0 14px;
  gap: 4px;
}
.toolbox .md-sidenav-right.toolbox-fixed md-toolbar .md-toolbar-tools h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.toolbox .md-sidenav-right.toolbox-fixed md-toolbar .md-toolbar-tools .material-icons {
  font-size: 20px;
  color: var(--c-field-text);
  cursor: pointer;
}
.toolbox .md-sidenav-right.toolbox-fixed md-toolbar .md-toolbar-tools .toolbox-title-icon {
  margin-right: 4px;
  color: var(--c-brand);
  cursor: default;
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-view-toggle {
  cursor: pointer;
  font-size: 20px;
  margin-right: 8px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-view-toggle:hover {
  opacity: 1;
}
.toolbox .md-sidenav-right.toolbox-fixed h4 {
  text-align: center;
  margin: 0;
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-category-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  margin: 16px 0 6px;
  padding: 6px 10px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 97%);
  border-left: 4px solid transparent;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 30%);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-category-header:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 93%);
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-category-header .toolbox-collapse-icon {
  font-size: 18px;
  margin-right: 6px;
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
}
.toolbox .md-sidenav-right.toolbox-fixed #programs .toolbox-category-header {
  border-left-color: var(--c-brand-dark);
}
.toolbox .md-sidenav-right.toolbox-fixed #wuinstall .toolbox-category-header {
  border-left-color: var(--c-success);
}
.toolbox .md-sidenav-right.toolbox-fixed #scripts .toolbox-category-header {
  border-left-color: var(--c-cat-brown);
}
.toolbox .md-sidenav-right.toolbox-fixed #software .toolbox-category-header {
  border-left-color: var(--c-info);
}
.toolbox .md-sidenav-right.toolbox-fixed #client .toolbox-category-header {
  border-left-color: var(--c-brand-muted);
}
.toolbox .md-sidenav-right.toolbox-fixed #notifications .toolbox-category-header {
  border-left-color: var(--c-cat-purple);
}
.toolbox .md-sidenav-right.toolbox-fixed #flow .toolbox-category-header {
  border-left-color: var(--c-cat-sand);
}
.toolbox .md-sidenav-right.toolbox-fixed #events .toolbox-category-header {
  border-left-color: var(--c-accent);
}
.toolbox .md-sidenav-right.toolbox-fixed #other .toolbox-category-header {
  border-left-color: var(--c-neutral);
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-search {
  padding: 8px 12px;
  /* The panel is one surface from its header down; this strip showed the sidenav's grey between them. */
  background-color: var(--c-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-search md-input-container {
  margin: 0;
  width: 100%;
}
.toolbox .md-sidenav-right.toolbox-fixed .toolbox-search md-input-container input {
  width: 100%;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content {
  flex: 1;
  overflow-y: auto;
  /* Material's theme paints md-content #FAFAFA, which left the panel in two tones against its own white
     header. One surface from the header down. */
  background-color: var(--c-surface);
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper {
  overflow: scroll;
  padding: 0 10px 100px;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper .block {
  font-weight: bold;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper .toolbox-info-icon {
  font-size: 18px;
  opacity: 0.7;
  cursor: help;
  transition: opacity 0.2s ease;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper .toolbox-info-icon:hover {
  opacity: 1;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper--grid .actionList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper--grid .actionList li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 12px;
  padding: 11px 12px;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper--grid .actionList li .toolbox-info-icon {
  font-size: 14px;
  margin-left: 4px;
}
.toolbox .md-sidenav-right.toolbox-fixed md-content .actions-wrapper--grid .actionList li span {
  font-size: 12px;
}

.download-dialog md-dialog-content .md-dialog-content {
  padding: 0;
}
.download-dialog md-dialog-content .md-dialog-content .title {
  font-size: 16px;
  font-weight: bold;
}
.download-dialog md-dialog-content .md-dialog-content .additional-options {
  margin-top: 10px;
}
.download-dialog md-dialog-content .md-dialog-content .additional-options .tool-options {
  margin-left: 5px;
}
.download-dialog md-dialog-content .md-dialog-content .additional-options .tool-options a:hover {
  text-decoration: none;
}
.download-dialog md-dialog-content .md-dialog-content .divider {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

.program-block {
  background-color: color-mix(in srgb, var(--c-brand-dark), transparent 80%);
  border-left: 4px solid var(--c-brand-dark);
  color: var(--c-ink);
}

.wuinstall-block {
  background-color: color-mix(in srgb, var(--c-success), transparent 82%);
  border-left: 4px solid var(--c-success);
  color: var(--c-ink);
}

.notifications-block {
  background-color: color-mix(in srgb, var(--c-cat-purple), transparent 82%);
  border-left: 4px solid var(--c-cat-purple);
  color: var(--c-ink);
}

.flow-block {
  background-color: color-mix(in srgb, var(--c-cat-sand), transparent 80%);
  border-left: 4px solid var(--c-cat-sand);
  color: var(--c-ink);
}

.event-block {
  background-color: color-mix(in srgb, var(--c-accent), transparent 82%);
  border-left: 4px solid var(--c-accent);
  color: var(--c-ink);
}

.script-block {
  background-color: color-mix(in srgb, var(--c-cat-brown), transparent 82%);
  border-left: 4px solid var(--c-cat-brown);
  color: var(--c-ink);
}

.software-block {
  background-color: color-mix(in srgb, var(--c-info), transparent 82%);
  border-left: 4px solid var(--c-info);
  color: var(--c-ink);
}

.client-block {
  background-color: color-mix(in srgb, var(--c-brand-muted), transparent 82%);
  border-left: 4px solid var(--c-brand-muted);
  color: var(--c-ink);
}

.other-block {
  background-color: color-mix(in srgb, var(--c-neutral), transparent 70%);
  border-left: 4px solid var(--c-neutral);
  color: var(--c-ink);
}

.unknown-block {
  background-color: var(--c-surface);
  border-left: 4px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  color: var(--c-ink);
}
.unknown-block .clickable-text {
  color: var(--c-ink);
}

.deprecated-block {
  background-color: color-mix(in srgb, var(--c-neutral), transparent 75%);
  border-left: none;
  background-image: repeating-linear-gradient(to bottom, var(--c-danger) 0px, var(--c-danger) 4px, transparent 4px, transparent 8px);
  background-size: 4px 100%;
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 14px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  opacity: 0.75;
}
.deprecated-block .actionText,
.deprecated-block .clickable-text {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  font-style: italic;
  font-weight: normal;
}

.task-container {
  width: 100%;
  max-width: 1000px;
  margin-bottom: 10px;
  overflow: auto;
  border-radius: 6px;
  background-color: var(--c-surface);
  box-shadow: 0 2px 1px -1px color-mix(in srgb, var(--c-shadow), transparent 80%), 0 1px 1px 0 color-mix(in srgb, var(--c-shadow), transparent 86%), 0 1px 3px 0 color-mix(in srgb, var(--c-shadow), transparent 88%);
  position: relative;
  transition: border-color 0.2s ease;
}
.task-container--active {
  border-left: 3px solid var(--c-accent);
}
.task-container .task-header {
  min-height: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  border-bottom: 1px solid color-mix(in srgb, var(--c-neutral), transparent 50%);
  cursor: pointer;
}
.task-container .task-header .task-buttons {
  height: 38px;
  padding: 0 8px;
}
.task-container .task-header .task-buttons .task-name-container {
  margin-top: 27px;
}
.task-container .task-header .task-buttons .task-name-container input {
  color: var(--c-ink);
  border: none;
  padding: 2px 6px;
  font-weight: 600;
  font-size: 16px;
  background: transparent;
  border-radius: 4px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.task-container .task-header .task-buttons .task-name-container input:hover {
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-neutral), transparent 50%);
}
.task-container .task-header .task-buttons .task-name-container input:focus {
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-brand);
  outline: none;
}
@media (min-width: 600px) {
  .task-container .task-header .task-buttons .task-name-container input {
    font-size: 14px;
  }
}
.task-container .task-header .task-buttons .md-menu button {
  position: relative;
  bottom: 4px;
}
.task-container .task-header .task-buttons .md-icon-button {
  margin: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.task-container .task-header .task-buttons .md-icon-button i {
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  transition: color 0.2s ease;
  line-height: 1;
}
.task-container .task-header .task-buttons .md-icon-button:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
.task-container .task-header .task-buttons .md-icon-button:hover i {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.task-container .task-body {
  background-color: var(--c-surface);
}
.task-container .task-body .task-body-section {
  padding: 16px;
}
.task-container .task-body .task-body-section + .task-body-section {
  padding-left: 24px;
  border-left: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
@media (max-width: 959px) {
  .task-container .task-body .task-body-section + .task-body-section {
    border-left: none;
    padding-left: 16px;
    border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  }
}
.task-container .task-body .task-parallel-settings {
  margin-top: 12px;
  gap: 16px;
}
.task-container .task-body .task-parallel-settings .hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-top: 2px;
  line-height: 1.4;
}
.task-container .task-body .task-advanced-options {
  margin-top: 12px;
}
.task-container .task-body .task-advanced-options__toggle {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--c-brand-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.task-container .task-body .task-advanced-options__toggle:hover {
  background: color-mix(in srgb, var(--c-brand), transparent 94%);
  color: var(--c-brand-dark);
}
.task-container .task-body .task-advanced-options__toggle .material-icons {
  font-size: 18px;
  margin-right: 4px;
}
.task-container .task-body .task-advanced-options__content {
  margin-top: 8px;
}
.task-container .task-body .task-advanced-options__content .hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-top: 2px;
  line-height: 1.4;
}
.task-container .task-body .chosenActions.task-body-section {
  display: flex;
  flex-direction: column;
}
@media (max-width: 959px) {
  .task-container .task-body .chosenActions.task-body-section {
    margin-right: 0;
  }
}
.task-container .task-body .chosenActions.task-body-section > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.task-container .task-body .task-section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.task-container .task-body .task-section-header__icon {
  font-size: 20px;
  color: var(--c-brand-muted);
  margin-right: 8px;
}
.task-container .task-body .task-section-header__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.task-container .task-body .actions-drop-region.alternative-action-add-active {
  padding-bottom: 50px;
}
.task-container .task-body .actions-drop-region.alternative-action-add-active.active-actions-drop-region {
  background: repeating-linear-gradient(45deg, var(--c-surface-sunken), transparent 10px);
}

.add-task-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1000px;
  margin-bottom: 10px;
  padding: 16px;
  border: 2px dashed color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 4px;
  color: var(--c-brand-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.add-task-area .material-icons {
  font-size: 20px;
}
.add-task-area span {
  font-size: 13px;
  font-weight: 500;
}
.add-task-area:hover {
  border-color: var(--c-brand-muted);
  background-color: color-mix(in srgb, var(--c-brand-muted), transparent 96%);
  color: var(--c-brand);
}

/* Automation details (services/jobManagement/dialogs/jobDetails.tmpl.html): the state in the head, scheduled →
   started → finished as steps, the facts as a list of terms, and the log as a timeline. It was a table of label and
   value with empty rows for what had not happened. */
md-dialog.app-dialog.job-details-dialog {
  width: 560px;
}

.job-details__sub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-details__state {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.job-details__state.is-running {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.job-details__state.is-waiting {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-warning) 20%, transparent);
  color: var(--c-warning-ink);
}
[data-theme=dark] .job-details__state.is-waiting {
  color: var(--c-warning);
}
.job-details__state.is-ok {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
  color: var(--c-success-deep);
}
.job-details__state.is-error {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
  color: var(--c-danger);
}

.job-details__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.job-details__steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 18px;
  /* the line, and the dot on it */
}
.job-details__steps li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: -8px;
  height: 2px;
  background-color: var(--c-border);
}
.job-details__steps li:last-child::before {
  right: 0;
}
.job-details__steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 50%;
  background-color: var(--c-surface);
}
.job-details__steps li.is-done::before {
  background-color: var(--c-brand);
}
.job-details__steps li.is-done::after {
  border-color: var(--c-brand);
  background-color: var(--c-brand);
}
.job-details__steps li.is-current::after {
  border-color: var(--c-brand);
}

.job-details__step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
}

.job-details__step-at {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.job-details__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 18px;
  margin: 0;
  font-size: 13.5px;
}
.job-details__facts dt {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.job-details__facts dd {
  margin: 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.job-details__facts code {
  padding: 1px 6px;
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  font-size: 12px;
  color: var(--c-text);
}

.job-details__muted {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.job-details__uuid {
  display: flex;
  align-items: center;
  gap: 4px;
}
.job-details__uuid button {
  display: flex;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.job-details__uuid button i.material-icons {
  font-size: 15px;
}
.job-details__uuid button:hover {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}

.job-details__section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  /* task-info's table: values to the right, as before */
}
.job-details__section table tbody tr td:last-child {
  text-align: right;
}

.job-details__heading {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

.job-details__log {
  margin: 0;
  padding: 0;
  list-style: none;
}
.job-details__log li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 13px;
  color: var(--c-text);
}
.job-details__log .is-error .job-details__log-dot {
  background-color: var(--c-danger);
}
.job-details__log .is-warning .job-details__log-dot {
  background-color: var(--c-warning);
}

.job-details__log-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 76%);
  transform: translateY(-1px);
}

.job-details__log-text {
  overflow-wrap: anywhere;
}

.job-details__log-at {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

@media (max-width: 599px) {
  .job-details__steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .job-details__steps li::before {
    display: none;
  }
}
.execute-action-dialog .command-line-container .command-line-content {
  min-height: 40px;
  height: initial;
}

.download-action-dialog .download-table tbody tr td:not(.small) {
  padding-right: 10px;
}
.download-action-dialog .download-table tbody tr td.small {
  width: 1px;
  white-space: nowrap;
}
.download-action-dialog .download-table tbody tr td input {
  width: 100%;
}
.download-action-dialog .download-table .download-url .source-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.download-action-dialog .download-table .download-url .source-list .source-title {
  font-weight: bold;
}

md-dialog .deprecated-action-container {
  padding: 10px;
}
md-dialog .deprecated-action-container .warning-container {
  padding: 10px;
  border: 1px solid var(--c-accent);
  align-items: center;
  display: flex;
  flex-direction: row;
}
md-dialog .deprecated-action-container .warning-container .warning-icon {
  margin-right: 10px;
  color: var(--c-accent);
}

.zip-action-dialog .zip-target-row {
  padding-top: 18px;
  margin-bottom: 20px;
}
.zip-action-dialog .zip-target-row .zip-file-container {
  margin: 0;
}
.zip-action-dialog .zip-target-row .zip-overwrite-checkbox {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0 0 0 24px;
}
.zip-action-dialog .zip-target-row .zip-overwrite-checkbox .md-label {
  display: block;
  margin-top: 0;
}
.zip-action-dialog .zip-target-row .zip-overwrite-checkbox .md-container {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}

/* Copy or repeat an automation (services/jobManagement/dialogs/cloneStartJob.tmpl.html): the name, which devices as
   four described tiles, the hardware selector unchanged when they are chosen by hand, and a sentence on what happens. */
md-dialog.app-dialog.repeat-job-dialog {
  width: 680px;
}

.repeat-job {
  display: grid;
  gap: 16px;
}
.repeat-job .subnet-field > input {
  width: 100%;
}

.repeat-job__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 599px) {
  .repeat-job__modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.repeat-job__mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.repeat-job__mode i.material-icons {
  margin-top: 1px;
  font-size: 19px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.repeat-job__mode:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.repeat-job__mode:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.repeat-job__mode.is-on {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 93%);
  box-shadow: inset 0 0 0 1px var(--c-brand);
}
.repeat-job__mode.is-on i.material-icons {
  color: var(--c-brand);
}

.repeat-job__mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.repeat-job__mode-title {
  font-size: 13.5px;
  font-weight: 600;
}

.repeat-job__mode-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.repeat-job__tasks {
  display: grid;
  gap: 16px;
}

.repeat-job__task-name {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

.repeat-job__outcome {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.run-script-dialog .script-source-switch {
  align-self: flex-start;
  margin-bottom: 16px;
}
.run-script-dialog md-dialog-content {
  display: flex;
  flex-direction: column;
}
.run-script-dialog md-dialog-content > .md-dialog-content {
  flex: 1 0 auto;
}
.run-script-dialog .script-source-pane {
  flex: 1 0 auto;
  min-height: 420px;
}
.run-script-dialog .code-settings-container {
  padding-top: 18px;
  margin-bottom: 20px;
}
.run-script-dialog .code-settings-container .language-container {
  width: 260px;
  max-width: 100%;
  margin: 0;
}
.run-script-dialog .code-settings-container .run-as-user-checkbox {
  margin: 0 0 0 24px;
}
.run-script-dialog .code-editor-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  overflow: hidden;
}
.run-script-dialog .code-editor-frame--invalid {
  border-color: var(--c-danger);
}
.run-script-dialog .code-editor-frame .ace-editor-container {
  flex: 1 1 auto;
  min-height: 260px;
}
.run-script-dialog .code-editor-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background-color: var(--c-surface-sunken);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.run-script-dialog .code-editor-status .code-editor-status__language {
  font-weight: 600;
  color: var(--c-ink);
}
.run-script-dialog .code-editor-status code {
  background-color: var(--c-surface);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 11px;
}
.run-script-dialog .template-tab-container .select-script-container {
  margin-bottom: 0;
}
.run-script-dialog .script-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 12px;
}
.run-script-dialog .script-preview .script-preview__meta {
  flex: 0 0 auto;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.run-script-dialog .script-preview .script-preview__language {
  font-weight: 600;
  color: var(--c-ink);
}
.run-script-dialog .script-preview .script-preview__description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-script-dialog .script-preview .script-preview__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.run-script-dialog .script-preview .script-preview__flag i {
  font-size: 14px;
}
.run-script-dialog .script-preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  border: 1px dashed color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
}

.abort-on-error-dialog .condition-switch {
  margin-top: 0;
}

.stop-job-dialog .question-container .emphasised {
  font-weight: bold;
}

.chocolatey-upgrade-action-dialog .choco-mode-switch {
  align-self: flex-start;
  margin-bottom: 16px;
}
.chocolatey-upgrade-action-dialog .choco-exclude-row {
  padding-top: 18px;
}
.chocolatey-upgrade-action-dialog .choco-exclude-row .choco-exclude-select {
  margin: 0;
}
.chocolatey-upgrade-action-dialog .choco-exclude-row .csb__inline-action.md-button {
  align-self: center;
  margin: 0 0 0 8px;
}
.chocolatey-upgrade-action-dialog .choco-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.chocolatey-upgrade-action-dialog .choco-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 999px;
  background-color: var(--c-surface-sunken);
  font-size: 13px;
  color: var(--c-ink);
}
.chocolatey-upgrade-action-dialog .choco-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 50%;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chocolatey-upgrade-action-dialog .choco-chip button i {
  font-size: 16px;
}
.chocolatey-upgrade-action-dialog .choco-chip button:hover {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.chocolatey-upgrade-action-dialog .choco-chips-empty {
  margin: 16px 0 0 0;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
}

.job-export-dialog .code-editor, .job-import-dialog .code-editor {
  position: relative;
}
.job-export-dialog .code-editor .ace-editor, .job-import-dialog .code-editor .ace-editor {
  position: relative;
  top: 0;
  width: 100%;
  height: calc(100vh - 140px);
  font-size: 14px;
}
@media (min-width: 960px) {
  .job-export-dialog .code-editor .ace-editor, .job-import-dialog .code-editor .ace-editor {
    height: calc(100vh - 520px);
  }
}

.job-editor-form {
  transition: margin-right 0.3s ease;
}
.job-editor-form.toolbox-open {
  margin-right: 300px;
}
.job-editor-form.toolbox-closed {
  margin-right: 0;
}

.job-references-dialog .references-section .reference-label {
  font-size: 16px;
  font-weight: bold;
}
.job-references-dialog .references-section .references-list {
  list-style-type: "- ";
  padding: 5px 0 5px 15px;
}
.job-references-dialog .references-section .references-list li::marker {
  font-weight: bold;
}

/* The first tab of the automation editor says how the last test run went: a spinner while it runs, then a
   tick or a cross you can click to open it. The label is drawn in the band at the top of the window now,
   outside .job-editor-form, so these sit at the top level with the runtime badge below. */
.task-editor-tab {
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-editor-tab .playground-job-state-container {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
}
.task-editor-tab .playground-job-state-container .playground-job-running-spinner path {
  stroke: var(--c-brand);
}
.task-editor-tab .playground-job-state-container .playground-job-finished-state {
  display: inline-flex;
  align-items: center;
}
.task-editor-tab .playground-job-state-container .playground-job-finished-state .playground-job-successful {
  color: var(--c-success);
}
.task-editor-tab .playground-job-state-container .playground-job-finished-state .playground-job-not-successful {
  color: var(--c-danger);
}

.runtime-tab-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-brand);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
}
.runtime-tab-badge .runtime-badge-icon {
  font-size: 12px;
  margin-right: 3px;
  line-height: 1;
  flex-shrink: 0;
}
.runtime-tab-badge .runtime-badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 599px) {
  .runtime-tab-badge {
    max-width: none;
    margin-left: 4px;
    padding: 1px 5px;
  }
  .runtime-tab-badge .runtime-badge-icon {
    margin-right: 0;
  }
  .runtime-tab-badge .runtime-badge-text {
    display: none;
  }
}

/* The automation's name and comment.
 *
 * They were two ordinary form fields on the page's grey above the first task, with their hints and counters, and
 * nothing holding them together. Same two fields, on a surface of their own, side by side, with the automation's
 * own settings under them. */
/* The task editor's column: it starts where every page's content does ($pageContentTop in values.scss).
   Was an inline 15px outside an inline 25px, collapsing to 25. */
.job-editor-body {
  margin-top: 16px;
  max-width: 1000px;
}

.job-details {
  max-width: 1000px;
  margin-bottom: 16px;
  padding: 14px 16px 12px;
  border-radius: 6px;
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

.job-details-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.job-details-field {
  min-width: 0;
}
.job-details-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.job-details-field input,
.job-details-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-text);
}
.job-details-field input::placeholder,
.job-details-field textarea::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.job-details-field input:focus,
.job-details-field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}
.job-details-field input[readonly],
.job-details-field textarea[readonly] {
  background-color: var(--c-surface-sunken);
}
.job-details-field textarea {
  resize: vertical;
}

.job-details-under {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
  min-height: 16px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.job-details-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.job-details-error {
  color: var(--c-danger);
}

.job-details-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
}

/* ── Report Center ────────────────────────────────────────────────────────────────────────────────────────────
   The filters the reports are narrowed to, then the reports as an even grid of cards. A card's body is a ring
   with its entries as rows, rows with bars, or tiles (statisticsCard/templates). It was a masonry of cards of
   every height, legends in the charts' colours and a Chart.js canvas in each. */
/* $pageContentTop from the toolbar, as on every page (values.scss); the page's container gives 1px of it. */
.report-center {
  padding-top: calc(16px - 1px);
}

.report-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 12px;
}

.report-filters__caption {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}

.report-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid color-mix(in srgb, var(--c-brand), transparent 70%);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--c-brand);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.report-filters__chip i.material-icons {
  font-size: 15px;
}
.report-filters__chip:hover {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 84%);
}

.report-filters__remove {
  opacity: 0.7;
}

.report-filters__clear {
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--c-brand);
  cursor: pointer;
}
.report-filters__clear:hover {
  text-decoration: underline;
}

.report-filters__hint {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

md-button.md-button.report-filters__show,
.md-button.report-filters__show {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  line-height: 30px;
}
md-button.md-button.report-filters__show i.material-icons,
.md-button.report-filters__show i.material-icons {
  font-size: 17px;
}

.report-center .report-graph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 12px;
  align-items: stretch;
}

.report-center .report-loader {
  display: flex;
  min-width: 0;
}
.report-center .report-loader > .loader {
  flex: 1;
  min-height: 220px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.report-center .report-loader .grid-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 220px;
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  box-shadow: none;
}
.report-center .report-loader .grid-cell-header {
  padding: 12px 16px 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
}
.report-center .report-loader .grid-cell-body {
  flex: 1;
  padding: 8px 12px 14px;
  font-weight: 400;
}

/* A ring beside its rows, or rows of bars. */
.report-center .report-chart.is-round {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding-left: 4px;
}
@media (max-width: 480px) {
  .report-center .report-chart.is-round {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}
.report-center .report-chart ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-center .report-chart__ring {
  display: block;
  width: 136px;
  height: 136px;
}

.report-center .report-chart__track {
  stroke: color-mix(in srgb, var(--c-ink), transparent 93%);
}

.report-center .report-chart__total {
  font-size: 8.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: var(--c-text);
}

.report-center .report-chart__total-label {
  font-size: 3.4px;
  fill: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.report-center .report-chart__rows {
  min-width: 0;
  width: 100%;
}

.report-center .report-chart__row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.report-center .report-chart__row:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
}
.report-center .report-chart__row:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}
.report-center .report-chart__row:disabled {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
}
.report-center .report-chart__row.is-bar {
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 36px;
}

.report-center .report-chart__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.report-center .report-chart__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-center .report-chart__value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.report-center .report-chart__share {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  text-align: right;
}

.report-center .report-chart__track-bar {
  height: 10px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  overflow: hidden;
}
.report-center .report-chart__track-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.report-center .report-chart__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Counts as tiles: the number, what it counts under it. */
.report-center .statistics-card-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  padding: 0 4px;
}
.report-center .statistics-card-grid-container .grid-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface-subtle);
  font-family: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.report-center .statistics-card-grid-container .grid-item:hover:not(:disabled) {
  border-color: var(--c-brand);
}
.report-center .statistics-card-grid-container .grid-item:disabled {
  cursor: default;
}
.report-center .statistics-card-grid-container .grid-item__value {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.report-center .statistics-card-grid-container .grid-item__label {
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.report-center .statistics-card-grid-container .grid-item.is-bad .grid-item__value {
  color: var(--c-danger);
}
.report-center .statistics-card-grid-container .grid-item.no-data {
  opacity: 1;
}
.report-center .statistics-card-grid-container .grid-item.no-data .grid-item__value,
.report-center .statistics-card-grid-container .grid-item.no-data .grid-item__label {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.report-center-chart-dialog .chart-container .chart-container-content {
  padding: 0 5px 0 20px;
}
.report-center-chart-dialog .chart-container .chart-container-content ul li {
  font-size: 15px;
  padding: 5px 0 5px 0;
}

.report-center-ad-table table {
  padding: 5px;
}

/* ── Devices in this selection (the Report Center's "Show devices") ─────────────────────────────────────────
   How many, by what, a search, and each device as a row opening its page; the device list as the way on. */
md-dialog.filtered-devices-dialog {
  width: 880px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
}
md-dialog.filtered-devices-dialog md-dialog-content {
  padding: 0;
}

.filtered-devices__count {
  margin-left: 10px;
  padding: 0 8px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 22px;
  color: var(--c-brand);
}

.filtered-devices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

.filtered-devices__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.filtered-devices__caption {
  margin-right: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}

.filtered-devices__filter {
  padding: 3px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  font-size: 12.5px;
  color: var(--c-brand);
}

.filtered-devices__find {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.filtered-devices__find:focus-within {
  border-color: var(--c-brand);
}
.filtered-devices__find i.material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.filtered-devices__find input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--c-text);
  outline: none;
}

.filtered-devices__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filtered-devices__device {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--c-text);
  text-decoration: none;
}
.filtered-devices__device:hover, .filtered-devices__device:focus {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
  color: var(--c-text);
  text-decoration: none;
}
.filtered-devices__device:hover .filtered-devices__name, .filtered-devices__device:focus .filtered-devices__name {
  color: var(--c-brand);
}
.filtered-devices__device > i.material-icons {
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.filtered-devices__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.filtered-devices__state {
  flex: none;
}

.filtered-devices__name,
.filtered-devices__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtered-devices__name {
  font-size: 13.5px;
  font-weight: 500;
}

.filtered-devices__meta {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.filtered-devices__none {
  margin: 8px 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.filtered-devices__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.filtered-devices__more .md-button {
  margin: 0;
}

md-dialog-actions.filtered-devices__actions {
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
}
md-dialog-actions.filtered-devices__actions .md-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
md-dialog-actions.filtered-devices__actions .md-button i.material-icons {
  font-size: 17px;
}

.hw-detail-menu-cell {
  width: 32px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.hw-detail-menu-cell md-menu {
  padding: 0;
}
.hw-detail-menu-cell .md-icon-button {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
}
.hw-detail-menu-cell .material-icons {
  font-size: 16px;
  line-height: 20px;
}

/* The device status: name, pills, meta line, job chip and actions. The device page draws it in its sticky
   card (.device-header below), the device dialog in its head (hardwareDetailViewDialog.scss). */
.hardware-detail-container {
  /* Grows with its content rather than being exactly one screen tall. Full height capped the sticky
     header's range to the first screenful — a sticky element only stays put while its own parent is in
     view — so it scrolled away and the content rode over it. The padding/margin pair that went with it
     pulled the container up under the fixed strip and cancelled itself out; both are gone with it. */
  min-height: 100%;
  /* Where the sticky things start. The toolbar and the rail below it are stuck clear of the device
     header, so the height of that header is the offset for both — one property rather than the same
     number written twice, because there is a page where it is not that number. That page is the
     new-device form: a device being created has no state to report, so it has no header, and an offset
     for one pushed the toolbar down over the first panel. */
  --section-toolbar-top: 98px;
  /* The header's measured height replaces this once it is on the page (sticky-offset on .device-header). */
  /* Sticky rather than fixed. The strip it replaces was taken out of the flow and the content below was
     cleared by a hardcoded margin — which only held while the strip stayed one line tall. This card's
     height depends on its contents, so it stays in the flow and the page follows it; it still holds at
     the top while you scroll, which is what being fixed was for. */
  /* This page puts its commands in the menu bar, so the section left behind is empty — and was still
     reserving 20px between the header card and the first panel. */
}
.hardware-detail-container.is-headerless {
  /* Nothing between the sections and the menu bar above them once the header card is gone, so the form
     starts where every page's content does ($pageContentTop in values.scss) — the rail and the sections
     beside it alike. The offset matches it: the rail and the toolbar have to stick where they already
     sit, or they jump on the first scroll. */
  --section-toolbar-top: 16px;
}
.hardware-detail-container.is-headerless .hardware-form {
  padding-top: 16px;
}
.hardware-detail-container.external-include {
  padding-top: 35px;
  margin-top: -35px;
  /* No device header in the dialog: its status is the dialog's head, above the scroller. So the toolbar
     sticks to the very top of the scroller. */
  --section-toolbar-top: 0px;
}
@media (min-width: 600px) {
  .hardware-detail-container.external-include {
    padding-top: 1px;
    margin-top: 0;
  }
}
.hardware-detail-container.external-include .hardware-form {
  /* Was clearance for the fixed info strip; the header is in the flow now and needs none. */
  margin-top: 0;
}
.hardware-detail-container.external-include .hardware-form .toggle-box-wrapper {
  column-count: 1;
}
.hardware-detail-container.external-include .hardware-form {
  /* The dialog already supplies the surface around this included page, so the toolbar sits on that
     surface rather than the CMDB page's sunken grey ground. It reaches out over the dialog body's 20px
     side padding (.app-dialog__body), so panels passing under it don't show their edges beside it. */
  /* This overview is read from top to bottom. Never spread its groups into parallel columns,
     even when the dialog is wide enough for the full CMDB page to do so. */
}
.hardware-detail-container.external-include .hardware-form .section-toolbar {
  background-color: var(--c-surface);
  margin: 0 -20px 8px;
  padding: 8px 20px;
}
.hardware-detail-container.external-include .hardware-form .section-layout.is-all-sections .toggle-box-wrapper {
  column-count: 1;
}
.hardware-detail-container .device-header {
  position: sticky;
  top: 0;
  /* Above the sticky table headers inside the panels, which sit at 10 (table.scss). They stick to this
     same scroller, so at equal z-index the tables won as the later elements in the document and their
     header rows drew across the card. Still well under the app toolbar's 70 and any dialog. */
  z-index: 12;
  background-color: var(--c-surface-sunken);
  /* The card lines up with the panels, but the ground behind it has to reach further than they do: the
     page's own side padding leaves a strip at each edge that content would otherwise scroll through in
     plain view beside the card. Bleeding out by exactly that padding covers both. */
  margin: 0 calc(-1 * max(0px, 16px - var(--scrollbar-gutter, 0px))) 0 -16px;
  /* The card starts where every page's content does ($pageContentTop in values.scss), and leaves the
     panels' own 12px gap below it. The rail and the sections start right under that, level. */
  padding: 16px max(0px, 16px - var(--scrollbar-gutter, 0px)) 12px 16px;
  /* The card. The strip it replaces was a hairline of text tinted by device health; this states what
     the device is and keeps every control the strip carried. Inset from the edges and given the same
     surface, border and radius as the panels below, so the page reads as one family of objects. */
  /* The device's own description: class, OS, site, when it appeared, which agent. All of it is on the
     model when the page opens, so the header never waits on a panel to fill itself in. */
  /* The running automation, named. It used to be a bare 20px ring with the job's name in a tooltip, so a
     run that was already going when you opened the page was an anonymous spinner. */
  /* Wrapped onto their own row, the buttons share it rather than huddling at one end. */
}
.hardware-detail-container .device-header .device-header-card {
  display: flex;
  align-items: center;
  /* Wraps rather than crushes. In one row the identity took whatever the actions left, which on a
     phone is nothing — the hostname broke mid-word and the meta line ran one word per line. */
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 10px 16px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 90%);
}
.hardware-detail-container .device-header .device-header-identity {
  display: flex;
  align-items: center;
  /* Takes the free width, which is what puts the actions against the right edge — until there is not
     enough for both, when the basis is what makes the actions wrap to their own row instead. */
  flex: 1 1 260px;
  min-width: 0;
}
.hardware-detail-container .device-header .device-header-body {
  flex: 1 1 auto;
  min-width: 0;
}
.hardware-detail-container .device-header .device-header-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hardware-detail-container .device-header .device-header-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
.hardware-detail-container .device-header .device-header-name-row {
  /* Errors and warnings, one labelled pill each rather than a segmented bar of bare numbers. */
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* Connection state. Live and Online share a colour on purpose — both mean the agent is reachable;
     the word carries the difference, which is what the old pair of green dots failed to do. */
  /* How long it has been up or down: the same pill, quieter, so the state reads first. */
  /* LAPS: a secret to reveal, not a state — so it is outlined rather than filled, and it keeps the
     letter-spacing that makes an acronym read as one. */
  /* The toggle. Filled when on, outlined when off, so its state is visible without reading the
     label — and it is the label that says what it toggles. */
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-error {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-warning {
  background-color: color-mix(in srgb, var(--c-accent), transparent 84%);
  color: var(--c-accent);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-info {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-state {
  cursor: default;
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-live, .hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-online {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-offline {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-muted {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill .device-header-pill-detail {
  font-weight: 500;
  opacity: 0.8;
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-laps {
  background-color: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-field-text);
  letter-spacing: 0.06em;
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-laps::before {
  display: none;
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-laps:hover {
  border-color: var(--c-brand-muted);
  color: var(--c-text);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-laps:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-toggle {
  background-color: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-field-text);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-toggle::before {
  background-color: var(--c-border);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-toggle:hover {
  border-color: var(--c-brand-muted);
  color: var(--c-text);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-toggle.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  border-color: transparent;
  color: var(--c-brand);
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-toggle.is-on::before {
  background-color: currentColor;
}
.hardware-detail-container .device-header .device-header-name-row .device-header-pill.is-toggle:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.hardware-detail-container .device-header .device-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin-top: 3px;
  color: var(--c-field-text);
  font-size: 13px;
  /* Separators drawn rather than typed, so an absent field takes its separator with it. */
}
.hardware-detail-container .device-header .device-header-meta > span + span::before {
  content: "·";
  margin-right: 10px;
  opacity: 0.45;
}
.hardware-detail-container .device-header .device-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}
.hardware-detail-container .device-header .device-header-state {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hardware-detail-container .device-header .device-header-state .top-bar-icon {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-detail-container .device-header .device-header-state .permanent-monitoring md-switch {
  margin: 0 4px 0 0;
}
.hardware-detail-container .device-header .job-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  max-width: 340px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-field-text);
  cursor: pointer;
  overflow: hidden;
  animation: job-chip-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  /* No percentage to draw: the whole ring spins instead. */
  /* Colour is the fastest thing to read, and the finished state did not use it: success and failure
     were the same $black_54 glyph and differed only in shape. */
  /* The mark strokes itself over the ring the run just completed, rather than being swapped in. */
  /* The state has to survive the motion being switched off, so nothing here carries information that
     only the animation conveys. */
}
.hardware-detail-container .device-header .job-chip:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.hardware-detail-container .device-header .job-chip .job-chip-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hardware-detail-container .device-header .job-chip .job-chip-label span {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-detail-container .device-header .job-chip .job-chip-label span::before {
  content: "· ";
}
.hardware-detail-container .device-header .job-chip .job-chip-ring,
.hardware-detail-container .device-header .job-chip .job-chip-mark {
  flex: none;
  width: 20px;
  height: 20px;
}
.hardware-detail-container .device-header .job-chip .job-chip-ring {
  /* Rotated so a determinate arc starts at twelve o'clock; the dash offset comes from the job's
     reported percentage, which the job centre already draws for a running job. */
}
.hardware-detail-container .device-header .job-chip .job-chip-ring circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.hardware-detail-container .device-header .job-chip .job-chip-ring .job-chip-track {
  stroke: var(--c-border);
}
.hardware-detail-container .device-header .job-chip .job-chip-ring .job-chip-bar {
  stroke: var(--c-brand);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 38 50.27;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}
.hardware-detail-container .device-header .job-chip .job-chip-mark {
  display: none;
}
.hardware-detail-container .device-header .job-chip .job-chip-mark path {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.hardware-detail-container .device-header .job-chip.is-running .job-chip-ring {
  animation: job-chip-spin 1.05s linear infinite;
}
.hardware-detail-container .device-header .job-chip.is-ok {
  border-color: var(--c-success);
  color: var(--c-success);
  background-color: color-mix(in srgb, var(--c-success), transparent 90%);
}
.hardware-detail-container .device-header .job-chip.is-fail {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
}
.hardware-detail-container .device-header .job-chip.is-ok .job-chip-ring, .hardware-detail-container .device-header .job-chip.is-fail .job-chip-ring {
  display: none;
}
.hardware-detail-container .device-header .job-chip.is-ok .job-chip-mark, .hardware-detail-container .device-header .job-chip.is-fail .job-chip-mark {
  display: block;
}
.hardware-detail-container .device-header .job-chip.is-ok .job-chip-label span, .hardware-detail-container .device-header .job-chip.is-fail .job-chip-label span {
  color: inherit;
  opacity: 0.8;
}
.hardware-detail-container .device-header .job-chip.is-ok .job-chip-mark path {
  stroke: var(--c-success);
  animation: job-chip-draw 0.34s 0.06s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.hardware-detail-container .device-header .job-chip.is-fail .job-chip-mark path {
  stroke: var(--c-danger);
  animation: job-chip-draw 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hardware-detail-container .device-header .job-chip {
    animation: none;
  }
  .hardware-detail-container .device-header .job-chip.is-running .job-chip-ring {
    animation: none;
  }
  .hardware-detail-container .device-header .job-chip .job-chip-ring .job-chip-bar {
    stroke-dasharray: 12 50.27;
    transition: none;
  }
  .hardware-detail-container .device-header .job-chip .job-chip-mark path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
@keyframes job-chip-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
}
@keyframes job-chip-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes job-chip-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.hardware-detail-container .device-header .device-header-btn.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  line-height: normal;
}
.hardware-detail-container .device-header .device-header-btn.md-button i {
  font-size: 18px;
}
.hardware-detail-container .device-header .device-header-btn-primary.md-button {
  background-color: var(--c-accent);
  color: var(--c-on-fill);
}
.hardware-detail-container .device-header .device-header-btn-primary.md-button:not([disabled]):hover {
  background-color: var(--c-cat-sand);
}
.hardware-detail-container .device-header .device-header-btn-secondary.md-button {
  background-color: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.hardware-detail-container .device-header .device-header-btn-secondary.md-button:not([disabled]):hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
@media (max-width: 768px) {
  .hardware-detail-container .device-header {
    /* Side by side, splitting the row. At their natural widths the pair is 334px against a 305px row,
       so left to themselves they wrap and each takes a line; an even split with tighter padding fits
       both without shortening either label. */
  }
  .hardware-detail-container .device-header .device-header-actions {
    flex: 1 1 100%;
  }
  .hardware-detail-container .device-header .device-header-btn.md-button {
    flex: 1 1 0;
    min-width: 0;
    /* Tightened just enough for both labels to fit the half-row they now get — at the desktop
       metrics each needs 152px of a 144px slot and the text would be clipped. */
    padding: 0 8px;
    gap: 5px;
    font-size: 13px;
  }
  .hardware-detail-container .device-header .device-header-btn.md-button i {
    font-size: 16px;
  }
}
.hardware-detail-container .device-header horizontal-value-indicator {
  width: 60px;
}
.hardware-detail-container #command-section {
  margin-bottom: 0;
}
.hardware-detail-container .hardware-form {
  /* Was full height with a top margin clearing the fixed info strip. The header is in the flow now, so
     the form grows with its content and the page scrolls once instead of the form scrolling inside it. */
  height: auto;
  margin-top: 0;
  /* Rail beside content: the rail is its own column so the section next to it gets the whole width. */
  /* The all-sections view has no rail, so its filter and view switch sit above the panels. */
  /* One icon shows the view it will open, rather than naming both states. It is shared by the
     all-sections toolbar and the compact rail header. */
  /* All-sections view: no rail at all, so the content has the page — every section down it, in the seven
     groups, in as many columns as fit. */
  /* One section on screen has the screen — see fitSingleSection() in the section-visibility directive,
     which sets the height from where the list actually starts. A calc() cannot: the distance from the
     top of the page to the panel is the breadcrumb, the command bar and a device header whose height
     depends on how many pills it is carrying.
   *
   * Only when it is genuinely alone. A group of five sharing the view keeps the flat 500px cap, or each
   * would claim a viewport and you would scroll past four to reach the fifth. */
  /* No mark on the panels themselves: the rail is where you look for what a section is, and an edge
     running down two cards in the content said the same thing a second time, next to the panels it was
     separating them from. The wrapper stays as the grouping the rail reads and carries no styling of
     its own, so the pair flows like every other panel in the group. */
  /* In the rail view the groups survive as the rail's headings and as the order the panels sit in; in
     the content there is nothing left for them to label, because only one section shows at a time. The
     all-sections view puts them back. */
  /* No padding or negative margin here any more: both were clearance for a scrollbar this fieldset no
     longer has, and they pushed the panels 15px wider than the header card above them. */
}
.hardware-detail-container .hardware-form.multiEdit {
  /* The page scrolls, as on a device; the panel beside it (multiEdit.scss) stays in view. Four short
     sections, so one column at any width. */
  order: 1;
  min-width: 0;
}
.hardware-detail-container .hardware-form.multiEdit .section-layout.is-all-sections .toggle-box-wrapper {
  column-count: 1;
}
.hardware-detail-container .hardware-form .toggle-box-wrapper {
  /* No padding on top. It was clearance from when this sat straight under the command bar; the section
     toolbar gives that now, and here it only pushed the first panel 8px below the top of the rail
     beside it — two columns of the same thing starting at different heights. */
  /* The panels inside sit 12px apart; 20px here left a visible seam above the full-width Hardware
     Inventory box, which made it look detached from the grid rather than the last item in it. */
  margin-bottom: 12px;
  column-count: 1;
  /* Was 2 columns at 1800px and 3 at 3000px. That is what made a panel a third of a wide screen and
     left four of them scrolling sideways inside it — Local Users by 302px. One section at a time has
     the whole width and needs none of it. */
  /* The group is what a column may not split now, not the panel. A column is a topic rather than a
     slice of the list — and Identity no longer ends up beside the back half of Software. */
}
.hardware-detail-container .hardware-form .toggle-box-wrapper > .panel-group {
  break-inside: avoid;
}
.hardware-detail-container .hardware-form .section-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  /* Below this the rail costs the content more than it is worth; it goes back on top. */
}
@media (max-width: 900px) {
  .hardware-detail-container .hardware-form .section-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hardware-detail-container .hardware-form .section-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  /* Stuck under the device header, like the rail below it. The filter scrolling away while the rail it
     belongs to stayed put made them look like two unrelated things. Its own ground, because panels
     pass underneath; below the header's z-index so the header covers it, above the panels so it is
     not covered by them. */
  position: sticky;
  top: var(--section-toolbar-top);
  z-index: 11;
  /* Just enough that a panel scrolling under it does not touch the controls. */
  padding: 2px 0;
  background-color: var(--c-surface-sunken);
  /* The control stays compact in the all-sections view. The directive writes its width inline, so
     this has to shout. */
}
.hardware-detail-container .hardware-form .section-toolbar .search-bar {
  width: 232px !important;
  flex: 0 0 232px;
  /* A filter over section names, not a form field: shorter than the directive's default 36px. */
  height: 32px;
  /* On a phone there is no rail to line up with and no switch beside it — it is the only thing in
     the row, so it takes the row. */
}
@media (max-width: 768px) {
  .hardware-detail-container .hardware-form .section-toolbar .search-bar {
    width: 100% !important;
    flex: 1 1 auto;
  }
}
.hardware-detail-container .hardware-form .section-toolbar .section-toolbar-spacer {
  flex: 1 1 auto;
}
.hardware-detail-container .hardware-form .section-view-toggle {
  flex: 0 0 auto;
  padding: 5px;
  border-radius: 6px;
  font-size: 20px;
  color: var(--c-field-text);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, background-color 0.12s ease;
}
.hardware-detail-container .hardware-form .section-view-toggle:hover {
  opacity: 1;
  background-color: var(--c-surface-subtle);
}
.hardware-detail-container .hardware-form .section-view-toggle:focus {
  outline: none;
}
.hardware-detail-container .hardware-form .section-view-toggle:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 1px var(--c-brand);
}
.hardware-detail-container .hardware-form .section-layout.is-all-sections {
  grid-template-columns: minmax(0, 1fr);
}
.hardware-detail-container .hardware-form .section-layout.is-all-sections .panel-group .panel-group-label {
  display: block;
}
.hardware-detail-container .hardware-form .section-layout.is-all-sections .panel-group + .panel-group {
  margin-top: 22px;
}
@media (min-width: 1800px) {
  .hardware-detail-container .hardware-form .section-layout.is-all-sections .toggle-box-wrapper {
    column-count: 2;
  }
}
@media (min-width: 3000px) {
  .hardware-detail-container .hardware-form .section-layout.is-all-sections .toggle-box-wrapper {
    column-count: 3;
  }
}
.hardware-detail-container .hardware-form .section-rail {
  position: sticky;
  /* Its controls live in the rail, so it begins directly below the device header. */
  top: var(--section-toolbar-top);
  z-index: 10;
  /* Twenty-four entries and eight labels come to about 1060px — taller than a laptop screen, and a
     stuck element does not scroll, so Port-Based NAC at the bottom was unreachable there. The height
     comes from fit-to-viewport, which measures what is actually left below it: a calc() from the
     sticky offset is only right once the page has scrolled, and in the rail view it never does. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
  padding: 8px 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  /* No shadow. The panels beside it are cards that sit on the page; the rail is part of the page's
     furniture, and lifting it read as a third floating thing rather than as the edge of the content. */
  /* A module the customer buys separately, so it is not part of the page most tenants see. It sits
     inside the group it belongs to now, which means it cannot be marked by being a group — the run
     of entries is set apart instead: its own ground and a brand edge, which cannot be confused with
     the selected state because that is a fill behind one entry rather than a rule down the side of
     several. No heading above it: the entries carry the module's name already, and a heading here
     would be a second level in a rail that has one. */
  /* Quieter than the section names under it — the same rule the field-group titles follow — but a
     target in its own right: it selects the whole group. */
  /* The rail's entries are anchors, so a click leaves the browser's own focus ring around them — a
     thick blue box that belongs to no part of this design. Keyboard focus still has to show: it gets
     the hover fill and a brand hairline instead. */
}
.hardware-detail-container .hardware-form .section-rail::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.hardware-detail-container .hardware-form .section-rail::-webkit-scrollbar-track {
  background: transparent;
}
.hardware-detail-container .hardware-form .section-rail::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.hardware-detail-container .hardware-form .section-rail::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.hardware-detail-container .hardware-form .section-rail::-webkit-scrollbar-corner {
  background: transparent;
}
@media (max-width: 900px) {
  .hardware-detail-container .hardware-form .section-rail {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
.hardware-detail-container .hardware-form .section-rail .section-rail-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}
.hardware-detail-container .hardware-form .section-rail .section-rail-controls .search-bar {
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  height: 32px;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-group + .section-rail-group {
  margin-top: 12px;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-module {
  margin-top: 8px;
  padding: 6px 0 6px 8px;
  border-left: 2px solid var(--c-brand);
  border-radius: 0 6px 6px 0;
  background-color: color-mix(in srgb, var(--c-brand), transparent 95%);
}
.hardware-detail-container .hardware-form .section-rail .section-rail-label {
  display: block;
  margin: 0 0 2px;
  padding: 5px 10px 4px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-label:hover, .hardware-detail-container .hardware-form .section-rail .section-rail-label:focus {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
  text-decoration: none;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-label.is-active {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}
.hardware-detail-container .hardware-form .section-rail .section-rail-label:focus,
.hardware-detail-container .hardware-form .section-rail .section-rail-item:focus {
  outline: none;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-label:focus-visible,
.hardware-detail-container .hardware-form .section-rail .section-rail-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--c-brand);
}
.hardware-detail-container .hardware-form .section-rail .section-rail-item {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--c-field-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-item:hover, .hardware-detail-container .hardware-form .section-rail .section-rail-item:focus {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
  text-decoration: none;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-item.is-active {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
  font-weight: 600;
}
.hardware-detail-container .hardware-form .section-rail .section-rail-empty {
  margin: 0;
  padding: 14px 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-detail-container .hardware-form .is-not-active-section {
  display: none;
}
.hardware-detail-container .hardware-form .panel-group .panel-group-label {
  display: none;
  margin: 0 0 8px 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-detail-container .hardware-form .toggle-box-wrapper > .panel-group {
  break-inside: avoid;
}
.hardware-detail-container .hardware-form fieldset {
  /* The field grid the detail panels lay out on — General, Location, and anything else on this page
   * that is a run of labelled fields.
   *
   * Twelve fields in four flex rows became four named groups on one grid. The rows were the problem:
   * each had to reserve md-icon-right's 34px slot for a launch icon hanging off the side of a field,
   * so the first row fitted three fields and the second only two, and nothing lined up down the panel.
   * With the icon inside its own box (see .select2-launch) a row is just a row.
   *
   * Three fixed columns rather than auto-anything. auto-fit collapses the track a three-field group
   * leaves empty and so gives every group a different column width; auto-fill keeps the widths equal
   * but then a three-field group leaves a dead column at the right and the panel never fills its own
   * width. Three columns, stepped down by container width, does both. */
  /* The rail search points to a section; this quiet blue mark identifies the matching field once its
     panel is open. It deliberately applies to labels and column headers only, never data rows. */
  /* The .inventory-wrapper this used to hang off is gone: it existed to give Other Inventory the full
     width the multi-column layout denied it, and there is no multi-column layout any more. */
}
.hardware-detail-container .hardware-form fieldset .toggle-box {
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}
.hardware-detail-container .hardware-form fieldset .toggle-box .no-data-available {
  margin: 20px 20px 10px 20px;
  font-size: 16px;
}
.hardware-detail-container .hardware-form fieldset .toggle-box .fixed-size-container {
  max-height: 500px;
  overflow-y: auto;
  /* These scroll sideways as well — six columns of service names do not fit a third of the page —
     and the platform's default bar is a heavy dark slab across the bottom of the panel. Same thin
     thumb the rest of the app scrolls with. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.hardware-detail-container .hardware-form fieldset .toggle-box .fixed-size-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.hardware-detail-container .hardware-form fieldset .toggle-box .fixed-size-container::-webkit-scrollbar-track {
  background: transparent;
}
.hardware-detail-container .hardware-form fieldset .toggle-box .fixed-size-container::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.hardware-detail-container .hardware-form fieldset .toggle-box .fixed-size-container::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.hardware-detail-container .hardware-form fieldset .toggle-box .fixed-size-container::-webkit-scrollbar-corner {
  background: transparent;
}
.hardware-detail-container .hardware-form fieldset .panel-field-group {
  /* The query container for the grid below. A grid cannot query itself, so the width the columns
     respond to is measured here — and it is the panel's width, not the window's, which is the whole
     point: in multi-edit this panel sits beside the device list at half the width on the same
     screen, and a viewport breakpoint cannot tell those two apart. */
  container-type: inline-size;
  container-name: panelFieldGroup;
  /* Quieter than the field labels under it, not louder. Material renders a floating label at 10.5px
     in $field-text, so a group title at the same size and colour just competes with the twelve
     labels it is meant to organise — the rule above it is what carries the structure. */
}
.hardware-detail-container .hardware-form fieldset .panel-field-group + .panel-field-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}
.hardware-detail-container .hardware-form fieldset .panel-field-group .panel-field-group-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-detail-container .hardware-form fieldset .is-section-search-match {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
  font-weight: 600;
}
.hardware-detail-container .hardware-form fieldset th.is-section-search-match {
  display: table-cell;
}
.hardware-detail-container .hardware-form fieldset .device-info-container td.is-section-search-match {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
  font-weight: 600;
}
.hardware-detail-container .hardware-form fieldset .panel-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 20px;
  align-items: start;
  /* Comment, custom tags and system tags each want the whole width; one column keeps them from
     being torn into a two-up grid at wide sizes. */
  /* The service tag: 51 characters on a VMware guest, so it gets two of the three columns — and on a
     two-column panel it is the full row, which is the same idea. */
  /* Machine-written, like every other value the app monospaces — and the service tag's groups of
     two only stay countable set this way. */
  /* The room control opens a dialog, so it is a button — but it sits in a field's place between two
     fields, and it was built as one of the outlined btn-* family: 38px against their 30, an 8px
     radius against 6, $black_12 against $border, transparent against $surface, and 14px/500 against
     16px/400. Three controls in a row, three different boxes. It is the field box now, with a marker
     on the right for the same reason the selects have a caret: something opens. */
  /* Last, because these override .panel-field-wide's span and sass emits a @container block where
     it is written: placed above, the base span:2 rule came after at equal specificity and won, and
     the one-column step opened an implicit track instead of narrowing the field. */
}
.hardware-detail-container .hardware-form fieldset .panel-fields.panel-fields--stacked {
  grid-template-columns: 1fr;
}
.hardware-detail-container .hardware-form fieldset .panel-fields md-input-container {
  width: auto;
  min-width: 0;
  /* 20px, which is what the floating label needs: it is position:absolute at bottom:100%, so it
     lives entirely in this margin and overhangs the container by 19px. */
  margin: 20px 0 0;
  padding: 0;
  /* Material reserves 24px under every field for a validation message. These fields only ever
     show one — a serverError, on a failed save — so twelve fields were carrying 288px of empty
     space for something almost never shown. The message div itself is untouched and still opens
     when there is something to say. */
}
.hardware-detail-container .hardware-form fieldset .panel-fields md-input-container .md-errors-spacer {
  min-height: 0;
  height: 0;
}
.hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-wide {
  grid-column: span 2;
}
.hardware-detail-container .hardware-form fieldset .panel-fields input.is-mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
}
.hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  min-height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  /* $black_54, which is what select2 sets its own "Nothing selected" in. */
}
.hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-button .panel-field-button-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-button.is-placeholder .panel-field-button-value {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-button .panel-field-button-icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-button:not([disabled]):hover {
  background-color: var(--c-surface);
  border-color: var(--c-brand);
}
.hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
@container panelFieldGroup (max-width: 780px) {
  .hardware-detail-container .hardware-form fieldset .panel-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container panelFieldGroup (max-width: 520px) {
  .hardware-detail-container .hardware-form fieldset .panel-fields {
    grid-template-columns: minmax(0, 1fr);
    /* Nothing left to span. */
  }
  .hardware-detail-container .hardware-form fieldset .panel-fields .panel-field-wide {
    grid-column: span 1;
  }
}
.hardware-detail-container .hardware-form fieldset .toggle-box.inventory-container .no-data-available {
  color: var(--c-field-text);
}

.net-entry-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.network-cards-container .network-card-state-container {
  margin-bottom: 5px;
}
.network-cards-container .network-card-state-container .actions-container i {
  margin-left: 5px;
}
.network-cards-container .network-card-state-container .new-network-card-icon {
  color: var(--c-accent);
}
.network-cards-container .network-card-state-container .remove-network-card-icon {
  color: var(--c-danger);
}
.network-cards-container .network-card-state-container .old-network-card-icon {
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: bold;
}
.network-cards-container .network-card-state-container .in-PNAC-network-card-icon {
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: bold;
}

.disks-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Across the whole row rather than the width of a card. At card width an empty volume and one at 64%
     drew stubs you had to measure against each other — ATRZDDC01 has exactly that pair. */
}
.disks-container .disk-card {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  overflow: hidden;
}
.disks-container .disk-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}
.disks-container .disk-card-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
  color: var(--c-brand);
}
.disks-container .disk-card-glyph .material-icons {
  font-size: 17px;
  line-height: 17px;
}
.disks-container .disk-card-title {
  flex: 1 1 auto;
  min-width: 0;
}
.disks-container .disk-card-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.disks-container .disk-card-meta {
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  overflow-wrap: anywhere;
}
.disks-container .disk-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.disks-container .disk-card-capacity {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 13px;
  color: var(--c-text);
  white-space: nowrap;
}
.disks-container .disk-volumes {
  border-top: 1px solid var(--c-border);
}
.disks-container .disk-volume {
  padding: 11px 14px;
}
.disks-container .disk-volume:not(:last-child) {
  border-bottom: 1px solid var(--c-border);
}
.disks-container .disk-volume-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 7px;
}
.disks-container .disk-volume-name {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 13.5px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.disks-container .disk-volume-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.disks-container .disk-volume-usage {
  margin-left: auto;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
  color: var(--c-field-text);
  white-space: nowrap;
}
.disks-container .disk-volume-usage b {
  font-weight: 500;
  color: var(--c-text);
}
.disks-container .disk-volume-usage.is-warning b {
  color: var(--c-accent);
}
.disks-container .disk-volume-usage.is-critical b {
  color: var(--c-danger);
}
.disks-container .disk-volume-bar {
  height: 6px;
  border-radius: 3px;
  background-color: var(--c-surface-sunken);
  overflow: hidden;
}
.disks-container .disk-volume-bar i {
  display: block;
  height: 100%;
  /* So a near-empty volume still reads as a bar with nothing in it, rather than one that failed. */
  min-width: 3px;
  border-radius: 3px;
  background-color: var(--c-success);
}
.disks-container .disk-volume-bar.is-warning i {
  background-color: var(--c-warning);
}
.disks-container .disk-volume-bar.is-critical i {
  background-color: var(--c-danger);
}
.disks-container .disk-volume-mounts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.disks-container .disk-volume-mount {
  padding: 2px 6px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 11.5px;
  color: var(--c-field-text);
  overflow-wrap: anywhere;
}
.disks-container .disk-volume-note {
  margin-top: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.disks-container .disk-volumes-empty {
  padding: 11px 14px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Same pill language as the adapter cards and the device header. */
.disk-pill {
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-field-text);
  white-space: nowrap;
}
.disk-pill.is-ok {
  border-color: var(--c-success);
  color: var(--c-success);
  background-color: color-mix(in srgb, var(--c-success), transparent 88%);
}
.disk-pill.is-warning {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background-color: color-mix(in srgb, var(--c-accent), transparent 86%);
}
.disk-pill.is-critical {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
}
.disk-pill.is-muted {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.disk-pill.is-filesystem {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-weight: 400;
  color: var(--c-field-text);
}

.updates-container {
  /* The dates that say whether the device is being kept current. They were a two-column block of labelled
     lines that read as a paragraph; as tiles each fact is its own thing and they wrap to whatever width
     the panel has. */
  /* The only tile that does something, so it is the only one that looks like it can be pressed. */
}
.updates-container .update-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.updates-container .update-fact {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.updates-container .update-fact dt {
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-field-text);
  white-space: nowrap;
}
.updates-container .update-fact dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.updates-container .update-fact .update-fact-detail {
  font-weight: 400;
  color: var(--c-field-text);
}
.updates-container .update-fact-action {
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.updates-container .update-fact-action:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
.updates-container .update-fact-action:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.updates-container .update-fact-action.is-pending dd {
  color: var(--c-accent);
}
.updates-container .update-fact-action.is-current dd {
  color: var(--c-success);
}
.updates-container .installed-updates-container {
  /* A row per update: what it is, what qualifies it, and when it landed — rather than six columns, four
     of which repeated the same two numbers. */
}
.updates-container .installed-updates-container .update-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.updates-container .installed-updates-container .update-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--c-border);
}
.updates-container .installed-updates-container .update-row:last-child {
  border-bottom: none;
}
.updates-container .installed-updates-container .update-row-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success);
}
.updates-container .installed-updates-container .update-row-status i {
  font-size: 15px;
}
.updates-container .installed-updates-container .update-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.updates-container .installed-updates-container .update-row-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 18px;
  color: var(--c-text);
}
.updates-container .installed-updates-container .update-row-title:hover {
  color: var(--c-link);
  text-decoration: underline;
}
.updates-container .installed-updates-container .update-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 1px;
  font-size: 12px;
  color: var(--c-field-text);
  /* Separators drawn rather than typed, so a row missing a field takes its separator with it. */
}
.updates-container .installed-updates-container .update-row-meta > span + span::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.5;
}
.updates-container .installed-updates-container .update-row-date {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--c-field-text);
  white-space: nowrap;
}
.updates-container .update-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
}
.updates-container .update-history-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-link);
  cursor: pointer;
  font-weight: 600;
}
.updates-container .update-history-link i {
  font-size: 16px;
}
.updates-container .update-history-link:hover {
  text-decoration: underline;
}
.updates-container .update-installed-count {
  color: var(--c-field-text);
  font-variant-numeric: tabular-nums;
}

.windows-services-container table th,
.windows-services-container table td {
  vertical-align: middle;
}
.windows-services-container table tbody tr.startup-failed {
  color: var(--c-on-fill);
}
.windows-services-container table tbody tr.startup-failed td {
  background-color: var(--c-danger);
}

.pnac-info-container .pnac-authentication-info-container {
  margin-top: 10px;
}
.pnac-info-container .pnac-authentication-info-container .no-info-available {
  text-align: center;
  font-size: 16px;
}

/* The same pill language the device header uses. DHCP used to be welded into a row label — "Dynamic IP
   Address:" — which moved the label as the value changed and hid the fact where nobody looks for it. */
.adapter-pill {
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.adapter-pill.is-dhcp {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.adapter-pill.is-static {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background-color: color-mix(in srgb, var(--c-accent), transparent 86%);
}
.adapter-pill.is-speed {
  border-color: var(--c-border);
  color: var(--c-field-text);
}
.adapter-pill.is-idle {
  border-color: var(--c-border);
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* A card per network card, headed by the interface name and the MAC. What this replaces was seven
   always-open inputs per entry separated by a divider — on ip6-localhost, which has eight cards, that
   is fifty-six form fields for a panel most visits only read. */
.nic-cards-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.nic-cards-summary {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.nic-card {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  margin-bottom: 10px;
  overflow: hidden;
}
.nic-card.is-stale {
  background-color: var(--c-surface-subtle);
}

.nic-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  cursor: pointer;
}
.nic-card-head:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}

.nic-card-caret {
  flex: none;
  font-size: 20px;
  line-height: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  transition: transform 0.18s ease;
}
.is-open .nic-card-caret {
  transform: rotate(90deg);
}

.nic-card-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
  color: var(--c-brand);
}
.nic-card-glyph .material-icons {
  font-size: 16px;
  line-height: 16px;
}
.is-stale .nic-card-glyph {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--c-border);
  color: var(--c-neutral);
}

.nic-card-id {
  flex: 1 1 auto;
  min-width: 0;
}

.nic-card-name {
  display: block;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.nic-card-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  overflow-wrap: anywhere;
}
.nic-card-sub .nic-card-reported {
  font-family: inherit;
}

.nic-card-state {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.nic-card-address {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
  color: var(--c-field-text);
  white-space: nowrap;
}

.nic-card-body {
  padding: 4px 13px 13px;
  border-top: 1px solid var(--c-border);
}

/* A grid rather than Material's row layout. Four fields at flex 20/25/25/30 plus their 16px gaps came
   to 993px in a 945px row, so the fourth wrapped to a line of its own and the comment to a third — the
   panel spent three rows on what fits in two. */
.nic-card-fields {
  display: grid;
  /* auto-fit collapses tracks that hold nothing, so four fields fill the row whatever it is wide.
     The comment gets a grid of its own for exactly that reason: spanning it 1 / -1 put an item in every
     track, which left auto-fit with nothing to collapse — at a 2400px card the grid opened eleven tracks
     and the four fields sat in the first four, 1520px short of the edge. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 16px;
  align-items: start;
}
.nic-card-fields md-input-container {
  /* The floating label is positioned at bottom: 100% of its container, so it renders entirely above
     the box and lives in this margin. Measured, it overhangs by 19px — at 12px it printed over the
     group heading above the first row and over the fields above the second. */
  margin: 24px 0 0;
  padding: 0;
  /* Material reserves a line under every field for a validation message that is usually not there,
     which is 18px per field across two rows. Messages still show; they just do not pre-book the room. */
}
.nic-card-fields md-input-container .md-errors-spacer {
  display: none;
}

.nic-card-group {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Read-only inventory values as facts. Two of them were disabled inputs, which spends a field's height
   and chrome on something you cannot type into; the rest were only in the info tooltip. */
.nic-card-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
}
.nic-card-facts dt {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  white-space: nowrap;
}
.nic-card-facts dd {
  margin: 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.nic-card-facts dd.is-mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
}
.nic-card-facts dd.is-wrap {
  word-break: break-all;
}

.nic-card-patch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
  color: var(--c-text);
}
.nic-card-patch .material-icons {
  font-size: 17px;
  line-height: 17px;
  color: var(--c-brand);
}
.nic-card-patch .nic-card-patch-clear {
  cursor: pointer;
  color: var(--c-field-text);
}

.nic-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--c-border);
}

.nic-card-action.md-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  color: var(--c-text);
}
.nic-card-action.md-button .material-icons {
  font-size: 17px;
  line-height: 17px;
}
.nic-card-action.md-button.is-danger {
  border-color: transparent;
  color: var(--c-danger);
}

.network-adapter-container {
  /* Equal cards that fill the panel at any width. The cards used to be as wide as their longest value and
     floated in a wrapping row, so one NIC left two thirds of the panel empty and three wrapped raggedly. */
  /* ipSubnet pairs positionally with ipAddress and was only ever visible inside the dialog. Put back
     together it reads as the address is actually written, and monospaced it lines up card to card. */
  /* The dialog was behind a bare info glyph pinned to the bottom-right corner of the text, with nothing
     to say it could be clicked. */
  /* Hyper-V switches, VPN clients and the like: real adapters, but not what the panel is opened to find. */
}
.network-adapter-container .adapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  /* Each card takes the height of what it has to say. Stretching them to match the tallest would undo
     the point of giving an adapter with no address four lines instead of eleven. */
  align-items: start;
}
.network-adapter-container .adapter-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  /* An adapter with no address, no gateway and no DNS is worth four lines and a quieter ground. A
     machine with one live NIC and two idle ones should read that way at a glance. */
}
.network-adapter-container .adapter-card.is-idle {
  background-color: var(--c-surface-subtle);
}
.network-adapter-container .adapter-card-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.network-adapter-container .adapter-card-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
  color: var(--c-brand);
}
.network-adapter-container .adapter-card-glyph .material-icons {
  font-size: 16px;
  line-height: 16px;
}
.is-idle .network-adapter-container .adapter-card-glyph {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--c-border);
  color: var(--c-neutral);
}
.network-adapter-container .adapter-card-title {
  flex: 1 1 auto;
  min-width: 0;
}
.network-adapter-container .adapter-card-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.network-adapter-container .adapter-card-driver {
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  overflow-wrap: anywhere;
}
.network-adapter-container .adapter-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.network-adapter-container .adapter-card-address {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.is-idle .network-adapter-container .adapter-card-address {
  background-color: var(--c-surface);
}
.network-adapter-container .adapter-card-address-primary {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 14px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.network-adapter-container .adapter-card-address-other {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: var(--c-field-text);
  overflow-wrap: anywhere;
}
.network-adapter-container .adapter-card-facts {
  /* ng-if leaves comment nodes behind, so :empty never matches — but a card whose every fact was
     missing (the WAN Miniports report a name and nothing else) would still claim the column gap. */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  margin: 0;
  font-size: 13px;
}
.network-adapter-container .adapter-card-facts:not(:has(dt)) {
  display: none;
}
.network-adapter-container .adapter-card-facts dt {
  font-weight: 400;
  color: var(--c-field-text);
  white-space: nowrap;
}
.network-adapter-container .adapter-card-facts dd {
  margin: 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.network-adapter-container .adapter-card-facts dd.is-mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
}
.network-adapter-container .adapter-card-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
}
.network-adapter-container .adapter-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-brand);
}
.network-adapter-container .adapter-card-more .material-icons {
  font-size: 15px;
  line-height: 15px;
}
.network-adapter-container .adapter-virtual {
  margin-top: 12px;
}
.network-adapter-container .adapter-virtual-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-field-text);
  cursor: pointer;
}
.network-adapter-container .adapter-virtual-toggle:hover {
  color: var(--c-text);
}
.network-adapter-container .adapter-virtual-toggle:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 6px;
}
.network-adapter-container .adapter-virtual-chevron {
  font-size: 20px;
  line-height: 20px;
  transition: transform 0.15s ease;
}
.network-adapter-container .adapter-virtual-chevron.is-open {
  transform: rotate(180deg);
}
.network-adapter-container .adapter-virtual-count {
  padding: 1px 7px;
  border-radius: 999px;
  background-color: var(--c-surface-sunken);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-field-text);
}
.network-adapter-container .adapter-virtual .adapter-grid {
  margin-top: 8px;
}

/* The detail dialog was the only user of .adapter-table and now lays itself out; see
   .adapter-detail below. */
.adapter-detail-dialog .md-toolbar-tools h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.25;
}
.adapter-detail-dialog .md-toolbar-tools h2 small {
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  overflow-wrap: anywhere;
}

.adapter-detail {
  /* Grouped by subject instead of one flat run of sixteen rows. */
}
.adapter-detail .adapter-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.adapter-detail .adapter-detail-group {
  margin-top: 18px;
}
.adapter-detail .adapter-detail-group h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.adapter-detail .adapter-detail-facts {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 6px 18px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
}
.adapter-detail .adapter-detail-facts dt {
  font-weight: 400;
  color: var(--c-field-text);
}
.adapter-detail .adapter-detail-facts dd {
  margin: 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
  /* A 70-character PCI path used to force a scrollbar across the whole dialog. */
}
.adapter-detail .adapter-detail-facts dd .is-mono, .adapter-detail .adapter-detail-facts dd.is-mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
}
.adapter-detail .adapter-detail-facts dd .is-secondary {
  color: var(--c-field-text);
}
.adapter-detail .adapter-detail-facts dd.is-wrap {
  word-break: break-all;
}

.device-report-list li:not(:last-child) {
  margin-bottom: 8px;
}

/* The header row the inventory panels carry above their table: what you are looking at on the left, the
   field to narrow it on the right. One rule for all of them — each panel used to carry its own, and every
   one of those was an empty ruleset wrapped around a margin reset for an md-input-container that the
   search field no longer uses. */
.installed-software-view-info-container,
.installed-choco-software-view-info-container,
.services-view-info-container,
.changes-view-info-container {
  padding: 0 0 10px;
}
.installed-software-view-info-container .info-description-container,
.installed-choco-software-view-info-container .info-description-container,
.services-view-info-container .info-description-container,
.changes-view-info-container .info-description-container {
  font-size: 13px;
  color: var(--c-field-text);
}

.changes-view-none {
  padding: 18px 8px !important;
  text-align: center;
  color: var(--c-field-text);
}

.logon-info-view-container {
  /* The warning was a bare orange line at the left of an otherwise empty row, with the controls right-
     aligned in the same band and the empty state centred below — three strips with nothing to do with
     each other. It is a notice now: the warning wash, its own box, and the reason spelled out. */
}
.logon-info-view-container .panel-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--c-warning), transparent 65%);
  border-radius: 6px;
  background-color: var(--c-warning-wash-a);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-text);
}
.logon-info-view-container .panel-notice b {
  font-weight: 600;
}
.logon-info-view-container .panel-notice .panel-notice-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--c-warning-deep);
}
.logon-info-view-container .panel-notice .panel-notice-detail {
  color: var(--c-field-text);
}
.logon-info-view-container .logon-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  /* Pushed right on its own, so the row still reads as a toolbar when there is no count to its left. */
}
.logon-info-view-container .logon-toolbar .logon-count {
  font-size: 12.5px;
  color: var(--c-field-text);
}
.logon-info-view-container .logon-toolbar .logon-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.logon-info-view-container .logon-empty {
  margin: 0;
  padding: 18px 0 14px;
  text-align: center;
  font-size: 14px;
  color: var(--c-field-text);
}
.logon-info-view-container th,
.logon-info-view-container td {
  vertical-align: middle;
}
.logon-info-view-container th:not(.hw-detail-menu-cell) .material-icons,
.logon-info-view-container td:not(.hw-detail-menu-cell) .material-icons {
  font-size: 16px;
  line-height: 20px;
  margin-right: 5px;
}
.logon-info-view-container .logon-info-logging-off td {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  text-decoration: line-through;
}

.device-info-container .table-default {
  width: 100%;
}
.device-info-container .table-default tbody tr {
  /* A rule under every row divided nine facts about one machine into nine things to read. The pairs
     are close enough to read as pairs without them. */
  border-bottom: none;
  /* The label column takes only what it needs — it was holding a fixed 235px, which left the values
     stranded a third of the way across the panel. Quieter than the value, too: the value is what is
     being read, the label only says what it is. */
}
.device-info-container .table-default tbody tr td {
  padding: 4px 0;
  vertical-align: top;
  line-height: 20px;
}
.device-info-container .table-default tbody tr td:first-child {
  width: 1%;
  padding-right: 24px;
  white-space: nowrap;
  font-weight: 400;
  color: var(--c-field-text);
}
.device-info-container .table-default tbody tr.memory-container .total-capacity {
  padding-top: 2px;
}
.device-info-container .table-default tbody tr.memory-container ul {
  margin: 0;
  padding-left: 24px;
}
.device-info-container .table-default tbody tr ul {
  margin: 0;
  padding-left: 14px;
}

.software-licences-container .table-default {
  width: 100%;
}
.software-licences-container .table-default .licensed {
  color: var(--c-success);
}

.device-report-without-action {
  cursor: default;
}

.force-resolve-icon {
  float: right;
  margin-left: 20px;
}

.local-users-view-container .filter-container md-input-container {
  margin: 0;
}
.local-users-view-container .local-users-table tbody tr td {
  white-space: nowrap;
}
.local-users-view-container .local-users-table th,
.local-users-view-container .local-users-table td {
  vertical-align: middle;
}
.local-users-view-container .local-users-table .local-user-disabled td {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  text-decoration: line-through;
}

/* A hardware class (cmdb/hardware-class/hardware-class-detail.html): the subnet page's cards; the system tag as a
   grid of tiles, the picked one in the brand's colour. */
.hwclass-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.hwclass-count {
  font-weight: 600;
  color: var(--c-text);
}

.hwclass-tag__note {
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.hwclass-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 6px;
}

.hwclass-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.hwclass-tag i.material-icons {
  flex: none;
  font-size: 17px;
  line-height: 17px;
}
.hwclass-tag:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 74%);
  color: var(--c-text);
}
.hwclass-tag:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.hwclass-tag.is-on {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  font-weight: 600;
  color: var(--c-brand);
}
.hwclass-tag[disabled] {
  cursor: default;
}

.hwclass-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-warning), transparent 86%);
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-warning-ink);
}
.hwclass-warning i.material-icons {
  flex: none;
  font-size: 18px;
  line-height: 20px;
}
.hwclass-warning b {
  font-weight: 600;
}

/* A hardware type (cmdb/hardware-type/hardware-type-detail.html): the subnet page's cards; the class's system tag
   as a pill under the class. */
.hwtype-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.hwtype-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .hwtype-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hwtype-under {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.hwtype-counter {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.hwtype-class {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.hwtype-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-size: 12px;
  color: var(--c-brand);
}
.hwtype-tag i.material-icons {
  font-size: 13px;
  line-height: 13px;
}

/* A printer share (cmdb/printerShare/printerShare-detail.html): the subnet page's cards; the path to copy. */
.printer-share-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
@media (max-width: 768px) {
  .printer-share-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.printer-share-server {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.printer-share-path {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 7px 8px 7px 12px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}

.printer-share-path__label {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.printer-share-path__value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.printer-share-path__copy:hover,
.printer-share-path__copy:focus-visible {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}

/* A department (cmdb/department/department-detail.html): name and description, side by side. */
.department-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
@media (max-width: 768px) {
  .department-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A user account (cmdb/User/user-detail.html): the subnet page's cards; the devices it has logged in on. */
.user-account-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .user-account-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.user-shares-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 768px) {
  .user-shares-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.user-logins {
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-logins__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px minmax(72px, auto);
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 4px 0;
  border-top: 1px solid var(--c-border);
}
.user-logins__row:first-child {
  border-top: 0;
}
.user-logins__row:hover .workspace-link-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.user-logins__state {
  display: flex;
  align-items: center;
}

.user-logins__host {
  min-width: 0;
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-logins__class {
  text-align: right;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* A site (cmdb/site/site-detail.html): the subnet page's cards; address, subnets and the subnets of a new site. */
.site-address-grid {
  grid-template-columns: minmax(0, 1.6fr) 110px minmax(0, 1fr);
  margin-top: 2px;
}
@media (max-width: 768px) {
  .site-address-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-default {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}

.site-default__hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.site-subnets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-subnets__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 180px) 90px;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 4px 0;
  border-top: 1px solid var(--c-border);
}
.site-subnets__row:first-child {
  border-top: 0;
}
.site-subnets__row:hover .workspace-link-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.site-subnets__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-subnets__address {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
}

.site-subnets__hosts {
  text-align: right;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.site-new-subnet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) minmax(0, 1fr) 30px;
  align-items: start;
  gap: 10px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
}
.site-new-subnet:first-of-type {
  padding-top: 0;
}
@media (max-width: 768px) {
  .site-new-subnet {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-new-subnet__remove {
  margin-top: 20px;
}

.site-form .subnet-config__add-button {
  margin-top: 10px;
}

/* A person (cmdb/person/person-detail.html): the hardware page's header, rail and panels
   (.hardware-detail-container above), plus the initials, the counts in the rail and the assigned lists. */
.person-detail-container {
  /* as specific as the hardware page's own rule, which draws the entries as blocks */
  /* shown on hover, as the workspace-tab button is; always there where there is no hover */
  /* the name with what belongs to it — state and class, or where the account logs in — on one line */
  /* removed, and undoable until the row goes */
}
.person-detail-container .person-header-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 14px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-brand);
}
.person-detail-container .hardware-form .section-rail .section-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.person-detail-container .person-header-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  margin-top: 4px;
  font-size: 13px;
}
.person-detail-container .person-contact {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.person-detail-container .person-contact:hover .person-contact-copy, .person-detail-container .person-contact:focus-within .person-contact-copy {
  opacity: 1;
}
.person-detail-container .person-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--c-brand);
  overflow-wrap: anywhere;
  text-decoration: none;
}
.person-detail-container .person-contact-link:hover {
  text-decoration: underline;
}
.person-detail-container .person-contact-link i.material-icons {
  font-size: 15px;
}
.person-detail-container .person-contact-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}
.person-detail-container .person-contact-copy i.material-icons {
  font-size: 14px;
}
.person-detail-container .person-contact-copy:hover, .person-detail-container .person-contact-copy:focus-visible {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
@media (hover: none) {
  .person-detail-container .person-contact-copy {
    opacity: 1;
  }
}
.person-detail-container .person-rail-count {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.person-detail-container .person-assigned-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.person-detail-container .person-assigned-toolbar .md-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.person-detail-container .person-assigned-toolbar .md-button i.material-icons {
  font-size: 18px;
}
.person-detail-container .person-assigned-empty {
  margin: 4px 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.person-detail-container .person-assigned {
  margin: 0;
  padding: 0;
  list-style: none;
}
.person-detail-container .person-assigned-row {
  display: grid;
  /* the name and what belongs to it, then either the remove button or, once removed, the undo */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 4px 0;
  border-top: 1px solid var(--c-border);
}
.person-detail-container .person-assigned-row:first-child {
  border-top: 0;
}
.person-detail-container .person-assigned-row:hover .workspace-link-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}
.person-detail-container .person-assigned-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}
.person-detail-container .person-assigned-logins {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.person-detail-container .person-assigned-logins a {
  color: var(--c-brand);
}
.person-detail-container .person-assigned-row.is-removed .person-assigned-name {
  text-decoration: line-through;
}
.person-detail-container .person-assigned-row.is-removed .person-assigned-name a {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.person-detail-container .person-assigned-undo {
  justify-self: end;
  padding-right: 4px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.person-detail-container .person-assigned-undo a {
  font-weight: 600;
  color: var(--c-brand);
}
.person-detail-container .person-more-numbers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 6px 4px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--c-brand);
  cursor: pointer;
}
.person-detail-container .person-more-numbers i.material-icons {
  font-size: 18px;
}
.person-detail-container .person-more-numbers:hover, .person-detail-container .person-more-numbers:focus-visible {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.person-detail-container .person-more-numbers-hint {
  margin-left: 4px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.person-detail-container .person-other-numbers {
  margin-top: 8px;
}
.person-detail-container .person-assigned-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-detail-container .person-assigned-name.is-mono {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
}
.person-detail-container .person-assigned-meta {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.person-detail-container .person-assigned-remove {
  justify-self: end;
  /* the glyph, not its hit area, meets the panel's right edge, under the header's chevron */
  margin-right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.person-detail-container .person-assigned-remove i.material-icons {
  font-size: 18px;
}
.person-detail-container .person-assigned-remove:hover, .person-detail-container .person-assigned-remove:focus-visible {
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  color: var(--c-danger);
}

/* The person page's assign dialog (cmdb/person/dialogs/assignPicker.tmpl.html), in the .ip-dialog frame: a search
   and the results as rows to pick, with who has each one now. */
md-dialog.ip-dialog.bp-dialog.assign-picker {
  width: 620px;
}

.assign-picker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}
.assign-picker__search:focus-within {
  border-color: var(--c-brand);
}
.assign-picker__search i.material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.assign-picker__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
}
@media (pointer: coarse) {
  .assign-picker__search input {
    font-size: 16px;
  }
}

/* searching: the icon turns, a bar runs along the field's bottom edge */
.assign-picker__search {
  position: relative;
  overflow: hidden;
}

.assign-picker__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 150ms ease;
}
.assign-picker__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  border-radius: 2px;
  background-color: var(--c-brand);
  animation: assign-picker-bar 1s ease-in-out infinite;
}

.assign-picker__search.is-loading .assign-picker__bar {
  opacity: 1;
}
.assign-picker__search.is-loading .assign-picker__search-icon {
  color: var(--c-brand);
  animation: assign-picker-spin 0.8s linear infinite;
}

@keyframes assign-picker-bar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(290%);
  }
}
@keyframes assign-picker-spin {
  to {
    transform: rotate(360deg);
  }
}
/* results fade in one after another; the old ones dim while the next search runs */
.assign-picker__row.is-entering {
  animation: assign-picker-enter 180ms ease-out both;
}

@keyframes assign-picker-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.assign-picker__results.is-stale {
  opacity: 0.45;
  transition: opacity 150ms ease;
  pointer-events: none;
}

/* the first load: placeholder rows with a sheen instead of an empty box */
.assign-picker__results.is-skeleton .assign-picker__row {
  cursor: default;
}
.assign-picker__results.is-skeleton .assign-picker__row:hover {
  background: none;
}

.assign-picker__bone {
  display: inline-block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink), transparent 88%) 25%, color-mix(in srgb, var(--c-brand), transparent 78%) 50%, color-mix(in srgb, var(--c-ink), transparent 88%) 75%);
  background-size: 300% 100%;
  animation: assign-picker-sheen 1.3s ease-in-out infinite;
}
.assign-picker__bone.is-short {
  width: 72px;
}
.assign-picker__bone.is-detail {
  width: 120px;
  opacity: 0.6;
}

@keyframes assign-picker-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .assign-picker__bar::after,
.assign-picker__search.is-loading .assign-picker__search-icon,
.assign-picker__row.is-entering,
.assign-picker__bone {
    animation: none;
  }
}
.assign-picker__results {
  max-height: 360px;
  margin: 10px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.assign-picker__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.assign-picker__row:hover, .assign-picker__row:focus-visible {
  background-color: var(--c-surface-subtle);
  outline: none;
}
.assign-picker__row.is-selected {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  box-shadow: inset 0 0 0 1px var(--c-brand);
}
.assign-picker__row.is-assigned {
  cursor: default;
  opacity: 0.6;
}
.assign-picker__row.is-assigned:hover {
  background: none;
}

.assign-picker__name {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--c-text);
}

.assign-picker__detail {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.assign-picker__owner {
  margin-left: auto;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.assign-picker__owner.is-other {
  color: var(--c-warning-ink);
}

.assign-picker__empty,
.assign-picker__more {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.assign-picker__note {
  font-size: 12px;
  color: var(--c-warning-ink);
}

.infinite-table-wrapper {
  padding-top: 16px;
  /* A list with nothing in it: a card where the table would be. A template of a table's own (AD reports)
     gets the same card around its text. */
}
.infinite-table-wrapper search-bar,
.infinite-table-wrapper .search-bar {
  margin-bottom: 16px;
}
.infinite-table-wrapper .table-empty-container {
  display: flex;
  justify-content: center;
  padding: 8px 0 24px;
}
.infinite-table-wrapper .table-empty-container > [ng-include] {
  width: 100%;
  max-width: 560px;
  padding: 32px 24px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  text-align: center;
  font-size: 14px;
  color: var(--c-field-text);
}
.infinite-table-wrapper .table-empty-container .table-empty {
  width: 100%;
  max-width: 560px;
  padding: 40px 24px 36px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.infinite-table-wrapper .mobile-spacer {
  display: none;
}
@media (max-width: 1279px) {
  .infinite-table-wrapper .mobile-spacer {
    display: block;
  }
}
.infinite-table-wrapper table thead tr th md-menu-bar {
  padding: 0;
}
.infinite-table-wrapper table thead tr th md-menu-bar md-menu {
  width: 100%;
}

.infinite-table-container {
  height: 800px;
  overflow: scroll;
  clear: both;
  /* the container clips the table, so this is what rounds the table's visible corners */
  border-radius: 6px;
  /* the scrollbars sit inside the rounded container, so they are part of the table's look */
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.infinite-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.infinite-table-container::-webkit-scrollbar-track {
  background: transparent;
}
.infinite-table-container::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.infinite-table-container::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.infinite-table-container::-webkit-scrollbar-corner {
  background: transparent;
}
.infinite-table-container.horizontal-scroll {
  overflow-x: scroll;
}
.infinite-table-container.horizontal-scroll .table {
  display: block;
  margin-bottom: 6px;
}
.infinite-table-container.horizontal-scroll .table > thead > tr:first-child > th {
  position: unset;
}
.infinite-table-container .table.infinite-table {
  margin-bottom: 0;
  /* .table paints the white background on the table element itself */
  border-radius: 6px;
  /* the container's radius only shows where the table reaches its edge, and border-collapse is
     "separate", so the corner cells have to round their own background as well */
}
.infinite-table-container .table.infinite-table thead > tr:first-child > th:first-child {
  border-top-left-radius: 6px;
}
.infinite-table-container .table.infinite-table thead > tr:first-child > th:last-child {
  border-top-right-radius: 6px;
}
.infinite-table-container .table.infinite-table tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 6px;
}
.infinite-table-container .table.infinite-table tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 6px;
}
.infinite-table-container .table.infinite-table tbody tr {
  /* A wash of the selection orange rather than half of it: at 50% the row's own red, green and
     blue text (states, links, messages) all but disappeared into it. The ticked box says the rest. */
}
.infinite-table-container .table.infinite-table tbody tr td.align-left {
  text-align: left;
}
.infinite-table-container .table.infinite-table tbody tr td.align-right {
  text-align: right;
}
.infinite-table-container .table.infinite-table tbody tr td ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.infinite-table-container .table.infinite-table tbody tr td i.material-icons:not(.custom-style-icon) {
  float: left;
  height: 20px;
  position: relative;
  bottom: 2px;
}
.infinite-table-container .table.infinite-table tbody tr td .infinite-table-action-buttons {
  margin-right: 10px;
}
.infinite-table-container .table.infinite-table tbody tr td .infinite-table-action-buttons i {
  width: 35px;
}
.infinite-table-container .table.infinite-table tbody tr td md-switch {
  height: 20px;
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 0;
}
.infinite-table-container .table.infinite-table tbody tr.negative-id td {
  background-color: color-mix(in srgb, var(--c-accent), transparent 50%);
}
.infinite-table-container .table.infinite-table tbody tr.selected td {
  background-color: color-mix(in srgb, var(--c-accent), transparent 86%);
}
.infinite-table-container .select2-container {
  top: 2px;
  right: 9px;
}
.infinite-table-container .select2-container.select2-dropdown-open .select2-choice {
  padding: 0 0 0 8px;
}
.infinite-table-container .select2-container .select2-choice {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  border-bottom: 0;
  padding: 1px 1px 1px 9px;
}
.infinite-table-container .select2-container .select2-choice .select2-chosen {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.infinite-table-container .infinite-table-checkbox-wrapper {
  width: 10px;
}
.infinite-table-container .infinite-table-checkbox-wrapper .infinite-table-checkbox {
  margin-bottom: 0;
  min-height: 20px;
}
.infinite-table-container .infinite-table-checkbox-wrapper .infinite-table-checkbox .md-container {
  margin-top: 10px;
}
.infinite-table-container th {
  /* The checkbox's own colours come from checkbox.scss now — this repainted the select-all box in the
     accent when checked and 54% black otherwise, which is the pair the rest of the app has moved off. */
}
.infinite-table-container th .infinite-table-checkbox .md-container {
  margin-top: 12px;
}
.infinite-table-container th.state-column .icon-wrapper {
  width: 6px;
}
.infinite-table-container th.state-column .icon-wrapper .material-icons {
  margin-left: -9px;
}

/* The column menu. The row menu's surface (see md-menu-content.generated-menu in mdMenu.scss) — its labels, 32px
   items and hover — with a check on what is applied, a compact filter form, and Hide column set apart.
 *
 * Material's theme sheet loads after this one, so the rules that change its menu items carry an element selector
 * on top of the class. */
md-menu-content.column-menu {
  width: 300px;
  max-width: calc(100vw - 32px);
  overflow-x: hidden;
}
md-menu-content.column-menu, md-menu-content.column-menu.md-menu-bar-menu.md-dense {
  max-height: calc(100vh - 120px);
  padding: 6px;
}
md-menu-content.column-menu md-menu-item {
  height: 32px;
  min-height: 32px;
}
md-menu-content.column-menu md-menu-item > .md-button {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  gap: 10px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 32px;
  text-transform: none;
  color: var(--c-text);
}
md-menu-content.column-menu md-menu-item > .md-button:not([disabled]):hover, md-menu-content.column-menu md-menu-item > .md-button:not([disabled]):focus {
  background-color: var(--c-table-row-hover);
}
md-menu-content.column-menu md-menu-item > .md-button md-icon.material-icons {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  font-size: 18px;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-menu-content.column-menu .column-menu-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
md-menu-content.column-menu md-menu-item > .md-button md-icon.material-icons.column-menu-check {
  visibility: hidden;
  color: var(--c-brand);
}
md-menu-content.column-menu md-menu-item.is-active > .md-button {
  font-weight: 600;
  color: var(--c-brand);
}
md-menu-content.column-menu md-menu-item.is-active > .md-button md-icon.material-icons {
  color: var(--c-brand);
}
md-menu-content.column-menu md-menu-item.is-active > .md-button md-icon.material-icons.column-menu-check {
  visibility: visible;
}
md-menu-content.column-menu md-menu-item.is-muted > .md-button {
  color: var(--c-field-text);
}
md-menu-content.column-menu md-menu-divider {
  display: block;
  height: 1px;
  margin: 5px 4px;
  border: 0;
  background-color: var(--c-border);
}
md-menu-content.column-menu > div:first-child > .column-menu-label:first-child {
  padding-top: 2px;
}
md-menu-content.column-menu .column-menu-label {
  padding: 8px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-menu-content.column-menu .column-menu-filter {
  padding-bottom: 4px;
}
md-menu-content.column-menu .column-menu-filter rule-builder,
md-menu-content.column-menu .column-menu-filter selection-rule-builder {
  display: block;
  padding: 2px 10px 0;
}
md-menu-content.column-menu .column-menu-filter .condition-builder > div[layout=row] {
  gap: 6px;
  align-items: center;
}
md-menu-content.column-menu .column-menu-filter .condition-builder md-select {
  flex: 0 0 118px !important;
  max-width: 118px !important;
  height: 32px;
  margin: 0 !important;
}
md-menu-content.column-menu .column-menu-filter .condition-builder md-select .md-select-value {
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 13px;
}
md-menu-content.column-menu .column-menu-filter .condition-builder md-input-container {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}
md-menu-content.column-menu .column-menu-filter .condition-builder md-input-container input {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 13px;
}
md-menu-content.column-menu .column-menu-filter .condition-builder md-input-container input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 82%);
}
md-menu-content.column-menu .column-menu-filter .condition-builder .table {
  margin: 6px 0 0;
}
md-menu-content.column-menu .column-menu-unfilterable {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 2px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
md-menu-content.column-menu .column-menu-unfilterable .material-icons {
  font-size: 16px;
}
md-menu-content.column-menu .column-menu-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 10px 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 93%);
  font-size: 12.5px;
  color: var(--c-brand);
}
md-menu-content.column-menu .column-menu-rule span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
md-menu-content.column-menu .column-menu-rule-remove {
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: pointer;
}
md-menu-content.column-menu .column-menu-rule-remove .material-icons {
  font-size: 16px;
}
md-menu-content.column-menu .column-menu-rule-remove:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
md-menu-content.column-menu .column-menu-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 0 10px;
}
md-menu-content.column-menu .column-menu-hint {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-menu-content.column-menu .md-button.column-menu-remove {
  min-width: 0;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  font-size: 12.5px;
  line-height: 28px;
  text-transform: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
md-menu-content.column-menu .md-button.column-menu-apply {
  min-width: 0;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 14px;
  border-radius: 6px;
  background-color: var(--c-brand);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 28px;
  text-transform: none;
  color: var(--c-on-fill);
}
md-menu-content.column-menu .md-button.column-menu-apply:not([disabled]):hover {
  background-color: var(--c-brand-dark);
}
md-menu-content.column-menu .md-button.column-menu-apply[disabled] {
  background-color: var(--c-surface-sunken);
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.md-open-menu-container:has(> md-menu-content.column-menu) {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

.table.infinite-table > thead > tr > th .material-icons.column-sort-indicator {
  margin-left: 4px !important;
  font-size: 14px !important;
  color: var(--c-brand);
}
.table.infinite-table > thead > tr > th .column-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin: 6px 0 0 5px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--c-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--c-on-fill);
}

.md-select-menu-container {
  z-index: 100;
}

.table.infinite-table > thead > tr {
  height: 28px !important;
}

.table.infinite-table > thead > tr > th {
  height: 28px !important;
  min-height: 28px !important;
  /* 12px to match the body cells below. At 6px each heading sat half a gutter left of the values in its
     own column, which is visible the moment the columns have hairlines between them. */
  padding: 2px 12px !important;
  line-height: 28px !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

.table.infinite-table > thead > tr > th .material-icons {
  font-size: 16px !important;
  height: 28px !important;
  line-height: 28px !important;
  margin: 0 !important;
}

.table.infinite-table > thead > tr > th md-menu-bar,
.table.infinite-table > thead > tr > th md-menu,
.table.infinite-table > thead > tr > th md-menu > div,
.table.infinite-table > thead > tr > th .md-button {
  height: 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.table.infinite-table > thead > tr > th.state-column {
  width: 16px !important;
  padding: 0 !important;
}

.table.infinite-table > thead > tr > th.state-column .icon-wrapper {
  width: 16px !important;
  height: 28px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table.infinite-table > thead > tr > th.state-column .icon-wrapper .material-icons {
  font-size: 16px !important;
  margin-left: 0 !important;
}

/* The lead columns: the select box and the row menu, each as wide as its 24px control plus a little air. With the
   table's 12px cell padding on both sides they took 48px apiece, which with the state rail was 122px of every row
   before the first column with content. */
.table.infinite-table > thead > tr > th[data-column=__checkbox],
.table.infinite-table > tbody > tr > td.infinite-table-checkbox-wrapper {
  width: 32px;
  min-width: 32px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* The row's box centred in its cell the way the header's is (flex, no margin). It sat on Material's 3px left margin
   instead, so it ran 1px left of the select-all box above it, and a 10px top margin put it in the middle of the
   row. Now the box is the cell's 24px content height and centres itself in both directions. */
.table.infinite-table > tbody > tr > td.infinite-table-checkbox-wrapper .infinite-table-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 24px;
  margin: 0 !important;
  /* Material places it absolutely; centred on the box's middle, as the header's is. */
}
.table.infinite-table > tbody > tr > td.infinite-table-checkbox-wrapper .infinite-table-checkbox .md-container {
  margin: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.table.infinite-table > thead > tr > th.row-menu-column,
.table.infinite-table > tbody > tr > td.row-menu-cell {
  width: 28px;
  min-width: 28px;
  padding-left: 2px !important;
  padding-right: 2px !important;
  text-align: center;
}

.table.infinite-table > thead > tr > th .infinite-table-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.table.infinite-table > thead > tr > th .infinite-table-checkbox .md-container {
  margin: 0 !important;
  /* 16px like every table checkbox (checkbox.scss), centred in the cell the same way the rows' boxes are */
  height: 16px !important;
  width: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.table.infinite-table > thead > tr > th .infinite-table-checkbox .md-icon {
  height: 16px !important;
  width: 16px !important;
  line-height: 16px !important;
}

.table.infinite-table > thead > tr > th .infinite-table-checkbox {
  min-height: 0 !important;
  line-height: 28px !important;
}

/* Scoped to the infinite table, which is where it was meant to apply — its heading cells pack a checkbox
   and a filter menu in and set their own height. Unqualified it reached every .table in the app and
   flattened plain table headings to zero vertical padding. */
.table.infinite-table > thead > tr > th {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* A column with truncate set: one line, cut with an ellipsis at the width the column gives, the full value
   in the cell's tooltip (see truncatedCell in infiniteTableBody). */
.infinite-table td .cell-truncate {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.infinite-table th.prevent-line-break,
.infinite-table td.prevent-line-break {
  white-space: nowrap;
}

.infinite-table th.force-wrap,
.infinite-table td.force-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The filter line: what the table is filtered by — the tags as a sentence, the search term, a saved filter and
   column filters as chips — and at its end Save as filter and Reset. See infiniteTable.html. */
.filter-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.filter-line b {
  font-weight: 600;
  color: var(--c-brand);
}

tag-selector + .filter-line {
  margin-top: -6px;
}

.filter-line-joiner {
  color: var(--c-field-text);
}

.filter-line-part {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 420px;
  height: 26px;
  padding: 0 3px 0 9px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background-color: var(--c-surface);
  white-space: nowrap;
}
.filter-chip[role=button] {
  cursor: pointer;
}
.filter-chip[role=button]:hover {
  border-color: var(--c-brand);
}
.filter-chip:focus {
  outline: none;
}
.filter-chip:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}
.filter-chip b {
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-chip.is-saved {
  border-color: color-mix(in srgb, var(--c-brand), transparent 75%);
  background-color: color-mix(in srgb, var(--c-brand), transparent 93%);
}
.filter-chip.is-not-applied {
  border-style: dashed;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.filter-chip.is-not-applied b {
  text-decoration: line-through;
}
.filter-chip.is-not-applied .filter-chip-icon.material-icons {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.filter-chip-note {
  color: var(--c-warning-ink);
}

.filter-line-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--c-warning-ink), transparent 90%);
  color: var(--c-warning-ink);
  font-size: 13px;
}
.filter-line-notice .material-icons {
  font-size: 18px;
}

.filter-line-notice-action {
  margin-left: auto;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.filter-line-notice-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-warning-ink), transparent 70%);
}

.filter-chip-kind {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.filter-chip-icon.material-icons {
  font-size: 15px;
  color: var(--c-brand);
}

.filter-chip-remove {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 1px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.filter-chip-remove .material-icons {
  font-size: 15px;
}
.filter-chip-remove:hover, .filter-chip-remove:focus-visible {
  outline: none;
  background-color: var(--c-table-row-hover);
}

.filter-line-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

.filter-line-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--c-link);
  cursor: pointer;
  white-space: nowrap;
}
.filter-line-action .material-icons {
  font-size: 16px;
}
.filter-line-action:hover {
  background-color: color-mix(in srgb, var(--c-link), transparent 91%);
}
.filter-line-action:focus {
  outline: none;
}
.filter-line-action:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}
.filter-line-action.is-quiet {
  color: var(--c-field-text);
}
.filter-line-action.is-quiet:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}

/* ── Loading ───────────────────────────────────────────────────────────────────────────────────────────────
   The table's own loading states (see "Loading" in infiniteTable.directive.js): skeleton rows before there is
   anything, the previous rows dimmed while a reload runs, a line under the column names, a note when a first load
   is slow, a row while more load, and an error with Retry. */
@keyframes infinite-table-shimmer {
  from {
    background-position: -400px 0;
  }
  to {
    background-position: 400px 0;
  }
}
@keyframes infinite-table-line {
  from {
    left: -30%;
  }
  to {
    left: 100%;
  }
}
@keyframes infinite-table-spin {
  to {
    transform: rotate(360deg);
  }
}
.infinite-table-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--c-brand), transparent 82%);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: infinite-table-spin 0.8s linear infinite;
}

.table.infinite-table > thead > tr.infinite-table-progress {
  height: 0 !important;
}

.table.infinite-table > thead > tr.infinite-table-progress > th {
  position: sticky;
  top: 28px;
  z-index: 10;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: 0;
  background: transparent;
  overflow: visible;
}

.infinite-table-progress-line {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
}
.infinite-table-progress-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-accent), transparent 100%), var(--c-accent) 30%, var(--c-accent) 70%, color-mix(in srgb, var(--c-accent), transparent 100%));
  animation: infinite-table-line 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.table.infinite-table.is-reloading > tbody:not(.infinite-table-skeleton) > tr {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.table.infinite-table > tbody.infinite-table-skeleton > tr > td {
  height: 38px;
  vertical-align: middle;
}

.infinite-table-skeleton-bar {
  display: block;
  max-width: 220px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--c-surface-sunken) 0px, var(--c-surface) 120px, var(--c-surface-sunken) 240px);
  background-size: 800px 100%;
  animation: infinite-table-shimmer 1.4s linear infinite;
}
.infinite-table-skeleton-bar.is-box {
  margin: 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.table.infinite-table > tbody.infinite-table-skeleton > tr.infinite-table-slow > td {
  padding: 8px 12px;
}
.table.infinite-table > tbody.infinite-table-skeleton > tr.infinite-table-slow > td > * {
  vertical-align: middle;
}
.table.infinite-table > tbody.infinite-table-skeleton > tr.infinite-table-slow > td .infinite-table-spinner {
  margin-right: 8px;
}
.table.infinite-table > tbody.infinite-table-skeleton > tr.infinite-table-slow > td b {
  font-weight: 600;
  color: var(--c-brand);
}

.infinite-table-slow-seconds {
  float: right;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  font-variant-numeric: tabular-nums;
}

.infinite-table-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.infinite-table-more.is-failed .material-icons {
  font-size: 17px;
  color: var(--c-danger);
}

.infinite-table-more-retry {
  margin-left: 4px;
  padding: 3px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.infinite-table-more-retry:hover, .infinite-table-more-retry:focus-visible {
  border-color: var(--c-brand);
  outline: 0;
}

.infinite-table-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
}
.infinite-table-error .material-icons {
  font-size: 30px;
  color: var(--c-danger);
}
.infinite-table-error b {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
}
.infinite-table-error span {
  max-width: 52ch;
  font-size: 13px;
  color: var(--c-field-text);
}
.infinite-table-error .md-button.infinite-table-retry {
  margin-top: 8px;
  padding: 0 16px;
  border-radius: 6px;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  text-transform: none;
}

/* The empty states: the list has nothing (.table-empty-container, after the table) or nothing matches its
   filters (.is-filtered, inside the table's container under the header, which stays). */
.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* The body of the table under its header, not a message beside it. */
}
.table-empty.is-filtered {
  padding: 40px 20px;
  border: 1px solid var(--c-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background-color: var(--c-surface);
}
.table-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 12%, transparent);
}
.table-empty__icon .material-icons {
  font-size: 24px;
}
.table-empty.is-filtered .table-empty__icon {
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 6%, transparent);
}
.table-empty__title {
  max-width: 52ch;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-text);
}
.table-empty__text {
  max-width: 52ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-field-text);
}
.table-empty__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-top: 18px;
  padding: 0 14px 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.table-empty__action .material-icons {
  font-size: 18px;
}
.table-empty__action:hover {
  background-color: var(--c-brand-active);
}
.table-empty__action:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.table-empty__action.is-quiet {
  border-color: var(--c-border);
  background-color: var(--c-surface);
  color: var(--c-text);
}
.table-empty__action.is-quiet:hover {
  background-color: var(--c-row-hover);
}

@media (prefers-reduced-motion: reduce) {
  .infinite-table-spinner,
.infinite-table-progress-line::after {
    animation-duration: 2.4s;
  }
  .infinite-table-skeleton-bar {
    animation: none;
  }
}
/* ── Column widths ───────────────────────────────────────────────────────────────────────────────────────────────
   A handle on each column's right edge (see "Column widths" in infiniteTable.directive.js). Once a width is set
   the table is laid out fixed, and a cell cuts what does not fit instead of widening its column; the caps the
   one-line cells set for the browser's own layout give way to the column's width. */
/* The header cells are sticky, which already places the handle; where a table scrolls sideways they are not. */
.infinite-table-container.horizontal-scroll .table > thead > tr:first-child > th {
  position: relative;
}

.table.infinite-table > thead > tr:first-child > th {
  /* The last column's handle kept inside the table: centred on the edge like the others, its outer half stood
     4px past the table and the container, and that alone gave every table a horizontal scrollbar. */
}
.table.infinite-table > thead > tr:first-child > th .column-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 2;
  width: 8px;
  cursor: col-resize;
}
.table.infinite-table > thead > tr:first-child > th .column-resize-handle::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 3px;
  width: 2px;
  border-radius: 1px;
  background-color: transparent;
  transition: background-color 120ms ease;
}
.table.infinite-table > thead > tr:first-child > th:last-child .column-resize-handle {
  right: 0;
}
.table.infinite-table > thead > tr:first-child > th:last-child .column-resize-handle::after {
  left: auto;
  right: 1px;
}
.table.infinite-table > thead > tr:first-child > th:hover .column-resize-handle::after {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.table.infinite-table > thead > tr:first-child > th .column-resize-handle:hover::after {
  background-color: var(--c-brand);
}

.table.infinite-table.has-column-widths > thead > tr:first-child > th {
  overflow: hidden;
  text-overflow: ellipsis;
}
.table.infinite-table.has-column-widths > tbody > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.table.infinite-table.has-column-widths:not(.is-measuring) td .cell-truncate,
.table.infinite-table.has-column-widths:not(.is-measuring) td .device-report-line,
.table.infinite-table.has-column-widths:not(.is-measuring) td .free-disk-space-line {
  max-width: 100% !important;
}

body.is-resizing-column {
  cursor: col-resize !important;
  user-select: none;
}
body.is-resizing-column * {
  cursor: col-resize !important;
}

/* A row whose name is missing: the link says what is missing (TableLinkCreator), muted so it does not pass for a
   name, dashed so it still reads as a link. */
a.table-link-empty {
  border-bottom: 1px dashed color-mix(in srgb, var(--c-ink), transparent 74%);
  font-style: italic;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-decoration: none;
}
a.table-link-empty:hover, a.table-link-empty:focus-visible {
  border-bottom-color: var(--c-brand);
  color: var(--c-brand);
  text-decoration: none;
}

/* A row with no name to click: the way into it, a chevron in a small button (it was an eye). Named with the
   infinite table's cell icon rule, which floats every cell icon 20px high and 2px up. */
i.material-icons.table-open-details,
.table td i.material-icons.table-open-details,
.infinite-table-container .table.infinite-table tbody tr td i.material-icons.table-open-details {
  float: none;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -6px 0;
  border-radius: 6px;
  font-size: 20px;
  line-height: 28px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.12s ease, color 0.12s ease;
}
i.material-icons.table-open-details:hover,
.table td i.material-icons.table-open-details:hover,
.infinite-table-container .table.infinite-table tbody tr td i.material-icons.table-open-details:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}

.infinite-table-end {
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

.table.infinite-table > tbody.infinite-table-spacer {
  overflow-anchor: none;
  pointer-events: none;
}
.table.infinite-table > tbody.infinite-table-spacer > tr,
.table.infinite-table > tbody.infinite-table-spacer > tr:hover,
.table.infinite-table > tbody.infinite-table-spacer > tr:nth-child(odd) {
  background: transparent !important;
}
.table.infinite-table > tbody.infinite-table-spacer > tr > td,
.table.infinite-table > tbody.infinite-table-spacer > tr:hover > td,
.table.infinite-table > tbody.infinite-table-spacer > tr:nth-child(odd) > td {
  --placeholder-bar: linear-gradient(to bottom, transparent calc(50% - 5px), var(--c-surface-sunken) calc(50% - 5px),
    var(--c-surface-sunken) calc(50% + 5px), transparent calc(50% + 5px));
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--placeholder-bar), var(--placeholder-bar), linear-gradient(to bottom, var(--c-row-stripe) 50%, transparent 50%) !important;
  background-size: 160px var(--row-height, 38px), 110px var(--row-height, 38px), 100% calc(var(--row-height, 38px) * 2) !important;
  background-position: 56px var(--row-shift, 0px), 30% var(--row-shift, 0px), 0 var(--row-shift, 0px) !important;
  background-repeat: repeat-y !important;
  font-size: 0;
  line-height: 0;
}

/* ── Column order ────────────────────────────────────────────────────────────────────────────────────────────────
   A grip in the left gutter of a movable column's header (see "Column order" in infiniteTableColumns.js), shown on
   hover: dragged, the header lifts (a copy under the pointer) and a line marks where it would land. */
.table.infinite-table > thead > tr:first-child > th .column-drag-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  opacity: 0;
  cursor: grab;
  transition: opacity 120ms ease;
}
.table.infinite-table > thead > tr:first-child > th .column-drag-handle .material-icons {
  font-size: 14px !important;
}
.table.infinite-table > thead > tr:first-child > th:hover .column-drag-handle {
  opacity: 1;
}
.table.infinite-table > thead > tr:first-child > th .column-drag-handle:hover {
  color: var(--c-brand);
}
.table.infinite-table > thead > tr:first-child > th.is-dragging {
  opacity: 0.4;
}

.column-drag-ghost {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--c-brand);
  border-radius: 6px;
  background-color: var(--c-surface);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-shadow), transparent 86%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-brand);
  pointer-events: none;
  transform: rotate(-1.5deg);
}

.column-drop-line {
  position: fixed;
  z-index: 999;
  width: 2px;
  border-radius: 1px;
  background-color: var(--c-brand);
  pointer-events: none;
}
.column-drop-line.is-same {
  opacity: 0.3;
}

body.is-dragging-column {
  cursor: grabbing !important;
  user-select: none;
}
body.is-dragging-column * {
  cursor: grabbing !important;
}

/* A column filter that picks options (widgets/optionRuleBuilder): tabs for kinds, a search, a checklist. */
.option-rule {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-width: 260px;
  padding: 0 10px;
}

.option-rule-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
  background-color: var(--c-surface-subtle);
}

.option-rule-tab {
  flex: 1;
  height: 24px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.option-rule-tab.is-on {
  background-color: var(--c-surface);
  color: var(--c-text);
  font-weight: 500;
}
.option-rule-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}

.option-rule-search {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
}
.option-rule-search .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.option-rule-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
}

.option-rule-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 150ms ease;
}
.option-rule-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  border-radius: 2px;
  background-color: var(--c-brand);
  animation: assign-picker-bar 1s ease-in-out infinite;
}
.is-loading > .option-rule-bar {
  opacity: 1;
}

.option-rule-list {
  max-height: min(320px, 50vh);
  margin: 0 -4px 0 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-ink), transparent 76%) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.option-rule-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.option-rule-list::-webkit-scrollbar-track {
  background: transparent;
}
.option-rule-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 6px;
}
.option-rule-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.option-rule-list::-webkit-scrollbar-corner {
  background: transparent;
}

.option-rule-option.ng-enter {
  animation: assign-picker-enter 180ms ease-out both;
}

.option-rule-list.is-stale {
  opacity: 0.45;
  transition: opacity 150ms ease;
}

.option-rule-skeleton {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 6px;
}

.option-rule-skeleton-box,
.option-rule-skeleton-text {
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  animation: option-rule-pulse 1.2s ease-in-out infinite;
}

.option-rule-skeleton-box {
  flex: none;
  width: 16px;
  height: 16px;
}

.option-rule-skeleton-text {
  height: 10px;
}

@keyframes option-rule-pulse {
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .option-rule-bar::after,
.option-rule-option.ng-enter,
.option-rule-skeleton-box,
.option-rule-skeleton-text {
    animation: none;
  }
}
.option-rule-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.option-rule-option > .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.option-rule-option.is-on > .material-icons {
  color: var(--c-brand);
}
.option-rule-option.is-indented {
  padding-left: 30px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.option-rule-option:hover {
  background-color: var(--c-table-row-hover);
}

.option-rule-empty {
  padding: 6px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.option-rule-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* The routines' Runtime filter (widgets/scheduleRuleBuilder): the option list's look, days as toggles, two times. */
.schedule-rule-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.schedule-rule .option-rule-list {
  max-height: none;
}

.schedule-rule-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.schedule-rule-day {
  min-width: 36px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.schedule-rule-day.is-on {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-weight: 500;
}
.schedule-rule-day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}

.schedule-rule-times {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.schedule-rule-times input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
}

.condition-builder .no-top-and-bottom-margin {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.footer-strip {
  border-top: 1px solid;
  border-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background-color: var(--c-bar);
  height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 50;
  /* Offset by whatever the sidebar occupies. This was gated on .sidebar-visible, which goes false the
     moment the sidebar is collapsed — with a rail left behind, the strip would have run underneath it.
     --sidebar-width is 0 for a page that asked for no sidebar, so the ungated form covers that too.
     (The left offset was also a bare 280px rather than the shared value.) */
}
@media screen and (min-width: 1280px) {
  .footer-strip {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
  }
}
.footer-strip .footer-strip-left, .footer-strip .footer-strip-middle, .footer-strip .footer-strip-right {
  padding: 10px;
}
.footer-strip .footer-strip-left .footer-strip-item, .footer-strip .footer-strip-middle .footer-strip-item, .footer-strip .footer-strip-right .footer-strip-item {
  padding-right: 10px;
}

/* One MAC's attempts on a switch port on one day (modules/pnac/reports/dialogs/authEntry.tmpl.html): the MAC with its
   result, the facts of where it is plugged in, the attempts per hour as a strip, and the times grouped by hour. */
md-dialog.app-dialog.auth-entry-dialog {
  width: 560px;
}

.auth-entry__icon.is-reject {
  color: var(--c-danger-ink);
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
}
.auth-entry__icon.is-accept {
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
}
.auth-entry__mac {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 15px;
}
.auth-entry__pill {
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
  vertical-align: 2px;
}
.auth-entry__pill.is-reject {
  color: var(--c-danger-ink);
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
}
.auth-entry__pill.is-accept {
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
}
.auth-entry__facts {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 7px 14px;
  margin: 4px 0 0;
  font-size: 13px;
}
.auth-entry__facts dt {
  font-weight: 400;
  color: var(--c-field-text);
}
.auth-entry__facts dd {
  margin: 0;
  color: var(--c-text);
}
.auth-entry__quiet {
  color: var(--c-field-text);
}
.auth-entry__mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
}
.auth-entry__label {
  margin: 18px 0 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.auth-entry__label-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.auth-entry__strip {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
  border-bottom: 1px solid var(--c-border);
}
.auth-entry__bar {
  display: flex;
  align-items: flex-end;
  flex: 1;
  height: 100%;
}
.auth-entry__bar > span {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background-color: var(--c-border);
}
.auth-entry__bar.is-on > span {
  background-color: var(--c-success);
}
.auth-entry__bar.is-on.is-reject > span {
  background-color: var(--c-danger);
}
.auth-entry__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.auth-entry__hour {
  display: flex;
  gap: 14px;
  padding: 6px 0;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
}
.auth-entry__hour:first-of-type {
  border-top: 0;
}
.auth-entry__hour-name {
  flex: none;
  width: 42px;
  font-weight: 500;
  color: var(--c-text);
}
.auth-entry__minutes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: var(--c-field-text);
}

/* The RADIUS server page (modules/pnac/radius-server): .form-card cards (formCard.scss) for the status, the server's
   fields and its synced groups. What is its own: the status pills and facts, the group rows, and the list's cells. */
.radius-pill {
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
}
.radius-pill.is-ok {
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
}
.radius-pill.is-danger {
  color: var(--c-danger-ink);
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
}
.radius-pill.is-warning {
  color: var(--c-warning-ink);
  background-color: color-mix(in srgb, var(--c-warning) 18%, transparent);
}
.radius-pill.is-neutral {
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}

.radius-status__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 20px 16px;
}

.radius-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: var(--c-surface-subtle);
}
.radius-fact__label {
  font-size: 11px;
  color: var(--c-field-text);
}
.radius-fact__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.radius-fact__sub {
  font-size: 12px;
  color: var(--c-field-text);
  overflow-wrap: anywhere;
}
.radius-fact__sub.is-danger {
  color: var(--c-danger-ink);
}

.radius-groups__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: center;
}
.radius-groups__row {
  align-items: start;
  padding: 4px 0 8px;
}
.radius-groups__row + .radius-groups__row {
  border-top: 1px solid var(--c-border);
}
.radius-groups__actions {
  margin-top: 23px;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}

.radius-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--c-field-text);
  cursor: pointer;
}
.radius-icon-button .material-icons {
  font-size: 19px;
}
.radius-icon-button:hover {
  background-color: var(--c-row-hover);
  color: var(--c-text);
}
.radius-icon-button.is-danger:hover {
  color: var(--c-danger-ink);
}
.radius-icon-button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

.radius-groups md-input-container.radius-groups__select {
  margin: 24px 0 0;
}

/* The list's cells (radius-server.controller.js): the server with a dot for whether it is up, groups cut to the
   first two, the queue with its errors under it. */
.radius-cell-server {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.radius-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
}
.radius-dot.is-ok {
  background-color: var(--c-success);
}
.radius-dot.is-danger {
  background-color: var(--c-danger);
}
.radius-dot.is-neutral {
  background-color: color-mix(in srgb, var(--c-ink), transparent 74%);
}

.radius-cell-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.radius-cell-main a {
  font-weight: 500;
}

.radius-cell-label {
  font-size: 12px;
  color: var(--c-text);
}

.radius-cell-sub {
  display: block;
  font-size: 12px;
  color: var(--c-field-text);
}
.radius-cell-sub.is-danger {
  color: var(--c-danger-ink);
}

.radius-cell-muted {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Copying another server's groups (radius-server-detail.html): the "Copy from" menu beside Add group, the servers
   offered while the card is empty, and the note on what a copy did. */
.radius-copy-menu,
.radius-add-group {
  margin-left: auto;
  padding: 0;
}

.radius-copy-menu + .radius-add-group {
  margin-left: 0;
}

.radius-copy-source {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.radius-copy-source .material-icons {
  flex: none;
  font-size: 18px;
  color: var(--c-brand);
}
.radius-copy-source__name {
  flex: none;
  font-weight: 500;
}
.radius-copy-source__summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--c-field-text);
}
.radius-copy-source__go {
  flex: none;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-brand);
}
.radius-copy-source:hover {
  border-color: var(--c-brand);
  background-color: var(--c-row-hover);
}
.radius-copy-source:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

.radius-copied {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 6px 6px 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 12%, transparent);
}
.radius-copied > .material-icons {
  font-size: 18px;
}
.radius-copied__undo {
  margin-left: auto;
  padding: 2px 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-brand);
  cursor: pointer;
}
.radius-copied__undo:hover {
  background-color: var(--c-row-hover);
}
.radius-copied__close {
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--c-field-text);
  cursor: pointer;
}
.radius-copied__close .material-icons {
  font-size: 16px;
}
.radius-copied__close:hover {
  background-color: var(--c-row-hover);
}
span + .radius-copied__close {
  margin-left: auto;
}

.welcome-tour {
  max-width: 318px;
  padding: 10px;
  border-radius: 6px;
}
.welcome-tour .md-button {
  margin-bottom: 0;
}
.welcome-tour .md-button:first-child {
  margin-left: 0;
}
.welcome-tour .md-button:last-child {
  margin-right: 0;
}

.verifier-detail .general-info-container md-input-container.phone-number, .customer-container .general-info-container md-input-container.phone-number, .add-existing-verifier-dialog .general-info-container md-input-container.phone-number {
  max-width: 200px;
}

.customer-container {
  margin-top: 20px;
}
.customer-container .verifier-container {
  margin: 10px 8px 15px 8px;
  padding: 15px;
}
.customer-container .verifier-container .md-button {
  margin-top: 6px;
}
.customer-container .verifier-container md-checkbox {
  margin-top: 14px;
  margin-right: 10px;
}
.customer-container .verifier-container .roles-container .container-title {
  font-size: 16px;
  font-weight: bold;
}

.subscriptions-container .important {
  font-weight: bold;
}

.existing-verifier-dialog .verifier-checkbox {
  margin: 5px 0 5px 0;
}

/* My Organisation (selfAdministration/organisation): a form card in three groups (formCard.scss), a banner while a
   deletion is pending, and the deletion in a card of its own with a red edge. */
.organisation-page .org-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.organisation-page .org-heading__uuid {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: var(--c-field-text);
}
.organisation-page .org-heading__uuid copy-button .custom-input-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.organisation-page .org-heading__uuid copy-button .custom-input-icon-button:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.organisation-page .org-heading__uuid copy-button .custom-input-icon-button .material-icons {
  font-size: 14px;
}
.organisation-page .org-heading__uuid-text {
  overflow-wrap: anywhere;
}
.organisation-page .form-card__pill .material-icons {
  margin-right: 4px;
  font-size: 14px;
  vertical-align: -2px;
}
.organisation-page .org-provider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
.organisation-page .org-provider .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.organisation-page .org-deletion {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 880px;
  margin: 16px 0 14px;
  padding: 10px 12px 10px 16px;
  border: 1px solid color-mix(in srgb, var(--c-warning) 45%, transparent);
  border-radius: 8px;
  color: var(--c-warning-ink);
  background-color: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface));
}
.organisation-page .org-deletion > .material-icons {
  font-size: 20px;
}
.organisation-page .org-deletion__text {
  flex: 1;
  font-size: 13px;
}
.organisation-page .org-deletion__cancel {
  margin: 0;
}
.organisation-page .org-deletion + .form-card {
  margin-top: 0;
}
.organisation-page .org-danger {
  border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
}
.organisation-page .org-danger__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 16px 14px 20px;
}
.organisation-page .org-danger__text {
  flex: 1;
  min-width: 240px;
}
.organisation-page .org-danger__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
}
.organisation-page .org-danger__hint {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.organisation-page .org-danger__button.md-button {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--c-danger) 55%, transparent);
  border-radius: 6px;
  color: var(--c-danger-ink);
  background: none;
}
.organisation-page .org-danger__button.md-button:hover {
  background-color: color-mix(in srgb, var(--c-danger) 10%, transparent);
}

.managed-organisations-container .roles-list {
  list-style-type: none;
  padding-left: 10px;
}
.managed-organisations-container .roles-list li {
  display: inline-block;
  margin: 2px;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: none;
  background: var(--c-neutral) none;
  border: none;
  color: var(--c-on-fill);
  font-weight: bold;
  padding: 4px;
}
.managed-organisations-container .roles-list .role-info-icon {
  font-size: 15px;
  margin-left: 4px;
}

.system-jobs-settings-container {
  max-width: 400px;
}

.administration-verifiers .infinite-table .username-field {
  float: left;
  margin-right: 10px;
  color: var(--c-accent);
}

.system-jobs-settings-container {
  max-width: 300px;
}

.api-container .api-key-name-container {
  display: flex;
}
.api-container .api-key-name-container .expired-label, .api-container .api-key-name-container .upcoming-label {
  margin: 0 5px 0 0;
  padding-top: 4px;
}
.api-container .api-key-inherited {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  border-bottom: 1px dotted color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: help;
}
.api-container .api-key-bypass {
  color: var(--c-accent);
  border-bottom: 1px dotted var(--c-accent);
  cursor: help;
}
.api-container .api-key-never-expires {
  display: flex;
  color: var(--c-accent);
}
.api-container .api-key-upcoming {
  display: flex;
}
.api-container .api-key-upcoming i {
  margin-right: 5px;
}

.api-organisation-ip-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 10px;
  padding: 10px 12px;
  max-width: 1100px;
  border-radius: 6px;
  border-left: 3px solid var(--c-brand-muted);
  background: var(--c-surface);
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.api-organisation-ip-note i.material-icons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--c-brand-muted);
}
.api-organisation-ip-note strong {
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  overflow-wrap: anywhere;
}
.api-organisation-ip-note .api-organisation-ip-note-bypass {
  color: var(--c-accent);
  border-bottom: 1px dotted var(--c-accent);
  white-space: nowrap;
}

/* Deleting the organisation (selfAdministration/organisation/dialogs/deleteOrganisation.tmpl.html): two facts with
   their icons, then the name typed to confirm. */
.delete-organisation-dialog .org-delete__facts {
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
}
.delete-organisation-dialog .org-delete__facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--c-text);
}
.delete-organisation-dialog .org-delete__facts .material-icons {
  flex: none;
  font-size: 18px;
  color: var(--c-field-text);
}
.delete-organisation-dialog .org-delete__confirm {
  margin: 30px 0 4px;
}
.delete-organisation-dialog .org-delete__name {
  padding: 0 4px;
  border-radius: 4px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.delete-organisation-dialog .org-delete__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-field-text);
}

/* An account (selfAdministration/verifier/verifier-detail.html): form cards (formCard.scss); a round avatar, the mail
   subscriptions as a row to add and rows below. */
.account-page {
  /* The phone field's country picker (intl-tel-input): its wrapper as wide as the field and a block of its own, the
     flag centred on the input. */
}
.account-page .account-avatar {
  border-radius: 50%;
}
.account-page .account-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.account-page .account-heading__sub {
  font-size: 12px;
  color: var(--c-field-text);
  overflow-wrap: anywhere;
}
.account-page .account-permissions {
  padding-top: 14px;
}
.account-page .phone-number-input .iti {
  display: flow-root;
  width: 100%;
}
.account-page .phone-number-input .iti__flag-container {
  top: 0;
  bottom: auto;
  display: flex;
  align-items: center;
  height: 30px;
}
.account-page .account-mail__unsaved {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
}
.account-page .account-mail__unsaved .material-icons {
  font-size: 16px;
  color: var(--c-brand);
}
.account-page .account-mail__list {
  margin: 10px 0 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  list-style: none;
}
.account-page .account-mail__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  font-size: 13px;
}
.account-page .account-mail__row + .account-page .account-mail__row {
  border-top: 1px solid var(--c-border);
}
.account-page .account-mail__row b {
  font-weight: 500;
}
.account-page .account-mail__what {
  flex: 1;
  min-width: 0;
}
.account-page .account-mail__where {
  font-size: 12px;
  white-space: nowrap;
  color: var(--c-field-text);
}
.account-page .account-mail__remove {
  display: inline-flex;
  padding: 3px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.account-page .account-mail__remove .material-icons {
  font-size: 18px;
}
.account-page .account-mail__remove:hover {
  background-color: var(--c-row-hover);
  color: var(--c-danger);
}

/* A new mail subscription (selfAdministration/verifier/dialogs/addMailSubscription.tmpl.html): area, event, site. */
md-dialog.app-dialog.add-subscription-dialog {
  width: 480px;
}
md-dialog.app-dialog.add-subscription-dialog .add-subscription__field {
  margin: 26px 0 0;
}
md-dialog.app-dialog.add-subscription-dialog .add-subscription__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-field-text);
}
md-dialog.app-dialog.add-subscription-dialog .add-subscription__error {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--c-danger-ink);
}
md-dialog.app-dialog.add-subscription-dialog .add-subscription .md-errors-spacer {
  display: none;
}

/* An account given access to organisations (services/verifierManagement/dialogs/selectVerifierRoleAssignment.tmpl.html):
   the organisations as chips, the account, the access tiles, an optional end. Wide enough for Custom's modules. */
md-dialog.app-dialog.assign-account-dialog {
  width: 620px;
}
md-dialog.app-dialog.assign-account-dialog .assign-account__organisations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
md-dialog.app-dialog.assign-account-dialog .assign-account__organisations li {
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
md-dialog.app-dialog.assign-account-dialog .assign-account__organisations li.is-more {
  background: none;
}
md-dialog.app-dialog.assign-account-dialog .assign-account__field {
  margin: 26px 0 0;
}
md-dialog.app-dialog.assign-account-dialog .assign-account__field.is-after-access {
  margin-top: 38px;
}
md-dialog.app-dialog.assign-account-dialog .assign-account__field .md-errors-spacer {
  display: none;
}
md-dialog.app-dialog.assign-account-dialog .assign-account__label {
  margin: 18px 0 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
md-dialog.app-dialog.assign-account-dialog .assign-account__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-field-text);
}
md-dialog.app-dialog.assign-account-dialog .assign-account__error {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--c-danger-ink);
}
md-dialog.app-dialog.assign-account-dialog .assign-account .role-modules {
  columns: 2 220px;
}

.device-report-list .device-report-severity {
  position: relative;
}
.device-report-list .device-report-severity:not(:last-child):after {
  content: "";
  position: absolute;
  width: 25%;
  left: 0;
  bottom: -6px;
  border-bottom: 1px solid var(--c-neutral);
}

.device-report-severity-warning, .device-report-severity-medium {
  color: var(--c-accent);
}

.device-report-severity-error, .device-report-severity-high {
  color: var(--c-danger);
}

.update-center-comment-help-icon {
  vertical-align: bottom;
}

.device-list .device-list-content {
  overflow: hidden;
}
.device-list .device-list-content .zero-padding-margin {
  padding-top: 0;
  margin-top: -10px;
}

.auto-updates-container .auto-updates-container {
  padding-top: 20px;
}
.auto-updates-container .auto-updates-container .horizontal-separator {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--c-border);
  margin-top: 40px;
  padding: 0;
}

.account-container .tab-container {
  /* whiteframe cards: see $pageContentTop in values.scss */
  padding-top: calc(16px - 5px);
  margin: 0 -5px;
}
.account-container .tab-container .general-info-container .account-icon {
  font-size: 200px;
  color: var(--c-neutral);
}
.account-container .tab-container .general-info-container .user-info-container {
  margin-top: 10px;
}
.account-container .tab-container .general-info-container .user-info-container .username {
  font-size: 22px;
  font-weight: bold;
}
.account-container .tab-container .delete-account-container p, .account-container .tab-container .local-preferences-container p, .account-container .tab-container .two-factor-authentication-container p, .account-container .tab-container .oauth-container p {
  margin-top: 12px;
}
.account-container .tab-container.security-container .two-factor-authentication-container .tfa-enabled-text {
  border: 1px solid var(--c-success);
  color: var(--c-success);
  border-radius: 6px;
  padding: 0 4px 0 4px;
}
.account-container .tab-container.security-container .two-factor-authentication-container .tfa-disabled-text {
  border: 1px solid var(--c-danger);
  color: var(--c-danger);
  border-radius: 6px;
  padding: 0 4px 0 4px;
}
.account-container .tab-container.security-container .two-factor-authentication-container .info-container .title {
  font-size: 24px;
}
.account-container .tab-container.security-container .sessions-container .session-entry {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding: 10px;
}
.account-container .tab-container.security-container .sessions-container .session-entry .device-icon {
  margin-right: 10px;
}
.account-container .tab-container.security-container .sessions-container .session-entry .device-icon i {
  font-size: 36px;
}
.account-container .tab-container.security-container .sessions-container .session-entry .remove-session-icon {
  margin-top: 10px;
}
.account-container .tab-container.security-container .sessions-container .session-entry .session-title {
  font-weight: bold;
}
.account-container .tab-container.security-container .sessions-container .session-entry:last-child {
  border: none;
}
.account-container .tab-container .subscriptions-container .add-subscription-btn {
  border-style: dashed;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
}
.account-container .tab-container .subscriptions-container .add-subscription-btn:hover {
  color: var(--c-ink);
}
.account-container .tab-container .subscriptions-container .add-subscription-btn .material-icons {
  font-size: 65px;
}
.account-container .tab-container .subscriptions-container .subscription-card {
  margin: 0 10px 10px 0;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.account-container .tab-container .subscriptions-container md-input-container {
  margin-bottom: 0;
}
.account-container .important {
  font-weight: bold;
}
.account-container .settings-container .settings-wrapper {
  max-width: 500px;
}

.delete-account-dialog .important {
  font-weight: bold;
}

.mail-subscription-dialog .mail-subscription-class-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.mail-subscription-dialog .mail-subscription-class-list .class-title {
  font-size: 20px;
}
.mail-subscription-dialog .mail-subscription-class-list .class-commands-list {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;
}
.mail-subscription-dialog .mail-subscription-class-list .class-commands-list li {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding: 5px;
  margin-bottom: 2px;
  border-radius: 6px;
}
.mail-subscription-dialog .mail-subscription-class-list .class-commands-list li:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}

.two-factor-dialog {
  max-width: 600px;
  width: 600px;
  height: 500px;
}
.two-factor-dialog md-radio-group {
  margin-bottom: 10px;
}
.two-factor-dialog .phone-number-container {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding-bottom: 15px;
}
.two-factor-dialog .phone-number-container .phone-number-input .iti {
  width: 100%;
}
.two-factor-dialog .tan-container {
  padding-top: 15px;
}

.edit-profile-dialog {
  min-width: 400px;
}
.edit-profile-dialog .verifier-info-container {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding-bottom: 15px;
}
.edit-profile-dialog .verifier-info-container .phone-number-input .iti {
  width: 100%;
}
.edit-profile-dialog .tan-container {
  padding-top: 15px;
}

.about-page {
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.about-page .about-header {
  text-align: center;
  margin-bottom: 32px;
}
.about-page .about-header h1 {
  font-size: 32px;
  font-weight: 300;
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
  margin: 0 0 8px 0;
}
.about-page .about-header .about-subtitle {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.about-page .about-cards {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .about-page .about-cards {
    flex-direction: column;
  }
}
.about-page .about-card {
  flex: 1;
  min-width: 300px;
  background: var(--c-surface);
  border-radius: 8px;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 94%);
  padding: 24px;
  transition: box-shadow 0.2s ease-in-out;
}
.about-page .about-card:hover {
  box-shadow: 0 4px 6px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 2px 4px color-mix(in srgb, var(--c-shadow), transparent 94%);
}
.about-page .about-card .card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid color-mix(in srgb, var(--c-ink), transparent 40%);
}
.about-page .about-card .card-title .material-icons {
  font-size: 28px;
  color: var(--c-brand);
}
.about-page .about-card .card-title h2 {
  font-size: 20px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
  margin: 0;
}
.about-page .about-card .card-content .version-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.about-page .about-card .card-content .version-info-row:last-child {
  margin-bottom: 0;
}
.about-page .about-card .card-content .version-info-row .info-label {
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 100px;
}
.about-page .about-card .card-content .version-info-row .info-value {
  font-size: 15px;
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  flex: 1;
}
.about-page .about-card .card-content .version-info-row .info-value.large {
  font-size: 18px;
  font-weight: 500;
}
.about-page .about-card .card-content .version-info-row .info-badge {
  display: inline-block;
  padding: 4px 12px;
  background: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}
.about-page .about-card .card-content .git-hash-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 40%);
}
.about-page .about-card .card-content .git-hash-section .git-hash-label {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.about-page .about-card .card-content .git-hash-section .custom-input-container {
  margin: 8px 0;
}
.about-page .about-card .card-content .git-hash-section .custom-input-container .custom-input {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 14px;
}
.about-page .about-card .card-content .divider {
  height: 1px;
  background: color-mix(in srgb, var(--c-ink), transparent 40%);
  margin: 16px 0;
}
.about-page .about-footer {
  text-align: center;
  padding: 24px;
  background: var(--c-surface);
  border-radius: 8px;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 94%);
}
.about-page .about-footer .help-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--c-brand);
  color: var(--c-on-fill);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  transition: background-color 0.2s ease-in-out;
}
.about-page .about-footer .help-link .material-icons {
  font-size: 20px;
}
.about-page .about-footer .help-link:hover {
  background: var(--c-brand-deep);
}
.about-page .build-info {
  margin-top: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.about-page .build-info .info-item {
  display: inline-block;
  margin: 0 12px;
}
.about-page .build-info .info-item:first-child {
  margin-left: 0;
}

/* The 404 and the permission page (error-pages/): one card in the middle of the page, what happened, which
   address, the ways on. It was a 100px "404" over a 50px "Oops!". */
.error-page {
  display: flex;
  justify-content: center;
  padding: 72px 23px 48px;
}

.error-page__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.error-page__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.error-page__icon i.material-icons {
  font-size: 28px;
}

.error-page__code {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-brand);
}

/* a lock, not a wrong turn: in the warning colour */
.error-page__card.is-locked .error-page__icon {
  background-color: color-mix(in srgb, var(--c-warning), transparent 86%);
  color: var(--c-warning);
}
.error-page__card.is-locked .error-page__code {
  color: var(--c-warning);
}

.error-page__title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-text);
}

.error-page__text {
  max-width: 440px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* the address, as it was asked for */
.error-page__path {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.error-page__path > i.material-icons {
  flex: none;
  font-size: 16px;
}

.error-page__path-text {
  overflow: hidden;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* without a copy button after it, the chip's own inset */
}
.error-page__path-text:last-child {
  margin-right: 6px;
}

.error-page__copy {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.error-page__copy i.material-icons {
  font-size: 15px;
}
.error-page__copy:hover, .error-page__copy:focus-visible {
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  color: var(--c-text);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.error-page__actions .md-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.error-page__actions .md-button i.material-icons {
  font-size: 18px;
}

/* the sidebar's main areas, the ones the user may open */
.error-page__areas {
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}

.error-page__areas-title {
  margin-bottom: 12px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* four to a row, a short last row centred rather than left hanging */
.error-page__area-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.error-page__area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-raised);
  font-size: 13px;
  line-height: 1.3;
  color: var(--c-text);
  text-decoration: none;
  flex: 0 0 calc((100% - 24px) / 4);
  box-sizing: border-box;
  transition: border-color 0.15s, background-color 0.15s;
}
@media (max-width: 768px) {
  .error-page__area {
    flex-basis: calc((100% - 8px) / 2);
  }
}
.error-page__area i {
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.error-page__area:hover, .error-page__area:focus-visible {
  border-color: color-mix(in srgb, var(--c-brand), transparent 50%);
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
  color: var(--c-text);
  text-decoration: none;
}
.error-page__area:hover i, .error-page__area:focus-visible i {
  color: var(--c-brand);
}

.drag-drop-list {
  /**
   * The dndDraggingSource class will be applied to
   * the source element of a drag operation. It makes
   * sense to hide it to give the user the feeling
   * that he's actually moving it.
   */
  /**
   * An element with .dndPlaceholder class will be
   * added to the dnd-list while the user is dragging
   * over it.
   */
  /* Connect IF container with following ELSE block (no gap) */
  /**
   * Show selected elements in green
   */
  /* Empty state: container is positioned relatively so the ul overlays the placeholder */
  /* When the list is empty, make the dnd placeholder fill the full drop zone */
  /* Empty state placeholder shown when no actions are in the list */
}
.drag-drop-list ul[dnd-list] {
  min-height: 42px;
  padding-left: 0;
  border-radius: 6px;
  box-shadow: none;
}
.drag-drop-list ul[dnd-list] .dndDraggingSource {
  display: none;
}
.drag-drop-list ul[dnd-list] .dndPlaceholder {
  background-color: var(--c-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}
.drag-drop-list ul[dnd-list] .dndPlaceholder::after {
  content: "Drop here";
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}
.drag-drop-list ul[dnd-list] li {
  display: block;
  margin-bottom: 4px;
  border-radius: 6px;
  background: transparent;
}
.drag-drop-list ul[dnd-list] li:last-child {
  margin-bottom: 0;
}
.drag-drop-list ul[dnd-list] li[type=container]:has(+ li[type=else]) {
  margin-bottom: 0;
}
.drag-drop-list ul[dnd-list] li[type=container]:has(+ li[type=else]) > .block {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.drag-drop-list ul[dnd-list] li[type=container] + li[type=else] > .block {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px dashed color-mix(in srgb, var(--c-ink), transparent 88%);
}
.drag-drop-list ul[dnd-list] li.selected {
  background-color: var(--c-neutral);
  color: var(--c-success);
}
.drag-drop-list .block {
  font-weight: bold;
  padding: 10px;
  border-radius: 6px;
}
.drag-drop-list .block .clickable-text,
.drag-drop-list .block .actionText {
  color: var(--c-ink);
}
.drag-drop-list .block .action-move-btn {
  font-size: 16px;
  opacity: 0.5;
  cursor: pointer;
  margin-right: 4px;
  align-self: center;
}
.drag-drop-list .block .action-move-btn:hover {
  opacity: 1;
}
.drag-drop-list .block--active {
  box-shadow: 0 0 0 2px var(--c-accent);
}
.drag-drop-list .block.action-row--clickable,
.drag-drop-list .block .action-row--clickable {
  cursor: pointer;
}
.drag-drop-list .block > .action-row {
  margin: -10px -10px 0;
  padding: 10px 10px 0;
}
.drag-drop-list .block > .container-footer {
  display: block;
  margin: 0 -10px -10px;
  padding: 0 10px 10px;
}
.drag-drop-list .block > div[layout=row] > i.material-icons {
  font-size: 16px;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.15s;
  align-self: center;
}
.drag-drop-list .block > div[layout=row] > i.material-icons:hover {
  opacity: 1;
}
.drag-drop-list .block .sub-block {
  padding: 10px 20px;
}
.drag-drop-list--empty {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.drag-drop-list--empty ul[dnd-list] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.drag-drop-list--empty ul[dnd-list] .dndPlaceholder {
  min-height: 120px;
  flex: 1;
  border-radius: 6px;
}
.drag-drop-list .drag-drop-empty-state {
  border: 2px dashed var(--c-neutral);
  border-radius: 6px;
  min-height: 120px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: var(--c-surface-sunken);
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
  pointer-events: none;
}
.drag-drop-list .drag-drop-empty-state__icon {
  font-size: 36px;
  margin-bottom: 8px;
  color: var(--c-neutral);
}
.drag-drop-list .drag-drop-empty-state__text {
  font-size: 14px;
  font-weight: 400;
}

/* The permissions of an account (widgets/roleSelector): the kind of access as choice tiles (networkComponents.scss),
   Custom's modules as equal cards with their roles, and remote access as a section that opens below. Also in dialogs
   (invite, role assignment), so the module cards fill whatever width there is. */
.role-selector {
  /* A checkbox of a module card, in its head or a role's row, on a 20px line with its box centred on it: Material
     gives one 48px, its box a top margin and its label a 10px top margin, which set the head's title high and the rows' names below their
     info icons. */
  /* inline-block as well as break-inside: block cards that may not be split left Chrome an empty column to their
     right, and a horizontal scrollbar under the columns */
}
.role-selector .role-types.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 599px) {
  .role-selector .role-types {
    grid-template-columns: minmax(0, 1fr);
  }
}
.role-selector .role-types .choice-tile[disabled] {
  cursor: default;
}
.role-selector .role-types .choice-tile[disabled]:not(.is-on) {
  opacity: 0.7;
}
.role-selector .role-types .choice-tile[disabled]:hover {
  border-color: var(--c-border);
}
.role-selector .role-types .choice-tile.is-on[disabled]:hover {
  border-color: var(--c-brand);
}
.role-selector .role-modules {
  columns: 3 240px;
  column-gap: 10px;
  margin-top: 14px;
}
.role-selector .role-module__check,
.role-selector .role-row__check {
  min-height: 20px;
  line-height: 20px;
}
.role-selector .role-module__check .md-container,
.role-selector .role-row__check .md-container {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}
.role-selector .role-module__check .md-label,
.role-selector .role-row__check .md-label {
  margin-top: 0;
  vertical-align: top;
}
.role-selector .role-module__check.md-indeterminate .md-icon::after {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border: 0;
  background-color: var(--c-on-fill);
  transform: translate(-50%, -50%);
}
.role-selector .role-module {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  break-inside: avoid;
  margin-bottom: 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.role-selector .role-module__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-border);
}
.role-selector .role-module__check {
  flex: 1;
  margin: 0;
  font-weight: 500;
}
.role-selector .role-module__count {
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.role-selector .role-module__count.is-all {
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 12%, transparent);
}
.role-selector .role-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
}
.role-selector .role-row:first-of-type {
  padding-top: 6px;
}
.role-selector .role-row:last-child {
  padding-bottom: 6px;
}
.role-selector .role-row__check {
  flex: 1;
  margin: 0;
  min-height: 20px;
}
.role-selector .role-row__name {
  font-size: 13px;
  line-height: 20px;
}
.role-selector .role-row__included {
  font-size: 12px;
  color: var(--c-brand);
}
.role-selector .role-row__info {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.role-selector .role-row__info .material-icons {
  font-size: 16px;
}
.role-selector .role-row__info:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.role-selector .role-remote {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.role-selector .role-remote__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.role-selector .role-remote__title .material-icons {
  font-size: 15px;
  color: var(--c-brand);
}

.remote-access-config__label {
  margin: 14px 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.remote-access-config__tools {
  display: grid;
  gap: 8px;
}
.remote-access-config__tool {
  margin: 0;
}
.remote-access-config__tool .md-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.remote-access-config__name {
  font-size: 13.5px;
  line-height: 20px;
}
.remote-access-config__hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--c-field-text);
}

/* What a role allows (widgets/roleSelector/dialogs/roleRights.tmpl.html): its description, the role it includes,
   and its rights by group, the actions as small pills. */
md-dialog.app-dialog.role-rights-dialog {
  width: 520px;
}

.role-rights__description {
  margin: 0;
  font-size: 14px;
  color: var(--c-text);
}
.role-rights__includes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--c-field-text);
}
.role-rights__includes .material-icons {
  font-size: 16px;
  color: var(--c-brand);
}
.role-rights__includes b {
  font-weight: 500;
  color: var(--c-text);
}
.role-rights__label {
  margin: 18px 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.role-rights__state {
  margin: 0;
  font-size: 13px;
  color: var(--c-field-text);
}
.role-rights__list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  list-style: none;
}
.role-rights__list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 7px 12px;
}
.role-rights__list li + li {
  border-top: 1px solid var(--c-border);
}
.role-rights__group {
  flex: 1;
  min-width: 160px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: var(--c-text);
}
.role-rights__commands {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.role-rights__command {
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 20px;
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}

/* An account's managed organisations (widgets/roleSelector/roleSelectorToggleBox): one bordered list, a row each with
   the organisation, the kind of access there and a quiet remove; a row opens to the permissions. */
.managed-orgs {
  margin-top: 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

.managed-org + .managed-org {
  border-top: 1px solid var(--c-border);
}
.managed-org__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
}
.managed-org__toggle {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.managed-org__toggle:hover {
  background-color: var(--c-row-hover);
}
.managed-org__toggle:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}
.managed-org__caret.material-icons {
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.managed-org__name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.managed-org__role, .managed-org__new {
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 20px;
  white-space: nowrap;
}
.managed-org__role {
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.managed-org__new {
  color: var(--c-warning-ink);
  background-color: color-mix(in srgb, var(--c-warning) 18%, transparent);
}
.managed-org__remove {
  display: inline-flex;
  flex: none;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.managed-org__remove .material-icons {
  font-size: 19px;
}
.managed-org__remove:hover {
  background-color: color-mix(in srgb, var(--c-danger) 10%, transparent);
  color: var(--c-danger);
}
.managed-org__body {
  padding: 4px 14px 14px 36px;
}

/* A row's state at its start (a device's health, an update's severity): a short rail in the dashboard's colours. It
   was the whole cell filled in solid colour, 46px of it on every row, which turned a long list into a wall of red and green. The
   cell is narrow now and takes the row's own background; the stripe and hover show through around the rail. */
td.update-state {
  position: relative;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  padding: 0 !important;
}
td.update-state::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 20px;
  margin: -10px 0 0 -2px;
  border-radius: 2px;
  background-color: var(--c-neutral);
  transition: width 0.12s ease, margin 0.12s ease;
}
td.update-state.is-clickable {
  cursor: pointer;
}
td.update-state.is-clickable:hover::before {
  width: 6px;
  margin-left: -3px;
}
td.update-state.is-optional::before {
  background-color: var(--c-brand-muted);
}
td.update-state.is-ok::before {
  background-color: var(--c-success);
}
td.update-state.is-warning::before {
  background-color: var(--c-accent);
}
td.update-state.is-error::before {
  background-color: var(--c-danger);
}

th.state-column {
  width: 16px;
  min-width: 16px;
  padding: 0 !important;
}

/* A network device (network-device-detail.html): the device's form card, then a card of its ports. */
.network-device-page .nd-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.network-device-page .nd-heading__sub {
  font-size: 12px;
  color: var(--c-field-text);
}
.network-device-page .nd-rack input[readonly] {
  cursor: pointer;
}
.network-device-page .nd-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-brand);
  cursor: pointer;
}
.network-device-page .nd-link:hover {
  text-decoration: underline;
}

.nd-ports__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.nd-ports__actions .form-card__action {
  margin-left: 0;
}
.nd-ports__actions md-menu {
  padding: 0;
}
.nd-ports__scroll {
  overflow-x: auto;
  padding: 4px 12px 10px;
}
.nd-ports__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--c-text);
}
.nd-ports__table th {
  padding: 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-field-text);
}
.nd-ports__table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--c-border);
  line-height: 20px;
  vertical-align: top;
}
.nd-ports__table tbody tr:last-child td {
  border-bottom: 0;
}
.nd-ports__table tbody tr:hover td {
  background-color: var(--c-row-hover);
}
.nd-ports__table .is-fit {
  width: 1%;
  white-space: nowrap;
}
.nd-ports__table .is-port {
  width: 1%;
  min-width: 110px;
  max-width: 200px;
}
.nd-ports__table tr.is-selected td {
  background-color: color-mix(in srgb, var(--c-brand) 7%, transparent);
}
.nd-ports__table .is-check {
  width: 44px;
  padding-right: 0;
}
.nd-ports__table .is-check md-checkbox {
  display: block;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
}
.nd-ports__table .is-check md-checkbox .md-container {
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}
.nd-ports__table .is-menu {
  width: 44px;
  padding: 9px 6px;
  text-align: right;
}
.nd-ports__table .is-menu md-menu {
  padding: 0;
}

.nd-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.nd-sort .material-icons {
  font-size: 14px;
  color: var(--c-brand);
}
.nd-sort:hover {
  color: var(--c-text);
}

.nd-port {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  white-space: nowrap;
}

.nd-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.nd-dot.is-ok {
  background-color: var(--c-success);
}
.nd-dot.is-danger {
  background-color: var(--c-danger);
}
.nd-dot.is-free {
  border: 1.5px solid color-mix(in srgb, var(--c-ink), transparent 62%);
  background-color: transparent;
}

.nd-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--c-field-text);
}

.nd-path {
  color: var(--c-field-text);
}

.nd-line {
  display: block;
  white-space: nowrap;
}

.nd-nowrap {
  white-space: nowrap;
}

.nd-errors {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  color: var(--c-danger-ink);
}

.nd-mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
}

.nd-none {
  padding: 18px 10px !important;
  text-align: center;
  color: var(--c-field-text);
}

.nd-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nd-links li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
.nd-links li + li {
  margin-top: 6px;
}
.nd-links li > .material-icons {
  flex: none;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.nd-unlink,
.nd-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.nd-unlink:hover,
.nd-menu-button:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.nd-unlink:focus-visible,
.nd-menu-button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

.nd-unlink {
  width: 22px;
  height: 22px;
  opacity: 0;
}
.nd-unlink .material-icons {
  font-size: 15px;
}
li:hover .nd-unlink, .nd-unlink:focus-visible {
  opacity: 1;
}
.nd-unlink:hover {
  color: var(--c-danger);
}

.nd-menu-button {
  width: 30px;
  height: 30px;
}
.nd-menu-button .material-icons {
  font-size: 20px;
}

/* Active network components (modules/pnac/network-device): per group a header with its icon, name and summary and
   its actions, then the group's devices in an infinite table. */
.network-device-groups .table-empty-container {
  padding-top: 16px;
}
.network-device-groups .ndg-head + [infinite-table] .infinite-table-wrapper {
  padding-top: 12px;
}

.ndg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 16px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.ndg-head__text {
  min-width: 0;
}
.ndg-head__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--c-field-text);
}
.ndg-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.ndg-head__actions md-menu {
  padding: 0;
}

.ndg-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-size: 13px;
  color: var(--c-text);
  white-space: nowrap;
  cursor: pointer;
}
.ndg-button .material-icons {
  font-size: 18px;
}
.ndg-button:hover {
  background-color: var(--c-row-hover);
}
.ndg-button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.ndg-button.is-primary {
  padding-left: 10px;
  border-color: transparent;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
.ndg-button.is-primary:hover {
  background-color: var(--c-brand-active);
}
.ndg-button.is-icon {
  width: 32px;
  padding: 0;
  justify-content: center;
}

/* A cell with nothing in it says so, quietly. */
.infinite-table .cell-empty {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* The group's rule editor (network-device-group-rule.html): a card with the status and the four steps in its head,
   the editor filling the rest of the screen, and what Check found under it. */
.rule-page .rule-card {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 420px;
  margin-bottom: 0;
  overflow: hidden;
}

.rule-card__heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rule-card__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-field-text);
}
.rule-card__site copy-button button.custom-input-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.rule-card__site copy-button button.custom-input-icon-button:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.rule-card__site copy-button .material-icons {
  font-size: 15px;
  color: inherit;
}
.rule-card__uuid {
  font-family: Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.rule-card__tools {
  display: flex;
  align-items: center;
  padding-left: 8px;
  border-left: 1px solid var(--c-border);
}
.rule-card__editor {
  flex: 1 1 auto;
  min-height: 200px;
  position: relative;
}

.rule-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.rule-steps li {
  display: flex;
  align-items: center;
  gap: 2px;
}
.rule-steps__sep {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
}

.rule-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
}
.rule-step__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 8%, transparent);
}
.rule-step__mark .material-icons {
  font-size: 13px;
}
.rule-step:hover {
  background-color: var(--c-row-hover);
}
.rule-step:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.rule-step.is-done .rule-step__mark {
  color: var(--c-on-fill);
  background-color: var(--c-success);
}
.rule-step.is-failed .rule-step__mark {
  color: var(--c-on-fill);
  background-color: var(--c-danger);
}
.rule-step.is-next {
  border-color: transparent;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  font-weight: 500;
}
.rule-step.is-next .rule-step__mark {
  color: var(--c-brand);
  background-color: var(--c-on-fill);
}
.rule-step.is-next:hover {
  background-color: var(--c-brand-active);
}

.rule-problems {
  flex: none;
  max-height: 30%;
  overflow-y: auto;
  padding: 10px 20px 12px;
  border-top: 1px solid var(--c-border);
  background-color: color-mix(in srgb, var(--c-danger) 5%, var(--c-surface));
}
.rule-problems__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-danger-ink);
}
.rule-problems__title .material-icons {
  font-size: 18px;
}
.rule-problems ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rule-problems li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
}
.rule-problems__line {
  flex: none;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--c-danger) 12%, transparent);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--c-danger-ink);
  cursor: pointer;
}
.rule-problems__line:hover {
  text-decoration: underline;
}
.rule-problems__text {
  white-space: pre-wrap;
  color: var(--c-text);
}

.rule-checked {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-success-deep);
}
.rule-checked .material-icons {
  font-size: 18px;
}

.ace_editor .rule-error-line {
  position: absolute;
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
}

/* Generate a rule (dialogs/ruleWizard.tmpl.html): the VLAN choice as two option cards, the fixed VLAN in a dropdown
   under them, and a note on what generating replaces. */
.rule-wizard__label {
  margin: 4px 0 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.rule-wizard__choices md-radio-button {
  display: flex;
  margin: 0 0 8px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  cursor: pointer;
}
.rule-wizard__choices md-radio-button .md-container {
  top: 12px;
  left: 14px;
  transform: none;
}
.rule-wizard__choices md-radio-button .md-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 36px;
}
.rule-wizard__choices md-radio-button.md-checked {
  border-color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 5%, var(--c-surface));
}
.rule-wizard__choices md-radio-button .md-off {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.rule-wizard__choices md-radio-button.md-checked .md-off {
  border-color: var(--c-brand);
}
.rule-wizard__choices md-radio-button .md-on {
  background-color: var(--c-brand);
}
.rule-wizard__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
}
.rule-wizard__text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-field-text);
}
.rule-wizard__vlan {
  margin: -2px 0 10px 47px;
}
.rule-wizard__vlan md-input-container {
  width: 100%;
  margin: 18px 0 0;
}
.rule-wizard__error {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--c-danger-ink);
}
.rule-wizard__check {
  margin: 4px 0 10px;
}
.rule-wizard__note {
  display: flex;
  gap: 8px;
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-field-text);
}
.rule-wizard__note .material-icons {
  flex: none;
  font-size: 16px;
}

/* A network device group, new or existing (dialogs/editGroup.tmpl.html): name, the type as three tiles, the IP
   range with its prefix. */
.group-dialog__field {
  margin: 18px 0 4px;
}
.group-dialog__label {
  margin: 12px 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.group-dialog__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--c-field-text);
}
.group-dialog__ip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 90px;
  gap: 8px;
  align-items: start;
  margin-top: 38px;
}
.group-dialog__ip md-input-container {
  margin: 0;
}
.group-dialog__ip .md-errors-spacer {
  display: none;
}
.group-dialog__slash {
  margin-top: 2px;
  font-size: 16px;
  line-height: 30px;
  color: var(--c-field-text);
}

/* Validate RADIUS data (dialogs/validationRadiusData.tmpl.html): the three counts, then a card per device with
   what differs, its login and, on request, every attribute side by side. */
.radius-validate__counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.radius-validate__count {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--c-field-text);
  background-color: var(--c-surface-subtle);
}
.radius-validate__count.is-warning {
  color: var(--c-warning-ink);
  background-color: color-mix(in srgb, var(--c-warning) 16%, transparent);
}
.radius-validate__number {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-text);
}
.is-warning > .radius-validate__number {
  color: var(--c-warning-ink);
}
.radius-validate__ok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 14px;
  color: var(--c-success-deep);
}
.radius-validate__ok .material-icons {
  font-size: 20px;
}
.radius-validate__row {
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.radius-validate__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.radius-validate__device {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-right: 4px;
}
.radius-validate__name {
  font-size: 14px;
  font-weight: 500;
}
.radius-validate__mac {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--c-text);
}
.radius-validate__name + .radius-validate__mac {
  font-size: 12px;
  color: var(--c-field-text);
}
.radius-validate__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-size: 12px;
  color: var(--c-brand);
  cursor: pointer;
}
.radius-validate__link .material-icons {
  font-size: 14px;
}
.radius-validate__link:hover {
  background-color: var(--c-row-hover);
}
.radius-validate__facts {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  font-size: 13px;
}
.radius-validate__facts > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}
.radius-validate__facts dt {
  font-weight: 400;
  color: var(--c-field-text);
}
.radius-validate__facts dd {
  margin: 0;
  color: var(--c-text);
}
.radius-validate__login {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.radius-validate__note {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-danger-ink);
  background-color: color-mix(in srgb, var(--c-danger) 10%, transparent);
}
.radius-validate__note .material-icons {
  flex: none;
  font-size: 16px;
}
.radius-validate__toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding: 2px 4px 2px 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--c-brand);
  cursor: pointer;
}
.radius-validate__toggle .material-icons {
  font-size: 16px;
}
.radius-validate__attributes {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 12px;
}
.radius-validate__attributes th {
  padding: 4px 8px 4px 0;
  font-size: 10.5px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-field-text);
  border-bottom: 1px solid var(--c-border);
}
.radius-validate__attributes td {
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--c-border);
}
.radius-validate__attributes tr.is-different td {
  color: var(--c-warning-ink);
}
.radius-validate__remove {
  margin: 0 0 0 4px;
}

/* A choice of two to four, each a tile with an icon, a name and (optional) a line on what it means: the type of a
   network device group, what a port is connected to. Buttons with role="radio" in a role="radiogroup". */
.choice-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.choice-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
}
.choice-tile .material-icons {
  font-size: 22px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.choice-tile:hover {
  border-color: var(--c-brand);
}
.choice-tile:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.choice-tile.is-on {
  border-color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 6%, var(--c-surface));
  font-weight: 500;
}
.choice-tile.is-on .material-icons {
  color: var(--c-brand);
}
.choice-tile__hint {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: var(--c-field-text);
}

/* The port dialog (dialogs/addEditPort.tmpl.html): the fields in two columns, then the trunk option and the alerts
   as options with a line each on what they mean. */
md-dialog.app-dialog.port-dialog {
  width: 560px;
}

.port-dialog__fields,
.connect-dialog__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  align-items: start;
}
.port-dialog__fields.is-single,
.connect-dialog__fields.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.port-dialog__fields md-input-container,
.connect-dialog__fields md-input-container {
  margin: 28px 0 0;
}
.port-dialog__fields .md-errors-spacer,
.connect-dialog__fields .md-errors-spacer {
  min-height: 0;
}
@media (max-width: 599px) {
  .port-dialog__fields,
.connect-dialog__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.port-dialog__wide,
.connect-dialog__wide {
  grid-column: 1/-1;
}
.port-dialog__hint,
.connect-dialog__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-field-text);
}
.port-dialog__label,
.connect-dialog__label {
  margin: 18px 0 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}

.port-dialog__alerts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
@media (max-width: 599px) {
  .port-dialog__alerts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.port-dialog__option {
  display: flex;
  margin: 0;
}
.port-dialog__option:not(.port-dialog__alerts *) {
  margin: 22px 0 4px;
}
.port-dialog__option .md-container {
  top: 10px;
}
.port-dialog__option .md-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.port-dialog__option-title {
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text);
}
.port-dialog__option-hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--c-field-text);
}

md-dialog.app-dialog.connect-dialog {
  width: 560px;
}
md-dialog.app-dialog.connect-dialog .connect-dialog__fields {
  margin: 6px 0 10px;
}
md-dialog.app-dialog.connect-dialog .choice-tile {
  padding: 12px 8px 10px;
}

.connect-dialog__label {
  margin-top: 4px;
}
.connect-dialog__waiting {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--c-field-text);
}

/* RADIUS data of a group (dialogs/radiusData.tmpl.html): VLAN chips and a search, then one row per device with its
   login and VLAN, the attributes in a row that opens under it. */
md-dialog.app-dialog.is-wide.radius-data {
  min-width: min(760px, 100vw - 32px);
}

.radius-data__state {
  margin: 12px 0;
  color: var(--c-field-text);
}
.radius-data__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 8px;
}
.radius-data__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.radius-data__chip {
  padding: 3px 11px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: none;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  color: var(--c-field-text);
  cursor: pointer;
}
.radius-data__chip:hover {
  border-color: var(--c-brand);
  color: var(--c-text);
}
.radius-data__chip:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.radius-data__chip.is-on {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 10%, transparent);
  font-weight: 500;
  color: var(--c-brand);
}
.radius-data__search {
  margin-left: auto;
}
.radius-data__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--c-text);
}
.radius-data__table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.radius-data__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  line-height: 20px;
  vertical-align: top;
}
.radius-data__table tbody tr:not(.radius-data__details):hover td {
  background-color: var(--c-row-hover);
}
.radius-data__table tr.is-open td {
  border-bottom-color: transparent;
}
.radius-data__table .is-fit {
  width: 1%;
  white-space: nowrap;
}
.radius-data__table .is-toggle {
  width: 40px;
  padding: 5px 6px;
  text-align: right;
}
.radius-data__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 500;
}
.radius-data__mac {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  font-weight: 400;
}
.radius-data__mac.is-sub {
  margin-top: 2px;
  color: var(--c-field-text);
}
.radius-data__quiet {
  color: var(--c-field-text);
}
.radius-data__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.radius-data__toggle:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.radius-data__toggle:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.radius-data__details td {
  padding-top: 0;
  background-color: color-mix(in srgb, var(--c-ink) 3%, transparent);
}
.radius-data__attributes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 10px 0 2px;
}
.radius-data__attributes dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.radius-data__attributes dd {
  margin: 0;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
}
.radius-data__none {
  padding: 18px 12px !important;
  text-align: center;
  color: var(--c-field-text);
}
.radius-data__export.md-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.radius-data__export.md-button .material-icons {
  font-size: 18px;
  line-height: 1;
}
.radius-data__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-field-text);
}

/* The network report (modules/pnac/network-report/reports.html): a card with one toolbar over the vis.js map, the map
   down to the bottom of the window (its height set by the controller), zoom controls and the details panel on it. */
.network-report {
  padding-top: 16px;
}

.nr-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  overflow: hidden;
}

.nr-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--c-border);
}

.nr-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: 8px;
}
.nr-heading__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-text);
}
.nr-heading__sub {
  font-size: 12px;
  color: var(--c-field-text);
}

.nr-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-size: 13px;
  white-space: nowrap;
  color: var(--c-text);
  cursor: pointer;
}
.nr-button .material-icons {
  font-size: 18px;
  color: var(--c-field-text);
}
.nr-button:hover {
  border-color: var(--c-brand);
}
.nr-button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.nr-button.is-primary {
  border-color: var(--c-brand);
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
.nr-button.is-primary .material-icons {
  color: inherit;
}
.nr-button.is-primary:hover {
  background-color: var(--c-brand-light);
}

.nr-link {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--c-brand);
  cursor: pointer;
}
.nr-link:hover {
  text-decoration: underline;
}

.nr-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.nr-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  margin: 0;
  padding: 6px 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface-raised);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c-shadow), transparent 86%);
  list-style: none;
}

.nr-find {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 220px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.nr-find > .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.nr-find__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--c-text);
  outline: none;
}
.nr-find__results {
  width: 280px;
}
.nr-find__results li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.nr-find__results li:hover, .nr-find__results li.is-active {
  background-color: var(--c-row-hover);
}
.nr-find__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}
.nr-find__type {
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
  color: var(--c-field-text);
}
.nr-find__results li.nr-find__none {
  color: var(--c-field-text);
  cursor: default;
}
.nr-find__results li.nr-find__none:hover {
  background: none;
}

.nr-types {
  position: relative;
}
.nr-types__menu {
  width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 0 6px;
}
.nr-types__all {
  display: flex;
  gap: 14px;
  padding: 6px 14px 8px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 4px;
}
.nr-types__item.md-checkbox, .nr-types__item {
  display: flex;
  margin: 0;
  padding: 6px 14px;
}
.nr-types__item.md-checkbox:hover, .nr-types__item:hover {
  background-color: var(--c-row-hover);
}
.nr-types__item.md-checkbox .md-container, .nr-types__item .md-container {
  left: 14px;
}
.nr-types__item.md-checkbox .md-label, .nr-types__item .md-label {
  display: flex;
  flex: 1;
  gap: 8px;
  font-size: 13px;
}
.nr-types__count {
  margin-left: auto;
  color: var(--c-field-text);
}

.nr-map {
  position: relative;
  min-height: 360px;
  background-color: var(--c-surface);
}
.nr-map__canvas {
  position: absolute;
  inset: 0;
}
.nr-map__state {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--c-field-text);
  pointer-events: none;
}

.nr-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface-raised);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 88%);
  overflow: hidden;
}
.nr-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-field-text);
  cursor: pointer;
}
.nr-zoom button + button {
  border-top: 1px solid var(--c-border);
}
.nr-zoom button .material-icons {
  font-size: 19px;
}
.nr-zoom button:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.nr-zoom button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}

.nr-details {
  position: absolute;
  top: 14px;
  right: 62px;
  width: 300px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  padding: 12px 14px 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background-color: var(--c-surface-raised);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
.nr-details__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.nr-details__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
  color: var(--c-text);
}
.nr-details__sub {
  font-size: 12px;
  color: var(--c-field-text);
}
.nr-details__close {
  display: inline-flex;
  margin-left: auto;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.nr-details__close:hover {
  background-color: var(--c-row-hover);
  color: var(--c-text);
}
.nr-details__line {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--c-text);
}
.nr-details__line.is-quiet {
  color: var(--c-field-text);
}
.nr-details__label {
  margin: 12px 0 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.nr-details__links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.nr-details__links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  padding: 4px 0;
}
.nr-details__links li + li {
  border-top: 1px solid var(--c-border);
}
.nr-details__port {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
}
.nr-details__arrow, .nr-details__note {
  color: var(--c-field-text);
}
.nr-details__note {
  flex-basis: 100%;
  font-size: 12px;
}
.nr-details__open {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--c-brand);
}
.nr-details__open .material-icons {
  font-size: 18px;
}

#cookie-consent {
  background: var(--c-ink);
  z-index: 9999;
  line-height: 190%;
  font-size: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  bottom: 0;
}
#cookie-consent p {
  color: var(--c-on-fill);
  display: block;
  font-size: 1.4em;
}
#cookie-consent #cookie-consent-close-button {
  font-size: 16px;
  width: 76px;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  border-color: transparent;
  margin-right: 20px;
  padding: 10px;
}
@media only screen and (min-width: 480px) {
  #cookie-consent {
    flex-direction: row;
  }
  #cookie-consent p {
    width: 68%;
    margin: 0 1%;
    flex: 1 1 auto;
    padding: 10px;
  }
}

/* The building plan (widgets/buildingPlan): one row per level — its name and add button, then its entries as
   chips, the picked one in accent. A path over the rows says where the picks lead, and a line under them what to
   pick next. It was a table of grey blocks with a 170px label column that wrapped "Sub Buildings" onto two lines. */
.building-plan {
  font-size: 13px;
  color: var(--c-text);
}

.building-plan__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.building-plan__path > i.material-icons {
  margin-right: 4px;
  font-size: 16px;
}

.building-plan__step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-brand);
}
.building-plan__step.is-last {
  font-weight: 600;
  color: var(--c-text);
}
.building-plan__step i.material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.building-plan__level {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--c-border);
  /* the first row, whether or not the path stands over it */
}
.building-plan > .building-plan__level:first-child, .building-plan__path + .building-plan__level {
  border-top: 0;
}
@media (max-width: 768px) {
  .building-plan__level {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

.building-plan__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.building-plan__head-title {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  white-space: nowrap;
}

.building-plan__add,
.building-plan__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.building-plan__add i.material-icons,
.building-plan__more i.material-icons {
  font-size: 18px;
}
.building-plan__add:hover, .building-plan__add:focus-visible,
.building-plan__more:hover,
.building-plan__more:focus-visible {
  color: var(--c-brand);
}
.building-plan__add:focus-visible,
.building-plan__more:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

.building-plan__add {
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.building-plan__add:hover {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}

.building-plan__nodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}

.building-plan__node {
  display: inline-flex;
  align-items: stretch;
  min-height: 30px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  transition: border-color 120ms ease, background-color 120ms ease;
  /* the socket a dialog is about to create and connect */
  /* md-menu wraps the options button */
}
.building-plan__node:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 76%);
}
.building-plan__node.is-selected {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
}
.building-plan__node.is-selected .building-plan__node-title {
  color: var(--c-brand);
  font-weight: 600;
}
.building-plan__node.is-placeholder {
  border-style: dashed;
  border-color: var(--c-brand);
}
.building-plan__node.is-placeholder .building-plan__node-title {
  color: var(--c-brand);
}
.building-plan__node md-menu {
  display: inline-flex;
}

.building-plan__node-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  padding: 4px 4px 4px 10px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.building-plan__node:not(.is-selectable) .building-plan__node-title {
  cursor: default;
}
.building-plan__node-title:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
  border-radius: 6px;
}

.building-plan__more {
  width: 24px;
  margin-right: 2px;
}

.building-plan__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  /* a port's: the icon alone */
}
.building-plan__link i.material-icons {
  font-size: 14px;
}
.building-plan__link.is-off {
  color: var(--c-warning-ink);
}
.building-plan__link.is-quiet {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.building-plan__empty {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.building-plan__empty a {
  color: var(--c-brand);
}

.building-plan__loading {
  display: inline-flex;
  margin: 4px;
}
.building-plan__loading md-progress-circular path {
  stroke: var(--c-brand);
}

.building-plan__next {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* The building plan's dialogs (widgets/buildingPlan/dialogs, and the device dialogs that host the plan), in the
   IP plan's dialog frame (.ip-dialog). A name-and-comment dialog is narrow; a connected socket or port, with its
   cable and other end beside it, is wide; one that holds the plan is as wide as the frame. */
md-dialog.ip-dialog.bp-dialog {
  width: 460px;
}
md-dialog.ip-dialog.bp-dialog.is-wide {
  width: 920px;
}
md-dialog.ip-dialog.bp-dialog.is-plan {
  width: 900px;
}
md-dialog.ip-dialog.bp-dialog form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bp-dialog__fields {
  display: grid;
  gap: 10px;
}

.bp-dialog__seg {
  margin-bottom: 14px;
}

.bp-dialog__columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  /* the cable's column holds the five categories side by side */
  gap: 20px;
}
.bp-dialog__columns:has(> .bp-dialog__section:nth-child(3)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
}
@media (max-width: 768px) {
  .bp-dialog__columns:has(> .bp-dialog__section:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .bp-dialog__columns {
    grid-auto-flow: row;
  }
}

.bp-dialog__section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}
.bp-dialog__section + .bp-dialog__section {
  padding-left: 20px;
  border-left: 1px solid var(--c-border);
}
@media (max-width: 768px) {
  .bp-dialog__section + .bp-dialog__section {
    padding: 14px 0 0;
    border-top: 1px solid var(--c-border);
    border-left: 0;
  }
}

.bp-dialog__section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.bp-dialog__unit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-dialog__unit input {
  flex: 1 1 auto;
  min-width: 0;
}
.bp-dialog__unit span {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* CAT5 … FX: five choices, so the switch may wrap */
.bp-dialog__choice {
  flex-wrap: wrap;
  height: auto;
  min-height: 30px;
}
.bp-dialog__choice button {
  min-width: 0;
  height: 24px;
  padding: 0 8px;
  font-size: 12.5px;
}

.bp-dialog__where {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.bp-dialog__where i.material-icons {
  font-size: 16px;
}

.bp-dialog__range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px minmax(0, 1fr);
  gap: 10px 12px;
}
@media (max-width: 768px) {
  .bp-dialog__range {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.bp-dialog__preview {
  margin: 12px 0 4px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.bp-dialog__preview b {
  color: var(--c-text);
}
.bp-dialog__preview .is-mono {
  font-family: Menlo, Consolas, monospace;
  color: var(--c-text);
}
.bp-dialog__preview.is-error {
  color: var(--c-danger);
}

/* The site picker in front of the PNAC pages (widgets/siteSelector). */
.site-selector {
  max-width: 1040px;
  margin: 16px auto 24px;
}
.site-selector__head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.site-selector__intro {
  flex: 1 1 260px;
  min-width: 0;
}
.site-selector__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-text);
}
.site-selector__description {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--c-field-text);
}
.site-selector__search {
  flex: 0 1 280px;
}
.site-selector__search .search-bar {
  margin-bottom: 0;
}
.site-selector__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.site-selector__site {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px 12px 14px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.site-selector__site:hover {
  border-color: color-mix(in srgb, var(--c-brand) 45%, transparent);
  background-color: var(--c-row-hover);
}
.site-selector__site:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.site-selector__site.is-last-used {
  border-color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-brand);
}
.site-selector__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 12%, transparent);
}
.site-selector__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.site-selector__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
}
.site-selector__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-selector__last {
  flex: none;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 12%, transparent);
}
.site-selector__meta {
  font-size: 12px;
  color: var(--c-field-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-selector__chevron {
  flex: none;
  margin-left: auto;
  font-size: 20px;
  color: color-mix(in srgb, var(--c-text) 45%, transparent);
}
.site-selector__site:hover .site-selector__chevron {
  color: var(--c-brand);
}
.site-selector__none {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--c-field-text);
}

/* The guest hardware form (modules/pnac/guest-hardware) is a .form-card (formCard.scss) in three groups: device,
   guest and access. What is its own: */
.guest-periods.segmented {
  flex-wrap: wrap;
}

/* The guest hardware list (guest-hardware.controller.js): the device with its description under it, access as a
   state with its end, and the connection with an icon. */
.guest-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.guest-cell-sub {
  font-size: 12px;
  color: var(--c-field-text);
}

.guest-mac {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
}

.guest-access {
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
}
.guest-access.is-active {
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
}
.guest-access.is-ending {
  color: var(--c-warning-ink);
  background-color: color-mix(in srgb, var(--c-warning) 18%, transparent);
}
.guest-access.is-ended {
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}

.guest-connection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.guest-connection .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* A button inside a text field, at its right end (widgets/fieldAction). The input's text stops short of it by the
   button's measured width. */
md-input-container.has-field-action input.md-input {
  padding-right: calc(var(--field-action-width, 0px) + 8px);
}
md-input-container.has-field-action > field-action {
  position: absolute;
  top: 2px;
  right: 3px;
  display: flex;
  align-items: center;
  height: 30px;
}

.field-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-brand);
  cursor: pointer;
}
.field-action .material-icons {
  font-size: 16px;
}
.field-action:hover {
  background-color: color-mix(in srgb, var(--c-brand) 10%, transparent);
}
.field-action:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
[disabled] .field-action {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
  pointer-events: none;
}

/* A value to pick from a list (widgets/listPicker), on the app dialog's picker (appDialog.scss). */
.list-picker .app-dialog__tile .material-icons {
  font-size: 16px;
}
.list-picker .list-picker__mono {
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
}
.list-picker .app-dialog__empty a {
  margin-left: 4px;
  color: var(--c-link);
}

/* A detail form as cards (the VLAN, guest hardware and RADIUS server pages):

     .form-card                 a card; .is-wide for one that holds more than fields (880px instead of 720px),
                                .is-full for one as wide as the page
       __head                   tile (optional), title, count or __pill (optional), then the site or an action;
                                __heading holds the title with a line under it (__sub)
                                (__action.is-danger for one that can't be taken back)
       __body                   the content of a card without groups
       __group                  a group of fields under a quiet title (__group-title), ruled off from the next
       __fields                 the fields in two columns, one on a phone; .is-narrow-first for a short first one
       __wide                   a field over both columns
       __control                a choice that is not an input (a segmented control) under its __label
       __hint / __error         a line under a field
       __empty                  what a card says when it has nothing to list

   The cards on a page stand 14px apart; the gap above the first is #command-section's, as on every detail form,
   which the card's own top margin collapses into. */
.form-card {
  max-width: 720px;
  margin: 16px 0 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.form-card.is-wide {
  max-width: 880px;
}
.form-card.is-full {
  max-width: none;
}
.form-card + .form-card {
  margin-top: 0;
}
.form-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 48px;
  padding: 8px 12px 8px 20px;
  border-bottom: 1px solid var(--c-border);
}
.form-card__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 12%, transparent);
}
.form-card__tile .material-icons {
  font-size: 19px;
}
.form-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.form-card__heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.form-card__sub {
  font-size: 12px;
  color: var(--c-field-text);
}
.form-card__pill {
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}
.form-card__pill.is-ok {
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
}
.form-card__pill.is-warning {
  color: var(--c-warning-ink);
  background-color: color-mix(in srgb, var(--c-warning) 18%, transparent);
}
.form-card__pill.is-danger {
  color: var(--c-danger-ink);
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
}
.form-card__pill.is-neutral {
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.form-card__count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.form-card__site, .form-card__action {
  margin-left: auto;
}
.form-card__site {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  font-size: 13px;
  color: var(--c-field-text);
}
.form-card__site .material-icons {
  font-size: 16px;
}
.form-card__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-brand);
  cursor: pointer;
}
.form-card__action .material-icons {
  font-size: 18px;
}
.form-card__action:hover {
  background-color: color-mix(in srgb, var(--c-brand) 10%, transparent);
}
.form-card__action:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.form-card__action.is-danger {
  color: var(--c-danger-ink);
}
.form-card__action.is-danger:hover {
  background-color: color-mix(in srgb, var(--c-danger) 10%, transparent);
}
.form-card__body {
  padding: 4px 20px 14px;
}
.form-card__group {
  padding: 16px 20px 6px;
}
.form-card__group + .form-card__group {
  border-top: 1px solid var(--c-border);
}
.form-card__group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.form-card__group-title .material-icons {
  font-size: 15px;
  color: var(--c-brand);
}
.form-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  align-items: start;
}
.form-card__fields.is-narrow-first {
  grid-template-columns: 150px minmax(0, 1fr);
}
@media (max-width: 599px) {
  .form-card__fields, .form-card__fields.is-narrow-first {
    grid-template-columns: minmax(0, 1fr);
  }
}
.form-card__body md-input-container, .form-card__fields md-input-container {
  margin: 28px 0 2px;
}
.form-card__wide {
  grid-column: 1/-1;
}
.form-card__control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 9px 0 14px;
}
.form-card__label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.form-card__required {
  color: var(--c-danger);
}
.form-card__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--c-field-text);
}
.form-card__error {
  font-size: 12px;
  color: var(--c-danger);
}
.form-card__empty {
  margin: 10px 0 6px;
  font-size: 13px;
  color: var(--c-field-text);
}

/* A secret as dots until asked for (widgets/secretValue): the value, then its eye and copy buttons, on one line. */
secret-value {
  display: inline-block;
  vertical-align: middle;
}

.secret-value {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  white-space: nowrap;
}
.secret-value__dots, .secret-value__text {
  margin-right: 4px;
  line-height: 24px;
}
.secret-value__dots {
  position: relative;
  top: -1px;
  letter-spacing: 0.12em;
  color: var(--c-field-text);
}
.secret-value__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.secret-value__button .material-icons {
  font-size: 16px;
  line-height: 1;
}
.secret-value__button:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.secret-value__button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.secret-value__button.is-done {
  color: var(--c-success-deep);
}

.secret-value__empty {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* The buttons of a secret's text field (widgets/secretValue, secret-input): inside the field at its right end, where a
   field-action sits; the container's has-field-action keeps the text clear of them. */
md-input-container.has-field-action > .secret-input__actions {
  position: absolute;
  top: 2px;
  right: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
}
md-input-container.has-field-action > .secret-input__actions .secret-value__button[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 88%);
  cursor: default;
  pointer-events: none;
}

/* The toolbar over an Ace editor (widgets/codeEditorToolbar), and the fullscreen it puts the editor's
   .code-editor container in. Used by the script editor and the network device group's rule editor. */
.code-editor-toolbar {
  height: 40px;
  min-height: 40px;
  padding: 0 4px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.code-editor-toolbar .md-icon-button {
  margin: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}
.code-editor-toolbar .md-icon-button i.material-icons {
  font-size: 20px;
  line-height: 36px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}
.code-editor-toolbar .md-icon-button.active i.material-icons {
  color: var(--c-info);
}
.code-editor-toolbar .code-editor-fontsize {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}

.code-editor-toolbar.is-inline {
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}
.code-editor-toolbar.is-inline .md-icon-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
}
.code-editor-toolbar.is-inline .md-icon-button i.material-icons {
  font-size: 19px;
  line-height: 32px;
}

.code-editor.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  margin: 0;
  border: none;
  border-radius: 0;
  max-height: none !important;
  z-index: 100;
}

.user-feedback-dialog {
  /* The screenshot, shown rather than promised: a scaled preview, a switch, and what it is. */
  /* What a feature sends along with the message: folded, one line until it is opened. */
  /* What the endless spinner was hiding: no picture, and the message goes anyway. */
}
@media (min-width: 600px) {
  .user-feedback-dialog .disable-user-feedback-checkbox {
    margin-top: 8px;
  }
}
.user-feedback-dialog .feedback-textarea {
  white-space: pre-wrap;
}
.user-feedback-dialog .feedback-shot {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.user-feedback-dialog .feedback-shot.is-off .feedback-thumb,
.user-feedback-dialog .feedback-shot.is-off .feedback-shot-note {
  opacity: 0.5;
}
.user-feedback-dialog .feedback-thumb {
  position: relative;
  flex: none;
  width: 92px;
  height: 60px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  /* While the picture is taken. html2canvas holds the main thread for seconds, so this moves only transform
     and opacity, which the browser animates without it; the shimmer it replaces (background-position) stood
     still for exactly as long as there was something to wait for. */
}
.user-feedback-dialog .feedback-thumb img {
  display: block;
  width: 100%;
  animation: feedback-thumb-in 0.3s ease-out;
}
.user-feedback-dialog .feedback-thumb .feedback-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 22px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.user-feedback-dialog .feedback-thumb.is-capturing .feedback-thumb-placeholder {
  animation: feedback-thumb-pulse 1.2s ease-in-out infinite;
  will-change: opacity;
}
.user-feedback-dialog .feedback-thumb.is-capturing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-brand), transparent 65%), transparent);
  transform: translateX(-100%);
  animation: feedback-thumb-sweep 1.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes feedback-thumb-pulse {
  50% {
    opacity: 0.35;
  }
}
@keyframes feedback-thumb-sweep {
  to {
    transform: translateX(100%);
  }
}
@keyframes feedback-thumb-in {
  from {
    opacity: 0;
  }
}
.user-feedback-dialog .feedback-send-ring {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid color-mix(in srgb, var(--c-on-fill), transparent 65%);
  border-top-color: var(--c-on-fill);
  border-radius: 50%;
  animation: feedback-send-spin 0.8s linear infinite;
  will-change: transform;
}
@keyframes feedback-send-spin {
  to {
    transform: rotate(360deg);
  }
}
.user-feedback-dialog .feedback-shot-main {
  min-width: 0;
}
.user-feedback-dialog .feedback-shot-title md-switch {
  margin: 2px 0 0;
}
.user-feedback-dialog .feedback-shot-title md-switch .md-label {
  font-size: 13px;
}
.user-feedback-dialog .feedback-shot-note {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-top: -6px;
}
.user-feedback-dialog .feedback-shot-action {
  display: inline-block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--c-link);
}
.user-feedback-dialog .feedback-details {
  margin-top: 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.user-feedback-dialog .feedback-details__head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.user-feedback-dialog .feedback-details__head .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.user-feedback-dialog .feedback-details__head:focus {
  outline: none;
}
.user-feedback-dialog .feedback-details__head:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.user-feedback-dialog .feedback-details__sum {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.user-feedback-dialog .feedback-details__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 10px 10px 34px;
  font-size: 12px;
}
.user-feedback-dialog .feedback-details__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
}
.user-feedback-dialog .feedback-details__row dt {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-weight: 400;
}
.user-feedback-dialog .feedback-details__row dd {
  margin: 0;
  word-break: break-word;
  color: var(--c-text);
}
.user-feedback-dialog .feedback-shot-failed {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 11px;
  border: 1px solid var(--c-warning-deep);
  border-radius: 6px;
  background-color: var(--c-warning-wash-a);
  font-size: 12.5px;
  color: var(--c-warning-ink);
}
.user-feedback-dialog .feedback-shot-failed .material-icons {
  font-size: 17px;
  color: var(--c-warning-ink);
}

/* Marking up the screenshot. The tools are what tells you the picture can be edited at all. */
.screenshot-dialog {
  /* The picture is the whole page: without a ceiling the dialog is as tall as the window and the actions sit
     below the fold. */
}
.screenshot-dialog .screenshot-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.screenshot-dialog .screenshot-hint {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-right: 10px;
}
.screenshot-dialog .screenshot-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--c-field-text);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  cursor: pointer;
}
.screenshot-dialog .screenshot-tool .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.screenshot-dialog .screenshot-tool:hover:not([disabled]) {
  background-color: var(--c-surface-subtle);
}
.screenshot-dialog .screenshot-tool.is-active {
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.screenshot-dialog .screenshot-tool.is-active .material-icons {
  color: var(--c-brand);
}
.screenshot-dialog .screenshot-tool[disabled] {
  opacity: 0.45;
  cursor: default;
}
.screenshot-dialog .canvas-container {
  max-height: 60vh;
  overflow: auto;
  background-color: var(--c-surface-subtle);
  border: 1px solid var(--c-border);
  border-radius: 6px;
}

/* ── Directory (the Active Directory page's first tab) ───────────────────────────────────────────────────────
   The synced directory: its OU tree in a card beside the chosen OU's objects, and what is ticked in a bar with
   what can be done with it. It was a fixed-position tree, a table of eight columns and checkboxes feeding the
   toolbar. ad.html. */
.active-directory {
  padding-top: 16px;
}

/* The window's height below the tabs, the page's gutter under it (fill-viewport sets it); the tree and the table
   scroll inside it, the path, filters and selection stay where they are. */
.ad-directory {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .ad-directory {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
}

.ad-directory__tree {
  min-height: 0;
  max-height: 100%;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.ad-directory__tree::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.ad-directory__tree::-webkit-scrollbar-track {
  background: transparent;
}
.ad-directory__tree::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.ad-directory__tree::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.ad-directory__tree::-webkit-scrollbar-corner {
  background: transparent;
}
.ad-directory__tree .ad-search {
  display: block;
  margin: 0 0 6px;
  padding: 0;
}
@media (max-width: 768px) {
  .ad-directory__tree {
    max-height: 260px;
  }
}

.ad-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ad-tree .ad-tree {
  padding-left: 16px;
}

.ad-tree__row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 30px;
  padding-right: 6px;
  border-radius: 6px;
}
.ad-tree__row:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
}
.ad-tree__row.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
}
.ad-tree__row.is-on .ad-tree__label,
.ad-tree__row.is-on .ad-tree__label i.material-icons {
  color: var(--c-brand);
}
.ad-tree__row.is-on .ad-tree__name {
  font-weight: 500;
}

.ad-tree__toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.ad-tree__toggle.is-leaf {
  cursor: default;
}
.ad-tree__toggle i.material-icons {
  font-size: 18px;
}

/* A box the size of its square: Material centres the square on the element, which without a label had no
   height, so the squares hung below their rows. */
md-checkbox.ad-tree__check,
.ad-directory__table md-checkbox {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0 6px 0 0;
}
md-checkbox.ad-tree__check .md-container,
.ad-directory__table md-checkbox .md-container {
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: none;
}
md-checkbox.ad-tree__check .md-icon,
.ad-directory__table md-checkbox .md-icon {
  width: 16px;
  height: 16px;
}
md-checkbox.ad-tree__check .md-label,
.ad-directory__table md-checkbox .md-label {
  display: none;
}

.ad-tree__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}
.ad-tree__label i.material-icons {
  flex: none;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-tree__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-tree__sync {
  flex: none;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 17px;
  color: var(--c-success);
}

/* A search's hits: how many an OU holds, after its name, and "All results" above the tree, set off by a line. */
.ad-tree__count {
  flex: none;
  margin-left: auto;
  padding-left: 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ad-tree__sync + .ad-tree__count {
  margin-left: 6px;
}

.ad-tree__results {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}

.ad-tree__results-row {
  width: 100%;
  /* the row and its label in one: the 6px an OU row keeps on the right plus its label's 2px, so the counts line up */
  padding-right: 8px;
  padding-left: 8px;
}
.ad-tree__results-row i.material-icons {
  color: var(--c-brand);
}
.ad-tree__results-row.is-on .ad-tree__count {
  color: var(--c-brand);
}

.ad-directory__hint {
  margin: 8px 6px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-directory__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}

.ad-directory__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.ad-directory__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ad-directory__crumb {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.ad-directory__crumb i.material-icons {
  font-size: 16px;
}
.ad-directory__crumb.is-last {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
}

.ad-directory__summary {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-directory__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.ad-directory__filters search-bar {
  margin: 0;
}

.ad-directory__seg {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.ad-directory__seg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--c-border);
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.ad-directory__seg button:last-child {
  border-right: 0;
}
.ad-directory__seg button i.material-icons {
  font-size: 16px;
}
.ad-directory__seg button:hover:not(.is-on) {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
  color: var(--c-text);
}
.ad-directory__seg button.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-weight: 500;
}

.ad-directory__seg-count {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* The one part that scrolls; its header row stays at the top of it. */
.ad-directory__table {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.ad-directory__table::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.ad-directory__table::-webkit-scrollbar-track {
  background: transparent;
}
.ad-directory__table::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.ad-directory__table::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.ad-directory__table::-webkit-scrollbar-corner {
  background: transparent;
}
.ad-directory__table .table {
  margin: 0;
  table-layout: fixed;
}
.ad-directory__table .table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  background-color: var(--c-surface);
  box-shadow: inset 0 -1px 0 var(--c-border);
  border-bottom: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.ad-directory__table .table td {
  padding: 8px 12px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-directory__table .table md-checkbox {
  margin: 0;
}
.ad-directory__table .ad-col-check {
  width: 46px;
}
.ad-directory__table .ad-col-status {
  width: 120px;
}
.ad-directory__table tbody tr:first-child td {
  border-top: 0;
}
.ad-directory__table .ad-row {
  cursor: pointer;
}
.ad-directory__table .ad-row:hover td {
  background-color: color-mix(in srgb, var(--c-ink), transparent 96%);
}

.ad-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ad-name i.material-icons {
  flex: none;
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-name__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-account {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* Where a hit is, in the results: the OU's path, which opens it. */
.ad-location__link {
  max-width: 260px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  font: inherit;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.ad-location__link:hover, .ad-location__link:focus-visible {
  color: var(--c-link);
  text-decoration: underline;
}

.ad-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.ad-status i.material-icons {
  font-size: 13px;
}
.ad-status.is-active {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success);
}
.ad-status.is-disabled {
  background-color: color-mix(in srgb, var(--c-danger), transparent 86%);
  color: var(--c-danger);
}

.ad-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-brand);
}
.ad-link i.material-icons {
  flex: none;
  font-size: 16px;
}
.ad-link.is-none {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-directory__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 60px 16px;
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  text-align: center;
}
.ad-directory__empty i.material-icons {
  font-size: 36px;
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
}

.ad-directory__empty-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
}

.ad-directory__loading,
.ad-directory__none {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-directory__spinner {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--c-brand), transparent 78%);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: infinite-table-spin 0.8s linear infinite;
}

/* What is ticked, and the two things to do with it; under the table, which scrolls above it. */
.ad-selection {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 10px 8px 14px;
  border: 1px solid color-mix(in srgb, var(--c-brand), transparent 65%);
  border-radius: 8px;
  background-color: var(--c-surface-raised);
  font-size: 13px;
  color: var(--c-text);
}
.ad-selection > i.material-icons {
  font-size: 18px;
  color: var(--c-brand);
}
.ad-selection .md-button.ad-selection__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  line-height: 30px;
}
.ad-selection .md-button.ad-selection__action i.material-icons {
  font-size: 17px;
}

.ad-selection__text {
  font-weight: 500;
}

.ad-selection__clear {
  padding: 0 6px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.ad-selection__clear:hover {
  color: var(--c-text);
  text-decoration: underline;
}

.no-ad-entries-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 16px;
  font-size: 14px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-align: center;
}
.no-ad-entries-found-container i.material-icons {
  font-size: 40px;
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
}

.active-directory-ou-dialog .add-member-btn {
  min-width: 60px;
}

.ad-select-site-dialog md-input-container {
  margin-bottom: 0;
}

/* ── A directory object (adObject.tmpl.html) ─────────────────────────────────────────────────────────────────
   What it is and where, its facts, its groups, every attribute folded away; a person's account actions in the
   footer. It was a dialog per type of tabs of two-column tables. */
md-dialog.ad-object-dialog {
  width: 760px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
}
md-dialog.ad-object-dialog md-dialog-content {
  padding: 0;
}

.ad-object__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--c-border);
}

.ad-object__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.ad-object__icon i.material-icons {
  font-size: 22px;
}

.ad-object__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.ad-object__title {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}

.ad-object__sub {
  margin-top: 2px;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-object__close {
  display: flex;
  flex: none;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.ad-object__close:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
  color: var(--c-text);
}

.ad-object__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 20px 18px;
}

.ad-object__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-object__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  font-size: 13px;
  color: var(--c-danger);
}

/* The facts as a two-column grid of label over value. */
.ad-object__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}
@media (max-width: 560px) {
  .ad-object__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ad-object__fact {
  min-width: 0;
}
.ad-object__fact.is-wide {
  grid-column: 1/-1;
}
.ad-object__fact dt {
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.ad-object__fact dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  color: var(--c-text);
}
.ad-object__fact dd.is-empty {
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
}

.ad-object__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-object__section-title,
.ad-object__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}

.ad-object__toggle {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.ad-object__toggle i.material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-object__count {
  padding: 0 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 92%);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ad-object__groups {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.ad-object__groups li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 13px;
}
.ad-object__groups li + li {
  border-top: 1px solid var(--c-border);
}
.ad-object__groups li i.material-icons {
  font-size: 17px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-object__group-name,
.ad-object__group-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-object__group-name {
  color: var(--c-text);
}

.ad-object__group-path {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-object__all {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-object__find {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.ad-object__find:focus-within {
  border-color: var(--c-brand);
}
.ad-object__find i.material-icons {
  font-size: 17px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.ad-object__find input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-text);
  outline: none;
}

.ad-object__attributes {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12.5px;
}
.ad-object__attributes th,
.ad-object__attributes td {
  padding: 6px 12px;
  vertical-align: top;
  text-align: left;
}
.ad-object__attributes tr + tr th,
.ad-object__attributes tr + tr td {
  border-top: 1px solid var(--c-border);
}
.ad-object__attributes th {
  width: 34%;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  overflow-wrap: anywhere;
}
.ad-object__attributes td {
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.ad-object__value {
  display: block;
}

md-dialog-actions.ad-object__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
}
md-dialog-actions.ad-object__actions .md-button.ad-object__action {
  display: inline-flex;
  align-items: center;
  /* Material's 88px minimum width is wider than a short label; it sat at the left of it */
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  line-height: 32px;
}
md-dialog-actions.ad-object__actions .md-button.ad-object__action i.material-icons {
  font-size: 17px;
}

.ad-object__account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Passwords' "Member of": the first group and how many more (outdatedpassword.controller.js), all of them in the
   title. A small count after the name, so a row stays one line. */
.ad-member-of {
  white-space: nowrap;
}
.ad-member-of .ad-member-of__more {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* The object dialog's More menu (adObject.tmpl.html): its last entry, Delete, set apart and red. */
.ad-object__more-caret {
  margin: 0 -4px 0 -2px;
}

md-menu-content.ad-object__menu md-menu-item.ad-object__menu-divider {
  margin-top: 4px;
  border-top: 1px solid var(--c-border);
}
md-menu-content.ad-object__menu md-menu-item .md-button i.material-icons {
  margin-right: 10px;
  font-size: 18px;
  vertical-align: -4px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
md-menu-content.ad-object__menu md-menu-item.ad-object__menu-danger .md-button,
md-menu-content.ad-object__menu md-menu-item.ad-object__menu-danger .md-button i.material-icons {
  color: var(--c-danger-ink);
}

/* The selection bar's actions on ticked objects, before import and sync; Delete red. */
.ad-selection__group {
  display: contents;
}

.ad-selection .md-button.ad-selection__action.is-danger {
  color: var(--c-danger-ink);
}

/* A directory action (AdActionDialog): its fields, the domain controller, then how the run went. */
md-dialog.ad-action-dialog {
  width: 480px;
}

.ad-action__form {
  display: grid;
  gap: 12px;
}

.ad-action__label {
  display: grid;
  gap: 5px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-field-text);
}

.ad-action__required {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.ad-action__input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text);
}
.ad-action__input:focus {
  border-color: var(--c-brand);
  outline: 0;
}

.ad-action__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.ad-action__password {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ad-action__password .ad-action__input {
  flex: 1 1 auto;
}

.ad-action__inline {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.ad-action__inline i.material-icons {
  font-size: 18px;
}
.ad-action__inline:hover, .ad-action__inline:focus-visible {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.ad-action__hint {
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.ad-action__note {
  margin: 0;
  padding: 9px 11px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-field-text);
}
.ad-action__note.is-danger {
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  color: var(--c-danger-ink);
}

.ad-action__list {
  max-height: 220px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  list-style: none;
}

.ad-action__option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ad-action__option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text);
  cursor: pointer;
}
.ad-action__option i.material-icons {
  flex: none;
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.ad-action__option:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
}
.ad-action__option.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.ad-action__option.is-on i.material-icons {
  color: var(--c-brand);
}

.ad-action__option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-action__option-path {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-action__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ad-action__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 9px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--c-brand);
}
.ad-action__chip button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.ad-action__chip i.material-icons {
  font-size: 15px;
}

.ad-action__dc {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}

.ad-action__status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
}

.ad-action__status-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--c-surface-subtle);
  /* The spinner and the turning sync icon spin forever, so ngAnimate took their removal (ng-if) for an animation
     to wait out and left them next to the check that replaced them. */
}
.ad-action__status-icon.is-done {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success-deep);
}
.ad-action__status-icon.is-failed {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger-ink);
}
.ad-action__status-icon.is-syncing {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}
.ad-action__status-icon > .ng-leave {
  display: none;
  animation: none !important;
}

/* the arrows turn the way they point while the directory syncs */
.ad-action__sync-icon {
  animation: infinite-table-spin 1.4s linear infinite reverse;
}
@media (prefers-reduced-motion: reduce) {
  .ad-action__sync-icon {
    animation: none;
  }
}

.ad-action__status-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-text);
}

.ad-action__link {
  font-size: 13px;
}

/* The object dialog's email addresses: the primary marked, the aliases' actions at the row's end. */
.ad-object__section-action {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-brand);
  cursor: pointer;
}
.ad-object__section-action i.material-icons {
  font-size: 17px;
}
.ad-object__section-action:hover, .ad-object__section-action:focus-visible {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}

.ad-object__groups.ad-object__emails li {
  grid-template-columns: 18px minmax(0, 1fr) auto;
}

.ad-object__primary {
  padding: 0 8px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-size: 11.5px;
  line-height: 18px;
  color: var(--c-brand);
}

.ad-object__email-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ad-object__email-action {
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--c-link);
  cursor: pointer;
}
.ad-object__email-action.is-icon {
  display: inline-flex;
  padding: 2px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.ad-object__email-action.is-icon i.material-icons {
  font-size: 16px;
}
.ad-object__email-action:hover, .ad-object__email-action:focus-visible {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}

/* show the actions on the row the pointer is on; on touch they stay */
@media (hover: hover) {
  .ad-object__emails li:not(:hover):not(:focus-within) .ad-object__email-actions {
    visibility: hidden;
  }
}
.ad-object__email-empty {
  margin: 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* An address in the action dialog: before the @, then the domain. */
.ad-action__email {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ad-action__email .ad-action__input:first-child {
  flex: 1 1 55%;
}
.ad-action__email .ad-action__input:last-child {
  flex: 1 1 45%;
}

.ad-action__at {
  flex: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* The action dialog's note on how old its data is, and what the pre-modify check found when it stopped a run. */
.ad-action__synced {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
}
.ad-action__synced i.material-icons {
  flex: none;
  margin-top: 1px;
  font-size: 15px;
}

.ad-action__status-icon.is-conflict {
  background-color: color-mix(in srgb, var(--c-warning), transparent 84%);
  color: var(--c-warning-ink);
}

.ad-action__conflict {
  display: grid;
  gap: 12px;
}

.ad-action__conflict-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ad-action__conflict-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-field-text);
}

.ad-action__conflict-name {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}

.ad-action__conflict-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ad-action__conflict-table th {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 11.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-align: left;
}
.ad-action__conflict-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ad-action__changed {
  font-weight: 500;
  color: var(--c-warning-ink);
}

.ad-action__changed-at {
  display: block;
}

/* Why a run failed, in the script's own words (the outcome's detail). */
.ad-action__fail-detail {
  margin-top: 4px;
  font-size: 13px;
  color: var(--c-danger-ink);
}

.hardware-detail-view-dialog md-dialog-content {
  display: flex;
  flex-direction: unset;
}
.hardware-detail-view-dialog md-dialog-content .md-dialog-content {
  display: flex;
  min-width: 0;
}
.hardware-detail-view-dialog md-dialog-content .md-dialog-content > div {
  min-width: 0;
}
.hardware-detail-view-dialog md-dialog-content .md-dialog-content > div fieldset .toggle-box {
  margin-left: 3px;
}
.hardware-detail-view-dialog md-dialog-content .md-dialog-content > div .open-last-search-job-icon {
  float: right;
}

/* The dialog's head is the device's status bar: the same name, pills, meta line and actions as the card on the
   device page (hardware-detail-header.html), fixed above the scrolling sections instead of sticking inside
   them. */
.hardware-detail-view-dialog {
  /* Wraps the head and the content for the device's controller; they stay md-dialog's flex items. */
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__frame {
  display: contents;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head {
  padding-top: 12px;
  padding-bottom: 12px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .app-dialog__icon {
  align-self: flex-start;
  margin-top: 2px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
  /* The device's own description: class, OS, site, when it appeared, which agent. All of it is on the
     model when the page opens, so the header never waits on a panel to fill itself in. */
  /* The running automation, named. It used to be a bare 20px ring with the job's name in a tooltip, so a
     run that was already going when you opened the page was an anonymous spinner. */
  /* Wrapped onto their own row, the buttons share it rather than huddling at one end. */
  /* The dialog title's size rather than the page heading's. */
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-identity {
  display: flex;
  align-items: center;
  /* Takes the free width, which is what puts the actions against the right edge — until there is not
     enough for both, when the basis is what makes the actions wrap to their own row instead. */
  flex: 1 1 260px;
  min-width: 0;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-body {
  flex: 1 1 auto;
  min-width: 0;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row {
  /* Errors and warnings, one labelled pill each rather than a segmented bar of bare numbers. */
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* Connection state. Live and Online share a colour on purpose — both mean the agent is reachable;
     the word carries the difference, which is what the old pair of green dots failed to do. */
  /* How long it has been up or down: the same pill, quieter, so the state reads first. */
  /* LAPS: a secret to reveal, not a state — so it is outlined rather than filled, and it keeps the
     letter-spacing that makes an acronym read as one. */
  /* The toggle. Filled when on, outlined when off, so its state is visible without reading the
     label — and it is the label that says what it toggles. */
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-error {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-warning {
  background-color: color-mix(in srgb, var(--c-accent), transparent 84%);
  color: var(--c-accent);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-info {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-state {
  cursor: default;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-live, .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-online {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-offline {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-muted {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill .device-header-pill-detail {
  font-weight: 500;
  opacity: 0.8;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-laps {
  background-color: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-field-text);
  letter-spacing: 0.06em;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-laps::before {
  display: none;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-laps:hover {
  border-color: var(--c-brand-muted);
  color: var(--c-text);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-laps:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-toggle {
  background-color: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-field-text);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-toggle::before {
  background-color: var(--c-border);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-toggle:hover {
  border-color: var(--c-brand-muted);
  color: var(--c-text);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-toggle.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  border-color: transparent;
  color: var(--c-brand);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-toggle.is-on::before {
  background-color: currentColor;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name-row .device-header-pill.is-toggle:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin-top: 3px;
  color: var(--c-field-text);
  font-size: 13px;
  /* Separators drawn rather than typed, so an absent field takes its separator with it. */
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-meta > span + span::before {
  content: "·";
  margin-right: 10px;
  opacity: 0.45;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-state {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-state .top-bar-icon {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-state .permanent-monitoring md-switch {
  margin: 0 4px 0 0;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  max-width: 340px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-field-text);
  cursor: pointer;
  overflow: hidden;
  animation: job-chip-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  /* No percentage to draw: the whole ring spins instead. */
  /* Colour is the fastest thing to read, and the finished state did not use it: success and failure
     were the same $black_54 glyph and differed only in shape. */
  /* The mark strokes itself over the ring the run just completed, rather than being swapped in. */
  /* The state has to survive the motion being switched off, so nothing here carries information that
     only the animation conveys. */
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-label span {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-label span::before {
  content: "· ";
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-ring,
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-mark {
  flex: none;
  width: 20px;
  height: 20px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-ring {
  /* Rotated so a determinate arc starts at twelve o'clock; the dash offset comes from the job's
     reported percentage, which the job centre already draws for a running job. */
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-ring circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-ring .job-chip-track {
  stroke: var(--c-border);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-ring .job-chip-bar {
  stroke: var(--c-brand);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 38 50.27;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-mark {
  display: none;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-mark path {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-running .job-chip-ring {
  animation: job-chip-spin 1.05s linear infinite;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-ok {
  border-color: var(--c-success);
  color: var(--c-success);
  background-color: color-mix(in srgb, var(--c-success), transparent 90%);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-fail {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-ok .job-chip-ring, .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-fail .job-chip-ring {
  display: none;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-ok .job-chip-mark, .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-fail .job-chip-mark {
  display: block;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-ok .job-chip-label span, .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-fail .job-chip-label span {
  color: inherit;
  opacity: 0.8;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-ok .job-chip-mark path {
  stroke: var(--c-success);
  animation: job-chip-draw 0.34s 0.06s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-fail .job-chip-mark path {
  stroke: var(--c-danger);
  animation: job-chip-draw 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip {
    animation: none;
  }
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip.is-running .job-chip-ring {
    animation: none;
  }
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-ring .job-chip-bar {
    stroke-dasharray: 12 50.27;
    transition: none;
  }
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .job-chip .job-chip-mark path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
@keyframes job-chip-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
}
@keyframes job-chip-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes job-chip-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  line-height: normal;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn.md-button i {
  font-size: 18px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn-primary.md-button {
  background-color: var(--c-accent);
  color: var(--c-on-fill);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn-primary.md-button:not([disabled]):hover {
  background-color: var(--c-cat-sand);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn-secondary.md-button {
  background-color: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn-secondary.md-button:not([disabled]):hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
@media (max-width: 768px) {
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status {
    /* Side by side, splitting the row. At their natural widths the pair is 334px against a 305px row,
       so left to themselves they wrap and each takes a line; an even split with tighter padding fits
       both without shortening either label. */
  }
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-actions {
    flex: 1 1 100%;
  }
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn.md-button {
    flex: 1 1 0;
    min-width: 0;
    /* Tightened just enough for both labels to fit the half-row they now get — at the desktop
       metrics each needs 152px of a 144px slot and the text would be clipped. */
    padding: 0 8px;
    gap: 5px;
    font-size: 13px;
  }
  .hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-btn.md-button i {
    font-size: 16px;
  }
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status horizontal-value-indicator {
  width: 60px;
}
.hardware-detail-view-dialog .hardware-detail-view-dialog__head .device-status .device-header-name {
  font-size: 19px;
}

.ipplan-assign-hardware-dialog md-tabs {
  min-width: 404px;
}

timezone-picker .timezone-picker {
  display: flex;
  flex-direction: column;
  height: 100%;
}
timezone-picker .timezone-picker--inline {
  flex-direction: row;
  align-items: center;
  height: auto;
  gap: 6px;
}
timezone-picker .timezone-picker--inline .timezone-picker--inline-icon {
  font-size: 20px;
  color: var(--c-brand);
}
timezone-picker .timezone-picker--inline .timezone-picker-selectbox-container {
  width: 220px;
  max-width: 220px;
  margin: 0;
}
timezone-picker .hoverZone {
  display: inline-block;
  min-width: 1px;
  padding: 6px 12px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  border: 1px solid color-mix(in srgb, var(--c-neutral), transparent 50%);
  border-radius: 4px;
}
timezone-picker .hoverZone:empty {
  display: none;
}
timezone-picker .timezone-picker-map-container {
  display: block;
  width: 100%;
  max-width: 700px;
  /* The map's own height (it draws at a fixed ratio to its width); 420px left 70px of nothing under it. */
  height: auto;
  margin: 12px auto auto;
}
timezone-picker.map-manually-hidden .timezone-picker-map-container {
  display: none;
}
@media (max-width: 599px) {
  timezone-picker .timezone-picker-map-container {
    display: none;
  }
}
timezone-picker .timezone-picker-selectbox-container {
  width: 100%;
  max-width: 400px;
}

hardware-selector button-group {
  margin-top: 10px;
  margin-right: 0;
}
hardware-selector .hardware-selection-group {
  border: 1px solid color-mix(in srgb, var(--c-neutral), transparent 30%);
  border-radius: 6px;
  overflow: hidden;
}
hardware-selector .hardware-selection-group .hardware-selection-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  border-bottom: 1px solid color-mix(in srgb, var(--c-neutral), transparent 50%);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-brand-muted);
}
hardware-selector .hardware-selection-group .hardware-selection-group-header .material-icons {
  font-size: 16px;
}
hardware-selector .hardware-selection-group .hardware-selection-group-body {
  padding: 8px 12px 4px;
}
hardware-selector .hardware-selection-group .use-filter-header-button {
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
hardware-selector .hardware-selection-group .use-filter-header-button .material-icons {
  font-size: 16px;
  line-height: 1;
  color: var(--c-brand-muted);
}
hardware-selector .hardware-selection-group .use-filter-header-button:hover .material-icons {
  color: var(--c-info);
}
hardware-selector .hardware-selector-hint-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
hardware-selector .clear-all-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--c-accent);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}
hardware-selector .clear-all-link:hover {
  background: color-mix(in srgb, var(--c-accent), transparent 90%);
}
hardware-selector .clear-all-link .material-icons {
  font-size: 14px;
  margin-right: 3px;
}
hardware-selector .remove-filter-button, hardware-selector .edit-filter-button {
  min-width: 42px;
  line-height: 0;
  margin: 0;
}
hardware-selector .filter-wrapper {
  margin-top: 10px;
}
hardware-selector .action-buttons-container button:first-child, hardware-selector .filter-buttons-container button:first-child {
  margin-right: 10px;
}
hardware-selector .filter-buttons-container {
  margin-bottom: 10px;
}
hardware-selector .advanced-filter-mode-container .edit-filter-button, hardware-selector .advanced-filter-mode-container .remove-filter-button {
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0 0 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
hardware-selector .advanced-filter-mode-container .edit-filter-button .material-icons, hardware-selector .advanced-filter-mode-container .remove-filter-button .material-icons {
  font-size: 16px;
  line-height: 1;
}
hardware-selector .advanced-filter-mode-container .remove-filter-button .material-icons {
  color: var(--c-danger);
}
hardware-selector .excluded-hardware-row {
  margin-top: 10px;
}
hardware-selector .md-errors-spacer {
  display: none;
}
hardware-selector .hardware-selector-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 0 2px;
}
hardware-selector .hardware-selector-hint .hint-text {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
hardware-selector .hardware-selector-hint .hint-text strong {
  background: var(--c-surface-sunken);
  padding: 0 4px;
  border-radius: 3px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
}
hardware-selector .hardware-selector-hint .match-mode-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}
hardware-selector .hardware-selector-hint .match-mode-toggle:hover {
  background: var(--c-surface-sunken);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
hardware-selector .hardware-selector-hint .match-mode-toggle .material-icons {
  font-size: 14px;
  margin-right: 3px;
}
hardware-selector .affected-hardware-info {
  display: flex;
  align-items: center;
  margin: 8px 0 0 0;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--c-success), transparent 90%);
  border-radius: 4px;
  font-size: 13px;
  color: var(--c-success);
  cursor: pointer;
}
hardware-selector .affected-hardware-info:hover {
  background: color-mix(in srgb, var(--c-success), transparent 82%);
}
hardware-selector .affected-hardware-info .material-icons {
  font-size: 18px;
  margin-right: 6px;
}
hardware-selector .affected-hardware-info .affected-hardware-view-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
hardware-selector .affected-hardware-info .affected-hardware-view-link .material-icons {
  font-size: 14px;
  margin-right: 3px;
}
hardware-selector .affected-hardware-info:hover .affected-hardware-view-link {
  opacity: 1;
}
hardware-selector .affected-hardware-warning {
  display: flex;
  align-items: center;
  margin: 8px 0 0 0;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--c-accent), transparent 90%);
  border-radius: 4px;
  font-size: 13px;
  color: var(--c-accent);
}
hardware-selector .affected-hardware-warning .material-icons {
  font-size: 18px;
  margin-right: 6px;
}

/* The Filter dialog (advancedFilter.tmpl.html): saved filters down the side, the one open beside them. The
   side is a list like the section rail's (cmdbHardware.scss): a find box, the filters you can change, the
   library below; the open filter has its name, what it says in words, and the query builder. */
.advanced-filter-dialog {
  /* The filter the table shows now */
  /* An outlined button above the lists rather than a row among them; filled in while a new filter is open */
  /* One line, cut short beside the Applied tag rather than wrapping */
  /* The row's menu: quiet until the row is under the pointer, focused, or open. */
  /* No hover on a touch screen: the menu is always there */
  /* Quick start, under the conditions of a filter that has none yet */
}
.advanced-filter-dialog md-dialog-content {
  width: 1100px;
  max-width: 100%;
  overflow: hidden;
}
.advanced-filter-dialog .af-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 460px;
  max-height: 70vh;
}
@media (max-width: 959px) {
  .advanced-filter-dialog .af-layout {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }
}
.advanced-filter-dialog .af-nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 8px;
  border-right: 1px solid var(--c-border);
  background-color: var(--c-surface-subtle);
}
@media (max-width: 959px) {
  .advanced-filter-dialog .af-nav {
    max-height: 240px;
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }
}
.advanced-filter-dialog .af-find {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0 2px 8px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: var(--c-surface-muted);
}
.advanced-filter-dialog .af-find:focus-within {
  border-color: var(--c-brand);
  background-color: var(--c-surface);
}
.advanced-filter-dialog .af-find .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.advanced-filter-dialog .af-find input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--c-text);
}
.advanced-filter-dialog .af-nav-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.advanced-filter-dialog .af-nav-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.advanced-filter-dialog .af-nav-list::-webkit-scrollbar-track {
  background: transparent;
}
.advanced-filter-dialog .af-nav-list::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.advanced-filter-dialog .af-nav-list::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.advanced-filter-dialog .af-nav-list::-webkit-scrollbar-corner {
  background: transparent;
}
.advanced-filter-dialog .af-nav-caption {
  display: flex;
  justify-content: space-between;
  margin: 14px 10px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .af-nav-count {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.advanced-filter-dialog .af-nav-applied {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 18px;
  padding: 0 7px 0 5px;
  border-radius: 9px;
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-success-deep);
}
.advanced-filter-dialog .af-nav-applied .material-icons {
  font-size: 13px;
}
.advanced-filter-dialog .af-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 6px 6px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
  /* the open one: the brand wash and a rule, like the rail's current section */
}
.advanced-filter-dialog .af-nav-item:hover {
  background-color: var(--c-surface-muted);
}
.advanced-filter-dialog .af-nav-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}
.advanced-filter-dialog .af-nav-item.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  box-shadow: inset 2px 0 0 var(--c-brand);
}
.advanced-filter-dialog .af-nav-item .material-icons {
  font-size: 18px;
}
.advanced-filter-dialog .af-new {
  min-height: 32px;
  margin-bottom: 4px;
  padding: 4px 10px;
  border: 1px dashed color-mix(in srgb, var(--c-ink), transparent 76%);
  font-weight: 500;
  color: var(--c-link);
}
.advanced-filter-dialog .af-new:hover {
  border-style: solid;
  background-color: var(--c-surface);
}
.advanced-filter-dialog .af-new.is-on {
  border: 1px solid color-mix(in srgb, var(--c-brand), transparent 65%);
  box-shadow: none;
}
.advanced-filter-dialog .af-nav-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.advanced-filter-dialog .af-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.advanced-filter-dialog .af-nav-item.is-on .af-nav-name {
  font-weight: 600;
}
.advanced-filter-dialog .af-nav-meta {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .af-nav-meta > span + span::before {
  content: "·";
  margin-right: 4px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.advanced-filter-dialog .af-nav-meta .material-icons {
  margin-right: 3px;
  vertical-align: -2px;
}
.advanced-filter-dialog .af-nav-meta .material-icons {
  font-size: 13px;
}
.advanced-filter-dialog .af-nav-lock.material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.advanced-filter-dialog .af-nav-more {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  opacity: 0;
  cursor: pointer;
}
.advanced-filter-dialog .af-nav-more:hover, .advanced-filter-dialog .af-nav-more:focus-visible {
  outline: none;
  background-color: var(--c-surface);
  color: var(--c-text);
}
.advanced-filter-dialog .af-nav-item:hover .af-nav-more,
.advanced-filter-dialog .af-nav-item.is-on .af-nav-more,
.advanced-filter-dialog .af-nav-more:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .advanced-filter-dialog .af-nav-more {
    opacity: 1;
  }
}
.advanced-filter-dialog .af-quick {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.advanced-filter-dialog .af-quick-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}
.advanced-filter-dialog .af-quick-text {
  margin: 2px 0 10px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .af-quick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.advanced-filter-dialog .af-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 15px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.advanced-filter-dialog .af-quick-chip .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .af-quick-chip:hover {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
}
.advanced-filter-dialog .af-quick-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.advanced-filter-dialog .af-nav-empty {
  padding: 10px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .af-editor {
  min-width: 0;
  padding: 18px 22px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.advanced-filter-dialog .af-editor::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.advanced-filter-dialog .af-editor::-webkit-scrollbar-track {
  background: transparent;
}
.advanced-filter-dialog .af-editor::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.advanced-filter-dialog .af-editor::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.advanced-filter-dialog .af-editor::-webkit-scrollbar-corner {
  background: transparent;
}
.advanced-filter-dialog .af-editor-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
.advanced-filter-dialog .af-name {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
}
.advanced-filter-dialog .af-name-edit {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.advanced-filter-dialog .af-name-edit .material-icons {
  font-size: 17px;
}
.advanced-filter-dialog .af-name-edit:hover, .advanced-filter-dialog .af-name-edit:focus-visible {
  outline: none;
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}
.advanced-filter-dialog .af-name-input {
  flex: 1;
  max-width: 420px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-brand);
  border-radius: 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
  background-color: var(--c-surface);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  outline: none;
}
.advanced-filter-dialog .af-readonly {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 5px;
  background-color: var(--c-surface-subtle);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .af-readonly .material-icons {
  font-size: 13px;
}
.advanced-filter-dialog .af-summary {
  margin: 4px 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .af-actions {
  gap: 6px;
  padding: 10px 16px;
}
.advanced-filter-dialog .af-actions-hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .md-button.af-button {
  min-width: 0;
  margin: 0;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 86%);
  border-radius: 7px;
  text-transform: none;
}
.advanced-filter-dialog .md-button.af-button.is-quiet {
  border-color: transparent;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.advanced-filter-dialog .md-button.af-button.btn-blue {
  border-color: transparent;
}

md-menu-content.af-nav-menu md-menu-item.is-danger .md-button {
  color: var(--c-danger);
}
md-menu-content.af-nav-menu md-menu-item.is-danger .md-button md-icon {
  color: var(--c-danger);
}
md-menu-content.af-nav-menu .af-menu-text {
  flex: 1;
}
md-menu-content.af-nav-menu .af-menu-check {
  margin: 0 0 0 12px !important;
  color: var(--c-brand);
}

.selected-filter, .selected-condition, .remove-all-filter-button, .save-current-filter-button {
  display: inline-block;
  background: var(--c-accent);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  padding: 5px 10px 5px 10px;
  margin-bottom: 0;
}
.selected-filter:hover, .selected-condition:hover, .remove-all-filter-button:hover, .save-current-filter-button:hover {
  box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 5px 0 color-mix(in srgb, var(--c-shadow), transparent 86%), 0 1px 10px 0 color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.selected-filter i, .selected-condition i, .remove-all-filter-button i, .save-current-filter-button i {
  font-size: 12px;
  position: relative;
  right: 5px;
  top: 1px;
}

.remove-all-filter-button {
  background: var(--c-danger);
  display: inline-block;
  margin-right: 7px;
  margin-bottom: 5px;
}

.save-current-filter-button {
  background: var(--c-success);
  display: inline-block;
  float: right;
  margin-bottom: 16px;
}
@media (max-width: 1279px) {
  .save-current-filter-button {
    float: left;
  }
}

.search-term-filter, .custom-filter {
  margin-right: 7px;
  margin-bottom: 5px;
}

.filter-visualizer {
  padding: 4px 0;
}
.filter-visualizer .indented {
  margin-left: 20px;
}
.filter-visualizer .field-display-name {
  font-weight: bold;
}
.filter-visualizer .filter-group-block {
  position: relative;
}
.filter-visualizer .filter-rule-entry {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.filter-visualizer .filter-rule-entry:last-child {
  margin-bottom: 0;
}
.filter-visualizer .filter-operator-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.4;
  align-self: center;
}
.filter-visualizer .filter-operator-badge--and {
  background: color-mix(in srgb, var(--c-info), transparent 88%);
  color: var(--c-info);
}
.filter-visualizer .filter-operator-badge--or {
  background: color-mix(in srgb, var(--c-accent), transparent 88%);
  color: var(--c-cat-brown);
}
.filter-visualizer .filter-rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface-sunken);
  border: 1px solid color-mix(in srgb, var(--c-neutral), transparent 40%);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.filter-visualizer .filter-rule-field {
  font-weight: 600;
  color: var(--c-brand);
}
.filter-visualizer .filter-rule-condition {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.filter-visualizer .filter-rule-value {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: var(--c-brand-dark);
  background: color-mix(in srgb, var(--c-info), transparent 92%);
  padding: 1px 6px;
  border-radius: 3px;
}
.filter-visualizer .filter-nested-group {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--c-info), transparent 60%);
  margin-top: 4px;
  margin-bottom: 4px;
}

.jira-plugin .important {
  font-weight: bold;
}
.jira-plugin .jira-plugin-info-table {
  margin-top: 15px;
}
.jira-plugin .jira-plugin-info-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.jira-plugin .jira-plugin-info-table tbody tr td {
  padding: 10px 0;
}
.jira-plugin .jira-plugin-info-table tbody tr td:first-child {
  font-weight: bold;
  padding-right: 15px;
}
.jira-plugin .jira-plugin-info-table tbody tr:last-child {
  border: none;
}
.jira-plugin .instruction-list li {
  margin-bottom: 10px;
}
.jira-plugin .jira-settings-icon {
  width: 30px;
}
.jira-plugin .maintenance-message {
  margin-top: 20px;
  font-size: 20px;
  color: var(--c-danger);
}

/* Integrations catalog (/administration/integrations) and the generic integration
   detail page. The card grid replaces the former tab strip, which stopped scaling once
   more than a handful of integrations existed. */
/* icon chip, shared by the catalog cards and the detail header */
.integration-card-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}
.integration-card-icon .material-icons {
  font-size: 22px;
}
.integration-card-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.integration-card-icon.integration-card-icon-blue {
  background-color: color-mix(in srgb, var(--c-info), transparent 88%);
  color: var(--c-info);
}
.integration-card-icon.integration-card-icon-teal {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}
.integration-card-icon.integration-card-icon-orange {
  background-color: color-mix(in srgb, var(--c-accent), transparent 86%);
  color: var(--c-cat-brown);
}
.integration-card-icon.integration-card-icon-purple {
  background-color: color-mix(in srgb, var(--c-cat-purple), transparent 88%);
  color: var(--c-cat-purple);
}

/* connection state badge */
.integration-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--c-ink), transparent 90%);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integration-status .material-icons {
  font-size: 13px;
  margin-right: 4px;
}
.integration-status.integration-status-connected {
  background-color: color-mix(in srgb, var(--c-success), transparent 88%);
  color: var(--c-success);
}
.integration-status.integration-status-info {
  background-color: color-mix(in srgb, var(--c-info), transparent 88%);
  color: var(--c-info);
}

.integrations-catalog {
  /* as far below the bar as it sits from the sidebar: see $pageContentTop in values.scss */
  padding: 16px 0 16px;
  /* The category pills: the tag filter's buttons (tagSelector.scss), selected in the brand colour. */
  /* A section's heading and a line saying what it holds, as on Getting started (firstTimeUser.scss). */
  /* Both sections: a grid of flat cards. */
  /* What setting it up takes, and the way to start. */
}
.integrations-catalog .integrations-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.integrations-catalog .integrations-catalog-toolbar search-bar,
.integrations-catalog .integrations-catalog-toolbar .search-bar {
  margin: 0;
}
.integrations-catalog .integrations-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.integrations-catalog .integrations-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 86%);
  border-radius: 7px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.integrations-catalog .integrations-category:hover {
  border-color: var(--c-brand);
}
.integrations-catalog .integrations-category:focus {
  outline: none;
}
.integrations-catalog .integrations-category:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}
.integrations-catalog .integrations-category.is-on {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
  color: var(--c-brand);
}
.integrations-catalog .integrations-category-count {
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integrations-catalog .integrations-catalog-section {
  margin-bottom: 18px;
}
.integrations-catalog .integrations-catalog-section:last-child {
  margin-bottom: 0;
}
.integrations-catalog .integrations-section-head {
  padding: 0 0 8px;
}
.integrations-catalog .integrations-section-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}
.integrations-catalog .integrations-section-head p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integrations-catalog .integration-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.integrations-catalog .integration-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 8px;
  background-color: var(--c-surface);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}
.integrations-catalog .integration-card:hover {
  border-color: color-mix(in srgb, var(--c-brand), transparent 55%);
}
.integrations-catalog .integration-card:focus-visible {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 75%);
}
.integrations-catalog .integration-card .integration-card-head {
  display: flex;
  align-items: center;
}
.integrations-catalog .integration-card .integration-card-titles {
  min-width: 0;
}
.integrations-catalog .integration-card .integration-card-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--c-text);
}
.integrations-catalog .integration-card .integration-card-category {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integrations-catalog .integration-card .integration-card-description {
  font-size: 13px;
  line-height: 18px;
  color: var(--c-field-text);
}
.integrations-catalog .integration-card:hover .integration-card-action {
  text-decoration: underline;
}
.integrations-catalog .integration-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
}
.integrations-catalog .integration-card-hint {
  min-width: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integrations-catalog .integration-card-action {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 12.5px;
  color: var(--c-link);
}
.integrations-catalog .integration-card-action .material-icons {
  font-size: 14px;
}
.integrations-catalog .md-button.integration-card-action-button {
  flex: none;
  min-width: 0;
  min-height: 28px;
  height: 28px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 86%);
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 26px;
  text-transform: none;
  color: var(--c-text);
}
.integrations-catalog .integrations-catalog-empty {
  margin: 10px 5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* Connection state as a dot and a word, the way a device's state reads in the devices table. */
.integration-state {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integration-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.integration-state.integration-state-connected {
  color: var(--c-success-deep);
}
.integration-state.integration-state-info {
  color: var(--c-link);
}

.integration-detail {
  padding: 15px 0 0;
}

/* shared by the generic integration detail page and by detail pages that have their own route
   and therefore repeat the header themselves (see storage-provider-detail.html) */
.integration-detail-header {
  padding-bottom: 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.integration-detail-header .integration-detail-name {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}
.integration-detail-header .integration-detail-description {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}
.integration-detail-header .help-article-link {
  flex-shrink: 0;
  margin-left: 15px;
  text-decoration: none;
}
.integration-detail-header .help-article-link .article-label {
  margin: 2px;
}

/* the storage providers list inside the integrations catalog */
.storage-providers-configuration-container {
  margin-top: 15px;
}

/* A storage provider's page (storage-provider-detail.html): one form card. While new, the types from the API as tiles;
   the connection fields in two columns, addresses and secrets across both, technical values in mono; the test
   with its result in the Connection group; Enabled and Default as switches. */
.storage-provider__tile {
  color: var(--c-accent);
  background-color: color-mix(in srgb, var(--c-accent) 14%, transparent);
}

.storage-provider__types.choice-tiles {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

md-input-container.storage-provider__field {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.storage-provider__field input,
.storage-provider__field textarea {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 13px;
}

.storage-provider__flag {
  padding-top: 10px;
}

.storage-provider__test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 6px;
}
.storage-provider__test .md-button {
  margin: 0;
}
.storage-provider__test .md-button .material-icons {
  margin-right: 6px;
  font-size: 16px;
  vertical-align: -3px;
}

.storage-provider__result {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  line-height: 18px;
}
.storage-provider__result .material-icons {
  flex: none;
  font-size: 16px;
}
.storage-provider__result.is-ok {
  color: var(--c-success-deep);
}
.storage-provider__result.is-error {
  color: var(--c-danger);
}

.statistics-card-list-container ul {
  list-style-type: none;
  text-align: left;
  padding: 0;
  font-size: 16px;
}

.statistics-card-grid-container .grid-item {
  padding: 5px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  margin: 5px;
  flex: 1 1 auto;
  border-radius: 6px;
}
.statistics-card-grid-container .grid-item.no-data {
  color: color-mix(in srgb, var(--c-ink), transparent 88%);
}

.statistics-card-chart-container .chart-labels .no-data {
  color: color-mix(in srgb, var(--c-ink), transparent 88%) !important;
}
.statistics-card-chart-container .chart-labels .no-data:hover {
  background-color: initial;
  cursor: default;
  text-decoration: none !important;
}
.statistics-card-chart-container .chart-container-content .chart-container-content-labels ul li span:first-child {
  border-radius: 6px;
}

.software-templates .package-title {
  margin: 15px 0 0 5px;
}

.chocolatey-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.placeholder-img {
  font-size: 50px;
}

/* The icon reads as part of the line it belongs to, not as a separate column: the title carried a 15px top
   margin from the package templates, which left it sitting below its own icon. */
.package-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.package-title-cell .package-title {
  margin: 0;
}

/* One slot per package, filled whatever happens to the picture: the source images run from 55px squares to
   1924 × 1667, and a row that sizes itself to whichever arrived is a list that never lines up. */
.package-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  /* Beside a heading rather than in a row of them: the package dialog and the packages of a bundle. */
}
.package-icon img {
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}
.package-icon .package-icon-initial {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-on-fill);
}
.package-icon .package-icon-mark {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.package-icon:has(.package-icon-initial) {
  background-color: var(--c-brand);
}
.package-icon.is-large {
  width: 50px;
  height: 50px;
  border-radius: 6px;
}
.package-icon.is-large img {
  max-width: 42px;
  max-height: 42px;
}
.package-icon.is-large .package-icon-initial {
  font-size: 21px;
}
.package-icon.is-large .package-icon-mark {
  font-size: 28px;
}

.margin-small {
  margin: 2px 0;
}

.margin-top-small {
  margin-top: 6px;
}

/* The package a person is deciding about. It was seven paragraphs of bold label and value, the 42-character
   summary where the description belongs, and nothing to do but copy a shell command. */
.choco-package-dialog {
  max-width: 620px;
}
.choco-package-dialog .md-dialog-content {
  padding: 16px;
}
.choco-package-dialog .package-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.choco-package-dialog .package-head-main {
  min-width: 0;
}
.choco-package-dialog .package-head-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
}
.choco-package-dialog .package-head-id {
  font-family: monospace;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.choco-package-dialog .package-head-chips,
.choco-package-dialog .package-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.choco-package-dialog .package-head-chips {
  margin-top: 7px;
}
.choco-package-dialog .package-tags {
  margin-top: 12px;
}
.choco-package-dialog .package-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--c-surface-subtle);
  font-size: 11.5px;
  color: var(--c-field-text);
}
.choco-package-dialog .package-chip.is-mono {
  font-family: monospace;
}
.choco-package-dialog .package-chip.is-approved {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success-deep);
}
.choco-package-dialog .package-chip.is-approved .material-icons {
  font-size: 13px;
}
.choco-package-dialog .package-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
}
.choco-package-dialog .package-actions .md-button {
  margin: 0;
}
.choco-package-dialog .package-description {
  font-size: 13px;
  color: var(--c-field-text);
  white-space: pre-line;
}
.choco-package-dialog .package-description.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.choco-package-dialog .package-description-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--c-link);
}
.choco-package-dialog .package-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin: 14px 0 0;
  font-size: 13px;
}
.choco-package-dialog .package-facts dt {
  font-size: 12.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.choco-package-dialog .package-facts dd {
  margin: 0;
  color: var(--c-field-text);
  font-variant-numeric: tabular-nums;
}
.choco-package-dialog .package-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
}
.choco-package-dialog .package-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-link);
}
.choco-package-dialog .package-links a .material-icons {
  font-size: 14px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.choco-package-dialog .package-command {
  margin-top: 14px;
}
.choco-package-dialog .package-command-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.organisation-dashboard-dialog md-dialog-content {
  background-color: var(--c-surface-sunken);
}

.billing {
  /* whiteframe cards: see $pageContentTop in values.scss */
  padding-top: calc(16px - 5px);
  margin: 0 -5px;
}
.billing .billing-table {
  margin: 10px;
}
.billing .billing-table tbody tr td:first-child {
  font-weight: bold;
}
.billing .billing-table tbody tr td:first-child .default-module-label {
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 8px;
  font-weight: bold;
}
.billing .billing-table .action-btn {
  min-width: 100px;
}
.billing .payments-container {
  padding: 10px;
}
.billing .active-subscriptions-container {
  padding: 10px;
}
.billing .active-subscriptions-container .active-subscription {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  padding: 10px;
}
.billing .active-subscriptions-container .active-subscription:not(:last-child) {
  margin-bottom: 10px;
}
.billing .active-subscriptions-container .active-subscription .subscription-info-container .subscription-name {
  font-weight: bold;
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-indicator {
  margin: 10px 0px;
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-indicator .md-container {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-indicator.ok .md-bar {
  background-color: var(--c-success);
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-indicator.warning .md-bar {
  background-color: var(--c-accent);
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-indicator.critical .md-bar {
  background-color: var(--c-danger);
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .limit-exceeded {
  color: var(--c-danger);
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-description {
  margin-top: 6px;
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-description .stripe-customer-portal-btn {
  margin: 0;
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-description .update-subscription-btn {
  margin: 0 0 0 10px;
}
.billing .active-subscriptions-container .active-subscription .resource-usage-container .resource-usage-description .license-downgrade-text {
  color: var(--c-accent);
}
@media (min-width: 600px) {
  .billing .active-subscriptions-container .active-subscription .resource-usage-info-container span:not(:last-child) {
    padding-right: 10px;
    border-right: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  }
  .billing .active-subscriptions-container .active-subscription .resource-usage-info-container span:not(:first-child) {
    padding-left: 10px;
  }
}
.billing .quote-request-container {
  padding: 10px;
}

.billing-container .actions-container {
  margin-bottom: 10px;
}

.payments-container .payments-table-container {
  overflow: auto;
}

.payment-info {
  margin-right: auto;
  margin-left: auto;
  border: 3px solid var(--c-brand-dark);
  border-radius: 15px;
  text-align: center;
  box-shadow: 10px 5px 5px lightgray;
}
.payment-info h4 {
  text-align: center;
}
.payment-info .price {
  display: inline-block;
}
.payment-info .price span {
  font-size: 35px;
}
.payment-info .price-info {
  display: inline-block;
}
.payment-info .price-info span {
  font-size: 11px;
  color: var(--c-text);
}
.payment-info .free-months {
  font-size: 20px;
  margin-top: 10px;
  color: var(--c-brand-dark);
}

.switch-top {
  margin-left: auto;
  margin-right: auto;
}
.switch-top button-group .button-group-horizontal {
  width: 140px;
}
.switch-top button-group .button-group-horizontal .button-group-button {
  width: 70px;
}

.switch-bottom {
  margin: 5px auto 10px;
}
.switch-bottom span {
  font-size: 12px;
  color: var(--c-text);
}

/* Billing (selfAdministration/billing/billing.html): a form card per plan (formCard.scss) with its licences as tiles,
   and the payment history as a card with a table. */
.billing-page .billing-plan__heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.billing-page .billing-plan__interval {
  font-weight: 400;
  color: var(--c-field-text);
}
.billing-page .billing-plan__line {
  font-size: 12px;
  color: var(--c-field-text);
}
.billing-page .billing-plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.billing-page .billing-plan__actions .form-card__action {
  margin-left: 0;
}
.billing-page .billing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px 16px 16px;
}
.billing-page .billing-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--c-ink) 4%, transparent);
}
.billing-page .billing-stat__name {
  font-size: 12px;
  color: var(--c-field-text);
}
.billing-page .billing-stat__number {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.billing-page .billing-stat__number.is-over {
  color: var(--c-danger-ink);
}
.billing-page .billing-stat__of {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-field-text);
}
.billing-page .billing-stat__bar {
  height: 6px;
  margin: 6px 0 4px;
  border-radius: 3px;
  background-color: var(--c-border);
  overflow: hidden;
}
.billing-page .billing-stat__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.billing-page .billing-stat__bar span.is-ok {
  background-color: var(--c-success);
}
.billing-page .billing-stat__bar span.is-warning {
  background-color: var(--c-warning);
}
.billing-page .billing-stat__bar span.is-critical {
  background-color: var(--c-danger);
}
.billing-page .billing-stat__line {
  font-size: 12px;
  color: var(--c-field-text);
}
.billing-page .billing-stat__line.is-over {
  color: var(--c-danger-ink);
}
.billing-page .billing-stat__line.is-note {
  color: var(--c-warning-ink);
}
.billing-page .billing-history__scroll {
  overflow-x: auto;
  padding: 0 8px 8px;
}
.billing-page .billing-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--c-text);
}
.billing-page .billing-history__table th {
  padding: 10px 10px;
  border-bottom: 1px solid var(--c-border);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-field-text);
}
.billing-page .billing-history__table td {
  padding: 10px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.billing-page .billing-history__table tbody tr:last-child td {
  border-bottom: 0;
}
.billing-page .billing-history__table .is-fit {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.billing-page .billing-history__period {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.billing-page .billing-history__period .form-card__pill {
  display: inline-block;
  min-width: 66px;
  margin-right: 8px;
  text-align: center;
}
.billing-page .billing-history__invoice {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--c-brand);
}
.billing-page .billing-history__invoice .material-icons {
  font-size: 15px;
}

/* The other plain-table class. It keeps its own geometry — no side padding, because these tables are
   laid out flush inside their container rather than inset in a panel — but the headings and the lines are
   the ones every other table in the app now uses. */
.table-default thead tr {
  border-bottom: 1px solid var(--c-border);
}
.table-default thead tr th {
  padding: 10px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.table-default tbody tr {
  border-bottom: 1px solid var(--c-border);
}
.table-default tbody tr td {
  padding: 10px 0;
}
.table-default tbody tr td:first-child {
  padding-right: 15px;
}
.table-default tbody tr:last-child {
  border: none;
}

.softwarecluster-table .md-button {
  margin-right: 10px !important;
}

/* ── A software report (softwarecluster-detail) ──────────────────────────────────────────────────────────────
   The report and the software it includes as cards, and beside them what the patterns match in the inventory.
   It was one column of toggle boxes with a paragraph of examples in it. */
.software-report .software-table {
  margin-top: 10px;
}

.software-report__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  max-width: 1400px;
}
@media (max-width: 1100px) {
  .software-report__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.software-report__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.software-report__card {
  min-width: 0;
  padding: 14px 16px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}

/* Beside the form, it stays in view while the patterns are edited. */
.software-report__preview {
  position: sticky;
  top: 12px;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .software-report__preview {
    position: static;
  }
}

.software-report__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
}
.software-report__title > i.material-icons {
  font-size: 18px;
  color: var(--c-brand);
}

/* The fields' labels float above them, so each field keeps the room Material gives it; only its trailing
   message space is taken back. */
.software-report__field {
  display: block;
  margin: 22px 0 4px;
}
.software-report__field .md-errors-spacer {
  display: none;
}
.software-report__field textarea {
  min-height: 56px;
}

.software-report__add {
  display: inline-flex;
  margin-top: 4px;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--c-brand);
  cursor: pointer;
}
.software-report__add i.material-icons {
  font-size: 16px;
}
.software-report__add:hover {
  text-decoration: underline;
}

.software-report__pattern {
  display: block;
  margin-bottom: 4px;
}

.software-report__arch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 12px;
}

.software-report__caption {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}

.software-report__seg {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.software-report__seg button {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--c-border);
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.software-report__seg button:last-child {
  border-right: 0;
}
.software-report__seg button:hover:not(.is-on) {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
  color: var(--c-text);
}
.software-report__seg button.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-weight: 500;
}

.software-report__syntax {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.software-report code,
.software-report__syntax code {
  padding: 1px 5px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  font-family: Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--c-text);
}

.software-report__count {
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.software-report__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-brand);
}
.software-report__open i.material-icons {
  font-size: 16px;
}

.software-report__lead {
  margin: -12px 0 10px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.software-report__empty {
  margin: 0;
  padding: 18px 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.software-report__matches {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 0.2s ease;
}
.software-report__matches.is-refreshing {
  opacity: 0.6;
}
.software-report__matches li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--c-border);
}

.software-report__match-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.software-report__versions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.software-report__version {
  padding: 1px 7px;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.software-report__version.is-more, .software-report__version.is-none {
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.software-report__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.software-info-autocomplete.md-autocomplete-suggestions-container {
  margin-top: 2em;
  width: auto;
}

.select-software-dialog .software-search {
  margin: 0 0 10px 0;
}

/* ── Loading ─────────────────────────────────────────────────────────────────────────────────────────────────
   A bar sliding along the Matches card's top edge while it searches; placeholder rows the first time, and
   placeholder chips where a program's versions are still on their way. */
.software-report__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.software-report__progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--c-brand);
  animation: software-report-progress 1.1s ease-in-out infinite;
}
.is-loading .software-report__progress {
  opacity: 1;
}

.software-report__skeleton {
  margin: 0;
  padding: 0;
  list-style: none;
}
.software-report__skeleton li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--c-border);
}
.software-report__skeleton li:nth-child(2) .software-report__skeleton-name {
  width: 45%;
  animation-delay: 0.15s;
}
.software-report__skeleton li:nth-child(3) .software-report__skeleton-name {
  width: 60%;
  animation-delay: 0.3s;
}

.software-report__skeleton-name,
.software-report__skeleton-chip {
  display: block;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 92%);
  animation: software-report-pulse 1.2s ease-in-out infinite;
}

.software-report__skeleton-name {
  width: 55%;
  height: 12px;
}

.software-report__skeleton-chip {
  display: inline-block;
  width: 64px;
  height: 18px;
}
.software-report__skeleton-chip + .software-report__skeleton-chip {
  animation-delay: 0.1s;
}

@keyframes software-report-progress {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
@keyframes software-report-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .software-report__progress::after,
.software-report__skeleton-name,
.software-report__skeleton-chip {
    animation: none;
  }
  .software-report__progress::after {
    left: 0;
    width: 100%;
    opacity: 0.5;
  }
}
.software-detail {
  padding: 16px 0 0;
}
.software-detail .software-detail__card {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 90%);
}
.software-detail .software-detail__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.software-detail .software-detail__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.software-detail .software-detail__icon .material-icons {
  font-size: 22px;
}
.software-detail .software-detail__heading {
  min-width: 0;
}
.software-detail .software-detail__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.software-detail .software-detail__meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--c-field-text);
}
.software-detail .software-detail__meta span + span::before {
  content: "·";
  margin: 0 6px;
}
.software-detail .software-detail__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.software-detail .software-detail__stat {
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--c-surface-subtle);
}
.software-detail .software-detail__stat b {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.software-detail .software-detail__stat span {
  font-size: 12px;
  color: var(--c-field-text);
}
.software-detail .software-detail__stat.is-warning b {
  color: var(--c-warning-ink);
}
.software-detail .software-detail__label {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.software-detail .software-detail__label span {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.software-detail .software-detail__versions {
  margin-top: 16px;
}
.software-detail .software-detail__version-list {
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.software-detail .software-detail__version-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.software-detail .software-detail__version-list::-webkit-scrollbar-track {
  background: transparent;
}
.software-detail .software-detail__version-list::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.software-detail .software-detail__version-list::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.software-detail .software-detail__version-list::-webkit-scrollbar-corner {
  background: transparent;
}
.software-detail .software-detail__version-count {
  margin-top: 4px;
  font-size: 11px;
  text-align: right;
  color: var(--c-field-text);
}
.software-detail .software-detail__version-row {
  display: grid;
  grid-template-columns: minmax(90px, 200px) 1fr 48px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--c-text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.software-detail .software-detail__version-row:hover {
  background-color: var(--c-surface-subtle);
}
.software-detail .software-detail__version-row:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}
.software-detail .software-detail__version-row.is-selected {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
}
.software-detail .software-detail__version-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.software-detail .software-detail__bar {
  height: 8px;
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  overflow: hidden;
}
.software-detail .software-detail__bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background-color: var(--c-brand);
}
.software-detail .software-detail__count {
  text-align: right;
  color: var(--c-field-text);
  font-variant-numeric: tabular-nums;
}
.software-detail .software-detail__devices-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.software-detail .software-detail__devices-label + [infinite-table] .infinite-table-wrapper {
  padding-top: 0;
}
.software-detail .software-detail__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.software-detail .software-detail__chip .material-icons {
  font-size: 14px;
}
.software-detail .software-detail__loading,
.software-detail .software-detail__none {
  color: var(--c-field-text);
}
.software-detail .software-detail__loading {
  margin-top: 12px;
}
.software-detail .software-detail__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.software-detail .software-detail__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.software-detail .software-detail__state.is-live {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success);
}
.software-detail .software-detail__state.is-online {
  background-color: color-mix(in srgb, var(--c-success), transparent 90%);
  color: var(--c-success);
}
.software-detail .software-detail__state.is-offline {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}

.choco-install-dialog {
  width: 480px;
  max-width: calc(100vw - 32px);
}
.choco-install-dialog .choco-install__section + .choco-install__section {
  margin-top: 16px;
}
.choco-install-dialog .choco-install__label {
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-field-text);
}
.choco-install-dialog .choco-install__label span {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.choco-install-dialog .choco-install__search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.choco-install-dialog .choco-install__search .material-icons {
  font-size: 18px;
  color: var(--c-field-text);
}
.choco-install-dialog .choco-install__search input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--c-text);
  font-size: 13px;
}
.choco-install-dialog .choco-install__search:focus-within {
  border-color: var(--c-brand);
}
.choco-install-dialog .choco-install__list {
  max-height: 206px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.choco-install-dialog .choco-install__list .choco-install__option:last-child,
.choco-install-dialog .choco-install__list .choco-install__skeleton:last-child {
  margin-bottom: 0;
}
.choco-install-dialog .choco-install__skeleton {
  position: relative;
  height: 34px;
  margin-bottom: 4px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  overflow: hidden;
}
.choco-install-dialog .choco-install__skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-brand), transparent 90%), transparent);
  transform: translateX(-100%);
  animation: choco-install-sheen 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .choco-install-dialog .choco-install__skeleton::after {
    animation: none;
  }
}
.choco-install-dialog .choco-install__spinner {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 1px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: choco-install-spin 0.8s linear infinite;
}
.choco-install-dialog .choco-install__match {
  padding: 0 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.choco-install-dialog .choco-install__count {
  margin-top: 4px;
  font-size: 11px;
  text-align: right;
  color: var(--c-field-text);
}
.choco-install-dialog .choco-install__note--top {
  margin: 0 0 6px;
}
.choco-install-dialog .choco-install__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 4px;
  padding: 7px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.choco-install-dialog .choco-install__option:hover {
  background-color: var(--c-surface-subtle);
}
.choco-install-dialog .choco-install__option:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}
.choco-install-dialog .choco-install__option.is-selected {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.choco-install-dialog .choco-install__option.is-selected .choco-install__radio {
  border: 5px solid var(--c-brand);
}
.choco-install-dialog .choco-install__radio {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--c-field-text);
  border-radius: 50%;
}
.choco-install-dialog .choco-install__option-text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}
.choco-install-dialog .choco-install__option-text b {
  font-weight: 600;
}
.choco-install-dialog .choco-install__option-text span {
  color: var(--c-field-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.choco-install-dialog .choco-install__select {
  max-width: 180px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: 12px;
}
.choco-install-dialog .choco-install__check {
  margin: 6px 0 0;
  font-size: 13px;
}
.choco-install-dialog .choco-install__devices {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 13px;
  color: var(--c-text);
}
.choco-install-dialog .choco-install__devices b {
  font-weight: 600;
}
.choco-install-dialog .choco-install__devices span {
  color: var(--c-field-text);
}
.choco-install-dialog .choco-install__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.choco-install-dialog .choco-install__pill {
  padding: 4px 14px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: 12px;
  cursor: pointer;
}
.choco-install-dialog .choco-install__pill.is-selected {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-weight: 600;
}
.choco-install-dialog .choco-install__time {
  margin: 0 0 0 6px;
}
.choco-install-dialog .choco-install__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-field-text);
}
.choco-install-dialog .choco-install__note {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-warning), transparent 86%);
  color: var(--c-warning-ink);
  font-size: 12px;
}
.choco-install-dialog .choco-install__error {
  margin-top: 12px;
  color: var(--c-danger-ink);
  font-size: 13px;
}

@keyframes choco-install-sheen {
  to {
    transform: translateX(100%);
  }
}
@keyframes choco-install-spin {
  to {
    transform: rotate(360deg);
  }
}
.update-detail .update-detail__head {
  align-items: flex-start;
}
.update-detail .update-detail__title {
  font-size: 17px;
  line-height: 1.35;
}
.update-detail .update-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin-top: 5px;
}
.update-detail .update-detail__severity {
  padding: 1px 8px;
  border-radius: 999px;
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
  font-size: 11px;
  font-weight: 600;
}
.update-detail .update-detail__severity.is-critical {
  background-color: color-mix(in srgb, var(--c-danger), transparent 86%);
  color: var(--c-danger-ink);
}
.update-detail .update-detail__severity.is-important, .update-detail .update-detail__severity.is-moderate {
  background-color: color-mix(in srgb, var(--c-warning), transparent 84%);
  color: var(--c-warning-ink);
}
.update-detail .update-detail__severity + span::before {
  content: none;
}
.update-detail .update-detail__description {
  margin: 10px 0 0 52px;
  font-size: 13px;
  color: var(--c-field-text);
}
.update-detail .update-detail__description p {
  display: -webkit-box;
  margin: 0 0 2px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.update-detail .update-detail__description p.is-open {
  display: block;
}
.update-detail .update-detail__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-brand);
  font-size: 12px;
  cursor: pointer;
}
.update-detail .update-detail__link .material-icons {
  font-size: 14px;
}
.update-detail .update-detail__failed {
  margin: 10px 0 0 52px;
}
.update-detail .update-detail__switch {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.update-detail .update-detail__switch button {
  padding: 3px 10px;
  border: 0;
  background: none;
  color: var(--c-field-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.update-detail .update-detail__switch button + button {
  border-left: 1px solid var(--c-border);
}
.update-detail .update-detail__switch button.is-selected {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.update-detail .update-detail__switch button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}

.toggle-box {
  border-radius: 6px;
  /* A hairline and a soft shadow rather than Material's z1, which is three stacked shadows and no border.
     The border is what lets the shadow be this light and still separate the panel from the page. */
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 90%);
  /* toggle-box-header is a class on the md-toolbar element, not a class named md-toolbar — the element
     selector is what carries the 36px default this overrides. */
  margin-bottom: 12px;
}
.toggle-box md-toolbar.toggle-box-header {
  min-height: 44px;
  height: 44px;
  /* What the panel is carrying, in the heading. The same pill the device header uses for the same
     counts, so two errors read as two errors wherever they are said — and a closed panel still says
     there is something inside it. */
  /* How many the panel lists ("163", or "12 of 163" while searching), from a view's head search. A plain
     count, so a grey pill without the dot the status pills carry. */
  /* A view's search, in the heading so it stays while the list scrolls. Shorter than the field's 36px
     so it sits inside the 44px bar; the bar's pointer and hover are not the field's. */
}
.toggle-box md-toolbar.toggle-box-header .md-toolbar-tools {
  min-height: 44px;
  height: 44px;
  max-height: 44px;
}
.toggle-box md-toolbar.toggle-box-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-pill.is-error {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-pill.is-warning {
  background-color: color-mix(in srgb, var(--c-accent), transparent 84%);
  color: var(--c-accent);
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-pill.is-info {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-count {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-search {
  display: flex;
  align-items: center;
  margin-right: 8px;
  cursor: default;
}
.toggle-box md-toolbar.toggle-box-header .toggle-box-search .search-bar {
  height: 30px;
}
.toggle-box .toggle-box-header {
  background-color: var(--c-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.toggle-box .toggle-box-header:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
.toggle-box .toggle-box-header:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}
.toggle-box .toggle-box-header.is-closed {
  border-bottom-color: transparent;
}
.toggle-box .toggle-box-header .md-toolbar-tools {
  padding: 0 8px;
}
.toggle-box .toggle-box-header .toggle-box-chevron {
  transition: transform 0.2s ease;
}
.toggle-box .toggle-box-header .toggle-box-chevron.is-closed {
  transform: rotate(-90deg);
}
.toggle-box .toggle-box-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease;
}
.toggle-box .toggle-box-collapse.closed {
  display: grid;
  grid-template-rows: 0fr;
}
.toggle-box .toggle-box-collapse .toggle-box-collapse-inner {
  overflow: hidden;
  min-height: 0;
}
.toggle-box .toggle-box-content {
  background-color: var(--c-surface);
}
.toggle-box .table {
  margin-bottom: 0;
}
.toggle-box md-toolbar {
  min-height: 36px;
  height: 36px;
}

.tags-container {
  /* its cards keep .whiteframe-style 5px margins; the page takes them back ($pageContentTop in values.scss) */
  margin: 0 -5px;
  /* A card, not a chip — it holds a name, a usage badge, actions and an expandable device list. It was
     called .tag, which collided with the tag chip component the moment that existed. */
}
.tags-container h3 {
  margin: 16px 5px 8px;
}
.tags-container h3:first-child {
  margin-top: 16px;
}
.tags-container h3 {
  font-weight: 500;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.tags-container .tag-card {
  padding: 10px 14px;
  min-width: 220px;
  max-width: 320px;
  margin: 5px;
  border-radius: 6px;
  border-left: 3px solid var(--c-neutral);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* The devices a tag is on. They are .tag chips like everywhere else now; this list only has to lay
     them out. */
}
.tags-container .tag-card:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 90%);
  border-left-color: var(--c-brand-muted);
}
.tags-container .tag-card .tag-name {
  font-weight: 500;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tags-container .tag-card .tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: var(--c-surface-sunken);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}
.tags-container .tag-card .tag-actions {
  margin-left: 8px;
  gap: 2px;
}
.tags-container .tag-card .tag-actions .material-icons {
  font-size: 18px;
  color: var(--c-neutral);
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tags-container .tag-card .tag-actions .material-icons:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.tags-container .tag-card .tag-actions .delete-icon:hover {
  color: var(--c-danger);
  background-color: color-mix(in srgb, var(--c-danger), transparent 92%);
}
.tags-container .tag-card .assigned-hardware-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
}
.tags-container .tag-card .assigned-hardware-section p {
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.tags-container .tag-card .hardware-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tags-container .tag-card .hardware-list .tag {
  cursor: pointer;
}
.tags-container .tag-card .hardware-list .tag:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.tags-container .system-tag {
  border-left-color: var(--c-brand-muted);
}
.tags-container .system-tag:hover {
  border-left-color: var(--c-brand);
}
.tags-container .system-tag .tag-badge {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}

.sign-up-done-container {
  text-align: center;
}
.sign-up-done-container .title {
  font-size: 24px;
  margin-bottom: 20px;
}
.sign-up-done-container .resend-email-link {
  color: var(--c-brand);
}
.sign-up-done-container .thumb-up {
  font-size: 60px;
}

.superuser .top-toolbar {
  background-color: var(--c-ink) !important;
}
.superuser .sidebar-content {
  background-color: var(--c-ink) !important;
}

/* Getting started. It was thirteen links in three shadowed cards of three different lengths, identical on the
   first day and after five hundred devices had been installed. It is a checklist that knows where you are, and
   a list of places to go once you are set up. */
.getting-started {
  margin-top: 10px;
  /* The circle as a checkbox: an open step's ticks it, one ticked by hand unticks it. On hover the open one shows
     the tick it would get, in the accent; one ticked by hand is grey, not the green of a step XEOX found done. */
}
.getting-started .getting-started-card {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 8px;
  background-color: var(--c-surface);
  margin-bottom: 10px;
}
.getting-started .getting-started-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--c-border);
}
.getting-started .getting-started-head-text h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}
.getting-started .getting-started-head-text p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.getting-started .getting-started-progress {
  margin-left: auto;
  min-width: 180px;
  text-align: right;
}
.getting-started .getting-started-progress-count {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-variant-numeric: tabular-nums;
}
.getting-started .getting-started-progress-bar {
  display: block;
  height: 5px;
  margin-top: 5px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 93%);
  overflow: hidden;
}
.getting-started .getting-started-progress-bar span {
  display: block;
  height: 100%;
  background-color: var(--c-success);
  transition: width 0.4s ease;
}
.getting-started .getting-started-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--c-border);
}
.getting-started .getting-started-step:last-child {
  border-bottom: 0;
}
.getting-started .getting-started-step.is-blocked {
  opacity: 0.6;
}
.getting-started .getting-started-step.is-manual .getting-started-step-title {
  font-weight: 400;
  color: var(--c-field-text);
}
.getting-started .getting-started-mark {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Not done yet: an outline, not an empty box that reads as a disabled checkbox. */
}
.getting-started .getting-started-mark.is-done {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success-deep);
}
.getting-started .getting-started-mark.is-todo {
  border: 1.5px dashed var(--c-border);
}
.getting-started .getting-started-mark .material-icons {
  font-size: 14px;
}
.getting-started button.getting-started-mark.is-toggle {
  padding: 0;
  background: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.getting-started button.getting-started-mark.is-toggle.is-todo {
  border: 1.5px solid var(--c-neutral);
  color: transparent;
}
.getting-started button.getting-started-mark.is-toggle.is-todo:hover, .getting-started button.getting-started-mark.is-toggle.is-todo:focus-visible {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.getting-started button.getting-started-mark.is-toggle.is-manual {
  border: 0;
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.getting-started button.getting-started-mark.is-toggle.is-manual:hover, .getting-started button.getting-started-mark.is-toggle.is-manual:focus-visible {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.getting-started button.getting-started-mark.is-toggle:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.getting-started button.getting-started-mark.is-toggle.is-saving {
  cursor: progress;
  opacity: 0.6;
}
.getting-started .getting-started-step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.getting-started .getting-started-step-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
}
.getting-started .getting-started-step.is-done .getting-started-step-title {
  font-weight: 400;
  color: var(--c-field-text);
}
.getting-started .getting-started-step-sub {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.getting-started .getting-started-step-action {
  flex: none;
  align-self: center;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.getting-started .getting-started-step-action .md-button {
  margin: 0;
  min-width: 0;
}
.getting-started .getting-started-step-action a.is-blocked {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
}
.getting-started .getting-started-step-action .getting-started-undo {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.getting-started .getting-started-explore-label {
  padding: 11px 16px 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.getting-started .getting-started-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 24px;
  padding: 4px 16px 12px;
}
.getting-started .getting-started-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  color: var(--c-text);
}
.getting-started .getting-started-link:hover {
  text-decoration: none;
}
.getting-started .getting-started-link:hover .getting-started-link-title {
  color: var(--c-link);
}
.getting-started .getting-started-link > .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-top: 1px;
}
.getting-started .getting-started-link-title {
  display: block;
  font-size: 13px;
}
.getting-started .getting-started-link-sub {
  display: block;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.getting-started .getting-started-link-out {
  margin-left: auto;
  font-size: 13px !important;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.iti__flag {
  background-image: url("/lib/intl-tel-input/build/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("/lib/intl-tel-input/build/img/flags@2x.png");
  }
}
/* The country list of a phone field, in the theme's colours: it opens on the page's body (dropdownContainer) as the
   library's white list with grey text, which in the dark theme was a white sheet with unreadable names. Under .iti,
   as the list always is: the library's own stylesheet comes after ours. */
.iti .iti__country-list {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface-raised);
  color: var(--c-text);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
[data-theme=dark] .iti .iti__country-list {
  color-scheme: dark;
}
.iti .iti__country.iti__highlight {
  background-color: var(--c-row-hover);
}
.iti .iti__country-name {
  color: var(--c-text);
}
.iti .iti__dial-code {
  color: var(--c-field-text);
}
.iti .iti__divider {
  border-bottom-color: var(--c-border);
}
.iti .iti__selected-flag {
  outline: none;
}
.iti .iti__selected-flag:focus-visible {
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--c-brand);
}
.iti .iti__arrow {
  border-top-color: var(--c-field-text);
}
.iti .iti__arrow.iti__arrow--up {
  border-bottom-color: var(--c-field-text);
}

.ad-sync-wizard {
  min-width: 515px;
  min-height: 320px;
}
.ad-sync-wizard .fade-in.ng-enter,
.ad-sync-wizard .fade-in.ng-leave {
  transition: all ease-out 0.3s;
}
.ad-sync-wizard .fade-in.ng-enter,
.ad-sync-wizard .fade-in.ng-leave.ng-leave-active {
  height: 0;
}
.ad-sync-wizard .fade-in.ng-leave,
.ad-sync-wizard .fade-in.ng-enter.ng-enter-active {
  height: 100px;
}

.job-wizard .fade-in.ng-enter,
.job-wizard .fade-in.ng-leave {
  transition: all ease-out 0.3s;
}
.job-wizard .fade-in.ng-enter,
.job-wizard .fade-in.ng-leave.ng-leave-active {
  height: 0;
}
.job-wizard .fade-in.ng-leave,
.job-wizard .fade-in.ng-enter.ng-enter-active {
  height: 100px;
}
.job-wizard .time-field-without-label {
  margin-top: 0;
}
.job-wizard .time-field-without-label label {
  display: none;
}
.job-wizard .summary-headline {
  font-weight: bold;
  color: var(--c-accent);
}
.job-wizard .summary-entry {
  font-weight: bold;
}
.job-wizard .last-summary-entry {
  margin-top: 30px;
}
.job-wizard .second-input {
  margin-top: 20px;
}
.job-wizard md-divider {
  margin-bottom: 10px;
  visibility: hidden;
}

.email-editor {
  margin-top: 15px;
}
.email-editor .big-title {
  width: 60px;
}
.email-editor .preview-container {
  position: absolute;
  top: 562px;
}
.email-editor .preview-container .title {
  margin-top: 5px;
}
.email-editor .ace-editor {
  top: 600px !important;
  min-height: 300px;
}

.statistics-container .days-selector {
  width: 200px;
}
.statistics-container .agent-statistics-container {
  margin-top: 20px;
}
.statistics-container .agent-statistics-container .versions-table tbody tr td {
  padding: 10px;
}
.statistics-container .agent-statistics-container .versions-table tbody tr td:last-child {
  text-align: right;
}
.statistics-container .agent-statistics-container .versions-table tbody tr.active {
  background-color: var(--c-success);
}
.statistics-container .agent-statistics-container .versions-table tbody tr.active .active-count {
  font-weight: bold;
}
.statistics-container .verifier-statistics-container {
  margin-top: 20px;
}
.statistics-container .verifier-statistics-container .verifier-table tbody tr td {
  padding: 10px;
}
.statistics-container .verifier-statistics-container .verifier-table tbody tr.superuser-without-tfa {
  background-color: var(--c-danger);
  font-weight: bold;
}
.statistics-container .agent-registrations-statistics-container, .statistics-container .job-creation-statistics-container, .statistics-container .trial-end-container {
  margin-top: 20px;
}
.statistics-container .agent-registrations-statistics-container .table-default thead tr th, .statistics-container .job-creation-statistics-container .table-default thead tr th, .statistics-container .trial-end-container .table-default thead tr th {
  padding-right: 20px;
}
.statistics-container .agent-registrations-statistics-container .table-default tbody tr td, .statistics-container .job-creation-statistics-container .table-default tbody tr td, .statistics-container .trial-end-container .table-default tbody tr td {
  padding-right: 20px;
}
.statistics-container .radius-statistics-container, .statistics-container .network-scans-container {
  margin-top: 20px;
}
.statistics-container .radius-statistics-container table.table-default thead th, .statistics-container .network-scans-container table.table-default thead th {
  padding: 15px;
}
.statistics-container .radius-statistics-container table.table-default tbody tr td, .statistics-container .network-scans-container table.table-default tbody tr td {
  padding: 15px;
}
.statistics-container .radius-statistics-container table.table-default tbody tr.radius-offline, .statistics-container .network-scans-container table.table-default tbody tr.radius-offline {
  background-color: var(--c-danger);
  font-weight: bold;
}
.statistics-container .job-statistics-container {
  margin-top: 20px;
}
.statistics-container .job-statistics-container table.table-default thead th {
  padding: 15px;
}
.statistics-container .job-statistics-container table.table-default tbody tr td {
  padding: 15px;
}
.statistics-container .job-statistics-container table.table-default tbody tr.radius-offline {
  background-color: var(--c-danger);
  font-weight: bold;
}

.script-editor {
  margin-top: 15px;
}
.script-editor .script-properties {
  padding-right: 4px;
}
.script-editor .script-properties md-checkbox {
  flex: 0 0 auto;
  margin-bottom: 2px;
}
.script-editor .script-properties .checkbox-hint {
  flex: 0 0 auto;
  margin: 0 0 14px 36px;
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.script-editor .pane-gutter {
  display: none;
}
@media (min-width: 960px) {
  .script-editor .pane-gutter {
    display: block;
    flex: 0 0 8px;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
  }
  .script-editor .pane-gutter::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 32px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--c-ink), transparent 82%);
    transition: background 0.15s ease;
  }
  .script-editor .pane-gutter:hover::after {
    background: color-mix(in srgb, var(--c-ink), transparent 60%);
  }
}
.script-editor .code-editor {
  position: relative;
  height: calc(100vh - 180px);
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-surface);
}
.script-editor .code-editor .ace-editor {
  position: relative;
  top: 0;
  width: 100%;
  height: calc(100% - 40px);
  font-size: 14px;
}

body.pane-resizing {
  cursor: col-resize;
  user-select: none;
}

.restrict-by-release-date-wizard-page .min-number-of-days-after-update-release-input-container {
  width: 40px;
  top: 10px;
}
.restrict-by-release-date-wizard-page .min-number-of-days-after-update-release-input-container input {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

.remote-waiting-notification.ui-notification .default-notification {
  min-height: 80px;
  height: auto;
}
.remote-waiting-notification.ui-notification .default-notification .notification-copy {
  align-self: flex-start;
  display: block !important;
  flex: 1 1 auto !important;
  max-width: 270px;
}
.remote-waiting-notification.ui-notification .default-notification .waiting-message {
  display: block;
  margin-top: 3px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.remote-waiting-notification.ui-notification .default-notification .waiting-message:after {
  display: inline-block;
  font-size: 16px;
  line-height: 18px;
  margin-left: 6px;
  content: ".";
  animation: dots 1s steps(5, end) infinite;
  vertical-align: top;
}
@keyframes dots {
  0%, 20% {
    color: color-mix(in srgb, var(--c-success), transparent 100%);
    text-shadow: 0.35em 0 0 color-mix(in srgb, var(--c-success), transparent 100%), 0.7em 0 0 color-mix(in srgb, var(--c-success), transparent 100%);
  }
  40% {
    color: color-mix(in srgb, var(--c-success), transparent 0%);
    text-shadow: 0.35em 0 0 color-mix(in srgb, var(--c-success), transparent 100%), 0.7em 0 0 color-mix(in srgb, var(--c-success), transparent 100%);
  }
  60% {
    text-shadow: 0.35em 0 0 color-mix(in srgb, var(--c-success), transparent 0%), 0.7em 0 0 color-mix(in srgb, var(--c-success), transparent 100%);
  }
  80%, 100% {
    text-shadow: 0.35em 0 0 color-mix(in srgb, var(--c-success), transparent 0%), 0.7em 0 0 color-mix(in srgb, var(--c-success), transparent 0%);
  }
}

.teamviewer-configuration-container {
  margin-top: 15px;
  max-width: 500px;
}

.getscreenme-configuration-container {
  margin-top: 15px;
  max-width: 700px;
}

.custom-fields {
  padding: 10px;
}
.custom-fields .custom-fields-table thead tr th {
  padding-right: 15px;
}
.custom-fields .custom-fields-table tbody tr td {
  padding-right: 15px;
}
.custom-fields .custom-fields-table tbody tr td.mapping-arrow {
  padding: 10px 20px;
}

/* Custom fields as cards (Settings → Asset Management, cmdbConfig/*Config.html): a row a field, the spare field in
   mono, the name it is given, the class as a pill, quiet edit and delete. */
.custom-fields-card__empty {
  margin: 0;
  padding: 14px 20px 16px;
}

.custom-field-rows {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.custom-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 20px;
  font-size: 13.5px;
}
.custom-field-row + .custom-field-row {
  border-top: 1px solid var(--c-border);
}
.custom-field-row__slot {
  flex: none;
  min-width: 120px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: var(--c-field-text);
}
.custom-field-row__arrow.material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.custom-field-row__name {
  flex: 1;
  min-width: 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.custom-field-row__class {
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.custom-field-row__button {
  display: inline-flex;
  flex: none;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.custom-field-row__button .material-icons {
  font-size: 18px;
}
.custom-field-row__button:hover {
  background-color: var(--c-row-hover);
  color: var(--c-brand);
}
.custom-field-row__button.is-danger:hover {
  background-color: color-mix(in srgb, var(--c-danger) 10%, transparent);
  color: var(--c-danger);
}

/* Auto assignment (settings/hardware/hardware.html): each setting as a list of choices with a line each, the chosen
   one framed, the default marked; Save in the card's foot. */
.auto-assignment__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
}
.auto-assignment__intro {
  margin: 2px 0 10px;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.auto-assignment__options {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.auto-assignment__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.auto-assignment__option:hover {
  border-color: var(--c-brand);
}
.auto-assignment__option:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.auto-assignment__option.is-on {
  border-color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 6%, var(--c-surface));
}
.auto-assignment__radio {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 2px solid color-mix(in srgb, var(--c-ink), transparent 62%);
  border-radius: 50%;
}
.is-on > .auto-assignment__radio {
  border: 5px solid var(--c-brand);
}
.auto-assignment__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.auto-assignment__name {
  font-size: 13.5px;
  font-weight: 500;
}
.auto-assignment__default {
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--c-field-text);
  background-color: color-mix(in srgb, var(--c-ink) 7%, transparent);
}
.auto-assignment__hint {
  font-size: 12.5px;
  color: var(--c-field-text);
}
.auto-assignment__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
}
.auto-assignment__unsaved {
  font-size: 12px;
  color: var(--c-warning-ink);
}
.auto-assignment__save.md-button {
  margin: 0;
}

.settings-cards .form-card {
  margin-top: 0;
}

/*!
 *  MDL2 Icons 1.0.0 by @sdorman -
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "MDL2";
  src: url("./scss/fonts/mdl2/mdl2.eot?v=1.60i");
  src: url("./scss/fonts/mdl2/mdl2.eot?#iefix&v=1.60i") format("embedded-opentype"), url("./scss/fonts/mdl2/mdl2.woff2?v=1.60i") format("woff2"), url("./scss/fonts/mdl2/mdl2.woff?v=1.60i") format("woff"), url("./scss/fonts/mdl2/mdl2.ttf?v=1.60i") format("truetype"), url("./scss/fonts/mdl2/mdl2.svg?v=1.60i#mdl2regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.mdl2 {
  font-family: "MDL2";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

/* makes the font 33% larger relative to the icon container */
.mdl2-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.mdl2-2x {
  font-size: 2em;
}

.mdl2-3x {
  font-size: 3em;
}

.mdl2-4x {
  font-size: 4em;
}

.mdl2-5x {
  font-size: 5em;
}

.mdl2-6x {
  font-size: 6em;
}

.mdl2-fw {
  width: 1.2857142857em;
  text-align: center;
}

.mdl2-ul {
  padding-left: 0;
  margin-left: 1.25em;
  list-style-type: none;
}
.mdl2-ul > li {
  position: relative;
}

.mdl2-li {
  position: absolute;
  left: -1.25em;
  width: 1.25em;
  top: 0.1428571429em;
  text-align: center;
}
.mdl2-li.mdl2-lg {
  left: -0.9642857143em;
}

.mdl2-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.mdl2-pull-left {
  float: left;
}

.mdl2-pull-right {
  float: right;
}

.mdl2.mdl2-pull-left {
  margin-right: 0.3em;
}
.mdl2.mdl2-pull-right {
  margin-left: 0.3em;
}

.mdl2.pull-left {
  margin-right: 0.3em;
}
.mdl2.pull-right {
  margin-left: 0.3em;
}

.mdl2-spin {
  -webkit-animation: mdl2-spin 2s infinite linear;
  -moz-animation: mdl2-spin 2s infinite linear;
  -o-animation: mdl2-spin 2s infinite linear;
  animation: mdl2-spin 2s infinite linear;
}

.mdl2-pulse {
  -webkit-animation: mdl2-spin 1s infinite steps(8);
  -moz-animation: mdl2-spin 1s infinite steps(8);
  -o-animation: mdl2-spin 1s infinite steps(8);
  animation: mdl2-spin 1s infinite steps(8);
}

@-webkit-keyframes mdl2-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-moz-keyframes mdl2-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes mdl2-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes mdl2-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.mdl2-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.mdl2-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mdl2-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.mdl2-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.mdl2-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .mdl2-rotate-90,
:root .mdl2-rotate-180,
:root .mdl2-rotate-270,
:root .mdl2-flip-horizontal,
:root .mdl2-flip-vertical {
  filter: none;
}

.mdl2-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.mdl2-stack-1x, .mdl2-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.mdl2-stack-1x {
  line-height: inherit;
}

.mdl2-stack-2x {
  font-size: 2em;
}

.mdl2-inverse {
  color: #fff;
}

.mdl2-accept:before {
  content: "\e8fb";
}

.mdl2-accounts:before {
  content: "\e910";
}

.mdl2-add:before {
  content: "\e710";
}

.mdl2-add-friend:before {
  content: "\e8fa";
}

.mdl2-admin:before {
  content: "\e7ef";
}

.mdl2-align-center:before {
  content: "\e8e3";
}

.mdl2-align-left:before {
  content: "\e8e4";
}

.mdl2-align-right:before {
  content: "\e8e2";
}

.mdl2-all-apps:before {
  content: "\e71d";
}

.mdl2-arrow-html-legacy:before {
  content: "\e0d5";
}

.mdl2-arrow-html-mirrored-legacy:before {
  content: "\e0ae";
}

.mdl2-attach:before {
  content: "\e723";
}

.mdl2-paperclip:before {
  content: "\e723";
}

.mdl2-attach-camera:before {
  content: "\e8a2";
}

.mdl2-audio:before {
  content: "\e8d6";
}

.mdl2-back:before {
  content: "\e72b";
}

.mdl2-back-bttn-arrow-20-legacy:before {
  content: "\e0c4";
}

.mdl2-back-bttn-arrow-42-legacy:before {
  content: "\e0a6";
}

.mdl2-back-bttn-mirrored-arrow-20-legacy:before {
  content: "\e0ad";
}

.mdl2-back-bttn-mirrored-arrow-42-legacy:before {
  content: "\e0ab";
}

.mdl2-back-to-window:before {
  content: "\e73f";
}

.mdl2-battery-0:before {
  content: "\e850";
}

.mdl2-battery-1:before {
  content: "\e851";
}

.mdl2-battery-10:before {
  content: "\e83f";
}

.mdl2-battery-2:before {
  content: "\e852";
}

.mdl2-battery-3:before {
  content: "\e853";
}

.mdl2-battery-4:before {
  content: "\e854";
}

.mdl2-battery-5:before {
  content: "\e855";
}

.mdl2-battery-6:before {
  content: "\e856";
}

.mdl2-battery-7:before {
  content: "\e857";
}

.mdl2-battery-8:before {
  content: "\e858";
}

.mdl2-battery-9:before {
  content: "\e859";
}

.mdl2-battery-charging-0:before {
  content: "\e85a";
}

.mdl2-battery-charging-1:before {
  content: "\e85b";
}

.mdl2-battery-charging-10:before {
  content: "\ea93";
}

.mdl2-battery-charging-2:before {
  content: "\e85c";
}

.mdl2-battery-charging-3:before {
  content: "\e85d";
}

.mdl2-battery-charging-4:before {
  content: "\e85e";
}

.mdl2-battery-charging-5:before {
  content: "\e85f";
}

.mdl2-battery-charging-6:before {
  content: "\e860";
}

.mdl2-battery-charging-7:before {
  content: "\e861";
}

.mdl2-battery-charging-8:before {
  content: "\e862";
}

.mdl2-battery-charging-9:before {
  content: "\e83e";
}

.mdl2-battery-saver-0:before {
  content: "\e863";
}

.mdl2-battery-saver-1:before {
  content: "\e864";
}

.mdl2-battery-saver-10:before {
  content: "\ea95";
}

.mdl2-battery-saver-2:before {
  content: "\e865";
}

.mdl2-battery-saver-3:before {
  content: "\e866";
}

.mdl2-battery-saver-4:before {
  content: "\e867";
}

.mdl2-battery-saver-5:before {
  content: "\e868";
}

.mdl2-battery-saver-6:before {
  content: "\e869";
}

.mdl2-battery-saver-7:before {
  content: "\e86a";
}

.mdl2-battery-saver-8:before {
  content: "\e86b";
}

.mdl2-battery-saver-9:before {
  content: "\ea94";
}

.mdl2-battery-unknown:before {
  content: "\e996";
}

.mdl2-block-contact:before {
  content: "\e8f8";
}

.mdl2-blocked-legacy:before {
  content: "\e25b";
}

.mdl2-bold:before {
  content: "\e8dd";
}

.mdl2-bookmarks:before {
  content: "\e8a4";
}

.mdl2-browse-photos:before {
  content: "\e7c5";
}

.mdl2-bulleted-list:before {
  content: "\e8fd";
}

.mdl2-calculator:before {
  content: "\e8ef";
}

.mdl2-calendar:before {
  content: "\e787";
}

.mdl2-calendar-day:before {
  content: "\e8bf";
}

.mdl2-calendar-week:before {
  content: "\e8c0";
}

.mdl2-camera:before {
  content: "\e722";
}

.mdl2-cancel:before {
  content: "\e711";
}

.mdl2-caption:before {
  content: "\e8ba";
}

.mdl2-cc:before {
  content: "\e7f0";
}

.mdl2-cellphone:before {
  content: "\e8ea";
}

.mdl2-characters:before {
  content: "\e8c1";
}

.mdl2-checkbox:before {
  content: "\e739";
}

.mdl2-checkbox-composite:before {
  content: "\e73a";
}

.mdl2-checkbox-composite-legacy:before {
  content: "\e0a2";
}

.mdl2-checkbox-composite-reversed:before {
  content: "\e73d";
}

.mdl2-checkbox-composite-reversed-legacy:before {
  content: "\e005";
}

.mdl2-checkbox-fill:before {
  content: "\e73b";
}

.mdl2-checkbox-fill-legacy:before {
  content: "\e002";
}

.mdl2-checkbox-fill-zero-width-legacy:before {
  content: "\e009";
}

.mdl2-checkbox-indeterminate:before {
  content: "\e73c";
}

.mdl2-checkbox-indeterminate-legacy:before {
  content: "\e004";
}

.mdl2-checkbox-legacy:before {
  content: "\e003";
}

.mdl2-check-mark:before {
  content: "\e73e";
}

.mdl2-check-mark-legacy:before {
  content: "\e001";
}

.mdl2-check-mark-zero-width-legacy:before {
  content: "\e008";
}

.mdl2-chrome-back:before {
  content: "\e830";
}

.mdl2-chrome-back-mirrored:before {
  content: "\ea47";
}

.mdl2-clear:before {
  content: "\e894";
}

.mdl2-clear-selection:before {
  content: "\e8e6";
}

.mdl2-close-pane:before {
  content: "\e89f";
}

.mdl2-cloud:before {
  content: "\e753";
}

.mdl2-comment:before {
  content: "\e90a";
}

.mdl2-comment-legacy:before {
  content: "\e134";
}

.mdl2-contact:before {
  content: "\e77b";
}

.mdl2-contact-2:before {
  content: "\e8d4";
}

.mdl2-contact-info:before {
  content: "\e779";
}

.mdl2-contact-presence:before {
  content: "\e8cf";
}

.mdl2-copy:before {
  content: "\e8c8";
}

.mdl2-crop:before {
  content: "\e7a8";
}

.mdl2-cut:before {
  content: "\e8c6";
}

.mdl2-delete:before {
  content: "\e74d";
}

.mdl2-trash:before {
  content: "\e74d";
}

.mdl2-trashcan:before {
  content: "\e74d";
}

.mdl2-directions:before {
  content: "\e8f0";
}

.mdl2-disable-updates:before {
  content: "\e8d8";
}

.mdl2-disconnect-drive:before {
  content: "\e8cd";
}

.mdl2-dislike:before {
  content: "\e8e0";
}

.mdl2-dislike-legacy:before {
  content: "\e19e";
}

.mdl2-dock-bottom:before {
  content: "\e90e";
}

.mdl2-dock-left:before {
  content: "\e90c";
}

.mdl2-dock-right:before {
  content: "\e90d";
}

.mdl2-document:before {
  content: "\e8a5";
}

.mdl2-download:before {
  content: "\e896";
}

.mdl2-edit:before {
  content: "\e70f";
}

.mdl2-pencil:before {
  content: "\e70f";
}

.mdl2-emoji:before {
  content: "\e899";
}

.mdl2-emoji-2:before {
  content: "\e76e";
}

.mdl2-favorite-2-legacy:before {
  content: "\e249";
}

.mdl2-favorite-legacy:before {
  content: "\e113";
}

.mdl2-favorite-list:before {
  content: "\e728";
}

.mdl2-favorite-star:before {
  content: "\e734";
}

.mdl2-favorite-star-fill:before {
  content: "\e735";
}

.mdl2-filter:before {
  content: "\e71c";
}

.mdl2-find-legacy:before {
  content: "\e11a";
}

.mdl2-flag:before {
  content: "\e7c1";
}

.mdl2-folder:before {
  content: "\e8b7";
}

.mdl2-font:before {
  content: "\e8d2";
}

.mdl2-fontcolor:before {
  content: "\e8d3";
}

.mdl2-font-decrease:before {
  content: "\e8e7";
}

.mdl2-font-increase:before {
  content: "\e8e8";
}

.mdl2-font-size:before {
  content: "\e8e9";
}

.mdl2-forward:before {
  content: "\e72a";
}

.mdl2-four-bars:before {
  content: "\e908";
}

.mdl2-full-screen:before {
  content: "\e740";
}

.mdl2-globe:before {
  content: "\e774";
}

.mdl2-go:before {
  content: "\e8ad";
}

.mdl2-go-to-start:before {
  content: "\e8fc";
}

.mdl2-go-to-today:before {
  content: "\e8d1";
}

.mdl2-half-star-left:before {
  content: "\e7c6";
}

.mdl2-half-star-right:before {
  content: "\e7c7";
}

.mdl2-hangup:before {
  content: "\e778";
}

.mdl2-heart-broken-legacy:before {
  content: "\e007";
}

.mdl2-heart-broken-zero-width-legacy:before {
  content: "\e00c";
}

.mdl2-heart-fill-legacy:before {
  content: "\e0a5";
}

.mdl2-heart-fill-zero-width-legacy:before {
  content: "\e00b";
}

.mdl2-heart-legacy:before {
  content: "\e006";
}

.mdl2-help:before {
  content: "\e897";
}

.mdl2-hide-bcc:before {
  content: "\e8c5";
}

.mdl2-highlight:before {
  content: "\e7e6";
}

.mdl2-home:before {
  content: "\e80f";
}

.mdl2-import:before {
  content: "\e8b5";
}

.mdl2-import-all:before {
  content: "\e8b6";
}

.mdl2-important:before {
  content: "\e8c9";
}

.mdl2-italic:before {
  content: "\e8db";
}

.mdl2-keyboard-classic:before {
  content: "\e765";
}

.mdl2-leave-chat:before {
  content: "\e89b";
}

.mdl2-library:before {
  content: "\e8f1";
}

.mdl2-like:before {
  content: "\e8e1";
}

.mdl2-like-dislike:before {
  content: "\e8df";
}

.mdl2-like-dislike-legacy:before {
  content: "\e19d";
}

.mdl2-like-legacy:before {
  content: "\e19f";
}

.mdl2-link:before {
  content: "\e71b";
}

.mdl2-list:before {
  content: "\ea37";
}

.mdl2-location:before {
  content: "\e81d";
}

.mdl2-mail:before {
  content: "\e715";
}

.mdl2-mail-fill:before {
  content: "\e8a8";
}

.mdl2-mail-forward:before {
  content: "\e89c";
}

.mdl2-mail-message-legacy:before {
  content: "\e20b";
}

.mdl2-mail-reply:before {
  content: "\e8ca";
}

.mdl2-mail-reply-all:before {
  content: "\e8c2";
}

.mdl2-manage:before {
  content: "\e912";
}

.mdl2-map-drive:before {
  content: "\e8ce";
}

.mdl2-map-pin:before {
  content: "\e707";
}

.mdl2-memo:before {
  content: "\e77c";
}

.mdl2-voicemail:before {
  content: "\e77c";
}

.mdl2-message:before {
  content: "\e88d";
}

.mdl2-microphone:before {
  content: "\e720";
}

.mdl2-mob-battery-0:before {
  content: "\eba0";
}

.mdl2-mob-battery-1:before {
  content: "\eba1";
}

.mdl2-mob-battery-10:before {
  content: "\ebaa";
}

.mdl2-mob-battery-2:before {
  content: "\eba2";
}

.mdl2-mob-battery-3:before {
  content: "\eba3";
}

.mdl2-mob-battery-4:before {
  content: "\eba4";
}

.mdl2-mob-battery-5:before {
  content: "\eba5";
}

.mdl2-mob-battery-6:before {
  content: "\eba6";
}

.mdl2-mob-battery-7:before {
  content: "\eba7";
}

.mdl2-mob-battery-8:before {
  content: "\eba8";
}

.mdl2-mob-battery-9:before {
  content: "\eba9";
}

.mdl2-mob-battery-chargin-10:before {
  content: "\ebb5";
}

.mdl2-mob-battery-charging-0:before {
  content: "\ebab";
}

.mdl2-mob-battery-charging-1:before {
  content: "\ebac";
}

.mdl2-mob-battery-charging-2:before {
  content: "\ebad";
}

.mdl2-mob-battery-charging-3:before {
  content: "\ebae";
}

.mdl2-mob-battery-charging-4:before {
  content: "\ebaf";
}

.mdl2-mob-battery-charging-5:before {
  content: "\ebb0";
}

.mdl2-mob-battery-charging-6:before {
  content: "\ebb1";
}

.mdl2-mob-battery-charging-7:before {
  content: "\ebb2";
}

.mdl2-mob-battery-charging-8:before {
  content: "\ebb3";
}

.mdl2-mob-battery-charging-9:before {
  content: "\ebb4";
}

.mdl2-mob-battery-saver-0:before {
  content: "\ebb6";
}

.mdl2-mob-battery-saver-1:before {
  content: "\ebb7";
}

.mdl2-mob-battery-saver-10:before {
  content: "\ebc0";
}

.mdl2-mob-battery-saver-2:before {
  content: "\ebb8";
}

.mdl2-mob-battery-saver-3:before {
  content: "\ebb9";
}

.mdl2-mob-battery-saver-4:before {
  content: "\ebba";
}

.mdl2-mob-battery-saver-5:before {
  content: "\ebbb";
}

.mdl2-mob-battery-saver-6:before {
  content: "\ebbc";
}

.mdl2-mob-battery-saver-7:before {
  content: "\ebbd";
}

.mdl2-mob-battery-saver-8:before {
  content: "\ebbe";
}

.mdl2-mob-battery-saver-9:before {
  content: "\ebbf";
}

.mdl2-mob-battery-unknown:before {
  content: "\ec02";
}

.mdl2-mobile-contact-legacy:before {
  content: "\e25a";
}

.mdl2-more:before {
  content: "\e712";
}

.mdl2-ellipse:before {
  content: "\e712";
}

.mdl2-menu:before {
  content: "\e712";
}

.mdl2-move-to-folder:before {
  content: "\e8de";
}

.mdl2-music-info:before {
  content: "\e90b";
}

.mdl2-mute:before {
  content: "\e74f";
}

.mdl2-new-folder:before {
  content: "\e8f4";
}

.mdl2-new-window:before {
  content: "\e78b";
}

.mdl2-next:before {
  content: "\e893";
}

.mdl2-one-bar:before {
  content: "\e905";
}

.mdl2-open-file:before {
  content: "\e8e5";
}

.mdl2-open-local:before {
  content: "\e8da";
}

.mdl2-folder-up:before {
  content: "\e8da";
}

.mdl2-open-pane:before {
  content: "\e8a0";
}

.mdl2-open-with:before {
  content: "\e7ac";
}

.mdl2-orientation:before {
  content: "\e8b4";
}

.mdl2-other-user:before {
  content: "\e7ee";
}

.mdl2-outline-star-legacy:before {
  content: "\e1ce";
}

.mdl2-page:before {
  content: "\e7c3";
}

.mdl2-paste:before {
  content: "\e77f";
}

.mdl2-pause:before {
  content: "\e769";
}

.mdl2-people:before {
  content: "\e716";
}

.mdl2-permissions:before {
  content: "\e8d7";
}

.mdl2-key:before {
  content: "\e8d7";
}

.mdl2-phone:before {
  content: "\e717";
}

.mdl2-phone-book:before {
  content: "\e780";
}

.mdl2-pin:before {
  content: "\e718";
}

.mdl2-play:before {
  content: "\e768";
}

.mdl2-post-update:before {
  content: "\e8f3";
}

.mdl2-presence-chicklet-legacy:before {
  content: "\e25e";
}

.mdl2-presence-chicklet-video-legacy:before {
  content: "\e25d";
}

.mdl2-preview:before {
  content: "\e8ff";
}

.mdl2-preview-link:before {
  content: "\e8a1";
}

.mdl2-previous:before {
  content: "\e892";
}

.mdl2-priority:before {
  content: "\e8d0";
}

.mdl2-protected-document:before {
  content: "\e8a6";
}

.mdl2-rating-star-fill-legacy:before {
  content: "\e0b4";
}

.mdl2-rating-star-fill-reduced-padding-html-legacy:before {
  content: "\e082";
}

.mdl2-rating-star-fill-small-legacy:before {
  content: "\e0b5";
}

.mdl2-rating-star-fill-zero-width-legacy:before {
  content: "\e00a";
}

.mdl2-rating-star-legacy:before {
  content: "\e224";
}

.mdl2-read:before {
  content: "\e8c3";
}

.mdl2-redo:before {
  content: "\e7a6";
}

.mdl2-refresh:before {
  content: "\e72c";
}

.mdl2-reload:before {
  content: "\e72c";
}

.mdl2-remote:before {
  content: "\e8af";
}

.mdl2-remove:before {
  content: "\e738";
}

.mdl2-rename:before {
  content: "\e8ac";
}

.mdl2-repair:before {
  content: "\e90f";
}

.mdl2-wrench:before {
  content: "\e90f";
}

.mdl2-repeat-all:before {
  content: "\e8ee";
}

.mdl2-repeat-one:before {
  content: "\e8ed";
}

.mdl2-reply-legacy:before {
  content: "\e248";
}

.mdl2-report-hacked:before {
  content: "\e730";
}

.mdl2-reshare:before {
  content: "\e8eb";
}

.mdl2-retweet:before {
  content: "\e8eb";
}

.mdl2-rotate:before {
  content: "\e7ad";
}

.mdl2-rotate-camera:before {
  content: "\e89e";
}

.mdl2-save:before {
  content: "\e74e";
}

.mdl2-save-local:before {
  content: "\e78c";
}

.mdl2-scan:before {
  content: "\e8fe";
}

.mdl2-scroll-chevron-down-bold-legacy:before {
  content: "\e019";
}

.mdl2-scroll-chevron-down-legacy:before {
  content: "\e011";
}

.mdl2-scroll-chevron-left-bold-legacy:before {
  content: "\e016";
}

.mdl2-scroll-chevron-left-legacy:before {
  content: "\e00e";
}

.mdl2-scroll-chevron-right-bold-legacy:before {
  content: "\e017";
}

.mdl2-scroll-chevron-right-legacy:before {
  content: "\e00f";
}

.mdl2-scroll-chevron-up-bold-legacy:before {
  content: "\e018";
}

.mdl2-scroll-chevron-up-legacy:before {
  content: "\e010";
}

.mdl2-select-all:before {
  content: "\e8b3";
}

.mdl2-send:before {
  content: "\e724";
}

.mdl2-set-lock-screen:before {
  content: "\e7b5";
}

.mdl2-set-tile:before {
  content: "\e97b";
}

.mdl2-settings:before {
  content: "\e713";
}

.mdl2-cog:before {
  content: "\e713";
}

.mdl2-gear:before {
  content: "\e713";
}

.mdl2-share:before {
  content: "\e72d";
}

.mdl2-shop:before {
  content: "\e719";
}

.mdl2-bag:before {
  content: "\e719";
}

.mdl2-show-bcc:before {
  content: "\e8c4";
}

.mdl2-show-results:before {
  content: "\e8bc";
}

.mdl2-shuffle:before {
  content: "\e8b1";
}

.mdl2-slideshow:before {
  content: "\e786";
}

.mdl2-solid-star-legacy:before {
  content: "\e1cf";
}

.mdl2-sort:before {
  content: "\e8cb";
}

.mdl2-stop:before {
  content: "\e71a";
}

.mdl2-street:before {
  content: "\e913";
}

.mdl2-switch:before {
  content: "\e8ab";
}

.mdl2-switch-apps:before {
  content: "\e8f9";
}

.mdl2-sync:before {
  content: "\e895";
}

.mdl2-sync-folder:before {
  content: "\e8f7";
}

.mdl2-tag:before {
  content: "\e8ec";
}

.mdl2-three-bars:before {
  content: "\e907";
}

.mdl2-touch-pointer:before {
  content: "\e7c9";
}

.mdl2-trim:before {
  content: "\e78a";
}

.mdl2-two-bars:before {
  content: "\e906";
}

.mdl2-two-page:before {
  content: "\e89a";
}

.mdl2-typing-indicator-legacy:before {
  content: "\e25c";
}

.mdl2-underline:before {
  content: "\e8dc";
}

.mdl2-undo:before {
  content: "\e7a7";
}

.mdl2-unfavorite:before {
  content: "\e8d9";
}

.mdl2-unfavorite-2-legacy:before {
  content: "\e24e";
}

.mdl2-unfavorite-legacy:before {
  content: "\e195";
}

.mdl2-un-pin:before {
  content: "\e77a";
}

.mdl2-un-sync-folder:before {
  content: "\e8f6";
}

.mdl2-up:before {
  content: "\e74a";
}

.mdl2-upload:before {
  content: "\e898";
}

.mdl2-video:before {
  content: "\e714";
}

.mdl2-video-chat:before {
  content: "\e8aa";
}

.mdl2-video-legacy:before {
  content: "\e116";
}

.mdl2-view:before {
  content: "\e890";
}

.mdl2-view-all:before {
  content: "\e8a9";
}

.mdl2-volume:before {
  content: "\e767";
}

.mdl2-webcam:before {
  content: "\e8b8";
}

.mdl2-world:before {
  content: "\e909";
}

.mdl2-zero-bars:before {
  content: "\e904";
}

.mdl2-zoom:before {
  content: "\e71e";
}

.mdl2-zoom-in:before {
  content: "\e8a3";
}

.mdl2-zoom-out:before {
  content: "\e71f";
}

.mdl2-speed-high:before {
  content: "\ec4a";
}

.mdl2-devices-3:before {
  content: "\ea6c";
}

.mdl2-dev-update:before {
  content: "\ecc5";
}

.mdl2-robot:before {
  content: "\e99a";
}

.mdl2-report-document:before {
  content: "\e9f9";
}

.mdl2-laptop-secure:before {
  content: "\f552";
}

.mdl2-flow:before {
  content: "\ef90";
}

.mdl2-button-x:before {
  content: "\f096";
}

.mdl2-knowledge-article:before {
  content: "\f000";
}

.mdl2-info:before {
  content: "\e946";
}

.mdl2-unknown:before {
  content: "\e9ce";
}

.mdl2-my-network:before {
  content: "\ec27";
}

.mdl2-devices-4:before {
  content: "\eb66";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.xml-sync-container {
  margin-top: 20px;
}

.job-center-calendar-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  min-height: 600px;
  padding: 5px 10px;
  overflow: hidden;
}
.job-center-calendar-container .calendar-actions-container {
  flex-shrink: 0;
  min-height: 50px;
  margin-bottom: 10px;
}
.job-center-calendar-container .calendar-actions-container .calendar-actions-container-search-form {
  margin: 4px 10px 0 0;
}
@media (max-width: 600px) {
  .job-center-calendar-container .calendar-actions-container {
    min-height: 130px;
  }
}
.job-center-calendar-container .calendar-actions-container .calendar-search {
  margin: 0;
  width: 100%;
}
.job-center-calendar-container .calendar-actions-container .event-source-toggle-container {
  margin-right: 10px;
}
.job-center-calendar-container #job-center-calendar {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.job-center-calendar-container #job-center-calendar .fc-timegrid-event-short .fc-event-time::after {
  content: "";
}

.job-info-container .job-error-text {
  color: var(--c-danger);
}

.fc a {
  color: var(--c-ink);
}
@media (max-width: 600px) {
  .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: column;
  }
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
    margin-bottom: 8px;
  }
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child {
    margin-bottom: 0;
  }
}
.fc .fc-button {
  border-radius: 6px;
}
.fc .fc-button.fc-button-primary {
  background-color: var(--c-brand);
}
.fc .fc-button.fc-button-primary.fc-button-active {
  background-color: var(--c-accent);
}
.fc .fc-event {
  font-size: 16px;
  min-height: 24px;
  overflow: hidden;
}
.fc .fc-event.fc-event-past, .fc .fc-event.event-ended {
  opacity: 0.5;
}
.fc .fc-event.running-job {
  background-color: var(--c-success);
}
.fc .fc-event.scheduled-job {
  background-color: var(--c-accent);
}
.fc .fc-event.cron-job {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
.fc .fc-event.finished-job {
  background-color: var(--c-neutral);
  color: var(--c-ink);
}
.fc .fc-event.finished-job .fc-event-main-frame {
  color: var(--c-ink);
}
.fc .fc-event.finished-job .fc-event-main-frame.job-with-error {
  background-color: var(--c-danger);
}
.fc .fc-event.job-blocking-time {
  background-color: var(--c-cat-purple);
}
.fc .fc-event .fc-event-resizer {
  height: 15px !important;
  bottom: -5px !important;
}
.fc .fc-event .fc-event-main-frame {
  display: block;
  padding: 2px 4px;
}
.fc .fc-event .fc-event-main-frame .fc-event-title-container {
  font-weight: bold;
}
.fc .fc-event .fc-event-main-frame .assigned-hardware-container {
  margin-top: 10px;
}
.fc .fc-event .fc-event-main-frame .assigned-hardware-container .task-list-container .task-container .task-container-title {
  font-size: 12px;
}
.fc .fc-dayGridMonth-view .fc-scrollgrid {
  border-collapse: collapse;
}
.fc .fc-dayGridMonth-view .fc-daygrid-week-number {
  padding: 3px 6px;
  font-size: 11px;
  font-weight: normal;
  background-color: color-mix(in srgb, var(--c-ink), transparent 98%);
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  min-width: 35px;
  text-align: center;
}
.fc .fc-dayGridMonth-view .fc-col-header-cell.fc-day {
  position: relative;
}
.fc .fc-dayGridMonth-view .fc-daygrid-body .fc-daygrid-day {
  min-height: 110px !important;
  height: auto;
}
.fc .fc-dayGridMonth-view .fc-daygrid-day-frame {
  min-height: 0;
  padding: 3px;
  position: relative;
}
.fc .fc-dayGridMonth-view .fc-daygrid-day-top {
  flex-direction: row;
  padding: 3px;
  justify-content: flex-end;
}
.fc .fc-dayGridMonth-view .fc-daygrid-day-events {
  margin-bottom: 0;
  margin-top: 3px;
}
.fc .fc-dayGridMonth-view .fc-day-other .fc-daygrid-day-number {
  opacity: 0.4;
}
.fc .fc-dayGridMonth-view .fc-day-other .fc-event {
  opacity: 0.5;
}
.fc .fc-dayGridMonth-view .fc-day-other .fc-daygrid-more-link {
  opacity: 0.5;
}
.fc .fc-dayGridMonth-view .fc-event {
  font-size: 11px;
  min-height: 20px;
  margin-bottom: 2px;
  line-height: 1.3;
  border-radius: 3px;
  padding: 0;
}
.fc .fc-dayGridMonth-view .fc-event .fc-event-main {
  padding: 0;
}
.fc .fc-dayGridMonth-view .fc-event .fc-event-main-frame {
  font-size: 11px;
  line-height: 1.3;
}
.fc .fc-dayGridMonth-view .fc-event .fc-event-main-frame .fc-event-title-container {
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc .fc-dayGridMonth-view .fc-event .fc-event-main-frame .fc-event-title {
  padding: 1px 0;
}
.fc .fc-dayGridMonth-view .fc-event .fc-event-main-frame .fc-event-time {
  font-size: 10px;
  margin-right: 3px;
}
.fc .fc-dayGridMonth-view .fc-event .fc-event-main-frame .assigned-hardware-container {
  display: none;
}
.fc .fc-dayGridMonth-view .fc-daygrid-day-number {
  padding: 3px 5px;
  font-size: 12px;
  font-weight: normal;
}
.fc .fc-dayGridMonth-view .fc-col-header-cell {
  padding: 6px 3px;
  font-size: 12px;
}
.fc .fc-dayGridMonth-view .fc-daygrid-more-link {
  font-size: 11px;
  padding: 2px 4px;
  margin: 2px 0;
  font-weight: 500;
  color: var(--c-brand);
}
.fc .fc-dayGridMonth-view .fc-daygrid-more-link:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  text-decoration: underline;
}
.fc .fc-dayGridMonth-view .fc-toolbar {
  margin-bottom: 8px;
}
.fc .fc-dayGridMonth-view .fc-toolbar .fc-toolbar-title {
  font-size: 16px;
}
.fc .fc-dayGridMonth-view .fc-toolbar .fc-button {
  padding: 4px 8px;
  font-size: 12px;
}
.fc .fc-popover {
  border: 1px solid var(--c-brand-deep);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--c-shadow), transparent 85%);
}
.fc .fc-popover .fc-popover-header {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
}
.fc .fc-popover .fc-popover-body {
  padding: 6px;
  max-height: 350px;
  overflow-y: auto;
}
.fc .fc-popover .fc-popover-body .fc-event {
  margin-bottom: 4px;
  font-size: 12px;
  padding: 4px 6px;
  min-height: 22px;
}
.fc .fc-popover .fc-popover-close {
  font-size: 18px;
  opacity: 0.8;
}
.fc .fc-popover .fc-popover-close:hover {
  opacity: 1;
}
.fc .fc-header-toolbar {
  margin-bottom: 10px !important;
  padding: 5px 0;
}
.fc .fc-header-toolbar .fc-toolbar-chunk {
  display: flex;
  align-items: center;
}
.fc .fc-header-toolbar .fc-toolbar-chunk > * {
  margin: 0 2px;
}
.fc .fc-header-toolbar .fc-toolbar-title {
  font-size: 18px;
  margin: 0 10px;
}
.fc .fc-header-toolbar .fc-button-group .fc-button {
  padding: 5px 10px;
  font-size: 13px;
}
.fc .fc-timeGridWeek-view .fc-event,
.fc .fc-timeGridDay-view .fc-event {
  font-size: 14px;
  min-height: 24px;
}

.job-center-calendar-container {
  padding: 16px 0 10px;
}
.job-center-calendar-container .calendar-actions-container {
  min-height: 32px;
  margin: 0 0 8px;
  gap: 8px;
}
.job-center-calendar-container .calendar-actions-container .calendar-actions-container-search-form {
  width: 220px;
  margin: 0;
}
.job-center-calendar-container .calendar-actions-container .calendar-filter-button {
  min-width: 0;
  min-height: 32px;
  height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-field-text);
  font-size: 13px;
  line-height: 32px;
  text-transform: none;
}
.job-center-calendar-container .calendar-actions-container .calendar-filter-button .material-icons {
  margin-right: 5px;
  font-size: 17px;
  vertical-align: text-bottom;
}
.job-center-calendar-container #job-center-calendar {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 90%);
  overflow: hidden;
}
.job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container {
  margin: 0 0 0 12px;
  flex: 0 1 auto;
}
.job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container .calendar-actions-container-search-form {
  width: 235px;
}

.fc .fc-scrollgrid {
  border: 0;
}
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
  border-color: var(--c-border);
}
.fc .fc-col-header-cell {
  background: var(--c-surface);
  padding: 8px 0 4px;
  color: var(--c-field-text);
  font-size: 12px;
  font-weight: 600;
}
.fc .calendar-routine-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 7px;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--c-brand), transparent 92%);
  color: var(--c-brand);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.fc .calendar-routine-summary .material-icons {
  font-size: 13px;
}
.fc .calendar-routine-summary .calendar-routine-summary-toggle {
  margin-left: -2px;
  font-size: 15px;
}
.fc .calendar-routine-summary:hover, .fc .calendar-routine-summary.calendar-routine-summary--expanded {
  background: color-mix(in srgb, var(--c-brand), transparent 84%);
}
.fc .fc-timegrid-slot {
  height: 32px;
  border-color: color-mix(in srgb, var(--c-border), transparent 25%);
}
.fc .fc-timegrid-slot-label {
  color: var(--c-field-text);
  font-size: 11px;
}
.fc .fc-timegrid-col.fc-day-today {
  background: color-mix(in srgb, var(--c-brand), transparent 97%);
}
.fc .fc-header-toolbar {
  margin: 0 !important;
  padding: 10px 12px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  gap: 12px;
}
.fc .fc-header-toolbar .fc-toolbar-chunk:last-child {
  display: flex;
  align-items: center;
}
.fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc .fc-header-toolbar .fc-toolbar-title {
  margin: 0;
  color: var(--c-text);
  font-size: 18px;
  font-weight: 600;
}
.fc .fc-header-toolbar .fc-button-group .fc-button,
.fc .fc-header-toolbar .fc-button {
  min-height: 30px;
  padding: 4px 9px;
  border-color: var(--c-border);
  border-radius: 5px;
  box-shadow: none;
  font-size: 12px;
}
.fc .fc-header-toolbar .fc-button-group .fc-button.fc-button-primary,
.fc .fc-header-toolbar .fc-button.fc-button-primary {
  background: var(--c-surface);
  color: var(--c-field-text);
}
.fc .fc-header-toolbar .fc-button-group .fc-button.fc-button-primary:hover, .fc .fc-header-toolbar .fc-button-group .fc-button.fc-button-primary.fc-button-active,
.fc .fc-header-toolbar .fc-button.fc-button-primary:hover,
.fc .fc-header-toolbar .fc-button.fc-button-primary.fc-button-active {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-fill);
}
.fc .fc-event {
  border: 0;
  border-left: 3px solid var(--c-brand);
  border-radius: 4px;
  box-shadow: none;
  color: var(--c-text);
}
.fc .fc-event.running-job {
  background-color: color-mix(in srgb, var(--c-success), transparent 88%);
  border-left-color: var(--c-success);
}
.fc .fc-event.scheduled-job {
  background-color: color-mix(in srgb, var(--c-accent), transparent 88%);
  border-left-color: var(--c-accent);
}
.fc .fc-event.cron-job {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  border-left-color: var(--c-brand);
  color: var(--c-text);
}
.fc .fc-event.finished-job {
  background-color: color-mix(in srgb, var(--c-neutral), transparent 82%);
  border-left-color: var(--c-neutral);
  color: var(--c-text);
}
.fc .fc-event.job-blocking-time {
  background-color: color-mix(in srgb, var(--c-cat-purple), transparent 88%);
  border-left-color: var(--c-cat-purple);
}
.fc .fc-event .fc-event-main-frame {
  padding: 5px 7px;
}
.fc .fc-event .fc-event-main-frame .fc-event-time {
  color: var(--c-field-text);
  font-size: 11px;
}
.fc .fc-event .fc-event-main-frame .fc-event-title-container {
  color: var(--c-text);
  font-size: 12px;
  font-weight: 600;
}
.fc .fc-event .fc-event-main-frame .job-info-container {
  color: var(--c-field-text);
  font-size: 11px;
}
.fc .fc-event .fc-event-main-frame .assigned-hardware-container {
  display: none;
}
.fc .fc-more-link {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--c-surface-subtle);
  color: var(--c-brand);
  font-size: 11px;
  font-weight: 600;
}
.fc .fc-more-popover {
  width: min(420px, 100vw - 32px);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--c-shadow), transparent 80%);
  overflow: hidden;
}
.fc .fc-more-popover .fc-popover-header {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
}
.fc .fc-more-popover .fc-popover-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc .fc-more-popover .fc-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 4px;
  color: var(--c-field-text);
  font-size: 20px;
  opacity: 1;
}
.fc .fc-more-popover .fc-popover-close:hover {
  background: var(--c-surface-subtle);
  color: var(--c-text);
}
.fc .fc-more-popover .fc-popover-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 420px);
  padding: 8px;
  background: var(--c-surface);
}
.fc .fc-more-popover .fc-popover-body .fc-event {
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 5px;
}
.fc .fc-more-popover .fc-popover-body .fc-event .fc-event-main-frame {
  padding: 9px 11px;
}
.fc .fc-more-popover .fc-popover-body .fc-event .fc-event-time {
  display: block;
  margin-bottom: 2px;
}

.calendar-event-popover {
  width: max-content;
  max-width: min(380px, 100vw - 32px);
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--c-shadow), transparent 80%);
  background: var(--c-surface);
}
.calendar-event-popover > .arrow {
  display: none;
}
.calendar-event-popover.top, .calendar-event-popover.bottom, .calendar-event-popover.left, .calendar-event-popover.right {
  margin: 0;
}
.calendar-event-popover .popover-title {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  border-radius: 6px 6px 0 0;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.calendar-event-popover .popover-content {
  padding: 12px 14px 14px;
}
.calendar-event-popover .event-tooltip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--c-field-text);
}
.calendar-event-popover .event-tooltip p {
  margin: 0;
}
.calendar-event-popover .event-tooltip .event-tooltip-time {
  color: var(--c-field-text);
  font-size: 12px;
  font-weight: 600;
}
.calendar-event-popover .event-tooltip .event-tooltip-state {
  color: var(--c-brand);
  font-size: 13px;
  font-weight: 600;
}
.calendar-event-popover .event-tooltip .event-tooltip-comment,
.calendar-event-popover .event-tooltip .job-error-text {
  color: var(--c-field-text);
  font-size: 13px;
  line-height: 1.45;
}
.calendar-event-popover .event-tooltip .task-list-container {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  background: transparent;
  box-shadow: none;
}
.calendar-event-popover .event-tooltip .task-container,
.calendar-event-popover .event-tooltip .hardware-list {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.calendar-event-popover .event-tooltip .task-container + .task-container {
  margin-top: 8px;
}
.calendar-event-popover .event-tooltip .task-container-title {
  display: block;
  margin-bottom: 5px;
  color: var(--c-field-text);
  font-size: 12px;
  font-weight: 600;
}
.calendar-event-popover .event-tooltip .hardware-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.calendar-event-popover .event-tooltip .hardware-list .tag {
  margin: 0;
}

@media (max-width: 599px) {
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 12px;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
    display: none;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .fc-toolbar-chunk:first-child,
.job-center-calendar-container #job-center-calendar .fc-header-toolbar .fc-toolbar-chunk:last-child {
    width: 100%;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .fc-toolbar-chunk:first-child {
    flex-wrap: wrap;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .fc-toolbar-chunk:last-child {
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .fc-toolbar-chunk:last-child > .fc-button-group {
    display: none;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container {
    width: 100%;
    min-height: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container > [flex] {
    display: none;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container .calendar-actions-container-search-form {
    flex: 1 0 100%;
    width: 100%;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container .calendar-filter-button {
    flex: 1 1 auto;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container timezone-picker {
    flex: 1 0 100%;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container timezone-picker .timezone-picker--inline {
    width: 100%;
  }
  .job-center-calendar-container #job-center-calendar .fc-header-toolbar .calendar-actions-container timezone-picker .timezone-picker--inline .timezone-picker-selectbox-container {
    width: 100%;
    max-width: none;
  }
}
.global-search-container {
  text-align: center;
  /* layout-padding's 8px on the content and again on the search: the search starts where every page's
     content does instead ($pageContentTop in values.scss) */
}
.global-search-container > section > md-content[layout-padding] {
  padding: 0;
}
.global-search-container .top-search {
  margin-top: 0;
  padding: 16px 0 0 !important;
}
.global-search-container .top-search .searchbar-wrapper {
  margin: 0;
}
.global-search-container .input-group {
  text-align: center;
  margin: 0 3%;
}
.global-search-container .searchbar-wrapper {
  height: 41px;
}
.global-search-container .searchbar-wrapper .search-icon {
  background-color: var(--c-brand);
  border: 1px solid var(--c-brand);
  color: var(--c-on-fill);
  padding: 8px;
}
.global-search-container .searchbar-wrapper .md-input-container-search-input {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background-color: var(--c-surface);
}
.global-search-container .searchbar-wrapper .md-input-container-search-input .md-input {
  border: 0;
}
@media (min-width: 1280px) {
  .global-search-container .searchbar-wrapper {
    width: 600px;
    margin: auto;
  }
}
.global-search-container form .input-group {
  text-align: center;
  margin: 0;
}
.global-search-container .search-result-section {
  text-align: left;
}
.global-search-container .search-result-section .search-result-query-text {
  margin-bottom: 15px;
}
.global-search-container .search-result-section .search-result-container {
  max-width: 400px;
  margin-bottom: 40px;
  list-style: none;
}
.global-search-container .search-result-section .search-result-container .search-result-header {
  margin-bottom: 10px;
}
.global-search-container .search-result-section .search-result-container .search-result-header .search-result-title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}
.global-search-container .search-result-section .search-result-container .search-result-list {
  list-style-type: none;
  padding: 0 0 0 10px;
}
.global-search-container .search-result-section .search-result-container .search-result-list li {
  margin-bottom: 5px;
}
.global-search-container .search-result-section .search-result-container .search-result-list .network-info-container table thead tr td {
  padding: 0 10px 0 0;
}

@media (min-width: 960px) and (max-width: 1279px) {
  .hardware-job-progress-dialog {
    width: 1000px;
  }
}
@media (min-width: 1280px) and (max-width: 1919px) {
  .hardware-job-progress-dialog {
    width: 1200px;
  }
}
@media (min-width: 1920px) {
  .hardware-job-progress-dialog {
    width: 1600px;
  }
}

.execution-info job-info {
  max-width: 500px;
  width: 100%;
}
.execution-info .job-files .file-list-container {
  max-height: 300px;
}
.execution-info .job-files .file-list-container .file-list {
  list-style-type: none;
  padding: 5px 10px;
  margin: 0;
}
.execution-info .cron-job-info {
  max-width: 500px;
  width: 100%;
}
.execution-info task-info-old {
  max-width: 1000px;
  width: 100%;
  margin-bottom: 10px;
}
.execution-info .warning-sign {
  font-size: 18px;
  color: var(--c-accent);
  margin-right: 10px;
  vertical-align: sub;
}
.execution-info .toggle-box {
  margin: 25px 20px 0 0;
}
.execution-info .toggle-box.large-box {
  max-width: 1000px;
}
.execution-info .toggle-box.small-box {
  max-width: 500px;
}

.task-info .table-default td:last-child {
  text-align: right;
}
.task-info .show-affected-hardware-button {
  margin: 0;
}
.task-info .task-advanced-info {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding-top: 16px;
}
.task-info .task-actions-wrapper {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding-top: 16px;
  padding-bottom: 8px;
}
.task-info .task-actions-wrapper task-actions-diagram {
  display: block;
}

.job-info {
  max-width: 500px;
}

.task-actions-diagram {
  padding-left: 0;
  display: block;
}
.task-actions-diagram .task-actions-diagram {
  margin: 20px 20px 20px 20px;
}
.task-actions-diagram .list-group-item {
  font-weight: bold;
  padding: 10px;
  display: block;
  margin-bottom: 4px;
  border-radius: 6px;
  position: relative;
  /* The action in view: the accent, as a selected row is everywhere else. It was yellow, which read as a warning;
     an action that failed has its own red dot. */
}
.task-actions-diagram .list-group-item.deprecated-block {
  font-style: italic;
  font-weight: normal;
}
.task-actions-diagram .list-group-item:last-child {
  margin-bottom: 0;
}
.task-actions-diagram .list-group-item.opening-action {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.task-actions-diagram .list-group-item.opening-action.active-action-finished {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.task-actions-diagram .list-group-item.opening-action.active-action-running {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  clip-path: inset(-6px -6px 0 -6px);
}
.task-actions-diagram .list-group-item.opening-action.active-action-running::before {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.task-actions-diagram .list-group-item.closing-action {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  padding-top: 10px;
  margin-top: 0;
}
.task-actions-diagram .list-group-item.closing-action.active-action-finished {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}
.task-actions-diagram .list-group-item.closing-action.active-action-running {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  clip-path: inset(0 -6px -6px -6px);
}
.task-actions-diagram .list-group-item.closing-action.active-action-running::before {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.task-actions-diagram .list-group-item.closing-action-with-separator {
  border-top: 1px dashed color-mix(in srgb, var(--c-ink), transparent 88%);
}
.task-actions-diagram .list-group-item.closing-action-with-separator.active-action-finished {
  border-top: 1px dashed color-mix(in srgb, var(--c-ink), transparent 88%);
}
.task-actions-diagram .list-group-item.closing-action-with-separator.active-action-running {
  border-top: 1px dashed color-mix(in srgb, var(--c-ink), transparent 88%);
}
.task-actions-diagram .list-group-item .active-action-icon {
  display: block;
  float: left;
  font-size: 18px;
  margin-top: 1px;
  margin-right: 4px;
  margin-left: -4px;
  color: var(--c-brand);
}
.task-actions-diagram .list-group-item.active-action-running .active-action-icon {
  --icon-pulse-min-opacity: 0.5;
  --icon-pulse-max-scale: 1.25;
  animation: icon-pulse-anim 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .task-actions-diagram .list-group-item.active-action-running .active-action-icon {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
}
.task-actions-diagram .list-group-item.active-action-finished .active-action-icon {
  opacity: 1;
}
.task-actions-diagram .list-group-item.active-action {
  background: color-mix(in srgb, var(--c-brand), transparent 93%);
}
.task-actions-diagram .list-group-item.active-action-running {
  position: relative;
  isolation: isolate;
  border: 3px solid color-mix(in srgb, var(--c-brand), transparent 70%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-brand), transparent 93%);
}
.task-actions-diagram .list-group-item.active-action-running::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  --border-angle: 0deg;
  animation: rotating-border-spin 2.5s linear infinite;
  background: conic-gradient(from var(--border-angle), transparent 0%, transparent 65%, var(--c-brand) 72.7%, var(--c-brand) 78.3%, var(--c-brand-tint) 82.5%, var(--c-brand) 87.75%, var(--c-brand) 93%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 3px;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .task-actions-diagram .list-group-item.active-action-running {
    border: 3px solid var(--c-brand);
  }
  .task-actions-diagram .list-group-item.active-action-running::before {
    display: none;
  }
}
.task-actions-diagram .list-group-item.active-action-finished {
  border: 2px solid var(--c-brand);
  border-radius: 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
  background: color-mix(in srgb, var(--c-brand), transparent 93%);
}
.task-actions-diagram .list-group-item.active-action-finished.opening-action {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  clip-path: inset(-6px -6px 0 -6px);
}
.task-actions-diagram .list-group-item.active-action-finished.closing-action {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  clip-path: inset(0 -6px -6px -6px);
}
.task-actions-diagram .list-group-item .action-error-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--c-danger);
  align-self: center;
  margin-left: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 4px 1px color-mix(in srgb, var(--c-danger), transparent 60%);
}
.task-actions-diagram .list-group-item .action-loop-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--c-ink), transparent 92%);
}
.task-actions-diagram .list-group-item .action-loop-badge .action-loop-icon {
  font-size: 14px;
  margin-right: 2px;
}
.task-actions-diagram .list-group-item .stop-action-btn {
  min-height: 15px;
  min-width: 40px;
  line-height: 20px;
  margin: 0;
  padding: 0 8px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}
.task-actions-diagram .list-group-item .stop-action-btn .stop-action-icon {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 2px;
  position: relative;
  top: -1px;
}
.task-actions-diagram .list-group-item .stop-action-btn:hover {
  opacity: 0.85;
}

[data-theme] .task-actions-diagram .list-group-item:not(.active-action).program-block {
  background-color: color-mix(in srgb, var(--c-brand-dark), transparent 80%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).wuinstall-block {
  background-color: color-mix(in srgb, var(--c-success), transparent 82%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).notifications-block {
  background-color: color-mix(in srgb, var(--c-cat-purple), transparent 82%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).flow-block {
  background-color: color-mix(in srgb, var(--c-cat-sand), transparent 80%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).event-block {
  background-color: color-mix(in srgb, var(--c-accent), transparent 82%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).script-block {
  background-color: color-mix(in srgb, var(--c-cat-brown), transparent 82%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).software-block {
  background-color: color-mix(in srgb, var(--c-info), transparent 82%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).client-block {
  background-color: color-mix(in srgb, var(--c-brand-muted), transparent 82%);
}
[data-theme] .task-actions-diagram .list-group-item:not(.active-action).other-block {
  background-color: color-mix(in srgb, var(--c-neutral), transparent 70%);
}

.select-template .select-template__select {
  margin-bottom: 0;
}
.select-template .select-template__separate {
  margin: 20px 0 0 0;
}
.select-template .csb__warning {
  margin-top: 12px;
}
.select-template .select-template__preview {
  margin-top: 20px;
}
.select-template .select-template__preview-header {
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.select-template .select-template__preview-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--c-ink);
}
.select-template .select-template__preview-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-template .select-template__preview-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--c-brand);
  font-weight: 600;
  white-space: nowrap;
}
.select-template .select-template__preview-link i {
  font-size: 16px;
}
.select-template .select-template__preview-body {
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background-color: var(--c-surface-sunken);
}
.select-template .select-template__preview-placeholder {
  padding: 24px 0;
  text-align: center;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
}
.select-template .select-template__preview-task + .select-template__preview-task {
  margin-top: 16px;
}
.select-template .select-template__preview-task-name {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* One task of an automation on one device (services/hardwareTaskExecutionInfo/hardwareTaskExecutionInfo.tmpl.html):
   the task and device as the title with the automation and its state below, one line of facts, the error if there is
   one, then the actions beside their output. */
.hardware-task-execution-info-dialog-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.hardware-task-execution-info-dialog-container > div {
  flex: 1;
}

md-dialog.app-dialog.hardware-task-execution-info-dialog {
  width: min(1600px, 100vw - 32px);
  max-width: none;
  /* the head's tile takes the state's colour */
}
md-dialog.app-dialog.hardware-task-execution-info-dialog md-dialog-content hardware-task-visualization-finished,
md-dialog.app-dialog.hardware-task-execution-info-dialog md-dialog-content hardware-task-visualization-running {
  display: block;
}
md-dialog.app-dialog.hardware-task-execution-info-dialog .app-dialog__icon.is-ok {
  background-color: color-mix(in srgb, var(--c-success) 14%, transparent);
  color: var(--c-success-deep);
}
md-dialog.app-dialog.hardware-task-execution-info-dialog .app-dialog__icon.is-error {
  background-color: color-mix(in srgb, var(--c-danger) 12%, transparent);
  color: var(--c-danger);
}
md-dialog.app-dialog.hardware-task-execution-info-dialog .app-dialog__icon.is-paused {
  background-color: color-mix(in srgb, var(--c-warning) 18%, transparent);
  color: var(--c-warning-ink);
}

.task-run__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.task-run__state {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 8px 0 6px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 500;
}
.task-run__state i.material-icons {
  font-size: 14px;
}
.task-run__state.is-ok {
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
  color: var(--c-success-deep);
}
.task-run__state.is-error {
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
  color: var(--c-danger);
}
.task-run__state.is-running {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.task-run__state.is-paused {
  background-color: color-mix(in srgb, var(--c-warning) 20%, transparent);
  color: var(--c-warning-ink);
}
.task-run__state.is-running i.material-icons {
  animation: task-run-spin 1.6s linear infinite;
}

@keyframes task-run-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .task-run__state.is-running i.material-icons {
    animation: none;
  }
}
.task-run__facts {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--c-border);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.task-run__facts strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.task-run__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-run__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 76%);
}
.is-online .task-run__dot {
  background-color: var(--c-success);
}

/* What failed, as a tinted box under the facts: one action as a line, several as a numbered list, each with its
   message and a Show that goes to it (its Errors tab opens). */
.task-run__error {
  flex: 0 0 auto;
  margin: 12px 20px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, transparent);
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-danger) 7%, transparent);
  font-size: 13px;
}
.task-run__error .clickable-action {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.task-run__error .clickable-action:hover {
  text-decoration: none;
  opacity: 0.8;
}

.task-run__error-text,
.task-run__error-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-weight: 600;
  color: var(--c-danger);
}
.task-run__error-text i.material-icons,
.task-run__error-head i.material-icons {
  font-size: 18px;
}

.task-run__failed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--c-danger) 25%, transparent);
}
.task-run__failed.is-single {
  border-top: 0;
}

.task-run__failed-icon.material-icons {
  grid-row: 1/3;
  font-size: 20px;
  color: var(--c-danger);
}

.task-run__failed-n {
  display: grid;
  grid-row: 1/3;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--c-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-danger);
}

.task-run__failed-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}
.task-run__failed-name strong {
  font-weight: 600;
}
.is-single .task-run__failed-name strong {
  color: var(--c-danger);
}

.task-run__failed-verb {
  margin-left: 4px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.task-run__failed-show {
  grid-row: 1/3;
  grid-column: 3;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 12px;
  color: var(--c-text);
  cursor: pointer;
}
.task-run__failed-show:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.task-run__failed-show:focus {
  outline: none;
}
.task-run__failed-show:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.task-run__failed-msg {
  grid-column: 2;
  overflow: hidden;
  font-family: Menlo, Consolas, monospace;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.task-run__error-more {
  padding: 6px 12px 8px;
  border-top: 1px solid color-mix(in srgb, var(--c-danger) 25%, transparent);
  font-size: 12px;
  color: var(--c-danger);
}

@media (max-width: 959px) {
  .task-run__facts {
    padding-left: 16px;
    padding-right: 16px;
  }
  .task-run__error {
    margin-left: 16px;
    margin-right: 16px;
  }
  /* on a phone the message wraps rather than being cut to a few words */
  .task-run__failed-msg {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* One layer of padding at the edges: the body's, the columns' (md-padding) and the diagram's own added up to about
   36px around everything. The columns keep 20px outside and 12px either side of the line between them. */
md-dialog.app-dialog.hardware-task-execution-info-dialog .app-dialog__body {
  padding: 0;
}
md-dialog.app-dialog.hardware-task-execution-info-dialog .hardware-task-visualization > .task-visualization__actions {
  padding: 10px 12px 12px 20px;
}
md-dialog.app-dialog.hardware-task-execution-info-dialog .hardware-task-visualization > .task-visualization__output.md-padding {
  padding: 10px 20px 12px 12px;
  border-left: 1px solid var(--c-border);
}
md-dialog.app-dialog.hardware-task-execution-info-dialog .hardware-task-visualization .task-visualization__actions-head {
  padding: 0;
}
md-dialog.app-dialog.hardware-task-execution-info-dialog .hardware-task-visualization task-actions-diagram.md-padding {
  margin-top: 8px;
  padding: 0;
}
@media (max-width: 959px) {
  md-dialog.app-dialog.hardware-task-execution-info-dialog .hardware-task-visualization > .task-visualization__actions,
md-dialog.app-dialog.hardware-task-execution-info-dialog .hardware-task-visualization > .task-visualization__output.md-padding {
    padding: 10px 16px 12px;
    border-left: 0;
  }
}

.debug-auto-follow-badge,
.debug-paused-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.debug-auto-follow-badge i,
.debug-paused-badge i {
  font-size: 14px;
}

.debug-auto-follow-badge {
  background-color: color-mix(in srgb, var(--c-success), transparent 85%);
  color: var(--c-success-deep);
}

.debug-paused-badge {
  background-color: color-mix(in srgb, var(--c-accent), transparent 85%);
  color: var(--c-accent);
}

.hardware-task-visualization task-actions-diagram {
  display: block;
}
.hardware-task-visualization command-line {
  display: block;
}
.hardware-task-visualization md-tabs {
  flex: 1;
  min-height: 0;
}
.hardware-task-visualization.has-content-height {
  height: var(--content-height);
  /* the column less the timing line, the tab labels and the column's padding: the terminal fits its tab, so
     only the terminal scrolls */
}
.hardware-task-visualization.has-content-height task-actions-diagram {
  max-height: calc(var(--content-height) - 44px);
  overflow-y: auto;
}
.hardware-task-visualization.has-content-height > div[layout=column] {
  max-height: var(--content-height);
  overflow: hidden;
}
.hardware-task-visualization.has-content-height command-line {
  height: calc(var(--content-height) - 106px);
  max-height: calc(var(--content-height) - 106px);
  overflow: hidden;
}
.hardware-task-visualization.has-content-height md-tab-content:has(> div > md-content > command-line),
.hardware-task-visualization.has-content-height md-tab-content:has(> div > command-line) {
  overflow: hidden;
}
@media (max-width: 959px) {
  .hardware-task-visualization.has-content-height {
    height: auto;
  }
  .hardware-task-visualization.has-content-height task-actions-diagram {
    max-height: none;
    overflow-y: visible;
  }
  .hardware-task-visualization.has-content-height > div[layout=column] {
    max-height: none;
    overflow: visible;
  }
  .hardware-task-visualization.has-content-height command-line {
    height: 300px;
    max-height: 300px;
  }
}
@media (max-width: 959px) {
  .hardware-task-visualization {
    /* Stacked on a phone, nothing shrinks to the dialog's height: the actions, then the output, and the dialog's
       content scrolls. Squeezed, the tabs came out shorter than the 300px terminal and cut its foot off. */
    flex: none;
  }
  .hardware-task-visualization > div,
.hardware-task-visualization > .task-visualization__actions,
.hardware-task-visualization > .task-visualization__output {
    flex: none !important;
    max-height: none !important;
  }
  .hardware-task-visualization .task-visualization__output md-tabs {
    flex: none;
    height: auto;
    min-height: 356px;
  }
  .hardware-task-visualization > .md-padding {
    padding: 8px;
  }
  .hardware-task-visualization task-actions-diagram {
    flex: none !important;
    max-height: none !important;
  }
}
.hardware-task-visualization.detail-view task-actions-diagram {
  margin-top: 4px;
}
.hardware-task-visualization.detail-view > div.md-padding {
  padding-top: 0;
}
.hardware-task-visualization.detail-view md-tabs-wrapper {
  margin-top: -4px;
}
.hardware-task-visualization .action-timing-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 4px 8px;
  background-color: color-mix(in srgb, var(--c-neutral), transparent 80%);
  border-radius: 6px;
}
.hardware-task-visualization .action-timing-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hardware-task-visualization .action-timing-icon {
  font-size: 14px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-task-visualization .action-timing-label {
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hardware-task-visualization .action-timing-value {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  font-variant-numeric: tabular-nums;
}
.hardware-task-visualization .execution-environment-info,
.hardware-task-visualization .wuinstall-data-container {
  padding: 8px;
}
.hardware-task-visualization .env-info-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hardware-task-visualization .env-info-card {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-neutral), transparent 40%);
}
.hardware-task-visualization .env-info-card:last-child {
  border-bottom: none;
}
.hardware-task-visualization .env-info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.hardware-task-visualization .env-info-label i {
  font-size: 15px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-task-visualization .env-info-value {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  line-height: 1.5;
  padding-left: 21px;
}
.hardware-task-visualization .env-info-path,
.hardware-task-visualization .env-info-command {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  background-color: color-mix(in srgb, var(--c-neutral), transparent 75%);
  padding: 6px 10px;
  border-radius: 4px;
  word-break: break-all;
  margin-left: 21px;
}
.hardware-task-visualization .env-info-empty {
  font-style: italic;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-task-visualization .env-file-item {
  padding: 3px 0;
  gap: 6px;
}
.hardware-task-visualization .env-file-item .env-file-icon {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-task-visualization .env-file-item .env-file-name {
  font-weight: 500;
}
.hardware-task-visualization .env-file-item .env-file-size {
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  margin-left: 4px;
}
.hardware-task-visualization .env-message-item {
  padding: 2px 0;
  font-size: 12px;
}
.hardware-task-visualization .env-message-item::before {
  content: "›";
  margin-right: 6px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-weight: bold;
}
.hardware-task-visualization .table-container .table tbody tr td:first-child {
  font-weight: bold;
  white-space: nowrap;
}
.hardware-task-visualization .table-container .table tbody tr td ul {
  padding: 0 0 0 16px;
  margin: 0;
}
.hardware-task-visualization .table-container .table tbody tr td ul.file-list {
  padding: 0;
}
.hardware-task-visualization .table-container .table tbody tr td ul.file-list i {
  padding-right: 5px;
}

/* The actions, their heading carrying the controls to step through them (it was a grey bar of its own across the
   dialog), and above the output the action's timing on one line with Raw and Copy. */
.task-visualization__actions {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.task-visualization__actions-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 16px 0;
}

.task-visualization__heading {
  font-size: 12.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.task-visualization__step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.task-visualization__step button {
  display: flex;
  padding: 3px 4px;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.task-visualization__step button i.material-icons {
  font-size: 18px;
}
.task-visualization__step button:hover:not([disabled]) {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}
.task-visualization__step button[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 76%);
  cursor: default;
}
.task-visualization__step button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.task-visualization__step-count {
  min-width: 48px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c-text);
}

.task-visualization__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 32px;
  padding-top: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.task-visualization__tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  /* a ring for the keyboard only; a click leaves no ring behind */
}
.task-visualization__tool i.material-icons {
  font-size: 15px;
}
.task-visualization__tool:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
  color: var(--c-text);
}
.task-visualization__tool.is-on {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.task-visualization__tool[disabled] {
  opacity: 0.5;
  cursor: default;
}
.task-visualization__tool:focus {
  outline: none;
}
.task-visualization__tool:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

/* The columns dialog (widgets/infiniteTable/dialogs/columnsDialog.tmpl.html): what is shown as a strip of chips, a
   search and the Common/All switch above, and the categories as cards that pack into as many columns as fit. It was a
   row of 230px lists under 24px headings, as wide as there were categories. */
md-dialog.app-dialog.columns-dialog {
  width: min(1180px, 100vw - 32px);
  max-width: none;
}
md-dialog.app-dialog.columns-dialog.is-picker-mode {
  width: min(960px, 100vw - 32px);
}
md-dialog.app-dialog.columns-dialog md-dialog-content {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-ink), transparent 76%) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
md-dialog.app-dialog.columns-dialog md-dialog-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
md-dialog.app-dialog.columns-dialog md-dialog-content::-webkit-scrollbar-track {
  background: transparent;
}
md-dialog.app-dialog.columns-dialog md-dialog-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 6px;
}
md-dialog.app-dialog.columns-dialog md-dialog-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-dialog.app-dialog.columns-dialog md-dialog-content::-webkit-scrollbar-corner {
  background: transparent;
}

/* Outside the scrolling content, so the strip and the search stay put while the lists scroll. */
.columns-dialog__top {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--c-border);
}

.columns-dialog__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 96px;
  padding: 10px 24px;
  overflow-y: auto;
  border-bottom: 1px solid var(--c-border);
  background-color: var(--c-surface-subtle);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-ink), transparent 76%) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.columns-dialog__strip::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.columns-dialog__strip::-webkit-scrollbar-track {
  background: transparent;
}
.columns-dialog__strip::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 6px;
}
.columns-dialog__strip::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.columns-dialog__strip::-webkit-scrollbar-corner {
  background: transparent;
}

.columns-dialog__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 3px 0 10px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--c-brand);
}
.columns-dialog__chip button {
  display: flex;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.columns-dialog__chip button i.material-icons {
  font-size: 14px;
}
.columns-dialog__chip button:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 82%);
}
.columns-dialog__chip button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

/* The strip is the table's order: a chip is dragged to move its column, a line on the side it would go. */
.columns-dialog__chip {
  position: relative;
  padding-left: 4px;
  cursor: grab;
}
.columns-dialog__chip.is-dragged {
  opacity: 0.55;
  outline: 1px dashed var(--c-brand);
  outline-offset: 1px;
}
.columns-dialog__chip.is-drop-before::before, .columns-dialog__chip.is-drop-after::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--c-brand);
}
.columns-dialog__chip.is-drop-before::before {
  left: -5px;
}
.columns-dialog__chip.is-drop-after::after {
  right: -5px;
}

.columns-dialog__grip {
  font-size: 14px !important;
  opacity: 0.55;
}

.columns-dialog__strip-hint {
  align-self: center;
  margin-left: 4px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.columns-dialog__strip-empty {
  line-height: 24px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.columns-dialog__tools {
  padding: 12px 24px;
}

/* The switch inside the field, at its end, a step smaller so the field keeps its height */
.columns-dialog__search {
  max-width: 560px;
  padding-right: 4px;
}
.columns-dialog__search .app-switch {
  flex: 0 0 auto;
  padding: 2px;
  border: 0;
  border-radius: 6px;
}
.columns-dialog__search .app-switch button {
  height: 24px;
  padding: 0 12px;
  font-size: 12.5px;
}
.columns-dialog__search .app-switch__thumb {
  border-radius: 5px;
}

.columns-dialog__body {
  padding-top: 14px;
}

/* The columns are laid out by the view controller (cv.layout): the categories in order, down one and on to the next. */
.columns-dialog__cats {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.columns-dialog__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.columns-dialog__cat {
  padding: 4px 0 6px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  /* One category: no heading and no frame, one list over the columns */
}
.is-flat .columns-dialog__cat {
  padding: 0;
  border: 0;
}

.columns-dialog__cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--c-text);
}

.columns-dialog__cat-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* The rest of a category from the column before: its name again, quieter */
.columns-dialog__cat-head.is-continued {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.columns-dialog__cat-count {
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.columns-dialog__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.columns-dialog__rows.is-nested {
  padding-left: 18px;
}

/* A row is the whole width, so the label is a target as large as the line it is on. */
md-checkbox.columns-dialog__check {
  display: flex;
  align-items: flex-start;
  min-height: 0;
  margin: 0;
  padding: 4px 12px;
  line-height: 20px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
md-checkbox.columns-dialog__check:hover {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}
md-checkbox.columns-dialog__check.is-on {
  color: var(--c-text);
}
md-checkbox.columns-dialog__check .md-container {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  transform: none;
}
md-checkbox.columns-dialog__check .md-icon {
  width: 16px;
  height: 16px;
}
md-checkbox.columns-dialog__check.md-checked .md-icon:after {
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
}
md-checkbox.columns-dialog__check.md-indeterminate .md-icon:after {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 0;
  border-width: 0 0 2px 0;
  border-style: solid;
  transform: none;
}
md-checkbox.columns-dialog__check .md-label {
  margin: 0 0 0 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}
md-checkbox.columns-dialog__check mark {
  padding: 0;
  border-radius: 2px;
  background-color: var(--c-match-highlight);
  color: inherit;
}

/* The category's own box sits in its heading, which has the padding already */
.columns-dialog__cat-head md-checkbox.columns-dialog__check {
  padding: 0;
}
.columns-dialog__cat-head md-checkbox.columns-dialog__check:hover {
  background: none;
}
.columns-dialog__cat-head md-checkbox.columns-dialog__check .md-label {
  display: none;
}

.columns-dialog__adv {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-size: 11px;
  line-height: 15px;
  vertical-align: 1px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.columns-dialog__group-head {
  display: flex;
  align-items: center;
}
.columns-dialog__group-head md-checkbox.columns-dialog__check,
.columns-dialog__group-head .columns-dialog__group-name {
  flex: 1 1 auto;
}
.columns-dialog__group-head md-checkbox.columns-dialog__check {
  font-weight: 600;
  color: var(--c-text);
}
.columns-dialog__group-head .columns-dialog__group-name {
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

.columns-dialog__caret {
  display: flex;
  margin-right: 6px;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.columns-dialog__caret i.material-icons {
  font-size: 18px;
}
.columns-dialog__caret:hover {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}

/* Picking a filter column: a row to click, no box */
.columns-dialog__pick {
  display: block;
  width: 100%;
  padding: 4px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.columns-dialog__pick:hover, .columns-dialog__pick:focus-visible {
  outline: none;
  background-color: var(--c-surface-subtle);
  color: var(--c-brand);
}
.columns-dialog__pick mark {
  padding: 0;
  border-radius: 2px;
  background-color: var(--c-match-highlight);
  color: inherit;
}

@media (max-width: 959px) {
  .columns-dialog__strip,
.columns-dialog__tools {
    padding-left: 16px;
    padding-right: 16px;
  }
  .columns-dialog__search {
    max-width: none;
  }
}
.job-table .job-table-action-buttons {
  margin-right: 10px;
}
.job-table .job-table-action-buttons i {
  width: 35px;
}
.job-table .assigned-hardware-table {
  border-collapse: separate;
  border-spacing: 0 5px;
  margin-top: -5px;
  margin-bottom: -5px;
}
.job-table .assigned-hardware-table td {
  vertical-align: top;
}
.job-table .assigned-hardware-table td .task-name {
  white-space: nowrap;
  vertical-align: top;
  margin-left: 11px;
}
.job-table .assigned-hardware-table td .without-text {
  vertical-align: top;
}
.job-table .assigned-hardware-table tbody tr td ul.hardware-list {
  margin-left: 10px;
  margin-right: 10px;
}
.job-table .assigned-hardware-table tbody tr td ul.hardware-list .tag {
  vertical-align: top;
}

.tooltip-for-date-with-timezone {
  height: auto;
}
.tooltip-for-date-with-timezone p {
  margin: 0;
  padding: 0;
}

.job-new {
  color: var(--c-ink);
  font-weight: bold;
}

.job-scheduled, .job-paused {
  color: var(--c-accent);
  font-weight: bold;
}

.job-running {
  color: var(--c-success);
  font-weight: bold;
}

/* On/off in a table cell (ColumnFactory.switchHtml): routines, policies, alerts. Green with a tick when on, grey when
   off; the words are in the tooltip, not in every row. It was Material's orange switch, the same colour both ways but
   for a shade. */
.table-switch {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 76%);
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.table-switch:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.table-switch.is-on {
  background-color: var(--c-success-deep);
}
.table-switch.is-on:hover {
  filter: brightness(1.08);
}
.table-switch:focus {
  outline: none;
}
.table-switch:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 60%);
}

.table-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, rgb(0,0,0), transparent 70%);
  transition: transform 150ms ease;
}
.table-switch__knob i.material-icons {
  position: static;
  float: none;
  height: auto;
  font-size: 12px;
  line-height: 1;
  color: var(--c-success-deep);
  opacity: 0;
  transition: opacity 150ms ease;
}
.is-on > .table-switch__knob {
  transform: translateX(16px);
}
.is-on > .table-switch__knob i.material-icons {
  opacity: 1;
}

/* the tables float and lift their cell icons (infiniteTable.scss); not this one */
.infinite-table-container .table.infinite-table tbody tr td .table-switch__knob i.material-icons {
  position: static;
  bottom: auto;
  float: none;
  height: auto;
}

/* a row whose switch is off: its text greyed, so the inactive ones stand out without reading the switch */
.infinite-table-container .table.infinite-table tbody tr:has(.table-switch:not(.is-on)) td {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.infinite-table-container .table.infinite-table tbody tr:has(.table-switch:not(.is-on)) td a {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
  .table-switch,
.table-switch__knob,
.table-switch__knob i.material-icons {
    transition: none;
  }
}
.loading-bar {
  position: fixed;
  top: 64px;
  left: var(--sidebar-width);
  right: 0;
  /* Under the app's chrome: the toolbar is 70, the sidebar 71, its notification panel 75, a dialog 79. Both the
     bar and the veil belong to the page under them, and a menu opened over the content stays readable. */
  z-index: 69;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.loading-bar.is-visible {
  opacity: 1;
}
.loading-bar i {
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-accent), transparent 100%), var(--c-accent) 30%, var(--c-accent) 70%, color-mix(in srgb, var(--c-accent), transparent 100%));
  animation: loading-bar-slide 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loading-bar-slide {
  from {
    left: -35%;
  }
  to {
    left: 100%;
  }
}
.loading-veil {
  position: fixed;
  top: 64px;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background-color: color-mix(in srgb, var(--c-surface-sunken), transparent 45%);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.loading-veil.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms ease, visibility 0s;
}

@media (max-width: calc(1280px - 1px)) {
  .loading-bar,
.loading-veil {
    left: 0;
  }
}
.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  padding: 18px 22px 14px;
  border-radius: 14px;
  background-color: var(--c-surface);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 1px 3px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

.loading-label {
  font-size: 12px;
  color: var(--c-field-text);
}

.loading-page {
  position: absolute;
  inset: 0;
  z-index: 10100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  background-color: var(--c-surface-sunken);
}

.loading-card .progress-container,
.loading-page .progress-container {
  margin: 0;
}
.loading-card .progress-container .progress-item,
.loading-page .progress-container .progress-item {
  margin-bottom: 6px;
}
.loading-card .progress-container .progress-item .linear-progress,
.loading-page .progress-container .progress-item .linear-progress {
  width: 220px;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--c-surface-sunken);
}
.loading-card .progress-container .progress-item .linear-progress .progress-bar,
.loading-page .progress-container .progress-item .linear-progress .progress-bar {
  height: 100%;
  padding: 0;
  border-radius: 4px;
  background-color: var(--c-brand);
  font-size: 0;
  transition: width 250ms ease;
}

.page-reveal {
  transition: opacity 120ms ease;
}
.page-reveal.is-revealing {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.loading-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
}

.loading-mark-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: loading-mark-turn 1.1s linear infinite;
}
.loading-mark-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.loading-mark-track {
  stroke: color-mix(in srgb, var(--c-brand-fill), transparent 86%);
}

.loading-mark-arc {
  stroke: var(--c-accent);
  stroke-dasharray: 44 200;
}

.loading-mark-logo {
  width: 48px;
  height: 48px;
}

.loading-mark-disc {
  fill: var(--c-brand-fill);
}

.loading-mark-stroke {
  fill: none;
  stroke: var(--c-on-fill);
  stroke-width: 22;
  stroke-linecap: round;
}
.loading-mark-stroke.is-accent {
  stroke: var(--c-accent);
}

@keyframes loading-mark-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-bar i,
.loading-mark-ring {
    animation-duration: 3s;
  }
}
.loading-picture .loader {
  position: relative;
  display: block;
  margin: 200px auto;
}
.loading-picture img {
  position: relative;
  display: block;
  margin: 200px auto;
  width: 50px;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loading-picture md-progress-circular path {
  stroke: var(--c-ink);
}

@media (min-width: 768px) {
  .loading-picture .loader {
    margin-top: 20%;
  }
  .loading-picture img {
    margin-top: 20%;
    content: url(/app/resources/xeox_x.png);
  }
  .loading-picture md-progress-circular path {
    stroke: var(--c-on-fill);
  }
}
.progress-circular-loader md-progress-circular path {
  stroke: var(--c-ink);
}

.content-loader-host {
  position: relative;
  display: block;
  min-height: 8em;
}

md-dialog .content-loader-host {
  --content-loader-bg: var(--c-surface);
}

.content-loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--content-loader-bg, var(--c-surface-sunken));
  z-index: 10;
}
.content-loader-overlay .content-loader-spinner path {
  stroke: var(--c-brand);
}

@media (min-width: 600px) {
  .managed-organisations-container .info-container span:not(:last-child), .payments-container .info-container span:not(:last-child) {
    padding-right: 10px;
    border-right: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  }
  .managed-organisations-container .info-container span:not(:first-child), .payments-container .info-container span:not(:first-child) {
    padding-left: 10px;
  }
}
.managed-organisations-container .table-container, .payments-container .table-container {
  overflow: auto;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .managed-organisations-container .table-container th, .managed-organisations-container .table-container td, .payments-container .table-container th, .payments-container .table-container td {
    padding-right: 10px;
  }
}

.billing-info-container {
  margin-bottom: 10px;
}
.billing-info-container .expiry-text {
  font-weight: bold;
}

.payments-container md-divider {
  margin: 10px 0;
}
.payments-container .title {
  font-size: 20px;
  font-weight: bold;
}
.payments-container .info-container .limit-exceeded {
  color: var(--c-danger);
}
.payments-container .table-container .state-indicator {
  text-transform: uppercase;
  font-weight: bold;
}
.payments-container .table-container .state-indicator.active {
  color: var(--c-success);
}
.payments-container .table-container .state-indicator.upcoming {
  color: var(--c-brand);
}
.payments-container .table-container .state-indicator.expired {
  color: var(--c-danger);
}

.affiliate-program-container {
  /* The page's first card starts where every page's content does ($pageContentTop in values.scss). */
  padding-top: 16px;
  max-width: 1100px;
  /* The cards of Getting started and Integrations: flat, a hairline, 8px corners. */
  /* Making a new link is not the page's main action, and it breaks the old one: a quiet link that says so. */
  /* An invitation rather than an apology. */
}
.affiliate-program-container .affiliate-card {
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.affiliate-program-container .affiliate-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}
.affiliate-program-container .affiliate-subtitle {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.affiliate-program-container .affiliate-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.affiliate-program-container .affiliate-link-row .md-button {
  margin: 0;
}
.affiliate-program-container .affiliate-link {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background-color: var(--c-surface-sunken);
}
.affiliate-program-container .affiliate-link .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.affiliate-program-container .affiliate-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: var(--c-field-text);
}
.affiliate-program-container .affiliate-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  height: 34px;
  padding: 0 14px;
  line-height: 34px;
  text-transform: none;
}
.affiliate-program-container .affiliate-action .material-icons {
  font-size: 17px;
}
.affiliate-program-container .affiliate-action-secondary {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 86%);
  color: var(--c-text);
}
.affiliate-program-container .affiliate-regenerate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.affiliate-program-container .affiliate-regenerate .material-icons {
  font-size: 15px;
}
.affiliate-program-container .affiliate-regenerate a {
  color: var(--c-link);
}
.affiliate-program-container .affiliate-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--c-border);
  list-style: none;
}
.affiliate-program-container .affiliate-steps li {
  display: flex;
  flex: 1 1 180px;
  align-items: flex-start;
  gap: 10px;
}
.affiliate-program-container .affiliate-steps li b {
  display: block;
  font-weight: 500;
  color: var(--c-text);
}
.affiliate-program-container .affiliate-steps li b + span {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.affiliate-program-container .affiliate-step-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-size: 12px;
  font-weight: 600;
}
.affiliate-program-container .affiliate-organisations {
  padding: 0;
}
.affiliate-program-container .affiliate-organisations-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 13px 16px 11px;
}
.affiliate-program-container .affiliate-organisations-heading {
  flex: 1;
  min-width: 0;
}
.affiliate-program-container .affiliate-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.affiliate-program-container .affiliate-stat .affiliate-stat-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.affiliate-program-container .affiliate-stat .affiliate-stat-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.affiliate-program-container .affiliate-organisation-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.affiliate-program-container .affiliate-organisation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--c-border);
}
.affiliate-program-container .affiliate-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
}
.affiliate-program-container .affiliate-avatar.is-tint-0 {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}
.affiliate-program-container .affiliate-avatar.is-tint-1 {
  background-color: color-mix(in srgb, var(--c-info), transparent 86%);
  color: var(--c-info);
}
.affiliate-program-container .affiliate-avatar.is-tint-2 {
  background-color: color-mix(in srgb, var(--c-cat-purple), transparent 84%);
  color: var(--c-cat-purple);
}
.affiliate-program-container .affiliate-avatar.is-tint-3 {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success-deep);
}
.affiliate-program-container .affiliate-organisation-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--c-text);
}
.affiliate-program-container .affiliate-organisation-date {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-variant-numeric: tabular-nums;
}
.affiliate-program-container .affiliate-organisations-more {
  padding: 9px 16px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.affiliate-program-container .affiliate-empty {
  padding: 26px 16px 28px;
  border-top: 1px solid var(--c-border);
  text-align: center;
}
.affiliate-program-container .affiliate-empty .material-icons {
  font-size: 24px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.affiliate-program-container .affiliate-empty-title {
  margin-top: 6px;
  font-weight: 500;
  color: var(--c-text);
}
.affiliate-program-container .affiliate-empty-text {
  margin-top: 2px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* The app's dialog, one design for all of them (see the organisation dialogs in services/organisationUtils for the
   three kinds): a head with an icon tile, a title and one line of context, then the body, then the actions with
   the one that does the thing filled and last.

     md-dialog.app-dialog              a form, 460px
     md-dialog.app-dialog.is-picker    a search and a list to pick from, 560px
     md-dialog.app-dialog.is-wide      anything that needs the room: as wide as its content, 640px up to 90vw
     .app-dialog__icon.is-danger       a dialog that deletes: red tile, and .app-dialog__danger for its button

   Tokens only, so the light and the dark theme alike. The IP plan's .ip-dialog and the building plan's
   .bp-dialog came first and look the same; they move onto these classes as their dialogs are touched. */
md-dialog.app-dialog {
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background-color: var(--c-surface);
  /* Wide dialogs size to their content, as they did before (Material's dialog is as wide as what it holds): a
     columns grid, a table, a wizard, an editor each want their own width, and a fixed 900px squeezed the larger
     ones. At least 640px so a sparse one still reads as wide; the old medium/large-dialog content widths
     (dialog.scss) apply again where a dialog carries them. */
}
md-dialog.app-dialog.is-picker {
  width: 560px;
}
md-dialog.app-dialog.is-wide {
  width: auto;
  min-width: min(640px, 100vw - 32px);
  max-width: min(90vw, 1440px);
}
md-dialog.app-dialog md-dialog-content {
  padding: 0;
}
md-dialog.app-dialog > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* a scrolling list in a dark dialog scrolled with the browser's light bar */
[data-theme=dark] md-dialog {
  color-scheme: dark;
}

/* Every scroll area in a dialog: the page panels' slim bar (_scrollbar.scss), quieter still — a 6px thumb in the
   border colour on no track, which darkens under the pointer. The native one was a full grey gutter beside the
   rows. */
md-dialog md-dialog-content,
md-dialog .app-dialog__list,
md-dialog .assign-picker__results,
md-dialog .org-tree-picker__tree {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-ink), transparent 76%) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
md-dialog md-dialog-content::-webkit-scrollbar,
md-dialog .app-dialog__list::-webkit-scrollbar,
md-dialog .assign-picker__results::-webkit-scrollbar,
md-dialog .org-tree-picker__tree::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
md-dialog md-dialog-content::-webkit-scrollbar-track,
md-dialog .app-dialog__list::-webkit-scrollbar-track,
md-dialog .assign-picker__results::-webkit-scrollbar-track,
md-dialog .org-tree-picker__tree::-webkit-scrollbar-track {
  background: transparent;
}
md-dialog md-dialog-content::-webkit-scrollbar-thumb,
md-dialog .app-dialog__list::-webkit-scrollbar-thumb,
md-dialog .assign-picker__results::-webkit-scrollbar-thumb,
md-dialog .org-tree-picker__tree::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 6px;
}
md-dialog md-dialog-content::-webkit-scrollbar-thumb:hover,
md-dialog .app-dialog__list::-webkit-scrollbar-thumb:hover,
md-dialog .assign-picker__results::-webkit-scrollbar-thumb:hover,
md-dialog .org-tree-picker__tree::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-dialog md-dialog-content::-webkit-scrollbar-corner,
md-dialog .app-dialog__list::-webkit-scrollbar-corner,
md-dialog .assign-picker__results::-webkit-scrollbar-corner,
md-dialog .org-tree-picker__tree::-webkit-scrollbar-corner {
  background: transparent;
}

.app-dialog__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--c-border);
}

.app-dialog__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.app-dialog__icon i.material-icons {
  font-size: 22px;
}
.app-dialog__icon.is-danger {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}

.app-dialog__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.app-dialog__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-text);
}

.app-dialog__sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.app-dialog__close {
  display: flex;
  flex: none;
  align-self: flex-start;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.app-dialog__close:hover, .app-dialog__close:focus-visible {
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  color: var(--c-text);
}

/* Feedback about this dialog (appDialogHead.directive.js), beside the close button and as quiet as it: it is
   there for whoever has something to say, not a call to action. */
.app-dialog__feedback {
  display: flex;
  flex: none;
  align-self: flex-start;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.app-dialog__feedback i.material-icons {
  font-size: 19px;
}
.app-dialog__feedback:hover, .app-dialog__feedback:focus-visible {
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  color: var(--c-text);
}

.app-dialog__body {
  padding: 14px 20px 12px;
}

.app-dialog__fields {
  display: grid;
  gap: 10px;
}

md-dialog-actions.app-dialog__actions {
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
}
md-dialog-actions.app-dialog__actions .md-button {
  min-width: 88px;
  margin: 0;
  padding: 0 16px;
}

/* The button that does what the dialog is for: filled, named for it, last. Material's theme greys a button that
   holds focus (.md-button:not([disabled]).md-focused, injected at runtime and so later than this file) — and a
   dialog often opens with focus on its main button. Scoped to md-dialog, these outrank that. */
md-dialog .md-button.app-dialog__primary,
md-dialog .md-button.app-dialog__primary:not([disabled]),
md-dialog .md-button.app-dialog__primary:not([disabled]):hover,
md-dialog .md-button.app-dialog__primary:not([disabled]).md-focused {
  border: 0;
  background-color: var(--c-brand);
  font-weight: 600;
  color: var(--c-on-fill);
}

md-dialog .md-button.app-dialog__danger,
md-dialog .md-button.app-dialog__danger:not([disabled]),
md-dialog .md-button.app-dialog__danger:not([disabled]):hover,
md-dialog .md-button.app-dialog__danger:not([disabled]).md-focused {
  border: 0;
  background-color: var(--c-danger);
  font-weight: 600;
  color: var(--c-on-fill);
}

md-dialog .md-button.app-dialog__primary:not([disabled]):hover,
md-dialog .md-button.app-dialog__danger:not([disabled]):hover,
md-dialog .md-button.app-dialog__primary:not([disabled]).md-focused,
md-dialog .md-button.app-dialog__danger:not([disabled]).md-focused {
  filter: brightness(1.08);
}

/* The app's own disabled-button rule ([data-theme] .md-button:not(…):not(…)[disabled], content colour at 38%)
   outranked this one and left dark grey text on the fill; under [data-theme] it wins back the white. */
[data-theme] md-dialog .md-button.app-dialog__primary[disabled][disabled],
[data-theme] md-dialog .md-button.app-dialog__danger[disabled][disabled] {
  border: 0;
  color: var(--c-on-fill);
  opacity: 0.45;
}

md-dialog .md-button.app-dialog__primary[disabled] {
  background-color: var(--c-brand);
}

md-dialog .md-button.app-dialog__danger[disabled] {
  background-color: var(--c-danger);
}

/* a picker's footer: how to drive it by keyboard, and anything worth a second look */
.app-dialog__footer {
  /* after the content, which Material orders in the dialog's flex column (md-dialog-content 1, actions 2) */
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 9px 20px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  /* Bootstrap draws kbd as white on near-black, which in the light theme was a dark lozenge with the key on it
     unreadable; a key here is a quiet outline on the dialog's own ground in either theme. */
}
.app-dialog__footer kbd {
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  box-shadow: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* a notice above a list or a form, when something is not as expected */
.app-dialog__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-warning), transparent 86%);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-warning-ink);
}
.app-dialog__notice i.material-icons {
  flex: none;
  font-size: 18px;
}

/* A picker's search: a field with an icon, and a bar along its bottom edge while a search runs. */
.app-dialog__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}
.app-dialog__search:focus-within {
  border-color: var(--c-brand);
}
.app-dialog__search > i.material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.app-dialog__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
}
@media (pointer: coarse) {
  .app-dialog__search input {
    font-size: 16px;
  }
}
.app-dialog__search input::-webkit-search-cancel-button {
  display: none;
}

.app-dialog__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 2px 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.app-dialog__list {
  max-height: min(420px, 100vh - 300px);
  margin: 8px -10px 0 -8px;
  padding: 0 4px 0 8px;
  scrollbar-gutter: stable;
  overflow-y: auto;
  list-style: none;
}

/* A row to pick: no separators, a tile, the name, and a pill or a note at the end. The mouse and the keyboard
   position are one highlight. */
.app-dialog__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--c-text);
  cursor: pointer;
}
.app-dialog__row.is-active {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand), transparent 55%);
}
.app-dialog__row.is-blocked {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: not-allowed;
}
.app-dialog__row.is-blocked.is-active {
  background: none;
  box-shadow: none;
}
.app-dialog__row mark {
  padding: 0;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--c-warning), transparent 65%);
  color: inherit;
}

.app-dialog__tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background-color: var(--c-surface-subtle);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.is-current > .app-dialog__tile {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}

.app-dialog__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-dialog__pill {
  flex: none;
  padding: 1px 8px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  font-size: 11.5px;
  color: var(--c-brand);
}

.app-dialog__note {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.app-dialog__note i.material-icons {
  font-size: 14px;
}
.app-dialog__note.is-warning {
  color: var(--c-warning-ink);
}

.app-dialog__empty {
  margin: 12px 2px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.app-dialog__empty kbd {
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  box-shadow: none;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* Keyboard hints mean nothing on a touch screen; a footer left with nothing else in it goes with them. */
@media (hover: none) and (pointer: coarse) {
  .app-dialog__keys {
    display: none !important;
  }
  .app-dialog__footer:not(:has(> :not(.app-dialog__keys))) {
    display: none;
  }
}
/* Up to 959px Material makes a dialog opened full-screen the whole screen (md-dialog-fullscreen — the class is
   set at any width, the layout only below that, hence the same breakpoint here). A picker then gives its list all
   the height between the search and the footer, rather than stopping at 420px and leaving the rest of the screen
   empty under a footer stranded halfway down. The search stays put while the list scrolls. */
@media (max-width: 959px) {
  md-dialog.app-dialog.md-dialog-fullscreen {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  md-dialog.app-dialog.md-dialog-fullscreen.is-picker md-dialog-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  md-dialog.app-dialog.md-dialog-fullscreen.is-picker .app-dialog__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
  }
  md-dialog.app-dialog.md-dialog-fullscreen.is-picker .app-dialog__list {
    flex: 1 1 auto;
    max-height: none;
    padding-bottom: 12px;
  }
}
/* Material's confirm and alert dialogs ($mdDialog.confirm() / .alert()), marked app-confirm as they are shown
   (widgets/appDialog/confirmStyle.decorator.js): an icon tile beside the question and its explanation, then the
   answers with the one that acts filled and last — red, with a red tile, when it can't be taken back. */
md-dialog.app-confirm {
  width: 440px;
  max-width: calc(100vw - 32px);
  background-color: var(--c-surface);
}
md-dialog.app-confirm md-dialog-content.md-dialog-content {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  height: auto;
  margin: 0;
  padding: 20px 20px 16px;
  /* the tile, drawn from the icon font's ligature so the preset template needs nothing added */
}
md-dialog.app-confirm md-dialog-content.md-dialog-content::before {
  content: "help_outline";
  grid-row: 1/span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-family: "Material Icons";
  font-size: 22px;
  font-feature-settings: "liga";
  line-height: 1;
  color: var(--c-brand);
}
md-dialog.app-confirm md-dialog-content.md-dialog-content > * {
  grid-column: 2;
}
md-dialog.app-confirm md-dialog-content.md-dialog-content .md-title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
}
md-dialog.app-confirm md-dialog-content.md-dialog-content .md-dialog-content-body {
  min-height: 0;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-field-text);
}
md-dialog.app-confirm md-dialog-content.md-dialog-content .md-dialog-content-body p {
  margin: 0;
}
md-dialog.app-confirm.is-alert md-dialog-content.md-dialog-content::before {
  content: "info_outline";
}
md-dialog.app-confirm.is-danger md-dialog-content.md-dialog-content::before {
  content: "warning_amber";
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
md-dialog.app-confirm md-dialog-actions {
  gap: 8px;
  min-height: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
  /* Material themes the button (.md-default-theme) and greys it while it holds the focus it opens with
     (.md-focused), both more specific than a plain class — so the fill is stated for those states too. */
}
md-dialog.app-confirm md-dialog-actions .md-button {
  min-width: 88px;
  margin: 0;
  padding: 0 16px;
  border-radius: 6px;
  text-transform: none;
}
md-dialog.app-confirm md-dialog-actions .md-cancel-button {
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
md-dialog.app-confirm md-dialog-actions .md-button.md-confirm-button,
md-dialog.app-confirm md-dialog-actions .md-button.md-confirm-button.md-default-theme:not([disabled]),
md-dialog.app-confirm md-dialog-actions .md-button.md-confirm-button.md-default-theme.md-focused:not([disabled]),
md-dialog.app-confirm md-dialog-actions .md-button.md-confirm-button.md-default-theme:not([disabled]):hover {
  border: 0;
  background-color: var(--c-brand);
  font-weight: 600;
  color: var(--c-on-fill);
}
md-dialog.app-confirm md-dialog-actions .md-button.md-confirm-button:not([disabled]):hover,
md-dialog.app-confirm md-dialog-actions .md-button.md-confirm-button.md-focused:not([disabled]) {
  filter: brightness(1.08);
}
md-dialog.app-confirm.is-danger md-dialog-actions .md-button.md-confirm-button,
md-dialog.app-confirm.is-danger md-dialog-actions .md-button.md-confirm-button.md-default-theme:not([disabled]),
md-dialog.app-confirm.is-danger md-dialog-actions .md-button.md-confirm-button.md-default-theme.md-focused:not([disabled]),
md-dialog.app-confirm.is-danger md-dialog-actions .md-button.md-confirm-button.md-default-theme:not([disabled]):hover {
  background-color: var(--c-danger);
}

@media (max-width: 959px) {
  md-dialog.app-confirm md-dialog-content.md-dialog-content {
    margin-bottom: 0;
  }
}
/* A switch between a few modes, with one highlight that slides to the chosen one instead of each button filling
   on its own: <span class="app-switch has-3 is-at-1"><span class="app-switch__thumb"></span><button>…</button>…
   The segments are equal, so the thumb's place is the index; has-N says how many there are. */
.app-switch {
  position: relative;
  display: inline-grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}
.app-switch button {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 26px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: color 180ms ease;
}
.app-switch button:hover:not([disabled]) {
  color: var(--c-text);
}
.app-switch button.is-on {
  font-weight: 600;
  color: var(--c-brand);
}
.app-switch button[disabled] {
  cursor: default;
}
.app-switch button:focus {
  outline: none;
}
.app-switch button:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.app-switch__thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 6px;
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.has-2 > .app-switch__thumb {
  width: calc((100% - 4px) / 2);
}
.has-3 > .app-switch__thumb {
  width: calc((100% - 4px) / 3);
}
.has-4 > .app-switch__thumb {
  width: calc((100% - 4px) / 4);
}
.is-at-1 > .app-switch__thumb {
  transform: translateX(100%);
}
.is-at-2 > .app-switch__thumb {
  transform: translateX(200%);
}
.is-at-3 > .app-switch__thumb {
  transform: translateX(300%);
}

@media (prefers-reduced-motion: reduce) {
  .app-switch__thumb,
.app-switch button {
    transition: none;
  }
}
/* Select sites (siteUtils/dialogs/selectSites.tmpl.html): a picker whose rows are ticked rather than taken. The
   whole row toggles its checkbox, "Only" (on hover) ticks just that one, "All sites" sits above the list with how
   many are ticked, and the footer says how many are selected — in the warning colour when none is, with Save
   disabled. */
.site-picker {
  /* Material's checkbox is a 48px tall touch target; the row is the target here, so it is the box's size. */
  /* with a mouse it shows on the row under it; on touch there is no hover, so it stays */
}
.site-picker .app-dialog__row {
  min-height: 40px;
  user-select: none;
}
.site-picker .app-dialog__row:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
}
.site-picker .app-dialog__row.is-checked .app-dialog__tile {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}
.site-picker .site-picker__all {
  margin: 8px 0 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 8px 8px 0 0;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.site-picker .site-picker__all .app-dialog__note {
  font-variant-numeric: tabular-nums;
}
.site-picker md-checkbox.site-picker__check {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0 2px 0 0;
  line-height: 18px;
}
.site-picker md-checkbox.site-picker__check .md-container {
  top: 50%;
  margin: 0;
}
.site-picker md-checkbox.site-picker__check .md-label {
  display: none;
}
.site-picker .site-picker__only {
  flex: none;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.site-picker .site-picker__only:hover, .site-picker .site-picker__only:focus-visible {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
@media (hover: hover) {
  .site-picker .app-dialog__row:not(:hover):not(:focus-within) .site-picker__only {
    visibility: hidden;
  }
}
.site-picker .site-picker__count {
  margin-left: 4px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.site-picker .site-picker__count.is-warning {
  color: var(--c-warning-ink);
}

/* Dialog styles for batch a of the app-dialog conversion (see appDialog.scss). */
/* Run script (job/dialogs/executeScript): job.scss grows the old .md-dialog-content wrapper into the dialog's
   height so the editors fill it; the wrapper is .app-dialog__body now. */
.run-script-dialog md-dialog-content > .app-dialog__body {
  flex: 1 0 auto;
}

/* Download via aria2c (job/dialogs/downloadExternal): job.scss styled these under the old .md-dialog-content
   wrapper, which is .app-dialog__body now. */
md-dialog.download-dialog .app-dialog__body .title {
  font-size: 16px;
  font-weight: bold;
}
md-dialog.download-dialog .app-dialog__body .additional-options {
  margin-top: 10px;
}
md-dialog.download-dialog .app-dialog__body .additional-options .tool-options {
  margin-left: 5px;
}
md-dialog.download-dialog .app-dialog__body .additional-options .tool-options a:hover {
  text-decoration: none;
}
md-dialog.download-dialog .app-dialog__body .divider {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}

/* The nested "Sources & options" dialog (job/dialogs/download2Edit) stays narrower than the is-wide Download
   dialog it opens over (conditionalStatementBuilder.scss), so the two do not overlap exactly. */
md-dialog.app-dialog.download-sources-dialog {
  width: 720px;
  max-width: min(88vw, 100vw - 32px);
}

/* Create file (job/dialogs/downloadTextfile): the editor takes whatever height the dialog has left under the
   description and the filename, instead of calc(100vh - 300px) — a guess at the old toolbar's and actions' height
   that the app dialog's head no longer matched, so the body scrolled by the difference. */
md-dialog.app-dialog.create-file-dialog {
  height: calc(100vh - 64px);
}
md-dialog.app-dialog.create-file-dialog md-dialog-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
md-dialog.app-dialog.create-file-dialog .app-dialog__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
md-dialog.app-dialog.create-file-dialog .dialog-description {
  margin: 0 0 4px;
}
md-dialog.app-dialog.create-file-dialog #ace-editor {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px;
  margin-top: 12px;
}

/* Dialog styles for batch b of the app-dialog conversion (see appDialog.scss). */
/* Reboot / Sleep (job/dialogs/timeSelect): the mode, its value, and a line saying what will happen. */
.time-select {
  display: grid;
  gap: 14px;
}
.time-select .subnet-field > label,
.time-select .subnet-field__label {
  margin-bottom: 5px;
}
.time-select .app-switch {
  justify-self: start;
}

.time-select__minutes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.time-select__unit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
.time-select__unit input {
  width: 84px;
}
.time-select__unit span {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.time-select__preset {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.time-select__preset:hover:not([disabled]) {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.time-select__preset.is-on {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}

.time-select__schedule {
  display: block;
  width: 260px;
  max-width: 100%;
  margin: 0;
}
.time-select__schedule .md-errors-spacer {
  display: none;
}

.time-select__url {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
}

.time-select__url-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}

.time-select__url-hint code {
  padding: 0 3px;
  border-radius: 3px;
  background-color: var(--c-surface-subtle);
  font-size: 11.5px;
  color: var(--c-text);
}

.time-select__summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-field-text);
}
.time-select__summary i.material-icons {
  flex: none;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Send email (job/dialogs/sendEmail): the recipient with "you" as its empty state, and the message with its limit
   as a counter and a bar. */
.send-email {
  display: grid;
  gap: 14px;
}
.send-email .subnet-field > label {
  margin-bottom: 5px;
}
.send-email textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
}
.send-email .subnet-field__under.is-warning {
  color: var(--c-warning-ink);
}
.send-email .subnet-field.is-warning .send-email__to {
  border-color: var(--c-warning);
}
.send-email .subnet-field.is-error .send-email__to,
.send-email .subnet-field.is-error > input {
  border-color: var(--c-danger);
}
.send-email .send-email__to input.is-mono {
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.send-email__to {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  /* The frame around it shows focus (:focus-within above); the field's own ring inside it was a second frame. */
}
.send-email__to:focus-within {
  border-color: var(--c-brand);
}
.send-email__to > i.material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.subnet-field .send-email__to input, .subnet-field .send-email__to input:focus, .subnet-field .send-email__to input:hover {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: none;
}

.send-email__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
}
.send-email__label-row label {
  margin: 0;
}

.send-email__count {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  transition: color 150ms ease;
}
.send-email__count.is-near {
  color: var(--c-warning-ink);
}

.send-email__bar {
  display: block;
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--c-surface-subtle);
}

.send-email__bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background-color: var(--c-brand);
  transition: width 120ms ease, background-color 150ms ease;
}
.send-email__bar-fill.is-near {
  background-color: var(--c-warning);
}

/* Send Windows message (job/dialogs/sendMessage): the countdown as a line with a mark per pop-up, the reminders as
   chips, the message, and the pop-up as the user sees it. */
md-dialog.app-dialog.send-message-dialog {
  width: 560px;
}

.win-message {
  display: grid;
  gap: 18px;
}
.win-message .subnet-field.is-error textarea {
  border-color: var(--c-danger);
}
.win-message textarea {
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
}

.win-message__section {
  display: grid;
  gap: 8px;
}

.win-message__step {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.win-message__line {
  position: relative;
  height: 54px;
  margin: 0 46px 0 4px;
}

.win-message__track {
  position: absolute;
  top: 9px;
  right: -28px;
  left: 0;
  height: 4px;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 75%);
}

.win-message__mark,
.win-message__end {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  transition: left 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.win-message__mark > i.material-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--c-surface);
  background-color: var(--c-brand);
  font-size: 12px;
  color: var(--c-on-fill);
}
.win-message__mark.is-first {
  transform: none;
}

.win-message__end {
  right: -46px;
  transform: none;
  align-items: flex-end;
}
.win-message__end > i.material-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.win-message__mark-label {
  margin-top: 6px;
  font-size: 11.5px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.is-first > .win-message__mark-label {
  font-weight: 600;
  color: var(--c-brand);
}

.win-message__reminders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.win-message__lead {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.win-message__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  padding: 0 4px 0 10px;
  border-radius: 13px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  font-size: 12.5px;
  color: var(--c-brand);
}
.win-message__chip button {
  display: flex;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.win-message__chip button i.material-icons {
  font-size: 14px;
}
.win-message__chip button:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 82%);
}

.win-message__add {
  display: inline-flex;
  align-items: center;
  height: 26px;
  overflow: hidden;
  border: 1px dashed var(--c-border);
  border-radius: 13px;
}
.win-message__add:focus-within {
  border-style: solid;
  border-color: var(--c-brand);
}
.win-message__add input,
.win-message__add input:focus {
  width: 56px;
  height: 100%;
  padding: 0 4px 0 10px;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: none;
  font-size: 12.5px;
}
.win-message__add button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid var(--c-border);
  background: none;
  color: var(--c-brand);
  cursor: pointer;
}
.win-message__add button i.material-icons {
  font-size: 16px;
}
.win-message__add button[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
}

.win-message__summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-field-text);
}
.win-message__summary i.material-icons {
  flex: none;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.win-message__summary b {
  font-weight: 600;
  color: var(--c-text);
}

.win-message__error {
  margin: 0;
  font-size: 12px;
  color: var(--c-danger);
}

.win-message__under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.win-message__insert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--c-brand);
  cursor: pointer;
}
.win-message__insert i.material-icons {
  font-size: 16px;
}
.win-message__insert code {
  padding: 0 4px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-size: 11.5px;
  color: var(--c-brand);
}
.win-message__insert:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}

.win-message__dropped,
.win-message__plain {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.win-message__dropped {
  color: var(--c-warning-ink);
}
.win-message__dropped i.material-icons {
  font-size: 15px;
}

.win-message__plain {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.win-message__moments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.win-message__moments button {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.win-message__moments button.is-on {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}

/* the pop-up, drawn plainly: the agent's real window may look different */
.win-message__popup {
  max-width: 380px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

.win-message__popup-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: var(--c-surface-subtle);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.win-message__popup-bar i.material-icons {
  font-size: 14px;
}

.win-message__popup-text {
  padding: 10px 12px 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--c-text);
}

@media (prefers-reduced-motion: reduce) {
  .win-message__mark {
    transition: none;
  }
}
/* the quick countdowns over the line: four cards, each with its own small line of pop-ups */
.win-message__presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
@media (max-width: 768px) {
  .win-message__presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.win-message__preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 10px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.win-message__preset:hover {
  border-color: color-mix(in srgb, var(--c-brand), transparent 50%);
}
.win-message__preset.is-on {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.win-message__preset.is-on .win-message__preset-name,
.win-message__preset.is-on .win-message__preset-at {
  color: var(--c-brand);
}
.win-message__preset.is-on .win-message__preset-line {
  background-color: color-mix(in srgb, var(--c-brand), transparent 65%);
}
.win-message__preset.is-on .win-message__preset-line span {
  background-color: var(--c-brand);
}
.win-message__preset:focus {
  outline: none;
}
.win-message__preset:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 78%);
}

.win-message__preset-name {
  font-size: 13px;
  font-weight: 600;
}

.win-message__preset-at {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.win-message__preset-line {
  position: relative;
  align-self: stretch;
  height: 2px;
  margin: 9px 3px 0;
  border-radius: 1px;
  background-color: var(--c-border);
}
.win-message__preset-line span {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Search / download / install Windows Updates (job/dialogs/wuinstallSettings): the source, the kinds of update as
   chips, the limits inline, one update list, and a summary. */
md-dialog.app-dialog.wuinstall-settings-dialog {
  width: 640px;
}

.wuinstall {
  display: grid;
  gap: 16px;
}

.wuinstall__section {
  display: grid;
  gap: 8px;
}
.wuinstall__section .app-switch {
  justify-self: start;
  max-width: 100%;
}
.wuinstall__section .app-switch button {
  padding: 0 10px;
  font-size: 12.5px;
}

.wuinstall__grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 8px 10px;
}
@media (max-width: 768px) {
  .wuinstall__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wuinstall__label {
  padding-top: 5px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.wuinstall__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wuinstall__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.wuinstall__chip i.material-icons {
  margin-left: -3px;
  font-size: 14px;
}
.wuinstall__chip:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--c-brand), transparent 50%);
  color: var(--c-text);
}
.wuinstall__chip.is-on {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}
.wuinstall__chip[disabled] {
  cursor: default;
}

.wuinstall__products {
  margin: 0;
}

.wuinstall__hint {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.wuinstall__limits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wuinstall__limit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  /* the box in the row, centred on the text like the option toggles' (optionToggle.scss), not Material's
     absolutely placed one sitting above the line */
}
.wuinstall__limit.is-on {
  color: var(--c-text);
}
.wuinstall__limit md-checkbox {
  display: inline-flex;
  flex: none;
  align-items: center;
  width: 20px;
  min-width: 0;
  height: 20px;
  min-height: 0;
  margin: 0;
}
.wuinstall__limit md-checkbox .md-container {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  transform: none;
}
.wuinstall__limit md-checkbox .md-label {
  display: none;
}
.wuinstall__limit input,
.wuinstall__limit input:focus {
  width: 56px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
}
.wuinstall__limit input[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.wuinstall__list {
  margin: 0;
}

.wuinstall__advanced {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-self: start;
  padding: 2px 6px 2px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--c-brand);
  cursor: pointer;
}
.wuinstall__advanced i.material-icons {
  font-size: 18px;
}

/* Dialog styles for batch c of the app-dialog conversion (see appDialog.scss). */
/* small-dialog asks for a 600px md-dialog-content (dialog.scss). In a wide app dialog that left a 600px column
   under a 900px head, so the content takes the dialog's width instead. */
md-dialog.app-dialog.is-wide.small-dialog md-dialog-content {
  width: auto;
}

/* Available updates: keeps its own size (80% x 70%, updates.scss) rather than the 900px of .is-wide; the
   phone and tablet sizes there are !important and still win. Its content chain used .md-dialog-content. */
md-dialog.app-dialog.updates-dialog {
  width: 80%;
}
md-dialog.app-dialog.updates-dialog .app-dialog__body {
  height: 100%;
  padding: 16px 20px;
}

@media (max-width: 600px) {
  md-dialog.app-dialog.updates-dialog .app-dialog__body {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 88px;
  }
}
@media (min-width: 601px) and (max-width: 959px) {
  md-dialog.app-dialog.updates-dialog .app-dialog__body {
    padding-bottom: 72px;
  }
}
/* Files and secrets draw their own gutters on each row ($dialogGutter), and the secrets dialogs their own inset
   top and bottom (secrets.scss) — which md-dialog.app-dialog md-dialog-content { padding: 0 } would drop. */
md-dialog.app-dialog.files-dialog .app-dialog__body {
  padding: 0;
}

md-dialog.app-dialog.hardware-secrets-dialog .app-dialog__body,
md-dialog.app-dialog.secret-history-dialog .app-dialog__body {
  padding: 16px 0 12px;
}

/* The value history kept its 760px (it was set on the content). */
md-dialog.app-dialog.secret-history-dialog {
  width: 760px;
}
md-dialog.app-dialog.secret-history-dialog md-dialog-content {
  width: auto;
}

/* Hardware detail view: the flex row that was on its .md-dialog-content (hardwareDetailViewDialog.scss). */
.hardware-detail-view-dialog md-dialog-content .app-dialog__body {
  display: flex;
  min-width: 0;
}
.hardware-detail-view-dialog md-dialog-content .app-dialog__body > div {
  min-width: 0;
}
.hardware-detail-view-dialog md-dialog-content .app-dialog__body > div fieldset .toggle-box {
  margin-left: 3px;
}
.hardware-detail-view-dialog md-dialog-content .app-dialog__body > div .open-last-search-job-icon {
  float: right;
}

/* Hardware lists (tag list, filtered hardware): their own max-height back (hardwareList.scss) — fit-container
   reads the dialog's computed max-height as a percentage, and the app dialog's calc(100vh - 64px) resolves to
   pixels. The list's cap was on .md-dialog-content. */
md-dialog.app-dialog.hardware-list-dialog,
md-dialog.app-dialog.hardware-filter-dialog {
  max-height: calc(100% - 60px);
}

@media (min-width: 960px) {
  .hardware-list-dialog .app-dialog__body {
    max-height: 550px;
  }
}
/* Installed updates: the infinite table sizes itself from the dialog's max-height as a percentage, as above. */
md-dialog.app-dialog.device-list {
  max-height: 80%;
}

/* Task execution: says how the task ended in the icon tile — it used to colour the whole toolbar red or green. Its
   width is hardwareTaskExecutionInfo.scss's min(1600px, 100vw - 32px): a fixed 1600px here, with the app dialog's cap
   lifted there, ran off both sides of every screen narrower than that. */
.hardware-task-execution-info-dialog-container md-dialog.app-dialog.hardware-task-execution-info-dialog.finished-with-error .app-dialog__icon {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.hardware-task-execution-info-dialog-container md-dialog.app-dialog.hardware-task-execution-info-dialog.finished-without-error .app-dialog__icon {
  background-color: color-mix(in srgb, var(--c-success), transparent 88%);
  color: var(--c-success);
}

/* Install agent (agentManagement/dialogs/installAgent.tmpl.html) includes the /agent page's template (agent.scss):
   the system switch, then the two steps, in the dialog's body. */
md-dialog.app-dialog.install-agent-dialog {
  width: 580px;
}
md-dialog.app-dialog.install-agent-dialog md-dialog-content {
  width: auto;
}
md-dialog.app-dialog.install-agent-dialog .agent-page {
  padding: 4px 0 2px;
}

/* The agent version selector (widgets/agentVersionSelector), in Agent update and a device's Update agent: the
   release channel as a switch, then latest or one version as two choices, the version dropdown under the second. */
.agent-version-selector {
  display: grid;
  gap: 14px;
}
.agent-version-selector .subnet-field__label {
  margin-bottom: 5px;
}

/* Three equal segments and one thumb that slides under the chosen one (is-at-0/1/2), instead of the switch's
   usual per-button fill, which jumped. */
.agent-version-selector__channels {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto;
}
.agent-version-selector__channels button,
.agent-version-selector__channels button.is-on {
  position: relative;
  z-index: 1;
  min-width: 0;
  background: none;
  box-shadow: none;
  transition: color 180ms ease;
}

.agent-version-selector__thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 3);
  border-radius: 6px;
  background-color: var(--c-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.is-at-1 > .agent-version-selector__thumb {
  transform: translateX(100%);
}
.is-at-2 > .agent-version-selector__thumb {
  transform: translateX(200%);
}

/* the previous channel's versions stay, dimmed, until the next channel's arrive */
.agent-version-selector__choices,
.agent-version-selector__version {
  transition: opacity 180ms ease;
}
.agent-version-selector__choices.is-loading,
.agent-version-selector__version.is-loading {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .agent-version-selector__thumb,
.agent-version-selector__channels button,
.agent-version-selector__choices,
.agent-version-selector__version,
.agent-version-selector__choice {
    transition: none;
  }
}
.agent-version-selector__choices {
  display: grid;
  gap: 4px;
}

.agent-version-selector__choice {
  transition: background-color 150ms ease, box-shadow 150ms ease;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.agent-version-selector__choice:hover:not([disabled]) {
  background-color: var(--c-surface-subtle);
}
.agent-version-selector__choice.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand), transparent 55%);
}
.agent-version-selector__choice[disabled] {
  cursor: default;
  opacity: 0.6;
}
.agent-version-selector__choice:focus {
  outline: none;
}
.agent-version-selector__choice:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand), transparent 55%), 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 78%);
}

.agent-version-selector__radio {
  transition: border-width 150ms ease, border-color 150ms ease;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid color-mix(in srgb, var(--c-ink), transparent 62%);
  border-radius: 50%;
}
.is-on > .agent-version-selector__radio {
  border: 5px solid var(--c-brand);
}

.agent-version-selector__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.agent-version-selector__name {
  font-size: 13.5px;
  font-weight: 500;
}

.agent-version-selector__hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.agent-version-selector__now {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.35;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* under the choice it belongs to, past the radio — specific enough to outrank the field's own zero margin */
.agent-version-selector .subnet-field md-input-container.subnet-select.agent-version-selector__version {
  margin: 6px 0 0 36px;
}

.agent-version-selector__now-label {
  font-family: inherit;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.agent-version-selector__os {
  font-family: inherit;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Dialog styles for batch d of the app-dialog conversion (see appDialog.scss). */
/* The dialogs that asked for a size of their own keep it: the app dialog's 460px / 900px would squeeze the template
   picker and the adapter facts, and change the AD object's, the filter editor's and the update selector's layout. */
md-dialog.app-dialog.call-template-dialog,
md-dialog.app-dialog.adapter-detail-dialog {
  width: 600px;
}

/* From 960px only, so that below it a dialog opened full-screen still fills the screen (appDialog.scss) */
@media (min-width: 960px) {
  md-dialog.app-dialog.is-wide.ad-object-dialog {
    width: 760px;
  }
  md-dialog.app-dialog.is-wide.advanced-filter-dialog {
    width: 1100px;
  }
  md-dialog.app-dialog.is-wide.updates-dialog {
    width: 80%;
  }
  /* The wizard's pages set their own width (wizardConfig.width, 400-950px), so the dialog follows its content; the
     runtime wizard asks for 70% x 80% (cronExpressionGenerator.scss). */
  md-dialog.app-dialog.is-wide.wizard-dialog {
    width: auto;
  }
  md-dialog.app-dialog.is-wide.wizard-dialog.cron-settings-dialog {
    width: 70%;
    height: 80%;
  }
}
/* small-dialog gives md-dialog-content a 600px width, which would leave the wide changelog a strip of empty dialog */
md-dialog.app-dialog.is-wide.multiEdit md-dialog-content {
  width: auto;
}

/* Split dialogs (dialog.scss) ran their nav and content edge to edge in an unpadded .md-dialog-content */
md-dialog.app-dialog.split-dialog.multiEdit .app-dialog__body {
  padding: 0;
}

/* hardwareList.scss capped the old wrapper's height on desktop */
@media (min-width: 960px) {
  md-dialog.app-dialog.hardware-list-dialog .app-dialog__body {
    max-height: 550px;
  }
}
/* updates.scss sized and padded the old .md-dialog-content wrapper */
md-dialog.app-dialog.updates-dialog .app-dialog__body {
  height: 100%;
  padding: 16px 20px;
}
@media (max-width: 600px) {
  md-dialog.app-dialog.updates-dialog .app-dialog__body {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 88px;
  }
}
@media (min-width: 601px) and (max-width: 959px) {
  md-dialog.app-dialog.updates-dialog .app-dialog__body {
    padding-bottom: 72px;
  }
}

/* The device list pulled its table 10px up into the old wrapper's 24px padding; under the head it would be clipped */
md-dialog.app-dialog.device-list .app-dialog__body.zero-padding-margin {
  margin-top: 0;
  padding-top: 8px;
}

/* A driver name can be one long unbroken string (cmdbHardware.scss wrapped it in the old toolbar's <small>) */
md-dialog.app-dialog.adapter-detail-dialog .app-dialog__sub {
  overflow-wrap: anywhere;
}

/* The filter dialog's buttons are outlined (.af-button, filter.scss); the filled one drops the outline as btn-blue did */
md-dialog.app-dialog.advanced-filter-dialog .md-button.af-button.app-dialog__primary {
  border-color: transparent;
}

/* The count sits in the title now, not after it in the toolbar */
md-dialog.app-dialog.filtered-devices-dialog .app-dialog__title .filtered-devices__count {
  display: inline-block;
  vertical-align: middle;
}

/* The wizard's tabs are steps, not navigation: every one is disabled (you move with Back and Next), so Material
   drew all of them — the current one too — in its faint disabled grey. The current step is in the text colour and
   bold, the others a grey that still reads. Scoped past Material's themed [disabled] rule. */
md-dialog md-tabs.wizard-dialog-tabs .md-tab[disabled],
md-dialog md-tabs.wizard-dialog-tabs .md-tab.md-disabled,
[data-theme] md-dialog md-tabs.wizard-dialog-tabs:not(.md-default-theme):not(.md-dark-theme) .md-tab[disabled],
[data-theme] md-dialog md-tabs.wizard-dialog-tabs:not(.md-default-theme):not(.md-dark-theme) .md-tab.md-disabled {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  opacity: 1;
}
md-dialog md-tabs.wizard-dialog-tabs .md-tab.md-active[disabled],
md-dialog md-tabs.wizard-dialog-tabs .md-tab.md-active.md-disabled,
md-dialog md-tabs.wizard-dialog-tabs .md-tab.md-active,
[data-theme] md-dialog md-tabs.wizard-dialog-tabs:not(.md-default-theme):not(.md-dark-theme) .md-tab.md-active[disabled],
[data-theme] md-dialog md-tabs.wizard-dialog-tabs:not(.md-default-theme):not(.md-dark-theme) .md-tab.md-active.md-disabled,
[data-theme] md-dialog md-tabs.wizard-dialog-tabs:not(.md-default-theme):not(.md-dark-theme) .md-tab.md-active {
  color: var(--c-text);
  font-weight: 600;
}

/* Dialog styles for batch e of the app-dialog conversion (see appDialog.scss). */
/* These dialogs set their own width on the md-dialog, which md-dialog.app-dialog's 460px now outranks. The widths
   they chose are kept: the download link wants room for a long presigned URL (uploadActionResultViewer.scss), the
   Chocolatey package its head and its three actions (softwareTemplates.scss), the XEOX Remote dialogs the
   600px of their small-dialog content (dialog.scss) for the protocol cards and the username/password row, and
   two-factor its 600px (account.scss). */
md-dialog.app-dialog.download-link-dialog {
  width: 700px;
}

md-dialog.app-dialog.choco-package-dialog {
  width: 620px;
}

md-dialog.app-dialog.huberemote-connection-dialog,
md-dialog.app-dialog.two-factor-dialog {
  width: 600px;
}

/* Hostname conflicts (agentRegistrationRequests): hostnameConflictDialog.scss sized it between 500 and 700px; its
   min-width would also push it past a phone's edge, which the app dialog's max-width now handles. */
md-dialog.app-dialog.hostname-conflict-dialog {
  width: 600px;
  min-width: 0;
}

/* What happens in a selected calendar slot (patchall/calendar/dialogs/timeRangeAction): app-dialog rows, each with
   a tile, the action and a line on what comes next, grouped by running something in the slot or keeping it free. */
md-dialog.app-dialog.time-range-action-dialog {
  width: 480px;
}
md-dialog.app-dialog.time-range-action-dialog .app-dialog__body {
  padding: 8px 12px 12px;
}

.time-range-action__group + .time-range-action__group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--c-border);
}

.time-range-action__group-title {
  margin: 4px 8px 4px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.time-range-action__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.time-range-action__row {
  gap: 12px;
  padding: 8px;
}
.time-range-action__row:focus {
  outline: none;
}
.time-range-action__row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c-brand);
}

.time-range-action__tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.time-range-action__tile i.material-icons {
  font-size: 18px;
}
.time-range-action__tile.is-accent {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}
.time-range-action__tile.is-warning {
  background-color: color-mix(in srgb, var(--c-warning), transparent 84%);
  color: var(--c-warning-ink);
}

.time-range-action__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.time-range-action__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
}

.time-range-action__hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.time-range-action__chevron {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.is-active .time-range-action__chevron {
  color: var(--c-brand);
}

/* The organisation dialogs (services/organisationUtils/dialogs) are app dialogs (appDialog.scss); this is only
   what the organisation picker adds to that. */
/* the Enter hint on the highlighted row, where Enter would take you */
.org-picker__enter {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.org-picker__recent {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.org-picker__recent a {
  color: var(--c-brand);
}

.org-tree-picker__tree {
  max-height: min(460px, 100vh - 260px);
  overflow-y: auto;
}

.beta-label {
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  border-radius: 6px;
  padding: 1px 4px 2px 4px;
  font-size: 8px;
  font-weight: bold;
  vertical-align: bottom;
  margin-left: 10px;
}

.expired-label {
  border: 1px solid var(--c-danger);
  color: var(--c-danger);
  border-radius: 6px;
  padding: 1px 4px 2px 4px;
  font-size: 8px;
  font-weight: bold;
  vertical-align: bottom;
  margin-left: 10px;
  letter-spacing: 1px;
}

.upcoming-label {
  border: 1px solid var(--c-brand-muted);
  color: var(--c-brand-muted);
  border-radius: 6px;
  padding: 1px 4px 2px 4px;
  font-size: 8px;
  font-weight: bold;
  vertical-align: bottom;
  margin-left: 10px;
  letter-spacing: 1px;
}

.infinite-table-container .table.infinite-table tbody tr td {
  /* The Tags column's chips. .tag-list would lay them out, but this cell is built as an HTML
     string by infiniteTableBody, so the spacing stays here. */
  /* The Device Report, Free Disk Space and Tags cells are one line each: they set the row's
     height, and at a list per cell the median row was 131px. The full content is each cell's
     tooltip.
   *
   * Each is also capped, and truncates inside the cap. A cell that cannot wrap cannot shrink
   * either — its one line is its minimum width — so uncapped, the three came to over 1,000px of
   * width the table could not give back on a laptop, and the columns that can still wrap
   * (hostname, device state) wrapped instead, taking the rows back up to 75px. */
  /* As many whole tags as fit, then a count for the rest — worked out in the renderer against
     this width (TAG_LINE_WIDTH), so no chip is ever cut. They used to shrink to share it, and a
     shrunk chip lost the end of its label without so much as an ellipsis: .tag is inline-flex,
     and text-overflow does nothing for a flex container's text. */
  /* The one-line cells open their full content in a menu; the line says it can be pressed. */
}
.infinite-table-container .table.infinite-table tbody tr td .tag {
  margin: 0 2px;
}
.infinite-table-container .table.infinite-table tbody tr td .device-report-line {
  display: flex;
  align-items: center;
  max-width: 280px;
  white-space: nowrap;
  /* The message — or the link around it — gives way; the counts do not. */
}
.infinite-table-container .table.infinite-table tbody tr td .device-report-line .device-report-message {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.infinite-table-container .table.infinite-table tbody tr td .device-report-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  font-size: 11.5px;
  font-weight: 600;
}
.infinite-table-container .table.infinite-table tbody tr td .device-report-count::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.infinite-table-container .table.infinite-table tbody tr td .device-report-count.is-error {
  color: var(--c-danger);
}
.infinite-table-container .table.infinite-table tbody tr td .device-report-count.is-warning {
  color: var(--c-accent);
}
.infinite-table-container .table.infinite-table tbody tr td .device-report-count.is-info {
  color: var(--c-link);
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 250px;
  white-space: nowrap;
  /* A mount path can be long; it gives way before the volume and drive counts do. */
  /* The backend's own judgement of the drive, as the old warningfield and alertfield carried it. */
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line .free-disk-space-meter {
  flex: 0 0 auto;
  width: 44px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--c-surface-sunken);
  overflow: hidden;
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line .free-disk-space-meter i {
  display: block;
  height: 100%;
  background-color: var(--c-brand-muted);
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line .free-disk-space-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line .free-disk-space-value b {
  font-weight: 600;
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line .free-disk-space-extra {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line.is-low .free-disk-space-meter i {
  background-color: var(--c-accent);
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line.is-low .free-disk-space-value {
  color: var(--c-accent);
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line.is-critical .free-disk-space-meter i {
  background-color: var(--c-danger);
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-line.is-critical .free-disk-space-value {
  color: var(--c-danger);
}
.infinite-table-container .table.infinite-table tbody tr td .tag-line {
  display: flex;
  flex-wrap: nowrap;
  max-width: 260px;
  white-space: nowrap;
  /* The count sits in its own item, holding the menu it opens. */
}
.infinite-table-container .table.infinite-table tbody tr td .tag-line .tag {
  flex: 0 0 auto;
}
.infinite-table-container .table.infinite-table tbody tr td .tag-line .tag--more {
  flex: 0 0 auto;
  border-style: dashed;
  color: var(--c-brand);
  font-weight: 600;
  cursor: pointer;
}
.infinite-table-container .table.infinite-table tbody tr td .tag-line .tag-line-more {
  flex: 0 0 auto;
  list-style: none;
}
.infinite-table-container .table.infinite-table tbody tr td .cell-menu-trigger {
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
  cursor: pointer;
}
.infinite-table-container .table.infinite-table tbody tr td .cell-menu-trigger:hover .device-report-message, .infinite-table-container .table.infinite-table tbody tr td .cell-menu-trigger:hover .free-disk-space-value {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-ink), transparent 62%);
  text-underline-offset: 2px;
}
.infinite-table-container .table.infinite-table tbody tr td .cell-menu-trigger:focus {
  outline: none;
}
.infinite-table-container .table.infinite-table tbody tr td .cell-menu-trigger:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-entry {
  margin: 0;
  white-space: nowrap;
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-entry .drive {
  font-weight: bold;
}
.infinite-table-container .table.infinite-table tbody tr td .free-disk-space-entry .free-space {
  font-weight: bold;
}

/* The menus those cells open. Built as HTML strings, so they are styled here rather than through the menu
   generator — but in the same surface its menus have. */
md-menu-content.cell-menu {
  max-width: 440px;
  max-height: 60vh;
  padding: 6px;
}
md-menu-content.cell-menu .cell-menu-panel {
  padding: 6px 8px;
}

/* Every report, worst first, each doing what its line in the old list did. Reports are sentences, some of
   them long, so the entries wrap rather than sitting at Material's fixed 48px. */
md-menu-content.device-report-menu md-menu-item {
  height: auto;
  min-height: 32px;
}
md-menu-content.device-report-menu .device-report-entry,
md-menu-content.device-report-menu md-menu-item > .md-button.device-report-entry {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  height: auto;
  min-height: 32px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  white-space: normal;
}
md-menu-content.device-report-menu .device-report-entry.is-static,
md-menu-content.device-report-menu md-menu-item > .md-button.device-report-entry.is-static {
  cursor: default;
}
md-menu-content.device-report-menu .device-report-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-menu-content.device-report-menu .device-report-dot.is-error, md-menu-content.device-report-menu .device-report-dot.is-high {
  background-color: var(--c-danger);
}
md-menu-content.device-report-menu .device-report-dot.is-warning, md-menu-content.device-report-menu .device-report-dot.is-medium {
  background-color: var(--c-accent);
}
md-menu-content.device-report-menu .device-report-dot.is-info {
  background-color: var(--c-link);
}
md-menu-content.device-report-menu .device-report-severity-info {
  color: var(--c-link);
}

md-menu-content.free-disk-space-menu .free-disk-space-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  padding: 6px 0;
  font-size: 13px;
  /* The volumes sharing the container, under its figures. */
}
md-menu-content.free-disk-space-menu .free-disk-space-row + .free-disk-space-row {
  border-top: 1px solid var(--c-border);
}
md-menu-content.free-disk-space-menu .free-disk-space-row .free-disk-space-meter {
  width: 44px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--c-surface-sunken);
  overflow: hidden;
}
md-menu-content.free-disk-space-menu .free-disk-space-row .free-disk-space-meter i {
  display: block;
  height: 100%;
  background-color: var(--c-brand-muted);
}
md-menu-content.free-disk-space-menu .free-disk-space-row .free-disk-space-value b {
  font-weight: 600;
}
md-menu-content.free-disk-space-menu .free-disk-space-row .free-disk-space-volumes {
  grid-column: 2;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  overflow-wrap: anywhere;
}
md-menu-content.free-disk-space-menu .free-disk-space-row.is-low .free-disk-space-meter i {
  background-color: var(--c-accent);
}
md-menu-content.free-disk-space-menu .free-disk-space-row.is-low .free-disk-space-value {
  color: var(--c-accent);
}
md-menu-content.free-disk-space-menu .free-disk-space-row.is-critical .free-disk-space-meter i {
  background-color: var(--c-danger);
}
md-menu-content.free-disk-space-menu .free-disk-space-row.is-critical .free-disk-space-value {
  color: var(--c-danger);
}

md-menu-content.tag-menu .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
md-menu-content.tag-menu .tag-cloud .tag {
  margin: 0;
}

.md-open-menu-container:has(> md-menu-content.cell-menu) {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

/* A tag that filters the table — in a row, or in the full list the count opens. */
.infinite-table-container .table.infinite-table tbody tr td .tag.is-selectable,
md-menu-content.tag-menu .tag.is-selectable {
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.infinite-table-container .table.infinite-table tbody tr td .tag.is-selectable:hover,
md-menu-content.tag-menu .tag.is-selectable:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
}
.infinite-table-container .table.infinite-table tbody tr td .tag.is-selectable:focus,
md-menu-content.tag-menu .tag.is-selectable:focus {
  outline: none;
}
.infinite-table-container .table.infinite-table tbody tr td .tag.is-selectable:focus-visible,
md-menu-content.tag-menu .tag.is-selectable:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.msp-switch-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--c-accent);
}
.msp-switch-container .msp-switch-btn {
  padding: 8px;
  color: var(--c-on-fill);
  height: 40px;
  width: 100%;
  margin: 0;
  border: none;
}

.md-button.md-icon-button.hide-sidebar-button {
  margin: 0 6px 0 0;
}
@media screen and (max-width: 1280px) {
  .md-button.md-icon-button.hide-sidebar-button {
    display: none;
  }
}

.blocking-time-list {
  margin: 20px 0 0 0;
  max-width: 1000px;
}
.blocking-time-list tr.active-blocking-time td {
  background-color: var(--c-accent);
}

.hardware-selection-view {
  padding: 14px 16px 12px;
}
.hardware-selection-view .hardware-selection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hardware-selection-view .hardware-selection-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  background-color: var(--c-surface-subtle);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-field-text);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}
.hardware-selection-view .hardware-selection-tag:hover, .hardware-selection-view .hardware-selection-tag:focus {
  border-color: var(--c-brand);
  color: var(--c-brand);
  text-decoration: none;
}
.hardware-selection-view .hardware-selection-tag.is-filter {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.hardware-selection-view .hardware-selection-excluded {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.hardware-selection-view .hardware-selection-label {
  color: var(--c-field-text);
  font-size: 13px;
  font-weight: 500;
}
.hardware-selection-view .hardware-selection-empty {
  color: var(--c-field-text);
  font-size: 13px;
}
.hardware-selection-view .hardware-selection-view-button {
  margin: 14px 0 0;
}
.hardware-selection-view .hardware-selection-view-button.is-compact {
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--c-brand);
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.policy-editor form {
  max-width: 1000px;
}
.policy-editor form .execution-frequency .time-window-checkbox {
  margin-top: 10px;
}
.policy-editor form .conditions-box .conditions-header {
  font-size: 15px;
}
.policy-editor form .conditions-box .conditions-wrapper {
  margin-top: 8px;
}
.policy-editor form .conditions-box .conditions-wrapper .condition-switch {
  margin-left: 8px;
}
.policy-editor form .conditions-box .conditions-wrapper .copy-preconditions-btn {
  margin-top: 15px;
  height: 38px;
}
.policy-editor form .conditions-box md-input-container {
  width: 200px;
  margin-top: 40px;
}
.policy-editor form .conditions-box .divider {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  margin: 0 -10px 10px -10px;
}

.policy-execution-info .policy-overview {
  max-width: none;
  margin: 0;
  padding: 16px 12px 12px 0;
}
.policy-execution-info .policy-overview .toggle-box {
  max-width: none;
  margin: 0;
}
.policy-execution-info .policy-summary-card {
  display: block;
  max-width: 1000px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 90%), 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 90%);
}
.policy-execution-info .policy-summary-copy {
  min-width: 0;
}
.policy-execution-info .policy-summary-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--c-field-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.policy-execution-info .policy-summary-card h1 {
  margin: 0;
  color: var(--c-text);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}
.policy-execution-info .policy-summary-description {
  margin: 8px 0 0;
  color: var(--c-field-text);
  font-size: 15px;
  line-height: 1.45;
}
.policy-execution-info .policy-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 10px;
}
.policy-execution-info .policy-summary-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  color: var(--c-field-text);
  font-size: 14px;
}
.policy-execution-info .policy-summary-meta > span:first-child {
  padding-left: 0;
}
.policy-execution-info .policy-summary-meta > span + span {
  border-left: 1px solid var(--c-border);
}
.policy-execution-info .policy-summary-meta .material-icons {
  font-size: 18px;
  color: var(--c-brand);
}
.policy-execution-info .policy-summary-template {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
  color: var(--c-field-text);
  font-size: 13px;
}
.policy-execution-info .policy-summary-template > span:first-child {
  font-weight: 600;
}
.policy-execution-info .policy-summary-template > span:last-child::before {
  content: "·";
  margin-right: 6px;
}
.policy-execution-info .policy-summary-definition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
}
.policy-execution-info .policy-summary-scope,
.policy-execution-info .policy-summary-rule {
  min-width: 0;
}
.policy-execution-info .policy-summary-rule {
  padding-left: 32px;
  border-left: 1px solid var(--c-border);
}
.policy-execution-info .policy-summary-definition h2 {
  margin: 0 0 8px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
}
.policy-execution-info .policy-summary-scope .hardware-selection-view {
  padding: 0;
}
.policy-execution-info .policy-summary-rule .condition-flag-text {
  display: flex;
  align-items: center;
  margin: 8px 0 0;
  color: var(--c-success);
  font-size: 13px;
  font-weight: 500;
}
.policy-execution-info .policy-summary-rule .condition-flag-text::before {
  content: "check_circle";
  margin-right: 7px;
  font-family: "Material Icons";
  font-size: 18px;
}
.policy-execution-info .policy-summary-rule .divider {
  border-top: 1px solid var(--c-border);
  margin: 12px 0;
}
.policy-execution-info .policy-task-card {
  max-width: 1000px !important;
  margin-bottom: 16px !important;
}
.policy-execution-info .policy-task-wrapper {
  margin: 8px;
}
.policy-execution-info .policy-hardware-container .successful_run {
  color: var(--c-success);
  font-weight: bold;
}
.policy-execution-info .policy-hardware-container .error {
  color: var(--c-danger);
  font-weight: bold;
}
.policy-execution-info .policy-hardware-container .running {
  color: var(--c-success);
}
@media (max-width: 760px) {
  .policy-execution-info .policy-overview {
    padding: 16px 12px 12px;
  }
  .policy-execution-info .policy-summary-card {
    padding: 18px;
  }
  .policy-execution-info .policy-summary-card h1 {
    font-size: 23px;
  }
  .policy-execution-info .policy-summary-meta {
    gap: 8px 0;
  }
  .policy-execution-info .policy-summary-meta > span {
    padding: 0 10px;
    font-size: 13px;
  }
  .policy-execution-info .policy-summary-definition {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .policy-execution-info .policy-summary-rule {
    padding: 20px 0 0;
    border-top: 1px solid var(--c-border);
    border-left: 0;
  }
}

.policy-done-symbol {
  position: relative;
  top: 2px;
  left: 5px;
  font-size: 15px;
}

/* The row-with-state shape the adapter, disk and update panels use, shared by Policies and Automations:
   what the thing is on the left, what state it is in on the right. */
.detail-rows .detail-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 0;
}
.detail-rows .detail-row:not(:last-child) {
  border-bottom: 1px solid var(--c-border);
}
.detail-rows .detail-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.detail-rows .detail-row-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.detail-rows .detail-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.detail-rows .detail-row-meta .is-num {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
}
.detail-rows .detail-row-state {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  padding-top: 1px;
}
.detail-rows .detail-row-when {
  flex: none;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}
.detail-rows .detail-row-when b {
  display: block;
  font-weight: 500;
  color: var(--c-text);
}
.detail-rows .detail-row-when small {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Same pill language as the device header, the adapter cards and the disk cards. */
.detail-pill {
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-field-text);
  white-space: nowrap;
}
.detail-pill.is-ok {
  border-color: var(--c-success);
  color: var(--c-success);
  background-color: color-mix(in srgb, var(--c-success), transparent 88%);
}
.detail-pill.is-warning {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background-color: color-mix(in srgb, var(--c-accent), transparent 86%);
}
.detail-pill.is-critical {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
}
.detail-pill.is-running, .detail-pill.is-brand {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.detail-pill.is-muted {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.hardware-policies-view {
  /* Secondary to the alert type above it: present when someone has named the alert, and the only identity
     a custom alert has, but not something to compete with the name of the alert type. */
}
.hardware-policies-view .alert-own-name {
  margin-top: 2px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-policies-view .icon-cell {
  padding: 0;
}
.hardware-policies-view .icon-cell i {
  margin-left: 10px;
  position: relative;
  top: 3px;
}

/* The Alerts panel of a device. Two halves: what is wrong with it, then what is watching it.
 *
 * The first half is deliberately not a table. Each issue is one sentence — some of them long, the disk
 * space one past 250 characters — with a date and something to do about it, and a table would have spent
 * four columns of chrome on what the sentence already says. */
.hardware-alerts-view {
  /* The same pill the device header uses for the same counts — a dot and the word, at the width of the
     longest of the three so the messages beside them line up. */
  /* When it started, when it was last seen, and which alert said so: everything that qualifies the
     sentence above, at the weight of a qualification. */
  /* The line the rules live behind. Its own quiet ground, because it is the floor of the answer above it
     rather than another row of it. */
  /* Secondary to the alert type above it: present when someone has named the alert, and the only identity
     a custom alert has, but not something to compete with the name of the alert type. */
}
.hardware-alerts-view .alert-issue {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  /* A hairline between issues rather than a card each: they are one list, and four cards inside a
     panel is a card inside a card inside a card. */
}
.hardware-alerts-view .alert-issue + .alert-issue {
  border-top: 1px solid var(--c-border);
}
.hardware-alerts-view .alert-issue-severity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 84px;
  margin-top: 1px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.hardware-alerts-view .alert-issue-severity::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.hardware-alerts-view .alert-issue-severity.is-error {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.hardware-alerts-view .alert-issue-severity.is-warning {
  background-color: color-mix(in srgb, var(--c-accent), transparent 84%);
  color: var(--c-accent);
}
.hardware-alerts-view .alert-issue-severity.is-info {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
.hardware-alerts-view .alert-issue-body {
  flex: 1 1 auto;
  min-width: 0;
}
.hardware-alerts-view .alert-issue-message {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-text);
  /* The messages carry paths and volume names — they wrap, they do not scroll. */
  overflow-wrap: anywhere;
}
.hardware-alerts-view .alert-issue-meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-alerts-view .alert-issue-meta b {
  font-weight: 600;
  color: var(--c-field-text);
}
.hardware-alerts-view .alert-issue-meta a {
  color: var(--c-link);
}
.hardware-alerts-view .alert-issue-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  /* The panel's own action size, not the page's: three of these sit on one row of a list. */
}
.hardware-alerts-view .alert-issue-actions .md-button {
  min-height: 28px;
  height: 28px;
  line-height: 26px;
  min-width: 0;
  padding: 0 10px;
  font-size: 12px;
}
.hardware-alerts-view .alert-rules-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid var(--c-border);
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  color: var(--c-field-text);
  /* An anchor, so a click leaves the browser's own focus ring around it — a blue box that belongs to
     no part of this design. Keyboard focus still has to show: it gets a brand hairline instead, the
     same as the rail's entries. */
}
.hardware-alerts-view .alert-rules-strip a {
  color: var(--c-link);
  font-weight: 600;
}
.hardware-alerts-view .alert-rules-strip a:hover, .hardware-alerts-view .alert-rules-strip a:focus {
  text-decoration: none;
}
.hardware-alerts-view .alert-rules-strip a:focus {
  outline: none;
}
.hardware-alerts-view .alert-rules-strip a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--c-brand);
}
.hardware-alerts-view .alert-rules .table {
  margin-bottom: 0;
}
.hardware-alerts-view .alert-own-name {
  margin-top: 2px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-alerts-view .icon-cell {
  padding: 0;
}
.hardware-alerts-view .icon-cell i {
  margin-left: 10px;
  position: relative;
  top: 3px;
}

div.vis-network div.vis-navigation div.vis-button.vis-up,
div.vis-network div.vis-navigation div.vis-button.vis-down,
div.vis-network div.vis-navigation div.vis-button.vis-left,
div.vis-network div.vis-navigation div.vis-button.vis-right,
div.vis-network div.vis-navigation div.vis-button.vis-zoomIn,
div.vis-network div.vis-navigation div.vis-button.vis-zoomOut,
div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
  background-image: none !important;
}

div.vis-network div.vis-navigation div.vis-button:hover {
  box-shadow: none !important;
}

.vis-button:after {
  font-size: 2em;
  color: var(--c-neutral);
}

.vis-button:hover:after {
  font-size: 2em;
  color: lightgray;
}

.vis-button.vis-up:after {
  content: "▲";
}

.vis-button.vis-down:after {
  content: "▼";
}

.vis-button.vis-left:after {
  content: "◀";
}

.vis-button.vis-right:after {
  content: "▶";
}

.vis-button.vis-zoomIn:after {
  content: "+";
  font-weight: bold;
}

.vis-button.vis-zoomOut:after {
  content: "−";
  font-weight: bold;
}

.vis-button.vis-zoomExtends:after {
  content: "⤧";
}

/* A device's secrets: what XEOX holds, then what a person keeps.

   It was one table with a Key column that was a text field on some rows and a label on others, and a Save
   button that could only ever write the second kind. The credentials read first — they are what the dialog
   is usually opened for — and the fields that can be typed into sit under their own heading. */
/* The width kept at the end of each own row for what can be done to it. Reserved whether or not the row has
   anything there, so a saved row and the empty one under it are the same shape. */
/* What the dialog keeps clear at the top and bottom of its content. */
.hardware-secrets-dialog {
  /* The dialog's own breathing room. Without it the first thing in here has its top margin collapse out
     through a box that has no padding to hold it, and the last row ends up sitting on the hairline above
     the buttons. */
  /* One XEOX holds: a name, where it came from, and the value to take away. */
  /* The date says when this value was set; the link beside it is where the ones before it live. */
  /* One a person keeps: a key they name and a value they type. */
  /* Keep delete visible for saved and draft entries, with a red hover state. */
}
.hardware-secrets-dialog md-dialog-content {
  /* Material zeroes the top margin of whatever comes first in here, and a box with no padding of its own
     leaves the last row sitting on the hairline above the buttons. The spacing is padding, so that it is
     the same at both ends and cannot be collapsed away. */
  padding: 16px 0 12px;
}
.hardware-secrets-dialog .secrets-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  /* The same as the inset above, so what follows the empty box sits as far below it as the box sits from
     the top of the dialog. */
  padding: 16px 24px 2px;
}
.hardware-secrets-dialog .secrets-group b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);
}
.hardware-secrets-dialog .secrets-group span {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-secrets-dialog .secret-held {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border-top: 1px solid var(--c-border);
  /* Extend into the unused action space while keeping the value's left edge aligned below. */
}
.hardware-secrets-dialog .secret-held .secret-input {
  flex-basis: 30px;
  max-width: 290px;
}
.hardware-secrets-dialog .secret-held-main {
  flex: 1;
  min-width: 0;
}
.hardware-secrets-dialog .secret-held-name {
  display: block;
  font-size: 13.5px;
  color: var(--c-text);
}
.hardware-secrets-dialog .secret-held-sub {
  display: block;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-secrets-dialog .secret-history {
  margin-left: 6px;
  color: var(--c-brand);
  white-space: nowrap;
}
.hardware-secrets-dialog .secret-history .material-icons {
  font-size: 13px;
  vertical-align: -2px;
  margin-left: 2px;
}
.hardware-secrets-dialog .secret-own {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 24px;
}
.hardware-secrets-dialog .secret-own-key {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  /* Material insets the field by two pixels, which is two pixels more than the name of a credential above
     it is inset by. */
  padding: 0;
}
.hardware-secrets-dialog .secret-own-key input {
  height: 30px;
}
.hardware-secrets-dialog .secret-own-actions {
  flex: 0 0 24px;
  margin-left: -4px;
  text-align: center;
  white-space: nowrap;
}
.hardware-secrets-dialog .secret-own-actions .material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  vertical-align: middle;
}
.hardware-secrets-dialog .secret-add-row {
  padding: 4px 24px 0;
}
.hardware-secrets-dialog .secret-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--c-brand);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.hardware-secrets-dialog .secret-add .material-icons {
  font-size: 18px;
}
.hardware-secrets-dialog .secret-delete {
  transition: color 120ms ease;
}
.hardware-secrets-dialog .secret-delete:hover {
  color: var(--c-danger);
}
.hardware-secrets-dialog .secret-input {
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
}
.hardware-secrets-dialog .secret-input .custom-input-container {
  margin: 0;
}
.hardware-secrets-dialog .secrets-empty {
  margin: 0 24px;
  padding: 14px 16px;
  border: 1px dashed var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  color: var(--c-field-text);
}
.hardware-secrets-dialog .secrets-empty b {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  color: var(--c-text);
}

.secret-history-dialog md-dialog-content {
  width: 760px;
  max-width: 100%;
  padding: 16px 0 12px;
}
.secret-history-dialog .secret-history-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 24px 4px;
}
.secret-history-dialog .secret-history-heading b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);
}
.secret-history-dialog .secret-history-heading span {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.secret-history-dialog .secret-history-entry {
  padding: 14px 24px;
  border-top: 1px solid var(--c-border);
}
.secret-history-dialog .secret-history-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
}
.secret-history-dialog .secret-history-date span {
  color: var(--c-success);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.secret-history-dialog .secret-history-details {
  display: grid;
  gap: 5px;
}
.secret-history-dialog .secret-history-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.secret-history-dialog .secret-history-label {
  color: var(--c-text);
  font-size: 13px;
  font-weight: 600;
}
.secret-history-dialog .secret-history-key {
  min-width: 0;
  color: var(--c-field-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.secret-history-dialog .secret-history-value {
  min-width: 0;
  max-width: 260px;
}
.secret-history-dialog .secret-history-value .custom-input-container {
  margin: 0;
}

.reselling-page .summary-text {
  margin-top: 20px;
}
.reselling-page .limit-exceeded {
  color: var(--c-danger);
}
.reselling-page .licensing-info-field {
  display: inline-block;
}
.reselling-page .licensing-info-field.expiring-soon {
  color: var(--c-accent);
}
.reselling-page .licensing-info-field.expired {
  color: var(--c-danger);
}
.reselling-page .licensing-info-field i {
  float: right;
  position: relative;
  left: 10px;
}
.reselling-page .support-verifier-list li:not(:last-child) {
  margin-bottom: 5px;
}
.reselling-page .support-verifier-list li .remove-verifier-icon {
  vertical-align: middle;
  margin-left: 10px;
}

.payments-container {
  max-width: 1000px;
  margin-top: 15px;
}

.anydesk-result-dialog .anydesk-id {
  text-align: center;
  font-size: 26px;
  margin-top: 20px;
}

/* What a provider sees of their customers. It was five cards of icon-plus-number over a table whose healthy
   cells were filled green blocks the width of a column — the quiet customers were the loudest thing on the
   page, and the one in trouble was a cluster of small boxes somewhere among them. */
.msp-report {
  margin-top: 10px;
  /* A customer with nothing wrong says so by saying nothing. */
  /* One issue, one line: the count, then what it is. They were boxes of a fixed size whose only difference was
     a border colour, so twelve warnings and three optional updates weighed the same. */
}
.msp-report .msp-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-bottom: 10px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.msp-report .msp-figure {
  /* The estate is the first figure; the rest are parts of it. */
}
.msp-report .msp-figure:first-child {
  padding-right: 30px;
  border-right: 1px solid var(--c-border);
}
.msp-report .msp-figure.is-alert .msp-figure-value {
  color: var(--c-danger);
}
.msp-report .msp-figure.is-warning .msp-figure-value {
  color: var(--c-warning-ink);
}
.msp-report .msp-figure-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.msp-report .msp-figure-value small {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.msp-report .msp-figure-label {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.msp-report .msp-table-card {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 8px;
  background-color: var(--c-surface);
  overflow: hidden;
}
.msp-report .msp-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
  font-size: 12.5px;
}
.msp-report .msp-filter {
  padding: 3px 11px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-field-text);
}
.msp-report .msp-filter:hover {
  text-decoration: none;
  background-color: var(--c-surface-subtle);
}
.msp-report .msp-filter.is-active {
  border-color: var(--c-brand);
  color: var(--c-brand);
  font-weight: 600;
}
.msp-report .msp-toolbar-note {
  margin-left: auto;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.msp-report .msp-loading,
.msp-report .msp-empty {
  padding: 22px 14px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.msp-report .msp-truncated {
  padding: 8px 14px;
  border-top: 1px solid var(--c-border);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.msp-report .msp-table {
  width: 100%;
  border-collapse: collapse;
}
.msp-report .msp-table th {
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-align: left;
  white-space: nowrap;
}
.msp-report .msp-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  vertical-align: middle;
}
.msp-report .msp-table tr:last-child td {
  border-bottom: 0;
}
.msp-report .msp-table tbody tr:hover {
  background-color: var(--c-surface-subtle);
}
.msp-report .msp-col-org {
  min-width: 180px;
}
.msp-report .msp-col-health {
  width: 150px;
}
.msp-report .msp-org-name {
  display: block;
  font-size: 13.5px;
  color: var(--c-link);
}
.msp-report .msp-org-devices {
  display: block;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.msp-report .msp-dash {
  color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.msp-report .msp-health {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
}
.msp-report .msp-health-part {
  height: 100%;
}
.msp-report .msp-health-part.is-error {
  background-color: var(--c-danger);
}
.msp-report .msp-health-part.is-warning {
  background-color: var(--c-accent);
}
.msp-report .msp-health-part.is-ok {
  background-color: var(--c-success);
}
.msp-report .msp-issue {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-right: 14px;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.msp-report .msp-issue:last-child {
  margin-right: 0;
}
.msp-report .msp-issue:hover {
  text-decoration: none;
}
.msp-report .msp-issue:hover .msp-issue-label {
  color: var(--c-text);
}
.msp-report .msp-issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.msp-report .msp-issue-value {
  font-weight: 600;
}
.msp-report .msp-issue-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.msp-report .msp-issue.is-alert .msp-issue-dot,
.msp-report .msp-issue.is-critical .msp-issue-dot {
  background-color: var(--c-danger);
}
.msp-report .msp-issue.is-warning .msp-issue-dot {
  background-color: var(--c-accent);
}
.msp-report .msp-issue.is-notification .msp-issue-dot {
  background-color: var(--c-brand);
}
@media (max-width: 800px) {
  .msp-report .msp-col-health {
    display: none;
  }
}

.huberemote-connection-dialog .credentials-container .content-loader-host {
  min-height: 0;
}
.huberemote-connection-dialog .experimental-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 18px 0 8px;
  padding: 18px 14px 10px;
  border: 1px dashed var(--c-accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-accent), transparent 96%);
}
.huberemote-connection-dialog .experimental-feature md-input-container,
.huberemote-connection-dialog .experimental-feature selectbox {
  width: 100%;
}
.huberemote-connection-dialog .experimental-feature .protocol-selector {
  margin-bottom: 0;
}
.huberemote-connection-dialog .experimental-feature > md-checkbox {
  margin: 6px 0;
}
.huberemote-connection-dialog .experimental-feature .experimental-feature__badge {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-on-fill);
  background: var(--c-accent);
  border-radius: 10px;
  line-height: 16px;
}
.huberemote-connection-dialog .protocol-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.huberemote-connection-dialog .protocol-selector .protocol-card {
  border: 1px solid var(--c-neutral);
  border-radius: 6px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--c-surface);
  position: relative;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-shadow), transparent 91.6%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}
.huberemote-connection-dialog .protocol-selector .protocol-card.ng-enter, .huberemote-connection-dialog .protocol-selector .protocol-card.ng-enter-active, .huberemote-connection-dialog .protocol-selector .protocol-card.ng-leave, .huberemote-connection-dialog .protocol-selector .protocol-card.ng-leave-active {
  transition: none !important;
  animation: none !important;
}
.huberemote-connection-dialog .protocol-selector .protocol-card.ng-leave {
  display: none !important;
}
.huberemote-connection-dialog .protocol-selector .protocol-card:hover {
  border-color: var(--c-brand-muted);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.huberemote-connection-dialog .protocol-selector .protocol-card--selected {
  border-color: var(--c-brand);
  border-width: 2px;
  background: var(--c-brand-tint);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.huberemote-connection-dialog .protocol-selector .protocol-card--selected:hover {
  border-color: var(--c-brand);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.huberemote-connection-dialog .protocol-selector .protocol-card--selected .protocol-card__title {
  color: var(--c-brand);
}
.huberemote-connection-dialog .protocol-selector .protocol-card__check {
  position: absolute;
  top: 10px;
  right: 12px;
}
.huberemote-connection-dialog .protocol-selector .protocol-card__check i {
  color: var(--c-brand);
  font-size: 20px;
}
.huberemote-connection-dialog .protocol-selector .protocol-card__title {
  margin: 0 0 6px 0;
  padding-right: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
}
.huberemote-connection-dialog .protocol-selector .protocol-card__description {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  line-height: 1.4;
}
.huberemote-connection-dialog .local-temp-admin-checkbox {
  margin-bottom: 15px;
}
.huberemote-connection-dialog .legacy-execute-action-checkbox {
  margin: 0;
}
.huberemote-connection-dialog .legacy-execute-action-checkbox:last-child {
  margin-bottom: -24px;
}
.huberemote-connection-dialog .supporter-type-radio-group {
  margin-bottom: 15px;
}
.huberemote-connection-dialog .advanced-web-options-wrapper {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.huberemote-connection-dialog .advanced-web-options-wrapper .options-toggle-header {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.huberemote-connection-dialog .advanced-web-options-wrapper .options-toggle-header .options-toggle-header-title {
  margin: 4px 0 0 4px;
}
.huberemote-connection-dialog .advanced-web-options-wrapper .options-container .md-input-container-textarea {
  margin: 16px 0 0 0;
}
.huberemote-connection-dialog .tab-icon-label {
  justify-content: center;
}
.huberemote-connection-dialog .tab-icon-label i {
  margin-right: 8px;
}
@media (max-width: 600px) {
  .huberemote-connection-dialog .tab-icon-label i {
    display: none;
  }
}
.huberemote-connection-dialog .credentials-container .rdp-credentials-container {
  margin-bottom: 20px;
}
.huberemote-connection-dialog .credentials-container .rdp-credentials-container > form {
  align-items: flex-end;
}
.huberemote-connection-dialog .credentials-container .rdp-credentials-container .md-input-container-login {
  padding-bottom: 0;
}
.huberemote-connection-dialog .credentials-container .rdp-credentials-container password-box {
  display: block;
  flex: 1;
}
.huberemote-connection-dialog .credentials-container .rdp-credentials-container password-box .custom-input-container {
  margin: 0;
}
@media (max-width: 600px) {
  .huberemote-connection-dialog .credentials-container .rdp-credentials-container > form {
    flex-direction: column;
    align-items: stretch;
  }
  .huberemote-connection-dialog .credentials-container .rdp-credentials-container .md-input-container-login {
    margin-bottom: 30px;
  }
}
.huberemote-connection-dialog .warning-container {
  margin-top: 20px;
  max-width: 552px;
  padding: 10px;
  border: 1px solid var(--c-accent);
  align-items: center;
  display: flex;
  flex-direction: row;
  border-radius: 6px;
}
.huberemote-connection-dialog .warning-container .warning-icon {
  margin-right: 10px;
  color: var(--c-accent);
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list .remote-connection-verifier {
  font-weight: 600;
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list .remote-connection-elapsed {
  display: inline-flex;
  align-items: center;
  opacity: 0.8;
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list .remote-connection-elapsed .material-icons {
  font-size: 16px;
  margin-right: 4px;
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list .remote-connection-stop {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-accent);
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list .remote-connection-stop .material-icons {
  font-size: 20px;
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list .remote-connection-stop:hover:not([disabled]) {
  opacity: 0.7;
}
.huberemote-connection-dialog .warning-container .running-remote-connections-list .remote-connection-stop[disabled] {
  opacity: 0.4;
  cursor: default;
}

.huberemote-result-dialog .session-id {
  text-align: center;
  font-size: 26px;
  margin-top: 20px;
}

/* XEOX Remote (services/huberemoteService/dialogs/createHuberemoteSession.tmpl.html): what to do as three described
   cards, the protocol where there is a choice, a line on how it works; who to help or how to sign in; options and,
   for testers, the experimental settings, folded. It was tabs over Material fields with three dashed "Experimental"
   boxes in the middle of the flow. */
md-dialog.app-dialog.huberemote-connection-dialog:has(.xr) {
  width: 640px;
}

.xr {
  display: grid;
  gap: 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.xr__section {
  display: grid;
  gap: 8px;
}

.xr__label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
}

.xr__modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 599px) {
  .xr__modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.xr__mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.xr__mode i.material-icons {
  margin-bottom: 2px;
  font-size: 22px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.xr__mode:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.xr__mode.is-on {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 93%);
  box-shadow: inset 0 0 0 1px var(--c-brand);
}
.xr__mode.is-on i.material-icons {
  color: var(--c-brand);
}
.xr__mode[disabled] {
  cursor: default;
  opacity: 0.55;
}
.xr__mode:focus {
  outline: none;
}
.xr__mode:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.xr__mode-title {
  font-size: 13.5px;
  font-weight: 600;
}

.xr__mode-text {
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.xr__via {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 2px;
}

.xr__via-label,
.xr__via-text {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.xr__flask.material-icons {
  margin-left: 4px;
  font-size: 13px;
  color: var(--c-accent);
  vertical-align: -2px;
}

.xr__how {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.xr__how i.material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* who to help */
.xr__find {
  margin-bottom: 2px;
}

.xr__users {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.xr__users.is-long {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-ink), transparent 76%) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.xr__users.is-long::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.xr__users.is-long::-webkit-scrollbar-track {
  background: transparent;
}
.xr__users.is-long::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-ink), transparent 76%);
  border-radius: 6px;
}
.xr__users.is-long::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.xr__users.is-long::-webkit-scrollbar-corner {
  background: transparent;
}

.xr__user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 6px 10px;
  border-top: 1px solid var(--c-border);
  font-weight: 400;
  cursor: pointer;
}
.xr__user:first-child {
  border-top: 0;
}
.xr__user:hover {
  background-color: var(--c-surface-subtle);
}
.xr__user.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.xr__user > input[type=radio] {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--c-brand);
}

.xr__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--c-surface-subtle);
  font-size: 10.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.xr__avatar i.material-icons {
  font-size: 15px;
}
.xr__avatar.is-any {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
  color: var(--c-brand);
}

.xr__user-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}

.xr__user-meta {
  flex: 0 0 auto;
  font-size: 11.5px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.xr__other-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
}
.xr__other-input:focus {
  border-color: var(--c-brand);
  outline: none;
}
@media (pointer: coarse) {
  .xr__other-input {
    font-size: 16px;
  }
}

.xr__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.xr__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.xr__empty i.material-icons {
  font-size: 18px;
}
.xr__empty .xr__small-button {
  margin-left: auto;
}

.xr__small-button {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 12px;
  color: var(--c-text);
  cursor: pointer;
}
.xr__small-button:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.xr__small-button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.xr__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.xr__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text);
  cursor: pointer;
  /* Material's box is absolutely placed and nudged down; here it sits on the label's first line */
}
.xr__check md-checkbox {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
}
.xr__check md-checkbox .md-container {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  transform: none;
}
.xr__check md-checkbox .md-label {
  display: none;
}
.xr__check > span {
  line-height: 20px;
}
.xr__check small {
  line-height: 16px;
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* how to sign in */
.xr__creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 0;
}
@media (max-width: 599px) {
  .xr__creds {
    grid-template-columns: minmax(0, 1fr);
  }
}
.xr__creds .subnet-field > input {
  width: 100%;
}

/* someone is already connected */
.xr__busy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-warning) 16%, transparent);
  font-size: 12.5px;
  color: var(--c-warning-ink);
}
.xr__busy > i.material-icons {
  margin-top: 3px;
  font-size: 18px;
}
.xr__busy strong {
  font-weight: 600;
}

[data-theme=dark] .xr__busy {
  color: var(--c-warning);
}

.xr__busy-body {
  display: grid;
  flex: 1 1 auto;
  gap: 6px;
}

.xr__busy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: 28px;
}
.xr__busy-row > span {
  flex: 1 1 auto;
}

/* options, and the testers' experimental settings */
.xr__fold {
  border-top: 1px solid var(--c-border);
}
.xr__fold + .xr__fold {
  margin-top: -18px;
}

.xr__fold-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.xr__fold-head i.material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.xr__fold-head:focus {
  outline: none;
}
.xr__fold-head:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.xr__fold-sum {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.xr__fold-body {
  display: grid;
  gap: 12px;
  padding: 0 0 12px 24px;
}
.xr__fold-body textarea {
  width: 100%;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
}

.xr__tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 7px 0 5px;
  border-radius: 9px;
  background-color: color-mix(in srgb, var(--c-warning) 20%, transparent);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-warning-ink);
}
.xr__tag i.material-icons {
  font-size: 12px;
  color: inherit;
}

[data-theme=dark] .xr__tag {
  color: var(--c-warning);
}

.xr__experimental {
  margin-left: 24px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--c-warning) 70%, transparent);
  border-radius: 6px;
}

/* The session could not be started: the dialog stays open with the server's reason, so the choices are still there
   for Try again, and the reason can go to us as feedback. */
.xr__error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--c-danger), transparent 60%);
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-danger), transparent 93%);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text);
}
.xr__error > .material-icons {
  flex: none;
  font-size: 18px;
  color: var(--c-danger-ink);
}

.xr__error-title {
  margin: 0;
  font-weight: 600;
  color: var(--c-danger-ink);
}

.xr__error-text {
  margin: 4px 0 0;
}

.xr__error-reason {
  margin: 6px 0 0;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-word;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.xr__error-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-danger-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.xr__error-action .material-icons {
  font-size: 15px;
}
.xr__error-action:focus-visible {
  outline: none;
  border-radius: 3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-danger), transparent 65%);
}

.app-dialog__body.xr__error-wrap {
  padding-top: 18px;
  padding-bottom: 2px;
}

.cron-condition-builder .cron-condition-wrapper {
  margin-top: 10px;
}

/* Installing the agent (modules/agent/agent.html, the Agent page and the Install Agent dialog): the system as a
   segmented switch with a line on what its download is for, then two numbered steps. */
.agent-page .agent-os {
  display: flex;
  width: 100%;
}
.agent-page .agent-os md-radio-button {
  flex: 1;
  text-align: center;
}
.agent-page .agent-os .md-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.agent-page .agent-os__icon {
  width: 16px;
  height: 16px;
}
[data-theme=dark] .agent-page .agent-os__icon {
  filter: invert(1) brightness(0.85);
}
.agent-page .agent-os__new {
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
  color: var(--c-success-deep);
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
}
.agent-page .agent-os__supports {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--c-field-text);
}
.agent-page .agent-steps {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.agent-page .agent-step {
  display: flex;
  gap: 12px;
  padding: 14px 0 0;
}
.agent-page .agent-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 8%, transparent);
}
.agent-page .agent-step__body {
  flex: 1;
  min-width: 0;
}
.agent-page .agent-step__title {
  margin: 2px 0 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
}
.agent-page .agent-step__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.agent-page .agent-step__hint.is-after {
  margin-top: 8px;
}
.agent-page .agent-step__hint a {
  font-weight: 500;
  color: var(--c-brand);
}
.agent-page .agent-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 6px;
  background-color: var(--c-brand);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-on-fill);
  text-decoration: none;
}
.agent-page .agent-download:hover, .agent-page .agent-download:focus {
  background-color: var(--c-brand-light);
  color: var(--c-on-fill);
  text-decoration: none;
}
.agent-page .agent-download:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.agent-page .agent-download .material-icons {
  font-size: 19px;
}
.agent-page .agent-download__version {
  padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
.agent-page .agent-key {
  margin: 10px 0 0;
}
.agent-page .agent-key input {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12.5px;
}
.agent-page .agent-key .md-errors-spacer {
  display: none;
}

.agent-auto-update-config-dialog .config-selection-container {
  margin: 0;
  padding: 0;
}

/* The release notes. They were a card per version inside a grey panel — two frames around three lines of text,
   with every fact of the release as its own chip. Now one hairline between versions, the facts as a single
   quiet line, and the list scrolls at its own height instead of making the dialog taller than the screen. */
.changelog-entry {
  padding: 9px 0;
  border-bottom: 1px solid var(--c-border);
}
.changelog-entry:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.changelog-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.changelog-header .changelog-version {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.changelog-header strong.changelog-version {
  color: var(--c-text);
}

.changelog-latest {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-success);
  border: 1px solid var(--c-success);
  border-radius: 3px;
  padding: 0 4px;
}

.changelog-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.release-notes {
  margin: 4px 0 0;
  padding-left: 15px;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.release-notes li {
  margin-bottom: 1px;
}

.agent-page {
  /* What is not part of installing — the unattended routes, the release channel, the changelog — as one line of
     links under the two steps. They were two bordered boxes, each weighing as much as a step. */
  /* No ground of its own: $surface-sunken is the page grey, and a block of it inside a white dialog weighs more
     than the two steps above. The hairline of the link row is what separates this from them. */
  /* What opens under those rows: instructions, not a page of their own. The headings were as large as the two
     steps above, the list indented twice, and each command box carried its own heading. */
}
.agent-page .agent-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.agent-page .agent-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--c-link);
  cursor: pointer;
  /* Clicking one leaves it focused, and a focused anchor gets an underline from bootstrap and a ring from the
     browser — the open link ended up boxed and underlined on top of its own open state. The pointer keeps
     neither; a keyboard still gets the ring. */
}
.agent-page .agent-link .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.agent-page .agent-link .agent-link-out.material-icons {
  font-size: 13px;
}
.agent-page .agent-link:hover {
  text-decoration: underline;
}
.agent-page .agent-link:hover .material-icons {
  color: var(--c-link);
}
.agent-page .agent-link:focus {
  outline: none;
  text-decoration: none;
}
.agent-page .agent-link:focus-visible {
  outline: 1px solid var(--c-link);
  outline-offset: 2px;
}
.agent-page .agent-link.is-open {
  font-weight: 600;
}
.agent-page .agent-link.is-open .material-icons {
  color: var(--c-link);
}
.agent-page .agent-panel {
  margin-top: 10px;
  border-top: 1px solid var(--c-border);
  padding-top: 10px;
  /* The dialog is ~520px wide; the /agent route is as wide as the window, and there a version and the line of
     facts belonging to it would sit a screen apart. */
  max-width: 760px;
}
.agent-page .agent-changelog {
  max-height: 230px;
  overflow-y: auto;
  padding-right: 10px;
}
.agent-page .agent-panel {
  font-size: 13px;
  color: var(--c-field-text);
  /* The floating label sits above the field, outside its box: without room for it, it lands on the last line
     of the list above. */
}
.agent-page .agent-panel .gettingStarted > h4 {
  margin: 6px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.agent-page .agent-panel .install-method-container {
  margin-bottom: 10px;
}
.agent-page .agent-panel .install-method-container > h4 {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
}
.agent-page .agent-panel .install-method-content p {
  margin: 0 0 8px;
}
.agent-page .agent-panel .install-method-content ol {
  margin: 0 0 10px;
  padding-left: 20px;
}
.agent-page .agent-panel .install-method-content ol li {
  margin-bottom: 2px;
}
.agent-page .agent-panel .install-method-content h5 {
  margin: 12px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.agent-page .agent-panel md-input-container {
  margin: 16px 0 4px;
}

/* The page, not the Install Agent dialog that includes the same template: a card of a form's width, as far below
   the bar as every page's content ($pageContentTop in values.scss). The switch and steps ran over the whole width
   of the grey page without it. */
.dynamic-content .agent-page {
  max-width: 680px;
  margin-top: 16px;
  padding: 18px 20px 16px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background-color: var(--c-surface);
}

.unlicensed-dialog .unlicensed-dialog__icon.is-danger {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
.unlicensed-dialog .unlicensed-dialog__icon.is-warning {
  background-color: color-mix(in srgb, var(--c-accent), transparent 84%);
  color: var(--c-warning-ink);
}
.unlicensed-dialog .unlicensed-dialog__icon.is-neutral {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
.unlicensed-dialog .unlicensed-dialog__text {
  margin: 0;
  line-height: 1.5;
  color: var(--c-text);
}
.unlicensed-dialog .unlicensed-dialog__facts {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--c-field-text);
}
.unlicensed-dialog .unlicensed-dialog__facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.unlicensed-dialog .unlicensed-dialog__facts .material-icons {
  flex: none;
  font-size: 17px;
  line-height: 19px;
}
.unlicensed-dialog .unlicensed-dialog__facts .material-icons.is-ok {
  color: var(--c-success);
}
.unlicensed-dialog .unlicensed-dialog__facts .material-icons.is-paused {
  color: var(--c-warning-ink);
}
.unlicensed-dialog .unlicensed-dialog__payment {
  margin-top: 12px;
}
.unlicensed-dialog .unlicensed-dialog__logout {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--c-field-text);
  font-size: 13px;
  cursor: pointer;
}
.unlicensed-dialog .unlicensed-dialog__logout:hover, .unlicensed-dialog .unlicensed-dialog__logout:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
}
.unlicensed-dialog .app-dialog__primary .material-icons {
  margin-right: 6px;
  font-size: 17px;
  vertical-align: -3px;
}

.hardware-list-dialog {
  max-height: calc(100% - 60px);
}
.hardware-list-dialog .close-icon {
  margin-left: 20px;
}

@media (min-width: 960px) {
  .hardware-list-dialog .md-dialog-content {
    max-height: 550px;
  }
  .hardware-filter-dialog .hardware-list-container {
    max-height: 400px;
  }
}
.hardware-filter-dialog {
  max-height: calc(100% - 60px);
}

.hardware-list-dialog md-dialog-actions, .hardware-filter-dialog md-dialog-actions {
  padding: 0 16px;
}
.hardware-list-dialog .hardware-list-filter-field, .hardware-filter-dialog .hardware-list-filter-field {
  min-height: 30px;
}
.hardware-list-dialog .table-container table tbody tr td .device-state, .hardware-filter-dialog .table-container table tbody tr td .device-state {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}

md-tabs .md-tab {
  color: var(--c-ink);
}
md-tabs .md-tab .tab-label-img {
  height: 18px;
  margin-right: 4px;
  margin-top: 3px;
}
md-tabs .md-tab .tab-label-badge {
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  border-radius: 6px;
  padding: 1px 4px 2px 4px;
  font-size: 8px;
  font-weight: bold;
  vertical-align: bottom;
  margin-left: 4px;
  letter-spacing: 1px;
  height: 18px;
  display: flex;
  margin-top: 4px;
}
md-tabs .md-tab .tab-label-badge .tab-label-badge-text {
  margin: -5px -2px;
}

/* The OS logos are black-filled SVGs loaded as <img>, so they cannot follow the text colour. On the dark
   surface they all but vanished; invert them there, and dim the ones on tabs you are not on the way the label
   is dimmed, so the current tab still reads as the current one. */
[data-theme=dark] md-tabs .md-tab .tab-label-img {
  filter: invert(1);
  opacity: 0.6;
}
[data-theme=dark] md-tabs .md-tab.md-active .tab-label-img {
  opacity: 1;
}

/* A Chocolatey bundle (chocoBundle.html): a card with its name and a line saying what it does, and a card of
   its packages — searched and added in one step, a row each with the version it installs. The cards are those
   of the other pages (Getting started, Integrations): flat, a hairline, 8px corners. */
.choco-bundle-page {
  max-width: 900px;
  /* Its label floats above the field, so the room above the label is the card's padding. */
  /* The room the field keeps below it for an error message is taken back: the summary follows the field,
     not a gap. */
  /* The package search: a selectbox with appearance="search" (select2.scss, "The search appearance"). */
  /* The package's Chocolatey id: what tells two similar names apart, and what the install runs. */
  /* On a phone the version goes under the name rather than squeezing it to nothing. */
}
.choco-bundle-page .choco-bundle-card {
  margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 8px;
  background-color: var(--c-surface);
}
.choco-bundle-page .choco-bundle-name-card {
  padding: 30px 16px 13px;
}
.choco-bundle-page .choco-bundle-name {
  display: block;
  max-width: 420px;
  margin: 0;
}
.choco-bundle-page .choco-bundle-name .md-errors-spacer {
  display: none;
}
.choco-bundle-page .choco-bundle-summary {
  margin-top: 8px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.choco-bundle-page .choco-bundle-packages-head {
  padding: 13px 16px 12px;
}
.choco-bundle-page .choco-bundle-packages-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}
.choco-bundle-page .choco-bundle-packages-head p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.choco-bundle-page .choco-bundle-search {
  margin-top: 12px;
}
.choco-bundle-page .choco-bundle-package-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.choco-bundle-page .choco-bundle-package {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 16px;
  border-top: 1px solid var(--c-border);
  /* A size up from a table cell's 26px, level with the two lines of name and id beside it. */
}
.choco-bundle-page .choco-bundle-package package-icon {
  flex: none;
}
.choco-bundle-page .choco-bundle-package .package-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
.choco-bundle-page .choco-bundle-package .package-icon img {
  max-width: 24px;
  max-height: 24px;
}
.choco-bundle-page .choco-bundle-package-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.choco-bundle-page .choco-bundle-package-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--c-text);
}
.choco-bundle-page .choco-bundle-package-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Roboto Mono", monospace;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.choco-bundle-page .choco-bundle-pinned {
  flex: none;
  padding: 1px 7px;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-size: 11px;
  font-weight: 600;
}
.choco-bundle-page .choco-bundle-version {
  flex: none;
  width: 190px;
  /* A control in the row, framed like one: bare, the version read as plain text. */
}
.choco-bundle-page .choco-bundle-version .select2-container {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  background-clip: padding-box;
  /* The frame is the container's. The choice inside is select2's own square box with a surface of its
     own, which drew over the frame's rounded corners; it takes the frame's shape and no paint. */
}
.choco-bundle-page .choco-bundle-version .select2-container:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 86%);
}
.choco-bundle-page .choco-bundle-version .select2-container.select2-dropdown-open {
  border-color: var(--c-brand);
}
.choco-bundle-page .choco-bundle-version .select2-container .select2-choice {
  height: 30px;
  min-height: 30px;
  padding-left: 10px;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 30px;
  font-size: 13.5px;
}
.choco-bundle-page .choco-bundle-remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.choco-bundle-page .choco-bundle-remove .material-icons {
  font-size: 18px;
}
.choco-bundle-page .choco-bundle-remove:hover, .choco-bundle-page .choco-bundle-remove:focus-visible {
  outline: none;
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  color: var(--c-danger);
}
@media (max-width: 768px) {
  .choco-bundle-page .choco-bundle-package {
    flex-wrap: wrap;
  }
  .choco-bundle-page .choco-bundle-version {
    order: 5;
    width: 100%;
    padding-left: 44px;
  }
}
.choco-bundle-page .choco-bundle-empty {
  padding: 22px 16px 24px;
  border-top: 1px solid var(--c-border);
  text-align: center;
}
.choco-bundle-page .choco-bundle-empty .material-icons {
  font-size: 24px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.choco-bundle-page .choco-bundle-empty-title {
  margin-top: 6px;
  font-weight: 500;
  color: var(--c-text);
}
.choco-bundle-page .choco-bundle-empty-text {
  margin-top: 2px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.choco-software-table .table > tbody > tr > td {
  vertical-align: middle;
}

.installed-choco-software-view-container .icons-column {
  min-width: 70px;
}
.installed-choco-software-view-container .icons-column .operation-in-progress-spinner {
  margin-top: 3.25px;
  margin-bottom: 3.25px;
}

.basic-table .count-field {
  margin-top: 6px;
}
.basic-table .header-spacer {
  min-width: 50px;
}
.basic-table .remove-top-margin {
  margin-top: 0;
}

body .helpkit-launcherButton {
  border-radius: 6px;
  bottom: 6px;
  right: 20px;
}
body.logged-out .helpkit-launcherButton {
  display: none;
}
@media (max-width: 959px) {
  body.md-dialog-open .helpkit-launcherButton {
    display: none;
  }
}

.cron-frequency-title {
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  margin-bottom: 16px;
}

.cron-frequency-cards {
  gap: 10px;
  margin-bottom: 16px;
}

.cron-frequency-card {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 14px;
  gap: 10px;
  border: 2px solid var(--c-neutral);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  background: var(--c-surface);
}
.cron-frequency-card:hover {
  border-color: var(--c-brand-muted);
  background: color-mix(in srgb, var(--c-brand), transparent 98%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 91.6%);
}
.cron-frequency-card--active {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-brand), transparent 85%);
}
.cron-frequency-card--active:hover {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand), transparent 94%);
}
.cron-frequency-card--active .cron-frequency-card__icon {
  background: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.cron-frequency-card--active .cron-frequency-card__icon i {
  color: var(--c-brand);
}
.cron-frequency-card--active .cron-frequency-card__label {
  color: var(--c-brand);
}
.cron-frequency-card__icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--c-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cron-frequency-card__icon i {
  font-size: 18px;
  color: var(--c-brand-muted);
  transition: color 0.2s ease;
}
.cron-frequency-card__label {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  transition: color 0.2s ease;
}
.cron-frequency-card__description {
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-left: auto;
}

/* From the top: the fields' boxes and the runtime's controls (raised by their label, runtimeField.scss) line
   up there; the runtime's line of text below would push it up if they aligned at the bottom. */
.non-custom-cron-input-container {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 36px 24px 20px;
  border: 1px solid var(--c-neutral);
  border-radius: 12px;
  background: var(--c-surface);
}
@media (max-width: 599px) {
  .non-custom-cron-input-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
}
.non-custom-cron-input-container md-input-container {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.non-custom-cron-input-container md-input-container label {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.non-custom-cron-input-container md-input-container .md-errors-spacer {
  display: none;
}
.non-custom-cron-input-container .weekly-input {
  min-width: 140px;
}
.non-custom-cron-input-container .max-runtime-error {
  font-size: 12px;
  color: var(--c-danger);
  margin-top: 4px;
}

cron-expression-generator {
  width: 100%;
}

/* The custom schedule is the cron builder's (cronBuilder.scss); what stays here is the Format reference. */
.cron-generator-wrapper .cron-expression-container {
  margin-bottom: 20px;
  margin-top: 10px;
}

@media (min-width: 600px) {
  .wizard-dialog.cron-settings-dialog {
    width: 70%;
    height: 80%;
  }
}

/* The runtime beside the daily and weekly start time, and on its own for a custom schedule. */
.cron-runtime {
  min-width: 0;
  align-self: flex-start;
}
.cron-runtime.is-custom {
  margin: 8px 0 16px;
}

/* A time of day needs no more than this; the room goes to the runtime, which then keeps to one row beside
   the day of the week as well. */
.non-custom-cron-input-container md-input-container:has(> input.date-time-field) {
  flex: 0 1 180px;
  min-width: 140px;
}
.non-custom-cron-input-container .cron-runtime {
  flex: 1 1 auto;
}
@media (max-width: 768px) {
  .non-custom-cron-input-container md-input-container:has(> input.date-time-field) {
    flex: 1 1 auto;
    width: 100%;
  }
}

.job-skipped-devices div {
  max-height: 300px;
}
.job-skipped-devices div .job-skipped-devices-list {
  list-style-type: none;
  padding-left: 10px;
  padding-top: 10px;
}

md-dialog.select-verifier-from-organisation-dialog md-dialog-content:not([layout=row]) .verifier-selection {
  margin-top: 20px;
  margin-bottom: -5px;
  min-width: 300px;
}

/* The state of a run or of a device in it, as a pill: the automation tables' Status column (JobSummaryService,
   jobTablesColumnsConfig.js) and the State column of a run's devices (taskExecutionInfo.directive.js). Successful
   green, errors red, running brand blue, paused / not started / skipped amber, waiting an outline. */
.run-state-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
}

.run-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 22px;
  padding: 0 9px 0 7px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
  /* the table's own icon rules (offsets, sizes) do not reach in here */
}
.run-state-pill > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.run-state-pill i.material-icons {
  position: static;
  top: auto;
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  vertical-align: 0;
}
a > .run-state-pill,
a.run-state-pill {
  cursor: pointer;
}

a:hover > .run-state-pill,
a.run-state-pill:hover,
a.run-state-pill:focus {
  text-decoration: none;
  filter: brightness(0.96);
}

.run-state-pill.is-ok {
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
  color: var(--c-success-deep);
}
.run-state-pill.is-error {
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
  color: var(--c-danger);
}
.run-state-pill.is-running {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.run-state-pill.is-warning, .run-state-pill.is-paused, .run-state-pill.is-not-started-final {
  background-color: color-mix(in srgb, var(--c-warning) 20%, transparent);
  color: var(--c-warning-ink);
}
.run-state-pill.is-muted {
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.run-state-pill.is-not-started, .run-state-pill.is-waiting {
  border-color: var(--c-border);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

[data-theme=dark] .run-state-pill.is-warning, [data-theme=dark] .run-state-pill.is-paused, [data-theme=dark] .run-state-pill.is-not-started-final {
  color: var(--c-warning);
}

/* The tables float their cell icons and lift them 2px (infiniteTable.scss); in a pill the icon sits on the text */
.infinite-table-container .table.infinite-table tbody tr td .run-state-pill i.material-icons {
  position: static;
  bottom: auto;
  float: none;
  height: auto;
}

.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box {
  display: inline-block;
  padding: 20px;
  max-width: 400px;
  min-width: 300px;
  border-radius: 15px;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .chips {
  height: 40px;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .chips md-chips-wrap {
  box-shadow: none;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .chips md-chip {
  height: 25px;
  line-height: 25px;
  background-color: var(--c-surface);
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .pricing-title {
  margin-top: 20px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .price-container {
  text-align: center;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .price-container .price {
  display: inline-block;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .price-container .price span {
  font-size: 36px;
  font-weight: bold;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .price-container .price-info {
  display: inline-block;
  line-height: 1;
  text-align: left;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .price-container .price-info span {
  font-size: 11px;
  color: var(--c-text);
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .button-container {
  margin-top: 10px;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .button-container .md-button {
  margin-left: 0;
  width: 100%;
  background-color: var(--c-accent);
  color: white;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .features ul {
  list-style: none;
  padding-left: 0;
}
.pricing-table .pricing-table-container .pricing-table-content .pricing-table-box .features ul li:before {
  content: "✓";
  margin-right: 10px;
}
.pricing-table .pricing-table-container .pricing-table-content .highlighted {
  background-color: var(--c-surface-sunken);
}

.checkout-container .checkout-success {
  color: var(--c-success);
  font-size: 40px;
  text-align: center;
  font-weight: bold;
}
.checkout-container .checkout-success i {
  font-size: 80px;
}
.checkout-container .info-container {
  line-height: 30px;
  font-size: 18px;
  text-align: center;
}

.administration-alerts .infinite-table-action-buttons {
  width: 105px;
}
.administration-alerts value-indicator {
  width: 70px;
  margin: auto;
}

/* An alert contact's page (alertContact.html): one form card. While new, where alerts go as four choice tiles; a
   webhook's URL with its test button beside it; the alerts that use the contact as pills. */
.choice-tiles.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.alert-contact-form__url {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: start;
}
.alert-contact-form__url md-input-container {
  margin-bottom: 0;
}
.alert-contact-form__mono {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 13px;
}
.alert-contact-form__test.md-button {
  margin: 20px 0 0;
}
.alert-contact-form__test.md-button .material-icons {
  margin-right: 6px;
  font-size: 16px;
  vertical-align: -3px;
}
.alert-contact-form__empty.form-card__empty {
  padding: 0;
}

.run-state-pill.is-plain {
  cursor: default;
}

.device-alert-warning {
  color: var(--c-accent);
}

.device-alert-error {
  color: var(--c-danger);
}

.save-alert-dialog .hardware-info-icon {
  margin-left: 16px;
  position: relative;
  top: 8px;
}

/* Alert contacts (alertContactColumnsConfig.js): a contact as a tile for email or webhook, the address or name and
   its kind under it; its alerts as outline pills (run-state-pill, jobSummary.scss) that open the dialog. */
.alert-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  vertical-align: middle;
}
.alert-contact__tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 12%, transparent);
}
.alert-contact__tile i.material-icons {
  position: static;
  top: auto;
  float: none;
  height: auto;
  margin: 0;
  font-size: 17px;
  line-height: 1;
}
.alert-contact__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.alert-contact__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-contact__kind {
  font-size: 12px;
  color: var(--c-field-text);
}
a.alert-contact {
  color: inherit;
  text-decoration: none;
}
a.alert-contact .alert-contact__name {
  color: var(--c-brand);
}
a.alert-contact:hover .alert-contact__name {
  text-decoration: underline;
}

.alert-contact__none {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.alert-contact__alerts, .alert-contact__alerts:hover {
  text-decoration: none;
}

/* The Alert column of the alert tables (alertColumnsConfig.js): the name as a link to the alert's page, the type under
   it in the quiet colour. */
.alert-title {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
  min-width: 0;
  line-height: 1.3;
  vertical-align: middle;
  text-decoration: none;
}
.alert-title__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-brand);
}
.alert-title:hover .alert-title__name {
  text-decoration: underline;
}
.alert-title__type {
  font-size: 12px;
  color: var(--c-field-text);
}

.alert-occurred__none {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* An alert's page (alert.html): one form card. Warning and error side by side with an
   amber and a red edge, stacked for the two types whose configuration is a wide table. */
.alert-form__now {
  margin-left: auto;
}
.alert-form__levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.alert-form__level {
  padding: 10px 14px 12px;
  border: 1px solid var(--c-border);
  border-left-width: 3px;
  border-radius: 0 8px 8px 0;
}
.alert-form__level.is-warning {
  border-left-color: var(--c-warning);
}
.alert-form__level.is-error {
  border-left-color: var(--c-danger);
}
.alert-form__level > .run-state-pill {
  margin-bottom: 8px;
}
.alert-form__sentence {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.alert-form__switch {
  padding-top: 10px;
}

.alert-type-option {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.alert-type-option__hint {
  font-size: 12px;
  opacity: 0.75;
}

/* Disk space (alert.html, diskSpaceAlertConfig): the measure once above the levels; per level the limit(s) as a
   number in a sentence ("Less than [20] GB free", "and", "Less than [20] % free") and the drives as one choice. */
.alert-form__measure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.alert-form__measure md-radio-group.segmented {
  flex: none;
}

.disk-space-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 13.5px;
}
.disk-space-level__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: inherit;
  color: var(--c-text);
}
.disk-space-level__and {
  padding-left: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-field-text);
}
.disk-space-level__drives {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  margin-top: 6px;
}
.disk-space-level__label {
  font-size: 12.5px;
  color: var(--c-field-text);
}
.disk-space-level md-input-container.disk-space-level__letters {
  flex: 1 1 100%;
  margin: 0;
}

/* The parts every alert type's "When it fires" is made of (alert.html): a number in a sentence ("Silent for more than
   [3] days"), the condition above a level's sentence, a timeline for a time, a one-level box for an event, the line
   on what is measured. */
.alert-number {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--c-text);
}

.alert-number-input {
  width: 64px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 13.5px;
  text-align: right;
  color: var(--c-text);
}
.alert-number-input:focus {
  outline: none;
  border-color: var(--c-brand);
}

.alert-form__condition {
  margin-top: 2px;
}

.missing-updates {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.missing-updates__row {
  display: grid;
  grid-template-columns: 52px 90px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  font-size: 13.5px;
}
.missing-updates__row md-switch {
  margin: 0;
}
.missing-updates__off {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.alert-timeline {
  margin-top: 14px;
}
.alert-timeline__track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--c-success) 22%, transparent);
  overflow: hidden;
}
.alert-timeline__zone {
  position: absolute;
  top: 0;
  bottom: 0;
}
.alert-timeline__zone.is-warning {
  background-color: color-mix(in srgb, var(--c-warning) 35%, transparent);
}
.alert-timeline__zone.is-error {
  right: 0;
  background-color: color-mix(in srgb, var(--c-danger) 25%, transparent);
}
.alert-timeline__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background-color: var(--c-field-text);
}
.alert-timeline__ticks {
  position: relative;
  height: 20px;
  font-size: 11.5px;
  color: var(--c-field-text);
}
.alert-timeline__ticks.is-marks {
  height: 18px;
}
.alert-timeline__ticks.is-marks > span {
  top: 0;
  font-weight: 500;
  color: var(--c-text);
}
.alert-timeline__ticks > span {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.alert-timeline__ticks > span.is-start {
  left: 0;
  transform: none;
}
.alert-timeline__ticks > span.is-end {
  right: 0;
  transform: none;
}

.alert-form__one {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-left-width: 3px;
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
}
.alert-form__one.is-warning {
  border-left-color: var(--c-warning);
}
.alert-form__one.is-error {
  border-left-color: var(--c-danger);
}
.alert-form__one-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--c-field-text);
}

.alert-form__info {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.alert-form__info .material-icons {
  flex: none;
  margin-top: 1px;
  font-size: 16px;
  color: var(--c-brand);
}

/* The Alert contacts column (alertColumnsConfig.js): the contacts as tags (tag.scss) with an email or webhook icon, on
   one line as many as fit (CONTACT_LINE_WIDTH), then the count that opens them all, as the device list's Tags column. */
.contact-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  max-width: 260px;
  white-space: nowrap;
  vertical-align: middle;
}
.contact-line .tag {
  flex: 0 0 auto;
  margin: 0 2px;
}
.contact-line .tag.tag--more {
  font-weight: 600;
  color: var(--c-brand);
  cursor: pointer;
}

.tag.contact-chip {
  text-decoration: none;
}
.tag.contact-chip i.material-icons {
  font-size: 13px;
  line-height: 1;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

a.tag.contact-chip:hover,
a.tag.contact-chip:focus {
  border-color: var(--c-brand);
  color: var(--c-brand);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
}

.infinite-table-container .table.infinite-table tbody tr td .contact-chip i.material-icons {
  position: static;
  top: auto;
  bottom: auto;
  float: none;
  height: auto;
}

md-menu-content.contact-menu .contact-menu__title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--c-field-text);
}
md-menu-content.contact-menu .contact-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hardware-selection-list .excluded-text {
  margin-left: 10px;
  margin-right: 10px;
}

.auto-update-container .reboot-checkbox {
  display: block;
  margin-left: 16px;
  margin-top: -40px;
}
.auto-update-container .save-button {
  margin-left: 16px;
  margin-top: 16px;
  margin-bottom: 24px;
}

.welcome-wizard-finish-page .finish-icon {
  text-align: center;
  font-size: 160px;
}
.welcome-wizard-finish-page .finish-text {
  margin-top: 30px;
}

.grecaptcha-badge {
  bottom: 35px !important;
}

.logged-in .grecaptcha-badge {
  visibility: hidden;
}

.alerts-occurred-list .warning {
  color: var(--c-accent);
}
.alerts-occurred-list .error {
  color: var(--c-danger);
}

.seat-selector {
  border: 2px solid;
  padding: 6px;
  border-radius: 6px;
}
.seat-selector .remove-seat:not([disabled]):hover, .seat-selector .add-seat:not([disabled]):hover {
  box-shadow: none;
}
.seat-selector .remove-seat i, .seat-selector .add-seat i {
  font-weight: bold;
}
.seat-selector .remove-seat:not([disabled]):hover {
  color: var(--c-danger);
}
.seat-selector .add-seat:not([disabled]):hover {
  color: var(--c-success);
}
.seat-selector .seat-count {
  width: 120px;
  text-align: center;
  font-weight: bold;
  position: relative;
  top: 2px;
  font-size: 24px;
  flex: 1;
}

.pay-per-seat-selector .seat-selector-container {
  flex: 1;
  margin-bottom: 20px;
}
.pay-per-seat-selector .seat-selector-container .seat-selector-title-container {
  margin-bottom: 10px;
}
.pay-per-seat-selector .seat-selector-container .seat-selector-title-container .title {
  font-size: 16px;
  font-weight: bold;
}
.pay-per-seat-selector .seat-selector-container .seat-selector-title-container .description {
  font-size: 12px;
}
.pay-per-seat-selector .subscribe-btn {
  width: 100%;
  margin: 0;
}
.pay-per-seat-selector .pricing-container .price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
}
.pay-per-seat-selector .pricing-container .price-container .interval-pricing {
  display: flex;
  flex-direction: row;
  font-weight: bold;
}
.pay-per-seat-selector .pricing-container .price-container .interval-pricing .interval-price {
  display: flex;
  flex-direction: row;
}
.pay-per-seat-selector .pricing-container .price-container .interval-pricing .interval-price .currency {
  font-size: 20px;
}
.pay-per-seat-selector .pricing-container .price-container .interval-pricing .interval-price .price {
  font-size: 32px;
  font-weight: bold;
  line-height: 32px;
}
.pay-per-seat-selector .pricing-container .price-container .interval-pricing .interval-price .interval-info {
  display: flex;
  align-items: end;
}
.pay-per-seat-selector .pricing-container .price-container .usage-info {
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.pay-per-seat-selector .pricing-container .price-container .total-pricing {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  font-size: 12px;
}
.pay-per-seat-selector .request-quote-link {
  margin-top: 40px;
  display: inline-block;
}

.settings-container .settings-detail-container {
  /* whiteframe cards: see $pageContentTop in values.scss */
  padding-top: calc(16px - 5px);
  margin: 0 -5px;
}
.settings-container .settings-detail-container .toggle-box {
  max-width: 1000px;
}
.settings-container .settings-detail-container .toggle-box .setting {
  padding: 10px;
}

/* Windows updates (Settings → Patch Management): the defaults for new update automations as a matrix, search and
   install in two columns and source, classifications and severities as rows; the update list below as None / Skip
   these / Only these with its list. The foot is the Auto assignment one (customFields.scss). */
.windows-updates__matrix {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px 20px;
  padding: 16px 20px 18px;
}
.windows-updates__col {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-field-text);
}
.windows-updates__col .material-icons {
  font-size: 16px;
}
.windows-updates__row {
  padding-top: 6px;
  font-size: 13px;
  color: var(--c-field-text);
}
.windows-updates md-input-container.windows-updates__source,
.windows-updates md-input-container.windows-updates__list-select {
  margin: 0;
  padding: 0;
}
.windows-updates md-input-container.windows-updates__source .md-errors-spacer,
.windows-updates md-input-container.windows-updates__list-select .md-errors-spacer {
  display: none;
}
.windows-updates__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.windows-updates__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--c-field-text);
  cursor: pointer;
}
.windows-updates__chip .material-icons {
  margin-left: -3px;
  font-size: 14px;
}
.windows-updates__chip:hover {
  border-color: var(--c-brand);
  color: var(--c-text);
}
.windows-updates__chip:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.windows-updates__chip.is-on {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand) 10%, transparent);
}
.windows-updates__list-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.windows-updates__list-row md-radio-group.segmented {
  flex: none;
}
.windows-updates__list-select {
  flex: 1 1 240px;
}

/* Automations (Settings → Automations): smart evaluation as a switch beside what it does, the execution mode as the
   Auto assignment choices (customFields.scss), one Save in the foot. */
.automations-settings__smart .form-card__pill {
  margin-left: 6px;
  vertical-align: 1px;
}
.automations-settings__smart .auto-assignment__intro {
  margin-bottom: 4px;
}

/* Agent (Settings → Agent): the update channels as the Auto assignment choices (customFields.scss) with each channel's
   version at the right, auto approval as a switch beside what it does, one Save in the foot. */
.agent-settings__channel .auto-assignment__text {
  flex: 1;
  min-width: 0;
}
.agent-settings__channel .form-card__pill {
  margin-left: 8px;
  font-weight: 400;
  vertical-align: 1px;
}
.agent-settings__version {
  flex: none;
  padding-top: 1px;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: var(--c-field-text);
}

/* A setting that is on or off: what it does on the left, the switch on the right (Automations, Agent, Security). */
.setting-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.setting-row__text {
  flex: 1;
  min-width: 0;
}
.setting-row > md-switch {
  flex: none;
  margin: 0;
}

/* Allowed addresses (Settings → Security): the portal and the public API lists as two groups, a pill with how many
   addresses each allows; the ip-allow-list widget's own label goes, the group's title says it. */
.allowed-addresses .auto-assignment__title .form-card__pill {
  margin-left: 6px;
  font-weight: 400;
  vertical-align: 1px;
}
.allowed-addresses__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-field-text);
}
.allowed-addresses__note .material-icons {
  flex: none;
  margin-top: 1px;
  font-size: 16px;
  color: var(--c-accent);
}
.allowed-addresses .ip-allow-list-label {
  display: none;
}

.laps-settings__username {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
}

.auto-assignment__intro.notification-settings__off {
  margin-top: -6px;
  color: var(--c-warning-ink);
}

.blurred-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--c-surface-sunken);
}

.overlay-content {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.content-overlay .header .title {
  font-size: 32px;
}
md-menu md-menu-item, md-menu-content md-menu-item {
  height: 36px;
  min-height: initial;
  margin: 0;
  padding: 0;
}
md-menu md-menu-item .md-button, md-menu-content md-menu-item .md-button {
  display: flex;
}
md-menu md-menu-item .md-button:not([disabled]):hover, md-menu-content md-menu-item .md-button:not([disabled]):hover {
  box-shadow: none;
}
md-menu md-menu-item .md-button .beta-label, md-menu-content md-menu-item .md-button .beta-label {
  line-height: 16px;
}
md-menu.md-menu-bar-menu.md-dense.toolbar-menu-right-bar-menu, md-menu-content.md-menu-bar-menu.md-dense.toolbar-menu-right-bar-menu {
  padding: 8px 0;
  min-width: initial;
}

.md-open-menu-container {
  border-radius: 6px;
}

/* Menus built from data by md-menu-content-generator — the row menus in the tables and the dropdowns in
 * the menu bar. Scoped to that class so the toolbar's own menus (notifications, organisation, account)
 * keep theirs.
 *
 * Material's theme stylesheet is injected into <head> at runtime, after this one, so a rule here that
 * merely equals its specificity loses. The hover and divider rules below carry element selectors on top
 * of Material's class count for exactly that reason. */
md-menu-content.generated-menu {
  /* Inset rows rather than full-bleed strips: the hover is a shape inside the menu, not a band across it. */
  padding: 6px;
  /* The entry itself, and the trigger of a flyout, which is one menu deeper. */
  /* The flyout that is open keeps its parent lit, so the path from the menu into it stays visible
     while the pointer is in the flyout. */
  /* The entries that cannot be taken back. Darker than the danger fill colour, because this is text on
     white at 13.5px, where the fill colour scores 4.0. */
  /* Heads a group. Quieter than the entries under it — the same rule field-group titles follow. */
}
md-menu-content.generated-menu md-menu-item {
  height: 32px;
}
md-menu-content.generated-menu md-menu-item > .md-button,
md-menu-content.generated-menu md-menu-item > md-menu > md-menu-item > .md-button {
  display: flex;
  align-items: center;
  height: 32px;
  min-height: 32px;
  line-height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  /* The size of the table the menu opens from, not Material's 15px — the menu was the largest text on
     the screen while it was open. */
  font-size: 13.5px;
  color: var(--c-text);
  text-transform: none;
}
md-menu-content.generated-menu md-menu-item > .md-button:not([disabled]):hover, md-menu-content.generated-menu md-menu-item > .md-button:not([disabled]):focus-visible,
md-menu-content.generated-menu md-menu-item > md-menu > md-menu-item > .md-button:not([disabled]):hover,
md-menu-content.generated-menu md-menu-item > md-menu > md-menu-item > .md-button:not([disabled]):focus-visible {
  background-color: var(--c-table-row-hover);
}
md-menu-content.generated-menu md-menu-item > .md-button[disabled],
md-menu-content.generated-menu md-menu-item > md-menu > md-menu-item > .md-button[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-menu-content.generated-menu md-menu-item > .md-button .submenu-button-icon,
md-menu-content.generated-menu md-menu-item > md-menu > md-menu-item > .md-button .submenu-button-icon {
  margin-right: -4px;
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-menu-content.generated-menu md-menu-item > md-menu.md-open > md-menu-item > .md-button {
  background-color: var(--c-table-row-hover);
  color: var(--c-brand);
  font-weight: 600;
}
md-menu-content.generated-menu md-menu-item > md-menu.md-open > md-menu-item > .md-button .submenu-button-icon {
  color: var(--c-brand);
}
md-menu-content.generated-menu md-menu-item.is-danger > .md-button:not([disabled]) {
  color: var(--c-danger-deep);
}
md-menu-content.generated-menu md-menu-item.is-danger > .md-button:not([disabled]):hover, md-menu-content.generated-menu md-menu-item.is-danger > .md-button:not([disabled]):focus-visible {
  background-color: color-mix(in srgb, var(--c-danger), transparent 92%);
}
md-menu-content.generated-menu md-menu-divider {
  /* Material sets width: 100%, and a 100% width plus side margins is wider than the menu — the
     content box overflowed by the 8px of margin and the menu grew a horizontal scrollbar. */
  width: auto;
  margin: 5px 4px;
  background-color: var(--c-border);
}
md-menu-content.generated-menu .generated-menu-label {
  padding: 8px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-menu-content.generated-menu .generated-menu-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding: 6px 10px 9px;
  border-bottom: 1px solid var(--c-border);
}
md-menu-content.generated-menu .generated-menu-header .generated-menu-header-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}
md-menu-content.generated-menu .generated-menu-header .generated-menu-header-state {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  /* The same pairs the device header uses for the same meanings. */
}
md-menu-content.generated-menu .generated-menu-header .generated-menu-header-state.is-online, md-menu-content.generated-menu .generated-menu-header .generated-menu-header-state.is-ok {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success);
}
md-menu-content.generated-menu .generated-menu-header .generated-menu-header-state.is-running {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}
md-menu-content.generated-menu .generated-menu-header .generated-menu-header-state.is-waiting {
  background-color: color-mix(in srgb, var(--c-accent), transparent 84%);
  color: var(--c-accent);
}
md-menu-content.generated-menu .generated-menu-header .generated-menu-header-state.is-error {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
}
md-menu-content.generated-menu .generated-menu-header .generated-menu-header-state.is-muted {
  background-color: var(--c-surface-subtle);
  color: var(--c-field-text);
}
md-menu-content.generated-menu .generated-menu-note {
  /* Wraps to the menu rather than setting its width. A menu sizes to its widest row, and a sentence's
     widest is the whole sentence on one line — the note alone pushed the menu from 256px to 330. */
  contain: inline-size;
  margin: 2px 2px 4px;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-accent), transparent 92%);
  color: var(--c-cat-brown);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}

/* The surface around a generated menu: a hairline and a soft shadow, the treatment the panels use, in
   place of Material's three stacked shadows with no edge. */
.md-open-menu-container:has(> md-menu-content.generated-menu) {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 90%);
}

/* The row a menu belongs to, while its menu is open — see menuMarksRow: the row-hover tint. It had a brand edge
   along its first cell as well, which lay over the state rail (updateScore.scss) in the tables that have one. */
tr.has-open-menu > td {
  background-color: var(--c-table-row-hover) !important;
}

.collapsible {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.collapsible .collapsible-header {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  font-size: 16px;
  padding: 4px;
}
.collapsible .collapsible-header .header-expander {
  flex: 1;
}
.collapsible .collapsible-content {
  padding: 4px;
}

.task-execution-info .infinite-table-wrapper {
  padding-top: 0;
}
.task-execution-info .infinite-table-wrapper .hostname-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.task-execution-info .infinite-table-wrapper .hostname-container .device-state {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

/* An automation run (modules/patchall/jobExecutionInfo/jobExecutionInfo.html): a summary card — the state, when and how
   long, a bar of how the devices came out with their counts, the run's own buttons — then the tasks to switch between,
   then the devices. It was a coloured line along the top, bold labels in a row and a red outlined "Issues". */
.job-execution-info {
  padding-top: 16px;
}

.run-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}

.run-summary__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.run-summary__facts strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.run-summary__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.run-summary__state i.material-icons {
  font-size: 16px;
}
.run-summary__state.is-ok {
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
  color: var(--c-success-deep);
}
.run-summary__state.is-error {
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
  color: var(--c-danger);
}
.run-summary__state.is-warning, .run-summary__state.is-paused {
  background-color: color-mix(in srgb, var(--c-warning) 20%, transparent);
  color: var(--c-warning-ink);
}
.run-summary__state.is-running, .run-summary__state.is-scheduled {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
}
.run-summary__state.is-running i.material-icons {
  animation: run-summary-spin 1.6s linear infinite;
}

[data-theme=dark] .run-summary__state.is-warning, [data-theme=dark] .run-summary__state.is-paused {
  color: var(--c-warning);
}

@keyframes run-summary-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .run-summary__state.is-running i.material-icons {
    animation: none;
  }
}
/* the devices of the open task by outcome; it fills as the run goes on */
.run-summary__bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
}
.run-summary__bar > span {
  height: 100%;
  transition: width 400ms ease;
}
.run-summary__bar .is-ok {
  background-color: var(--c-success);
}
.run-summary__bar .is-error {
  background-color: var(--c-danger);
}
.run-summary__bar .is-not-started {
  background-color: var(--c-warning);
}
.run-summary__bar .is-running {
  background-color: color-mix(in srgb, var(--c-brand), transparent 55%);
}

.run-summary__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--c-text);
}

.run-summary__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.run-summary__count.is-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-ink), transparent 76%);
  text-underline-offset: 3px;
}
.run-summary__count.is-link:hover {
  text-decoration-color: currentColor;
}
.run-summary__count.is-link:focus {
  outline: none;
}
.run-summary__count.is-link:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.run-summary__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.run-summary__dot.is-ok {
  background-color: var(--c-success);
}
.run-summary__dot.is-error {
  background-color: var(--c-danger);
}
.run-summary__dot.is-not-started {
  background-color: var(--c-warning);
}
.run-summary__dot.is-running {
  background-color: color-mix(in srgb, var(--c-brand), transparent 55%);
}

.run-summary__of {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.run-summary__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  font-size: 12.5px;
  color: var(--c-text);
  cursor: pointer;
}
.run-summary__action i.material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.run-summary__action:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.run-summary__action:focus {
  outline: none;
}
.run-summary__action:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

/* Several tasks: a button each, with how far its devices got */
.run-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.run-tasks__task {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 160px;
  padding: 7px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.run-tasks__task:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.run-tasks__task.is-on {
  border-color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-brand);
}
.run-tasks__task:focus {
  outline: none;
}
.run-tasks__task:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 65%);
}

.run-tasks__name {
  font-size: 13px;
  font-weight: 600;
}

.run-tasks__line {
  min-height: 16px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.run-tasks__line.has-error {
  color: var(--c-danger);
}

@media (max-width: 599px) {
  .run-summary {
    padding: 12px;
  }
  .run-tasks__task {
    flex: 1 1 100%;
  }
}
.problems-summary-dialog .error-message {
  color: var(--c-danger);
}
.problems-summary-dialog .warning-message {
  color: var(--c-accent);
}

top-strip.success .top-strip {
  border-color: var(--c-success);
}
top-strip.warning .top-strip {
  border-color: var(--c-accent);
}
top-strip.error .top-strip {
  border-color: var(--c-danger);
}
top-strip .top-strip {
  position: fixed;
  width: 100%;
  left: 0;
  top: 116px;
  border-top: 4px solid;
  z-index: 10;
  display: block;
}
@media (min-width: 1280px) {
  top-strip .top-strip.sidebar-visible {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
  }
}

.task-info-old table.table {
  border-collapse: collapse;
}
.task-info-old table.table tbody:not(:last-child) {
  border: none;
}
.task-info-old .task-actions-wrapper {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.task-info-old .task-actions-wrapper task-actions-diagram {
  display: block;
  margin: 8px;
}
.task-info-old .task-hardware-wrapper {
  padding: 8px 8px 0 8px;
}
.task-info-old .task-hardware-wrapper .toggle-box {
  margin: 10px 0 0 0;
}
.task-info-old .task-hardware-wrapper .last-box {
  margin-bottom: 10px;
}

/* The two forms: the pill, or compact, the dot alone — each with the Remote session button in front where it
   is asked for. See deviceState.directive.js. */
.device-state-cell,
.device-state-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  vertical-align: middle;
}

/* The device page's Remote session button reduced to its icon, outlined: it is on most rows of a list, and
   filled it would be the loudest thing in each of them. */
.device-remote-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background-color: var(--c-surface);
  color: var(--c-accent);
  box-shadow: inset 0 0 0 1.5px var(--c-accent);
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
  /* Sized to the glyph on both axes. The icon carries custom-style-icon: the table otherwise floats every icon
     in a cell, 20px tall and 2px raised, and the arrow sat above the button's centre. */
  /* An offline device: the same button in grey, which says a session is possible once it is back. */
}
.device-remote-button .material-icons {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}
.device-remote-button:hover {
  background-color: color-mix(in srgb, var(--c-accent), transparent 90%);
}
.device-remote-button:focus {
  outline: none;
}
.device-remote-button:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--c-accent), 0 0 0 3px color-mix(in srgb, var(--c-accent), transparent 65%);
}
.device-remote-button.is-unavailable {
  color: color-mix(in srgb, var(--c-ink), transparent 74%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-ink), transparent 86%);
  cursor: not-allowed;
}
.device-remote-button.is-unavailable:hover {
  background-color: var(--c-surface);
}
.device-remote-button.is-unavailable:focus-visible {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-ink), transparent 86%), 0 0 0 3px color-mix(in srgb, var(--c-ink), transparent 88%);
}

/* Live, Online, Offline — the device page header's words. Live and Online share the green, as there; the
   dot tells them apart, solid for a held connection and hollow for polling. Offline is neutral rather than
   the header's red: in a list, most offline devices are not an alarm. */
.device-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 20px;
}
.device-state-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.device-state-pill.is-live {
  background-color: color-mix(in srgb, var(--c-success), transparent 86%);
  color: var(--c-success-deep);
}
.device-state-pill.is-live::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success), transparent 78%);
}
.device-state-pill.is-online {
  background-color: color-mix(in srgb, var(--c-success), transparent 90%);
  color: var(--c-success-deep);
}
.device-state-pill.is-online::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.device-state-pill.is-offline {
  background-color: var(--c-surface-sunken);
  color: var(--c-field-text);
}
.device-state-pill.is-offline::before {
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.device-state-pill .device-state-pill-detail {
  font-weight: 500;
  opacity: 0.85;
  /* No reboot for more than 45 days, or down for long — what the orange uptime meant. */
}
.device-state-pill .device-state-pill-detail.is-warning {
  color: var(--c-accent);
  opacity: 1;
}

/* The compact form: the pill's dot on its own, a size up since it has no ground around it. The halo of a live
   connection is drawn outside it, so it keeps a margin to clear the button and the hostname. */
.device-state-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border-radius: 50%;
  background-color: currentColor;
}
.device-state-dot.is-live {
  color: var(--c-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success), transparent 78%);
}
.device-state-dot.is-online {
  color: var(--c-success);
  background-color: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.device-state-dot.is-offline {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.device-state-dot.is-none {
  background-color: transparent;
}
.device-state-dot:focus {
  outline: none;
}
.device-state-dot:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-brand), transparent 55%);
  outline-offset: 3px;
}

/* Where there is no device to reach, the button's place stays, so the hostnames after it line up. */
.device-remote-slot {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.two-factor-code-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.two-factor-code-container .digit-container:not(:last-child) {
  margin-right: 10px;
}
.two-factor-code-container .digit-container input {
  height: 46px;
  width: 46px;
  text-align: center;
  font-size: 20px;
}

.file-info-viewer-list {
  list-style-type: none;
  padding: 0;
}
.file-info-viewer-list li .list-item-title {
  position: sticky;
  top: 0;
  background: var(--c-neutral);
  padding: 5px;
  font-weight: bold;
}
.file-info-viewer-list li ul {
  list-style-type: none;
  padding: 0;
  margin: 5px 0 5px 0;
}
.file-info-viewer-list li ul li .file-title {
  white-space: nowrap;
}

/* Download and upload results of an action (widgets/downloadActionResultViewer, widgets/uploadActionResultViewer): a
   card per transfer with its outcome and file, a row per source with its status that opens to the details, hashes to
   copy. It was a grey bar, struck-through URLs and a table of every field, empty ones included. */
.action-result {
  display: grid;
  gap: 12px;
  padding: 8px 0;
}

.action-result__card {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}

.action-result__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
}

.action-result__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.action-result__icon i.material-icons {
  font-size: 17px;
}
.is-ok .action-result__icon {
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
  color: var(--c-success-deep);
}
.is-failed .action-result__icon {
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
  color: var(--c-danger);
}

.action-result__title {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.action-result__title strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}

.action-result__sub,
.action-result__count {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.action-result__source + .action-result__source {
  border-top: 1px solid var(--c-border);
}

.action-result__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.action-result__row:hover {
  background-color: var(--c-surface-subtle);
}
.action-result__row:focus {
  outline: none;
}
.action-result__row:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}

.action-result__n {
  width: 16px;
  font-size: 11px;
  text-align: center;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.action-result__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.action-result__url strong {
  font-weight: 600;
  color: var(--c-text);
}

.action-result__state > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 11.5px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.action-result__state i.material-icons {
  font-size: 14px;
}
.action-result__state.is-ok > span {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-success) 16%, transparent);
  color: var(--c-success-deep);
}
.action-result__state.is-failed > span {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-danger) 14%, transparent);
  color: var(--c-danger);
}

.action-result__chevron.material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.action-result__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 16px;
  margin: 0;
  padding: 6px 12px 12px 38px;
  font-size: 12.5px;
}
.action-result__head + .action-result__facts {
  padding-left: 12px;
  padding-top: 10px;
}
.action-result__facts dt {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.action-result__facts dd {
  min-width: 0;
  margin: 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.action-result__facts code {
  padding: 1px 6px;
  border-radius: 4px;
  background-color: var(--c-surface-subtle);
  font-size: 11.5px;
  color: var(--c-text);
  word-break: break-all;
}

.action-result__hash {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.action-result__hash button {
  display: flex;
  flex: 0 0 auto;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.action-result__hash button i.material-icons {
  font-size: 15px;
}
.action-result__hash button:hover {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}

.action-result__actions .md-button {
  margin: 0;
}
.action-result__actions .material-icons {
  margin-right: 6px;
  font-size: 18px;
  vertical-align: -4px;
}

/* The last things that went wrong. Each alert was a bordered block with a filled severity glyph and a coloured
   rail down its side; in a list where every row is an alert, that is the same decoration repeated eight times.
   A dot carries the severity, the row carries the rest. */
.recent-alerts-viewer .alert-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
}
.recent-alerts-viewer .alert-row:last-child {
  border-bottom: 0;
}
.recent-alerts-viewer .alert-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.recent-alerts-viewer .alert-row.error .alert-dot {
  background-color: var(--c-danger);
}
.recent-alerts-viewer .alert-row.warning .alert-dot {
  background-color: var(--c-accent);
}
.recent-alerts-viewer .alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.recent-alerts-viewer .alert-hostname {
  font-size: 13px;
  line-height: 18px;
  color: var(--c-link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-alerts-viewer .alert-hostname:hover {
  text-decoration: underline;
}
.recent-alerts-viewer .alert-message {
  font-size: 12px;
  line-height: 16px;
  color: var(--c-field-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-alerts-viewer .alert-age {
  flex: none;
  align-self: center;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.recent-alerts-viewer .alerts-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.recent-alerts-viewer .alerts-empty .material-icons {
  font-size: 20px;
  color: var(--c-success);
}
.recent-alerts-viewer .view-all-link {
  padding-top: 9px;
  border-top: 1px solid var(--c-border);
  margin-top: 2px;
}
.recent-alerts-viewer .view-all-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--c-link);
}
.recent-alerts-viewer .view-all-link a .material-icons {
  font-size: 15px;
}
@media (max-width: 600px) {
  .recent-alerts-viewer .alert-message {
    white-space: normal;
  }
}

/* What is running, inside a card that is already white. Each section used to sit on $surface-sunken — the page
   grey — with a white card per row on top of it, so every line carried two frames and a block of colour. */
.running-automations-card {
  /* Something is happening to this one right now. */
}
.running-automations-card .running-automations-section {
  padding: 9px 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.running-automations-card .running-automations-section:first-child {
  padding-top: 2px;
}
.running-automations-card .running-automations-empty {
  padding: 14px 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.running-automations-card .running-automations-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
}
.running-automations-card .running-automations-row:last-child {
  border-bottom: 0;
}
.running-automations-card .running-automations-row.is-clickable {
  cursor: pointer;
}
.running-automations-card .running-automations-row.is-clickable:hover {
  background-color: var(--c-surface-subtle);
}
.running-automations-card .running-automations-lead {
  flex: none;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.running-automations-card .running-automations-lead .material-icons {
  font-size: 17px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.running-automations-card .running-automations-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-brand);
  animation: running-automations-spin 1s linear infinite;
}
@keyframes running-automations-spin {
  to {
    transform: rotate(360deg);
  }
}
.running-automations-card .running-automations-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.running-automations-card .running-automations-title {
  font-size: 13px;
  line-height: 18px;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.running-automations-card .running-automations-title a {
  color: var(--c-link);
}
.running-automations-card .running-automations-sub {
  font-size: 11.5px;
  line-height: 15px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.running-automations-card .running-automations-age {
  flex: none;
  align-self: center;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-variant-numeric: tabular-nums;
}
.running-automations-card .running-automations-age.is-waiting {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
@media (max-width: 600px) {
  .running-automations-card .running-automations-row {
    flex-wrap: wrap;
  }
  .running-automations-card .running-automations-age {
    margin-left: 30px;
  }
}

.simple-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  /* The one scroller: the card gives it whatever height is left, and what is inside it does not set a height
     of its own — two cards side by side were ending at different heights because their contents did. */
}
.simple-card .simple-card-header {
  padding: 10px 12px 2px;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-height: 28px;
}
.simple-card .simple-card-body {
  flex: 1;
  min-height: 0;
  padding: 8px 12px 12px 12px;
  overflow: auto;
  position: relative;
}

.ace-editor-container {
  width: 100%;
  height: 100%;
  min-height: 150px;
  box-sizing: border-box;
  flex-grow: 1;
}

.command-line {
  background-color: var(--c-ink);
  color: var(--c-on-fill);
  height: inherit;
  max-height: inherit;
}
.command-line pre {
  background-color: var(--c-ink);
  color: var(--c-on-fill);
}
.command-line .command-line-content {
  overflow-y: scroll;
  height: inherit;
  max-height: inherit;
  border: none;
  border-radius: 0;
}
.command-line .command-line-content.no-output-message {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.command-line.powershell {
  background-color: var(--c-powershell);
  color: white;
}
.command-line.powershell pre {
  background-color: var(--c-powershell);
  color: white;
}

value-indicator {
  display: block;
}
value-indicator .bar-container {
  display: flex;
  width: 100px;
  border-radius: 50px;
  overflow: hidden;
  height: 20px;
}
value-indicator .bar-part {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--c-on-fill);
  transition: all 0.3s ease-out;
}
value-indicator .bar-part.warning-part {
  background-color: var(--c-accent);
}
value-indicator .bar-part.error-part {
  background-color: var(--c-danger);
}
value-indicator .bar-part.info-part {
  background-color: var(--c-neutral);
}
value-indicator .bar-part:last-child {
  border-right: none;
}
value-indicator .bar-part i {
  font-size: 16px;
}

horizontal-value-indicator {
  display: block;
}
horizontal-value-indicator .hvi-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--c-neutral);
  cursor: pointer;
}
horizontal-value-indicator .hvi-segment {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 2px;
  height: 100%;
  transition: flex-basis 0.3s ease-out;
}
horizontal-value-indicator .hvi-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-on-fill);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 45%);
}

md-input-container.no-bottom-gap {
  margin-bottom: 0;
}

.custom-input-container {
  width: 100%;
  display: flex;
  align-items: stretch;
  border-radius: 6px;
  font-size: 14px;
  position: relative;
  /* The buttons at the end are square and the box is not: without this their hover fill paints over the
     rounded corner and the field appears to bulge where it is pointed at. */
  overflow: hidden;
  /* The copy button is its own element (copyButton.directive.js) so the box and the password field can
     share one; as a flex item it has to stretch like the buttons written inline beside it. */
}
.custom-input-container .custom-input-label {
  position: absolute;
  transform: translate3d(0, 5px, 0) scale(0.75) !important;
  bottom: 100%;
  left: 0;
  transform-origin: left top;
}
.custom-input-container .custom-input-label .required-sign {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.custom-input-container .custom-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  height: 28px;
}
.custom-input-container .custom-input:disabled {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  background-image: none;
  border-bottom-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 5px 0 0 5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.custom-input-container copy-button {
  display: flex;
  flex: 0 0 auto;
}
.custom-input-container .custom-input-icon-button {
  background: transparent;
  /* Keep inline and wrapped actions equally wide; only the input should shrink. */
  box-sizing: border-box;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  padding: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease-in-out;
}
.custom-input-container .custom-input-icon-button .material-icons {
  font-size: 20px;
}
.custom-input-container.theme-light {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background-color: var(--c-surface);
}
.custom-input-container.theme-light .custom-input {
  color: var(--c-ink);
}
.custom-input-container.theme-light .custom-input:disabled {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.custom-input-container.theme-light .custom-input-icon-button {
  border-left: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  color: var(--c-brand);
}
.custom-input-container.theme-light .custom-input-icon-button:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 90%);
}
.custom-input-container.theme-light .custom-input-icon-button:active {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.custom-input-container.theme-dark {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 76%);
  background-color: color-mix(in srgb, var(--c-ink), transparent 40%);
}
.custom-input-container.theme-dark .custom-input {
  color: var(--c-on-fill);
}
.custom-input-container.theme-dark .ccustom-input-icon-button {
  border-left: 1px solid color-mix(in srgb, var(--c-ink), transparent 76%);
  color: var(--c-neutral);
}
.custom-input-container.theme-dark .ccustom-input-icon-button:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 86%);
}
.custom-input-container.theme-dark .ccustom-input-icon-button:active {
  background-color: color-mix(in srgb, var(--c-ink), transparent 76%);
}

.csb {
  font-size: 14px;
}
.csb .csb__tabs {
  gap: 4px;
  padding: 4px;
  background-color: var(--c-surface-sunken);
  border-radius: 10px;
  margin-bottom: 16px;
}
.csb .csb__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.csb .csb__tab i {
  font-size: 18px;
}
.csb .csb__tab:hover:not(:disabled) {
  color: var(--c-brand);
}
.csb .csb__tab:disabled {
  cursor: default;
}
.csb .csb__tab.csb__tab--active {
  background-color: var(--c-surface);
  color: var(--c-brand);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.csb .csb__error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-danger);
  font-size: 13px;
  padding: 10px 14px;
  background-color: color-mix(in srgb, var(--c-danger), transparent 92%);
  border-radius: 8px;
  margin-bottom: 14px;
}
.csb .csb__error i {
  font-size: 18px;
}
.csb .csb__preview {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 95%);
  border: 1px solid color-mix(in srgb, var(--c-brand), transparent 85%);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.csb .csb__preview-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-brand);
}
.csb .csb__preview-value {
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 13px;
  color: var(--c-ink);
  white-space: nowrap;
}
.csb .csb__preview-value--empty {
  font-family: inherit;
  font-style: italic;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.csb .csb__hint {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
  margin: 0 0 12px 0;
}
.csb .csb__hint code {
  background-color: var(--c-surface-sunken);
  padding: 1px 6px;
  border-radius: 4px;
}
.csb .csb__raw md-input-container {
  width: 100%;
}
.csb .csb__raw .csb__raw-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 8px;
  background-color: var(--c-surface-sunken);
}
.csb .csb__raw .csb__raw-input:focus {
  outline: none;
  border-color: var(--c-brand);
  background-color: var(--c-surface);
}
.csb .csb__matchbar {
  gap: 10px;
  margin-bottom: 12px;
}
.csb .csb__matchbar-label {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
}
.csb .csb__not {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background: var(--c-surface);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: all 0.15s ease;
}
.csb .csb__not i {
  font-size: 16px;
}
.csb .csb__not:hover:not(:disabled) {
  border-color: var(--c-danger);
  color: var(--c-danger);
}
.csb .csb__not.csb__not--active {
  background-color: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-on-fill);
}
.csb .csb__not.csb__not--active:hover:not(:disabled) {
  background-color: var(--c-danger-deep);
  border-color: var(--c-danger-deep);
  color: var(--c-on-fill);
}
.csb .csb__clauses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.csb .csb__clause {
  display: flex;
  align-items: stretch;
  background-color: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.csb .csb__clause:hover {
  border-color: color-mix(in srgb, var(--c-brand), transparent 50%);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--c-shadow), transparent 94%);
}
.csb .csb__clause-index {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  font-size: 13px;
  font-weight: 700;
}
.csb .csb__clause-body {
  flex: 1;
  padding: 8px 12px 10px;
  min-width: 0;
}
.csb .csb__clause-line {
  gap: 12px;
}
.csb .csb__clause-line--controls {
  margin-top: 2px;
}
.csb .csb__clause-desc {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  line-height: 1.35;
  margin: -2px 0 6px 0;
}
.csb .csb__clause-desc .csb__clause-desc-more {
  color: var(--c-brand);
  font-weight: 600;
  cursor: help;
  margin-left: 4px;
  white-space: nowrap;
}
.csb .csb__variable {
  min-width: 220px;
}
.csb .csb__info {
  flex: 0 0 auto;
}
.csb .csb__info i {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
  cursor: help;
}
.csb .csb__info i:hover {
  color: var(--c-brand);
}
.csb .csb__info .csb__info--caution {
  color: var(--c-danger);
}
.csb .csb__delete {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.csb .csb__delete i {
  font-size: 20px;
}
.csb .csb__delete:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  color: var(--c-danger);
}
.csb .csb__drive {
  width: 64px;
}
.csb .csb__mode {
  min-width: 150px;
}
.csb .csb__compare {
  gap: 8px;
}
.csb .csb__compare md-input-container:first-child {
  min-width: 140px;
}
.csb .csb__number input[type=number] {
  width: 100px;
}
.csb .csb__negate {
  margin: 0;
  flex: 0 0 auto;
}
.csb .csb__negate .md-label {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.csb .csb__warning {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-danger);
  font-size: 12px;
  margin-top: 6px;
}
.csb .csb__warning i {
  font-size: 16px;
}
.csb .csb__empty {
  text-align: center;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 13px;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 10px;
}
.csb .csb__inline-action.md-button {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  height: 30px;
  min-height: 30px;
  line-height: 30px;
  padding: 0 12px;
  margin: 0 0 20px 8px;
  color: var(--c-brand);
  font-weight: 600;
}
.csb .csb__inline-action.md-button i {
  font-size: 18px;
  margin-right: 4px;
  color: var(--c-brand);
  vertical-align: middle;
}
.csb .csb__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--c-brand), transparent 50%);
  background-color: color-mix(in srgb, var(--c-brand), transparent 96%);
  color: var(--c-brand);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.csb .csb__add i {
  font-size: 20px;
}
.csb .csb__add:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  border-color: var(--c-brand);
}
.csb .csb__add:disabled {
  opacity: 0.5;
  cursor: default;
}

md-select-menu md-option.condition-variable-option {
  height: auto;
  min-height: 52px;
  padding-top: 8px;
  padding-bottom: 8px;
}
md-select-menu md-option.condition-variable-option .md-text {
  width: 100%;
}
md-select-menu md-option.condition-variable-option .condition-variable-option-name {
  font-weight: 600;
  white-space: normal;
  line-height: 1.3;
}
md-select-menu md-option.condition-variable-option .condition-variable-option-description {
  font-size: 12px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  white-space: normal;
}

md-select-menu .csb__select-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background-color: var(--c-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
md-select-menu .csb__select-header .csb__select-search {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}
md-select-menu .csb__select-header .csb__select-search:focus {
  border-color: var(--c-brand);
}

md-dialog.action-condition-dialog,
md-dialog.get-file-info-action-dialog,
md-dialog.download-action-dialog {
  width: 900px;
  max-width: 92vw;
}

md-dialog.download-sources-dialog {
  width: 720px;
  max-width: 88vw;
}

/* The versions of an automation, script or template (widgets/timeline/timeline.html): a list, newest first, joined by
   a thin line — an avatar, who created or modified it and when, the one open marked Current. It was a timeline with the
   date in grey pills, white on grey, beside the dots. */
.versions {
  margin: -6px -20px;
  padding: 0;
  list-style: none;
}

.versions__item {
  position: relative;
  /* the line from this avatar's centre to the next one's, behind both, so it runs unbroken whatever is hovered */
}
.versions__item:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 26px;
  bottom: -26px;
  left: 36px;
  width: 1px;
  background-color: var(--c-border);
}

/* A rounded wash set in from the edges on hover, rather than a band across the line */
.versions__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 8px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--c-text);
  text-decoration: none;
  transition: background-color 120ms ease;
}
.versions__row:hover, .versions__row:focus-visible {
  outline: none;
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
  text-decoration: none;
}
.versions__row:hover .versions__open, .versions__row:focus-visible .versions__open {
  opacity: 1;
}
.versions__row:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}

.versions__avatar {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background-color: var(--c-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.is-current .versions__avatar {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--c-brand) 14%, var(--c-surface));
  color: var(--c-brand);
}

.versions__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.versions__who {
  font-size: 13.5px;
  line-height: 1.35;
}
.versions__who strong {
  font-weight: 600;
}

.versions__current {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 9px;
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  font-size: 11px;
  color: var(--c-brand);
  vertical-align: 1px;
}

.versions__when {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.versions__open {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--c-link);
  opacity: 0;
  transition: opacity 120ms ease;
}
.versions__open i.material-icons {
  font-size: 16px;
}
@media (hover: none) {
  .versions__open {
    opacity: 1;
  }
}

.versions-empty {
  margin: 4px 0;
}

md-dialog.app-dialog.job-changes-dialog {
  width: 520px;
}

.password-box-container {
  margin: 10px 0;
}
.password-box-container .password-box-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
}
.password-box-container .password-box-label .required-sign {
  font-size: 10px;
}
.password-box-container .password-box-input {
  font-family: inherit;
}
.password-box-container .password-box-toggle-button .material-icons {
  font-size: 18px;
}

.online-indicator-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.online-indicator-dot.online {
  background-color: var(--c-success);
  border: 1px solid var(--c-ink);
}
.online-indicator-dot.offline {
  border: 1px solid var(--c-ink);
}

/* Hostnames already in use (agentRegistrationRequests/dialogs/hostnameConflict.tmpl.html, 600px in
   appDialogs/_batch-e.scss): what the two choices mean, one choice for all, then a compact row per agent with the
   device already there and its choice; the device picker under a row when several share the name. */
.hostname-conflict-dialog .conflict-legend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: var(--c-surface-subtle);
  font-size: 12.5px;
  line-height: 1.45;
}
.hostname-conflict-dialog .conflict-legend dt {
  font-weight: 500;
  color: var(--c-text);
}
.hostname-conflict-dialog .conflict-legend dd {
  margin: 0;
  color: var(--c-field-text);
}
.hostname-conflict-dialog .conflict-all {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--c-field-text);
}
.hostname-conflict-dialog .conflict-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  list-style: none;
}
.hostname-conflict-dialog .conflict-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 12px;
}
.hostname-conflict-dialog .conflict-row + .hostname-conflict-dialog .conflict-row {
  border-top: 1px solid var(--c-border);
}
.hostname-conflict-dialog .conflict-row__host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 13px;
  color: var(--c-text);
}
.hostname-conflict-dialog .conflict-row__existing {
  font-size: 12.5px;
  color: var(--c-field-text);
}
.hostname-conflict-dialog .conflict-row__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-ink), transparent 76%);
  vertical-align: 1px;
}
.hostname-conflict-dialog .conflict-row__dot.is-online {
  background-color: var(--c-success-deep);
}
.hostname-conflict-dialog .conflict-row md-radio-group.conflict-row__choice {
  flex: none;
}
.hostname-conflict-dialog .conflict-row md-input-container.conflict-row__device {
  grid-column: 2/-1;
  margin: 0;
}
.hostname-conflict-dialog .conflict-row md-input-container.conflict-row__device .select2-container .select2-choice,
.hostname-conflict-dialog .conflict-row md-input-container.conflict-row__device .select2-chosen {
  font-size: 13px;
}
.hostname-conflict-dialog .conflict-free {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--c-success-deep);
}
.hostname-conflict-dialog .conflict-free .material-icons {
  font-size: 16px;
}
.hostname-conflict-dialog .conflict-summary {
  align-self: center;
  padding-left: 8px;
  font-size: 12.5px;
  color: var(--c-field-text);
}

.runtype-config-panel {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface);
  animation: slideDown 0.2s ease;
  /* Gone at once when the run type changes. The slide-in is on the panel itself, so ngAnimate played it on
     the way out too, and for its 0.2s the old panel and the new one were both on the page. */
}
.runtype-config-panel.ng-leave {
  display: none;
}
.runtype-config-panel .runtype-config-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  border-bottom: 1px solid color-mix(in srgb, var(--c-neutral), transparent 50%);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-brand-muted);
}
.runtype-config-panel .runtype-config-header i {
  font-size: 16px;
  color: var(--c-brand);
}
.runtype-config-panel .runtype-config-content {
  padding: 16px;
}
.runtype-config-panel .runtype-config-content md-input-container {
  margin-bottom: 8px;
  padding-top: 0;
}
.runtype-config-panel .runtype-config-content md-input-container .md-errors-spacer {
  display: none;
}

.job-runtype-selection {
  padding: 16px;
}
.job-runtype-selection .runtype-header {
  margin-bottom: 12px;
}
.job-runtype-selection .runtype-header .runtype-title {
  font-size: 16px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  margin: 0;
}
.job-runtype-selection .runtype-options {
  gap: 12px;
  margin-bottom: 24px;
}
.job-runtype-selection .runtype-option-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  border: 2px solid var(--c-neutral);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  background: var(--c-surface);
}
@media (max-width: 599px) {
  .job-runtype-selection .runtype-option-card {
    flex-direction: row;
    padding: 10px 12px;
    text-align: left;
    gap: 12px;
  }
}
.job-runtype-selection .runtype-option-card:hover {
  border-color: var(--c-brand-muted);
  background: var(--c-surface-sunken);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 91.6%);
}
.job-runtype-selection .runtype-option-card--active {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-brand), transparent 85%);
}
.job-runtype-selection .runtype-option-card--active:hover {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand), transparent 94%);
}
.job-runtype-selection .runtype-option-card--active .runtype-option-icon i {
  color: var(--c-brand);
}
.job-runtype-selection .runtype-option-card--active .runtype-option-label {
  color: var(--c-brand);
}
.job-runtype-selection .runtype-option-card .runtype-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
@media (max-width: 599px) {
  .job-runtype-selection .runtype-option-card .runtype-option-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin-bottom: 0;
  }
}
.job-runtype-selection .runtype-option-card .runtype-option-icon i {
  font-size: 24px;
  color: var(--c-brand-muted);
  transition: color 0.2s ease;
}
@media (max-width: 599px) {
  .job-runtype-selection .runtype-option-card .runtype-option-icon i {
    font-size: 20px;
  }
}
.job-runtype-selection .runtype-option-card .runtype-option-label {
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  margin-bottom: 4px;
  transition: color 0.2s ease;
}
.job-runtype-selection .runtype-option-card .runtype-option-description {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  line-height: 1.4;
}
@media (max-width: 599px) {
  .job-runtype-selection .runtype-option-card .runtype-option-description {
    display: none;
  }
}
.job-runtype-selection .runtype-error-message {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-danger);
  font-size: 12px;
  margin-top: 4px;
}
.job-runtype-selection .runtype-error-message i {
  font-size: 16px;
}

.runtime-selection-wizard-page .runtime-selection-header {
  margin-bottom: 20px;
}
.runtime-selection-wizard-page .runtime-selection-header .runtime-selection-title {
  font-size: 16px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  margin: 0;
}
.runtime-selection-wizard-page .runtime-selection-options {
  gap: 12px;
  margin-bottom: 24px;
}
.runtime-selection-wizard-page .runtime-option-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  border: 2px solid var(--c-neutral);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  background: var(--c-surface);
}
.runtime-selection-wizard-page .runtime-option-card:hover {
  border-color: var(--c-brand-muted);
  background: var(--c-surface-sunken);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 91.6%);
}
.runtime-selection-wizard-page .runtime-option-card--active {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand), transparent 96%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-brand), transparent 85%);
}
.runtime-selection-wizard-page .runtime-option-card--active:hover {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand), transparent 94%);
}
.runtime-selection-wizard-page .runtime-option-card--active .runtime-option-icon i {
  color: var(--c-brand);
}
.runtime-selection-wizard-page .runtime-option-card--active .runtime-option-label {
  color: var(--c-brand);
}
.runtime-selection-wizard-page .runtime-option-card .runtime-option-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.runtime-selection-wizard-page .runtime-option-card .runtime-option-icon i {
  font-size: 28px;
  color: var(--c-brand-muted);
  transition: color 0.2s ease;
}
.runtime-selection-wizard-page .runtime-option-card .runtime-option-label {
  font-size: 15px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  margin-bottom: 4px;
  transition: color 0.2s ease;
}
.runtime-selection-wizard-page .runtime-option-card .runtime-option-description {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  line-height: 1.4;
}
.runtime-selection-wizard-page .runtime-schedule-panel {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface);
  animation: slideDown 0.2s ease;
}
.runtime-selection-wizard-page .runtime-schedule-panel.ng-leave {
  display: none;
}
.runtime-selection-wizard-page .runtime-schedule-panel .runtime-schedule-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--c-surface-sunken);
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-brand-muted);
}
.runtime-selection-wizard-page .runtime-schedule-panel .runtime-schedule-header i {
  font-size: 20px;
  color: var(--c-brand);
}
.runtime-selection-wizard-page .runtime-schedule-panel .runtime-schedule-content {
  padding: 16px;
}
.runtime-selection-wizard-page .runtime-schedule-panel .runtime-schedule-content md-input-container {
  padding-top: 0;
}
.runtime-selection-wizard-page .runtime-schedule-panel .runtime-schedule-content md-input-container .md-errors-spacer {
  display: none;
}
.runtime-selection-wizard-page .runtime-schedule-panel .runtime-schedule-content .runtime-schedule-input {
  width: 100%;
}
.runtime-selection-wizard-page .runtype-radio-group {
  margin-bottom: 0;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.runtime-tab-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1000px;
  /* The page's inset and nothing more, as the Task Editor tab: the schedule's own 16px padding on top of it
     put this tab's content 39px from the edge, 16px further in than the other tab's. */
}
.runtime-tab-grid__schedule {
  min-width: 0;
}
.runtime-tab-grid__schedule .job-runtype-selection {
  padding: 16px 0 0;
}
.runtime-tab-grid__timezone {
  min-width: 0;
  padding: 16px 0;
}

/* Run once: when it starts, and how long it may run (runtime-field) — side by side, stacked on a phone. */
.runtype-schedule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .runtype-schedule {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}
.runtype-schedule .runtype-schedule__start {
  width: 100%;
  margin: 0;
}
.runtype-schedule .runtype-error-message {
  margin-top: 8px;
}

/* The labels over Start and Max runtime sit above their fields, outside the content box (Material's, and ours
   raised to match), so the panel's 16px ran from its header line to the fields, not to their labels. The
   labels' 19px on top of it. */
.runtype-config-panel .runtype-config-content.runtype-schedule {
  padding-top: 35px;
}

search-bar {
  display: block;
  min-width: 0;
}

/* A filled field, not an outlined one. The 1.5px brand outline drew as much attention as the buttons it
   sits between, which is the wrong weight for something you only use when you already know what you are
   looking for. It rests as a soft grey pill and only takes an outline once you are typing in it — the
   border is there at rest too, transparent, so gaining one does not move anything. */
.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--c-surface-subtle);
  padding: 4px 14px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-bar:hover {
  background: var(--c-surface-muted);
}
.search-bar:focus-within {
  background: var(--c-surface);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
}
.search-bar .search-bar__icon {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  font-size: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.search-bar input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  background: transparent;
  min-width: 0;
  line-height: 20px;
  padding: 0;
  margin: 0;
  /* Stated rather than inherited. The field draws its own surface, so its text cannot depend on what
     it happens to sit inside — dropped into an md-toolbar it inherited that toolbar's white and
     disappeared against the field. */
  color: var(--c-text);
}
.search-bar input::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.search-bar .search-bar__clear {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.search-bar .search-bar__clear:hover {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.menu-bar-custom-control .search-bar {
  margin-top: 0;
  height: 36px;
  font-size: 13px;
}

/* A label over a date field (<date-picker>). The field is a plain date input, so its calendar button and
   calendar are the ones every date field has (form.scss, "Date fields"); this is the box. It was Angular
   Material's md-datepicker with its parts hidden and its calendar pane restyled and repositioned. */
.date-picker {
  display: inline-block;
  min-width: 260px;
  /* 42px, the height of the preset pills beside it in a date range. */
}
.date-picker__label {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 12px;
  opacity: 0.8;
}
.date-picker__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-family: inherit;
  font-size: 14px;
  color: var(--c-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.date-picker__input:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 74%);
}
.date-picker__input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
  outline: none;
}
.date-picker__input.ng-invalid.ng-touched {
  border-color: var(--c-danger);
}
.date-picker__input:disabled {
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: default;
}

.patchmanagement-date-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  /* the toggle level with the date field, not with its label */
  align-items: flex-end;
}
@media (max-width: 768px) {
  .patchmanagement-date-row {
    flex-direction: column;
    gap: 0;
  }
}
@media (max-width: 768px) {
  .patchmanagement-date-row {
    align-items: flex-start;
  }
}
.patchmanagement-date-row__item:last-child {
  margin-right: 0;
}
.patchmanagement-date-row md-checkbox.option-toggle {
  margin-bottom: 6px;
}

.patchmanagement__tab-content {
  margin-top: 16px;
}

/* ── The period (<date-range>) ───────────────────────────────────────────────────────────────────────────────
   One field showing from – to and how long that is, and one calendar under it: the presets down its left side,
   the period marked on the month. It was two date fields and a row of preset pills.
 *
 * The popover is moved to the end of <body> (dateRange.directive.js), so it is styled at the top level, not
 * under .date-range. Joined to the field as a select's list is (select2.scss, "The open list"); the calendar
 * inside is the one every date field has (form.scss, "The calendar"), without its own frame. */
.date-range {
  display: inline-flex;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
}
@media (max-width: 768px) {
  .date-range {
    width: 100%;
  }
}

.date-range__label {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.8;
}

/* 42px, the height the report rows were laid out round (the checkbox beside it lines up with this). */
.date-range__field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-family: inherit;
  font-size: 14px;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.date-range__field:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 74%);
}
.date-range__field:focus-visible {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
  outline: none;
}
.date-range__field i.material-icons {
  font-size: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.date-range__field:disabled {
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: default;
}

.date-range__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.date-range__length {
  flex: none;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* Open: the brand edge, squared off where the popover meets it. */
.date-range.is-open .date-range__field {
  border-color: var(--c-brand);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.date-range.is-open .date-range__field i.material-icons {
  color: var(--c-brand);
}
.date-range.is-open .date-range__field.is-above {
  border-radius: 0 0 6px 6px;
}

.date-range__popover {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  border: 1px solid var(--c-brand);
  border-top-color: var(--c-border);
  border-radius: 0 0 6px 6px;
  background-color: var(--c-surface-raised);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
  overflow: hidden;
}
.date-range__popover.ng-hide {
  display: none;
}
.date-range__popover.is-wider {
  border-top-right-radius: 6px;
}
.date-range__popover.is-above {
  border-top-color: var(--c-brand);
  border-bottom-color: var(--c-border);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
.date-range__popover.is-above.is-wider {
  border-bottom-right-radius: 6px;
}
@media (max-width: 768px) {
  .date-range__popover {
    grid-template-columns: minmax(0, 1fr);
  }
}

.date-range__presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-right: 1px solid var(--c-border);
}
@media (max-width: 768px) {
  .date-range__presets {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }
}

.date-range__preset {
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
  /* Lit only while the period still is that window — picking days by hand puts it out. */
}
.date-range__preset:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
  color: var(--c-text);
}
.date-range__preset.is-active {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-weight: 500;
}
.date-range__preset:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}

/* ── The date-and-time field ([date-time-field]) ─────────────────────────────────────────────────────────────
   A text field holding a date and time, a day or a time of day, its button at the end, and what the button opens:
   the app's calendar (form.scss, "The calendar") with the time under it as hours and minutes, each with a step up
   and down, and Now, Clear, Done. It was ng-material-datetimepicker: the icon outside the field, the value in the
   system font, and a dialog over the page with a clock face. dateTimeField.directive.js. */
input.date-time-field {
  padding-right: 34px !important;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  /* Open, with the popover joined underneath: the brand edge, squared off where they meet. */
}
input.date-time-field.is-date-time-open {
  border-color: var(--c-brand) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
input.date-time-field.is-date-time-open.is-date-time-above {
  border-radius: 0 0 6px 6px !important;
}
input.date-time-field:disabled + .date-time-field__button, input.date-time-field[readonly] + .date-time-field__button {
  display: none;
}

/* Placed over the field's right end by the directive (it knows where the input sits in its container). */
.date-time-field__button {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
  transition: color 0.12s ease;
}
.date-time-field__button:hover, .is-date-time-open + .date-time-field__button {
  color: var(--c-brand);
}
.date-time-field__button i.material-icons {
  font-size: 18px;
}

.date-time-popover {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-raised);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%), 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 90%);
  font-size: 13.5px;
  color: var(--c-text);
  overflow: hidden;
}
.date-time-popover[hidden] {
  display: none;
}
.date-time-popover.is-joined {
  border-color: var(--c-brand);
  border-top-color: var(--c-border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
.date-time-popover.is-joined.is-above {
  border-top-color: var(--c-brand);
  border-bottom-color: var(--c-border);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
}

.date-time-popover__time {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
}
.date-time-popover__calendar + .date-time-popover__time {
  border-top: 1px solid var(--c-border);
}
.is-time-only .date-time-popover__time {
  justify-content: center;
  padding: 12px 14px 10px;
}

.date-time-popover__time-label {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.is-time-only .date-time-popover__time-label {
  display: none;
}

.date-time-popover__colon {
  font-size: 18px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.date-time-popover__buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-top: 1px solid var(--c-border);
}

.date-time-popover__spacer {
  flex: 1 1 auto;
}

.date-time-popover__button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-brand);
  cursor: pointer;
}
.date-time-popover__button:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.date-time-popover__button.is-primary {
  font-weight: 500;
}

/* ── Steppers ────────────────────────────────────────────────────────────────────────────────────────────────
   A number typed or stepped up and down: the time's hours and minutes (up above, down below), and the runtime's
   (.is-compact: the two steps stacked at the end of a field). The arrow keys step too. */
.time-stepper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.time-stepper__value {
  box-sizing: border-box;
  width: 46px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c-text);
}
.time-stepper__value:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
  outline: none;
}

.time-stepper__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.time-stepper__button:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
  color: var(--c-brand);
}
.time-stepper__button:disabled {
  opacity: 0.4;
  cursor: default;
}
.time-stepper__button i.material-icons {
  font-size: 20px;
}

.time-stepper.is-compact {
  flex-direction: row;
  align-items: stretch;
  box-sizing: border-box;
  height: 30px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}
.time-stepper.is-compact:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
}
.time-stepper.is-compact .time-stepper__value {
  width: 40px;
  height: auto;
  border: 0;
  border-radius: 6px 0 0 6px;
  background: none;
  font-size: 14px;
  box-shadow: none;
}
.time-stepper.is-compact .time-stepper__buttons {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--c-border);
}
.time-stepper.is-compact .time-stepper__button {
  flex: 1 1 0;
  width: 22px;
  height: auto;
  border-radius: 0;
}
.time-stepper.is-compact .time-stepper__button i.material-icons {
  font-size: 16px;
}

/* ── The runtime (<runtime-field>) ───────────────────────────────────────────────────────────────────────────
   How long an automation may run: the usual lengths, or hours and minutes stepped or typed, and by when that is.
   It was an end time (the job's schedule, the daily and weekly cron) or a slider of whole hours (custom cron).
   runtimeField.directive.js; the steppers are dateTimeField.scss's. */
.runtime-field__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.runtime-field__presets {
  display: flex;
  gap: 6px;
}

/* 30px: the height of the app's form fields (md-input-container), which it sits beside. */
.runtime-field__preset {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.runtime-field__preset:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 74%);
  color: var(--c-text);
}
.runtime-field__preset.is-active {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
  font-weight: 500;
}
.runtime-field__preset:disabled {
  opacity: 0.5;
  cursor: default;
}

.runtime-field__custom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.runtime-field__unit {
  margin-right: 4px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.runtime-field__summary {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

/* A label over a control that is not in an md-input-container (the runtime), set as those labels are
   (customMaterialDesign.scss) — their 14px at the .75 scale Material draws them at. */
.runtype-schedule__label,
.cron-runtime__label {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}

/* Material draws a field's label above its box, outside md-input-container, so a label of our own lines up with
   it — and the controls with the box — only raised by the label and its gap. */
.runtype-schedule__runtime,
.cron-runtime:not(.is-custom) {
  margin-top: -19px;
}

/* ── The custom schedule (<cron-builder>) ────────────────────────────────────────────────────────────────────
   Starting points; a row each for minute, hour, day and month — a mode, and chips or choices for its values;
   and what it comes to: in words, the expression to read or type, and the next five runs. It was six tabs of
   radio buttons and checkbox grids with a Validate button each. cronBuilder.directive.js. */
.cron-builder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.cron-builder.is-disabled .cron-builder__rows,
.cron-builder.is-disabled .cron-builder__presets {
  opacity: 0.6;
  pointer-events: none;
}

.cron-builder__caption,
.cron-builder__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-field-text);
}

.cron-builder__presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cron-builder__presets .cron-builder__caption {
  margin-right: 4px;
}

.cron-builder__preset {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background-color: var(--c-surface);
  font-family: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.cron-builder__preset:hover {
  border-color: color-mix(in srgb, var(--c-ink), transparent 74%);
  color: var(--c-text);
}
.cron-builder__preset.is-on {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
  color: var(--c-brand);
}

.cron-builder__rows {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  /* An expression the rows can't show: they stay, dimmed and out of reach, under a note saying so. */
}
.cron-builder__rows.is-set-aside .cron-builder__row {
  opacity: 0.4;
  pointer-events: none;
}

.cron-builder__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 12px 16px;
}
.cron-builder__row + .cron-builder__row {
  border-top: 1px solid var(--c-border);
}
.cron-builder__row .cron-builder__label {
  padding-top: 7px;
}
@media (max-width: 768px) {
  .cron-builder__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cron-builder__body {
  min-width: 0;
}

/* The mode: a segmented switch, as the filter's all/any. */
.cron-builder__seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.cron-builder__seg button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--c-border);
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.cron-builder__seg button:last-child {
  border-right: 0;
}
.cron-builder__seg button:hover:not(.is-on) {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
  color: var(--c-text);
}
.cron-builder__seg button.is-on {
  background-color: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  font-weight: 500;
}

.cron-builder__values {
  margin-top: 10px;
}
.cron-builder__values.is-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.cron-builder__hint {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.cron-builder__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 4px;
  max-width: 560px;
}
.cron-builder__chips.is-minutes {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cron-builder__chips.is-hours {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cron-builder__chips.is-days {
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  max-width: 380px;
}
.cron-builder__chips.is-names {
  display: flex;
  flex-wrap: wrap;
}

.cron-builder__chip {
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.cron-builder__chip.is-wide {
  min-width: 46px;
}
.cron-builder__chip:hover:not(.is-on) {
  border-color: color-mix(in srgb, var(--c-ink), transparent 74%);
  color: var(--c-text);
}
.cron-builder__chip.is-on {
  border-color: var(--c-brand);
  background-color: var(--c-brand);
  color: var(--c-on-fill);
  font-weight: 500;
}

/* A choice in a sentence ("every 15 minutes, from minute 00"): the 28px of the switch beside it. */
md-select.cron-builder__select {
  margin: 0;
}
md-select.cron-builder__select .md-select-value {
  min-width: 56px;
  min-height: 28px;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--c-border) !important;
  border-radius: 6px;
  background-color: var(--c-surface);
  font-size: 13px;
  color: var(--c-text);
}
md-select.cron-builder__select.is-wide .md-select-value {
  min-width: 220px;
}
md-select.cron-builder__select:not([disabled]):focus .md-select-value {
  border-color: var(--c-brand) !important;
}

.cron-builder__full-week {
  display: flex;
}

.cron-builder__aside {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, 100% - 32px);
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-raised);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
  font-size: 13px;
  color: var(--c-text);
  transform: translate(-50%, -50%);
}
.cron-builder__aside i.material-icons {
  font-size: 20px;
  color: var(--c-brand);
}

.cron-builder__result {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px 24px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
}
@media (max-width: 768px) {
  .cron-builder__result {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cron-builder__description {
  margin: 6px 0 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
}

.cron-builder__expression {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.cron-builder__expression input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--c-text);
}
.cron-builder__expression input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand), transparent 88%);
  outline: none;
}
.cron-builder__expression input.is-invalid {
  border-color: var(--c-danger);
}

.cron-builder__state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.cron-builder__state i.material-icons {
  font-size: 16px;
}
.cron-builder__state.is-ok {
  color: var(--c-success);
}
.cron-builder__state.is-error {
  color: var(--c-danger);
}

.cron-builder__error {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--c-danger);
}

.cron-builder__format {
  margin: 8px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.cron-builder__next ol {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.8;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.cron-builder__none {
  margin: 6px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* ── Examples ─────────────────────────────────────────────────────────────────────────────────────────────────
   A list to take an expression from with Apply, its meaning beside it; the one in use says so. Folded until
   asked for. */
.cron-builder__examples {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  overflow: hidden;
}

.cron-builder__examples-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}
.cron-builder__examples-toggle:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
}
.cron-builder__examples-toggle > i.material-icons:first-child {
  font-size: 18px;
  color: var(--c-brand);
}
.cron-builder__examples-toggle[aria-expanded=true] .cron-builder__examples-chevron {
  transform: rotate(180deg);
}

.cron-builder__examples-count {
  padding: 0 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 92%);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.cron-builder__examples-chevron {
  margin-left: auto;
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  transition: transform 0.15s ease;
}

.cron-builder__example-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
  list-style: none;
}

.cron-builder__example {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  min-height: 42px;
  padding: 6px 12px 6px 16px;
}
.cron-builder__example + .cron-builder__example {
  border-top: 1px solid var(--c-border);
}
.cron-builder__example:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 95%);
}
.cron-builder__example.is-current {
  background-color: color-mix(in srgb, var(--c-brand), transparent 94%);
}
@media (max-width: 768px) {
  .cron-builder__example {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cron-builder__example .cron-builder__example-meaning {
    grid-column: 1;
  }
}

.cron-builder__example-expression {
  padding: 0;
  background: none;
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--c-text);
  white-space: nowrap;
}

.cron-builder__example-meaning {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.cron-builder__example-apply {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-brand);
  cursor: pointer;
}
.cron-builder__example-apply:hover:not(:disabled) {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}

.cron-builder__example-current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-brand);
}
.cron-builder__example-current i.material-icons {
  font-size: 16px;
}

/* ── A pattern field (<pattern-field>) ───────────────────────────────────────────────────────────────────────
   A text field for a wildcard pattern, the inventory's values for it in a list joined underneath, and the
   pattern in words under that. patternField.directive.js. */
.pattern-field {
  position: relative;
  display: block;
  /* No side margin (Material's md-auto-horizontal-margin gives it one): the list below is as wide as the
     field, edge on edge. */
  /* Open: the field's brand edge, squared off where the list joins it (select2.scss, "The open list"). */
  /* !important over Material's focused and theme rules, which colour a focused field's edge their own way:
     a grey field on a brand list was the seam. */
  /* Material fades a field's edge over 0.4s; the list appears at once, so for that long a grey field sat on a
     brand list. The edge changes with it. */
}
.pattern-field .pattern-field__container,
.pattern-field .pattern-field__container.md-auto-horizontal-margin {
  display: block;
  margin: 22px 0 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.pattern-field .pattern-field__container .md-errors-spacer,
.pattern-field .pattern-field__container.md-auto-horizontal-margin .md-errors-spacer {
  display: none;
}
.pattern-field.is-open md-input-container.pattern-field__container .md-input {
  border-top-color: var(--c-brand) !important;
  border-left-color: var(--c-brand) !important;
  border-right-color: var(--c-brand) !important;
  border-bottom-color: var(--c-border) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pattern-field md-input-container.pattern-field__container .md-input {
  transition: none;
}

.pattern-field__list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  max-height: 300px;
  margin-top: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--c-brand);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background-color: var(--c-surface-raised);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c-shadow), transparent 86%);
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.pattern-field__list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.pattern-field__list::-webkit-scrollbar-track {
  background: transparent;
}
.pattern-field__list::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.pattern-field__list::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.pattern-field__list::-webkit-scrollbar-corner {
  background: transparent;
}

.pattern-field__option {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.pattern-field__option b {
  font-weight: 600;
  color: var(--c-brand);
}
.pattern-field__option:hover, .pattern-field__option.is-active {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.pattern-field__option.is-refreshing {
  opacity: 0.6;
}

.pattern-field__loading,
.pattern-field__none {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.pattern-field__spinner {
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--c-brand), transparent 78%);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: infinite-table-spin 0.8s linear infinite;
}

.pattern-field__foot {
  margin-top: 4px;
  padding: 6px 10px 2px;
  border-top: 1px solid var(--c-border);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

/* The pattern in words, under the field. */
.pattern-field__how {
  min-height: 16px;
  margin: 2px 0 0 2px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.pattern-field__how b {
  font-weight: 500;
  color: var(--c-brand);
}

/* The checkbox, everywhere: 143 of them across 75 templates.
 *
 * It was a 2px border at 54% black with a 2px corner radius, next to fields that are a 1px $border
 * hairline and 6–10px round — the heaviest line on any row it appeared in.
 *
 * On specificity, the same story as the disabled field and the field label: Material generates its theme
 * CSS at runtime and injects it into <head> after style.css, so an override only lands if it is strictly
 * more specific. The rules to beat are
 *
 *     md-checkbox.md-default-theme .md-icon                  (0,2,1)
 *     md-checkbox.md-default-theme.md-checked .md-icon       (0,3,1)
 *     md-checkbox.md-default-theme.md-checked .md-icon:after (0,3,2)
 *
 * Repeating the state class and naming the element takes each rule below past its counterpart without
 * another !important. The old override in customMaterialDesign.scss sat at (0,2,1) — a tie — which is why
 * every checked box in the product has been Material's stock #FFC169 rather than the XEOX accent it asked
 * for. This paints them $color-1 instead: a checkbox reports a state, and the accent is what a primary
 * action looks like here.
 */
md-checkbox {
  /* Unchecked. $color-5 rather than 54% black, and 1.5px rather than 2; filled like a field rather than
     hollow, which on a dark row left an outline that was easy to lose. */
  /* Still answers the pointer, without being the loudest thing on the row at rest: the edge and a tint. */
  /* The label 10px from the box rather than Material's 15. */
  /* The tick, drawn rather than swapped in: it scales up from 60% as the box fills. */
  /* Not on "some of them": Material centres its bar with a transform, which this one replaced — the bar came out
     as a small slanted stroke in the box's corner. */
  /* "Some of them" — the columns dialog and every select-all heading. Same fill as checked, a bar rather
     than a tick, so it reads as related to "all" rather than as a third unrelated thing. */
  /* What the pills, chips and preset buttons already do. */
  /* Material paints a tinted disc behind a focused checkbox; the ring says it better. */
}
md-checkbox .md-container {
  /* Material's 40px touch target stays; only the 18px box it holds is restyled. */
  border-radius: 5px;
}
md-checkbox div.md-icon {
  border-radius: 5px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
md-checkbox:not(.md-checked):not(.md-indeterminate) div.md-icon {
  border: 1.5px solid var(--c-neutral);
  background-color: var(--c-surface);
}
md-checkbox:not([disabled]):hover div.md-icon {
  border-color: var(--c-brand);
}
md-checkbox:not([disabled]):not(.md-checked):not(.md-indeterminate):hover div.md-icon {
  background-color: color-mix(in srgb, var(--c-brand), transparent 86%);
}
md-checkbox div.md-label {
  margin-left: 31px;
}
md-checkbox.md-checked.md-checked div.md-icon, md-checkbox.md-indeterminate.md-indeterminate div.md-icon {
  border: 1.5px solid var(--c-brand);
  background-color: var(--c-brand);
}
md-checkbox.md-checked.md-checked div.md-icon::after {
  border-color: var(--c-on-fill);
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.3, 1);
}
md-checkbox:not(.md-checked):not(.md-indeterminate) div.md-icon::after {
  transform: rotate(45deg) scale(0.6);
}
md-checkbox.md-indeterminate.md-indeterminate div.md-icon::after {
  background-color: var(--c-on-fill);
}
md-checkbox[disabled][disabled] div.md-icon {
  border-color: var(--c-border);
  background-color: var(--c-surface-subtle);
}
md-checkbox[disabled][disabled].md-checked div.md-icon, md-checkbox[disabled][disabled].md-indeterminate div.md-icon {
  border-color: var(--c-neutral);
  background-color: var(--c-neutral);
}
md-checkbox[disabled][disabled] .md-label {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
md-checkbox.md-focused:not([disabled]) div.md-icon, md-checkbox:focus-visible div.md-icon {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
md-checkbox.md-focused .md-container::before {
  background-color: transparent;
}

/* In a table, a tree or a list — anything marked .md-dense — and in an option toggle, the box is 16px: the rows are 36–40px, and an
   18px square was the tallest thing in them. Forms keep 18. The container shrinks with it, so a box without
   a label is the size of its square. */
table md-checkbox .md-container,
md-checkbox.md-dense .md-container,
md-checkbox.option-toggle .md-container {
  width: 16px;
  height: 16px;
}
table md-checkbox div.md-icon,
md-checkbox.md-dense div.md-icon,
md-checkbox.option-toggle div.md-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
table md-checkbox.md-checked.md-checked div.md-icon::after,
md-checkbox.md-dense.md-checked.md-checked div.md-icon::after,
md-checkbox.option-toggle.md-checked.md-checked div.md-icon::after {
  left: 3.5px;
  top: 0.5px;
  width: 5.5px;
  height: 10px;
}
table md-checkbox.md-indeterminate.md-indeterminate div.md-icon::after,
md-checkbox.md-dense.md-indeterminate.md-indeterminate div.md-icon::after,
md-checkbox.option-toggle.md-indeterminate.md-indeterminate div.md-icon::after {
  width: 9px;
}

@media (prefers-reduced-motion: reduce) {
  md-checkbox div.md-icon,
md-checkbox div.md-icon::after {
    transition: none;
  }
  md-checkbox:not(.md-checked):not(.md-indeterminate) div.md-icon::after {
    transform: rotate(45deg);
  }
}
/* One on/off option standing on its own — "Skip offline devices at startup", "Installed by XEOX", "Only not
 * in XEOX": <md-checkbox class="option-toggle" ng-model="…">Label</md-checkbox>.
 *
 * A checkbox still (the same box, keyboard, ng-model and ng-change), framed as a button so it reads as a
 * setting to switch rather than a loose box beside some text. Lists of options, table rows and forms keep the
 * plain checkbox (checkbox.scss). It was a <button> of the automation editor's own (job-details-toggle) with
 * a round radio-button icon, which made an on/off option look like one of several to pick from.
 */
md-checkbox.option-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0 12px 0 9px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background-color: var(--c-surface);
  font-size: 13px;
  line-height: 1;
  color: var(--c-field-text);
  white-space: nowrap;
  vertical-align: middle;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
  /* the box in the row, not laid over it */
  /* the ring on the button rather than on the box inside it */
}
md-checkbox.option-toggle .md-container {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  margin: 0;
  transform: none;
}
md-checkbox.option-toggle .md-ripple-container {
  display: none;
}
md-checkbox.option-toggle div.md-label {
  margin: 0;
  line-height: 1;
  user-select: none;
}
md-checkbox.option-toggle:not([disabled]):hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
md-checkbox.option-toggle.md-checked {
  border-color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
  color: var(--c-brand);
}
md-checkbox.option-toggle.md-focused:not([disabled]) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 70%);
}
md-checkbox.option-toggle.md-focused:not([disabled]) div.md-icon {
  outline: none;
}
md-checkbox.option-toggle[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* Help (DocumentationService, the top bar's help menu).
 *
 * HelpKit's own launcher is hidden: a floating button fixed to the bottom-right corner of every page, over
 * whatever was there — the last table row, a scrollbar, the footer's buttons, for which the footer carried
 * 84px of padding while it was showing. The help menu in the top bar opens the same panel.
 */
#helpkit-launcherButton--xeox,
.helpkit-launcherButton {
  display: none !important;
}

.help-menu {
  min-width: 260px;
}
.help-menu .help-menu-external {
  margin-left: 8px;
  font-size: 14px !important;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  vertical-align: -2px;
}
.help-menu .help-menu-hint {
  margin-top: 4px;
  padding: 8px 16px 6px;
  border-top: 1px solid var(--c-border);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.help-menu .help-menu-hint kbd {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  /* the browser's and Bootstrap's key cap is a dark block */
  background-color: var(--c-surface-subtle);
  box-shadow: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: var(--c-text);
}

/* TCP ports as chips (widgets/portInput). The box is the subnet page's 30px field, grown by a row of chips. */
port-input {
  display: block;
}

.port-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface);
  cursor: text;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.port-input.is-focused {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand), transparent 84%);
}
.port-input.is-invalid {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-danger), transparent 86%);
}

.port-input__field {
  flex: 1 0 90px;
  min-width: 90px;
  height: 24px;
  padding: 0 4px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--c-text);
}
.port-input__field::placeholder {
  font-family: "Open Sans", sans-serif;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
@media (pointer: coarse) {
  .port-input__field {
    font-size: 16px;
  }
}

.port-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 3px 0 9px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background-color: var(--c-surface-subtle);
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--c-text);
}
.port-chip.is-unseen {
  border-style: dashed;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.port-chip__name {
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

.port-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.port-chip__remove i.material-icons {
  font-size: 13px;
  line-height: 13px;
}
.port-chip__remove:hover, .port-chip__remove:focus-visible {
  background-color: color-mix(in srgb, var(--c-danger), transparent 88%);
  color: var(--c-danger);
  outline: none;
}

.port-input__under {
  min-height: 16px;
  margin-top: 4px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.port-input__under .is-error {
  color: var(--c-danger);
}

.port-input__common {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.port-input__common.is-scan {
  margin-top: 8px;
}

.port-input__caption {
  margin-right: 2px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.port-quick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 9px 0 6px;
  border: 1px dashed color-mix(in srgb, var(--c-ink), transparent 74%);
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  cursor: pointer;
}
.port-quick i.material-icons {
  font-size: 14px;
  line-height: 14px;
}
.port-quick:hover:not([disabled]) {
  border-color: var(--c-brand);
  border-style: solid;
  color: var(--c-brand);
}
.port-quick[disabled] {
  border-style: solid;
  border-color: var(--c-border);
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: default;
}
.port-quick.is-warning {
  border-color: color-mix(in srgb, var(--c-warning), transparent 40%);
  color: var(--c-warning-ink);
}

/* The tag, everywhere one is drawn.
 *
 * There was no tag component. The base was Bootstrap's .label, borrowed and then overridden twice — in
 * .hardware-list .hardware-list-item and in .system-tags-list .label — while the editable ones came from
 * select2 and the beta/expired markers from labels.scss. Four shapes for one idea, and in the General
 * panel two of them sat one above the other: same grey fill, then 16px/400/24px against 12px/600/18px.
 *
 * One chip now: light, hairline-bordered, the same surface and ink the fields, cards and tables use,
 * rather than a solid mid-grey block with white text. 24px so it sits in a table row without stretching it.
 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-surface-subtle);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-field-text);
  white-space: nowrap;
  vertical-align: middle;
  list-style: none;
  /* Machine-written, not chosen: monospaced and unfilled, the treatment the app gives every other value
     it did not ask a person for. A system tag cannot be added or removed and nothing used to say so. */
  /* Its own hover target, and on the right — the close belongs to the tag before it, not the one after.
     select2 put a 14px glyph on a 5px inset to the left of the word. */
  /* A cell that would otherwise wrap a table row onto three lines. */
  /* For the few tags that carry meaning rather than just naming something. */
}
.tag.tag--system {
  background-color: transparent;
  font-family: "Roboto Mono", ui-monospace, "Courier New", monospace;
  font-size: 11.5px;
  font-weight: 400;
}
.tag.tag--removable {
  padding-right: 5px;
}
.tag .tag__remove {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.tag .tag__remove:hover {
  background-color: var(--c-border);
  color: var(--c-text);
}
.tag.tag--add {
  border-style: dashed;
  background-color: transparent;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  cursor: pointer;
}
.tag.tag--add:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.tag.tag--more {
  border-color: transparent;
  background-color: transparent;
  padding-left: 2px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.tag.tag--brand {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.tag.tag--accent {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background-color: color-mix(in srgb, var(--c-accent), transparent 88%);
}
.tag.tag--danger {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
}

/* Wherever a run of them is listed. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* <file-browser> widget - the storage provider file picker.
   Styled as a self contained file manager panel: toolbar, scrollable listing with a sticky
   header (or a tile grid) and a status bar, so it reads as one element inside a dialog or a
   detail page instead of as a loose table. */
/* The panel adapts to its own width, not to the viewport: it is embedded in a dialog that is
   capped at 80% of the screen and in page columns, so the same window width can leave it with
   very different space. Hence container queries (see the tiers at the bottom of this file)
   instead of the usual media queries. */
.file-browser {
  container-type: inline-size;
  container-name: fileBrowser;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background-color: var(--c-surface);
  overflow: hidden;
  /* the panel itself is focusable for keyboard navigation - show that it has the keys */
  /* ------------------------------------------------------------------ toolbar */
  /* filter box - a compact inline field rather than an md-input-container, which would add
     its own label/error spacing to the toolbar */
  /* ------------------------------------------------------------------ progress

     Listings load without the global page loader, so the panel reports progress itself. Both
     the bar and the dimming are delayed by 150ms (`both` keeps them invisible until then), so
     a fast directory switch shows nothing at all instead of a flash. */
  /* ------------------------------------------------------------------ listing */
  /* fixed height so the surrounding dialog does not jump between a folder holding two files
     and one holding fifty - but never more than a share of the viewport, otherwise the panel
     alone fills a short (landscape phone) screen */
  /* Compact sort control that stands in for the column headers whenever they are not on
     screen: in the tile view (which has no headers at all) and in the narrow tiers below. */
  /* shared row/tile states */
  /* ------------------------------------------------------------------ grid view */
  /* ------------------------------------------------------------------ empty / loading */
  /* ------------------------------------------------------------------ status bar */
  /* read only: the listing is still browsable, only picking is locked */
  /* ------------------------------------------------------------------ narrow panels

     Columns are dropped in the order a file manager can most afford to lose them: the type
     (already encoded in the icon) first, then size and date - which reappear as a meta line
     under the file name so no information is actually lost. */
  /* tier 1 - no room for the type column */
  /* tier 2 - name + selection only, meta folded under the name, sorting moves into a menu */
  /* tier 3 - the filter gets a row of its own below the navigation */
}
.file-browser:focus {
  outline: none;
}
.file-browser:focus-visible {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 1px var(--c-brand);
}
.file-browser .file-browser-toolbar {
  padding: 4px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background-color: color-mix(in srgb, var(--c-ink), transparent 90%);
  /* narrow panels put the filter on a second row - see the container queries below */
  flex-wrap: wrap;
}
.file-browser .file-browser-toolbar .file-browser-toolbar-button {
  margin: 0;
  min-width: 32px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.file-browser .file-browser-toolbar .file-browser-toolbar-button .material-icons {
  font-size: 19px;
}
.file-browser .file-browser-toolbar .file-browser-toolbar-button:hover:not([disabled]) {
  color: var(--c-brand);
}
.file-browser .file-browser-breadcrumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0 4px;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 13px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
}
.file-browser .file-browser-breadcrumbs::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.file-browser .file-browser-breadcrumbs::-webkit-scrollbar-track {
  background: transparent;
}
.file-browser .file-browser-breadcrumbs::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.file-browser .file-browser-breadcrumbs::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.file-browser .file-browser-breadcrumbs::-webkit-scrollbar-corner {
  background: transparent;
}
.file-browser .file-browser-breadcrumbs .file-browser-crumb {
  display: inline-flex;
  align-items: center;
}
.file-browser .file-browser-breadcrumbs .file-browser-crumb a {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--c-brand);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-browser .file-browser-breadcrumbs .file-browser-crumb a:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.file-browser .file-browser-breadcrumbs .file-browser-crumb a .material-icons {
  font-size: 16px;
  margin-right: 4px;
}
.file-browser .file-browser-breadcrumbs .file-browser-crumb .file-browser-crumb-current {
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  cursor: default;
  pointer-events: none;
}
.file-browser .file-browser-breadcrumbs .file-browser-crumb-sep {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.file-browser .file-browser-filter {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  background-color: var(--c-surface);
  transition: border-color 0.15s ease;
}
.file-browser .file-browser-filter:focus-within {
  border-color: var(--c-brand);
}
.file-browser .file-browser-filter .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.file-browser .file-browser-filter input {
  width: 130px;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0 6px;
  font-size: 13px;
  background: transparent;
}
.file-browser .file-browser-filter .file-browser-filter-clear {
  cursor: pointer;
}
.file-browser .file-browser-filter .file-browser-filter-clear:hover {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.file-browser .file-browser-progress {
  position: relative;
  height: 2px;
  margin-bottom: -2px;
  overflow: hidden;
  z-index: 2;
  animation: file-browser-fade-in 0.2s ease 0.15s both;
}
.file-browser .file-browser-progress span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background-color: var(--c-brand);
  animation: file-browser-progress-slide 1.1s ease-in-out infinite;
}
.file-browser .file-browser-body {
  height: clamp(180px, 42vh, 300px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-neutral) transparent;
  /* where the horizontal and vertical bars meet - left unstyled it paints an opaque square that
     cuts off a rounded container corner */
  /* the previous directory stays on screen while the next one loads, but must not be
     clickable - the rows would act on a listing the user has already left */
}
.file-browser .file-browser-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.file-browser .file-browser-body::-webkit-scrollbar-track {
  background: transparent;
}
.file-browser .file-browser-body::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.file-browser .file-browser-body::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.file-browser .file-browser-body::-webkit-scrollbar-corner {
  background: transparent;
}
.file-browser .file-browser-body.is-loading {
  pointer-events: none;
  animation: file-browser-dim 0.2s ease 0.15s both;
}
.file-browser .file-browser-table {
  width: 100%;
  /* fixed layout: the meta columns keep their declared width and the name column absorbs
     the rest, so a long storage key gets an ellipsis instead of stretching the table */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}
.file-browser .file-browser-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background-color: var(--c-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.file-browser .file-browser-table thead th .material-icons {
  font-size: 14px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.file-browser .file-browser-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.file-browser .file-browser-table thead th.is-sortable:hover {
  color: var(--c-brand);
}
.file-browser .file-browser-table thead th.is-sortable:hover .material-icons {
  opacity: 0.5;
}
.file-browser .file-browser-table thead th.is-sorted {
  color: var(--c-brand);
}
.file-browser .file-browser-table thead th.is-sorted .material-icons {
  opacity: 1;
}
.file-browser .file-browser-table td {
  padding: 6px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 90%);
  vertical-align: middle;
}
.file-browser .file-browser-col-type,
.file-browser .file-browser-col-modified {
  width: 140px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  white-space: nowrap;
}
.file-browser .file-browser-col-size {
  width: 90px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.file-browser .file-browser-col-state {
  width: 64px;
  white-space: nowrap;
  text-align: right;
}
.file-browser .file-browser-col-state .material-icons {
  vertical-align: middle;
}
.file-browser .file-browser-col-state .material-icons + .material-icons {
  margin-left: 6px;
}
.file-browser .file-browser-name {
  display: flex;
  align-items: center;
  min-width: 0;
  /* name + (in narrow panels) the meta line that replaces the dropped columns */
  /* only rendered by the narrow container tiers */
  /* affordance that a folder row drills down; only shown on hover */
}
.file-browser .file-browser-name .file-browser-name-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.file-browser .file-browser-name .file-browser-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-browser .file-browser-name .file-browser-name-meta {
  display: none;
  font-size: 11px;
  line-height: 14px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-browser .file-browser-name .file-browser-enter {
  margin-left: auto;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.file-browser .file-browser-sort {
  display: none;
}
.file-browser.is-grid .file-browser-sort {
  display: inline-block;
}
.file-browser .file-browser-icon {
  flex-shrink: 0;
  font-size: 18px;
  margin-right: 8px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.file-browser .file-browser-icon.is-folder {
  color: var(--c-warning);
}
.file-browser .file-browser-icon.is-image {
  color: var(--c-cat-purple);
}
.file-browser .file-browser-icon.is-media {
  color: var(--c-info);
}
.file-browser .file-browser-icon.is-pdf {
  color: var(--c-danger);
}
.file-browser .file-browser-icon.is-doc {
  color: var(--c-brand-dark);
}
.file-browser .file-browser-icon.is-sheet {
  color: var(--c-success);
}
.file-browser .file-browser-icon.is-slides {
  color: var(--c-accent);
}
.file-browser .file-browser-icon.is-archive {
  color: var(--c-cat-brown);
}
.file-browser .file-browser-icon.is-code {
  color: var(--c-brand-muted);
}
.file-browser .file-browser-icon.is-binary {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.file-browser .file-browser-item {
  cursor: pointer;
  transition: background-color 0.12s ease;
  /* keyboard cursor - independent from the selection so arrowing around stays visible */
}
.file-browser .file-browser-item:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 91.6%);
}
.file-browser .file-browser-item:hover .file-browser-enter {
  opacity: 1;
}
.file-browser .file-browser-item.is-directory .file-browser-name-text {
  font-weight: 500;
}
.file-browser .file-browser-item.is-selected {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.file-browser .file-browser-item.is-selected .file-browser-name-text {
  font-weight: 500;
}
.file-browser .file-browser-item.is-active {
  outline: 2px solid color-mix(in srgb, var(--c-brand), transparent 45%);
  outline-offset: -2px;
}
.file-browser .file-browser-check {
  font-size: 18px;
  color: var(--c-brand);
}
.file-browser .file-browser-download {
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms;
}
.file-browser .file-browser-download:hover {
  color: var(--c-brand);
}
.file-browser .file-browser-item:hover .file-browser-download,
.file-browser .file-browser-item.is-active .file-browser-download {
  opacity: 0.7;
}
.file-browser .file-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
  padding: 12px;
}
.file-browser .file-browser-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: center;
}
.file-browser .file-browser-tile:hover, .file-browser .file-browser-tile.is-selected {
  border-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.file-browser .file-browser-tile .file-browser-icon {
  font-size: 38px;
  margin: 0 0 6px;
}
.file-browser .file-browser-tile .file-browser-tile-name {
  width: 100%;
  font-size: 12px;
  line-height: 15px;
  /* two lines, then ellipsis - long storage keys must not blow the tile up */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.file-browser .file-browser-tile .file-browser-tile-meta {
  margin-top: 2px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.file-browser .file-browser-tile .file-browser-check {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 16px;
}
.file-browser .file-browser-tile .file-browser-download {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 16px;
}
.file-browser .file-browser-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.file-browser .file-browser-empty .material-icons {
  font-size: 40px;
  margin-bottom: 8px;
}
.file-browser .file-browser-empty p {
  margin: 0;
  font-size: 13px;
}
.file-browser .file-browser-skeleton {
  padding: 12px;
  /* stagger the rows so the placeholder reads as a list, not as one blinking block */
}
.file-browser .file-browser-skeleton .file-browser-skeleton-row {
  display: flex;
  align-items: center;
  height: 28px;
}
.file-browser .file-browser-skeleton .file-browser-skeleton-icon,
.file-browser .file-browser-skeleton .file-browser-skeleton-bar {
  height: 12px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 90%);
  animation: file-browser-skeleton-pulse 1.2s ease-in-out infinite;
}
.file-browser .file-browser-skeleton .file-browser-skeleton-icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
.file-browser .file-browser-skeleton .file-browser-skeleton-bar {
  flex: 1;
  max-width: 320px;
}
.file-browser .file-browser-skeleton .file-browser-skeleton-row:nth-child(2) .file-browser-skeleton-bar {
  max-width: 220px;
  animation-delay: 0.1s;
}
.file-browser .file-browser-skeleton .file-browser-skeleton-row:nth-child(3) .file-browser-skeleton-bar {
  max-width: 280px;
  animation-delay: 0.2s;
}
.file-browser .file-browser-skeleton .file-browser-skeleton-row:nth-child(4) .file-browser-skeleton-bar {
  max-width: 180px;
  animation-delay: 0.3s;
}
.file-browser .file-browser-skeleton .file-browser-skeleton-row:nth-child(5) .file-browser-skeleton-bar {
  max-width: 240px;
  animation-delay: 0.4s;
}
.file-browser .file-browser-status {
  padding: 5px 12px;
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background-color: color-mix(in srgb, var(--c-ink), transparent 90%);
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  gap: 8px;
  /* both halves may be truncated rather than pushing each other out of the bar */
}
.file-browser .file-browser-status > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-browser .file-browser-status .file-browser-status-hint {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.file-browser .file-browser-status .file-browser-status-selection {
  display: flex;
  align-items: center;
  min-width: 0;
  font-weight: 500;
}
.file-browser .file-browser-status .file-browser-status-selection .material-icons {
  font-size: 15px;
  margin-right: 4px;
  color: var(--c-brand);
}
.file-browser .file-browser-status .file-browser-status-selection span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-browser.is-readonly .file-browser-item:not(.is-directory) {
  cursor: default;
}
.file-browser.is-readonly .file-browser-item:not(.is-directory):hover {
  background-color: transparent;
}
@container fileBrowser (max-width: 720px) {
  .file-browser .file-browser-col-type {
    display: none;
  }
}
@container fileBrowser (max-width: 560px) {
  .file-browser .file-browser-col-size,
.file-browser .file-browser-col-modified {
    display: none;
  }
  .file-browser .file-browser-name .file-browser-name-meta {
    display: block;
  }
  .file-browser .file-browser-sort {
    display: inline-block;
  }
  .file-browser .file-browser-breadcrumbs .file-browser-crumb a {
    max-width: 110px;
  }
  .file-browser .file-browser-table td {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}
@container fileBrowser (max-width: 420px) {
  .file-browser .file-browser-filter {
    order: 1;
    width: 100%;
    margin-top: 4px;
  }
  .file-browser .file-browser-table th,
.file-browser .file-browser-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
  .file-browser .file-browser-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    padding: 8px;
    gap: 6px;
  }
}

/* Touch: hover affordances never appear, and 33px rows are below the ~44px target size. */
@media (pointer: coarse) {
  .file-browser .file-browser-table td {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .file-browser .file-browser-name .file-browser-enter {
    opacity: 1;
  }
  .file-browser .file-browser-toolbar-button {
    min-width: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  .file-browser .file-browser-filter {
    height: 34px;
  }
}
@keyframes file-browser-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@keyframes file-browser-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes file-browser-dim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.55;
  }
}
/* indeterminate bar: a short segment sweeping across the panel */
@keyframes file-browser-progress-slide {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .file-browser {
    /* keep the states, drop the motion: a static bar and a flat placeholder still say
       "busy" without anything sliding or pulsing */
  }
  .file-browser .file-browser-progress span {
    width: 100%;
    animation: none;
    opacity: 0.5;
  }
  .file-browser .file-browser-skeleton-icon,
.file-browser .file-browser-skeleton-bar {
    animation: none;
  }
}
[data-theme] md-sidenav.md-default-theme,
[data-theme] md-sidenav.md-dark-theme {
  background-color: transparent;
}
[data-theme] md-content.md-default-theme,
[data-theme] md-content.md-dark-theme {
  background-color: inherit;
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] md-toolbar.md-default-theme:not(.md-menu-toolbar),
[data-theme] md-toolbar.md-dark-theme:not(.md-menu-toolbar) {
  background-color: var(--c-surface);
  color: var(--c-ink);
}
[data-theme] .md-default-theme .md-tab,
[data-theme] .md-dark-theme .md-tab {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
[data-theme] .md-default-theme .md-tab.md-active,
[data-theme] .md-dark-theme .md-tab.md-active {
  color: var(--c-brand);
}
[data-theme] .md-default-theme md-ink-bar,
[data-theme] .md-dark-theme md-ink-bar {
  color: var(--c-brand);
  background-color: var(--c-brand);
}
[data-theme] .md-default-theme md-tabs-wrapper,
[data-theme] .md-dark-theme md-tabs-wrapper {
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
[data-theme] .agent-page .md-default-theme .md-tab.md-active,
[data-theme] .agent-page .md-dark-theme .md-tab.md-active {
  color: var(--c-ink);
}
[data-theme] md-content.sidebar-content {
  background-color: var(--c-sidebar);
}
[data-theme] md-content.page-content {
  background-color: var(--c-surface-sunken);
}
[data-theme] md-content.toggle-box-content {
  background-color: var(--c-surface);
}
[data-theme] md-toolbar.md-default-theme.searchToolbar,
[data-theme] md-toolbar.md-dark-theme.searchToolbar {
  color: var(--c-on-fill);
}

[data-theme] md-dialog,
[data-theme] md-bottom-sheet {
  background-color: var(--c-surface);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] md-menu-content,
[data-theme] md-select-menu,
[data-theme] md-select-menu md-content,
[data-theme] md-autocomplete,
[data-theme] .md-autocomplete-suggestions-container {
  background-color: var(--c-surface-raised);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}

[data-theme] md-input-container label,
[data-theme] md-input-container .md-placeholder,
[data-theme] md-input-container .md-input::placeholder,
[data-theme] md-input-container input::placeholder,
[data-theme] md-input-container textarea::placeholder {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
[data-theme] md-input-container .md-input,
[data-theme] md-input-container input,
[data-theme] md-input-container textarea,
[data-theme] md-input-container select {
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] md-input-container .md-input {
  border-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
[data-theme] md-input-container.md-input-invalid .md-input {
  border-color: var(--c-danger);
}
[data-theme] md-input-container.md-input-invalid label, [data-theme] md-input-container.md-input-invalid .md-input-message-animation {
  color: var(--c-danger);
}

[data-theme] md-tabs:not(.md-default-theme):not(.md-dark-theme) .md-tab[disabled],
[data-theme] md-tabs:not(.md-default-theme):not(.md-dark-theme) .md-tab.md-disabled {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
[data-theme] .md-button:not(.md-default-theme):not(.md-dark-theme)[disabled] {
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
[data-theme] md-menu-content:not(.md-default-theme):not(.md-dark-theme) md-menu-item {
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] md-menu-content:not(.md-default-theme):not(.md-dark-theme) md-menu-item md-icon {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
[data-theme] md-checkbox:not(.md-default-theme):not(.md-dark-theme) .md-label,
[data-theme] md-radio-button:not(.md-default-theme):not(.md-dark-theme) .md-label,
[data-theme] md-list-item:not(.md-default-theme):not(.md-dark-theme),
[data-theme] md-select:not(.md-default-theme):not(.md-dark-theme) .md-select-value {
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] md-select:not(.md-default-theme):not(.md-dark-theme) .md-select-value.md-select-placeholder,
[data-theme] md-input-container:not(.md-default-theme):not(.md-dark-theme) .md-input-message-animation {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

[data-theme] .form-control {
  background-color: var(--c-surface);
  color: var(--c-field-text);
}
[data-theme] .form-control[disabled],
[data-theme] .form-control[readonly],
[data-theme] fieldset[disabled] .form-control {
  background-color: var(--c-surface-muted);
}
[data-theme] .input-group-addon {
  background-color: var(--c-surface-muted);
  color: var(--c-field-text);
}
[data-theme] .btn-default {
  background-color: var(--c-surface);
  color: var(--c-text);
}
[data-theme] .dropdown-menu {
  background-color: var(--c-surface-raised);
}
[data-theme] .dropdown-menu > li > a {
  color: var(--c-text);
}
[data-theme] .dropdown-menu > li > a:hover,
[data-theme] .dropdown-menu > li > a:focus {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}
[data-theme] .panel {
  background-color: var(--c-surface);
}
[data-theme] .panel-footer,
[data-theme] .panel-default > .panel-heading {
  background-color: var(--c-surface-subtle);
}
[data-theme] .well,
[data-theme] .breadcrumb,
[data-theme] .progress {
  background-color: var(--c-surface-subtle);
}
[data-theme] pre {
  background-color: var(--c-surface-subtle);
  color: var(--c-text);
}
[data-theme] .list-group-item {
  background-color: var(--c-surface);
  color: var(--c-field-text);
}
[data-theme] .list-group-item.disabled,
[data-theme] .list-group-item.disabled:hover,
[data-theme] .list-group-item.disabled:focus {
  background-color: var(--c-surface-muted);
}
[data-theme] a.list-group-item:hover,
[data-theme] button.list-group-item:hover,
[data-theme] a.list-group-item:focus,
[data-theme] button.list-group-item:focus {
  background-color: var(--c-surface-subtle);
}
[data-theme] .pager li > a,
[data-theme] .pager li > span,
[data-theme] .pager .disabled > a,
[data-theme] .pager .disabled > span {
  background-color: var(--c-surface);
}
[data-theme] .pager li > a:hover,
[data-theme] .pager li > a:focus {
  background-color: var(--c-surface-muted);
}

a {
  color: var(--c-link);
}

a:hover,
a:focus {
  color: var(--c-link-hover);
}

[data-theme] .select2-drop,
[data-theme] .select2-drop.select2-drop-above {
  background: var(--c-surface-raised);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] .select2-search input,
[data-theme] .select2-container-multi .select2-choices .select2-search-field input {
  background-color: var(--c-surface);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] .select2-search input.select2-active {
  background: var(--c-surface) none !important;
}
[data-theme] .select2-container-multi .select2-choices .select2-search-field input,
[data-theme] .select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: transparent none !important;
}
[data-theme] .select2-container .select2-choice {
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] .select2-container .select2-choice .select2-chosen.select2-default,
[data-theme] .select2-default,
[data-theme] .select2-default > span {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
[data-theme] .select2-search input {
  background-image: url("/lib/select2/select2.png");
}
[data-theme] .select2-results {
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] .select2-results .select2-no-results,
[data-theme] .select2-results .select2-searching,
[data-theme] .select2-results .select2-disabled,
[data-theme] .select2-results .select2-disabled.select2-highlighted,
[data-theme] .select2-more-results,
[data-theme] .select2-more-results.select2-active {
  background-color: var(--c-surface-subtle);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
[data-theme] .select2-dropdown-open .select2-choice {
  background-color: var(--c-surface-muted);
}
[data-theme] .select2-container.select2-container-disabled .select2-choice,
[data-theme] .select2-container-multi.select2-container-disabled .select2-choices {
  background-color: var(--c-surface-subtle);
}
[data-theme] .select2-results li em {
  background: var(--c-match-highlight);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
}
[data-theme] .select2-container.select2-drop-above .select2-choice,
[data-theme] .select2-dropdown-open .select2-choice,
[data-theme] .select2-dropdown-open.select2-drop-above .select2-choice,
[data-theme] .select2-container-multi.select2-dropdown-open .select2-choices,
[data-theme] .select2-dropdown-open.select2-drop-above .select2-choices {
  background-image: none;
}

/*# sourceMappingURL=style.css.map */