@charset "UTF-8";
/*! 
Scyld Base Styles 
©️️ Copyright 2022-2025 Penguin Computing Inc. All rights reserved.
*/
/* Imports */
/*! variables */
:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;
  --longestLine: 100%;
  --spaceMin: 0.5rem;
  --spaceMed: 1rem;
  --spaceMax: 2rem;
  --maxWidthAside: 20rem;
  --minWidthAside: 2.5rem;
  --widthNavMenu: 18ch;
  --toggle-button-width: 2.5rem;
  --aside-closed: var(--toggle-button-width);
  --aside-open: 14rem;
  --dialog-width: 120ch;
  --formBorder: 2px;
  --moreMenuWidth: 20ch;
  --pillTextSize: .8rem;
  --formBorderRad: 0.25em;
  --maxCoreHourLength: 13ch;
  /* calc(2rem + var(--spaceMin) * 2) */
  --fontFace: "DM Sans", sans-serif;
  --fontBase: 14px;
  --headFootHeight: 4rem;
  --headBorderWidth: 6px;
  /* calc(var(--sizeH1) + var(--spaceMed)) */
  --timeShort: 0.3s;
  --timeMed: 0.5s;
  --timeLong: 1s;
  --breadcrumbSep: "> ";
  /* Penguin Computing brand 2025 colors */
  --color-penguin-yellow: #FFCD30;
  --color-yellow: var(--color-penguin-yellow);
  --color-white: white;
  --color-gray-1: #F5F6F8;
  --color-gray-2: #DCE2E3;
  --color-gray-3: #BCC3C7;
  --color-gray-4: #3A5A65;
  --color-gray-5: #3E4553;
  --color-penguin-black: #242B2E;
  --color-gray-6: var(--color-penguin-black);
  --color-black: black;
  --color-light-green: #C9FCE4;
  --color-green-1: #14E4A6;
  --color-green-2: #0A5B51;
  --color-green-lt: var(--color-light-green);
  --color-light-blue: #cef0ff;
  --color-blue-1: #2974E4;
  --color-blue-2: #0E3A90;
  --color-blue-lt: var(--color-light-blue);
  --color-tan: #FFE8C5;
  --color-red: #FF3636;
  --color-dark-magenta: #9B0041;
  --color-red-1: var(--color-red);
  --color-red-2: var(--color-dark-magenta);
  /* Additional colors */
  --color-orange: hsl(45, 82%, 50%);
  --color-green: hsl(109, 90%, 35%);
  --color-green-dk: var(--color-green-2);
  /* color change amount */
  --step-color-amount: 25%;
  --step-color-h: white;
  /* Template colors */
  --color-primary: var(--color-blue-1);
  --color-primary-h: var(--color-blue-lt);
  --color-secondary: var(--color-blue-2);
  --color-secondary-h: var(--color-blue-1);
  /* Themed Colors */
  --color-clientBG: var(--color-yellow);
  --color-clientFG: var(--color-gray-5);
  --theme-border-color: var(--color-gray-3);
  --theme-focus-color: var(--color-blue-light);
  --theme-font-color: var(--color-gray-v-dk);
  --theme-highlight-color: var(--color-blue-lt);
  --theme-link-color: light-dark(var(--color-primary), color-mix(in oklab, var(--color-primary), var(--step-color-h) var(--step-color-amount)));
  --theme-link-color-h: color-mix(in oklab, var(--theme-link-color), var(--step-color-h) var(--step-color-amount));
  --color-button-bg: light-dark(var(--color-blue-lt), var(--color-primary));
  --color-button-fg: light-dark(var(--color-primary), var(--color-blue-lt));
  --color-button-border: light-dark(var(--color-primary), var(--color-blue-lt));
  --color-button-bg-h: light-dark(var(--color-primary), var(--color-blue-lt));
  --color-button-fg-h: light-dark(var(--color-blue-lt), var(--color-primary));
  --color-button-border-h: light-dark(var(--color-primary), var(--color-primary));
  --color-alert: #f2961f;
  --color-alert-h:color-mix(in oklab, var(--color-alert), var(--step-color-h)var(--step-color-amount));
  --color-detail: var(--color-gray-3);
  --color-disabled: hsl(0, 0%, 89%);
  --color-disabled-fg: var(--color-gray-5);
  --color-disabled-bg: var(--color-gray-3);
  --color-error: light-dark(var(--color-red-2), var(--color-red-1));
  --color-error-h: color-mix(in oklab, var(--color-red-1), var(--step-color-h) var(--step-color-amount));
  --color-pending-dk: hsl(0, 0%, 58%);
  --color-pending-lt: hsl(35,100%,55%);
  --color-pending: hsl(35, 82%, 51%);
  --color-pill: var(--theme-primary-color);
  --color-success: hsl(109, 90%, 35%);
  --color-service: #5991e5;
  --color-service-h: color-mix(in oklab, var(--color-service), var(--step-color-h) var(--step-color-amount));
  --color-text-invert: var(--color-1);
  --color-text: CanvasText;
  --theme-font-color: var(--colorMainFg);
  --color-accent: AccentColor;
  --color-input-bg: light-dark(var(--color-gray-1), var(--color-gray-5));
  --color-input-bg-h: color-mix(in oklab, var(--color-input-bg), var(--step-color-h) var(--step-color-amount));
  --color-input-placeholder: light-dark(var(--color-gray-4), var(--color-gray-3));
  --color-input-fg: light-dark(var(--color-gray-4), var(--color-gray-2));
  --color-input-fg-h: color-mix(in oklab, var(--color-input-fg), var(--step-color-h) var(--step-color-amount));
  --color-input-border: light-dark(var(--color-gray-3), var(--color-gray-2));
  --color-input-border-h: light-dark(var(--color-blue-1), var(--color-blue-lt));
  --color-input-border: light-dark(var(--color-gray-3), var(--color-gray-2));
  --color-button-text: white;
  --color-primary-button-bg: light-dark(var(--color-light-blue), var(--color-blue-2));
  --color-primary-button-bg-h: light-dark(var(white), var(--color-light-blue));
  --color-primary-button-fg: light-dark(var(--color-blue-1), var(--color-gray-1));
  --color-primary-button-fg-h: light-dark(var(--color-blue-1), var(white));
  /* DELETE
  --theme-background-color: hsl(0, 0%, 90%);
  --theme-box-background-color: var(white);
  --theme-form-focus-color: var(--color-blue-v-lt);
  --theme-muted-color: hsl(0, 0%, 90%);
  */
  /* Experimental partial color values 

    --cl-b-lt-h: 198;
    --cl-b-lt-s: 100%;
    --cl-b-lt-l: 44%;
    --color-blue-lt: hsl(var(--cl-b-lt-h) var(--cl-b-lt-s) var(--cl-b-lt-l)); // Light Blue R0 G156 B22 incorrect should be #009CDE lch(60.507% 47.447 249.277)
    --cl-b-dm-h: 201;
    --cl-b-dm-s: 100%;
    --cl-b-dm-l: 30%;
    --color-blue-dk-med: hsl(var(--cl-b-dm-h) var(--cl-b-dm-s) var(--cl-b-dm-l)); // Dk Med Blue R0 G98 B152 lch(39.37% 38.017 256.536)
    */
  /* ------------------ BEGIN 12.4 COMBO COLOR SCHEME ------------------ */
  /* State Colors: light-dark(var(light), var(dark)); 

  AccentColor - Background of accented user interface controls.
  AccentColorText - Text of accented user interface controls.
  ActiveText - Text of active links.
  ButtonBorder - Base border color of controls.
  ButtonFace - Background color of controls.
  ButtonText - Text color of controls.
  Canvas - Background of application content or documents.
  CanvasText - Text color in application content or documents.
  Field - Background of input fields.
  FieldText - Text in input fields.
  GrayText - Text color for disabled items (for example, a disabled control).
  Highlight - Background of selected items.
  HighlightText - Text color of selected items.
  LinkText - Text of non-active, non-visited links.
  Mark - Background of text that has been specially marked (such as by the HTML mark element).
  MarkText - Text that has been specially marked (such as by the HTML mark element).
  SelectedItem - Background of selected items, for example, a selected checkbox.
  SelectedItemText - Text of selected items.
  VisitedText - Text of visited links.

   */
  /* Old brand colors 
  --color-penguin-yellow: hsl(49, 100%, 50%); // Penguin Yellow R255 G209 B0 lch(85.739% 85.656 85.786)
  --color-gray-v-dk: hsl(204, 6%, 16%); // Very Dk Gray R37 G40 B42 lch(16.342% 2.066 240.764)
  --color-gray-5: hsl(200, 3%, 34%); // Dk Gray R84 G88 B90 lch(37.067% 1.884 218.117)
  --color-gray-med: hsl(180, 2%, 55%); // Med Gray R137 G141 B141 lch(58.985% 2.007 199.499)
  --color-gray-2: hsl(120, 2%, 78%); // Lt Gray R199 G201 B199 lch(80.401% 1.239 142.889)
  --color-gray-v-lt: hsl(0, 0%, 95%); // Very Lt Gray R242 G242 B242 lch(95.494% 0 139.088)
  white: hsl(0 ,0%, 100%); // White R255 G255 B255 lch(95.494% 0 139.088)
  --color-orange: hsl(35,100%,55%); // Orange R255 G158 B27 lch(74.296% 80.672 67.649)
  --color-red-warm: hsl(3, 94%, 60%); // Warm Red  R249 G66 B58 lch(57.414% 84.441 35.602)
  --color-green: hsl(85 ,59%, 60%); // Green R164 G214 B94 lch(79.905% 61.002 120.437)
  --color-green-dk: hsl(102 ,54% ,40%); // Dk Green R80 G158 B47 lch(58.158% 61.789 130.209)
  --color-blue-lt: hsl(198 ,100% ,44%);
  --color-blue-v-lt: hsl(198, 70%, 90%); // lch(92.131% 10.475 227.998)
  --color-blue-dk-med: hsl(201, 100%, 30%);
  --color-blue-dk: hsl(203,98%,21%); // Dk Blue R1 G66 B106 lch(26.116% 29.611 258.342)
  --color-neutral: hsl(180, 2%, 55%);
  */
  --colorHeaderBg: light-dark(var(--color-gray-6), var(--color-gray-6));
  --colorHeaderFg: light-dark(var(--color-gray-1), var(--color-gray-1));
  --colorHeaderBorder: light-dark(var(--color-yellow), var(--color-yellow));
  --colorAsideBg: light-dark(var(--color-gray-2), var(--color-gray-5));
  --colorAsideFg: light-dark(var(--color-gray-5), var(--color-gray-2));
  --color-aside-fg: var(--colorAsideFg);
  --color-aside-bg: var(--colorAsideBg);
  --color-aside-link: var(--colorAsideFg);
  --color-aside-link-h: var(--colorAsideFg);
  --color-aside-active-bg: light-dark(rgba(250, 250, 250, 0.5), rgba(127, 127, 127, 0.5));
  --color-aside-active-summary-bg: light-dark(rgba(250, 250, 250, 0.4), rgba(127, 127, 127, 0.3));
  --color-toggle-fg: light-dark(var(--color-gray-1), var(--color-gray-1));
  --color-toggle-fg-h: light-dark(var(white), var(white));
  --color-toggle-bg: light-dark(var(--color-blue-1), var(--color-blue-1));
  --color-toggle-bg-h: light-dark(var(--color-blue-lt), var(--color-blue-lt));
  --colorMainBg: light-dark(var(--color-gray-1), var(--color-gray-6));
  --colorMainFg: light-dark(var(--color-gray-5), var(--color-gray-1));
  --colorMainFg: CanvasText;
  --color-main-fg: var(--colorMainFg);
  --color-panel-bg: light-dark(white, var(--color-gray-5));
  --colorPanelBorder: light-dark(var(--color-gray-3), var(--color-gray-3));
  --color-ghost-bg: var(--color-panel-bg);
  --color-mainPane: light-dark(var(white), var(--color-gray-5));
  --color-submitPane: light-dark(var(--color-gray-1), var(--color-gray-3));
  --color-text-invert: light-dark(var(--color-gray-1), var(--color-gray-5));
  --colorLightText: light-dark(var(--color-gray-1), var(--color-gray-5));
  --colorDarkText: light-dark(var(--color-gray-1), var(--color-gray-6));
  --colorWindowBg: Canvas;
  --colorWindowFg: CanvasText;
  --color-moremenu-bg: light-dark(var(--color-gray-2), var(--color-gray-2));
  --color-moremenu-fg: light-dark(var(--color-gray-5), var(--color-gray-5));
  --colorWindowHeadBg: light-dark(var(--color-blue-2), var(--color-blue-2));
  --colorWindowHeadFg: light-dark(var(--color-white), var(--color-white));
  --colorFooterBg: light-dark(#f5f6f8, var(--color-gray-6));
  --colorFooterFg: light-dark(var(--color-gray-4), var(--color-gray-3));
  --colorFooterBorder: light-dark(var(--color-gray-4), var(--color-gray-3));
  --color-table-head-bg: light-dark(var(--color-gray-2), var(--color-gray-4));
  --color-table-head-fg: light-dark(var(--color-gray-5), var(--color-gray-1));
  --color-table-stripe: hsla(180, 2%, 55%, 0.1);
  /* ------------------ END 12.4 COMBO COLOR SCHEME ------------------ */
  /* Reusable, non-theming vars */
  --box-shadow: 0 var(--formBorder) var(--spaceMed) 2px var(--color-gray-v-lt);
  --button-background: var(--color-secondary);
  --form-height: var(--spaceMax);
  --form-inner-box-shadow: inset var(--formBorder) var(--formBorder)
    var(--spaceMed) var(--formBorder) var(--color-gray-v-lt);
  /* POD Grid Component */
  --grid-gap: var(--spaceMax);
  /* POD Icon Component */
  --color-icon: var(--color-blue-dk-med);
  /* Spectra colors */
  /* default */
  --s1v1: #ff0000;
  --s1v2: #ff5500;
  --s1v3: #c9860a;
  --s1v4: #0ea763;
  --s1v5: #1be;
  --s1v6: #476de7;
  /* smoke */
  --s2v1: #a29287;
  --s2v2: #7a4a36;
  --s2v3: #95825e;
  --s2v4: #54836f;
  --s2v5: #566;
  --s2v6: #978de0;
  /* cool */
  --s3v1: #0003ff;
  --s3v2: #6b39ff;
  --s3v3: #007e93;
  --s3v4: #859681;
  --s3v5: #466;
  --s3v6: #4e6df2;
  /* autumn */
  --s4v1: #974949;
  --s4v2: #c5714c;
  --s4v3: #d2a008;
  --s4v4: #ab6a16;
  --s4v5: #166;
  --s4v6: #5599ca;
  /* fusion */
  --s5v1: #2162ff;
  --s5v2: #0be;
  --s5v3: #00f789;
  --s5v4: #ffa600;
  --s5v5: #ff4c00;
  --s5v6: #ff00fa;
}

/* Font path may need to change for some installations */
@font-face {
  font-family: "Roboto Flex";
  src: url("../font/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  src: url("../font/DM_Sans/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans Italic";
  src: url("../font/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype");
}

/*! layout */
html {
  --contentBuffer: 4rem;
  --pst-color-link: #3fa6b8;
  --pst-color-link-h: #0067ff;
  background: 
  /* top image */ 
  linear-gradient(
    color(srgb 0 0 0 / 0.6), 
    color(srgb 0 0 0 / 0.3)
  ),
  /* bottom, image */
  url(../images/penguin_mj_dataflow_3.jpg),
  black;
  
  background-repeat: no-repeat, no-repeat;
  
  
  @media (orientation: landscape) {
    --size: 140vw;
    background-position: 100% 0vh, 50% 13vh;
    background-size: var(--size), var(--size);
  }
  
  body.docs {
    scroll-behavior: smooth;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    gap: 0;
  }
}

header.menubar {
  border: none;
  background-color: none;
  --headerText: light-dark(var(--color-gray-6), var(--color-gray-3));
  --headerLogoText: light-dark(var(--color-gray-6), white);
  --headerBg: light-dark(white, var(--color-gray-6));
  width: 100%;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  align-items: center;
  background-color: var(--headerBg);
  padding: 0.5rem;
  position: fixed;
  top: 0;
  z-index: 10;
  border-block-end: none;
  filter: drop-shadow(0 0.1rem 0.3rem rgba(0, 0, 0, 0.15));
  
  .penguinLogo {
    height: 50px;
  }
  .penguinLogo .text {
    fill: var(--headerLogoText);
  }
  h1 {
    font-size: 1.1rem;
    color: var(--headerText);
    margin: 0;
  }
}

#middle {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 0.6fr auto 2fr; */
  font-size: 1.2rem;
  padding: var(--contentBuffer);
  h1 {
    justify-content: center;
    align-content: center;
    text-align: center;
    text-wrap: balance;
    margin: 0;
  }
  a {
    color: var(--pst-color-link);
    text-decoration: none;
    
    &:hover {
      color: var(--pst-color-link-h);
      text-decoration: underline;
    }
  }
  
  main.doc-home {
    .panel {
      padding: 0;
      background-color: light-dark(var(--color-gray-1), var(--color-gray-6));
      display: grid;
      justify-content: center;
      align-content: start;
      
      > * {
        grid-row: 1;
        grid-column: 1;
      }
      img {
        mask-image: linear-gradient(rgb(0, 0, 0), transparent);
      }
      div {
        padding: 3rem;
        position: relative;
        z-index: 1;
        a:not(.docs *) {
          display: block;
        }
      }
    }
    
    @media (orientation: landscape) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: fit-content(12ch);
      gap: var(--spaceMax);
      justify-content: center;
      align-content: center;
    }
  }
  
}
footer {
  color: canvasText;
  background-color: canvas;
  border-block-start: 2px solid var(--color-gray-4);
  padding: var(--spaceMed) var(--contentBuffer);
  max-height: var(--footerheight);
  text-align: end;
  font-size: 16px;
}
footer .footer-about {
  grid-area: 1/1/2/2;
}
footer .footer-follow {
  grid-area: 1/2/2/3;
}
footer .footer-contact {
  grid-area: 1/3/2/4;
}
footer .footer-links {
  grid-area: 1/4/2/5;
}
footer .footer-copyright {
  grid-area: 2/1/3/5;
}

