:root {
  /* Colors */
  --color-Neutral-00: #ffffff;
  --color-Neutral-05: #f9f9f9;
  --color-Neutral-10: #f0f1f1;
  --color-Neutral-15: #eaebeb;
  --color-Neutral-20: #e4e6e6;
  --color-Neutral-30: #d2d6d7;
  --color-Neutral-40: #b7bcbf;
  --color-Neutral-70: #5f696e;
  --color-Neutral-80: #545d61;
  --color-Neutral-80-Old: #3a4452;
  --color-Neutral-90: #383d41;
  --color-Neutral-95: #2a2e30;
  --color-Neutral-98: #1c2022;
  --color-Accent: #004c84;
  --color-Accent-2: #005999;
  --color-Accent-10: #edf9ff;
  --color-25-Accent-10: hsla(202, 100%, 96%, 0.25);
  --color-Accents-40: #4dc1fd;
  --color-Accent-60: #0077c4;
  --color-Accent-60-Old: #097eb2;
  --color-Accents-70: #005999;
  --color-FocusBorder: #06f; /* This color is a special case for accessibility. We are free to rename it if design wants */
  --color-text-field-foreground-label: #434b4f;
  --color-text-field-background-border-active: #009ff2;
  --color-status-background-low-Cyan-outline: #acd8ee;
  --color-status-background-low-Cyan: #ddf4ff;

  --color-warning-10: #ffedd1;
  --color-warning-20: #ffd28f;
  --color-warning-30: #f3912f;
  --color-warning-40: #ba5d00;
  --color-warning-50: #934b03;
  --color-warning-100: #43280e;

  --color-error-10: #f7e7e7;
  --color-error-20: #ff9696;
  --color-error-40: #e03030;
  --color-error-50: #a52020;
  --color-error-100: #461313;

  --color-Neutral-10-1: #efefef;
  --color-Neutral-20-1: #d8d8d8;
  --color-Neutral-50: #535353;
  --color-Neutral-100: #333333;

  --color-information-10: #e1f4ff;

  /* Reflect Design System */
  --color-gray-00: #ffffff;
  --color-gray-05: #fafafc;
  --color-gray-10: #f7f7f9;
  --color-gray-15: #efeff2;
  --color-gray-20: #e0e0e5;
  --color-gray-30: #d0d0d9;
  --color-gray-40: #c1c1cc;
  --color-gray-50: #b1b1bf;
  --color-gray-70: #777783;
  --color-gray-80: #5b5b64;
  --color-gray-90: #3e3e46;
  --color-gray-100: #212128;
  --color-blue-30: #d2dbf7;
  --color-blue-70: #1e4dd7;
  --color-blue-80: #183eac;
  --color-blue-100: #0f2466;
  --color-brand-05: #f9f9fe;
  --color-brand-10: #ebebfb;
  --color-brand-40: #b9b8f2;
  --color-brand-50: #a3a2ee;
  --color-brand-70: #6361e2;
  --color-brand-75: #3c3adb;
  --color-brand-80: #302eaf;
  --color-brand-90: #242383;
  --color-green-20: #eaf9f0;
  --color-green-30: #d6f3e1;
  --color-green-40: #ade7c4;
  --color-green-70: #32c26b;
  --color-green-80: #289b56;
  --color-green-90: #1e7440;
  --color-green-100: #0f3a20;
  --color-red-10: #fdf9f9;
  --color-red-20: #f7e2e1;
  --color-red-25: #fdfaf9;
  --color-red-30: #efcdcb;
  --color-red-40: #e0a39e;
  --color-red-50: #d27872;
  --color-red-60: #c34e45;
  --color-red-70: #b42419;
  --color-red-80: #901d14;
  --color-red-90: #6c160f;
  --color-red-100: #360b08;
  --color-blue-40: #a5b8ef;
  --color-other-focus-state: #0066ff;
  --color-purple-10: #f3f0ff;
  --color-purple-20: #f0ecf9;
  --color-purple-25: #fcfbfe;
  --color-purple-60: #8567d2;
  --color-purple-70: #6741c7;
  --color-yellow-20: #fff9ed;
  --color-yellow-25: #fffdfb;
  --color-yellow-40: #ffe9b7;
  --color-yellow-60: #ffd370;
  --color-yellow-90: #a7822e;
  --color-yellow-100: #654d17;

  /* Shadows */
  --shadow-focus: 0px 0px 0px 1px #fff, 0px 0px 0px 3px var(--color-other-focus-state);
  --shadow-button: 0px 0px 0px 1px #fff, 0px 0px 0px 3px var(--color-other-focus-state);
  --shadow-input: 0px 0px 0px 1px #fff, 0px 0px 0px 3px var(--color-other-focus-state);
  --shadow-toggle: 0px 0px 0px 1px #fff, 0px 0px 0px 3px var(--color-other-focus-state);
  --shadow-modal: 1px 5px 10px 2px rgba(91, 91, 100, 0.3);
  --shadow-Dropdown-M: 0px 4px 8px 0px rgba(23, 54, 71, 0.08);

  /* API Hub */
  --api-hub-nav-height: 60px;
  --api-hub-mini-nav-height: 14px;
  --api-hub-main-nav-width: 72px;
  --definition-header-height: 56px;
  --test-run-header-height: 66px;

  /* Live chat */
  --color-status-alerts-success-40: #038a21;
}

:root {
  --transparent: transparent;

  --selection-bg: #accef7;

  --white: #ffffff;

  --gray-1: #161d2e;
  --gray-2: #2b2e37;
  --gray-3: #31343e;
  --gray-4: #35394a;
  --gray-5: #484848;
  --gray-6: #585858;
  --gray-7: #858585;
  --gray-8: #929eaa;
  --gray-9: #cbd2d9;
  --gray-10: #d4d4d4;
  --gray-11: #eaeaea;
  --gray-12: #f3f6fa;
  --gray-13: #fcfbfc;
  --gray-14: #d4dce3;
  --gray-60: #9494a1;
  --gray-primary: #413e3e;

  --blue-1: #020328;
  --blue-2: #030445;
  --blue-2-5: #1d1e7b;
  --blue-3: #3c3c57;
  --blue-4: #516982;
  --blue-5: #637a91;
  --blue-6: #7992c1;
  --blue-7: #7c98b4;
  --blue-8: #afb4cd;
  --blue-9: #ced5dc;
  --blue-10: #d3e5ee;
  --blue-11: #e4e7eb;
  --blue-12: #ebf3f7;
  --blue-13: #f0f9fe;
  --blue-14: #e9efff;
  --blue-highlight: #e9eeff;
  --blue-primary: #3d3adb;
  --blue-primary-dark: #3230c2;

  --devai-primary: var(--blue-primary); /* #FF6B6B; */
  --devai-secondary: #adb8db; /* #FFA94D; */

  --green-3: #776f5d;
  --green-4: #29906e;
  --green-5: #33a37e;
  --green-6: #3ebd93;
  --green-8: #62e7ba;
  --green-10: #b8f9e1;
  --green-12: #d9f7ec;
  --green-primary: #60ef60;

  --red-2: #612121;
  --red-3: #836665;
  --red-4: #aa2f29;
  --red-5: #b43939;
  --red-6: #d64545;
  --red-10: #e4b1b2;
  --red-11: #e2c0c0;
  --red-12: #ffd9da;
  --red-primary: #ff0000;

  --yellow-5: #8c6b1e;
  --yellow-6: #a17b24;
  --yellow-7: #c99a2e;
  --yellow-8: #e3e1b5;
  --yellow-9: #fcefc7;
  --yellow-10: #f6ffd9;
  --yellow-20: #fff9ed;
  --yellow-50: #ffde94;

  --font-system:
    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  --font-monospace: 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace, sans-serif;
  --font-compact:
    'SF Compact Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;

  --spacing-base: 8px;
  --spacing-ui: var(--spacing-base);
  --spacing-0: calc(var(--spacing-base) * 0);
  --spacing-0-2-5: calc(var(--spacing-base) * 0.25);
  --spacing-0-5: calc(var(--spacing-base) * 0.5);
  --spacing-1: calc(var(--spacing-base) * 1);
  --spacing-1-5: calc(var(--spacing-base) * 1.5);
  --spacing-2: calc(var(--spacing-base) * 2);
  --spacing-2-5: calc(var(--spacing-base) * 2.5);
  --spacing-3: calc(var(--spacing-base) * 3);
  --spacing-4: calc(var(--spacing-base) * 4);

  --border-radius-base: 2px;
  --border-radius-small: calc(var(--border-radius-base) * 1);
  --border-radius-normal: calc(var(--border-radius-base) * 2);
  --border-radius-large: calc(var(--border-radius-base) * 3);
  --border-radius-extra-large: calc(var(--border-radius-base) * 4);
  --border-radius-round: 500px;

  --border-width-base: 1px;
  --border-width-1: calc(var(--border-width-base) * 1);
  --border-width-2: calc(var(--border-width-base) * 2);
  --border-width-3: calc(var(--border-width-base) * 3);

  --box-shadow-1: 0 1px 0 1px rgb(0 0 0 / 4%);
  --box-shadow-2: 0 1px 1px 0 rgb(0 0 0 / 20%);
  --box-shadow-3: 0 1px 12px 0 rgb(0 0 0 / 20%);
  --box-shadow-4: 0 2px 2px 0 rgba(0 0 0 / 20%);

  --z-1: 100;
  --z-2: 200;
  --z-3: 300;
  --z-4: 400;
  --z-5: 500;
  --z-float: 1100;
  --z-stack: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-tooltip: 1500;

  --block-size-em: 1em;
  --block-size-9: 9px;
  --block-size-10: 10px;
  --block-size-12: 12px;
  --block-size-14: 14px;
  --block-size-15: 15px;
  --block-size-16: 16px;
  --block-size-18: 18px;
  --block-size-20: 20px;
  --block-size-21: 21px;
  --block-size-22: 22px;
  --block-size-23: 23px;
  --block-size-28: 28px;
  --block-size-36: 36px;
  --block-size-40: 40px;

  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 12.75px; /* This is intentional */
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-21: 21px;
  --font-size-22: 22px;
  --font-size-30: 30px;

  --line-height-em: 1em;
  --line-height-base: 17.5px;
  --line-height-0: calc(var(--line-height-base) * 1);
  --line-height-1: calc(var(--line-height-base) * 1.1);
  --line-height-2: calc(var(--line-height-base) * 1.2);

  --font-weight-thin: 100;
  --font-weight-ultra-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-heavy: 900;
  --font-weight-black: 950;

  --sidebar-width: 345px;
  --nav-height: 53px;
  --save-footer-height: 0px;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-system:
      InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
      'Helvetica Neue', sans-serif;
  }
}

/*
 * Utility classes are classes that fit one of the following rules...
 *   1. They encapsulate individual css properties whose values are custom properties
 *   2. They contain css properties that are most often valuable when combined, like
 *      display + justify-content, top + left + right + bottom
 *   3. They contain css properties with non-obvious behaviors, like those needed
 *      to ellipsize text, or `min-width: 0` for in flex contexts
 *
 * Selector Structure
 *   .style[:modifier]-variant { ... }
 *
 * Shorthand Glossary
 *   .p* = padding
 *   .m* = margin
 *   .bg-* = background-color
 *   .c-* = color
 *   .r-* = border-radius
 *   .b-* = border-width
 *   .bc-* = border-color
 *   .f-* = fill
 *   .bs-* = box-shadow
 *   .x-* = width
 *   .y-* = height
 *   .z-* = z-index
 */

/* Spacing
***********************************/
.p-0 {
  padding: var(--spacing-0) !important;
}
.p-0-5 {
  padding: var(--spacing-0-5);
}
.p-1 {
  padding: var(--spacing-1);
}
.p-1-5 {
  padding: var(--spacing-1-5);
}
.p-2 {
  padding: var(--spacing-2);
}
.p-2-5 {
  padding: var(--spacing-2-5);
}
.p-3 {
  padding: var(--spacing-3);
}
.p-4 {
  padding: var(--spacing-4);
}

