@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-danger-deep: #bc2d1d;
  --c-success-deep: #34843f;
  --c-warning-deep: #b98d00;
  --c-surface: #ffffff;
  --c-surface-raised: #ffffff;
  --c-surface-sunken: #E9EBEE;
  --c-brand-fill: #0F4E66;
  --c-sidebar-card: #17607D;
  --c-sidebar-label: #A9C2CE;
  --c-sidebar-hover: #6E8FA1;
  --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: #f5f5f5;
  --c-table-row-hover: #EDF2F5;
  --c-warning-wash-a: #fffcee;
  --c-warning-wash-b: #fffef8;
  --c-border: #E9EBEE;
  --c-neutral: #C0C0C0;
  --c-on-fill: #ffffff;
  --c-text: #333333;
  --c-ink: #000000;
  --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-danger-deep: #bc2d1d;
  --c-success-deep: #34843f;
  --c-warning-deep: #b98d00;
  --c-surface: #ffffff;
  --c-surface-raised: #ffffff;
  --c-surface-sunken: #E9EBEE;
  --c-brand-fill: #0F4E66;
  --c-sidebar-card: #17607D;
  --c-sidebar-label: #A9C2CE;
  --c-sidebar-hover: #6E8FA1;
  --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: #f5f5f5;
  --c-table-row-hover: #EDF2F5;
  --c-warning-wash-a: #fffcee;
  --c-warning-wash-b: #fffef8;
  --c-border: #E9EBEE;
  --c-neutral: #C0C0C0;
  --c-on-fill: #ffffff;
  --c-text: #333333;
  --c-ink: #000000;
  --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-brand-fill: #14323F;
  --c-sidebar-card: #232C33;
  --c-sidebar-label: #9AA6AE;
  --c-sidebar-hover: #2A343B;
  --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: #232A2F;
  --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;
}

/***************************************************  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. */
/* Horizontal 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.
   Kept modest because the scrollbar gutter is reserved on both edges and adds to it — the visible margin
   is this plus the scrollbar's width. */
/*************************************************  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. */
/**************************************************  Breakpoints ******************************************************/
/* 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));
  }
}
@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.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 */
  /* The scrollbar takes its width out of the content, and only on one side — so every page sat 11px
     further from the right edge than the left. Reserving the gutter on both edges squares that up, and
     stops the content shifting sideways when a page becomes long enough to scroll. */
  scrollbar-gutter: stable both-edges;
}
.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: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
}

.page-content {
  margin-top: 64px;
  background-color: var(--c-surface-sunken);
}
.page-content .dynamic-content {
  height: 100%;
  overflow: unset;
}

.ajax-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -32px;
  display: block;
}

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

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

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

.offline-circle {
  background-color: var(--c-surface);
}
.offline-circle i {
  color: var(--c-ink);
}

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

.inner-loading-background {
  width: 100%;
  height: 100%;
  background-color: var(--c-surface-sunken);
  z-index: 10001;
  position: fixed;
  margin: 0;
  padding: 0;
  top: 64px;
  left: var(--sidebar-width);
  border: none;
  display: table-cell;
  vertical-align: middle;
  min-height: 10em;
  text-align: center;
}
.inner-loading-background.transparent {
  background-color: color-mix(in srgb, var(--c-neutral), transparent 40%) !important;
}

@media (max-width: calc(1280px - 1px)) {
  .inner-loading-background {
    left: 0;
  }
}
.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;
}

.toolbox-toggle {
  background-color: var(--c-brand);
  padding: 8px 14px;
  color: var(--c-on-fill);
  top: 300px;
  right: -22px;
  transform: rotate(90deg);
  position: fixed;
  font-size: 14px;
  z-index: 10;
  cursor: pointer;
  border-radius: 0 0 4px 4px;
  box-shadow: 2px 2px 5px color-mix(in srgb, var(--c-shadow), transparent 80%);
}
.toolbox-toggle:hover {
  background-color: var(--c-brand-light);
}
.toolbox-toggle::before {
  content: "◀";
  margin-right: 6px;
  font-size: 10px;
  vertical-align: middle;
  display: inline-block;
  transform: rotate(-90deg);
}

.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. */
#command-section {
  margin-bottom: 20px;
}

.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: 20px;
}

.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 {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  /* 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 .route-nodes 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;
  gap: 0;
  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;
  /* 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. */
  /* A secondary button rather than bare text, as drawn. It is the counterpart to Create: same height and
     radius, outlined instead of filled, so the two read as a pair. */
}
.toolbar-menu-right-bar .toolbar-entry:hover:not(:has(.create-button)) {
  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.identity-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  /* The bar sets no gap of its own, and two of these sit side by side — without this their borders
     meet and read as one long shape divided by a line. */
  margin-left: 8px;
  /* Tighter on the left: the avatar is its own shape and does not need the padding a label does. */
  padding: 0 10px 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  /* Below Material's sm ceiling the label and the caret are hidden and only the avatar is left. The
     pill's border and padding then draw a second ring around that circle — off centre, since the
     padding is asymmetric — so the chrome goes and the avatar is the control at this 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: 32px;
  height: 32px;
  border-radius: 50%;
  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 {
    height: auto;
    padding: 0;
    border: none;
    border-radius: 50%;
  }
}
.toolbar-menu-right-bar .toolbar-entry .create-button {
  background-color: var(--c-accent);
  color: var(--c-on-fill);
  height: 36px;
  margin: 0;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.toolbar-menu-right-bar .toolbar-entry .create-button:hover {
  background-color: var(--c-cat-sand);
}
.toolbar-menu-right-bar .toolbar-entry .create-button i, .toolbar-menu-right-bar .toolbar-entry .create-button .toolbar-entry-title {
  color: var(--c-on-fill);
}
.toolbar-menu-right-bar .toolbar-entry.install-agent-entry {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 8px;
  /* The bar sets no gap, and the bare icons beside this carry their spacing as padding inside their
     own hover area — so a drawn border ends flush against the next icon's box. Anything with an edge
     of its own has to make that room itself; the identity pills do the same on their left. */
  margin-right: 8px;
  /* Its contents carry Material's hide-xs/hide-sm, but the outline 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 i.material-icons {
  font-size: 18px;
  padding-right: 6px;
}
.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 .notifications-menu md-progress-linear {
  margin-top: 6px;
}
.toolbar-menu-right-bar .notifications-menu md-progress-linear div .md-bar {
  background: var(--c-cat-sand);
}
.toolbar-menu-right-bar .notifications-menu .notifications-count {
  height: 21px;
  background-color: var(--c-danger);
  border-radius: 6px;
  padding: 0 3px 0 2px;
  position: absolute;
  top: -4px;
  right: 4px;
}
.toolbar-menu-right-bar .notifications-menu .notifications-count .notifications-count-text {
  position: relative;
  top: -5px;
  font-weight: 600;
  font-size: 18px;
}

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

.no-notifications {
  margin: 0 0 15px 0;
  height: 100% !important;
}
.no-notifications .headline {
  margin-bottom: 15px;
  margin-top: 10px;
}

.notifications-menu-content {
  max-width: 450px;
  padding: 4px 0 8px 0 !important;
}
.notifications-menu-content .notifications-scroll-container {
  max-height: 400px;
  overflow: auto;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.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-menu-content-item {
  height: auto;
}
.notifications-menu-content .notifications-menu-content-item.unread-notification {
  background-color: var(--c-cat-sand);
}
.notifications-menu-content .notifications-menu-content-item.job-notification .job-notification-text:after {
  font-size: 26px;
  content: " ...";
  animation: dots 1s steps(5, end) infinite;
}
@keyframes dots {
  0%, 20% {
    color: color-mix(in srgb, var(--c-on-fill), transparent 100%);
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%);
  }
  40% {
    color: color-mix(in srgb, var(--c-on-fill), transparent 0%);
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%);
  }
  60% {
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 0%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%);
  }
  80%, 100% {
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 0%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 0%);
  }
}
.notifications-menu-content .notifications-menu-content-item .md-button {
  height: 100% !important;
  white-space: unset;
}
.notifications-menu-content .notifications-menu-content-item .md-button .notification-header-entry {
  padding-bottom: 5px;
}
.notifications-menu-content .notifications-menu-content-item .md-button .notification-header-entry .notification-header-entry-title {
  font-size: 16px;
  font-weight: 600;
}
.notifications-menu-content .notifications-menu-content-item .md-button .notification-header-entry .notification-header-entry-description {
  font-size: 12px;
  line-height: initial;
}
.notifications-menu-content .notifications-menu-content-item .md-button .notification-header-entry .notification-header-entry-description .elapsed-time {
  min-width: 100px;
  text-align: right;
}
.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. */
}
.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: 6px 8px;
  border-top: 1px solid var(--c-sidebar-line);
}
.sidebar-content .sidebar-footer .sidebar-footer-link {
  height: 40px;
  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-hover);
  color: var(--c-on-fill);
}
.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-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-hover);
  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 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-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 .free-trial-entry {
  background-color: var(--c-brand-muted);
  font-size: 14px;
  height: 52px;
}
#sidebar-menu li.sidebar-top-entry .free-trial-entry .subscribe-button {
  background-color: var(--c-accent);
  margin: 2px 0 0 0;
  line-height: initial;
  min-height: initial;
}
#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);
}
#sidebar-menu li.subMenu a {
  margin: 1px 8px 1px 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-hover);
  color: var(--c-on-fill);
}
#sidebar-menu li.subMenu a.is-current {
  background-color: var(--c-sidebar-hover);
  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;
}

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 breadcrumb only renders at lg and above. Below that the bar had nothing identifying the page, which
   was tolerable while a logo sat there and is not now that it does not. */
.toolbar-page-title {
  display: none;
  font-size: 16px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 768px) {
  .toolbar-page-title {
    display: block;
  }
}

