:root {
  /* Colors */
  --color-Neutral-00: #FFFFFF;
  --color-Neutral-05: #F9F9F9;
  --color-Neutral-10: #F0F1F1;
  --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-10: #F7F7F9;
  --color-gray-15: #EFEFF2;
  --color-gray-20: #E0E0E5;
  --color-gray-30: #D0D0D9;
  --color-gray-50: #B1B1BF;
  --color-gray-70: #777783;
  --color-gray-90: #3E3E46;
  --color-gray-100: #212128;
  --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-90: #1E7440;
  --color-red-10: #FDF9F9;
  --color-red-20: #F7E2E1;
  --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-blue-40: #A5B8EF;
  --color-other-focus-state: #0066FF;

  /* 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;

  /* 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-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-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.0);
    --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\: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-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: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 10px;
}

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

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

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

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

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

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

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

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

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

.body1 {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}

.body2 {
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.heading3 {
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.shadow2 {
  box-shadow: 1px 5px 10px 2px rgba(91, 91, 100, 0.30);
}
@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);
}

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);
}

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: .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: .6em 1.4em .5em .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,.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 .7em top 50%, 0 0;
    background-size: .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, .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: .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: .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-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: .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: .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%;
}

.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: .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,.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: .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; }
}