.admonition {
  --localColor: var(--color-gray-5);
  --titleBgColor: var(--color-gray-2);
  --marginLeft: 2rem;
  margin: auto;
  border-inline-start: 3px solid var(--localColor);
  background-color: light-dark(rgb(255, 255, 255), rgba(130, 130, 130, 0.18));
  border-radius: 3px;
  filter: drop-shadow(0 0.2rem 0.5rem rgba(0, 0, 0, 0.2));
}
.admonition .title {
  background-color: var(--titleBgColor);
  padding: 0.5rem;
  padding-inline-start: var(--marginLeft);
  padding-inline-end: var(--marginLeft);
  margin: 0;
  color: light-dark(canvasText, white);
  position: relative;
}
.admonition .title::before {
  --size: .9rem;
  content: "!";
  height: 100%;
  display: inline-block;
  height: var(--size);
  width: var(--size);
  background-color: var(--localColor);
  color: var(--titleBgColor);
  border-radius: 0.5rem;
  display: inline-grid;
  justify-content: center;
  align-content: center;
  position: absolute;
  left: 0.7rem;
  transform: translateY(0.3rem);
}
.admonition p {
  margin-inline-start: var(--marginLeft);
  padding-inline-end: var(--marginLeft);
}
.admonition.important {
  --localColor: light-dark(#f06608, var(--color-orange));
  --titleBgColor: light-dark(#f6e1cd, #642903);
}

.nav-links > * {
  display: block;
  margin-block-end: var(--spaceMin);
}

/*! components */
/* trap Google Sign-in to button size */
.g_id_signin {
  height: 44px;
  width: 203px;
  overflow: hidden;
  border-radius: 3px;
  margin: 0 auto;
}

/* 
prevent flash when Google Sign-in loads
https://stackoverflow.com/questions/69242615/prevent-sign-in-with-google-button-flickering-while-loading-when-centered-vertic

.g_id_signin > div > div:last-child{
  display: none;
}
*/
.g_id_signin > div > div:first-child {
  display: none;
}

@keyframes revealGoogButtton {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.g_id_signin > * {
  animation: revealGoogButtton 1s;
}

.cluster header {
  display: block;
}
.cluster header > * {
  display: block;
}

pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
}

/* Logo and icons */
aside .logo {
  display: block;
  height: auto;
  transition: all var(--timeShort);
}

aside:not(.open) .logo {
  max-width: var(--minWidthAside);
}

svg.icon {
  --iconSize: 1.5rem;
  width: var(--iconSize);
  height: var(--iconSize);
  fill: currentColor;
  vertical-align: baseline;
}

h1 svg.icon,
h2 svg.icon,
h3 svg.icon,
h4 svg.icon,
h5 svg.icon h6 svg.icon {
  vertical-align: middle;
}

svg.thumb {
  --iconSize: 5rem;
  width: var(--iconSize);
  height: var(--iconSize);
  fill: currentColor;
  vertical-align: middle;
}

[class^=buffered-][class$=top] {
  margin-top: var(--spaceMed);
}
[class^=buffered-][class$=bottom] {
  margin-bottom: var(--spaceMed);
}
[class^=buffered-][class$=all] {
  margin: var(--spaceMed);
}

#deactivateForm p ~ p,
#deactivateForm p ~ div {
  margin-top: var(--spaceMed);
}

.login-box {
  text-align: center;
}
.login-box label {
  text-align: right;
  margin-right: var(--spaceMed);
}
.login-box fieldset {
  margin-bottom: var(--spaceMin);
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}
.login-box input {
  width: fit-content;
}
.login-box p {
  margin: 0.5rem 0;
}
.login-box .mainPane {
  padding: var(--spaceMed);
  background-color: var(--color-mainPane);
}
.login-box .submitPane {
  padding: var(--spaceMed);
  background-color: var(--color-submitPane);
}
.login-box .alt.submitPane {
  border-top: var(--formBorder) solid var(--color-panel-bg);
}
.login-box .altPane {
  padding: var(--spaceMed);
  color: var(--color-gray-5);
  background-color: var(--color-gray-2);
  border-top: var(--formBorder) solid var(--color-gray-v-lt);
}

.ssh-key input {
  width: 100%;
}
.ssh-key label,
.ssh-key em {
  display: block;
}
.ssh-key fieldset {
  margin-bottom: var(--spaceMin);
}

.service-status > * {
  margin: 0;
  padding: 0;
}
.service-status svg.icon {
  --iconSize: 1rem;
  width: var(--iconSize);
  height: var(--iconSize);
  grid-area: icon;
}
.service-status li + li {
  margin-top: 0;
}
.service-status .legend {
  list-style-type: none;
  text-align: right;
  margin-bottom: var(--spaceMin);
}
.service-status .legend > * {
  display: inline-block;
}
.service-status .button {
  font-size: 70%;
  padding: 4px var(--spaceMin);
  white-space: nowrap;
}
.service-status h3,
.service-status p {
  margin: 0;
}
.service-status .service-list {
  --smalltext: .7rem;
  --borderColor: var(--color-gray-2);
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--borderColor);
}
.service-status .service-list > li {
  border-bottom: 1px solid var(--borderColor);
  padding: 1rem;
  display: grid;
  grid-template-columns: [name] 20ch [icon] 2rem [message] auto;
  grid-template-areas: "name icon" "message message" "time time" "update update";
  grid-template-rows: auto;
  grid-template-columns: 1fr 1rem;
}
.service-status .service-list li:nth-child(odd):last-child {
  border-bottom: none;
}
.service-status .service-list svg.icon {
  transform: scale(150%);
}
.service-status .service-list .service-name {
  font-weight: 590;
  grid-area: name;
}
.service-status .service-list .timeStamp,
.service-status .service-list .timestamp {
  margin-right: var(--spaceMin);
  grid-area: time;
}
.service-status .service-list .service-message {
  font-size: var(--smalltext);
  grid-area: message;
  max-width: 95%;
}
.service-status .service-list .service-update {
  margin-top: var(--spaceMin);
  grid-area: update;
}
.inviteSettings fieldset h3 {
  color: white;
  background-color: var(--color-gray-med);
  margin: calc(-1 * var(--spaceMed)) calc(-1 * var(--spaceMed)) var(--spaceMed) calc(-1 * var(--spaceMed));
}

.inputGrid {
  margin: var(--spaceMed) 0;
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceMin);
}
.inputGrid .longName {
  font-weight: 600;
  white-space: nowrap;
  text-overflow: clip;
  text-overflow: ellipsis;
}
.inputGrid > * {
  text-align: right;
  border: var(--formBorder) solid var(--color-detail);
  padding: var(--spaceMin);
}
.inputGrid > *:hover {
  background-color: rgba(138, 143, 143, 0.1);
}
.inputGrid .memId {
  text-align: left;
  display: grid;
  grid-template-columns: auto 25px;
  grid-template-rows: 2ch 2ch;
}
.inputGrid .memId input {
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column-start: 2;
  grid-column-end: 2;
}
.inputGrid .memNot {
  text-align: left;
  display: grid;
  grid-template-columns: auto var(--maxCoreHourLength);
  grid-template-rows: 2ch 2ch;
}
.inputGrid .memNot input {
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column-start: 2;
  grid-column-end: 2;
  width: var(--maxCoreHourLength);
}

#team_cpuhours {
  width: 30ch;
}

.dgControls,
.nodeActions {
  display: grid;
  align-content: center;
  margin: var(--spaceMed) 0;
  grid-template-columns: auto;
  gap: var(--spaceMed);
}
.dgControls > *,
.nodeActions > * {
  margin: 0;
}
.dgControls label,
.nodeActions label {
  margin: 0;
}
.dgControls .editIndicator,
.dgControls .selectedNodes,
.nodeActions .editIndicator,
.nodeActions .selectedNodes {
  padding-top: 0.5rem;
}
.dgControls .editIndicator,
.nodeActions .editIndicator {
  visibility: hidden;
}
.dgControls .editIndicator.edited,
.nodeActions .editIndicator.edited {
  visibility: visible;
  color: var(--color-alert);
}
.dgControls .editIndicator.edited,
.dgControls #selectedNodesNumber,
.nodeActions .editIndicator.edited,
.nodeActions #selectedNodesNumber {
  font-weight: bold;
}

.detailHealth,
.detailSched {
  display: none;
}

#showHealth:checked ~ .detailHealth,
#showSched:checked ~ .detailSched {
  display: inline;
}

.nodeFilter {
  padding-top: var(--spaceMed);
}

@media screen and (min-width: 600px) {
  .dgControls {
    grid-template-columns: 1fr 8ch 1fr 14ch;
  }
  .dgControls > *:last-child {
    text-align: right;
  }
  .nodeActions {
    grid-template-columns: 1fr 2fr;
  }
}
.nodeGrid {
  --nodeWidth: 12ch;
  --tooltipWidth: 44ch;
  --hlBorderColor: var(--color-gray-5);
  --us: 30%;
  --ul: 75%;
  --ubg: var(--color-gray-med);
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--nodeWidth));
  grid-auto-flow: row;
  justify-items: stretch;
  justify-content: flex-start;
  gap: 5px;
  margin: 0;
  padding: var(--spaceMed);
}
.nodeGrid:has(> :nth-child(9)) {
  justify-content: space-between;
}
.nodeGrid > li {
  font-size: 70%;
  text-align: center;
  flex-basis: var(--nodeWidth);
  display: flex;
  flex-direction: column;
  padding: calc(0.75 * var(--spaceMin)) 0.75rem;
  border-width: 2px;
  position: relative;
  border: var(--formBorder) solid var(--color-gray-5);
  border-radius: calc(3 * var(--formBorder));
  border-bottom-right-radius: calc(3 * var(--formBorder));
  border-bottom-left-radius: calc(3 * var(--formBorder));
  color: var(--color-gray-v-lt);
  background-color: var(--color-gray-5);
  transition: border-bottom-left-radius var(--timeShort) 0.5s, border-bottom-right-radius var(--timeShort) 0.5s, background-color var(--timeShort);
}
.nodeGrid > li:hover {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  z-index: 3;
}
.nodeGrid > li a {
  color: var(--color-gray-v-lt);
  text-decoration: none;
  text-shadow: 1px 1px 2px var(--color-gray-v-dk);
}
.nodeGrid > li .tooltip {
  visibility: hidden;
  opacity: 0;
  padding: var(--spaceMin);
  text-align: left;
  position: absolute;
  top: 20px;
  width: var(--tooltipWidth);
  left: calc(-0.45 * var(--tooltipWidth) + 0.45 * var(--nodeWidth));
  border: 4px solid var(--color-panel-bg);
  background-color: var(--color-panel-bg);
  z-index: 2;
  transition: var(--timeShort) opacity ease;
  transition-delay: 0.5s;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 11ch 1fr 1.5rem;
  grid-auto-rows: min-content;
  grid-template-areas: "nodeInfo nodeInfo icon" "reason reason_v icon" "uptime uptime_v icon" "loadav loadav_v icon" "lastSeen lastSeen_v copy";
}
.nodeGrid > li .tooltip .nodeInfo {
  grid-area: nodeInfo;
}
.nodeGrid > li .tooltip .nodeInfo,
.nodeGrid > li .tooltip .key {
  font-weight: bold;
}
.nodeGrid > li .tooltip .icon {
  fill: var(--color);
  grid-area: icon;
  transform: translateX(5px) scale(0.7);
}
.nodeGrid > li .tooltip a.small.copy {
  position: absolute;
  right: 8px;
  bottom: 5px;
  transform: scale(0.7);
}
.nodeGrid > li .tooltip a.small.copy .icon {
  fill: var(--color-blue-lt);
}
.nodeGrid > li .tooltip a.small.copy:hover .icon {
  fill: white;
}
.nodeGrid > li:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.nodeGrid > li.stat-pos {
  --color: var(--color-success);
  background-color: rgb(47, 122, 47);
  border-color: var(--color);
}
.nodeGrid > li.stat-pos:hover {
  background-color: var(--color);
}
.nodeGrid > li.stat-pos .tooltip {
  border-color: var(--color);
  background-color: var(--colorWindowBg);
  color: var(--color-text);
}
.nodeGrid > li.stat-unk {
  --color: var(--color-alert);
  background-color: color-mix(in oklab, var(--color), var(--color-gray-5) var(--step-color-amount));
  border-color: var(--color);
}
.nodeGrid > li.stat-unk:hover {
  background-color: var(--color);
}
.nodeGrid > li.stat-unk .tooltip {
  border-color: var(--color);
  background-color: var(--colorWindowBg);
  color: var(--color-text);
}
.nodeGrid > li.stat-neg {
  --color: var(--color-error);
  --color-bg-darker: rgb(210, 16, 0);
  background-color: var(--color-bg-darker);
  border-color: var(--color);
}
.nodeGrid > li.stat-neg:hover {
  background-color: var(--color);
}
.nodeGrid > li.stat-neg .tooltip {
  border-color: var(--color);
  background-color: var(--colorWindowBg);
  color: var(--color-text);
}
.nodeGrid > li.stat-new {
  --color: var(--color-gray-3);
  --color-u: var(--color-gray-3);
  --color-u: color-mix(in oklab, var(--color-gray-5), var(--color-gray-2) var(--step-color-amount));
  --color-secondary: var(--color-gray-6);
  background-color: var(--color-u);
  border-color: var(--color);
}
.nodeGrid > li.stat-new a {
  color: var(--color-white);
  text-decoration: none;
  text-shadow: none;
}
.nodeGrid > li.stat-new:hover {
  background-color: var(--color);
  border-color: var(--color-u);
  border-bottom: var(--color-u);
}
.nodeGrid > li.stat-new:hover a {
  color: var(--color-white);
}
.nodeGrid > li.stat-new .tooltip {
  border-color: var(--color);
  background-color: var(--colorWindowBg);
  color: var(--color-text);
}
.nodeGrid > li.stat-serv {
  --color: var(--color-blue-2);
  background-color: color-mix(in oklab, var(--color), var(--color-gray-2) var(--step-color-amount));
  border-color: color-mix(in oklab, var(--color), var(--color-gray-2) 50%);
}
.nodeGrid > li.stat-serv:hover {
  background-color: var(--color);
}
.nodeGrid > li.stat-serv .tooltip {
  border-color: var(--color);
  background-color: var(--colorWindowBg);
  color: var(--color-text);
}
.nodeGrid > li.unselected, .nodeGrid > li.unselected:hover {
  --color: var(--color-gray-3);
  --color-u: rgb(235, 232, 232);
  border-color: var(--color-u);
  background-color: var(--color-u);
  color: var(--color);
}
.nodeGrid > li.unselected:hover, .nodeGrid > li.unselected:hover:hover {
  border-radius: calc(3 * var(--formBorder));
}
.nodeGrid > li.unselected:hover .tooltip, .nodeGrid > li.unselected:hover:hover .tooltip {
  display: none;
}
.nodeGrid li + li {
  margin-top: 0;
}
.nodeGrid .nname {
  cursor: pointer;
}
li[class*=hlth-]::before,
li[class*=schd-]::after {
  --size: 11px;
  height: var(--size);
  width: var(--size);
  content: "";
  display: block;
  position: absolute;
  background-size: 59px;
  background-repeat: no-repeat;
  background-image: url("../images/nodeGrid.png");
}

li[class*=hlth-]::before {
  left: 1px;
  background-position: -1px -2px;
}

li.hlth-neg::before {
  background-position: -16px -2px;
}

li.hlth-unk::before {
  background-position: -32px -2px;
}

li[class*=schd-]::after {
  right: 1px;
  background-position: -2px -16px;
}

li.schd-neg::after {
  background-position: -46px -16px;
}

li.schd-unk::after {
  background-position: -32px -16px;
}

li.schd-alert::after {
  background-position: -46px -16px;
}

li.schd-alert::after {
  background-position: -32px -16px;
}

