:root, .__fb-light-mode { --fds-black: black; --fds-black-alpha-05: rgba(0, 0, 0, 0.05); --fds-black-alpha-10: rgba(0, 0, 0, 0.1); --fds-black-alpha-15: rgba(0, 0, 0, 0.15); --fds-black-alpha-20: rgba(0, 0, 0, 0.2); --fds-black-alpha-30: rgba(0, 0, 0, 0.3); --fds-black-alpha-40: rgba(0, 0, 0, 0.4); --fds-black-alpha-50: rgba(0, 0, 0, 0.5); --fds-black-alpha-60: rgba(0, 0, 0, 0.6); --fds-black-alpha-80: rgba(0, 0, 0, 0.8); --fds-blue-05: black; --fds-blue-30: black; --fds-blue-40: black; --fds-blue-60: black; --fds-blue-70: black; --fds-blue-80: black; --fds-button-text: black; --fds-comment-background: black; --fds-dark-mode-gray-35: black; --fds-dark-mode-gray-50: black; --fds-dark-mode-gray-70: black; --fds-dark-mode-gray-80: black; --fds-dark-mode-gray-90: black; --fds-dark-mode-gray-100: black; --fds-gray-00: black; --fds-gray-05: black; --fds-gray-10: black; --fds-gray-20: black; --fds-gray-25: black; --fds-gray-30: black; --fds-gray-45: black; --fds-gray-70: black; --fds-gray-80: black; --fds-gray-90: black; --fds-gray-100: black; --fds-green-55: black; --fds-highlight: black; --fds-highlight-cell-background: black; --fds-primary-icon: white; --fds-primary-text: white; --fds-red-55: black; --fds-soft: cubic-bezier(.08,.52,.52,1); --fds-spectrum-aluminum-tint-70: black; --fds-spectrum-blue-gray-tint-70: black; --fds-spectrum-cherry: black; --fds-spectrum-cherry-tint-70: black; --fds-spectrum-grape-tint-70: black; --fds-spectrum-grape-tint-90: black; --fds-spectrum-lemon-dark-1: black; --fds-spectrum-lemon-tint-70: black; --fds-spectrum-lime: black; --fds-spectrum-lime-tint-70: black; --fds-spectrum-orange-tint-70: black; --fds-spectrum-orange-tint-90: black; --fds-spectrum-seafoam-tint-70: black; --fds-spectrum-slate-dark-2: black; --fds-spectrum-slate-tint-70: black; --fds-spectrum-teal: black; --fds-spectrum-teal-dark-1: black; --fds-spectrum-teal-dark-2: black; --fds-spectrum-teal-tint-70: black; --fds-spectrum-teal-tint-90: black; --fds-spectrum-tomato: black; --fds-spectrum-tomato-tint-30: black; --fds-spectrum-tomato-tint-90: black; --fds-strong: cubic-bezier(.12,.8,.32,1); --fds-white: black; --fds-white-alpha-05: rgba(255, 255, 255, 0.05); --fds-white-alpha-10: rgba(255, 255, 255, 0.1); --fds-white-alpha-20: rgba(255, 255, 255, 0.2); --fds-white-alpha-30: rgba(255, 255, 255, 0.3); --fds-white-alpha-40: rgba(255, 255, 255, 0.4); --fds-white-alpha-50: rgba(255, 255, 255, 0.5); --fds-white-alpha-60: rgba(255, 255, 255, 0.6); --fds-white-alpha-80: rgba(255, 255, 255, 0.8); --fds-yellow-20: black; --accent: #0866FF; --always-white: white; --always-black: black; --always-dark-gradient: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6)); --always-dark-overlay: rgba(0, 0, 0, 0.4); --always-light-overlay: rgba(255, 255, 255, 0.4); --always-gray-40: #65676B; --always-gray-75: #BCC0C4; --always-gray-95: #F0F2F5; --attachment-footer-background: rgba(255,255,255,0.1); --background-deemphasized: rgba(255,255,255,0.1); --badge-background-color-blue: var(--accent); --badge-background-color-dark-gray: var(--secondary-icon); --badge-background-color-gray: var(--disabled-icon); --badge-background-color-green: var(--positive); --badge-background-color-light-blue: var(--highlight-bg); --badge-background-color-red: var(--notification-badge); --badge-background-color-yellow: var(--base-lemon); --base-blue: #1877F2; --base-cherry: #F3425F; --base-grape: #9360F7; --base-lemon: #F7B928; --base-lime: #45BD62; --base-pink: #FF66BF; --base-seafoam: #54C7EC; --base-teal: #2ABBA7; --base-tomato: #FB724B; --text-badge-info-background: hsl(214, 100%, 59%); --text-badge-success-background: #31A24C; --text-badge-attention-background: hsl(40, 89%, 52%); --text-badge-critical-background: #e41e3f; --blue-link: #5AA7FF; --border-focused: #8A8D91; --card-background: #242526; --dataviz-primary-1: rgb(48,200,180); --disabled-button-background: rgba(255, 255, 255, 0.2); --disabled-button-text: rgba(255, 255, 255, 0.3); --disabled-icon: rgba(255, 255, 255, 0.3); --disabled-text: rgba(255, 255, 255, 0.3); --event-date: #F3425F; --fb-wordmark: #FFFFFF; --fb-logo: #0866FF; --filter-accent: invert(74%) sepia(14%) saturate(7129%) hue-rotate(185deg) brightness(102%) contrast(101%); --filter-always-white: invert(100%); --filter-disabled-icon: invert(100%) opacity(30%); --filter-placeholder-icon: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%); --filter-primary-accent: invert(27%) sepia(95%) saturate(3116%) hue-rotate(212deg) brightness(99%) contrast(105%); --filter-primary-icon: invert(89%) sepia(6%) hue-rotate(185deg); --filter-secondary-icon: invert(62%) sepia(98%) saturate(12%) hue-rotate(175deg) brightness(90%) contrast(96%); --filter-warning-icon: invert(77%) sepia(29%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(128%) hue-rotate(359deg) brightness(102%) contrast(107%); --filter-blue-link-icon: invert(73%) sepia(29%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(103.25%) hue-rotate(189deg) brightness(101%) contrast(101%); --filter-positive: invert(37%) sepia(61%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(115%) hue-rotate(91deg) brightness(97%) contrast(105%); --filter-negative: invert(25%) sepia(33%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(110%) hue-rotate(345deg) brightness(132%) contrast(96%); --focus-ring-blue: #1D85FC; --glimmer-spinner-icon: white; --hero-banner-background: #E85D07; --hosted-view-selected-state: #1D85FC19; --highlight-bg: rgba(24, 119, 242, .31); --hover-overlay: rgba(255, 255, 255, 0.1); --list-cell-chevron: #B0B3B8; --media-hover: rgba(68, 73, 80, 0.15); --media-inner-border: rgba(255, 255, 255, 0.05); --media-outer-border: #33363A; --media-pressed: rgba(68, 73, 80, 0.35); --messenger-card-background: #1e1e1e; --messenger-reply-background: #18191A; --overlay-on-media: rgba(0, 0, 0, 0.6); --nav-bar-background: #242526; --nav-bar-background-gradient: linear-gradient(to top, #242526, rgba(36,37,38,.9), rgba(36,37,38,.7), rgba(36,37,38,.4), rgba(36,37,38,0)); --nav-bar-background-gradient-wash: linear-gradient(to top, #18191A, rgba(24,25,26,.9), rgba(24,25,26,.7), rgba(24,25,26,.4), rgba(24,25,26,0)); --negative: hsl(350, 87%, 55%); --negative-background: hsl(350, 87%, 55%, 20%); --new-notification-background: #E7F3FF; --non-media-pressed: rgba(68, 73, 80, 0.15); --non-media-pressed-on-dark: rgba(255, 255, 255, 0.3); --notification-badge: #e41e3f; --placeholder-icon: #8A8D91; --placeholder-image: rgb(164, 167, 171); --placeholder-text: #8A8D91; --placeholder-text-on-media: rgba(255, 255, 255, 0.5); --positive: #31A24C; --positive-background: #1F3520; --press-overlay: rgba(255, 255, 255, 0.1); --primary-button-background: #0866FF; --primary-button-icon: #FFFFFF; --primary-button-pressed: #77A7FF; --primary-button-text: #FFFFFF; --primary-deemphasized-button-background: #1D85FC33; --primary-deemphasized-button-pressed: rgba(24, 119, 242, 0.2); --primary-deemphasized-button-pressed-overlay: rgba(25, 110, 255, 0.15); --primary-deemphasized-button-text: #75B6FF; --primary-text-on-media: white; --primary-web-focus-indicator: #D24294; --progress-ring-neutral-background: rgba(255, 255, 255, 0.2); --progress-ring-neutral-foreground: #ffffff; --progress-ring-on-media-background: rgba(255, 255, 255, 0.2); --progress-ring-on-media-foreground: #FFFFFF; --progress-ring-blue-background: #0866FF33; --progress-ring-blue-foreground: #0866FF; --progress-ring-disabled-background: rgba(122,125,130, 0.2); --progress-ring-disabled-foreground: #7A7D82; --rating-star-active: #FF9831; --scroll-thumb: rgba(255, 255, 255, 0.3); --scroll-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px rgba(255, 255, 255, 0.05) inset; --secondary-button-background: rgba(255,255,255,.1); --secondary-button-background-floating: #4B4C4F; --secondary-button-background-on-dark: rgba(255, 255, 255, 0.4); --secondary-button-pressed: rgba(0, 0, 0, 0.05); --secondary-button-stroke: transparent; --secondary-button-text: #E4E6EB; --secondary-text-on-media: rgba(255, 255, 255, 0.9); --section-header-text: #BCC0C4; --shadow-elevated: 0 8px 20px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1); --shadow-persistent: 0px 0px 12px rgba(28, 43, 51, 0.6); --shadow-primary: 0px 0px 12px rgba(28, 43, 51, 0.1); --switch-active: hsl(214, 100%, 59%); --text-highlight: #1D85FC72; --input-background: #242526; --input-background-disabled: #18191A; --input-border-color: #3E4042; --input-border-color-hover: var(--placeholder-text); --input-label-color-highlighted: #3E93F8; --text-input-outside-label: #FFFFFF; --toast-background: #242526; --toast-text: #FFFFFF; --toast-text-link: #4599FF; --toggle-active-background: #1D85FC; --toggle-active-icon: #FFFFFF; --toggle-active-text: #FFFFFF; --toggle-button-active-background: #E6F2FF; --tooltip-background: rgba(11, 11, 11, 0.8); --tooltip-box-shadow: 0 2px 4px 0 var(--shadow-5); --warning: hsl(40, 89%, 52%); --chat-bubble-padding-vertical: 8px; --chat-bubble-padding-horizontal: 12px; --chat-bubble-border-radius: 18px; --chat-text-blockquote-color-background-line: rgba(255, 255, 255, 0.19); --chat-text-blockquote-color-text-primary-media: rgba(255, 255, 255, 0.7); --chat-replied-message-background-color: rgba(255, 255, 255, 0.12); --radio-border-color: var(--primary-icon); --radio-border-color-disabled: var(--disabled-button-background); --radio-border-color-selected: var(--accent); --radio-checked-icon-color: var(--accent); --radio-checked-icon-color-disabled: var(--disabled-button-background); --fb-logo-color: #2D88FF; --dialog-anchor-vertical-padding: 56px; --header-height: 0px; --global-panel-width: 0px; --global-panel-width-expanded: 0px; --alert-banner-corner-radius: 8px; --button-corner-radius: 6px; --button-corner-radius-medium: 10px; --button-corner-radius-large: 12px; --button-height-large: 40px; --button-height-medium: 36px; --button-padding-horizontal-large: 16px; --button-padding-horizontal-medium: 16px; --button-icon-padding-large: 16px; --button-icon-padding-medium: 16px; --button-inner-icon-spacing-large: 3px; --button-inner-icon-spacing-medium: 3px; --blueprint-button-height-medium: 40px; --blueprint-button-height-large: 48px; --card-corner-radius: 8px; --card-box-shadow: 0 12px 28px 0 var(--shadow-2), 0 2px 4px 0 var(--shadow-1); --card-padding-horizontal: 10px; --card-padding-vertical: 20px; --chip-corner-radius: 6px; --dialog-corner-radius: 8px; --glimmer-corner-radius: 8px; --image-corner-radius: 4px; --input-corner-radius: 6px; --input-border-width: 1px; --nav-list-cell-corner-radius: 8px; --list-cell-corner-radius: 8px; --list-cell-min-height: 52px; --list-cell-padding-vertical: 20px; --list-cell-padding-vertical-with-addon: 14px; --menu-item-base-margin-horizontal: 8px; --menu-item-base-padding-horizontal: 8px; --nav-list-cell-min-height: 0px; --nav-list-cell-padding-vertical: 16px; --nav-list-cell-padding-vertical-with-addon: 16px; --page-footer-padding-vertical: 16px; --section-header-addOnEnd-margin-horizontal: 8px; --section-header-addOnStart-margin-horizontal: 12px; --section-header-addOnEnd-button-padding-horizontal: 0px; --section-header-addOnEnd-button-padding-vertical: 0px; --section-header-padding-vertical: 16px; --section-header-subtitle-margin-vertical: 14px; --section-header-subtitle-with-addOnEnd-margin-vertical: 6px; --text-badge-corner-radius: 4px; --text-badge-padding-horizontal: 6px; --text-badge-padding-vertical: 6px; --text-input-multi-padding-between-text-scrollbar: 20px; --text-input-multi-padding-scrollbar: 16px; --text-input-caption-margin-top: 10px; --text-input-label-top: 22px; --text-input-min-height: 64px; --text-input-padding-vertical: 12px; --toast-addon-padding-horizontal: 6px; --toast-addon-padding-vertical: 6px; --toast-container-max-width: 100%; --toast-container-min-width: 288px; --toast-container-padding-horizontal: 10px; --toast-container-padding-vertical: 16px; --toast-corner-radius: 8px; --tooltip-corner-radius: 8px; --typeahead-list-outer-padding-vertical: 2px; --fds-animation-enter-exit-in: cubic-bezier(0.14, 1, 0.34, 1); --fds-animation-enter-exit-out: cubic-bezier(0.45, 0.1, 0.2, 1); --fds-animation-swap-shuffle-in: cubic-bezier(0.14, 1, 0.34, 1); --fds-animation-swap-shuffle-out: cubic-bezier(0.45, 0.1, 0.2, 1); --fds-animation-move-in: cubic-bezier(0.17, 0.17, 0, 1); --fds-animation-move-out: cubic-bezier(0.17, 0.17, 0, 1); --fds-animation-expand-collapse-in: cubic-bezier(0.17, 0.17, 0, 1); --fds-animation-expand-collapse-out: cubic-bezier(0.17, 0.17, 0, 1); --fds-animation-passive-move-in: cubic-bezier(0.5, 0, 0.1, 1); --fds-animation-passive-move-out: cubic-bezier(0.5, 0, 0.1, 1); --fds-animation-quick-move-in: cubic-bezier(0.1, 0.9, 0.2, 1); --fds-animation-quick-move-out: cubic-bezier(0.1, 0.9, 0.2, 1); --fds-animation-fade-in: cubic-bezier(0, 0, 1, 1); --fds-animation-fade-out: cubic-bezier(0, 0, 1, 1); --fds-duration-extra-extra-short-in: 100ms; --fds-duration-extra-extra-short-out: 100ms; --fds-duration-extra-short-in: 200ms; --fds-duration-extra-short-out: 150ms; --fds-duration-short-in: 280ms; --fds-duration-short-out: 200ms; --fds-duration-medium-in: 400ms; --fds-duration-medium-out: 350ms; --fds-duration-long-in: 500ms; --fds-duration-long-out: 350ms; --fds-duration-extra-long-in: 1000ms; --fds-duration-extra-long-out: 1000ms; --fds-duration-none: 0ms; --fds-fast: 200ms; --fds-slow: 400ms; --font-family-apple: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; --font-family-code: ui-monospace, Menlo, Consolas, Monaco, monospace; --font-family-default: Helvetica, Arial, sans-serif; --font-family-segoe: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif; --body-font-family: Placeholder Font; --body-font-size: 0.9375rem; --body-font-weight: 400; --body-line-height: 1.3333; --body-emphasized-font-family: Placeholder Font; --body-emphasized-font-size: 0.9375rem; --body-emphasized-font-weight: 600; --body-emphasized-line-height: 1.3333; --headline1-font-family: Optimistic Display Bold, system-ui, sans-serif; --headline1-font-size: 1.75rem; --headline1-font-weight: 700; --headline1-line-height: 1.2143; --headline2-font-family: Optimistic Display Bold, system-ui, sans-serif; --headline2-font-size: 1.5rem; --headline2-font-weight: 700; --headline2-line-height: 1.25; --headline3-font-family: Optimistic Display Bold, system-ui, sans-serif; --headline3-font-size: 1.0625rem; --headline3-font-weight: 700; --headline3-line-height: 1.2941; --meta-font-family: Placeholder Font; --meta-font-size: 0.8125rem; --meta-font-weight: 400; --meta-line-height: 1.3846; --meta-emphasized-font-family: Placeholder Font; --meta-emphasized-font-size: 0.8125rem; --meta-emphasized-font-weight: 600; --meta-emphasized-line-height: 1.3846; --primary-label-font-family: Optimistic Display Medium, system-ui, sans-serif; --primary-label-font-size: 1.0625rem; --primary-label-font-weight: 500; --primary-label-line-height: 1.2941; --secondary-label-font-family: Placeholder Font; --secondary-label-font-size: 0.9375rem; --secondary-label-font-weight: 500; --secondary-label-line-height: 1.3333; --tertiary-label-font-family: Placeholder Font; --tertiary-label-font-size: 0.6875rem; --tertiary-label-font-weight: 500; --tertiary-label-line-height: 1.4545; --text-input-field-font-family: Placeholder Font; --text-input-field-font-size: 1rem; --text-input-field-font-weight: 500; --text-input-field-line-height: 1.2941; --text-input-label-font-family: Placeholder Font; --text-input-label-font-size: 17px; --text-input-label-font-size-scale-multiplier: 0.75; --text-input-label-font-weight: 400; --text-input-label-line-height: 1.2941; --dialog-size-medium-max-width: 700px; --dialog-size-medium-width: 100%; --dialog-size-small-max-width: 548px; --dialog-size-small-width: 100%; --focus-ring-outline-forced-colors: 2px auto transparent !important; --focus-ring-outline-link: 2px auto var(--focus-ring-blue); --focus-ring-shadow-default: 0 0 0 2px var(--always-white), 0 0 0 4px var(--focus-ring-blue); --focus-ring-shadow-inset: 0 0 0 2px var(--focus-ring-blue) inset, 0 0 0 4px var(--always-white) inset; --glimmer-animation-direction: alternate; --glimmer-animation-duration: 1000ms; --glimmer-animation-timing-function: steps(10, end); --glimmer-opacity-min: 0.25; --glimmer-opacity-max: 1; --radio-checked-icon-size-large: 12px; --radio-checked-icon-size-medium: 12px; --radio-border-width: 2px; --radio-size-large: 24px; --radio-size-medium: 20px; --blue-primary: rgb(0,136,244); --blue-secondary: rgb(235,245,255); --blue-tertiary: rgb(4,59,114); --chartreuse-primary: rgb(106,147,22); --chartreuse-secondary: rgb(226,255,152); --chartreuse-tertiary: rgb(50,65,19); --cyan-primary: rgb(0,142,213); --cyan-secondary: rgb(231,245,255); --cyan-tertiary: rgb(15,63,93); --dataviz-primary-2: rgb(134,218,255); --dataviz-primary-3: rgb(95,170,255); --dataviz-secondary-1: rgb(129,77,231); --dataviz-secondary-2: rgb(168,124,255); --dataviz-secondary-3: rgb(219,26,139); --dataviz-supplementary-1: rgb(255,122,105); --dataviz-supplementary-2: rgb(241,168,23); --dataviz-supplementary-3: rgb(49,162,76); --dataviz-supplementary-4: rgb(228,230,235); --fuschia-primary: rgb(250,45,138); --fuschia-secondary: rgb(255,241,246); --fuschia-tertiary: rgb(118,14,62); --green-primary: rgb(43,154,53); --green-secondary: rgb(227,250,224); --green-tertiary: rgb(26,68,27); --magenta-primary: rgb(215,77,204); --magenta-secondary: rgb(255,239,254); --magenta-tertiary: rgb(96,36,91); --orange-primary: rgb(208,108,20); --orange-secondary: rgb(255,241,239); --orange-tertiary: rgb(94,49,14); --purple-primary: rgb(125,116,255); --purple-secondary: rgb(245,241,255); --purple-tertiary: rgb(55,50,121); --red-primary: rgb(251,60,68); --red-secondary: rgb(255,241,239); --red-tertiary: rgb(118,22,27); --teal-primary: rgb(0,152,124); --teal-secondary: rgb(227,247,241); --teal-tertiary: rgb(10,68,56); --yellow-primary: rgb(161,132,0); --yellow-secondary: rgb(255,246,161); --yellow-tertiary: rgb(72,59,12); --icon-primary-color: #fff; --comment-background: #303030; --chat-incoming-message-bubble-background-color: var(--comment-background) !important; --comment-footer-background: #333; --card-background-flat: var(--comment-background); --disabled-button-background: #373737; --divider: #4d4d4d; --mwp-message-row-background: var(--messenger-card-background); --overlay-alpha-80: rgba(41, 41, 41, 0.8); --popover-background: var(--mwp-message-row-background); --primary-icon: #cecece; --primary-text: #cecece; --scroll-thumb: #5d5d5d; --secondary-button-background: #353535; --secondary-icon: #999; --secondary-text: #999; --shadow-1: rgba(0, 0, 0, 0.3); --shadow-2: rgba(0, 0, 0, 0.4); --shadow-5: rgba(0, 0, 0, 0.7); --shadow-8: rgba(0, 0, 0, 1); --shadow-inset: rgba(000, 000, 000, 0.5); --surface-background: var(--mwp-message-row-background); --wash: #373737; --web-wash: var(--mwp-message-row-background); /* There are some differences in Web FB variables, probably undergoing theme changes */ --icon-secondary-color: var(--secondary-icon); --icon-tertiary-color: var(--secondary-icon); --pressable-background-color-hover: var(--hover-overlay); --pressable-background-color-selected: var(--highlight-bg); } html::-webkit-scrollbar { display: none; } ::-webkit-scrollbar { background: var(--popover-background); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }