*,*:before,*:after{box-sizing:border-box}*:focus,*:hover{outline:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}a:not([class]){text-decoration-skip-ink:auto}:root{--sp-color-black: #000000;--sp-color-white: #ffffff;--sp-color-primary-100: #ecf3ff;--sp-color-primary-200: #c2d9ff;--sp-color-primary-300: #91b0f0;--sp-color-primary-400: #346ddb;--sp-color-primary-500: #2662d7;--sp-color-primary-600: #0049d7;--sp-color-primary-700: #00349a;--sp-color-primary-800: #112d65;--sp-color-dark-mode-100: #7A808B;--sp-color-dark-mode-200: #58616E;--sp-color-dark-mode-300: #374151;--sp-color-dark-mode-400: #2D323A;--sp-color-dark-mode-500: #2B2E39;--sp-color-dark-mode-600: #22272E;--sp-color-dark-mode-700: #14171C;--sp-color-dark-mode-800: #0a0c0e;--sp-color-icon-success: #008847;--sp-color-icon-ask-gitbook: #346ddb;--sp-color-icon-menu-default: #a4a7b0;--sp-color-icon-menu-hover: #656973;--sp-color-icon-menu-active: #346ddb;--sp-color-icon-menu-disabled: #c4c6cc;--sp-color-text-link: #346ddb;--sp-color-text-light: #a4a7b0;--sp-color-text-muted: #656973;--sp-color-text-base: #52555e;--sp-color-text-inverted: #dedfe3;--sp-color-text-standout: #262930;--sp-color-text-primary: #ffffff;--sp-color-text-secondary: #52555e;--sp-color-text-info: #346ddb;--sp-color-text-danger: #d33d3d;--sp-color-text-merge: #735cff;--sp-color-text-upgrade: #E44F89;--sp-color-text-success: #008847;--sp-color-text-menu-default: #656973;--sp-color-text-menu-hover: #262930;--sp-color-text-menu-active: #346ddb;--sp-color-text-menu-disabled: #c4c6cc;--sp-color-text-menu-dark-default: #eaebee;--sp-color-text-menu-dark-hover: #ffffff;--sp-color-text-menu-dark-active: #ecf3ff;--sp-color-text-menu-dark-disabled: #c4c6cc;--sp-color-text-sidebar-dark-default: #eaebee;--sp-color-text-sidebar-dark-hover: #a4a7b0;--sp-color-text-sidebar-dark-active: #eaebee;--sp-color-text-sidebar-dark-disabled: #c4c6cc;--sp-color-text-input-placeholder: #a4a7b0;--sp-color-text-stepper-light-default: #a4a7b0;--sp-color-text-stepper-light-active: #346ddb;--sp-color-text-stepper-light-error: #d33d3d;--sp-color-text-stepper-dark-default: #a4a7b0;--sp-color-text-stepper-dark-active: #346ddb;--sp-color-text-stepper-dark-error: #d33d3d;--sp-color-bg-card: #ffffff;--sp-color-bg-muted: #f7f7f7;--sp-color-bg-standout: #eaebee;--sp-color-bg-primary: #346ddb;--sp-color-bg-secondary: #f7f7f7;--sp-color-bg-info: #ecf3ff;--sp-color-bg-danger: #ffe4e3;--sp-color-bg-merge: #f2f0ff;--sp-color-bg-upgrade: #FFF6FA;--sp-color-bg-success: #dffff0;--sp-color-bg-suggestion-default: #f7f7f7;--sp-color-bg-suggestion-hover: #eaebee;--sp-color-bg-sidebar-main: #333d55;--sp-color-bg-sidebar-settings: #ffffff;--sp-color-bg-sidebar-button-compact: #30374b;--sp-color-bg-sidebar-alert: #2a3142;--sp-color-bg-menu-default: #ffffff;--sp-color-bg-menu-hover: #f7f7f7;--sp-color-bg-menu-active: #ecf3ff;--sp-color-bg-menu-dark-default: #2a3142;--sp-color-bg-menu-dark-hover: #353d53;--sp-color-bg-menu-dark-active: #5f677b;--sp-color-bg-keyboard-shortcut-default: #ffffff;--sp-color-bg-keyboard-shortcut-inverted: #262930;--sp-color-border-standout: #eaebee;--sp-color-border-table: #dedfe3;--sp-color-border-card: #f7f7f7;--sp-color-border-input: #dedfe3;--sp-color-border-menu-default: #f7f7f7;--sp-color-border-menu-dark: #353d53;--sp-color-border-keyboard-shortcut-default: #eaebee;--sp-color-border-keyboard-shortcut-inverted: #52555e;--sp-color-border-sidebar-main: #283143;--sp-color-border-sidebar-settings: #e3e8ed;--sp-color-button-sidebar-menuitem-bg-default: rgba(0, 0, 0, 0);--sp-color-button-sidebar-menuitem-bg-compact-default: #2a3142;--sp-color-button-sidebar-menuitem-bg-compact-hover: #346ddb;--sp-color-button-sidebar-menuitem-text: #ecf3ff;--sp-color-button-sidebar-icon-bg-default: rgba(0, 0, 0, 0);--sp-color-button-sidebar-icon-bg-hover: #2a3142;--sp-color-button-sidebar-icon-bg-compact-default: #2a3142;--sp-color-button-sidebar-icon-bg-compact-hover: #346ddb;--sp-color-button-sidebar-icon-text: #ecf3ff;--sp-color-button-sidebar-search-bg-default: #2a3142;--sp-color-button-sidebar-search-bg-compact-hover: #346ddb;--sp-color-button-sidebar-search-text-default: #ecf3ff;--sp-color-button-sidebar-search-text-hover: #a4a7b0;--sp-color-button-sidebar-search-text-compact-hover: #ecf3ff;--sp-color-button-sidebar-footer-text-default: #cdcfd3;--sp-color-button-sidebar-footer-text-hover: #eaebee;--sp-color-button-primary-bg-default: #2662d7;--sp-color-button-primary-bg-hover: #0049d7;--sp-color-button-primary-bg-focus: #00349a;--sp-color-button-secondary-bg-default: #ffffff;--sp-color-button-secondary-bg-hover: #f7f7f7;--sp-color-button-secondary-bg-focus: #eaebee;--sp-color-button-secondary-border: #f7f7f7;--sp-color-search-group-border-light: #eaebee;--sp-color-search-group-border-dark: #262930;--sp-color-search-group-heading: #656973;--sp-color-search-ai-cta-bg: #ecf3ff;--sp-color-search-ai-cta-text-default: #52555e;--sp-color-search-ai-cta-text-highlight: #262930;--sp-color-search-ai-cta-border: #346ddb;--sp-color-search-ai-cta-action-button: #346ddb;--sp-color-search-ai-cta-icon: #346ddb;--sp-color-search-result-item-regular-bg-light: #f7f7f7;--sp-color-search-result-item-regular-bg-dark: #262930;--sp-color-search-result-item-pill-bg-light: #f7f7f7;--sp-color-search-result-item-pill-bg-dark: #2a3142;--sp-color-search-result-item-pill-text-light: #52555e;--sp-color-search-result-item-pill-text-dark: #dedfe3;--sp-color-search-icons-sparkle-search-color-light: #346ddb;--sp-color-search-icons-sparkle-search-color-dark: #91b0f0;--sp-color-alert-sidebar-text-heading: #f7f7f7;--sp-color-alert-sidebar-text-body: #a2a8b7;--sp-color-alert-sidebar-bg: #2a3142;--sp-color-sidesheet-header-border: #eaebee;--sp-color-sidesheet-avatar-badge-border: #ffffff;--sp-color-segmented-control-bg: #f7f7f7;--sp-color-segmented-control-active-segment-bg: #ffffff;--sp-color-segmented-control-active-segment-border: #eaebee;--sp-radius-0: 0;--sp-radius-100: 1px;--sp-radius-200: 3px;--sp-radius-300: 4px;--sp-radius-400: 6px;--sp-radius-500: 8px;--sp-theme-radius-medium: 4px;--sp-theme-radius-large: 6px;--sp-theme-radius-xlarge: 8px;--sp-shadow-base: 0px 1px 1px 0px rgba(0, 0, 0, .15), 0px 0px 1px 0px rgba(0, 0, 0, .05);--sp-shadow-elevated: 0px 8px 14px 3px rgba(31, 41, 51, .08), 0px 2px 2px 0px rgba(0, 0, 0, .07);--sp-shadow-sidebar-main: 0px -22px 24px rgba(51, 61, 85, 1);--sp-size-100: 12px;--sp-size-200: 18px;--sp-size-250: 20px;--sp-size-300: 24px;--sp-size-400: 32px;--sp-size-500: 48px;--sp-size-600: 64px;--sp-size-700: 80px;--sp-size-icon-100: 12px;--sp-size-icon-200: 16px;--sp-size-icon-300: 18px;--sp-size-icon-400: 20px;--sp-size-icon-500: 24px;--sp-size-icon-600: 28px;--sp-size-icon-700: 32px;--sp-size-button-100: 20px;--sp-size-button-200: 24px;--sp-size-button-300: 32px;--sp-size-button-400: 40px;--sp-size-button-500: 48px;--sp-spacing-0: 0px;--sp-spacing-50: 2px;--sp-spacing-100: 4px;--sp-spacing-200: 8px;--sp-spacing-300: 12px;--sp-spacing-400: 16px;--sp-spacing-450: 18px;--sp-spacing-500: 20px;--sp-spacing-600: 24px;--sp-spacing-650: 32px;--sp-spacing-700: 40px;--sp-spacing-800: 60px;--sp-spacing-900: 80px;--sp-typography-page-title-font: 700 2.5rem/1.2 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-page-title-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-page-title-font-size: 2.5rem;--sp-typography-page-title-font-weight: 700;--sp-typography-page-title-line-height: 1.2;--sp-typography-page-title-letter-spacing: -.03em;--sp-typography-page-subtitle-font: 500 1.25rem/1.4 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-page-subtitle-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-page-subtitle-font-size: 1.25rem;--sp-typography-page-subtitle-font-weight: 500;--sp-typography-page-subtitle-line-height: 1.4;--sp-typography-page-subtitle-letter-spacing: -.02em;--sp-typography-content-heading-large-font: 500 2rem/1.25 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-heading-large-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-heading-large-font-size: 2rem;--sp-typography-content-heading-large-font-weight: 500;--sp-typography-content-heading-large-line-height: 1.25;--sp-typography-content-heading-large-letter-spacing: -.02em;--sp-typography-content-heading-medium-font: 500 1.5rem/1.33333333333 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-heading-medium-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-heading-medium-font-size: 1.5rem;--sp-typography-content-heading-medium-font-weight: 500;--sp-typography-content-heading-medium-line-height: 1.33333333333;--sp-typography-content-heading-medium-letter-spacing: -.01em;--sp-typography-content-heading-small-font: 500 1.25rem/1.4 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-heading-small-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-heading-small-font-size: 1.25rem;--sp-typography-content-heading-small-font-weight: 500;--sp-typography-content-heading-small-line-height: 1.4;--sp-typography-content-heading-small-letter-spacing: 0;--sp-typography-content-paragraph-font: 400 1rem/1.5 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-paragraph-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-content-paragraph-font-size: 1rem;--sp-typography-content-paragraph-font-weight: 400;--sp-typography-content-paragraph-line-height: 1.5;--sp-typography-content-paragraph-letter-spacing: 0;--sp-typography-content-mono-font: 400 1rem/1.5 gitbook-code-font, Menlo, monospace;--sp-typography-content-mono-font-family: gitbook-code-font, Menlo, monospace;--sp-typography-content-mono-font-size: 1rem;--sp-typography-content-mono-font-weight: 400;--sp-typography-content-mono-line-height: 1.5;--sp-typography-content-mono-letter-spacing: 0;--sp-typography-ui-heading-large-font: 500 1.5rem/1.5 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-heading-large-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-heading-large-font-size: 1.5rem;--sp-typography-ui-heading-large-font-weight: 500;--sp-typography-ui-heading-large-line-height: 1.5;--sp-typography-ui-heading-large-letter-spacing: -.01em;--sp-typography-ui-heading-medium-font: 500 1rem/1.375 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-heading-medium-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-heading-medium-font-size: 1rem;--sp-typography-ui-heading-medium-font-weight: 500;--sp-typography-ui-heading-medium-line-height: 1.375;--sp-typography-ui-heading-medium-letter-spacing: 0;--sp-typography-ui-base-font: 400 .875rem/1.42857142857 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-base-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-base-font-size: .875rem;--sp-typography-ui-base-font-weight: 400;--sp-typography-ui-base-line-height: 1.42857142857;--sp-typography-ui-base-letter-spacing: 0;--sp-typography-ui-standout-font: 500 .875rem/1.42857142857 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-standout-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-standout-font-size: .875rem;--sp-typography-ui-standout-font-weight: 500;--sp-typography-ui-standout-line-height: 1.42857142857;--sp-typography-ui-standout-letter-spacing: 0;--sp-typography-ui-action-font: 400 .875rem/1.42857142857 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-action-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-action-font-size: .875rem;--sp-typography-ui-action-font-weight: 400;--sp-typography-ui-action-line-height: 1.42857142857;--sp-typography-ui-action-letter-spacing: 0;--sp-typography-ui-small-font: 400 .75rem/1.33333333333 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-small-font-family: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-small-font-size: .75rem;--sp-typography-ui-small-font-weight: 400;--sp-typography-ui-small-line-height: 1.33333333333;--sp-typography-ui-small-letter-spacing: .01em;--sp-typography-stepper-label-font-small: 500 .875rem/1.33333333333 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-stepper-label-font-medium: 500 1rem/1.33333333333 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif}.theme-color-dark{--sp-color-icon-ask-gitbook: #91b0f0;--sp-color-text-light: #eaebee;--sp-color-text-muted: #c4c6cc;--sp-color-text-base: #dedfe3;--sp-color-text-inverted: #52555e;--sp-color-text-standout: #f7f7f7;--sp-color-text-secondary: #ffffff;--sp-color-text-info: #262930;--sp-color-text-merge: #f2f0ff;--sp-color-text-upgrade: #FBE8F0;--sp-color-text-success: #dffff0;--sp-color-bg-card: #262930;--sp-color-bg-muted: #262930;--sp-color-bg-standout: #52555e;--sp-color-bg-primary: #00349a;--sp-color-bg-secondary: #262930;--sp-color-bg-info: #91b0f0;--sp-color-bg-merge: #5846ce;--sp-color-bg-upgrade: #E44F89;--sp-color-bg-success: #008847;--sp-color-bg-suggestion-default: #262930;--sp-color-bg-suggestion-hover: #52555e;--sp-color-bg-sidebar-main: #181c1f;--sp-color-bg-sidebar-settings: #181c1f;--sp-color-bg-keyboard-shortcut-default: #262930;--sp-color-bg-keyboard-shortcut-inverted: #ffffff;--sp-color-border-standout: #52555e;--sp-color-border-table: #262930;--sp-color-border-card: #262930;--sp-color-border-keyboard-shortcut-default: #52555e;--sp-color-border-keyboard-shortcut-inverted: #eaebee;--sp-color-border-sidebar-main: #2d323a;--sp-color-border-sidebar-settings: #2d323a;--sp-color-button-primary-bg-default: #346ddb;--sp-color-button-primary-bg-hover: #2662d7;--sp-color-button-primary-bg-focus: #0049d7;--sp-color-button-secondary-bg-default: #262930;--sp-color-button-secondary-bg-hover: #52555e;--sp-color-button-secondary-bg-focus: #656973;--sp-color-button-secondary-border: #52555e;--sp-color-search-group-heading: #a4a7b0;--sp-color-search-ai-cta-bg: #2a3142;--sp-color-search-ai-cta-border: #91b0f0;--sp-color-search-ai-cta-action-button: #91b0f0;--sp-color-search-ai-cta-icon: #91b0f0;--sp-color-alert-sidebar-text-heading: #f7f7f7;--sp-color-alert-sidebar-text-body: #a2a8b7;--sp-color-alert-sidebar-bg: #262930;--sp-color-sidesheet-header-border: #374151;--sp-color-sidesheet-avatar-badge-border: #22272E;--sp-color-segmented-control-bg: #2D323A;--sp-color-segmented-control-active-segment-bg: #2B2E39;--sp-color-segmented-control-active-segment-border: #374151;--sp-shadow-base: 0px 1px 2px 0px rgba(0, 0, 0, .62);--sp-shadow-elevated: 0px 8px 14px 3px rgba(16, 17, 17, .32), 0px 2px 2px 0px rgba(0, 0, 0, .37);--sp-shadow-sidebar-main: 0px -22px 24px rgba(24, 28, 31, 1)}.theme-radius-straight{--sp-theme-radius-medium: 0;--sp-theme-radius-large: 1px;--sp-theme-radius-xlarge: 3px}.theme-font-variable{--sp-typography-content-paragraph-font-weight: 360;--sp-typography-ui-base-font: 360 .875rem/1.42857142857 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-base-font-weight: 360;--sp-typography-ui-action-font: 440 .875rem/1.42857142857 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-action-font-weight: 440;--sp-typography-ui-small-font: 360 .75rem/1.33333333333 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--sp-typography-ui-small-font-weight: 360}:root{--mobile-breakpoint: 700px;--tablet-breakpoint: 1024px;--duration-xshort: .1s;--duration-short: .2s;--duration-medium: .42s;--duration-long: .8s;--color-primary: #346ddb;--color-grey-blue-light: #abb7ca;--color-yellow-xxlight: #fffbed;--color-yellow: #ffd139;--color-primary-xxxlight: #f8faff;--color-primary-xxlight: #ecf3ff;--color-primary-xlight: #c2d9ff;--color-primary-light: #91b0f0;--color-primary-base: #346ddb;--color-primary-dark: #2662d7;--color-primary-xdark: #0049d7;--color-primary-xxdark: #00349a;--color-violet-xlight: #dad4ff;--color-violet-light: #b2a5ff;--color-violet-base: #735cff;--color-violet-dark: #5f45ff;--color-violet-xdark: #442fc8;--color-scarlet-xlight: #ffcccb;--color-scarlet-light: #ff918f;--color-scarlet-base: #d33d3d;--color-scarlet-dark: #cc3131;--color-scarlet-xdark: #b41a1a;--color-fuchsia-xlight: #fbe8f0;--color-fuchsia-light: #ef96b8;--color-fuchsia-base: #e44f89;--color-fuchsia-dark: #db3b79;--color-fuchsia-xdark: #c62c68;--color-orange-xlight: #fdc389;--color-orange-light: #ed9f51;--color-orange-base: #b95e04;--color-orange-dark: #914b05;--color-orange-xdark: #683c11;--color-green-xxlight: #dffff0;--color-green-xlight: #91eabf;--color-green-light: #4dde98;--color-green-base: #008847;--color-green-dark: #0c693d;--color-green-xdark: #0b4f2f;--color-white: #ffffff;--color-black: #242a31;--color-backdrop-bg: rgba(27, 30, 33, .77);--color-backdrop-bg-light: rgba(0, 0, 0, .05);--color-backdrop-bg-transparent: rgba(0, 0, 0, 0);--color-backdrop-dark-bg: rgba(0, 0, 0, .6);--color-backdrop-dark-bg-light: rgba(0, 0, 0, .1);--color-backdrop-dark-bg-transparent: rgba(0, 0, 0, 0);--color-light-mode-sidebar-base: #333d55;--color-light-mode-sidebar-dark: #283143;--color-dark-mode-grey-scale-xxlight: #374151;--color-dark-mode-grey-scale-xlight: #2d323a;--color-dark-mode-grey-scale-light: #2b2e39;--color-dark-mode-grey-scale-base: #22272e;--color-dark-mode-grey-scale-dark: #181c1f;--color-dark-mode-grey-scale-xdark: #14171c;--color-light-mode-grey-scale-xxlight: #f5f7f9;--color-light-mode-grey-scale-xlight: #eceff1;--color-light-mode-grey-scale-light: #e3e8ed;--color-light-mode-grey-scale-base: #d3dce4;--color-light-mode-grey-scale-dark: #cccfd4;--color-light-mode-grey-scale-xdark: #454545;--color-light-mode-text-xlight: #8899a8;--color-light-mode-text-light: #5c6975;--color-light-mode-text-base: #3b454e;--color-light-mode-text-dark: #050505;--color-dark-mode-text-xdark: #a2a9b9;--color-dark-mode-text-dark: #cccfd4;--color-dark-mode-text-base: #eaf2f7;--color-dark-mode-text-light: #ffffff;--size-xxs: 18px;--size-xs: 24px;--size-s: 32px;--size-m: 48px;--size-l: 64px;--size-xl: 80px;--radius-none: 0;--radius-xs: 1px;--radius-s: 3px;--radius-m: 4px;--radius-l: 6px;--radius-xl: 8px;--icon-xxs: 12px;--icon-xs: 16px;--icon-s: 18px;--icon-m: 18px;--icon-l: 20px;--icon-xl: 24px;--icon-xxl: 28px;--button-xs: 20px;--button-s: 24px;--button-m: 32px;--button-l: 40px;--button-xl: 48px;--button-padding-s: 8px;--button-padding-m: 12px;--button-padding-l: 16px;--opacity-visible: 1;--opacity-translucent: .5;--opacity-hidden: 0;--z-index-promote: 99;--z-index-overlay: 100;--z-index-sidesheet: 100;--z-index-popover: 100;--z-index-modal: 100;--z-index-toast: 200;--z-index-dragged-item: 300;--spacing-none: 0;--spacing-xs: 4px;--spacing-s: 8px;--spacing-m: 16px;--spacing-l: 24px;--spacing-xl: 40px;--spacing-xxl: 80px;--font-family-default: gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-family-code: gitbook-code-font, Menlo, monospace;--font-size-xxs: 10px;--font-size-xs: 12px;--font-size-s: 14px;--font-size-m: 16px;--font-size-ml: 20px;--font-size-l: 24px;--font-size-xl: 32px;--font-size-xxl: 40px;--line-height-xxs: 14px;--line-height-xs: 18px;--line-height-s: 22px;--line-height-m: 24px;--line-height-ml: 30px;--line-height-l: 32px;--line-height-xl: 40px;--line-height-xxl: 48px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--theme-color-primary-xxlight: var( --custom-theme-color-primary-xxlight, var(--color-primary-xxlight) );--theme-color-primary-xlight: var( --custom-theme-color-primary-xlight, var(--color-primary-xlight) );--theme-color-primary-light: var( --custom-theme-color-primary-light, var(--color-primary-light) );--theme-color-primary-base: var(--custom-theme-color-primary-base, var(--color-primary-base));--theme-color-primary-dark: var(--custom-theme-color-primary-dark, var(--color-primary-dark));--theme-color-primary-xdark: var( --custom-theme-color-primary-xdark, var(--color-primary-xdark) );--theme-color-primary-xxdark: var( --custom-theme-color-primary-xxdark, var(--color-primary-xxdark) )}:root{--focusring-color: var(--theme-color-primary-dark);--focusring-offset-color: var(--theme-color-primary-base)}.theme-color-dark{--focusring-color: var(--color-light-mode-grey-scale-xxlight);--focusring-offset-color: var(--color-white)}:root{--color-primary-main: var(--theme-color-primary-base);--color-primary-mid: var(--theme-color-primary-xlight);--color-primary-muted: var(--theme-color-primary-xxlight);--color-primary-hover: var(--theme-color-primary-dark);--color-primary-standout: var(--theme-color-primary-xdark);--color-primary-text-inside: var(--color-white);--color-secondary-main: var(--color-white);--color-secondary-muted: var(--color-light-mode-grey-scale-xlight);--color-secondary-hover: var(--color-light-mode-grey-scale-xlight);--color-secondary-standout: var(--color-light-mode-grey-scale-light);--color-secondary-text-inside: var(--color-light-mode-grey-scale-xdark);--color-standout-main: var(--theme-color-primary-base);--color-standout-standout: var(--theme-color-primary-dark);--color-standout-text-inside: var(--color-white);--color-backdrop-transparent: var(--color-backdrop-bg-transparent);--color-backdrop-background: var(--color-backdrop-bg);--color-backdrop-background-light: var(--color-backdrop-bg-light);--color-info-main: var(--color-primary-base);--color-info-muted: var(--color-primary-xxlight);--color-info-hover: var(--color-primary-dark);--color-info-standout: var(--color-primary-xdark);--color-info-text-inside: var(--color-white);--color-success-main: var(--color-green-base);--color-success-muted: var(--color-green-xxlight);--color-success-standout: var(--color-green-dark);--color-success-text-inside: var(--color-white);--color-warning-main: var(--color-orange-base);--color-warning-muted: var(--color-orange-xlight);--color-warning-standout: var(--color-orange-dark);--color-warning-text-inside: var(--color-white);--color-danger-main: var(--color-scarlet-base);--color-danger-muted: var(--color-scarlet-xlight);--color-danger-hover: var(--color-scarlet-dark);--color-danger-standout: var(--color-scarlet-xdark);--color-danger-text-inside: var(--color-white);--color-merge-main: var(--color-violet-base);--color-merge-muted: var(--color-violet-xlight);--color-merge-hover: var(--color-violet-dark);--color-merge-standout: var(--color-violet-xdark);--color-merge-text-inside: var(--color-white);--color-upgrade-main: var(--color-fuchsia-base);--color-upgrade-muted: var(--color-fuchsia-xlight);--color-upgrade-hover: var(--color-fuchsia-dark);--color-upgrade-standout: var(--color-fuchsia-xdark);--color-upgrade-text-inside: var(--color-white);--color-item-hover: var(--color-light-mode-grey-scale-xxlight)}.theme-color-dark{--color-primary-main: var(--theme-color-primary-base);--color-primary-mid: var(--theme-color-primary-xdark);--color-primary-muted: var(--color-black);--color-primary-hover: var(--theme-color-primary-base);--color-primary-standout: var(--theme-color-primary-dark);--color-primary-text-inside: var(--theme-color-primary-xxdark);--color-secondary-main: var(--color-dark-mode-grey-scale-xlight);--color-secondary-muted: var(--color-dark-mode-grey-scale-dark);--color-secondary-hover: var(--color-dark-mode-grey-scale-xxlight);--color-secondary-standout: var(--color-dark-mode-grey-scale-xxlight);--color-secondary-text-inside: var(--color-white);--color-standout-main: var(--color-white);--color-standout-standout: var(--color-light-mode-grey-scale-xxlight);--color-standout-text-inside: var(--theme-color-primary-base);--color-backdrop-background: var(--color-backdrop-dark-bg);--color-backdrop-background-light: var(--color-backdrop-dark-bg-light);--color-info-main: var(--color-primary-light);--color-info-hover: var(--color-primary-light);--color-success-muted: var(--color-green-xdark);--color-success-standout: var(--color-green-light);--color-warning-muted: var(--color-orange-xdark);--color-warning-standout: var(--color-orange-light);--color-danger-main: var(--color-scarlet-light);--color-danger-hover: var(--color-scarlet-base);--color-item-hover: var(--color-dark-mode-grey-scale-light)}:root{--color-background-main: var(--color-white);--color-background-mid: var(--color-light-mode-grey-scale-xxlight);--color-background-muted: var(--color-light-mode-grey-scale-xxlight);--color-background-standout: var(--color-light-mode-grey-scale-xlight);--color-background-inverted: var(--color-dark-mode-grey-scale-dark)}.theme-color-dark{--color-background-main: var(--color-dark-mode-grey-scale-dark);--color-background-mid: var(--color-dark-mode-grey-scale-xdark);--color-background-muted: var(--color-dark-mode-grey-scale-base);--color-background-standout: var(--color-dark-mode-grey-scale-light);--color-background-inverted: var(--color-white)}:root{--color-border-main: var(--color-light-mode-grey-scale-base);--color-border-mid: var(--color-light-mode-grey-scale-light);--color-border-muted: var(--color-light-mode-grey-scale-xxlight)}.theme-color-dark{--color-border-main: var(--color-dark-mode-grey-scale-xxlight);--color-border-mid: var(--color-dark-mode-grey-scale-light);--color-border-muted: var(--color-black)}:root{--color-text-main: var(--color-light-mode-text-base);--color-text-mid: var(--color-light-mode-text-light);--color-text-muted: var(--color-light-mode-text-xlight);--color-text-primary: var(--theme-color-primary-base);--color-text-primary-muted: var(--theme-color-primary-xxlight);--color-text-primary-mid: var(--theme-color-primary-xlight);--color-text-primary-standout: var(--theme-color-primary-xdark);--color-text-primary-text-inside: var(--color-white);--color-text-standout-main: var(--theme-color-primary-base);--color-text-inverted: var(--color-dark-mode-text-base);--color-text-standout: var(--color-light-mode-text-dark)}.theme-color-dark{--color-text-main: var(--color-dark-mode-text-base);--color-text-mid: var(--color-dark-mode-text-dark);--color-text-muted: var(--color-dark-mode-text-xdark);--color-text-primary: var(--theme-color-primary-light);--color-text-primary-muted: var( --color-black );--color-text-primary-mid: var(--theme-color-primary-xdark);--color-text-primary-standout: var(--theme-color-primary-dark);--color-text-primary-text-inside: var(--theme-color-primary-xxdark);--color-text-standout-main: var(--color-white);--color-text-inverted: var(--color-light-mode-text-base);--color-text-standout: var(--color-dark-mode-text-light)}:root{--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, .12);--shadow-spread: 0 0 7px 0 rgba(0, 0, 0, .04);--shadow-pop: 0 4px 10px 0 rgba(0, 0, 0, .05);--shadow-tight: 0 1px 1px 0 rgba(0, 0, 0, .12);--shadow-hover: 0 12px 13px 0 rgba(0, 0, 0, .02)}.theme-color-dark{--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, .69);--shadow-spread: 0 0 7px 0 rgba(0, 0, 0, .52);--shadow-pop: 0 4px 10px 0 rgba(0, 0, 0, .99);--shadow-tight: 0 1px 1px 0 rgba(0, 0, 0, .69);--shadow-hover: 0 12px 13px 0 rgba(0, 0, 0, .12)}:root{--theme-radius-medium: var(--radius-m);--theme-radius-large: var(--radius-l);--theme-radius-xlarge: var(--radius-xl)}.theme-radius-straight{--theme-radius-medium: var(--radius-none);--theme-radius-large: var(--radius-xs);--theme-radius-xlarge: var(--radius-s)}:root{--color-gradient-primary-hover: var(--theme-color-primary-dark), var(--theme-color-primary-xdark);--color-gradient-secondary-hover: var(--color-light-mode-grey-scale-xlight), var(--color-light-mode-grey-scale-light);--color-gradient-merge-hover: var(--color-merge-hover), var(--color-merge-standout);--color-gradient-danger-hover: var(--color-scarlet-dark), var(--color-scarlet-xdark)}.theme-color-dark{--color-gradient-primary-hover: var(--theme-color-primary-base), var(--theme-color-primary-dark);--color-gradient-secondary-hover: var(--color-dark-mode-grey-scale-xxlight), var(--color-dark-mode-grey-scale-xxlight);--color-gradient-danger-hover: var(--color-scarlet-base), var(--color-scarlet-xdark)}:root{--public-content-desktop-header-height: 80px;--public-content-mobile-header-height: 64px;--public-content-container-max-width: 1900px;--block-wrapper-max-width: 750px;--page-wrapper-max-width: 1200px;--app-max-width: 1440px;--content-max-width: 980px;--content-min-horizontal-spacing: 60px;--app-header-height: calc(var(--size-l) + 1px);--app-toolbar-height: calc(var(--size-s) + calc(var(--spacing-xs) * 2) + 1px)}body.dragging [data-hide-on-drag]{transition:opacity var(--duration-short);opacity:0}:root{--theme-overlay-background: var(--color-background-main)}.theme-color-dark{--theme-overlay-background: var(--color-background-main)} /*# sourceMappingURL=https://app.gitbook.com/public/app/public-SMZDSBRN.css.map */ /* Typographical styles */ .base_qcuoW, .uiBase_eGiAK { font: var(--sp-typography-ui-base-font); letter-spacing: var(--sp-typography-ui-base-letter-spacing); } .uiHeadingLarge_TNEyV { font: var(--sp-typography-ui-heading-large-font); letter-spacing: var(--sp-typography-ui-heading-large-letter-spacing); } .uiHeadingMedium_KefKX { font: var(--sp-typography-ui-heading-medium-font); letter-spacing: var(--sp-typography-ui-heading-medium-letter-spacing); } .uiAction_bZmXH { font: var(--sp-typography-ui-action-font); letter-spacing: var(--sp-typography-ui-action-letter-spacing); } .uiSmall_BjkNA { font: var(--sp-typography-ui-small-font); letter-spacing: var(--sp-typography-ui-small-letter-spacing); } .uiStandout_fNFZw { font: var(--sp-typography-ui-standout-font); letter-spacing: var(--sp-typography-ui-standout-letter-spacing); } .contentHeadingLarge_E6maj { font: var(--sp-typography-content-heading-large-font); letter-spacing: var(--sp-typography-content-heading-large-letter-spacing); } .contentHeadingMedium_QTXTi { font: var(--sp-typography-content-heading-medium-font); letter-spacing: var(--sp-typography-content-heading-medium-letter-spacing); } .contentHeadingSmall_PZccC { font: var(--sp-typography-content-heading-small-font); letter-spacing: var(--sp-typography-content-heading-small-letter-spacing); } .contentParagraph_-qmPj { font: var(--sp-typography-content-paragraph-font); letter-spacing: var(--sp-typography-content-paragraph-letter-spacing); } .contentMono_rIZdi { font: var(--sp-typography-content-mono-font); letter-spacing: var(--sp-typography-content-mono-letter-spacing); } .pageMainTitle_4t6Ok { font: var(--sp-typography-page-title-font); letter-spacing: var(--sp-typography-page-title-letter-spacing); } .pageMainSubtitle_dLQTm { font: var(--sp-typography-page-subtitle-font); letter-spacing: var(--sp-typography-page-subtitle-letter-spacing); } /* Semantic colours */ .colorStandout_AGrtA { color: var(--sp-color-text-standout); } .colorLight_I6WtJ { color: var(--sp-color-text-light); } .colorBase_DJAFR { color: var(--sp-color-text-base); } .colorMuted_Nk-dv { color: var(--sp-color-text-muted); } .link_-0Vkt[href] { text-decoration: none; color: var(--sp-color-text-link); } .link_-0Vkt[href]:hover, .link_-0Vkt[href]:focus-visible, .link_-0Vkt[href]:active { text-decoration: underline; } .view_manYY { display: flex; min-width: 0; /* https://dfmcphee.com/flex-items-and-min-width-0/#:~:text=This%20means%20the%20minimum%20width,can%20see%20an%20example%20here. */ } .full_RBRYY { width: 100%; } @keyframes popInFrames_GLeBw { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes popOutFrames_v04La { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } @keyframes slideInRightFrames_Tx4I5 { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes slideOutRightFrames_g7LeU { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @keyframes slideEnter_apFS2 { from { transform: var(--transform); } } @keyframes slideExit_O0mEI { to { transform: var(--transform); } } @keyframes fadeEnter_TtNM- { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeExit_eqY1G { from { opacity: 1; } to { opacity: 0; } } .popIn_HUvB6 { animation-name: popInFrames_GLeBw; animation-duration: var(--duration-short); } .popOut_Ygc-T { animation-name: popOutFrames_v04La; animation-duration: var(--duration-short); } .fadeIn_oHVvu { animation-name: fadeEnter_TtNM-; animation-duration: var(--duration-xshort); } .fadeOut_n3Euj { animation-name: fadeExit_eqY1G; animation-duration: var(--duration-xshort); } .slideInRight_Uiof3 { animation-name: slideInRightFrames_Tx4I5; animation-duration: var(--duration-short); } .slideOutRight_fkXO8 { animation-name: slideOutRightFrames_g7LeU; animation-duration: var(--duration-short); } /* * Composable animations using css variables */ .fade_t11VD { animation-delay: var(--delay, 0); animation-duration: var(--duration); animation-fill-mode: both; } .fade_t11VD.enter_CJ4NW { animation-name: fadeEnter_TtNM-; } .fade_t11VD.exit_pL54W { animation-name: fadeExit_eqY1G; } .slide_NPfw9 { animation-delay: var(--delay, 0); animation-duration: var(--duration); animation-fill-mode: both; } .slide_NPfw9.enter_CJ4NW { animation-name: slideEnter_apFS2; } .slide_NPfw9.exit_pL54W { animation-name: slideExit_O0mEI; } .fade_t11VD.slide_NPfw9 { animation-delay: var(--delay, 0), var(--delay, 0); animation-duration: var(--duration), var(--duration); animation-fill-mode: both, both; } .fade_t11VD.slide_NPfw9.enter_CJ4NW { animation-name: slideEnter_apFS2, fadeEnter_TtNM-; } .fade_t11VD.slide_NPfw9.exit_pL54W { animation-name: slideExit_O0mEI, fadeExit_eqY1G; } .enter_CJ4NW { --duration: var(--duration-short); } .exit_pL54W { --duration: var(--duration-xshort); } .distance-s_mIzSK { --distance: 5px; } .distance-m_6j9sJ { --distance: 10%; } .distance-l_X1tkU { --distance: 100%; } .left_Hu7GS, .top_NZtOQ { --direction: -1; } .right_E4G3t, .bottom_3FdkX { --direction: 1; } .left_Hu7GS, .right_E4G3t { --transform-origin: translateX(0); --transform: translateX(calc(var(--direction) * var(--distance))); } .bottom_3FdkX, .top_NZtOQ { --transform-origin: translateY(0); --transform: translateY(calc(var(--direction) * var(--distance))); } .delay-xs_2KPQY { --delay: 100ms; } .delay-s_PScf8 { --delay: 150ms; } .delay-m_GzTIs { --delay: 200ms; } .delay-l_9HxsJ { --delay: 250ms; } .delay-xl_wIGLd { --delay: 350ms; } .duration-xs_sva6i { --duration: var(--duration-xshort); } .duration-s_2wWH8 { --duration: var(--duration-short); } .duration-m_2OJD2 { --duration: var(--duration-medium); } .duration-l_SmBMD { --duration: var(--duration-long); } .main_wVAS- { border-color: var(--color-border-main); } .mid_64HWU { border-color: var(--color-border-mid); } .muted_OjFRM { border-color: var(--color-border-muted); } /* Primary */ .primaryMain_zWBvW { border-color: var(--color-primary-main); } .primaryMid_ft1Tb { border-color: var(--color-primary-mid); } .primaryMuted_uyXS3 { border-color: var(--color-primary-muted); } .primaryHover_jqzl8:hover { border-color: var(--color-primary-hover); } .primaryStandout_uCNNW { border-color: var(--color-primary-standout); } .primaryTextInside_5x4-N { border-color: var(--color-primary-text-inside); } /* Secondary */ .secondaryMain_PsI40 { border-color: var(--color-secondary-main); } .secondaryMuted_xcGqy { border-color: var(--color-secondary-muted); } .secondaryHover_E2rRa:hover { border-color: var(--color-secondary-hover); } .secondaryStandout_Shc5k { border-color: var(--color-secondary-standout); } .secondaryTextInside_B1Hw5 { border-color: var(--color-secondary-text-inside); } /* Standout */ .standoutMain_oNjwi { border-color: var(--color-standout-main); } .standoutStandout_HQDUy { border-color: var(--color-standout-standout); } .standoutTextInside_i0T5V { border-color: var(--color-standout-text-inside); } /* Item Hover */ .itemHover_-ulgN:hover { border-color: var(--color-item-hover); } /* Backdrop */ .backdropTransparent_DgpCE { border-color: var(--color-backdrop-transparent); } .backdropBackground_fGTLl { border-color: var(--color-backdrop-background); } .backdropBackgroundLight_UVcqn { border-color: var(--color-backdrop-background-light); } /* Info */ .infoMain_-Nl-r { border-color: var(--color-info-main); } .infoMuted_52-Kd { border-color: var(--color-info-muted); } .infoHover_0cp03:hover { border-color: var(--color-info-hover); } .infoStandout_Bnybe { border-color: var(--color-info-standout); } .infoTextInside_MfZlv { border-color: var(--color-info-text-inside); } /* Success */ .successMain_7mppI { border-color: var(--color-success-main); } .successMuted_V27a3 { border-color: var(--color-success-muted); } .successStandout_9Gk-f { border-color: var(--color-success-standout); } .successTextInside_qyXqi { border-color: var(--color-success-text-inside); } /* Warning */ .warningMain_3-X2g { border-color: var(--color-warning-main); } .warningMuted_ZItlE { border-color: var(--color-warning-muted); } .warningStandout_EmnQb { border-color: var(--color-warning-standout); } .warningTextInside_Zejzb { border-color: var(--color-warning-text-inside); } /* Danger */ .dangerMain_nKmT9 { border-color: var(--color-danger-main); } .dangerMuted_-9GY- { border-color: var(--color-danger-muted); } .dangerHover_fplpJ:hover { border-color: var(--color-danger-hover); } .dangerStandout_9qACJ { border-color: var(--color-danger-standout); } .dangerTextInside_pPfKz { border-color: var(--color-danger-text-inside); } /* Merge */ .mergeMain_AK1p4 { border-color: var(--color-merge-main); } .mergeMuted_pFqJN { border-color: var(--color-merge-muted); } .mergeHover_jSuVe:hover { border-color: var(--color-merge-hover); } .mergeStandout_3nzlh { border-color: var(--color-merge-standout); } .mergeTextInside_-t7Tn { border-color: var(--color-merge-text-inside); } /* Upgrade */ .upgradeMain_zGbJa { border-color: var(--color-upgrade-main); } .upgradeMuted_S9Pw2 { border-color: var(--color-upgrade-muted); } .upgradeHover_Dxk3S:hover { border-color: var(--color-upgrade-hover); } .upgradeStandout_Ee2mP { border-color: var(--color-upgrade-standout); } .upgradeTextInside_hzexc { border-color: var(--color-upgrade-text-inside); } .main_kxvok { background-color: var(--color-background-main); } .mid_9V4uj { background-color: var(--color-background-mid); } .muted_1--Ni { background-color: var(--color-background-muted); } .standout_lsZhY { background-color: var(--color-background-standout); } .inverted_u6Zdl { background-color: var(--color-background-inverted); } /* Primary */ .primaryMain_g-6J9 { background-color: var(--color-primary-main); } .primaryMid_A-hRf { background-color: var(--color-primary-mid); } .primaryMuted_DzY9h { background-color: var(--color-primary-muted); } .primaryHover_ihg5M:hover { background-color: var(--color-primary-hover); } .primaryStandout_1qKhr { background-color: var(--color-primary-standout); } .primaryTextInside_28ROR { background-color: var(--color-primary-text-inside); } /* Secondary */ .secondaryMain_9ufzC { background-color: var(--color-secondary-main); } .secondaryMuted_fq-FH { background-color: var(--color-secondary-muted); } .secondaryHover_rH-Vb:hover { background-color: var(--color-secondary-hover); } .secondaryStandout_6mNUa { background-color: var(--color-secondary-standout); } .secondaryTextInside_WRI3S { background-color: var(--color-secondary-text-inside); } /* Standout */ .standoutMain_2Ccp1 { background-color: var(--color-standout-main); } .standoutStandout_4F1t1 { background-color: var(--color-standout-standout); } .standoutTextInside_FadK7 { background-color: var(--color-standout-text-inside); } /* Item */ .itemHover_71JI0:hover { background-color: var(--color-item-hover); } /* Backdrop */ .backdropTransparent_V93XY { background-color: var(--color-backdrop-transparent); } .backdropBackground_f7JvU { background-color: var(--color-backdrop-background); } .backdropBackgroundLight_zKkF- { background-color: var(--color-backdrop-background-light); } /* Info */ .infoMain_WLOJj { background-color: var(--color-info-main); } .infoMuted_URkIL { background-color: var(--color-info-muted); } .infoHover_SdLQi:hover { background-color: var(--color-info-hover); } .infoStandout_-wKqA { background-color: var(--color-info-standout); } .infoTextInside_vz1-a { background-color: var(--color-info-text-inside); } /* Success */ .successMain_oeknr { background-color: var(--color-success-main); } .successMuted_mdUO3 { background-color: var(--color-success-muted); } .successStandout_6QJrP { background-color: var(--color-success-standout); } .successTextInside_QkhHt { background-color: var(--color-success-text-inside); } /* Warning */ .warningMain_smS-6 { background-color: var(--color-warning-main); } .warningMuted_k3aPL { background-color: var(--color-warning-muted); } .warningStandout_IVsgc { background-color: var(--color-warning-standout); } .warningTextInside_9wDmF { background-color: var(--color-warning-text-inside); } /* Danger */ .dangerMain_Bp0PI { background-color: var(--color-danger-main); } .dangerMuted_QeqgX { background-color: var(--color-danger-muted); } .dangerHover_2uhbI:hover { background-color: var(--color-danger-hover); } .dangerStandout_NC9TF { background-color: var(--color-danger-standout); } .dangerTextInside_EgNZK { background-color: var(--color-danger-text-inside); } /* Merge */ .mergeMain_DZLsS { background-color: var(--color-merge-main); } .mergeMuted_0WTMX { background-color: var(--color-merge-muted); } .mergeHover_WMNM4:hover { background-color: var(--color-merge-hover); } .mergeStandout_iguwY { background-color: var(--color-merge-standout); } .mergeTextInside_8hnUv { background-color: var(--color-merge-text-inside); } /* Upgrade */ .upgradeMain_OU4ch { background-color: var(--color-upgrade-main); } .upgradeMuted_zOxra { background-color: var(--color-upgrade-muted); } .upgradeHover_AKcIL:hover { background-color: var(--color-upgrade-hover); } .upgradeStandout_gj0v6 { background-color: var(--color-upgrade-standout); } .upgradeTextInside_-DzzI { background-color: var(--color-upgrade-text-inside); } .transparent_fqMTx { background-color: transparent; } /* --- Flex utils --- */ .flex_jZskO { display: flex; } .inline_1Spgx { display: inline-flex; } .column_C3yiR { flex-direction: column; } .row_PhhRi { flex-direction: row; } .alignCenter_zl3iW { align-items: center; } .alignStart_zfIW- { align-items: flex-start; } .alignEnd_MscO7 { align-items: flex-end; } .alignStretch_bONGs { align-items: stretch; } .alignSelfCenter_3amtn { align-self: center; } .alignSelfBaseline_SuLM3 { align-self: baseline; } .alignSelfEnd_izgwy { align-self: flex-end; } .justifyContentCenter_l8VjR { justify-content: center; } .justifyContentStart_Qx2KF { justify-content: flex-start; } .justifyContentEnd_nVg36 { justify-content: flex-end; } .justifySpaceBetween_js4s1 { justify-content: space-between; } .justifySpaceAround_Sw16t { justify-content: space-around; } .flex1_aMpAE { flex: 1 1 0%; } .flex2_O33Vy { flex: 2; } .flex0Auto_C2AHx { flex: 0 0 auto; } .unset_Tm33p { flex: unset; } .shrink0_jXNf1 { flex-shrink: 0; } .shrink1_gorti { flex-shrink: 1; } .shrink2_w1eky { flex-shrink: 2; } .grow1_wYxKs { flex-grow: 1; } .wrap_wRQuV { flex-wrap: wrap; } .basisAuto_J0K-W { flex-basis: auto; } .medium_n7kMt { border-radius: var(--theme-radius-medium); } .large_dR1tN { border-radius: var(--theme-radius-large); } .xlarge_IcWm8 { border-radius: var(--theme-radius-xlarge); } .backdrop_B-Jdt { top: 0; left: 0; right: 0; bottom: 0; flex-direction: row; align-items: flex-start; justify-content: center; width: 100%; height: 100%; z-index: var(--z-index-popover); background-color: transparent; } .xsmall_0kQwx { gap: var(--spacing-xs); } .small_ACRnB { gap: var(--spacing-s); } .medium_BMrqZ { gap: var(--spacing-m); } .large_QY-m7 { gap: var(--spacing-l); } .xlarge_630KF { gap: var(--spacing-xl); } .xxlarge_vhV1l { gap: var(--spacing-xxl); } .xsmallRowGap_33rHq { row-gap: var(--spacing-xs); } .smallRowGap_f4Mwn { row-gap: var(--spacing-s); } .mediumRowGap_a8rhI { row-gap: var(--spacing-m); } .largeRowGap_8rAWA { row-gap: var(--spacing-l); } .xlargeRowGap_4PeZA { row-gap: var(--spacing-xl); } .xxlargeRowGap_g-jhX { row-gap: var(--spacing-xxl); } .xsmallColumnGap_qKMbq { -moz-column-gap: var(--spacing-xs); column-gap: var(--spacing-xs); } .smallColumnGap_hthCr { -moz-column-gap: var(--spacing-s); column-gap: var(--spacing-s); } .mediumColumnGap_a6OiE { -moz-column-gap: var(--spacing-m); column-gap: var(--spacing-m); } .largeColumnGap_zZxy6 { -moz-column-gap: var(--spacing-l); column-gap: var(--spacing-l); } .xlargeColumnGap_ETnW5 { -moz-column-gap: var(--spacing-xl); column-gap: var(--spacing-xl); } .xxlargeColumnGap_UDUIo { -moz-column-gap: var(--spacing-xxl); column-gap: var(--spacing-xxl); } /* --- Margin spacing utils --- */ /* * As classes are all of equal specificity, order is important here! * Broader shorthand terms first so they can be overwritten. */ .auto_7Wec0 { margin: auto; } .none_H-coh { margin: var(--spacing-none); } .xsmall_zYy9L { margin: var(--spacing-xs); } .small_IoRVb { margin: var(--spacing-s); } .medium_YO9JY { margin: var(--spacing-m); } .large_UcaI5 { margin: var(--spacing-l); } .xlarge_Jrdio { margin: var(--spacing-xl); } .xxlarge_KvbwK { margin: var(--spacing-xxl); } .autoHorizontal_dqmM- { margin-left: auto; margin-right: auto; } .noneHorizontal_MVTnN { margin-left: var(--spacing-none); margin-right: var(--spacing-none); } .xsmallHorizontal_4Ay6Z { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); } .smallHorizontal_vwl7W { margin-left: var(--spacing-s); margin-right: var(--spacing-s); } .mediumHorizontal_kqEW7 { margin-left: var(--spacing-m); margin-right: var(--spacing-m); } .largeHorizontal_jfG60 { margin-left: var(--spacing-l); margin-right: var(--spacing-l); } .xlargeHorizontal_5HP72 { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); } .xxlargeHorizontal_0EBDV { margin-left: var(--spacing-xxl); margin-right: var(--spacing-xxl); } .autoVertical_j0z2Y { margin-top: auto; margin-bottom: auto; } .noneVertical_jpmaI { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); } .xsmallVertical_UzN1E { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .smallVertical_LMAQq { margin-top: var(--spacing-s); margin-bottom: var(--spacing-s); } .mediumVertical_UA3WI { margin-top: var(--spacing-m); margin-bottom: var(--spacing-m); } .largeVertical_UXQbb { margin-top: var(--spacing-l); margin-bottom: var(--spacing-l); } .xlargeVertical_r1WTd { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .xxlargeVertical_cO4gY { margin-top: var(--spacing-xxl); margin-bottom: var(--spacing-xxl); } .autoLeft_Yz0Cc { margin-left: auto; } .noneLeft_mLoK7 { margin-left: var(--spacing-none); } .xsmallLeft_hr3iS { margin-left: var(--spacing-xs); } .smallLeft_9PPIX { margin-left: var(--spacing-s); } .mediumLeft_p8z6C { margin-left: var(--spacing-m); } .largeLeft_wxIV8 { margin-left: var(--spacing-l); } .xlargeLeft_1P4-i { margin-left: var(--spacing-xl); } .xxlargeLeft_DGHxt { margin-left: var(--spacing-xxl); } .autoRight_P0RJh { margin-right: auto; } .noneRight_7vX-H { margin-right: var(--spacing-none); } .xsmallRight_Z1-Ws { margin-right: var(--spacing-xs); } .smallRight_VJlEG { margin-right: var(--spacing-s); } .mediumRight_LHc8Y { margin-right: var(--spacing-m); } .largeRight_d6l9- { margin-right: var(--spacing-l); } .xlargeRight_MZNLT { margin-right: var(--spacing-xl); } .xxlargeRight_7LgPn { margin-right: var(--spacing-xxl); } .autoTop_ZXXln { margin-top: auto; } .noneTop_db23V { margin-top: var(--spacing-none); } .xsmallTop_ZQpB9 { margin-top: var(--spacing-xs); } .smallTop_6u89Q { margin-top: var(--spacing-s); } .mediumTop_JqSwy { margin-top: var(--spacing-m); } .largeTop_jdaOn { margin-top: var(--spacing-l); } .xlargeTop_MO95n { margin-top: var(--spacing-xl); } .xxlargeTop_Bb-XD { margin-top: var(--spacing-xxl); } .autoBottom_-HfAu { margin-bottom: auto; } .noneBottom_bSouR { margin-bottom: var(--spacing-none); } .xsmallBottom_YGaui { margin-bottom: var(--spacing-xs); } .smallBottom_OktUR { margin-bottom: var(--spacing-s); } .mediumBottom_ie8Oy { margin-bottom: var(--spacing-m); } .largeBottom_v1r32 { margin-bottom: var(--spacing-l); } .xlargeBottom_xhbIb { margin-bottom: var(--spacing-xl); } .xxlargeBottom_t8hKD { margin-bottom: var(--spacing-xxl); } .pressable_TANP6 { cursor: pointer; } /** Utility to show an element onlywhen hovering over one of its ancestor */ .hoverShowTarget_QdXc- { opacity: 0; transition: opacity 0.2s var(--duration-xshort); } .hoverShowAncestor_iWLD2:hover .hoverShowTarget_QdXc- { opacity: 1; } .xxsmall_nbn-B { width: var(--icon-xxs); height: var(--icon-xxs); } .xsmall_3ljsD { width: var(--icon-xs); height: var(--icon-xs); } .small_beTVF { width: var(--icon-s); height: var(--icon-s); } .medium_51Ibk { width: var(--icon-m); height: var(--icon-m); } .large_7Et-t { width: var(--icon-l); height: var(--icon-l); } .xlarge_EUFQj { width: var(--icon-xl); height: var(--icon-xl); } .full_UyERR { height: 100%; } .static_JEIoj { position: static; } .relative_F68jE { position: relative; } .absolute_QHA3s { position: absolute; } .fixed_W8xcF { position: fixed; } .sticky_N9-iB { position: sticky; } /* --- Padding spacing utils --- */ /* * As classes are all of equal specificity, order is important here! * Broader shorthand terms first so they can be overwritten. */ .auto_u2FQV { padding: auto; } .none_Xeqr1 { padding: var(--spacing-none); } .xsmall_RNpQJ { padding: var(--spacing-xs); } .small_i5cRu { padding: var(--spacing-s); } .medium_lvpxM { padding: var(--spacing-m); } .large_Wiul9 { padding: var(--spacing-l); } .xlarge_DH-qe { padding: var(--spacing-xl); } .xxlarge_DmE44 { padding: var(--spacing-xxl); } .autoHorizontal_EXG0J { padding-left: auto; padding-right: auto; } .noneHorizontal_HglM0 { padding-left: var(--spacing-none); padding-right: var(--spacing-none); } .xsmallHorizontal_j9kFq { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } .smallHorizontal_kBCzR { padding-left: var(--spacing-s); padding-right: var(--spacing-s); } .mediumHorizontal_74-WX { padding-left: var(--spacing-m); padding-right: var(--spacing-m); } .largeHorizontal_Q-JXQ { padding-left: var(--spacing-l); padding-right: var(--spacing-l); } .xlargeHorizontal_HR-rb { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } .xxlargeHorizontal_z7UpB { padding-left: var(--spacing-xxl); padding-right: var(--spacing-xxl); } .autoVertical_CO--- { padding-top: auto; padding-bottom: auto; } .noneVertical_r0alT { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); } .xsmallVertical_atT3z { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); } .smallVertical_jhjRt { padding-top: var(--spacing-s); padding-bottom: var(--spacing-s); } .mediumVertical_-Vaii { padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); } .largeVertical_mCxWf { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); } .xlargeVertical_FTqRL { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); } .xxlargeVertical_Yl5zq { padding-top: var(--spacing-xxl); padding-bottom: var(--spacing-xxl); } .autoLeft_lkcgr { padding-left: auto; } .noneLeft_dLQuY { padding-left: var(--spacing-none); } .xsmallLeft_KJb-B { padding-left: var(--spacing-xs); } .smallLeft_FRtxI { padding-left: var(--spacing-s); } .mediumLeft_DDVbL { padding-left: var(--spacing-m); } .largeLeft_FSlQO { padding-left: var(--spacing-l); } .xlargeLeft_RHTXY { padding-left: var(--spacing-xl); } .xxlargeLeft_bPUg- { padding-left: var(--spacing-xxl); } .autoRight_k-Bwn { padding-right: auto; } .noneRight_jhurH { padding-right: var(--spacing-none); } .xsmallRight_kZK2f { padding-right: var(--spacing-xs); } .smallRight_AA-lB { padding-right: var(--spacing-s); } .mediumRight_CAUEc { padding-right: var(--spacing-m); } .largeRight_deKOg { padding-right: var(--spacing-l); } .xlargeRight_shJpI { padding-right: var(--spacing-xl); } .xxlargeRight_OnP0q { padding-right: var(--spacing-xxl); } .autoTop_KvMqu { padding-top: auto; } .noneTop_aMiQj { padding-top: var(--spacing-none); } .xsmallTop_ABm9D { padding-top: var(--spacing-xs); } .smallTop_crzBC { padding-top: var(--spacing-s); } .mediumTop_QDiZG { padding-top: var(--spacing-m); } .largeTop_ejwCW { padding-top: var(--spacing-l); } .xlargeTop_38ZbM { padding-top: var(--spacing-xl); } .xxlargeTop_IdFcE { padding-top: var(--spacing-xxl); } .autoBottom_ZsmpD { padding-bottom: auto; } .noneBottom_ovUyz { padding-bottom: var(--spacing-none); } .xsmallBottom_NnBZ6 { padding-bottom: var(--spacing-xs); } .smallBottom_BmSGf { padding-bottom: var(--spacing-s); } .mediumBottom_jdYUb { padding-bottom: var(--spacing-m); } .largeBottom_AE8QZ { padding-bottom: var(--spacing-l); } .xlargeBottom_30Tzy { padding-bottom: var(--spacing-xl); } .xxlargeBottom_MbqcP { padding-bottom: var(--spacing-xxl); } .hidden_1N5Mm { overflow: hidden; } .xHidden_qhOrT { overflow-x: hidden; } .yHidden_0j8Nj { overflow-y: hidden; } .auto_etJoX { overflow: auto; } .xAuto_fbRwj { overflow-x: auto; } .yAuto_zOMvO { overflow-y: auto; } .nowrap_d-CCY { white-space: nowrap; } .textoverflowEllipsis_3ja3f { overflow-x: hidden; text-overflow: ellipsis; } .visible_wOGnG { opacity: 1; } .translucent_SpLM6 { opacity: 0.5; } .hidden_4e13N { opacity: 0; } /* Mobile breakpoint @ 700px */ /* Tablet breakpoint @ 1024px */ @media screen { .mobileRemove_vR7oA { display: none; } .mobileFlex_pG-iu { display: flex; } .mobileHide_6HJlu { opacity: 0; } .mobileShow_VUEBL { opacity: 1; } } @media screen and (min-width: 701px) { .tabletRemove_Jhtm5 { display: none; } .tabletFlex_sFpXG { display: flex; } .tabletHide_1SeGR { opacity: 0; } .tabletShow_wdH77 { opacity: 1; } } @media screen and (min-width: 1025px) { .desktopRemove_2PGp5 { display: none; } .desktopFlex_Pbs2H { display: flex; } .desktopHide_pEat- { opacity: 0; } .desktopShow_wA5rl { opacity: 1; } } .main_ZqJpq, .mainHover_0hFY8:hover { color: var(--color-text-main); } .mid_Vbes2, .midHover_-TN8i:hover { color: var(--color-text-mid); } .muted_Ahh3m, .mutedHover_8ivdf:hover { color: var(--color-text-muted); } .standout_gVGv2, .standoutHover_oo1I3:hover { color: var(--color-text-standout); } .inverted_1UcNv, .invertedHover_UyWNb:hover { color: var(--color-text-inverted); } /* Primary */ .primary_dKCeI, .primaryHover_szgyT:hover { color: var(--color-text-primary); } .primaryMuted_OC3m2, .primaryMutedHover_gPwB1:hover { color: var(--color-text-primary-muted); } .primaryMid_kgYUZ, .primaryMidHover_Xl-cU:hover { color: var(--color-text-primary-mid); } .primaryStandout_HwfAX { color: var(--color-text-primary-standout); } .primaryTextInside_l5ZwJ { color: var(--color-text-primary-text-inside); } /* Secondary */ .secondaryMain_4R-se { color: var(--color-secondary-main); } .secondaryMuted_wzWgW { color: var(--color-secondary-muted); } .secondaryHover_IMGbU:hover { color: var(--color-secondary-hover); } .secondaryStandout_7vWQ8 { color: var(--color-secondary-standout); } .secondaryTextInside_pLNMR { color: var(--color-secondary-text-inside); } /* Standout */ .standoutMain_ac2pt { color: var(--color-text-standout-main); } .standoutStandout_cjJuU { color: var(--color-standout-standout); } .standoutTextInside_2-iKN { color: var(--color-standout-text-inside); } /* Item Hover */ .itemHover_-ylH4:hover { color: var(--color-item-hover); } /* Backdrop */ .backdropTransparent_Moc6- { color: var(--color-backdrop-transparent); } .backdropBackground_YFiDa { color: var(--color-backdrop-background); } .backdropBackgroundLight_q6NNp { color: var(--color-backdrop-background-light); } /* Info */ .infoMain_7psg4 { color: var(--color-info-main); } .infoMuted_EZrrH { color: var(--color-info-muted); } .infoHover_S69L4:hover { color: var(--color-info-hover); } .infoStandout_y-svw { color: var(--color-info-standout); } .infoTextInside_nOnT6 { color: var(--color-info-text-inside); } /* Success */ .successMain_kWZo- { color: var(--color-success-main); } .successMuted_oEcOM { color: var(--color-success-muted); } .successStandout_qoM0B { color: var(--color-success-standout); } .successTextInside_0gkOV { color: var(--color-success-text-inside); } /* Warning */ .warningMain_5zFys { color: var(--color-warning-main); } .warningMuted_GMMTa { color: var(--color-warning-muted); } .warningStandout_vmBPZ { color: var(--color-warning-standout); } .warningTextInside_Hwxtq { color: var(--color-warning-text-inside); } /* Danger */ .dangerMain_w69YD { color: var(--color-danger-main); } .dangerMuted_CXRAl { color: var(--color-danger-muted); } .dangerHover_h5ZhC:hover { color: var(--color-danger-hover); } .dangerStandout_aOay6 { color: var(--color-danger-standout); } .dangerTextInside_57sqJ { color: var(--color-danger-text-inside); } /* Merge */ .mergeMain_VKoJU { color: var(--color-merge-main); } .mergeMuted_NuhTj { color: var(--color-merge-muted); } .mergeHover_4-mA-:hover { color: var(--color-merge-hover); } .mergeStandout_Jmh7g { color: var(--color-merge-standout); } .mergeTextInside_UYqCH { color: var(--color-merge-text-inside); } /* Upgrade */ .upgradeMain_OuYBG { color: var(--color-upgrade-main); } .upgradeMuted_tD8ko { color: var(--color-upgrade-muted); } .upgradeHover_3NNnj:hover { color: var(--color-upgrade-hover); } .upgradeStandout_aI0FK { color: var(--color-upgrade-standout); } .upgradeTextInside_xDBuA { color: var(--color-upgrade-text-inside); } .background_sthSo { background-color: var(--color-light-mode-sidebar-base); } .theme-color-dark .background_sthSo { background-color: var(--color-dark-mode-grey-scale-dark); } .theme-color-light.theme-contrast-low .background_sthSo { background-color: var(--color-white); } .activeItem_1MGCd { background-color: var(--color-light-mode-sidebar-dark); } .theme-color-dark .activeItem_1MGCd { background-color: var(--color-black); } .theme-color-light.theme-contrast-low .activeItem_1MGCd { background-color: var(--color-light-mode-grey-scale-xlight); } .hoverItem_7-Wd1 { background-color: rgba(0, 0, 0, 0.1); } .theme-color-dark .hoverItem_7-Wd1 { background-color: rgba(0, 0, 0, 0.2); } .theme-color-light.theme-contrast-low .hoverItem_7-Wd1 { background-color: var(--color-light-mode-grey-scale-xxlight); } .itemBorder_5278A { border-color: var(--color-light-mode-sidebar-dark); } .theme-color-dark .itemBorder_5278A { border-color: var(--color-dark-mode-grey-scale-xlight); } .theme-color-light.theme-contrast-low .itemBorder_5278A { border-color: var(--color-light-mode-grey-scale-light); } .itemText_RwWFz { color: var(--color-dark-mode-text-dark); } .theme-color-dark .itemText_RwWFz { color: var(--color-dark-mode-text-dark); } .theme-color-light.theme-contrast-low .itemText_RwWFz { color: var(--color-light-mode-text-light); } .mutedItemText_I9bjw { color: var(--color-dark-mode-text-xdark); } .theme-color-dark .mutedItemText_I9bjw { color: var(--color-dark-mode-text-xdark); } .theme-color-light.theme-contrast-low .mutedItemText_I9bjw { color: var(--color-light-mode-text-xlight); } .activeItemText_TeY14 { color: var(--color-white); } .theme-color-dark .activeItemText_TeY14 { color: var(--color-white); } .theme-color-light.theme-contrast-low .activeItemText_TeY14 { color: var(--color-black); } .inputBorder_oGEtJ { border-color: var(--color-light-mode-sidebar-dark); } .theme-color-dark .inputBorder_oGEtJ { border-color: var(--color-dark-mode-grey-scale-light); } .theme-color-light.theme-contrast-low .inputBorder_oGEtJ { border-color: var(--color-light-mode-grey-scale-base); } .standoutText_tJhEs { color: var(--color-white); } .theme-color-dark .standoutText_tJhEs { color: var(--color-white); } .theme-color-light.theme-contrast-low .standoutText_tJhEs { color: var(--color-black); } .base_qHrP7 { box-shadow: var(--shadow-base); } .spread_Sn6BQ { box-shadow: var(--shadow-spread); } .pop_vjnio { box-shadow: var(--shadow-pop); } .tight_7STQK { box-shadow: var(--shadow-tight); } .hover_w5jsp:hover { box-shadow: var(--shadow-hover); } /* --- Typography utils --- */ .base_UAIdb { font-family: var(--font-family-default); } .body_OIilV { font-size: var(--font-size-m); line-height: var(--line-height-m); } .mainTitle_8P2cu { font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); line-height: var(--line-height-xxl); } .mobileMainTitle_LpOkP { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-xl); } .heading1_4sXdo { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); line-height: var(--line-height-l); } .heading2_qKs5q { font-size: var(--font-size-ml); font-weight: var(--font-weight-bold); line-height: var(--line-height-m); } .heading3_185Ko { font-size: var(--font-size-m); font-weight: var(--font-weight-semibold); line-height: var(--line-height-m); } .sectionTitle_oJBoH { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-xl); } .groupTitle_xV-vG { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-xs); text-transform: uppercase; letter-spacing: 1.2px; } .description_Fch5l { font-weight: var(--font-weight-regular); font-size: var(--font-size-m); line-height: var(--line-height-m); } .label_utcUO { font-weight: var(--font-weight-regular); font-size: var(--font-size-s); line-height: var(--line-height-s); } .caption_OoXuq { font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: var(--line-height-xs); } .mobileCaption_-ki48 { font-size: var(--font-size-xxs); line-height: var(--line-height-xxs); font-weight: var(--font-weight-regular); } .code_ho4WC { font-weight: var(--font-weight-medium); font-size: var(--font-size-s); line-height: var(--line-height-s); font-family: var(--font-family-code); } .weightRegular_y-Mey { font-weight: var(--font-weight-regular); } .weightMedium_ZX-0r { font-weight: var(--font-weight-medium); } .weightSemibold_jepPC { font-weight: var(--font-weight-semibold); } .weightBold_0byV- { font-weight: var(--font-weight-bold); } .italic_Oujte { font-style: italic; } .underline_R6S7u { text-decoration: underline; } .strikethrough_uKiLm { text-decoration: line-through; } .uppercase_nKiGD { text-transform: uppercase; } .capitalize_6c66v { text-transform: capitalize; } .capitalizeFirstLetter_q2gtW:first-letter { text-transform: capitalize; } .alignCenter_RgXft { text-align: center; } .alignRight_6C9Wo { text-align: right; } .selectable_GH2GF { cursor: text; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .notSelectable_XCDZC { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .overflowHidden_YOfcf { overflow: hidden; } .wrap_Bf9cm { white-space: pre-wrap; word-wrap: break-word; } .noWrap_LVWYr { white-space: nowrap; } /* Component tokens */ .toolbar_hJES6 { --color-toolbar-surface: var(--sp-color-bg-menu-default); --color-toolbar-border: var(--sp-color-border-menu-default); } .theme-color-dark .toolbar_hJES6 { --color-toolbar-surface: var(--sp-color-bg-menu-dark-default); --color-toolbar-border: var(--sp-color-border-menu-dark-default); } .toolbar_hJES6 { background-color: var(--color-toolbar-surface); border: 1px solid var(--color-toolbar-border); box-shadow: var(--sp-shadow-elevated); padding: var(--spacing-xs); border-radius: var(--radius-l); } .toolbar_hJES6, .toolbar_hJES6 > .toolbarGroup_mD69e { gap: var(--spacing-xs); } .toolbar_hJES6 > .toolbarGroup_mD69e + .toolbarGroup_mD69e { padding-left: var(--spacing-xs); border-left: 1px solid var(--color-toolbar-border); } .indicator_RZn8- { width: var(--loading-indicator-size); height: var(--loading-indicator-size); color: var(--color-primary-mid); } .panel_GFQAE { align-items: center; display: flex; flex-direction: row; justify-content: center; flex: 1; min-width: 220px; min-height: var(--loading-panel-height); padding: var(--loading-panel-padding); } .icon_Xwiyi { width: var(--loading-indicator-size); height: var(--loading-indicator-size); animation: LoadingIndicator_9wlTU 1s linear infinite; } .paused_y-6t1 .icon_Xwiyi { animation-play-state: paused; } /* --- Sizes --- */ .xsmall_-susl { --loading-indicator-size: var(--icon-xs); --loading-panel-height: 0; --loading-panel-padding: 0; } .small_KGEuz { --loading-indicator-size: var(--icon-s); --loading-panel-height: 160px; --loading-panel-padding: var(--spacing-m) var(--spacing-s); } .medium_0-0Yl { --loading-indicator-size: var(--icon-m); --loading-panel-height: 180px; --loading-panel-padding: var(--spacing-l) var(--spacing-m); } .large_0iBMU { --loading-indicator-size: var(--icon-l); --loading-panel-height: 180px; --loading-panel-padding: var(--spacing-l) var(--spacing-m); } .xlarge_vR6-o { --loading-indicator-size: var(--icon-xl); --loading-panel-height: 260px; --loading-panel-padding: var(--spacing-xl) var(--spacing-m); } @keyframes LoadingIndicator_9wlTU { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .grabber_p72PX { cursor: grab; } .grabberIcon_ebrbU { color: var(--color-text-muted); } .grabberIcon_ebrbU:hover { color: var(--color-primary); } .buttonTabs_ihLP4 { display: flex; flex-direction: row; align-items: center; border: 1px solid var(--color-border-main); } .buttonTabsItem_9vRT7 { transition: background-color ease var(--duration-xshort); align-items: center; } .buttonTabsItemActive_PnjM4 { background-color: var(--color-background-standout); } /** icon */ .buttonTabsItemIcon_wUvLo { color: var(--color-text-muted); transition: color ease var(--duration-xshort); } /** label */ .buttonTabsItemText_Oa-uN { color: var(--color-text-mid); transition: color ease var(--duration-xshort); } .buttonTabsItem_9vRT7:hover .buttonTabsItemText_Oa-uN, .buttonTabsItemActive_PnjM4 .buttonTabsItemText_Oa-uN, .buttonTabsItem_9vRT7:hover .buttonTabsItemIcon_wUvLo, .buttonTabsItemActive_PnjM4 .buttonTabsItemIcon_wUvLo { color: var(--color-text-main); } /** size: medium */ .buttonTabsSizeMedium_Cra41 { height: var(--button-m); padding: var(--spacing-xs) var(--spacing-xs); border-radius: var(--theme-radius-medium); } .buttonTabsSizeMedium_Cra41 .buttonTabsItem_9vRT7 { padding: 0px var(--spacing-s); border-radius: var(--theme-radius-medium); } .buttonTabsSizeMedium_Cra41 .buttonTabsItemText_Oa-uN { font-weight: var(--font-weight-medium); font-size: var(--font-size-s); line-height: var(--line-height-s); } .buttonTabsSizeMedium_Cra41 .buttonTabsItemIcon_wUvLo { width: var(--icon-xs); height: var(--icon-xs); } .buttonTabsSizeMedium_Cra41 .buttonTabsItemIcon_wUvLo + .buttonTabsItemText_Oa-uN { margin-left: var(--spacing-s); } /* Disabled */ .buttonTabsItem_9vRT7.buttonTabsItemDisabled_XW4rD { cursor: default; } .buttonTabsItem_9vRT7.buttonTabsItemDisabled_XW4rD .buttonTabsItemText_Oa-uN { color: var(--color-text-muted); } body.dragging .hideOnDrag_zX3VC { transition: opacity var(--duration-short); opacity: 0; } .dropBefore_MwWdn::before, .dropAfter_5MuRf::after { position: absolute; content: ''; background-color: var(--theme-color-primary-base); animation: var(--duration-short) cubic-bezier(0.65, 0.05, 0.36, 1) dropPop_ZUQVo; scale: 1; opacity: 1; } .dropVertical_-4-Ev::before, .dropVertical_-4-Ev::after { height: 100%; width: 2px; } .dropHorizontal_445te::before, .dropHorizontal_445te::after { height: 3px; width: 100%; } .dropVertical_-4-Ev::before { left: calc(-1 * var(--spacing-s)); } .dropVertical_-4-Ev::after { right: calc(-1 * var(--spacing-s)); } .dropHorizontal_445te::before { top: 0; } .dropHorizontal_445te::after { bottom: 0; } @keyframes dropPop_ZUQVo { 0% { scale: 0.95; opacity: 0; } 50% { opacity: 1; } 100% { scale: 1; opacity: 1; } } .askAIText_-N8e0 { font: var(--sp-typography-ui-action-font); } .buttonGroup_-Se5P { --separator-color: var(--color-background-muted); } .buttonGroup_-Se5P > .buttonGroupItem_gipgW { position: relative; border-width: 0; z-index: 0; } .buttonGroup_-Se5P > .buttonGroupItem_gipgW:focus-visible { z-index: 1; } .buttonGroup_-Se5P > .buttonGroupItem_gipgW + .buttonGroupItem_gipgW:not(:last-of-type):not(:only-child) { border-radius: 0; border-right: 1px solid var(--separator-color); } .buttonGroup_-Se5P > .buttonGroupItem_gipgW:first-of-type:not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 1px solid var(--separator-color); } .buttonGroup_-Se5P > .buttonGroupItem_gipgW:last-of-type:not(:only-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* --- ButtonGroup variants --- */ .buttonGroupItem_gipgW.primary_uS3uI { --separator-color: var(--color-primary-hover); } .buttonGroupItem_gipgW.merge_vcRHb { --separator-color: var(--color-merge-hover); } .buttonGroupItem_gipgW.danger_Rnkqs { --separator-color: var(--color-danger-hover); } .buttonGroupItem_gipgW.disabled_exUb1 { --separator-color: var(--color-border-mid); } .header_F9H2h { height: var(--app-header-height); } .headerWithTabs_gzlHf { height: calc(var(--app-header-height) + var(--app-toolbar-height)); } .headerBorder_pdhTr { border-bottom: 1px solid var(--color-background-standout); } .headerTitleWrapper_6Ttsp { padding: var(--sp-spacing-400); } .heading_zpkSw { flex: 1; } .headerTabsWrapper_JEMhf { flex: 1; } .scrollable_xQRHB { overflow-y: auto; } .panelSection_m3a44 { border-bottom: 1px solid var(--color-background-standout); } /* --- Pulsing animation colors used in stepper --- */ :root { --color-pulsing-primary-inner-0: #346ddbb5; --color-pulsing-primary-inner-99: #91b1f046; --color-pulsing-primary-outer-0: #91b1f01f; --color-pulsing-primary-outer-99: #ecf3ff00; --color-pulsing-scarlet-inner-0: #d33d3db5; --color-pulsing-scarlet-inner-99: #ff918f46; --color-pulsing-scarlet-outer-0: #ff918f26; --color-pulsing-scarlet-outer-99: #ffcccb00; } .verticalBadgeLine_5USzO { height: 16px; width: 2px; z-index: -2; } .horizontalBadgeLine_hwvoz { position: absolute; top: 10px; height: 2px; background-size: 12px 16px; background-repeat: repeat-x; } .lineBeforeBadge_t-h6P { left: -2px; right: calc(50% + 11px); } .lineAfterBadge_8Fw-x { left: calc(50% + 11px); right: 0px; } .horizontalDashedLine_43Sm4 { background-image: linear-gradient( to right, transparent 4px, var(--color-background-standout) 4px, var(--color-background-standout) 4px ); } .verticalDashedLine_ikjgM { background-image: repeating-linear-gradient( to bottom, transparent, transparent 3px, var(--color-background-standout) 3px, var(--color-background-standout) 8px ); } .solidBlueLine_4TDi- { background-image: linear-gradient(var(--color-info-main) 1px, var(--color-info-main) 1px); } .pulse_EL6eD { border-radius: 50%; } .pulse_EL6eD::after { box-shadow: 0 0 0 3px var(--color-pulsing-primary-inner-99), 0 0 0 6px var(--color-pulsing-primary-outer-0); opacity: 1; content: ''; border-radius: 50%; position: absolute; z-index: -1; top: 1px; left: 1px; width: 20px; height: 20px; animation: pulsingAnimation_5imGn 2000ms ease-in-out infinite running; } .pulseRed_35S8S { border-radius: 50%; } .pulseRed_35S8S::after { box-shadow: 0 0 0 3px var(--color-pulsing-scarlet-inner-99), 0 0 0 6px var(--color-pulsing-scarlet-outer-0); } @keyframes pulsingAnimation_5imGn { 0% { opacity: 1; transform: scale(0.8); } 80% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.08); } } .blankslate_SmOSx { flex: 1; flex-direction: row; align-items: center; justify-content: center; border-radius: var(--theme-radius-large); } .blankslateIcon_9kfuo { color: var(--color-text-muted); } .blankslateIllustration_EB0Qg { } .blankslateContent_lfNph { max-width: 500px; flex-direction: column; align-items: center; justify-content: center; } .blankslateTitleWrapper_7Dj-5 { } .blankslateTitleText_Vfj72 { font-size: var(--font-size-m); font-weight: var(--font-weight-medium); line-height: var(--line-height-m); text-align: center; } .blankslateBodyWrapper_-XOm4 { } .blankslateBodyText_5COFT { font-size: var(--font-size-m); line-height: var(--line-height-m); text-align: center; } .blankslateAction_yZcW2 { } /* Kind default */ .blankslateDefault_UUoxT { } .blankslateDefault_UUoxT .blankslateTitleText_Vfj72 { color: var(--color-text-mid); } .blankslateDefault_UUoxT .blankslateBodyText_5COFT { color: var(--color-text-mid); } /* Kind primary */ .blankslatePrimary_ruX6s { background-color: var(--color-primary-muted); } .blankslatePrimary_ruX6s .blankslateTitleText_Vfj72 { color: var(--color-text-primary-standout); } .blankslatePrimary_ruX6s .blankslateBodyText_5COFT { color: var(--color-text-primary-standout); } /* Kind dashed */ .blankslateDashed_dNEyH { border: 2px dashed var(--color-border-mid); } .blankslateDashed_dNEyH .blankslateTitleText_Vfj72 { color: var(--color-text-mid); } .blankslateDashed_dNEyH .blankslateBodyText_5COFT { color: var(--color-text-mid); } /* Kind bordered */ .blankslateBordered_jNKW2 { border: 1px solid var(--color-border-mid); } .blankslateBordered_jNKW2 .blankslateTitleText_Vfj72 { color: var(--color-text-mid); } .blankslateBordered_jNKW2 .blankslateBodyText_5COFT { color: var(--color-text-mid); } /* Size small */ .blankslateSmall_-eGg- { } .blankslateSmall_-eGg- .blankslateIcon_9kfuo { width: var(--icon-s); margin-bottom: var(--spacing-m); } .blankslateSmall_-eGg- .blankslateContent_lfNph { padding: var(--spacing-l); } .blankslateSmall_-eGg- .blankslateTitleWrapper_7Dj-5 { margin-bottom: var(--spacing-s); } .blankslateSmall_-eGg- .blankslateAction_yZcW2 { margin-top: var(--spacing-l); } .blankslateSmall_-eGg- .blankslateIllustration_EB0Qg { width: 64px; height: 64px; margin-bottom: var(--spacing-l); } /* Size medium */ .blankslateMedium_9DnHl { } .blankslateMedium_9DnHl .blankslateIcon_9kfuo { width: var(--icon-m); margin-bottom: var(--spacing-m); } .blankslateMedium_9DnHl .blankslateContent_lfNph { padding: var(--spacing-l); } .blankslateMedium_9DnHl .blankslateTitleWrapper_7Dj-5 { margin-bottom: var(--spacing-s); } .blankslateMedium_9DnHl .blankslateAction_yZcW2 { margin-top: var(--spacing-l); } .blankslateMedium_9DnHl .blankslateIllustration_EB0Qg { width: 128px; height: 128px; margin-bottom: var(--spacing-l); } /* Size large */ .blankslateLarge_Chg6A { } .blankslateLarge_Chg6A .blankslateIcon_9kfuo { width: var(--icon-l); margin-bottom: var(--spacing-l); } .blankslateLarge_Chg6A .blankslateContent_lfNph { padding: var(--spacing-xl); } .blankslateLarge_Chg6A .blankslateTitleWrapper_7Dj-5 { margin-bottom: var(--spacing-s); } .blankslateLarge_Chg6A .blankslateAction_yZcW2 { margin-top: var(--spacing-l); } .blankslateLarge_Chg6A .blankslateIllustration_EB0Qg { width: 196px; height: 196px; margin-bottom: var(--spacing-l); } .blankslateLarge_Chg6A .blankslateTitleText_Vfj72 { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); line-height: var(--line-height-l); } .searchResultsGroup_1WUmo { padding: var(--sp-spacing-200); align-items: flex-end; gap: var(--sp-spacing-200); } .searchResultsGroupIcon_GTLB4 { width: var(--sp-spacing-400); height: var(--sp-spacing-400); color: var(--sp-color-search-group-heading); } .searchResultsGroupHeading_R3qNK { color: var(--sp-color-search-group-heading); } .sideSheetBackdrop_YXb4R { position: fixed; inset: 0px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background-color: var(--color-backdrop-bg); display: flex; align-items: flex-start; justify-content: center; z-index: var(--z-index-popover); } .sideSheetView_7f5UW { position: absolute; cursor: default; right: 0; top: 0; bottom: 0; } .main_b4cUt { background-color: var(--sp-color-bg-sidebar-main); border-right: 1px solid var(--sp-color-border-sidebar-main); } .settings_YAjcS { background-color: var(--sp-color-bg-sidebar-settings); border-right: 1px solid var(--sp-color-border-sidebar-settings); min-width: 220px; max-width: 260px; } .table_b-JzK { border-radius: var(--sp-radius-500); box-shadow: 0 0 0 1px var(--sp-color-border-table); border-collapse: collapse; width: 100%; } .clickableRow_zEo8T:hover { background-color: var(--sp-color-bg-muted); cursor: pointer; } .tr_6fw2z { display: table-row; } .cell_wCymr { display: table-cell; padding: var(--sp-spacing-400) var(--sp-spacing-200); border-bottom: 1px solid transparent; border-bottom-color: var(--sp-color-border-table); } .cell_wCymr:first-child { padding-left: var(--sp-spacing-600); } .cell_wCymr:last-child { padding-right: var(--sp-spacing-600); } tbody > .tr_6fw2z:last-child .cell_wCymr { border-bottom-color: transparent; } tbody > .tr_6fw2z:last-child .cell_wCymr:first-child { border-radius: 0 0 0 var(--sp-radius-500); } tbody > .tr_6fw2z:last-child .cell_wCymr:last-child { border-radius: 0 0 var(--sp-radius-500) 0; } .thead_6BjgW { display: table-row-group; } .thContent_bnDGS { align-items: center; } .th_sL6X5:first-child { border-radius: var(--sp-radius-500) 0 0 0; } .th_sL6X5:last-child { border-radius: 0 var(--sp-radius-500) 0 0; } .selected_mrBvU { background-color: var(--sp-color-primary-100); } .theme-color-dark .selected_mrBvU { background-color: var(--sp-color-black); } .th_sL6X5.sortable_KomSu:hover { cursor: pointer; } .searchAndFiltersWrapper_QRzT1 { background-color: var(--sp-color-bg-muted); border-radius: var(--sp-radius-500); padding: var(--sp-spacing-200); margin-bottom: var(--sp-spacing-400); flex-direction: row; align-items: center; } .sortDirection_zAnB6 { flex-direction: column; padding-left: var(--sp-spacing-100); } .sortDirection_zAnB6 .icon_UeWsU { width: var(--sp-size-icon-xs); height: var(--sp-size-icon-xs); } .pagination_RwAUR { margin-top: var(--sp-spacing-400); } .activityItemDate_2ZKLX { position: relative; padding: var(--sp-spacing-400) var(--sp-spacing-400) var(--sp-spacing-200) var(--sp-spacing-400); } .container_UPXwU { border: none; padding: 0; position: relative; width: 58px; height: 32px; border-radius: 25px; cursor: pointer; transition: background-color 0.25s ease-in-out; } .container_UPXwU:focus-visible { outline: 2px solid var(--focusring-color); outline-offset: 1px; } .darkestParentBackground_8TVPV { background-color: rgba(255, 255, 255, 0.2); } .darkParentBackground_ziFwB { background-color: rgba(59, 69, 78, 0.5); } .semiDarkParentBackground_wgu6B { background-color: rgba(59, 69, 78, 0.3); } .mediumParentBackground_BIBSL { background-color: rgba(59, 69, 78, 0.25); } .semiLightParentBackground_Yx9Vw { background-color: rgba(255, 255, 255, 0.55); } .lightParentBackground_INb4a { background-color: rgba(255, 255, 255, 0.6); } .lightestParentBackground_FL4je { background-color: rgba(59, 69, 78, 0.1); } .toggle_siihR { border: none; position: absolute; width: var(--icon-xl); height: var(--icon-xl); border-radius: 50%; transition: background-color 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .toggleLightMode_-FLG4 { left: 0; } .toggleDarkMode_uS4t3 { left: calc(100% - var(--icon-xl) - var(--spacing-s)); } .toggleSwitch_NtUzX { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .toggleButton_ePBfn { color: var(--color-text-primary); } .toggleIcon_-vIfn { width: 100%; height: 100%; color: var(--color-text-primary); } .tooltip_juN0X { color: var(--color-text-inverted); } .badge_Zr1xM { border-radius: var(--theme-radius-medium); height: var(--size-xs); background: var(--color-background-standout); } .icon_BNB9n { height: var(--icon-m); width: var(--icon-m); } .backdrop_M-DLi { position: fixed; inset: 0px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background-color: var(--color-backdrop-bg); display: flex; align-items: flex-start; justify-content: center; z-index: var(--z-index-popover); } .searchModal_Vcy-I { border-radius: var(--theme-radius-xlarge); border: 1px solid var(--color-border-main); background-color: var(--color-background-main); box-shadow: var(--shadow-pop); overflow: hidden; flex-direction: column; max-height: 100%; } @media (min-width: 1024px) { .searchModal_Vcy-I { width: 100%; max-width: 785px; max-height: calc(min(640px, 100% - (2 * var(--spacing-xxl)))); margin-top: var(--spacing-xxl); margin-right: var(--spacing-l); margin-left: var(--spacing-l); } } @media (max-width: 700px) { .searchModal_Vcy-I { position: absolute; margin: 0; top: var(--spacing-xs); left: var(--spacing-xs); right: var(--spacing-xs); max-height: calc(min(100vh, 440px)); width: auto; max-width: 100%; min-width: auto; } } /* Header */ .searchModalHeader_XHNRd { padding-right: var(--spacing-l); padding-left: var(--spacing-l); flex-direction: row; align-items: center; } .searchModalHeaderIcon_Q-OxP { width: var(--icon-m); height: var(--icon-m); color: var(--sp-color-primary-400); } .theme-color-dark .searchModalHeaderIcon_Q-OxP { color: var(--sp-color-primary-300); } /* Input */ .searchInput_TEvvq { font-family: var(--font-family-default); font-size: var(--font-size-m); line-height: var(--line-height-m); font-weight: var(--font-weight-regular); border: none; color: var(--color-text-main); padding-right: var(--spacing-m); padding-left: var(--spacing-m); padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); background-color: var(--color-background-main); } .searchInput_TEvvq::-moz-placeholder { color: var(--color-text-muted); } .searchInput_TEvvq::placeholder { color: var(--color-text-muted); } /* Body */ .searchModalBody_kS0BP { flex: 1; overflow-y: auto; flex-direction: column; } .backdrop_11Iq- { pointer-events: none; } .absoluteFill_IKtIQ { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .popover_8oy7U { z-index: var(--z-index-popover); position: fixed; pointer-events: auto; } .card_qVFG8 { border-radius: var(--radius-l); border: 1px solid transparent; position: relative; box-shadow: var(--shadow-pop); } .card_qVFG8.menu_YxBet { border-radius: var(--radius-xl); } .card_qVFG8.chromeless_mWYpC, .card_qVFG8.tooltip_AZt4J { box-shadow: none; } /* --- Popover colours --- */ .card_qVFG8 { border-color: var(--color-border-main); background-color: var(--color-background-main); } .card_qVFG8.tooltip_AZt4J { border-color: transparent; background-color: var(--color-background-inverted); } .card_qVFG8.chromeless_mWYpC { border-color: transparent; background-color: transparent; } /* --- Popover sizes --- */ .tooltip_AZt4J { min-width: var(--size-xs); min-height: var(--size-xs); max-width: 500px; max-height: 340px; } .default_SJvM7 { min-width: var(--size-xs); min-height: var(--size-xs); max-width: 200px; max-height: 340px; } .large_TW0Wd { min-width: 340px; min-height: var(--size-xs); max-width: 340px; max-height: 320px; } .xlarge_KVbe9 { min-width: 500px; min-height: var(--size-xs); max-width: 500px; max-height: 1000px; } .wide_TmhZ9 { min-width: var(--size-xs); min-height: var(--size-xs); max-width: 1000px; max-height: 1000px; } .menu_YxBet { min-width: var(--size-xs); min-height: var(--size-xs); max-width: 500px; max-height: 1000px; } /* Content styles */ .default_SJvM7 .content_liNQV, .large_TW0Wd .content_liNQV { overflow: hidden; } .xlarge_KVbe9 .content_liNQV { border-radius: var(--radius-l); } .alert_q3k8d { color: var(--color-text-main); border-color: transparent; border-radius: var(--theme-radius-xlarge); gap: var(--spacing-m); background-color: var(--color-background-muted); } .details_KGSjO { color: var(--color-text-mid); } .mainBg_Wb45V { border: 1px solid var(--color-border-mid); background-color: var(--color-background-main); } .icon_Wb4wR { width: var(--icon-m); height: var(--icon-m); } .iconColor_RR8-I, .mainBg_Wb45V.info_Ulw7q .title_lR6tH, .info_Ulw7q .iconColor_RR8-I { color: var(--color-text-primary); } .softInfo_pPq1w { background-color: var(--color-primary-xxlight); color: var(--color-light-mode-text-base); } .softInfo_pPq1w .details_KGSjO { color: var(--color-light-mode-text-light); } .mainBg_Wb45V.softInfo_pPq1w .title_lR6tH, .softInfo_pPq1w .iconColor_RR8-I { color: var(--color-primary-main); } .mainBg_Wb45V.success_u5BQT .title_lR6tH, .success_u5BQT .iconColor_RR8-I { color: var(--color-success-main); } .mainBg_Wb45V.warning_zxFFZ .title_lR6tH, .warning_zxFFZ .iconColor_RR8-I { color: var(--color-warning-main); } .mainBg_Wb45V.danger_VigyZ .title_lR6tH, .danger_VigyZ .iconColor_RR8-I { color: var(--color-danger-main); } .mainBg_Wb45V.merge_e72vD .title_lR6tH, .merge_e72vD .iconColor_RR8-I { color: var(--color-merge-main); } .upgrade_9UtYW { background-color: var(--color-upgrade-muted); color: var(--color-light-mode-text-base); } .upgrade_9UtYW .details_KGSjO { color: var(--color-light-mode-text-light); } .mainBg_Wb45V.upgrade_9UtYW .title_lR6tH, .upgrade_9UtYW .iconColor_RR8-I { color: var(--color-upgrade-main); } .pressable_nUrxI { cursor: pointer; } .withFocusRing_9WvnS:focus-visible { box-shadow: var(--focusring-color) 0px 0px 0px 1px, var(--focusring-offset-color) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; } .container_IzjBN { background-color: var(--sp-color-alert-sidebar-bg); border: 1px solid var(--sp-color-alert-sidebar-bg); border-radius: 6px; padding-left: var(--sp-spacing-300); padding-top: var(--sp-spacing-300); padding-bottom: var(--sp-spacing-400); flex-direction: column; align-items: stretch; flex-shrink: 1; flex-grow: 1; flex-basis: 0; } .header_BqnpV { flex-direction: row; align-items: center; margin-bottom: var(--sp-spacing-300); padding-right: var(--sp-spacing-200); } .heading_7xMoZ { font: var(--sp-typography-ui-small-font); letter-spacing: var(--sp-typography-ui-small-letter-spacing); color: var(--sp-color-alert-sidebar-text-heading); flex: 1 1 0%; } .icon_T1Bss { margin-left: var(--sp-spacing-100); } .body_P2gqP { font: var(--sp-typography-ui-small-font); letter-spacing: var(--sp-typography-ui-small-letter-spacing); color: var(--sp-color-alert-sidebar-text-body); padding-right: var(--sp-spacing-300); } .action_c3X06 { flex-direction: row; margin-top: var(--sp-spacing-400); padding-right: var(--sp-spacing-300); } /* TODO - need to remove menuitem (use spine) */ :root { --color-menuitem-text: var(--sp-color-text-menu-default); --color-menuitem-text-hover: var(--sp-color-text-menu-hover); --color-menuitem-text-active: var(--sp-color-text-menu-active); --color-menuitem-surface: var(--sp-color-bg-menu-default); --color-menuitem-surface-hover: var(--sp-color-bg-menu-hover); --color-menuitem-surface-active: var(--sp-color-bg-menu-active); } .theme-color-dark { --color-menuitem-text: var(--sp-color-text-menu-dark-default); --color-menuitem-text-hover: var(--sp-color-text-menu-dark-hover); --color-menuitem-text-active: var(--sp-color-text-menu-dark-active); --color-menuitem-surface: var(--sp-color-bg-menu-dark-default); --color-menuitem-surface-hover: var(--sp-color-bg-menu-dark-hover); --color-menuitem-surface-active: var(--sp-color-bg-menu-dark-active); } /* End TODO */ .button_3OpqX { --button-size: var(--button-m); --button-padding: var(--spacing-none); --button-background: none; align-items: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; border-radius: 4px; color: currentColor; cursor: pointer; flex-basis: auto; flex-direction: row; flex-grow: 0; flex-shrink: 0; gap: var(--spacing-s); height: var(--button-size); justify-content: center; outline: none; transition-property: rotate, opacity; transition-duration: var(--duration-xshort); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); padding: var(--button-padding); background-image: var(--button-background); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .button_3OpqX:active { opacity: 0.2; transition-duration: var(--duration-short); } .button_3OpqX:hover, .button_3OpqX:focus-visible { --button-background: linear-gradient(90deg, var(--button-background-hover)); } /* Use :focus only when :focus-visible is not supported */ .button_3OpqX:focus { outline: 2px solid var(--focusring-color); outline-offset: 1px; } /* Remove focus when :focus-visible is supported */ .button_3OpqX:focus:not(:focus-visible) { outline: none; } .button_3OpqX:focus-visible { outline: 2px solid var(--focusring-color); outline-offset: 1px; } .iconButton_zzwo7 { width: var(--button-size); padding: var(--spacing-none); display: flex; justify-content: center; align-items: center; } .iconButtonWith2Icons_N4QG3 { width: calc(var(--button-size) + var(--icon-size)); padding: var(--spacing-none); } .rounded_D9hjc { border-radius: 100%; } .icon_P3uif { width: var(--icon-size); height: var(--icon-size); } /* --- Button sizes --- */ .xsmall_ZP889 { --button-size: var(--button-xs); --button-padding: 0 var(--button-padding-s); --icon-size: var(--icon-xs); } .small_BQ6sr { --button-size: var(--button-s); --button-padding: 0 var(--button-padding-s); --icon-size: var(--icon-xs); } .medium_Tbhdr { --button-size: var(--button-m); --button-padding: 0 var(--button-padding-m); --icon-size: var(--icon-xs); } .large_Jwmle { --button-size: var(--button-l); --button-padding: 0 var(--button-padding-l); --icon-size: var(--icon-m); } .xlarge_PwJbx { --button-size: var(--button-xl); --button-padding: 0 var(--button-padding-l); --icon-size: var(--icon-m); } /* --- Button variants --- */ /* Default */ .default_fAsWH { background-color: transparent; color: var(--color-text-mid); } .default_fAsWH.active_gcfxH { color: var(--color-text-primary); } .default_fAsWH:hover { color: var(--color-text-primary); } .default_fAsWH:focus-visible { outline-color: var(--color-text-main); } /* Primary */ .primary_c8kAw { background-color: var(--theme-color-primary-base); color: var(--color-white); } .primary_c8kAw:hover { --button-background-hover: var(--color-gradient-primary-hover); } .primary_c8kAw:focus-visible { outline-color: var(--theme-color-primary-base); } /* Secondary */ .secondary_AFynQ { background-color: var(--color-secondary-main); color: var(--color-secondary-text-inside); box-shadow: inset 0 0 0 1px var(--color-secondary-standout); } .secondary_AFynQ.active_gcfxH { border-color: var(--color-secondary-standout); color: var(--color-standout-main); } .secondary_AFynQ:hover { background-color: var(--color-background-muted); --button-background-hover: var(--color-gradient-secondary-hover); } .secondary_AFynQ:focus-visible { outline-color: var(--color-text-main); } /* Damger */ .danger_VNqSR { background-color: var(--color-scarlet-base); color: var(--color-white); } .danger_VNqSR:hover { background-color: var(--color-scarlet-base); --button-background-hover: var(--color-gradient-danger-hover); } .danger_VNqSR:focus-visible { outline-color: var(--color-scarlet-base); } /* Muted */ .muted_09to- { border-color: transparent; color: var(--color-text-mid); background-color: var(--color-background-main); } .muted_09to-.active_gcfxH { background-color: var(--color-primary-muted); color: var(--color-text-primary); } .muted_09to-:hover { background-color: var(--color-item-hover); color: var(--color-text-mid); } .muted_09to-:focus-visible { outline-color: var(--color-text-mid); } /* Merge */ .merge_hWOHE { background-color: var(--color-merge-main); color: var(--color-merge-text-inside); } .merge_hWOHE:hover { background-color: var(--color-merge-standout); --button-background-hover: var(--color-gradient-merge-hover); } .merge_hWOHE:focus-visible { outline-color: var(--color-merge-main); } /* --- Disabled state --- */ .disabled_jIs9y, .disabled_jIs9y:hover, .disabled_jIs9y:active, .button_3OpqX.disabled_jIs9y:active, .disabled_jIs9y:focus, .disabled_jIs9y:focus-visible { transition-duration: 0; opacity: 1; background-color: var(--color-background-muted); background-image: none; color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; outline: none; } /* TODO: remove from button, use Spine menuitem component BUT need a Tooltip component for Spine first */ /* Menu Item */ .menuitem_MOc8H { background-color: var(--color-menuitem-surface); color: var(--color-menuitem-text); } .menuitem_MOc8H:hover { background-color: var(--color-menuitem-surface-hover); color: var(--color-menuitem-text-hover); } .menuitem_MOc8H:focus-visible { outline-color: var(--color-menuitem-text); } .menuitem_MOc8H.active_gcfxH { background-color: var(--color-menuitem-surface-active); color: var(--color-menuitem-text-active); } .menuitem_MOc8H.disabled_jIs9y, .menuitem_MOc8H.disabled_jIs9y:hover, .menuitem_MOc8H.disabled_jIs9y:active, .menuitem_MOc8H.button_3OpqX.disabled_jIs9y:active, .menuitem_MOc8H.disabled_jIs9y:focus, .menuitem_MOc8H.disabled_jIs9y:focus-visible { background-color: var(--color-menuitem-surface); opacity: 0.5; } .segmentedControl_rqDuf { background: var(--sp-color-segmented-control-bg); border-radius: var(--sp-radius-300); width: -moz-fit-content; width: fit-content; /* Using 3px padding as we always have a visible/invisible 1px border around the nested button, and we visually want 4px padding */ padding: 3px; gap: var(--sp-spacing-100); } .segmentedControl_rqDuf button { padding: var(--sp-spacing-100) var(--sp-spacing-200); background: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--sp-radius-300); transition: background 200ms ease-in, border 200ms ease-in; text-transform: capitalize; } .segmentedControl_rqDuf button:focus { outline: none; } .segmentedControl_rqDuf .active_ghKjr { background-color: var(--sp-color-segmented-control-active-segment-bg); border: 1px solid var(--sp-color-segmented-control-active-segment-border); } .badge_VWtFo { align-items: center; justify-content: center; border-radius: 999px; /* pill shape */ border-width: 1px; width: -moz-fit-content; width: fit-content; text-align: center; gap: var(--sp-spacing-200); } .icon_G-mdX { width: var(--sp-size-icon-200); height: var(--sp-size-icon-200); } /* Using two classes here to override .view min-width: 0; with css specificity */ .badge_VWtFo.xsmall_n11tZ { min-width: var(--sp-size-250); min-height: var(--sp-size-250); height: var(--sp-size-250); } /* Using two classes here to override .view min-width: 0; with css specificity */ .badge_VWtFo.small_nhoKY { min-width: var(--sp-size-300); min-height: var(--sp-size-300); } /* Using two classes here to override .view min-width: 0; with css specificity */ .badge_VWtFo.medium_cUPFJ { min-width: var(--sp-size-400); min-height: var(--sp-size-400); } .small_nhoKY, .xsmall_n11tZ { padding-inline: var(--sp-spacing-200); } .medium_cUPFJ { padding-inline: var(--sp-spacing-300); } .iconOnly_Z0bU7 { padding-inline: 0; } .primary_VQM1J { color: var(--sp-color-text-primary); background-color: var(--sp-color-bg-primary); } .secondary_kROfE { color: var(--sp-color-text-secondary); background-color: var(--sp-color-bg-secondary); } .info_TqxOr { color: var(--sp-color-text-info); background-color: var(--sp-color-bg-info); } .danger_--LKA { color: var(--sp-color-text-danger); background-color: var(--sp-color-bg-danger); } .merge_uRfaJ { color: var(--sp-color-text-merge); background-color: var(--sp-color-bg-merge); } .upgrade_q4XQ0 { color: var(--sp-color-text-upgrade); background-color: var(--sp-color-bg-upgrade); } .done_kPYVL { color: var(--sp-color-text-success); background-color: var(--sp-color-bg-success); } :root { --transition-active-search-item: background-color 200ms ease-in, border-color 200ms ease, box-shadow 200ms ease; } .searchResultItem_p8cXr { border-radius: var(--radius-m); padding: var(--sp-spacing-300) var(--sp-spacing-400); position: relative; align-items: center; gap: var(--sp-spacing-200); } .searchResultItemNested_c68te { padding-left: var(--sp-spacing-600); } .searchResultItemIconWrapper_9nhf7 { align-self: flex-start; margin-top: 1px; } .searchResultIcon_Mak8U { width: var(--icon-xs); height: var(--icon-xs); color: var(--color-text-mid); } .searchResultTitle_oejjj { color: var(--sp-color-text-standout); font: var(--sp-typography-ui-action-font); } .searchResultItemNested_c68te .searchResultTitle_oejjj { color: var(--sp-color-text-base); } .searchResultSubtitle_5zrSl { font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: var(--line-height-xs); color: var(--color-text-muted); } .searchResultBody_C6kw1 { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .searchResultBodyText_bfMRX { font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: var(--line-height-xs); color: var(--color-text-mid); } .searchResultWithoutTitle_bAqon { padding-left: var(--sp-spacing-650); padding-top: var(--sp-spacing-400); } /* Action */ .searchResultAction_4Kmeo { padding-right: var(--spacing-m); padding-left: var(--spacing-xs); margin-top: var(--sp-spacing-300); position: absolute; top: 0; right: 0; background-color: var(--sp-color-search-result-item-regular-bg-light); } .theme-color-dark .searchResultAction_4Kmeo { background-color: var(--sp-color-search-result-item-regular-bg-dark); } .searchResultItemStandout_nxC87 .searchResultAction_4Kmeo { background-color: unset; margin-top: var(--sp-spacing-300); } .searchResultActionIcon_dkZSk { width: var(--icon-xs); height: var(--icon-xs); margin-top: var(--spacing-xs); margin-right: var(--spacing-s); color: var(--color-text-primary); } .searchResultActionText_2EDdS { font-weight: var(--font-weight-medium); font-size: var(--font-size-s); line-height: var(--line-height-s); color: var(--color-text-primary); } /* Active state */ .searchResultItemActive_Ih3Vm { background-color: var(--sp-color-search-result-item-regular-bg-light); } .theme-color-dark .searchResultItemActive_Ih3Vm { background-color: var(--sp-color-search-result-item-regular-bg-dark); } .searchResultItemActive_Ih3Vm .searchResultIcon_Mak8U { color: var(--color-text-main); } .searchResultItemActive_Ih3Vm .searchResultTitle_oejjj { color: var(--color-text-main); } /* Standout active state for cta */ .searchResultItemActive_Ih3Vm .searchResultItemStandout_nxC87 .searchResultAction_4Kmeo, .searchResultItemActive_Ih3Vm .searchResultItemStandout_nxC87 { background-color: var(--sp-color-search-ai-cta-bg); } .searchResultItemActive_Ih3Vm.searchResultItemStandout_nxC87 .searchResultIcon_Mak8U { color: var(--color-text-primary); } .searchResultItemStandout_nxC87 { border: 1px solid transparent; background: var(--sp-color-search-ai-cta-bg); padding: var(--sp-spacing-300) var(--sp-spacing-400); margin-bottom: var(--sp-spacing-200); } .theme-color-dark .searchResultItemStandout_nxC87 { background: var(--sp-color-search-ai-cta-bg); } .searchResultItemStandout_nxC87.searchResultItemActive_Ih3Vm { border: 1px solid var(--sp-color-search-ai-cta-border); box-shadow: 0px 0px 0px 3px rgba(145, 176, 240, 0.25); transition: var(--transition-active-search-item); } /* Disabled state */ .searchResultItemDisabled_TTaLk .searchResultActionText_2EDdS, .searchResultItemDisabled_TTaLk .searchResultActionIcon_dkZSk, .searchResultItemDisabled_TTaLk .searchResultTitle_oejjj, .searchResultItemDisabled_TTaLk .searchResultIcon_Mak8U { color: var(--color-text-muted); } /* Styling for the new pill-shaped prompts in search results */ .suggestedQueryOrPrompt_3qSXL { display: flex; padding: 4px 10px; justify-content: center; align-items: flex-start; gap: var(--sp-spacing-200); border: none; border-radius: 999px; background-color: var(--sp-color-search-result-item-pill-bg-light); cursor: pointer; width: -moz-fit-content; width: fit-content; margin: var(--sp-spacing-200) 0; border: 1px solid transparent; transition: var(--transition-active-search-item); } .theme-color-dark .suggestedQueryOrPrompt_3qSXL { background: var(--sp-color-search-result-item-pill-bg-dark); } .suggestedQueryOrPromptActive_13Zwu { background: var(--sp-color-primary-100); border: 1px solid var(--sp-color-primary-300); box-shadow: 0px 0px 0px 3px rgba(145, 176, 240, 0.25); } .promptText_iqPtZ { font: var(--sp-typography-ui-small-font); color: var(--sp-color-search-result-item-pill-text-light); text-align: center; } .theme-color-dark .promptText_iqPtZ { color: var(--sp-color-search-result-item-pill-text-dark); } .icon_r3tWb { width: 15px; height: 15px; flex-shrink: 0; color: var(--sp-color-search-icons-sparkle-search-color-light); } .theme-color-dark .icon_r3tWb { color: var(--sp-color-search-icons-sparkle-search-color-dark); } /* Only the CTA element */ .searchResultItemStandout_nxC87 .searchResultActionText_2EDdS, .searchResultItemStandout_nxC87 .searchResultActionIcon_dkZSk { color: var(--sp-color-search-ai-cta-action-button); } .icon_2cTnG { background-color: var(--sp-color-button-sidebar-menuitem-bg-default); color: #a2a9b9; /* legacy color, no token available for it, this will be removed during rebranding */ justify-content: center; align-items: center; width: 24px; } .icon_2cTnG.uiRevamp_q38SM { background-color: var(--sp-color-button-sidebar-menuitem-bg-default); color: currentColor; display: flex; align-items: center; justify-content: center; } .icon_2cTnG.uiRevamp_q38SM.compact_3TVZ1 { background-color: var(--sp-color-button-sidebar-menuitem-bg-compact-default); padding: var(--sp-spacing-200); border-radius: var(--sp-spacing-100); margin-bottom: var(--sp-spacing-300); width: 32px; height: 32px; } .icon_2cTnG.uiRevamp_q38SM:hover, .icon_2cTnG.uiRevamp_q38SM:focus, .icon_2cTnG.uiRevamp_q38SM:active { border: none; } .icon_2cTnG.uiRevamp_q38SM.compact_3TVZ1:hover { background-color: var(--sp-color-button-sidebar-menuitem-bg-compact-hover); border: none; } .icon_2cTnG.uiRevamp_q38SM.compact_3TVZ1:focus, .icon_2cTnG.uiRevamp_q38SM.compact_3TVZ1:active { background-color: var(--sp-color-button-sidebar-menuitem-bg-compact-default); padding: var(--sp-spacing-200); border-radius: var(--sp-spacing-100); border: none; } .button_nHYaP { /** reset browser button styles */ align-items: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; border-radius: var(--radius-m); color: currentColor; cursor: pointer; flex-basis: auto; flex-direction: row; flex-grow: 0; flex-shrink: 0; justify-content: center; outline: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; /* end reset browser button styles */ height: var(--button-size); gap: var(--spacing-s); padding: var(--sp-spacing-200) var(--sp-spacing-400); /* text color gets overwritten only in 'Secondary' class */ color: var(--sp-color-white); } /* Primary button */ .primary_t4-q8 { background-color: var(--sp-color-button-primary-bg-default); &:hover { background-color: var(--sp-color-button-primary-bg-hover); } &:focus { background-color: var(--sp-color-button-primary-bg-focus); } } /* Secondary button */ .secondary_N24Yh { background-color: var(--sp-color-button-secondary-bg-default); color: var(--color-secondary-text-inside); box-shadow: var(--sp-shadow-base); border: 1px solid var(--sp-color-button-secondary-border); &:hover { background-color: var(--sp-color-button-secondary-bg-hover); } &:focus { background-color: var(--sp-color-button-secondary-bg-focus); } } .rounded_-bdo9 { border-radius: 100%; } .iconOnly_t2JNX { width: var(--button-size); padding: 0; } .icon_sNfFo { width: var(--icon-size); height: var(--icon-size); fill: currentColor; } .label_7wj5k { font: var(--sp-typography-ui-action-font); letter-spacing: var(--sp-typography-ui-base-letter-spacing); } /* Sizes */ .small_vXHK5 { --button-size: var(--button-s); --icon-size: var(--icon-xxs); } .medium_CpI3p { --button-size: var(--button-m); --icon-size: var(--icon-xs); } .large_Lqq9j { --button-size: var(--button-l); --icon-size: var(--icon-xs); } /* --- Disabled state --- */ .disabled_vwRFY, .disabled_vwRFY:hover, .disabled_vwRFY:active, .button_nHYaP.disabled_vwRFY:active, .disabled_vwRFY:focus, .disabled_vwRFY:focus-visible { transition-duration: 0; opacity: 1; background-color: var(--color-background-muted); background-image: none; color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; outline: none; } .card_1mmNB { position: relative; background: var(--sp-color-bg-card); border: 1px solid var(--sp-color-border-card); border-radius: var(--sp-radius-500); box-shadow: var(--sp-shadow-base); padding: var(--sp-spacing-600); flex-direction: column; gap: var(--sp-spacing-600); transition: box-shadow var(--duration-short) ease-in; } .card_1mmNB:hover, .card_1mmNB:focus-within { box-shadow: var(--sp-shadow-elevated); } .shortcut_8i--D { border-radius: var(--sp-radius-200); background-color: var(--sp-color-bg-keyboard-shortcut-default); min-width: var(--sp-size-250); height: var(--sp-size-250); text-transform: uppercase; color: var(--sp-color-text-base); display: flex; align-items: center; justify-content: center; padding: var(--sp-spacing-0) var(--sp-spacing-100); border: 1px solid var(--sp-color-border-keyboard-shortcut-default); } .inverted_RF8TI { background-color: var(--sp-color-bg-keyboard-shortcut-inverted); color: var(--sp-color-text-inverted); border: 1px solid var(--sp-color-border-keyboard-shortcut-inverted); } .xsmall_yHtds { font: var(--sp-typography-ui-small-font); line-height: var(--sp-typography-ui-base-line-height); } .small_Hwvry { font: var(--sp-typography-ui-action-font); line-height: var(--sp-typography-ui-base-line-height); } .medium_RVnYK { font: var(--sp-typography-ui-base-font); line-height: var(--sp-typography-ui-base-line-height); } .gap_PR1GX { gap: var(--sp-spacing-100); } /** Component tokens **/ .menuitem_4EEri { --color-menuitem-icon: var(--sp-color-icon-menu-default); --color-menuitem-icon-hover: var(--sp-color-icon-menu-hover); --color-menuitem-icon-active: var(--sp-color-icon-menu-active); --color-menuitem-text: var(--sp-color-text-menu-default); --color-menuitem-text-hover: var(--sp-color-text-menu-hover); --color-menuitem-text-active: var(--sp-color-text-menu-active); --color-menuitem-text-disabled: var(--sp-color-text-menu-disabled); --color-menuitem-surface: var(--sp-color-bg-menu-default); --color-menuitem-surface-hover: var(--sp-color-bg-menu-hover); --color-menuitem-surface-active: var(--sp-color-bg-menu-active); } .theme-color-dark .menuitem_4EEri { --color-menuitem-text: var(--sp-color-text-menu-dark-default); --color-menuitem-text-hover: var(--sp-color-text-menu-dark-hover); --color-menuitem-text-active: var(--sp-color-text-menu-dark-active); --color-menuitem-text-disabled: var(--sp-color-text-menu-dark-disabled); --color-menuitem-surface: var(--sp-color-bg-menu-dark-default); --color-menuitem-surface-hover: var(--sp-color-bg-menu-dark-hover); --color-menuitem-surface-active: var(--sp-color-bg-menu-dark-active); } /** End component tokens **/ .menuitem_4EEri { background-color: var(--color-menuitem-surface); justify-content: flex-start; } .label_kEhEF { color: var(--color-menuitem-text); margin: 0; margin-right: auto; } .leadingIcon_JrIhQ { color: var(--color-menuitem-icon-active); } .trailingIcon_vT1Vh { color: var(--color-menuitem-icon); } .menuitem_4EEri:focus-visible { outline-color: var(--color-menuitem-text); } .menuitem_4EEri:hover { background-color: var(--color-menuitem-surface-hover); } .menuitem_4EEri:hover .label_kEhEF { color: var(--color-menuitem-text-hover); } .menuitem_4EEri:hover .trailingIcon_vT1Vh { color: var(--color-menuitem-icon-hover); } :is(.active_wdOfq, .active_wdOfq:hover), :is(.active_wdOfq, .active_wdOfq:hover) :is(.label_kEhEF, .leadingIcon_JrIhQ, .trailingIcon_vT1Vh) { background-color: var(--color-menuitem-surface-active); color: var(--color-menuitem-text-active); } :is(.disabled_00v1N, .disabled_00v1N:hover), :is(.disabled_00v1N, .disabled_00v1N:hover) :is(.label_kEhEF, .leadingIcon_JrIhQ, .trailingIcon_vT1Vh) { color: var(--color-menuitem-text-disabled); } .header_zK-Aj { align-items: center; gap: var(--sp-spacing-700); } .textColumn_zZUK4 { flex-direction: column; flex: 1 1; gap: var(--sp-spacing-600); } .headingWithBadge_gB50v { align-items: center; gap: var(--sp-spacing-200); } .description_7Qp6k { max-width: 647px; } .ctas_okOZX { gap: var(--sp-spacing-400); } .imageWrapper_l2pTF { flex-direction: column; flex: 1 1; } /** Needed the double class specificity to override view display:flex. Should replace with utility class */ .imageWrapper_l2pTF.responsiveWrapper_zXLkQ { display: none; } @media screen and (min-width: 1025px) { .imageWrapper_l2pTF.responsiveWrapper_zXLkQ { display: flex; } } .image_-ky4t { overflow: hidden; border-radius: var(--sp-radius-500); } .blockWrapper_8BIg7 { position: relative; flex-direction: row; width: 100%; max-width: var(--block-wrapper-max-width); } .pageWrapper_BkhZI { position: relative; flex-direction: column; width: 100%; max-width: var(--page-wrapper-max-width); padding: 0 calc(var(--spacing-xxl) + var(--spacing-m)); } @media (max-width: 700px) { .pageWrapper_BkhZI { padding: 0 var(--spacing-m); } } .iconWrapper_x37cD { display: flex; align-items: center; justify-content: center; --background-color-inactive: var(--color-background-mid); --background-color-ok: var(--color-warning-main); --background-color-good: var(--color-success-main); --background-color-bad: var(--color-danger-main); --background-color: var(--background-color-inactive); background-color: var(--background-color); color: var(--color-text-mid); /* Size dependent styles, the .iconWrapper component should provide the --rating-size property */ width: var(--rating-size); height: var(--rating-size); border-radius: var(--rating-size); } .icon_TnMUQ { /* Size dependent styles, the .iconWrapper component should provide the --rating-size property */ width: calc(0.75 * var(--rating-size)); height: calc(0.75 * var(--rating-size)); } .active_CllGx.ok_V1sO-, .interactive_B2TwX.ok_V1sO-:focus, .interactive_B2TwX.ok_V1sO-:hover { --background-color: var(--background-color-ok); } .active_CllGx.good_nqe9w, .interactive_B2TwX.good_nqe9w:focus, .interactive_B2TwX.good_nqe9w:hover { --background-color: var(--background-color-good); } .active_CllGx.bad_pz0f3, .interactive_B2TwX.bad_pz0f3:focus, .interactive_B2TwX.bad_pz0f3:hover { --background-color: var(--background-color-bad); } .active_CllGx .icon_TnMUQ, .interactive_B2TwX:focus .icon_TnMUQ, .interactive_B2TwX:hover .icon_TnMUQ { color: var(--color-text-primary-text-inside); } .main_Ro3g1 { width: 100%; max-width: var(--content-max-width); margin: var(--sp-spacing-700) auto; padding: var(--sp-spacing-0); } .title_-6NKe { margin-bottom: var(--sp-spacing-300); } .subtitle_bpqRl { margin-bottom: var(--sp-spacing-650); } .emptyState_9xkN6 { margin: var(--sp-spacing-900) auto; } @media (max-width: 1440px) { .main_Ro3g1 { max-width: calc(var(--content-max-width) + (var(--sp-spacing-800) * 2)); padding-left: var(--sp-spacing-800); padding-right: var(--sp-spacing-800); } } .progressContainer_Sj3CE { width: 30px; height: 30px; z-index: -1; left: -3px; top: -3px; } .indicatorContainer_5ILWs { width: 9px; height: 9px; left: 15px; } .indicatorDot_xDC17 { width: 6px; height: 6px; } .footer_SvIjE { border-top: 1px solid var(--color-border-mid); } .header_x3-rd { border-bottom: 1px solid var(--color-border-mid); } .modalFooterButtonsWrapper_80kwB { width: 100%; max-width: 250px; justify-content: center; align-self: center; } .notificationsButton_TGSVx { background-color: transparent; color: var(--color-light-mode-grey-scale-dark); } .notificationsButton_TGSVx:hover, .notificationsButton_TGSVx:focus, .notificationsButton_TGSVx:active { background-color: var(--sp-color-button-sidebar-icon-bg-hover); color: var(--sp-color-primary-100); } .notificationsButton_TGSVx.uiRevamp_rkU-O { background-color: var(--sp-color-button-sidebar-icon-bg-default); color: var(--sp-color-button-sidebar-icon-text); display: flex; align-items: center; justify-content: center; } .notificationsButton_TGSVx.uiRevamp_rkU-O.compact_7XMpk { background-color: var(--sp-color-button-sidebar-icon-bg-compact-default); } .notificationsButton_TGSVx.uiRevamp_rkU-O:hover, .notificationsButton_TGSVx.uiRevamp_rkU-O:focus, .notificationsButton_TGSVx.uiRevamp_rkU-O:active { background-color: var(--sp-color-button-sidebar-icon-bg-hover); outline: none; border: none; } .notificationsButton_TGSVx.uiRevamp_rkU-O.compact_7XMpk:hover, .notificationsButton_TGSVx.uiRevamp_rkU-O.compact_7XMpk:focus, .notificationsButton_TGSVx.uiRevamp_rkU-O.compact_7XMpk:active { background-color: var(--sp-color-button-sidebar-icon-bg-compact-hover); outline: none; border: none; } .commentInput_hJRXS { flex: 1; flex-direction: column; border-radius: var(--radius-xl); background-color: var(--color-background-main); border: 1px solid var(--color-border-main); cursor: text; } .commentInputFocused_zVuwv { border-color: var(--color-primary-main); } .commentInputInner_Z2RUb { flex: 1; flex-direction: column; padding: var(--spacing-s) var(--spacing-m); overflow-y: auto; } .commentInputToolbar_-TyX0 { padding-left: var(--spacing-s); padding-right: var(--spacing-m); padding-bottom: var(--spacing-s); } .commentInputAvatar_M7QBN { height: var(--button-l); } .mentionButton_9ZOeP { margin-left: calc(0 - var(--spacing-s)); } /* Integration Cards layout */ .integrationCards_5DfZc { flex-flow: column nowrap; gap: var(--sp-spacing-600); } @media screen and (min-width: 701px) { .integrationCards_5DfZc { flex-flow: row wrap; gap: var(--sp-spacing-700); } } /* * Progressively enhance the card responsiveness using subgrid. * Where subgrid is supported we can use it to keep the cards a uniform size * without subgrid the cards are sized depending on the flow of content and flex. */ @supports (grid-template-columns: subgrid) { .integrationCards_5DfZc { display: grid; grid-template-columns: 1fr; } @media screen and (min-width: 701px) { .integrationCards_5DfZc { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } } } /* Integration CTA */ .integrationCard_UGVJy { min-width: 230px; max-width: 330px; flex: calc(33% - 40px) 1 1; height: -moz-fit-content; height: fit-content; box-shadow: var(--sp-shadow-base); } .integrationCard_UGVJy > .content_Q9zbp { flex-direction: column; gap: var(--sp-spacing-600); } .integrationCard_UGVJy .body_QM88U, .integrationCard_UGVJy .footer_s3DxX, .integrationCard_UGVJy .header_APV0p { flex-direction: column; gap: var(--sp-spacing-200); } .integrationCard_UGVJy .dataBody_Mglrq { gap: var(--sp-spacing-400); } .integrationCard_UGVJy .image_4-AEH { background: linear-gradient(to bottom, transparent 8%, var(--sp-color-bg-card) 8%) 2px 2px / 8px 8px repeat, linear-gradient(to right, lightgrey 8%, var(--sp-color-bg-card) 8%) 2px 2px / 8px 8px repeat; border-radius: var(--sp-radius-500); width: 100%; } .image_4-AEH > svg { width: 100%; height: auto; } .integrationCard_UGVJy .dataItem_-QEdK { flex-direction: row; gap: var(--sp-spacing-200); } .integrationCard_UGVJy .icon_YrNzh { width: var(--sp-size-icon-200); height: var(--sp-size-icon-200); margin-top: -2px; color: var(--icon-color, currentcolor); } .integrationCard_UGVJy .titleWithSub_-POgw { flex-direction: column; gap: var(--sp-spacing-100); } .integrationCard_UGVJy.pending_cmXq2 .icon_YrNzh { color: var(--sp-color-primary-300); } .integrationCard_UGVJy.success_8Ad62 .icon_YrNzh { background: var(--sp-color-bg-success); color: var(--sp-color-icon-success); border-radius: 50%; outline-offset: -1px; outline: var(--sp-spacing-100) solid var(--sp-color-bg-success); } .integrationCard_UGVJy.disabled_iF-dR::before { display: none; } /* * Progressively enhance the card responsiveness using subgrid. * Where subgrid is supported we can use it to keep the cards a uniform size * without subgrid the cards are sized depending on the flow of content and flex. */ @supports (grid-template-columns: subgrid) { .integrationCard_UGVJy { display: grid; grid-template-columns: subgrid; } } .pointer_jKwgV { cursor: pointer; } .title_QlXWG { flex-direction: row; gap: var(--sp-spacing-200); align-items: center; } .title_QlXWG .icon_YrNzh { width: var(--sp-size-icon-200); height: var(--sp-size-icon-200); margin-top: -2px; color: var(--icon-color, currentcolor); } @media screen and (min-width: 1025px) { .details_ljTjj { /* To help cards keep a more consistent size we'll set min height to 3 lines of text */ min-height: calc( var(--sp-typography-ui-small-line-height) * var(--sp-typography-ui-small-font-size) * 3 ); } } .loadingDelayedText_WVBF7 { opacity: 0; transition: opacity var(--duration-long) ease; } .loadingDelayedTextVisible_y5onq { opacity: 1; } .fullResponse_adSl0 { gap: var(--sp-spacing-500); padding: var(--sp-spacing-400) var(--sp-spacing-500) var(--sp-spacing-500) var(--sp-spacing-500); } .prompts_Th3zf { align-items: center; align-content: center; gap: var(--sp-spacing-400); align-self: stretch; flex-wrap: wrap; } .answerWrapper_Uizn- { max-width: 600px; } .queryHeading_kpHvY { color: var(--sp-color-text-standout); } .theme-color-dark .queryHeading_kpHvY { color: var(--sp-color-text-light); } .prompt_F-9A- { display: flex; padding: var(--sp-spacing-100) 10px; justify-content: center; align-items: flex-start; gap: var(--sp-spacing-200); border: none; border-radius: 999px; background-color: #f7f7f7; transition: background-color 0.2s ease-in; cursor: pointer; } .prompt_F-9A-:focus-visible, .prompt_F-9A-:hover { background-color: #eaebee; } .promptText_G-HnJ { font: var(--sp-typography-ui-small-font); color: #52555e; text-align: center; } .icon_281MC { width: 15px; height: 15px; flex-shrink: 0; color: var(--sp-color-search-icons-sparkle-search-color-light); } .theme-color-dark .icon_281MC { color: var(--sp-color-search-icons-sparkle-search-color-dark); } .actions_FNzrP { display: flex; align-items: center; gap: var(--sp-spacing-400); padding-bottom: var(--sp-spacing-400); border-bottom: 1px solid var(--sp-color-search-group-border-light); } .theme-color-dark .actions_FNzrP { border-bottom: 1px solid var(--sp-color-search-group-border-dark); } .relatedQueries_nIpkZ { flex-direction: column; border-top: 1px solid var(--grey-200, #eaebee); padding-top: var(--sp-spacing-400); } .relatedQueriesHeading_5XnJH { font: var(--sp-typography-ui-small-font); color: var(--sp-color-text-muted); margin-bottom: var(--sp-spacing-400); } .blankSlateNoAiAnswer_rz6wQ { flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: var(--sp-spacing-200) var(--sp-spacing-600) var(--sp-spacing-600) var(--sp-spacing-600); gap: var(--sp-spacing-200); border-radius: var(--theme-radius-large); } .buttons_Q48Sx { gap: var(--sp-spacing-300); margin-top: var(--sp-spacing-200); } .cardWrapper_6Hr4m { position: absolute; top: 0; left: 0; cursor: grabbing; white-space: nowrap; } .container_4EAMO { overflow-y: auto; flex: 1 1 auto; height: 0; } .section_PNnaW { width: 100%; padding-inline: var(--sp-spacing-700); } .section_PNnaW > .content_7ClDf { width: 100%; max-width: 980px; margin: 0 auto; flex-direction: column; gap: var(--sp-spacing-650); } .tile_DN0PL { border: 1px solid var(--sp-color-border-standout); } .icon_-jsPK { width: var(--sp-size-icon-200); height: var(--sp-size-icon-200); } .capturedBy_9VA12 { gap: var(--sp-spacing-300); } .link_CyLu4 { padding-block: var(--sp-spacing-200); } .upperHeader_Ioy94 { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0px; width: 100%; } .upperHeader_Ioy94.compact_uFEDc { flex-direction: column; min-width: 0px; max-width: '100%'; justify-content: center; } .upperHeaderIcons_uYmPJ { min-width: 0px; margin-left: 8px; flex-basis: 30%; display: flex; align-items: center; justify-content: flex-end; } .upperHeaderIcons_uYmPJ.compact_uFEDc { margin-left: 0px; flex-direction: column; gap: 16px; } .orgSwitchButtonInnerWrapper_bKp6d { display: flex; align-items: center; flex-shrink: 2; width: auto; max-width: 100%; } .organizationTitle_6dFDd { font: var(--sp-typography-ui-action-font); color: var(--sp-color-text-sidebar-dark-default); margin-left: var(--sp-spacing-200); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebarToggleButton_zIiCL.uiRevamp_r5NOV { background-color: var(--sp-color-button-sidebar-icon-bg-default); color: var(--sp-color-button-sidebar-icon-text); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .sidebarToggleButton_zIiCL.uiRevamp_r5NOV.compact_uFEDc { order: -1; background-color: var(--sp-color-button-sidebar-icon-bg-compact-default); } .sidebarToggleButton_zIiCL.uiRevamp_r5NOV:hover, .sidebarToggleButton_zIiCL.uiRevamp_r5NOV:focus-visible, .sidebarToggleButton_zIiCL.uiRevamp_r5NOV:active { background-color: var(--sp-color-button-sidebar-icon-bg-hover); /** * TO-DO: [CUR-1070] Currently when using the keyboard to navigate we change * the background-color, an undesigned outline was visible so we're * removing it for now. But we should revisit this to offer a pleasant * keyboard navigation experience. */ outline: none; border: none; } .sidebarToggleButton_zIiCL.uiRevamp_r5NOV.compact_uFEDc:hover, .sidebarToggleButton_zIiCL.uiRevamp_r5NOV.compact_uFEDc:focus-visible, .sidebarToggleButton_zIiCL.uiRevamp_r5NOV.compact_uFEDc:active { background-color: var(--sp-color-button-sidebar-icon-bg-compact-hover); outline: none; border: none; } .searchAskButtonWrapper_5BCYf { justify-content: flex-start; flex-grow: 1; flex-shrink: 1; } .searchAskButtonWrapper_5BCYf.compact_uFEDc { justify-content: center; } .searchAskButtonWrapper_5BCYf div:last-child { margin-left: auto; } .searchAskButtonWrapper_5BCYf.uiRevamp_r5NOV { justify-content: flex-start; flex-grow: 1; flex-shrink: 1; } .searchAskButtonWrapper_5BCYf.uiRevamp_r5NOV.compact_uFEDc { margin-top: 16px; height: 32px; display: flex; align-items: center; justify-content: flex-start; } .searchAskButton_fcsHm { background-color: var(--sp-color-button-sidebar-search-bg-default); padding-top: var(--sp-spacing-400); padding-bottom: var(--sp-spacing-400); padding-right: var(--sp-spacing-100); color: var(--color-dark-mode-text-dark); width: 100%; } .searchAskButton_fcsHm.compact_uFEDc { width: 32px; height: 32px; padding-left: var(--sp-spacing-100); } .searchAskButton_fcsHm:hover, .searchAskButton_fcsHm:active, .searchAskButton_fcsHm:focus { color: var(--sp-color-primary-100); } .searchAskButton_fcsHm.uiRevamp_r5NOV { width: 100%; background-color: var(--sp-color-button-sidebar-search-bg-default); padding: var(--sp-spacing-400) var(--sp-spacing-100) var(--sp-spacing-400) var(--sp-spacing-200); color: var(--sp-color-button-sidebar-search-text-default); justify-content: space-around; margin-top: var(--sp-spacing-200); border: none; } @media (max-width: 1024px) { .searchAskButton_fcsHm.uiRevamp_r5NOV { justify-content: flex-start; } } .searchAskButton_fcsHm.uiRevamp_r5NOV:hover, .searchAskButto_tBho4.uiRevamp_r5NOV:active, .searchAskButto_tBho4.uiRevamp_r5NOV:focus { color: var(--sp-color-button-sidebar-search-text-hover); } .searchAskButton_fcsHm.uiRevamp_r5NOV.compact_uFEDc { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-top: 0; padding: 0; } .searchAskButton_fcsHm.uiRevamp_r5NOV.compact_uFEDc:hover { background-color: var(--sp-color-button-sidebar-search-bg-compact-hover); color: var(--sp-color-button-sidebar-search-text-compact-hover); } .container_X2Vji { flex: 1; flex-direction: column; justify-content: space-between; padding-top: var(--sp-spacing-300); padding-bottom: var(--sp-spacing-400); box-shadow: var(--sp-shadow-sidebar-main); z-index: 10; } .container_X2Vji.compact_T96r- { align-items: center; padding-top: var(--sp-spacing-400); } .alert_EXE5- { margin-left: var(--sp-spacing-300); margin-right: var(--sp-spacing-300); /* Only needed for legacy sidebar */ margin-top: var(--sp-spacing-300); margin-bottom: var(--sp-spacing-300); } /* Only needed to override legacy sidebar styles */ .alert_EXE5-.uiRevamp_YjxS4 { margin-bottom: var(--sp-spacing-400); margin-top: 0; } .createButton_9wkWc { margin-left: var(--sp-spacing-400); margin-right: var(--sp-spacing-400); margin-top: var(--sp-spacing-300); } .createButton_9wkWc.compact_T96r- { margin-top: 0; } .aiSearchSpinner_cTH2Q { animation: aiSearchSpinnerAnim_75OX- 1.8s cubic-bezier(0.59, 0.27, 0.33, 0.86) infinite; color: var(--color-text-muted); } .aiSearchSpinnerIcon_MOqIL { width: '100%'; height: '100%'; } @keyframes aiSearchSpinnerAnim_75OX- { 0% { transform: rotate(0deg) scale(1); opacity: 0.4; } 50% { transform: rotate(180deg) scale(1.6); opacity: 1; } 100% { transform: rotate(360deg) scale(1); opacity: 0.4; } } .container_JxrHs { padding-top: calc(var(--spacing-l) + var(--spacing-s)); } .publicContainer_11UZS { flex-direction: row; width: 100%; max-width: var(--public-content-container-max-width); margin: 0 auto; } .aiAnswerFooter_pxFSA { border-top: 1px solid var(--color-border-mid); } .sourcesHeadingButton_YdnnI { font-size: unset; font: var(--sp-typography-ui-small-font); color: var(--sp-color-text-muted); padding: 0; } .sourcesHeadingButton_YdnnI span { font: unset; } .opacityFadeIn_e3HUz { opacity: 1; transition: opacity var(--duration-medium); } .opacityFadeOut_YF-cJ { opacity: 0; transition: opacity var(--duration-short); } .background_yPhnp { background-color: var(--color-green-xxlight); } .hitArea_oHT6S { position: absolute; background-color: transparent; justify-content: flex-start; -webkit-user-select: none; -moz-user-select: none; user-select: none; overflow: hidden; top: 0; height: 100%; padding-left: var(--spacing-xs); } .buttonWrapper_3J38G { position: relative; gap: var(--spacing-xs); width: 100%; opacity: 0; translate: 0 0; will-change: transform, opacity; } .hideTransition_k0Mlc { transition: opacity var(--duration-short) ease-out; } .placeholder_HCCie { position: absolute; width: 100%; pointer-events: none; } .instructions_YvYKU { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: var(--spacing-s); } .shortcuts_v-WHU { pointer-events: all; gap: var(--spacing-s); } .halo_oiCij { --negative-margin: calc(-1 * var(--spacing-s)); --fill-negative-margin: calc(100% + 2 * var(--spacing-s)); background-color: var(--color-primary-muted); position: absolute; width: var(--fill-negative-margin); height: var(--fill-negative-margin); pointer-events: none; padding: var(--spacing-none); margin: var(--negative-margin); opacity: 0; z-index: -1; transition: opacity var(--duration-short); -webkit-user-select: none; -moz-user-select: none; user-select: none; display: none; } .halo_oiCij.ready_81z1f { display: flex; opacity: 0; will-change: opacity; } .halo_oiCij.show_byjur { opacity: 1; } /** * TabFiles */ .fileItemSeperator_CkhaN { border-bottom: 1px solid var(--color-background-standout); } /** * TabURL */ .fileTypeInfoIcon_D47ls { width: var(--icon-xs); height: var(--icon-xs); color: var(--color-info-main); } /** * TabUnsplash */ .imageItem_lflIb { border-width: 2px; border-color: transparent; border-radius: var(--radius-m); overflow: hidden; cursor: pointer; width: 142px; height: 100px; } .imageAuthor_AbPnX { max-width: 142px; } .imageItem_lflIb:hover, .imageItem_lflIb:focus-within { outline: var(--color-primary-main) solid 2px; } .unsplashImage_sd2F6 { aspect-ratio: 2; -o-object-fit: cover; object-fit: cover; width: 142px; height: 100px; } .dotIndicator_tEskB { width: 6px; height: 6px; border-radius: var(--sp-radius-200); background-color: var(--theme-color-primary-base); box-shadow: 0px 0px 3px 3px rgba(52, 109, 219, 0.15); } .commentHalo_0AauK { --negative-margin: calc(-1 * var(--spacing-s)); --fill-negative-margin: calc(100% + 2 * var(--spacing-s)); background-color: var(--color-primary-muted); position: absolute; width: var(--fill-negative-margin); height: var(--fill-negative-margin); pointer-events: none; padding: var(--spacing-none); margin: var(--negative-margin); opacity: 1; z-index: -1; transition: opacity var(--duration-short); -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; } @media (min-width: 1024px) { html:has(.withStickyHeader_HQiM-) { scroll-padding-top: var(--public-content-desktop-header-height); } } @media (max-width: 700px) { html:has(.withStickyHeader_HQiM-) { scroll-padding-top: var(--public-content-mobile-header-height); } } .divider_osV0o { width: 100%; height: 1px; border: none; background-color: var(--color-border-mid); padding: 0; margin: 0; } .main_rvBrC { flex-direction: column; width: 100%; margin: 0 auto; overflow-y: auto; } .section_U99ze { width: 100%; padding-inline: var(--sp-spacing-700); } .section_U99ze > .content_Kgw-s { width: 100%; max-width: 980px; margin: 0 auto; flex-direction: column; gap: var(--sp-spacing-600); } .askGitbookSection_YzFvn { --color-bg-ask-gitbook: var(--sp-color-white); } .theme-color-dark .askGitbookSection_YzFvn { --color-bg-ask-gitbook: #181c1f; /* not a token! */ } .askGitbookSection_YzFvn { background-color: var(--color-bg-ask-gitbook); background-image: var(--bg-image, none); background-position-x: 100%; background-size: cover; background-repeat: no-repeat; padding: var(--sp-spacing-900) var(--sp-spacing-700); } .expandingKnowledgeBase_BqA8O { margin-block: var(--sp-spacing-900); flex-direction: column; } .loading_pORhg { width: 100%; align-items: center; justify-content: center; } .askGitbook_i1PwQ { width: 100%; margin: 0; gap: var(--sp-spacing-600); padding: var(--sp-spacing-600); padding-block-end: var(--sp-spacing-400); overflow: hidden; margin: 0 auto; background-color: var(--color-bg-ask-gitbook); box-shadow: var(--sp-shadow-base); } .askGitbookIcon_7jpW9 { width: 24px; height: 24px; color: var(--sp-color-icon-ask-gitbook); } .label_7sAnp { } .hidden_eVG0y { display: none; } .input_Bg1Z- { flex-grow: 1; border-radius: 6px; border: none; align-items: center; gap: var(--sp-spacing-400); } .inputField_yukZK { width: 100%; border: none; background-color: transparent; } .input_Bg1Z-, .inputField_yukZK { color: var(--sp-color-text-base); } .inputField_yukZK:focus { color: var(--sp-color-text-standout); } .inputField_yukZK::-moz-placeholder { color: var(--sp-color-text-input-placeholder); } .inputField_yukZK::placeholder, .inputField_yukZK:disabled { color: var(--sp-color-text-input-placeholder); } .conflicts_NH0YT { --hoz-size: 86px; --neg-hoz-size: calc(-1 * var(--hoz-size)); } .toolbarConnector_rKw9X { position: relative; } .toolbarConnector_rKw9X::before { display: block; position: absolute; content: ''; background-color: var(--color-border-main); height: 2px; width: var(--hoz-size); left: var(--neg-hoz-size); top: 50%; pointer-events: none; } .toolbarConnector_rKw9X::after { display: block; position: absolute; content: ''; background-color: var(--color-border-main); width: 2px; height: calc(12px + var(--spacing-s)); left: var(--neg-hoz-size); pointer-events: none; } .conflictBase_F-gkn.toolbarConnector_rKw9X::after { bottom: calc(-1 * var(--spacing-s)); } .conflictHead_qDgkT.toolbarConnector_rKw9X::after { height: calc(14px + var(--spacing-s)); top: calc(-1 * var(--spacing-s)); } .verticalConnector_6gQQw { position: absolute; display: block; translate: -50% 0; left: calc(50% - var(--hoz-size)); width: 100%; height: 100%; max-width: var(--block-wrapper-max-width); pointer-events: none; } .verticalConnector_6gQQw::before { display: block; content: ''; width: 2px; height: 100%; background-color: var(--color-border-main); left: var(--neg-hoz-size); pointer-events: none; } .conflictBadge_rJISv { position: absolute; left: -12px; top: -12px; } .highlightContainer_T2jbl { position: relative; } .highlight_r-5El { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; } .highlight_r-5El.main_K0HuP { background-color: var(--color-merge-muted); } .highlight_r-5El.current_-GeKS { background-color: var(--color-primary-muted); } .definitionWrapper_0vx5U { position: relative; } .grabberWrapper_WLh-V { position: absolute; left: calc(-1 * var(--spacing-l)); opacity: 0; transition: opacity var(--duration-short) ease; } .definitionWrapper_0vx5U:hover .grabberWrapper_WLh-V { opacity: 1; } .targetCard_YoeqR { position: relative; } .controlButtons_l18tz { width: 100%; position: absolute; top: var(--spacing-s); padding: 0 var(--spacing-s); opacity: 0; transition: opacity 0.2s ease-in-out; } .targetCard_YoeqR:hover .controlButtons_l18tz { opacity: 1; } .grab_y1-pK { cursor: grab; } .grabbing_fDPig { cursor: grabbing; } .changeRequestStatus_Xfm80 { position: absolute; border-color: var(--theme-color-primary-base); border-width: 1px; border-radius: 100%; right: 0; bottom: 0; translate: 20% 0; } .popover_eLmJg { width: 400px; } .popover_41P2r { max-height: 300px; position: relative; /* * Need the below properties because in the annotation popover, * the text is not inheriting pre-wrap from the contentEditor and * that means we would lose white space without. */ white-space: pre-wrap; overflow-wrap: break-word; } .toolbar_EEKEO { position: absolute; top: var(--spacing-m); right: var(--spacing-m); } .annotatedText_DZvL5 { -webkit-text-decoration: underline dotted var(--color-text-muted) 2px; text-decoration: underline dotted var(--color-text-muted) 2px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .annotatedText_DZvL5:hover, .active_mnp9Q { border-radius: var(--theme-radius-medium); padding: 0 var(--spacing-xs); background-color: rgba(35, 131, 226, 0.14); margin: 0 calc(-1 * var(--spacing-xs)); z-index: -1; cursor: pointer; } .quote_5I59h { color: var(--color-text-mid); padding-left: var(--spacing-m); border-left: var(--spacing-xs) solid var(--color-border-mid); } .hint_rnF2j { background-color: var(--color-background-muted); padding-right: var(--spacing-l); border-left: var(--spacing-xs) solid var(--hint-color); border-radius: var(--radius-m); } .iconWrapper_NJPs7 { width: calc(var(--spacing-xl) + var(--spacing-s)); color: var(--hint-color); z-index: var(--z-index-promote); align-self: start; } .icon_abDxV { --icon-size: var(--icon-l); width: var(--icon-size); height: var(--icon-size); } .info_-xeCE { --hint-color: var(--color-primary-base); } .warning_5BM-F { --hint-color: var(--color-orange-base); } .danger_UUfHb { --hint-color: var(--color-scarlet-base); } .success_3o6RV { --hint-color: var(--color-green-base); } .footerBorder_hc48m { border-top: 1px solid var(--color-background-standout); } .buttonIcon_PNHD1 { width: 16px; height: 16px; } .tooltip_8qsEs { border-radius: var(--theme-radius-medium); border-color: var(--color-border-mid); border-width: 1px; border-style: solid; background-color: var(--color-background-mid); flex-direction: row; padding: var(--spacing-xs); } .brokenImage_F5FWc { padding: var(--spacing-xs); border-radius: var(--theme-radius-medium); background-color: var(--color-background-muted); } .header_hoasR { border-bottom: 1px solid #eaebee; } /* https://piccalil.li/tutorial/creating-a-full-bleed-css-utility/ */ .pageCoverBleedFull_eqtqd { width: 100vw; margin-left: calc(50% - 50vw); } /* Colors are not added as semantic tokens to Spine, as this UI is still experimental and not guaranteed to be Spine components */ .container_yKyee { align-items: center; align-content: center; gap: var(--sp-spacing-400); align-self: stretch; flex-wrap: wrap; } .promptContainer_BJ34Y { display: flex; padding: 4px 10px; justify-content: center; align-items: flex-start; gap: var(--sp-spacing-200); border: none; border-radius: 999px; background-color: var(--sp-color-bg-suggestion-default); transition: background-color 0.2s ease-in; cursor: pointer; } .promptContainer_BJ34Y:focus-visible, .promptContainer_BJ34Y:hover { background-color: var(--sp-color-bg-suggestion-hover); } .prompt_Xv6G2 { font: var(--sp-typography-ui-small-font); color: var(--sp-color-text-base); text-align: center; } .icon_g6DQ7 { width: 15px; height: 15px; flex-shrink: 0; color: var(--sp-color-icon-ask-gitbook); } .exitHint_xASL- { position: absolute; bottom: 0; right: 0; display: inline-flex; padding: var(--spacing-xs); gap: 0; white-space: pre-wrap; animation: var(--duration-short) show_HIlHf forwards; } @keyframes show_HIlHf { from { opacity: 0; } } .reviewStatusIcon_uVtTj { /* Match the button of size M */ padding: calc((var(--button-m) - var(--icon-m)) / 2); } .avatarBadge_YTUIm { --avatarBadge-absolute-position: 48px; border: 1px solid var(--sp-color-sidesheet-avatar-badge-border); border-radius: 50%; z-index: 2; position: absolute; left: var(--avatarBadge-absolute-position); } .pageHeaderContainer_f8iPF { padding-top: calc(var(--spacing-l) + var(--spacing-s)); } .pageControls_65PGe { position: absolute; top: 0; } .hiddenIcon_MYEiw { width: var(--icon-xs); height: var(--icon-xs); color: var(--color-text-muted); } .revealOnHover_QTUA- { opacity: 0; transition: opacity var(--duration-short) ease; } .pageHeaderContainer_f8iPF:hover .revealOnHover_QTUA- { opacity: 1; }