@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: auto;
  /**
  * Correct the inability to style clickable types in iOS and Safari.
  *
  * Safari 11+ only media query https://www.browserstack.com/guide/create-browser-specific-css
  */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    button,
    [type=button],
    [type=reset],
    [type=submit] {
      -webkit-appearance: button;
    }
  }
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type=radio] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
   ========================================================================== */
html,
body,
div,
article,
section,
main,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
textarea,
table,
td,
th,
tr,
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
.border-box {
  box-sizing: border-box;
}

/* Images
  ========================================================================== */
/* Responsive images - http://tachyons.io/docs/elements/images/ */
img {
  max-width: 100%;
}

/* Disabled
  ========================================================================== */
/*
  TODO: The opacity here is hacky for situations where the element is floated
  above another element since it applies to the background as well as the foreground
*/
*:disabled {
  pointer-events: none;
  opacity: var(--o-disabled);
}

/* Scrollbars
  ========================================================================== */
::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: var(--scrollbar-theme);
  height: var(--scrollbar-thickness);
  width: var(--scrollbar-thickness);
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--scrollbar-thumb-theme);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-theme);
}

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/c2fe3cb2b7c746f7966a.woff2) format("woff2");
  font-named-instance: "Regular";
}
@font-face {
  font-family: "Inter var";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/30807be7abc48ba8c73c.woff2) format("woff2");
  font-named-instance: "Italic";
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/d18216929a506e189075.woff2) format("woff2");
  font-named-instance: "Regular";
}
@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/b0793d176ec2395b4d91.woff2) format("woff2");
  font-named-instance: "Italic";
}
@font-face {
  font-family: "Sharp Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/82a39f13bfbf5a1a0c19.woff2) format("woff2");
  font-named-instance: "Regular";
}
html {
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.ff-default {
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.ff-title {
  font-family: "Sharp Sans", "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* == media queries ================================================================== */
/*      not small: ns:<class>
/*      medium:    m:<class>
/*      large:     l:<class>
/* =================================================================================== */
/* == background: bg ================================================================= */
/*      color:    bg-<color>
/*      size:     bg-[cover, contain]
/*      position: bg-[center, top, right, bottom, left]
/* =================================================================================== */
/* == border: b ====================================================================== */
/*      all:    ba, ba-[none]
/*      top:    bt, bt-[none]
/*      right   br, br-[none]
/*      bottom: bb, bb-[none]
/*      left:   bl, bl-[none]
/*      color:  b-<color>
/*      style:  bs-[solid, dotted, dashed]
/*      width:  bw-[1..2 | default (1)]
/*      radius: radius-[1..4 | default (3), pill | none]
/* =================================================================================== */
/* == box-shadow: shadow-[1..6 | raised, dropdown, popover, dialog | none ] ========== */
/* == box-sizing: [border-box | content-box] ========================================= */
/* == color: <color>, fill-<color>, stroke-<color> =================================== */
/*      black:    black-[1..7 | border, subtext, disabled, lighter, default, darker]
/*      white:    white-[1..8 | default, foreground]
/*      foreground: foreground-[1..8 | border, subtext, disabled, weak, default, strong, full]
/*      background: background-[theme, alt, input, dropdown]
/*      category: category-[1..6]-[lighter, default, darker]
/*      status:   good, critical, major, minor, warning, info, dead, danger, danger-gradient-start, danger-gradient-end, error
/*      primary:  primary, primary-[darker-10, darker-20, lighter]
/* =================================================================================== */
/* == display: [display-none, inline, block, inline-block] =========================== */
/* == filter: fi ===================================================================== */
/*      none: fi-none
/*      blur: fi-blur-[1..4]
/* =================================================================================== */
/* == flex: fl ======================================================================= */
/*      flex:       fl-[1..12 | none]
/*      align-self: fl-align-[start, end, center, baseline, stretch]
/*      order:      fl-order-[0..2]
/* =================================================================================== */
/* == flexbox: fb ==================================================================== */
/*      display: fb-[column, inline-column, row, inline-row]
/*      align:   fb-align-[start, end, center, baseline, stretch]
/*      justify: fb-justify-[start, end, center, space-between, space-around, space-evenly]
/*      wrap:    fb-[wrap, nowrap, wrap-reverse]
/*      reverse: fb-[column-reverse, row-reverse]
/*      gap:     fb-gap-[0-8]
/* =================================================================================== */
/* == height ========================================================================= */
/*      height:     h-[0..8 | 80vh | 100% | auto | lh-1..7 ]
/*      min-height: h-min-[0-8 | 80vh | 100% | auto | lh-1..7 ]
/*      max-height: h-max-[0-8 | 80vh | 100% | auto | lh-1..7 ]
/* =================================================================================== */
/* == list =========================================================================== */
/*      list-style: list-style-[none]
/* =================================================================================== */
/* == object-fit: fit-[fill, contain, cover, none, scale-down] ======================= */
/* == opacity: o-[disabled] ========================================================== */
/* == overflow: overflow ============================================================= */
/*      overflow:   overflow-[visible, hidden, scroll, auto]
/*      overflow-x: overflow-x-[visible, hidden, scroll, auto]
/*      overflow-y: overflow-y-[visible, hidden, scroll, auto]
/* =================================================================================== */
/* == position ======================================================================= */
/*      position: [static, relative, absolute, fixed]
/*      location: [top, right, bottom, left]
/* =================================================================================== */
/* == spacing: margin (m), padding (p) =============================================== */
/*      all:        ma-[0..7 | default (4) | n1..7 | auto], pa-[0..7 | default (4)]
/*      vertical:   mv-[0..7 | default (4) | n1..7 | auto], pv-[0..7 | default (4)]
/*      horizontal: mh-[0..7 | default (4) | n1..7 | auto], ph-[0..7 | default (4)]
/*      top:        mt-[0..7 | default (4) | n1..7 | auto], pt-[0..7 | default (4)]
/*      right:      mr-[0..7 | default (4) | n1..7 | auto], pr-[0..7 | default (4)]
/*      bottom:     mb-[0..7 | default (4) | n1..7 | auto], pb-[0..7 | default (4)]
/*      left:       ml-[0..7 | default (4) | n1..7 | auto], pl-[0..7 | default (4)]
/* =================================================================================== */
/* == table ========================================================================== */
/*      table:  [table, inline-table]
/*      row:    [row, row-group]
/*      column: [column, column-group]
/*      cell:   cell
/*      layout: table-[fixed]
/* =================================================================================== */
/* == text =========================================================================== */
/*      font-size:     f-[1..7 | default (2)]
/*      line-height:   lh-[0..7 | default (2)]
/*      font-weight:   fw-[100..900 | light, normal, bold]
/*      font-style:    fs-[normal, italic, strike, underline, uppercase]
/*      text-align:    text-align-[left, right, center, justify]
/*      text-overflow: text-overflow-[clip, ellipsis, unset]
/*      white-space:   white-space-[normal, nowrap, pre]
/*      word-break:    word-break-[normal, all, keep]
/*      word-wrap:     word-wrap-[normal, break]
/* =================================================================================== */
/* == utilities ====================================================================== */
/*      pointer-events: pointer-events-[none]
/* =================================================================================== */
/* == vertical-align: v-align-[top, middle, bottom, baseline] ======================== */
/* == visibility: hidden ============================================================= */
/* == width ========================================================================== */
/*      width:     w-[0..8 | 80vw | 100% | auto ]
/*      min-width: w-min-[0-8 | 80vw | 100% | auto ]
/*      max-width: w-max-[0-8 | 80vw | 100% | auto ]
/* =================================================================================== */
/* == z-index: z-[0..4 | default (1)] ==================================================== */
:root {
  /* == border ============================================================= */
  --bw-0: 0px;
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 4px;
  --bw-default: var(--bw-1);
  --radius-0: 0px;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 16px;
  --radius-default: var(--radius-3);
  --radius-pill: 9999px;
  /* == box-shadow ========================================================= */
  --shadow-1: 0 0 1px 0 var(--foreground-1), 0 1px 2px 0 var(--foreground-2);
  --shadow-2: 0 0 1px 0 var(--foreground-1), 0 3px 6px 0 var(--foreground-2);
  --shadow-3: 0 0 1px 0 var(--foreground-2), 0 2px 4px 0 var(--foreground-2), 0 12px 25px 0 var(--foreground-1);
  --shadow-4: 0 0 1px 0 var(--foreground-2), 0 4px 8px 0 var(--foreground-2), 0 25px 45px 0 var(--foreground-1);
  --shadow-5: 0 -6px 10px var(--foreground-2);
  --shadow-6: 0 1px 4px var(--foreground-2);
  --shadow-raised: var(--shadow-1);
  --shadow-dropdown: var(--shadow-2);
  --shadow-popover: var(--shadow-3);
  --shadow-dialog: var(--shadow-4);
  --shadow-1-primary: 0 0 1px 0 rgba(var(--accedian-primary-rgb), 0.15), 0 1px 2px 0 rgba(var(--accedian-primary-rgb), 0.25);
  --shadow-2-primary: 0 0 1px 0 rgba(var(--accedian-primary-rgb), 0.15), 0 3px 6px 0 rgba(var(--accedian-primary-rgb), 0.25);
  --shadow-3-primary: 0 0 1px 0 rgba(var(--accedian-primary-rgb), 0.15), 0 2px 4px 0 rgba(var(--accedian-primary-rgb), 0.15),
    0 12px 25px 0 rgba(var(--accedian-primary-rgb), 0.15);
  --shadow-4-primary: 0 0 1px 0 rgba(var(--accedian-primary-rgb), 0.15), 0 4px 8px 0 rgba(var(--accedian-primary-rgb), 0.15),
    0 25px 45px 0 rgba(var(--accedian-primary-rgb), 0.15);
  --shadow-5-primary: 0 -6px 10px rgba(var(--accedian-primary-rgb), 0.15);
  --shadow-raised-primary: var(--shadow-1-primary);
  --shadow-dropdown-primary: var(--shadow-2-primary);
  --shadow-popover-primary: var(--shadow-3-primary);
  --shadow-dialog-primary: var(--shadow-4-primary);
  /* == color ============================================================== */
  --black-0: rgba(5, 12, 34, 0.04);
  --black-1: rgba(5, 12, 34, 0.13);
  --black-2: rgba(5, 12, 34, 0.25);
  --black-3: rgba(5, 12, 34, 0.35);
  --black-4: rgba(5, 12, 34, 0.5);
  --black-5: rgba(5, 12, 34, 0.6);
  --black-6: rgba(5, 12, 34, 0.75);
  --black-7: rgba(5, 12, 34, 0.85);
  --black-8: rgba(5, 12, 34, 1);
  --black-border: var(--black-1);
  --black-subtext: var(--black-3);
  --black-disabled: var(--black-4);
  --black-lighter: var(--black-5);
  --black-default: var(--black-6);
  --black-darker: var(--black-7);
  --white-1: rgba(255, 255, 255, 0.1);
  --white-2: rgba(255, 255, 255, 0.2);
  --white-3: rgba(255, 255, 255, 0.35);
  --white-4: rgba(255, 255, 255, 0.5);
  --white-5: rgba(255, 255, 255, 0.6);
  --white-6: rgba(255, 255, 255, 0.7);
  --white-7: rgba(255, 255, 255, 0.85);
  --white-8: rgba(255, 255, 255, 1);
  --white-default: var(--white-6);
  --white-foreground: var(--white-8);
  --watcher: #534588;
  /* Magnetic colors */
  --lavender: rgba(90, 104, 229, 1);
  --purple: rgba(141, 78, 237, 1);
  --lime: rgba(108, 140, 20, 1);
  /* Values set by theme service to reflect user settings */
  --accedian-primary: 0;
  --accedian-primary-rgb: 0;
  --accedian-primary-darker-10: 0;
  --accedian-primary-darker-20: 0;
  --accedian-primary-lighter: 0;
  --accedian-gradient-start: 0;
  --accedian-gradient-end: 0;
  --background-theme: 0;
  --background-theme-rgb: 0;
  --background-alt: 0;
  --background-input: 0;
  --background-dropdown: 0;
  --foreground-1: 0;
  --foreground-2: 0;
  --foreground-3: 0;
  --foreground-4: 0;
  --foreground-5: 0;
  --foreground-6: 0;
  --foreground-7: 0;
  --foreground-8: 0;
  --background-light: 0;
  --background-light-alt: 0;
  --foreground-border: 0;
  --foreground-subtext: 0;
  --foreground-disabled: 0;
  --foreground-weak: 0;
  --foreground-default: 0;
  --foreground-strong: 0;
  --foreground-full: 0;
  --foreground-color-rgb: 0;
  --gradient-theme-start: #f0f0f0;
  --gradient-theme-end: #ffffff;
  /* Values set by color service */
  --critical: 0;
  --critical-rgb: 0;
  --major: 0;
  --major-rgb: 0;
  --high: 0;
  --high-rgb: 0;
  --minor: 0;
  --minor-rgb: 0;
  --medium: 0;
  --medium-rgb: 0;
  --good: 0;
  --good-rgb: 0;
  --low: 0;
  --low-rgb: 0;
  --warning: 0;
  --warning-rgb: 0;
  --info: 0;
  --info-rgb: 0;
  --dead: 0;
  --dead-rgb: 0;
  --danger: #bb3d2f;
  --danger-rgb: 199, 39, 6;
  --danger-gradient-start: #bb3d2f;
  --danger-gradient-end: #f5515f;
  --source: #088884;
  --destination: #BF74CF;
  --error: var(--critical);
  --category-1-lighter: #3488d1;
  --category-1-default: #063061;
  --category-1-darker: #92c5de;
  --category-2-lighter: #5fa65d;
  --category-2-default: #055902;
  --category-2-darker: #b8e094;
  --category-3-lighter: #f588a7;
  --category-3-default: #b12e54;
  --category-3-darker: #e6c4cb;
  --category-4-lighter: #8897aa;
  --category-4-default: #425a79;
  --category-4-darker: #bec6d0;
  --category-5-lighter: #8291dc;
  --category-5-default: #4353a5;
  --category-5-darker: #cfd6fc;
  --category-6-lighter: #be812c;
  --category-6-default: #983304;
  --category-6-darker: #e3d4ab;
  --category-7-lightest: #f4f9f9;
  --category-7-lighter: #d4fffe;
  --category-7-light: #b0e0df;
  --category-7-default: #43b6d6;
  --category-7-dark: #088884;
  /* == height ============================================================= */
  --h-0\.5: 0.5rem;
  --h-0\.75: 0.75rem;
  --h-0: 1rem;
  --h-1: 2rem;
  --h-1\.25: 2.5rem;
  --h-1\.5: 3rem;
  --h-1\.75: 3.5rem;
  --h-2: 4rem;
  --h-3: 6rem;
  --h-4: 8rem;
  --h-5: 12rem;
  --h-5\.5: 18rem;
  --h-6: 24rem;
  --h-6\.5: 30rem;
  --h-7: 36rem;
  --h-8: 48rem;
  /* == opacity ============================================================ */
  --o-disabled: 0.55;
  /* == spacing ============================================================ */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-1\.5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
  --spacing-7: 4rem;
  --spacing-8: 5rem;
  --spacing-default: var(--spacing-4);
  --scrollbar-thickness: 7px;
  /* == stroke ============================================================= */
  --sw-1: 1px;
  --sw-2: 4px;
  --sw-3: 10px;
  --sw-4: 20px;
  --sw-default: var(--sw-1);
  /* == text: font-size and line-height ==================================== */
  --f-0: 0.5rem;
  --f-1: 0.7rem;
  --f-2: 0.8125rem;
  --f-3: 1rem;
  --f-4: 1.25rem;
  --f-5: 1.5rem;
  --f-6: 2rem;
  --f-7: 3rem;
  --f-default: var(--f-2);
  --fw-light: 300;
  --fw-normal: 400;
  --fw-bold: 500;
  --lh-0: 0;
  --lh-1: 1rem;
  --lh-2: 1rem;
  --lh-3: 1.5rem;
  --lh-4: 1.5rem;
  --lh-5: 1.5rem;
  --lh-6: 2rem;
  --lh-7: 3rem;
  --lh-default: var(--lh-2);
  --text-spacing-1: -0.03125rem;
  /* == width ============================================================== */
  --w-0\.5: 0.5rem;
  --w-0\.75: 0.75rem;
  --w-0: 1rem;
  --w-1: 2rem;
  --w-1\.5: 3rem;
  --w-2: 4rem;
  --w-2\.5: 5rem;
  --w-3: 6rem;
  --w-4: 8rem;
  --w-5: 12rem;
  --w-5\.25: 15rem;
  --w-5\.5: 18rem;
  --w-6: 24rem;
  --w-6\.5: 30rem;
  --w-7: 36rem;
  --w-7\.5: 42rem;
  --w-8: 48rem;
  --w-9: 60rem;
  /* == z-index ============================================================ */
  --z-0: -1;
  --z-1: 0;
  --z-2: 1;
  --z-3: 2;
  --z-4: 999;
  --z-5: 9999;
  --z-6: 99999;
  --z-default: var(--z-1);
}

:root {
  /* Old */
  /* Magnetic design colors */
  --brand-accent: #45991F;
  --header-caption-color: #373C42;
  --sub-header-caption-color: #889099;
  --description-caption-color: #596069;
  --box-shadow-color: #E1E4E8;
  --border-color: #E1E4E8;
  /* accent status colors */
  --accent-excellent-color: rgba(41, 91, 183);
  --accent-positive-color: rgba(71, 153, 229);
  --accent-low-warning-color: rgba(62, 140, 151);
  --accent-warning-color: rgba(194, 137, 47);
  --accent-severe-warning-color: rgba(225, 112, 56);
  --accent-negative-color: rgba(188, 60, 61);
}

.ember-application {
  /* Color catch-all for any missed elements, allows the theme to work */
  color: var(--foreground-default);
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  /* Guard against misuse of flexbox/padding */
  overflow: hidden;
}

.selectColor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.selectedColorOutlineBorder {
  outline: var(--bw-3) solid var(--accedian-primary);
  outline-offset: var(--spacing-1);
}

.ColorPicker input {
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: var(--f-2);
  height: 32px;
  padding: 0 10px;
  width: 100px;
}

.ColorPicker .clr-field button {
  border-radius: 5px;
  height: 22px;
  left: 5px;
  right: auto;
  width: 22px;
}

.clr-picker {
  left: inherit !important;
  top: inherit !important;
}

.ColorPicker .clr-field input {
  padding-left: 30px;
}

.donut text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: var(--f-6);
  fill: var(--foreground-7);
}

.dropdown-checkbox-content {
  z-index: 9999;
}
.dropdown-checkbox-content .dropdown-checkbox-list {
  max-height: 230px;
  overflow-y: scroll;
}

.live-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.live-indicator .inner-circle {
  height: 8px;
  width: 8px;
  background-color: var(--category-2-lighter);
  border-radius: 50%;
  display: inline-block;
  z-index: 3;
  position: absolute;
  animation: inner-circle-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.live-indicator .medium-circle {
  height: 14px;
  width: 14px;
  background-color: var(--category-2-lighter);
  opacity: 0.2;
  border-radius: 50%;
  border: 1px solid var(--category-2-default);
  display: inline-block;
  z-index: 2;
  position: absolute;
  animation: medium-circle-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.live-indicator .outer-circle {
  height: 18px;
  width: 18px;
  background-color: var(--category-2-lighter);
  opacity: 0.05;
  border-radius: 50%;
  border: 1px solid var(--category-2-default);
  display: inline-block;
  z-index: 1;
  position: absolute;
  animation: outer-circle-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes inner-circle-animation {
  0% {
    opacity: 0.7;
  }
  10% {
    opacity: 0.7;
  }
  35% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes medium-circle-animation {
  0% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.1;
  }
  45% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.1;
  }
}
@keyframes outer-circle-animation {
  0% {
    opacity: 0.05;
  }
  40% {
    opacity: 0.05;
  }
  65% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.05;
  }
}
.Notifications--application {
  position: absolute;
  top: var(--spacing-2);
  width: 80%;
  margin: 0 10% 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: var(--z-5);
  pointer-events: none;
}

.Notification {
  margin: 0 var(--spacing-2) var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-default);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-1);
}

.Notification--success {
  background-color: rgba(var(--good-rgb), 0.85);
  color: var(--white-foreground);
}

.Notification--error {
  background-color: rgba(var(--critical-rgb), 0.85);
  color: var(--white-foreground);
}

.Notification--warning {
  background-color: rgba(var(--major-rgb), 0.85);
  color: var(--white-foreground);
}

.Notification-message {
  display: flex;
  flex-direction: row;
  justify-content: center;
  line-height: var(--lh-2);
  font-size: var(--f-2);
}

.Notification-subtext {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: var(--spacing-1);
  line-height: var(--lh-1);
  font-size: var(--f-1);
  white-space: pre-line;
}

.Pdf-preview-override {
  --foreground-border: rgba(5, 12, 34, 0.1);
  --foreground-default: rgba(5, 12, 34, 0.7);
  --foreground-8: rgba(5, 12, 34, 1);
  --foreground-7: rgba(5, 12, 34, 0.85);
  --foreground-6: rgba(5, 12, 34, 0.7);
  --foreground-5: rgba(5, 12, 34, 0.6);
  --foreground-4: rgba(5, 12, 34, 0.5);
  --foreground-3: rgba(5, 12, 34, 0.35);
  --foreground-1: rgba(5, 12, 34, 0.1);
  --foreground-2: rgba(5, 12, 34, 0.2);
  --foreground-subtext: rgba(5, 12, 34, 0.35);
  --foreground-color-rgb: 5, 12, 34;
  --background-theme: #ffffff;
  --background-dropdown: #ffffff;
  --background-theme-rgb: 255, 255, 255;
  color: var(--foreground-default);
}

.Radio {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: var(--accedian-primary);
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--accedian-primary);
  border-radius: 50%;
  display: grid;
  place-content: center;
}
.Radio::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--accedian-primary);
}
.Radio:checked::before {
  transform: scale(1);
}

.Widget-Context-Menu-Hide .Widget-Context-Menu {
  display: none;
}

.Aggregate-multi-line-text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
}

.Button-UpdateData {
  transform: translate(-50%, 50%);
  z-index: calc(var(--z-4) + 1);
}

.Analysis-Drilldown--width {
  width: 54rem;
}

.Analysis-Drilldown--z-index,
.Analysis-Container--expanded {
  /* Placed slightly above --z-3 to display over the crosstab widget */
  z-index: calc(var(--z-3) + 3);
}

.Analysis-Divider-Controls {
  transform: translateY(calc(-50% + var(--bw-3) / 2));
}

.Filter-bar-height {
  height: 48px;
}

.Analysis-sidebar-width {
  width: calc(var(--w-5\.5) + 0.5rem);
}

.Widget-Cell-Hide-Drilldown .Widget-Drilldown-Button {
  display: none;
}

.AnalysisManagement-Table table {
  border-collapse: collapse;
}

.AnalysisManagement-Table .et-toggle-collapse {
  display: none;
}

.AnalysisManagement-Table .is-selectable {
  border-left: 5px solid transparent;
  cursor: pointer;
}

.AnalysisManagement-Table .is-selected,
.AnalysisManagement-Table .is-even.is-selected {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
  border-left: 5px solid var(--accedian-primary);
}

.AnalysisManagement-Table .is-even {
  background-color: rgba(5, 12, 34, 0.04);
}

:root {
  --app-header-height: 3.5rem;
}

.Application {
  width: 100%;
  height: 100vh;
}

.App-Header {
  height: var(--app-header-height);
  background: linear-gradient(90deg, #373C42 0.29%, #0F1114 100%, #0F1214 100%);
}

.Application-Body {
  height: 100%;
  width: 100%;
}

.Application-Content {
  height: 100%;
  width: 100%;
}

.ApplicationInterval {
  transform: translate3d(0, 0, 0);
}

.ApplicationInterval-stepForward {
  width: 2.25rem;
}

.zoom-indicator-bar {
  bottom: 1px;
}

.zoom-indicator-bar > div {
  height: 2px;
}

.Nav-Link {
  cursor: pointer;
  transition: background-color 150ms ease-in 85ms, fill 150ms ease-in 85ms;
}

.Nav-Link-Frame {
  clip-path: inset(0 round var(--radius-4));
}

.Nav-Link-Highlight {
  transition: inset 150ms ease-in-out;
}

.Nav-Link:hover {
  background-color: var(--white-2);
  fill: var(--white-6);
}

.Nav-Icon-Svg {
  opacity: 1;
  transition: opacity 0.1s 0.25s;
}

.Nav-Icon-Svg-Hide {
  opacity: 0;
  transition: opacity 0.1s;
}

.Nav-Tooltip-Styling.ember-tooltip {
  border: 0.0625rem solid var(--white-3);
  box-shadow: 0.0625rem 0.25rem 0.125rem rgba(0, 0, 0, 0.2);
  padding: 0.5rem 0.625rem;
  z-index: var(--z-5);
}

.Nav-Tooltip-Styling {
  border: 0.0625rem solid var(--white-3);
  box-shadow: 0.0625rem 0.25rem 0.125rem rgba(0, 0, 0, 0.2);
  padding: 0.5rem 0.625rem;
  z-index: var(--z-5);
}

.Nav-Tooltip-Hide-Arrow {
  opacity: 0;
}

.Nav-Sidebar {
  box-shadow: 1px 0 1px 0 var(--foreground-2), 8px 0px 8px 0 var(--foreground-2), 45px 0px 45px 0 var(--foreground-1) !important;
  margin-top: 3.5rem;
  margin-left: 5.5rem;
  height: calc(100% - 3.5rem);
}

.AssetList-nameSearch.emberTagInput {
  padding: 2px 0px 2px var(--spacing-1);
  border-radius: var(--radius-default);
  border-color: transparent;
  background: var(--foreground-1);
}

.AssetList-nameSearch .emberTagInput-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-default);
  background: var(--foreground-1);
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--foreground-default);
}

.AssetList-nameSearch .emberTagInput-remove {
  margin-left: var(--spacing-2);
}

.AssetList-nameSearch .emberTagInput-input {
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: transparent;
  color: var(--foreground-default);
}

.x-toggle-component label.AssetList-pinnedObjects-label.off-label {
  padding: 0 0 0 0.5rem;
}

.AssetMetadataList-table table {
  width: 100%;
}

.Badge--size-1 {
  width: 1.5rem;
}