.route-nodes {
  display: inherit;
  /* Was 115px to clear the logo that used to sit in this bar. The logo is in the sidebar now, so the
     breadcrumb lines up with the menu bar's first item instead. */
  margin-left: 22px;
  /* The bar is a surface now, so the breadcrumb takes the body ink rather than the on-fill colour it needed
     while sitting on the brand fill. Still explicit, or it falls through to the generic link blue. */
}
.route-nodes .node {
  font-size: 16px;
  margin-left: 5px;
  /* The 5px separates one crumb from the next; the first one is already placed by the inset above. */
}
.route-nodes .node:first-child {
  margin-left: 0;
}
.route-nodes a {
  color: var(--c-text);
}
.route-nodes a:hover, .route-nodes a:focus {
  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. */
    /* 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 .free-trial-entry {
    display: none;
  }
  .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;
    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;
  }
}
/*
 * 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-hover);
  color: var(--c-on-fill);
}
.rail-flyout .rail-flyout-item.is-current {
  background-color: var(--c-sidebar-hover);
  color: var(--c-on-fill);
  font-weight: 600;
}

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.fullscreen-dialog {
  min-height: 100%;
  min-width: 100%;
  border-radius: 0;
}
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: 750px;
  }
}
md-dialog.fullscreen-dialog {
  min-height: 100%;
  min-width: 100%;
  border-radius: 0;
}

.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", "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-image: url(/app/resources/xeox_bubbles_login_background.jpg);
}

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

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

@media (min-width: 600px) {
  .auth-card {
    max-width: 400px;
  }
  .auth-card .auth-content {
    border-radius: 6px;
    background-color: var(--c-surface);
  }
  .login-background {
    background-image: url(/app/resources/xeox_bubbles_login_background.jpg);
    background-repeat: no-repeat;
    background-position: right 40% bottom 20%;
    background-size: cover;
  }
}
@media (max-aspect-ratio: 3/4) {
  .login-background {
    background-size: 230% 100%;
  }
}
/* -- 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);
}

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

.default-notification {
  color: white;
  border-radius: 6px;
}
.default-notification.error {
  background-color: var(--c-danger);
}
.default-notification.success {
  background-color: var(--c-success);
}
.default-notification.warning {
  background-color: var(--c-cat-sand);
}
.default-notification.info {
  background-color: var(--c-brand-muted);
}
.default-notification .message-type-icon {
  text-align: center;
  padding-right: 5px;
}
.default-notification .messages-list {
  list-style-type: none;
  padding-left: 0;
}
.default-notification .close-icon {
  position: absolute;
  top: 5px;
  right: 5px;
}
.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;
  border: 1px solid var(--c-brand);
  border-radius: 8px;
  overflow: hidden;
}
.segmented > button {
  border: none;
  margin: 0;
  padding: 5px 16px;
  background: var(--c-surface);
  color: var(--c-brand);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.segmented > button + button {
  border-left: 1px solid var(--c-brand);
}
.segmented > button.segmented__btn--active {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
.segmented > md-radio-button {
  border: none;
  margin: 0;
  padding: 5px 16px;
  background: var(--c-surface);
  color: var(--c-brand);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: block;
}
.segmented > md-radio-button .md-container {
  display: none;
}
.segmented > md-radio-button .md-label {
  margin: 0;
  display: block;
}
.segmented > md-radio-button + md-radio-button {
  border-left: 1px solid var(--c-brand);
}
.segmented > md-radio-button.md-checked {
  background-color: var(--c-brand);
  color: var(--c-on-fill);
}
.segmented > md-radio-button.md-checked .md-label {
  color: var(--c-on-fill);
}
.segmented > md-radio-button.md-focused:not(.md-checked) {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.segmented[disabled], .segmented.segmented--disabled {
  border-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.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 + button, .segmented[disabled] > button + md-radio-button,
.segmented[disabled] > md-radio-button + button,
.segmented[disabled] > md-radio-button + md-radio-button, .segmented.segmented--disabled > button + button, .segmented.segmented--disabled > button + md-radio-button,
.segmented.segmented--disabled > md-radio-button + button,
.segmented.segmented--disabled > md-radio-button + md-radio-button {
  border-left-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.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 {
  background-color: color-mix(in srgb, var(--c-ink), transparent 62%);
  color: var(--c-on-fill);
}
.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: var(--c-on-fill);
}
.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: 8px 16px;
}
.segmented.segmented--stacked > button + button, .segmented.segmented--stacked > button + md-radio-button,
.segmented.segmented--stacked > md-radio-button + button,
.segmented.segmented--stacked > md-radio-button + md-radio-button {
  border-left: none;
  border-top: 1px solid var(--c-brand);
}
.segmented.segmented--stacked[disabled] > button + button, .segmented.segmented--stacked[disabled] > button + md-radio-button,
.segmented.segmented--stacked[disabled] > md-radio-button + button,
.segmented.segmented--stacked[disabled] > md-radio-button + md-radio-button, .segmented.segmented--stacked.segmented--disabled > button + button, .segmented.segmented--stacked.segmented--disabled > button + md-radio-button,
.segmented.segmented--stacked.segmented--disabled > md-radio-button + button,
.segmented.segmented--stacked.segmented--disabled > md-radio-button + md-radio-button {
  border-top-color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
@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: 8px 16px;
  }
  .segmented > button + button, .segmented > button + md-radio-button,
.segmented > md-radio-button + button,
.segmented > md-radio-button + md-radio-button {
    border-left: none;
    border-top: 1px solid var(--c-brand);
  }
  .segmented[disabled] > button + button, .segmented[disabled] > button + md-radio-button,
.segmented[disabled] > md-radio-button + button,
.segmented[disabled] > md-radio-button + md-radio-button, .segmented.segmented--disabled > button + button, .segmented.segmented--disabled > button + md-radio-button,
.segmented.segmented--disabled > md-radio-button + button,
.segmented.segmented--disabled > md-radio-button + md-radio-button {
    border-top-color: color-mix(in srgb, var(--c-ink), transparent 62%);
  }
}

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%);
}

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

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

.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-updates.bar {
  text-align: center;
  width: 60px;
}
.no-updates.bar i {
  font-size: 20px;
}

.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: "SF Mono", "Monaco", "Menlo", "Consolas", 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 .available-updates-chart {
  max-width: 100px;
}
.updates-info-chart .available-updates-chart.bar {
  height: 24px;
}

@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;
  }
}
.subnets-overview {
  margin-top: 20px;
}
.subnets-overview .subnet-type .subnet-type-title {
  font-weight: bold;
}

.ipplan-legend {
  margin-top: 20px;
}
.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;
}

.subnet-configuration-wrapper .add-configuration-button {
  margin-top: 14px;
}
.subnet-configuration-wrapper .subnet-configuration-table {
  margin-top: 10px;
}
.subnet-configuration-wrapper .subnet-configuration-table tbody tr td:last-child {
  text-align: right;
}

.dhcp-scope .table {
  background-color: initial;
}
.dhcp-scope .table .address-divider {
  padding-top: 20px;
  font-weight: bold;
  font-size: 20px;
}
.dhcp-scope .table .remove-excluded-scope {
  padding-top: 18px;
}

.ip-range .range-divider {
  font-weight: bold;
  font-size: 20px;
  padding: 20px 0 0 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;
}

.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 {
  margin-top: 10px;
}
.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;
}
.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 .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%);
  transition: box-shadow 0.15s ease;
}
.dashboard-wrapper .dashboard-grid .grid-cell:hover, .dashboard-wrapper .statistics-grid .grid-cell:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 94%);
}
.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%;
  }
}

.device-states-status-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  height: 100%;
  gap: 10px;
}
.device-states-status-container .device-states-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.device-states-status-container .device-states-row:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 96%);
}
.device-states-status-container .device-states-row .device-states-count {
  font-size: 22px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}
.device-states-status-container .device-states-row .device-states-bar-wrapper {
  flex: 1;
  height: 18px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 94%);
  border-radius: 9px;
  overflow: hidden;
}
.device-states-status-container .device-states-row .device-states-bar {
  height: 100%;
  border-radius: 9px;
  transition: width 0.4s ease;
}
.device-states-status-container .device-states-row .device-states-empty-dot {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 5px;
  opacity: 0.4;
  margin: 4px 0 4px 0;
}
.device-states-status-container .device-states-row .device-states-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  min-width: 60px;
}
.device-states-status-container .device-states-row--error .device-states-count {
  color: var(--c-danger);
}
.device-states-status-container .device-states-row--error .device-states-bar {
  background-color: var(--c-danger);
}
.device-states-status-container .device-states-row--error .device-states-empty-dot {
  background-color: var(--c-danger);
}
.device-states-status-container .device-states-row--error.has-items .device-states-label {
  color: var(--c-danger);
  font-weight: 600;
}
.device-states-status-container .device-states-row--warning .device-states-count {
  color: var(--c-accent);
}
.device-states-status-container .device-states-row--warning .device-states-bar {
  background-color: var(--c-accent);
}
.device-states-status-container .device-states-row--warning .device-states-empty-dot {
  background-color: var(--c-accent);
}
.device-states-status-container .device-states-row--warning.has-items .device-states-label {
  color: var(--c-accent);
  font-weight: 600;
}
.device-states-status-container .device-states-row--ok .device-states-count {
  color: var(--c-success);
}
.device-states-status-container .device-states-row--ok .device-states-bar {
  background-color: var(--c-success);
}
.device-states-status-container .device-states-row--ok .device-states-empty-dot {
  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;
  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;
  /* 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. */
}
.menu-bar .menu-entry-title {
  padding: 0;
}
.menu-bar.menu-bar-collapsed {
  overflow: hidden;
}
.menu-bar.menu-bar-expanded {
  height: auto;
  overflow: visible;
}
.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;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  /* 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 is on both edges: it does the centring a single line needs, and when the bar is expanded
     it keeps the last row off the bar's bottom edge the same way the first is off its top. It also
     zeroes the browser's default ul padding. */
  align-content: flex-start;
  padding: 8px 0;
  list-style-type: none;
}
.menu-bar div ul li {
  /* A pill inset from the bar rather than a full-height block: the block ran edge to edge vertically
     and collided with the bar's own hairline. */
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0 2px 0 10px;
  padding: 0 12px;
  border-radius: 6px;
  transition: background-color 120ms ease;
}
.menu-bar div ul li:hover {
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
}
.menu-bar div ul li.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.menu-bar div ul .menu-bar-submenu-expander {
  position: relative;
  top: -1px;
}
.menu-bar div .menu-bar-custom-control {
  flex: 0 0 200px;
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
}
.menu-bar .menu-bar-expander {
  order: 1;
  flex: 0 0 auto;
  height: 20px;
  text-align: center;
  background-color: transparent;
  /* 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: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;
  }
}
.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;
}

/**
 * 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: 300px;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
  color: var(--c-on-fill);
  border-radius: 6px;
  background: var(--c-info);
  box-shadow: 5px 5px 10px color-mix(in srgb, var(--c-shadow), transparent 70%);
}

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

.ui-notification.clickable:hover {
  opacity: 0.7;
}

.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: bold;
  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-on-fill), transparent 70%);
}

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

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

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

.ui-notification.warning {
  color: var(--c-on-fill);
  background: var(--c-cat-sand);
}

.ui-notification.error {
  color: var(--c-on-fill);
  background: var(--c-danger);
}

.ui-notification.success {
  color: var(--c-on-fill);
  background: var(--c-success);
}

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

.ui-notification .progress-bar {
  position: absolute;
  bottom: 1px;
  left: 1px;
  height: 4px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 88%);
  width: 100%;
  border-bottom-left-radius: 6px;
}

/* 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: 20px;
  clear: both;
}
tag-selector > div > div > .md-button {
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 40px;
}
tag-selector > div > div > .md-button:not(disabled).md-focused.btn-blue {
  background-color: var(--c-brand);
}
tag-selector > div > div > .md-button:not(disabled).md-focused.btn-orange {
  background-color: var(--c-accent);
  color: white !important;
  font-weight: bold;
  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%);
}
tag-selector > div > div > .md-button.btn-orange {
  color: white !important;
  font-weight: bold;
  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%);
}
tag-selector > div > div > .md-button.btn-orange:hover {
  color: white !important;
}
tag-selector .toggle-button {
  width: 25px;
  font-size: 32px;
  margin-bottom: 0;
  text-align: center;
}
tag-selector selectable-list {
  margin-bottom: 0;
  width: 100%;
}
tag-selector selectable-list .selected-filter.view-priority-color-0 {
  background-color: var(--c-brand);
}
tag-selector selectable-list .selected-filter.view-priority-color-1 {
  background-color: var(--c-brand-muted);
}
tag-selector selectable-list .selected-filter.view-priority-color-2 {
  background-color: var(--c-info);
}
tag-selector selectable-list .selected-filter.view-priority-color-3 {
  background-color: var(--c-neutral);
}
tag-selector selectable-list .selected-filter.view-priority-color-4 {
  background-color: var(--c-warning);
}
tag-selector selectable-list .selected-filter.view-priority-color-5 {
  background-color: var(--c-success);
}
tag-selector selectable-list .selected-filter.view-priority-color-6 {
  background-color: var(--c-brand-dark);
}
tag-selector selectable-list .selected-filter.view-priority-color-7 {
  background-color: var(--c-cat-purple);
}
tag-selector selectable-list .selected-filter.view-priority-color-8 {
  background-color: var(--c-cat-sand);
}
tag-selector selectable-list .selected-filter.view-priority-color-9 {
  background-color: var(--c-danger);
}
tag-selector selectable-list .selected-filter.view-priority-color-10 {
  background-color: var(--c-cat-brown);
}
tag-selector selectable-list .selected-filter i {
  font-size: 20px;
  float: right;
  position: relative;
  left: 4px;
}

.qb-root {
  padding: 8px;
}
.qb-root .qb-op-btn {
  min-width: 48px;
  color: var(--c-ink);
  background: var(--c-surface);
}
.qb-root .qb-op-btn:hover, .qb-root .qb-op-btn:focus, .qb-root .qb-op-btn.md-focused {
  color: var(--c-ink) !important;
  background: color-mix(in srgb, var(--c-ink), transparent 60%) !important;
  text-decoration: none;
}
.qb-root .qb-op-btn.is-active {
  background: var(--c-brand) !important;
  color: var(--c-on-fill) !important;
}
.qb-root .qb-op-btn.is-active:hover, .qb-root .qb-op-btn.is-active:focus, .qb-root .qb-op-btn.is-active.md-focused {
  background: var(--c-brand-active) !important;
  color: var(--c-on-fill) !important;
}
.qb-root .qb-op-toggle {
  display: inline-flex;
  gap: 0;
  align-items: center;
}
.qb-root .qb-op-toggle .md-button {
  background: var(--c-surface);
  color: var(--c-ink);
}
.qb-root .qb-op-toggle .md-button.is-active {
  background: var(--c-brand);
  color: var(--c-on-fill);
}
.qb-root .qb-op-toggle.is-disabled {
  pointer-events: none;
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
}
.qb-root .qb-op-actions {
  display: inline-flex;
  gap: 0;
  align-items: center;
  margin-left: -20px;
}
.qb-root .qb-op-actions .md-icon-button {
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.qb-root .qb-op-actions .md-icon-button md-icon {
  font-size: 20px;
}
.qb-root .qb-op-actions md-menu[md-position-mode="target-left target"] md-menu-content {
  transform-origin: top left;
}
.qb-root .qb-group {
  position: relative;
  margin: 0 8px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 75%);
  border-radius: 4px;
  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%);
  padding: 8px 8px 0;
}
.qb-root .qb-group.qb-root-group {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 16px;
}
.qb-root .qb-group .qb-group-toolbar {
  padding: 0 0 8px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.qb-root .qb-group .qb-branch {
  position: relative;
  padding-left: 0;
  margin: 12px 0;
}
.qb-root .qb-group .qb-branch .qb-branch-line {
  display: none;
}
.qb-root .qb-group .qb-branch .qb-nested-header {
  display: flex;
  align-items: center;
  gap: 2px;
}
.qb-root .qb-group .qb-branch .qb-nested-header .qb-op-toggle {
  margin-right: 0;
}
.qb-root .qb-group .qb-branch .qb-nested-header .qb-op-actions {
  margin-left: -20px;
}
.qb-root .qb-group .qb-branch .qb-embedded {
  margin-left: 16px;
}
.qb-root .qb-group .qb-branch .qb-rule-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 4px;
  padding: 8px;
}
.qb-root .qb-group .qb-branch .qb-rule-card .qb-bool-hint {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--c-brand), transparent 88%);
  color: var(--c-brand);
  white-space: nowrap;
}
.qb-root .qb-group .qb-branch .qb-rule-card .qb-bool-select .md-select-value {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 75%);
  border-radius: 4px;
  padding: 0 12px;
  height: 40px;
  line-height: 40px;
}
.qb-root .qb-group .qb-branch .qb-rule-card .qb-field,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-data-wrap {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}
.qb-root .qb-group .qb-branch .qb-rule-card .qb-field md-select,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-field md-input-container,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap md-select,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap md-input-container,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-data-wrap md-select,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-data-wrap md-input-container {
  width: 100%;
  margin: 0 !important;
}
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap md-select.qb-condition {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 75%);
  border-radius: 4px;
  height: 40px;
  width: 100%;
}
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap md-select.qb-condition .md-select-value {
  padding: 0 12px;
  border: none;
}
.qb-root .qb-group .qb-branch .qb-rule-card md-input-container,
.qb-root .qb-group .qb-branch .qb-rule-card md-select,
.qb-root .qb-group .qb-branch .qb-rule-card input,
.qb-root .qb-group .qb-branch .qb-rule-card .tag-selectbox,
.qb-root .qb-group .qb-branch .qb-rule-card md-autocomplete {
  height: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.qb-root .qb-group .qb-branch .qb-rule-card .qb-remove-condition {
  min-width: 42px;
  line-height: 0;
}
.qb-root .qb-group .qb-branch .qb-rule-card input[type=date]:before {
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}
.qb-root .qb-group .qb-branch .qb-rule-card input[type=date]:focus:before {
  content: "" !important;
}
.qb-root .qb-group .qb-branch-add-row {
  padding: 8px 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.qb-root .qb-group .qb-branch-add-row .qb-op-actions {
  margin-left: 0;
}
@media (max-width: 959px) {
  .qb-root {
    padding: 4px;
  }
  .qb-root .qb-group {
    margin: 0;
    padding: 4px 4px 0;
  }
  .qb-root .qb-group .qb-group-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .qb-root .qb-group .qb-branch {
    padding-left: 0;
    margin: 12px 0;
  }
  .qb-root .qb-group .qb-branch .qb-branch-line {
    display: none;
  }
  .qb-root .qb-group .qb-branch .qb-nested-header {
    flex-wrap: wrap;
  }
  .qb-root .qb-group .qb-branch .qb-nested-header .qb-op-actions {
    order: 2;
  }
  .qb-root .qb-group .qb-branch .qb-rule-card {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .qb-root .qb-group .qb-branch .qb-rule-card .qb-bool-hint {
    align-self: flex-start;
  }
  .qb-root .qb-group .qb-branch .qb-rule-card .qb-field,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-data-wrap {
    width: 100%;
    flex: 1 1 100% !important;
  }
  .qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap md-select.qb-condition {
    height: 40px;
  }
  .qb-root .qb-group .qb-branch .qb-rule-card .qb-remove-condition {
    align-self: flex-end;
    margin-top: 4px;
  }
  .qb-root .qb-group .qb-branch-add-row .qb-op-actions {
    order: 1;
  }
  .qb-root .qb-group .qb-branch .qb-rule-card {
    gap: 8px;
  }
  .qb-root .qb-group .qb-branch .qb-rule-card .qb-field,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-data-wrap,
.qb-root .qb-group .qb-branch .qb-rule-card .qb-cond-wrap md-select {
    margin: 0 !important;
  }
}

md-dialog {
  border-radius: 4px;
}
md-dialog.fullscreen-dialog {
  min-height: 100%;
  min-width: 100%;
  border-radius: 0;
}
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;
}

.qb-embedded .qb-branch-add-row {
  display: none !important;
}

.qb-root .qb-group .qb-branch .qb-nested-header .qb-op-actions md-menu + .md-icon-button.qb-branch-remove {
  margin-left: -10px;
}

.qb-root .qb-group.qb-root-group .qb-group-toolbar {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.qb-root .qb-group.qb-root-group .qb-group-toolbar .qb-op-toggle {
  margin-right: 0;
}

.qb-root .qb-group.qb-root-group .qb-group-toolbar .qb-op-actions {
  margin-left: -20px;
}

md-dialog.split-dialog.manage-tags-dialog .split-dialog-nav .split-dialog-nav-content {
  padding: 10px;
}
md-dialog.split-dialog.manage-tags-dialog .split-dialog-nav .split-dialog-nav-content selectable-list i {
  font-size: 15px;
  vertical-align: sub;
  padding-right: 5px;
}
md-dialog.split-dialog.manage-tags-dialog .split-dialog-content > div > div {
  margin-bottom: 50px;
}
md-dialog.split-dialog.manage-tags-dialog .split-dialog-content > div > div md-input-container {
  margin: 0 0;
  top: 1px;
}
md-dialog.split-dialog.manage-tags-dialog .split-dialog-content .new-tag-button {
  margin: 0 0 0 50px;
}

.multiEdit .multiEdit-altered {
  color: var(--c-accent) !important;
}
.multiEdit .multiEdit-equal {
  color: var(--c-success) !important;
}
.multiEdit .multiEdit-actions {
  margin-top: 20px;
  height: 802px;
  min-width: 280px;
}
.multiEdit .multiEdit-actions .whiteframe-content {
  height: 335px;
  overflow: auto;
}
.multiEdit .multiEdit-actions .whiteframe-content .multiEdit-detail-list .selectable-list-element {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  padding: 5px 0 5px 0;
}
.multiEdit .multiEdit-actions .whiteframe-content .multiEdit-detail-list .selectable-list-element .hostname {
  font-weight: bold;
}
.multiEdit .multiEdit-actions .whiteframe-content .selectable-list-default-not-selectable i {
  font-size: 12px;
  padding: 4px 4px 0 0;
}
.multiEdit .multiEdit-actions .item-diffs-container .loading-picture img {
  margin: 170px auto;
}

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

.map-container {
  height: 100%;
  width: 100%;
  position: absolute !important;
  z-index: 0;
}

jobs-table .jobs-table-tabs {
  margin-bottom: 15px;
}
jobs-table .jobs-table-header md-input-container {
  margin-top: 30px;
}
jobs-table .jobs-table-header md-input-container .dtp-input {
  width: 100px;
}
jobs-table .jobs-table-header md-input-container .dtp-clear {
  display: none;
}
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 .table-bordered tbody .hardware-states-wrapper .job-hardware-container .hardware-list-wrapper .hardware-list .offline-circle, jobs-table .table-bordered tbody .hardware-states-wrapper .job-hardware-container .hardware-list-wrapper .hardware-list .online-circle, jobs-table .table-bordered tbody .hardware-states-wrapper .job-hardware-container .hardware-list-wrapper .hardware-list .online-http-circle {
  display: inline-block;
  height: 10px;
  width: 10px;
}
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 .offline-circle, .hardware-job-view .online-circle, .hardware-job-view .online-http-circle {
  display: inline-block;
  height: 10px;
  width: 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);
}

md-tabs md-ink-bar {
  color: var(--c-accent);
  background-color: var(--c-accent);
}
md-tabs .md-tab {
  color: var(--c-neutral);
}
md-tabs .md-tab.md-active {
  color: var(--c-accent);
}

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

md-switch.md-checked:not([disabled]) .md-thumb, md-switch.md-checked:not([disabled]) .md-ink-ripple {
  background-color: var(--c-accent);
}
md-switch.md-checked:not([disabled]) .md-bar {
  background-color: var(--c-accent);
  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-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.md-default-theme label.md-required::after {
  color: var(--c-danger);
}
md-input-container:has(.dtp-no-msclear) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
md-input-container .md-button.dtp-clear {
  order: 3;
  flex-shrink: 0;
  margin-top: -3px;
  margin-bottom: 0;
}
md-input-container .md-button.dtp-clear:hover {
  box-shadow: none;
}
md-input-container .md-button.dtp-btn-calendar {
  order: 1;
  flex-shrink: 0;
  margin: 0;
}
md-input-container .md-button.dtp-btn-calendar:hover {
  box-shadow: none;
}
md-input-container .dtp-no-msclear {
  order: 2;
  flex: 1;
  min-width: 0;
  width: auto;
  float: none;
}

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

.dtp table.dtp-picker-days tr > td > a.selected,
.dtp table.dtp-picker-days tr > td > a.selected.hilite,
.dtp div.dtp-date, .dtp div.dtp-time, .dtp .dtp-hand.on,
.dtp .dtp-actual-meridien a.selected,
.dtp .dtp-picker-time > a.dtp-select-hour.selected {
  background: var(--c-brand);
}

.dtp table.dtp-picker-days tr > td > a.hilite:not(.selected),
.dtp div.dtp-actual-time.p60 span.selected {
  color: var(--c-brand-muted);
  font-weight: bold;
}

.dtp div.dtp-year-btn, .dtp div.dtp-actual-year, .dtp div.dtp-actual-maxtime {
  color: white;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
  background: var(--c-brand);
}

md-menu-content.dtp-month-list {
  background-color: white;
}

md-menu-content.dtp-year-list {
  background-color: white;
}

.dtp table.dtp-picker-days tr > th {
  background-color: var(--c-surface);
  position: unset !important;
}

.dtp div.dtp-picker {
  padding: 0;
}

.dtp table.dtp-picker-days tr > td > a.selected {
  font-weight: 600;
}

.dtp .dtp-buttons {
  padding-bottom: 0;
}

.dtp .dtp-close {
  top: -10px;
}
.dtp .dtp-close a {
  font-size: 28px;
}

.dtp .md-virtual-repeat-scroller {
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.dtp .md-virtual-repeat-scroller::-webkit-scrollbar {
  width: 5px;
}
.dtp .md-virtual-repeat-scroller::-webkit-scrollbar-track {
  background: var(--c-surface);
}
.dtp .md-virtual-repeat-scroller::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
}
.dtp .md-virtual-repeat-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}

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

.toolbox .md-sidenav-right.toolbox-fixed {
  position: fixed;
  width: 300px;
  max-width: 300px;
  top: 116px;
  bottom: 0;
  height: calc(100vh - 116px) !important;
  min-height: calc(100vh - 116px) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s ease, max-width 0.3s ease;
}
@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 .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;
  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;
}
.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%);
}

.send-message-dialog md-dialog-content .md-dialog-content .split-dialog-nav .split-dialog-nav-content .add-reminder-button {
  height: 24px;
  margin-top: 20px;
}

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

.wuinstall-settings-dialog .updates-only-older-than-container {
  margin: 5px;
}
.wuinstall-settings-dialog .updates-only-older-than-container.disabled {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
}
.wuinstall-settings-dialog .updates-only-older-than-container .min-number-of-days-after-update-release-input-container {
  margin: 0;
  width: 50px;
}
.wuinstall-settings-dialog .other-options-container {
  max-width: 400px;
}

.job-details-dialog .job-uuid-container {
  display: flex;
}
.job-details-dialog .job-uuid-container .uuid-label {
  margin: 4px 10px 0 0;
}
.job-details-dialog .job-uuid-container .uuid-box {
  flex: 1;
}
.job-details-dialog .job-uuid-container .uuid-box .custom-input-container {
  margin: 0;
}
.job-details-dialog table tbody tr td:last-child {
  text-align: right;
}
.job-details-dialog .job-details-container {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.job-details-dialog .job-details-container .title {
  font-size: 20px;
}
.job-details-dialog .job-details-container table {
  margin-top: 10px;
}

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

.repeat-job-dialog .hardware-selection-container {
  margin-top: 20px;
  padding-left: 2px;
}
.repeat-job-dialog .hardware-selection-container .hardware-selection-label {
  font-weight: bold;
  margin-right: 10px;
}
.repeat-job-dialog .hardware-selection-container md-radio-group md-radio-button {
  margin-bottom: 0;
}
.repeat-job-dialog .task-hardware-selection .task-name {
  font-weight: bold;
}
.repeat-job-dialog .task-hardware-selection:last-child {
  margin-top: 20px;
}

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

.time-select-dialog .time-mode-switch {
  align-self: flex-start;
  margin-bottom: 16px;
}
.time-select-dialog .logoff-users-checkbox {
  margin-top: 8px;
}
.time-select-dialog .trigger-url-hints {
  margin-top: 6px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  line-height: 1.5;
}

.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-editor-form .task-editor-tab {
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-editor-form .task-editor-tab .playground-job-state-container {
  margin-left: 10px;
}
.job-editor-form .task-editor-tab .playground-job-state-container .playground-job-running-spinner path {
  stroke: var(--c-brand);
}
.job-editor-form .task-editor-tab .playground-job-state-container .playground-job-finished-state {
  position: relative;
  top: 4px;
}
.job-editor-form .task-editor-tab .playground-job-state-container .playground-job-finished-state .playground-job-successful {
  color: var(--c-success);
}
.job-editor-form .task-editor-tab .playground-job-state-container .playground-job-finished-state .playground-job-not-successful {
  color: var(--c-danger);
}

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

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

.report-center .no-filter-applied, .report-center-chart-dialog .no-filter-applied {
  margin-top: 15px;
}
.report-center .selected-filter, .report-center-chart-dialog .selected-filter {
  margin-left: 5px;
  margin-top: 15px;
}
.report-center .chart-container .chart-container-header .chart-container-header-title, .report-center-chart-dialog .chart-container .chart-container-header .chart-container-header-title {
  color: var(--c-ink);
}
.report-center .chart-container .chart-container-content, .report-center-chart-dialog .chart-container .chart-container-content {
  padding: 50px 5px 0 20px;
  width: 100%;
  height: 100%;
}
.report-center .chart-container .chart-container-content .chart-container-content-labels ul, .report-center-chart-dialog .chart-container .chart-container-content .chart-container-content-labels ul {
  padding: 0;
}
.report-center .chart-container .chart-container-content .chart-container-content-labels ul li, .report-center-chart-dialog .chart-container .chart-container-content .chart-container-content-labels ul li {
  list-style-type: none;
}
.report-center .chart-container .chart-container-no-data .no-data-message, .report-center-chart-dialog .chart-container .chart-container-no-data .no-data-message {
  font-size: 30px;
}
.report-center selectable-list, .report-center-chart-dialog selectable-list {
  margin: 10px 0 5px 5px;
}
.report-center .report-graph-grid, .report-center-chart-dialog .report-graph-grid {
  column-gap: 6px;
}
@media (max-width: 900px) {
  .report-center .report-graph-grid, .report-center-chart-dialog .report-graph-grid {
    column-count: 1;
  }
}
@media (min-width: 900px) {
  .report-center .report-graph-grid, .report-center-chart-dialog .report-graph-grid {
    column-count: 2;
  }
}
@media (min-width: 1700px) {
  .report-center .report-graph-grid, .report-center-chart-dialog .report-graph-grid {
    column-count: 3;
  }
}
@media (min-width: 2500px) {
  .report-center .report-graph-grid, .report-center-chart-dialog .report-graph-grid {
    column-count: 4;
  }
}
.report-center .report-graph-grid .grid-cell, .report-center-chart-dialog .report-graph-grid .grid-cell {
  min-height: 300px;
}
.report-center .report-graph-grid .grid-cell .grid-cell-header, .report-center-chart-dialog .report-graph-grid .grid-cell .grid-cell-header {
  padding: 10px;
  font-size: 16px;
}
.report-center .report-graph-grid .grid-cell .grid-cell-body, .report-center-chart-dialog .report-graph-grid .grid-cell .grid-cell-body {
  padding: 6px 12px 12px 12px;
  font-weight: 700;
  overflow: auto;
  position: relative;
}
.report-center .report-graph-grid .grid-cell .grid-cell-body ul, .report-center-chart-dialog .report-graph-grid .grid-cell .grid-cell-body ul {
  list-style-type: none;
  padding: 0;
}
.report-center .report-loader, .report-center-chart-dialog .report-loader {
  display: flex;
  break-inside: avoid-column;
}
.report-center .report-loader .grid-cell, .report-center-chart-dialog .report-loader .grid-cell {
  flex: 1;
}
@media (min-width: 600px) {
  .report-center .report-loader, .report-center-chart-dialog .report-loader {
    flex: 1 0 calc(33.333% - 10px);
  }
}

@media (min-width: 600px) {
  .chart-labels {
    margin-right: 40px;
  }
  .chart-container-content-chart {
    min-height: 230px;
    max-height: 230px;
    margin-left: auto;
    margin-right: auto;
  }
  .chart-container-content-chart canvas {
    min-height: 180px;
    max-height: 200px;
  }
}
.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;
}

/* Shared by the disk cards, the network adapter cards and the adapter detail dialog: addresses, MACs and
   capacities line up column to column when they are monospaced. */
.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;
}