.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}
.px-0-5 {
  padding-left: var(--spacing-0-5);
  padding-right: var(--spacing-0-5);
}
.px-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}
.px-1-5 {
  padding-left: var(--spacing-1-5);
  padding-right: var(--spacing-1-5);
}
.px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}
.px-2-5 {
  padding-left: var(--spacing-2-5);
  padding-right: var(--spacing-2-5);
}
.px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}
.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.py-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}
.py-0-2-5 {
  padding-top: var(--spacing-0-2-5);
  padding-bottom: var(--spacing-0-2-5);
}
.py-0-5 {
  padding-top: var(--spacing-0-5);
  padding-bottom: var(--spacing-0-5);
}
.py-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}
.py-1-5 {
  padding-top: var(--spacing-1-5);
  padding-bottom: var(--spacing-1-5);
}
.py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}
.py-2-5 {
  padding-top: var(--spacing-2-5);
  padding-bottom: var(--spacing-2-5);
}
.py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}
.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.pt-0 {
  padding-top: var(--spacing-0) !important;
}
.pt-0-5 {
  padding-top: var(--spacing-0-5);
}
.pt-1 {
  padding-top: var(--spacing-1);
}
.pt-1-5 {
  padding-top: var(--spacing-1-5);
}
.pt-2 {
  padding-top: var(--spacing-2);
}
.pt-2-5 {
  padding-top: var(--spacing-2-5);
}
.pt-3 {
  padding-top: var(--spacing-3);
}
.pt-4 {
  padding-top: var(--spacing-4);
}

.pr-0 {
  padding-right: var(--spacing-0) !important;
}
.pr-0-5 {
  padding-right: var(--spacing-0-5);
}
.pr-1 {
  padding-right: var(--spacing-1);
}
.pr-1-5 {
  padding-right: var(--spacing-1-5);
}
.pr-2 {
  padding-right: var(--spacing-2);
}
.pr-2-5 {
  padding-right: var(--spacing-2-5);
}
.pr-3 {
  padding-right: var(--spacing-3);
}
.pr-4 {
  padding-right: var(--spacing-4);
}

.pb-0 {
  padding-bottom: var(--spacing-0) !important;
}
.pb-0-5 {
  padding-bottom: var(--spacing-0-5);
}
.pb-1 {
  padding-bottom: var(--spacing-1);
}
.pb-1-5 {
  padding-bottom: var(--spacing-1-5);
}
.pb-2 {
  padding-bottom: var(--spacing-2);
}
.pb-2-5 {
  padding-bottom: var(--spacing-2-5);
}
.pb-3 {
  padding-bottom: var(--spacing-3);
}
.pb-4 {
  padding-bottom: var(--spacing-4);
}

.pl-0 {
  padding-left: var(--spacing-0) !important;
}
.pl-0-5 {
  padding-left: var(--spacing-0-5);
}
.pl-1 {
  padding-left: var(--spacing-1);
}
.pl-1-5 {
  padding-left: var(--spacing-1-5);
}
.pl-2 {
  padding-left: var(--spacing-2);
}
.pl-2-5 {
  padding-left: var(--spacing-2-5);
}
.pl-3 {
  padding-left: var(--spacing-3);
}
.pl-4 {
  padding-left: var(--spacing-4);
}

.m-0 {
  margin: var(--spacing-0) !important;
}
.m-0-5 {
  margin: var(--spacing-0-5);
}
.m-1 {
  margin: var(--spacing-1);
}
.m-1-5 {
  margin: var(--spacing-1-5);
}
.m-2 {
  margin: var(--spacing-2);
}
.m-2-5 {
  margin: var(--spacing-2-5);
}
.m-3 {
  margin: var(--spacing-3);
}
.m-4 {
  margin: var(--spacing-4);
}

.mt-0 {
  margin-top: var(--spacing-0) !important;
}
.mt-0-5 {
  margin-top: var(--spacing-0-5);
}
.mt-1 {
  margin-top: var(--spacing-1);
}
.mt-1-5 {
  margin-top: var(--spacing-1-5);
}
.mt-2 {
  margin-top: var(--spacing-2);
}
.mt-2-5 {
  margin-top: var(--spacing-2-5);
}
.mt-3 {
  margin-top: var(--spacing-3);
}
.mt-4 {
  margin-top: var(--spacing-4);
}

.mr-0 {
  margin-right: var(--spacing-0) !important;
}
.mr-0-5 {
  margin-right: var(--spacing-0-5);
}
.mr-1 {
  margin-right: var(--spacing-1);
}
.mr-1-5 {
  margin-right: var(--spacing-1-5);
}
.mr-2 {
  margin-right: var(--spacing-2);
}
.mr-2-5 {
  margin-right: var(--spacing-2-5);
}
.mr-3 {
  margin-right: var(--spacing-3);
}
.mr-4 {
  margin-right: var(--spacing-4);
}

.mb-0 {
  margin-bottom: var(--spacing-0) !important;
}
.mb-0-5 {
  margin-bottom: var(--spacing-0-5);
}
.mb-1 {
  margin-bottom: var(--spacing-1);
}
.mb-1-5 {
  margin-bottom: var(--spacing-1-5);
}
.mb-2 {
  margin-bottom: var(--spacing-2);
}
.mb-2-5 {
  margin-bottom: var(--spacing-2-5);
}
.mb-3 {
  margin-bottom: var(--spacing-3);
}
.mb-4 {
  margin-bottom: var(--spacing-4);
}
.mb-label {
  margin-bottom: 6px;
}

.ml-0 {
  margin-left: var(--spacing-0) !important;
}
.ml-0-5 {
  margin-left: var(--spacing-0-5);
}
.ml-1 {
  margin-left: var(--spacing-1);
}
.ml-1-5 {
  margin-left: var(--spacing-1-5);
}
.ml-2 {
  margin-left: var(--spacing-2);
}
.ml-2-5 {
  margin-left: var(--spacing-2-5);
}
.ml-3 {
  margin-left: var(--spacing-3);
}
.ml-4 {
  margin-left: var(--spacing-4);
}

.d-none {
  display: none;
}
.d\:hover-block:hover {
  display: block;
}
.d\:hover-none:hover {
  display: none;
}

/* Typography
***********************************/
.line-height-em {
  line-height: var(--line-height-em);
}
.line-height-0 {
  line-height: var(--line-height-0);
}
.line-height-1 {
  line-height: var(--line-height-1);
}
.line-height-2 {
  line-height: var(--line-height-2);
}

.size-10 {
  font-size: var(--font-size-10);
}
.size-11 {
  font-size: var(--font-size-11);
}
.size-12 {
  font-size: var(--font-size-12);
}
.size-13 {
  font-size: var(--font-size-13);
}
.size-14 {
  font-size: var(--font-size-14);
}
.size-15 {
  font-size: var(--font-size-15);
}
.size-16 {
  font-size: var(--font-size-16);
}
.size-17 {
  font-size: var(--font-size-17);
}
.size-18 {
  font-size: var(--font-size-18);
}
.size-19 {
  font-size: var(--font-size-19);
}
.size-21 {
  font-size: var(--font-size-21);
}
.size-22 {
  font-size: var(--font-size-22);
}
.size-30 {
  font-size: var(--font-size-30);
}

.weight-thin {
  font-weight: var(--font-weight-thin);
}
.weight-ultra-light {
  font-weight: var(--font-weight-ultra-light);
}
.weight-light {
  font-weight: var(--font-weight-light);
}
.weight-normal {
  font-weight: var(--font-weight-normal);
}
.weight-medium {
  font-weight: var(--font-weight-medium);
}
.weight-semibold {
  font-weight: var(--font-weight-semibold);
}
.weight-bold {
  font-weight: var(--font-weight-bold);
}
.weight-extra-bold {
  font-weight: var(--font-weight-extra-bold);
}
.weight-heavy {
  font-weight: var(--font-weight-heavy);
}
.weight-black {
  font-weight: var(--font-weight-black);
}

.font-system {
  font-family: var(--font-system);
}
.font-monospace {
  font-family: var(--font-monospace);
}
.font-compact {
  font-family: var(--font-compact);
}

.antialias {
  -webkit-font-smoothing: antialiased;
}

/* Color
***********************************/
.bg-white {
  background-color: var(--white) !important;
}
.bg-gray-10 {
  background-color: var(--gray-10) !important;
}
.bg-gray-11 {
  background-color: var(--gray-11) !important;
}
.bg-gray-12 {
  background-color: var(--gray-12) !important;
}
.bg-gray-13 {
  background-color: var(--gray-13) !important;
}
/* Note: If you edit these, add an equivalent in print.css */
.bg-green-6 {
  background-color: var(--green-6) !important;
}
.bg-green-primary {
  background-color: var(--green-primary);
}
.bg-blue-2-5 {
  background: var(--blue-2-5) !important;
}
.bg\:hover-blue-2-5:hover {
  background: var(--blue-2-5) !important;
}
/* Note: If you edit these, add an equivalent in print.css */
.bg-blue-11 {
  background: var(--blue-11) !important;
}
.bg\:hover-blue-11:hover {
  background: var(--blue-11) !important;
}
.bg-blue-12 {
  background: var(--blue-12) !important;
}
.bg\:hover-blue-12:hover {
  background: var(--blue-12) !important;
}
.bg-blue-13 {
  background: var(--blue-13) !important;
}
/* Note: If you edit these, add an equivalent in print.css */
.bg-blue-primary {
  background: var(--blue-primary) !important;
}
.bg\:hover-blue-primary:hover {
  background: var(--blue-primary) !important;
}
.bg-blue-highlight {
  background: var(--blue-highlight) !important;
}
.bg-red-primary {
  background: var(--red-primary) !important;
}
.bg-yellow-50 {
  background: var(--yellow-50) !important;
}
.bg-yellow-20 {
  background: var(--yellow-20) !important;
}
.bg-yellow-10 {
  background: var(--yellow-10) !important;
}
.bg-yellow-9 {
  background: var(--yellow-9) !important;
}
.bg-yellow-6 {
  background: var(--yellow-6) !important;
}

.bc-transparent {
  border-color: var(--transparent);
}
.bc-gray-4 {
  border-color: var(--gray-4);
}
.bc-gray-8 {
  border-color: var(--gray-8);
}
.bc-gray-9 {
  border-color: var(--gray-9);
}
.bc-gray-10 {
  border-color: var(--gray-10);
}
.bc-gray-11 {
  border-color: var(--gray-11);
}
.bc-gray-14 {
  border-color: var(--gray-14);
}
.bc-blue-8 {
  border-color: var(--blue-8);
}
.bc-blue-9 {
  border-color: var(--blue-9);
}
.bc-blue-11 {
  border-color: var(--blue-11);
}
.bc-blue-primary {
  border-color: var(--blue-primary);
}
.bc-blue-primary-dark {
  border-color: var(--blue-primary-dark);
}

.c-white {
  color: var(--white);
}
.c\:hover-white:hover {
  color: var(--white);
}
.c-red-6 {
  color: var(--red-6);
}
.c-red-primary {
  color: var(--red-primary);
}
.c-blue-3 {
  color: var(--blue-3);
}
.c-blue-4 {
  color: var(--blue-4);
}
.c-blue-5 {
  color: var(--blue-5);
}
.c-blue-6 {
  color: var(--blue-6);
}
.c-blue-7 {
  color: var(--blue-7);
}
.c-blue-10 {
  color: var(--blue-10);
}
.c-blue-primary {
  color: var(--blue-primary);
}
.c-gray-1 {
  color: var(--gray-1);
}
.c-gray-3 {
  color: var(--gray-3);
}
.c-gray-5 {
  color: var(--gray-5);
}
.c-gray-6 {
  color: var(--gray-6);
}
.c-gray-7 {
  color: var(--gray-7);
}
.c-gray-8 {
  color: var(--gray-8);
}
.c-gray-9 {
  color: var(--gray-9);
}
.c-gray-10 {
  color: var(--gray-10);
}
.c-gray-11 {
  color: var(--gray-11);
}
.c-gray-12 {
  color: var(--gray-12);
}
.c-gray-60 {
  color: var(--gray-60);
}
.c\:hover-gray-5:hover {
  color: var(--gray-5);
}
.c-gray-primary {
  color: var(--gray-primary);
}
.c-green-4 {
  color: var(--green-4);
}
.c-yellow-5 {
  color: var(--yellow-5);
}
.c-yellow-7 {
  color: var(--yellow-7);
}