.BouncingLogo {
  animation-name: bounce;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
  }
}
.Button {
  display: inline-flex;
  outline: 0;
  border-style: none;
  user-select: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.Button--static {
  cursor: default;
}

.Button--vw-3 {
  background-color: var(--accedian-primary);
  color: var(--white-7);
}

:not(.Button--static):not(.Button--active).Button--vw-3:hover {
  background-color: var(--accedian-primary-darker-10);
}

.Button--vw-3.Button--active,
:not(.Button--static).Button--vw-3:active {
  background-color: var(--accedian-primary-darker-20);
}

:not(.Button--static).Button--vw-3--test-active,
:not(.Button--static).Button--vw-3--test-pressed {
  background-color: var(--accedian-primary-darker-20);
}

:not(.Button--static).Button--vw-3--test-hover {
  background-color: var(--accedian-primary-darker-10);
}

.Button--vw-2, .SectionGrid__content > .ui-resizable-se::before {
  border: 1px solid var(--accedian-primary);
  background-color: transparent;
  color: var(--accedian-primary);
}

:not(.Button--static):not(.Button--active).Button--vw-2:hover, .SectionGrid__content > .ui-resizable-se:not(.Button--static):not(.Button--active):hover::before {
  border: 1px solid var(--accedian-primary);
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
  color: var(--accedian-primary);
}

.Button--vw-2.Button--active, .SectionGrid__content > .Button--active.ui-resizable-se::before,
:not(.Button--static).Button--vw-2:active,
.SectionGrid__content > .ui-resizable-se:not(.Button--static):active::before {
  border: 1px solid var(--accedian-primary-darker-20);
  background-color: rgba(var(--accedian-primary-rgb), 0.3);
  color: var(--accedian-primary-darker-20);
}

:not(.Button--static).Button--vw-2--test-active,
:not(.Button--static).Button--vw-2--test-pressed {
  background-color: rgba(var(--accedian-primary-rgb), 0.3);
  color: var(--accedian-primary-darker-20);
}

:not(.Button--static).Button--vw-2--test-hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.Button--vw-1 {
  background-color: transparent;
  color: var(--accedian-primary);
}

:not(.Button--static):not(.Button--active).Button--vw-1:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.Button--vw-1.Button--active,
:not(.Button--static).Button--vw-1:active {
  background-color: rgba(var(--accedian-primary-rgb), 0.3);
}

:not(.Button--static).Button--vw-1--test-active,
:not(.Button--static).Button--vw-1--test-pressed {
  background-color: rgba(var(--accedian-primary-rgb), 0.3);
  color: var(--accedian-primary-darker-20);
}

:not(.Button--static).Button--vw-1--test-hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.Button--vw-0 {
  background-color: transparent;
  color: var(--foreground-7);
  fill: var(--foreground-4);
}

:not(.Button--static):not(.Button--size-1):not(.Button--active).Button--vw-0:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

:not(.Button--size-1).Button--vw-0.Button--active,
:not(.Button--static):not(.Button--size-1).Button--vw-0:active {
  background-color: rgba(var(--accedian-primary-rgb), 0.3);
}

:not(.Button--static):not(.Button--active).Button--size-1.Button--vw-0:hover {
  color: var(--accedian-primary-darker-10);
}

:not(.Button--static):not(.Button--active).Button--size-1.Button--vw-0:active {
  color: var(--accedian-primary-darker-20);
}

.Button--size-1.Button--vw-0.Button--active {
  color: var(--accedian-primary);
}

:not(.Button--static):not(.Button--size-1).Button--vw-0--test-active {
  background-color: var(--foreground-1);
}

:not(.Button--static).Button--size-1.Button--vw-0--test-active {
  color: var(--accedian-primary);
}

:not(.Button--static):not(.Button--size-1).Button--vw-0--test-hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

:not(.Button--static).Button--size-1.Button--vw-0--test-hover {
  color: var(--accedian-primary-darker-10);
}

:not(.Button--static):not(.Button--size-1).Button--vw-0--test-pressed {
  background-color: rgba(var(--accedian-primary-rgb), 0.3);
}

:not(.Button--static).Button--size-1.Button--vw-0--test-pressed {
  color: var(--accedian-primary-darker-20);
}

.Button--danger {
  background-color: transparent;
  color: var(--danger);
}

:not(.Button--static):not(.Button--active).Button--danger:hover {
  background-color: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}

.Button--danger.Button--active,
:not(.Button--static).Button--danger:active {
  background-color: rgba(var(--danger-rgb), 0.3);
  color: var(--danger);
}

:not(.Button--static).Button--danger--test-active,
:not(.Button--static).Button--danger--test-pressed {
  background-color: rgba(var(--danger-rgb), 0.3);
  color: var(--danger);
}

:not(.Button--static).Button--danger--test-hover {
  background-color: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}

.Button--size-3 {
  height: var(--h-1);
  padding: 0 var(--spacing-3);
  font-size: var(--f-2);
  line-height: var(--lh-2);
}

.Button--icon.Button--size-3 {
  width: var(--h-1);
  height: var(--h-1);
  padding: 0;
}

.Button--size-2 {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--f-2);
  line-height: var(--lh-2);
}

.Button--icon.Button--size-2 {
  padding: var(--spacing-1);
}

.Button--size-1 {
  padding: 0;
  font-size: var(--f-2);
  line-height: var(--lh-2);
}

.Button--iconSize-2 {
  width: 1.5rem;
  height: 1.5rem;
}

.Button--iconSize-1 {
  width: 1rem;
  height: 1rem;
}

.Button--shape-square, .SectionGrid__content > .ui-resizable-se::before {
  border-radius: var(--radius-3);
}

.Button--shape-sharp {
  border-radius: var(--radius-0);
}

