label.onoff-ct {
  --switch-width: 40px;
  --switch-height: 24px;
  --switch-background: var(--color-gray-3);
  --switch-border-color: transparent;
  --switch-border-style: solid;
  --switch-border-width: 1px;
  --switch-text: inherit;
  --switch-dot-size: 14px;
  --switch-dot: var(--color-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  padding: 1px 0;
  /* Height is 24px; bump to 26px like other widgets */
  vertical-align: middle;
  /* Focus ring */
  /* Don't show the focus ring for mouse clicks (when hovering) */
  /* Subtly darken the inner part of the switch on hover */
}
label.onoff-ct > .switch-on,
label.onoff-ct > .switch-off,
label.onoff-ct > input ~ .switch-toggle,
label.onoff-ct > input ~ .switch-toggle::after {
  transition: all 300ms ease-in-out;
}
label.onoff-ct > .switch-on,
label.onoff-ct > .switch-off {
  color: var(--switch-text);
  margin-left: 0.5em;
}
label.onoff-ct > input {
  opacity: 0;
  position: absolute;
  /* Base toggle graphic */
  /* Hide unused switch label */
}
label.onoff-ct > input ~ .switch-toggle {
  --switch-dot-offset-x: calc(var(--switch-dot-size)/3 - var(--switch-border-width));
  --switch-dot-offset-y: calc(50% - 14px / 2);
  /* Don't let the border draw over the background */
  background-clip: content-box;
  background: var(--switch-background);
  border-radius: var(--switch-height);
  border: var(--switch-border-width) var(--switch-border-style) var(--switch-border-color);
  box-shadow: inset 0 0 0 1px transparent;
  width: var(--switch-width);
  height: var(--switch-height);
  display: inline-block;
  position: relative;
  margin: 0;
  cursor: pointer;
  /* Dot graphic */
}
label.onoff-ct > input ~ .switch-toggle::after {
  background: var(--switch-dot);
  box-shadow: 0 0 var(--switch-dot-offset-x) rgba(0, 0, 0, 0.2);
  display: inline-block;
  content: "";
  height: var(--switch-dot-size);
  width: var(--switch-dot-size);
  border-radius: 50%;
  top: var(--switch-dot-offset-y);
  left: var(--switch-dot-offset-x);
  position: absolute;
  pointer-events: none;
}
label.onoff-ct > input ~ .switch-off {
  --switch-text: var(--color-subtle-copy);
}
label.onoff-ct > input:checked ~ .switch-toggle {
  --switch-background: var(--color-link);
  --switch-dot-offset-x: calc(100% - var(--switch-dot-size) * 1.333333 + var(--switch-border-width));
}
label.onoff-ct > input:checked ~ .switch-toggle:last-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.583 6.35'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='.529' d='M2.252 3.365l.756.758L4.48 2.65' opacity='.75'/%3E%3C/svg%3E");
}
label.onoff-ct > input:disabled ~ .switch-toggle {
  --switch-background: var(--color-subtle-copy);
  --switch-dot: var(--color-gray-3);
}
label.onoff-ct > input:disabled ~ * {
  cursor: not-allowed;
}
label.onoff-ct > input:checked ~ .switch-off,
label.onoff-ct > input:not(:checked) ~ .switch-on {
  display: none;
}
label.onoff-ct :disabled ~ .switch-on,
label.onoff-ct :disabled ~ .switch-off {
  --switch-text: var(--color-subtle-copy);
}
label.onoff-ct :focus ~ .switch-toggle::before {
  /* Approximate Chrome's focus ring, for non-Firefox browsers */
  border: 2px solid rgba(0, 98, 220, 0.4);
  border-radius: calc(var(--switch-width) - 10px);
  position: absolute;
  content: '';
  top: -4px;
  bottom: -4px;
  left: -4px;
  width: calc(var(--switch-width) + 6px);
  transition: all 300ms ease-in-out;
  /* HACK: Keyboard has nothing to transition from, but hover does */
  /* (as it changes the ring to transparent and back). */
  /* So we delay the hover to not have the focus ring on hover out. */
  /* This makes the focus ring show up for keyboard users, but not on a mouse click. */
  transition-delay: 600s;
  z-index: 1;
}
@-moz-document url-prefix() {
  label.onoff-ct :focus ~ .switch-toggle::before {
    /* Approximate Firefox's focus ring, for Firefox only */
    border: 1px dotted rgba(0, 0, 0, 0.75);
  }
}
label.onoff-ct :focus:hover ~ .switch-toggle::before {
  border-color: transparent;
}
label.onoff-ct:hover :not(:disabled) ~ .switch-toggle {
  box-shadow: inset 0 1px 5px 1px rgba(0, 0, 0, 0.15);
}
h1 label.onoff-ct {
  vertical-align: bottom;
}