.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%;
  /* 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.external-include {
  padding-top: 35px;
  margin-top: -35px;
}
@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 .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 -12px;
  padding: 14px 12px 12px;
  /* 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;
  gap: 14px;
  /* 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-glyph {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--c-surface-subtle);
  color: var(--c-brand);
}
.hardware-detail-container .device-header .device-header-glyph i {
  font-size: 21px;
}
.hardware-detail-container .device-header .device-header-body {
  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. */
    /* The identity block is several lines tall here, and a centred glyph ends up level with the pills
       rather than with the name it belongs to. */
  }
  .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 .device-header-identity {
    align-items: flex-start;
  }
  .hardware-detail-container .device-header .device-header-glyph {
    /* Splits the difference between the glyph's box and the name's cap height. */
    margin-top: 2px;
  }
}
.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;
  /* 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 {
  max-width: 1000px;
  margin: 0 20px 0 0;
  /* Multi-edit keeps the inner scroll: the form sits beside a selection panel of its own height, and
     the two are meant to scroll independently. */
  height: 100%;
}
.hardware-detail-container .hardware-form.multiEdit fieldset {
  height: 100%;
  overflow: auto;
  /* Room for its own scrollbar, which only this mode still has. */
  padding-right: 5px;
}
@media (min-width: 600px) {
  .hardware-detail-container .hardware-form.multiEdit fieldset {
    margin-right: -12px;
  }
}
.hardware-detail-container .hardware-form.multiEdit .toggle-box-wrapper {
  column-count: 1;
}
.hardware-detail-container .hardware-form .toggle-box-wrapper {
  padding-top: 8px;
  /* 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;
}
@media (min-width: 1800px) {
  .hardware-detail-container .hardware-form .toggle-box-wrapper {
    column-count: 2;
  }
}
@media (min-width: 3000px) {
  .hardware-detail-container .hardware-form .toggle-box-wrapper {
    column-count: 3;
  }
}
.hardware-detail-container .hardware-form .toggle-box-wrapper > section {
  break-inside: avoid;
}
.hardware-detail-container .hardware-form fieldset {
  /* Hardware Inventory keeps the full width the others give up: its widest tab (Printer) is twenty
     columns, and no column of the grid above could hold it. */
}
.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 .inventory-wrapper .toggle-box.inventory-container .inventory-group-container {
  /* Boolean columns are drawn with the material done/close glyphs, which arrive at 24px in
     full-strength ink — three of them in a row read as the loudest thing in the table. Sized
     to the text and coloured by what they mean. */
  /* Array cells render a <ul>; without this they inherit the browser's list indent and the
     column no longer lines up with its heading. */
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container .inventory-group-table-container {
  /* Was a flat 300px, so a tab holding a single row still reserved a screenful of empty
     space under it. It now takes the height of its rows and only starts scrolling when
     there are enough of them to need it. */
  overflow: auto;
  max-height: 420px;
  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 .inventory-wrapper .toggle-box.inventory-container .inventory-group-container .inventory-group-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container .inventory-group-table-container::-webkit-scrollbar-track {
  background: transparent;
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container .inventory-group-table-container::-webkit-scrollbar-thumb {
  background: var(--c-neutral);
  border-radius: 6px;
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container .inventory-group-table-container::-webkit-scrollbar-thumb:hover {
  background: var(--c-brand-muted);
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container .inventory-group-table-container::-webkit-scrollbar-corner {
  background: transparent;
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container td .inventory-bool {
  font-size: 18px;
  line-height: 18px;
  vertical-align: middle;
  /* 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. */
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container td .inventory-bool.is-true {
  color: var(--c-success);
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container td .inventory-bool.is-false {
  color: var(--c-neutral);
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .inventory-group-container td ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hardware-detail-container .hardware-form fieldset .inventory-wrapper .toggle-box.inventory-container .no-data-available {
  color: var(--c-field-text);
}

.new-hardware-entry {
  display: inline-block;
}
.new-hardware-entry i {
  color: var(--c-accent);
  position: relative;
  left: 5px;
  bottom: 1px;
  float: right;
}

.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", "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", "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", "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", "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", "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", "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", "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", "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", "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", "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", "Courier New", monospace;
  font-size: 14px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.network-adapter-container .adapter-card-address-other {
  font-family: "Roboto Mono", "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", "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", "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 {
  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 {
  font-size: 13px;
  color: var(--c-field-text);
}

.logon-info-view-container .login-history-checkbox {
  margin: 0 30px -5px 0;
}
.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;
}

.infinite-table-wrapper {
  padding-top: 20px;
}
.infinite-table-wrapper search-bar,
.infinite-table-wrapper .search-bar {
  margin-bottom: 16px;
}
.infinite-table-wrapper .no-items-found-message-container .create-btn {
  max-width: 30px;
}
.infinite-table-wrapper .no-items-found-message-container .no-items-found-header {
  font-size: 30px;
}
.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 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 50%);
}
.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;
}
.infinite-table-container .load-more-loader .md-container {
  background-color: var(--c-surface-sunken);
}
.infinite-table-container .load-more-loader .md-container .md-bar {
  background-color: var(--c-brand);
}

md-menu-content.dropdown-filter.md-dense {
  padding: 10px 0;
}
md-menu-content.dropdown-filter.md-dense md-menu-item {
  height: 100%;
}
md-menu-content.dropdown-filter.md-dense.md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled) {
  line-height: unset;
}
md-menu-content.dropdown-filter md-menu-item:hover {
  background-color: var(--c-neutral);
}
md-menu-content.dropdown-filter md-menu-item.disable-background-hover:hover {
  background: none;
}
md-menu-content.dropdown-filter md-menu-item .default-filter-wrapper {
  height: 32px;
}
md-menu-content.dropdown-filter md-menu-item .default-filter-wrapper .md-button {
  margin: 0;
  text-align: left;
}
md-menu-content.dropdown-filter md-menu-item .default-filter-wrapper .md-button:not([disabled]):hover {
  box-shadow: none;
  background-color: inherit;
}
md-menu-content.dropdown-filter md-menu-item .default-filter-wrapper .md-button:not([disabled]):focus {
  background-color: inherit;
}
md-menu-content.dropdown-filter md-menu-item.predefined-filter-menu .predefined-filter-wrapper {
  margin-bottom: 5px;
  margin-right: 10px;
}
md-menu-content.dropdown-filter md-menu-item.predefined-filter-menu .predefined-filter-wrapper: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-menu-content.dropdown-filter md-menu-item.predefined-filter-menu .predefined-filter-wrapper .predefined-filter-title {
  padding: 2px 10px 2px 10px;
  background: var(--c-brand);
  color: var(--c-on-fill);
  text-decoration: none;
  border-radius: 6px;
}
md-menu-content.dropdown-filter md-menu-item .action-button-container {
  margin-top: 10px;
}
md-menu-content.dropdown-filter md-menu-item .action-button-container .md-button {
  margin: 0 5px 0 0;
  display: flex;
  justify-content: center;
}
md-menu-content.dropdown-filter md-menu-item .action-button-container .md-button:last-child {
  margin: 0;
}

.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: 26px !important;
  padding: 0 !important;
}

.table.infinite-table > thead > tr > th.state-column .icon-wrapper {
  width: 20px !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;
}

.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;
  height: 18px !important;
  width: 18px !important;
  top: 0 !important;
  transform: translateY(5.5px);
}

.table.infinite-table > thead > tr > th .infinite-table-checkbox .md-icon {
  height: 18px !important;
  width: 18px !important;
  line-height: 18px !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;
}

.dropdown-filter--compact {
  max-width: 640px;
  width: auto !important;
}

.dropdown-filter--compact {
  max-width: 560px;
  width: auto !important;
}

.dropdown-filter--compact .chip-filter-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.dropdown-filter--compact .predefined-filter-title {
  white-space: nowrap;
  line-height: 1.9;
}

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

.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;
}
.footer-strip .footer-strip-left.help-widget .footer-strip-item, .footer-strip .footer-strip-middle.help-widget .footer-strip-item, .footer-strip .footer-strip-right.help-widget .footer-strip-item {
  padding-right: 84px;
}

.auth-entry-dialog .table > thead:first-child > tr:first-child th {
  top: 0;
}

.add-group-button {
  margin-left: 0;
  width: 100px;
}

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

.organisation-container {
  margin-top: 20px;
}
.organisation-container .withdrawn-organisation {
  color: var(--c-danger) !important;
  font-size: 18px;
  font-weight: bold;
}
.organisation-container .danger-zone-container .toggle-box-header {
  color: var(--c-danger);
}
.organisation-container .danger-zone-container .info-container .info-container-title {
  font-weight: bold;
}
.organisation-container .hybrid-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--c-accent), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--c-accent), transparent 70%);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--c-accent);
}
.organisation-container .hybrid-mode-badge i {
  font-size: 18px;
}