@media screen and (max-width: 720px) {
  .inputGrid {
    flex-direction: column;
  }
  .inputGrid > * {
    flex-basis: 100%;
  }
}
@media screen and (min-width: 721px) {
  .inputGrid {
    flex-direction: row;
  }
  .inputGrid > * {
    flex-basis: calc(50% - var(--spaceMin));
  }
}
@media screen and (min-width: 901px) {
  .inputGrid > * {
    flex-basis: calc(33.3% - var(--spaceMin));
  }
}
@media screen and (min-width: 650px) {
  .cluster {
    padding: var(--spaceMed);
    border: var(--formBorder) solid var(--color-detail);
    margin-bottom: var(--spaceMin);
  }
  .cluster header h3,
  .cluster header h4 {
    grid-row: span 3;
    margin-right: var(--spaceMed);
  }
  .cluster header span {
    font-size: 80%;
  }
  .tableFooter label {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 800px) {
  .service-status .service-list {
    grid-template-columns: 1fr 1fr;
  }
  .service-status li:nth-child(odd) {
    border-right: 1px solid var(--borderColor);
  }
}
/* Pill  */
[class^=pill] {
  --pad: 0.25em;
  --myColor: var(--color-primary);
  --color-pill: var(--myColor);
  justify-content: center;
  border: 0.1em solid var(--color-pill);
  border-radius: var(--formBorderRad);
  box-sizing: border-box;
  color: var(--myColor);
  display: inline-flex;
  font-size: var(--pillTextSize);
  line-height: 1.1em;
  padding: var(--pad) var(--pad);
  position: relative;
  /* pending [class*="pending"]*/
  /* Pending2  */
}
[class^=pill][class*=status] {
  padding-left: 1.5em;
  text-transform: uppercase;
}
[class^=pill][class*=status]:before {
  --size: var(--pillTextSize);
  background: var(--color-pill);
  border-radius: 50%;
  content: "";
  display: block;
  height: var(--pillTextSize);
  width: var(--size);
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  /* spacing is important */
  transform: scale(0.7);
}
[class^=pill][class*=pending] {
  --time: 3s;
  border-color: var(--color-pill);
  /*       animation: pendLoop_foreground var(--time) ease infinite, pulse var(--time) infinite; */
  animation: pulse var(--time) infinite;
  box-shadow: 0 0 0 0 rgb(0, 0, 0);
}
[class^=pill][class*=pending]:before {
  /*         animation: pendLoop_background 2s ease infinite; */
}
[class^=pill][class*=lead] {
  --color-pill: var(--color-primary);
  padding-left: 1.2rem;
}
[class^=pill][class*=lead]:before {
  font-size: 0.8rem;
  color: var(--color-pill);
  content: "★";
  position: absolute;
  left: 0.25em;
  top: 0.05em;
  /* spacing is important */
}

@keyframes pendLoop_foreground {
  /*   --myColorLight: color-mix(in srgb, --myColor 10%, white); */
  /*   --myColorDark: color-mix(in srgb, --myColor 10%, black); */
  0% {
    color: var(--myColor);
    border-color: var(--myColor);
  }
  50% {
    color: var(--color-pending-dk);
    border-color: var(--color-pending-dk);
  }
  100% {
    color: var(--myColor);
    border-color: var(--myColor);
  }
}
@keyframes pendLoop_background {
  0% {
    background-color: var(--myColor);
  }
  50% {
    background-color: var(--color-pending-dk);
  }
  100% {
    background-color: var(--myColor);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--myColor);
  }
  50% {
    box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.spinner {
  animation: rotate 2s linear infinite;
  width: 1rem;
  height: 1rem;
}
.spinner .spinPath {
  stroke: var(--color-primary);
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 140;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 80, 140;
    stroke-dashoffset: -40;
  }
  100% {
    stroke-dasharray: 40, 140;
    stroke-dashoffset: -120;
  }
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  backdrop-filter: blur(1px);
  background: linear-gradient(0deg, rgba(151, 189, 233, 0.4) 0%, rgba(14, 37, 47, 0.4) 100%);
  display: grid;
  justify-content: center;
  align-content: center;
}

body .loading {
  position: relative;
  display: grid;
  justify-content: center;
  align-content: center;
  padding: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
body .loading > * {
  grid-row-start: 1;
  grid-column-start: 1;
}

.loading .backdrop {
  padding: var(--spaceMed);
}
.loading .backdrop:after {
  content: "";
  color: rgba(124, 164, 181, 0.677);
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(1px);
  background: rgba(255, 255, 255, 0.5);
}

.loadAnimation {
  display: none;
}

.loading .loadAnimation {
  display: block;
  --size: 3rem;
  justify-self: center;
  z-index: 11;
  height: var(--size);
  margin-top: var(--size);
}
.loading .loadAnimation .spinner {
  width: var(--size);
  height: var(--size);
}

.refresh-widget svg.icon {
  vertical-align: middle;
}
.refresh-widget svg.icon:has(~ input:checked) {
  transform-origin: 50% 50%;
  animation: rotation 4s;
  animation-timing-function: ease-out;
}

.reload {
  transform-origin: 50% 50%;
  animation: rotation 4s;
  animation-timing-function: ease-out;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1799deg);
  }
}
main .passwordSet {
  align-items: end;
}
main .passwordSet > * {
  margin-bottom: 0;
}

#files,
.files {
  background-color: var(--colorMainBg);
  padding: var(--spaceMin);
  margin: var(--spaceMin);
}
#files ul,
.files ul {
  list-style-type: none;
  line-height: 2.1;
}
#files a,
.files a {
  padding: var(--spaceMin);
}
#files a.selected,
.files a.selected {
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.796);
}

.fileInfo {
  padding: var(--spaceMin);
  margin: var(--spaceMin);
  border: 2px solid var(--colorMainBg);
  text-align: center;
}
.fileInfo .fileActions button {
  margin: calc(0.5 * var(--spaceMin));
}
.fileInfo > div {
  position: sticky;
  top: calc(var(--headFootHeight) * 2);
}

.tableActions,
.tableFilter {
  --headergap: 4px;
  height: 1.5rem;
  margin-bottom: 1.1rem;
  display: flex;
  gap: var(--headergap);
}

.tableFilter a ~ a:before {
  content: "| ";
  color: var(--color-gray-2);
}

.tableActions > *:last-child {
  flex-grow: 1;
  text-align: right;
}

.tableFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spaceMed);
}

.provImages {
  display: none;
}

label:has(#showImages:checked) ~ .provImages {
  display: block;
}

.progressBar.preInit,
progress[value="0"] {
  visibility: hidden;
}

.progressBar.indeterminate,
.progressBar.success {
  display: block;
}

progress,
.progressBar {
  --borderRad: 8px;
  border-radius: var(--borderRad);
  width: 100%;
  height: var(--spaceMed);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2) inset;
}

.progressBar {
  overflow: hidden;
}

progress::-webkit-progress-bar,
.progressBar {
  background-color: var(--colorMainBg);
  border-radius: 8px;
}

progress::-webkit-progress-value,
.progressBar .progressBar-value {
  background-color: var(--color-alert);
  border-radius: 8px;
}

progress.success::-webkit-progress-value,
.progressBar.success .progressBar-value {
  background-color: var(--color-success);
  animation: indeterminate-success-color-transition 3s forwards ease-in-out;
}

.progressBar.indeterminate .progressBar-value {
  width: 100%;
  height: 100%;
  animation: indeterminateAnimation 3s infinite linear;
  transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}
@keyframes indeterminate-success-color-transition {
  0% {
    background-color: var(--color-alert);
  }
  100% {
    background-color: var(--color-success);
  }
}
.progressBar.success .progressBar-value {
  width: 100%;
  height: 100%;
  transform-origin: 0% 50%;
}

#refresh-interval {
  width: 11ch;
}

.nodeStatus {
  line-height: 1.5rem;
}
.nodeStatus .icon {
  height: 0.8rem;
  padding-bottom: 1px;
}
.nodeStatus svg.icon {
  transform: translateY(2px);
}

.overview .panel {
  position: relative;
}
.overview h4 {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: light-dark(var(--color-gray-4), var(--color-gray-2));
}

.nodeStatus .switch.small {
  margin-left: -0.5rem;
}

details.more {
  position: absolute;
}
details.more .menu {
  --textColor: var(--color-gray-5);
  color: var(--textColor);
  background-color: var(--color-gray-v-lt);
  border: var(--formBorder) solid var(--color-gray-med);
  width: var(--moreMenuWidth);
}
details.more .menu a {
  color: var(--textColor);
}
details.more .menu a.error {
  color: var(--color-error);
}
details.more .menu a, details.more .menu label {
  display: block;
  width: 100%;
}
details.more .menu svg.icon {
  transform: scale(70%);
}
details.more .menu .buffered {
  margin-top: var(--spaceMin);
  border-top: 1px solid var(--textColor);
  padding-top: var(--spaceMin);
}
details.more .menu li:hover {
  background-color: var(--color-gray-med);
}

.infoLink {
  position: absolute;
  transform: scale(80%);
  right: 1rem;
  top: 1rem;
  color: var(--theme-link-color);
}

.chooseHead {
  position: absolute;
  right: 1rem;
  top: 0.7rem;
}

.ovGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spaceMed);
}
.ovGrid .panel {
  margin: 0;
}

.ovGrid ~ .ovGrid {
  margin-top: var(--spaceMed);
}

@media screen and (min-width: 950px) {
  .ovGrid {
    grid-template-columns: 1fr 1fr;
  }
}
.heads .panel canvas {
  display: block;
  margin: 0 auto;
}

.summaryBar {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.summaryBar > li {
  margin: 0;
  padding: 0.5rem 1rem;
  height: 3rem;
  text-align: center;
  height: auto;
  color: var(--color-gray-med);
  font-size: 0.7rem;
}
.summaryBar > li .num {
  display: block;
  font-size: 2rem;
  color: var(--color-text);
}
.summaryBar > li .cost {
  display: block;
  color: var(--color-text);
}

.nodeSummary th:last-child,
.nodeSummary td:last-child {
  text-align: right;
}
.nodeSummary button {
  display: block;
}

.smaller svg.icon {
  --iconSize: .85em;
}

.usersTeams {
  height: fit-content;
}

.activity ul {
  list-style-type: none;
  padding-left: 0;
}
.activity ul li {
  padding: var(--spaceMin) 0;
}
.activity ul li:nth-of-type(n+2) {
  border-top: 1px solid var(--color-gray-2);
}

.timeStamp {
  color: var(--color-gray-3);
  font-size: var(--smalltext);
}

.ovClusterHealth th, .ovClusterHealth td,
.ovHnSummary th,
.ovHnSummary td {
  vertical-align: middle;
}

.ovAttributes .flexy select {
  width: 16ch;
}

.ovHnSummary .halves {
  align-items: center;
}

/*
th:nth-child(2),
td:nth-child(2) {
  text-align: center;
}
*/
.ovImSources .halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ovImSources .halves .tagArray {
  height: 90%;
}
.ovImSources .alignRight {
  clear: both;
}

.ovUsage canvas {
  margin: 1rem auto 0 auto;
  display: block;
}

.ovActivity h4 {
  margin-bottom: 0.5rem;
}

.dgControls,
.dgDescription {
  border: var(--formBorder) solid var(--color-detail);
  padding: var(--spaceMed);
}

.dgControls {
  padding-top: var(--spaceMax);
  padding-bottom: var(--spaceMin);
  border-bottom: none;
  margin: 0;
}

.dgDescription {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  color: var(--color-gray-med);
}
.dgDescription.edited {
  color: var(--color-text);
}

.nodeActionDialog .output header,
.nodeActionDialog .downloadOptions {
  display: grid;
  grid-template-columns: 1fr 20ch;
  align-items: center;
}
.nodeActionDialog .output header > *:last-child,
.nodeActionDialog .downloadOptions > *:last-child {
  text-align: right;
}
.pagination {
  list-style-type: none;
  margin: var(--spaceMin) 0 0 0;
  padding: 0;
}
.pagination > li {
  display: inline;
}
.pagination .current {
  font-weight: 600;
}
.pagination a {
  background-color: hsla(180, 2%, 55%, 0.1);
  padding: 3px var(--spaceMin);
  color: var(--color-primary);
}
.pagination a:hover {
  text-decoration: none;
}

.twoFASetup .sbs {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.twoFASetup .sbs div:first-of-type {
  display: grid;
  align-items: center;
  justify-items: center;
}
.twoFASetup .sbs div:first-of-type canvas {
  min-width: 200px;
  width: 100%;
  height: auto;
}
.twoFASetup .sbs div:last-of-type {
  text-align: left;
}
.twoFASetup .sbs ~ section {
  margin-bottom: var(--spaceMed);
}

.login-box.twoFASetup fieldset {
  display: block;
}

@media screen and (min-width: 800px) {
  .twoFASetup .sbs {
    grid-template-columns: 300px 1fr;
  }
  .twoFASetup canvas {
    max-width: 200px;
  }
}
.globalSettings {
  --inputWidth: 35ch;
  display: grid;
  grid-template-columns: 1fr;
}
.globalSettings fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--spaceMed);
}
.globalSettings fieldset label {
  text-align: right;
}
.globalSettings fieldset select,
.globalSettings fieldset input {
  width: var(--inputWidth);
  display: block;
}
.globalSettings fieldset select ~ span,
.globalSettings fieldset input ~ span {
  display: block;
  width: var(--inputWidth);
}

@media screen and (min-width: 700px) {
  .login-box.panel,
  .panel.globalSettings {
    max-width: 700px;
    margin: 0 auto;
  }
  .halves .login-box.panel {
    max-width: 100%;
    width: 100%;
  }
}
output {
  font-weight: 600;
}
output.success, output.ok {
  color: var(--color-success);
}
output.warning, output.alert {
  color: var(--color-orange);
}
output.error {
  color: var(--color-error);
}

.addSomething h4 {
  margin-bottom: var(--spaceMed);
}

.tagArray {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceMed);
  align-content: flex-start;
  padding: var(--spaceMed);
  border: var(--formBorder) solid var(--color-detail);
}
.tagArray > li {
  margin: 0;
}

.usage-summary .flexy > *:last-child {
  flex: 1 0 30%;
}

.chart-container {
  position: relative;
  height: auto;
  width: 100%;
}
.chart-container canvas {
  width: 100%;
}

#dailyChart {
  max-width: 100%;
  height: auto;
}

.vmid {
  align-self: center;
}

.storage .piechart {
  display: block;
  height: 450px;
  width: 450px;
  margin: 0 auto;
}

/* manage Administrators table */
.manageAdmin {
  --color: var(--color-text);
  --moreMenuWidth: 30ch;
}
.manageAdmin .pill {
  border-color: var(--color);
  color: var(--color);
}
.manageAdmin tr.error {
  --color: var(--color-red-warm);
  color: var(--color);
}

/* Settings Group to Roll More Menu */
.groupRoles li label {
  display: inline-block;
  width: 15ch;
}
.groupRoles li input[type=checkbox] {
  --background: var(--color-gray-v-lt);
}
.groupRoles li button {
  color: var(--color-white);
}

.stateMap td:nth-of-type(1) {
  width: 3rem;
}
.stateMap td:nth-of-type(2) {
  width: 3rem;
}
.stateMap td:nth-of-type(3) {
  width: 25%;
}
.stateMap input[type=text] {
  width: 100%;
}
.stateMap .xtra {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: var(--spaceMed);
  align-items: center;
}
.stateMap .xtra > *:nth-last-child(1) {
  margin-left: auto;
}

.confirm {
  width: 80ch;
}

.none {
  display: none;
}

.hide {
  visibility: hidden;
}

.pointer {
  cursor: pointer;
}

.fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
}
/* Stacked panel view for head nodes page */
.stacked {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-content: center;
}
.stacked > * {
  grid-area: 1/1;
}
.stacked article[id^=head-node-] {
  visibility: hidden;
}
.stacked article[id^=head-node-].visible {
  visibility: visible;
}

/* headline extras for icons, pills, etc… */
.headline-extra {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  gap: var(--spaceMed);
}
.headline-extra .dashLights {
  letter-spacing: normal;
  flex: 1 0 auto;
  font-size: 1rem;
}

/* Node map & Spectra colors */
.nodeMapActions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0 var(--spaceMed) var(--spaceMed) var(--spaceMed);
}
.nodeMapActions > * {
  /* border: 1px solid green; */
}
.nodeMapActions > *:nth-child(1) {
  width: 90%;
}
.nodeMapActions > *:nth-child(2), .nodeMapActions > *:nth-child(3) {
  /* border: 1px solid red; */
  width: 13ch;
}
.nodeMapActions > *:nth-last-child(1) {
  /* border: 1px solid blue; */
  margin-left: auto;
  width: 16ch;
  flex-shrink: 0;
}

#spectra {
  /* width: 50%; */
  /* border: 1px solid red; */
  display: flex;
  /* align-items: center; */
  /* align-items: stretch; */
  gap: 0.5rem;
}
#spectra label {
  --width: 30px;
  width: var(--width);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#spectra label input[type=radio] {
  display: none;
}
#spectra label svg.sample {
  border: 3px solid transparent;
  width: var(--width);
  height: auto;
}
#spectra label input:checked ~ svg.sample {
  border-color: var(--color-primary);
}
#spectra label span {
  font-size: 0.7rem;
}

.spectra_names {
  width: 50%;
  display: flex;
  text-align: center;
  /* flex-direction: column; */
  justify-content: space-between;
  /* writing-mode: vertical-lr; */
  margin-bottom: 2rem;
  color: white;
}
.spectra_names option {
  padding: 0;
  /* transform: translateX(10px); */
}