#service-details {
    padding-bottom: 2.5rem;
}

.service-top-panel {
    padding-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
}

.service-top-panel > .service-name {
    margin: 0 1.5rem 0 0;
}

.service-top-panel .onoff-ct {
    vertical-align: text-bottom;
}

/* Make the kebab wrapper and button flex to parents for proper alignment */
.service-top-panel .dropdown-kebab-pf,
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle {
    display: flex;
}

/* Remove unnecessary margin */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle {
    margin: 0;
}

/* Use up to 13rem width for the kebab space (including menu) */
.service-top-panel .dropdown-kebab-pf {
    flex: auto;
    max-width: 13rem;
}

/* Bump up the z-index to menu's z-index + 1 */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true] {
    position: relative;
    z-index: 1001;
}

/* Recreate the ^ menu pointer, but under the button itself */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true]:before,
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true]:after {
    border: 10px solid var(--pf-global--BorderColor--200);
    border-top-width: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -0.5rem;
    /* Start element at 50% width */
    left: 50%;
    /* Bump element to the left ½ its width */
    transform: translateX(-50%);
}

/* Recolor inner triangle and bump down a pixel to overlap */
.service-top-panel .dropdown-kebab-pf > .dropdown-toggle[aria-expanded=true]:after {
    border-bottom-color: var(--pf-global--BackgroundColor--100);
    bottom: calc(-0.5rem - 1px);
}

/* Turn off PF3 kebab menu's ^ caret */
.service-top-panel .dropdown-kebab-pf > .dropdown-menu::before,
.service-top-panel .dropdown-kebab-pf > .dropdown-menu::after {
    display: none;
}

/* Reposition kebab menu */
.service-top-panel .dropdown-kebab-pf > .dropdown-menu {
    left: auto;
    right: 0;
    margin: 0 -0.5rem;
    min-width: calc(100% + 1rem);
    top: calc(100% + 0.5rem);
}

.action-button {
    margin-left: 2rem;
}

#service-details .ct-form > :not(hr) {
    line-height: 1.5rem;
    row-gap: normal;
}

.ct-form .closer-lines {
    margin: 0;
}

.status-icon::before {
    color: inherit;
}

.status-icon {
    padding-right: 0.5rem;
    color: var(--pf-global--icon--Color--light);
}

.status-icon.spinner.spinner-xs {
    height: 1rem;
    width: 1rem;
    margin-right: 0.5rem;
}

.status-running > .status-icon,
.status-enabled > .status-icon {
    /* mid-way between PF4 success-100 & 200; then rounded to AA contrast */
    color: #6da000;
}

.status-failed > .status-icon,
.status-failed > .status,
.control-label.failed {
    color: var(--pf-global--danger-color--200);
}

.side-note {
    color: var(--pf-global--Color--300);
    padding-left: 1em;
}

.font-xs {
    font-size: var(--pf-global--FontSize--xs);
}

.list-group-item {
    border: none;
}

#services-page {
    overflow-y: scroll;
}

.comma-list {
  display: inline;
  list-style: none;
  padding-left: 0;
}

.comma-list > li {
  display: inline-block;
}