.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, .agent-update-settings-container, .laps-settings-container {
  max-width: 300px;
}

.windows-updates-settings-container {
  max-width: 600px;
}

@media (max-width: 600px) {
  .danger-zone-container md-button.btn-red {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }
}
.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-never-expires {
  display: flex;
  color: var(--c-accent);
}
.api-container .api-key-upcoming {
  display: flex;
}
.api-container .api-key-upcoming i {
  margin-right: 5px;
}

.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 {
  margin-top: 10px;
}
.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", 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", 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;
}

.page-not-found-container .page-not-found-title {
  color: var(--c-brand);
  font-size: 100px;
  margin-bottom: 0;
}
.page-not-found-container .page-not-found-subtitle {
  font-size: 50px;
  margin-top: 0;
}

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

.role-selector .roles-container {
  margin-top: 20px;
}
.role-selector .roles-container .module-container {
  margin-right: 50px;
}
.role-selector .roles-container .module-container .module-name {
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
}
.role-selector .roles-container .module-container .select-module-checkbox {
  font-weight: bold;
  margin-bottom: -15px;
  font-size: 16px;
}
.role-selector .roles-container .module-container .module-list {
  list-style-type: none;
  padding-left: 10px;
}
.role-selector .roles-container .module-container .module-list li {
  margin: 0;
  height: 30px;
}
.role-selector .roles-container .module-container .module-list li md-checkbox {
  margin: 0;
}
.role-selector .roles-container .module-container .module-list .role-info-icon {
  font-size: 15px;
  margin: 2px;
}
.role-selector .remote-access-only-container {
  margin-top: 20px;
}
.role-selector .remote-access-only-container md-divider {
  margin-top: 25px;
  margin-bottom: 15px;
}
.role-selector .remote-access-only-container .toggle-box-content {
  padding: 8px;
}

.role-rights-dialog .role-description {
  text-align: center;
}
.role-rights-dialog .table-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.role-rights-dialog .table-bordered tbody tr:last-child td {
  border-bottom: none;
}

.update-state {
  width: 22px;
  cursor: pointer;
}
.update-state.optional {
  background-color: var(--c-brand-muted) !important;
}
.update-state.ok {
  background-color: var(--c-success) !important;
}
.update-state.warning {
  background-color: var(--c-accent) !important;
}
.update-state.error {
  background-color: var(--c-danger) !important;
}
.update-state.unknown {
  background-color: var(--c-neutral) !important;
}

.network-device-detail-container .ports-table {
  margin-top: 20px;
}
.network-device-detail-container .ports-table md-checkbox {
  margin-bottom: 0;
  min-height: 20px;
}
.network-device-detail-container .ports-table md-checkbox .md-container {
  margin-top: 11px;
}
.network-device-detail-container .ports-table .endpoint-container {
  line-height: 24px;
}
.network-device-detail-container .ports-table .endpoint-container .endpoint-path-container {
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
}
.network-device-detail-container .ports-table .hardware-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.network-device-detail-container .ports-table .hardware-list .hardware-item .hardware-item-title {
  line-height: 24px;
}

.network-device-groups .action-container {
  margin-bottom: -20px;
}

.networkreport-map {
  width: 100%;
  height: calc(100vh - 280px);
}

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

.building-plan table > tbody > tr:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.building-plan table > tbody > tr > td:first-child {
  border-right: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  color: var(--c-ink);
  width: 170px;
  padding: 15px;
  font-size: 16px;
  text-align: center;
}
.building-plan table > tbody > tr > td:first-child .headline {
  text-align: center;
}
.building-plan table > tbody > tr > td:first-child .add-icon {
  padding: 8px 0;
}
.building-plan table > tbody > tr:first-child > td {
  border-top: none;
}
.building-plan table > tbody > tr > td {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
}
.building-plan table > tbody > tr > td .node {
  background: var(--c-neutral) none;
  border-radius: 6px;
  color: var(--c-on-fill);
  margin: 5px;
}
.building-plan table > tbody > tr > td .node.selected {
  background-color: var(--c-brand-muted);
}
.building-plan table > tbody > tr > td .node.placeholder {
  border: 1px solid var(--c-success);
  color: var(--c-success) !important;
  background-color: var(--c-surface);
}
.building-plan table > tbody > tr > td .node.placeholder:hover {
  background-color: var(--c-success);
  color: var(--c-on-fill) !important;
}
.building-plan table > tbody > tr > td .node .node-title {
  padding: 8px;
}
.building-plan table > tbody > tr > td .node .node-title .endpoint-not-connected {
  background-color: var(--c-accent);
  margin: 0 0 0 10px;
  border-radius: 6px;
  padding: 0 2px;
}
.building-plan table > tbody > tr > td .node .node-title .endpoint-connected {
  background-color: var(--c-brand);
  margin: 0 10px;
  border-radius: 6px;
  padding: 0 2px;
}
.building-plan table > tbody > tr > td .node .divider {
  width: 1px;
  background-color: var(--c-surface);
}
.building-plan table > tbody > tr > td .node .more-icon {
  padding-top: 6px;
}
.building-plan table > tbody > tr > td .no-entries {
  padding: 13px;
}
.building-plan table > tbody > tr > td .loading-data {
  margin: 8px;
}
.building-plan table > tbody > tr > td .loading-data md-progress-circular path {
  stroke: var(--c-ink);
}