.f-gray-7 {
  fill: var(--gray-7) !important;
}
.f-gray-8 {
  fill: var(--gray-8) !important;
}
.f-blue-9 {
  fill: var(--blue-9) !important;
}
.f-green-6 {
  fill: var(--green-6) !important;
}
.f-yellow-6 {
  fill: var(--yellow-6) !important;
}
.f-red-6 {
  fill: var(--red-6) !important;
}
.f-white {
  fill: var(--white) !important;
}

/* Borders
***********************************/
.r-small {
  border-radius: var(--border-radius-small);
}
.r-normal {
  border-radius: var(--border-radius-normal);
}
.r-large {
  border-radius: var(--border-radius-large);
}
.r-extra-large {
  border-radius: var(--border-radius-extra-large);
}
.r-round {
  border-radius: var(--border-radius-round);
}

.b-1 {
  border-style: solid;
  border-width: var(--border-width-1);
}
.b-2 {
  border-style: solid;
  border-width: var(--border-width-2);
}
.b-3 {
  border-style: solid;
  border-width: var(--border-width-3);
}

.b\:b-1 {
  border-style: solid;
  border-width: var(--border-width-1);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}
.b\:t-1 {
  border-style: solid;
  border-width: var(--border-width-1);
  border-bottom-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}
.b\:l-1 {
  border-style: solid;
  border-width: var(--border-width-1);
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}
.b\:l-2 {
  border-style: solid;
  border-width: var(--border-width-2);
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}
.b\:r-1 {
  border-style: solid;
  border-width: var(--border-width-1);
  border-top-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
}

.b\:x-1 {
  border-style: solid;
  border-width: var(--border-width-1);
  border-top-width: 0;
  border-bottom-width: 0;
}
.b\:y-1 {
  border-style: solid;
  border-width: var(--border-width-1);
  border-left-width: 0;
  border-right-width: 0;
}

.b\:list-1 {
  border-style: solid;
  border-width: var(--border-width-1);
}
.b\:list-1 ~ .b\:list-1 {
  border-top-width: 0;
}

.b\:hr-1 {
  border-style: solid;
  border-width: 0;
}
.b\:hr-1 ~ .b\:hr-1 {
  border-top-width: var(--border-width-1);
}

.b\:xlist-1 {
  border-style: solid;
  border-width: var(--border-width-1);
  border-width: 0;
}
.b\:xlist-1 ~ .b\:xlist-1 {
  border-left-width: 1px;
}

.bs-1 {
  box-shadow: var(--box-shadow-1);
}
.bs-2 {
  box-shadow: var(--box-shadow-2);
}
.bs-3 {
  box-shadow: var(--box-shadow-3);
}

/* Blocks
***********************************/
.block-9 {
  box-sizing: border-box;
  height: var(--block-size-9);
  width: var(--block-size-9);
  flex: 0 0 var(--block-size-9);
}
.block-10 {
  box-sizing: border-box;
  height: var(--block-size-10);
  width: var(--block-size-10);
  flex: 0 0 var(--block-size-10);
}
.block-12 {
  box-sizing: border-box;
  height: var(--block-size-12);
  width: var(--block-size-12);
  flex: 0 0 var(--block-size-12);
}
.block-14 {
  box-sizing: border-box;
  height: var(--block-size-14);
  width: var(--block-size-14);
  flex: 0 0 var(--block-size-14);
}
.block-15 {
  box-sizing: border-box;
  height: var(--block-size-15);
  width: var(--block-size-15);
  flex: 0 0 var(--block-size-15);
}
.block-16 {
  box-sizing: border-box;
  height: var(--block-size-16);
  width: var(--block-size-16);
  flex: 0 0 var(--block-size-16);
}
.block-18 {
  box-sizing: border-box;
  height: var(--block-size-18);
  width: var(--block-size-18);
  flex: 0 0 var(--block-size-18);
}
.block-20 {
  box-sizing: border-box;
  height: var(--block-size-20);
  width: var(--block-size-20);
  flex: 0 0 var(--block-size-20);
}
.block-21 {
  box-sizing: border-box;
  height: var(--block-size-21);
  width: var(--block-size-21);
  flex: 0 0 var(--block-size-21);
}
.block-22 {
  box-sizing: border-box;
  height: var(--block-size-22);
  width: var(--block-size-22);
  flex: 0 0 var(--block-size-22);
}
.block-23 {
  box-sizing: border-box;
  height: var(--block-size-23);
  width: var(--block-size-23);
  flex: 0 0 var(--block-size-23);
}
.block-28 {
  box-sizing: border-box;
  height: var(--block-size-28);
  width: var(--block-size-28);
  flex: 0 0 var(--block-size-28);
}
.block-36 {
  box-sizing: border-box;
  height: var(--block-size-36);
  width: var(--block-size-36);
  flex: 0 0 var(--block-size-36);
}
.block-40 {
  box-sizing: border-box;
  height: var(--block-size-40);
  width: var(--block-size-40);
  flex: 0 0 var(--block-size-40);
}

.x-em {
  width: var(--block-size-em);
}

.y-em {
  height: var(--block-size-em);
}

/* Layout
***********************************/
.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);
}
.z-float {
  z-index: var(--z-float);
}
.z-stack {
  z-index: var(--z-stack);
}
.z-modal {
  z-index: var(--z-modal);
}
.z-popover {
  z-index: var(--z-popover);
}
.z-tooltip {
  z-index: var(--z-tooltip);
}