.Button.Button.Button--split.Button--split-left {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.Button.Button.Button--split.Button--split-right {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.Button.Button--split.Button--split-right .Button--iconSize-2,
.Button.Button--split.Button--split-right .Button--iconSize-1 {
  width: 100%;
}

.Button.Button--split.Button--split-right:before {
  height: 75%;
  border-left: solid 1px;
  content: "";
  width: auto;
  margin-right: auto;
}

.ButtonGroup > * + * {
  position: relative;
}

.ButtonGroup > * + *::before {
  position: absolute;
  left: -1px;
  height: var(--h-0);
  border-right: 1px solid var(--foreground-1);
  content: "";
}

.Checkbox {
  display: inline-block;
}

.Checkbox--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.Checkbox-input {
  display: none;
}

.Checkbox-label {
  outline: none;
  line-height: var(--lh-default);
  font-size: var(--f-default);
  font-weight: var(--fw-normal);
  color: var(--foreground-default);
  display: flex;
  flex-direction: row;
  align-items: center;
  user-select: none;
  cursor: pointer;
  padding: var(--spacing-1);
}

.Checkbox-label--f-2 {
  font-size: var(--f-2);
}

.Checkbox-label--f-1 {
  font-size: var(--f-1);
}

.Checkbox-label--no-padding {
  padding: 0;
}

.Checkbox-checkbox {
  position: relative;
  border: var(--bw-default) solid var(--foreground-2);
  border-radius: 4px;
  box-sizing: content-box;
  background-color: var(--background-dropdown);
  flex-shrink: 0;
  /* Transition properties */
  transition: border-color 0.3s;
  transition: box-shadow 0.3s;
}

.Checkbox-checkbox--f-2 {
  width: calc(var(--spacing-4) - var(--bw-default) * 1);
  height: calc(var(--spacing-4) - var(--bw-default) * 1);
}

.Checkbox-checkbox--f-1 {
  width: calc(var(--spacing-3) - var(--bw-default) * 2);
  height: calc(var(--spacing-3) - var(--bw-default) * 2);
}

.Checkbox-checkbox--checked {
  background-image: url('data:image/svg+xml;utf8,<svg width="16px" height="12px" viewBox="0 0 20 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" stroke="rgb(151,151,151)" stroke-width="3" points="1.40795004 6.76075159 7.57251792 12.9253195 18.9979088 1.49992855"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: 0.2rem;
}

.Checkbox-checkbox--f-2--checked {
  background-image: url('data:image/svg+xml;utf8,<svg width="20px" height="15px" viewBox="0 0 20 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" stroke="rgb(151,151,151)" stroke-width="3" points="1.40795004 6.76075159 7.57251792 12.9253195 18.9979088 1.49992855"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
}

.Checkbox-checkbox--error {
  border-color: var(--critical);
}

.Checkbox:hover .Checkbox-checkbox,
.Checkbox-label:hover .Checkbox-checkbox,
.Checkbox-label:focus .Checkbox-checkbox {
  border-color: var(--accedian-primary);
  box-shadow: 0px 0px 0px 3px rgba(var(--accedian-primary-rgb), 0.2);
}

.Checkbox:hover .Checkbox-label,
.Checkbox-label:hover .Checkbox-label {
  font-weight: var(--fw-bold);
}

.Checkbox:active .Checkbox-checkbox,
.Checkbox-label:active .Checkbox-checkbox {
  border-color: var(--foreground-1);
  box-shadow: none;
}

div.code-toolbar > .toolbar {
  opacity: 100;
}

.copy-to-clipboard-button {
  color: #fff !important;
  cursor: pointer;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* We're using this exclusively inline for now */
.Color .pickr,
.Color .pcr-save,
.Color .pcr-cancel,
.Color .pcr-clear {
  display: none;
}

.Color .pcr-app {
  box-shadow: none;
}

.Color .pcr-app[data-theme=classic] {
  padding: 0;
}

.Widget-Crosstab th {
  background-color: var(--background-theme);
  border-left: 1px solid var(--foreground-1);
  border-bottom: 1px solid var(--foreground-3);
}
.Widget-Crosstab th:last-of-type {
  border-right: none;
}
.Widget-Crosstab tr:first-child th:nth-child(2) {
  border-left: none;
}
.Widget-Crosstab tr:first-child th:first-child {
  border-left: none;
  border-right: 1px solid var(--foreground-3);
  border-bottom: 1px solid var(--foreground-3);
}
.Widget-Crosstab td {
  border-top: 1px solid var(--foreground-1);
  border-left: 1px solid var(--foreground-1);
  padding-top: 1px;
  padding-left: 1px;
  padding-bottom: 2px;
  padding-right: 2px;
}
.Widget-Crosstab td.Crosstab-Cell-Active {
  padding: 0px;
  border: 2px solid var(--accedian-primary);
}
.Widget-Crosstab td:first-child {
  border-left: none;
  border-right: 1px solid var(--foreground-3);
  background-color: var(--background-theme);
}
.Widget-Crosstab tr:first-of-type td {
  border-top: none;
  padding-top: 2px;
}
.Widget-Crosstab tr:first-of-type td.Crosstab-Cell-Active {
  border-top: 2px solid var(--accedian-primary);
  padding-top: 0px;
}
.Widget-Crosstab tr:last-of-type td {
  border-bottom: none;
  padding-bottom: 2px;
}
.Widget-Crosstab tr:last-of-type td.Crosstab-Cell-Active {
  border-bottom: 2px solid var(--accedian-primary);
  padding-bottom: 0px;
}
.Widget-Crosstab td:last-of-type {
  border-right: none;
  padding-right: 2px;
}
.Widget-Crosstab td:last-of-type.Crosstab-Cell-Active {
  border-right: 2px solid var(--accedian-primary);
  padding-right: 0px;
}
.Widget-Crosstab td:nth-child(2) {
  border-left: none;
  padding-left: 2px;
}
.Widget-Crosstab td:nth-child(2).Crosstab-Cell-Active {
  border-left: 2px solid var(--accedian-primary);
  padding-left: 0px;
}

.Widget-Crosstab.Bidirectional .Alternate {
  background-color: var(--background-alt);
  border-left: none;
  padding-left: 2px;
}
.Widget-Crosstab.Bidirectional tr:first-child th:nth-child(2) {
  border-left: 1px solid var(--foreground-3);
}
.Widget-Crosstab.Bidirectional tr:nth-child(2) th {
  border-top: 1px solid var(--foreground-1);
  border-bottom: 1px solid var(--foreground-3);
}
.Widget-Crosstab.Bidirectional tr:nth-child(2) th:not(.Alternate) {
  border-right: none;
}
.Widget-Crosstab.Bidirectional tr:nth-child(2) th:first-child {
  border-left: 1px solid var(--foreground-3);
}
.Widget-Crosstab.Bidirectional td:first-child:not(.Alternate) {
  border-left: none;
  border-right: 1px solid var(--foreground-3);
  background-color: var(--background-theme);
}
.Widget-Crosstab.Bidirectional td:not(.Alternate) {
  border-right: none;
  padding-right: 2px;
}
.Widget-Crosstab.Bidirectional td.Crosstab-Cell-Active.Alternate {
  border-left: none;
  padding-left: 2px;
}
.Widget-Crosstab.Bidirectional td.Crosstab-Cell-Active:not(.Alternate) {
  border-right: none;
  padding-right: 2px;
}

.Widget-Crosstab-ColumnLabelPosition {
  position: relative;
  padding-left: 13rem;
}

.Widget-Crosstab-ColumnLabelContainer {
  flex-direction: row;
  width: 100%;
  background-color: var(--background-theme);
  z-index: 4;
}

.Widget-Crosstab-RowLabelContainer {
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--background-theme);
  z-index: 3;
}

.Widget-Crosstab-RowLabelPosition {
  position: relative;
  padding-right: 12rem;
}

.Widget-Crosstab-RowLabelOrientation {
  transform: rotate(270deg);
  transform-origin: left top;
}

.Widget-Crosstab-CellLabelContainer {
  white-space: nowrap;
  padding-left: 2px;
  padding-right: 2px;
}

.Row-Label-Position {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.Row-Label-Rotation {
  writing-mode: vertical-lr;
  height: 100%;
  padding-top: 5rem;
}

.ui-resizable-se {
  z-index: 3 !important;
}

.dashboard-sidebar-scroll-fix {
  margin-left: 100%;
}

.Card-handle {
  position: absolute;
  top: -8px;
  right: -8px;
}

.SectionGrid__content > .ui-resizable-se {
  bottom: 10px !important;
  right: 11px !important;
  transform-style: preserve-3d;
}
.SectionGrid__content > .ui-resizable-se::before {
  content: " ";
  display: block;
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  transform: translateZ(-0.1px) rotate(45deg);
  background-color: var(--background-theme);
  border: 1px solid var(--foreground-3);
}

.SectionGrid__content--visible {
  overflow: visible !important;
}

.CardGrid__content > .ui-resizable-se {
  bottom: 8px !important;
  right: 8px !important;
}

.authoring-container::before {
  content: "";
  display: inline-block;
  width: 0px;
  height: 0px;
  border-top: 39px solid var(--accedian-primary);
  border-left: 24px solid transparent;
  position: absolute;
  top: -1px;
  right: 100%;
}

.authoring-container-topborder {
  position: absolute;
  border-top: var(--bw-3) solid var(--accedian-primary);
  left: -24px;
  right: 0;
  top: calc(var(--bw-3) * -1);
}

.DashboardTable table {
  border-collapse: collapse;
}

.DashboardTable .et-toggle-collapse {
  display: none;
}

.DashboardTable .is-selectable {
  border-left: 5px solid transparent;
  cursor: pointer;
}

.DashboardTable .is-selected,
.DashboardTable .is-even.is-selected {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
  border-left: 5px solid var(--accedian-primary);
}

.DashboardTable .is-even {
  background-color: rgba(5, 12, 34, 0.04);
}

.Details-overview-sidebar {
  top: calc(var(--spacing-3) + 2rem + var(--spacing-3));
}

.DictionarySearch-dimensionTypeHeader-0 {
  position: sticky;
  top: 0;
}

.DictionarySearch-dimensionTypeHeader-1 {
  position: sticky;
  bottom: 0;
  top: 56px;
}

.DimensionQuery-DisplayAgg {
  max-width: 3.5rem;
}

.DimensionQuery-DisplayDir {
  max-width: 3.5rem;
}

.DimensionQuery-DisplayKey {
  max-width: 8rem;
}

.DimensionQuery-DisplayName__icon {
  width: 0.75rem;
  height: 0.75rem;
  max-width: 0.75rem;
  max-height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0.75rem;
}

.DimensionQuery-DisplaySrc {
  max-width: 6rem;
}

.DimensionQuery-DisplayValue {
  width: 5rem;
}

.DimensionQuery-DisplayValue--categorical {
  overflow: hidden;
  text-overflow: ellipsis;
}

.html2canvas-safe .DimensionQuery-DisplayName__icon {
  display: none;
}

.timeseries-legend-expand-prevention {
  width: 50px;
}

.draggable-drop-zone.is-dragged-over {
  border-color: var(--accedian-primary);
}

.ember-basic-dropdown {
  position: relative;
}

.ember-basic-dropdown,
.ember-basic-dropdown-content,
.ember-basic-dropdown-content * {
  box-sizing: border-box;
}

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: var(--background-dropdown);
  box-shadow: var(--shadow-dropdown);
  border-radius: var(--radius-default);
}

.ember-basic-dropdown-content--left {
  left: 0;
}

.ember-basic-dropdown-content--right {
  right: 0;
}

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ember-basic-dropdown-content-wormhole-origin {
  display: inline;
}

.dsl-editor-wrapper {
  outline: none;
  counter-reset: section;
  border: var(--bw-default) solid var(--background-input);
  border-bottom: var(--bw-default) solid var(--foreground-border);
  border-radius: var(--radius-default);
  padding-left: var(--spacing-2);
  background-color: var(--background-input);
  color: var(--foreground-strong);
  line-height: var(--lh-3);
  font-size: var(--f-default);
  transition: border-color 0.3s;
  min-height: 32px;
  overflow-y: scroll;
}

.dsl-editor-wrapper:focus,
.dsl-editor-wrapper:hover {
  border-color: var(--accedian-primary);
}

.dsl-editor-wrapper > div {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  position: relative;
  padding-left: 50px;
  counter-increment: section;
}

.dsl-editor-wrapper > div.error {
  color: var(--danger);
}

.dsl-editor-wrapper > div p {
  border-top: 1px solid rgba(175, 175, 175, 0.5);
  color: var(--category-6-lighter);
  padding: 0;
}

.dsl-editor-wrapper > div::before {
  content: counter(section);
  user-select: none;
  width: 2rem;
  opacity: 0.5;
  display: inline-block;
  position: absolute;
  left: 0;
}

.ember-power-calendar {
  box-sizing: border-box;
  position: relative;
}

.ember-power-calendar-nav {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.ember-power-calendar-nav * {
  box-sizing: border-box;
}

.ember-power-calendar-days, .ember-power-calendar-days * {
  box-sizing: border-box;
}

.ember-power-calendar-nav-title {
  flex: 1;
  text-align: center;
}

.ember-power-calendar-row {
  display: flex;
  justify-content: center;
}

.ember-power-calendar-weekday {
  -webkit-appearance: none;
  flex: 1 1 100%;
  justify-content: center;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  display: flex;
  padding: 0;
}

.ember-power-calendar-day {
  -webkit-appearance: none;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  font-size: inherit;
  padding: 0;
}

.ember-power-calendar-nav-control {
  -webkit-appearance: none;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  font-size: inherit;
}

.ember-power-calendar {
  font-size: 14px;
  line-height: 1.42857;
}

.ember-power-calendar-nav {
  line-height: 2;
}

.ember-power-calendar-nav-control {
  line-height: 1;
  font-size: 150%;
}
.ember-power-calendar-nav-control:focus {
  transform: scale(1.2);
}

.ember-power-calendar-day--selected,
.ember-power-calendar-day--selected:not([disabled]):hover {
  font-weight: bold;
}

.ember-power-calendar-day--interactive[disabled] {
  opacity: 1 !important;
}

.calendar-small .ember-power-calendar-week:first-child[data-missing-days="1"] {
  padding-left: 46px;
}
.calendar-small .ember-power-calendar-week:first-child[data-missing-days="2"] {
  padding-left: 92px;
}
.calendar-small .ember-power-calendar-week:first-child[data-missing-days="3"] {
  padding-left: 138px;
}
.calendar-small .ember-power-calendar-week:first-child[data-missing-days="4"] {
  padding-left: 184px;
}
.calendar-small .ember-power-calendar-week:first-child[data-missing-days="5"] {
  padding-left: 230px;
}
.calendar-small .ember-power-calendar-week:first-child[data-missing-days="6"] {
  padding-left: 276px;
}
.calendar-small .ember-power-calendar-week:last-child[data-missing-days="1"] {
  padding-right: 46px;
}
.calendar-small .ember-power-calendar-week:last-child[data-missing-days="2"] {
  padding-right: 92px;
}
.calendar-small .ember-power-calendar-week:last-child[data-missing-days="3"] {
  padding-right: 138px;
}
.calendar-small .ember-power-calendar-week:last-child[data-missing-days="4"] {
  padding-right: 184px;
}
.calendar-small .ember-power-calendar-week:last-child[data-missing-days="5"] {
  padding-right: 230px;
}
.calendar-small .ember-power-calendar-week:last-child[data-missing-days="6"] {
  padding-right: 276px;
}
.calendar-small .ember-power-calendar-day, .calendar-small .ember-power-calendar-weekday {
  max-width: 44px;
  max-height: 32px;
  width: 44px;
  height: 32px;
}
.calendar-small .ember-power-calendar-weekdays, .calendar-small .ember-power-calendar-week {
  padding-left: 0;
  padding-right: 0;
}
.calendar-small .ember-power-calendar-day {
  color: var(--foreground-2);
}
.calendar-small .ember-power-calendar-weekdays {
  color: var(--foreground-3);
}
.calendar-small .ember-power-calendar-nav-control {
  color: var(--accedian-primary);
}
.calendar-small .ember-power-calendar-nav-control:focus {
  color: rgba(var(--accedian-primary-rgb), 0.5);
}
.calendar-small .ember-power-calendar-day--current-month {
  color: var(--foreground-3);
}
.calendar-small .ember-power-calendar-day--today {
  color: var(--foreground-default);
  background-color: rgba(var(--foreground-color-rgb), 0.05);
  font-style: bold;
}
.calendar-small .ember-power-calendar-day:not([disabled]):hover {
  background-color: var(--foreground-1);
}
.calendar-small .ember-power-calendar-day--focused {
  box-shadow: inset 0px -2px 0px 0px var(--accedian-primary);
}
.calendar-small .ember-power-calendar-day--selected.ember-power-calendar-day--range-start {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.calendar-small .ember-power-calendar-day--selected.ember-power-calendar-day--range-start:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
}
.calendar-small .single-mode .ember-power-calendar-day--selected.ember-power-calendar-day--range-start {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
}
.calendar-small .ember-power-calendar-day--selected.ember-power-calendar-day--range-end {
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.calendar-small .ember-power-calendar-day--selected.ember-power-calendar-day--range-end:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
}
.calendar-small .ember-power-calendar-day--selected {
  background-color: var(--accedian-primary-lighter);
  color: var(--foreground-7);
  font-weight: bold;
}
.calendar-small .highlight-today .ember-power-calendar-day--today {
  background-color: var(--accedian-primary-lighter);
  border-radius: 50%;
}
.calendar-small .ember-power-calendar-day--selected:not([disabled]):hover {
  background-color: var(--accedian-primary-lighter);
}
.calendar-small .ember-power-calendar-day--other-month:not([disabled]):hover {
  color: var(--foreground-3);
}
.calendar-small .day-policy-count {
  align-items: center;
  background-color: var(--black-6);
  border-radius: var(--radius-2);
  color: var(--white-7);
  display: flex;
  flex-shrink: 0;
  font-size: var(--f-1);
  gap: var(--spacing-2);
  height: var(--h-0\.75);
  justify-content: center;
  padding: var(--spacing-0, 0px) var(--spacing-1, 2px);
}

.calendar-big .ember-power-calendar-week:first-child[data-missing-days="1"] {
  padding-left: 40px;
}
.calendar-big .ember-power-calendar-week:first-child[data-missing-days="2"] {
  padding-left: 80px;
}
.calendar-big .ember-power-calendar-week:first-child[data-missing-days="3"] {
  padding-left: 120px;
}
.calendar-big .ember-power-calendar-week:first-child[data-missing-days="4"] {
  padding-left: 160px;
}
.calendar-big .ember-power-calendar-week:first-child[data-missing-days="5"] {
  padding-left: 200px;
}
.calendar-big .ember-power-calendar-week:first-child[data-missing-days="6"] {
  padding-left: 240px;
}
.calendar-big .ember-power-calendar-week:last-child[data-missing-days="1"] {
  padding-right: 40px;
}
.calendar-big .ember-power-calendar-week:last-child[data-missing-days="2"] {
  padding-right: 80px;
}
.calendar-big .ember-power-calendar-week:last-child[data-missing-days="3"] {
  padding-right: 120px;
}
.calendar-big .ember-power-calendar-week:last-child[data-missing-days="4"] {
  padding-right: 160px;
}
.calendar-big .ember-power-calendar-week:last-child[data-missing-days="5"] {
  padding-right: 200px;
}
.calendar-big .ember-power-calendar-week:last-child[data-missing-days="6"] {
  padding-right: 240px;
}
.calendar-big .ember-power-calendar-day, .calendar-big .ember-power-calendar-weekday {
  max-width: 40px;
  max-height: 40px;
  width: 40px;
  height: 40px;
}
.calendar-big .ember-power-calendar-weekdays, .calendar-big .ember-power-calendar-week {
  padding-left: 0;
  padding-right: 0;
}
.calendar-big .ember-power-calendar-day {
  color: var(--foreground-6);
}
.calendar-big .ember-power-calendar-weekdays {
  color: var(--foreground-6);
}
.calendar-big .ember-power-calendar-nav-control {
  color: var(--accedian-primary);
}
.calendar-big .ember-power-calendar-nav-control:focus {
  color: rgba(var(--accedian-primary-rgb), 0.5);
}
.calendar-big .ember-power-calendar-day--current-month {
  color: var(--foreground-3);
}
.calendar-big .ember-power-calendar-day--today {
  color: var(--foreground-1);
  background-color: rgba(var(--foreground-color-rgb), 0.05);
  font-style: bold;
}
.calendar-big .ember-power-calendar-day:not([disabled]):hover {
  background-color: var(--foreground-1);
}
.calendar-big .ember-power-calendar-day--focused {
  box-shadow: inset 0px -2px 0px 0px var(--accedian-primary);
}
.calendar-big .ember-power-calendar-day--selected.ember-power-calendar-day--range-start {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.calendar-big .ember-power-calendar-day--selected.ember-power-calendar-day--range-start:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
}
.calendar-big .single-mode .ember-power-calendar-day--selected.ember-power-calendar-day--range-start {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
}
.calendar-big .ember-power-calendar-day--selected.ember-power-calendar-day--range-end {
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.calendar-big .ember-power-calendar-day--selected.ember-power-calendar-day--range-end:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.8);
}
.calendar-big .ember-power-calendar-day--selected {
  background-color: var(--accedian-primary-lighter);
  color: var(--foreground-7);
  font-weight: bold;
}
.calendar-big .highlight-today .ember-power-calendar-day--today {
  background-color: var(--accedian-primary-lighter);
  border-radius: 50%;
}
.calendar-big .ember-power-calendar-day--selected:not([disabled]):hover {
  background-color: var(--accedian-primary-lighter);
}
.calendar-big .ember-power-calendar-day--other-month:not([disabled]):hover {
  color: var(--foreground-3);
}
.calendar-big .day-policy-count {
  align-items: center;
  background-color: var(--black-6);
  border-radius: var(--radius-2);
  color: var(--white-7);
  display: flex;
  flex-shrink: 0;
  font-size: var(--f-1);
  gap: var(--spacing-2);
  height: var(--h-0\.75);
  justify-content: center;
  padding: var(--spacing-0, 0px) var(--spacing-1, 2px);
}

.emberTagInput {
  margin: 0;
  border-radius: var(--radius-default);
  cursor: text;
  width: 100%;
  transition: width 0.25s;
}

.emberTagInput--readOnly {
  cursor: default;
}

.emberTagInput-tag,
.emberTagInput-input {
  font: sans-serif;
  font-size: var(--f-default);
}

.emberTagInput-tag {
  background: cornflowerblue;
  border-radius: 20px;
  color: white;
  list-style-type: none;
  display: inline-block;
  cursor: default;
}

.emberTagInput-tag--remove {
  opacity: 0.75;
}

.emberTagInput-remove:before {
  content: "x";
  cursor: pointer;
}

.emberTagInput-input {
  border: none;
}

.emberTagInput-input:focus {
  outline: none;
}

.emberTagInput-input.is-disabled {
  display: none;
}

.emberTagInput-new.offset {
  position: absolute;
  top: -10000px;
}

.emberTagInput--extended {
  position: absolute;
  width: var(--w-7);
  min-height: 100%;
}

.emberTagInput:not(.emberTagInput--extended) {
  height: 100%;
}

.x-file--input:focus + label {
  outline: none;
}

/* TODO: This is the default setting for x-file-input, but prevents the hover effect of a-button */
/* Allowing pointer events breaks the click for the label, so until we have a fix this has to stay */
.x-file--input + label * {
  pointer-events: none;
}

.html2canvas-safe .Float {
  display: none;
}

.Float {
  transition: opacity 0.3s, left 0.3s, right 0.3s;
}

.Float--left {
  mask-image: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.Float--right {
  mask-image: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.Float--top {
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.Float--bottom {
  mask-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.Float-offset--left {
  left: -0.5rem;
}

.Float-offset--right {
  right: -0.5rem;
}

.Float-offset--top {
  top: -0.5rem;
}

.Float-offset--bottom {
  bottom: -0.5rem;
}

.FocusFlash {
  --focus-flash-duration-ms: 1200ms;
  position: absolute;
  inset: 0;
  animation-name: focus-flash;
  animation-duration: var(--focus-flash-duration-ms);
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes focus-flash {
  0% {
    background-color: rgba(var(--accedian-primary-rgb), 0.5);
  }
  25% {
    background-color: rgba(var(--accedian-primary-rgb), 0.5);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
.FormField-label {
  padding-bottom: var(--spacing-1);
  font-size: var(--f-default);
  font-weight: var(--fw-bold);
  color: var(--foreground-default);
  display: flex;
  flex-direction: row;
}

.FormField-label--isRequired::after {
  content: "*";
}

.FormField-input {
  width: 100%;
}

.FormField-input--text, .FormField-input--password, .Search--SingleTerm, .Search--multiTerm {
  width: 100%;
  outline: none;
  /* A border matching the input background to avoid shifting when the error border appears */
  border: var(--bw-default) solid var(--background-input);
  border-bottom: var(--bw-default) solid var(--foreground-border);
  border-radius: var(--radius-default);
  padding-left: var(--spacing-2);
  background-color: var(--background-input);
  color: var(--foreground-strong);
  /* Slightly larger than the default line height */
  line-height: var(--lh-3);
  font-size: var(--f-default);
  /* Transition properties */
  transition: border-color 0.3s;
  min-height: 32px !important;
}

.FormField-input--text--inline {
  width: 100%;
  outline: none;
  /* A border matching the input background to avoid shifting when the error border appears */
  border: var(--bw-default) solid var(--background-input);
  border-bottom: var(--bw-default) solid var(--foreground-border);
  border-radius: var(--radius-default);
  padding-left: var(--spacing-2);
  background-color: var(--foreground-1);
  color: var(--foreground-strong);
  /* Slightly larger than the default line height */
  line-height: var(--lh-3);
  font-size: var(--f-default);
  /* Transition properties */
  transition: border-color 0.3s;
  min-height: 26px !important;
}

.FormField-input--btn {
  color: var(--foreground-default);
  position: absolute !important;
  font-size: var(--f-5);
  right: 0;
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
  margin-right: var(--spacing-1);
  visibility: hidden;
}
.FormField-input--btn:hover, .FormField-input--btn:focus {
  visibility: visible;
}

.FormField-input-btn-space:hover,
.FormField-input-btn-space:focus {
  padding-right: var(--spacing-6);
}

.FormField-input-btn-hover-space {
  padding-right: var(--spacing-6);
}

.FormField-input--text:hover,
.FormField-input--text:focus {
  border-color: var(--accedian-primary);
}
.FormField-input--text:hover + .FormField-input--btn,
.FormField-input--text:focus + .FormField-input--btn {
  visibility: visible;
}

.FormField-input--error,
.FormField-input--error:hover,
.FormField-input--error:focus {
  border-color: var(--error) !important;
}

.FormField-error {
  display: flex;
  padding-top: var(--spacing-1);
  line-height: var(--lh-1);
  font-size: var(--f-1);
  font-weight: var(--fw-light);
  color: var(--error);
  /* Transition properties */
  transition: top 0.3s, max-height 0.3s, opacity 0.3s;
  position: relative;
  top: var(--lh-1);
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.FormField-error--visible {
  top: 0;
  max-height: var(--lh-1);
  opacity: 1;
}

.FormField-search {
  text-indent: 22px;
  height: 2rem;
}

.FormField-has-data {
  background-color: var(--foreground-1);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--radius-3);
  border-color: var(--foreground-border);
}

/* Search::SingleTerm is sharing some of the styling with FormField so keeping it in here */
.Search--SingleTerm:focus-within {
  border-color: var(--accedian-primary);
}

.Search--SingleTerm input,
.Search--SingleTerm input:hover,
.Search--SingleTerm input:focus {
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--foreground-strong);
  border-radius: var(--radius-default);
}

.Search--multiTerm:focus-within {
  border-color: var(--accedian-primary);
}

.Search--multiTerm input,
.Search--multiTerm input:hover,
.Search--multiTerm input:focus {
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--foreground-strong);
  border-radius: var(--radius-default);
}

.form-fields--pv-2 .FormField {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

:root {
  --Guide-color: 132, 155, 185;
}

.Guide-nav {
  width: 16rem;
}

.Guide-border {
  border-color: rgba(var(--Guide-color), 1);
}

.Guide-foreground {
  color: rgba(var(--Guide-color), 1);
}

.Guide-teaser {
  background-color: rgba(var(--Guide-color), 1);
  clip-path: circle(18px at 100% 0%);
  transition: background 0.5s ease, clip-path 0.5s ease-in-out;
}

.Guide-teaser-icon {
  top: -1px;
  right: 1px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.Guide-teaser-contents {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition-delay: 0s;
}

.Guide-teaser:hover {
  clip-path: circle(100% at 50% 50%);
  background-color: rgba(var(--Guide-color), 1);
}
.Guide-teaser:hover .Guide-teaser-contents {
  opacity: 1;
  transition-delay: 0.3s;
}
.Guide-teaser:hover .Guide-teaser-icon {
  opacity: 0;
}

.Guide-overlay {
  background-color: rgba(var(--Guide-color), 0.75);
  animation: Guide-overlay--animate 0.6s ease-in-out;
}

.Guide-image-overlay {
  background-color: rgba(var(--Guide-color), 0.75);
  animation: Guide-overlay--animate 0.3s ease-in-out;
}

.Guide {
  animation: Guide--animate 0.45s ease-in-out;
}

.Guide-container {
  width: 800px;
}

.Guide-title {
  background-color: rgba(var(--Guide-color), 1);
}

.Guide-preview {
  transition: height 0.15s ease-in-out;
}

.Guide-preview-title {
  background-color: rgba(var(--Guide-color), 1);
}

.Guide-note {
  border-style: solid;
  border-color: var(--foreground-2);
  border-width: 2px;
  border-radius: var(--radius-4);
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.Guide-image {
  border-style: solid;
  border-color: var(--accedian-primary);
  border-width: 2px;
  border-radius: var(--radius-4);
}

@keyframes Guide-overlay--animate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes Guide--animate {
  from {
    transform: translate(-50%, -100vh);
  }
  to {
    transform: translate(-50%, -50%);
  }
}
.Guide-highlight::before {
  background-color: yellow;
  content: "";
  position: absolute;
  width: 0%;
  opacity: 60%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  transition: width 0.35s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.Guide-highlight.Guide-highlight--transition::before {
  width: 100%;
}

.Guide-container ul li::marker {
  color: var(--accedian-primary);
}

.Guide-container a {
  color: var(--foreground-default);
  text-decoration: underline;
}

.Guide-image-container {
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px !important;
  border-radius: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

.Guide-image-box {
  border-radius: var(--radius-4);
  background-color: var(--background-dropdown);
  box-shadow: var(--shadow-dialog);
  padding: var(--spacing-4);
  pointer-events: auto;
}

.Guide-indent {
  margin-left: 1rem;
}

:root {
  --color-client-dtt: #e7de48;
  --color-server-rt: #e59a41;
  --color-server-dtt: #71b44e;
}

.bg-client-dtt {
  background-color: var(--color-client-dtt);
}

.bg-server-rt {
  background-color: var(--color-server-rt);
}

.bg-server-dtt {
  background-color: var(--color-server-dtt);
}

.intercom-launcher, .intercom-launcher-frame {
  left: 10px !important;
}

a {
  text-decoration: none;
}

.Link {
  color: inherit;
  text-decoration: none;
}

.Link:hover {
  text-decoration: underline;
  color: var(--accedian-primary);
  cursor: pointer;
}

.sk-three-bounce {
  margin: 40px auto;
  width: 80px;
  text-align: center;
}

.sk-three-bounce--embedded {
  margin: 0;
  width: auto;
}

.sk-three-bounce .sk-child {
  width: 20px;
  height: 20px;
  background-color: var(--foreground-3);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
  animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce--f-1 {
  line-height: var(--f-1);
}

.sk-three-bounce--f-1 .sk-child {
  width: var(--f-1);
  height: var(--f-1);
}

.sk-three-bounce--f-2 {
  line-height: var(--f-2);
}

.sk-three-bounce--f-2 .sk-child {
  width: var(--f-2);
  height: var(--f-2);
}

.sk-three-bounce .sk-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.sk-three-bounce .sk-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-three-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-three-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.LoadingBar > div {
  transition: width 1s ease;
}

.LoadingSlider {
  position: relative;
  overflow: hidden;
  top: initial;
  left: initial;
  height: 3px;
  width: 100%;
  z-index: var(--z-3);
}

.LoadingSlider > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background-color: var(--accedian-primary);
}

.LoadingSlider--error > span {
  background-color: var(--error);
}

.MapMask {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.MapBackground {
  background-color: var(--background-dropdown);
}

.Map-Search {
  width: 16rem;
  height: 37px;
}

.Map-Sidebar {
  width: 308px;
  height: 100%;
}

.Map-Sidebar-Table {
  width: 300px;
  height: calc(100% - 53px - var(--spacing-2));
  margin: 53px 0 var(--spacing-2) var(--spacing-2);
}

.Map-Sidebar-Table .Widget-Table .Table-cell {
  height: 3rem;
}

.Map-Routing-Search {
  width: 334px;
  height: 37px;
}

.Map-Routing-Sidebar {
  width: 358px;
  height: 100%;
}

.Map-Routing-Sidebar-Table {
  width: 350px;
  height: calc(100% - 94px - var(--spacing-2));
  margin: 94px 0 var(--spacing-2) var(--spacing-2);
}

.Map-Routing-Sidebar-Table .Widget-Table .Table-cell {
  height: 3rem;
}

.Map-RoutingDetails {
  height: 384px;
}

.Map-RoutingDetails-instance {
  max-width: 768px;
}

.WidgetGeoMap .mapboxgl-ctrl-bottom-right {
  display: none;
}

#modal-wormhole {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-5);
  pointer-events: none;
}

.Modal-Overlay {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-5);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Modal-Overlay--translucent {
  background-color: rgba(128, 128, 128, 0.77);
}

.Modal {
  position: fixed;
  z-index: calc(var(--z-5) + 1);
  box-shadow: var(--shadow-dialog);
  border-radius: var(--radius-4);
  padding: var(--spacing-4);
  background-color: var(--background-dropdown);
  cursor: default;
}

.ember-modal-dialog {
  border-radius: var(--radius-4);
  background-color: var(--background-dropdown);
  box-shadow: var(--shadow-dialog);
  padding: var(--spacing-4);
}

.ember-modal-overlay.translucent {
  background-color: rgba(128, 128, 128, 0.77);
}

.ember-modal-dialog {
  z-index: calc(var(--z-5) + 1);
  position: fixed;
}

.ember-modal-dialog.emd-in-place {
  position: static;
}

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center .ember-modal-dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center.preserved-stacking-context .ember-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center.preserved-stacking-context .ember-modal-dialog {
  transform: unset;
}

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center .ember-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember-modal-wrapper.emd-animatable .ember-modal-dialog {
  position: relative;
}

.ember-modal-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-5);
}

.Confirmation-Dialog {
  width: 480px;
  min-height: 192px;
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--background-dropdown);
  box-shadow: var(--shadow-dialog);
  padding-top: var(--spacing-4);
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

.PopoverArrow {
  display: none;
}

.PopoverTooltip {
  padding: var(--spacing-1) var(--spacing-2);
  background-color: var(--background-theme);
  color: var(--foreground-default);
  z-index: calc(var(--z-5) + 2);
}

.PopoverTooltip--paddingless.ember-popover {
  padding: 0;
  background-color: var(--background-theme);
  color: var(--foreground-default);
  z-index: calc(var(--z-5) + 2);
}

.Search--multiTerm.emberTagInput {
  padding: 2px 0px 2px var(--spacing-1);
  border-radius: var(--radius-default);
  border-color: transparent;
  background: var(--foreground-1);
}

.Search--multiTerm .emberTagInput-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-default);
  background: var(--foreground-1);
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--foreground-default);
}

.Search--multiTerm .emberTagInput-remove {
  margin-left: var(--spacing-1);
}

.Search--multiTerm .emberTagInput-input {
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: transparent;
  color: var(--foreground-default);
}

.x-toggle-component label.SessionList-pinnedObjects-label.off-label {
  padding: 0 0 0 0.5rem;
}

.EcmpComparisonTable table {
  border-collapse: collapse;
}

.EcmpComparisonTable .is-selected,
.EcmpComparisonTable .is-even.is-selected {
  border: 2px solid var(--purple);
  border-left: 5px solid var(--purple);
}

.SegmentDetailsModal {
  position: absolute;
  top: calc(var(--app-header-height) + var(--spacing-4));
  left: 10%;
  right: 10%;
  bottom: 0;
}

.ember-power-select-dropdown * {
  box-sizing: border-box;
}

.ember-power-select-trigger {
  position: relative;
  /* border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  border-radius: 4px; */
  overflow-x: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  /* Minimum clearfix for modern browsers */
  outline: none;
  border: var(--bw-default) solid var(--background-input);
  border-bottom: var(--bw-default) solid var(--foreground-border);
  border-radius: var(--radius-default);
  padding-left: var(--spacing-2);
  background-color: var(--background-input);
  color: var(--foreground-strong);
  /* Slightly larger than the default line height */
  line-height: var(--lh-3);
  font-size: var(--f-default);
  /* Transition properties */
  transition: border-color 0.3s;
  min-height: 32px !important;
  padding: 2px 8px;
}
.ember-power-select-trigger:focus .ember-power-select-clear-btn, .ember-power-select-trigger:hover .ember-power-select-clear-btn {
  visibility: visible;
}

.ember-power-select-trigger::after {
  content: "";
  display: table;
  clear: both;
}

.ember-power-select-trigger:focus {
  /* TODO: need to use theme primary color instead of --accedian-primary */
  border: var(--bw-default) solid var(--accedian-primary);
  border-bottom: 1px solid var(--accedian-primary);
  outline: none;
}

.ember-power-select-trigger--active {
  /* border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa; */
  /* border: none; */
  /* border-bottom: 1px solid #aaaaaa; */
  /* TODO: need to use theme primary color instead of --accedian-primary */
  border: var(--bw-default) solid var(--accedian-primary);
  border-bottom: 1px solid var(--accedian-primary);
  box-shadow: none;
}

.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded=true] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded=true] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ember-power-select-placeholder {
  color: #999999;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ember-power-select-status-icon {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 7px 4px 0;
  border-color: var(--foreground-4) transparent transparent;
}

.ember-basic-dropdown-trigger[aria-expanded=true] .ember-power-select-status-icon {
  transform: rotate(180deg);
}

.ember-power-select-clear-btn {
  position: absolute;
  cursor: pointer;
}

.ember-power-select-trigger-multiple-input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  display: inline-block;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  float: left;
  background-color: transparent;
  text-indent: 2px;
  /* There's a browser bug where this selectos cannot be chained with commas */
}

.ember-power-select-trigger-multiple-input:disabled {
  background-color: #eeeeee;
}

.ember-power-select-trigger-multiple-input::placeholder {
  opacity: 1;
  color: #999999;
}

.ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
  opacity: 1;
  color: #999999;
}

.ember-power-select-trigger-multiple-input::-moz-placeholder {
  opacity: 1;
  color: #999999;
}

.ember-power-select-trigger-multiple-input::-ms-input-placeholder {
  opacity: 1;
  color: #999999;
}

.ember-power-select-multiple-options {
  padding: 0;
  margin: 0;
}

.ember-power-select-multiple-option {
  border-radius: 3px;
  color: var(--foreground-7);
  background-color: var(--background-dropdown);
  padding: 3px 6px;
  display: inline-block;
  font-size: var(--f-2);
  direction: rtl;
  line-height: var(--lh-2);
  margin: 2px 0;
}
.ember-power-select-multiple-option:hover .ember-power-select-multiple-remove-btn {
  visibility: visible;
}

.ember-power-select-multiple-remove-btn {
  background: var(--background-dropdown);
  color: var(--foreground-default);
  position: absolute;
  cursor: pointer;
  font-size: var(--f-5);
  padding-left: 3px;
}

.ember-power-select-multiple-remove-btn::before {
  content: "";
  background: linear-gradient(to right, transparent, var(--background-dropdown));
  width: var(--spacing-4);
  position: fixed;
  height: var(--lh-2);
  margin-right: var(--spacing-4);
}

.ember-power-select-multiple-remove-btn:not(:hover) {
  visibility: hidden;
}

.ember-power-select-multiple-trigger .ember-power-select-multiple-options {
  margin-right: var(--w-1);
}

.ember-power-select-search {
  background-color: var(--background-input);
  padding: 4px;
}

.ember-power-select-search-input {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  padding: 0 5px;
  color: var(--foreground-default);
  background-color: var(--background-input);
}

.ember-power-select-search-input:focus {
  border: 1px solid var(--accedian-primary);
  box-shadow: none;
}

.ember-power-select-dropdown {
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  line-height: 1.75;
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  color: inherit;
}

.ember-power-select-dropdown.ember-basic-dropdown-content {
  z-index: calc(var(--z-5) + 2);
}

.ember-power-select-dropdown.ember-basic-dropdown-content--above {
  border-top: 1px solid #aaaaaa;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below,
.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  border-top: none;
  border-bottom: 1px solid #aaaaaa;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  width: 100%;
}

.ember-power-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

.ember-power-select-options[role=listbox] {
  overflow-y: auto;
  /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
  -webkit-overflow-scrolling: touch;
  max-height: 12.25em;
}

.ember-power-select-option {
  color: var(--foreground-default);
  cursor: pointer;
  padding: 0 8px;
}

.ember-power-select-group[aria-disabled=true] {
  color: #999999;
  cursor: not-allowed;
}

.ember-power-select-group[aria-disabled=true] .ember-power-select-option,
.ember-power-select-option[aria-disabled=true] {
  color: #999999;
  pointer-events: none;
  cursor: not-allowed;
}

.ember-power-select-option[aria-selected=true] {
  color: var(--accedian-primary);
  background-color: var(--background-dropdown);
}

.ember-power-select-option[aria-current=true] {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.ember-power-select-option[aria-current=true].ember-power-select-option[aria-selected=false] {
  color: var(--foreground-default);
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.ember-power-select-group-name {
  cursor: default;
  font-family: inherit;
  color: var(--foreground-6);
  font-size: var(--f-2);
  font-weight: var(--fw-bold);
}

.ember-power-select-trigger[aria-disabled=true] {
  background-color: var(--background-input);
  opacity: var(--o-disabled);
}

.ember-power-select-trigger {
  /* padding: 0 16px 0 0; */
}

.ember-power-select-selected-item,
.ember-power-select-placeholder {
  margin-left: inherit;
}

.ember-power-select-status-icon {
  right: 8px;
}

.ember-power-select-clear-btn {
  color: var(--foreground-default);
  position: absolute;
  cursor: pointer;
  font-size: var(--f-5);
  right: 20px;
  visibility: hidden;
}

.ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-left: 24px;
}

.ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-left: 40px;
}

.ember-power-select-group .ember-power-select-option {
  padding-left: 24px;
}

.ember-power-select-group .ember-power-select-group-name {
  padding-left: 8px;
}

.ember-power-select-trigger[dir=rtl] {
  padding: 0 0 0 16px;
}

.ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item,
.ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder {
  margin-right: 8px;
}

.ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option {
  float: right;
}

.ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input {
  float: right;
}

.ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon {
  left: 5px;
  right: initial;
}

.ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn {
  left: 25px;
  right: initial;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-right: 24px;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-right: 40px;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option {
  padding-right: 24px;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name {
  padding-right: 8px;
}

.ember-power-select-option {
  font-size: 0.85rem;
}

.Overview-sidebar {
  margin-top: var(--h-5);
  width: 25.25rem;
  margin-right: 0.75rem;
}

.Overview-sidebarspace {
  width: calc(25.25rem + 0.75rem);
}

.Performance-sidebar {
  width: 31rem;
}

.Performance-metric-cell {
  height: 1.75rem;
}

.Performance-metric-cell > div {
  height: 100%;
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.Metadata-item:hover .Metadata-control {
  opacity: 1;
}

.Metadata-control {
  width: 20px;
  height: 20px;
  opacity: 0;
}

.Topology-reorder-handle {
  width: 1.875rem;
  height: 1rem;
  padding: 0.333rem;
}

.Sidebar-collapse-right, .Sidebar-collapse-left {
  position: absolute;
  top: 50%;
  z-index: var(--z-3);
  padding: 0;
  display: flex;
  align-items: center;
  width: 1.5rem;
  height: 2.25rem;
  border-style: solid;
  border-width: var(--bw-1);
  border-color: var(--foreground-border);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  background-color: var(--background-dropdown);
  border-radius: var(--radius-3);
}

.Sidebar-collapse-right {
  left: 0%;
  transform: translate(calc(-50% - 2px), -50%);
}

.Sidebar-collapse-left {
  right: 0%;
  transform: translate(calc(50% + 2px), -50%);
}

.Sidebar-rounded {
  border-radius: var(--radius-4) 0px 0px var(--radius-4);
}

.Sidebar-title {
  margin: var(--spacing-default) 0 0 0;
  font-size: var(--f-3);
  font-weight: var(--fw-bold);
  color: var(--foreground-default);
}

.Sidebar-collapse--icon {
  transition-duration: 0.2s;
}

.Sidebar-collapse--icon:hover {
  fill: var(--accedian-primary);
}

.ember-power-select-trigger.Sort-trigger {
  padding: var(--spacing-2);
  border: none;
  border-bottom: 0;
  font-size: var(--f-2);
  font-weight: var(--fw-bold);
  color: var(--foreground-default);
  cursor: pointer;
}

.ember-power-select-trigger.Sort-trigger:focus {
  border-bottom: 0;
}

.ember-power-select-trigger.Sort-trigger:hover,
.ember-power-select-trigger.ember-basic-dropdown-trigger--below.Sort-trigger {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
  border-color: var(--accedian-primary);
}

.Sort-trigger .ember-power-select-selected-item {
  margin: 0;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below.Sort-dropdown {
  margin-top: var(--spacing-1);
  border: 0;
  border-radius: var(--radius-default);
  background-color: var(--background-dropdown);
  box-shadow: var(--shadow-dropdown);
}

.Sort-dropdown .ember-power-select-option[aria-current=true] {
  color: var(--foreground-default);
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.Sort-dropdown .ember-power-select-option[aria-selected=true] {
  background-color: rgba(0, 0, 0, 0);
}

.Sort-dropdown .ember-power-select-option[aria-current=true]:not([aria-selected=true]) {
  color: var(--foreground-default);
}

.Sort-dropdown .ember-power-select-options li:first-of-type .Sort-option {
  padding-top: var(--spacing-1);
}

.Sort-dropdown .ember-power-select-options li:last-of-type .Sort-option {
  padding-bottom: var(--spacing-1);
}

.Sort-dropdown .Sort-option {
  display: inline-block;
  min-width: var(--w-5);
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--f-2);
}

.Sort-dropdown .Sort-option--selected {
  color: var(--accedian-primary);
}

.SortableGroup {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  background-color: var(--background-dropdown);
}

.SortableGroup__Item {
  cursor: grab;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--background-dropdown);
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  border-bottom: 1px solid var(--foreground-border);
}
.SortableGroup__Item:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.SortableGroup.SortableGroup--with-border-highlight .SortableGroup__Item {
  border-left: var(--bw-3) solid transparent;
}
.SortableGroup.SortableGroup--with-border-highlight .SortableGroup__Item:hover {
  border-left-color: var(--accedian-primary);
}

.SortableGroup__Item--no-background-highlight:hover {
  background-color: var(--background-dropdown);
}

.SortableGroup__Item--no-background-highlight.is-dragging {
  background-color: var(--background-dropdown);
}

.SortableGroup__Item--nopadding {
  padding: 0;
}

.SortableGroup__Item__icon {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}

.split, .gutter.gutter-horizontal {
  float: left;
}

.gutter {
  background-color: var(--black-border);
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-horizontal {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
  cursor: col-resize;
}

.gutter.gutter-vertical {
  cursor: row-resize;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
}

.gutter-vertical--collapsed {
  max-height: 1px;
}

/* == spacing: margin (m), padding (p) =============================================== */
/*      all:        ma-[0..7 | default (4) | n1..7 | auto], pa-[0..7 | default (4)]
/*      vertical:   mv-[0..7 | default (4) | n1..7 | auto], pv-[0..7 | default (4)]
/*      horizontal: mh-[0..7 | default (4) | n1..7 | auto], ph-[0..7 | default (4)]
/*      top:        mt-[0..7 | default (4) | n1..7 | auto], pt-[0..7 | default (4)]
/*      right:      mr-[0..7 | default (4) | n1..7 | auto], pr-[0..7 | default (4)]
/*      bottom:     mb-[0..7 | default (4) | n1..7 | auto], pb-[0..7 | default (4)]
/*      left:       ml-[0..7 | default (4) | n1..7 | auto], pl-[0..7 | default (4)]
/* =================================================================================== */
.ma-default {
  margin: var(--spacing-default);
}

.mv-default {
  margin-top: var(--spacing-default);
  margin-bottom: var(--spacing-default);
}

.mh-default {
  margin-right: var(--spacing-default);
  margin-left: var(--spacing-default);
}

.mt-default {
  margin-top: var(--spacing-default);
}

.mr-default {
  margin-right: var(--spacing-default);
}

.mb-default {
  margin-bottom: var(--spacing-default);
}

.ml-default {
  margin-left: var(--spacing-default);
}

.pa-default {
  padding: var(--spacing-default);
}

.pv-default {
  padding-top: var(--spacing-default);
  padding-bottom: var(--spacing-default);
}

.ph-default {
  padding-right: var(--spacing-default);
  padding-left: var(--spacing-default);
}

.pt-default {
  padding-top: var(--spacing-default);
}

.pr-default {
  padding-right: var(--spacing-default);
}

.pb-default {
  padding-bottom: var(--spacing-default);
}

.pl-default {
  padding-left: var(--spacing-default);
}

.ma-0 {
  margin: var(--spacing-0);
}

.mv-0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
}

.mh-0 {
  margin-right: var(--spacing-0);
  margin-left: var(--spacing-0);
}

.mt-0 {
  margin-top: var(--spacing-0);
}

.mr-0 {
  margin-right: var(--spacing-0);
}

.mb-0 {
  margin-bottom: var(--spacing-0);
}

.ml-0 {
  margin-left: var(--spacing-0);
}

.pa-0 {
  padding: var(--spacing-0);
}

.pv-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

.ph-0 {
  padding-right: var(--spacing-0);
  padding-left: var(--spacing-0);
}

.pt-0 {
  padding-top: var(--spacing-0);
}

.pr-0 {
  padding-right: var(--spacing-0);
}

.pb-0 {
  padding-bottom: var(--spacing-0);
}

.pl-0 {
  padding-left: var(--spacing-0);
}

.ma-1 {
  margin: var(--spacing-1);
}

.mv-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

.mh-1 {
  margin-right: var(--spacing-1);
  margin-left: var(--spacing-1);
}

.mt-1 {
  margin-top: var(--spacing-1);
}

.mr-1 {
  margin-right: var(--spacing-1);
}

.mb-1 {
  margin-bottom: var(--spacing-1);
}

.ml-1 {
  margin-left: var(--spacing-1);
}

.pa-1 {
  padding: var(--spacing-1);
}

.pv-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.ph-1 {
  padding-right: var(--spacing-1);
  padding-left: var(--spacing-1);
}

.pt-1 {
  padding-top: var(--spacing-1);
}

.pt-1\.5 {
  padding-top: var(--spacing-1\.5);
}

.pr-1 {
  padding-right: var(--spacing-1);
}

.pb-1 {
  padding-bottom: var(--spacing-1);
}

.pb-1\.5 {
  padding-bottom: var(--spacing-1\.5);
}

.pl-1 {
  padding-left: var(--spacing-1);
}

.pv-1\.5 {
  padding-top: var(--spacing-1\.5);
  padding-bottom: var(--spacing-1\.5);
}

.ma-2 {
  margin: var(--spacing-2);
}

.mv-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.mh-2 {
  margin-right: var(--spacing-2);
  margin-left: var(--spacing-2);
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mr-2 {
  margin-right: var(--spacing-2);
}

.mb-2 {
  margin-bottom: var(--spacing-2);
}

.ml-2 {
  margin-left: var(--spacing-2);
}

.pa-2 {
  padding: var(--spacing-2);
}

.pv-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.ph-2 {
  padding-right: var(--spacing-2);
  padding-left: var(--spacing-2);
}

.pt-2 {
  padding-top: var(--spacing-2);
}

.pr-2 {
  padding-right: var(--spacing-2);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

.pl-2 {
  padding-left: var(--spacing-2);
}

.ma-3 {
  margin: var(--spacing-3);
}

.mv-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.mh-3 {
  margin-right: var(--spacing-3);
  margin-left: var(--spacing-3);
}

.mt-3 {
  margin-top: var(--spacing-3);
}

.mr-3 {
  margin-right: var(--spacing-3);
}

.mb-3 {
  margin-bottom: var(--spacing-3);
}

.ml-3 {
  margin-left: var(--spacing-3);
}

.pa-3 {
  padding: var(--spacing-3);
}

.pv-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

.ph-3 {
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
}

.pt-3 {
  padding-top: var(--spacing-3);
}

.pr-3 {
  padding-right: var(--spacing-3);
}

.pb-3 {
  padding-bottom: var(--spacing-3);
}

.pl-3 {
  padding-left: var(--spacing-3);
}

.ma-4 {
  margin: var(--spacing-4);
}

.mv-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.mh-4 {
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-4);
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.mr-4 {
  margin-right: var(--spacing-4);
}

.mb-4 {
  margin-bottom: var(--spacing-4);
}

.ml-4 {
  margin-left: var(--spacing-4);
}

.pa-4 {
  padding: var(--spacing-4);
}

.pv-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.ph-4 {
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4);
}

.pt-4 {
  padding-top: var(--spacing-4);
}

.pr-4 {
  padding-right: var(--spacing-4);
}

.pb-4 {
  padding-bottom: var(--spacing-4);
}

.pl-4 {
  padding-left: var(--spacing-4);
}

.ma-5 {
  margin: var(--spacing-5);
}

.mv-5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.mh-5 {
  margin-right: var(--spacing-5);
  margin-left: var(--spacing-5);
}

.mt-5 {
  margin-top: var(--spacing-5);
}

.mr-5 {
  margin-right: var(--spacing-5);
}

.mb-5 {
  margin-bottom: var(--spacing-5);
}

.ml-5 {
  margin-left: var(--spacing-5);
}

.pa-5 {
  padding: var(--spacing-5);
}

.pv-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

.ph-5 {
  padding-right: var(--spacing-5);
  padding-left: var(--spacing-5);
}

.pt-5 {
  padding-top: var(--spacing-5);
}

.pr-5 {
  padding-right: var(--spacing-5);
}

.pb-5 {
  padding-bottom: var(--spacing-5);
}

.pl-5 {
  padding-left: var(--spacing-5);
}

.ma-6 {
  margin: var(--spacing-6);
}

.mv-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.mh-6 {
  margin-right: var(--spacing-6);
  margin-left: var(--spacing-6);
}

.mt-6 {
  margin-top: var(--spacing-6);
}

.mr-6 {
  margin-right: var(--spacing-6);
}

.mb-6 {
  margin-bottom: var(--spacing-6);
}

.ml-6 {
  margin-left: var(--spacing-6);
}

.pa-6 {
  padding: var(--spacing-6);
}

.pv-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

.ph-6 {
  padding-right: var(--spacing-6);
  padding-left: var(--spacing-6);
}

.pt-6 {
  padding-top: var(--spacing-6);
}

.pr-6 {
  padding-right: var(--spacing-6);
}

.pb-6 {
  padding-bottom: var(--spacing-6);
}

.pl-6 {
  padding-left: var(--spacing-6);
}

.ma-7 {
  margin: var(--spacing-7);
}

.mv-7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}

.mh-7 {
  margin-right: var(--spacing-7);
  margin-left: var(--spacing-7);
}

.mt-7 {
  margin-top: var(--spacing-7);
}

.mr-7 {
  margin-right: var(--spacing-7);
}

.mb-7 {
  margin-bottom: var(--spacing-7);
}

.ml-7 {
  margin-left: var(--spacing-7);
}

.pa-7 {
  padding: var(--spacing-7);
}

.pv-7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}

.ph-7 {
  padding-right: var(--spacing-7);
  padding-left: var(--spacing-7);
}

.pt-7 {
  padding-top: var(--spacing-7);
}

.pr-7 {
  padding-right: var(--spacing-7);
}

.pb-7, .Pagination-Table > .ember-table-overflow {
  padding-bottom: var(--spacing-7);
}

.pl-7 {
  padding-left: var(--spacing-7);
}

.ml-8 {
  margin-left: var(--spacing-8);
}

.mr-8 {
  margin-right: var(--spacing-8);
}

.mt-1px {
  margin-top: 1px;
}

.ml-1px {
  margin-left: 1px;
}

.ml-2px {
  margin-left: 2px;
}

.mr-2px {
  margin-right: 2px;
}

.mt-auto {
  margin-top: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.mh-auto {
  margin-left: auto;
  margin-right: auto;
}

.offset-scrollbar-y {
  margin-right: var(--scrollbar-thickness);
}

.Widget-Table th.is-sortable {
  transition: background-color 0.3s;
  background-color: var(--background-dropdown);
}

.Widget-Table th {
  background-color: var(--background-dropdown);
  border-bottom: 1px solid var(--foreground-default);
}

.Widget-Table .et-toggle-select {
  display: none;
}

.Widget-Table .et-sort-indicator {
  font-size: var(--f-4);
}

.Widget-Table.et-toggle-select-active .et-toggle-select {
  display: block;
}

.Widget-Table tbody > .occluded-content {
  width: 0;
}

.Widget-Table .Table-cell {
  height: 30px;
}

.Table-cell:hover .drilldown-button {
  visibility: visible;
}

.Table-row {
  transition: background-color 0.3s;
}

.Table-row--alt {
  background-color: rgba(var(--foreground-color-rgb), 0.05);
}

.Table-row--alt.row-disabled {
  background-color: rgba(var(--foreground-color-rgb), 0.03);
}

.Table-row.row-disabled .et-toggle-select input[type=checkbox]::before {
  cursor: default;
  background-color: var(--black-0);
}

.Table-row.row-enabled {
  color: var(--foreground-7);
}

.Table-row.row-disabled {
  color: var(--foreground-disabled);
}

.Table-row.is-selectable:not(.row-disabled):hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.15);
  cursor: pointer;
}

.Table-row.is-selectable .is-first-column,
.Table-row.is-selected .is-first-column {
  border-left: 4px solid transparent;
  transition: border-color 0.3s;
}

.Table-row > td:nth-of-type(n + 2) {
  border-left: 1px solid var(--foreground-border);
}

.Table-row > td:nth-of-type(n + 2).borderless {
  border: none;
}

.Table-row > td:nth-of-type(n + 2).borderless-left {
  border-left: none;
}

.Table-row.border-bottom > td,
.Table-row.border-bottom > td:nth-of-type(n + 2) {
  border-left: none;
  border-bottom: 1px solid var(--foreground-border);
}

.Table-row.is-selectable:not(.row-disabled):hover .is-first-column {
  border-left-color: rgba(var(--accedian-primary-rgb), 0.3);
}

.Table-row.is-selected .is-first-column,
.Table-row.is-selected:hover .is-first-column {
  border-left-color: var(--accedian-primary);
}

.Table-row.is-selected {
  background-color: rgba(var(--accedian-primary-rgb), 0.25);
}

.Table-row--selection-multiple .is-first-column .et-cell-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 0.5rem;
}
.Table-row--selection-multiple .is-first-column .et-cell-container .et-cell-content {
  max-width: 100%;
}

.checkbox-increased-selection-area .is-first-column label {
  width: 40px;
  height: 48px;
  justify-content: center;
}

.Table-row--selection-multiple .is-first-column input[type=checkbox]:before {
  position: relative;
  display: block;
  top: 2px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--foreground-border);
  content: "";
  background: var(--background-dropdown);
  cursor: pointer;
  border-radius: var(--radius-default);
  visibility: visible;
}

.Table-row--selection-multiple.is-selected .is-first-column input[type=checkbox]:after {
  position: relative;
  display: block;
  top: -13px;
  left: 1px;
  width: 14px;
  height: 14px;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="14px" height="14px" viewBox="0 0 20 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" stroke="rgb(151,151,151)" stroke-width="3" points="1.40795004 6.76075159 7.57251792 12.9253195 18.9979088 1.49992855"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  visibility: visible;
}

.Table-row--with-children-collapsible .et-toggle-collapse input[type=checkbox] {
  opacity: 0.001;
  position: absolute;
}

.Table-row--with-children-collapsible .et-toggle-collapse input[type=checkbox] + * {
  display: block;
  width: 100%;
}

.Table-row--with-children-collapsible .et-toggle-collapse input[type=checkbox] + :before,
.Table-row--with-children-collapsible .et-toggle-collapse:empty:before {
  display: inline-block;
  width: 12px;
  height: 12px;
  text-align: center;
  content: " ";
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="12px" height="12px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="12px" height="12px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></svg>');
  background-color: var(--foreground-default);
  pointer-events: none;
  transform: rotate(90deg);
}

.Table-row--with-children-collapsible .et-toggle-collapse input[type=checkbox]:checked + :before,
.Table-row--with-children-collapsible .et-toggle-collapse:checked:before {
  content: " ";
  transform: rotate(0deg);
}

.Table-row--with-children-collapsible .is-first-column .et-cell-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 1.5rem;
}

.Table-row--with-children-collapsible .is-first-column .et-cell-container .et-toggle-collapse input[type=checkbox]:before {
  position: relative;
  display: block;
  top: 2px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--foreground-border);
  content: "";
  background: var(--background-dropdown);
  cursor: pointer;
  border-radius: var(--radius-default);
  visibility: visible;
}

.Table-row--with-children-collapsible .is-first-column .et-cell-container .et-toggle-collapse input[type=checkbox]:after {
  position: relative;
  display: block;
  top: -13px;
  left: 1px;
  width: 14px;
  height: 14px;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="14px" height="14px" viewBox="0 0 20 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" stroke="rgb(151,151,151)" stroke-width="3" points="1.40795004 6.76075159 7.57251792 12.9253195 18.9979088 1.49992855"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  visibility: visible;
}

input[type=checkbox] {
  -moz-appearance: none;
  height: 17px !important;
  width: 17px !important;
  visibility: hidden;
}

.Alerts-Overview .Table-row.is-selectable .is-first-column.is-fixed-left {
  padding: 0;
  background: var(--background-theme);
}

.Alerts-Overview .Table-row.is-selectable .is-first-column.is-fixed-left .et-cell-container {
  transition: background-color 0.3s;
}

.Alerts-Overview .Table-row.is-selectable:hover .is-first-column.is-fixed-left .et-cell-container {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.Alerts-Overview .Table-row.is-selected .is-first-column.is-fixed-left .et-cell-container {
  background-color: rgba(var(--accedian-primary-rgb), 0.2);
}

.Alerts-Overview.et-toggle-select-active .et-cell-container {
  padding-left: 5px;
}

.Table--custom-toggle-collapse .et-toggle-collapse.et-depth-indent {
  display: none;
}

.Table-cell--condensed__block {
  margin-left: 2px;
  height: 1.5rem;
}

.et-sort-indicator:before {
  display: inline-block;
  border: none;
  line-height: 1;
  transform: rotate(180deg);
  content: "▾";
}

.et-sort-indicator.is-ascending:before {
  transform: rotate(0deg);
}

.et-tr th {
  top: 0 !important;
  background-color: var(--background-theme);
}

.et-tr th.borderless {
  background-color: var(--background-dropdown);
}

.et-tr th:after,
.et-tr th:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}

.et-tr th:before {
  top: 0px;
  border-top: 1px solid var(--background-theme);
}

.et-tr th:after {
  bottom: -1px;
  border-bottom: 1px solid var(--foreground-border);
}

.et-tr.borderless th:before {
  border: none;
  content: none;
}

.et-tr.borderless th:after {
  border: none;
  content: none;
}

.Table-options-bar {
  position: absolute;
  margin: -35px;
  height: var(--h-1);
}

.CellPopoverTooltip.ember-popover {
  z-index: var(--z-5);
  color: var(--foreground-default);
  background-color: var(--background-theme);
}

.Table-overflow-height-inherit > .ember-table-overflow {
  height: inherit;
}

.TabLinks {
  position: relative;
  z-index: var(--z-default);
  font-size: var(--f-3);
  font-weight: var(--fw-bold);
}

.TabLinks::after {
  content: "";
  position: absolute;
  /* Draw the border at the midpoint of the follower, taking into account the border width */
  bottom: calc(var(--bw-3) / 2 - var(--bw-default));
  z-index: -1;
  width: 100%;
  border-bottom: var(--bw-default) solid var(--foreground-border);
}

.TabLinks-borderless::after {
  display: none;
}

.TabLinks-list {
  display: flex;
  margin: 0;
  padding: 0;
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);
  /* The follower is position absolute */
  position: relative;
  white-space: nowrap;
}

.TabLinks-top-follower .TabLinks-list {
  padding-bottom: 0;
  padding-top: var(--spacing-3);
}

.TabLinks-follower-nopadding .TabLinks-list {
  padding-bottom: 0;
  padding-top: 0;
}

.TabLinks-link {
  display: inline-block;
  cursor: pointer;
  color: var(--foreground-5);
}

/* @sglanzer - breaks specificity conventions, but I can't think of a reasonable alternative */
.TabLinks-link.active {
  color: var(--foreground-7);
  font-weight: var(--fw-bold);
}

/* @sglanzer - breaks specificity conventions, but I can't think of a reasonable alternative */
/* .TabLinks-link + .TabLinks-link {
  margin-left: var(--spacing-6);
} */
.TabLinks-follower {
  display: inline-block;
  height: var(--bw-3);
  background-color: var(--accedian-primary);
  mask-image: url('data:image/svg+xml;utf8,<svg width="32px" height="4px" viewBox="0 0 32 4" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0 3.98962V4H30.3898L32 0H1.60944L0 3.98962Z" fill="rgb(255,255,255)"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="32px" height="4px" viewBox="0 0 32 4" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0 3.98962V4H30.3898L32 0H1.60944L0 3.98962Z" fill="rgb(255,255,255)"/></svg>');
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  /* Programmatic positioning properties */
  position: absolute;
  bottom: 0;
  left: 0;
  /* Transition properties */
  transition: transform 150ms ease-in, width 150ms ease-in;
}

.TabLinks-top-follower .TabLinks-follower {
  bottom: auto;
  top: 0;
}

/* @sglanzer - positional calculation for buttons that "float" on top of the tab divider line */
.TabLinks-actions {
  position: absolute;
  z-index: var(--z-2);
  top: 0;
  right: 0;
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.TabLinks-actions--liquid {
  top: calc((var(--spacing-3) * 2 + var(--lh-2)) * -1 / 2 - var(--spacing-1));
}

.TabLinks-liquidActions {
  display: flex;
  flex-direction: row;
  width: calc(var(--w-3) + var(--spacing-1) * 2 + var(--spacing-default));
  margin-right: var(--spacing-default);
  padding: var(--spacing-1);
}

input[type=time]::-webkit-calendar-picker-indicator {
  display: none;
}

.time-conditions__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  --interval-selectror-sidebar-width: 2em;
  --interval-selectror-header-height: 2em;
}

.time-conditions__grid {
  background-color: var(--background-alt);
  width: 100%;
}

.time-conditions__grid .grid-stack-item-content {
  background: rgba(var(--accedian-primary-rgb), 0.4);
  opacity: 0.4;
  border-radius: 4px;
}

.time-conditions-legend__head {
  display: flex;
  padding-left: var(--interval-selectror-sidebar-width);
  justify-content: stretch;
  border-bottom: 1px solid var(--foreground-3);
  color: var(--foreground-4);
  font-weight: 500;
  align-items: center;
}

.time-conditions-legend__day {
  text-transform: uppercase;
  text-align: center;
  height: var(--interval-selectror-header-height);
  line-height: var(--interval-selectror-header-height);
  flex: 1 1 0;
}

.time-conditions-legend__day + .time-conditions-legend__day::before {
  content: "";
  display: block;
  position: absolute;
  top: var(--interval-selectror-header-height);
  bottom: 0;
  border-left: 1px solid var(--foreground-default);
  z-index: 1;
  margin-left: -1px;
  opacity: 0.2;
}

.time-conditions-legend__hour {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  height: 11px;
}

.time-conditions-legend__hour:not(:last-of-type):before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--foreground-default);
  z-index: 1;
  opacity: 0.2;
}