.edit-endpoints-dialog .endpoints-info-wrapper .title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 15px;
}
@media (min-width: 600px) {
  .edit-endpoints-dialog .endpoints-info-wrapper .cable-wrapper {
    padding: 0 20px;
    margin: 0 20px;
    border-left: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
    border-right: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  }
}
.edit-endpoints-dialog .endpoint-right-wrapper .title i {
  margin-top: 5px;
}

.site-selector .site-selector-headline {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 20px 0 20px;
}
.site-selector .site {
  padding: 12px;
  background-color: var(--c-accent);
  color: var(--c-on-fill);
  font-size: 16px;
  font-weight: bold;
  margin: 6px;
  min-width: 145px;
  text-align: center;
  border-radius: 6px;
}

@media (min-width: 600px) {
  .user-feedback-dialog .disable-user-feedback-checkbox {
    margin-top: 8px;
  }
}
.user-feedback-dialog .feedback-textarea {
  white-space: pre-wrap;
}

.feedback-fab-container {
  display: none;
}

@media (min-width: 960px) {
  .feedback-fab-container {
    display: block;
  }
  .feedback-fab-container .feedback-fab.md-button.md-fab {
    background-color: var(--c-brand);
    position: absolute;
    bottom: 55px;
    right: 0;
    display: none;
    z-index: 100;
  }
  .feedback-fab-container .feedback-fab.md-button.md-fab md-icon {
    color: var(--c-on-fill);
  }
}
.active-directory .tree-view-wrapper {
  position: fixed;
  padding-right: 20px;
  background-color: var(--c-surface-sunken);
  z-index: 1;
}
.active-directory .tree-view-wrapper .ad-search {
  margin: 0;
  padding: 10px 0 15px 10px;
  z-index: 2;
  position: sticky;
  top: 0;
  background-color: var(--c-surface-sunken);
}
.active-directory .tree-view-wrapper .treeview-item .treeview-item-label-container {
  padding-left: 15px;
}
.active-directory .tree-view-wrapper .treeview-item .treeview-item-label-container.sub-items {
  margin-left: 15px;
  padding-left: 0;
}
.active-directory .tree-view-wrapper .treeview-item .treeview-item-label-container md-checkbox {
  min-height: 22px;
}
.active-directory .tree-view-wrapper .treeview-item .treeview-item-label-container md-checkbox .md-container {
  margin: 10px;
}
.active-directory .tree-view-wrapper .treeview-item .treeview-item-label-container .item-label {
  margin-left: 10px;
}
.active-directory .tree-view-wrapper .treeview-item .treeview-item-label-container .item-label .sync-icon {
  font-size: 12px;
  margin: 5px 2px;
}
.active-directory .ou-entries-wrapper {
  margin-top: 20px;
}
.active-directory .no-ad-entries-found-container {
  text-align: center;
  margin-top: 20px;
}
.active-directory .no-ad-entries-found-container .no-items-found-header {
  font-size: 30px;
}

.active-directory-ou-dialog .add-member-btn {
  min-width: 60px;
}

.ad-select-site-dialog md-input-container {
  margin-bottom: 0;
}

.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 .device-state {
  height: 12px;
  width: 12px;
}
.hardware-detail-view-dialog md-dialog-content .md-dialog-content > div .open-last-search-job-icon {
  float: right;
}

.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;
  height: 420px;
  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: 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;
}

.advanced-filter-dialog md-dialog-content {
  overflow: hidden;
  width: 1200px;
}
.advanced-filter-dialog md-dialog-content .split-dialog-nav-content .filter-library-heading {
  padding-left: 20px;
  font-weight: bold;
  margin-top: 50px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  margin-bottom: 0;
  padding-bottom: 10px;
}
.advanced-filter-dialog md-dialog-content .split-dialog-nav-content md-checkbox {
  min-height: 0;
  margin-top: 2px;
  margin-left: 10px;
}
.advanced-filter-dialog md-dialog-content .split-dialog-nav-content md-checkbox .md-container {
  margin-top: 10px;
}
.advanced-filter-dialog md-dialog-content .split-dialog-nav-content md-checkbox .md-label {
  margin-top: -5px;
  margin-left: 30px;
}
.advanced-filter-dialog md-dialog-content .split-dialog-nav-content .material-icons {
  margin-left: 10px;
}
.advanced-filter-dialog md-dialog-content .split-dialog-content .filter-name {
  margin: 0 0 15px 0;
}

.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: 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 {
  padding: 15px 10px 25px;
  /* .whiteframe supplies the white background + radius; the grid spacing comes from its
     5px margin, so cards line up with the rest of the app */
}
.integrations-catalog .integrations-catalog-toolbar {
  margin-bottom: 20px;
}
.integrations-catalog .integrations-catalog-section {
  margin-bottom: 25px;
}
.integrations-catalog .integrations-catalog-section:last-child {
  margin-bottom: 0;
}
.integrations-catalog .integrations-catalog-section-title {
  display: flex;
  align-items: center;
  margin: 0 0 8px 5px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integrations-catalog .integrations-catalog-section-title .integrations-catalog-section-count {
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--c-ink), transparent 90%);
  font-size: 11px;
  letter-spacing: 0;
}
.integrations-catalog .integration-card {
  flex: 1 1 320px;
  max-width: 420px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 14px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.integrations-catalog .integration-card:hover {
  border-color: color-mix(in srgb, var(--c-brand), transparent 65%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.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 {
  margin-bottom: 10px;
}
.integrations-catalog .integration-card .integration-card-titles {
  min-width: 0;
}
.integrations-catalog .integration-card .integration-card-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
.integrations-catalog .integration-card .integration-card-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.integrations-catalog .integration-card .integration-card-description {
  font-size: 13px;
  line-height: 18px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}
.integrations-catalog .integrations-catalog-empty {
  margin: 10px 5px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}

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

/* the storage provider create/edit form: one column of full-width fields grouped in simple-cards */
.storage-provider-form {
  padding: 15px 0 25px;
  max-width: 780px;
  /* the cards carry .whiteframe, whose 5px margin has to be matched here so the header rule lines
     up with the card edges */
  /* .whiteframe already supplies the white background, radius and 5px spacing */
  /* md-input-container is an inline-block, so it only fills its row when it is a direct flex child
     of the layout="column" - the type-driven fields sit inside ng-repeat wrappers and would
     otherwise shrink to their content */
  /* the card body is sized for the fixed-height dashboard tiles; here it grows with the form, and
     the top padding is left to the first field's margin */
  /* Material only dims the label of a field that has a value, so empty fields would render theirs
     in full black and read as emphasised; the focused and invalid colours are more specific and
     still win over this */
  /* hugs the control it describes; the next field brings its own top margin */
  /* md-checkbox keeps Material's 48px touch target, which already centres its label with plenty of
     air, so it needs less margin than a labelled input - and a hint below it has to be pulled back
     up to sit with the label instead of with the bottom of the target */
}
.storage-provider-form .integration-detail-header {
  margin: 0 5px 10px;
}
.storage-provider-form .simple-card {
  margin-bottom: 10px;
}
.storage-provider-form md-input-container {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* the floated label is positioned above the input box, so the top margin has to carry both the
     label and the gap to whatever comes before it */
  margin: 26px 0 0;
}
.storage-provider-form .simple-card-body {
  overflow: visible;
  max-height: none;
  padding-top: 0;
}
.storage-provider-form md-input-container label:not(.md-no-float) {
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.storage-provider-form .required-marker {
  margin-left: 2px;
  color: var(--c-danger);
}
.storage-provider-form .field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.storage-provider-form md-checkbox {
  margin: 8px 0 0;
}
.storage-provider-form md-checkbox + .field-hint {
  margin-top: -10px;
}
.storage-provider-form .storage-provider-empty-hint {
  padding: 4px 0 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.storage-provider-form .storage-provider-test-result {
  display: flex;
  align-items: flex-start;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 18px;
}
.storage-provider-form .storage-provider-test-result .material-icons {
  font-size: 16px;
  margin-right: 6px;
}
.storage-provider-form .storage-provider-test-result.is-success {
  background-color: color-mix(in srgb, var(--c-success), transparent 88%);
  color: var(--c-success);
}
.storage-provider-form .storage-provider-test-result.is-error {
  background-color: color-mix(in srgb, var(--c-danger), transparent 90%);
  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;
}

.margin-small {
  margin: 2px 0;
}

.margin-top-small {
  margin-top: 6px;
}

.organisation-dashboard-dialog md-dialog-content {
  background-color: var(--c-surface-sunken);
}

.billing {
  margin-top: 20px;
}
.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);
}

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

.software-report .software-table {
  margin-top: 10px;
}

.software-info-autocomplete.md-autocomplete-suggestions-container {
  margin-top: 2em;
  width: auto;
}

.select-software-dialog .software-search {
  margin: 0 0 10px 0;
}

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

.select-action-content .action-btn {
  background-color: var(--c-surface);
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
  border: 1px solid var(--c-neutral);
  min-width: 90px;
  padding: 4px 8px;
  margin: 2px 0;
  font-size: 13px;
}

.tags-container {
  /* 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 6px 8px;
  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;
}

.first-time-user-container {
  padding: 24px 0;
  max-width: 1400px;
}
.first-time-user-container .getting-started-header {
  margin-bottom: 28px;
}
.first-time-user-container .getting-started-header .getting-started-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--c-brand);
  margin: 0 0 4px 0;
}
.first-time-user-container .getting-started-header .getting-started-subtitle {
  font-size: 14px;
  color: var(--c-brand-muted);
  margin: 0;
  font-weight: 400;
}
.first-time-user-container .getting-started-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}
.first-time-user-container .getting-started-card {
  background: var(--c-surface);
  border-radius: 6px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-shadow), transparent 88%), 0 1px 2px color-mix(in srgb, var(--c-shadow), transparent 91.6%);
  padding: 24px;
  border-left: 4px solid var(--c-brand);
  transition: box-shadow 0.2s ease;
}
.first-time-user-container .getting-started-card:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-shadow), transparent 88%), 0 2px 4px color-mix(in srgb, var(--c-shadow), transparent 91.6%);
}
.first-time-user-container .getting-started-card .card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-neutral), transparent 50%);
}
.first-time-user-container .getting-started-card .card-header .card-header-icon {
  color: var(--c-brand);
  font-size: 28px;
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.first-time-user-container .getting-started-card .card-header .card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--c-brand);
}
.first-time-user-container .getting-started-card .card-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.first-time-user-container .getting-started-card .card-links li {
  margin-bottom: 4px;
}
.first-time-user-container .getting-started-card .card-links li:last-child {
  margin-bottom: 0;
}
.first-time-user-container .getting-started-card .card-links li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 44px;
}
.first-time-user-container .getting-started-card .card-links li a:hover {
  background-color: color-mix(in srgb, var(--c-info), transparent 94%);
}
.first-time-user-container .getting-started-card .card-links li a:hover .link-arrow {
  opacity: 1;
  transform: translateX(2px);
}
.first-time-user-container .getting-started-card .card-links li a:hover .link-label {
  color: var(--c-info);
}
.first-time-user-container .getting-started-card .card-links li a > i.material-icons:first-child {
  color: var(--c-info);
  font-size: 22px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  flex-shrink: 0;
}
.first-time-user-container .getting-started-card .card-links li a .link-content {
  flex: 1;
  min-width: 0;
}
.first-time-user-container .getting-started-card .card-links li a .link-content .link-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  transition: color 0.15s ease;
}
.first-time-user-container .getting-started-card .card-links li a .link-content .link-description {
  display: block;
  font-size: 12px;
  color: var(--c-brand-muted);
  margin-top: 2px;
  line-height: 1.3;
}
.first-time-user-container .getting-started-card .card-links li a .link-arrow {
  color: var(--c-brand-muted);
  opacity: 0;
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  flex-shrink: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

@media (max-width: 768px) {
  .first-time-user-container .getting-started-header {
    margin-bottom: 24px;
  }
  .first-time-user-container .getting-started-header .getting-started-title {
    font-size: 24px;
  }
  .first-time-user-container .getting-started-header .getting-started-subtitle {
    font-size: 14px;
  }
  .first-time-user-container .getting-started-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .first-time-user-container .getting-started-card {
    padding: 20px;
  }
}
@media (max-width: 400px) {
  .first-time-user-container .getting-started-card {
    padding: 16px;
    border-radius: 6px;
  }
  .first-time-user-container .getting-started-card .card-links li a {
    padding: 10px 8px;
    gap: 10px;
  }
}
.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");
  }
}
.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 .mdc-datetime-picker-without-label {
  margin-top: 0;
}
.job-wizard .mdc-datetime-picker-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 .code-editor-toolbar {
  height: 40px;
  min-height: 40px;
  padding: 0 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background: var(--c-surface-sunken);
}
.script-editor .code-editor .code-editor-toolbar .md-icon-button {
  margin: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}
.script-editor .code-editor .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%);
}
.script-editor .code-editor .code-editor-toolbar .md-icon-button.active i.material-icons {
  color: var(--c-info);
}
.script-editor .code-editor .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%);
}
.script-editor .code-editor .ace-editor {
  position: relative;
  top: 0;
  width: 100%;
  height: calc(100% - 40px);
  font-size: 14px;
}
.script-editor .code-editor.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  margin: 0;
  border: none;
  border-radius: 0;
  z-index: 100;
}

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 {
  height: 80px;
}
.remote-waiting-notification.ui-notification .default-notification .waiting-message:after {
  font-size: 26px;
  content: " .";
  animation: dots 1s steps(5, end) infinite;
}
@keyframes dots {
  0%, 20% {
    color: color-mix(in srgb, var(--c-on-fill), transparent 100%);
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%);
  }
  40% {
    color: color-mix(in srgb, var(--c-on-fill), transparent 0%);
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%);
  }
  60% {
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 0%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 100%);
  }
  80%, 100% {
    text-shadow: 0.25em 0 0 color-mix(in srgb, var(--c-on-fill), transparent 0%), 0.5em 0 0 color-mix(in srgb, var(--c-on-fill), 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;
}

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

.global-search-container {
  text-align: center;
}
.global-search-container .top-search {
  margin-top: 0;
}
.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;
}
.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-warning-deep);
}
.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: linear-gradient(to right, var(--c-warning-wash-a), var(--c-warning-wash-b));
}
.task-actions-diagram .list-group-item.active-action-running {
  position: relative;
  isolation: isolate;
  border: 3px solid color-mix(in srgb, var(--c-warning), transparent 70%);
  border-radius: 6px;
  background: linear-gradient(to right, var(--c-warning-wash-a), var(--c-warning-wash-b));
}
.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-warning-deep) 72.7%, var(--c-warning) 78.3%, #ffe680 82.5%, var(--c-warning) 87.75%, var(--c-warning-deep) 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-warning);
  }
  .task-actions-diagram .list-group-item.active-action-running::before {
    display: none;
  }
}
.task-actions-diagram .list-group-item.active-action-finished {
  border: 3px solid var(--c-warning);
  border-radius: 6px;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--c-warning), transparent 75%);
  background: linear-gradient(to right, var(--c-warning-wash-a), var(--c-warning-wash-b));
}
.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;
}

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

.hardware-task-execution-info-dialog-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.hardware-task-execution-info-dialog-container > div {
  flex: 1;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog {
  width: 1600px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog.finished-with-error md-toolbar {
  background-color: var(--c-danger);
  color: var(--c-on-fill);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog.finished-without-error md-toolbar {
  background-color: var(--c-success);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content hardware-task-visualization-finished,
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content hardware-task-visualization-running {
  display: block;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-bar,
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-bar-mobile {
  padding: 8px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-items,
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-items-mobile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-items-mobile {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-icon {
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-icon-paused {
  color: var(--c-accent);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-label {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-info-value {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  font-variant-numeric: tabular-nums;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .status-badge-online {
  background-color: color-mix(in srgb, var(--c-success), transparent 88%);
  color: var(--c-success-deep);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .status-badge-online .status-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-success);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .status-badge-offline {
  background-color: color-mix(in srgb, var(--c-neutral), transparent 70%);
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .status-badge-offline .status-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-neutral);
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: color-mix(in srgb, var(--c-danger), transparent 92%);
  border-left: 3px solid var(--c-danger);
  border-radius: 4px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-error-icon {
  font-size: 18px;
  color: var(--c-danger);
  flex-shrink: 0;
  margin-top: 1px;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-error-text {
  font-size: 13px;
  color: var(--c-danger);
  font-weight: 500;
  line-height: 1.4;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-error-text .clickable-action {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.hardware-task-execution-info-dialog-container .hardware-task-execution-info-dialog md-dialog-content .header-error-text .clickable-action:hover {
  text-decoration: none;
  opacity: 0.8;
}

.debug-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  padding: 4px 10px;
  background-color: color-mix(in srgb, var(--c-neutral), transparent 80%);
  text-transform: uppercase;
}

.debug-toolbar-label {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.debug-toolbar-buttons {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: var(--c-surface);
  border: 1px solid var(--c-neutral);
  border-radius: 6px;
  padding: 2px;
}

.debug-btn {
  margin: 0 !important;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 4px;
  border-radius: 3px;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.debug-btn md-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.debug-btn:hover:not([disabled]) {
  background-color: color-mix(in srgb, var(--c-brand), transparent 92%);
}
.debug-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.debug-step-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  font-variant-numeric: tabular-nums;
}

.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);
}
.hardware-task-visualization.has-content-height task-actions-diagram {
  max-height: var(--content-height);
  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) - 100px);
  max-height: calc(var(--content-height) - 100px);
  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 md-tabs {
    height: auto;
  }
  .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: "Courier New", Courier, 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;
}

.columns-dialog .column-entry {
  padding: 2px 0 2px 0;
}
.columns-dialog .filter-container {
  margin: -15px 0;
}
.columns-dialog .filter-container .filter-input-container {
  width: 230px;
  margin: 0;
}
.columns-dialog .category-container {
  margin: 5px;
  width: 230px;
}
.columns-dialog .category-container .category-columns-list {
  list-style-type: none;
  padding: 0;
}
.columns-dialog .category-container .category-columns-list md-checkbox {
  min-height: 30px;
}
.columns-dialog .category-container .category-columns-list .group-container .group-columns-list {
  list-style-type: none;
}
.columns-dialog .category-container .category-columns-list .group-container .group-toggle-container.selection-enabled i {
  margin-top: 8px;
}

.job-table .job-table-active-switch {
  height: 20px;
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 0;
}
.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;
}

.new-automation-entry {
  display: inline-block;
}
.new-automation-entry i {
  color: var(--c-accent);
  position: relative;
  left: 5px;
  bottom: 1px;
  float: right;
}

.loading-background {
  width: 100%;
  height: 100%;
  background-color: var(--c-surface-sunken);
  z-index: 10100;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  border: none;
  display: table-cell;
  vertical-align: middle;
  min-height: 10em;
  text-align: center;
}
.loading-background.transparent {
  background-color: color-mix(in srgb, var(--c-neutral), transparent 40%) !important;
}
.loading-background .progress-container {
  margin-top: -150px;
}
.loading-background .progress-container .progress-item {
  margin-bottom: 10px;
}
.loading-background .progress-container .progress-item .linear-progress {
  width: 300px;
  border: 1px solid;
  border-radius: 6px;
  background-color: var(--c-neutral);
  height: 30px;
}
.loading-background .progress-container .progress-item .linear-progress .progress-bar {
  color: var(--c-on-fill);
  font-size: 16px;
  padding: 4px;
  background-color: var(--c-brand);
}

.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 {
  margin-top: 15px;
}
.affiliate-program-container .invitation-link-container {
  width: 800px;
}
.affiliate-program-container .copy-button {
  margin-left: 5px;
  margin-top: 15px;
  height: 20px;
}
.affiliate-program-container .generate-button {
  width: 100px;
  margin-left: 0;
}

.organisation-tree-selector md-dialog-content {
  margin: 10px;
}

@media (min-width: 600px) {
  .create-organisation-dialog md-dialog-content {
    min-width: 400px;
  }
}

.organisation-selector .organisation-selector-search {
  margin: 0 0 8px 0;
}
.organisation-selector .organisation-selector-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.organisation-selector .organisation-selector-hint {
  white-space: nowrap;
}
.organisation-selector .organisation-selector-empty {
  margin: 8px 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.organisation-selector .organisation-selector-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.organisation-selector .organisation-selector-row {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.35;
}
.organisation-selector .organisation-selector-row + .organisation-selector-row {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 90%);
}
.organisation-selector .organisation-selector-row.is-active {
  background: color-mix(in srgb, var(--c-brand), transparent 92%);
  box-shadow: inset 3px 0 0 var(--c-brand);
}
.organisation-selector .organisation-selector-row mark {
  background: color-mix(in srgb, var(--c-accent), transparent 72%);
  color: inherit;
  padding: 0;
}
.organisation-selector .organisation-selector-name {
  overflow-wrap: anywhere;
}
.organisation-selector .organisation-selector-current {
  margin-left: 8px;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}

.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. */
}
.infinite-table-container .table.infinite-table tbody tr td .tag {
  margin: 0 2px;
}
.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;
}

.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 table.table {
  border-collapse: collapse;
}
.hardware-selection-view table.table tbody:not(:last-child) {
  border: none;
}

.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 .info-icon {
  float: right;
}
.policy-execution-info .conditions-box .conditions-header {
  font-size: 15px;
}
.policy-execution-info .conditions-box .toggle-box-content {
  padding: 8px;
}
.policy-execution-info .conditions-box .toggle-box-content .condition-flag-text {
  margin-top: 10px;
}
.policy-execution-info .conditions-box .toggle-box-content .divider {
  border-top: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  margin: 0 -8px 10px -8px;
}
.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);
}

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

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: "⤧";
}