/* Flexbox
***********************************/
/* These follow the convention of .flex-{direction}-{main-axis-alignment}-{cross-axis-alignment} */
.flex-row-center-start {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.flex-row-center-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-row-center-end {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.flex-row-end-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
}
.flex-row-end-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.flex-row-end-stretch {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
}
.flex-row-start-stretch {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
.flex-row-between-normal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: normal;
}
.flex-row-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.flex-row-between-start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.flex-row-between-end {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.flex-row-between-stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}
.flex-row-normal-normal {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: normal;
}
.flex-row-normal-stretch {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: stretch;
}
.flex-row-normal-start {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: flex-start;
}
.flex-row-normal-end {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: flex-end;
}
.flex-row-end-normal {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: normal;
}
.flex-row-normal-center {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: center;
}
.flex-row-start-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.flex-row-stretch-normal {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: normal;
}
.flex-col-normal-normal {
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: normal;
}
.flex-col-stretch-normal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: normal;
}
.flex-col-start-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.flex-col-center-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.flex-col-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-col-center-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}
.flex-col-normal-center {
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: center;
}
.flex-col-end-center {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

/* Sets the flex item behavior and automatically sets min-width to zero. This ensures that elements scale in
size without considering the natural dimensions of their content. */
.flex-item-static {
  flex: 0 0 auto;
  min-width: auto;
  min-height: auto;
}
.flex-item-fill {
  flex: 1 0 100%;
  min-width: 0;
  min-height: 0;
}
.flex-item-grow {
  flex: 1 0 auto;
  min-width: 0;
  min-height: 0;
}
.flex-item-shrink {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
}
.flex-item-fit {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.flex-item-fit-0 {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
}
.flex-item-em {
  flex: 0 0 1em;
  min-width: 0;
  min-height: 0;
}

/* Utils
***********************************/
.state-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
.state-disabled-2 {
  opacity: 0.25;
  pointer-events: none;
  cursor: not-allowed;
}
.visual-disabled {
  opacity: 0.5;
  cursor: default;
}
.visual-disabled-2 {
  opacity: 0.25;
  cursor: not-allowed;
}
.input-disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
  background-color: #f7f7f7 !important;
  border-color: #d0d5de !important;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word-wrap {
  white-space: normal;
  overflow: auto;
  text-overflow: clip;
}
.rotate-90-cw {
  transform: rotate(90deg);
}
.rotate-90-ccw {
  transform: rotate(-90deg);
}
.rotate-180 {
  transform: rotate(180deg);
}
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.events-none {
  pointer-events: none;
}
.break-word {
  word-wrap: break-word;
  hyphens: auto;
}

/* Smart Bear Design Kit */
.sb-button-medium {
  font-family: var(--font-system);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 10px;
}

.sb-label-medium {
  font-family: var(--font-system);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.sb-body2-regular {
  font-family: var(--font-system);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.sb-body2-medium {
  font-family: var(--font-system);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}

.sb-body3-regular {
  font-family: var(--font-system);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.sb-body3-medium {
  font-family: var(--font-system);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.sb-h2-regular {
  font-family: var(--font-system);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

.sb-h3-medium {
  font-family: var(--font-system);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}

.sb-h4-medium {
  font-family: var(--font-system);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.sb-link {
  color: var(--color-Accent-2);
  text-decoration: none;
}

.sb-link:hover {
  color: var(--color-Accent-60);
  text-decoration: underline;
}

/* Reflect Design Kit */
.tooltip-border-light {
  border: 1px solid var(--color-Neutral-30);
}

.tooltip-text {
  font-family: var(--font-system);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
}

.body1 {
  font-family: var(--font-system);
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}

.body2 {
  font-family: var(--font-system);
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.heading3 {
  font-family: var(--font-system);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.heading4 {
  font-family: var(--font-system);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.heading5 {
  font-family: var(--font-system);
  font-size: 11px;
  font-style: normal;
  line-height: 16px;
}

.shadow2 {
  box-shadow: 1px 5px 10px 2px rgba(91, 91, 100, 0.3);
}

@charset "UTF-8";

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-system);
  font-feature-settings:
    'liga' 1,
    'calt' 1; /* fix for Chrome (src: https://rsms.me/inter/download/) */
  font-size: 14px;
  color: var(--gray-5);
  height: 100%;
  background-color: var(--blue-12);
  overflow: hidden;
}

a {
  color: var(--blue-6);
}

a.small {
  font-size: 13px;
}

.flexbox-col {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
}

.flexbox-row {
  display: flex !important;
}

.flexbox-inline {
  display: inline-flex !important;
}

.min-width-0 {
  min-width: 0;
}

.min-height-0 {
  min-height: 0;
}

.wrap {
  flex-wrap: wrap;
}

.stretch {
  flex-grow: 1;
}

.static {
  flex: 0 0 auto;
}

.shrink {
  flex-shrink: 1;
}

.no-shrink {
  flex-shrink: 0;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

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

.align-self-center {
  align-self: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.invisible {
  opacity: 0;
}

.hidden {
  display: none !important;
}

.height-100 {
  height: 100%;
}

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

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

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

table.collapsed {
  border-collapse: collapse;
}

table.fixed {
  table-layout: fixed;
}

.vertical-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  text-overflow: clip;
}

.no-scroll {
  overflow: hidden;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
}

.antialias {
  -webkit-font-smoothing: antialiased;
}

svg {
  display: block;
  height: 20px;
  width: 20px;
  flex-basis: 20px;
  flex-grow: 0;
  flex-shrink: 0;
  fill: #14919b;
}

svg.disabled {
  fill: #5f6368 !important;
}

h1.alternate {
  font-weight: 500;
  font-size: 32px;
}

h2 {
  font-size: 26px;
  font-weight: normal;
  margin: 8px 0;
}

h3 {
  font-size: 22px;
  font-weight: normal;
  margin: 3px 0;
}

h3.alternate {
  font-weight: 500;
  font-size: 21px;
  margin: 3px 0;
}

h4 {
  font-weight: 500;
  font-size: 18px;
  margin: 3px 0;
}

h4.alternate {
  font-weight: 500;
  font-size: 17px;
}

h5 {
  font-size: 18px;
  font-weight: normal;
  margin: 3px 0;
}

h5.alternate {
  color: #334e68;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}

h6 {
  font-size: 16px;
  font-weight: 500;
  margin: 3px 0;
}

label {
  color: #858585;
}

p {
  font-size: 15px;
  line-height: 21px;
}

p.small {
  font-size: 14px;
  line-height: 1.7em;
}

p.extra-small {
  font-size: 13px;
  line-height: 18px;
}

pre {
  font-family: var(--font-monospace);
}

input {
  padding: 0;
  border-width: 1px;
}

svg.icon-component {
  --icon-size: 16px;
  height: var(--icon-size);
  width: var(--icon-size);
  flex-basis: var(--icon-size);
  padding: 1px;
}

svg.svg-icon {
  fill: none;
}

input[type='text'],
input[type='password'],
input[type='number'] {
  font-family: var(--font-system);
  background: white;
  border: 1px solid var(--gray-11);
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
  border-radius: 3px;
  color: var(--gray-6);
  font-size: 14px;
  box-shadow:
    rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type='text'].no-border {
  border: 0 none;
  box-shadow: inherit;
  height: inherit;
  line-height: inherit;
}

input[type='text'].small {
  font-size: 13px;
}

input[type='text']:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type='range'].dark-mode {
  cursor: pointer;
  -webkit-appearance: none;
  width: 100%;
  border-radius: 7px;
  height: 7px;
  border-width: 0;
  background: #2b2e37;
}

input[type='range']:focus.dark-mode {
  outline: none;
}

input[type='range'].dark-mode.thumb-hidden::-webkit-slider-thumb {
  -webkit-appearance: none;
}

textarea {
  border: 1px solid var(--gray-11);
  resize: none;
  font-size: 14px;
  font-family: var(--font-system);
  line-height: 24px;
  color: var(--gray-6);
  padding: 8px;
  box-shadow:
    rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input::placeholder,
textarea::placeholder {
  color: #bfbfbf;
}

:focus {
  outline: none;
}

select {
  display: block;
  font-size: 14px;
  color: var(--gray-6);
  font-family: inherit;
  line-height: 1.3;
  padding: 0.6em 1.4em 0.5em 0.8em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--gray-11);
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position:
    right 0.7em top 50%,
    0 0;
  background-size:
    0.65em auto,
    100%;
}
select::-ms-expand {
  display: none;
}
select:hover {
  border-color: var(--gray-7);
}
select:focus {
  border-color: var(--gray-8);
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: var(--gray-1);
  outline: none;
}
select option {
  font-weight: normal;
}

.popper-ignore-inline > .inline-block {
  display: block !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-text {
  cursor: text !important;
}

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

.button {
  font-size: 14px;
  font-weight: 600;
  height: 43px;
  line-height: 41px;
  padding: 0 16px;
  background: var(--green-5);
  color: white;
  border-radius: 4px;
  text-decoration: none;
  display: block;
  border: 0 none;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.button svg {
  margin-right: 4px;
}

.button.link {
  color: var(--blue-6);
  text-decoration: underline;
  background: inherit;
  border: 0 none;
  font-weight: normal;
  display: initial;
  height: inherit;
  line-height: inherit;
  padding: 0;
}

.button.small {
  font-size: 14px;
  height: 34px;
  line-height: 34px;
  padding: 0 12px;
}

.button.smaller {
  font-size: 13px;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}

.button.icon.small {
  padding: 0 3px;
}

.button.icon.small img {
  height: 36px;
  vertical-align: middle;
}

.button.extra-small {
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
}

.button-group .button.icon.small img {
  height: 30px;
}

.button-group .button:first-child {
  border-radius: 5px 0 0 5px;
}

.button-group .button.selection {
  background: #f0f4ff;
  color: var(--gray-6);
}

.button-group .button:first-child {
  border-radius: 5px 0 0 5px;
}

.button-group .button {
  background: white;
  border: 1px solid var(--blue-10);
  color: var(--blue-4);
  border-radius: 0;
}

.button-group .button:last-child {
  border-radius: 0 5px 5px 0;
}

.button-group .icon.small {
  height: inherit;
}

.button-group * {
  margin: 0 !important;
}

.button.button-inverse {
  color: var(--blue-5);
  background: none;
  border: 2px solid var(--blue-8);
  line-height: 30px;
}

.button.button-inverse.active {
  border: 2px solid var(--blue-5);
  background: var(--blue-7);
  color: white;
}

.button.button-inverse.active svg {
  fill: white;
}

.button.button-inverse-link {
  color: var(--blue-5);
  background: none;
  border: 0 none;
  line-height: 30px;
}

.button.button-inverse-link.alternate {
  text-decoration: underline;
}

.button.dark-mode {
  background: #4b5c72;
  border: 2px solid #546070;
  color: var(--gray-11);
}

.button.button-inverse.dark-mode {
  background: var(--blue-3);
  border-radius: 11px;
  color: var(--gray-8);
}

.button.extra-small {
  font-size: 12px;
  height: 30px;
  line-height: 26px;
  padding: 0 8px;
  font-weight: 500;
}

.button.disabled {
  opacity: 0.4;
  cursor: auto;
}

.button-bar {
  display: flex;
  align-items: center;
}

.button-bar * {
  margin: 0 3px;
}

[v-cloak] {
  display: none !important;
}

.font-normal {
  font-family: var(--font-system);
}

.bg-failed {
  background: var(--color-red-70) !important;
}
.bg-passed {
  background: var(--color-green-70) !important;
}

.bg-blue-1 {
  background: var(--blue-1) !important;
}
.bg-blue-2 {
  background: var(--blue-2) !important;
}
.bg-blue-3 {
  background: var(--blue-3) !important;
}
.bg-blue-4 {
  background: var(--blue-4) !important;
}
.bg-blue-5 {
  background: var(--blue-5) !important;
}
.bg-blue-6 {
  background: var(--blue-6) !important;
}
.bg-blue-7 {
  background: var(--blue-7) !important;
}
.bg-blue-8 {
  background: var(--blue-8) !important;
}
.bg-blue-9 {
  background: var(--blue-9) !important;
}
.bg-blue-10 {
  background: var(--blue-10) !important;
}
.bg-blue-11 {
  background: var(--blue-11) !important;
}
.bg-blue-highlight {
  background: var(--blue-highlight) !important;
}
.bg-blue-primary {
  background: var(--blue-primary) !important;
}

.hover\:bg-blue-1:hover {
  background: var(--blue-1) !important;
}
.hover\:bg-blue-2:hover {
  background: var(--blue-2) !important;
}
.hover\:bg-blue-3:hover {
  background: var(--blue-3) !important;
}
.hover\:bg-blue-4:hover {
  background: var(--blue-4) !important;
}
.hover\:bg-blue-5:hover {
  background: var(--blue-5) !important;
}
.hover\:bg-blue-6:hover {
  background: var(--blue-6) !important;
}
.hover\:bg-blue-7:hover {
  background: var(--blue-7) !important;
}
.hover\:bg-blue-8:hover {
  background: var(--blue-8) !important;
}
.hover\:bg-blue-9:hover {
  background: var(--blue-9) !important;
}
.hover\:bg-blue-10:hover {
  background: var(--blue-10) !important;
}
.hover\:bg-blue-11:hover {
  background: var(--blue-11) !important;
}
.hover\:bg-blue-12:hover {
  background: var(--blue-12) !important;
}
.hover\:bg-blue-highlight:hover {
  background: var(--blue-highlight) !important;
}
.hover\:bg-blue-13:hover {
  background: var(--blue-13) !important;
}
.hover\:bg-blue-primary:hover {
  background: var(--blue-primary) !important;
}

.bg-red-2 {
  background: var(--red-2) !important;
}
.bg-red-3 {
  background: var(--red-3) !important;
}
.bg-red-4 {
  background: var(--red-4) !important;
}
.bg-red-5 {
  background: var(--red-5) !important;
}
.bg-red-6 {
  background: var(--red-6) !important;
}
.bg-red-11 {
  background: var(--red-11) !important;
}
.bg-red-12 {
  background: var(--red-12) !important;
}
.bg-red-primary {
  background: var(--red-primary) !important;
}

.bg-green-4 {
  background: var(--green-4) !important;
}
.bg-green-5 {
  background: var(--green-5) !important;
}
.bg-green-12 {
  background: var(--green-12) !important;
}
.bg-green-primary {
  background: var(--green-primary) !important;
}

.bg-gray-1 {
  background: var(--gray-1) !important;
}
.bg-gray-2 {
  background: var(--gray-2) !important;
}
.bg-gray-3 {
  background: var(--gray-3) !important;
}
.bg-gray-4 {
  background: var(--gray-4) !important;
}
.bg-gray-5 {
  background: var(--gray-5) !important;
}
.bg-gray-6 {
  background: var(--gray-6) !important;
}
.bg-gray-7 {
  background: var(--gray-7) !important;
}
.bg-gray-8 {
  background: var(--gray-8) !important;
}
.bg-gray-9 {
  background: var(--gray-9) !important;
}
.bg-gray-11 {
  background: var(--gray-11) !important;
}
.bg-gray-12 {
  background: var(--gray-12) !important;
}

.bg-yellow-6 {
  background: var(--yellow-6) !important;
}
.bg-yellow-7 {
  background: var(--yellow-7) !important;
}
.bg-yellow-8 {
  background: var(--yellow-8) !important;
}
.bg-yellow-9 {
  background: var(--yellow-9) !important;
}
.bg-yellow-10 {
  background: var(--yellow-10) !important;
}
.bg-yellow-20 {
  background: var(--yellow-20) !important;
}
.bg-yellow-50 {
  background: var(--yellow-50) !important;
}

.fill-white {
  fill: white !important;
}

.fill-blue-1 {
  fill: var(--blue-1) !important;
}
.fill-blue-2 {
  fill: var(--blue-2) !important;
}
.fill-blue-3 {
  fill: var(--blue-3) !important;
}
.fill-blue-4 {
  fill: var(--blue-4) !important;
}
.fill-blue-5 {
  fill: var(--blue-5) !important;
}
.fill-blue-6 {
  fill: var(--blue-6) !important;
}
.fill-blue-7 {
  fill: var(--blue-7) !important;
}
.fill-blue-8 {
  fill: var(--blue-8) !important;
}
.fill-blue-9 {
  fill: var(--blue-9) !important;
}
.fill-blue-10 {
  fill: var(--blue-10) !important;
}
.fill-blue-11 {
  fill: var(--blue-11) !important;
}
.fill-blue-12 {
  fill: var(--blue-12) !important;
}
.fill-blue-13 {
  fill: var(--blue-13) !important;
}
.fill-blue-primary {
  fill: var(--blue-primary) !important;
}

.fill-red-2 {
  fill: var(--red-2) !important;
}
.fill-red-3 {
  fill: var(--red-3) !important;
}
.fill-red-4 {
  fill: var(--red-4) !important;
}
.fill-red-5 {
  fill: var(--red-5) !important;
}
.fill-red-6 {
  fill: var(--red-6) !important;
}
.fill-red-11 {
  fill: var(--red-11) !important;
}
.fill-red-12 {
  fill: var(--red-12) !important;
}
.fill-red-primary {
  fill: var(--red-primary) !important;
}

.fill-green-4 {
  fill: var(--green-4) !important;
}
.fill-green-5 {
  fill: var(--green-5) !important;
}
.fill-green-6 {
  fill: var(--green-6) !important;
}
.fill-green-primary {
  fill: var(--green-primary) !important;
}

.fill-gray-1 {
  fill: var(--gray-1) !important;
}
.fill-gray-2 {
  fill: var(--gray-2) !important;
}
.fill-gray-3 {
  fill: var(--gray-3) !important;
}
.fill-gray-4 {
  fill: var(--gray-4) !important;
}
.fill-gray-5 {
  fill: var(--gray-5) !important;
}
.fill-gray-6 {
  fill: var(--gray-6) !important;
}
.fill-gray-7 {
  fill: var(--gray-7) !important;
}
.fill-gray-8 {
  fill: var(--gray-8) !important;
}
.fill-gray-9 {
  fill: var(--gray-9) !important;
}
.fill-gray-10 {
  fill: var(--gray-10) !important;
}
.fill-gray-11 {
  fill: var(--gray-11) !important;
}
.fill-gray-12 {
  fill: var(--gray-12) !important;
}
.fill-gray-primary {
  fill: var(--gray-primary) !important;
}

.fill-yellow-6 {
  fill: var(--yellow-6) !important;
}
.fill-yellow-7 {
  fill: var(--yellow-7) !important;
}
.fill-yellow-8 {
  fill: var(--yellow-8) !important;
}
.fill-yellow-9 {
  fill: var(--yellow-9) !important;
}
.fill-yellow-10 {
  fill: var(--yellow-10) !important;
}

.text-white {
  color: white !important;
}

.text-gray-1 {
  color: var(--gray-1) !important;
}
.text-gray-2 {
  color: var(--gray-2) !important;
}
.text-gray-3 {
  color: var(--gray-3) !important;
}
.text-gray-4 {
  color: var(--gray-4) !important;
}
.text-gray-5 {
  color: var(--gray-5) !important;
}
.text-gray-6 {
  color: var(--gray-6) !important;
}
.text-gray-7 {
  color: var(--gray-7) !important;
}
.text-gray-8 {
  color: var(--gray-8) !important;
}
.text-gray-9 {
  color: var(--gray-9) !important;
}
.text-gray-10 {
  color: var(--gray-10) !important;
}
.text-gray-11 {
  color: var(--gray-11) !important;
}
.text-gray-12 {
  color: var(--gray-12) !important;
}

.text-blue-1 {
  color: var(--blue-1) !important;
}
.text-blue-2 {
  color: var(--blue-2) !important;
}
.text-blue-3 {
  color: var(--blue-3) !important;
}
.text-blue-4 {
  color: var(--blue-4) !important;
}
.text-blue-5 {
  color: var(--blue-5) !important;
}
.text-blue-6 {
  color: var(--blue-6) !important;
}
.text-blue-7 {
  color: var(--blue-7) !important;
}
.text-blue-8 {
  color: var(--blue-8) !important;
}
.text-blue-9 {
  color: var(--blue-9) !important;
}
.text-blue-10 {
  color: var(--blue-10) !important;
}
.text-blue-11 {
  color: var(--blue-11) !important;
}
.text-blue-12 {
  color: var(--blue-12) !important;
}
.text-blue-13 {
  color: var(--blue-13) !important;
}
.text-blue-primary {
  color: var(--blue-primary) !important;
}

.text-red-2 {
  color: var(--red-2) !important;
}
.text-red-3 {
  color: var(--red-3) !important;
}
.text-red-4 {
  color: var(--red-4) !important;
}
.text-red-5 {
  color: var(--red-5) !important;
}
.text-red-6 {
  color: var(--red-6) !important;
}
.text-red-11 {
  color: var(--red-11) !important;
}
.text-red-12 {
  color: var(--red-12) !important;
}
.text-red-primary {
  color: var(--red-primary) !important;
}

.text-green-4 {
  color: var(--green-4) !important;
}
.text-green-5 {
  color: var(--green-5) !important;
}
.text-green-6 {
  color: var(--green-6) !important;
}
.text-green-primary {
  color: var(--green-primary) !important;
}

.text-yellow-5 {
  color: var(--yellow-5) !important;
}
.text-yellow-6 {
  color: var(--yellow-6) !important;
}
.text-yellow-7 {
  color: var(--yellow-7) !important;
}
.text-yellow-8 {
  color: var(--yellow-8) !important;
}
.text-yellow-9 {
  color: var(--yellow-9) !important;
}
.text-yellow-10 {
  color: var(--yellow-10) !important;
}

.b-blue-1 {
  border: 1px solid var(--blue-1);
}
.bt-blue-1 {
  border-top: 1px solid var(--blue-1);
}
.br-blue-1 {
  border-right: 1px solid var(--blue-1);
}
.bb-blue-1 {
  border-bottom: 1px solid var(--blue-1);
}
.bl-blue-1 {
  border-left: 1px solid var(--blue-1);
}

.b-blue-2 {
  border: 1px solid var(--blue-2);
}
.bt-blue-2 {
  border-top: 1px solid var(--blue-2);
}
.br-blue-2 {
  border-right: 1px solid var(--blue-2);
}
.bb-blue-2 {
  border-bottom: 1px solid var(--blue-2);
}
.bl-blue-2 {
  border-left: 1px solid var(--blue-2);
}

.b-blue-3 {
  border: 1px solid var(--blue-3);
}
.bt-blue-3 {
  border-top: 1px solid var(--blue-3);
}
.br-blue-3 {
  border-right: 1px solid var(--blue-3);
}
.bb-blue-3 {
  border-bottom: 1px solid var(--blue-3);
}
.bl-blue-3 {
  border-left: 1px solid var(--blue-3);
}

.b-blue-4 {
  border: 1px solid var(--blue-4);
}
.bt-blue-4 {
  border-top: 1px solid var(--blue-4);
}
.br-blue-4 {
  border-right: 1px solid var(--blue-4);
}
.bb-blue-4 {
  border-bottom: 1px solid var(--blue-4);
}
.bl-blue-4 {
  border-left: 1px solid var(--blue-4);
}

.b-blue-5 {
  border: 1px solid var(--blue-5);
}
.bt-blue-5 {
  border-top: 1px solid var(--blue-5);
}
.br-blue-5 {
  border-right: 1px solid var(--blue-5);
}
.bb-blue-5 {
  border-bottom: 1px solid var(--blue-5);
}
.bl-blue-5 {
  border-left: 1px solid var(--blue-5);
}

.b-blue-6 {
  border: 1px solid var(--blue-6);
}
.bt-blue-6 {
  border-top: 1px solid var(--blue-6);
}
.br-blue-6 {
  border-right: 1px solid var(--blue-6);
}
.bb-blue-6 {
  border-bottom: 1px solid var(--blue-6);
}
.bl-blue-6 {
  border-left: 1px solid var(--blue-6);
}

.b-blue-7 {
  border: 1px solid var(--blue-7);
}
.bt-blue-7 {
  border-top: 1px solid var(--blue-7);
}
.br-blue-7 {
  border-right: 1px solid var(--blue-7);
}
.bb-blue-7 {
  border-bottom: 1px solid var(--blue-7);
}
.bl-blue-7 {
  border-left: 1px solid var(--blue-7);
}

.b-blue-8 {
  border: 1px solid var(--blue-8);
}
.bt-blue-8 {
  border-top: 1px solid var(--blue-8);
}
.br-blue-8 {
  border-right: 1px solid var(--blue-8);
}
.bb-blue-8 {
  border-bottom: 1px solid var(--blue-8);
}
.bl-blue-8 {
  border-left: 1px solid var(--blue-8);
}

.b-dashed-blue-8 {
  border: 3px dashed var(--blue-8);
}
.bt-dashed-blue-8 {
  border-top: 3px dashed var(--blue-8);
}
.br-dashed-blue-8 {
  border-right: 3px dashed var(--blue-8);
}
.bb-dashed-blue-8 {
  border-bottom: 3px dashed var(--blue-8);
}
.bl-dashed-blue-8 {
  border-left: 3px dashed var(--blue-8);
}

.b-blue-9 {
  border: 1px solid var(--blue-9);
}
.bt-blue-9 {
  border-top: 1px solid var(--blue-9);
}
.br-blue-9 {
  border-right: 1px solid var(--blue-9);
}
.bb-blue-9 {
  border-bottom: 1px solid var(--blue-9);
}
.bl-blue-9 {
  border-left: 1px solid var(--blue-9);
}

.b-blue-10 {
  border: 1px solid var(--blue-10);
}
.bt-blue-10 {
  border-top: 1px solid var(--blue-10);
}
.br-blue-10 {
  border-right: 1px solid var(--blue-10);
}
.bb-blue-10 {
  border-bottom: 1px solid var(--blue-10);
}
.bl-blue-10 {
  border-left: 1px solid var(--blue-10);
}

.b-blue-11 {
  border: 1px solid var(--blue-11);
}
.bt-blue-11 {
  border-top: 1px solid var(--blue-11);
}
.br-blue-11 {
  border-right: 1px solid var(--blue-11);
}
.bb-blue-11 {
  border-bottom: 1px solid var(--blue-11);
}
.bl-blue-11 {
  border-left: 1px solid var(--blue-11);
}

.b-blue-12 {
  border: 1px solid var(--blue-12);
}
.bt-blue-12 {
  border-top: 1px solid var(--blue-12);
}
.br-blue-12 {
  border-right: 1px solid var(--blue-12);
}
.bb-blue-12 {
  border-bottom: 1px solid var(--blue-12);
}
.bl-blue-12 {
  border-left: 1px solid var(--blue-12);
}

.b-blue-13 {
  border: 1px solid var(--blue-13);
}
.bt-blue-13 {
  border-top: 1px solid var(--blue-13);
}
.br-blue-13 {
  border-right: 1px solid var(--blue-13);
}
.bb-blue-13 {
  border-bottom: 1px solid var(--blue-13);
}
.bl-blue-13 {
  border-left: 1px solid var(--blue-13);
}

.b-gray-1 {
  border: 1px solid var(--gray-1);
}
.bt-gray-1 {
  border-top: 1px solid var(--gray-1);
}
.br-gray-1 {
  border-right: 1px solid var(--gray-1);
}
.bb-gray-1 {
  border-bottom: 1px solid var(--gray-1);
}
.bl-gray-1 {
  border-left: 1px solid var(--gray-1);
}

.b-gray-2 {
  border: 1px solid var(--gray-2);
}
.bt-gray-2 {
  border-top: 1px solid var(--gray-2);
}
.br-gray-2 {
  border-right: 1px solid var(--gray-2);
}
.bb-gray-2 {
  border-bottom: 1px solid var(--gray-2);
}
.bl-gray-2 {
  border-left: 1px solid var(--gray-2);
}

.b-gray-3 {
  border: 1px solid var(--gray-3);
}
.bt-gray-3 {
  border-top: 1px solid var(--gray-3);
}
.br-gray-3 {
  border-right: 1px solid var(--gray-3);
}
.bb-gray-3 {
  border-bottom: 1px solid var(--gray-3);
}
.bl-gray-3 {
  border-left: 1px solid var(--gray-3);
}

.b-gray-4 {
  border: 1px solid var(--gray-4);
}
.bt-gray-4 {
  border-top: 1px solid var(--gray-4);
}
.br-gray-4 {
  border-right: 1px solid var(--gray-4);
}
.bb-gray-4 {
  border-bottom: 1px solid var(--gray-4);
}
.bl-gray-4 {
  border-left: 1px solid var(--gray-4);
}

.b-gray-5 {
  border: 1px solid var(--gray-5);
}
.bt-gray-5 {
  border-top: 1px solid var(--gray-5);
}
.br-gray-5 {
  border-right: 1px solid var(--gray-5);
}
.bb-gray-5 {
  border-bottom: 1px solid var(--gray-5);
}
.bl-gray-5 {
  border-left: 1px solid var(--gray-5);
}

.b-gray-6 {
  border: 1px solid var(--gray-6);
}
.bt-gray-6 {
  border-top: 1px solid var(--gray-6);
}
.br-gray-6 {
  border-right: 1px solid var(--gray-6);
}
.bb-gray-6 {
  border-bottom: 1px solid var(--gray-6);
}
.bl-gray-6 {
  border-left: 1px solid var(--gray-6);
}

.b-gray-7 {
  border: 1px solid var(--gray-7);
}
.bt-gray-7 {
  border-top: 1px solid var(--gray-7);
}
.br-gray-7 {
  border-right: 1px solid var(--gray-7);
}
.bb-gray-7 {
  border-bottom: 1px solid var(--gray-7);
}
.bl-gray-7 {
  border-left: 1px solid var(--gray-7);
}

.b-gray-8 {
  border: 1px solid var(--gray-8);
}
.bt-gray-8 {
  border-top: 1px solid var(--gray-8);
}
.br-gray-8 {
  border-right: 1px solid var(--gray-8);
}
.bb-gray-8 {
  border-bottom: 1px solid var(--gray-8);
}
.bl-gray-8 {
  border-left: 1px solid var(--gray-8);
}

.b-gray-9 {
  border: 1px solid var(--gray-9);
}
.bt-gray-9 {
  border-top: 1px solid var(--gray-9);
}
.br-gray-9 {
  border-right: 1px solid var(--gray-9);
}
.bb-gray-9 {
  border-bottom: 1px solid var(--gray-9);
}
.bl-gray-9 {
  border-left: 1px solid var(--gray-9);
}

.b-gray-10 {
  border: 1px solid var(--gray-10);
}
.bt-gray-10 {
  border-top: 1px solid var(--gray-10);
}
.br-gray-10 {
  border-right: 1px solid var(--gray-10);
}
.bb-gray-10 {
  border-bottom: 1px solid var(--gray-10);
}
.bl-gray-10 {
  border-left: 1px solid var(--gray-10);
}

.b-gray-11 {
  border: 1px solid var(--gray-11);
}
.bt-gray-11 {
  border-top: 1px solid var(--gray-11);
}
.br-gray-11 {
  border-right: 1px solid var(--gray-11);
}
.bb-gray-11 {
  border-bottom: 1px solid var(--gray-11);
}
.bl-gray-11 {
  border-left: 1px solid var(--gray-11);
}

.b-gray-12 {
  border: 1px solid var(--gray-12);
}
.bt-gray-12 {
  border-top: 1px solid var(--gray-12);
}
.br-gray-12 {
  border-right: 1px solid var(--gray-12);
}
.bb-gray-12 {
  border-bottom: 1px solid var(--gray-12);
}
.bl-gray-12 {
  border-left: 1px solid var(--gray-12);
}

.b-gray-13 {
  border: 1px dashed #858585;
}
.bt-gray-13 {
  border-top: 1px dashed #858585;
}
.br-gray-13 {
  border-right: 1px dashed #858585;
}
.bb-gray-13 {
  border-bottom: 1px dashed #858585;
}
.bl-gray-13 {
  border-left: 1px dashed #858585;
}

.b-yellow-6 {
  border: 1px solid var(--yellow-6);
}
.bt-yellow-6 {
  border-top: 1px solid var(--yellow-6);
}
.br-yellow-6 {
  border-right: 1px solid var(--yellow-6);
}
.bb-yellow-6 {
  border-bottom: 1px solid var(--yellow-6);
}
.bl-yellow-6 {
  border-left: 1px solid var(--yellow-6);
}

.b-yellow-7 {
  border: 1px solid var(--yellow-7);
}
.bt-yellow-7 {
  border-top: 1px solid var(--yellow-7);
}
.br-yellow-7 {
  border-right: 1px solid var(--yellow-7);
}
.bb-yellow-7 {
  border-bottom: 1px solid var(--yellow-7);
}
.bl-yellow-7 {
  border-left: 1px solid var(--yellow-7);
}

.b-yellow-8 {
  border: 1px solid var(--yellow-8);
}
.bt-yellow-8 {
  border-top: 1px solid var(--yellow-8);
}
.br-yellow-8 {
  border-right: 1px solid var(--yellow-8);
}
.bb-yellow-8 {
  border-bottom: 1px solid var(--yellow-8);
}
.bl-yellow-8 {
  border-left: 1px solid var(--yellow-8);
}

.b-yellow-9 {
  border: 1px solid var(--yellow-9);
}
.bt-yellow-9 {
  border-top: 1px solid var(--yellow-9);
}
.br-yellow-9 {
  border-right: 1px solid var(--yellow-9);
}
.bb-yellow-9 {
  border-bottom: 1px solid var(--yellow-9);
}
.bl-yellow-9 {
  border-left: 1px solid var(--yellow-9);
}

.b-yellow-10 {
  border: 1px solid var(--yellow-10);
}
.bt-yellow-10 {
  border-top: 1px solid var(--yellow-10);
}
.br-yellow-10 {
  border-right: 1px solid var(--yellow-10);
}
.bb-yellow-10 {
  border-bottom: 1px solid var(--yellow-10);
}
.bl-yellow-10 {
  border-left: 1px solid var(--yellow-10);
}

.b-yellow-20 {
  border: 1px solid var(--yellow-20);
}
.bt-yellow-20 {
  border-top: 1px solid var(--yellow-20);
}
.br-yellow-20 {
  border-right: 1px solid var(--yellow-20);
}
.bb-yellow-20 {
  border-bottom: 1px solid var(--yellow-20);
}
.bl-yellow-20 {
  border-left: 1px solid var(--yellow-20);
}

.b-yellow-50 {
  border: 1px solid var(--yellow-50);
}
.bt-yellow-50 {
  border-top: 1px solid var(--yellow-50);
}
.br-yellow-50 {
  border-right: 1px solid var(--yellow-50);
}
.bb-yellow-50 {
  border-bottom: 1px solid var(--yellow-50);
}
.bl-yellow-50 {
  border-left: 1px solid var(--yellow-50);
}

.b-red-11 {
  border: 1px solid var(--red-11);
}
.bt-red-11 {
  border-top: 1px solid var(--red-11);
}
.br-red-11 {
  border-right: 1px solid var(--red-11);
}
.bb-red-11 {
  border-bottom: 1px solid var(--red-11);
}
.bl-red-11 {
  border-left: 1px solid var(--red-11);
}

.b-radius-none {
  border-radius: 0 !important;
}
.b-radius-small {
  border-radius: 4px;
}

.m-auto {
  margin-left: auto;
  margin-right: auto;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}

.highlighted-selector,
.highlighted-selector-v2 {
  background-color: #fdfbca;
  color: #766f5f;
  font-weight: 500;
  border-bottom: 2px solid #e3e1b5;
  padding: 5px 6px;
  word-break: break-all;
}

.highlighted-selector.disabled,
.highlighted-selector-v2.disabled {
  opacity: 0.5;
}

.highlighted-selector.dark-mode,
.highlighted-selector-v2.dark-mode {
  background-color: #637a91;
  color: white;
  border-bottom: 2px solid #485a6b;
}

.highlighted-text,
.highlighted-text-v2 {
  background-color: #d7eefb;
  color: #637a91;
  font-weight: 500;
  border-bottom: 2px solid #acd3ea;
  padding: 5px 6px;
  word-break: break-all;
}

.highlighted-key,
.highlighted-key-v2 {
  background-color: var(--gray-10);
  border-bottom: 2px solid var(--gray-8);
  font-weight: 500;
  padding: 5px 6px;
  text-transform: capitalize;
}

.lowercase-first-letter::first-letter {
  text-transform: lowercase;
}

.highlighted-variable,
.highlighted-variable-v2 {
  background-color: var(--green-10);
  color: var(--green-3);
  font-weight: 500;
  border-bottom: 2px solid var(--green-5);
  padding: 5px 6px;
  word-break: break-all;
}

.highlighted-error,
.highlighted-error-v2 {
  background-color: var(--red-12);
  color: var(--red-6);
  font-weight: 500;
  border-bottom: 2px solid var(--red-5);
  padding: 5px 6px;
  word-break: break-all;
}

.highlighted-react-component,
.highlighted-react-component-v2 {
  color: #80adac;
}

.highlighted-text-v2,
.highlighted-key-v2,
.highlighted-variable-v2,
.highlighted-error-v2,
.highlighted-react-component-v2,
.highlighted-selector-v2 {
  padding: 3px 4px;
}

.highlighted-text-v2 {
  color: #637a91;
  border-bottom: 2px solid #acd3ea;
}

.highlighted-selector-v2 {
  border-bottom: 2px solid #e3e1b5;
}

.timestamp {
  background: var(--blue-12);
  border-radius: 4px;
  color: var(--blue-5);
  font-size: 13px;
  font-family: var(--font-compact);
  padding: 0 4px;
}

.hover-highlight:hover {
  background: var(--blue-highlight) !important;
  cursor: pointer;
}

@charset "UTF-8";

.auto-overflow {
  overflow: auto;
}

#app {
  height: 100%;
}

label {
  color: var(--gray-6);
}

button {
  /* Safari's default button styles include a 2px left/right margin */
  margin: 0;
}

.error-message,
#card-errors {
  font-size: 12px;
  color: red;
  margin-top: 6px;
}

input.error {
  border: 1px solid red;
  box-shadow: none;
}

header {
  height: 55px;
  position: relative;
}

header a.link {
  position: relative;
  font-weight: 600;
  text-decoration: none;
  color: var(--blue-primary);
}

header .logoicon {
  width: 28px;
  height: 28px;
}

header h1 {
  padding: 0 0 0 8px;
  margin: 0;
  display: inline-block;
  line-height: 31px;
  font-size: 21px;
  font-weight: 600;
  vertical-align: middle;
}

header .chevron {
  width: 10px;
  height: 6px;
  display: inline-block;
  vertical-align: top;
  padding-top: 14px;
  cursor: pointer;
}

.avatar-image {
  height: 28px;
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  cursor: pointer;
}

/* popover styles from vue-js-popover */
div[data-popover] {
  padding: 0;
  box-shadow: 1px 5px 10px 2px rgba(0, 0, 0, 0.25);
}

.tooltip-container {
  position: relative;
}

.tooltip-container:hover > .tooltip {
  display: block;
}

.tooltip {
  opacity: 1;
  display: none;
  line-height: 18px;
  font-size: 12px;
  position: absolute;
  width: 200px;
  background: #ffffff;
  color: var(--gray-5);
  text-align: center;
  top: calc(100% + 11px);
  left: 50%;
  transform: translateX(-83%);
  box-shadow: 1px 5px 10px 2px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}

.tooltip:after {
  bottom: 100%;
  left: 93%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: white;
  border-width: 8px;
  margin-left: -8px;
}

.tooltip.centered-arrow::after {
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bg-gray-1:after {
  border-bottom-color: var(--gray-1);
}

.tooltip-role:after {
  left: 50%;
}

header r-popover {
  display: none;
}

header .avatar:hover r-popover {
  display: block;
}

header h1::after {
  content: ' / ';
}

header h2 {
  padding: 0;
  margin: 0;
  display: inline-block;
  line-height: 31px;
  font-size: 18px;
  font-weight: 600;
  vertical-align: middle;
}

.content-fixed-width {
  width: 866px;
}

.sidebar {
  width: 345px;
  min-width: 345px;
}

.text-small {
  font-size: 13px;
}

.text-extra-small {
  font-size: 12px;
}

table.list {
  width: 100%;
  border-spacing: 0 3px;
}

table.list th {
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: 42px;
  padding-left: 8px;
  color: var(--gray-5);
}

table.list th:nth-child(1) {
  padding-left: 10px;
}

table.list tr.row {
  height: 46px;
  background: white;
}

table.list tr.row a {
  text-decoration: none;
}

table.list td {
  padding-left: 8px;
  color: var(--gray-6);
  border-top: 1px solid var(--gray-11);
  border-bottom: 1px solid var(--gray-11);
}

table.list td:nth-child(1) {
  border-left: 3px solid var(--green-primary);
}

table.list td:last-child {
  border-right: 1px solid var(--gray-11);
}

.settings-table {
  border-collapse: collapse;
}

.icon {
  box-sizing: border-box;
  vertical-align: middle;
}

.icon.small {
  height: 28px;
}

.sidebar-menu-item {
  border-radius: 4px;
  line-height: 32px;
  color: #3c3c57;
  font-size: 14px;
  font-weight: medium;
  text-decoration: none;
}

.sidebar-menu-item.active {
  background: #d8ebf5;
  color: #3d3adb;
}

.sidebar-menu-item:hover {
  color: #3d3adb;
}

.pagination {
  display: table;
  border-radius: 4px;
}

.pagination div {
  font-weight: 500;
  display: table-cell;
  color: var(--blue-4);
  border-top: 1px solid var(--blue-9);
  border-right: 1px solid var(--blue-9);
  border-bottom: 2px solid var(--blue-9);
  background: white;
  cursor: pointer;
  user-select: none;
  padding: 12px;
}

.pagination div:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid var(--blue-9);
}

.pagination div:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination div:hover {
  background: var(--blue-12);
}

.pagination div.selection {
  background: var(--blue-12);
}

.settings-table {
  text-align: left;
  width: 100%;
  font-size: 14px;
}

.settings-table {
  background: #f9fafb;
}

.settings-table th {
  color: #6f7583;
  font-weight: 400;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gray-9);
  line-height: 42px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

table.pane {
  text-align: left;
  width: 100%;
}

table.pane th {
  font-weight: normal;
  line-height: 32px;
  height: 32px;
  font-size: 13px;
  padding: 0px 8px;
  color: var(--blue-8);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--blue-11);
  position: sticky;
  top: 0;
  z-index: 10;
}

table.pane td {
  line-height: 30px;
  height: 30px;
  padding: 0px 8px;
}

table.pane tr.item {
  display: none;
  background: var(--gray-2);
}

table.pane tr.item:nth-of-type(odd) {
  background: var(--gray-3);
}

table.pane tr.item.active {
  display: table-row;
}

table.pane tr.item:last-child {
  border-bottom: 0 none;
}

.environment-badge {
  border-radius: 15px;
  background: #cfdcef;
  color: #8da0bc;
  padding: 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 22px;
  height: 22px;
  font-weight: 500;
}

.updated-badge {
  border-radius: 15px;
  background: var(--yellow-9);
  color: var(--yellow-5);
  padding: 0 8px;
  font-size: 12px;
  line-height: 22px;
  height: 22px;
  font-weight: 500;
}

.test-detail .sidebar {
  width: 449px;
  min-width: 449px;
}

.content-area {
  background-color: white;
  border: 1px solid var(--gray-9);
  border-radius: 4px;
}

.record-button {
  width: 15px;
  height: 15px;
  background: #cc0000;
  border: 7px solid #2b2e37;
  border-radius: 50%;
  margin-right: 6px;
}

.white-circle {
  height: 15px;
  width: 15px;
  min-width: 15px;
  border: 1px solid var(--gray-9);
  background-color: #fff;
  border-radius: 50%;
}

.pass-circle {
  height: 15px;
  width: 15px;
  min-width: 15px;
  background-color: var(--green-primary);
  border-radius: 50%;
}

.fail-circle {
  height: 15px;
  width: 15px;
  min-width: 15px;
  background-color: var(--red-primary);
  border-radius: 50%;
}

.pending-circle {
  height: 15px;
  width: 15px;
  min-width: 15px;
  background-color: var(--gray-10);
  border-radius: 50%;
}

.pass-circle.small,
.fail-circle.small {
  height: 12px;
  width: 12px;
  min-width: 12px;
}

.pass-circle.extra-small,
.fail-circle.extra-small {
  height: 10px;
  width: 10px;
  min-width: 10px;
}

/*
by default, overlay is visible…
*/
.scrim {
  position: fixed;
  z-index: 800;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--blue-6);
  color: white;
  overflow: hidden;
  text-align: center;
  width: 100%;
  -moz-transition:
    top 0.3s,
    right 0.3s,
    bottom 0.3s,
    left 0.3s;
  -webkit-transition:
    top 0.3s,
    right 0.3s,
    bottom 0.3s,
    left 0.3s;
  transition:
    top 0.3s,
    right 0.3s,
    bottom 0.3s,
    left 0.3s;
}

.modal {
  position: fixed;
  background: var(--gray-12);
  box-shadow: 1px 5px 10px 2px rgba(0, 0, 0, 0.25);
  height: 50px;
  width: 50px;
  top: 8%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  -moz-transition:
    height 0.3s,
    width 0.3s;
  -webkit-transition:
    height 0.3s,
    width 0.3s;
  transition:
    height 0.3s,
    width 0.3s;
  margin: 0 auto;
}

.modal .modal-contents {
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  vertical-align: middle;
}

.modal.slideover {
  top: 0;
  height: 100%;
  box-shadow: inherit;
  left: inherit;
  right: 0;
  width: calc(100% - 345px);
  border-left: 1px solid var(--gray-10);
  z-index: 100;
}

.scrim.disabled {
  right: 200%;
  left: -100%;
}

.hourly-disabled-tip {
  position: absolute;
  transform: translate(-85px, 30px);
  color: var(--gray-6);
  font-size: 11px;
  visibility: hidden;
}

.hourly-disabled-button:hover .hourly-disabled-tip {
  visibility: visible;
}

#confirm-modal .close,
#upload-file-modal .close,
#add-user-modal .close {
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
  position: relative;
  top: -3px;
}

#confirm-modal .modal-contents,
#upload-file-modal .modal-contents {
  width: 568px;
}

#add-user-modal .modal-contents {
  width: 394px;
}

#screen {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#screen div {
  overflow: hidden !important;
}

#screen canvas {
  cursor: pointer !important;
}

.login-section {
  width: 480px;
}

.recording #screen > div {
  width: calc(100vw - 345px) !important;
}

#screen.observing canvas {
  /* padding: 16px;
    background-image: url('@Assets/images/back-pattern.png'); */
}