.time-conditions-legend__side {
  width: var(--interval-selectror-sidebar-width);
  display: flex;
  color: var(--foreground-4);
  flex-direction: column;
  justify-content: stretch;
}

.time-conditions__content {
  display: flex;
  flex-grow: 1;
}

.time-conditions__selected-interval .grid-stack-item-content {
  border: 2px solid var(--accedian-primary);
}

.time-conditions-list .ember-power-select-selected-item .time-condition-remove {
  display: none;
}

.Timeseries-Unit {
  width: 80px;
  height: 24px;
}

.Widget-Timeseries-Legend--singleRow {
  height: 1rem;
}

.Widget-Timeseries-Legend--multiRow {
  height: 2rem;
}

.Widget-Timeseries-LegendSwatch {
  border-color: var(--foreground-disabled);
  border-left: 0.375rem solid;
  border-radius: 0.25rem;
}

.Widget-Timeseries-LegendSwatch-Checkbox-Container {
  background-color: rgb(127, 127, 127);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.125rem;
}

.Widget-Timeseries-LegendSwatch-Checkbox {
  width: 0.625rem;
  height: 0.625rem;
}

.Widget-Timeseries-VerticalLegendMetric {
  overflow: hidden;
  text-overflow: ellipsis;
}

.Widget-Timeseries-LegendEntityCount {
  width: 2.5rem;
}

.Widget-Timeseries-LegendCategoricalKey {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Widget-Timeseries-LegendCategoricalValue {
  overflow: hidden;
  text-overflow: ellipsis;
}

.Widget-Timeseries-LegendBinLabel {
  max-width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Widget-Timeseries-LegendCategoricalSubValue {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Widget-Timeseries-Legend--width-medium {
  width: 16rem;
}

.Widget-Timeseries-Legend--width-large {
  width: 24rem;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.6rem;
}

.toggle input {
  display: none;
}

.Toggle--extraSmall .toggle {
  width: 2.1rem;
  height: 1.15rem;
}

.Toggle--small .toggle {
  width: 2.55rem;
  height: 1.4rem;
}

.toggle-button {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: var(--foreground-1);
  display: block;
  transition: all 0.3s;
  border-radius: 1.6rem;
  cursor: pointer;
}

.Toggle--extraSmall .toggle-button:before {
  height: 0.65rem;
  width: 0.65rem;
  padding: 2px;
  top: 0.1rem;
  left: 0.15rem;
}

.Toggle--small .toggle-button:before {
  height: 0.9rem;
  width: 0.9rem;
  padding: 2px;
  top: 0.1rem;
  left: 0.15rem;
}

.toggle-button:before {
  position: absolute;
  content: "";
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 100%;
  display: block;
  left: 0.25rem;
  bottom: 0.2rem;
  background-color: white;
  transition: all 0.3s;
}

input:checked + .toggle-button {
  background-color: var(--accedian-primary);
}

input:checked:disabled + .toggle-button {
  background-color: var(--accedian-primary-lighter);
}

.Toggle--extraSmall input:checked + .toggle-button:before {
  transform: translate(0.9rem, 0);
}

.Toggle--small input:checked + .toggle-button:before {
  transform: translate(1.1rem, 0);
}

input:checked + .toggle-button:before {
  transform: translate(1.3rem, 0);
}

:root {
  --microtip-font-size: 11px;
}

[aria-label][role~=tooltip]::after {
  background-color: #3a3c47;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ember-tooltip {
  max-width: none !important;
  z-index: var(--z-6) !important;
}

.max-width-400 {
  max-width: 400px !important;
}

.pin {
  width: 32px;
  height: 32px;
  background: var(--category-4-default);
  border-radius: 50% 50% 0px 50%;
  position: relative;
  transform: rotate(45deg);
}

.pin.pin-small {
  width: 20px;
  height: 20px;
}

.pin.pin-tiny {
  width: 14px;
  height: 14px;
}

.pin-hole.pin::after {
  content: "";
  width: 15px;
  height: 15px;
  background: white;
  position: absolute;
  left: 25%;
  top: 25%;
  border-radius: 50%;
}

.pin-hole.pin.pin-small::after {
  width: 9px;
  height: 9px;
}

.pin-hole.pin.pin-tiny::after {
  width: 6px;
  height: 6px;
}

.diamond {
  width: 24px;
  height: 24px;
  background: #666364;
  border-radius: 2px;
  transform: rotate(45deg);
}

.diamond.diamond-small {
  width: 18px;
  height: 18px;
}

.diamond.diamond-tiny {
  width: 14px;
  height: 14px;
}

.path-item-text-container {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: var(--w-2);
}

.shepherd-element {
  background: var(--background-dropdown);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-dropdown);
  max-width: var(--w-5\.5);
  opacity: 0;
  outline: none;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden;
  width: 100%;
  z-index: var(--z-6);
  margin-left: 11px !important;
}

.shepherd-header {
  align-items: center;
  border-top-left-radius: var(--radius-3);
  border-top-right-radius: var(--radius-3);
  display: flex;
  justify-content: flex-end;
  line-height: var(--lh-4);
}

.shepherd-has-title .shepherd-content .shepherd-header {
  background: var(--background-dropdown);
  margin: var(--spacing-4) var(--spacing-2) 0 var(--spacing-2);
  padding: 0 var(--spacing-2) var(--spacing-4) var(--spacing-2);
  border-bottom: 1px solid var(--foreground-border);
}

.shepherd-title {
  color: var(--foreground-default);
  display: flex;
  flex: 1 0 auto;
  font-size: var(--f-4);
  margin: 0;
  padding: 0;
  width: 100%;
}

.shepherd-text {
  color: var(--foreground-default);
  font-size: var(--f-2);
  line-height: var(--lh-2);
  padding: var(--spacing-4);
}

.traceroute-slot-a {
  color: #534588;
}

.traceroute-slot-b {
  color: #3488D1;
}

.bg-traceroute-slot-a {
  background-color: #534588;
}

.bg-traceroute-slot-b {
  background-color: #3488D1;
}

.bg-traceroute-slot-a-10\% {
  background-color: rgba(83, 69, 136, 0.1);
}

.bg-traceroute-slot-b-10\% {
  background-color: rgba(52, 136, 209, 0.1);
}

.b-traceroute-slot-a {
  border-color: #534588;
}

.b-traceroute-slot-b {
  border-color: #3488D1;
}

.Traceroute__slot-frame-a {
  box-sizing: border-box;
  border: 1px solid #534588;
  background-color: rgba(83, 69, 136, 0.1);
}
.Traceroute__slot-frame-b {
  box-sizing: border-box;
  border: 1px solid #3488D1;
  background-color: rgba(52, 136, 209, 0.1);
}

.TracerouteChart {
  --row-height: 2.5rem;
  --branch-width: 2rem;
  --box-width: 2rem;
  --box-height: 1rem;
  --box-color-top: default;
  --box-color-bottom: default;
}
.TracerouteChart td {
  padding: 0;
}
.TracerouteChart__header {
  position: relative !important;
  z-index: 4 !important;
}
.TracerouteChart__cell {
  position: relative;
  height: var(--row-height);
}
.TracerouteChart__box {
  inset: 0;
  position: absolute;
  z-index: 2;
  margin: auto;
  width: var(--box-width);
  height: var(--box-height);
  background: linear-gradient(180deg, var(--box-color-top) 0%, var(--box-color-bottom) 100%);
  border-radius: 0.125rem;
  box-shadow: var(--shadow-1);
}
.TracerouteChart__box--disabled {
  opacity: 1;
}
.TracerouteChart__box-left {
  inset: 0 calc(50% + 1px) 0 auto;
  position: absolute;
  z-index: 2;
  margin: auto;
  width: var(--box-width);
  height: var(--box-height);
  background: linear-gradient(180deg, var(--box-color-top) 0%, var(--box-color-bottom) 100%);
  border-radius: 0.125rem;
  box-shadow: var(--shadow-1);
}
.TracerouteChart__box-left--disabled {
  opacity: 1;
}
.TracerouteChart__box-left--branch {
  inset: 0 calc(50% + var(--branch-width)) 0 auto;
}
.TracerouteChart__box-right {
  inset: 0 auto 0 calc(50% + 1px);
  position: absolute;
  z-index: 2;
  margin: auto;
  width: var(--box-width);
  height: var(--box-height);
  background: linear-gradient(180deg, var(--box-color-top) 0%, var(--box-color-bottom) 100%);
  border-radius: 0.125rem;
  box-shadow: var(--shadow-1);
}
.TracerouteChart__box-right--disabled {
  opacity: 1;
}
.TracerouteChart__box-right--branch {
  inset: 0 auto 0 calc(50% + var(--branch-width));
}
.TracerouteChart .TracerouteChart__box--minor {
  width: 1rem !important;
}
.TracerouteChart .TracerouteChart__box-right--branch.TracerouteChart__box--minor {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.TracerouteChart .TracerouteChart__box-left--branch.TracerouteChart__box--minor {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.TracerouteChart .TracerouteChart__box-left.TracerouteChart__box--minor {
  margin-left: 0.5rem;
}
.TracerouteChart .TracerouteChart__box-right.TracerouteChart__box--minor {
  margin-right: 0.5rem;
}
.TracerouteChart .TracerouteChart__box-left.TracerouteChart__box--minor.TracerouteChart__box--disabled {
  margin-right: 0.5rem;
}
.TracerouteChart .TracerouteChart__box-right.TracerouteChart__box--minor.TracerouteChart__box--disabled {
  margin-right: 0.5rem;
}
.TracerouteChart__connection {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.TracerouteChart__marker-start {
  position: absolute;
  z-index: 3;
  width: 0.625rem;
  height: 0.625rem;
  inset: 0;
  margin: auto;
  box-sizing: content-box;
  border-radius: 50%;
  border: 2px solid var(--background-theme);
  transform: translateY(calc(-1 * var(--box-height) / 2));
  background-color: #088884;
}
.TracerouteChart__marker-end {
  position: absolute;
  z-index: 3;
  width: 0.625rem;
  height: 0.625rem;
  inset: 0;
  margin: auto;
  box-sizing: content-box;
  border-radius: 50%;
  border: 2px solid var(--background-theme);
  transform: translateY(calc(var(--box-height) / 2));
  background-color: #B56CC4;
}

.TracerouteList__row {
  border: 1px solid transparent;
  border-radius: 2px;
}
.TracerouteList__row--slot-a {
  border-color: #534588;
}
.TracerouteList__row--slot-b {
  border-color: #3488D1;
}

.Toast-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  right: 24px;
  z-index: 9999;
  gap: 8px;
}

.Notification-center-container {
  display: flex;
  flex-direction: column;
}

.Toast {
  --border-color: transparent;
  display: flex;
  align-items: flex-start;
  width: 464px;
  font: inherit;
  background-color: var(--background-dropdown);
  border: 1px solid transparent;
  border-radius: 6px;
}
.Toast .banner, .Toast .platform-health-card {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px 16px 12px;
  border-left: 6px solid var(--toast-border-color);
  border-radius: 6px;
  box-shadow: 0 3px 8px var(--foreground-2);
}
.Toast .banner .status-Icon, .Toast .platform-health-card .status-Icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  fill: var(--toast-border-color);
}
.Toast .banner .status-Icon > svg, .Toast .platform-health-card .status-Icon > svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  fill: var(--toast-border-color);
}
.Toast .banner .content, .Toast .platform-health-card .content {
  flex: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
}
.Toast .banner .text-ellipsis, .Toast .platform-health-card .text-ellipsis {
  overflow: hidden;
  padding-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Toast .banner .info-toast, .Toast .platform-health-card .info-toast, .Toast .banner.info-toast, .Toast .info-toast.platform-health-card {
  --toast-border-color: var(--low-warning-icon-default);
}
.Toast .banner .success-toast, .Toast .platform-health-card .success-toast, .Toast .banner.success-toast, .Toast .success-toast.platform-health-card {
  --toast-border-color: var(--excellent-icon-default);
}
.Toast .banner .warning-toast, .Toast .platform-health-card .warning-toast, .Toast .banner.warning-toast, .Toast .warning-toast.platform-health-card {
  --toast-border-color: var(--warning-icon-strong-default);
}
.Toast .banner .error-toast, .Toast .platform-health-card .error-toast, .Toast .banner.error-toast, .Toast .error-toast.platform-health-card {
  --toast-border-color: var(--negative-icon-default);
}
.Toast .platform-health-card {
  flex-direction: column;
  gap: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

.WidgetText-editor {
  height: 200px;
  border-bottom: 1px solid var(--foreground-border);
}

.ql-tooltip {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}

.MagneticTabLinks {
  position: relative;
  z-index: var(--z-default);
  font-size: var(--f-3);
  font-weight: var(--fw-bold);
}

.MagneticTabLinks-list {
  display: flex;
  margin: 0;
  padding: 0;
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);
  white-space: nowrap;
}

.MagneticTabLinks-link {
  display: inline-block;
  cursor: pointer;
  color: var(--foreground-5);
  border: 3px solid transparent;
  border-radius: 2px;
  padding-bottom: 4px;
}

.MagneticTabLinks-link.active {
  color: var(--foreground-7);
  font-weight: var(--fw-bold);
  border-bottom: 3px solid var(--brand-accent);
  border-radius: 2px;
}

.CardMagnetic {
  min-width: 208px;
  color: var(--accedian-primary);
  border: 2px solid var(--border-color);
  box-shadow: var(--box-shadow-color);
  flex: 0 0 calc(33% - 11px);
}

.CardHeaderCaption {
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--header-primary-color);
}

.CardSubHeaderCaption {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--sub-header-caption-color);
}

.CardDescriptionCaption {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--description-caption-color);
}