#nodeMap {
  /* width: 100%; */
  display: grid;
  grid-gap: 1ch;
  grid-template-columns: 1fr;
  justify-content: center;
  /* CSS DETAILS APPROACH  */
}
#nodeMap [class^=subcluster] {
  --group-color: var(--color-detail);
  --title-height: 1.5rem;
  --border-width: 2px;
  padding: 1rem;
  margin: 1rem;
  /* width: 100%; */
  display: grid;
  border: var(--border-width) solid var(--group-color);
}
#nodeMap div[class^=subcluster] {
  grid-gap: 1ch;
  grid-template-columns: repeat(auto-fit, 14ch);
}
#nodeMap div[class^=subcluster] .node {
  padding: 0.3rem 0.7rem;
  border-radius: 0.25rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-white);
}
#nodeMap details[class^=subcluster] {
  padding: 0.3rem;
  margin: 0 1rem 0 1rem;
  width: 55ch;
  color: var(--colorMainBg);
  content: attr(data-title);
  background-color: var(--group-color);
  grid-template-columns: 1fr;
}
#nodeMap details[class^=subcluster] summary {
  cursor: pointer;
}
#nodeMap details ~ div[class^=subcluster] {
  margin-top: -0.6rem;
}
#nodeMap.smallNodes div[class^=subcluster] {
  grid-template-columns: repeat(auto-fit, 14px);
  grid-gap: 4px;
}
#nodeMap.smallNodes div[class^=subcluster] .node {
  --size: .8rem;
  padding: 0.3rem;
  border-radius: 0.25rem;
  height: var(--size);
  width: var(--size);
}
#nodeMap.smallNodes div[class^=subcluster] .node .title {
  display: none;
}
#nodeMap [class^=subcluster]:nth-of-type(even) {
  --group-color: color-mix(in lch, var(--color-input-border) 15%, white);
}

/* ------------- */
.spectrum01 {
  /* .subcluster-01 {--group-color: var(--s1v1);}
  .subcluster-02 {--group-color: var(--s1v2);}
  .subcluster-03 {--group-color: var(--s1v3);}
  .subcluster-04 {--group-color: var(--s1v4);}
  .subcluster-05 {--group-color: var(--s1v5);}
  .subcluster-06 {--group-color: var(--s1v6);} */
}
.spectrum01 .val-01 {
  background-color: var(--s1v1);
  fill: var(--s1v1);
}
.spectrum01 .val-02 {
  background-color: var(--s1v2);
  fill: var(--s1v2);
}
.spectrum01 .val-03 {
  background-color: var(--s1v3);
  fill: var(--s1v3);
}
.spectrum01 .val-04 {
  background-color: var(--s1v4);
  fill: var(--s1v4);
}
.spectrum01 .val-05 {
  background-color: var(--s1v5);
  fill: var(--s1v5);
}
.spectrum01 .val-06 {
  background-color: var(--s1v6);
  fill: var(--s1v6);
}

.spectrum02 {
  /* .subcluster-01 {--group-color: var(--s2v1);}
  .subcluster-02 {--group-color: var(--s2v2);}
  .subcluster-03 {--group-color: var(--s2v3);}
  .subcluster-04 {--group-color: var(--s2v4);}
  .subcluster-05 {--group-color: var(--s2v5);}
  .subcluster-06 {--group-color: var(--s2v6);} */
}
.spectrum02 .val-01 {
  background-color: var(--s2v1);
  fill: var(--s2v1);
}
.spectrum02 .val-02 {
  background-color: var(--s2v2);
  fill: var(--s2v2);
}
.spectrum02 .val-03 {
  background-color: var(--s2v3);
  fill: var(--s2v3);
}
.spectrum02 .val-04 {
  background-color: var(--s2v4);
  fill: var(--s2v4);
}
.spectrum02 .val-05 {
  background-color: var(--s2v5);
  fill: var(--s2v5);
}
.spectrum02 .val-06 {
  background-color: var(--s2v6);
  fill: var(--s2v6);
}

.spectrum03 {
  /* .subcluster-01 {--group-color: var(--s3v1);}
  .subcluster-02 {--group-color: var(--s3v2);}
  .subcluster-03 {--group-color: var(--s3v3);}
  .subcluster-04 {--group-color: var(--s3v4);}
  .subcluster-05 {--group-color: var(--s3v5);}
  .subcluster-06 {--group-color: var(--s3v6);} */
}
.spectrum03 .val-01 {
  background-color: var(--s3v1);
  fill: var(--s3v1);
}
.spectrum03 .val-02 {
  background-color: var(--s3v2);
  fill: var(--s3v2);
}
.spectrum03 .val-03 {
  background-color: var(--s3v3);
  fill: var(--s3v3);
}
.spectrum03 .val-04 {
  background-color: var(--s3v4);
  fill: var(--s3v4);
}
.spectrum03 .val-05 {
  background-color: var(--s3v5);
  fill: var(--s3v5);
}
.spectrum03 .val-06 {
  background-color: var(--s3v6);
  fill: var(--s3v6);
}

.spectrum04 {
  /* .subcluster-01 {--group-color: var(--s4v1);}
  .subcluster-02 {--group-color: var(--s4v2);}
  .subcluster-03 {--group-color: var(--s4v3);}
  .subcluster-04 {--group-color: var(--s4v4);}
  .subcluster-05 {--group-color: var(--s4v5);}
  .subcluster-06 {--group-color: var(--s4v6);} */
}
.spectrum04 .val-01 {
  background-color: var(--s4v1);
  fill: var(--s4v1);
}
.spectrum04 .val-02 {
  background-color: var(--s4v2);
  fill: var(--s4v2);
}
.spectrum04 .val-03 {
  background-color: var(--s4v3);
  fill: var(--s4v3);
}
.spectrum04 .val-04 {
  background-color: var(--s4v4);
  fill: var(--s4v4);
}
.spectrum04 .val-05 {
  background-color: var(--s4v5);
  fill: var(--s4v5);
}
.spectrum04 .val-06 {
  background-color: var(--s4v6);
  fill: var(--s4v6);
}

.spectrum05 {
  /* 
  .subcluster-01 {--group-color: var(--s5v1);}
  .subcluster-02 {--group-color: var(--s5v2);}
  .subcluster-03 {--group-color: var(--s5v3);}
  .subcluster-04 {--group-color: var(--s5v4);}
  .subcluster-05 {--group-color: var(--s5v5);}
  .subcluster-06 {--group-color: var(--s5v6);} 
  */
}
.spectrum05 .val-01 {
  background-color: var(--s5v1);
  fill: var(--s5v1);
}
.spectrum05 .val-02 {
  background-color: var(--s5v2);
  fill: var(--s5v2);
}
.spectrum05 .val-03 {
  background-color: var(--s5v3);
  fill: var(--s5v3);
}
.spectrum05 .val-04 {
  background-color: var(--s5v4);
  fill: var(--s5v4);
}
.spectrum05 .val-05 {
  background-color: var(--s5v5);
  fill: var(--s5v5);
}
.spectrum05 .val-06 {
  background-color: var(--s5v6);
  fill: var(--s5v6);
}

.graphic-404 {
  background-color: var(--color-penguin-yellow);
  padding: var(--spaceMax);
  text-align: center;
}
.graphic-404 svg {
  height: 50vh;
  fill: var(--color-penguin-black);
}

/* add ons */
.custom-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* 12-column grid system */
  width: 100%;
  gap: 1rem;
  /* Default gap, configurable via props */
}

/* Grid item spans */
.custom-grid-item {
  grid-column: span 12;
  /* Default span */
}

/* Predefined spans for flexible grid items */
.span-1 {
  grid-column: span 1;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.span-8 {
  grid-column: span 8;
}

.span-9 {
  grid-column: span 9;
}

.span-10 {
  grid-column: span 10;
}

.span-11 {
  grid-column: span 11;
}

.span-12 {
  grid-column: span 12;
}

/* Layouts and Boxes */
.flexy {
  display: flex;
  flex-direction: column;
  gap: var(--spaceMed);
  margin: var(--spaceMed) 0;
  flex-wrap: wrap;
  width: 100%;
}
.halves,
.thirds,
.quarters,
.fourths {
  display: block;
  margin: var(--spaceMed) 0;
}
.padded,
.panel {
  padding: var(--spaceMed);
  border: var(--formBorder) solid var(--color-detail);
}
.padded ~ h2, .padded ~ h3, .padded ~ h4, .padded ~ h5, .padded ~ h6,
.panel ~ h2,
.panel ~ h3,
.panel ~ h4,
.panel ~ h5,
.panel ~ h6 {
  margin-top: var(--spaceMed);
}

.padded {
  position: relative;
}
.padded > *:nth-child(n+2) {
  margin-left: var(--spaceMed);
  margin-right: var(--spaceMed);
}
.padded.bg-success, .padded.bg-alert, .padded.bg-warning, .padded.bg-error {
  padding: 0;
}

.panel {
  background-color: var(--color-panel-bg);
  margin: var(--spaceMed) 0;
}

.panelActions, .panelActions .summary-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: var(--spaceMed);
  align-items: center;
  color: var(--color-text-invert);
  background-color: var(--color-input-border);
  margin: -1rem -1rem 1rem -1rem;
  width: auto;
  padding: var(--spaceMed);
}
.panelActions .edit.icon, .panelActions .summary-title .edit.icon {
  /* transform: scale(.8); */
  transform: scale(0.8) translateX(-1rem);
}
.panelActions > *:nth-last-child(2), .panelActions .summary-title > *:nth-last-child(2) {
  margin-left: auto;
}

.panelActions .summary-title {
  margin: -1rem;
}

details.panel {
  position: relative;
}
details.panel .summary-title {
  /* margin-right: 2rem; */
  width: calc(100% - 2.5rem);
}
details.panel .summary-chevron {
  pointer-events: none;
}
details.panel .summary-chevron svg {
  display: block;
}
details.panel:not([open]) summary svg.edit.icon {
  display: none;
}
details.panel:not([open]) summary .summary-chevron svg {
  transform: rotate(180deg) translateX(4px);
}

.login .panel {
  border-radius: var(--formBorderRad);
  border: var(--formBorder) solid var(--color-input-border);
}

.bg-success > *:nth-child(1),
.bg-alert > *:nth-child(1),
.bg-warning > *:nth-child(1),
.bg-error > *:nth-child(1) {
  padding: var(--spaceMed);
}

@media screen and (min-width: 800px) {
  .halves,
  .thirds,
  .quarters,
  .fourths {
    display: grid;
    gap: var(--spaceMed);
    justify-items: stretch;
    align-items: stretch;
  }
  .halves {
    grid-template: auto/[left] 1fr [right] 1fr;
  }
  .thirds {
    grid-template: auto/[left] 1fr [center] 1fr [right] 1fr;
  }
  .quarters,
  .fourths {
    grid-template: auto/[left] 1fr [centerleft] 1fr [centerright] 1fr [right] 1fr;
  }
  .wider,
  .span2col {
    grid-column: span 2;
  }
  .span3col {
    grid-column: span 3;
  }
  .span4col {
    grid-column: span 4;
  }
  .span2row,
  .taller {
    grid-row: span 2;
  }
  .span3row {
    grid-row: span 3;
  }
  .span4row {
    grid-row: span 4;
  }
  .flexy {
    flex-direction: row;
    align-items: center;
  }
}
/* Message boxes */
dialog {
  padding: 0;
  border: var(--formBorder) solid var(--color-detail);
  background-color: var(--colorMainBg);
  color: var(--colorMainFg);
}
dialog > header {
  background-color: var(--color-detail);
  color: var(--color-white);
}
dialog > * {
  padding: var(--spaceMin) var(--spaceMed);
}
dialog > form {
  padding: var(--spaceMin) var(--spaceMed);
}
dialog:not(.modal) {
  position: relative;
  width: 100%;
}

.messageBox {
  margin: var(--spaceMed) auto;
}

.messageBox.full {
  margin: calc(-1 * var(--spaceMax)) calc(-1 * var(--spaceMax)) var(--spaceMed) calc(-1 * var(--spaceMax));
  max-width: calc(100% + 2 * var(--spaceMax));
  width: calc(100% + 2 * var(--spaceMax));
  border-radius: 0;
}

/* common visuals */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1000;
  display: none;
}

.backdrop[open] {
  display: block;
}

.backdrop > dialog {
  margin: unset;
}

/* dynamic way to do what modal-open achieves */
body:has(.backdrop[open]) {
  overflow: hidden;
}

.modal {
  max-width: var(--dialog-width);
  min-width: 50ch;
  min-height: 2.5rem;
  overflow: auto;
  resize: both;
}
.modal textarea {
  width: 100%;
  resize: vertical;
}
.modal > div,
.modal > form > div {
  max-height: 70vh;
  overflow-y: auto;
}

.modal,
.messageBox {
  border-radius: var(--spaceMin);
}
.modal > header:nth-of-type(1),
.messageBox > header:nth-of-type(1) {
  display: grid;
  grid-template-columns: 1fr 2rem;
  align-items: start;
  column-gap: var(--spaceMin);
}
.modal > header:nth-of-type(1) > *,
.messageBox > header:nth-of-type(1) > * {
  font-size: 1.2rem;
  letter-spacing: 0.001rem;
  margin: 0;
}
.modal > header:nth-of-type(1) button.close:not(.closeSVG),
.messageBox > header:nth-of-type(1) button.close:not(.closeSVG) {
  --size: 2rem;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--color-gray-v-lt);
  padding: 0;
  margin: 0;
  width: var(--size);
  height: var(--size);
  text-transform: uppercase;
  border: 0;
  font-size: 1rem;
  transform: translateX(8px);
  flex-basis: var(--size);
  flex: none;
}
.modal > header:nth-of-type(1) button.close:not(.closeSVG):hover,
.messageBox > header:nth-of-type(1) button.close:not(.closeSVG):hover {
  color: var(--color-white);
}
.modal > header:nth-of-type(1) button.closeSVG,
.messageBox > header:nth-of-type(1) button.closeSVG {
  color: var(--color-gray-v-lt);
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: var(--size);
  height: var(--size);
  border: 0;
  transform: translateX(1rem);
}
.modal > header:nth-of-type(1) button.closeSVG svg,
.messageBox > header:nth-of-type(1) button.closeSVG svg {
  --iconSize: 1.3rem;
}
.modal > header:nth-of-type(1) button.closeSVG:hover,
.messageBox > header:nth-of-type(1) button.closeSVG:hover {
  color: var(--color-white);
}
.modal > header:nth-of-type(1) button:focus,
.messageBox > header:nth-of-type(1) button:focus {
  outline: none;
}
.modal > * p,
.modal > * ul,
.modal > * li,
.messageBox > * p,
.messageBox > * ul,
.messageBox > * li {
  max-width: 100%;
}
.modal p,
.messageBox p {
  margin: 0;
}
.modal p ~ button,
.messageBox p ~ button {
  margin-top: var(--spaceMed);
}

.messageBox.success > div, .messageBox.error > div {
  color: var(--color-text);
}

/* Make sure max line length is ignored in modal boxes */
dialog * {
  max-width: none;
}

th.moreMenu,
td.moreMenu {
  position: relative;
  padding: 0 var(--spaceMin);
  width: 3rem;
  text-align: center;
}
th.moreMenu details.more,
td.moreMenu details.more {
  top: 0.4rem;
}
th.moreMenu details.more .menu,
td.moreMenu details.more .menu {
  right: -0.8rem;
  top: 0.8rem;
}
th.moreMenu details.more input[type=checkbox],
td.moreMenu details.more input[type=checkbox] {
  --background: var(--color-gray-v-lt);
}

div > details.more,
article > details.more,
section > details.more {
  position: absolute;
  right: 0;
  margin-right: var(--spaceMin);
  top: 0.3rem;
}

details.more summary {
  --size: 2rem;
  font-weight: bold;
  color: var(--color-primary);
  list-style: none;
  cursor: pointer;
  display: grid;
  justify-content: center;
  align-content: center;
  height: var(--size);
  width: var(--size);
  background-color: transparent;
  text-align: center;
  border-radius: 1rem;
  transition: background-color var(--timeMed) ease;
}
details.more summary:hover {
  background-color: hsl(0, 0%, 85%);
}
details.more summary::-webkit-details-marker {
  display: none;
}
details.more .menu {
  text-align: left;
  list-style-type: none;
  padding: var(--spaceMin);
  display: block;
  position: absolute;
  z-index: 10;
  right: 0.4rem;
  top: 0.8rem;
  background-color: var(--color-input-border);
  width: 20ch;
}
details.more .menu,
details.more .menu a {
  color: var(--color-white);
}
details.more .closeMore {
  cursor: pointer;
}

/* Modal dialog box */
dialog.modal {
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 15%;
  z-index: 1000;
}

.modal:backdrop {
  background-color: rgba(120, 120, 120, 0.368);
}

/* System messages */
.noteBody svg.icon {
  --iconSize: 1rem;
}
.noteBody ~ .noteBody {
  margin-top: var(--spaceMin);
}

/* tabbed content */
/*
ul {
  background: darkorange;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
}

li:hover {
  background: red;
  cursor: pointer;
}

ul li ul {
  background: orange;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}
*/
.tabbed nav {
  background-color: var(--color-gray-6);
}
.tabbed nav ul {
  display: flex;
  gap: var(--spaceMin);
  list-style: none;
  margin: 0;
  padding-left: var(--formBorder);
  padding-top: 1rem;
}
.tabbed nav ul .tabLink {
  text-transform: uppercase;
  padding: var(--spaceMin);
  border: var(--formBorder) solid var(--color-panel-bg);
  transition: color var(--timeShort), background-color var(--timeShort), border-color var(--timeShort);
  text-align: center;
  cursor: pointer;
  border-radius: var(--spaceMin) var(--spaceMin) 0 0;
  color: var(--color-gray-3);
  background-color: var(--color-panel-bg);
  border-bottom-width: 0;
}
.tabbed nav ul li + li {
  margin-top: 0;
}
.tabbed nav ul a {
  color: var(--color-text-invert);
  text-decoration: none;
}
.tabbed nav ul a:hover {
  color: white;
}
.tabbed nav ul .active {
  background-color: var(--color-primary);
  color: var(--color-gray-3);
  border-color: var(--color-panel-bg);
  border-bottom-width: 0;
}
.tabbed nav ul .active:hover {
  color: var(--color-gray-1);
}
.tabbed nav ul svg.icon {
  --iconSize: 1rem;
  transform: translate(1px, -1.5px);
}
.tabbed nav ul .tabAdd {
  padding: var(--spaceMin);
  background-color: transparent;
  border-color: transparent;
  position: relative;
}
.tabbed nav ul .menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: var(--colorHeaderBg);
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}
.tabbed nav ul .menu.open {
  visibility: visible;
  opacity: 1;
}
.tabbed .contentArea > *:nth-child(n+2) {
  display: none;
}