.login {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  font-size: 15px;
}

.login input[disabled] {
  opacity: 1 !important;
}

.login button {
  font-size: 15px !important;
}

.login input {
  font-size: 15px;
}

.login-error {
  background: #d64545;
  border: 1px solid var(--red-4);
  color: white;
  border-radius: 4px;
  line-height: 22px;
  font-weight: 500;
}

.login-error svg {
  min-height: 26px;
  min-width: 26px;
  fill: #b43939;
}

.info-message {
  color: var(--yellow-5);
  border-radius: 4px;
  line-height: 22px;
}

.registration {
  font-size: 15px;
  width: 475px;
}

.running-spinner,
.running-spinner-flipped {
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.running-spinner-flipped {
  animation-name: spin-flipped;
}

.play-button {
  height: 30px;
  width: 30px;
  cursor: pointer;
}

.play-button.disabled {
  opacity: 0.5;
  cursor: default;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-flipped {
  from {
    transform: scale(1, -1) rotate(360deg);
  }
  to {
    transform: scale(1, -1) rotate(0deg);
  }
}

.calendar {
  width: 312px;
}

.calendar .day {
  height: 36px;
  width: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  background: white;
  cursor: pointer;
  user-select: none;
}

.calendar .day.selection {
  background: #daf0ff;
}

.pricing-plan {
  border-radius: 5px;
  background: #f6f6f6;
}

.pricing-plan.selected {
  border: 1px solid var(--blue-primary);
}

.pricing-plan.error {
  border: 1px solid red;
}

.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.recorder-info-screen {
  border-radius: 0;
  height: 100%;
  width: 100%;
  background: #201f26;
}

.recorder-info-screen > div {
  height: 100%;
}

@keyframes loading-period-one {
  15% {
    visibility: visible;
  }
}

@keyframes loading-period-two {
  30% {
    visibility: visible;
  }
}

@keyframes loading-period-three {
  45% {
    visibility: visible;
  }
}

.recorder-info-screen.active {
  display: block;
}

.recorder-info-screen .period {
  visibility: hidden;
}

.recorder-info-screen.active .period:nth-child(1) {
  animation: loading-period-one 3s step-end infinite;
}

.recorder-info-screen.active .period:nth-child(2) {
  animation: loading-period-two 3s step-end infinite;
}

.recorder-info-screen.active .period:nth-child(3) {
  animation: loading-period-three 3s step-end infinite;
}

#session-id-invalid-error {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
}

#session-id-invalid-error div {
  height: 100%;
  width: 400px;
}