.cardAccentExcellent {
  min-height: 8px;
  background-color: var(--accent-excellent-color);
}

.cardAccentPositive {
  min-height: 8px;
  background-color: var(--accent-positive-color);
}

.cardAccentLowWarning {
  min-height: 8px;
  background-color: var(--accent-low-warning-color);
}

.cardAccentWarning {
  min-height: 8px;
  background-color: var(--accent-warning-color);
}

.cardAccentSevereWarning {
  min-height: 8px;
  background-color: var(--accent-severe-warning-color);
}

.cardAccentNegative {
  min-height: 8px;
  background-color: var(--accent-negative-color);
}

.cardContainerMainHeader {
  min-height: 24px;
  color: var(--foreground-7);
  font-weight: var(--fw-bold);
}

.BreadcrumbMagnetic {
  display: flex;
}

.BreadcrumbMagnetic-link {
  cursor: pointer;
  color: var(--foreground-5);
}

.TagFrame {
  --tag-frame-font-weight: 600;
  --tag-frame-font-color: var(--base-text-default);
  --tag-frame-background-color: var(--control-bg-medium-disabled);
  --tag-frame-border-radius: 14px;
  --tag-frame-border-color: transparent;
  --tag-frame-border-width: 2px;
  --tag-frame-icon-color: var(--interact-icon-weak-default);
  display: inline-flex;
  gap: 4px;
  align-items: flex-start;
  /* Important to avoid possible `mds-` override from `@magnetic/core` with more specifity */
  box-sizing: content-box !important;
  padding: var(--tag-frame-padding-vertical) var(--tag-frame-padding-horizontal);
  font-size: var(--tag-frame-font-size);
  font-weight: var(--tag-frame-font-weight);
  line-height: var(--tag-frame-line-height);
  color: var(--tag-frame-font-color);
  background-color: var(--tag-frame-background-color);
  border: var(--tag-frame-border-width) var(--tag-frame-border-color) solid;
  border-radius: var(--tag-frame-border-radius);
}
.TagFrame.TagFrame--size-lg {
  --tag-frame-font-size: 14px;
  --tag-frame-line-height: 20px;
  --tag-frame-padding-vertical: 2px;
  --tag-frame-padding-horizontal: 10px;
  --tag-frame-border-radius: 18px;
}
.TagFrame.TagFrame--size-md {
  --tag-frame-font-size: 12px;
  --tag-frame-line-height: 18px;
  --tag-frame-padding-vertical: 2px;
  --tag-frame-padding-horizontal: 10px;
}
.TagFrame.TagFrame--size-sm {
  --tag-frame-font-size: 12px;
  --tag-frame-line-height: 16px;
  --tag-frame-padding-vertical: 0;
  --tag-frame-padding-horizontal: 6px;
}
.TagFrame > .TagFrame--prefix, .TagFrame > .TagFrame--suffix {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  height: var(--tag-frame-line-height);
}
.TagFrame > .TagFrame--prefix > svg, .TagFrame > .TagFrame--suffix > svg {
  fill: var(--tag-frame-icon-color);
  flex-grow: 0;
  flex-shrink: 0;
}
.TagFrame.TagFrame--compact.TagFrame--size-lg {
  --tag-frame-padding-vertical: 2px;
  --tag-frame-padding-horizontal: 2px;
  --tag-frame-border-radius: 18px;
  padding-right: 10px;
}
.TagFrame.TagFrame--compact.TagFrame--size-lg svg {
  width: 20px;
  height: 20px;
}
.TagFrame.TagFrame--compact.TagFrame--size-md {
  --tag-frame-padding-vertical: 2px;
  --tag-frame-padding-horizontal: 2px;
  padding-right: 6px;
}
.TagFrame.TagFrame--compact.TagFrame--size-md svg {
  width: 18px;
  height: 18px;
}
.TagFrame.TagFrame--compact.TagFrame--size-sm {
  --tag-frame-padding-vertical: 0;
  --tag-frame-padding-horizontal: 2px;
  padding-right: 6px;
}
.TagFrame.TagFrame--compact.TagFrame--size-sm svg {
  width: 16px;
  height: 16px;
}
.TagFrame:has(> .TagFrame--close:hover) {
  --tag-frame-background-color: var(--base-bg-strong-disabled);
}
.TagFrame.TagFrame--wrap {
  word-break: break-word;
}
.TagFrame > .TagFrame--close {
  height: var(--tag-frame-line-height);
  padding: 0;
  background-color: transparent;
  border: 0;
}
.TagFrame > .TagFrame--close:hover {
  cursor: pointer;
}
.TagFrame > .TagFrame--close:focus-visible {
  outline: none;
  box-shadow: var(--effects-shadow-focus);
}
.TagFrame .TagFrame--label {
  text-transform: capitalize;
}

.TagFrame.StatusTag {
  --tag-frame-background-color: var(--brand-bg-active);
}
.TagFrame.StatusTag.TagFrame--size-md, .TagFrame.StatusTag.TagFrame--size-sm {
  padding-right: 6px;
}
.TagFrame.StatusTag.StatusTag--allow, .TagFrame.StatusTag.StatusTag--positive {
  --tag-frame-background-color: var(--positive-bg-medium-default);
  --tag-frame-font-color: var(--base-text-default);
  --tag-frame-icon-color: var(--positive-icon-strong-default);
}
.TagFrame.StatusTag.StatusTag--warning {
  --tag-frame-background-color: var(--warning-bg-medium-default);
  --tag-frame-font-color: var(--base-text-default);
  --tag-frame-icon-color: var(--warning-icon-strong-default);
}
.TagFrame.StatusTag.StatusTag--deny, .TagFrame.StatusTag.StatusTag--negative {
  --tag-frame-background-color: var(--negative-bg-medium-default);
  --tag-frame-font-color: var(--base-text-default);
  --tag-frame-icon-color: var(--negative-icon-default);
}

.GridCell {
  width: 28px;
  height: 28px;
}

.NotificationIcon > svg {
  fill: var(--notification-icon-color);
}
.NotificationIcon.NotificationIcon--positive {
  --notification-icon-color: var(--positive-icon-strong-default);
}
.NotificationIcon.NotificationIcon--warning {
  --notification-icon-color: var(--warning-icon-strong-default);
}
.NotificationIcon.NotificationIcon--negative {
  --notification-icon-color: var(--negative-icon-default);
}

.Popover {
  --popover-background-color: var(--control-bg-weak-default);
  --popover-border-color-outer: var(--popover-background-color);
  --popover-border-color-inner: var(--popover-background-color);
  --popover-border-radius: 6px;
  --popover-font-color: var(--base-text-medium-default);
  --popover-font-size: 12px;
  --popover-font-weight: 400;
  --popover-line-height: 18px;
  --popover-max-width-lg: 360px;
  --popover-max-width-md: 280px;
  --popover-max-width-sm: 200px;
  --popover-border-width-outer: 0px;
  --popover-border-width-inner: 0px;
  --popover-padding-horizontal: 16px;
  --popover-padding-vertical: 12px;
  box-sizing: border-box;
  max-width: var(--popover-max-width);
  padding: calc(var(--popover-padding-vertical) + max(var(--popover-border-width-outer), var(--popover-border-width-inner))) calc(var(--popover-padding-horizontal) + max(var(--popover-border-width-outer), var(--popover-border-width-inner)));
  font-size: var(--popover-font-size);
  font-weight: var(--popover-font-weight);
  font-style: normal;
  line-height: var(--popover-line-height);
  color: var(--popover-font-color);
  background-color: var(--popover-background-color);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
  border-radius: var(--popover-border-radius);
  box-shadow: 0 0 0 var(--popover-border-width-outer) var(--popover-border-color-outer) inset, 0 0 0 var(--popover-border-width-inner) var(--popover-border-color-inner) inset;
}
.Popover > div[x-arrow] {
  background-color: var(--popover-border-color-outer);
  border: none;
}
.Popover.Popover-size-sm {
  --popover-max-width: var(--popover-max-width-sm);
}
.Popover.Popover-size-md {
  --popover-max-width: var(--popover-max-width-md);
}
.Popover.Popover-size-lg {
  --popover-max-width: var(--popover-max-width-lg);
}
.Popover .Popover-divider {
  margin-right: calc(-1 * (var(--popover-padding-horizontal) - min(var(--popover-border-width-outer), var(--popover-border-width-inner))));
  margin-left: calc(-1 * (var(--popover-padding-horizontal) - min(var(--popover-border-width-outer), var(--popover-border-width-inner))));
}

.SidebarHeader {
  display: sticky;
  top: 0;
  z-index: 5;
}

.SidebarHeaderCaption {
  min-width: 284px;
}

.SidebarHeaderClose-container {
  width: auto;
}

.Sidebar-body {
  width: calc(100% - 1rem);
}

.FooterMagnetic {
  border-top: 2px solid var(--border-color);
}

.PlatformHealth-sidebar {
  width: 25rem;
}

.Login-Email--animation {
  animation: fadein 0.35s linear 0.1s;
}

.Login-Password--animation {
  animation: fadein 0.55s linear 0.1s;
}

.Login-Submit--animation {
  animation: fadein 0.75s linear 0.1s;
}

.Login-submit .sk-three-bounce {
  margin: 0;
}

.Login-submitLabel {
  margin-right: 0;
  transition: margin-right 0.6s;
}

.Login-submit:hover {
  opacity: 0.9;
}

.LoginPage-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
}

.LoginPage-bg-fade-in {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black-default);
  animation: fadeout 1.25s;
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.LoginPage-tenantLogo {
  object-fit: contain;
  width: 30rem;
  height: 6rem;
}

@keyframes slidetop {
  0% {
    top: 37%;
    opacity: 0;
  }
  50% {
    top: 37%;
    opacity: 0;
  }
  51% {
    top: 37%;
    opacity: 1;
  }
  100% {
    top: 40%;
    opacity: 1;
  }
}
.LoginPage-link {
  box-shadow: 0 1px 4px var(--black-2);
}

.LoginPage-link:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.AlertsTableActions-wrapper,
.GroupedAlertsTableActions-wrapper {
  display: flex;
  flex-direction: row;
}

.AlertsTableActions-dropdown,
.GroupedAlertsTableActions-dropdown {
  display: none;
}

@media screen and (max-width: 1400px) {
  .GroupedAlertsTableActions-wrapper {
    display: none;
  }
  .GroupedAlertsTableActions-dropdown {
    display: block;
  }
}
@media screen and (max-width: 1250px) {
  .AlertsTableActions-wrapper {
    display: none;
  }
  .AlertsTableActions-dropdown {
    display: block;
  }
}
.AlertsSeverityWidget .LoadingSlider {
  left: 0;
}

.AlertsKillchainWidget .LoadingSlider {
  left: 0;
}

.Inventory_Assets_Index_Sidebar {
  padding-left: 0 !important;
}

.selected-zone-dialog {
  position: relative;
  box-sizing: border-box;
  width: 80rem;
  overflow: scroll;
  z-index: var(--z-3);
  background-color: var(--background-dropdown);
  box-shadow: var(--shadow-dropdown);
  border-radius: var(--radius-default);
}

.CapOrch-zones-flag {
  border-color: var(--foreground-1);
  border-radius: var(--radius-3);
  vertical-align: baseline;
}