/* Dashboard components */
main .padded.largeDashComponent {
  padding: 0.5rem;
}

.largeDashComponent {
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: center;
}
.largeDashComponent h4,
.largeDashComponent h6 {
  max-width: 100%;
  font-size: 80%;
}
.largeDashComponent .num {
  display: block;
  font-size: 300%;
}

/* Guide */
.guide {
  position: absolute;
  margin: calc(-0.8 * var(--spaceMax)) 0 0 0;
}
.guide h1, .guide p {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: normal;
  margin: 0;
  color: var(--color-gray-3);
}

@media screen and (min-width: 36rem) {
  .middle.login main > .guide {
    margin: calc(-1 * var(--spaceMed)) -1rem;
  }
}
pre {
  max-width: 100%;
  overflow-x: auto;
}

.colorTable {
  display: flex;
  flex-direction: row;
  gap: var(--spaceMed);
  flex-wrap: wrap;
  margin-bottom: var(--spaceMax);
}

.colorTable > * {
  flex: 0 0 320px;
  display: flex;
  flex-direction: row;
  border: 1px solid gray;
  padding: 1rem;
  gap: 1rem;
}

.chit {
  --square: 100px;
  height: var(--square);
  width: var(--square);
}

.chapter {
  scroll-margin-top: calc(var(--headFootHeight) + var(--spaceMed));
  margin-bottom: calc(2 * var(--spaceMax));
}

.colorTable span {
  white-space: pre-line;
  margin: -1rem 0 0;
  padding: 0;
}

.grid-icon {
  display: flex;
  flex-direction: row;
  gap: var(--spaceMed);
  flex-wrap: wrap;
  margin-bottom: var(--spaceMax);
}
.grid-icon > * {
  flex: 0 0 80px;
  text-align: center;
}

.grid-logo {
  margin: 1rem;
  display: flex;
  flex-direction: row;
  gap: var(--spaceMed);
  flex-wrap: wrap;
  margin-bottom: var(--spaceMax);
}
.grid-logo > * {
  flex: 0 0 250px;
  text-align: center;
}
.grid-logo > * svg {
  height: 50px;
}

.buttonDemo {
  width: 100%;
}
.buttonDemo thead {
  background-color: var(--color-detail);
  color: var(--color-white);
}
.buttonDemo tr, .buttonDemo thead {
  position: relative;
  display: block;
}
.buttonDemo thead, .buttonDemo tbody {
  display: block;
}
.buttonDemo th, .buttonDemo td {
  display: inline-block;
  width: 22%;
}
.buttonDemo tbody {
  height: 50vh;
  overflow-y: scroll;
}

/* Do not include in production markup! */
.tempShowError {
  display: unset !important;
}

main > .breadcrumbs {
  margin-top: 0.5rem;
}

.inputStates th, .inputStates td {
  width: 50%;
}

.dimmed {
  position: relative;
}

.dimmed:after {
  content: "";
  color: rgba(124, 164, 181, 0.677);
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(1px);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(139, 187, 208, 0.2) 100%);
}

.guideLinks {
  border: 3px solid var(--color-white);
  text-align: left;
  max-width: 30rem;
  margin: var(--spaceMax) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spaceMin);
  padding: var(--spaceMin);
}
.guideLinks > * {
  border: 1px solid var(--color-white);
  padding: var(--spaceMin);
}

/* FROM PINT */
/* CCR */
.table .icon {
  display: inline-flex;
  height: 13px;
  width: 13px;
}

/* Buttons 
   May be 
   <button></button> 
   <a class="button"></a>
   <input type="submit" value="Submit">
 */
/* Button colors: default and primary */
button,
.button,
.uber-button,
input[type=submit] {
  padding: var(--spaceMin) var(--spaceMed);
  background-color: var(--color-button-bg);
  color: var(--color-button-fg);
  border: var(--formBorder) solid var(--color-button-border);
  transition: all var(--timeShort);
  cursor: pointer;
  border-radius: var(--spaceMed);
  display: inline-block;
  box-shadow: none;
  border-width: var(--formBorder);
  text-decoration: none;
}
button svg.icon,
.button svg.icon,
.uber-button svg.icon,
input[type=submit] svg.icon {
  --iconSize: 1rem;
  vertical-align: baseline;
}
button:active,
.button:active,
.uber-button:active,
input[type=submit]:active {
  transform: translateY(1px);
}
button:hover, button:active,
.button:hover,
.button:active,
.uber-button:hover,
.uber-button:active,
input[type=submit]:hover,
input[type=submit]:active {
  cursor: pointer;
  text-decoration: none;
  background-color: var(--color-button-bg-h);
  color: var(--color-button-fg-h);
  border-color: var(--color-button-border-h);
}
button.small, button.smaller,
.button.small,
.button.smaller,
.uber-button.small,
.uber-button.smaller,
input[type=submit].small,
input[type=submit].smaller {
  white-space: nowrap;
  font-size: 80%;
  padding: var(--formBorder) calc(2 * var(--formBorder));
  border-radius: calc(1.5 * var(--formBorder));
}
button.error,
.button.error,
.uber-button.error,
input[type=submit].error {
  --color-button-bg: var(--color-error);
  --color-button-bg-h: var(--color-error-h);
  --myColor: white;
  --color-button-fg-h: white;
}

body button.ghost, body .button.ghost {
  background-color: var(--color-panel-bg);
}

/* Disabled */
button.disabled,
.button.disabled,
input[disabled],
input[type=submit][disabled] {
  cursor: not-allowed;
  transform: translateY(0);
}

/* Disclosure buttons */
button.disclosure {
  /* --size: 1rem;
  padding: 0;
  height: var(--size);
  width: var(--size);
  transition: all .3s ease-out;
  background-color: var(--textColor);
  border-color: var(--textColor);
  border-block-width: 1px; */
  background-color: transparent;
  border: 0;
  padding: 0;
  text-transform: unset;
  font-size: inherit;
  font-weight: unset;
  text-align: left;
  width: 100%;
}
button.disclosure:hover {
  color: unset;
  fill: unset;
}
button.disclosure:active {
  transform: unset;
}
button.disclosure .icon.widget {
  --iconSize: .9rem;
  transition: all 0.2s ease-out;
  /* background-color: var(--textColor); */
  /* border-color: var(--textColor); */
  border: 1px solid white;
  padding-top: 0.2rem;
  padding-left: 0.1rem;
  border-radius: 50%;
  /* vertical-align: middle; */
  /* transform: translate(.1rem, -.2rem); */
  /* &:hover {
    fill: unset;
  } */
}
button.disclosure[aria-expanded=true] .icon.widget {
  transform: rotate(180deg);
}
button.disclosure span ~ .icon {
  margin-left: 0.5rem;
}

/* FORMS */
/*
 $fg: var(--color-white);
 $bg: var(--color-blue-lt);
 $hl: var(--color-blue-v-lt);
 */
input,
select,
textarea {
  padding: var(--spaceMin);
  font-family: var(--fontFace);
  color: var(--color-input-fg);
  background-color: var(--color-input-bg);
  outline: none;
  box-sizing: border-box;
  border: var(--formBorder) solid var(--color-input-border);
  border-radius: var(--formBorderRad);
  transition: background-color var(--timeShort);
  margin: 0;
}
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--color-input-placeholder);
}
input:hover,
select:hover,
textarea:hover {
  color: var(--color-input-fg-h);
  background-color: var(--color-input-bg-h);
  border-color: var(--color-input-border-h);
  background-color: rgba(228, 243, 249, 0.3);
}
input.pending,
select.pending,
textarea.pending {
  border-color: var(--color-pending);
  animation: pendLoop_border 3s ease infinite;
}
input.pending.success,
select.pending.success,
textarea.pending.success {
  border-color: var(--color-input-fg);
  color: var(--color-input-fg);
  animation: pendSuccessLoop 3s ease forwards;
}

input[type=file] {
  height: 2.2rem;
  padding: 4px;
  border-radius: var(--formBorderRad);
}

input[type=color] {
  --size: 1.8rem;
  padding: 0;
  height: var(--size);
  width: var(--size);
}

input.small,
.small input {
  transform: scale(0.7);
}

select option svg.icon {
  fill: white;
}

label.pending.success {
  border-color: var(--color-input-fg);
  color: var(--color-input-fg);
  animation: pendSuccessLoop 3s ease forwards;
}

@keyframes pendLoop_border {
  0% {
    border-color: var(--color-pending-dk);
  }
  50% {
    border-color: var(--color-pending-lt);
  }
  100% {
    border-color: var(--color-pending-dk);
  }
}
@keyframes pendLoop_bg {
  0% {
    background-color: var(--color-pending-dk);
  }
  50% {
    background-color: var(--color-pending-lt);
  }
  100% {
    background-color: var(--color-pending-dk);
  }
}
@keyframes pendLoop_text {
  0% {
    color: var(--color-pending-dk);
  }
  50% {
    color: var(--color-pending-lt);
  }
  100% {
    color: var(--color-pending-dk);
  }
}
@keyframes pendSuccessLoop {
  0% {
    border-color: var(--color-success);
    color: var(--color-success);
  }
  100% {
    border-color: var(--theme-border-color);
    color: var(--color-gray-5);
  }
}
@keyframes pendSuccessLoop2unch {
  0% {
    border-color: var(--color-success);
    background-color: var(--color-success);
  }
  100% {
    border-color: var(--color-detail);
    background-color: var(--color-white);
  }
}
@keyframes pendSuccessLoop2ch {
  0% {
    border-color: var(--color-success);
    background-color: var(--color-success);
  }
  100% {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
}
textarea {
  width: 100%;
  height: auto;
}

.label,
.compact {
  font-size: 0.8rem;
  margin: 1rem 0;
  padding: 0;
}

.label {
  margin-bottom: 0.2rem;
}

.compact {
  position: relative;
  display: flex;
  flex-direction: column;
}
.compact:before {
  content: attr(aria-label);
  display: block;
  font-size: 0.8rem;
  position: absolute;
  left: 0;
  top: -1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.compact .error-message {
  --pad: var(--spaceMin);
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--pad) var(--formBorder) var(--pad);
  font-size: 0.8rem;
  color: var(--color-error);
  display: none;
}

.login-box .compact ~ .compact,
.serviceReq .compact ~ .compact {
  margin-top: var(--spaceMax);
}

.error-message {
  --pad: var(--spaceMin);
  padding: 0 var(--pad) var(--formBorder) var(--pad);
  color: var(--color-error);
  display: none;
}

.login-box .passWrap input {
  outline: green;
  width: 100%;
}

/* https://css-tricks.com/snippets/css/form-validation-styling-on-input-focus/ 
textarea removed from rule */
input[text]:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--color-error);
  border-radius: var(--formBorderRad) var(--formBorderRad) 0 0;
}
input[text]:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;
}

input.error:hover,
textarea.error:hover {
  border-color: red;
}
input.error ~ .error-message,
textarea.error ~ .error-message {
  display: block;
}

/* Will want to add some kind of success check for certain valid entries */
textarea:not(:focus):not(:placeholder-shown):valid,
input[text]:not(:focus):not(:placeholder-shown):valid {
  border-color: var(--color-success);
}

textarea.noValidation:not(:focus):not(:placeholder-shown):valid {
  border-color: var(--theme-border-color);
}

/* Form inputs with embedded icons */
select,
.dt-input[type=text],
input[type=search] {
  background-position: right 10px center;
  background-repeat: no-repeat;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.75rem;
  transition: background-size var(--timeShort), background-position var(--timeShort);
}

select {
  /* Arrow down icon */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 23'%3e%3cpath fill='black' d='M20.49,22.99c-.66,0-1.3-.26-1.77-.73L.73,4.27C-.24,3.29-.24,1.71,.73,.73,1.71-.24,3.29-.24,4.27,.73L20.49,16.95,36.71,.73c.98-.98,2.56-.98,3.54,0s.98,2.56,0,3.54L22.26,22.26c-.47,.47-1.1,.73-1.77,.73Z'/%3e%3c/svg%3e");
  background-size: auto 20%;
}
select:hover {
  background-size: auto 30%;
  background-position: right 7px center;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 23'%3e%3cpath fill='hsl(198, 100%25, 44%25)' d='M20.49,22.99c-.66,0-1.3-.26-1.77-.73L.73,4.27C-.24,3.29-.24,1.71,.73,.73,1.71-.24,3.29-.24,4.27,.73L20.49,16.95,36.71,.73c.98-.98,2.56-.98,3.54,0s.98,2.56,0,3.54L22.26,22.26c-.47,.47-1.1,.73-1.77,.73Z'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
  select {
    /* Arrow down icon */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 23'%3e%3cpath fill='gray' d='M20.49,22.99c-.66,0-1.3-.26-1.77-.73L.73,4.27C-.24,3.29-.24,1.71,.73,.73,1.71-.24,3.29-.24,4.27,.73L20.49,16.95,36.71,.73c.98-.98,2.56-.98,3.54,0s.98,2.56,0,3.54L22.26,22.26c-.47,.47-1.1,.73-1.77,.73Z'/%3e%3c/svg%3e");
    background-size: auto 20%;
  }
  select:hover {
    background-size: auto 30%;
    background-position: right 7px center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 23'%3e%3cpath fill='hsl(198, 100%25, 44%25)' d='M20.49,22.99c-.66,0-1.3-.26-1.77-.73L.73,4.27C-.24,3.29-.24,1.71,.73,.73,1.71-.24,3.29-.24,4.27,.73L20.49,16.95,36.71,.73c.98-.98,2.56-.98,3.54,0s.98,2.56,0,3.54L22.26,22.26c-.47,.47-1.1,.73-1.77,.73Z'/%3e%3c/svg%3e");
  }
}
.dt-input[type=text],
input[type=search] {
  /* magnifying glass search icon */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38'%3e%3cpath d='M16.91,0C7.57,0,0,7.22,0,16.13s7.57,16.14,16.91,16.14,16.92-7.22,16.92-16.13c0-8.91-7.57-16.14-16.92-16.14Zm22.25,37.2c-.96,.91-2.47,.93-3.45,.03l-6.76-6.34c1.28-.96,2.44-2.06,3.44-3.29l6.73,6.31c.92,.84,.97,2.27,.13,3.19-.03,.03-.07,.07-.1,.1ZM16.91,4.49c6.74,0,12.2,5.21,12.2,11.64s-5.46,11.64-12.2,11.64-12.2-5.21-12.2-11.64S10.17,4.49,16.91,4.49Z'/%3e%3c/svg%3e");
  background-size: auto 40%;
}
.dt-input[type=text]:hover,
input[type=search]:hover {
  background-size: auto 50%;
  background-position: right 7px center;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38'%3e%3cpath fill='hsl(198, 100%25, 44%25)' d='M16.91,0C7.57,0,0,7.22,0,16.13s7.57,16.14,16.91,16.14,16.92-7.22,16.92-16.13c0-8.91-7.57-16.14-16.92-16.14Zm22.25,37.2c-.96,.91-2.47,.93-3.45,.03l-6.76-6.34c1.28-.96,2.44-2.06,3.44-3.29l6.73,6.31c.92,.84,.97,2.27,.13,3.19-.03,.03-.07,.07-.1,.1ZM16.91,4.49c6.74,0,12.2,5.21,12.2,11.64s-5.46,11.64-12.2,11.64-12.2-5.21-12.2-11.64S10.17,4.49,16.91,4.49Z'/%3e%3c/svg%3e");
}

/* Search */
input[type=search] {
  min-width: 30ch;
}