.info-badge {
  background: #c9ced2;
  color: white;
  line-height: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 15px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
}

.button-badge {
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 500px;
  padding: 0 4px;
}

/* TODO: (Kyle) We cannot import anything but .ts files in our specs right now, so we can't use SFCs. Once we're able, we can
 * use the button-component instead of copying all of these styles here
 */
.button-component {
  font-size: 13px;
  padding: 0 8px;
  font-weight: var(--font-weight-medium);
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
  font-family: var(--font-system);
  border: 1px solid var(--gray-9);
  background: white;
  color: var(--blue-3);
  border-radius: 6px;
  height: initial;
  line-height: 30px;
  position: relative;
  cursor: pointer;
}

.button-component.small {
  line-height: 28px;
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
  font-weight: var(--font-weight-medium);
}

.accept-changes {
  background: #e0e5eb;
  border: 1px solid #afcddc !important;
  color: var(--blue-4);
}

.accept-changes.pending {
  border: 1px solid var(--blue-6);
  background: var(--blue-6);
  color: white;
}

.status-badge {
  border-radius: 15px;
  line-height: 24px;
  max-height: 24px;
  font-size: 11px;
  font-weight: 600;
  background: #cbd2d9;
  color: white;
  text-transform: uppercase;
}

.connection-badge {
  line-height: 22px;
  padding-left: 10px;
  padding-right: 10px;
}