.comma-list > li:not(:last-child):after {
  content: ",";
  margin-right: 0.5em;
}

table.systemd-unit-relationship-table td:first-child {
  vertical-align: top;
  text-align: right;
}

#services .content-header-extra {
  display: flex;
  justify-content: space-between;
}

#services .content-header-actions {
  margin: 0 1.5rem 0 0;
}

#services .nav-tabs {
  border-bottom: none;
  flex: auto;
}

#services .filter-group {
  display: flex;
  align-items: start;
}

.content-header-extra.with-navtabs {
  padding-bottom: 0;
}

@media screen and (max-width: 640px) {
  /*** Make content-header more finger-friendly ***/

  #services .nav-tabs > li {
    /* Make tabs at least 1/3 width, minus 2px for borders, */
    /* for better alignment & touchability */
    min-width: calc(33.333% - 2px);
    text-align: center;
  }

  #services .nav-tabs > li > a {
    /* Add padding to make the tabs more finger friendly */
    padding: 0.75rem 1.25rem;
    /* 1px is to compensate for negative margin */
    width: calc(100% + 1px);
  }

  /* Stretch the text input to use available width */
  #services-text-filter {
    flex: auto;
  }

  /* Clear header background to allow panel background to shine through */
  #services-list > .panel thead {
    background: transparent;
  }

  /*** Table horizontal overflow & scrolling ***/

  #services-list .table {
    /* Un-"fix" the widths, to allow it to expand/contract to content */
    table-layout: auto;
  }

  #services > .container-fluid {
    /* Undo the padding, to make the table edge-to-edge (for scrolling) */
    margin: 0;
    padding: 0;
  }

  #services-list thead > tr > th {
    /* Force table headings to not wrap */
    white-space: nowrap;
  }

  #services-list .service-unit-id,
  #services-list .service-unit-description {
    /* Make sure first two columns (name and description) have a decent size */
    min-width: 13em;
  }

  #services-list .service-unit-id {
    max-width: 33vw;
    word-break: break-word;
  }

  #services-list .service-unit-description {
    max-width: 50vw;
  }

  #services-list > .panel > table td:not(.service-unit-id) {
    /* Collapse metadata into minimum size — and don't wrap */
    width: auto;
    white-space: nowrap;
  }
}

@media screen and (max-width: 960px) {
  #services .nav-tabs > li.active > a {
    border-bottom-color: #ddd;
  }

  #services .nav-tabs {
    display: flex;
    flex-flow: row wrap;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ddd;
  }

  #services .nav-tabs > li {
    float: none;
  }

  #services .content-header-extra.with-navtabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    align-items: stretch;
  }

  #services .filter-group {
    margin-top: 1rem;
  }

  #services .content-header-actions > button {
    margin-top: 1rem;
  }
}

@media screen and (min-width: 961px) {
  #services > .content-header-extra + .container-fluid {
    margin-top: 1rem;
  }
}

#services-text-filter {
  width: 21rem;
  display: inline;
  vertical-align: middle;
  padding-right: 35px;
}

.blank-screen {
  background-color: initial;
  border: initial;
}

#services-dropdown {
  margin-left: 0.5rem;
}

#service-type {
  min-width: 10rem;
}

#services-dropdown .dropdown-menu {
  margin-top: 4px;
  left: auto;
  right: 0;
}

.caret {
  margin-top: 6px;
}

#services-list .panel-default {
  border: none;
  box-shadow: none;
}

#services-list table {
  table-layout: fixed;
}

#services-list thead {
  color: var(--color-subtle-copy);
  background-color: var(--color-bg);
  font-weight: normal;
}

#services-list th,
#services-list td {
  border: 1px solid var(--color-border-default);
  border-width: 0 0 1px;
  overflow-wrap: anywhere;
}

#services-list tbody th {
  /* make tbody th padding the same as td */
  padding: 8px;
}

.service-unit-description {
  width: 40%;
}


/*# sourceMappingURL=services.css.map*/