input[type=submit],
input[type=checkbox],
input[type=radio],
select {
  cursor: pointer;
  position: static !important;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type=email],
  input[type=phone],
  input[type=text],
  input[type=search],
  textarea {
    -webkit-appearance: none;
  }
  input[type=checkbox],
  input[type=radio] {
    --active: var(--color-primary);
    --active-inner: var(--color-white);
    --focus: var(--formBorder) rgba(39, 94, 254, 0.3);
    --border: var(--theme-border-color);
    --border-hover: var(--color-primary);
    --background: var(--color-panel-bg);
    --disabled: var(--color-disabled-bg);
    --disabled-inner: var(--color-gray-2);
    --widgetHeight: 24px;
    --widgetInnerDot: calc(var(--widgetHeight) - 8px);
    --widgetInnerDotSm: calc(.7rem);
    -webkit-appearance: none;
    -moz-appearance: none;
    height: var(--widgetHeight);
    outline: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: var(--formBorder) solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background var(--timeShort), border-color var(--timeShort), box-shadow var(--timeShort);
  }
  input[type=checkbox]:after,
  input[type=radio]:after {
    content: "";
    display: block;
    position: relative !important;
    left: 0;
    top: 0;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: var(--timeShort);
    --d-t: var(--timeMed);
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }
  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    --b: var(--disabled);
    position: static !important;
    cursor: not-allowed;
    opacity: 0.9;
  }
  input[type=checkbox]:disabled:checked,
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
    position: relative !important;
  }
  input[type=checkbox]:disabled + label,
  input[type=radio]:disabled + label {
    cursor: not-allowed;
    color: var(--color-disabled-text);
  }
  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  input[type=checkbox]:focus,
  input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  input[type=checkbox]:not(.switch),
  input[type=radio]:not(.switch) {
    width: var(--widgetHeight);
  }
  input[type=checkbox]:not(.switch):after,
  input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  input[type=checkbox]:not(.switch):checked,
  input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  input[type=checkbox] + label,
  input[type=radio] + label {
    font-size: 14px;
    line-height: var(--widgetHeight);
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 4px;
  }
  input[type=checkbox].pending {
    border-color: var(--color-pending);
    background: var(--color-pending);
    animation: pendLoop_border3s ease infinite, pendLoop_bg 3s ease infinite;
  }
  input[type=checkbox].error {
    border: var(--formBorder) solid var(--color-error);
    background: var(--color-error);
  }
  input[type=checkbox].error:not(:checked) {
    background: hsl(3, 94%, 80%);
  }
  input[type=checkbox].success {
    border: var(--formBorder) solid var(--color-success);
    background: var(--color-success);
  }
  input[type=checkbox].success:not(:checked) {
    background: hsl(85, 59%, 80%);
  }
  input[type=checkbox].pending.success {
    border: var(--formBorder) solid var(--color-success);
    background: var(--color-success);
    animation: pendSuccessLoop2ch 3s ease forwards;
  }
  input[type=checkbox].pending.success:not(:checked) {
    animation: pendSuccessLoop2unch 3s ease forwards;
  }
  *:disabled {
    cursor: not-allowed;
    opacity: 0.9;
    color: var(--color-disabled-fg);
    background-color: var(--color-disabled-bg);
    border-color: var(--color-disabled-bg);
  }
  input[type=checkbox]:not(.switch) {
    border-radius: calc(var(--formBorderRad) * 2);
  }
  input[type=checkbox]:not(.switch):after {
    width: 9px;
    height: 15px;
    border: 3px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    transform: rotate(var(--r, 20deg)) translateY(-4px) translatex(-7px);
    position: static !important;
  }
  input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
    position: static !important;
  }
  input[type=checkbox].switch {
    width: 42px;
    border-radius: calc(var(--formBorderRad) * 3);
  }
  input[type=checkbox].switch:after {
    border-radius: 50%;
    width: var(--widgetInnerDot);
    height: var(--widgetInnerDot);
    background: var(--ab, var(--border));
    transform: translateY(-6px) translatex(-6px);
    position: static !important;
  }
  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
  }
  input[type=checkbox].switch:checked:after {
    transform: translateY(-6px) translatex(12px);
  }
  input[type=checkbox].switch.small {
    transform: scale(60%);
    margin: 0;
  }
  input[type=checkbox].switch.plain {
    background-color: var(--background);
    --active-inner: var(--border);
  }
  input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
  input[type=radio] {
    border-radius: 50%;
  }
  input[type=radio]:after {
    width: var(--widgetInnerDot);
    height: var(--widgetInnerDot);
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    position: static !important;
    transform: scale(var(--s, 0.8)) translateY(-7px) translatex(-7px);
  }
}
.acctConfirmation {
  text-align: center;
}
.acctConfirmation *:disabled {
  cursor: not-allowed;
  opacity: 0.9;
  color: var(--color-gray-v-dk);
  background-color: var(--color-white);
  border-color: var(--color-gray-2);
}
.acctConfirmation progress {
  width: 100%;
}

#selector,
#addNode {
  font-size: 12px;
}
#selector ~ .error-message,
#addNode ~ .error-message {
  font-size: 12px;
  --pad: calc(2px + var(--spaceMin));
}

.serviceReq label {
  margin-top: 1rem;
}

fieldset ~ fieldset {
  margin-top: var(--spaceMed);
}

fieldset.instructions {
  margin-top: 0;
}
fieldset.instructions p {
  margin-top: 0;
}
fieldset.instructions div.error-message {
  display: block;
}

#job-form {
  --reducedTopMargin: 0.8rem;
}
#job-form label {
  margin-top: 2rem;
}
#job-form .split label {
  margin-top: var(--reducedTopMargin);
}
#job-form footer.variables-table {
  display: grid;
  grid-template-columns: 1fr 1fr 8ch;
  column-gap: var(--spaceMed);
}
#job-form footer.variables-table label {
  margin-top: var(--reducedTopMargin);
}
#job-form footer.variables-table > :last-child {
  padding-top: calc(var(--reducedTopMargin) - 0.1rem);
}

.statusUpdate {
  padding: var(--spaceMed);
}

.pickBox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  width: 100%;
  justify-items: center;
  gap: 5px;
}
.pickBox label {
  --selected: rgba(189, 189, 189, 0.3);
  text-align: center;
  padding: var(--spaceMin);
  cursor: pointer;
  border-radius: var(--formBorderRad);
  transition: background-color var(--timeShort);
}
.pickBox label:hover {
  background-color: var(--selected);
}
.pickBox label svg {
  display: block;
  margin: 0 auto;
}
.pickBox input {
  display: none;
}
.pickBox input:checked + label {
  background-color: var(--selected);
}
.pickBox input:not(:checked) + label {
  background-color: none;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spaceMed);
}

#uploadJson {
  display: none;
}

label[for=uploadJson] {
  color: var(--color-white);
  background-color: var(--color-primary);
  border: var(--formBorder) solid var(--color-primary);
  transition: color var(--timeShort), background-color var(--timeShort), border-color var(--timeShort);
  cursor: pointer;
  border-radius: var(--spaceMin);
  padding: var(--formBorder) calc(8 * var(--formBorder));
  display: inline-block;
  box-shadow: none;
  font-size: 100%;
  font-family: var(--fontFace);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  word-break: normal;
  text-align: center;
}
label[for=uploadJson]:hover {
  color: var(--color-primary);
  background-color: var(--color-blue-v-lt);
  border-color: var(--color-blue-v-lt);
}
label[for=uploadJson] .icon {
  --iconSize: 1rem;
  vertical-align: bottom;
}

[id*=groupMembers]:has(label) {
  border: 1px solid var(--color-gray-2);
  border-radius: var(--spaceMed);
  padding: var(--spaceMin);
}
[id*=groupMembers]:has(label) label {
  display: block;
}

#create-group-form #new-group-input {
  width: 48ch;
}

#msg_body {
  min-height: 16ch;
  width: 100%;
}

/* Primitive Tables */
[id^=pr-] {
  display: grid;
  gap: var(--spaceMed);
}
[id^=pr-] .compact {
  margin: 0;
}
[id^=pr-] .submit_clear {
  display: flex;
  justify-content: flex-end;
  gap: var(--spaceMed);
}
[id^=pr-] fieldset ~ fieldset {
  margin-top: 0;
}
[id^=pr-] textarea {
  min-height: 4rem;
  resize: vertical;
}

@media screen and (min-width: 1024px) {
  #pr-admin {
    grid-template-columns: 1fr 2fr;
  }
  #pr-admin h3 {
    grid-area: 1/1/2/3;
  }
  #pr-admin label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-admin label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-admin .rbac_roles {
    grid-area: 3/1/4/3;
  }
  #pr-admin label[for=ssh_keys] {
    grid-area: 4/1/5/3;
  }
  #pr-admin .submit_clear {
    grid-area: 5/1/6/3;
  }
  #pr-admin .rbac_roles .menu {
    position: absolute;
    z-index: 10;
    background-color: blue;
  }
  #pr-attributes {
    grid-template-columns: 1fr 2fr;
  }
  #pr-attributes h3 {
    grid-area: 1/1/2/3;
  }
  #pr-attributes label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-attributes label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-attributes label[for=attributes] {
    grid-area: 3/1/4/3;
  }
  #pr-attributes .submit_clear {
    grid-area: 4/1/5/3;
  }
  #pr-bootconfigs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #pr-bootconfigs h3 {
    grid-area: 1/1/2/3;
  }
  #pr-bootconfigs label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-bootconfigs label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-bootconfigs label[for=image] {
    grid-area: 3/1/4/2;
  }
  #pr-bootconfigs label[for=cmdline] {
    grid-area: 3/2/4/3;
  }
  #pr-bootconfigs label[for=kickstart] {
    grid-area: 4/1/5/2;
  }
  #pr-bootconfigs .repo {
    grid-area: 4/2/5/3;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--spaceMed);
  }
  #pr-bootconfigs .repo input#frozen {
    margin-top: 7px;
  }
  #pr-bootconfigs .kernel {
    grid-area: 5/1/6/2;
  }
  #pr-bootconfigs .initramfs {
    grid-area: 5/2/6/3;
  }
  #pr-bootconfigs .submit_clear {
    grid-area: 6/1/7/3;
  }
  #pr-dyngroups {
    grid-template-columns: 1fr 2fr;
  }
  #pr-dyngroups h3 {
    grid-area: 1/1/2/3;
  }
  #pr-dyngroups label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-dyngroups label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-dyngroups label[for=selector] {
    grid-area: 3/1/4/2;
  }
  #pr-dyngroups .test_output {
    grid-area: 3/2/4/3;
  }
  #pr-dyngroups .submit_clear {
    grid-area: 4/1/5/3;
  }
  #pr-dyngroups .test_output {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  #pr-dyngroups .test_output output {
    display: inline-block;
    padding: var(--spaceMin) var(--spaceMed);
    border: 1px solid var(--color-success);
    width: 100%;
  }
  #pr-gitrepos {
    grid-template-columns: 1fr 1.3fr;
  }
  #pr-gitrepos h3 {
    grid-area: 1/1/2/3;
  }
  #pr-gitrepos label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-gitrepos label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-gitrepos label[for=upstream] {
    grid-area: 3/1/4/2;
  }
  #pr-gitrepos .details {
    display: grid;
    grid-template-columns: 48px 1fr 3fr;
    gap: var(--spaceMed);
  }
  #pr-gitrepos .details label[for=public] {
    grid-area: 1/1/2/2;
  }
  #pr-gitrepos .details label[for=syncper] {
    grid-area: 1/2/2/3;
  }
  #pr-gitrepos .details .branch_map {
    grid-area: 1/3/2/4;
    padding: var(--spaceMin);
    border: var(--formBorder) solid var(--color-detail);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
  }
  #pr-gitrepos .submit_clear {
    grid-area: 4/1/5/3;
  }
  #pr-hosts {
    --column-1: 1fr;
    --column-2: 1fr;
    grid-template-columns: var(--column-1) var(--column-2);
  }
  #pr-hosts h3 {
    grid-area: 1/1/2/3;
  }
  #pr-hosts label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-hosts label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-hosts label[for=type] {
    grid-area: 3/1/4/2;
  }
  #pr-hosts [class^=type-options-] {
    grid-area: 4/1/5/3;
    display: grid;
    gap: var(--spaceMed);
    grid-template-columns: var(--column-1) var(--column-2);
  }
  #pr-hosts [class^=type-options-] fieldset {
    grid-area: 1/1/2/3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spaceMed);
  }
  #pr-hosts .submit_clear {
    grid-area: 5/1/6/3;
  }
  #pr-nets {
    --column-1: 1fr;
    --column-2: 1fr;
    grid-template-columns: var(--column-1) var(--column-2);
  }
  #pr-nets h3 {
    grid-area: 1/1/2/3;
  }
  #pr-nets label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-nets label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-nets .nets-1 {
    grid-area: 3/1/4/3;
  }
  #pr-nets .nets-2 {
    grid-area: 4/1/5/3;
  }
  #pr-nets [class^=nets-] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spaceMed);
  }
  #pr-nets .submit_clear {
    grid-area: 5/1/6/3;
  }
  #pr-namingpools {
    --column-1: 1fr;
    --column-2: 1fr;
    grid-template-columns: var(--column-1) var(--column-2);
  }
  #pr-namingpools h3 {
    grid-area: 1/1/2/3;
  }
  #pr-namingpools label[for=name] {
    grid-area: 2/1/3/2;
  }
  #pr-namingpools label[for=description] {
    grid-area: 2/2/3/3;
  }
  #pr-namingpools .parent-select {
    grid-area: 3/1/4/3;
  }
  #pr-namingpools .parent-none, #pr-namingpools .parent-group {
    grid-area: 4/1/5/3;
  }
  #pr-namingpools [class^=parent-] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spaceMed);
  }
  #pr-namingpools .submit_clear {
    grid-area: 5/1/6/3;
  }
  #pr-settings {
    grid-template-columns: 1fr 2fr 4fr;
    gap: var(--spaceMin);
  }
  #pr-settings label[for=cluster-id] {
    grid-area: 1/1/2/2;
  }
  #pr-settings .pull-reset {
    grid-area: 1/2/2/3;
    padding-block-start: 1rem;
  }
  #pr-settings label[for=cluster-name] {
    grid-area: 1/3/2/4;
  }
  #pr-settings .cluster-id-rule {
    grid-area: 2/1/3/3;
  }
  #pr-settings .cluster-name-rule {
    grid-area: 2/3/3/4;
  }
  #pr-settings label[for=time-offset] {
    grid-area: 3/1/4/2;
  }
  #pr-settings output[name=time-offset] {
    grid-area: 3/2/4/3;
  }
  #pr-settings label[for=cluster-unk-mac] {
    grid-area: 3/3/4/4;
  }
  #pr-settings .cluster-unk-mac-rule {
    grid-area: 4/3/5/4;
  }
  #pr-settings label[for=cluster-exp] {
    grid-area: 5/1/6/2;
  }
  #pr-settings output[name=cluster-exp] {
    grid-area: 5/2/6/3;
  }
  #pr-settings .pull-reset,
  #pr-settings label[for=time-offset],
  #pr-settings output[name=time-offset],
  #pr-settings label[for=cluster-exp],
  #pr-settings output[name=cluster-exp] {
    align-self: center;
  }
}
table {
  border-collapse: collapse;
  margin: var(--spaceMin) 0;
  border: var(--formBorder) solid var(--color-input-border);
}
table caption {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-input-border);
}

tr:nth-of-type(n + 2) {
  border-top: 1px solid var(--color-detail);
}

tr:nth-last-of-type(1) {
  border-bottom: 1px solid var(--color-detail);
}

th {
  vertical-align: center;
  text-align: left;
}
th .sup {
  display: inline-block;
  font-size: 0.8rem;
  transform: translateY(-0.3rem);
}

th,
td {
  /* white-space: pre-wrap; */
  padding: var(--spaceMin);
  vertical-align: top;
}

th[colspan]:not([colspan="1"]) {
  text-align: center;
}
th[colspan]:not([colspan="1"]).alignLeft {
  text-align: left;
}
th[colspan]:not([colspan="1"]).alignRight {
  text-align: right;
}

td {
  word-break: normal;
}

table.table-full,
table.full {
  width: 100%;
  min-width: 680px;
}

.nobreak {
  word-break: keep-all;
}

.nobreak-example td:nth-of-type(2),
.nobreak-example td:nth-of-type(4) {
  word-break: keep-all;
  border: 1px solid red;
}

#datatables-admin-users {
  border: var(--formBorder) solid var(--color-gray-3);
}

#datatables-admin-users td {
  padding: var(--spaceMin);
}

.striped,
.zebra {
  --tdbg-alert: var(--color-tan);
  --thbg-alert: rgba(233, 147, 28, 0.7);
  --tdbg-error: hsla(7, 77%, 55%, 0.3);
  --thbg-error: var(--color-red-2);
  --outline-width: 5px;
}
.striped th,
.zebra th {
  color: var(--color-table-head-fg);
  background-color: var(--color-table-head-bg);
}
.striped th a,
.zebra th a {
  color: var(--color-text-invert);
}
.striped tr:nth-of-type(even),
.zebra tr:nth-of-type(even) {
  background-color: var(--color-table-stripe);
}
.striped .alert th,
.zebra .alert th {
  color: var(--color-gray-1);
  background-color: var(--thbg-alert);
}
.striped .alert td,
.zebra .alert td {
  color: var(--colorMainFg);
}
.striped .alert td.alert,
.zebra .alert td.alert {
  outline: var(--thbg-alert) solid var(--outline-width);
}
.striped .error th,
.zebra .error th {
  color: var(--color-gray-1);
  background-color: var(--thbg-error);
}
.striped .error td,
.zebra .error td {
  color: var(--colorMainFg);
}
.striped .error td.error,
.zebra .error td.error {
  outline: var(--thbg-error) solid var(--outline-width);
}
.striped details.more .menu,
.zebra details.more .menu {
  --textColor: var(--color-gray-5);
  color: var(--color-moremenu-fg);
  background-color: var(--color-moremenu-bg);
  border: var(--formBorder) solid var(--color-gray-3);
  width: var(--moreMenuWidth);
}
.striped details.more .menu a,
.zebra details.more .menu a {
  color: var(--textColor);
}
.striped details.more .menu a.error,
.zebra details.more .menu a.error {
  color: var(--color-error);
}
.striped details.more .menu svg.icon,
.zebra details.more .menu svg.icon {
  transform: scale(70%);
}

.systemwide table th,
.cluster table th {
  font-size: 80%;
}
.systemwide table th:nth-child(n+2),
.systemwide table td:nth-child(n+2),
.cluster table th:nth-child(n+2),
.cluster table td:nth-child(n+2) {
  text-align: center;
}