.hardware-secrets-dialog .hardware-secrets-table tr td {
  padding: 10px 5px 10px 0;
  vertical-align: middle;
}
.hardware-secrets-dialog .hardware-secrets-table tr td md-input-container {
  display: block;
  width: 100%;
  margin: 0;
  height: 30px;
  padding: 0 2px;
}
.hardware-secrets-dialog .hardware-secrets-table tr td .system-secret {
  padding-left: 2px;
}
.hardware-secrets-dialog .hardware-secrets-table tr td .system-secret .secret-label {
  font-weight: bold;
}
.hardware-secrets-dialog .hardware-secrets-table tr td .secret-input .custom-input-container {
  margin: 0;
}
.hardware-secrets-dialog .hardware-secrets-table tr td .secret-action-container {
  position: relative;
  top: 2px;
  padding-left: 5px;
}
.hardware-secrets-dialog .hardware-secrets-table tbody {
  border-top: 10px solid white;
}

.history-entry {
  margin: 5px 0 5px 0;
}
.history-entry .entry-date {
  font-weight: bold;
  font-size: 16px;
}
.history-entry .entry-details .entry {
  display: flex;
}
.history-entry .entry-details .entry .entry-key {
  font-weight: bold;
  margin-right: 10px;
  width: 100px;
}
.history-entry .entry-details .entry .entry-value {
  flex-grow: 1;
}
.history-entry .entry-details .entry .entry-value .secret-input .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;
}

.msp-report .msp-kpi-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0 0 0;
  margin-bottom: 0;
}
.msp-report .msp-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  min-width: 160px;
  flex: 1;
  transition: box-shadow 0.2s ease;
}
.msp-report .msp-kpi-card:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 86%);
}
.msp-report .msp-kpi-card .msp-kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-surface-sunken);
}
.msp-report .msp-kpi-card .msp-kpi-icon .material-icons {
  font-size: 22px;
  color: var(--c-brand-muted);
}
.msp-report .msp-kpi-card .msp-kpi-content {
  display: flex;
  flex-direction: column;
}
.msp-report .msp-kpi-card .msp-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}
.msp-report .msp-kpi-card .msp-kpi-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.msp-report .msp-kpi-card--critical .msp-kpi-icon {
  background: color-mix(in srgb, var(--c-danger), transparent 90%);
}
.msp-report .msp-kpi-card--critical .msp-kpi-icon .material-icons {
  color: var(--c-danger);
}
.msp-report .msp-kpi-card--critical.msp-kpi-card--alert {
  border-color: var(--c-danger);
}
.msp-report .msp-kpi-card--critical.msp-kpi-card--alert .msp-kpi-value {
  color: var(--c-danger);
}
.msp-report .msp-kpi-card--warning .msp-kpi-icon {
  background: color-mix(in srgb, var(--c-accent), transparent 90%);
}
.msp-report .msp-kpi-card--warning .msp-kpi-icon .material-icons {
  color: var(--c-accent);
}
.msp-report .msp-kpi-card--warning.msp-kpi-card--alert {
  border-color: var(--c-accent);
}
.msp-report .msp-kpi-card--warning.msp-kpi-card--alert .msp-kpi-value {
  color: var(--c-accent);
}
.msp-report .msp-kpi-card--healthy .msp-kpi-icon {
  background: color-mix(in srgb, var(--c-success), transparent 90%);
}
.msp-report .msp-kpi-card--healthy .msp-kpi-icon .material-icons {
  color: var(--c-success);
}
.msp-report .msp-kpi-card--healthy .msp-kpi-value {
  color: var(--c-success);
}
.msp-report .msp-kpi-card--devices .msp-kpi-icon {
  background: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.msp-report .msp-kpi-card--devices .msp-kpi-icon .material-icons {
  color: var(--c-brand);
}
.msp-report .msp-kpi-card--organisations .msp-kpi-icon {
  background: color-mix(in srgb, var(--c-info), transparent 90%);
}
.msp-report .msp-kpi-card--organisations .msp-kpi-icon .material-icons {
  color: var(--c-info);
}
.msp-report .msp-org-cell {
  padding: 4px 0;
}
.msp-report .msp-org-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--c-brand);
  text-decoration: none;
}
.msp-report .msp-org-name:hover {
  text-decoration: underline;
}
.msp-report .msp-org-devices {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-top: 2px;
}
.msp-report .msp-all-clear {
  padding: 8px 12px;
  width: 100%;
  min-height: 58px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-success), transparent 92%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.msp-report .msp-all-clear-icon {
  font-size: 18px !important;
  color: var(--c-success);
}
.msp-report .msp-all-clear-text {
  font-size: 13px;
  color: var(--c-success);
  font-weight: 500;
}
.msp-report .msp-report-stats-container .stats-category {
  border-radius: 6px;
}
.msp-report .msp-report-stats-container .stats-item {
  margin-right: 8px;
}
.msp-report .msp-report-stats-container .stats-item--clickable {
  cursor: pointer;
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content {
  padding: 8px 12px;
  min-width: 52px;
  border-radius: 6px;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content .stats-label {
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content .stats-value {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-critical, .msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-alert {
  background-color: var(--c-danger);
  color: var(--c-on-fill);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-critical:hover, .msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-alert:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-danger), transparent 60%);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-warning {
  background-color: var(--c-accent);
  color: var(--c-on-fill);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-warning:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-accent), transparent 60%);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-notification {
  background-color: var(--c-info);
  color: var(--c-on-fill);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-notification:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-info), transparent 60%);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-information {
  background-color: var(--c-brand-muted);
  color: var(--c-on-fill);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-information:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-brand-muted), transparent 60%);
}
.msp-report .msp-report-stats-container .stats-item .stats-item-content.priority-level-none {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  background-color: var(--c-surface-sunken);
}