.connected {
  background: var(--gray-12);
  color: var(--green-3);
}

.needs-review {
  background: var(--yellow-10);
  color: var(--yellow-5);
}

.connection-circle {
  border-radius: 50%;
  height: 6px;
  width: 6px;
  margin-right: 6px;
}

.connected .connection-circle {
  background: var(--green-6);
}

.needs-review .connection-circle {
  background: var(--yellow-6);
}

.variables-list {
  min-width: 264px;
  max-width: 350px;
}

.variables-list .option {
  color: var(--blue-4);
}

.variables-list .option div {
  color: var(--blue-3);
  font-size: 13px;
}

.variables-list .option span {
  color: var(--blue-5);
  font-size: 11px;
}

.variables-list .option:hover {
  color: white;
  background: var(--blue-primary);
}

.variables-list .option:hover div,
.variables-list .option:hover span {
  color: white;
}

.text-highlighter .with-message {
  background: #f6ffd9;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  border: 1px solid var(--blue-9);
}

.text-highlighter .text-section {
  padding-left: 17px;
  padding-right: 17px;
}

.text-highlighter .with-message .text-section {
  padding-left: 8px;
  padding-right: 8px;
}

.text-highlighter .text-highlight::selection {
  background: yellow;
  /*color: #8C830F;*/
  color: #5f5907;
}

.registration-container {
  margin: 32px auto;
  padding: 0 32px;
}

.color {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
}

#recorder-loading-screen .loading-message {
  color: #afb4cd;
  font-size: 15px;
  font-weight: 500;
}

.recorder-loading-progress-bar {
  width: 362px;
}