.invites td {
  vertical-align: middle;
}
.invites td:nth-child(1), .invites td:nth-child(3) {
  max-width: 12ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invites td:nth-child(4) {
  max-width: 16ch;
}
.invites td:nth-child(5) {
  width: 16ch;
  text-align: right;
}
.invites td:nth-child(5) button {
  margin: 2px;
}

.panel table {
  width: 100%;
}

.table-params {
  display: flex;
  flex-direction: column;
  gap: var(--spaceMed);
  justify-content: space-between;
}

.loginNodes {
  width: 100%;
}
.loginNodes td:nth-child(1) {
  max-width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loginNodes td:nth-child(6) {
  min-width: 12ch;
}

/* Sort tables */
.sortable th {
  cursor: pointer;
}
.sortable th:after {
  font-size: 0.6rem;
  margin-inline: 0.5rem 0;
  content: "▲";
}
.sortable th[aria-sort=ascending], .sortable th.sorted-asc {
  border-bottom: 2px solid var(--color-primary-h);
}
.sortable th[aria-sort=ascending]:after, .sortable th.sorted-asc:after {
  content: "▲";
}
.sortable th[aria-sort=descending], .sortable th.sorted-desc {
  border-bottom: 2px solid var(--color-primary-h);
}
.sortable th[aria-sort=descending]:after, .sortable th.sorted-desc:after {
  content: "▼";
}
.sortable th[data-sort-method=none] {
  border-bottom: none;
  cursor: default;
}
.sortable th[data-sort-method=none]:after {
  content: "";
}

/* Entity tables  icon small */
#et-nodes td:nth-child(1) {
  width: 2rem;
}

[id^=et-] svg.icon {
  --iconSize: .7rem;
  display: inline-block;
}
[id^=et-] .more svg.icon {
  --iconSize: 1rem;
  display: inline-block;
  vertical-align: bottom;
}
[id^=et-] tr:not(#et-nodes *) th:first-child,
[id^=et-] tr:not(#et-nodes *) td:first-child {
  width: 25ch;
}
[id^=et-] tr:hover {
  outline: 1px solid var(--color-input-border-h);
}
[id^=et-] tr:hover:not(#et-nodes *) td:first-child a {
  display: inline-block;
  width: 100%;
}
[id^=et-] tr:hover:not(#et-nodes *) td:first-child:hover a:after {
  display: inline-block;
  --size: .8rem;
  margin-left: 0.5rem;
  content: url("/static/images/edit.svg");
  height: var(--size);
  width: var(--size);
}
[id^=et-] tr:hover:is(#et-nodes *) td:nth-child(2) a {
  display: inline-block;
  width: 100%;
}
[id^=et-] tr:hover:is(#et-nodes *) td:nth-child(2):hover a:after {
  display: inline-block;
  --size: .8rem;
  margin-left: 0.5rem;
  content: url("/static/images/edit.svg");
  height: var(--size);
  width: var(--size);
}

@media screen and (min-width: 56rem) {
  .table-params input[type=search] {
    max-width: 50%;
  }
}
@media screen and (max-width: 55rem) {
  table.flex {
    display: flex;
    flex-direction: column;
  }
  table.flex thead {
    display: none;
  }
  table.flex tr {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--spaceMed);
  }
  table.flex td {
    margin-left: 12ch;
    padding: 0;
    line-height: 2rem;
  }
  table.flex ul,
  table.flex ol,
  table.flex li {
    margin: 0;
    padding: 0;
  }
  .pivot td:before,
  .vmDemo td:before,
  .loginNodes td:before,
  #account-users-table td:before,
  #admin-users-table td:before,
  .user-auth td:before,
  #user_events td:before {
    display: block;
    position: absolute;
    margin-left: -12ch;
    display: block;
    position: absolute;
    margin-left: -12ch;
    text-align: right;
    background-color: var(--color-table-head-bg);
    width: 11ch;
    line-height: 2.1rem;
    padding-right: 1ch;
    padding-bottom: 0.8rem;
    color: var(--color-white);
  }
  .pivot td {
    padding: 0;
    line-height: 2rem;
  }
  .pivot td:before {
    content: attr(data-colhead);
  }
  .loginNodes td:nth-child(1):before {
    content: "Hostname/IP";
  }
  .loginNodes td:nth-child(2):before {
    content: "VM Type";
  }
  .loginNodes td:nth-child(3):before {
    content: "Image";
  }
  .loginNodes td:nth-child(4):before {
    content: "Status";
  }
  .loginNodes td:nth-child(5):before {
    content: "Last Active";
  }
  .vmDemo td:nth-child(1):before {
    content: "Hostname/IP";
  }
  .vmDemo td:nth-child(2):before {
    content: "VM Type";
  }
  .vmDemo td:nth-child(3):before {
    content: "Image";
  }
  .vmDemo td:nth-child(4):before {
    content: "Status";
  }
  .vmDemo td:nth-child(5):before {
    content: "Last Active";
  }
  #admin-users-table td:nth-child(1):before {
    content: "Display Name";
  }
  #admin-users-table td:nth-child(2):before {
    content: "Email";
  }
  #admin-users-table td:nth-child(3):before {
    content: "Username";
  }
  #admin-users-table td:nth-child(4):before {
    content: "Owner";
  }
  #admin-users-table td:nth-child(5):before {
    content: "Team Owner";
  }
  #admin-users-table td:nth-child(6):before {
    content: "Created";
  }
  #account-users-table td:nth-child(1):before {
    content: "User";
  }
  #account-users-table td:nth-child(2):before {
    content: "Team";
  }
  #account-users-table td:nth-child(3):before {
    content: "Groups";
  }
  #account-users-table td:nth-child(4):before {
    content: "Created";
  }
  #account-users-table td:nth-child(5):before {
    content: "Last Login";
  }
  .user-auth td:nth-child(1):before {
    content: "User";
  }
  .user-auth td:nth-child(2):before {
    content: "User name";
  }
  .user-auth td:nth-child(3):before {
    content: "Username";
  }
  .user-auth td:nth-child(4):before {
    content: "Auth Policy";
  }
  .user-auth td:nth-child(5):before {
    content: "Req. Policy";
  }
  .user-auth td:nth-child(6):before {
    content: "New Policy";
  }
  #user_events td:nth-child(1):before {
    content: "Event";
  }
  #user_events td:nth-child(2):before {
    content: "Datetime";
  }
  #user_events td:nth-child(3):before {
    content: "Message";
  }
  #user_events td:nth-child(4):before {
    content: "Data";
  }
}
.overview .panel table,
.team-member-quotas,
.team-total-quota,
.add-users {
  background-color: var(--colorMainBg);
  border: var(--formBorder) solid var(--color-gray-3);
}

.team-member-quotas td {
  word-break: normal;
}
.team-member-quotas th:nth-child(2),
.team-member-quotas td:nth-child(2) {
  text-align: center;
}

.padded.team-total-quota {
  margin: var(--spaceMin) 0;
  padding: 0 var(--spaceMed) var(--spaceMed) var(--spaceMed);
}
.padded.team-total-quota > * {
  margin: 0;
}

.add-users {
  padding: var(--spaceMed);
}

table.vmid th,
table.vmid td {
  vertical-align: middle;
}
table.vmid tr.alert {
  background-color: hsla(45, 82%, 50%, 0.4);
}
table.vmid tr.error {
  background-color: hsla(7, 77%, 55%, 0.3);
}
table.vmid tr.error a {
  color: var(--fg);
}
table.vmid tr.error.sectionHeader {
  background-color: transparent;
}
table.vmid tr.error.sectionHeader button {
  border-bottom: 4px solid var(--thbg-error);
}
table.vmid tr.alert.sectionHeader {
  background-color: transparent;
}
table.vmid tr.alert.sectionHeader button {
  border-bottom: 4px solid var(--thbg-alert);
}

#nodeList th select {
  padding: 0.3rem;
  font-size: 85%;
  color: var(--color-table-head-fg);
  background-color: var(--color-table-head-bg);
  border-color: var(--color-white);
  padding-right: 1.5rem;
  width: fit-content;
}
#nodeList th:nth-of-type(1),
#nodeList td:nth-of-type(1) {
  width: 2rem;
}
#nodeList th:nth-of-type(2), #nodeList th:nth-of-type(3), #nodeList th:nth-of-type(4),
#nodeList td:nth-of-type(2),
#nodeList td:nth-of-type(3),
#nodeList td:nth-of-type(4) {
  width: 12ch;
  text-align: center;
  overflow: hidden;
}
#nodeList td:nth-of-type(5) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 32ch;
}

@media screen and (max-width: 55rem) {
  .padded.team-total-quota p {
    padding-bottom: var(--spaceMed);
  }
}
@media screen and (min-width: 55rem) {
  .table-params {
    flex-direction: row;
  }
  .table-params > *:nth-child(1) {
    flex: 1 0 30%;
  }
  #admin-users-table td {
    max-width: 12ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .add-users fieldset {
    justify-content: flex-start;
    margin: auto, 0;
    flex-flow: row wrap;
  }
  .add-users fieldset .memberInfo {
    flex-basis: calc(33.3% - var(--spaceMed));
  }
}
.memberInfo {
  border: var(--formBorder) solid var(--color-gray-3);
  padding: var(--spaceMin);
  display: flex;
  justify-content: space-between;
}

.uname {
  display: block;
  font-size: 80%;
}

.groups {
  width: 100%;
  border: 0;
}
.groups th:nth-last-child(1),
.groups td:nth-last-child(1) {
  text-align: right;
}

.user-auth {
  width: 100%;
}
.user-auth td:nth-child(1) {
  word-break: break-all;
}

.clusterAdmin th:nth-child(n+2),
.clusterAdmin td:nth-child(n+2),
.userPermissions th:nth-child(n+2),
.userPermissions td:nth-child(n+2),
.aclTable th:nth-child(n+2),
.aclTable td:nth-child(n+2),
.simpleSelect th:nth-child(n+2),
.simpleSelect td:nth-child(n+2) {
  text-align: center;
}

/* Nodes */
.node-userlist th:nth-of-type(n + 2),
.node-userlist td:nth-of-type(n + 2) {
  text-align: center;
}

@media screen and (min-width: 40rem) {
  .panel table.width-content {
    width: inherit;
    min-width: 30%;
  }
}
@media screen and (min-width: 60rem) {
  .installedKeys th:nth-of-type(n + 3),
  .installedKeys td:nth-of-type(n + 3) {
    text-align: center;
  }
}
.keyToggleButton {
  min-width: var(--moreMenuWidth);
}

tr.pending.success {
  animation: pendSuccessRow2 3s ease forwards;
}

p.pending.success {
  animation: pendSuccessP 6s ease forwards;
}

p.wait.pending.success {
  animation: pendSuccessPwait 6s ease forwards;
}

@keyframes pendSuccessRow2 {
  0% {
    border-color: var(--color-success);
    background-color: hsl(85, 59%, 80%);
  }
  100% {
    border-color: inherit;
    background-color: inherit;
  }
}
@keyframes pendSuccessP {
  0% {
    color: var(--color-success);
    background-color: hsla(85, 59%, 80%, 0.3);
  }
  50% {
    color: var(--color-text);
    background-color: hsla(85, 59%, 80%, 0);
  }
  100% {
    color: hsla(0, 0%, 0%, 0);
    background-color: hsla(85, 59%, 80%, 0);
  }
}
@keyframes pendSuccessPwait {
  0% {
    color: var(--color-success);
    background-color: hsla(85, 59%, 80%, 0.3);
  }
  100% {
    color: var(--color-text);
    background-color: hsla(85, 59%, 80%, 0);
  }
}
.ovGrid .clusterSummary td:first-child {
  display: grid;
  grid-template-columns: [vmname] 1fr [scw] 5ch;
  grid-template-areas: "vmname scw" "hostname hostname";
  grid-template-rows: auto;
}
.ovGrid .clusterSummary td:first-child .vmname {
  grid-area: vmname;
  font-weight: 600;
}
.ovGrid .clusterSummary td:first-child .scwLink,
.ovGrid .clusterSummary td:first-child button {
  grid-area: scw;
}
.ovGrid .clusterSummary td:first-child .hostname {
  grid-area: hostname;
  overflow-wrap: anywhere;
  white-space: normal;
}
.ovGrid .clusterSummary td[colspan]:not([colspan="1"]):first-child {
  display: table-cell;
  text-align: left;
}
.ovGrid .clusterSummary td:last-child {
  width: 8ch;
}

.userInfo th {
  width: 20ch;
}

.usage-table td:last-child {
  font-weight: 700;
}

.storage-table,
#storage-table {
  --last-col-width: 10ch;
}
.storage-table .user-quota,
#storage-table .user-quota {
  display: flex;
  flex-direction: column;
}
.storage-table .user-quota .userName,
#storage-table .user-quota .userName {
  font-weight: 600;
}
.storage-table .user-quota label,
#storage-table .user-quota label {
  font-size: 80%;
}
.storage-table .user-quota input[type=checkbox],
#storage-table .user-quota input[type=checkbox] {
  transform: scale(0.7);
}
.storage-table th:nth-child(n+2),
.storage-table td:nth-child(n+2),
#storage-table th:nth-child(n+2),
#storage-table td:nth-child(n+2) {
  text-align: center;
}
.storage-table td:last-child,
#storage-table td:last-child {
  width: var(--last-col-width);
}
.storage-table input[type=number],
#storage-table input[type=number] {
  width: var(--last-col-width);
  text-align: right;
}

.poolTables td:first-child {
  width: 18ch;
}

.resourceClass {
  --lastColWidth: 18ch;
}
.resourceClass th:last-child,
.resourceClass td:last-child {
  text-align: center;
  width: var(--lastColWidth);
}
.resourceClass .billing-rate {
  text-align: right;
  width: var(--lastColWidth);
}

/* Head node summary table */
.hnSummary {
  --on: rgba(162, 162, 162, 0.2);
  --off: transparent;
  max-height: 45vh;
  overflow-y: auto;
  --hover: var(--off);
  /* th hover affects all td */
  /* th & td hover affects th */
  /* td hover affects all td */
}
.hnSummary thead {
  position: sticky;
  top: -1.1rem;
}
.hnSummary th {
  border-bottom: 1px solid transparent;
  text-align: center;
}
.hnSummary :has(th:nth-child(2):hover) td:nth-child(2) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(3):hover) td:nth-child(3) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(4):hover) td:nth-child(4) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(5):hover) td:nth-child(5) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(6):hover) td:nth-child(6) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(7):hover) td:nth-child(7) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(8):hover) td:nth-child(8) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(9):hover) td:nth-child(9) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(10):hover) td:nth-child(10) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(11):hover) td:nth-child(11) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(12):hover) td:nth-child(12) {
  --hover: var(--on);
}
.hnSummary :has(th:nth-child(13):hover) td:nth-child(13) {
  --hover: var(--on);
}
.hnSummary th:hover {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(2):hover) th:nth-child(2) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(3):hover) th:nth-child(3) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(4):hover) th:nth-child(4) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(5):hover) th:nth-child(5) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(6):hover) th:nth-child(6) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(7):hover) th:nth-child(7) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(8):hover) th:nth-child(8) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(9):hover) th:nth-child(9) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(10):hover) th:nth-child(10) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(11):hover) th:nth-child(11) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(12):hover) th:nth-child(12) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(13):hover) th:nth-child(13) {
  border-bottom: 1px solid var(--color-text-invert);
}
.hnSummary :has(td:nth-child(2):hover) td:nth-child(2) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(3):hover) td:nth-child(3) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(4):hover) td:nth-child(4) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(5):hover) td:nth-child(5) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(6):hover) td:nth-child(6) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(7):hover) td:nth-child(7) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(8):hover) td:nth-child(8) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(9):hover) td:nth-child(9) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(10):hover) td:nth-child(10) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(11):hover) td:nth-child(11) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(12):hover) td:nth-child(12) {
  --hover: var(--on);
}
.hnSummary :has(td:nth-child(13):hover) td:nth-child(13) {
  --hover: var(--on);
}
.hnSummary td {
  background-color: var(--hover);
}
.hnSummary .hidden {
  display: none;
}
.hnSummary .sectionHeader {
  background-color: transparent;
}
.hnSummary .sectionHeader th {
  background-color: transparent;
  padding: 1rem 0 0 0;
}
.hnSummary .sectionHeader th button {
  border-radius: 0;
  padding: 0.7rem 0.5rem;
  background-color: var(--color-table-head-bg);
}
.hnSummary .sectionHeader tr.error.sectionHeader th {
  background-color: transparent;
}
.hnSummary .sectionHeader tr.error.sectionHeader th button {
  background-color: var(--tdbg);
}

/*! colors */
.light {
  color: var(--color-gray-2);
}

.chit {
  background-color: gray;
  border: 1px solid gray;
}

.positive {
  color: var(--color-green);
}

.negative {
  color: var(--color-error);
}

.other {
  color: var(--color-orange);
}

.success {
  --myColor: var(--color-success);
  color: var(--myColor);
  border-color: var(--myColor);
  --color-pill: var(--myColor);
}
.success header {
  color: var(--color-white);
  background-color: var(--color-success);
}

.color-success {
  color: var(--color-success);
}

.alert,
.warning,
.modal.alert,
.modal.warning {
  --myColor: var(--color-alert);
  color: var(--color-text);
  border-color: var(--myColor);
  --color-pill: var(--myColor);
}
.alert > header:nth-of-type(1),
.warning > header:nth-of-type(1),
.modal.alert > header:nth-of-type(1),
.modal.warning > header:nth-of-type(1) {
  color: var(--color-text);
  background-color: var(--color-alert);
}

.color-alert,
.color-warning {
  color: var(--color-alert);
}

.error,
.modal.error {
  --myColor: var(--color-error);
  color: var(--myColor);
  border-color: var(--myColor);
  --color-pill: var(--myColor);
}
.error > header:nth-of-type(1),
.modal.error > header:nth-of-type(1) {
  color: var(--color-white);
  background-color: var(--myColor);
}