.CapOrch-zones-flag-table {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.CapOrch-zones-flag-selected {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.CapOrch-zones-flag--disabled {
  opacity: 0.5;
}

.CapOrch-zones-flag-interactive--enabled {
  opacity: 1;
}

.CapOrch-zones-flag-interactive--enabled:hover {
  opacity: 0.5;
}

.CapOrch-zones-flag-interactive--disabled {
  opacity: 0.5;
}

.CapOrch-zones-flag-interactive--disabled:hover {
  opacity: 1;
}

.enable_http_deep_inspect--Twilight {
  color: #009997;
  background-color: #001414;
}

.enable_sql--Twilight {
  color: #6484E8;
  background-color: #060F2A;
}

.enable_cifs--Twilight {
  color: #8D80BF;
  background-color: #120F1D;
}

.enable_citrix--Twilight {
  color: #958B1A;
  background-color: #121103;
}

.enable_http_deep_inspect--Light {
  color: var(--white-8);
  background-color: #009997;
}

.enable_sql--Light {
  color: var(--white-8);
  background-color: #6484E8;
}

.enable_cifs--Light {
  color: var(--white-8);
  background-color: #8D80BF;
}

.enable_citrix--Light {
  color: var(--white-8);
  background-color: #958B1A;
}

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center .Direction-Aliases {
  top: auto;
  bottom: 0;
  height: 85%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* == animation ====================================================================== */
/*      width:    animate-width
/*      height:   animate-height
/* =================================================================================== */
.animate-width {
  transition: width 0.3s;
}

.animate-max-width {
  transition: max-width 0.3s;
}

.animate-width-slower {
  transition: width 0.75s;
}

.animate-max-width-slower {
  transition: max-width 0.75s;
}

.animate-height {
  transition: height 0.3s;
}

.animate-max-height {
  transition: max-height 0.3s;
}

.animate-height-slower {
  transition: height 0.75s;
}

.animate-max-height-slower {
  transition: max-height 0.75s;
}

.animate-border-color {
  transition: border-color 0.3s;
}

.animate-border-width {
  transition: border-width 0.1s;
}

.animate-border-width-slow {
  transition: border-width 0.6s;
}

.animate-opacity {
  transition: opacity 0.3s;
}

.animate-opacity--slow {
  transition: opacity 0.6s;
}

/* == background: bg ================================================================= */
/*      color:    bg-<color>
/*      size:     bg-[cover, contain]
/*      position: bg-[center, top, right, bottom, left]
/* =================================================================================== */
/* bg-<color> is in _colors.css */
.bg-cover {
  background-size: cover !important;
}

.bg-contain {
  background-size: contain !important;
}

.bg-center {
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-top {
  background-repeat: no-repeat;
  background-position: top center;
}

.bg-right {
  background-repeat: no-repeat;
  background-position: center right;
}

.bg-bottom {
  background-repeat: no-repeat;
  background-position: bottom center;
}

.bg-left {
  background-repeat: no-repeat;
  background-position: center left;
}

/* == border: b ====================================================================== */
/*      all:    ba, ba-[none]
/*      top:    bt, bt-[none]
/*      right   br, br-[none]
/*      bottom: bb, bb-[none]
/*      left:   bl, bl-[none]
/*      color:  b-<color>
/*      style:  bs-[solid, dotted, dashed]
/*      width:  bw-[1..2 | default]
/*      radius: radius-[1..4 | default, pill]
/* =================================================================================== */
.ba {
  border-style: solid;
  border-width: 1px;
}

.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

.br {
  border-right-style: solid;
  border-right-width: 1px;
}

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.bl {
  border-left-style: solid;
  border-left-width: 1px;
}

/* Horizontal border */
.bh-between + .bh-between {
  border-top-style: solid;
  border-top-width: 1px;
}

/* Used to make the border overlap with border on another element */
.bb-overlap {
  margin-bottom: -1px;
}

.ba-none {
  border-style: none;
  border-width: 0;
}

.bt-none {
  border-top-style: none;
  border-top-width: 0;
}

.br-none {
  border-right-style: none;
  border-right-width: 0;
}

.bb-none {
  border-bottom-style: none;
  border-bottom-width: 0;
}

.bl-none {
  border-left-style: none;
  border-left-width: 0;
}

.bt-none\:first-of-type:first-of-type {
  border-top-style: none;
  border-top-width: 0;
}

.bb-none\:first-of-type:first-of-type {
  border-bottom-style: none;
  border-bottom-width: 0;
}

.bt-none\:last-of-type:last-of-type {
  border-top-style: none;
  border-top-width: 0;
}

.bb-none\:last-of-type:last-of-type {
  border-bottom-style: none;
  border-bottom-width: 0;
}

.bl-none\:last-of-type:last-of-type {
  border-left-style: none;
  border-left-width: 0;
}

/* b-<color> is in _colors.css */
.bs-solid {
  border-style: solid;
}

.bs-dashed {
  border-style: dashed;
}

.bs-dotted {
  border-style: dotted;
}

.bw-default {
  border-width: var(--bw-default);
}

.bw-0 {
  border-width: var(--bw-0);
}

.bw-1 {
  border-width: var(--bw-1);
}

.bw-2 {
  border-width: var(--bw-2);
}

.bw-3 {
  border-width: var(--bw-3);
}

.radius-default {
  border-radius: var(--radius-default);
}

.radius-pill {
  border-radius: var(--radius-pill);
}

.radius-0 {
  border-radius: var(--radius-0);
}

.radius-1 {
  border-radius: var(--radius-1);
}

.radius-2 {
  border-radius: var(--radius-2);
}

.radius-3 {
  border-radius: var(--radius-3);
}

.radius-4 {
  border-radius: var(--radius-4);
}

.radius-5 {
  border-radius: var(--radius-5);
}

.radius-pill-l {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.radius-0-l {
  border-radius: var(--radius-0) 0 0 var(--radius-0);
}

.radius-1-l {
  border-radius: var(--radius-1) 0 0 var(--radius-1);
}

.radius-2-l {
  border-radius: var(--radius-2) 0 0 var(--radius-2);
}

.radius-3-l {
  border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.radius-4-l {
  border-radius: var(--radius-4) 0 0 var(--radius-4);
}

.radius-pill-r {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.radius-0-r {
  border-radius: 0 var(--radius-0) var(--radius-0) 0;
}

.radius-1-r {
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
}

.radius-2-r {
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}

.radius-3-r {
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

.radius-4-r {
  border-radius: 0 var(--radius-4) var(--radius-4) 0;
}

.radius-none {
  border-radius: 0;
}

.radius-left-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.radius-right-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radius-top-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.radius-bottom-none {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.outline-none {
  outline: none;
}

/* == box-shadow: shadow-[1..6 | raised, dropdown, popover, dialog =================== */
.shadow-raised {
  box-shadow: var(--shadow-raised);
}

.shadow-dropdown {
  box-shadow: var(--shadow-dropdown);
}

.shadow-popover {
  box-shadow: var(--shadow-popover);
}

.shadow-dialog {
  box-shadow: var(--shadow-dialog);
}

.shadow-raised\:hover:hover {
  box-shadow: var(--shadow-raised);
}

.shadow-dropdown\:hover:hover {
  box-shadow: var(--shadow-dropdown);
}

.shadow-popover\:hover:hover {
  box-shadow: var(--shadow-popover);
}

.shadow-dialog\:hover:hover {
  box-shadow: var(--shadow-dialog);
}

.shadow-1 {
  box-shadow: var(--shadow-1);
}

.shadow-2 {
  box-shadow: var(--shadow-2);
}

.shadow-3 {
  box-shadow: var(--shadow-3);
}

.shadow-4 {
  box-shadow: var(--shadow-4);
}

.shadow-5 {
  box-shadow: var(--shadow-5);
}

.shadow-6 {
  box-shadow: var(--shadow-6);
}

.shadow-1\:hover:hover {
  box-shadow: var(--shadow-1);
}

.shadow-2\:hover:hover {
  box-shadow: var(--shadow-2);
}

.shadow-3\:hover:hover {
  box-shadow: var(--shadow-3);
}

.shadow-4\:hover:hover {
  box-shadow: var(--shadow-4);
}

.shadow-5\:hover:hover {
  box-shadow: var(--shadow-5);
}

.shadow-6\:hover:hover {
  box-shadow: var(--shadow-6);
}

.shadow-1-primary {
  box-shadow: var(--shadow-1-primary);
}

.shadow-2-primary {
  box-shadow: var(--shadow-2-primary);
}

.shadow-3-primary {
  box-shadow: var(--shadow-3-primary);
}

.shadow-4-primary {
  box-shadow: var(--shadow-4-primary);
}

.shadow-5-primary {
  box-shadow: var(--shadow-5-primary);
}

.shadow-1-primary\:hover:hover {
  box-shadow: var(--shadow-1-primary);
}

.shadow-2-primary\:hover:hover {
  box-shadow: var(--shadow-2-primary);
}

.shadow-3-primary\:hover:hover {
  box-shadow: var(--shadow-3-primary);
}

.shadow-4-primary\:hover:hover {
  box-shadow: var(--shadow-4-primary);
}

.shadow-5-primary\:hover:hover {
  box-shadow: var(--shadow-5-primary);
}

.shadow-none {
  box-shadow: none;
}

.html2canvas-safe * {
  box-shadow: unset !important;
}

/* == box-sizing: [border-box | content-box] ========================================= */
.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

/* == color ============================================================== */
/*
black-border, black-subtext, black-disabled, black-lighter, black-default, black-darker, black-1, black-2, black-3, black-4, black-5, black-6, black-7;
white-default, white-foreground, white-1, white-2, white-3, white-4, white-5, white-6, white-7, white-8;
background-input;
good, critical, major, minor, warning, info, dead, danger, danger-gradient-start, danger-gradient-end, error;
category-1-lighter, category-1-default, category-1-darker, category-2-lighter, category-2-default, category-2-darker, category-3-lighter, category-3-default, category-3-darker, category-4-lighter, category-4-default, category-4-darker, category-5-lighter, category-5-default, category-5-darker, category-6-lighter, category-6-default, category-6-darker;
background-theme, background-alt, foreground-1, foreground-2, foreground-3, foreground-4, foreground-5, foreground-6, foreground-7, foreground-8;
foreground-border, foreground-subtext, foreground-disabled, foreground-weak, foreground-default, foreground-strong;
*/
.fill-currentColor {
  fill: currentColor;
}

.stroke-none {
  stroke: none;
}

.inherit {
  color: inherit;
}

.b-inherit {
  border-color: inherit;
}

.bg-inherit {
  background-color: inherit;
}

.fill-inherit {
  fill: inherit;
}

.stroke-inherit {
  stroke: inherit;
}

.transparent {
  color: transparent;
}

.b-transparent {
  border-color: transparent;
}

.bg-transparent {
  background-color: transparent;
}

.fill-transparent {
  fill: transparent;
}

.stroke-transparent {
  stroke: transparent;
}

.primary {
  color: var(--accedian-primary);
}

.primary\:hover:hover {
  color: var(--accedian-primary);
}

.b-primary {
  border-color: var(--accedian-primary);
}

.b-primary\:hover:hover {
  border-color: var(--accedian-primary);
}

.b-primary-35\%\:hover:hover {
  border-color: rgba(var(--accedian-primary-rgb), 0.35);
}

.b-primary-70\% {
  border-color: rgba(var(--accedian-primary-rgb), 0.7);
}

.b-primary-70\%\:hover:hover {
  border-color: rgba(var(--accedian-primary-rgb), 0.7);
}

.bg-primary {
  background-color: var(--accedian-primary);
}

.bg-primary\:hover:hover {
  background-color: var(--accedian-primary);
}

.bg-primary-10\% {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.bg-primary-10\%\:hover:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.1);
}

.bg-primary-20\% {
  background-color: rgba(var(--accedian-primary-rgb), 0.2);
}

.bg-primary-20\%\:hover:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.2);
}

.bg-primary-40\% {
  background-color: rgba(var(--accedian-primary-rgb), 0.4);
}

.bg-primary-40\%\:hover:hover {
  background-color: rgba(var(--accedian-primary-rgb), 0.4);
}

.fill-primary {
  fill: var(--accedian-primary);
}

.fill-primary\:hover:hover {
  fill: var(--accedian-primary);
}

.stroke-primary {
  stroke: var(--accedian-primary);
}

.stroke-primary\:hover:hover {
  stroke: var(--accedian-primary);
}

.stop-primary {
  stop-color: var(--accedian-primary);
}

.black-border {
  color: var(--black-border);
}

.b-black-border {
  border-color: var(--black-border);
}

.b-black-border\:hover:hover {
  border-color: var(--black-border);
}

.bg-black-border {
  background-color: var(--black-border);
}

.bg-black-border\:hover:hover {
  background-color: var(--black-border);
}

.fill-black-border {
  fill: var(--black-border);
}

.fill-black-border\:hover:hover {
  fill: var(--black-border);
}

.stroke-black-border {
  stroke: var(--black-border);
}

.stroke-black-border\:hover:hover {
  stroke: var(--black-border);
}

.black-subtext {
  color: var(--black-subtext);
}

.b-black-subtext {
  border-color: var(--black-subtext);
}

.b-black-subtext\:hover:hover {
  border-color: var(--black-subtext);
}

.bg-black-subtext {
  background-color: var(--black-subtext);
}

.bg-black-subtext\:hover:hover {
  background-color: var(--black-subtext);
}

.fill-black-subtext {
  fill: var(--black-subtext);
}

.fill-black-subtext\:hover:hover {
  fill: var(--black-subtext);
}

.stroke-black-subtext {
  stroke: var(--black-subtext);
}

.stroke-black-subtext\:hover:hover {
  stroke: var(--black-subtext);
}

.black-disabled {
  color: var(--black-disabled);
}

.b-black-disabled {
  border-color: var(--black-disabled);
}

.b-black-disabled\:hover:hover {
  border-color: var(--black-disabled);
}

.bg-black-disabled {
  background-color: var(--black-disabled);
}

.bg-black-disabled\:hover:hover {
  background-color: var(--black-disabled);
}

.fill-black-disabled {
  fill: var(--black-disabled);
}

.fill-black-disabled\:hover:hover {
  fill: var(--black-disabled);
}

.stroke-black-disabled {
  stroke: var(--black-disabled);
}

.stroke-black-disabled\:hover:hover {
  stroke: var(--black-disabled);
}

.black-lighter {
  color: var(--black-lighter);
}

.b-black-lighter {
  border-color: var(--black-lighter);
}

.b-black-lighter\:hover:hover {
  border-color: var(--black-lighter);
}

.bg-black-lighter {
  background-color: var(--black-lighter);
}

.bg-black-lighter\:hover:hover {
  background-color: var(--black-lighter);
}

.fill-black-lighter {
  fill: var(--black-lighter);
}

.fill-black-lighter\:hover:hover {
  fill: var(--black-lighter);
}

.stroke-black-lighter {
  stroke: var(--black-lighter);
}

.stroke-black-lighter\:hover:hover {
  stroke: var(--black-lighter);
}

.black-default {
  color: var(--black-default);
}

.b-black-default {
  border-color: var(--black-default);
}

.b-black-default\:hover:hover {
  border-color: var(--black-default);
}

.bg-black-default {
  background-color: var(--black-default);
}

.bg-black-default\:hover:hover {
  background-color: var(--black-default);
}

.fill-black-default {
  fill: var(--black-default);
}

.fill-black-default\:hover:hover {
  fill: var(--black-default);
}

.stroke-black-default {
  stroke: var(--black-default);
}

.stroke-black-default\:hover:hover {
  stroke: var(--black-default);
}

.black-darker {
  color: var(--black-darker);
}

.b-black-darker {
  border-color: var(--black-darker);
}

.b-black-darker\:hover:hover {
  border-color: var(--black-darker);
}

.bg-black-darker {
  background-color: var(--black-darker);
}

.bg-black-darker\:hover:hover {
  background-color: var(--black-darker);
}

.fill-black-darker {
  fill: var(--black-darker);
}

.fill-black-darker\:hover:hover {
  fill: var(--black-darker);
}

.stroke-black-darker {
  stroke: var(--black-darker);
}

.stroke-black-darker\:hover:hover {
  stroke: var(--black-darker);
}

.black-0 {
  color: var(--black-0);
}

.b-black-0 {
  border-color: var(--black-0);
}

.b-black-0\:hover:hover {
  border-color: var(--black-0);
}

.bg-black-0 {
  background-color: var(--black-0);
}

.bg-black-0\:hover:hover {
  background-color: var(--black-0);
}

.fill-black-0 {
  fill: var(--black-0);
}

.fill-black-0\:hover:hover {
  fill: var(--black-0);
}

.stroke-black-0 {
  stroke: var(--black-0);
}

.stroke-black-0\:hover:hover {
  stroke: var(--black-0);
}

.black-1 {
  color: var(--black-1);
}

.b-black-1 {
  border-color: var(--black-1);
}

.b-black-1\:hover:hover {
  border-color: var(--black-1);
}

.bg-black-1 {
  background-color: var(--black-1);
}

.bg-black-1\:hover:hover {
  background-color: var(--black-1);
}

.fill-black-1 {
  fill: var(--black-1);
}

.fill-black-1\:hover:hover {
  fill: var(--black-1);
}

.stroke-black-1 {
  stroke: var(--black-1);
}

.stroke-black-1\:hover:hover {
  stroke: var(--black-1);
}

.black-2 {
  color: var(--black-2);
}

.b-black-2 {
  border-color: var(--black-2);
}

.b-black-2\:hover:hover {
  border-color: var(--black-2);
}

.bg-black-2 {
  background-color: var(--black-2);
}

.bg-black-2\:hover:hover {
  background-color: var(--black-2);
}

.fill-black-2 {
  fill: var(--black-2);
}

.fill-black-2\:hover:hover {
  fill: var(--black-2);
}

.stroke-black-2 {
  stroke: var(--black-2);
}

.stroke-black-2\:hover:hover {
  stroke: var(--black-2);
}

.black-3 {
  color: var(--black-3);
}

.b-black-3 {
  border-color: var(--black-3);
}

.b-black-3\:hover:hover {
  border-color: var(--black-3);
}

.bg-black-3 {
  background-color: var(--black-3);
}

.bg-black-3\:hover:hover {
  background-color: var(--black-3);
}

.fill-black-3 {
  fill: var(--black-3);
}

.fill-black-3\:hover:hover {
  fill: var(--black-3);
}

.stroke-black-3 {
  stroke: var(--black-3);
}

.stroke-black-3\:hover:hover {
  stroke: var(--black-3);
}

.black-4 {
  color: var(--black-4);
}

.b-black-4 {
  border-color: var(--black-4);
}

.b-black-4\:hover:hover {
  border-color: var(--black-4);
}

.bg-black-4 {
  background-color: var(--black-4);
}

.bg-black-4\:hover:hover {
  background-color: var(--black-4);
}

.fill-black-4 {
  fill: var(--black-4);
}

.fill-black-4\:hover:hover {
  fill: var(--black-4);
}

.stroke-black-4 {
  stroke: var(--black-4);
}

.stroke-black-4\:hover:hover {
  stroke: var(--black-4);
}

.black-5 {
  color: var(--black-5);
}

.b-black-5 {
  border-color: var(--black-5);
}

.b-black-5\:hover:hover {
  border-color: var(--black-5);
}

.bg-black-5 {
  background-color: var(--black-5);
}

.bg-black-5\:hover:hover {
  background-color: var(--black-5);
}

.fill-black-5 {
  fill: var(--black-5);
}

.fill-black-5\:hover:hover {
  fill: var(--black-5);
}

.stroke-black-5 {
  stroke: var(--black-5);
}

.stroke-black-5\:hover:hover {
  stroke: var(--black-5);
}

.black-6 {
  color: var(--black-6);
}

.b-black-6 {
  border-color: var(--black-6);
}

.b-black-6\:hover:hover {
  border-color: var(--black-6);
}

.bg-black-6 {
  background-color: var(--black-6);
}

.bg-black-6\:hover:hover {
  background-color: var(--black-6);
}

.fill-black-6 {
  fill: var(--black-6);
}

.fill-black-6\:hover:hover {
  fill: var(--black-6);
}

.stroke-black-6 {
  stroke: var(--black-6);
}

.stroke-black-6\:hover:hover {
  stroke: var(--black-6);
}

.black-7 {
  color: var(--black-7);
}

.b-black-7 {
  border-color: var(--black-7);
}

.b-black-7\:hover:hover {
  border-color: var(--black-7);
}

.bg-black-7 {
  background-color: var(--black-7);
}

.bg-black-7\:hover:hover {
  background-color: var(--black-7);
}

.fill-black-7 {
  fill: var(--black-7);
}

.fill-black-7\:hover:hover {
  fill: var(--black-7);
}

.stroke-black-7 {
  stroke: var(--black-7);
}

.stroke-black-7\:hover:hover {
  stroke: var(--black-7);
}

.black-8 {
  color: var(--black-8);
}

.b-black-8 {
  border-color: var(--black-8);
}

.b-black-8\:hover:hover {
  border-color: var(--black-8);
}

.bg-black-8 {
  background-color: var(--black-8);
}

.bg-black-8\:hover:hover {
  background-color: var(--black-8);
}

.fill-black-8 {
  fill: var(--black-8);
}

.fill-black-8\:hover:hover {
  fill: var(--black-8);
}

.stroke-black-8 {
  stroke: var(--black-8);
}

.stroke-black-8\:hover:hover {
  stroke: var(--black-8);
}

.white-default {
  color: var(--white-default);
}

.b-white-default {
  border-color: var(--white-default);
}

.b-white-default\:hover:hover {
  border-color: var(--white-default);
}

.bg-white-default {
  background-color: var(--white-default);
}

.bg-white-default\:hover:hover {
  background-color: var(--white-default);
}

.fill-white-default {
  fill: var(--white-default);
}

.fill-white-default\:hover:hover {
  fill: var(--white-default);
}

.stroke-white-default {
  stroke: var(--white-default);
}

.stroke-white-default\:hover:hover {
  stroke: var(--white-default);
}

.white-foreground {
  color: var(--white-foreground);
}

.b-white-foreground {
  border-color: var(--white-foreground);
}

.b-white-foreground\:hover:hover {
  border-color: var(--white-foreground);
}

.bg-white-foreground {
  background-color: var(--white-foreground);
}

.bg-white-foreground\:hover:hover {
  background-color: var(--white-foreground);
}

.fill-white-foreground {
  fill: var(--white-foreground);
}

.fill-white-foreground\:hover:hover {
  fill: var(--white-foreground);
}

.stroke-white-foreground {
  stroke: var(--white-foreground);
}

.stroke-white-foreground\:hover:hover {
  stroke: var(--white-foreground);
}

.white-1 {
  color: var(--white-1);
}

.b-white-1 {
  border-color: var(--white-1);
}

.b-white-1\:hover:hover {
  border-color: var(--white-1);
}

.bg-white-1 {
  background-color: var(--white-1);
}

.bg-white-1\:hover:hover {
  background-color: var(--white-1);
}

.fill-white-1 {
  fill: var(--white-1);
}

.fill-white-1\:hover:hover {
  fill: var(--white-1);
}

.stroke-white-1 {
  stroke: var(--white-1);
}

.stroke-white-1\:hover:hover {
  stroke: var(--white-1);
}

.white-2 {
  color: var(--white-2);
}

.b-white-2 {
  border-color: var(--white-2);
}

.b-white-2\:hover:hover {
  border-color: var(--white-2);
}

.bg-white-2 {
  background-color: var(--white-2);
}

.bg-white-2\:hover:hover {
  background-color: var(--white-2);
}

.fill-white-2 {
  fill: var(--white-2);
}

.fill-white-2\:hover:hover {
  fill: var(--white-2);
}

.stroke-white-2 {
  stroke: var(--white-2);
}

.stroke-white-2\:hover:hover {
  stroke: var(--white-2);
}

.white-3 {
  color: var(--white-3);
}

.b-white-3 {
  border-color: var(--white-3);
}

.b-white-3\:hover:hover {
  border-color: var(--white-3);
}

.bg-white-3 {
  background-color: var(--white-3);
}

.bg-white-3\:hover:hover {
  background-color: var(--white-3);
}

.fill-white-3 {
  fill: var(--white-3);
}

.fill-white-3\:hover:hover {
  fill: var(--white-3);
}

.stroke-white-3 {
  stroke: var(--white-3);
}

.stroke-white-3\:hover:hover {
  stroke: var(--white-3);
}

.white-4 {
  color: var(--white-4);
}

.b-white-4 {
  border-color: var(--white-4);
}

.b-white-4\:hover:hover {
  border-color: var(--white-4);
}

.bg-white-4 {
  background-color: var(--white-4);
}

.bg-white-4\:hover:hover {
  background-color: var(--white-4);
}

.fill-white-4 {
  fill: var(--white-4);
}

.fill-white-4\:hover:hover {
  fill: var(--white-4);
}

.stroke-white-4 {
  stroke: var(--white-4);
}

.stroke-white-4\:hover:hover {
  stroke: var(--white-4);
}

.white-5 {
  color: var(--white-5);
}

.b-white-5 {
  border-color: var(--white-5);
}

.b-white-5\:hover:hover {
  border-color: var(--white-5);
}

.bg-white-5 {
  background-color: var(--white-5);
}

.bg-white-5\:hover:hover {
  background-color: var(--white-5);
}

.fill-white-5 {
  fill: var(--white-5);
}

.fill-white-5\:hover:hover {
  fill: var(--white-5);
}

.stroke-white-5 {
  stroke: var(--white-5);
}

.stroke-white-5\:hover:hover {
  stroke: var(--white-5);
}

.white-6 {
  color: var(--white-6);
}

.b-white-6 {
  border-color: var(--white-6);
}

.b-white-6\:hover:hover {
  border-color: var(--white-6);
}

.bg-white-6 {
  background-color: var(--white-6);
}

.bg-white-6\:hover:hover {
  background-color: var(--white-6);
}

.fill-white-6 {
  fill: var(--white-6);
}

.fill-white-6\:hover:hover {
  fill: var(--white-6);
}

.stroke-white-6 {
  stroke: var(--white-6);
}

.stroke-white-6\:hover:hover {
  stroke: var(--white-6);
}

.white-7 {
  color: var(--white-7);
}

.b-white-7 {
  border-color: var(--white-7);
}

.b-white-7\:hover:hover {
  border-color: var(--white-7);
}

.bg-white-7 {
  background-color: var(--white-7);
}

.bg-white-7\:hover:hover {
  background-color: var(--white-7);
}

.fill-white-7 {
  fill: var(--white-7);
}

.fill-white-7\:hover:hover {
  fill: var(--white-7);
}

.stroke-white-7 {
  stroke: var(--white-7);
}

.stroke-white-7\:hover:hover {
  stroke: var(--white-7);
}

.white-8 {
  color: var(--white-8);
}

.b-white-8 {
  border-color: var(--white-8);
}

.b-white-8\:hover:hover {
  border-color: var(--white-8);
}

.bg-white-8 {
  background-color: var(--white-8);
}

.bg-white-8\:hover:hover {
  background-color: var(--white-8);
}

.fill-white-8 {
  fill: var(--white-8);
}

.fill-white-8\:hover:hover {
  fill: var(--white-8);
}

.stroke-white-8 {
  stroke: var(--white-8);
}

.stroke-white-8\:hover:hover {
  stroke: var(--white-8);
}

.background-light {
  color: var(--background-light);
}

.b-background-light {
  border-color: var(--background-light);
}

.b-background-light\:hover:hover {
  border-color: var(--background-light);
}

.bg-background-light {
  background-color: var(--background-light);
}

.bg-background-light\:hover:hover {
  background-color: var(--background-light);
}

.fill-background-light {
  fill: var(--background-light);
}

.fill-background-light\:hover:hover {
  fill: var(--background-light);
}

.stroke-background-light {
  stroke: var(--background-light);
}

.stroke-background-light\:hover:hover {
  stroke: var(--background-light);
}

.background-light-alt {
  color: var(--background-light-alt);
}

.b-background-light-alt {
  border-color: var(--background-light-alt);
}

.b-background-light-alt\:hover:hover {
  border-color: var(--background-light-alt);
}

.bg-background-light-alt {
  background-color: var(--background-light-alt);
}

.bg-background-light-alt\:hover:hover {
  background-color: var(--background-light-alt);
}

.fill-background-light-alt {
  fill: var(--background-light-alt);
}

.fill-background-light-alt\:hover:hover {
  fill: var(--background-light-alt);
}

.stroke-background-light-alt {
  stroke: var(--background-light-alt);
}

.stroke-background-light-alt\:hover:hover {
  stroke: var(--background-light-alt);
}

.background-input {
  color: var(--background-input);
}

.b-background-input {
  border-color: var(--background-input);
}

.b-background-input\:hover:hover {
  border-color: var(--background-input);
}

.bg-background-input {
  background-color: var(--background-input);
}

.bg-background-input\:hover:hover {
  background-color: var(--background-input);
}

.fill-background-input {
  fill: var(--background-input);
}

.fill-background-input\:hover:hover {
  fill: var(--background-input);
}

.stroke-background-input {
  stroke: var(--background-input);
}

.stroke-background-input\:hover:hover {
  stroke: var(--background-input);
}

.bg-watcher {
  background-color: var(--watcher);
}

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

.b-good {
  border-color: var(--good);
}

.b-good\:hover:hover {
  border-color: var(--good);
}

.bg-good {
  background-color: var(--good);
}

.bg-good\:hover:hover {
  background-color: var(--good);
}

.fill-good {
  fill: var(--good);
}

.fill-good\:hover:hover {
  fill: var(--good);
}

.stroke-good {
  stroke: var(--good);
}

.stroke-good\:hover:hover {
  stroke: var(--good);
}

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

.b-critical {
  border-color: var(--critical);
}

.b-critical\:hover:hover {
  border-color: var(--critical);
}

.bg-critical-10\% {
  background-color: rgba(var(--critical-rgb), 0.1);
}

.bg-critical {
  background-color: var(--critical);
}

.bg-critical\:hover:hover {
  background-color: var(--critical);
}

.fill-critical {
  fill: var(--critical);
}

.fill-critical\:hover:hover {
  fill: var(--critical);
}

.stroke-critical {
  stroke: var(--critical);
}

.stroke-critical\:hover:hover {
  stroke: var(--critical);
}

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

.b-high {
  border-color: var(--high);
}

.b-high\:hover:hover {
  border-color: var(--high);
}

.bg-high {
  background-color: var(--high);
}

.bg-high\:hover:hover {
  background-color: var(--high);
}

.fill-high {
  fill: var(--high);
}

.fill-high\:hover:hover {
  fill: var(--high);
}

.stroke-high {
  stroke: var(--high);
}

.stroke-high\:hover:hover {
  stroke: var(--high);
}

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

.b-major {
  border-color: var(--major);
}

.b-major\:hover:hover {
  border-color: var(--major);
}

.bg-major {
  background-color: var(--major);
}

.bg-major\:hover:hover {
  background-color: var(--major);
}

.fill-major {
  fill: var(--major);
}

.fill-major\:hover:hover {
  fill: var(--major);
}

.stroke-major {
  stroke: var(--major);
}

.stroke-major\:hover:hover {
  stroke: var(--major);
}

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

.b-medium {
  border-color: var(--medium);
}

.b-medium\:hover:hover {
  border-color: var(--medium);
}

.bg-medium {
  background-color: var(--medium);
}

.bg-medium\:hover:hover {
  background-color: var(--medium);
}

.fill-medium {
  fill: var(--medium);
}

.fill-medium\:hover:hover {
  fill: var(--medium);
}

.stroke-medium {
  stroke: var(--medium);
}

.stroke-medium\:hover:hover {
  stroke: var(--medium);
}

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

.b-minor {
  border-color: var(--minor);
}

.b-minor\:hover:hover {
  border-color: var(--minor);
}

.bg-minor {
  background-color: var(--minor);
}

.bg-minor\:hover:hover {
  background-color: var(--minor);
}

.fill-minor {
  fill: var(--minor);
}

.fill-minor\:hover:hover {
  fill: var(--minor);
}

.stroke-minor {
  stroke: var(--minor);
}

.stroke-minor\:hover:hover {
  stroke: var(--minor);
}

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

.b-low {
  border-color: var(--low);
}

.b-low\:hover:hover {
  border-color: var(--low);
}

.bg-low {
  background-color: var(--low);
}

.bg-low\:hover:hover {
  background-color: var(--low);
}

.fill-low {
  fill: var(--low);
}

.fill-low\:hover:hover {
  fill: var(--low);
}

.stroke-low {
  stroke: var(--low);
}

.stroke-low\:hover:hover {
  stroke: var(--low);
}

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

.b-warning {
  border-color: var(--warning);
}

.b-warning\:hover:hover {
  border-color: var(--warning);
}

.bg-warning {
  background-color: var(--warning);
}

.bg-warning\:hover:hover {
  background-color: var(--warning);
}

.fill-warning {
  fill: var(--warning);
}

.fill-warning\:hover:hover {
  fill: var(--warning);
}

.stroke-warning {
  stroke: var(--warning);
}

.stroke-warning\:hover:hover {
  stroke: var(--warning);
}

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

.b-info {
  border-color: var(--info);
}

.b-info\:hover:hover {
  border-color: var(--info);
}

.bg-info {
  background-color: var(--info);
}

.bg-info\:hover:hover {
  background-color: var(--info);
}

.fill-info {
  fill: var(--info);
}

.fill-info\:hover:hover {
  fill: var(--info);
}

.stroke-info {
  stroke: var(--info);
}

.stroke-info\:hover:hover {
  stroke: var(--info);
}

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

.b-dead {
  border-color: var(--dead);
}

.b-dead\:hover:hover {
  border-color: var(--dead);
}

.bg-dead {
  background-color: var(--dead);
}

.bg-dead\:hover:hover {
  background-color: var(--dead);
}

.fill-dead {
  fill: var(--dead);
}

.fill-dead\:hover:hover {
  fill: var(--dead);
}

.stroke-dead {
  stroke: var(--dead);
}

.stroke-dead\:hover:hover {
  stroke: var(--dead);
}

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

.b-danger {
  border-color: var(--danger);
}

.b-danger\:hover:hover {
  border-color: var(--danger);
}

.bg-danger {
  background-color: var(--danger);
}

.bg-danger\:hover:hover {
  background-color: var(--danger);
}

.fill-danger {
  fill: var(--danger);
}

.fill-danger\:hover:hover {
  fill: var(--danger);
}

.stroke-danger {
  stroke: var(--danger);
}

.stroke-danger\:hover:hover {
  stroke: var(--danger);
}

.danger-gradient-start {
  color: var(--danger-gradient-start);
}

.b-danger-gradient-start {
  border-color: var(--danger-gradient-start);
}

.b-danger-gradient-start\:hover:hover {
  border-color: var(--danger-gradient-start);
}

.bg-danger-gradient-start {
  background-color: var(--danger-gradient-start);
}

.bg-danger-gradient-start\:hover:hover {
  background-color: var(--danger-gradient-start);
}

.fill-danger-gradient-start {
  fill: var(--danger-gradient-start);
}

.fill-danger-gradient-start\:hover:hover {
  fill: var(--danger-gradient-start);
}

.stroke-danger-gradient-start {
  stroke: var(--danger-gradient-start);
}

.stroke-danger-gradient-start\:hover:hover {
  stroke: var(--danger-gradient-start);
}

.danger-gradient-end {
  color: var(--danger-gradient-end);
}

.b-danger-gradient-end {
  border-color: var(--danger-gradient-end);
}

.b-danger-gradient-end\:hover:hover {
  border-color: var(--danger-gradient-end);
}

.bg-danger-gradient-end {
  background-color: var(--danger-gradient-end);
}

.bg-danger-gradient-end\:hover:hover {
  background-color: var(--danger-gradient-end);
}

.fill-danger-gradient-end {
  fill: var(--danger-gradient-end);
}

.fill-danger-gradient-end\:hover:hover {
  fill: var(--danger-gradient-end);
}

.stroke-danger-gradient-end {
  stroke: var(--danger-gradient-end);
}

.stroke-danger-gradient-end\:hover:hover {
  stroke: var(--danger-gradient-end);
}

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

.b-error {
  border-color: var(--error);
}

.b-error\:hover:hover {
  border-color: var(--error);
}

.bg-error {
  background-color: var(--error);
}

.bg-error\:hover:hover {
  background-color: var(--error);
}

.fill-error {
  fill: var(--error);
}

.fill-error\:hover:hover {
  fill: var(--error);
}

.stroke-error {
  stroke: var(--error);
}

.stroke-error\:hover:hover {
  stroke: var(--error);
}

.category-1-lighter {
  color: var(--category-1-lighter);
}

.b-category-1-lighter {
  border-color: var(--category-1-lighter);
}

.b-category-1-lighter\:hover:hover {
  border-color: var(--category-1-lighter);
}

.bg-category-1-lighter {
  background-color: var(--category-1-lighter);
}

.bg-category-1-lighter\:hover:hover {
  background-color: var(--category-1-lighter);
}

.fill-category-1-lighter {
  fill: var(--category-1-lighter);
}

.fill-category-1-lighter\:hover:hover {
  fill: var(--category-1-lighter);
}

.stroke-category-1-lighter {
  stroke: var(--category-1-lighter);
}

.stroke-category-1-lighter\:hover:hover {
  stroke: var(--category-1-lighter);
}

.category-1-default {
  color: var(--category-1-default);
}

.b-category-1-default {
  border-color: var(--category-1-default);
}

.b-category-1-default\:hover:hover {
  border-color: var(--category-1-default);
}

.bg-category-1-default {
  background-color: var(--category-1-default);
}

.bg-category-1-default\:hover:hover {
  background-color: var(--category-1-default);
}

.fill-category-1-default {
  fill: var(--category-1-default);
}

.fill-category-1-default\:hover:hover {
  fill: var(--category-1-default);
}

.stroke-category-1-default {
  stroke: var(--category-1-default);
}

.stroke-category-1-default\:hover:hover {
  stroke: var(--category-1-default);
}

.category-1-darker {
  color: var(--category-1-darker);
}

.b-category-1-darker {
  border-color: var(--category-1-darker);
}

.b-category-1-darker\:hover:hover {
  border-color: var(--category-1-darker);
}

.bg-category-1-darker {
  background-color: var(--category-1-darker);
}

.bg-category-1-darker\:hover:hover {
  background-color: var(--category-1-darker);
}

.fill-category-1-darker {
  fill: var(--category-1-darker);
}

.fill-category-1-darker\:hover:hover {
  fill: var(--category-1-darker);
}

.stroke-category-1-darker {
  stroke: var(--category-1-darker);
}

.stroke-category-1-darker\:hover:hover {
  stroke: var(--category-1-darker);
}

.category-2-lighter {
  color: var(--category-2-lighter);
}

.b-category-2-lighter {
  border-color: var(--category-2-lighter);
}

.b-category-2-lighter\:hover:hover {
  border-color: var(--category-2-lighter);
}

.bg-category-2-lighter {
  background-color: var(--category-2-lighter);
}

.bg-category-2-lighter\:hover:hover {
  background-color: var(--category-2-lighter);
}

.fill-category-2-lighter {
  fill: var(--category-2-lighter);
}

.fill-category-2-lighter\:hover:hover {
  fill: var(--category-2-lighter);
}

.stroke-category-2-lighter {
  stroke: var(--category-2-lighter);
}

.stroke-category-2-lighter\:hover:hover {
  stroke: var(--category-2-lighter);
}

.category-2-default {
  color: var(--category-2-default);
}

.b-category-2-default {
  border-color: var(--category-2-default);
}

.b-category-2-default\:hover:hover {
  border-color: var(--category-2-default);
}

.bg-category-2-default {
  background-color: var(--category-2-default);
}

.bg-category-2-default\:hover:hover {
  background-color: var(--category-2-default);
}

.fill-category-2-default {
  fill: var(--category-2-default);
}

.fill-category-2-default\:hover:hover {
  fill: var(--category-2-default);
}

.stroke-category-2-default {
  stroke: var(--category-2-default);
}

.stroke-category-2-default\:hover:hover {
  stroke: var(--category-2-default);
}

.category-2-darker {
  color: var(--category-2-darker);
}

.b-category-2-darker {
  border-color: var(--category-2-darker);
}

.b-category-2-darker\:hover:hover {
  border-color: var(--category-2-darker);
}

.bg-category-2-darker {
  background-color: var(--category-2-darker);
}

.bg-category-2-darker\:hover:hover {
  background-color: var(--category-2-darker);
}

.fill-category-2-darker {
  fill: var(--category-2-darker);
}

.fill-category-2-darker\:hover:hover {
  fill: var(--category-2-darker);
}

.stroke-category-2-darker {
  stroke: var(--category-2-darker);
}

.stroke-category-2-darker\:hover:hover {
  stroke: var(--category-2-darker);
}

.category-3-lighter {
  color: var(--category-3-lighter);
}

.b-category-3-lighter {
  border-color: var(--category-3-lighter);
}

.b-category-3-lighter\:hover:hover {
  border-color: var(--category-3-lighter);
}

.bg-category-3-lighter {
  background-color: var(--category-3-lighter);
}

.bg-category-3-lighter\:hover:hover {
  background-color: var(--category-3-lighter);
}

.fill-category-3-lighter {
  fill: var(--category-3-lighter);
}

.fill-category-3-lighter\:hover:hover {
  fill: var(--category-3-lighter);
}

.stroke-category-3-lighter {
  stroke: var(--category-3-lighter);
}

.stroke-category-3-lighter\:hover:hover {
  stroke: var(--category-3-lighter);
}

.category-3-default {
  color: var(--category-3-default);
}

.b-category-3-default {
  border-color: var(--category-3-default);
}

.b-category-3-default\:hover:hover {
  border-color: var(--category-3-default);
}

.bg-category-3-default {
  background-color: var(--category-3-default);
}

.bg-category-3-default\:hover:hover {
  background-color: var(--category-3-default);
}

.fill-category-3-default {
  fill: var(--category-3-default);
}

.fill-category-3-default\:hover:hover {
  fill: var(--category-3-default);
}

.stroke-category-3-default {
  stroke: var(--category-3-default);
}

.stroke-category-3-default\:hover:hover {
  stroke: var(--category-3-default);
}

.category-3-darker {
  color: var(--category-3-darker);
}

.b-category-3-darker {
  border-color: var(--category-3-darker);
}

.b-category-3-darker\:hover:hover {
  border-color: var(--category-3-darker);
}

.bg-category-3-darker {
  background-color: var(--category-3-darker);
}

.bg-category-3-darker\:hover:hover {
  background-color: var(--category-3-darker);
}

.fill-category-3-darker {
  fill: var(--category-3-darker);
}

.fill-category-3-darker\:hover:hover {
  fill: var(--category-3-darker);
}

.stroke-category-3-darker {
  stroke: var(--category-3-darker);
}

.stroke-category-3-darker\:hover:hover {
  stroke: var(--category-3-darker);
}

.category-4-lighter {
  color: var(--category-4-lighter);
}

.b-category-4-lighter {
  border-color: var(--category-4-lighter);
}

.b-category-4-lighter\:hover:hover {
  border-color: var(--category-4-lighter);
}

.bg-category-4-lighter {
  background-color: var(--category-4-lighter);
}

.bg-category-4-lighter\:hover:hover {
  background-color: var(--category-4-lighter);
}

.fill-category-4-lighter {
  fill: var(--category-4-lighter);
}

.fill-category-4-lighter\:hover:hover {
  fill: var(--category-4-lighter);
}

.stroke-category-4-lighter {
  stroke: var(--category-4-lighter);
}

.stroke-category-4-lighter\:hover:hover {
  stroke: var(--category-4-lighter);
}

.category-4-default {
  color: var(--category-4-default);
}

.b-category-4-default {
  border-color: var(--category-4-default);
}

.b-category-4-default\:hover:hover {
  border-color: var(--category-4-default);
}

.bg-category-4-default {
  background-color: var(--category-4-default);
}

.bg-category-4-default\:hover:hover {
  background-color: var(--category-4-default);
}

.fill-category-4-default {
  fill: var(--category-4-default);
}

.fill-category-4-default\:hover:hover {
  fill: var(--category-4-default);
}

.stroke-category-4-default {
  stroke: var(--category-4-default);
}

.stroke-category-4-default\:hover:hover {
  stroke: var(--category-4-default);
}

.category-4-darker {
  color: var(--category-4-darker);
}

.b-category-4-darker {
  border-color: var(--category-4-darker);
}

.b-category-4-darker\:hover:hover {
  border-color: var(--category-4-darker);
}

.bg-category-4-darker {
  background-color: var(--category-4-darker);
}

.bg-category-4-darker\:hover:hover {
  background-color: var(--category-4-darker);
}

.fill-category-4-darker {
  fill: var(--category-4-darker);
}

.fill-category-4-darker\:hover:hover {
  fill: var(--category-4-darker);
}

.stroke-category-4-darker {
  stroke: var(--category-4-darker);
}

.stroke-category-4-darker\:hover:hover {
  stroke: var(--category-4-darker);
}

.category-5-lighter {
  color: var(--category-5-lighter);
}

.b-category-5-lighter {
  border-color: var(--category-5-lighter);
}

.b-category-5-lighter\:hover:hover {
  border-color: var(--category-5-lighter);
}

.bg-category-5-lighter {
  background-color: var(--category-5-lighter);
}

.bg-category-5-lighter\:hover:hover {
  background-color: var(--category-5-lighter);
}

.fill-category-5-lighter {
  fill: var(--category-5-lighter);
}

.fill-category-5-lighter\:hover:hover {
  fill: var(--category-5-lighter);
}

.stroke-category-5-lighter {
  stroke: var(--category-5-lighter);
}

.stroke-category-5-lighter\:hover:hover {
  stroke: var(--category-5-lighter);
}

.category-5-default {
  color: var(--category-5-default);
}

.b-category-5-default {
  border-color: var(--category-5-default);
}

.b-category-5-default\:hover:hover {
  border-color: var(--category-5-default);
}

.bg-category-5-default {
  background-color: var(--category-5-default);
}

.bg-category-5-default\:hover:hover {
  background-color: var(--category-5-default);
}

.fill-category-5-default {
  fill: var(--category-5-default);
}

.fill-category-5-default\:hover:hover {
  fill: var(--category-5-default);
}

.stroke-category-5-default {
  stroke: var(--category-5-default);
}

.stroke-category-5-default\:hover:hover {
  stroke: var(--category-5-default);
}

.category-5-darker {
  color: var(--category-5-darker);
}

.b-category-5-darker {
  border-color: var(--category-5-darker);
}

.b-category-5-darker\:hover:hover {
  border-color: var(--category-5-darker);
}

.bg-category-5-darker {
  background-color: var(--category-5-darker);
}

.bg-category-5-darker\:hover:hover {
  background-color: var(--category-5-darker);
}

.fill-category-5-darker {
  fill: var(--category-5-darker);
}

.fill-category-5-darker\:hover:hover {
  fill: var(--category-5-darker);
}

.stroke-category-5-darker {
  stroke: var(--category-5-darker);
}

.stroke-category-5-darker\:hover:hover {
  stroke: var(--category-5-darker);
}

.category-6-lighter {
  color: var(--category-6-lighter);
}

.b-category-6-lighter {
  border-color: var(--category-6-lighter);
}

.b-category-6-lighter\:hover:hover {
  border-color: var(--category-6-lighter);
}

.bg-category-6-lighter {
  background-color: var(--category-6-lighter);
}

.bg-category-6-lighter\:hover:hover {
  background-color: var(--category-6-lighter);
}

.fill-category-6-lighter {
  fill: var(--category-6-lighter);
}

.fill-category-6-lighter\:hover:hover {
  fill: var(--category-6-lighter);
}

.stroke-category-6-lighter {
  stroke: var(--category-6-lighter);
}

.stroke-category-6-lighter\:hover:hover {
  stroke: var(--category-6-lighter);
}

.category-6-default {
  color: var(--category-6-default);
}

.b-category-6-default {
  border-color: var(--category-6-default);
}

.b-category-6-default\:hover:hover {
  border-color: var(--category-6-default);
}

.bg-category-6-default {
  background-color: var(--category-6-default);
}

.bg-category-6-default\:hover:hover {
  background-color: var(--category-6-default);
}

.fill-category-6-default {
  fill: var(--category-6-default);
}

.fill-category-6-default\:hover:hover {
  fill: var(--category-6-default);
}

.stroke-category-6-default {
  stroke: var(--category-6-default);
}

.stroke-category-6-default\:hover:hover {
  stroke: var(--category-6-default);
}

.category-6-darker {
  color: var(--category-6-darker);
}

.b-category-6-darker {
  border-color: var(--category-6-darker);
}

.b-category-6-darker\:hover:hover {
  border-color: var(--category-6-darker);
}

.bg-category-6-darker {
  background-color: var(--category-6-darker);
}

.bg-category-6-darker\:hover:hover {
  background-color: var(--category-6-darker);
}

.fill-category-6-darker {
  fill: var(--category-6-darker);
}

.fill-category-6-darker\:hover:hover {
  fill: var(--category-6-darker);
}

.stroke-category-6-darker {
  stroke: var(--category-6-darker);
}

.stroke-category-6-darker\:hover:hover {
  stroke: var(--category-6-darker);
}

/* TODO: add the rest of category 7 */
.bg-category-7-lightest {
  background-color: var(--category-7-lightest);
}

.bg-category-7-lighter {
  background-color: var(--category-7-lighter);
}

.bg-category-7-light {
  background-color: var(--category-7-light);
}

.bg-category-7-default {
  background-color: var(--category-7-default);
}

.bg-category-7-dark {
  background-color: var(--category-7-dark);
}

.background-theme {
  color: var(--background-theme);
}

.b-background-theme {
  border-color: var(--background-theme);
}

.b-background-theme\:hover:hover {
  border-color: var(--background-theme);
}

.bg-background-theme {
  background-color: var(--background-theme);
}

.bg-background-theme\:hover:hover {
  background-color: var(--background-theme);
}

.fill-background-theme {
  fill: var(--background-theme);
}

.fill-background-theme\:hover:hover {
  fill: var(--background-theme);
}

.stroke-background-theme {
  stroke: var(--background-theme);
}

.stroke-background-theme\:hover:hover {
  stroke: var(--background-theme);
}

.bg-background-theme-80\% {
  background-color: rgba(var(--background-theme-rgb), 0.8);
}

.foreground-1 {
  color: var(--foreground-1);
}

.b-foreground-1 {
  border-color: var(--foreground-1);
}

.b-foreground-1\:hover:hover {
  border-color: var(--foreground-1);
}

.bg-foreground-1 {
  background-color: var(--foreground-1);
}

.bg-foreground-1\:hover:hover {
  background-color: var(--foreground-1);
}

.fill-foreground-1 {
  fill: var(--foreground-1);
}

.fill-foreground-1\:hover:hover {
  fill: var(--foreground-1);
}

.stroke-foreground-1 {
  stroke: var(--foreground-1);
}

.stroke-foreground-1\:hover:hover {
  stroke: var(--foreground-1);
}

.foreground-2 {
  color: var(--foreground-2);
}

.b-foreground-2 {
  border-color: var(--foreground-2);
}

.b-foreground-2\:hover:hover {
  border-color: var(--foreground-2);
}

.bg-foreground-2 {
  background-color: var(--foreground-2);
}

.bg-foreground-2\:hover:hover {
  background-color: var(--foreground-2);
}

.fill-foreground-2 {
  fill: var(--foreground-2);
}

.fill-foreground-2\:hover:hover {
  fill: var(--foreground-2);
}

.stroke-foreground-2 {
  stroke: var(--foreground-2);
}

.stroke-foreground-2\:hover:hover {
  stroke: var(--foreground-2);
}

.foreground-3 {
  color: var(--foreground-3);
}

.b-foreground-3 {
  border-color: var(--foreground-3);
}

.b-foreground-3\:hover:hover {
  border-color: var(--foreground-3);
}

.bg-foreground-3 {
  background-color: var(--foreground-3);
}

.bg-foreground-3\:hover:hover {
  background-color: var(--foreground-3);
}

.fill-foreground-3 {
  fill: var(--foreground-3);
}

.fill-foreground-3\:hover:hover {
  fill: var(--foreground-3);
}

.stroke-foreground-3 {
  stroke: var(--foreground-3);
}

.stroke-foreground-3\:hover:hover {
  stroke: var(--foreground-3);
}

.foreground-4 {
  color: var(--foreground-4);
}

.b-foreground-4 {
  border-color: var(--foreground-4);
}

.b-foreground-4\:hover:hover {
  border-color: var(--foreground-4);
}

.bg-foreground-4 {
  background-color: var(--foreground-4);
}

.bg-foreground-4\:hover:hover {
  background-color: var(--foreground-4);
}

.fill-foreground-4 {
  fill: var(--foreground-4);
}

.fill-foreground-4\:hover:hover {
  fill: var(--foreground-4);
}

.stroke-foreground-4 {
  stroke: var(--foreground-4);
}

.stroke-foreground-4\:hover:hover {
  stroke: var(--foreground-4);
}

.foreground-5 {
  color: var(--foreground-5);
}

.b-foreground-5 {
  border-color: var(--foreground-5);
}

.b-foreground-5\:hover:hover {
  border-color: var(--foreground-5);
}

.bg-foreground-5 {
  background-color: var(--foreground-5);
}

.bg-foreground-5\:hover:hover {
  background-color: var(--foreground-5);
}

.fill-foreground-5 {
  fill: var(--foreground-5);
}

.fill-foreground-5\:hover:hover {
  fill: var(--foreground-5);
}

.stroke-foreground-5 {
  stroke: var(--foreground-5);
}

.stroke-foreground-5\:hover:hover {
  stroke: var(--foreground-5);
}

.foreground-6 {
  color: var(--foreground-6);
}

.b-foreground-6 {
  border-color: var(--foreground-6);
}

.b-foreground-6\:hover:hover {
  border-color: var(--foreground-6);
}

.bg-foreground-6 {
  background-color: var(--foreground-6);
}

.bg-foreground-6\:hover:hover {
  background-color: var(--foreground-6);
}

.fill-foreground-6 {
  fill: var(--foreground-6);
}

.fill-foreground-6\:hover:hover {
  fill: var(--foreground-6);
}

.stroke-foreground-6 {
  stroke: var(--foreground-6);
}

.stroke-foreground-6\:hover:hover {
  stroke: var(--foreground-6);
}

.foreground-7 {
  color: var(--foreground-7);
}

.b-foreground-7 {
  border-color: var(--foreground-7);
}

.b-foreground-7\:hover:hover {
  border-color: var(--foreground-7);
}

.bg-foreground-7 {
  background-color: var(--foreground-7);
}

.bg-foreground-7\:hover:hover {
  background-color: var(--foreground-7);
}

.fill-foreground-7 {
  fill: var(--foreground-7);
}

.fill-foreground-7\:hover:hover {
  fill: var(--foreground-7);
}

.stroke-foreground-7 {
  stroke: var(--foreground-7);
}

.stroke-foreground-7\:hover:hover {
  stroke: var(--foreground-7);
}

.foreground-8 {
  color: var(--foreground-8);
}

.b-foreground-8 {
  border-color: var(--foreground-8);
}

.b-foreground-8\:hover:hover {
  border-color: var(--foreground-8);
}

.bg-foreground-8 {
  background-color: var(--foreground-8);
}

.bg-foreground-8\:hover:hover {
  background-color: var(--foreground-8);
}

.fill-foreground-8 {
  fill: var(--foreground-8);
}

.fill-foreground-8\:hover:hover {
  fill: var(--foreground-8);
}

.stroke-foreground-8 {
  stroke: var(--foreground-8);
}

.stroke-foreground-8\:hover:hover {
  stroke: var(--foreground-8);
}

.foreground-border {
  color: var(--foreground-border);
}

.b-foreground-border {
  border-color: var(--foreground-border);
}

.b-foreground-border\:hover:hover {
  border-color: var(--foreground-border);
}

.bg-foreground-border {
  background-color: var(--foreground-border);
}

.bg-foreground-border\:hover:hover {
  background-color: var(--foreground-border);
}

.fill-foreground-border {
  fill: var(--foreground-border);
}

.fill-foreground-border\:hover:hover {
  fill: var(--foreground-border);
}

.stroke-foreground-border {
  stroke: var(--foreground-border);
}

.stroke-foreground-border\:hover:hover {
  stroke: var(--foreground-border);
}

.foreground-subtext {
  color: var(--foreground-subtext);
}

.b-foreground-subtext {
  border-color: var(--foreground-subtext);
}

.b-foreground-subtext\:hover:hover {
  border-color: var(--foreground-subtext);
}

.bg-foreground-subtext {
  background-color: var(--foreground-subtext);
}

.bg-foreground-subtext\:hover:hover {
  background-color: var(--foreground-subtext);
}

.fill-foreground-subtext {
  fill: var(--foreground-subtext);
}

.fill-foreground-subtext\:hover:hover {
  fill: var(--foreground-subtext);
}

.stroke-foreground-subtext {
  stroke: var(--foreground-subtext);
}

.stroke-foreground-subtext\:hover:hover {
  stroke: var(--foreground-subtext);
}

.foreground-disabled {
  color: var(--foreground-disabled);
}

.b-foreground-disabled {
  border-color: var(--foreground-disabled);
}

.b-foreground-disabled\:hover:hover {
  border-color: var(--foreground-disabled);
}

.bg-foreground-disabled {
  background-color: var(--foreground-disabled);
}

.bg-foreground-disabled\:hover:hover {
  background-color: var(--foreground-disabled);
}

.fill-foreground-disabled {
  fill: var(--foreground-disabled);
}

.fill-foreground-disabled\:hover:hover {
  fill: var(--foreground-disabled);
}

.stroke-foreground-disabled {
  stroke: var(--foreground-disabled);
}

.stroke-foreground-disabled\:hover:hover {
  stroke: var(--foreground-disabled);
}

.foreground-weak {
  color: var(--foreground-weak);
}

.b-foreground-weak {
  border-color: var(--foreground-weak);
}

.b-foreground-weak\:hover:hover {
  border-color: var(--foreground-weak);
}

.bg-foreground-weak {
  background-color: var(--foreground-weak);
}

.bg-foreground-weak\:hover:hover {
  background-color: var(--foreground-weak);
}

.fill-foreground-weak {
  fill: var(--foreground-weak);
}

.fill-foreground-weak\:hover:hover {
  fill: var(--foreground-weak);
}

.stroke-foreground-weak {
  stroke: var(--foreground-weak);
}

.stroke-foreground-weak\:hover:hover {
  stroke: var(--foreground-weak);
}

.foreground-default {
  color: var(--foreground-default);
}

.foreground-default {
  color: var(--foreground-default);
}

.b-foreground-default {
  border-color: var(--foreground-default);
}

.b-foreground-default\:hover:hover {
  border-color: var(--foreground-default);
}

.bg-foreground-default {
  background-color: var(--foreground-default);
}

.bg-foreground-default\:hover:hover {
  background-color: var(--foreground-default);
}

.fill-foreground-default {
  fill: var(--foreground-default);
}

.fill-foreground-default\:hover:hover {
  fill: var(--foreground-default);
}

.stroke-foreground-default {
  stroke: var(--foreground-default);
}

.stroke-foreground-default\:hover:hover {
  stroke: var(--foreground-default);
}

.foreground-strong {
  color: var(--foreground-strong);
}

.foreground-strong {
  color: var(--foreground-strong);
}

.b-foreground-strong {
  border-color: var(--foreground-strong);
}

.b-foreground-strong\:hover:hover {
  border-color: var(--foreground-strong);
}

.bg-foreground-strong {
  background-color: var(--foreground-strong);
}

.bg-foreground-strong\:hover:hover {
  background-color: var(--foreground-strong);
}

.fill-foreground-strong {
  fill: var(--foreground-strong);
}

.fill-foreground-strong\:hover:hover {
  fill: var(--foreground-strong);
}

.stroke-foreground-strong {
  stroke: var(--foreground-strong);
}

.stroke-foreground-strong\:hover:hover {
  stroke: var(--foreground-strong);
}

.foreground-full {
  color: var(--foreground-full);
}

.foreground-full {
  color: var(--foreground-full);
}

.b-foreground-full {
  border-color: var(--foreground-full);
}

.b-foreground-full\:hover:hover {
  border-color: var(--foreground-full);
}

.bg-foreground-full {
  background-color: var(--foreground-full);
}

.bg-foreground-full\:hover:hover {
  background-color: var(--foreground-full);
}

.fill-foreground-full {
  fill: var(--foreground-full);
}

.fill-foreground-full\:hover:hover {
  fill: var(--foreground-full);
}

.stroke-foreground-full {
  stroke: var(--foreground-full);
}

.stroke-foreground-full\:hover:hover {
  stroke: var(--foreground-full);
}

.background-dropdown {
  color: var(--background-dropdown);
}

.b-background-dropdown {
  border-color: var(--background-dropdown);
}

.b-background-dropdown\:hover:hover {
  border-color: var(--background-dropdown);
}

.bg-background-dropdown {
  background-color: var(--background-dropdown);
}

.bg-background-dropdown\:hover:hover {
  background-color: var(--background-dropdown);
}

.fill-background-dropdown {
  fill: var(--background-dropdown);
}

.fill-background-dropdown\:hover:hover {
  fill: var(--background-dropdown);
}

.stroke-background-dropdown {
  stroke: var(--background-dropdown);
}

.stroke-background-dropdown\:hover:hover {
  stroke: var(--background-dropdown);
}

.background-alt {
  color: var(--background-alt);
}

.b-background-alt {
  border-color: var(--background-alt);
}

.b-background-alt\:hover:hover {
  border-color: var(--background-alt);
}

.bg-background-alt {
  background-color: var(--background-alt);
}

.bg-background-alt\:hover:hover {
  background-color: var(--background-alt);
}

.fill-background-alt {
  fill: var(--background-alt);
}

.fill-background-alt\:hover:hover {
  fill: var(--background-alt);
}

.stroke-background-alt {
  stroke: var(--background-alt);
}

.stroke-background-alt\:hover:hover {
  stroke: var(--background-alt);
}

.bg-background-gradient {
  background: linear-gradient(90deg, rgba(132, 155, 185, 0.22) 0%, #849BB9 100%);
  opacity: 0.4;
}

.bg-background-gradient-theme {
  background: linear-gradient(180deg, var(--gradient-theme-start) 0%, var(--gradient-theme-end) 100%);
}

/* TODO: rgb all the colors so that we can use alpha like this
  .bg-$(color)-10\%\:hover:hover { background-color: rgba(var(--$(color)), 0.1); }
 */
.bg-danger-10\%\:hover {
  transition: background-color 0.3s;
}

.bg-danger-10\%\:hover:hover {
  background-color: rgba(var(--danger-rgb), 0.1);
}

.container:hover .child.b-primary\:hover {
  border-color: var(--accedian-primary);
}

.container:hover .child.bg-primary\:hover {
  background-color: var(--accedian-primary);
}

.mix-blend-mode-diff {
  mix-blend-mode: difference;
}

/* == display: [display-none, inline, block, inline-block] =========================== */
.display-none {
  display: none;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

/* == filter: fi ===================================================================== */
/*      none: fi-none
/*      blur: fi-blur-[1..4]
/* =================================================================================== */
.fi-none {
  filter: none;
}

.fi-blur-1 {
  filter: blur(1px);
}

.fi-blur-2 {
  filter: blur(2px);
}

.fi-blur-4 {
  filter: blur(4px);
}

/* == flex: fl ======================================================================= */
/*      flex:       fl-[0..12 | none]
/*      align-self: fl-align-[start, end, center, baseline, stretch]
/* =================================================================================== */
/* min-width / min-height - Fix for Chrome 44 bug
 * https://code.google.com/p/chromium/issues/detail?id=506893 */
.fl-0 {
  flex: 0;
}

.fl-1 {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.fl-2 {
  flex: 2;
  min-width: 0;
  min-height: 0;
}

.fl-3 {
  flex: 3;
  min-width: 0;
  min-height: 0;
}

.fl-4 {
  flex: 4;
  min-width: 0;
  min-height: 0;
}

.fl-5 {
  flex: 5;
  min-width: 0;
  min-height: 0;
}

.fl-6 {
  flex: 6;
  min-width: 0;
  min-height: 0;
}

.fl-7 {
  flex: 7;
  min-width: 0;
  min-height: 0;
}

.fl-8 {
  flex: 8;
  min-width: 0;
  min-height: 0;
}

.fl-9 {
  flex: 9;
  min-width: 0;
  min-height: 0;
}

.fl-10 {
  flex: 10;
  min-width: 0;
  min-height: 0;
}

.fl-11 {
  flex: 11;
  min-width: 0;
  min-height: 0;
}

.fl-12 {
  flex: 12;
  min-width: 0;
  min-height: 0;
}

.fl-none {
  flex: none;
}

.fl-grow-0 {
  flex-grow: 0;
}

.fl-grow-1 {
  flex-grow: 1;
}

.fl-grow-2 {
  flex-grow: 2;
}

.fl-shrink-0 {
  flex-shrink: 0;
}

.fl-shrink-1 {
  flex-shrink: 1;
}

.fl-shrink-2 {
  flex-shrink: 2;
}

.fl-basis-10\% {
  flex-basis: 10%;
}

.fl-basis-20\% {
  flex-basis: 20%;
}

.fl-basis-30\% {
  flex-basis: 30%;
}

.fl-basis-40\% {
  flex-basis: 40%;
}

.fl-basis-50\% {
  flex-basis: 50%;
}

.fl-basis-60\% {
  flex-basis: 60%;
}

.fl-basis-70\% {
  flex-basis: 70%;
}

.fl-basis-80\% {
  flex-basis: 80%;
}

.fl-basis-90\% {
  flex-basis: 90%;
}

.fl-align-start {
  align-self: flex-start;
}

.fl-align-end {
  align-self: flex-end;
}

.fl-align-center {
  align-self: center;
}

.fl-align-baseline {
  align-self: baseline;
}

.fl-align-stretch {
  align-self: stretch;
}

.fl-order-0 {
  order: 0;
}

.fl-order-1 {
  order: 1;
}

.fl-order-2 {
  order: 2;
}

/* == flexbox: fb ==================================================================== */
/*      display: fb-[column, row]
/*      align:   fb-align-[start, end, center, baseline, stretch]
/*      justify: fb-justify-[start, end, center, space-between, space-around]
/*      wrap:    fb-[wrap, nowrap, wrap-reverse]
/*      reverse: fb-[column-reverse, row-reverse]
/*      gap:     fb-gap-[0-8]
/* =================================================================================== */
.fb-column {
  display: flex;
  flex-direction: column;
}

.fb-inline-column {
  display: inline-flex;
  flex-direction: column;
}

.fb-row {
  display: flex;
  flex-direction: row;
}

.fb-inline-row {
  display: inline-flex;
  flex-direction: row;
}

.fb-align-start {
  align-items: flex-start;
}

.fb-align-end {
  align-items: flex-end;
}

.fb-align-center {
  align-items: center;
}

.fb-align-baseline {
  align-items: baseline;
}

.fb-align-stretch {
  align-items: stretch;
}

.fb-align-content-start {
  align-content: flex-start;
}

.fb-align-content-end {
  align-content: flex-end;
}

.fb-justify-start {
  justify-content: flex-start;
}

.fb-justify-end {
  justify-content: flex-end;
}

.fb-justify-center {
  justify-content: center;
}

.fb-justify-space-around {
  justify-content: space-around;
}

.fb-justify-space-between {
  justify-content: space-between;
}

.fb-justify-space-evenly {
  justify-content: space-evenly;
}

.fb-wrap {
  flex-wrap: wrap;
}

.fb-nowrap {
  flex-wrap: nowrap;
}

.fb-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.fb-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.fb-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.fb-gap-0 {
  gap: var(--spacing-0);
}

.fb-gap-1 {
  gap: var(--spacing-1);
}

.fb-gap-1\.5 {
  gap: var(--spacing-1\.5);
}

.fb-gap-2 {
  gap: var(--spacing-2);
}

.fb-gap-3 {
  gap: var(--spacing-3);
}

.fb-gap-4 {
  gap: var(--spacing-4);
}

.fb-gap-5 {
  gap: var(--spacing-5);
}

.fb-gap-6 {
  gap: var(--spacing-6);
}

.fb-gap-7 {
  gap: var(--spacing-7);
}

.fb-gap-8 {
  gap: var(--spacing-8);
}

/* == height ========================================================================= */
/*      height: h-[0..8 | 100%]
/*      min-height: h-min-[0-8 | 100%]
/*      max-height: h-max-[0-8 | 100%]
/* =================================================================================== */
.h-none {
  height: 0px;
}

.h-min-none {
  min-height: none;
}

.h-max-none {
  max-height: none;
}

.h-0px {
  height: 0px;
}

.h-min-0px {
  min-height: 0px;
}

.h-max-0px {
  max-height: 0px;
}

.h-0\.5 {
  height: var(--h-0\.5);
}

.h-min-0\.5 {
  min-height: var(--h-0\.5);
}

.h-max-0\.5 {
  max-height: var(--h-0\.5);
}

.h-0\.75 {
  height: var(--h-0\.75);
}

.h-min-0\.75 {
  min-height: var(--h-0\.75);
}

.h-max-0\.75 {
  max-height: var(--h-0\.75);
}

.h-0 {
  height: var(--h-0);
}

.h-min-0 {
  min-height: var(--h-0);
}

.h-max-0 {
  max-height: var(--h-0);
}

.h-1 {
  height: var(--h-1);
}

.h-min-1 {
  min-height: var(--h-1);
}

.h-max-1 {
  max-height: var(--h-1);
}

.h-1\.25 {
  height: var(--h-1\.25);
}

.h-min-1\.25 {
  min-height: var(--h-1\.25);
}

.h-max-1\.25 {
  max-height: var(--h-1\.25);
}

.h-1\.5 {
  height: var(--h-1\.5);
}

.h-min-1\.5 {
  min-height: var(--h-1\.5);
}

.h-max-1\.5 {
  max-height: var(--h-1\.5);
}

.h-1\.75 {
  height: var(--h-1\.75);
}

.h-min-1\.75 {
  min-height: var(--h-1\.75);
}

.h-max-1\.75 {
  max-height: var(--h-1\.75);
}

.h-2 {
  height: var(--h-2);
}

.h-min-2 {
  min-height: var(--h-2);
}

.h-max-2 {
  max-height: var(--h-2);
}

.h-3 {
  height: var(--h-3);
}

.h-min-3 {
  min-height: var(--h-3);
}

.h-max-3 {
  max-height: var(--h-3);
}

.h-4 {
  height: var(--h-4);
}

.h-min-4 {
  min-height: var(--h-4);
}

.h-max-4 {
  max-height: var(--h-4);
}

.h-5 {
  height: var(--h-5);
}

.h-min-5 {
  min-height: var(--h-5);
}

.h-max-5 {
  max-height: var(--h-5);
}

.h-5\.5 {
  height: var(--h-5\.5);
}

.h-min-5\.5 {
  min-height: var(--h-5\.5);
}

.h-max-5\.5 {
  max-height: var(--h-5\.5);
}

.h-6 {
  height: var(--h-6);
}

.h-min-6 {
  min-height: var(--h-6);
}

.h-max-6 {
  max-height: var(--h-6);
}

.h-6\.5 {
  height: var(--h-6\.5);
}

.h-min-6\.5 {
  min-height: var(--h-6\.5);
}

.h-max-6\.5 {
  max-height: var(--h-6\.5);
}

.h-7 {
  height: var(--h-7);
}

.h-min-7 {
  min-height: var(--h-7);
}

.h-max-7 {
  max-height: var(--h-7);
}

.h-8 {
  height: var(--h-8);
}

.h-min-8 {
  min-height: var(--h-8);
}

.h-max-8 {
  max-height: var(--h-8);
}

.h-50vh {
  height: 50vh;
}

.h-min-50vh {
  min-height: 50vh;
}

.h-max-50vh {
  max-height: 50vh;
}

.h-80vh {
  height: 80vh;
}

.h-min-80vh {
  min-height: 80vh;
}

.h-max-80vh {
  max-height: 80vh;
}

.h-95vh {
  height: 95vh;
}

.h-min-95vh {
  min-height: 95vh;
}

.h-max-95vh {
  max-height: 95vh;
}

.h-1\.5rem {
  height: 1.5rem;
}

.h-min-1\.5rem {
  min-height: 1.5rem;
}

.h-max-1\.5rem {
  max-height: 1.5rem;
}

.h-3rem {
  height: 3rem;
}

.h-min-3rem {
  min-height: 3rem;
}

.h-max-3rem {
  max-height: 3rem;
}

.h-50\% {
  height: 50%;
}

.h-min-50\% {
  min-height: 50%;
}

.h-max-50\% {
  max-height: 50%;
}

.h-90\% {
  height: 90%;
}

.h-min-90\% {
  min-height: 90%;
}

.h-max-90\% {
  max-height: 90%;
}

.h-95\% {
  height: 95%;
}

.h-min-95\% {
  min-height: 95%;
}

.h-max-95\% {
  max-height: 95%;
}

.h-98\% {
  height: 98%;
}

.h-min-98\% {
  min-height: 98%;
}

.h-max-98\% {
  max-height: 98%;
}

.h-100\% {
  height: 100%;
}

.h-min-100\% {
  min-height: 100%;
}

.h-max-100\% {
  max-height: 100%;
}

.h-auto {
  height: auto;
}

.h-min-auto {
  min-height: auto;
}

.h-max-auto {
  max-height: auto;
}

.list-style-none {
  list-style: none;
}

/* == object-fit: fit-[fill, contain, cover, none, scale-down] ======================= */
.fit-fill {
  object-fit: fill;
}

.fit-contain {
  object-fit: contain;
}

.fit-cover {
  object-fit: cover;
}

.fit-none {
  object-fit: none;
}

.fit-scale-down {
  object-fit: scale-down;
}

/* == object-position: pos-[t, r, b, l, tl, tr, br, bl] ======================= */
.pos-t {
  object-position: top;
}

.pos-r {
  object-position: right;
}

.pos-b {
  object-position: bottom;
}

.pos-l {
  object-position: left;
}

.pos-tl {
  object-position: top left;
}

.pos-tr {
  object-position: top right;
}

.pos-br {
  object-position: bottom right;
}

.pos-bl {
  object-position: bottom left;
}

/* == opacity: o-[disabled] ========================================================== */
.o-0\% {
  opacity: 0;
}

.o-10\% {
  opacity: 0.1;
}

.o-20\% {
  opacity: 0.2;
}

.o-30\% {
  opacity: 0.3;
}

.o-40\% {
  opacity: 0.4;
}

.o-50\% {
  opacity: 0.5;
}

.o-60\% {
  opacity: 0.6;
}

.o-80\% {
  opacity: 0.8;
}

.o-98\% {
  opacity: 0.98;
}

.o-100\% {
  opacity: 1;
}

.o-disabled {
  opacity: var(--o-disabled);
}

/* == overflow: overflow ============================================================= */
/*      overflow:   overflow-[visible, hidden, scroll, auto]
/*      overflow-x: overflow-x-[visible, hidden, scroll, auto]
/*      overflow-y: overflow-y-[visible, hidden, scroll, auto]
/* =================================================================================== */
.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

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

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.ellipsis-right {
  overflow: hidden;
  white-space: nowrap;
  direction: ltr;
  text-overflow: ellipsis;
}

.ellipsis-left {
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
  text-overflow: ellipsis;
  text-align: left;
}

/* == position ======================================================================= */
/*      position: [static, relative, absolute, fixed]
/*      location: [top, right, bottom, left]
/* =================================================================================== */
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top {
  top: 0;
}

.right {
  right: 0;
}

.bottom {
  bottom: 0;
}

.left {
  left: 0;
}

.top-0 {
  top: var(--spacing-0);
}

.right-0 {
  right: var(--spacing-0);
}

.bottom-0 {
  bottom: var(--spacing-0);
}

.left-0 {
  left: var(--spacing-0);
}

.top-1 {
  top: var(--spacing-1);
}

.right-1 {
  right: var(--spacing-1);
}

.bottom-1 {
  bottom: var(--spacing-1);
}

.left-1 {
  left: var(--spacing-1);
}

.top-2 {
  top: var(--spacing-2);
}

.right-2 {
  right: var(--spacing-2);
}

.bottom-2 {
  bottom: var(--spacing-2);
}

.left-2 {
  left: var(--spacing-2);
}

.top-3 {
  top: var(--spacing-3);
}

.right-3 {
  right: var(--spacing-3);
}

.bottom-3 {
  bottom: var(--spacing-3);
}

.left-3 {
  left: var(--spacing-3);
}

.top-4 {
  top: var(--spacing-4);
}

.right-4 {
  right: var(--spacing-4);
}

.bottom-4 {
  bottom: var(--spacing-4);
}

.left-4 {
  left: var(--spacing-4);
}

.top-50\% {
  top: 50%;
}

.right-50\% {
  right: 50%;
}

.bottom-50\% {
  bottom: 50%;
}

.left-50\% {
  left: 50%;
}

.top--0 {
  top: calc(-1 * var(--spacing-0));
}

.right--0 {
  right: calc(-1 * var(--spacing-0));
}

.bottom--0 {
  bottom: calc(-1 * var(--spacing-0));
}

.left--0 {
  left: calc(-1 * var(--spacing-0));
}

.top--1 {
  top: calc(-1 * var(--spacing-1));
}

.right--1 {
  right: calc(-1 * var(--spacing-1));
}

.bottom--1 {
  bottom: calc(-1 * var(--spacing-1));
}

.left--1 {
  left: calc(-1 * var(--spacing-1));
}

.top--2 {
  top: calc(-1 * var(--spacing-2));
}

.right--2 {
  right: calc(-1 * var(--spacing-2));
}

.bottom--2 {
  bottom: calc(-1 * var(--spacing-2));
}

.left--2 {
  left: calc(-1 * var(--spacing-2));
}

.top--3 {
  top: calc(-1 * var(--spacing-3));
}

.right--3 {
  right: calc(-1 * var(--spacing-3));
}

.bottom--3 {
  bottom: calc(-1 * var(--spacing-3));
}

.left--3 {
  left: calc(-1 * var(--spacing-3));
}

.top--4 {
  top: calc(-1 * var(--spacing-4));
}

.right--4 {
  right: calc(-1 * var(--spacing-4));
}

.bottom--4 {
  bottom: calc(-1 * var(--spacing-4));
}

.left--4 {
  left: calc(-1 * var(--spacing-4));
}

.top--50\% {
  top: -50%;
}

.right--50\% {
  right: -50%;
}

.bottom--50\% {
  bottom: -50%;
}

.left--50\% {
  left: -50%;
}

.resize-none {
  resize: none;
}

.resize-vertical {
  resize: vertical;
}

/* == table ========================================================================== */
/*      table:  [table, inline-table]
/*      row:    [row, row-group]
/*      column: [column, column-group]
/*      cell:   cell
/*      layout: table-[fixed]
/* =================================================================================== */
.table {
  display: table;
}

.inline-table {
  display: inline-table;
}

.row {
  display: table-row;
}

.row-group {
  display: table-row-group;
}

.column {
  display: table-column;
}

.column-group {
  display: table-column-group;
}

.cell {
  display: table-cell;
  vertical-align: top;
}

.table-fixed {
  table-layout: fixed;
  width: 100%;
}

/* == text =========================================================================== */
/*      font-size:   f-[1..7 | default]
/*      line-height: lh-[0..7 | default]
/*      font-weight: fw-[100..900 | light, normal, bold]
/*      font-style:  fs-[normal, italic, strike, underline, uppercase]
/*      text-align:  text-align-[left, right, center, justify]
/*      white-space: white-space-[normal, nowrap, pre]
/*      word-break:  work-break-[normal, all, keep]
/*      word-wrap:   work-wrap-[normal, break]
/* =================================================================================== */
.f-default {
  font-size: var(--f-default);
  line-height: var(--lh-default);
}

.f-0 {
  font-size: var(--f-0);
  line-height: var(--lh-1);
}

.f-1 {
  font-size: var(--f-1);
  line-height: var(--lh-1);
}

.f-2 {
  font-size: var(--f-2);
  line-height: var(--lh-2);
}

.f-3 {
  font-size: var(--f-3);
  line-height: var(--lh-3);
}

.f-4 {
  font-size: var(--f-4);
  line-height: var(--lh-4);
}

.f-5 {
  font-size: var(--f-5);
  line-height: var(--lh-5);
}

.f-6 {
  font-size: var(--f-6);
  line-height: var(--lh-6);
}

.f-7 {
  font-size: var(--f-7);
  line-height: var(--lh-7);
}

.lh-default {
  line-height: var(--lh-default);
}

.lh-0 {
  line-height: var(--lh-0);
}

.lh-1 {
  line-height: var(--lh-1);
}

.lh-2 {
  line-height: var(--lh-2);
}

.lh-3 {
  line-height: var(--lh-3);
}

.lh-4 {
  line-height: var(--lh-4);
}

.lh-5 {
  line-height: var(--lh-5);
}

.lh-6 {
  line-height: var(--lh-6);
}

.lh-7 {
  line-height: var(--lh-7);
}

.fw-light {
  font-weight: var(--fw-light);
}

.fw-normal {
  font-weight: var(--fw-normal);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

.fs-normal {
  font-style: normal;
  text-decoration: none;
}

.fs-italic {
  font-style: italic;
}

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

.fs-underline {
  text-decoration: underline;
}

.fs-underline-dashed {
  text-decoration-style: dashed;
}

.fs-uppercase {
  text-transform: uppercase;
}

.fs-lowercase {
  text-transform: lowercase;
}

.fs-capitalize {
  text-transform: capitalize;
}

.fs-tabular {
  font-feature-settings: "tnum" on, "lnum" on;
}

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

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

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

.text-align-justify {
  text-align: justify;
}

.text-spacing-1 {
  letter-spacing: var(--text-spacing-1);
}

.text-overflow-clip {
  text-overflow: clip;
}

.text-overflow-ellipsis {
  text-overflow: ellipsis;
}

.text-overflow-unset {
  text-overflow: unset;
}

.text-shadow-none {
  text-shadow: none;
}

.white-space-normal {
  white-space: normal;
}

.white-space-nowrap {
  white-space: nowrap;
}

.white-space-pre {
  white-space: pre;
}

.white-space-pre-line {
  white-space: pre-line;
}

.word-break-normal {
  word-break: normal;
}

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

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

.word-wrap-normal {
  word-wrap: normal;
  overflow-wrap: normal;
}

.word-wrap-normal-break {
  word-wrap: normal;
  overflow-wrap: break-word;
}

.word-wrap-break {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.writing-mode-vertical-rl {
  writing-mode: vertical-rl;
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.scale-0\.75 {
  transform: scale(0.75);
}

/* == utilities ====================================================================== */
/*      cursor: cursor-[pointer]
/*      pointer-events: pointer-events-[auto, none]
/* =================================================================================== */
.cursor-crosshair {
  cursor: crosshair;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-move {
  cursor: move;
}

.cursor-grab {
  cursor: grab;
}

.cursor-row-resize {
  cursor: row-resize;
}

.cursor-help {
  cursor: help;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.pointer-events-auto {
  pointer-events: auto;
}

.pointer-events-none {
  pointer-events: none;
}

.user-select-none {
  user-select: none;
}

/* == vertical-align: v-align-[top, middle, bottom, baseline] ======================== */
.v-align-top {
  vertical-align: top;
}

.v-align-middle {
  vertical-align: middle;
}

.v-align-bottom {
  vertical-align: bottom;
}

.v-align-baseline {
  vertical-align: baseline;
}

/* == visibility: hidden ============================================================= */
.hidden {
  visibility: hidden;
}

.container:hover .visible\:hover {
  visibility: visible;
}

/* == width ========================================================================== */
/*      width:     w-[0-8 | 80vw | 100% | auto]
/*      min-width: w-min-[0-8 | 100% | auto]
/*      max-width: w-max-[0-8 | 100% | auto]
/* =================================================================================== */
.w-none {
  width: 0px;
}

.w-min-none {
  min-width: none;
}

.w-max-none {
  max-width: none;
}

.w-none-important {
  width: 0px !important;
}

.w-0px {
  width: 0px;
}

.w-min-0px {
  min-width: 0px;
}

.w-max-0px {
  max-width: 0px;
}

.w-0\.5 {
  width: var(--w-0\.5);
}

.w-min-0\.5 {
  min-width: var(--w-0\.5);
}

.w-max-0\.5 {
  max-width: var(--w-0\.5);
}

.w-0\.75 {
  width: var(--w-0\.75);
}

.w-min-0\.75 {
  min-width: var(--w-0\.75);
}

.w-max-0\.75 {
  max-width: var(--w-0\.75);
}

.w-0 {
  width: var(--w-0);
}

.w-min-0 {
  min-width: var(--w-0);
}

.w-max-0 {
  max-width: var(--w-0);
}

.w-0-important {
  width: var(--w-0) !important;
}

.w-1 {
  width: var(--w-1);
}

.w-min-1 {
  min-width: var(--w-1);
}

.w-max-1 {
  max-width: var(--w-1);
}

.w-1\.5 {
  width: var(--w-1\.5);
}

.w-min-1\.5 {
  min-width: var(--w-1\.5);
}

.w-max-1\.5 {
  max-width: var(--w-1\.5);
}

.w-2 {
  width: var(--w-2);
}

.w-min-2 {
  min-width: var(--w-2);
}

.w-max-2 {
  max-width: var(--w-2);
}

.w-2\.5 {
  width: var(--w-2\.5);
}

.w-min-2\.5 {
  min-width: var(--w-2\.5);
}

.w-max-2\.5 {
  max-width: var(--w-2\.5);
}

.w-3 {
  width: var(--w-3);
}

.w-min-3 {
  min-width: var(--w-3);
}

.w-max-3 {
  max-width: var(--w-3);
}

.w-4 {
  width: var(--w-4);
}

.w-min-4 {
  min-width: var(--w-4);
}

.w-max-4 {
  max-width: var(--w-4);
}

.w-5 {
  width: var(--w-5);
}

.w-min-5 {
  min-width: var(--w-5);
}

.w-max-5 {
  max-width: var(--w-5);
}

.w-5\.25 {
  width: var(--w-5\.25);
}

.w-5\.5 {
  width: var(--w-5\.5);
}

.w-min-5\.5 {
  min-width: var(--w-5\.5);
}

.w-max-5\.5 {
  max-width: var(--w-5\.5);
}

.w-6 {
  width: var(--w-6);
}

.w-min-6 {
  min-width: var(--w-6);
}

.w-max-6 {
  max-width: var(--w-6);
}

.w-6\.5 {
  width: var(--w-6\.5);
}

.w-min-6\.5 {
  min-width: var(--w-6\.5);
}

.w-max-6\.5 {
  max-width: var(--w-6\.5);
}

.w-7 {
  width: var(--w-7);
}

.w-min-7 {
  min-width: var(--w-7);
}

.w-max-7 {
  max-width: var(--w-7);
}

.w-7\.5 {
  width: var(--w-7\.5);
}

.w-min-7\.5 {
  min-width: var(--w-7\.5);
}

.w-max-7\.5 {
  max-width: var(--w-7\.5);
}

.w-8 {
  width: var(--w-8);
}

.w-min-8 {
  min-width: var(--w-8);
}

.w-max-8 {
  max-width: var(--w-8);
}

.w-9 {
  width: var(--w-9);
}

.w-min-9 {
  min-width: var(--w-9);
}

.w-max-9 {
  max-width: var(--w-9);
}

.w-80vw {
  width: 80vw;
}

.w-min-80vw {
  min-width: 80vw;
}

.w-max-80vw {
  max-width: 80vw;
}

.w-10\% {
  width: 10%;
}

.w-min-10\% {
  min-width: 10%;
}

.w-max-10\% {
  max-width: 10%;
}

.w-15\% {
  width: 15%;
}

.w-min-15\% {
  min-width: 15%;
}

.w-max-15\% {
  max-width: 15%;
}

.w-20\% {
  width: 20%;
}

.w-min-20\% {
  min-width: 20%;
}

.w-max-20\% {
  max-width: 20%;
}

.w-25\% {
  width: 25%;
}

.w-min-25\% {
  min-width: 25%;
}

.w-max-25\% {
  max-width: 25%;
}

.w-30\% {
  width: 30%;
}

.w-min-30\% {
  min-width: 30%;
}

.w-max-30\% {
  max-width: 30%;
}

.w-40\% {
  width: 40%;
}

.w-min-40\% {
  min-width: 40%;
}

.w-max-40\% {
  max-width: 40%;
}

.w-50\% {
  width: 50%;
}

.w-min-50\% {
  min-width: 50%;
}

.w-max-50\% {
  max-width: 50%;
}

.w-60\% {
  width: 60%;
}

.w-min-60\% {
  min-width: 60%;
}

.w-max-60\% {
  max-width: 60%;
}

.w-70\% {
  width: 70%;
}

.w-min-70\% {
  min-width: 70%;
}

.w-max-70\% {
  max-width: 70%;
}

.w-75\% {
  width: 75%;
}

.w-min-75\% {
  min-width: 75%;
}

.w-max-75\% {
  max-width: 75%;
}

.w-80\% {
  width: 80%;
}

.w-min-80\% {
  min-width: 80%;
}

.w-max-80\% {
  max-width: 80%;
}

.w-85\% {
  width: 85%;
}

.w-min-85\% {
  min-width: 85%;
}

.w-max-85\% {
  max-width: 85%;
}

.w-90\% {
  width: 90%;
}

.w-min-90\% {
  min-width: 90%;
}

.w-max-90\% {
  max-width: 90%;
}

.w-96\% {
  width: 96%;
}

.w-min-96\% {
  min-width: 96%;
}

.w-max-96\% {
  max-width: 96%;
}

.w-98\% {
  width: 98%;
}

.w-min-98\% {
  min-width: 98%;
}

.w-max-98\% {
  max-width: 98%;
}

.w-100\% {
  width: 100%;
}

.w-min-100\% {
  min-width: 100%;
}

.w-max-100\% {
  max-width: 100%;
}

.w-3rem {
  width: 3rem;
}

.w-min-3rem {
  min-width: 3rem;
}

.w-max-3rem {
  max-width: 3rem;
}

.w-fit-content {
  width: fit-content;
}

.w-auto {
  width: auto;
}

.w-min-auto {
  min-width: auto;
}

.w-max-auto {
  max-width: auto;
}

.w-px-2 {
  width: 2px;
}

.w-px-4 {
  width: 4px;
}

.w-px-12 {
  width: 12px;
}

.w-px-48 {
  width: 48px;
}

.w-14rem {
  width: 14rem;
}

.w-px-280 {
  width: 280px;
}

/* == z-index: z-[0..3 | default] ==================================================== */
.z-default {
  z-index: var(--z-default);
}

.z-0 {
  z-index: var(--z-0);
}

.z-1 {
  z-index: var(--z-1);
}

.z-2 {
  z-index: var(--z-2);
}

.z-3 {
  z-index: var(--z-3);
}

.z-4 {
  z-index: var(--z-4);
}

.z-5 {
  z-index: var(--z-5);
}

.z-6 {
  z-index: var(--z-6);
}

.lifecycle-status {
  width: 12px;
  fill: var(--medium);
}

.lifecycle-status.live {
  fill: var(--good);
}

.lifecycle-status.shutdown {
  fill: black;
}

.lifecycle-status.live-under-maintenance {
  fill: none;
  stroke: var(--good);
  stroke-width: 4px;
}

.lifecycle-status.live-incident {
  fill: var(--critical);
}