.recorder-loading-progress-bar .progress-bar.step-one {
  animation-name: progress-bar-step-one;
  animation-duration: 7000ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.recorder-loading-progress-bar .progress-bar.step-two {
  animation-name: progress-bar-step-two;
  animation-duration: 7000ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.recorder-loading-progress-bar .progress-bar.step-three {
  animation-name: progress-bar-step-three;
  animation-duration: 7000ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.recorder-loading-progress-bar .progress-bar.complete {
  animation-name: progress-bar-complete;
  animation-duration: 200ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.recorder-loading-warning-message {
  background: #0f0e11;
  color: #3b4c5d;
  border-radius: 3px;
  font-weight: 600;
  font-size: 13px;
}

.progress-bar {
  border-radius: 4px;
  background: #afb4cd;
  height: 6px;
  width: 0;
}

.progress-bar-remaining {
  border-radius: 4px;
  background: #363740;
  height: 6px;
}

.test-list-empty-state {
  height: 248px;
}

.test-list-empty-state-header {
  font-size: 22px;
  font-weight: 500;
}

.override-item:hover {
  background: var(--blue-11) !important;
}

.selection-variable {
  background: var(--yellow-10);
  color: var(--yellow-5);
  padding: 0 3px;
  border-radius: 4px;
  border: 1px solid var(--yellow-8);
}

.interactive-paragraph .interactive-paragraph-inner {
  border-left: 3px solid var(--blue-11);
}

.interactive-paragraph:hover {
  background: white;
  border: 1px solid var(--blue-11);
  color: var(--blue-2) !important;
}

.interactive-paragraph:hover .interactive-paragraph-inner {
  border-left: 3px solid var(--blue-9);
}

.interactive-paragraph-inner::selection {
  background: yellow;
  /*color: #8C830F;*/
  color: #5f5907;
}

.interactive-paragraph-menu {
  display: none;
  position: absolute;
  width: 100%;
  top: -39px;
  left: 0;
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.interactive-paragraph:hover .interactive-paragraph-menu {
  display: flex;
}

.small-heading {
  color: #6f7583;
  background: #f9fafb;
  border-top: 1px solid #d8d9da;
  border-bottom: 1px solid #d8d9da;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 42px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

@keyframes progress-bar-step-one {
  from {
    width: 0%;
  }
  to {
    width: 33%;
  }
}

@keyframes progress-bar-step-two {
  from {
    width: 33%;
  }
  to {
    width: 66%;
  }
}

@keyframes progress-bar-step-three {
  from {
    width: 66%;
  }
  to {
    width: 85%;
  }
}

@keyframes progress-bar-complete {
  from {
    width: 85%;
  }
  to {
    width: 100%;
  }
}

@media only screen and (min-width: 501px) and (max-width: 1099px) {
  .registration-all {
    margin: 32px auto 0 auto !important;
  }
}

@media only screen and (max-width: 1099px) {
  .login-section {
    width: 384px;
  }

  .registration-all {
    max-width: 500px;
    margin: 0 auto;
  }

  .registration {
    min-width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .registration .content-area {
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .registration-container {
    margin: 24px 0 8px 0;
  }

  .tags-container {
    display: none !important;
  }
}

/*
 * MagicInput and MagicText
 */
.pretty-json {
  background: rgba(0, 0, 0, 0.1);
}

.pretty-variable,
.pretty-secret {
  border: solid 1px #ebdca4;
  background: #fef3c7;
  color: #933f0e;
  border-radius: 4px;
  font-size: inherit;
  line-height: 1em;
}

.pretty-secret,
.placeholder .pretty-secret {
  border-color: #e5e7eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.pretty-function,
.pretty-suite-ref {
  border: solid 1px #dfdfdf;
  background: #e8e8e8;
  color: #4c4b58;
  border-radius: 500px;
  font-size: inherit;
  line-height: 1em;
}

.pretty-function > span.args {
  background: var(--blue-primary);
  color: white;
  border-radius: 500px;
}

.pretty-suite-ref {
  background: white;
  border: solid 1px #ebdca4;
}

.pretty-suite-ref > span.args {
  background: #fef3c7;
  color: #933f0e;
  border-radius: 500px;
  border: solid 1px #ebdca4;
}

/* These styles simulate "placeholder" styles for magic input's pretty printed values */
.placeholder .pretty-variable,
.placeholder .pretty-secret {
  border: solid 1px #ebdca4;
  background: #fbf7e4;
  color: #936a53;
  border-radius: 4px;
  font-size: inherit;
  line-height: 1em;
}

.placeholder .pretty-function,
.placeholder .pretty-suite-ref {
  border: solid 1px #dfdfdf;
  background: #e8e8e8;
  color: #898893;
  border-radius: 500px;
  font-size: inherit;
  line-height: 1em;
}

.placeholder .pretty-function > span.args,
.placeholder .pretty-suite-ref > span.args {
  background: #8c8ae8;
  color: white;
  border-radius: 500px;
}

.pretty-function > span.name::before,
.pretty-function > span.name::after,
.pretty-suite-ref > span.name::before,
.pretty-suite-ref > span.name::after {
  content: '\00a0';
}

.pretty-function > span.args::before,
.pretty-function > span.args::after,
.pretty-suite-ref > span.args::before,
.pretty-suite-ref > span.args::after {
  content: '\00a0';
}

.pretty-variable > span::before,
.pretty-variable > span::after,
.pretty-secret > span::before,
.pretty-secret > span::after {
  /* Insane hack. Adds whitespace to the left/right that pushes the cursor outside of the node */
  content: '\00a0';
}

.pretty-highlight {
  background: var(--highlight-background);
  color: var(--highlight-color);
  white-space: pre-wrap !important;
  user-select: none;
}

/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  opacity: 0.5;
  pointer-events: none;
  height: 0;
}

.ProseMirror-selectednode {
  background: var(--selection-bg);
}

.editor-container .text-extraction .ProseMirror > p {
  /* Preserve whitespace in text extraction */
  white-space: pre-wrap !important;
}

.editor-container:not(.inline) .ProseMirror > p {
  /* Comes from TextEditor.vue */
  padding-left: var(--editor-whitespace);
  padding-right: var(--editor-whitespace);
}

.editor-container.staticPrefix .ProseMirror > p {
  /* Comes from TextEditor.vue */
  padding-left: calc(2ch + var(--editor-whitespace));
}

.editor-container:not(.inline):not(.staticPrefix) .ProseMirror > p:first-of-type {
  /* Comes from TextEditor.vue */
  padding-top: var(--editor-whitespace);
}

.editor-container:not(.inline):not(.staticPostfix) .ProseMirror > p:last-of-type {
  /* Comes from TextEditor.vue */
  padding-bottom: var(--editor-whitespace);
}

.pretty-json-value[valuetype='primitive']:not([has-rule]):hover > p {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.03);
}

.pretty-xml-value[istext='true']:not([has-rule]):hover > p,
.pretty-xml-attribute:not([has-rule]):hover > p {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.03);
}

/* Set in JSONExtraction.vue */
*[has-rule] > * {
  background: var(--highlight-background);
  color: var(--highlight-color);
}

/* Color pairings for extractions and highlights */
.var0,
.var1,
.var2,
.var3,
.var4,
.var5,
.var6,
.var7,
.var8,
.var9,
.var10,
.var11,
.var12,
.var13,
.var14,
.var15,
.var16,
.var17,
.var18,
.var19,
.var20,
.var21,
.var22,
.var23,
.var24,
.var25,
.var26,
.var27,
.var28,
.var29,
.var30,
.var31 {
  /* Turn these dials to adjust how colors are selected */
  --var-hue-cycle: 7; /* The number of steps to complete a 360deg cycle */
  --var-hue-step: 2.08; /* The number of steps to take with each subsequent color */

  /* Turn these dials to adjust how colors are rendered */
  --var-saturation: 93.75%; /* The saturation across all colors */
  --var-brightness-fg: 5.29%; /* The brightness of the foreground color */
  --var-brightness-bg: 79.73%; /* The brightness of the background color */
  --var-base-hue: 204deg; /* The starting hue */

  --var-hue-offset: calc((360deg / var(--var-hue-cycle)) * var(--var-hue-step));
  --highlight-hue: calc(var(--var-base-hue) + (var(--var-hue-offset) * var(--var-index)));
  --highlight-color: hsl(var(--highlight-hue) var(--var-saturation) var(--var-brightness-fg));
  --highlight-background: hsl(var(--highlight-hue) var(--var-saturation) var(--var-brightness-bg));
}

/*
 * To remove a color entirely, just increment the index of the target var and all vars that
 * follow. Otherwise colors can be swapped entirely by adding a new --var-index override.
 */
.var0 {
  --var-index: 0;
  --var-index: 6;
}
.var1 {
  --var-index: 1;
}
.var2 {
  --var-index: 2;
}
.var3 {
  --var-index: 3;
}
.var4 {
  --var-index: 4;
}
.var5 {
  --var-index: 5;
}
.var6 {
  --var-index: 6;
  --var-index: 0;
}
.var7 {
  --var-index: 7;
  --var-index: 8;
}
.var8 {
  --var-index: 8;
  --var-index: 7;
}
.var9 {
  --var-index: 9;
}
.var10 {
  --var-index: 10;
}
.var11 {
  --var-index: 11;
}
.var12 {
  --var-index: 12;
}
.var13 {
  --var-index: 13;
}
.var14 {
  --var-index: 14;
}
.var15 {
  --var-index: 15;
}
.var16 {
  --var-index: 19;
}
.var17 {
  --var-index: 20;
}
.var18 {
  --var-index: 21;
}
.var19 {
  --var-index: 23;
}
.var20 {
  --var-index: 24;
}
.var21 {
  --var-index: 25;
}
.var22 {
  --var-index: 26;
}
.var23 {
  --var-index: 27;
}
.var24 {
  --var-index: 28;
}
.var25 {
  --var-index: 29;
}
.var26 {
  --var-index: 30;
}
.var27 {
  --var-index: 31;
}
.var28 {
  --var-index: 33;
}
.var29 {
  --var-index: 34;
}
.var30 {
  --var-index: 35;
}
.var31 {
  --var-index: 36;
}

.animated-ellipsis {
  display: inline-block;
  background-image: linear-gradient(to right, var(--gray-12) 50%, var(--gray-primary) 50%);
  background-size: 40px 40px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ellipsis-animation 1.5s linear infinite;
}

@keyframes ellipsis-animation {
  from {
    background-position: 0px;
  }
  to {
    background-position: 20px;
  }
}

@media print {
  #app > div {
    height: auto !important;
  }

  .bg-gray-10 {
    outline: solid 3px var(--gray-10) !important;
    outline-offset: -3px !important;
  }
  .bg-gray-11 {
    outline: solid 3px var(--gray-11) !important;
    outline-offset: -3px !important;
  }
  .bg-gray-12 {
    outline: solid 3px var(--gray-12) !important;
    outline-offset: -3px !important;
  }
  .bg-green-6 {
    outline: solid 3px var(--green-6) !important;
    outline-offset: -3px !important;
  }
  .bg-green-primary {
    outline: solid 3px var(--green-primary) !important;
    outline-offset: -3px !important;
  }
  .bg-blue-2-5 {
    outline: solid 3px var(--blue-2-5) !important;
    outline-offset: -3px !important;
  }
  .bg-blue-11 {
    outline: solid 3px var(--blue-11) !important;
    outline-offset: -3px !important;
  }
  .bg-blue-12 {
    outline: solid 3px var(--blue-12) !important;
    outline-offset: -3px !important;
  }
  .bg-blue-13 {
    outline: solid 3px var(--blue-13) !important;
    outline-offset: -3px !important;
  }
  .bg-blue-primary {
    outline: solid 3px var(--blue-primary) !important;
    outline-offset: -3px !important;
  }
  .bg-blue-highlight {
    outline: solid 3px var(--blue-highlight) !important;
    outline-offset: -3px !important;
  }
  .bg-red-primary {
    outline: solid 3px var(--red-primary) !important;
    outline-offset: -3px !important;
  }
  .bg-yellow-10 {
    outline: solid 3px var(--yellow-10) !important;
    outline-offset: -3px !important;
  }
}