.unknown {
  --myColor: var(--color-gray-2);
  color: var(--color-main-fg);
  border-color: var(--myColor);
  --color-pill: var(--myColor);
}
.unknown > header:nth-of-type(1) {
  color: var(--color-white);
  background-color: var(--myColor);
}

body .overview input.error {
  color: var(--color-error);
  border: 0;
}
body .overview input.error .errormsg {
  padding: 0.1rem 0.3rem;
  background-color: var(--color-error);
  color: var(--color-white);
  text-transform: initial;
  font-size: 0.7rem;
}
body .overview input.error .errormsg svg {
  font-size: 1.2rem;
}
body .overview input.error .errormsg:hover {
  text-decoration: none;
}

/* Make success icons a little darker than green */
.icon.success {
  color: var(--color-green-dk);
}

/* Make alert icons a little darker than yellow */
.icon.alert,
.icon.warning {
  color: var(--color-orange);
}

.icon.error,
.color-error {
  color: var(--color-error);
}

/* Foreground colors by role/status */
.color-primary {
  color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-text {
  color: var(--color-text);
}

.color-detail {
  color: var(--color-detail);
}

/* Brand colors */
.color-penguin-yellow {
  --myColor: var(--color-penguin-yellow);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-white {
  --myColor: var(--color-white);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-gray-1 {
  --myColor: var(--color-gray-1);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-gray-2 {
  --myColor: var(--color-gray-2);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-gray-3 {
  --myColor: var(--color-gray-3);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-gray-4 {
  --myColor: var(--color-gray-4);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-gray-5 {
  --myColor: var(--color-gray-5);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-gray-6, .color-penguin-black {
  --myColor: var(--color-gray-6);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-black {
  --myColor: var(--color-black);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-green-lt {
  --myColor: var(--color-green-lt);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-green-1 {
  --myColor: var(--color-green-1);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-green-2 {
  --myColor: var(--color-green-2);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-blue-lt {
  --myColor: var(--color-blue-lt);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-blue-1 {
  --myColor: var(--color-blue-1);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-blue-2 {
  --myColor: var(--color-blue-2);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-tan {
  --myColor: var(--color-tan);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-red-1 {
  --myColor: var(--color-red-1);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.color-red-2 {
  --myColor: var(--color-red-2);
  color: var(--myColor);
  --color-pill: var(--myColor);
}

.padded.bg-success {
  border-color: var(--color-success);
}
.padded.bg-success > *:nth-child(1) {
  color: var(--color-white);
  background-color: var(--color-success);
}

.padded.bg-alert,
.padded.bg-warning {
  border-color: var(--color-alert);
}
.padded.bg-alert > *:nth-child(1),
.padded.bg-warning > *:nth-child(1) {
  color: var(--color-text);
  background-color: var(--color-alert);
}

.padded.bg-error {
  border-color: var(--color-error);
}
.padded.bg-error > *:nth-child(1) {
  color: var(--color-white);
  background-color: var(--color-error);
}

.modal,
.messageBox.secondary {
  color: var(--color-text);
  border-color: var(--color-secondary);
}
.modal > header:nth-of-type(1),
.messageBox.secondary > header:nth-of-type(1) {
  background-color: var(--color-secondary);
}
.modal > header:nth-of-type(1) a,
.messageBox.secondary > header:nth-of-type(1) a {
  color: var(--color-white);
}

/* boxes and chits */
.bg-penguin-yellow {
  --color: var(--color-penguin-yellow);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-penguin-yellow .more summary {
  color: var(--color-primary);
}
.bg-penguin-yellow .more .menu {
  color: var(--color-text);
  background-color: var(--color-white);
}
.bg-penguin-yellow .more .menu a {
  color: var(--color-primary);
}

.bg-white {
  --color: var(--color-white);
  background-color: var(--color);
  border-color: var(--color-gray-3);
}
.bg-white .more summary {
  color: var(--color-primary);
}
.bg-white .more .menu {
  color: var(--color-text);
  background-color: var(--color-white);
}
.bg-white .more .menu a {
  color: var(--color-primary);
}

.bg-gray-1 {
  --color: var(--color-gray-1);
  background-color: var(--color);
  border-color: var(--color-gray-3);
  color: var(--color-white);
}
.bg-gray-1 .more summary {
  color: var(--color-white);
}
.bg-gray-1 .more .menu {
  color: var(--color);
  background-color: var(--color-white);
}
.bg-gray-1 .more .menu a {
  color: var(--color);
}

.bg-gray-2 {
  --color: var(--color-gray-2);
  background-color: var(--color);
  border-color: var(--color);
  color: var(--color-white);
}
.bg-gray-2 .more summary {
  color: var(--color-white);
}
.bg-gray-2 .more .menu {
  color: var(--color);
  background-color: var(--color-white);
}
.bg-gray-2 .more .menu a {
  color: var(--color);
}

.bg-gray-3 {
  --color: var(--color-gray-3);
  background-color: var(--color);
  border-color: var(--color);
  color: var(--color-white);
}
.bg-gray-3 .more summary {
  color: var(--color-white);
}
.bg-gray-3 .more .menu {
  color: var(--color);
  background-color: var(--color-white);
}
.bg-gray-3 .more .menu a {
  color: var(--color);
}

.bg-gray-4 {
  --color: var(--color-gray-4);
  background-color: var(--color);
  border-color: var(--color);
  color: var(--color-white);
}
.bg-gray-4 .more summary {
  color: var(--color-white);
}
.bg-gray-4 .more .menu {
  color: var(--color);
  background-color: var(--color-white);
}
.bg-gray-4 .more .menu a {
  color: var(--color);
}

.bg-gray-5 {
  --color: var(--color-gray-5);
  background-color: var(--color);
  border-color: var(--color);
  color: var(--color-white);
}
.bg-gray-5 .more summary {
  color: var(--color-white);
}
.bg-gray-5 .more .menu {
  color: var(--color);
  background-color: var(--color-white);
}
.bg-gray-5 .more .menu a {
  color: var(--color);
}

.bg-penguin-black,
.bg-gray-6 {
  --color: var(--color-gray-6);
  background-color: var(--color);
  border-color: var(--color);
  color: var(--color-white);
}
.bg-penguin-black .more summary,
.bg-gray-6 .more summary {
  color: var(--color-white);
}
.bg-penguin-black .more .menu,
.bg-gray-6 .more .menu {
  color: var(--color);
  background-color: var(--color-white);
}
.bg-penguin-black .more .menu a,
.bg-gray-6 .more .menu a {
  color: var(--color);
}

.bg-black {
  --color: var(--color-black);
  background-color: var(--color);
  border-color: var(--color);
  color: var(--color-white);
}
.bg-black .more summary {
  color: var(--color-white);
}
.bg-black .more .menu {
  color: var(--color);
  background-color: var(--color-white);
}
.bg-black .more .menu a {
  color: var(--color);
}

.bg-green-lt {
  --color: var(--color-green-lt);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-green-lt .more .menu {
  color: var(--color);
}
.bg-green-lt .more .menu a {
  color: var(--color);
}

.bg-green-1 {
  --color: var(--color-green-1);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-green-1 .more .menu {
  color: var(--color);
}
.bg-green-1 .more .menu a {
  color: var(--color);
}

.bg-green-2 {
  --color: var(--color-green-2);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-green-2 .more .menu {
  color: var(--color);
}
.bg-green-2 .more .menu a {
  color: var(--color);
}

.bg-blue-lt {
  --color: var(--color-blue-lt);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-blue-lt .more .menu {
  color: var(--color);
}
.bg-blue-lt .more .menu a {
  color: var(--color);
}

.bg-blue-1 {
  --color: var(--color-blue-1);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-blue-1 .more .menu {
  color: var(--color);
}
.bg-blue-1 .more .menu a {
  color: var(--color);
}

.bg-blue-2 {
  --color: var(--color-blue-2);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-blue-2 .more .menu {
  color: var(--color);
}
.bg-blue-2 .more .menu a {
  color: var(--color);
}

.bg-tan {
  --color: var(--color-tan);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-tan .more .menu {
  color: var(--color);
}
.bg-tan .more .menu a {
  color: var(--color);
}

.bg-red,
.bg-red-1 {
  --color: var(--color-red-1);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-red .more .menu,
.bg-red-1 .more .menu {
  color: var(--color);
}
.bg-red .more .menu a,
.bg-red-1 .more .menu a {
  color: var(--color);
}

.bg-red-2 {
  --color: var(--color-red-2);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-red-2 .more .menu {
  color: var(--color);
}
.bg-red-2 .more .menu a {
  color: var(--color);
}

.bg-green {
  --color: var(--color-green);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-green .more .menu {
  color: var(--color);
}
.bg-green .more .menu a {
  color: var(--color);
}

.bg-green-dk {
  --color: var(--color-green-dk);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-green-dk .more .menu {
  color: var(--color);
}
.bg-green-dk .more .menu a {
  color: var(--color);
}

.bg-orange {
  --color: var(--color-orange);
  background-color: var(--color);
  border-color: var(--color);
}
.bg-orange .more .menu {
  color: var(--color);
}
.bg-orange .more .menu a {
  color: var(--color);
}

/* bg-colors with light text; all others have standard text color */
[class^=bg-] {
  color: var(--color-white);
}
[class^=bg-] a {
  color: var(--color-white);
}
[class^=bg-] a:after {
  filter: brightness(99) saturate(0);
}
[class^=bg-] .more summary {
  color: var(--color-white);
}
[class^=bg-] .more .menu {
  background-color: var(--color-white);
}

/*! typography */
body {
  font-family: var(--fontFace);
  font-size: var(--fontBase);
}

/* layout text colors */
body > header,
body > header a {
  color: var(--colorHeaderFg);
}

aside,
aside a {
  color: var(--colorAsideFg);
}

body > footer,
body > footer a {
  color: var(--colorFooterFg);
}

footer p {
  margin: 0;
}

main {
  color: var(--colorMainFg);
}

.stepList {
  padding: 0;
  list-style: none;
}
.stepList li {
  counter-increment: stepCounter;
  margin: 0 0 var(--spaceMin) 7ch;
}
.stepList li:before {
  content: "Step " counter(stepCounter);
  font-weight: 500;
  margin-left: -6ch;
  margin-right: var(--spaceMin);
}

/* content  styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: pretty;
  margin: var(--spaceMed) 0;
  padding: 0;
  font-weight: 400;
  font-size: calc(var(--x-factor) * var(--fontBase));
  line-height: calc(var(--x-factor) * var(--fontBase));
  margin-block-end: calc(0.5 * var(--x-factor) * var(--spaceMed));
}
h1 svg.icon,
h2 svg.icon,
h3 svg.icon,
h4 svg.icon,
h5 svg.icon,
h6 svg.icon {
  --iconSize: .9em;
  transform: translateY(-0.1em);
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6, div h1,
div h2,
div h3,
div h4,
div h5,
div h6, header h1,
header h2,
header h3,
header h4,
header h5,
header h6 {
  margin-block-start: 0;
}

h1 {
  --x-factor: 2.38;
}

h2 {
  --x-factor: 1.78;
}

h3 {
  --x-factor: 1.5;
}

h4 {
  --x-factor: 1.2;
}

h5 {
  --x-factor: 1;
  max-width: var(--longestLine);
}

h6 {
  --x-factor: 1;
  max-width: var(--longestLine);
}

.breadcrumbs {
  display: block;
  color: var(--color-secondary);
  font-size: 1.1rem;
  font-weight: 590;
  text-decoration: none;
  margin-bottom: 0;
  transition: color var(--timeShort);
}
.breadcrumbs a:hover, .breadcrumbs a:focus {
  color: var(--color-primary);
}
.breadcrumbs a ~ *::before {
  content: var(--breadcrumbSep);
  color: var(--color-secondary);
}
.breadcrumbs ~ h1 {
  margin-top: 0.1rem;
}

article ~ h3 {
  margin-top: var(--spaceMax);
}

h3 ~ .panel {
  margin-top: 0;
}

p.small, div.small,
.fine,
.fineprint {
  font-size: 0.7rem;
}

strong,
b {
  font-weight: 690;
}

p,
li {
  max-width: var(--longestLine);
}

.unlisted {
  list-style-type: none;
  padding-left: 0;
}

.alignLeft,
.text-left {
  text-align: left;
}

.alignCenter,
.text-center {
  text-align: center;
}

.alignRight,
.text-right {
  text-align: right;
}

.mono {
  font-family: “Courier New”, Courier, mono;
}

aside h4,
.guide-headline {
  --xFactor: 0.7rem;
  font-size: var(--xFactor);
  line-height: var(--xFactor);
  text-transform: uppercase;
}

.guide-headline {
  max-width: none;
  letter-spacing: 0;
  z-index: 0;
  top: calc(2 * var(--headFootHeight));
  margin-top: var(--spaceMed);
  border-bottom: solid var(--formBorder) var(--colorAsideBg);
  background-color: var(--colorMainBg);
  margin: 0 calc(-1 * var(--spaceMax));
  padding: var(--spaceMin) var(--spaceMax);
  overflow: hidden;
  clear: both;
}

a,
.link {
  color: var(--theme-link-color);
  text-decoration: underline;
  background-color: transparent;
  border-radius: var(--formBorderRad);
  transition: color 0.15s ease-out, opacity 0.15s ease-out;
}

a:hover,
.link:hover {
  text-decoration: underline;
  color: var(--theme-link-color-h);
  text-decoration-color: var(--theme-link-color-h);
}

a:focus,
.link:focus {
  outline: none;
}

a:focus-visible,
.link:focus-visible {
  color: var(--theme-focus-color);
}

button,
.uber-button,
.button,
input[type=submit],
input[type=file]::file-selector-button {
  font-family: var(--fontFace);
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 500;
  word-break: normal;
  text-align: center;
}

body *.preserveCase {
  text-transform: none;
}

th {
  font-family: var(--fontFace);
  font-weight: 500;
}

/* special links */
.arrow:after,
.chev:after {
  display: inline-block;
  position: relative;
  content: "";
  width: 20px;
  height: 20px;
  background-position: bottom 0 right 50%;
  background-size: auto 50%;
  background-repeat: no-repeat;
}

.arrow:after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 27'%3e%3cpath fill='hsl(198, 100%, 44%)' d='M2.4,15.83H30.86l-2,.8-8.02,6.41c-.8,.8-1.2,2,0,2.81,.8,1.2,2.4,1.2,4.01,.4l14.43-11.22c1.2-.8,1.2-2.4,0-3.21L24.85,.6c-1.2-.8-2.81-.8-4.01,0-1.2,1.2-.8,2.4,0,3.21l8.02,6.01,1.6,1.2H3.21c-1.6,0-2.81,.8-3.21,2,0,1.2,.8,2.4,2.4,2.4v.4Z'/%3e%3c/svg%3e");
}

.chev:after {
  display: inline-block;
  position: relative;
  content: "";
  width: 20px;
  height: 20px;
  background-position: bottom 0 right 50%;
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 40'%3e%3cpath fill='hsl(198, 100%, 44%)' d='M2.5,40.98c-.64,0-1.28-.24-1.77-.73-.98-.98-.98-2.56,0-3.54L16.95,20.49,.73,4.27C-.24,3.29-.24,1.71,.73,.73,1.71-.24,3.29-.24,4.27,.73L22.26,18.72c.47,.47,.73,1.1,.73,1.77s-.26,1.3-.73,1.77L4.27,40.24c-.49,.49-1.13,.73-1.77,.73Z'/%3e%3c/svg%3e");
}

address {
  font-style: normal;
}

.strike {
  text-decoration: line-through;
}

aside nav a:after {
  content: "";
  display: block;
  pointer-events: none;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

hr {
  margin: 0.875rem 0;
  width: 100%;
  height: 1px;
  background: var(--theme-border-color);
  border: 0;
}

iframe {
  border: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

li + li {
  margin-top: 0.1875rem;
}

nav {
  outline: none;
}

ol {
  padding-left: 1rem;
}

p,
.p {
  margin: 1.5rem 0;
  display: block;
}

picture {
  display: block;
  overflow: hidden;
}

picture:after {
  content: "";
  display: block;
  clear: left;
}

picture img {
  float: left;
}

select::-ms-expand {
  display: none;
}

small {
  margin-top: 3px;
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.015rem;
}

.separated {
  margin-left: var(--spaceMed);
}

.strike {
  text-decoration: line-through;
}

ul {
  padding-left: 1rem;
}

video {
  max-width: 100%;
}

[class^=trunc-] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 32ch;
}
[class^=trunc-][class$="8"] {
  max-width: 8ch;
  white-space: nowrap;
}
[class^=trunc-][class$="16"] {
  max-width: 16ch;
  white-space: nowrap;
}

[class^=trunc-]:focus, [class^=trunc-]:hover {
  color: transparent;
}
[class^=trunc-]:focus:after, [class^=trunc-]:hover:after {
  content: attr(data-text);
  overflow: visible;
  text-overflow: inherit;
  background: var(--color-gray-v-lt);
  position: absolute;
  left: auto;
  top: auto;
  width: auto;
  max-width: 40ch;
  border: var(--formBorder) solid var(--color-gray-2);
  padding: var(--spaceMin);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  white-space: normal;
  word-wrap: break-word;
  display: block;
  color: var(--color-gray-v-dk);
  margin-top: -1.25rem;
  border-radius: var(--spaceMin);
}

#user_events [class^=trunc-]:focus:after, #user_events [class^=trunc-]:hover:after {
  right: 12ch;
}