@media (max-width: 768px) {
  .msp-report .msp-kpi-header {
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
  }
  .msp-report .msp-kpi-card {
    min-width: unset;
  }
}
.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;
}

.cron-condition-builder .cron-condition-wrapper {
  margin-top: 10px;
}

.agent-page md-tabs .md-tab {
  text-align: center;
}
.agent-page .instruction-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-brand);
  letter-spacing: 0.2px;
  margin: 18px 0 8px;
}
.agent-page .instruction-title:first-child {
  margin-top: 4px;
}
.agent-page .download-row {
  display: flex;
  justify-content: center;
}
.agent-page .btn-download-primary {
  min-height: 48px;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  margin: 8px auto 4px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-brand), transparent 72%);
  flex-wrap: wrap;
}
.agent-page .btn-download-primary i.material-icons {
  margin: 0 10px 0 0;
  font-size: 22px;
}
.agent-page .btn-download-primary .download-version {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.85;
}
.agent-page .btn-download-primary:hover:not([disabled]) {
  background-color: var(--c-brand);
  color: var(--c-on-fill) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-brand), transparent 62%);
}
.agent-page .instruction-helper-text {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin: -4px 0 8px;
}
.agent-page .connection-file-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
}
.agent-page .connection-file-container a {
  color: var(--c-brand);
  font-weight: 500;
}
.agent-page md-divider {
  margin-top: 30px;
  margin-bottom: 10px;
}
.agent-page md-divider.divider-for-generic {
  margin-top: 15px;
  margin-bottom: 15px;
}
.agent-page .windows-download-instructions-container {
  padding: 15px;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
}
.agent-page .windows-download-instructions-container .advanced-options-container {
  margin-top: 20px;
}
.agent-page .linux-download-instructions-container {
  padding: 15px;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
}
.agent-page .macos-download-instructions-container {
  padding: 15px;
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
}
.agent-page md-tabs .md-tab {
  color: var(--c-ink);
}
.agent-page md-tabs .md-tab .tab-label-badge.tab-badge-new {
  border-color: var(--c-success);
  color: var(--c-success);
}
.agent-page md-tabs .md-tab .tab-label-badge.tab-badge-coming-soon {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.agent-auto-update-config-dialog .config-selection-container {
  margin: 0;
  padding: 0;
}

.changelog-list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
}

.changelog-entry {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 92%);
  border-radius: 6px;
}

.changelog-header {
  gap: 8px;
}
.changelog-header .changelog-version {
  font-size: 14px;
}

.chip {
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-ink), transparent 92%);
  margin-left: 6px;
}

.release-notes {
  margin: 8px 0 0 20px;
}

.agent-page .advanced-options-container, .agent-page .agent-changelog {
  margin-top: 10px !important;
}
.agent-page collapsible.advanced-options-container, .agent-page collapsible.agent-changelog {
  margin-top: 10px !important;
}

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

.choco-bundle-page fieldset {
  max-width: 400px;
}
.choco-bundle-page .add-package-button {
  height: 40px;
  top: 4px;
}
.choco-bundle-page .choco-packages-container {
  max-width: 600px;
  margin-top: 20px;
}
.choco-bundle-page .choco-packages-container md-input-container {
  width: 80%;
}

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

.non-custom-cron-input-container {
  display: flex;
  align-items: flex-end;
  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;
}
.non-custom-cron-input-container .max-runtime-endtime-input {
  margin-bottom: 0;
}

cron-expression-generator {
  width: 100%;
}

.cron-generator-wrapper .max-runtime-slider-container {
  width: 100%;
}
.cron-generator-wrapper .max-runtime-slider-container span {
  max-width: 150px;
}
.cron-generator-wrapper .max-runtime-slider-container input {
  min-width: 60px;
  max-width: 60px !important;
}
.cron-generator-wrapper .max-runtime-input-container {
  max-width: 60px !important;
}
.cron-generator-wrapper .rdbtn-text {
  white-space: nowrap;
}
@media (min-width: 600px) {
  .cron-generator-wrapper .cron-condition-tab {
    height: 830px;
  }
}
.cron-generator-wrapper .validate-button {
  margin-top: 15px;
}
.cron-generator-wrapper md-checkbox {
  min-height: 53px;
}
.cron-generator-wrapper md-checkbox .md-label {
  margin-left: 25px;
  margin-right: 12px;
}
.cron-generator-wrapper .container-rows {
  line-height: 40px;
}
.cron-generator-wrapper .checkbox-row {
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
}
.cron-generator-wrapper .checkbox-row .checkboxes {
  margin-left: 30px;
}
.cron-generator-wrapper .cron-expression-container {
  margin-bottom: 20px;
  margin-top: 10px;
}
.cron-generator-wrapper .cron-expression-container .cron-expression-header {
  margin-left: auto;
  margin-right: auto;
}
.cron-generator-wrapper .cron-expression-container .cron-expression {
  margin-left: auto;
  margin-right: auto;
}
.cron-generator-wrapper .cron-expression-container .cron-expression.blue {
  color: var(--c-brand);
}

@media (min-width: 600px) {
  .wizard-dialog.cron-settings-dialog {
    width: 70%;
    height: 80%;
  }
}

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

.job-summary-list .job-summary-list-entry {
  font-weight: bold;
}
.job-summary-list .job-summary-list-entry.success {
  color: var(--c-success);
}
.job-summary-list .job-summary-list-entry.warning {
  color: var(--c-accent);
}
.job-summary-list .job-summary-list-entry.error {
  color: var(--c-danger);
}

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

.alert-page {
  max-width: 1000px;
}
.alert-page .alert-description {
  margin-top: 20px;
}
.alert-page .alert-description-severity {
  margin-top: 15px;
}
.alert-page .disk-space-alert-config-table {
  min-width: 100%;
  border-collapse: initial;
}
.alert-page .disk-space-alert-config-table .first-column {
  width: 30%;
}
.alert-page .disk-space-alert-config-table .second-column {
  width: 60%;
}
.alert-page .disk-space-alert-config-table .third-column {
  width: 10%;
}
.alert-page .disk-space-alert-config-table td:first-child {
  width: 220px;
}
.alert-page .disk-space-alert-config-table .filter-drives-selection {
  margin-bottom: -10px;
}
.alert-page .disk-space-alert-config-table .drive-letter-selection {
  width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
}
.alert-page .disk-space-alert-config-table td:last-child {
  width: 80px;
  text-align: right;
}
.alert-page .disk-space-alert-config-table td:last-child md-input-container {
  padding: 0;
  margin: 0 0 0 10px;
}
.alert-page .disk-space-alert-config-table td:last-child md-input-container input {
  appearance: textfield;
  font-size: 14px;
}
.alert-page .disk-space-alert-config-table td:last-child span {
  position: relative;
  top: 4px;
}
.alert-page .windows-update-missing-alert-config-table {
  min-width: 100%;
}
.alert-page .windows-update-missing-alert-config-table td:first-child {
  width: 70px;
}
.alert-page .windows-update-missing-alert-config-table td:nth-child(2) {
  width: 300px;
}
.alert-page .windows-update-missing-alert-config-table td:last-child {
  width: 40px;
  text-align: right;
}
.alert-page .single-number-alert-config-table {
  min-width: 100%;
}
.alert-page .single-number-alert-config-table td:first-child {
  width: 150px;
}
.alert-page .single-number-alert-config-table td:last-child {
  width: 40px;
  text-align: right;
}

.administration-alerts .infinite-table-action-buttons {
  width: 105px;
}
.administration-alerts value-indicator {
  width: 70px;
  margin: auto;
}

.alert-contact-page {
  max-width: 1000px;
}

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

.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 {
  margin-top: 10px;
}
.settings-container .settings-detail-container .toggle-box {
  max-width: 1000px;
}
.settings-container .settings-detail-container .toggle-box .setting {
  padding: 10px;
}

.automation-execution-mode-settings-container .execution-mode-description {
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  font-size: 14px;
}
.automation-execution-mode-settings-container .execution-mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.automation-execution-mode-settings-container .execution-mode-card {
  border: 1px solid var(--c-neutral);
  border-radius: 6px;
  padding: 24px;
  cursor: pointer;
  background: var(--c-surface);
  position: relative;
  min-height: 160px;
  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;
}
.automation-execution-mode-settings-container .execution-mode-card:hover {
  border-color: var(--c-brand-muted);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.automation-execution-mode-settings-container .execution-mode-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%);
}
.automation-execution-mode-settings-container .execution-mode-card--selected:hover {
  border-color: var(--c-brand);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.automation-execution-mode-settings-container .execution-mode-card--selected .execution-mode-card__icon {
  opacity: 1;
}
.automation-execution-mode-settings-container .execution-mode-card--selected .execution-mode-card__title {
  color: var(--c-brand);
}
.automation-execution-mode-settings-container .execution-mode-card--selected .execution-mode-card__description {
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
}
.automation-execution-mode-settings-container .execution-mode-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.automation-execution-mode-settings-container .execution-mode-card__icon {
  font-size: 36px;
  color: var(--c-brand);
  opacity: 0.7;
}
.automation-execution-mode-settings-container .execution-mode-card__check i {
  color: var(--c-brand);
  font-size: 22px;
}
.automation-execution-mode-settings-container .execution-mode-card__title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
}
.automation-execution-mode-settings-container .execution-mode-card__description {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  line-height: 1.5;
}

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

.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 .hardware-not-started {
  color: var(--c-brand-muted);
}
.task-execution-info .infinite-table-wrapper .hardware-not-started-job-finished {
  color: var(--c-accent);
}
.task-execution-info .infinite-table-wrapper .hardware-running {
  color: var(--c-accent);
}
.task-execution-info .infinite-table-wrapper .hardware-waiting {
  color: var(--c-brand-muted);
}
.task-execution-info .infinite-table-wrapper .hardware-finished {
  color: var(--c-success);
}
.task-execution-info .infinite-table-wrapper .hardware-finished-with-error {
  color: var(--c-danger);
}
.task-execution-info .infinite-table-wrapper .hostname-container {
  display: flex;
  flex-direction: row;
}
.task-execution-info .infinite-table-wrapper .hostname-container .device-state-container {
  margin-right: 6px;
}

.job-execution-info .job-progress {
  position: fixed;
  top: 116px;
  margin-left: -20px;
}
.job-execution-info .job-progress .md-container {
  background-color: var(--c-brand-muted);
}
.job-execution-info .job-progress .md-container .md-bar {
  background-color: var(--c-brand-dark);
}
.job-execution-info .header-row {
  margin-top: 10px;
  margin-bottom: 6px;
}
.job-execution-info .header-row .header-info {
  margin-right: -20px;
}
.job-execution-info .header-row .header-info .header-entry {
  font-weight: bold;
}
.job-execution-info .header-row .header-info > * {
  margin-right: 20px;
  margin-bottom: 5px;
}
.job-execution-info .header-row .header-info .finished-text {
  margin-bottom: 10px;
}
.job-execution-info .header-row .header-placeholder {
  width: 20px;
  height: 10px;
}
.job-execution-info .header-row .header-btn {
  margin: 0;
  padding: 0 10px 1px 10px;
  min-height: 0;
  height: 20px;
  line-height: 0;
}
.job-execution-info md-tabs {
  margin-top: -10px;
  margin-bottom: 20px;
}

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

.device-state-icon {
  min-width: 29px;
}
.device-state-icon .material-icons {
  position: relative;
  float: left;
  bottom: 2px;
}
.device-state-icon .device-state-icon-background {
  position: relative;
  background-color: var(--c-surface);
  width: 18px;
  height: 12px;
  left: 3px;
  top: 2px;
}
.device-state-icon .device-state-icon-background.online {
  background-color: var(--c-brand-muted);
}
.device-state-icon .device-state {
  position: relative;
  left: 16px;
  top: -4px;
  height: 12px;
  width: 12px;
}

.device-state-text {
  margin-left: 4px;
}

.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-action-result-viewer-list {
  list-style-type: none;
  padding: 0;
}
.download-action-result-viewer-list li .list-item-title {
  position: sticky;
  top: 0;
  background: var(--c-neutral);
  padding: 5px;
  font-weight: bold;
}
.download-action-result-viewer-list li .list-item-title .download-successful {
  color: var(--c-success);
}
.download-action-result-viewer-list li .list-item-title .download-failed {
  color: var(--c-danger);
}
.download-action-result-viewer-list li ul {
  list-style-type: none;
  padding: 0;
  margin: 5px 0 5px 0;
}
.download-action-result-viewer-list li ul li .source-url {
  white-space: nowrap;
}
.download-action-result-viewer-list li ul li .source-url .source-failed {
  text-decoration: line-through;
}

.download-link-actions {
  padding: 10px 0 5px 0;
}
.download-link-actions .material-icons {
  margin-right: 8px;
  font-size: 20px;
}

.upload-action-result-viewer .list-item-title {
  position: sticky;
  top: 0;
  background: var(--c-neutral);
  padding: 5px;
  font-weight: bold;
}
.upload-action-result-viewer .list-item-title .upload-successful {
  color: var(--c-success);
}
.upload-action-result-viewer .list-item-title .upload-failed {
  color: var(--c-danger);
}
.upload-action-result-viewer .file-info-table {
  margin: 5px 0 5px 0;
}
.upload-action-result-viewer .upload-download-link-actions {
  padding: 10px 0 5px 0;
}
.upload-action-result-viewer .upload-download-link-actions .material-icons {
  margin-right: 8px;
  font-size: 20px;
}

.download-link-dialog {
  width: 700px;
  max-width: 90vw;
}
.download-link-dialog copy-to-clipboard-box {
  display: block;
}
.download-link-dialog .download-link-validity {
  padding-bottom: 5px;
}
.download-link-dialog .download-link-validity .download-link-validity-label {
  margin-right: 10px;
}
.download-link-dialog .download-link-validity md-input-container {
  margin: 0;
  min-width: 140px;
}
.download-link-dialog .download-link-regenerating {
  height: 40px;
  line-height: 40px;
  opacity: 0.7;
}
.download-link-dialog .download-link-meta {
  margin-top: 8px;
  line-height: 20px;
}
.download-link-dialog .download-link-meta .material-icons {
  font-size: 18px;
  vertical-align: text-bottom;
  margin-right: 6px;
  opacity: 0.7;
}
.download-link-dialog .download-link-hint {
  opacity: 0.7;
}

