:root {
  --foreground-color: white;
  --background-color: #1F0729;
  --font-family: sans-serif;
  --console-node-bg: transparent;
  --console-node-fg: var(--foreground-color);
  --console-timestamp-fg: var(--foreground-color);
  --console-timestamp-bg: transparent;
  --console-line-fg: var(--foreground-color);
  --console-line-bg: transparent;
  --negative-color: red;
  --window-foreground-color: black;
  --window-background-color: white;
  --window-hint-background:  rgba(0,0,0,0.15);
  --toolbox-label-bg: transparent;
  --toolbox-label-fg: var(--foreground-color);
  --toolbox-icon-bg: var(--foreground-color);
  --toolbox-icon-fg: var(--background-color);
  --chart-bandwidth-color: lime;
  --metro-default-bg: #51ADE5;
  --window-default-bg: var(--metro-default-bg);
  --metro-entrance-anim: swing-in-left-bck 0.55s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
  --metro-exit-anim: swing-out-left-fwd 0.55s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
}

html {
  font-size: 10px;
}

.chartSet {
  background-color: var(--metro-default-bg);
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  margin: 12px;
  animation: var(--metro-entrance-anim);
}

#chartArea .chartSet .heading {
  order: 1;
}

#chartArea .chartSet .legend {
  order: 1;
}

#chartArea .chartSet .heading h2 {
  text-align: left;
}

#chartArea .chartSet.error {
  background-color: var(--negative-color);
}

.chartSet.throttle .heading,
.chartSet.pause .heading,
.chartSet.uploading .heading {
  background-position-x: right !important;
}

#metric {
  display: flex;
  flex-direction: column;
  background-color: var(--metro-default-bg);
  width: calc(100% - 62px);
  padding: 24px;
  margin: 12px;
  animation: var(--metro-entrance-anim);
}

#console {
  background-color: var(--metro-default-bg);
  margin: 12px;
  padding: 24px;
  width: calc(100% - 62px);
  flex-grow: 1;
  animation: var(--metro-entrance-anim);
}

#metric h1 {
  order: 1;
}

#toolbox {
  border: none;
  border-radius: 0;
  background-color: var(--metro-default-bg);
  width: calc(100% - 12px);
  margin: 12px;
  align-self: auto;
  animation: var(--metro-entrance-anim);
}

.window {
  background-color: var(--window-default-bg);
  border-radius: 0;
  box-shadow: 0px 0px 40px black;
}

.window .close-cancel {
  background-color: var(--negative-color);
  border:none;
}

.window .close-cancel:active {
  transform: scale(0.9);
}

::-webkit-scrollbar {
  display: block;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.743);
}

/* ----------------------------------------------
 * Generated by Animista on 2025-3-31 20:42:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-left-bck
 * ----------------------------------------
 */
 @keyframes swing-in-left-bck {
  0% {
    transform: rotateY(-70deg);
    transform-origin: left;
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    transform-origin: left;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation swing-out-left-fwd
 * ----------------------------------------
 */
 @keyframes swing-out-left-fwd {
  0% {
    transform: rotateY(0);
    transform-origin: left;
    opacity: 1;
  }
  100% {
    transform: rotateY(-70deg);
    transform-origin: left;
    opacity: 0;
  }
}