.recent-alerts-viewer .alerts-header {
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink), transparent 90.2%);
  margin-bottom: 12px;
}
.recent-alerts-viewer .alerts-header .alerts-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  text-transform: uppercase;
}
.recent-alerts-viewer .alerts-list {
  max-height: 320px;
  overflow-y: auto;
}
.recent-alerts-viewer .alerts-list .alert-item {
  margin-bottom: 4px;
  border-radius: 6px;
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content {
  display: flex;
  align-items: flex-start;
  padding: 10px 12px;
  border-left: 4px solid transparent;
  border-radius: 6px;
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content.error {
  border-left-color: var(--c-danger);
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content.error .alert-severity-icon i {
  color: var(--c-danger);
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content.warning {
  border-left-color: var(--c-accent);
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content.warning .alert-severity-icon i {
  color: var(--c-accent);
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content .alert-severity-icon {
  margin-right: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content .alert-severity-icon i {
  font-size: 20px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content .alert-details {
  flex: 1;
  min-width: 0;
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content .hostname {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-info);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content .hostname:hover {
  text-decoration: underline;
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content .alert-message {
  font-size: 13px;
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  margin-top: 2px;
  line-height: 1.4;
}
.recent-alerts-viewer .alerts-list .alert-item .alert-content .elapsed-time {
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  margin-top: 4px;
}
.recent-alerts-viewer .alerts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.recent-alerts-viewer .alerts-empty i {
  font-size: 40px;
  color: var(--c-success);
  margin-bottom: 8px;
}
.recent-alerts-viewer .alerts-empty span {
  font-size: 14px;
}
.recent-alerts-viewer .view-all-link {
  padding-top: 12px;
  margin-top: 8px;
}
.recent-alerts-viewer .view-all-link a {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-info);
  text-decoration: none;
  transition: color 0.15s ease;
}
.recent-alerts-viewer .view-all-link a:hover {
  color: var(--c-brand-dark);
}
.recent-alerts-viewer .view-all-link a i {
  font-size: 16px;
  margin-left: 4px;
}

.running-automations-card {
  overflow-y: auto;
  max-height: 280px;
}
.running-automations-card .running-automations-section {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--c-surface-sunken);
  border-radius: 6px;
}
.running-automations-card .running-automations-section:last-child {
  margin-bottom: 0;
}
.running-automations-card .running-automations-section .running-automations-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-brand-muted);
}
.running-automations-card .running-automations-section .running-automations-empty {
  font-size: 12px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
  font-style: italic;
  padding: 8px 0;
}
.running-automations-card .running-automations-section .running-automations-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.running-automations-card .running-automations-section .running-automations-list li {
  font-size: 13px;
  padding: 6px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: color-mix(in srgb, var(--c-ink), transparent 40%);
  background: var(--c-surface);
  border-radius: 6px;
  transition: box-shadow 0.15s ease;
}
.running-automations-card .running-automations-section .running-automations-list li:last-child {
  margin-bottom: 0;
}
.running-automations-card .running-automations-section .running-automations-list li:hover {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--c-shadow), transparent 88%);
}
.running-automations-card .running-automations-section .running-automations-list li .remote-session-verifier {
  font-weight: 500;
}
.running-automations-card .running-automations-section .running-automations-list li .remote-session-arrow {
  font-size: 14px;
  margin: 0 4px;
  color: color-mix(in srgb, var(--c-ink), transparent 62%);
}
.running-automations-card .running-automations-section .running-automations-list li .remote-session-hostname {
  font-weight: 500;
  color: var(--c-brand-muted);
  text-decoration: none;
}
.running-automations-card .running-automations-section .running-automations-list li .remote-session-hostname:hover {
  text-decoration: underline;
}
.running-automations-card .running-automations-section .running-automations-list li .remote-session-time {
  margin-left: auto;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
}
.running-automations-card .running-automations-section .running-automations-list li .remote-session-elapsed {
  margin-left: auto;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.running-automations-card .running-automations-section .running-automations-list li .remote-session-elapsed i {
  font-size: 13px;
}
.running-automations-card .running-automations-section .running-automations-list li .automation-name {
  font-weight: 500;
}
.running-automations-card .running-automations-section .running-automations-list li .automation-devices {
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 50%);
  margin-left: 6px;
}
.running-automations-card .running-automations-section .running-automations-list li .automation-elapsed {
  margin-left: auto;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-ink), transparent 60%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.running-automations-card .running-automations-section .running-automations-list li .automation-elapsed i {
  font-size: 13px;
}
@media (max-width: 600px) {
  .running-automations-card {
    max-height: none;
  }
  .running-automations-card .running-automations-section {
    padding: 10px;
  }
  .running-automations-card .running-automations-section .running-automations-list li {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    gap: 4px;
  }
  .running-automations-card .running-automations-section .running-automations-list li .remote-session-arrow {
    display: none;
  }
  .running-automations-card .running-automations-section .running-automations-list li .remote-session-verifier {
    font-size: 12px;
    width: 100%;
  }
  .running-automations-card .running-automations-section .running-automations-list li .remote-session-hostname {
    font-size: 12px;
  }
  .running-automations-card .running-automations-section .running-automations-list li .remote-session-elapsed {
    margin-left: 0;
    margin-top: 4px;
  }
  .running-automations-card .running-automations-section .running-automations-list li .automation-name {
    width: 100%;
  }
  .running-automations-card .running-automations-section .running-automations-list li .automation-devices {
    margin-left: 0;
  }
  .running-automations-card .running-automations-section .running-automations-list li .automation-elapsed {
    margin-left: 0;
    margin-top: 4px;
  }
}

.simple-card {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 94%);
}
.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 {
  padding: 8px 12px 12px 12px;
  overflow: auto;
  position: relative;
  max-height: calc(100% - 32px);
}

.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;
}
.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;
  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 .custom-input-icon-button {
  background: transparent;
  padding: 0 8px;
  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", "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", "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;
}

.job-changes-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.job-changes-timeline::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 180px;
  width: 2px;
  background: color-mix(in srgb, var(--c-ink), transparent 88%);
  z-index: 0;
}
.job-changes-timeline .job-changes-timeline-entry {
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center;
}
.job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-date {
  display: inline-block;
  min-width: 140px;
  padding: 6px 24px;
  background: color-mix(in srgb, var(--c-ink), transparent 88%);
  color: var(--c-on-fill);
  text-align: center;
  border-radius: 40px;
  font-size: 14px;
  line-height: 1;
  user-select: none;
  font-weight: bold;
}
.job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-dot {
  position: absolute;
  left: 180px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 3px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  background: var(--c-surface);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  text-decoration: none;
}
.job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-dot--filled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--c-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-text {
  margin-left: 50px;
  font-size: 14px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-ink), transparent 13%);
  transform: translateY(4px);
}
.job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-text a {
  color: inherit;
  text-decoration: none;
}
.job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-text a:hover {
  text-decoration: underline;
}
.job-changes-timeline .job-changes-timeline-entry:not(:last-child) {
  margin-bottom: 20px;
}
.job-changes-timeline .job-changes-timeline-entry--current .job-changes-timeline-text {
  font-weight: 700;
}

@media (max-width: 600px) {
  .job-changes-timeline::before {
    left: 130px;
    top: 48px;
    bottom: 28px;
  }
  .job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-date {
    min-width: 110px;
    padding: 6px 16px;
  }
  .job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-dot {
    left: 130px;
  }
  .job-changes-timeline .job-changes-timeline-entry .job-changes-timeline-text {
    margin-left: 148px;
  }
}
.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);
}

.hostname-conflict-dialog {
  min-width: 500px;
  max-width: 700px;
}
.hostname-conflict-dialog .description {
  color: color-mix(in srgb, var(--c-ink), transparent 46%);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.hostname-conflict-dialog .conflict-item {
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 88%);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}
.hostname-conflict-dialog .conflict-item:last-child {
  margin-bottom: 0;
}
.hostname-conflict-dialog .conflict-item .conflict-hostname {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-brand);
  margin-bottom: 8px;
}
.hostname-conflict-dialog .conflict-item md-radio-group {
  margin-bottom: 4px;
}
.hostname-conflict-dialog .conflict-item md-radio-group md-radio-button {
  margin-bottom: 2px;
}
.hostname-conflict-dialog .conflict-item .conflict-replace-select {
  margin-top: 24px;
  padding-left: 28px;
}
.hostname-conflict-dialog .conflict-item .conflict-replace-select md-input-container {
  width: 100%;
  margin: 0;
}
.hostname-conflict-dialog .conflict-unique-info {
  color: var(--c-success);
  font-size: 13px;
  margin-top: 16px;
  margin-bottom: 0;
}

.runtype-config-panel {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface);
  animation: slideDown 0.2s ease;
}
.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: 20px;
}
.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 .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;
}
.runtime-tab-grid__schedule {
  min-width: 0;
}
.runtime-tab-grid__timezone {
  min-width: 0;
  padding: 16px;
}

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

.date-picker {
  display: inline-block;
  min-width: 260px;
}
.date-picker__label {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 12px;
  opacity: 0.8;
}
.date-picker__field {
  position: relative;
}
.date-picker__md {
  display: block;
}
.date-picker__md .md-datepicker-button,
.date-picker__md .md-datepicker-triangle-button,
.date-picker__md .md-datepicker-expand-triangle {
  display: none !important;
}
.date-picker__md .md-datepicker-input-mask,
.date-picker__md .md-datepicker-input-mask-opaque {
  display: none !important;
}
.date-picker__md .md-datepicker-input-container {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-ink), transparent 78%);
  border-radius: 10px;
  background: var(--c-surface);
  overflow: hidden;
  box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box;
}
.date-picker__md .md-datepicker-input-container:before, .date-picker__md .md-datepicker-input-container:after {
  display: none !important;
}
.date-picker__md .md-datepicker-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 44px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 40px;
  opacity: 1;
  box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box;
}
.date-picker__md .md-datepicker-input:before, .date-picker__md .md-datepicker-input:after {
  display: none !important;
  content: none !important;
}
.date-picker__md .md-datepicker-input:focus {
  outline: none;
}
.date-picker__md.md-datepicker-open .md-datepicker-input-container, .date-picker__md.md-datepicker-focused .md-datepicker-input-container {
  border-color: color-mix(in srgb, var(--c-brand), transparent 15%);
}
.date-picker__icon-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.date-picker__icon-btn:focus, .date-picker__icon-btn:focus-visible {
  outline: none !important;
}
.date-picker__icon-btn i.material-icons {
  font-size: 20px;
  line-height: 20px;
}
.date-picker--disabled .date-picker__md .md-datepicker-input-container {
  background: color-mix(in srgb, var(--c-ink), transparent 96%);
}
.date-picker--disabled .date-picker__icon-btn {
  cursor: default;
  opacity: 0.55;
}

.md-datepicker-calendar-pane {
  z-index: 9999 !important;
  background: var(--c-surface) !important;
  overflow: hidden;
  transform: none !important;
  border-radius: 10px !important;
  display: none !important;
}
.md-datepicker-calendar-pane .md-datepicker-calendar,
.md-datepicker-calendar-pane .md-calendar,
.md-datepicker-calendar-pane .md-whiteframe-z1 {
  background: var(--c-surface) !important;
}
.md-datepicker-calendar-pane .md-datepicker-input-mask,
.md-datepicker-calendar-pane .md-datepicker-input-mask-opaque {
  display: none !important;
}

.patchmanagement-date-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
@media (max-width: 768px) {
  .patchmanagement-date-row {
    flex-direction: column;
    gap: 0;
  }
}
.patchmanagement-date-row__item:last-child {
  margin-right: 0;
}
.patchmanagement-date-row__item--installedby {
  margin-top: 24px;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .patchmanagement-date-row__item--installedby {
    margin-top: 0;
  }
}

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

/* The from/to pair with its preset windows. The fields are <date-picker>s, so their own styling stands;
   this is the row that holds them and the pills that move both ends at once. */
.date-range {
  display: flex;
  /* From the top, so the pill row's label spacer lines it up with the fields' boxes. */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  /* Beside the fields they set, not pushed to the far edge of the row: they are a shortcut for filling
     those two boxes in, so they belong next to them. */
}
.date-range .date-range__field {
  flex: 0 1 auto;
}
.date-range .date-range__presets {
  display: flex;
  flex-direction: column;
}
.date-range .date-range__preset-row {
  display: flex;
  gap: 6px;
}
.date-range .date-range__preset {
  /* The height of a date field's box: the input is 40px and its container adds a 1px border either
     side, so the pills read as part of the same row of controls rather than as something beneath it. */
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background-color: var(--c-surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-field-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  /* Lit only while the range still is that window — editing a field by hand puts it out. */
}
.date-range .date-range__preset:hover:not(:disabled) {
  color: var(--c-text);
}
.date-range .date-range__preset.is-active {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%);
}
.date-range .date-range__preset:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
.date-range .date-range__preset:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 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. */
  /* Still answers the pointer, without being the loudest thing on the row at rest. */
  /* The tick, drawn rather than swapped in: it scales up from 60% as the box fills. */
  /* "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: transparent;
}
md-checkbox:not([disabled]):hover div.md-icon {
  border-color: var(--c-brand);
}
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) 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;
}

@media (prefers-reduced-motion: reduce) {
  md-checkbox div.md-icon,
md-checkbox div.md-icon::after {
    transition: none;
  }
  md-checkbox:not(.md-checked) div.md-icon::after {
    transform: rotate(45deg);
  }
}
/* 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", "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: var(--c-ink);
}
[data-theme] .md-default-theme .md-tab.md-active,
[data-theme] .md-dark-theme .md-tab.md-active {
  color: var(--c-accent);
}
[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,
[data-theme] .select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: var(--c-surface) url("/lib/select2/select2-spinner.gif") no-repeat 100% !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 */