/*
  :root = <html/>
  :host > * = the root of the extension shadow DOM contents
*/
/* SPACING */
:host > *,
:root {
  --s1: 10px;
  --s2: 20px;
  --s3: 30px;
  --s4: 40px;
  --s5: 50px;

  --spacer-0: 0;
  --spacer-1: .125rem;/* 2px */
  --spacer-2: .25rem; /* 4px */
  --spacer-3: .5rem;  /* 8px */
  --spacer-4: .75rem; /* 12px */
  --spacer-5: 1rem;   /* 16px */
  --spacer-6: 1.25rem;/* 20px */
  --spacer-7: 1.5rem; /* 24px */
  --spacer-8: 2rem;   /* 32px */
  --spacer-9: 2.5rem; /* 40px */
  --spacer-10: 3rem;  /* 48px */

  --min-left-pad: 32px;
}
/* FONTS */
:host > *,
:root {
  /* font weights */
  --font-weight-lighter: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --font-size-xs: 0.6875rem; /* 11px */
  --font-size-sm: 0.75rem; /* 12px */
  --font-size-base: 0.875rem; /* 14px */ /* --f9 */
  --font-size-lg: 1rem; /* 16px */
  --font-size-xl: 1.25rem; /* 20px */

  --line-height-xs: 1rem; /* 16px */
  --line-height-sm: 1.125rem; /* 18px */
  --line-height-base: 1.25rem; /* 20px */
  --line-height-lg: 1.5rem; /* 24px */
  --line-height-xl: 1.5625rem; /* 25px */


  --f2: 3.25rem;/* Deprecated */
  --f3: 1.8rem;/* Deprecated */
  --f4: 1.38rem;/* Deprecated */
  --f5: 1.35rem;/* Deprecated */
  --f6: var(--font-size-2xl); /* Deprecated */
  --f7: var(--font-size-xl); /* Deprecated */
  --f8: var(--font-size-lg); /* Deprecated */
  --f9: var(--font-size-base); /* Deprecated */
  --f10: var(--font-size-sm); /* Deprecated */
  --f11: var(--font-size-xs); /* Deprecated */


  /* letter-spacing that works with the above sizes */

  --ls-6: -0.017em;
  --ls-7: -0.014em;
  --ls-8: -0.011em;
  --ls-9: -0.006em;
  --ls-10: 0em;
  --ls-11: 0.005em;

  --ui-font: "Inter VF", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono-font: "Roboto Mono VF", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --content-line-height: 1.6;
}
/* base COLORS (not themed) */
:host > *,
:root {

  /*
  Base neutral styles.
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4ByMArgC4BOEANjiADQgAW5Mj8A2qJLAnAUa9ZiADGAezqTqXbiADEAM1VqxKgBzKAnMogblABmUBGZQCYNMIzADMMAGwa0ptAFY0OjeNPiA7OJwLIoARqahOuJWIRAWEOKh-ho67noQBiGamjoWURqBmu7aGo4w-tl2paaOAckh7gAs7sqOoRqNRXYtGg6d7lUhdsPijc4hFpp2pnbtIeYW-hbKGqbufhaDSqZGNW4aRr6mpvVKRucXIAC6AL5XLJSSYJwICjtGYjqnqZ8fLEViTR-ED%2BdxifzAxxgliOYHuaEgdzA5piRrA7piOzAiwIizAtZiHZiIynIwI87XG5AA
  */

/* Readwise - Neutrals color palette */

  /* neutral */
  --neutral-100: #ffffff;
  --neutral-97: #f8f9fa;
  --neutral-95: #f0f1f2;
  --neutral-90: #e0e3e6;
  --neutral-85: #d1d5d9;
  --neutral-80: #c1c7ce;
  --neutral-75: #b1b9c2;
  --neutral-70: #a2acb7;
  --neutral-65: #959faa;
  --neutral-60: #88929c;
  --neutral-55: #7c858f;
  --neutral-50: #6e7883;
  --neutral-45: #616c77;
  --neutral-40: #545f6b;
  --neutral-35: #48535f;
  --neutral-30: #3e4853;
  --neutral-25: #333c46;
  --neutral-20: #28313b;
  --neutral-15: #1f272f;
  --neutral-10: #151c23;
  --neutral-07: #10161d;
  --neutral-05: #0c1117;
  --neutral-00: #000000;


  /* Readwise - Color color palette
  https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4DCA9gDZkBOIANCABYCuMOCA2qJLAiNTDT0QAY0o128DiADEAMwUA2OQGZh8gJxoRaAEzq5GgEYqIahvICsADg0B2IwcWWRl-RbTWALAAZT6iDsVaxV3WTsQgEZdCHUvPTcfdV0jSMVokABdAF86bmg4RBoIMABzOAYxKmpJaXkRQ0EDCBgfCDlmow1FJIs5CGsjXUt1VEVdSJGLETsvGEiK2Q0IL3SRdSCVSx91iy8hjR8hC10RSLsfSKzc-N5EAE8YCioMYSqJTll%2B-vmDFRgIlc%2BnZtJEOhZ5kY5Dt1GctJFrAEvBEfIsZLZLL4gbJFCY0JFzLJkSkjslrJFDlccnlwAU%2BKUBDAwG9xDVPjIYDA5GhObCvKoRGF0dyRNY0eMjGhFISZF5TCJkeoVAiQlNZFs7ATFMkYJjdGjdCpgob1JMJpEvNcaTxCiAAC6oCgs6q1WRcuRQ46yM6cuSWix2EFi-2yaJnPTqHxtXEhmRR6yKDRCrVyOwaU3WSxbWIWI4qaWOXM%2BXQl7XU262owUVjOj5SL66b7g71yAHcgLWEQiLkbXH6r0yNxJuTYmS6NB2Sy600QSwaUXJTHBZtjuU%2BSzaiwIyKCxzl2l3EBYMBoLClMi1tn1%2BTWVOt0ZzHxyRHTXGttEQEQQVGbpaWEEwC%2BsjWOuGgwLGiYqHIIi-rKMBbGKSrjK4dimvM0pljcB62gADsw1A4RQizvFedTcnIyi7A2aBQkK4FGHYqDqFKGj-L03qKIogjphYRhLmg7HoiIKhfkKnEqMiMpeNEKxAaukQQLoqE5JkDB2mQYBsJ89jCIcwggcIFzCD0wjbMIvjCCo7G6OxkRJDkQA
  */

  /* red */
  --red-97: #fff6f3;
  --red-90: #f9dcd2;
  --red-80: #f9b3a3;
  --red-70: #f5897b;
  --red-60: #f65c52;
  --red-50: #d8403a;
  --red-40: #a73832;
  --red-30: #78312a;
  --red-20: #4d2520;
  --red-10: #2b1612;

  /* orange */
  --orange-97: #fcf9ed;
  --orange-90: #fae0af;
  --orange-80: #fab960;
  --orange-70: #fa8b25;
  --orange-60: #ea6215;
  --orange-50: #c74e1e;
  --orange-40: #9a461c;
  --orange-30: #73350c;
  --orange-20: #4b290d;
  --orange-10: #2c1701;

  /* yellow */
  --yellow-97: #fafae1;
  --yellow-90: #f3e781;
  --yellow-80: #f7dc1f;
  --yellow-70: #e1bf0c;
  --yellow-60: #c19d18;
  --yellow-50: #a4780e;
  --yellow-40: #895401;
  --yellow-30: #6b3d13;
  --yellow-20: #472b0d;
  --yellow-10: #281901;

  /* green */
  --green-97: #eefdee;
  --green-90: #c4f3c2;
  --green-80: #8fdc8e;
  --green-70: #62bd63;
  --green-60: #43ac47;
  --green-50: #318835;
  --green-40: #357136;
  --green-30: #2e542e;
  --green-20: #233823;
  --green-10: #152114;

  /* teal */
  --teal-97: #effbfd;
  --teal-90: #c1eef4;
  --teal-80: #77d8e4;
  --teal-70: #12c1d2;
  --teal-60: #00a6b4;
  --teal-50: #008692;
  --teal-40: #136f79;
  --teal-30: #18535a;
  --teal-20: #0d363b;
  --teal-10: #002226;

  /* blue */
  --blue-97: #f2faff;
  --blue-90: #cfe7fd;
  --blue-80: #a8ccef;
  --blue-70: #76b2ed;
  --blue-60: #5292f1;
  --blue-50: #2d75e5;
  --blue-40: #1a59c8;
  --blue-30: #25438f;
  --blue-20: #243056;
  --blue-10: #181c2b;

  /* indigo */
  --indigo-97: #f8f7fe;
  --indigo-90: #e4e0f8;
  --indigo-80: #c6bfee;
  --indigo-70: #aca0e6;
  --indigo-60: #957de8;
  --indigo-50: #8059e4;
  --indigo-40: #693fc6;
  --indigo-30: #4e358e;
  --indigo-20: #362c57;
  --indigo-10: #1e1636;

  /* purple */
  --purple-97: #fdf6fc;
  --purple-90: #f2dbf2;
  --purple-80: #e4b7ea;
  --purple-70: #d693e0;
  --purple-60: #c66ed9;
  --purple-50: #b543d0;
  --purple-40: #8c3ca2;
  --purple-30: #663473;
  --purple-20: #412a48;
  --purple-10: #241a27;



  /* These will eventually be deprecated. For now they have been remapped to the base styles above. Use functional names like "text-primary" or the root names above */
  --black: var(--neutral-00);
  --white: var(--neutral-100);

  /* New base styles for these colours will come */
  --svg-filter-grey: invert(26%) sepia(19%) saturate(0%) hue-rotate(266deg) brightness(106%) contrast(94%);
  --svg-filter-inbox: invert(76%) sepia(9%) saturate(153%) hue-rotate(169deg) brightness(95%) contrast(90%);
  --svg-filter-black: invert(0%) sepia(4%) saturate(0%) hue-rotate(309deg) brightness(93%) contrast(107%);
  --svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(105%) contrast(101%);
  --svg-filter-blue: invert(79%) sepia(56%) saturate(7329%) hue-rotate(191deg) brightness(102%) contrast(94%);
}
/* default THEME colors */
:host > *,
:root {

  /* FOUNDATIONS */

  /* Naming syntax
    We use the following order when naming css properties. The "default" text can be omitted.

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  default       default   default     default     default
    text        button        error     selected    primary     hover
    icon        galleryList   success               secondary   active
    border      toolbar       info


    Button example:

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  button        default   default     secondary   hover
    background-button-secondary-hover

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    text        button        default   default     primary     active
    text-button-primary-active
/*

  /* Utility alpha classes */
  --u-alpha-100: rgba(40,49,59,0.03);
  --u-alpha-200: rgba(40,49,59,0.06);
  --u-alpha-300: rgba(40,49,59,0.09);
  --u-alpha-400: rgba(40,49,59,0.12);
  --u-alpha-500: rgba(40,49,59,0.15);

  --u-alpha-blue-100: rgba(26,89,200,0.03);
  --u-alpha-blue-200: rgba(26,89,200,0.06);
  --u-alpha-blue-300: rgba(26,89,200,0.09);
  --u-alpha-blue-400: rgba(26,89,200,0.12);
  --u-alpha-blue-500: rgba(26,89,200,0.15);

  --u-alpha-red-100: rgba(216,64,58,0.03);
  --u-alpha-red-200: rgba(216,64,58,0.06);
  --u-alpha-red-300: rgba(216,64,58,0.09);
  --u-alpha-red-400: rgba(216,64,58,0.12);
  --u-alpha-red-400: rgba(216,64,58,0.15);

  --focus-ring-color: var(--blue-60);


  /* Text */
  --text-primary: var(--neutral-20);
  --text-secondary: var(--neutral-45);
  --text-tertiary: var(--neutral-60);
  --text-placeholder: var(--neutral-65);
  --text-disabled: var(--neutral-75);
  --text-inverse: var(--neutral-90); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-50);
  --text-backlink: var(--indigo-40);
  --text-error: var(--red-50);
  --text-success: var(--green-50);

  /* Icons */
  --icon-primary: var(--neutral-25);
  --icon-secondary: var(--neutral-45);
  --icon-tertiary: var(--neutral-60);
  --icon-disabled: var(--neutral-75);
  --icon-interactive: var(--blue-50);
  --icon-danger: var(--red-50);
  --icon-success: var(--green-50);
  --icon-inverse: var(--neutral-97);
  --icon-faint: var(--neutral-90);

  /* Extension bar */
  --extension-bar-background-color: var(--neutral-97);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--black);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Text Selection */
  --selection-color: rgba(0, 114, 255, 0.3);

  /* Borders */
  --border-primary: var(--neutral-80);
  --border-secondary: var(--neutral-90);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-60);

  /* Backgrounds */
  --background-primary: var(--neutral-100);
  --background-secondary: var(--neutral-90);
  --background-tertiary: var(--neutral-95);
  --background-inverse: var(--neutral-10);
  --background-canvas: var(--neutral-97);
  --background-elevated: var(--neutral-100);
  --background-backdrop: var(--u-alpha-300);
  --background-dragging: rgba(f, f, f, 0.7);
  --background-interactive: var(--blue-50);
  --background-error: var(--red-97);
  --background-bulk-actions-header: var(--blue-90);


  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1px 4px rgba(60, 64, 67, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1.5px 4px rgba(60, 64, 67, 0.1), 0px 3px 10px rgba(60, 64, 67, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 3px 5px rgba(60, 64, 67, 0.1), 0px 6px 24px rgba(60, 64, 67, 0.2);
  --shadow-400: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 5px 12px rgba(60, 64, 67, 0.1), 0px 12px 32px rgba(60, 64, 67, 0.2), 0px 20px 96px rgba(60, 64, 67, 0.1);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-90);
  --reading-progress-max-background: var(--neutral-75);
  --reading-progress-point: var(--neutral-40);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --background-button-secondary-disabled: var(--u-alpha-200);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background: rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: #2675DE;
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.1);
  --text-button-accent-subtle-disabled-text: rgba(177, 186, 196, 1);

  --btn-secondary: rgba(235, 237, 238, 0.65); /* used for blur buttons? */

  /* blue */
  --background-button-blue: var(--blue-50);
  --background-button-blue-hover: var(--blue-40);
  --background-button-blue-active: var(--blue-30);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--white);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-width: 208px;
  --document-card-border: var(--border-secondary-alpha);
  --document-card-border-divider: var(--white);
  --document-card-focus-border-color: var(--focus-ring-color);
  --document-card-border-radius: 8px;
  --document-card-background: #fff;
  --document-card-background--hover: var(--document-card-background);
  --document-card-book-image-container-background: var(--background-canvas);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.03), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.2), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.0715329), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.0484671);
  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.00), 0px 1.5px 4px rgba(60, 64, 67, 0.03), 0px 3px 10px rgba(60, 64, 67, 0.1);

  /* Link card */
  --link-card-background: var(--document-card-background);
  --link-card-border-radius: var(--document-card-border-radius);
  --link-card-border: var(--border-secondary-alpha);
  --link-card-border--hover: var(--border-primary);


  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--blue-97);
  --sidebar-button-icon-color: var(--icon-secondary);
  --sidebar-inbox-nav-background: #fff;
  --hide-sidebar-button-background: var(--neutral-95);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) #ededed;
  --sidebar-logo-color: #000;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-97);
  --image-placeholder-shadow-color: var(--neutral-85);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--background-tertiary);

  /* Popovers */
  --edit-tags-form-focused-option-background: rgba(43, 46, 55, 0.04);

  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-90);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-40);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: #fff;

  /* Tag */
  --tag-background: var(--u-alpha-200);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-70);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow-width: 18px;

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-97);
  --cmd-palette-cmd-container: var(--neutral-97);
  --cmd-palette-section-title: var(--neutral-97);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-80);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-row-border: var(--blue-50);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.04) inset;
  --cmd-palette-context-item-background: var(--background-tertiary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: var(--icon-secondary);

  /* Modal */
  --modal-z-index: 9999;

  /* Quoteshot modal */
  --quoteshot-modal-backdrop: rgba(40, 49, 59, 0.59);
  --quoteshot-modal-background: var(--neutral-00);
  --quoteshot-modal-settings-background: var(--neutral-10);
  --quoteshot-interactive-border: var(--blue-60);
  --quoteshot-ratio-border-inactive: var(--neutral-70);
  --quoteshot-ratio-border-active: var(--neutral-95);
  --quoteshot-save-button-text: var(--neutral-90);
  --quoteshot-save-button-background: rgba(92, 105, 119, 0.26);
  --quoteshot-share-button-text: var(--neutral-00);
  --quoteshot-share-button-background: var(--blue-70);
  --quoteshot-share-dropdown-background: var(--neutral-20);
  --quoteshot-share-dropdown-hover: rgba(110,120,131,0.10);
  --quoteshot-share-dropdown-text: var(--neutral-90);

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(240, 241, 242, 0.9);
  --wisereads-modal-background: var(--background-tertiary);
  --wisereads-modal-card-background: var(--background-elevated);
  --wisereads-modal-card-border-hover: transparent;
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.10);

  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-100);

  /* Find in document matches LIGHT MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.1);
  --find-in-document-match-active: rgba(22, 148, 245, 0.15);

  /* Inbox */

  --inbox-sidebar-background: var(--background-canvas);
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(80%) contrast(100%) saturate(80%) sepia(0.1) brightness(65%) drop-shadow(1px 1px 1px black);
  --inbox-zero-foreground-image-filter:
    contrast(84%)
    brightness(80%)
    drop-shadow(0 0 1px rgba(0,0,0,0))
    opacity(100%)
    saturate(25%);
  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(400%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(90%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-black);

  --document-list-box-shadow: inset 0 53px 6px -54px var(--neutral-65);
  --inbox-container-drop-shadow: 0px 8px 20px rgb(0 0 0 / 8%), 0px -1px 2px rgb(0 0 0 / 8%);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color: var(--neutral-90);
  --scrollbar-color-hover: var(--neutral-80);

  --separator-color: rgba(0, 0, 0, 0.1);

  --status-dot--unopened-color: var(--text-interactive);

  --toast-background: #151C23;
  --toast-background--error: var(--red-20);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-border-radius: 6px;
  --toast-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  --toast-max-width: calc(var(--s1)*40);
  --toast-min-height: calc(var(--s1)*4.4);
  --toast-font-size: var(--font-size-base);
  --toast-gap: var(--s1);
  --toast-icon-height: var(--s2);
  --toast-icon-circle-fill: var(--icon-inverse);
  --toast-icon-circle-fill--error: var(--toast-icon-circle-fill);
  --toast-progress-bar-color: var(--neutral-70);
  --toast-progress-bar-color--error: var(--red-50);
  --toast-progress-bar-color--info: var(--blue-60);
  --toast-progress-bar-color--success: var(--green-60);
  --toast-progress-bar-color--warning: var(--orange-70);
  --toast-text-color: var(--white);
  --toast-text-color-error: var(--toast-text-color);
  --toast-button-color: var(--white);
  --toast-button-color--error: var(--white);
  --toast-button-color--info: var(--white);
  --toast-button-color--success: var(--white);
  --toast-button-color--warning: var(--white);

  --tooltip-background--default: #3E4046;
  --tooltip-background--error: var(--red-10);
  --tooltip-background--info: var(--blue-10);
  --tooltip-background--success: #021100;
  --tooltip-background--warning: #4c2b00;
  --tooltip-color--default: var(--text-inverse);
  --tooltip-shortcut-background: var(--neutral-40);
  --tooltip-shortcut-color:var(--text-inverse);

  --document-list-focus-color: var(--u-alpha-100);

  --primary-icon-filter: var(--svg-filter-black);

  --action-button-border-color: var(--neutral-85);
  --action-button-background: var(--neutral-97);
  --action-button-shadow: var(--neutral-85);
  --action-button-svg-color: var(--svg-filter-grey);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--white);
  --metadata-input-focus-background: var(--white);
  --metadata-footer-button-background: rgba(255, 255, 255, 0.25);
  --metadata-footer-color: var(--white);
  --notebook-highlight-color: #344255;

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(235, 237, 238, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-tertiary);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--icon-primary);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-secondary);
  --inbox-header-tab-active-count-text-color: var(--text-secondary);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-tertiary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: var(--icon-primary);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: var(--border-secondary);
  --table-of-contents-bar-active-color: #B5C3FB;

  --search-input-background: var(--u-alpha-200);

  --placeholder-fill-color: #A1AAC4;
  --placeholder-bg-1: url("/assets/placeholder-bg-light-1.7ea5e3de.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-light-2.2d35b895.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-light-3.930a7a17.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-light-4.f53e8fcb.png");

  --empty-feed-image: url("/assets/empty-state-feed-light.3b1ccfe5.png");

  /* Document share */
  --document-share-width-popovers-float-at: 700px;

  /* Radio group */
  --radio-group-indicator-width: 20px;
  --radio-group-indicator-background-color: var(--surface-primary);
  --radio-group-indicator-border-color: var(--neutral-60);
  --radio-group-indicator-active-color: var(--background-interactive);
  --radio-group-indicator-hover-color: var(--neutral-97);

  /* Badge */
  --badge-background-color: var(--green-90);
  --badge-text-color: var(--green-30);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--text-secondary);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--white);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(60, 64, 67, 0.2),
    0px 1.5px 4px 0px rgba(60, 64, 67, 0.1),
    0px 0px 0px 1px rgba(60, 64, 67, 0.05);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-80);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--white);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);
  --box-shadow-color: rgba(0, 0, 0, 0.15);


  --file-dropzone-background: rgba(0, 0, 0, 0.7);
  --file-dropzone-color: var(--white);

  --transcript-teleprompt-background: rgba(89,142,244, .3);
  --transcript-teleprompt-color: black;

  --onboarding-background-image: url("/onboarding/onboarding-background.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgba(19, 13, 40, 0.0199343), 0px 3.75998px 27.991px rgba(19, 13, 40, 0.0289288), 0px 2.01027px 14.9653px rgba(19, 13, 40, 0.0364916), 0px 1.12694px 8.38944px rgba(19, 13, 40, 0.0438708), 0px 0.598509px 4.45557px rgba(19, 13, 40, 0.052216), 0px 0.249053px 1.85406px rgba(19, 13, 40, 0.07);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04.webp");

  --checkbox-icon-color: var(--icon-inverse);
}
@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
:host > *,
:root {
    --default-blurred-button-background: #F2F3F4;
    --default-blurred-button: 0px;
}
  }
:host > * .high-contrast, :root .high-contrast {
    --highlight-background-color--normal: hsl(50deg 96.24% 67.14%);
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 75%);
    --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
    --highlight-background-color--active: hsl(50, 100%, 50%);

    --highlight-image-background-color--normal: hsl(50, 100%, 50%);
    --highlight-image-background-color--active: hsl(50, 100%, 50%);
    --selection-color: rgb(74, 153, 255);
    --text-primary: black;
  }
.theme--dark {

  /* FOUNDATIONS */

  /* Utility alpha classes */
  --u-alpha-100: rgba(110,120,131,0.10); /* neutral-50 equivalent */
  --u-alpha-200: rgba(110,120,131,0.15);
  --u-alpha-300: rgba(110,120,131,0.20);
  --u-alpha-400: rgba(110,120,131,0.25);
  --u-alpha-500: rgba(110,120,131,0.30);

  --u-alpha-blue-100: rgba(45,117,229,0.10); /* blue-50 equivalent */
  --u-alpha-blue-200: rgba(45,117,229,0.15);
  --u-alpha-blue-300: rgba(45,117,229,0.20);
  --u-alpha-blue-400: rgba(45,117,229,0.25);
  --u-alpha-blue-500: rgba(45,117,229,0.30);

  --u-alpha-red-100: rgba(216,64,58,0.10); /* red-50 equivalent */
  --u-alpha-red-200: rgba(216,64,58,0.15);
  --u-alpha-red-300: rgba(216,64,58,0.20);
  --u-alpha-red-400: rgba(216,64,58,0.25);
  --u-alpha-red-500: rgba(216,64,58,0.30);



  /* Text */
  --text-primary: var(--neutral-90);
  --text-secondary: var(--neutral-65);
  --text-tertiary: var(--neutral-50);
  --text-placeholder: var(--neutral-45);
  --text-disabled: var(--neutral-40);
  --text-inverse: var(--neutral-20); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-70);
  --text-backlink: var(--indigo-70);
  --text-error: var(--red-60);
  --text-success: var(--green-60);

  /* Icons */
  --icon-primary: var(--neutral-80);
  --icon-secondary: var(--neutral-70);
  --icon-tertiary: var(--neutral-45);
  --icon-placeholder: var(--neutral-45);
  --icon-disabled: var(--neutral-40);
  --icon-interactive: var(--blue-70);
  --icon-danger: var(--red-60);
  --icon-success: var(--green-60);
  --icon-inverse: var(--neutral-20);
  --icon-faint: var(--neutral-30);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--white);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Borders */
  --border-primary: var(--neutral-65);
  --border-secondary: var(--neutral-20);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-40);

   /* Backgrounds */
  --background-primary: var(--neutral-10);
  --background-secondary: var(--neutral-15);
  --background-tertiary: var(--neutral-20);
  --background-inverse: var(--neutral-90);
  --background-canvas: var(--neutral-07);
  --background-elevated: var(--neutral-20);
  --background-backdrop: rgba(0,0,0,0.4);
  --background-dragging: rgba(40, 49, 59, 0.7);
  --background-interactive: var(--blue-70);
  --background-error: var(--red-10);
  --background-bulk-actions-header: var(--blue-30);

  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1.5px 4px rgba(0, 0, 0, 0.1), 0px 3px 10px rgba(0, 0, 0, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 3px 5px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.25);
  --shadow-400: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 5px 12px rgba(0, 0, 0, 0.1), 0px 12px 32px rgba(0, 0, 0, 0.2), 0px 20px 96px rgba(0, 0, 0, 0.4);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-20);
  --reading-progress-max-background: var(--neutral-35);
  --reading-progress-point: var(--neutral-90);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background:rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: rgba(124, 174, 236, 1);
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.2);
  --text-button-accent-subtle-disabled-text: rgba(84, 96, 108, 1);

  --btn-secondary: rgba(62, 72, 83, 0.7); /* used for blur buttons? */

  /* blue button */
  --background-button-blue: var(--blue-60);
  --background-button-blue-hover: var(--blue-70);
  --background-button-blue-active: var(--blue-80);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--black);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-border: rgba(0,0,0,0);
  --document-card-border-divider: rgba(0,0,0,.2);
  --document-card-height: var(--background-elevated);
  --document-card-background: var(--neutral-15);
  --document-card-background--hover: var(--neutral-20);
  --document-card-book-image-container-background: var(--background-secondary);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.43), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.5), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.3715), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.3485), inset 0px 1px 0px rgba(255, 255, 255, 0.2);

  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.00), 0px 1.5px 4px rgba(0, 0, 0, 0.03), 0px 2px 8px rgba(0, 0, 0, .3);

  /* Link card */
  --link-card-border--hover: var(--neutral-40);

  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--neutral-07);
  --hide-sidebar-button-background: #445064;
  --sidebar-button-icon-color: var(--inbox-icon-color);
  --sidebar-inbox-nav-background: var(--neutral-20);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(62, 72, 83, 0) 40%, rgba(62, 72, 83, .5) 50%, rgba(62, 72, 83, 0) 60% ) var(--u-alpha-200);
  --sidebar-logo-color: #fff;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-80);
  --image-placeholder-shadow-color: var(--black);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--neutral-25);

  /* Popovers */
  --edit-tags-form-focused-option-background: var(--neutral-25);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-30);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-70);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: var(--background-elevated);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-50);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow: rgba(40, 40, 40, 0.75);

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-15);
  --cmd-palette-cmd-container: var(--neutral-15);
  --cmd-palette-section-title: var(--neutral-15);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-40);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.16) inset;
  --cmd-palette-context-item-background:var(--background-primary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: #B6B9BF;

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(31, 39, 47, 0.9);
  --wisereads-modal-background: var(--background-secondary);
  --wisereads-modal-card-background: var(--background-tertiary);
  --wisereads-modal-card-border-hover: var(--border-secondary-alpha);
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.23);

  /* Inbox */

  --inbox-sidebar-background: #12171C;
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(30%) saturate(0%);
  --inbox-zero-foreground-image-filter:
    brightness(300%)
    opacity(50%)
    contrast(30%)
    saturate(100%);

  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(200%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(70%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-white);

  --document-list-box-shadow: inset -2px 53px 16px -54px var(--black);
  --inbox-container-drop-shadow:  0px 8px 20px rgba(0, 0, 0, 0.08), 0px -1px 2px rgba(0, 0, 0, 0.08);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color:var(--neutral-40);
  --scrollbar-color-hover: var(--neutral-50);

  --separator-color: rgba(255, 255, 255, 0.1);

  --toast-background: var(--white);
  --toast-background--error: var(--red-90);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-button-color: var(--text-inverse);
  --toast-button-color--error: var(--text-error);
  --toast-button-color--info: var(--toast-button-color);
  --toast-button-color--success: var(--toast-button-color);
  --toast-button-color--warning: var(--toast-button-color);
  --toast-box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1), 0 2px 5px 0 rgba(255, 255, 255, 0.05);
  --toast-icon-circle-fill--error: var(--icon-danger);
  --toast-text-color: var(--text-inverse);
  --toast-text-color--error: var(--red-20);

  --tooltip-background--default: var(--white);
  --tooltip-color--default: #202226;
  --tooltip-shortcut-background: #ECECED;
  --tooltip-shortcut-color: rgba(32, 34, 38, 0.64);

  --document-list-focus-color: var(--u-alpha-100);


  --primary-icon-filter: var(--svg-filter-white);
  --action-button-border-color: var(--neutral-15);
  --action-button-background: var(--neutral-10);
  --action-button-shadow: var(--black);
  --action-button-svg-color: var(--svg-filter-white);


  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-00);

  /* Find in document matches DARK MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.42);
  --find-in-document-match-active: rgba(22, 148, 245, 0.3);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--background-secondary);
  --metadata-input-focus-background: var(--background-primary);
  --metadata-footer-button-background: rgba(43, 46, 55, 0.05);
  --metadata-footer-color: var(--background-canvas);
  --notebook-highlight-color: var(--black);

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(62, 72, 83, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-grey-medium);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--white);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-grey-lighter);
  --inbox-header-tab-active-count-text-color: var(--text-grey-darker);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-secondary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: rgba(255, 255, 255, 0.8);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: #464851;
  --table-of-contents-bar-active-color: #4E94FD;

  --search-input-background: var(--u-alpha-200);

  --transcript-teleprompt-background: rgba(89,142,244, .4);
  --transcript-teleprompt-color: white;

  --placeholder-fill-color: #7F8494;
  --placeholder-bg-1: url("/assets/placeholder-bg-dark-1.6e58967f.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-dark-2.9f7c66c5.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-dark-3.3fb3a36d.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-dark-4.1b679a5e.png");

  --empty-feed-image: url("/assets/empty-state-feed-dark.14291346.png");

  /* Radio group */

  --radio-group-indicator-hover-color: var(--neutral-20);

  /* Badge */
  --badge-background-color: var(--green-30);
  --badge-text-color: var(--green-90);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--neutral-70);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--neutral-10);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(0, 0, 0, 0.3),
    0px 1.5px 4px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-30);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--neutral-10);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey-lighter: var(--neutral-80);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);

  --onboarding-background-image: url("/onboarding/onboarding-background-dark.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgb(19 13 40 / 20%), 0px 3.75998px 27.991px rgb(19 13 40 / 12%), 0px 2.01027px 14.9653px rgb(19 13 40 / 4%), 0px 1.12694px 8.38944px rgb(9 6 18 / 19%), 0px 0.598509px 4.45557px rgb(7 7 7 / 40%), 0px 0.249053px 1.85406px rgb(6 4 12 / 18%);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01-dark.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02-dark.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03-dark.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04-dark.webp");

  --checkbox-icon-color: var(--neutral-00);
}
@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
.theme--dark {
    --default-blurred-button-background: #2B323A;
    --default-blurred-button: 0px;
}
  }
.theme--dark.high-contrast {
  --text-primary: white;
}
/* Component variables (NO COLORS) */
:host > *,
:root {
  --animation-duration--imply-interactivity: 0;
  --animation-duration--move: 0;
  --animation-duration--reveal: 0;
  --content-gutter: var(--s3);
  --reading-editable-line-length: 648px;
  --document-list-item-height: calc(var(--f1) * 11.3);
  --document-list-item-height_js: 113px; /* JS can't parse the above easily */
  --document-list-item-horizontal-padding: calc(var(--s1) * 1.7);
  --document-list-image-height: 62px;
  --document-list-image-width: 62px;
  --document-list-padding-top: 8px;
  --focus-indicator-width: 3px;
  --inbox-header-height: 65px;
  --inbox-header-height_js: 65px; /* JS can't parse the above easily */
  --inbox-sidebar-width: 240px;
  --person-card-image-size: 40px;
  --sidebar-padding-vertical: 0.5rem;
  --sidebar-nav-height: 64px;
  --sidebar-padding-horizontal: 24px;
  --sidebar-padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal);

  --popover-max-width: 305px;
  --popover-background: var(--background-elevated);
  --popover-z-index: 100;
  --popover-focused-z-index: 101;

  --sidebars-max-width: 296px;
  --progress-bar-large-height: 3px;

  --table-of-contents-font-size: 0.875rem;
  --table-of-contents-bar-margin-right: 16px;
  --table-of-contents-bar-height: 4px;
  --table-of-contents-max-bar-width: 32px;
  --table-of-contents-width-diff: 8px;
  --scrollbar-border-radius: 12px;
  --scrollbar-thickness: 14px;
  --status-dot-size: 6px;
  --appearance-panel-width: 292px;
  --feed-icon-in-palette: 16px;
  --action-button-border-radius: 31px;
  --theme-transition-time: 0s;
  --panels-transition-time: 0.2s;

  --tts-player-height: 96px;
  --js__tts-player-current-height: 0; /* Updated by JS */
  --safe100vh: calc(100vh - var(--js__tts-player-current-height));
  --safeBottom0: calc(0px + var(--js__tts-player-current-height));
}
@media (prefers-reduced-motion: no-preference) {
:host > *,
:root {
    --animation-duration--imply-interactivity: 0.15s;
    --animation-duration--move: 0.25s;
    --animation-duration--reveal: 0.15s;
}
  }
:host > * .high-contrast, :root .high-contrast {
    --highlight-text-color: black;
  }
/*
  Pseudo-elements are not meant to react to pointer events but we found an issue in Firefox which was
  fixed by adding `pointer-events: none`, so let's make sure it's done for all.
*/
:scope::before,:scope::after,
  ::before,
  ::after {
    pointer-events: none !important;
  }
/* Reset html elements. */
.document-content div, .document-content span, .document-content applet, .document-content object, .document-content iframe, .document-content h1, .document-content h2, .document-content h3, .document-content h4, .document-content h5, .document-content h6, .document-content p, .document-content blockquote, .document-content pre, .document-content a, .document-content abbr, .document-content acronym, .document-content address, .document-content big, .document-content cite, .document-content code, .document-content del, .document-content dfn, .document-content em, .document-content img, .document-content ins, .document-content kbd, .document-content q, .document-content s, .document-content samp, .document-content small, .document-content strike, .document-content strong, .document-content tt, .document-content var, .document-content b, .document-content u, .document-content i, .document-content center, .document-content dl, .document-content dt, .document-content dd, .document-content ol, .document-content ul, .document-content li, .document-content fieldset, .document-content form, .document-content label, .document-content legend, .document-content table, .document-content caption, .document-content tbody, .document-content tfoot, .document-content thead, .document-content tr, .document-content th, .document-content td, .document-content article, .document-content aside, .document-content canvas, .document-content details, .document-content embed, .document-content figure, .document-content figcaption, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content output, .document-content ruby, .document-content section, .document-content summary, .document-content time, .document-content mark, .document-content audio, .document-content video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
.document-content style {
    display: none;
    user-select: none;
    -webkit-user-select: none;
  }
/* HTML5 display-role reset for older browsers */
.document-content article, .document-content aside, .document-content details, .document-content figcaption, .document-content figure, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content section {
    display: block;
  }
.document-content ol, .document-content ul {
    list-style: none;
  }
.document-content blockquote, .document-content q {
    quotes: none;
  }
.document-content blockquote:before, .document-content blockquote:after, .document-content q:before, .document-content q:after {
    content: '';
    content: none;
  }
.document-content table {
    border-collapse: collapse;
    border-spacing: 0;
  }
.document-content span[data-rw-start] {
    cursor: pointer;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
  }
.document-content span[data-rw-start]:hover {
      border-radius: 4px;
      background: var(--u-alpha-400);
      color: var(--transcript-teleprompt-color);
    }
.document-content span[data-rw-start]:has(.rw-highlight:hover) {
      background: none;
      color: inherit;
    }
@media (max-width: 768px) {
      .document-content span.touchstart[data-rw-start] {
        border-radius: 4px;
        background: var(--u-alpha-400) !important;
        color: var(--transcript-teleprompt-color) !important;
      }

      .document-content span[data-rw-start]:hover {
        background: none;
        color: inherit;
      }
    }
/* End of Reset */
:root #document-header {
  --reading-text-primary: #0C1117;
  --reading-border: #F0F1F2;
  --reading-icon: #606C79;
}
.theme--dark #document-header {
  --reading-text-primary: #F0F1F2;
  --reading-border: rgba(92, 105, 119, 0.3);
  --reading-icon: #F0F1F2;
}
.theme--dark .document-content  img, .theme--dark .document-content figure img {
  opacity: .7;
  transition: opacity 500ms;
}
:root .document-content { /* Light theme */

  /* Reading colours */
  --reading-text-title: var(--black);
  --reading-text-primary: var(--text-primary);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-inverse);
  --reading-text-link: 13 30 142;
  --reading-text-link-highlight: 0 0 0;
  --reading-text-primary-link-highlight: var(--black);
  --reading-text-code: var(--red-40);

  /* Surface colors */
  --reading-surface-primary-inverse: #1E272F;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.06);
  --reading-surface-code: #333C46;

  /* Border colors */
  --reading-border-secondary: rgba(40, 49, 59, 0.12);
  --text-selection-background-color: rgba(70, 147, 254, 0.18);
}
.theme--dark .document-content { /* Dark theme */
  --reading-text-title: var(--white);
  --reading-text-primary: var(--neutral-80);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-primary);
  --reading-text-link: 174 200 241;
  --reading-text-link-highlight: 255 255 255;
  --reading-text-primary-link-highlight: var(--neutral-100);
  --reading-text-code: var(--orange-80);

  /* Surface colors */
  --reading-surface-primary-inverse: #10161D;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.15);
  --reading-surface-code: #E2E8F0;

  /* Border colors */
  --reading-border-secondary: rgba(92, 105, 119, 0.3);
}
.theme--dark.high-contrast .document-content {
  --reading-text-primary: var(--text-primary);
}
.theme--sepia .document-content {
  --reading-text-title: #3C2D23;
  --reading-text-primary: #3C2D23;
  --reading-text-secondary: #7A6755;
}
:root {
  --reading-editable-font-size: 20;
  --reading-editable-text-justify: start;
  --reading-editable-line-height: 1.6; /* should land on 4px increments. 20, 24, 28, 32, 36 */
  --reading-editable-font-family: "Source Serif VF", Georgia, Serif;
  /* auto generate */

  --reading-scale: 1.2;
  --reading-root-size: 16; /* This is to replicate the browser base size for math purposes */

  --reading-base-fs: calc(var(--reading-editable-font-size) / var(--reading-root-size)); /* fs is unitless and is only used for calculations*/
  --reading-base-font-size: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-base-line-height: var(--reading-editable-line-height);
  --reading-base-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);

  /* Caption = table divided by scale */
  --reading-caption-fs: calc(var(--reading-table-fs) / var(--reading-scale)  / var(--reading-scale));
  --reading-caption-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-caption-line-height: var(--reading-editable-line-height);
  --reading-caption-margin: calc(var(--reading-editable-line-height) / calc(var(--reading-root-size) * var(--reading-p-fs)) * 1em);

  /* Table = base size divided by scale */
  --reading-table-fs: calc(var(--reading-base-fs) / var(--reading-scale) );
  --reading-table-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-table-line-height: var(--reading-editable-line-height);
  --reading-table-margin: calc(var(--reading-editable-font-size)*.75);

  /* P = base size */
  --reading-p-fs: calc(var(--reading-base-fs));
  --reading-p-font-size: calc(var(--reading-base-fs) * 1rem);
  --reading-p-line-height: var(--reading-editable-line-height);
  --reading-p-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-p-margin-v: calc( var(--reading-editable-font-size) / var(--reading-root-size) * calc(var(--reading-editable-line-height) - 0.5) *1rem );


  /* H3 = base size x scale */
  --reading-h3-fs: var(--reading-p-fs);
  --reading-h3-font-size: calc(var(--reading-p-fs) * 1rem);
  --reading-h3-line-height: var(--reading-editable-line-height);
  --reading-h3-margin: calc(var(--reading-h3-line-height) * 1em);

  /* H2 = H3 size x scale */
  --reading-h2-fs: calc(var(--reading-h3-fs) * var(--reading-scale));
  --reading-h2-font-size: calc(var(--reading-h3-fs) * var(--reading-scale) * 1rem);
  --reading-h2-line-height: calc(var(--reading-h3-line-height) * .925);

  /* H1 = H2 size x scale */
  --reading-h1-fs: calc(var(--reading-h2-fs) * var(--reading-scale));
  --reading-h1-font-size: calc(var(--reading-h2-fs) * var(--reading-scale) * 1rem);
  --reading-h1-line-height: calc(var(--reading-h2-line-height) * .925);
  --reading-h1-margin: calc(var(--reading-h1-line-height) * 1em);


  /* Typefaces */
  --reading-font-body: var(--reading-editable-font-family);
  --reading-font-title: var(--reading-editable-font-family);
  --reading-font-caption: "Inter VF", sans-serif;

  --reading-font-monospace: "Roboto Mono VF","SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.is-reader-mobile-app .document-header-title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 32px;
  }
.is-reader-mobile-app .document-header-domain {
    width: 100%;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.is-reader-mobile-app .header-top-row {
    margin-bottom: var(--spacer-4);
  }
.is-reader-mobile-app hr {
    color: var(--reading-border);
  }
.is-reader-mobile-app .summary-top-line {
    height: 1px;
    background-color: var(--reading-border);
    margin: 18px auto;
    transition: width 0.3s ease-in-out;
    width: 0;
  }
.is-reader-mobile-app .summary-top-line-expanded {
    width: 32px;
  }
.is-reader-mobile-app .summary-section {
    margin-top: 12px;
  }
.is-reader-mobile-app .document-header-mobile-separator {
    display: flex;
    align-items: center;
    justify-content: center;
  }
.is-reader-mobile-app .document-header-mobile-separator::before,
    .is-reader-mobile-app .document-header-mobile-separator::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid var(--reading-border);
    }
.is-reader-mobile-app .document-header-mobile-separator .toggle-icon {
      margin: 8px 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--reading-icon);
      background-color: var(--reading-border);
      border-radius: 50%;
      transition: transform 0.3s ease-in-out;
    }
.is-reader-mobile-app .document-header-mobile-separator .toggle-icon-expanded {
      transform: rotate(180deg);
    }
.is-reader-mobile-app .document-header-metadata-row {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
  }
.is-reader-mobile-app .document-header-metadata-row span {
      font-size: 13px;
      color: var(--text-secondary);
    }
.is-reader-mobile-app .document-header-metadata-row .metadata-author {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 0 1 auto;
    }
.is-reader-mobile-app .document-header-tags {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
#document-header {
  margin-bottom: 0;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--ui-font);
}
#document-header h1 {
    margin: 0;
    font-size: 40px;
    line-height: 46px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--reading-text-primary);
    font-family: var(--reading-editable-font-family);
    font-feature-settings: "onum" 1;
    font-variation-settings: "opsz" 41; /* optical size needs to be set close to font-size but it can't be the exact same - Safari bug */
    text-rendering: optimizeLegibility;
    text-wrap: balance;
  }
@media (max-width: 768px) {
#document-header {
    margin-bottom: -6px;
}
    #document-header h1 {
      font-size: 32px;
      line-height: 36.8px;
      letter-spacing: -0.015em;
    }

  }
#document-header .header-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--spacer-5);
  }
#document-header .header-source-container {
    flex: 1;
  }
#document-header .document-header-domain {
    display: flex;
    overflow: hidden;

    gap: 12px;
  }
#document-header .document-header-domain span {
      color: var(--text-secondary);
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100%;
      text-align: center;
    }
#document-header .document-header-domain .document-header-domain-favicon, #document-header .document-header-domain svg {
      background-size: cover;
      height: 16px;
      width: 16px;
      fill: var(--icon-secondary);
    }
#document-header hr {
    border: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: var(--border-secondary-alpha);
    margin: 0;
    margin-top: 20px;
  }
@media (max-width: 768px) {
#document-header hr {
      margin-top: 16px;
  }
    }
#document-header .document-header-metadata-row {
    word-break: break-word;
    overflow: hidden;
  }
#document-header .document-header-metadata-row span {
      font-weight: 400;
      font-size: 14px;
    }
#document-header .document-header-metadata-row .document-header-author-content {
      white-space: nowrap;
      margin-right: 8px;
      color: var(--text-secondary);
      /* The true value for line-height should be 20px, but because we want the tags to flow with the author text,
          the tags and author are effectively in one long span that flows properly around the date span which is fixed to the right

        57 = 17px true size of text + 20px * 2 for 20px margin above and below

        if I am correct, the 20px line-height makes no effect anymore, effectively we are using line-height
        when we should use margins, but sadly we cannot pull that off because you cannot create margins between
        two lines of text in one span, thats the job of line height
       */
      line-height: 57px;
    }
@media (max-width: 768px) {
#document-header .document-header-metadata-row .document-header-author-content {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }
#document-header .document-header-metadata-row .document-header-author-content .document-header-author-text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
#document-header .document-header-metadata-row .document-header-published-date {
      float: right;
      white-space: nowrap;
      color: var(--text-secondary);
      /* See above as to why this is 57px */
      line-height: 57px;
    }
@media (max-width: 768px) {
#document-header .document-header-metadata-row .document-header-published-date {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }
#document-header .document-header-metadata-row .document-header-separator {
      display: inline-flex;
      background: var(--border-primary);
      width: 4px;
      height: 4px;
      min-width: 4px;
      min-height: 4px;
      border-radius: 100%;
      margin: 0 6px;
      margin-bottom: 3px;
    }
#document-header .document-header-tags {
    display: inline-flex;
    flex-wrap: wrap;
  }
#document-header .document-header-tags a {
      margin-right: 4px;
      margin-bottom: 4px;
    }
#document-header .summary-container-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
  }
#document-header .summary-container-expanded {
    grid-template-rows: 1fr;
  }
#document-header .summary-container {
    overflow: hidden;
  }
#document-header .summary-container .summary-content {
      display: flex;
      flex-direction: column;
      margin: 16px 0;
      gap: 8px;
    }
#document-header .summary-container .summary-content .summary-text {
        white-space: pre-line;
        color: var(--reading-text-primary);
        margin: 0;
        font-size: 15px;
        line-height: 20px;
        font-weight: 400;
      }
#document-header .summary-container .summary-content .summary-attribution {
        margin: 0;
        color: var(--text-tertiary);
        font-size: 13px;
        line-height: 18px;
      }
#document-header rw-spacer {
    display: block;
    width: 100%;
  }
#document-header rw-spacer:not([size]) {
    height: var(--spacer-4);
  }
#document-header rw-spacer[size="1"] {
    height: var(--spacer-1);
  }
#document-header rw-spacer[size="2"] {
    height: var(--spacer-2);
  }
#document-header rw-spacer[size="3"] {
    height: var(--spacer-3);
  }
#document-header rw-spacer[size="4"] {
    height: var(--spacer-4);
  }
#document-header rw-spacer[size="5"] {
    height: var(--spacer-5);
  }
#document-header rw-spacer[size="6"] {
    height: var(--spacer-6);
  }
#document-header rw-spacer[size="7"] {
    height: var(--spacer-7);
  }
#document-header rw-spacer[size="8"] {
    height: var(--spacer-8);
  }
.document-content {
  box-sizing: border-box;
  padding: 0 var(--content-gutter) 0; /* needs to be adjusted */
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  font-variation-settings: "opsz" calc(var(--reading-editable-font-size) + 1); /* optical size needs to be set close to font-size but it
   can't be the exact same - Safari bug */
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;

  /* full justification
  text-align: justify; */

  /* hyphenation */
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 3 3;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;

}
@supports (font-kerning: normal) and (font-variant ligatures: common-ligatures contextual) {
.document-content {
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;

}
  }
/* This is required for emulating selection but it breaks the content focus indicator on web */
.document-content.rw-mobile-web-view,
  .document-content.is-emulating-selection {
    position: relative;
  }
.document-content p {
    margin-bottom: var(--reading-p-margin);
    margin-top: var(--reading-p-margin);
  }
.document-content p.rw-hide {
      display: none;
    }
.document-content h1 {
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.019em;
    font-variation-settings: "opsz" calc(var(--reading-h1-fs) * 16 + 1 );
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top: 96px;
  }
.document-content h2 {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h2-fs) * 16 + 1);
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }
.document-content h3 {
    font-weight: 600;
    margin-top: calc(var(--reading-base-margin) * 1.5);
    margin-bottom: calc(var(--reading-base-margin) * .5);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h3-fs) * 16 + 1);
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }
.document-content h4,
  .document-content h5,
  .document-content h6 {
    font-weight: 600;
    margin-top: var(--reading-p-margin);
    margin-bottom: calc(var(--reading-p-margin) * 0.5);
    scroll-margin-top:96px;
  }
.document-content h2 + * {
    margin-top: 0;
  }
.document-content h3 + * {
    margin-top: 0;
  }
.document-content h4 + * {
    margin-top: 0;
  }
.document-content h1 code,
  .document-content h2 code,
  .document-content h3 code,
  .document-content h4 code,
  .document-content h5 code,
  .document-content h6 code {
    font-size: .9em;
  }
.document-content h4 code {
    font-size: .9em;
    font-weight: 600;
  }
.document-content em, .document-content i {
    font-style: italic;
  }
.document-content strong, .document-content b {
    font-weight: 600;
  }
.document-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
.document-content hr {
    border-top-width: 1px;
    border-top-style: solid;
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: calc(var(--reading-base-margin) * 3);
    border-bottom: none;
  }
.document-content hr + * {
    margin-top: 0;
  }
.document-content :last-child {
    margin-bottom: 0;
  }
.document-content sub, .document-content sup {
    line-height: 0;
  }
/* -- Lists --*/
.document-content ol {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    list-style-type: decimal;
  }
.document-content ol li {
      margin-top: .5rem;
      margin-bottom: .5rem;
    }
.document-content ol > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }
.document-content ol > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }
.document-content ol > li > *:first-child {
    margin-top: calc(var(--reading-base-margin));
  }
.document-content ol > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }
.document-content ul {
    font-family: var(--reading-font-body);
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    font-size: var(--reading-base-font-size);
    list-style-type: disc;
  }
.document-content ul li {
      margin-top: calc(var(--reading-base-margin) / 2);
      margin-bottom: calc(var(--reading-base-margin) / 2);
      font-size: var(--reading-base-font-size);
    }
.document-content ul > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }
.document-content ul > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }
.document-content ul > li > *:first-child {
    margin-top: calc(var(--reading-base-margin) / 2);
  }
.document-content ul > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }
.document-content ul ul,
  .document-content ul ol,
  .document-content ol ul,
  .document-content ol ol {
    margin-top: .5em;
    margin-bottom: .5em;
  }
/*  description list */
.document-content dt {
    margin-top: var(--reading-p-margin);
  }
/* Tables */
.document-content table {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 0; /* changes back to lining figures */
  }
.document-content table caption {
    margin-top: var(--reading-base-margin);
    margin-bottom: calc(var(--reading-base-margin) * 1em);
  }
.document-content thead {
    font-weight: 600;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--reading-border-secondary);
  }
.document-content thead th {
    vertical-align: bottom;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
  }
.document-content tbody tr {
    border-bottom-width: 1px;
    border-style: solid;
  }
.document-content tbody tr:last-child {
    border-bottom-width: 0;
  }
.document-content tbody td {
    vertical-align: top;
    padding-top: 0.75em;
    padding-right: 0.5em;
    padding-bottom: 0.75em;
    padding-left: 0.5em;
  }
.document-content tfoot {
    font-weight: 600;
    border-top-width: 1px;
    border-top-style: solid;
  }
.document-content tfoot th {
    vertical-align: top;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
  }
.document-content thead th:first-child {
    padding-left: 0;
  }
.document-content tfoot th:first-child {
    padding-left: 0;
  }
.document-content tbody td:first-child {
    padding-left: 0;
  }
.document-content tbody td:last-child {
    padding-right: 0;
  }
/* Fix for newsletters that use tables for layout */
.document-content table table,
  .document-content table table tr,
  .document-content table table td,
  .document-content table table figure {
    margin: 0;
    padding: 0;
  }
.document-content table table,
  .document-content table table tr,
  .document-content table table td {
    border: none;
  }
/* Figure and Img */
.document-content img:not(p img, li img, img.allow-image-styles) {
    margin: auto;
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    border-radius: .25rem;
  }
.document-content video {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    margin-left: auto;
    margin-right: auto;
  }
.document-content embed {
    display: none;
  }
.document-content div.rw-embed-wrapper {
    position: relative;
    padding-bottom: 18.14rem;  /* for 16:9 aspect ratio */
  }
.document-content div.rw-embed-wrapper embed {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
    }
.document-content div.rw-soundcloud-wrapper {
    padding-bottom: 9rem;
  }
.document-content div.rw-soundcloud-wrapper embed {
      height: 166px;
    }
.document-content figure {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: calc(var(--reading-base-margin) * 2);
    line-height: 1.33336;
    display: block;
  }
.document-content svg:empty {
    display: none;
  }
.document-content figure figcaption {
    line-height: 1.5;
    margin-top: calc(var(--reading-base-margin) / 2);
  }
.document-content figure:not(li figure) img + figcaption {
    margin-top: -16px;
  }
.document-content figure > * {
    margin-top: 0;
    margin-bottom: 0;
  }
/* Blockquotes */
.document-content blockquote {
    font-style: italic;
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-blockquote);
    margin: 0;
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    hanging-punctuation: first;
    padding: 0 var(--reading-base-margin);
  }
/* Make sure nested images are not block */
.document-content blockquote img, .document-content figure img, .document-content ol img, .document-content p img, .document-content table img, .document-content ul img {
      display: initial;
      max-width: 100%!important;
    }
.document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
    margin-top: 200px;
    padding-top: 0;
    display: block;
    break-before: column;
  }
.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
      text-decoration: none;
    }
.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
      content: "***";
      position: relative;
      width: 100%;
      display: block;
      top: -100px;
      text-align: center;
      font-size: 48px;
      letter-spacing: 1em;
      font-weight: 200;
      color: var(--text-tertiary);
    }
/* highlights */
/* This code is repeated in extension/source/injection/index.css */
.document-content .rw-image-highlight {
    border-radius: 2px;
    outline: 12px solid var(--highlight-image-background-color--normal);
  }
.document-content .rw-image-highlight.rw-image-highlight--active {
    outline-color: var(--highlight-image-background-color--active);
  }
.document-content pre .rw-highlight {
    color: var(--highlight-text-pre-color) !important;
  }
/* All of the mandatory styles that cannot be overwritten by epub styles */
/* the specific classes make sure that the rules below win out on specificity */
.document-content,
  .document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10 {
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-primary);
    font-family: var(--reading-font-body);
    line-height: var(--reading-base-line-height);
    font-weight: 400;
  }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) * {
      min-height: auto;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) nav {
      display: block;
      visibility: visible;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .auto-height {
      height: auto !important;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 99999999;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
        position: absolute;
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
      background-color: var(--text-selection-background-color) !important;
    }
:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }
:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }
:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
        :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
          color: var(--highlight-text-color) !important;
        }
.is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10)::selection,
      .is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection {
        background-color: transparent !important;
        color: inherit !important;
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p:not(figcaption p) {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p.rw-hide:not(figcaption p) {
        display: none;
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) span {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h1 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h1-font-size);
      line-height: var(--reading-h1-line-height);
      color: var(--reading-text-title);
      scroll-margin-top: 96px;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h2 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h2-font-size);
      line-height: var(--reading-h2-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h3 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h3-font-size);
      line-height: var(--reading-h3-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h4,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h5,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h6 {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a {
      text-decoration-color: rgb(var(--reading-text-link) / 50%);
      color: rgb(var(--reading-text-link));
      text-align: var(--reading-editable-text-justify);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a:has(+ .rw-highlight) {
      text-decoration: none !important;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight {
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 50%);
      color: var(--reading-text-primary-link-highlight) !important;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 100%);
      color: var(--reading-text-primary-link-highlight) !important;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) hr {
      border-color: var(--reading-border-secondary);
    }
/* -- Lists --*/
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol li {
        font-size: var(--reading-base-font-size);
        text-align: var(--reading-editable-text-justify);
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul li {
        font-size: var(--reading-base-font-size);
      }
/* Tables */
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table {
      font-family: var(--reading-font-caption);
      font-size: var(--reading-table-font-size);
      text-align: var(--reading-editable-text-justify);
      line-height: var(--reading-table-line-height);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) thead {
      color: var(--reading-text-primary);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tbody tr {
      border-bottom-color: var(--reading-border-secondary);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tfoot {
      color: var(--reading-text-primary);
      border-top-color: var(--reading-border-secondary);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table table {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
    }
/* Figure and Img */
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) img:not(p img, li img, img.allow-image-styles, figcaption img) {
      display: block; /* Allows them to be highlighted independently. This is undone for nested images */
      max-width: 100% !important;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) svg:has(image) {
      max-width: 100% !important;
      height: auto;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) video {
      display: block;
      max-width: 100% !important;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure {
      font-size: var(--reading-caption-font-size);
      font-family: var(--reading-font-caption);
      text-align: var(--reading-editable-text-justify);
      color: var(--reading-text-secondary);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption {
      color: var(--reading-text-secondary);
      font-family: var(--reading-font-caption);
      font-size: var(--reading-caption-font-size);
      text-align: var(--reading-editable-text-justify);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption img {
        display: inline;
        margin-top: 0;
        margin-bottom: 0;
      }
/* Code blocks */
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) code {
      color: var(--reading-text-code);
      font-size: .8em;
      font-family: var(--reading-font-monospace);
      word-wrap: break-word;
      -webkit-box-decoration-break: clone;
              box-decoration-break: clone;
      background-color: var(--reading-surface-tertiary);
      border-radius: .25rem;
      line-height: 1.1em;
      border: 1px solid var(--reading-border-secondary);
      padding: 0 .2rem;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a code {
      color: var(--reading-text-link);
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      color: var(--reading-text-primary-inverse);
      background-color: var(--reading-surface-primary-inverse);
      font-family: var(--reading-font-monospace);
      overflow-x: auto;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      line-height: var(--reading-base-line-height);
      margin-top: calc(var(--reading-base-margin) * 2);
      margin-bottom: calc(var(--reading-base-margin) * 2);
      border-radius: .25rem;
      padding-top: var(--reading-base-margin);
      padding-right: var(--reading-base-margin);
      padding-bottom: var(--reading-base-margin);
      padding-left: var(--reading-base-margin);
      white-space: pre-wrap;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      background-color: transparent;
      font-family: var(--reading-font-monospace);
      border-width: 0;
      border-radius: 0;
      padding: 0;
      -webkit-overflow-scrolling: touch;
      font-weight: 400;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      color: inherit;
      line-height: inherit;
      min-width: 100px;
      margin: 0;
    }
:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.2);
        color: var(--blue-70);
      }
:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a:hover {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.5);
        color: var(--blue-80);
      }
:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) p {
        display: inline;
        /*
          We sometimes end up with <p>s instead of our code tags.
          Prevent them from breaking everything.
        */
      }
/* Blockquotes */
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) blockquote {
      font-size: var(--reading-p-font-size);
      color: var(--reading-text-blockquote);
      text-align: var(--reading-editable-text-justify);
    }
/* Tweet styles need to override */
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      max-width: 550px;
      margin: var(--reading-base-margin) auto;
      font-style: initial;
    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        line-height: 16px;

      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span > a {
          display: flex;
          color: var(--text-secondary);
          gap: 4px;
          line-height: 16px;
          text-decoration: none;
          margin-bottom: 8px;
          width: fit-content;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header {
        display: flex;
        gap: 8px;
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header img {
          aspect-ratio: 1 / 1;
          min-height: 48px;
          max-height: 48px!important;
          width: 48px;
          height: auto;
          margin: unset;
          border-radius: 9999px;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header a {
          text-decoration: none;
          font-size: 16px;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div {
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) {
          font-size: 14px;
          flex: 1;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child {
            font-weight: 600;
            line-height: 18px;
            padding-top: 6px;
          }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child a {
              color: var(--reading-text-primary);
            }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) {
            line-height: 18px;
            color: var(--text-secondary);
          }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) a {
              color: var(--text-secondary)
            }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header svg * {
            fill: var(--icon-tertiary);
          }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > :first-child {
          margin-top: 18px;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          display: block;
          margin-top: 8px;
          margin-bottom: -6px;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type a {
            color: var(--text-interactive);
            text-decoration: none;
          }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main p {
          line-height: var(--reading-editable-line-height);
          margin-top: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          margin-bottom: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          font-size: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          letter-spacing: -.01em;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main video {
          border-radius: 4px;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer {
        margin-top: -4px;
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer span a {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a {
          text-decoration: none;
          color: var(--text-secondary);
        }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      max-width: 550px;
      padding: 20px;
      width: fit-content;
      margin: var(--reading-base-margin) auto;
      font-style: initial;

    }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
        float: left;
        width: 96px !important;
        height: 96px !important;
        object-fit: cover;
        object-position: center;
        margin: 0 20px 0 0;
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed div {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed * {
        font-size: 16px;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        /*margin: 10px;*/
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed div.rw-embed-title {
        font-size: var(--reading-base-font-size);
      }
@media (max-width: 768px) {
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
        display: block;

    }
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
          float: none;
          display: block;
          margin: 0 auto 20px auto;
        }
      }
:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed:has(img) {
      min-height: 136px;
    }
/* end of ID wrapper */
/* PDF Specific Class code */
#readwise-reader-root .pageContainer {
    box-shadow: var(--shadow-100);
    position: relative;
  }
#readwise-reader-root .pageContainer canvas {
    }
#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight {
      position: absolute;
      opacity: 0.2;
      transition: opacity 0.3s ease !important;
      background: none !important;
      z-index: 100;
    }
#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight .rw-highlight-icon-wrapper {
        position: absolute;
        right: -22px;
        top: -10px;
      }
#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight:hover {
        opacity: 1;
      }
.document-content .twitter-thread-delimiter {
  width: 40px;
  border-top: 2px solid var(--border-secondary);
  margin: 20px 0px;
}
.rw-thread-heading {
  display: none;
}
.document-content .rw-outer-content {
  border: dashed 2px var(--border-secondary-alpha);
  border-radius: 8px;
  padding: 16px;
  font-size: var(--font-size-base);
  color: var(--reading-text-secondary);

}
.document-content .rw-outer-content a {
    text-decoration: none;
    color: var(--reading-text-primary);
    margin-left: 16px;
  }
.document-content .rw-digest-thread-wrapper {
  margin: 36px auto 32px;
  font-style: initial;
  max-width: 550px;
}
.document-content .rw-digest-thread-wrapper > h6 {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--ui-font) !important;
  }
.document-content .rw-digest-thread-wrapper > span:last-of-type {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 12px;
    font-family: var(--ui-font) !important;
    display: block;
    margin-top: -8px;
  }
/* handle fonts here because adding the fonts to above rules makes the file names too long */
.document-content .rw-embedded-tweet {
  font-family: var(--ui-font) !important;
}
.document-content .rw-embedded-tweet > span {
    font-family: var(--ui-font) !important;
  }
.document-content .rw-embedded-tweet header img {
    }
.document-content .rw-embedded-tweet header a {
      font-family: var(--ui-font) !important;
    }
.document-content .rw-embedded-tweet header div {
      font-family: var(--ui-font) !important;
    }
.document-content .rw-embedded-tweet main > span:first-of-type {
      font-family: var(--ui-font) !important;
    }
.document-content .rw-embedded-tweet main p {
      font-family: var(--ui-font) !important;
    }
.document-content .rw-embedded-tweet footer a {
      font-family: var(--ui-font) !important;
    }
.document-content .rw-ai {
    background-color: #CBC3E3;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid #A39EBA;
  }
.document-content .rw-ai-highlighted {
    font-weight: bold;
  }
.document-content .rw-ai-explainer {
    background-color: #CBC3E3;
  }
/*
    Needed for DISCOVER_WISEREADS_DOC_URL post
    Ensures the "Discover new documents" button displays properly by:
    1. Setting correct image dimensions and positioning
    2. Showing/hiding images based on the current theme (light/dark)
  */
.document-content [data-rw-theme] [data-rw-button="discover-wisereads"] img {
      background: none !important;
      opacity: 1 !important;
      width: 207px !important;
      margin: 0 auto !important;
    }
.document-content [data-rw-theme="dark"] {
    display: none !important;
  }
.document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
      display: none !important;
    }
.theme--dark .document-content [data-rw-theme="light"] {
      display: none !important;
    }
.theme--dark .document-content [data-rw-theme="light"] [data-rw-button="discover-wisereads"] img {
        display: none !important;
      }
.theme--dark .document-content [data-rw-theme="dark"] {
      display: block !important;
    }
.theme--dark .document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
        display: block !important;
      }
.theme--dark .document-content .rw-ai,
    .theme--dark .document-content .rw-ai-explainer {
      color: var(--text-inverse);
    }
.document-content.is-youtube-video {
  padding-top: 135px;
}
/* https://linear.app/readwise/issue/RW-26751/bug-youtube-transcripts-sometimes-send-missing-spaces-to-readwise-10
The YouTube parser originally didn't add spaces to the end of each transcript, so we were using margin-right.
After fixing the parser, we removed the margin-right but we still need to add it for old videos. */
.document-content span[data-rw-start] {
  margin-right: .25rem;
}
.document-content span[data-rw-transcript-version] {
  margin-right: 0;
}
.document-content .rw-email-parsed {
  display: none;
}
/* Pagination */
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
      margin-top: 0;
      padding-top: 0;
      display: block;
      break-before: column;
    }
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
        text-decoration: none;
      }
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:first-child {
        break-before: auto;
      }
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
        display: none;
      }
.document-content--original-email {
  background: white !important;
  color: initial;
  word-break: break-word;
  max-width: calc(100% - 2 * var(--content-gutter)) !important;
  margin: 0 auto;

  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
.document-content--original-email table, .document-content--original-email tr, .document-content--original-email tbody {
    width: 100% !important;
  }
.document-content--original-email table {
    border-collapse: collapse !important;
  }
.document-content--original-email img {
    background: initial;
    max-width: 100%;
  }
.document-content--original-email rw-highlight {
    color: initial !important;
  }
.document-content--original-email div, .document-content--original-email table, .document-content--original-email tr, .document-content--original-email td, .document-content--original-email tbody, .document-content--original-email a, .document-content--original-email hr, .document-content--original-email pre {
    /* The value below is width of header in px - how i calculate this:
      its .textContentWrapper width
      minus --content-gutter variable which takes padding in #document-header
      minus - 1rem which is a padding in textContentWrapper 
      minus 10px * 2 of padding that we add to .document-content--original-email */
    max-width: calc(var(--reading-editable-line-length) - 1rem - 20px) !important;
  }
.document-content--original-email pre {
    display: block;
    overflow-x: scroll !important;
  }
.allow-annotation-bar-popover-overlay .annotation-bar-popover {
    z-index: 500 !important;
}
/* File loads immediately with App load */
/* Inter Variable */
@font-face {
  font-family: 'Inter VF';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  size-adjust: 100%;
  font-named-instance: 'Regular';
  src: url("/assets/Inter-roman.var.17fe38ab.17fe38ab.17fe38ab.17fe38ab.17fe38ab.17fe38ab.17fe38ab.17fe38ab.17fe38ab.17fe38ab.17fe38ab.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter VF';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  size-adjust: 100%;
  font-named-instance: 'Italic';
  src: url("/assets/Inter-italic.var.d1401419.woff2") format("woff2");
}
/* Source Serif Variable */
@font-face {
  font-family: 'Source Serif VF';
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
  size-adjust: 111%;
  font-named-instance: 'Regular';
  src: url("/assets/SourceSerif4-Variable.21985b3d.woff2") format("woff2");
}
@font-face {
  font-family: 'Source Serif VF';
  font-weight: 400 900;
  font-display: swap;
  font-style: italic;
  size-adjust: 111%;
  font-named-instance: 'Italic';
  src: url("/assets/SourceSerif4-Italic-Variable.4df53fc3.woff2") format("woff2");
}
/* Roboto Mono Variable */
@font-face {
  font-family: 'Roboto Mono VF';
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
  size-adjust: 103%;
  font-named-instance: 'Regular';
  src: url("/assets/RobotoMono[wght].7d933841.ttf") format("truetype");
}
@font-face {
  font-family: 'Roboto Mono VF';
  font-weight: 400 700;
  font-display: swap;
  font-style: italic;
  size-adjust: 103%;
  font-named-instance: 'Italic';
  src: url("/assets/RobotoMono-Italic[wght].59eb64cd.ttf") format("truetype");
}
/* Public Sans Variable */
@font-face {
  font-family: 'Public Sans VF';
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
  size-adjust: 103%;
  font-named-instance: 'Regular';
  src: url("/assets/PublicSans-Regular[wght].d75a7dc1.ttf") format("truetype");
}
@font-face {
  font-family: 'Public Sans VF';
  font-weight: 400 900;
  font-display: swap;
  font-style: italic;
  size-adjust: 103%;
  font-named-instance: 'Italic';
  src: url("/assets/PublicSans-Italic[wght].6ce292b0.ttf") format("truetype");
}
.tag {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--tag-color);
  color: var(--tag-text-color);
  font-weight: var(--font-weight-normal);
  display: block;
}
/* This tells Safari to render animations with the GPU instead of the CPU */
/* More info: */
/* https://michaeluloth.com/css-translate-z/ */
/* https://x.com/andyngo/status/1263056084719202304 */
.Toastify__toast-container {
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 9999px);
  position: fixed;
  padding: 4px;
  width: 320px;
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: 1em;
  left: 1em;
}
.Toastify__toast-container--top-center {
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: 1em;
  right: 1em;
}
.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}
.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}
@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: 0;
    left: initial;
  }
}
.Toastify__toast {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
  direction: ltr;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--dark {
  background: #121212;
  color: #fff;
}
.Toastify__toast--default {
  background: #fff;
  color: #aaa;
}
.Toastify__toast--info {
  background: #3498db;
}
.Toastify__toast--success {
  background: #07bc0c;
}
.Toastify__toast--warning {
  background: #f1c40f;
}
.Toastify__toast--error {
  background: #e74c3c;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
}
.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.7s;
}
@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
}
.Toastify__close-button--default {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}
@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left;
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
}
.Toastify__progress-bar--default {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}
.Toastify__progress-bar--dark {
  background: #bb86fc;
}
@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}
.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}
@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}
.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}
@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}
.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}
@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}
.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
}
/*# sourceMappingURL=ReactToastify.css.map */
.Toastify__toast-container {
  /* Radix modal is applying pointer-events: none to the body, so we need to override it */
  pointer-events: auto !important;
}
.Toastify__toast-container.Toastify__toast-container--bottom-left {
    bottom: var(--safeBottom0);
    left: var(--toast-gap);
  }
/* Used in extension */
.Toastify__toast-container.Toastify__toast-container--top-right {
    top: 42px; /* 30px bar + 16px gap - 4px margin-top on toats */
    right: 0;
  }
.Toastify__toast {
  min-height: var(--toast-min-height);
  min-width: 0;
  max-width: var(--toast-max-width);
  margin-bottom: var(--toast-gap);
  padding: 0;
  border-radius: var(--toast-border-radius);
  font-size: var(--toast-font-size);
  background: var(--toast-background);
  border-radius: 24px;
  box-shadow: var(--toast-box-shadow);
  cursor: default;

  /* Safari: Otherwise, the progress bar will overflow outside the border-radius */
  transform: translateZ(0);
}
.Toastify__toast--error {
  background: var(--toast-background--error);
}
.Toastify__toast--info {
  background: var(--toast-background--info);
}
.Toastify__toast--success {
  background: var(--toast-background--success);
}
.Toastify__toast--warning {
  background: var(--toast-background--warning);
}
.Toastify__toast-body {
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 8px 12px;
}
:is(.Toastify__toast-body,.Toastify__toast-body .toastLink),
    :is(.Toastify__toast-body,.Toastify__toast-body .toastLink):active,
    :is(.Toastify__toast-body,.Toastify__toast-body .toastLink):hover,
    :is(.Toastify__toast-body,.Toastify__toast-body .toastLink):visited {
      color: var(--toast-text-color);
      text-decoration: none;
    }
.Toastify__toast-body .toastLink {
    display: flex;
    flex: 1;
    transition: background-color var(--animation-duration--imply-interactivity);
    color: var(--toast-text-color);
  }
.Toastify__toast-body .toastLink:hover {
      background: rgba(255,255,255,0.05);
    }
.Toastify__toast-body .contentContainer {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    line-height: 20px;
  }
.Toastify__toast-body .contentContainer .contentWrapper {
      transform: translateY(1px);
    }
.Toastify__toast-body .contentContainer svg {
      height: var(--toast-icon-height);
      margin-right: 8px;
    }
.Toastify__toast-body .contentContainer svg,
      .Toastify__toast-body .contentContainer svg path {
        fill: var(--toast-icon-circle-fill);
        width: 20px;
        min-width: 20px;
        height: 20px;
        min-height: 20px;
      }
.Toastify__toast-body .actionsContainer {
    display: flex;
    flex-direction: row;
    min-height: 100%;
  }
.Toastify__toast-body .actionsContainer button {
      flex: 1;
      padding: 2px 8px;
      background: rgba(255,255,255,0.1);
      border-radius: 42px;
      font-weight: var(--font-weight-medium);
      color: var(--toast-button-color);
      transition: background-color var(--animation-duration--imply-interactivity);
      font-size: var(--font-size-base);
      line-height: 20px;
      height: 32px;
      box-sizing: border-box;
    }
.Toastify__toast-body .actionsContainer button:hover {
        background: rgba(255,255,255,0.15);
      }
.theme--dark .Toastify__toast-body .actionsContainer button {
      background: rgba(40, 49, 59, 0.06);
    }
.theme--dark .Toastify__toast-body .actionsContainer button:hover {
        background: rgba(40, 49, 59, 0.15);
      }
.theme--dark .Toastify__toast--error .Toastify__toast-body .actionsContainer button {
        background: #FFFFFF;
      }
.theme--dark .Toastify__toast--error .Toastify__toast-body .actionsContainer button:hover {
          background: rgba(255,255,255,0.8);
        }
.Toastify__toast--error .actionsContainer button {
    color: var(--toast-button-color--error);
  }
.Toastify__toast--error .contentContainer,
    .Toastify__toast--error .contentContainer.toastLink {
      color: var(--toast-text-color--error);
    }
.Toastify__toast--error .contentContainer svg,
      .Toastify__toast--error .contentContainer svg path {
        fill: var(--toast-icon-circle-fill--error);
      }
.Toastify__toast--info .actionsContainer button {
    color: var(--toast-button-color--info);
  }
.Toastify__toast--success .actionsContainer button {
    color: var(--toast-button-color--success);
  }
.Toastify__toast--warning .actionsContainer button {
    color: var(--toast-button-color--warning);
  }
.Toastify__close-button {
  color: var(--toast-text-color);
}
.Toastify__progress-bar {
  background: var(--toast-progress-bar-color);
  height: 2px;
}
.Toastify__progress-bar--error {
  background: var(--toast-progress-bar-color--error);
}
.Toastify__progress-bar--info {
  background: var(--toast-progress-bar-color--info);
}
.Toastify__progress-bar--success {
  background: var(--toast-progress-bar-color--success);
}
.Toastify__progress-bar--warning {
  background: var(--toast-progress-bar-color--warning);
}
.Toastify__loading-spinner {
  width: 28px;
  height: 28px;
}
.Toastify__loading-spinner div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    margin: 3px 3px 0 0;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
    animation: toastify__lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--text-secondary) transparent transparent transparent;
  }
.Toastify__loading-spinner div:nth-child(1) {
      animation-delay: -0.45s;
    }
.Toastify__loading-spinner div:nth-child(2) {
      animation-delay: -0.3s;
    }
.Toastify__loading-spinner div:nth-child(3) {
      animation-delay: -0.15s;
    }
@keyframes toastify__lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.tippy-box[role="tooltip"] {
  border-radius: 4px;
  background-color: var(--tooltip-background--default);
  color: var(--tooltip-color--default);
  font-weight: 500;
  font-family: var(--ui-font);
}
.tippy-box[data-theme~='error'] {
  background-color: var(--tooltip-background--error);
}
.tippy-box[data-theme~='error'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--tooltip-background--error);
  }
.tippy-box[data-theme~='error'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--tooltip-background--error);
  }
.tippy-box[data-theme~='error'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--tooltip-background--error);
  }
.tippy-box[data-theme~='error'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--tooltip-background--error);
  }
.tippy-box[data-theme~='info'] {
  background-color: var(--tooltip-background--info);
}
.tippy-box[data-theme~='info'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--tooltip-background--info);
  }
.tippy-box[data-theme~='info'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--tooltip-background--info);
  }
.tippy-box[data-theme~='info'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--tooltip-background--info);
  }
.tippy-box[data-theme~='info'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--tooltip-background--info);
  }
.tippy-box[data-theme~='success'] {
  background-color: var(--tooltip-background--success);
}
.tippy-box[data-theme~='success'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--tooltip-background--success);
  }
.tippy-box[data-theme~='success'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--tooltip-background--success);
  }
.tippy-box[data-theme~='success'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--tooltip-background--success);
  }
.tippy-box[data-theme~='success'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--tooltip-background--success);
  }
.tippy-box[data-theme~='warning'] {
  background-color: var(--tooltip-background--warning);
}
.tippy-box[data-theme~='warning'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--tooltip-background--warning);
  }
.tippy-box[data-theme~='warning'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--tooltip-background--warning);
  }
.tippy-box[data-theme~='warning'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--tooltip-background--warning);
  }
.tippy-box[data-theme~='warning'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--tooltip-background--warning);
  }
.tts-position-indicator {
  position: absolute;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: rgba(70, 147, 254, 0.18);
  border-radius: 5px;
  width: 1px;
  padding: 0 1px;
  left: -1px;
  pointer-events: none;

  transition: none; /* See .tts-position-indicator--with-transition */
}
.tts-position-indicator::before {
    content: '';
  }
.tts-position-indicator--with-transition {
  transition: transform 0.2s, width 0.2s;
}
.tts-position-indicator--with-transition.tts-position-indicator-large {
    transition: transform 0.2s, width 0.2s, top 0.2s, height 0.2s;
  }
.tts-position-indicator--with-transition.tts-position-indicator-end {
    transition: width 0.2s;
  }
/*
  !important is added to all rules in this file when running in the extension.
*/
html {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 20%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
  --highlight-resize-handle-background-color: rgb(220, 185, 0);
  --highlight-resize-handle-background-color--alternative: #767ccc;
  --js_highlight-normal: #fcf6bf; /* needs to be hex */
  --highlight-background-color--alternative: #CDCDFE; /* alternative colours always are opague to be safe */
  --highlight-background-color--alternative--active: #b1b7fe;
  /*
    NOTE: we overwrite the following variable in the extension with JS depending on the site's colors
  */
  --highlight-text-color: #000;
  --highlight-icon-color:  rgba(0, 0, 0, 0.60);
}
.theme--dark {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--white);
  --highlight-icon-color: rgba(255, 255, 255, 0.60);
}
/* Unset the default text fragment highlighting */
::target-text {
  color: unset;
  background: unset;
}
readwise-tooltip-container {
  position: fixed;
  inset: auto;
  z-index: 2147483647;
  isolation: isolate;
}
/*
  <rw-highlight/>s are text highlights. They also have `.rw-highlight` added.
  .rw-image-highlight is added to image highlights. They do not have `.rw-highlight`.
  .rw-highlight--* classes are added to both.
*/
rw-highlight,
.rw-image-highlight,
.rw-pseudo-highlight {
  cursor: pointer;
  visibility: visible;
}
:is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::after,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::after {
    pointer-events: none !important;
  }
:is(.isDev rw-highlight,.isDev .rw-image-highlight):not([data-highlight-id]) {
      outline: 1px solid red;
    }
rw-highlight,
.rw-pseudo-highlight {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--normal) 2px,
     var(--highlight-background-color--normal) 100%
   );
  background-repeat: no-repeat;
  background-size: 100% 90%;
  background-position: 0 75%;
  color: var(--highlight-text-color);
}
a rw-highlight, .rw-pseudo-highlight a {
  text-decoration: underline;
}
.rw-image-highlight {
  border-radius: 2px;
  outline: 12px solid var(--highlight-background-color--normal);
}
rw-highlight.rw-highlight--active {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--active) 2px,
     var(--highlight-background-color--active) 100%
   );
}
.rw-image-highlight.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--active);
}
rw-highlight.rw-highlight--alternative-color {
  background: var(--highlight-background-color--alternative);
}
.rw-image-highlight.rw-highlight--alternative-color {
  outline-color: var(--highlight-background-color--alternative);
}
rw-highlight.rw-highlight--alternative-color.rw-highlight--active {
  background: var(--highlight-background-color--alternative--active);
}
.rw-image-highlight.rw-highlight--alternative-color.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--alternative--active);
}
rw-highlight.rw-highlight--alternative-color .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-text-color);
}
rw-highlight .rw-highlight-icon-wrapper {
  display: none;
}
rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  display: inline-block;
}
rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
#document-text-content  rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  padding-right: 0.2em;
  text-indent: initial !important; /* block epub styles from adding indents to highlight elements */
}
rw-highlight .rw-highlight-icon-wrapper svg {
  position: relative;
  top: 1px;
  display: none;
}
rw-highlight .rw-highlight-icon-wrapper svg,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight .rw-highlight-icon-wrapper svg {
  margin-left: 0.4em;
}
:is(rw-highlight .rw-highlight-icon-wrapper svg,#document-text-content rw-highlight .rw-highlight-icon-wrapper svg):first-child {
    margin-left: 0.2em;
  }
rw-highlight .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-icon-color);
}
rw-highlight.rw-highlight--has-note .rw-highlight-note-icon {
  display: inline;
}
rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
  display: inline;
}
.rw-highlight,
.rw-image-highlight {
  -webkit-tap-highlight-color: transparent;
}
/* Effectively hide the highlight / make it like it was before it was highlighted */
.rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover,
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover {
      background: inherit;
      border: inherit;
      color: inherit;
      cursor: inherit;
      outline: inherit;
    }
.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper {
      display: none;
    }
.rw-highlight-resize-handle {
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Make sure you can't tap them when they're meant to be hidden */

  position: relative;
  cursor: col-resize;
}
.rw-highlight-resize-handle,
  .rw-highlight-resize-handle span {
    /* https://linear.app/readwise/issue/RW-38790/when-highlighting-text-with-some-super-script-the-text-moves */
    line-height: 1;
    font-size: inherit;
  }
/*
    This is the tap target.
    The pseudo-elements are what you see visually; `::before` is the bar/body, `::after` is the head.
    The head is styled with the end handle in mind, and later in the code the start handle's head is
    flipped upside-down.
  */
.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper {
    position: absolute;
    left: -12px;
    right: -12px;
    top: -8px;
    bottom: -15px;

    opacity: 0.6;
  }
.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      border-radius: 10px;
      transition: all 0.1s;
    }
.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      content: ' ';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--highlight-resize-handle-background-color);
    }
.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      top: 8px;
      bottom: 12px;
      width: 4px;
    }
.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      border-radius: 10px;
      height: 12px;
      width: 12px;
      bottom: 7px;
    }
.rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      background-color: var(--highlight-resize-handle-background-color--alternative);
    }
.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper {
      opacity: 0.8;
    }
.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::before {
        bottom: 6px;
        width: 5px;
      }
.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::after {
        bottom: 5px;
        height: 14px;
        width: 14px;
      }
.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-resize-handle,
  .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-resize-handle {
    opacity: 0;
  }
.rw-highlight-resize-handle:hover,
  .rw-highlight--active .rw-highlight-resize-handle,
  .rw-highlight--hover .rw-highlight-resize-handle {
    pointer-events: auto;
    opacity: 1;

    /*
      Cases where the handles are momentarily hidden.
      E.g. during a resize, we hide all other highlights' handles so that they don't get shown if we drag
      the cursor over those other highlights and their hover styles are applied.
    */
  }
.document-content[data-rw-highlight-resize-status="actively-resizing"] .rw-highlight-resize-handle:hover, .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--active .rw-highlight-resize-handle), .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--hover .rw-highlight-resize-handle) {
      opacity: 0;
    }
/* Why this list of selectors? Basically we want this always and we're being extra safe */
/*
      Otherwise the (transparent) handle can get in the way when getting the cursor point and drawing the
      selection
    */
.document-content.is-emulating-selection:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) :is(.rw-highlight-resize-handle,.rw-highlight-resize-handle:hover,.rw-highlight--active .rw-highlight-resize-handle,.rw-highlight--hover .rw-highlight-resize-handle) {
      pointer-events: none;
      -webkit-user-select: none;
              user-select: none;
    }
/*
    Cases where the handles are permanently hidden. JS needs to also cover these cases.
  */
.app--document-share-app .rw-highlight-resize-handle,
  .rw-app--extension .rw-highlight-resize-handle {
    display: none;
  }
.document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"],
  .document-content[data-rw-highlight-resize-status="actively-resizing"],
  .document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"] *,
  .document-content[data-rw-highlight-resize-status="actively-resizing"] * {
    /* !important is required because we need to change the cursor for everything */
    cursor: col-resize !important;
  }
.rw-highlight-resize-handle--start .rw-highlight-resize-handle__inner-wrapper {
  transform: rotate(180deg);
  top: -15px;
  bottom: -8px;
}
.rw-mobile-web-view img.rw-image-highlight {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 213, 0, 0.2);
}
.rw-mobile-web-view img.rw-image-highlight.rw-image-highlight--active {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 6px rgba(255, 213, 0, 0.5);
}
:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }
:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
[data-tippy-root]{max-width:calc(100vw - 10px)}
.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}
.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}
.tippy-box[data-placement^=left]>.tippy-arrow{right:0}
.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}
.tippy-box[data-placement^=right]>.tippy-arrow{left:0}
.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}
.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
.tippy-arrow{width:16px;height:16px;color:#333}
.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
.tippy-content{position:relative;padding:5px 9px;z-index:1}
body,
/* Extension shadow DOM contents root */
:host > * {
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
}
body {
  background-color: var(--background-color);
  margin: 0;
  overflow: hidden;
  transition: background-color var(--theme-transition-time) ease-in-out;
}
html {
  font-size: 100% !important;
}
a {
  color: inherit;
  text-decoration: unset;
}
code {
  font-family: var(--mono-font);
}
#readwise-reader-root {
  height: 100vh;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
* {
  scrollbar-width: none;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  height: 0;
  width: 0;
}
/* Ideally this would be a mixin, if not for this issue: https://github.com/csstools/postcss-nesting/issues/83 */
.has-visible-scrollbar {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}
.has-visible-scrollbar::-webkit-scrollbar {
    height: var(--scrollbar-thickness);
    width: var(--scrollbar-thickness);
  }
.has-visible-scrollbar::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar-border-radius);
    background-color: transparent;
    background-clip: padding-box;
    border: 5px solid rgba(0,0,0,0);
    border-width: 5px;
    min-height: 50px;
  }
.has-visible-scrollbar::-webkit-scrollbar-thumb:hover {
      border-width: 4px; /* Increases the perceived size of the thumb on hover */
      background-color: var(--scrollbar-color-hover);
    }
.has-visible-scrollbar::-webkit-scrollbar-track {
    opacity: 0;
  }
/* Only show scrollbar on hover */
.has-visible-scrollbar:hover {
    scrollbar-color: var(--scrollbar-color) transparent;
  }
.has-visible-scrollbar:hover::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-color);
    }
ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
img {
  background: var(--image-placeholder-color);
}
.animate-hover-bar {
  transition: transform, var(--animation-duration--move) cubic-bezier(0.19, 1, 0.22, 1),
  height, var(--animation-duration--move) cubic-bezier(0.19, 1, 0.22, 1),
  filter 256ms cubic-bezier(0.19, 1, 0.22, 1);
}
.top-drop-shadow {
  box-shadow: var(--document-list-box-shadow) !important;
}
.hideAccessibly {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
._app_1i1i3_1 {
  text-align: left;
}

._appMainAndTtsPlayer_1i1i3_5 {
  display: flex;
  flex-direction: column;
}

._appMain_1i1i3_5 {
  flex: 1;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  isolation: isolate;
}

._appContent_1i1i3_21 {
  height: var(--safe100vh);
  overflow-x: hidden;
  display: flex;
  flex: 1 0 70%;
}

._appContent_1i1i3_21._withTransition_1i1i3_27 {
    transition: flex var(--panels-transition-time) ease-in-out;
  }

._appContent_1i1i3_21._rightSidebarHidden_1i1i3_31 {
    flex: 1 0 100%;
  }

._logo_1i1i3_36 {
  height: 40vmin;
  pointer-events: none;
}

._spinnerWrapper_1i1i3_41 {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--inbox-header-height) * -1);
  padding-top: 100px;
  flex-direction: column;
  height: 100%;
}
._root_6dpaf_1 {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

._queryWrapper_6dpaf_9 {
  display: flex;
  margin-bottom: 20px;
}

._queryWrapper_6dpaf_9 .wrapper,
  ._queryWrapper_6dpaf_9 .wrapper textarea {
    color: black;
    flex: 1;
  }

._runsLabel_6dpaf_20 {
  margin-bottom: 20px;
}

._runsLabel_6dpaf_20 input {
    margin-left: 20px;
  }

._json_6dpaf_28 {
  background: white;
  padding: 20px 10px;
}

._reRunButtonWrapper_6dpaf_33 {
  margin: 10px;
}._page_31v3z_1 {
  display: flex;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: var(--content-background-color);
  transition: background-color var(--theme-transition-time) ease-in-out;
}

._standardPageWrapper_31v3z_10 {
  width: 100%;
}

._standardPageWrapper_31v3z_10 ._header_31v3z_13 {
    display: flex;
    align-items: center;
    width: 100%;
    padding:  0 var(--spacer-8);
    height: var(--inbox-header-height);
    border-bottom: 1px solid var(--border-secondary-alpha);
  }

._standardPageWrapper_31v3z_10 ._header_31v3z_13 ._title_31v3z_21 {
      font-size: 1em;
      margin: 0;
      letter-spacing: -0.24px;
      font-weight: 600;
    }

._standardPageWrapper_31v3z_10 ._contentMainWrapper_31v3z_29 {
    display: flex;
    height: calc(var(--safe100vh) - 50px);
    overflow: scroll;
  }

._standardPageWrapper_31v3z_10 ._contentMainWrapper_31v3z_29 ._contentWrapper_31v3z_34 {
      min-width: 925px;
      max-width: 925px;
      margin: 0 auto;
    }

@media (max-width: 1035px) {
      ._standardPageWrapper_31v3z_10 ._contentMainWrapper_31v3z_29 ._contentWrapper_31v3z_34 {
        min-width: inherit;
        max-width: inherit;
        margin: 0 32px;
      }
    }

._standardPageWrapper_31v3z_10 ._contentMainWrapper_31v3z_29 aside {
      display: flex;
      flex-direction: column;
      width: 190px;
      margin-top: 64px;
      position: fixed;
    }

._standardPageWrapper_31v3z_10 ._contentMainWrapper_31v3z_29 aside a {
        letter-spacing: -0.24px;
        color: var(--text-secondary);
        font-size: 14px;
        padding-bottom: 6px;
        line-height: 24px;
        text-decoration: none;
      }

._standardPageWrapper_31v3z_10 ._contentMainWrapper_31v3z_29 aside a._isActive_31v3z_63 {
          pointer-events: none;
          font-weight: 600;
          color: var(--text-interactive)
        }
._wrapper_vhvsl_1 {
  /*
    `.grow-wrap`, etc. taken from
    https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ and modified
  */
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
  
  width: 305px;
  max-width: 100%;
}
._wrapper_vhvsl_1::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
  }
._wrapper_vhvsl_1 > textarea {
    border: 0;
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
  }
._wrapper_vhvsl_1 > textarea:focus {
      /* TODO */
      outline: 0;
    }
._wrapper_vhvsl_1 > textarea::placeholder {
      color: var(--text-placeholder);
    }
._wrapper_vhvsl_1 > textarea,
  ._wrapper_vhvsl_1::after {
    /* Identical styling required!! */
    font: inherit;
    font-family: var(--ui-font);
    overflow-y: scroll;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
  }._container_n4uxj_1 {
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

._logo_n4uxj_12 {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
}

._title_n4uxj_18 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    max-width: 80%;
}

._buttonContainer_n4uxj_26 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
}

._button_n4uxj_26 {
    color: var(--text-primary);
    text-decoration: underline;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    background-color: transparent;
}

._button_n4uxj_26:hover {
        background-color: rgba(0, 0, 0, 0.1);
        cursor: pointer;
        opacity: 1;
    }
._page_135gj_1 {
  display: flex;
  overflow: hidden;
  height: 100%;
  background: var(--content-background-color);
  transition: background-color var(--theme-transition-time) ease-in-out;
}

._contentWrapper_135gj_9 {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

._contentWrapper_135gj_9 h1 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }

._contentWrapper_135gj_9 p {
    margin: 8px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
  }
._dropzone_ra4s3_1 {
  position: absolute;
  inset: 0;
  background-color: var(--file-dropzone-background);
  z-index: 1;
  border: 3px dashed var(--file-dropzone-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--file-dropzone-color);
}
._ghostContainer_c1867_1 {
  position: fixed;
  z-index: 10000;
  bottom: 0;
  right: 0;
  transition: transform 4s cubic-bezier(.06,.34,.19,1.24), opacity 1s ease;
  transform: translateY(300px) scaleY(2);
  opacity: 0;
}

._ghost_c1867_1 {
  position: relative;
  height: 100px;
  width: 100px;
}

._show_c1867_17 {
  transform: translateY(0) scaleY(1);
  opacity: 1;
}

._ghostBody_c1867_22 {
  background: none;
  width: 100px;
  height: auto;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

._glasses_c1867_33 {
  background: none;
  width: 100px;
  height: auto;
  object-fit: contain;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

@keyframes _ghost-bounce_c1867_1 {
  0% {
    transform: translateY(0px) scaleY(1);
  }
  100% {
    transform: translateY(-30px) scaleY(1.2);
  }
}

._ghostBody_c1867_22, ._glasses_c1867_33 {
  animation: _ghost-bounce_c1867_1 10s cubic-bezier(.26,.57,.79,.55) infinite alternate;
  animation-delay: 5s;
}
._dialogWrapper_n47il_1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: var(--modal-z-index);
  background-color: var(--background-backdrop);
  pointer-events: all;
}

._dialogBox_n47il_15 {
  width: 385px;
  background-color: var(--background-elevated);
  padding: var(--spacer-7) var(--spacer-6) var(--spacer-6) var(--spacer-6);
  margin: 0;
  box-shadow: var(--shadow-400);
  border-radius: var(--spacer-3);
  position: absolute;
  top: 25%;
  z-index: 20;
}

._title_n47il_27 {
  font-family: var(--ui-font);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--spacer-3);
}

._text_n47il_36 {
}

._subtitle_n47il_39 {
  font-family: var(--ui-font);
  font-style: normal;
  margin-top: var(--spacer-3);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.25rem;
}

._buttons_n47il_49 {
  float: right;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacer-3);
  margin-top: var(--spacer-6);
}

._cancelButton_n47il_58 {
  background: none;
}

._buttonText_n47il_62 {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--ui-font);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

._redButton_n47il_70 {
  color: var(--text-error);
  background: var(--background-button-caution);
}

._darkRedButton_n47il_75 {
  background: var(--red-50);
  color: var(--neutral-100);
}

._blueButton_n47il_80 {
  color: var(--text-interactive);
  background: var(--background-button-primary);
}

._inputWrapper_n47il_85 {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

._inputWrapper_n47il_85 p {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
  }

._inputWrapper_n47il_85 input {
    margin-top: 7px;
    height: 32px;
    width: 100%;
    padding: 2px 8px;
    color: var(--inbox-header-active-tab-text-color);
    font-size: 14px;
    background: var(--background-color);
    font-family: var(--ui-font);
    outline: none;
    box-shadow: 0 0 0 1px var(--border-secondary);
    border-radius: 4px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    border: none;
  }

._inputWrapper_n47il_85 input:focus {
      box-shadow: 0 0 0 2px var(--border-focus);
    }
._deleteAllSeen_1lsgl_1 {
  background: var(--background-primary) !important;
  box-shadow: inset 0 0 0 200px var(--u-alpha-red-200), var(--shadow-100) !important;
  font-size: var(--font-size-base);
}
._deleteAllSeen_1lsgl_1 button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-error);
  }
._deleteAllSeen_1lsgl_1 svg {
    margin-right: 7px;
    fill: var(--icon-danger);
  }
._floatingPill_1t3gc_1 {
  position: absolute;
  background: var(--background-elevated);
  box-shadow: var(--shadow-100);
  bottom: var(--spacer-7);
  border-radius: 30px;
  padding: 7px 12px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  z-index: 1;
}
._floatingPill_1t3gc_1._isLeftPosition_1t3gc_13 {
    left: calc(var(--inbox-sidebar-width) + 28px);
  }
._floatingPill_1t3gc_1._isLeftPosition_1t3gc_13._navigationSidebarIsHidden_1t3gc_16 {
      left: 28px;
    }
._floatingPill_1t3gc_1._isRightPosition_1t3gc_21 {
    right: calc(var(--sidebars-max-width) + var(--spacer-8));
  }
._floatingPill_1t3gc_1._isRightPosition_1t3gc_21._isRightSidebarHidden_1t3gc_24 {
      right: var(--spacer-8);
    }
._inbox_1cgyd_1 {
  display: flex;
  overflow: hidden;
  transition: background-color var(--theme-transition-time) ease-in-out;
  height: 100%;
  width: 100%;
}

._inboxContainer_1cgyd_9 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

._inboxWithOpenDocument_1cgyd_15 {
  background: none;
}

._spinnerWrapper_1cgyd_19 {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--inbox-header-height) * -1);
}


._documentsLoadingSpinner_1cgyd_28 {
  position: absolute;
  z-index: 100;
  bottom: 0;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._fetchMoreSpinner_1cgyd_38 {
  height: 30px!important;
  width: 30px!important;
}
._item_4lq5w_1 {
  width: 100%;
  height: 112px;
  min-height: 112px;
  background: transparent;
  border-bottom: 1px solid var(--u-alpha-400);
  padding: 0 16px;
  padding-left: var(--min-left-pad);
  display: flex;
  align-items: center;
  animation-name: _thumbAnime_4lq5w_1;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

._item_4lq5w_1 ._photo_4lq5w_16 {
    background: var(--u-alpha-400);
    margin-right: 20px;
    border-radius: 4px;
    width: var(--document-list-image-width);
    height: var(--document-list-image-height);
  }

._item_4lq5w_1 ._linesWrapper_4lq5w_24 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

._item_4lq5w_1 ._line_4lq5w_24 {
    height: 8px;
    background: var(--u-alpha-400);
    border-radius: 5px;
  }

@keyframes _thumbAnime_4lq5w_1 {
  0%, 40% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  70%, 100% {
    opacity: 1;
  }
}
._footer_18foa_1 {
  display: flex;
  padding: 16px 16px 12px 14px;
  gap: 8px;
  justify-content: space-around;
}

._footer_18foa_1 ._bundleButton_18foa_7 {
    width: 100%;
    text-align: center;
    white-space: nowrap;
  }

._bundleLinkButton_18foa_14{
  margin-top: 2px;
  margin-bottom: 2px;
}

._bundleLinkPopover_18foa_19 {
  display: flex;
  flex-direction: column;
  max-width: 410px !important;
}

._small_18foa_25 {
  font-weight: 500;
  font-size: 12px;
}

._urlHolder_18foa_30 ._urlLabel_18foa_31 {
    line-height: 16px;
    font-weight: 500;
    font-size: 12px;
  }

._urlHolder_18foa_30 ._urlFrame_18foa_37 {
    border-radius: 4px;
    border: 1px solid var(--border-secondary-alpha);
    gap: 8px;
    display: flex;
    padding: 6px 8px 6px 8px;
    align-items: center;
  }

._urlHolder_18foa_30 ._urlFrame_18foa_37 form {
      display: flex;
      width: 100%;
    }

._urlHolder_18foa_30 ._urlFrame_18foa_37 span {
      overflow: hidden;
      white-space: nowrap;
    }

._urlHolder_18foa_30 ._urlFrame_18foa_37 input {
      width: 100%;
      background: none;
      border: none;
      outline: none;
      font-weight: var(--font-weight-normal);
      font-size: var(--font-size-base);
      line-height: 20px;
      color: var(--text-secondary);
    }

._copyButton_18foa_68 {
  flex: 0 0 auto;
  line-height: 20px;
  font-weight: 500;
  font-size: 12px;
  padding: 2px 10px 2px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._copyButton_18foa_68._isSavingCoverImage_18foa_78 {
    pointer-events: none;
    background: var(--background-button-primary);
  }

._copyButton_18foa_68 ._savingSpinner_18foa_83 {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
  }

._copyButton_18foa_68 ._savingSpinner_18foa_83 div {
      width: 15px;
      height: 15px;
      border: 2px solid;
      border-color: var(--text-interactive) transparent transparent transparent;
    }

._copyButton_18foa_68 svg {
    margin-left: -4px;
  }

._copyButton_18foa_68 svg * {
      fill: var(--text-interactive);
    }

._refreshBundleWrapper_18foa_108 {
  background: var(--u-alpha-blue-200);
  margin: 0 -16px !important;
  padding: 8px 16px;
  font-size: 12px;
}

._refreshBundleWrapper_18foa_108 button {
    display: block;
    margin-top: 8px;
    color: var(--text-interactive);
    background: transparent;
    font-size: 12px;
    font-weight: 400;
  }
._root_6jnjf_1 {
  box-shadow: var(--shadow-200);
  background: var(--popover-background);
  color: var(--text-primary);
  border-radius: 8px;
  max-width: var(--popover-max-width);
  overflow: hidden;
  z-index: var(--popover-z-index);
}

._root_6jnjf_1:is(.is-youtube-video ~ *) {
    z-index: 0 !important;
  }

._root_6jnjf_1:focus-within {
  z-index: var(--popover-focused-z-index);
}

._rootWithOverflowAllowed_6jnjf_19 {
  overflow: visible;
}

._rootHidden_6jnjf_23 {
  display: none;
}
._publicLinkButton_18rbe_1 {
  border-radius: 31px;
  margin-right: 8px;
}

._publicLinkButton_18rbe_1 svg {
    height: 16px;
    width: 16px;
  }

._publicLinkButtonWhenEnabled_18rbe_11 {
  background: #376EF2;
  color: white;
  padding: 6px;
}

._publicLinkButtonWhenEnabled_18rbe_11:hover,
    ._publicLinkButtonWhenEnabled_18rbe_11:hover:not(:active) {
      background: var(--text-interactive);
    }

._publicLinkPopover_18rbe_24 {
  display: flex;
  flex-direction: column;
  max-width: 264px;
}

._publicLinkMain_18rbe_30,
._publicLinkDisableButton_18rbe_31 {
  padding: 12px 16px;
}

._publicLinkMain_18rbe_30 {
  flex: 1;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  line-height: 20px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-secondary-alpha);
}

._publicLinkMain_18rbe_30 > * {
    margin: 0;

    margin-bottom: 12px;
  }

._publicLinkMain_18rbe_30 > *:last-child {
      margin-bottom: 4px;
    }

._publicLinkPopoverTitle_18rbe_53 {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

._publicLinkCopyButton_18rbe_61 {
  position: relative;
  left: -4px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

._publicLinkDisableButton_18rbe_31 {
  margin: 4px 0;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-error);
  justify-content: start;
  background: none;
  border-radius: 0;
}

._publicLinkDisableButton_18rbe_31:not(:active):hover {
    background: var(--u-alpha-100);
  }
._dropdownTrigger_19kqa_1 {
  width: 16px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 8px;
  padding-left: 8px;
  margin-right: -8px;
  border-radius: 0 4px 4px 0;
}

._dropdownTrigger_19kqa_1 > span {
    display: flex;
  }

._dropdownContent_19kqa_17 {
  width: 222px;
}
/*
  :root = <html/>
  :host > * = the root of the extension shadow DOM contents
*/

/* SPACING */

:host > *,
:root {
  --s1: 10px;
  --s2: 20px;
  --s3: 30px;
  --s4: 40px;
  --s5: 50px;

  --spacer-0: 0;
  --spacer-1: .125rem;/* 2px */
  --spacer-2: .25rem; /* 4px */
  --spacer-3: .5rem;  /* 8px */
  --spacer-4: .75rem; /* 12px */
  --spacer-5: 1rem;   /* 16px */
  --spacer-6: 1.25rem;/* 20px */
  --spacer-7: 1.5rem; /* 24px */
  --spacer-8: 2rem;   /* 32px */
  --spacer-9: 2.5rem; /* 40px */
  --spacer-10: 3rem;  /* 48px */

  --min-left-pad: 32px;
}

/* FONTS */

:host > *,
:root {
  /* font weights */
  --font-weight-lighter: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --font-size-xs: 0.6875rem; /* 11px */
  --font-size-sm: 0.75rem; /* 12px */
  --font-size-base: 0.875rem; /* 14px */ /* --f9 */
  --font-size-lg: 1rem; /* 16px */
  --font-size-xl: 1.25rem; /* 20px */

  --line-height-xs: 1rem; /* 16px */
  --line-height-sm: 1.125rem; /* 18px */
  --line-height-base: 1.25rem; /* 20px */
  --line-height-lg: 1.5rem; /* 24px */
  --line-height-xl: 1.5625rem; /* 25px */


  --f2: 3.25rem;/* Deprecated */
  --f3: 1.8rem;/* Deprecated */
  --f4: 1.38rem;/* Deprecated */
  --f5: 1.35rem;/* Deprecated */
  --f6: var(--font-size-2xl); /* Deprecated */
  --f7: var(--font-size-xl); /* Deprecated */
  --f8: var(--font-size-lg); /* Deprecated */
  --f9: var(--font-size-base); /* Deprecated */
  --f10: var(--font-size-sm); /* Deprecated */
  --f11: var(--font-size-xs); /* Deprecated */


  /* letter-spacing that works with the above sizes */

  --ls-6: -0.017em;
  --ls-7: -0.014em;
  --ls-8: -0.011em;
  --ls-9: -0.006em;
  --ls-10: 0em;
  --ls-11: 0.005em;

  --ui-font: "Inter VF", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono-font: "Roboto Mono VF", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --content-line-height: 1.6;
}

/* base COLORS (not themed) */

:host > *,
:root {

  /*
  Base neutral styles.
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4ByMArgC4BOEANjiADQgAW5Mj8A2qJLAnAUa9ZiADGAezqTqXbiADEAM1VqxKgBzKAnMogblABmUBGZQCYNMIzADMMAGwa0ptAFY0OjeNPiA7OJwLIoARqahOuJWIRAWEOKh-ho67noQBiGamjoWURqBmu7aGo4w-tl2paaOAckh7gAs7sqOoRqNRXYtGg6d7lUhdsPijc4hFpp2pnbtIeYW-hbKGqbufhaDSqZGNW4aRr6mpvVKRucXIAC6AL5XLJSSYJwICjtGYjqnqZ8fLEViTR-ED%2BdxifzAxxgliOYHuaEgdzA5piRrA7piOzAiwIizAtZiHZiIynIwI87XG5AA
  */

/* Readwise - Neutrals color palette */

  /* neutral */
  --neutral-100: #ffffff;
  --neutral-97: #f8f9fa;
  --neutral-95: #f0f1f2;
  --neutral-90: #e0e3e6;
  --neutral-85: #d1d5d9;
  --neutral-80: #c1c7ce;
  --neutral-75: #b1b9c2;
  --neutral-70: #a2acb7;
  --neutral-65: #959faa;
  --neutral-60: #88929c;
  --neutral-55: #7c858f;
  --neutral-50: #6e7883;
  --neutral-45: #616c77;
  --neutral-40: #545f6b;
  --neutral-35: #48535f;
  --neutral-30: #3e4853;
  --neutral-25: #333c46;
  --neutral-20: #28313b;
  --neutral-15: #1f272f;
  --neutral-10: #151c23;
  --neutral-07: #10161d;
  --neutral-05: #0c1117;
  --neutral-00: #000000;


  /* Readwise - Color color palette
  https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4DCA9gDZkBOIANCABYCuMOCA2qJLAiNTDT0QAY0o128DiADEAMwUA2OQGZh8gJxoRaAEzq5GgEYqIahvICsADg0B2IwcWWRl-RbTWALAAZT6iDsVaxV3WTsQgEZdCHUvPTcfdV0jSMVokABdAF86bmg4RBoIMABzOAYxKmpJaXkRQ0EDCBgfCDlmow1FJIs5CGsjXUt1VEVdSJGLETsvGEiK2Q0IL3SRdSCVSx91iy8hjR8hC10RSLsfSKzc-N5EAE8YCioMYSqJTll%2B-vmDFRgIlc%2BnZtJEOhZ5kY5Dt1GctJFrAEvBEfIsZLZLL4gbJFCY0JFzLJkSkjslrJFDlccnlwAU%2BKUBDAwG9xDVPjIYDA5GhObCvKoRGF0dyRNY0eMjGhFISZF5TCJkeoVAiQlNZFs7ATFMkYJjdGjdCpgob1JMJpEvNcaTxCiAAC6oCgs6q1WRcuRQ46yM6cuSWix2EFi-2yaJnPTqHxtXEhmRR6yKDRCrVyOwaU3WSxbWIWI4qaWOXM%2BXQl7XU262owUVjOj5SL66b7g71yAHcgLWEQiLkbXH6r0yNxJuTYmS6NB2Sy600QSwaUXJTHBZtjuU%2BSzaiwIyKCxzl2l3EBYMBoLClMi1tn1%2BTWVOt0ZzHxyRHTXGttEQEQQVGbpaWEEwC%2BsjWOuGgwLGiYqHIIi-rKMBbGKSrjK4dimvM0pljcB62gADsw1A4RQizvFedTcnIyi7A2aBQkK4FGHYqDqFKGj-L03qKIogjphYRhLmg7HoiIKhfkKnEqMiMpeNEKxAaukQQLoqE5JkDB2mQYBsJ89jCIcwggcIFzCD0wjbMIvjCCo7G6OxkRJDkQA
  */

  /* red */
  --red-97: #fff6f3;
  --red-90: #f9dcd2;
  --red-80: #f9b3a3;
  --red-70: #f5897b;
  --red-60: #f65c52;
  --red-50: #d8403a;
  --red-40: #a73832;
  --red-30: #78312a;
  --red-20: #4d2520;
  --red-10: #2b1612;

  /* orange */
  --orange-97: #fcf9ed;
  --orange-90: #fae0af;
  --orange-80: #fab960;
  --orange-70: #fa8b25;
  --orange-60: #ea6215;
  --orange-50: #c74e1e;
  --orange-40: #9a461c;
  --orange-30: #73350c;
  --orange-20: #4b290d;
  --orange-10: #2c1701;

  /* yellow */
  --yellow-97: #fafae1;
  --yellow-90: #f3e781;
  --yellow-80: #f7dc1f;
  --yellow-70: #e1bf0c;
  --yellow-60: #c19d18;
  --yellow-50: #a4780e;
  --yellow-40: #895401;
  --yellow-30: #6b3d13;
  --yellow-20: #472b0d;
  --yellow-10: #281901;

  /* green */
  --green-97: #eefdee;
  --green-90: #c4f3c2;
  --green-80: #8fdc8e;
  --green-70: #62bd63;
  --green-60: #43ac47;
  --green-50: #318835;
  --green-40: #357136;
  --green-30: #2e542e;
  --green-20: #233823;
  --green-10: #152114;

  /* teal */
  --teal-97: #effbfd;
  --teal-90: #c1eef4;
  --teal-80: #77d8e4;
  --teal-70: #12c1d2;
  --teal-60: #00a6b4;
  --teal-50: #008692;
  --teal-40: #136f79;
  --teal-30: #18535a;
  --teal-20: #0d363b;
  --teal-10: #002226;

  /* blue */
  --blue-97: #f2faff;
  --blue-90: #cfe7fd;
  --blue-80: #a8ccef;
  --blue-70: #76b2ed;
  --blue-60: #5292f1;
  --blue-50: #2d75e5;
  --blue-40: #1a59c8;
  --blue-30: #25438f;
  --blue-20: #243056;
  --blue-10: #181c2b;

  /* indigo */
  --indigo-97: #f8f7fe;
  --indigo-90: #e4e0f8;
  --indigo-80: #c6bfee;
  --indigo-70: #aca0e6;
  --indigo-60: #957de8;
  --indigo-50: #8059e4;
  --indigo-40: #693fc6;
  --indigo-30: #4e358e;
  --indigo-20: #362c57;
  --indigo-10: #1e1636;

  /* purple */
  --purple-97: #fdf6fc;
  --purple-90: #f2dbf2;
  --purple-80: #e4b7ea;
  --purple-70: #d693e0;
  --purple-60: #c66ed9;
  --purple-50: #b543d0;
  --purple-40: #8c3ca2;
  --purple-30: #663473;
  --purple-20: #412a48;
  --purple-10: #241a27;



  /* These will eventually be deprecated. For now they have been remapped to the base styles above. Use functional names like "text-primary" or the root names above */
  --black: var(--neutral-00);
  --white: var(--neutral-100);

  /* New base styles for these colours will come */
  --svg-filter-grey: invert(26%) sepia(19%) saturate(0%) hue-rotate(266deg) brightness(106%) contrast(94%);
  --svg-filter-inbox: invert(76%) sepia(9%) saturate(153%) hue-rotate(169deg) brightness(95%) contrast(90%);
  --svg-filter-black: invert(0%) sepia(4%) saturate(0%) hue-rotate(309deg) brightness(93%) contrast(107%);
  --svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(105%) contrast(101%);
  --svg-filter-blue: invert(79%) sepia(56%) saturate(7329%) hue-rotate(191deg) brightness(102%) contrast(94%);
}

/* default THEME colors */

:host > *,
:root {

  /* FOUNDATIONS */

  /* Naming syntax
    We use the following order when naming css properties. The "default" text can be omitted.

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  default       default   default     default     default
    text        button        error     selected    primary     hover
    icon        galleryList   success               secondary   active
    border      toolbar       info


    Button example:

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    background  button        default   default     secondary   hover
    background-button-secondary-hover

    PROPERTY    uiELEMENT     ROLE      SELECTED    PROMINENCE  INTERACTION
    text        button        default   default     primary     active
    text-button-primary-active
/*

  /* Utility alpha classes */
  --u-alpha-100: rgba(40,49,59,0.03);
  --u-alpha-200: rgba(40,49,59,0.06);
  --u-alpha-300: rgba(40,49,59,0.09);
  --u-alpha-400: rgba(40,49,59,0.12);
  --u-alpha-500: rgba(40,49,59,0.15);

  --u-alpha-blue-100: rgba(26,89,200,0.03);
  --u-alpha-blue-200: rgba(26,89,200,0.06);
  --u-alpha-blue-300: rgba(26,89,200,0.09);
  --u-alpha-blue-400: rgba(26,89,200,0.12);
  --u-alpha-blue-500: rgba(26,89,200,0.15);

  --u-alpha-red-100: rgba(216,64,58,0.03);
  --u-alpha-red-200: rgba(216,64,58,0.06);
  --u-alpha-red-300: rgba(216,64,58,0.09);
  --u-alpha-red-400: rgba(216,64,58,0.12);
  --u-alpha-red-400: rgba(216,64,58,0.15);

  --focus-ring-color: var(--blue-60);


  /* Text */
  --text-primary: var(--neutral-20);
  --text-secondary: var(--neutral-45);
  --text-tertiary: var(--neutral-60);
  --text-placeholder: var(--neutral-65);
  --text-disabled: var(--neutral-75);
  --text-inverse: var(--neutral-90); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-50);
  --text-backlink: var(--indigo-40);
  --text-error: var(--red-50);
  --text-success: var(--green-50);

  /* Icons */
  --icon-primary: var(--neutral-25);
  --icon-secondary: var(--neutral-45);
  --icon-tertiary: var(--neutral-60);
  --icon-disabled: var(--neutral-75);
  --icon-interactive: var(--blue-50);
  --icon-danger: var(--red-50);
  --icon-success: var(--green-50);
  --icon-inverse: var(--neutral-97);
  --icon-faint: var(--neutral-90);

  /* Extension bar */
  --extension-bar-background-color: var(--neutral-97);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--black);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Text Selection */
  --selection-color: rgba(0, 114, 255, 0.3);

  /* Borders */
  --border-primary: var(--neutral-80);
  --border-secondary: var(--neutral-90);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-60);

  /* Backgrounds */
  --background-primary: var(--neutral-100);
  --background-secondary: var(--neutral-90);
  --background-tertiary: var(--neutral-95);
  --background-inverse: var(--neutral-10);
  --background-canvas: var(--neutral-97);
  --background-elevated: var(--neutral-100);
  --background-backdrop: var(--u-alpha-300);
  --background-dragging: rgba(f, f, f, 0.7);
  --background-interactive: var(--blue-50);
  --background-error: var(--red-97);
  --background-bulk-actions-header: var(--blue-90);


  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1px 4px rgba(60, 64, 67, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1.5px 4px rgba(60, 64, 67, 0.1), 0px 3px 10px rgba(60, 64, 67, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 3px 5px rgba(60, 64, 67, 0.1), 0px 6px 24px rgba(60, 64, 67, 0.2);
  --shadow-400: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 5px 12px rgba(60, 64, 67, 0.1), 0px 12px 32px rgba(60, 64, 67, 0.2), 0px 20px 96px rgba(60, 64, 67, 0.1);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-90);
  --reading-progress-max-background: var(--neutral-75);
  --reading-progress-point: var(--neutral-40);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --background-button-secondary-disabled: var(--u-alpha-200);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background: rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: #2675DE;
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.1);
  --text-button-accent-subtle-disabled-text: rgba(177, 186, 196, 1);

  --btn-secondary: rgba(235, 237, 238, 0.65); /* used for blur buttons? */

  /* blue */
  --background-button-blue: var(--blue-50);
  --background-button-blue-hover: var(--blue-40);
  --background-button-blue-active: var(--blue-30);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--white);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-width: 208px;
  --document-card-border: var(--border-secondary-alpha);
  --document-card-border-divider: var(--white);
  --document-card-focus-border-color: var(--focus-ring-color);
  --document-card-border-radius: 8px;
  --document-card-background: #fff;
  --document-card-background--hover: var(--document-card-background);
  --document-card-book-image-container-background: var(--background-canvas);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.03), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.2), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.0715329), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.0484671);
  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.00), 0px 1.5px 4px rgba(60, 64, 67, 0.03), 0px 3px 10px rgba(60, 64, 67, 0.1);

  /* Link card */
  --link-card-background: var(--document-card-background);
  --link-card-border-radius: var(--document-card-border-radius);
  --link-card-border: var(--border-secondary-alpha);
  --link-card-border--hover: var(--border-primary);


  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--blue-97);
  --sidebar-button-icon-color: var(--icon-secondary);
  --sidebar-inbox-nav-background: #fff;
  --hide-sidebar-button-background: var(--neutral-95);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) #ededed;
  --sidebar-logo-color: #000;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-97);
  --image-placeholder-shadow-color: var(--neutral-85);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--background-tertiary);

  /* Popovers */
  --edit-tags-form-focused-option-background: rgba(43, 46, 55, 0.04);

  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-90);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-40);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: #fff;

  /* Tag */
  --tag-background: var(--u-alpha-200);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-70);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow-width: 18px;

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-97);
  --cmd-palette-cmd-container: var(--neutral-97);
  --cmd-palette-section-title: var(--neutral-97);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-80);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-row-border: var(--blue-50);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.04) inset;
  --cmd-palette-context-item-background: var(--background-tertiary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: var(--icon-secondary);

  /* Modal */
  --modal-z-index: 9999;

  /* Quoteshot modal */
  --quoteshot-modal-backdrop: rgba(40, 49, 59, 0.59);
  --quoteshot-modal-background: var(--neutral-00);
  --quoteshot-modal-settings-background: var(--neutral-10);
  --quoteshot-interactive-border: var(--blue-60);
  --quoteshot-ratio-border-inactive: var(--neutral-70);
  --quoteshot-ratio-border-active: var(--neutral-95);
  --quoteshot-save-button-text: var(--neutral-90);
  --quoteshot-save-button-background: rgba(92, 105, 119, 0.26);
  --quoteshot-share-button-text: var(--neutral-00);
  --quoteshot-share-button-background: var(--blue-70);
  --quoteshot-share-dropdown-background: var(--neutral-20);
  --quoteshot-share-dropdown-hover: rgba(110,120,131,0.10);
  --quoteshot-share-dropdown-text: var(--neutral-90);

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(240, 241, 242, 0.9);
  --wisereads-modal-background: var(--background-tertiary);
  --wisereads-modal-card-background: var(--background-elevated);
  --wisereads-modal-card-border-hover: transparent;
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.10);

  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-100);

  /* Find in document matches LIGHT MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.1);
  --find-in-document-match-active: rgba(22, 148, 245, 0.15);

  /* Inbox */

  --inbox-sidebar-background: var(--background-canvas);
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(80%) contrast(100%) saturate(80%) sepia(0.1) brightness(65%) drop-shadow(1px 1px 1px black);
  --inbox-zero-foreground-image-filter:
    contrast(84%)
    brightness(80%)
    drop-shadow(0 0 1px rgba(0,0,0,0))
    opacity(100%)
    saturate(25%);
  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(400%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(90%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-black);

  --document-list-box-shadow: inset 0 53px 6px -54px var(--neutral-65);
  --inbox-container-drop-shadow: 0px 8px 20px rgb(0 0 0 / 8%), 0px -1px 2px rgb(0 0 0 / 8%);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color: var(--neutral-90);
  --scrollbar-color-hover: var(--neutral-80);

  --separator-color: rgba(0, 0, 0, 0.1);

  --status-dot--unopened-color: var(--text-interactive);

  --toast-background: #151C23;
  --toast-background--error: var(--red-20);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-border-radius: 6px;
  --toast-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  --toast-max-width: calc(var(--s1)*40);
  --toast-min-height: calc(var(--s1)*4.4);
  --toast-font-size: var(--font-size-base);
  --toast-gap: var(--s1);
  --toast-icon-height: var(--s2);
  --toast-icon-circle-fill: var(--icon-inverse);
  --toast-icon-circle-fill--error: var(--toast-icon-circle-fill);
  --toast-progress-bar-color: var(--neutral-70);
  --toast-progress-bar-color--error: var(--red-50);
  --toast-progress-bar-color--info: var(--blue-60);
  --toast-progress-bar-color--success: var(--green-60);
  --toast-progress-bar-color--warning: var(--orange-70);
  --toast-text-color: var(--white);
  --toast-text-color-error: var(--toast-text-color);
  --toast-button-color: var(--white);
  --toast-button-color--error: var(--white);
  --toast-button-color--info: var(--white);
  --toast-button-color--success: var(--white);
  --toast-button-color--warning: var(--white);

  --tooltip-background--default: #3E4046;
  --tooltip-background--error: var(--red-10);
  --tooltip-background--info: var(--blue-10);
  --tooltip-background--success: #021100;
  --tooltip-background--warning: #4c2b00;
  --tooltip-color--default: var(--text-inverse);
  --tooltip-shortcut-background: var(--neutral-40);
  --tooltip-shortcut-color:var(--text-inverse);

  --document-list-focus-color: var(--u-alpha-100);

  --primary-icon-filter: var(--svg-filter-black);

  --action-button-border-color: var(--neutral-85);
  --action-button-background: var(--neutral-97);
  --action-button-shadow: var(--neutral-85);
  --action-button-svg-color: var(--svg-filter-grey);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--white);
  --metadata-input-focus-background: var(--white);
  --metadata-footer-button-background: rgba(255, 255, 255, 0.25);
  --metadata-footer-color: var(--white);
  --notebook-highlight-color: #344255;

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(235, 237, 238, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-tertiary);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--icon-primary);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-secondary);
  --inbox-header-tab-active-count-text-color: var(--text-secondary);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-tertiary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: var(--icon-primary);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: var(--border-secondary);
  --table-of-contents-bar-active-color: #B5C3FB;

  --search-input-background: var(--u-alpha-200);

  --placeholder-fill-color: #A1AAC4;
  --placeholder-bg-1: url("/assets/placeholder-bg-light-1.7ea5e3de.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-light-2.2d35b895.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-light-3.930a7a17.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-light-4.f53e8fcb.png");

  --empty-feed-image: url("/assets/empty-state-feed-light.3b1ccfe5.png");

  /* Document share */
  --document-share-width-popovers-float-at: 700px;

  /* Radio group */
  --radio-group-indicator-width: 20px;
  --radio-group-indicator-background-color: var(--surface-primary);
  --radio-group-indicator-border-color: var(--neutral-60);
  --radio-group-indicator-active-color: var(--background-interactive);
  --radio-group-indicator-hover-color: var(--neutral-97);

  /* Badge */
  --badge-background-color: var(--green-90);
  --badge-text-color: var(--green-30);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--text-secondary);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--white);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(60, 64, 67, 0.2),
    0px 1.5px 4px 0px rgba(60, 64, 67, 0.1),
    0px 0px 0px 1px rgba(60, 64, 67, 0.05);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-80);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--white);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);
  --box-shadow-color: rgba(0, 0, 0, 0.15);


  --file-dropzone-background: rgba(0, 0, 0, 0.7);
  --file-dropzone-color: var(--white);

  --transcript-teleprompt-background: rgba(89,142,244, .3);
  --transcript-teleprompt-color: black;

  --onboarding-background-image: url("/onboarding/onboarding-background.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgba(19, 13, 40, 0.0199343), 0px 3.75998px 27.991px rgba(19, 13, 40, 0.0289288), 0px 2.01027px 14.9653px rgba(19, 13, 40, 0.0364916), 0px 1.12694px 8.38944px rgba(19, 13, 40, 0.0438708), 0px 0.598509px 4.45557px rgba(19, 13, 40, 0.052216), 0px 0.249053px 1.85406px rgba(19, 13, 40, 0.07);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04.webp");

  --checkbox-icon-color: var(--icon-inverse);
}

@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {

:host > *,
:root {
    --default-blurred-button-background: #F2F3F4;
    --default-blurred-button: 0px;
}
  }

:host > * .high-contrast, :root .high-contrast {
    --highlight-background-color--normal: hsl(50deg 96.24% 67.14%);
    --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 75%);
    --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
    --highlight-background-color--active: hsl(50, 100%, 50%);

    --highlight-image-background-color--normal: hsl(50, 100%, 50%);
    --highlight-image-background-color--active: hsl(50, 100%, 50%);
    --selection-color: rgb(74, 153, 255);
    --text-primary: black;
  }

.theme--dark {

  /* FOUNDATIONS */

  /* Utility alpha classes */
  --u-alpha-100: rgba(110,120,131,0.10); /* neutral-50 equivalent */
  --u-alpha-200: rgba(110,120,131,0.15);
  --u-alpha-300: rgba(110,120,131,0.20);
  --u-alpha-400: rgba(110,120,131,0.25);
  --u-alpha-500: rgba(110,120,131,0.30);

  --u-alpha-blue-100: rgba(45,117,229,0.10); /* blue-50 equivalent */
  --u-alpha-blue-200: rgba(45,117,229,0.15);
  --u-alpha-blue-300: rgba(45,117,229,0.20);
  --u-alpha-blue-400: rgba(45,117,229,0.25);
  --u-alpha-blue-500: rgba(45,117,229,0.30);

  --u-alpha-red-100: rgba(216,64,58,0.10); /* red-50 equivalent */
  --u-alpha-red-200: rgba(216,64,58,0.15);
  --u-alpha-red-300: rgba(216,64,58,0.20);
  --u-alpha-red-400: rgba(216,64,58,0.25);
  --u-alpha-red-500: rgba(216,64,58,0.30);



  /* Text */
  --text-primary: var(--neutral-90);
  --text-secondary: var(--neutral-65);
  --text-tertiary: var(--neutral-50);
  --text-placeholder: var(--neutral-45);
  --text-disabled: var(--neutral-40);
  --text-inverse: var(--neutral-20); /* for use on dark backgrounds while in light mode */
  --text-interactive: var(--blue-70);
  --text-backlink: var(--indigo-70);
  --text-error: var(--red-60);
  --text-success: var(--green-60);

  /* Icons */
  --icon-primary: var(--neutral-80);
  --icon-secondary: var(--neutral-70);
  --icon-tertiary: var(--neutral-45);
  --icon-placeholder: var(--neutral-45);
  --icon-disabled: var(--neutral-40);
  --icon-interactive: var(--blue-70);
  --icon-danger: var(--red-60);
  --icon-success: var(--green-60);
  --icon-inverse: var(--neutral-20);
  --icon-faint: var(--neutral-30);

  /* Highlights */
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

  --highlight-text-color: var(--white);
  --highlight-text-pre-color: var(--white);
  --highlight-text-pre-color--active: var(--white);

  /* Borders */
  --border-primary: var(--neutral-65);
  --border-secondary: var(--neutral-20);
  --border-secondary-alpha: var(--u-alpha-400);
  --border-tertiary-alpha: var(--u-alpha-200);
  --border-focus: var(--blue-60);
  --border-error: var(--red-40);

   /* Backgrounds */
  --background-primary: var(--neutral-10);
  --background-secondary: var(--neutral-15);
  --background-tertiary: var(--neutral-20);
  --background-inverse: var(--neutral-90);
  --background-canvas: var(--neutral-07);
  --background-elevated: var(--neutral-20);
  --background-backdrop: rgba(0,0,0,0.4);
  --background-dragging: rgba(40, 49, 59, 0.7);
  --background-interactive: var(--blue-70);
  --background-error: var(--red-10);
  --background-bulk-actions-header: var(--blue-30);

  /* Shadows */
  --shadow-100: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-200: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1.5px 4px rgba(0, 0, 0, 0.1), 0px 3px 10px rgba(0, 0, 0, 0.2);
  --shadow-300: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 3px 5px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.25);
  --shadow-400: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 5px 12px rgba(0, 0, 0, 0.1), 0px 12px 32px rgba(0, 0, 0, 0.2), 0px 20px 96px rgba(0, 0, 0, 0.4);


  /* COMPONENTS */

  /* Progress bar */
  --reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
  --reading-progress-background: var(--neutral-20);
  --reading-progress-max-background: var(--neutral-35);
  --reading-progress-point: var(--neutral-90);

  /* Buttons */

  /* primary - deprecated */
  --primary-button-background: var(--u-alpha-blue-200); /* deprecated */
  --primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
  --primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
  --primary-button-color: var(--text-primary); /* deprecated */

  /* primary */
  --background-button-primary: var(--u-alpha-blue-200);
  --background-button-primary-hover: var(--u-alpha-blue-300);
  --background-button-primary-active: var(--u-alpha-blue-400);
  --text-button-primary: var(--text-primary);
  --text-button-primary-disabled: var(--text-disabled);

  /* secondary */
  --background-button-secondary: var(--u-alpha-200);
  --background-button-secondary-hover: var(--u-alpha-300);
  --background-button-secondary-active: var(--u-alpha-400);
  --text-button-secondary: var(--text-primary);
  --text-button-secondary-disabled: var(--text-disabled);

  /* accent */
  --text-button-accent-subtle-background:rgba(45, 117, 229, 0.23);
  --text-button-accent-subtle-text: rgba(124, 174, 236, 1);
  --text-button-accent-subtle-disabled-background: rgba(110, 120, 130, 0.2);
  --text-button-accent-subtle-disabled-text: rgba(84, 96, 108, 1);

  --btn-secondary: rgba(62, 72, 83, 0.7); /* used for blur buttons? */

  /* blue button */
  --background-button-blue: var(--blue-60);
  --background-button-blue-hover: var(--blue-70);
  --background-button-blue-active: var(--blue-80);
  --background-button-blue-disabled: var(--u-alpha-200);
  --text-button-blue: var(--black);
  --text-button-blue-disabled: var(--text-disabled);

  /* caution */
  --background-button-caution: var(--u-alpha-red-200);

  /* Document card */
  --document-card-border: rgba(0,0,0,0);
  --document-card-border-divider: rgba(0,0,0,.2);
  --document-card-height: var(--background-elevated);
  --document-card-background: var(--neutral-15);
  --document-card-background--hover: var(--neutral-20);
  --document-card-book-image-container-background: var(--background-secondary);
  --document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.43), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.5), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.3715), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.3485), inset 0px 1px 0px rgba(255, 255, 255, 0.2);

  --document-card-hover-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.00), 0px 1.5px 4px rgba(0, 0, 0, 0.03), 0px 2px 8px rgba(0, 0, 0, .3);

  /* Link card */
  --link-card-border--hover: var(--neutral-40);

  /* Donut progress indicator */
  --donut-progress-indicator-center-color: var(--document-card-background);

  /* Sidebar */
  --sidebar-background: var(--background-canvas);
  --empty-sidebar-background: var(--neutral-07);
  --hide-sidebar-button-background: #445064;
  --sidebar-button-icon-color: var(--inbox-icon-color);
  --sidebar-inbox-nav-background: var(--neutral-20);
  --thumbnail-loading-background: linear-gradient( 100deg, rgba(62, 72, 83, 0) 40%, rgba(62, 72, 83, .5) 50%, rgba(62, 72, 83, 0) 60% ) var(--u-alpha-200);
  --sidebar-logo-color: #fff;

  /* Image placeholders */
  --image-placeholder-color: var(--neutral-80);
  --image-placeholder-shadow-color: var(--black);

  /* Main background surfaces */
  --background-color: var(--background-primary);
  --content-background-color: var(--background-primary);
  --code-background-color: var(--neutral-25);

  /* Popovers */
  --edit-tags-form-focused-option-background: var(--neutral-25);
  --main-highlighter-popover-action-hover-background: var(--u-alpha-100);
  --main-highlighter-popover-delete-highlight-action-background: var(--yellow-30);
  --main-highlighter-popover-delete-highlight-icon-color: var(--yellow-70);
  --highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);

  /* Sort menu */
  --sort-menu-background: var(--background-elevated);

  /* Misc */
  --content-secondary-color: var(--text-secondary);
  --focus-indicator-color: var(--blue-50);
  --section-border-color: var(--border-secondary-alpha);
  --app-side-drop-shadow: rgba(40, 40, 40, 0.75);

  /* Appearance panel */
  --appearance-panel-background: var(--background-elevated);
  --appearance-panel-item-hover-background: var(--u-alpha-100);

  /* Command palette */
  --cmd-palette-background: var(--neutral-15);
  --cmd-palette-cmd-container: var(--neutral-15);
  --cmd-palette-section-title: var(--neutral-15);
  --cmd-palette-row-hover: var(--u-alpha-100);
  --cmd-palette-drop-shadow: var(--shadow-400);
  --cmd-palette-scrollbar: var(--neutral-40);
  --cmd-palette-key-background: var(--u-alpha-200);
  --cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.16) inset;
  --cmd-palette-context-item-background:var(--background-primary);
  --cmd-palette-context-item-border: var(--border-secondary);
  --cmd-palette-label-color: var(--text-secondary);
  --cmd-palette-close-icon-color: #B6B9BF;

  /* Wisereads doc discovery modal */
  --wisereads-modal-header-background: rgba(31, 39, 47, 0.9);
  --wisereads-modal-background: var(--background-secondary);
  --wisereads-modal-card-background: var(--background-tertiary);
  --wisereads-modal-card-border-hover: var(--border-secondary-alpha);
  --wisereads-modal-button-background: rgba(45, 117, 229, 0.23);

  /* Inbox */

  --inbox-sidebar-background: #12171C;
  --inbox-icon-color: var(--icon-secondary);
  --inbox-icon-color-disabled: var(--icon-disabled);
  --inbox-icon-color-active: var(--icon-primary);

  --inbox-zero-background-image-filter: opacity(30%) saturate(0%);
  --inbox-zero-foreground-image-filter:
    brightness(300%)
    opacity(50%)
    contrast(30%)
    saturate(100%);

  --inbox-zero-header-items-filter:
    contrast(70%)
    brightness(200%)
    hue-rotate(0)
    drop-shadow(0 0 2px rgba(0,0,0,1))
    opacity(70%)
    saturate(30%);

  --inbox-zero-sidebar-items-filter:
    contrast(98%)
    brightness(500%)
    hue-rotate(0)
    drop-shadow(0px 0px 5px rgba(0,0,0,1))
    opacity(100%)
    saturate(300%);

  --nav-item-filter: var(--svg-filter-inbox);
  --nav-item-active-filter: var(--svg-filter-white);

  --document-list-box-shadow: inset -2px 53px 16px -54px var(--black);
  --inbox-container-drop-shadow:  0px 8px 20px rgba(0, 0, 0, 0.08), 0px -1px 2px rgba(0, 0, 0, 0.08);

  --import-link-color: var(--blue-50);

  --tag-color: var(--u-alpha-200);
  --tag-text-color: var(--text-secondary);

  --scrollbar-color:var(--neutral-40);
  --scrollbar-color-hover: var(--neutral-50);

  --separator-color: rgba(255, 255, 255, 0.1);

  --toast-background: var(--white);
  --toast-background--error: var(--red-90);
  --toast-background--info: var(--toast-background);
  --toast-background--success: var(--toast-background);
  --toast-background--warning: var(--toast-background);
  --toast-button-color: var(--text-inverse);
  --toast-button-color--error: var(--text-error);
  --toast-button-color--info: var(--toast-button-color);
  --toast-button-color--success: var(--toast-button-color);
  --toast-button-color--warning: var(--toast-button-color);
  --toast-box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1), 0 2px 5px 0 rgba(255, 255, 255, 0.05);
  --toast-icon-circle-fill--error: var(--icon-danger);
  --toast-text-color: var(--text-inverse);
  --toast-text-color--error: var(--red-20);

  --tooltip-background--default: var(--white);
  --tooltip-color--default: #202226;
  --tooltip-shortcut-background: #ECECED;
  --tooltip-shortcut-color: rgba(32, 34, 38, 0.64);

  --document-list-focus-color: var(--u-alpha-100);


  --primary-icon-filter: var(--svg-filter-white);
  --action-button-border-color: var(--neutral-15);
  --action-button-background: var(--neutral-10);
  --action-button-shadow: var(--black);
  --action-button-svg-color: var(--svg-filter-white);


  /* PDF Search Bar */
  --document-search-input-background: var(--neutral-00);

  /* Find in document matches DARK MODE */
  --find-in-document-match-passive: rgba(108, 120, 131, 0.42);
  --find-in-document-match-active: rgba(22, 148, 245, 0.3);

  /* Metadata */
  --summary-text: var(--text-primary);
  --metadata-title: var(--text-secondary);
  --metadata-value: var(--text-primary);
  --metadata-input-background: var(--background-secondary);
  --metadata-input-focus-background: var(--background-primary);
  --metadata-footer-button-background: rgba(43, 46, 55, 0.05);
  --metadata-footer-color: var(--background-canvas);
  --notebook-highlight-color: var(--black);

  --default-button-text-color: var(--text-primary);
  --default-button-background: var(--u-alpha-200);
  --default-button-hover-background: var(--u-alpha-300);
  --default-button-active-background: var(--u-alpha-400);
  --default-blurred-button-background: rgba(62, 72, 83, 0.7);
  --default-blurred-button: 20px;

  --inbox-header-tab-text-color: var(--text-grey-medium);
  --inbox-header-active-tab-text-color: var(--text-primary);
  --inbox-header-search-icon: var(--white);
  --inbox-header-tab-count-background: var(--u-alpha-200);
  --inbox-header-tab-count-text-color: var(--text-grey-lighter);
  --inbox-header-tab-active-count-text-color: var(--text-grey-darker);

  --document-list-title-color: var(--text-primary);
  --document-list-item-tertiary-text-color: var(--text-secondary);
  --document-list-doc-icon-color: var(--icon-secondary);
  --document-list-info-color: var(--text-secondary);
  --document-list-action-button-color: rgba(255, 255, 255, 0.8);

  --table-of-contents-item-color: var(--text-secondary);
  --table-of-contents-bar-color: #464851;
  --table-of-contents-bar-active-color: #4E94FD;

  --search-input-background: var(--u-alpha-200);

  --transcript-teleprompt-background: rgba(89,142,244, .4);
  --transcript-teleprompt-color: white;

  --placeholder-fill-color: #7F8494;
  --placeholder-bg-1: url("/assets/placeholder-bg-dark-1.6e58967f.png");
  --placeholder-bg-2: url("/assets/placeholder-bg-dark-2.9f7c66c5.png");
  --placeholder-bg-3: url("/assets/placeholder-bg-dark-3.3fb3a36d.png");
  --placeholder-bg-4: url("/assets/placeholder-bg-dark-4.1b679a5e.png");

  --empty-feed-image: url("/assets/empty-state-feed-dark.14291346.png");

  /* Radio group */

  --radio-group-indicator-hover-color: var(--neutral-20);

  /* Badge */
  --badge-background-color: var(--green-30);
  --badge-text-color: var(--green-90);

  /* TTS / audio player */
  --tts-trigger-button-color: var(--neutral-70);
  --tts-trigger-border-color: var(--u-alpha-300);

  --tts-player-background: var(--neutral-10);
  --tts-player-box-shadow:
    0px 3px 10px 0px rgba(0, 0, 0, 0.3),
    0px 1.5px 4px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  --tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);

  /* Slider */
  --slider-track-background: var(--neutral-30);
  --slider-range-background: var(--neutral-50);
  --slider-hover-range-background-color: var(--blue-50);
  --slider-range-border-right-color: var(--neutral-10);
  --slider-thumb-background: var(--white);
  --slider-thumb-box-shadow:
    0px 1px 4px 0px rgba(60, 64, 67, 0.4),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* These text variables will eventually be deprecated */
  --text: var(--text-primary);
  --text-grey-lighter: var(--neutral-80);
  --text-grey: var(--text-secondary);
  --text-grey-medium: var(--text-secondary);
  --text-grey-lightish: var(--neutral-70);
  --text-grey-lighter: var(--neutral-80);
  --text-grey-dark: var(--text-primary);
  --text-grey-darker: var(--text-primary);

  --onboarding-background-image: url("/onboarding/onboarding-background-dark.webp");
  --onboarding-container-box-shadow: 0px 9px 67px rgb(19 13 40 / 20%), 0px 3.75998px 27.991px rgb(19 13 40 / 12%), 0px 2.01027px 14.9653px rgb(19 13 40 / 4%), 0px 1.12694px 8.38944px rgb(9 6 18 / 19%), 0px 0.598509px 4.45557px rgb(7 7 7 / 40%), 0px 0.249053px 1.85406px rgb(6 4 12 / 18%);
  --onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01-dark.webp");
  --onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02-dark.webp");
  --onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03-dark.webp");
  --onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04-dark.webp");

  --checkbox-icon-color: var(--neutral-00);
}

@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {

.theme--dark {
    --default-blurred-button-background: #2B323A;
    --default-blurred-button: 0px;
}
  }

.theme--dark.high-contrast {
  --text-primary: white;
}

/* Component variables (NO COLORS) */

:host > *,
:root {
  --animation-duration--imply-interactivity: 0;
  --animation-duration--move: 0;
  --animation-duration--reveal: 0;
  --content-gutter: var(--s3);
  --reading-editable-line-length: 648px;
  --document-list-item-height: calc(var(--f1) * 11.3);
  --document-list-item-height_js: 113px; /* JS can't parse the above easily */
  --document-list-item-horizontal-padding: calc(var(--s1) * 1.7);
  --document-list-image-height: 62px;
  --document-list-image-width: 62px;
  --document-list-padding-top: 8px;
  --focus-indicator-width: 3px;
  --inbox-header-height: 65px;
  --inbox-header-height_js: 65px; /* JS can't parse the above easily */
  --inbox-sidebar-width: 240px;
  --person-card-image-size: 40px;
  --sidebar-padding-vertical: 0.5rem;
  --sidebar-nav-height: 64px;
  --sidebar-padding-horizontal: 24px;
  --sidebar-padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal);

  --popover-max-width: 305px;
  --popover-background: var(--background-elevated);
  --popover-z-index: 100;
  --popover-focused-z-index: 101;

  --sidebars-max-width: 296px;
  --progress-bar-large-height: 3px;

  --table-of-contents-font-size: 0.875rem;
  --table-of-contents-bar-margin-right: 16px;
  --table-of-contents-bar-height: 4px;
  --table-of-contents-max-bar-width: 32px;
  --table-of-contents-width-diff: 8px;
  --scrollbar-border-radius: 12px;
  --scrollbar-thickness: 14px;
  --status-dot-size: 6px;
  --appearance-panel-width: 292px;
  --feed-icon-in-palette: 16px;
  --action-button-border-radius: 31px;
  --theme-transition-time: 0s;
  --panels-transition-time: 0.2s;

  --tts-player-height: 96px;
  --js__tts-player-current-height: 0; /* Updated by JS */
  --safe100vh: calc(100vh - var(--js__tts-player-current-height));
  --safeBottom0: calc(0px + var(--js__tts-player-current-height));
}

@media (prefers-reduced-motion: no-preference) {

:host > *,
:root {
    --animation-duration--imply-interactivity: 0.15s;
    --animation-duration--move: 0.25s;
    --animation-duration--reveal: 0.15s;
}
  }

:host > * .high-contrast, :root .high-contrast {
    --highlight-text-color: black;
  }

/*
  Pseudo-elements are not meant to react to pointer events but we found an issue in Firefox which was
  fixed by adding `pointer-events: none`, so let's make sure it's done for all.
*/

:scope::before,:scope::after,
  ::before,
  ::after {
    pointer-events: none !important;
  }

/* Reset html elements. */

.document-content div, .document-content span, .document-content applet, .document-content object, .document-content iframe, .document-content h1, .document-content h2, .document-content h3, .document-content h4, .document-content h5, .document-content h6, .document-content p, .document-content blockquote, .document-content pre, .document-content a, .document-content abbr, .document-content acronym, .document-content address, .document-content big, .document-content cite, .document-content code, .document-content del, .document-content dfn, .document-content em, .document-content img, .document-content ins, .document-content kbd, .document-content q, .document-content s, .document-content samp, .document-content small, .document-content strike, .document-content strong, .document-content tt, .document-content var, .document-content b, .document-content u, .document-content i, .document-content center, .document-content dl, .document-content dt, .document-content dd, .document-content ol, .document-content ul, .document-content li, .document-content fieldset, .document-content form, .document-content label, .document-content legend, .document-content table, .document-content caption, .document-content tbody, .document-content tfoot, .document-content thead, .document-content tr, .document-content th, .document-content td, .document-content article, .document-content aside, .document-content canvas, .document-content details, .document-content embed, .document-content figure, .document-content figcaption, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content output, .document-content ruby, .document-content section, .document-content summary, .document-content time, .document-content mark, .document-content audio, .document-content video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

.document-content style {
    display: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
  }

/* HTML5 display-role reset for older browsers */

.document-content article, .document-content aside, .document-content details, .document-content figcaption, .document-content figure, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content section {
    display: block;
  }

.document-content ol, .document-content ul {
    list-style: none;
  }

.document-content blockquote, .document-content q {
    quotes: none;
  }

.document-content blockquote:before, .document-content blockquote:after, .document-content q:before, .document-content q:after {
    content: '';
    content: none;
  }

.document-content table {
    border-collapse: collapse;
    border-spacing: 0;
  }

.document-content span[data-rw-start] {
    cursor: pointer;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
  }

.document-content span[data-rw-start]:hover {
      border-radius: 4px;
      background: var(--u-alpha-400);
      color: var(--transcript-teleprompt-color);
    }

.document-content span[data-rw-start]:has(.rw-highlight:hover) {
      background: none;
      color: inherit;
    }

@media (max-width: 768px) {
      .document-content span.touchstart[data-rw-start] {
        border-radius: 4px;
        background: var(--u-alpha-400) !important;
        color: var(--transcript-teleprompt-color) !important;
      }

      .document-content span[data-rw-start]:hover {
        background: none;
        color: inherit;
      }
    }

/* End of Reset */

:root #document-header {
  --reading-text-primary: #0C1117;
  --reading-border: #F0F1F2;
  --reading-icon: #606C79;
}

.theme--dark #document-header {
  --reading-text-primary: #F0F1F2;
  --reading-border: rgba(92, 105, 119, 0.3);
  --reading-icon: #F0F1F2;
}

.theme--dark .document-content  img, .theme--dark .document-content figure img {
  opacity: .7;
  transition: opacity 500ms;
}

:root .document-content { /* Light theme */

  /* Reading colours */
  --reading-text-title: var(--black);
  --reading-text-primary: var(--text-primary);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-inverse);
  --reading-text-link: 13 30 142;
  --reading-text-link-highlight: 0 0 0;
  --reading-text-primary-link-highlight: var(--black);
  --reading-text-code: var(--red-40);

  /* Surface colors */
  --reading-surface-primary-inverse: #1E272F;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.06);
  --reading-surface-code: #333C46;

  /* Border colors */
  --reading-border-secondary: rgba(40, 49, 59, 0.12);
  --text-selection-background-color: rgba(70, 147, 254, 0.18);
}

.theme--dark .document-content { /* Dark theme */
  --reading-text-title: var(--white);
  --reading-text-primary: var(--neutral-80);
  --reading-text-secondary: var(--text-secondary);
  --reading-text-primary-inverse: var(--text-primary);
  --reading-text-link: 174 200 241;
  --reading-text-link-highlight: 255 255 255;
  --reading-text-primary-link-highlight: var(--neutral-100);
  --reading-text-code: var(--orange-80);

  /* Surface colors */
  --reading-surface-primary-inverse: #10161D;
  --reading-surface-tertiary: rgba(92, 105, 119, 0.15);
  --reading-surface-code: #E2E8F0;

  /* Border colors */
  --reading-border-secondary: rgba(92, 105, 119, 0.3);
}

.theme--dark.high-contrast .document-content {
  --reading-text-primary: var(--text-primary);
}

.theme--sepia .document-content {
  --reading-text-title: #3C2D23;
  --reading-text-primary: #3C2D23;
  --reading-text-secondary: #7A6755;
}

:root {
  --reading-editable-font-size: 20;
  --reading-editable-text-justify: start;
  --reading-editable-line-height: 1.6; /* should land on 4px increments. 20, 24, 28, 32, 36 */
  --reading-editable-font-family: "Source Serif VF", Georgia, Serif;
  /* auto generate */

  --reading-scale: 1.2;
  --reading-root-size: 16; /* This is to replicate the browser base size for math purposes */

  --reading-base-fs: calc(var(--reading-editable-font-size) / var(--reading-root-size)); /* fs is unitless and is only used for calculations*/
  --reading-base-font-size: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-base-line-height: var(--reading-editable-line-height);
  --reading-base-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);

  /* Caption = table divided by scale */
  --reading-caption-fs: calc(var(--reading-table-fs) / var(--reading-scale)  / var(--reading-scale));
  --reading-caption-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-caption-line-height: var(--reading-editable-line-height);
  --reading-caption-margin: calc(var(--reading-editable-line-height) / calc(var(--reading-root-size) * var(--reading-p-fs)) * 1em);

  /* Table = base size divided by scale */
  --reading-table-fs: calc(var(--reading-base-fs) / var(--reading-scale) );
  --reading-table-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
  --reading-table-line-height: var(--reading-editable-line-height);
  --reading-table-margin: calc(var(--reading-editable-font-size)*.75);

  /* P = base size */
  --reading-p-fs: calc(var(--reading-base-fs));
  --reading-p-font-size: calc(var(--reading-base-fs) * 1rem);
  --reading-p-line-height: var(--reading-editable-line-height);
  --reading-p-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
  --reading-p-margin-v: calc( var(--reading-editable-font-size) / var(--reading-root-size) * calc(var(--reading-editable-line-height) - 0.5) *1rem );


  /* H3 = base size x scale */
  --reading-h3-fs: var(--reading-p-fs);
  --reading-h3-font-size: calc(var(--reading-p-fs) * 1rem);
  --reading-h3-line-height: var(--reading-editable-line-height);
  --reading-h3-margin: calc(var(--reading-h3-line-height) * 1em);

  /* H2 = H3 size x scale */
  --reading-h2-fs: calc(var(--reading-h3-fs) * var(--reading-scale));
  --reading-h2-font-size: calc(var(--reading-h3-fs) * var(--reading-scale) * 1rem);
  --reading-h2-line-height: calc(var(--reading-h3-line-height) * .925);

  /* H1 = H2 size x scale */
  --reading-h1-fs: calc(var(--reading-h2-fs) * var(--reading-scale));
  --reading-h1-font-size: calc(var(--reading-h2-fs) * var(--reading-scale) * 1rem);
  --reading-h1-line-height: calc(var(--reading-h2-line-height) * .925);
  --reading-h1-margin: calc(var(--reading-h1-line-height) * 1em);


  /* Typefaces */
  --reading-font-body: var(--reading-editable-font-family);
  --reading-font-title: var(--reading-editable-font-family);
  --reading-font-caption: "Inter VF", sans-serif;

  --reading-font-monospace: "Roboto Mono VF","SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.is-reader-mobile-app .document-header-title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 32px;
  }

.is-reader-mobile-app .document-header-domain {
    width: 100%;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

.is-reader-mobile-app .header-top-row {
    margin-bottom: var(--spacer-4);
  }

.is-reader-mobile-app hr {
    color: var(--reading-border);
  }

.is-reader-mobile-app .summary-top-line {
    height: 1px;
    background-color: var(--reading-border);
    margin: 18px auto;
    transition: width 0.3s ease-in-out;
    width: 0;
  }

.is-reader-mobile-app .summary-top-line-expanded {
    width: 32px;
  }

.is-reader-mobile-app .summary-section {
    margin-top: 12px;
  }

.is-reader-mobile-app .document-header-mobile-separator {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.is-reader-mobile-app .document-header-mobile-separator::before,
    .is-reader-mobile-app .document-header-mobile-separator::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid var(--reading-border);
    }

.is-reader-mobile-app .document-header-mobile-separator .toggle-icon {
      margin: 8px 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--reading-icon);
      background-color: var(--reading-border);
      border-radius: 50%;
      transition: transform 0.3s ease-in-out;
    }

.is-reader-mobile-app .document-header-mobile-separator .toggle-icon-expanded {
      transform: rotate(180deg);
    }

.is-reader-mobile-app .document-header-metadata-row {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
  }

.is-reader-mobile-app .document-header-metadata-row span {
      font-size: 13px;
      color: var(--text-secondary);
    }

.is-reader-mobile-app .document-header-metadata-row .metadata-author {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 0 1 auto;
    }

.is-reader-mobile-app .document-header-tags {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

#document-header {
  margin-bottom: 0;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  font-family: var(--ui-font);
}

#document-header h1 {
    margin: 0;
    font-size: 40px;
    line-height: 46px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--reading-text-primary);
    font-family: var(--reading-editable-font-family);
    font-feature-settings: "onum" 1;
    font-variation-settings: "opsz" 41; /* optical size needs to be set close to font-size but it can't be the exact same - Safari bug */
    text-rendering: optimizeLegibility;
    text-wrap: balance;
  }

@media (max-width: 768px) {

#document-header {
    margin-bottom: -6px;
}
    #document-header h1 {
      font-size: 32px;
      line-height: 36.8px;
      letter-spacing: -0.015em;
    }

  }

#document-header .header-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--spacer-5);
  }

#document-header .header-source-container {
    flex: 1;
  }

#document-header .document-header-domain {
    display: flex;
    overflow: hidden;

    gap: 12px;
  }

#document-header .document-header-domain span {
      color: var(--text-secondary);
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100%;
      text-align: center;
    }

#document-header .document-header-domain .document-header-domain-favicon, #document-header .document-header-domain svg {
      background-size: cover;
      height: 16px;
      width: 16px;
      fill: var(--icon-secondary);
    }

#document-header hr {
    border: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: var(--border-secondary-alpha);
    margin: 0;
    margin-top: 20px;
  }

@media (max-width: 768px) {

#document-header hr {
      margin-top: 16px;
  }
    }

#document-header .document-header-metadata-row {
    word-break: break-word;
    overflow: hidden;
  }

#document-header .document-header-metadata-row span {
      font-weight: 400;
      font-size: 14px;
    }

#document-header .document-header-metadata-row .document-header-author-content {
      white-space: nowrap;
      margin-right: 8px;
      color: var(--text-secondary);
      /* The true value for line-height should be 20px, but because we want the tags to flow with the author text,
          the tags and author are effectively in one long span that flows properly around the date span which is fixed to the right

        57 = 17px true size of text + 20px * 2 for 20px margin above and below

        if I am correct, the 20px line-height makes no effect anymore, effectively we are using line-height
        when we should use margins, but sadly we cannot pull that off because you cannot create margins between
        two lines of text in one span, thats the job of line height
       */
      line-height: 57px;
    }

@media (max-width: 768px) {

#document-header .document-header-metadata-row .document-header-author-content {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }

#document-header .document-header-metadata-row .document-header-author-content .document-header-author-text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

#document-header .document-header-metadata-row .document-header-published-date {
      float: right;
      white-space: nowrap;
      color: var(--text-secondary);
      /* See above as to why this is 57px */
      line-height: 57px;
    }

@media (max-width: 768px) {

#document-header .document-header-metadata-row .document-header-published-date {
        /* 48 = 16px + 16 * 2 for margins */
        line-height: 48px;
    }
      }

#document-header .document-header-metadata-row .document-header-separator {
      display: inline-flex;
      background: var(--border-primary);
      width: 4px;
      height: 4px;
      min-width: 4px;
      min-height: 4px;
      border-radius: 100%;
      margin: 0 6px;
      margin-bottom: 3px;
    }

#document-header .document-header-tags {
    display: inline-flex;
    flex-wrap: wrap;
  }

#document-header .document-header-tags a {
      margin-right: 4px;
      margin-bottom: 4px;
    }

#document-header .summary-container-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
  }

#document-header .summary-container-expanded {
    grid-template-rows: 1fr;
  }

#document-header .summary-container {
    overflow: hidden;
  }

#document-header .summary-container .summary-content {
      display: flex;
      flex-direction: column;
      margin: 16px 0;
      gap: 8px;
    }

#document-header .summary-container .summary-content .summary-text {
        white-space: pre-line;
        color: var(--reading-text-primary);
        margin: 0;
        font-size: 15px;
        line-height: 20px;
        font-weight: 400;
      }

#document-header .summary-container .summary-content .summary-attribution {
        margin: 0;
        color: var(--text-tertiary);
        font-size: 13px;
        line-height: 18px;
      }

#document-header rw-spacer {
    display: block;
    width: 100%;
  }

#document-header rw-spacer:not([size]) {
    height: var(--spacer-4);
  }

#document-header rw-spacer[size="1"] {
    height: var(--spacer-1);
  }

#document-header rw-spacer[size="2"] {
    height: var(--spacer-2);
  }

#document-header rw-spacer[size="3"] {
    height: var(--spacer-3);
  }

#document-header rw-spacer[size="4"] {
    height: var(--spacer-4);
  }

#document-header rw-spacer[size="5"] {
    height: var(--spacer-5);
  }

#document-header rw-spacer[size="6"] {
    height: var(--spacer-6);
  }

#document-header rw-spacer[size="7"] {
    height: var(--spacer-7);
  }

#document-header rw-spacer[size="8"] {
    height: var(--spacer-8);
  }

.document-content {
  box-sizing: border-box;
  padding: 0 var(--content-gutter) 0; /* needs to be adjusted */
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  font-variation-settings: "opsz" calc(var(--reading-editable-font-size) + 1); /* optical size needs to be set close to font-size but it
   can't be the exact same - Safari bug */
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;

  /* full justification
  text-align: justify; */

  /* hyphenation */
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 3 3;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;

}

@supports (font-kerning: normal) and (font-variant ligatures: common-ligatures contextual) {

.document-content {
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;

}
  }

/* This is required for emulating selection but it breaks the content focus indicator on web */

.document-content.rw-mobile-web-view,
  .document-content.is-emulating-selection {
    position: relative;
  }

.document-content p {
    margin-bottom: var(--reading-p-margin);
    margin-top: var(--reading-p-margin);
  }

.document-content p.rw-hide {
      display: none;
    }

.document-content h1 {
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.019em;
    font-variation-settings: "opsz" calc(var(--reading-h1-fs) * 16 + 1 );
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top: 96px;
  }

.document-content h2 {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: var(--reading-base-margin);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h2-fs) * 16 + 1);
    font-weight: 600;
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }

.document-content h3 {
    font-weight: 600;
    margin-top: calc(var(--reading-base-margin) * 1.5);
    margin-bottom: calc(var(--reading-base-margin) * .5);
    letter-spacing: -0.011em;
    font-variation-settings: "opsz" calc(var(--reading-h3-fs) * 16 + 1);
    text-wrap: balance;
    -webkit-hyphens: none;
            hyphens: none;
    scroll-margin-top:96px;
  }

.document-content h4,
  .document-content h5,
  .document-content h6 {
    font-weight: 600;
    margin-top: var(--reading-p-margin);
    margin-bottom: calc(var(--reading-p-margin) * 0.5);
    scroll-margin-top:96px;
  }

.document-content h2 + * {
    margin-top: 0;
  }

.document-content h3 + * {
    margin-top: 0;
  }

.document-content h4 + * {
    margin-top: 0;
  }

.document-content h1 code,
  .document-content h2 code,
  .document-content h3 code,
  .document-content h4 code,
  .document-content h5 code,
  .document-content h6 code {
    font-size: .9em;
  }

.document-content h4 code {
    font-size: .9em;
    font-weight: 600;
  }

.document-content em, .document-content i {
    font-style: italic;
  }

.document-content strong, .document-content b {
    font-weight: 600;
  }

.document-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

.document-content hr {
    border-top-width: 1px;
    border-top-style: solid;
    margin-top: calc(var(--reading-base-margin) * 3);
    margin-bottom: calc(var(--reading-base-margin) * 3);
    border-bottom: none;
  }

.document-content hr + * {
    margin-top: 0;
  }

.document-content :last-child {
    margin-bottom: 0;
  }

.document-content sub, .document-content sup {
    line-height: 0;
  }

/* -- Lists --*/

.document-content ol {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    list-style-type: decimal;
  }

.document-content ol li {
      margin-top: .5rem;
      margin-bottom: .5rem;
    }

.document-content ol > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }

.document-content ol > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }

.document-content ol > li > *:first-child {
    margin-top: calc(var(--reading-base-margin));
  }

.document-content ol > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }

.document-content ul {
    font-family: var(--reading-font-body);
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    font-size: var(--reading-base-font-size);
    list-style-type: disc;
  }

.document-content ul li {
      margin-top: calc(var(--reading-base-margin) / 2);
      margin-bottom: calc(var(--reading-base-margin) / 2);
      font-size: var(--reading-base-font-size);
    }

.document-content ul > li {
      margin-left: calc(var(--reading-base-margin) * 2);
      padding-left: .5rem;
    }

.document-content ul > li p {
      margin-top: calc(var(--reading-base-margin) / 4);
      margin-bottom: calc(var(--reading-base-margin) / 4);
    }

.document-content ul > li > *:first-child {
    margin-top: calc(var(--reading-base-margin) / 2);
  }

.document-content ul > li > *:last-child {
    margin-bottom: calc(var(--reading-base-margin));
  }

.document-content ul ul,
  .document-content ul ol,
  .document-content ol ul,
  .document-content ol ol {
    margin-top: .5em;
    margin-bottom: .5em;
  }

/*  description list */

.document-content dt {
    margin-top: var(--reading-p-margin);
  }

/* Tables */

.document-content table {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 0; /* changes back to lining figures */
  }

.document-content table caption {
    margin-top: var(--reading-base-margin);
    margin-bottom: calc(var(--reading-base-margin) * 1em);
  }

.document-content thead {
    font-weight: 600;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--reading-border-secondary);
  }

.document-content thead th {
    vertical-align: bottom;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
  }

.document-content tbody tr {
    border-bottom-width: 1px;
    border-style: solid;
  }

.document-content tbody tr:last-child {
    border-bottom-width: 0;
  }

.document-content tbody td {
    vertical-align: top;
    padding-top: 0.75em;
    padding-right: 0.5em;
    padding-bottom: 0.75em;
    padding-left: 0.5em;
  }

.document-content tfoot {
    font-weight: 600;
    border-top-width: 1px;
    border-top-style: solid;
  }

.document-content tfoot th {
    vertical-align: top;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
  }

.document-content thead th:first-child {
    padding-left: 0;
  }

.document-content tfoot th:first-child {
    padding-left: 0;
  }

.document-content tbody td:first-child {
    padding-left: 0;
  }

.document-content tbody td:last-child {
    padding-right: 0;
  }

/* Fix for newsletters that use tables for layout */

.document-content table table,
  .document-content table table tr,
  .document-content table table td,
  .document-content table table figure {
    margin: 0;
    padding: 0;
  }

.document-content table table,
  .document-content table table tr,
  .document-content table table td {
    border: none;
  }

/* Figure and Img */

.document-content img:not(p img, li img, img.allow-image-styles) {
    margin: auto;
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    border-radius: .25rem;
  }

.document-content video {
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    margin-left: auto;
    margin-right: auto;
  }

.document-content embed {
    display: none;
  }

.document-content div.rw-embed-wrapper {
    position: relative;
    padding-bottom: 18.14rem;  /* for 16:9 aspect ratio */
  }

.document-content div.rw-embed-wrapper embed {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
    }

.document-content div.rw-soundcloud-wrapper {
    padding-bottom: 9rem;
  }

.document-content div.rw-soundcloud-wrapper embed {
      height: 166px;
    }

.document-content figure {
    margin-top: calc(var(--reading-base-margin) * 2);
    margin-bottom: calc(var(--reading-base-margin) * 2);
    line-height: 1.33336;
    display: block;
  }

.document-content svg:empty {
    display: none;
  }

.document-content figure figcaption {
    line-height: 1.5;
    margin-top: calc(var(--reading-base-margin) / 2);
  }

.document-content figure:not(li figure) img + figcaption {
    margin-top: -16px;
  }

.document-content figure > * {
    margin-top: 0;
    margin-bottom: 0;
  }

/* Blockquotes */

.document-content blockquote {
    font-style: italic;
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-blockquote);
    margin: 0;
    margin-top: var(--reading-base-margin);
    margin-bottom: var(--reading-base-margin);
    hanging-punctuation: first;
    padding: 0 var(--reading-base-margin);
  }

/* Make sure nested images are not block */

.document-content blockquote img, .document-content figure img, .document-content ol img, .document-content p img, .document-content table img, .document-content ul img {
      display: initial;
      max-width: 100%!important;
    }

.document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
    margin-top: 200px;
    padding-top: 0;
    display: block;
    -moz-column-break-before: column;
         break-before: column;
  }

.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
      text-decoration: none;
    }

.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
      content: "***";
      position: relative;
      width: 100%;
      display: block;
      top: -100px;
      text-align: center;
      font-size: 48px;
      letter-spacing: 1em;
      font-weight: 200;
      color: var(--text-tertiary);
    }

/* highlights */

/* This code is repeated in extension/source/injection/index.css */

.document-content .rw-image-highlight {
    border-radius: 2px;
    outline: 12px solid var(--highlight-image-background-color--normal);
  }

.document-content .rw-image-highlight.rw-image-highlight--active {
    outline-color: var(--highlight-image-background-color--active);
  }

.document-content pre .rw-highlight {
    color: var(--highlight-text-pre-color) !important;
  }

/* All of the mandatory styles that cannot be overwritten by epub styles */

/* the specific classes make sure that the rules below win out on specificity */

.document-content,
  .document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10 {
    font-size: var(--reading-p-font-size);
    color: var(--reading-text-primary);
    font-family: var(--reading-font-body);
    line-height: var(--reading-base-line-height);
    font-weight: 400;
  }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) * {
      min-height: auto;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) nav {
      display: block;
      visibility: visible;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .auto-height {
      height: auto !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 99999999;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
        position: absolute;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::-moz-selection {
      background-color: var(--text-selection-background-color) !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) #selection-emulation * {
      background-color: var(--text-selection-background-color) !important;
    }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::-moz-selection {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::-moz-selection {
        background-color: var(--highlight-background-color--alternative) !important;
      }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::-moz-selection {
          color: var(--highlight-text-color) !important;
        }

:is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
        :is(.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10),:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),.document-text-content--auto-highlighting-enabled:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10):where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
          color: var(--highlight-text-color) !important;
        }

.is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10)::-moz-selection, .is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::-moz-selection {
        background-color: transparent !important;
        color: inherit !important;
      }

.is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10)::selection,
      .is-emulating-selection:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ::selection {
        background-color: transparent !important;
        color: inherit !important;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p:not(figcaption p) {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) p.rw-hide:not(figcaption p) {
        display: none;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) span {
      font-family: var(--reading-font-body);
      font-weight: 400;
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-primary);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h1 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h1-font-size);
      line-height: var(--reading-h1-line-height);
      color: var(--reading-text-title);
      scroll-margin-top: 96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h2 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h2-font-size);
      line-height: var(--reading-h2-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h3 {
      font-family: var(--reading-font-title);
      font-size: var(--reading-h3-font-size);
      line-height: var(--reading-h3-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h4,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h5,
    :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) h6 {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
      line-height: var(--reading-p-line-height);
      color: var(--reading-text-title);
      scroll-margin-top:96px;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a {
      text-decoration-color: rgb(var(--reading-text-link) / 50%);
      color: rgb(var(--reading-text-link));
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a:has(+ .rw-highlight) {
      text-decoration: none !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight {
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 50%);
      color: var(--reading-text-primary-link-highlight) !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a .rw-highlight:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: rgb(var(--reading-text-link-highlight) / 100%);
      color: var(--reading-text-primary-link-highlight) !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) hr {
      border-color: var(--reading-border-secondary);
    }

/* -- Lists --*/

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ol li {
        font-size: var(--reading-base-font-size);
        text-align: var(--reading-editable-text-justify);
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul {
      font-family: var(--reading-font-body);
      font-size: var(--reading-base-font-size);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) ul li {
        font-size: var(--reading-base-font-size);
      }

/* Tables */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table {
      font-family: var(--reading-font-caption);
      font-size: var(--reading-table-font-size);
      text-align: var(--reading-editable-text-justify);
      line-height: var(--reading-table-line-height);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) thead {
      color: var(--reading-text-primary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tbody tr {
      border-bottom-color: var(--reading-border-secondary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) tfoot {
      color: var(--reading-text-primary);
      border-top-color: var(--reading-border-secondary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) table table {
      font-family: var(--reading-font-body);
      font-size: var(--reading-p-font-size);
    }

/* Figure and Img */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) img:not(p img, li img, img.allow-image-styles, figcaption img) {
      display: block; /* Allows them to be highlighted independently. This is undone for nested images */
      max-width: 100% !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) svg:has(image) {
      max-width: 100% !important;
      height: auto;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) video {
      display: block;
      max-width: 100% !important;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure {
      font-size: var(--reading-caption-font-size);
      font-family: var(--reading-font-caption);
      text-align: var(--reading-editable-text-justify);
      color: var(--reading-text-secondary);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption {
      color: var(--reading-text-secondary);
      font-family: var(--reading-font-caption);
      font-size: var(--reading-caption-font-size);
      text-align: var(--reading-editable-text-justify);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) figure figcaption img {
        display: inline;
        margin-top: 0;
        margin-bottom: 0;
      }

/* Code blocks */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) code {
      color: var(--reading-text-code);
      font-size: .8em;
      font-family: var(--reading-font-monospace);
      word-wrap: break-word;
      -webkit-box-decoration-break: clone;
              box-decoration-break: clone;
      background-color: var(--reading-surface-tertiary);
      border-radius: .25rem;
      line-height: 1.1em;
      border: 1px solid var(--reading-border-secondary);
      padding: 0 .2rem;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) a code {
      color: var(--reading-text-link);
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      color: var(--reading-text-primary-inverse);
      background-color: var(--reading-surface-primary-inverse);
      font-family: var(--reading-font-monospace);
      overflow-x: auto;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      line-height: var(--reading-base-line-height);
      margin-top: calc(var(--reading-base-margin) * 2);
      margin-bottom: calc(var(--reading-base-margin) * 2);
      border-radius: .25rem;
      padding-top: var(--reading-base-margin);
      padding-right: var(--reading-base-margin);
      padding-bottom: var(--reading-base-margin);
      padding-left: var(--reading-base-margin);
      white-space: pre-wrap;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p, :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p {
      background-color: transparent;
      font-family: var(--reading-font-monospace);
      border-width: 0;
      border-radius: 0;
      padding: 0;
      -webkit-overflow-scrolling: touch;
      font-weight: 400;
      font-size: calc(var(--reading-editable-font-size) * .8px);
      color: inherit;
      line-height: inherit;
      min-width: 100px;
      margin: 0;
    }

:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.2);
        color: var(--blue-70);
      }

:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) a:hover {
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.5);
        color: var(--blue-80);
      }

:is(:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre code p,:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) pre p) p {
        display: inline;
        /*
          We sometimes end up with <p>s instead of our code tags.
          Prevent them from breaking everything.
        */
      }

/* Blockquotes */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) blockquote {
      font-size: var(--reading-p-font-size);
      color: var(--reading-text-blockquote);
      text-align: var(--reading-editable-text-justify);
    }

/* Tweet styles need to override */

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      max-width: 550px;
      margin: var(--reading-base-margin) auto;
      font-style: initial;
    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        line-height: 16px;

      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet > span > a {
          display: flex;
          color: var(--text-secondary);
          gap: 4px;
          line-height: 16px;
          text-decoration: none;
          margin-bottom: 8px;
          width: -moz-fit-content;
          width: fit-content;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header {
        display: flex;
        gap: 8px;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header img {
          aspect-ratio: 1 / 1;
          min-height: 48px;
          max-height: 48px!important;
          width: 48px;
          height: auto;
          margin: unset;
          border-radius: 9999px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header a {
          text-decoration: none;
          font-size: 16px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div {
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) {
          font-size: 14px;
          flex: 1;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child {
            font-weight: 600;
            line-height: 18px;
            padding-top: 6px;
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:first-child a {
              color: var(--reading-text-primary);
            }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) {
            line-height: 18px;
            color: var(--text-secondary);
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) a {
              color: var(--text-secondary)
            }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet header svg * {
            fill: var(--icon-tertiary);
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > :first-child {
          margin-top: 18px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          display: block;
          margin-top: 8px;
          margin-bottom: -6px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main > span:first-of-type a {
            color: var(--text-interactive);
            text-decoration: none;
          }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main p {
          line-height: var(--reading-editable-line-height);
          margin-top: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          margin-bottom: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          font-size: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
          letter-spacing: -.01em;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet main video {
          border-radius: 4px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer {
        margin-top: -4px;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a,
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer span a {
          color: var(--text-secondary);
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embedded-tweet footer a {
          text-decoration: none;
          color: var(--text-secondary);
        }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
      border: 1px solid var(--border-secondary);
      border-radius: 8px;
      max-width: 550px;
      padding: 20px;
      width: -moz-fit-content;
      width: fit-content;
      margin: var(--reading-base-margin) auto;
      font-style: initial;

    }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
        float: left;
        width: 96px !important;
        height: 96px !important;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
        margin: 0 20px 0 0;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed div {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed * {
        font-size: 16px;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        /*margin: 10px;*/
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed div.rw-embed-title {
        font-size: var(--reading-base-font-size);
      }

@media (max-width: 768px) {

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed {
        display: block;

    }
        :is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed img {
          float: none;
          display: block;
          margin: 0 auto 20px auto;
        }
      }

:is(.document-content,.document-content.mandatory-styles.specific-1.specific-2.specific-3.specific-4.specific-5.specific-6.specific-7.specific-8.specific-9.specific-10) .rw-embed:has(img) {
      min-height: 136px;
    }

/* end of ID wrapper */

/* PDF Specific Class code */

#readwise-reader-root .pageContainer {
    box-shadow: var(--shadow-100);
    position: relative;
  }

#readwise-reader-root .pageContainer canvas {
    }

#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight {
      position: absolute;
      opacity: 0.2;
      transition: opacity 0.3s ease !important;
      background: none !important;
      z-index: 100;
    }

#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight .rw-highlight-icon-wrapper {
        position: absolute;
        right: -22px;
        top: -10px;
      }

#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight:hover {
        opacity: 1;
      }

.document-content .twitter-thread-delimiter {
  width: 40px;
  border-top: 2px solid var(--border-secondary);
  margin: 20px 0px;
}

.rw-thread-heading {
  display: none;
}

.document-content .rw-outer-content {
  border: dashed 2px var(--border-secondary-alpha);
  border-radius: 8px;
  padding: 16px;
  font-size: var(--font-size-base);
  color: var(--reading-text-secondary);

}

.document-content .rw-outer-content a {
    text-decoration: none;
    color: var(--reading-text-primary);
    margin-left: 16px;
  }

.document-content .rw-digest-thread-wrapper {
  margin: 36px auto 32px;
  font-style: initial;
  max-width: 550px;
}

.document-content .rw-digest-thread-wrapper > h6 {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--ui-font) !important;
  }

.document-content .rw-digest-thread-wrapper > span:last-of-type {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 12px;
    font-family: var(--ui-font) !important;
    display: block;
    margin-top: -8px;
  }

/* handle fonts here because adding the fonts to above rules makes the file names too long */

.document-content .rw-embedded-tweet {
  font-family: var(--ui-font) !important;
}

.document-content .rw-embedded-tweet > span {
    font-family: var(--ui-font) !important;
  }

.document-content .rw-embedded-tweet header img {
    }

.document-content .rw-embedded-tweet header a {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet header div {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet main > span:first-of-type {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet main p {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-embedded-tweet footer a {
      font-family: var(--ui-font) !important;
    }

.document-content .rw-ai {
    background-color: #CBC3E3;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid #A39EBA;
  }

.document-content .rw-ai-highlighted {
    font-weight: bold;
  }

.document-content .rw-ai-explainer {
    background-color: #CBC3E3;
  }

/*
    Needed for DISCOVER_WISEREADS_DOC_URL post
    Ensures the "Discover new documents" button displays properly by:
    1. Setting correct image dimensions and positioning
    2. Showing/hiding images based on the current theme (light/dark)
  */

.document-content [data-rw-theme] [data-rw-button="discover-wisereads"] img {
      background: none !important;
      opacity: 1 !important;
      width: 207px !important;
      margin: 0 auto !important;
    }

.document-content [data-rw-theme="dark"] {
    display: none !important;
  }

.document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
      display: none !important;
    }

.theme--dark .document-content [data-rw-theme="light"] {
      display: none !important;
    }

.theme--dark .document-content [data-rw-theme="light"] [data-rw-button="discover-wisereads"] img {
        display: none !important;
      }

.theme--dark .document-content [data-rw-theme="dark"] {
      display: block !important;
    }

.theme--dark .document-content [data-rw-theme="dark"] [data-rw-button="discover-wisereads"] img {
        display: block !important;
      }

.theme--dark .document-content .rw-ai,
    .theme--dark .document-content .rw-ai-explainer {
      color: var(--text-inverse);
    }

.document-content.is-youtube-video {
  padding-top: 135px;
}

/* https://linear.app/readwise/issue/RW-26751/bug-youtube-transcripts-sometimes-send-missing-spaces-to-readwise-10
The YouTube parser originally didn't add spaces to the end of each transcript, so we were using margin-right.
After fixing the parser, we removed the margin-right but we still need to add it for old videos. */

.document-content span[data-rw-start] {
  margin-right: .25rem;
}

.document-content span[data-rw-transcript-version] {
  margin-right: 0;
}

.document-content .rw-email-parsed {
  display: none;
}

/* Pagination */

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
      margin-top: 0;
      padding-top: 0;
      display: block;
      -moz-column-break-before: column;
           break-before: column;
    }

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
        text-decoration: none;
      }

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:first-child {
        -moz-column-break-before: auto;
             break-before: auto;
      }

.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
        display: none;
      }

.document-content--original-email {
  background: white !important;
  color: initial;
  word-break: break-word;
  max-width: calc(100% - 2 * var(--content-gutter)) !important;
  margin: 0 auto;

  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.document-content--original-email table, .document-content--original-email tr, .document-content--original-email tbody {
    width: 100% !important;
  }

.document-content--original-email table {
    border-collapse: collapse !important;
  }

.document-content--original-email img {
    background: initial;
    max-width: 100%;
  }

.document-content--original-email rw-highlight {
    color: initial !important;
  }

.document-content--original-email div, .document-content--original-email table, .document-content--original-email tr, .document-content--original-email td, .document-content--original-email tbody, .document-content--original-email a, .document-content--original-email hr, .document-content--original-email pre {
    /* The value below is width of header in px - how i calculate this:
      its .textContentWrapper width
      minus --content-gutter variable which takes padding in #document-header
      minus - 1rem which is a padding in textContentWrapper 
      minus 10px * 2 of padding that we add to .document-content--original-email */
    max-width: calc(var(--reading-editable-line-length) - 1rem - 20px) !important;
  }

.document-content--original-email pre {
    display: block;
    overflow-x: scroll !important;
  }

.allow-annotation-bar-popover-overlay .annotation-bar-popover {
    z-index: 500 !important;
}
/*
  !important is added to all rules in this file when running in the extension.
*/

/*
  Pseudo-elements are not meant to react to pointer events but we found an issue in Firefox which was
  fixed by adding `pointer-events: none`, so let's make sure it's done for all.
*/

html {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color-underline: hsl(50deg 100% 50% / 100%) !important;
  --highlight-background-color--active: hsl(50deg 100% 50% / 20%) !important;

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%) !important;
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%) !important;
  --highlight-resize-handle-background-color: rgb(220, 185, 0) !important;
  --highlight-resize-handle-background-color--alternative: #767ccc !important;
  --js_highlight-normal: #fcf6bf !important; /* needs to be hex */
  --highlight-background-color--alternative: #CDCDFE !important; /* alternative colours always are opague to be safe */
  --highlight-background-color--alternative--active: #b1b7fe !important;
  /*
    NOTE: we overwrite the following variable in the extension with JS depending on the site's colors
  */
  --highlight-text-color: #000 !important;
  --highlight-icon-color:  rgba(0, 0, 0, 0.60) !important;
}

.theme--dark {
  --highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color--normal-with-alpha: hsl(50deg 100% 50% / 15%) !important;
  --highlight-background-color-underline: hsl(50deg 100% 50% / 80%) !important;
  --highlight-background-color--active: hsl(50deg 100% 50% / 30%) !important;

  --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%) !important;
  --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%) !important;

  --highlight-text-color: var(--white) !important;
  --highlight-icon-color: rgba(255, 255, 255, 0.60) !important;
}

/* Unset the default text fragment highlighting */

::target-text {
  color: unset !important;
  background: unset !important;
}

readwise-tooltip-container {
  position: fixed !important;
  inset: auto !important;
  z-index: 2147483647 !important;
  isolation: isolate !important;
}

/*
  <rw-highlight/>s are text highlights. They also have `.rw-highlight` added.
  .rw-image-highlight is added to image highlights. They do not have `.rw-highlight`.
  .rw-highlight--* classes are added to both.
*/

rw-highlight,
.rw-image-highlight,
.rw-pseudo-highlight {
  cursor: pointer !important;
  visibility: visible !important;
}

:is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight)::after,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::before,
  :is(rw-highlight,.rw-image-highlight,.rw-pseudo-highlight) ::after {
    pointer-events: none !important;
  }

:is(.isDev rw-highlight,.isDev .rw-image-highlight):not([data-highlight-id]) {
      outline: 1px solid red !important;
    }

rw-highlight,
.rw-pseudo-highlight {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--normal) 2px,
     var(--highlight-background-color--normal) 100%
   ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 90% !important;
  background-position: 0 75% !important;
  color: var(--highlight-text-color) !important;
}

a rw-highlight, .rw-pseudo-highlight a {
  text-decoration: underline !important;
}

.rw-image-highlight {
  border-radius: 2px !important;
  outline: 12px solid var(--highlight-background-color--normal) !important;
}

rw-highlight.rw-highlight--active {
  background-image: linear-gradient(
     0deg,
     var(--highlight-background-color-underline) 0%,
     var(--highlight-background-color-underline) 2px,
     var(--highlight-background-color--active) 2px,
     var(--highlight-background-color--active) 100%
   ) !important;
}

.rw-image-highlight.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--active) !important;
}

rw-highlight.rw-highlight--alternative-color {
  background: var(--highlight-background-color--alternative) !important;
}

.rw-image-highlight.rw-highlight--alternative-color {
  outline-color: var(--highlight-background-color--alternative) !important;
}

rw-highlight.rw-highlight--alternative-color.rw-highlight--active {
  background: var(--highlight-background-color--alternative--active) !important;
}

.rw-image-highlight.rw-highlight--alternative-color.rw-image-highlight--active {
  outline-color: var(--highlight-background-color--alternative--active) !important;
}

rw-highlight.rw-highlight--alternative-color .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-text-color) !important;
}

rw-highlight .rw-highlight-icon-wrapper {
  display: none !important;
}

rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  display: inline-block !important;
}

rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
#document-text-content  rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
  padding-right: 0.2em !important;
  text-indent: initial !important; /* block epub styles from adding indents to highlight elements */
}

rw-highlight .rw-highlight-icon-wrapper svg {
  position: relative !important;
  top: 1px !important;
  display: none !important;
}

rw-highlight .rw-highlight-icon-wrapper svg,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight .rw-highlight-icon-wrapper svg {
  margin-left: 0.4em !important;
}

:is(rw-highlight .rw-highlight-icon-wrapper svg,#document-text-content rw-highlight .rw-highlight-icon-wrapper svg):first-child {
    margin-left: 0.2em !important;
  }

rw-highlight .rw-highlight-icon-wrapper svg path {
  fill: var(--highlight-icon-color) !important;
}

rw-highlight.rw-highlight--has-note .rw-highlight-note-icon {
  display: inline !important;
}

rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
  display: inline !important;
}

.rw-highlight,
.rw-image-highlight {
  -webkit-tap-highlight-color: transparent !important;
}

/* Effectively hide the highlight / make it like it was before it was highlighted */

.rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]),
    .rw-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover,
    .rw-image-highlight:where([data-resize-status]):not([data-resize-status="inactive"]):hover {
      background: inherit !important;
      border: inherit !important;
      color: inherit !important;
      cursor: inherit !important;
      outline: inherit !important;
    }

.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="actively-resizing"] .rw-highlight-icon-wrapper, .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper, .rw-image-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-icon-wrapper {
      display: none !important;
    }

.rw-highlight-resize-handle {
  opacity: 0 !important; /* Hidden by default */
  pointer-events: none !important; /* Make sure you can't tap them when they're meant to be hidden */

  position: relative !important;
  cursor: col-resize !important;
}

.rw-highlight-resize-handle,
  .rw-highlight-resize-handle span {
    /* https://linear.app/readwise/issue/RW-38790/when-highlighting-text-with-some-super-script-the-text-moves */
    line-height: 1 !important;
    font-size: inherit !important;
  }

/*
    This is the tap target.
    The pseudo-elements are what you see visually; `::before` is the bar/body, `::after` is the head.
    The head is styled with the end handle in mind, and later in the code the start handle's head is
    flipped upside-down.
  */

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper {
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: -8px !important;
    bottom: -15px !important;

    opacity: 0.6 !important;
  }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      border-radius: 10px !important;
      transition: all 0.1s !important;
    }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      content: ' ' !important;
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      background-color: var(--highlight-resize-handle-background-color) !important;
    }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before {
      top: 8px !important;
      bottom: 12px !important;
      width: 4px !important;
    }

.rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      border-radius: 10px !important;
      height: 12px !important;
      width: 12px !important;
      bottom: 7px !important;
    }

.rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::before,
    .rw-highlight--alternative-color .rw-highlight-resize-handle .rw-highlight-resize-handle__inner-wrapper::after {
      background-color: var(--highlight-resize-handle-background-color--alternative) !important;
    }

.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper {
      opacity: 0.8 !important;
    }

.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::before {
        bottom: 6px !important;
        width: 5px !important;
      }

.rw-highlight-resize-handle:hover .rw-highlight-resize-handle__inner-wrapper::after {
        bottom: 5px !important;
        height: 14px !important;
        width: 14px !important;
      }

.rw-highlight[data-resize-status="actively-resizing"] .rw-highlight-resize-handle,
  .rw-highlight[data-resize-status="user-interaction-done-waiting-for-render"] .rw-highlight-resize-handle {
    opacity: 0 !important;
  }

.rw-highlight-resize-handle:hover,
  .rw-highlight--active .rw-highlight-resize-handle,
  .rw-highlight--hover .rw-highlight-resize-handle {
    pointer-events: auto !important;
    opacity: 1 !important;

    /*
      Cases where the handles are momentarily hidden.
      E.g. during a resize, we hide all other highlights' handles so that they don't get shown if we drag
      the cursor over those other highlights and their hover styles are applied.
    */
  }

.document-content[data-rw-highlight-resize-status="actively-resizing"] .rw-highlight-resize-handle:hover, .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--active .rw-highlight-resize-handle), .document-content[data-rw-highlight-resize-status="actively-resizing"] :is(.rw-highlight--hover .rw-highlight-resize-handle) {
      opacity: 0 !important;
    }

/* Why this list of selectors? Basically we want this always and we're being extra safe */

/*
      Otherwise the (transparent) handle can get in the way when getting the cursor point and drawing the
      selection
    */

.document-content.is-emulating-selection:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) :is(.rw-highlight-resize-handle,.rw-highlight-resize-handle:hover,.rw-highlight--active .rw-highlight-resize-handle,.rw-highlight--hover .rw-highlight-resize-handle) {
      pointer-events: none !important;
      -webkit-user-select: none !important;
              user-select: none !important;
    }

/*
    Cases where the handles are permanently hidden. JS needs to also cover these cases.
  */

.app--document-share-app .rw-highlight-resize-handle,
  .rw-app--extension .rw-highlight-resize-handle {
    display: none !important;
  }

.document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"],
  .document-content[data-rw-highlight-resize-status="actively-resizing"],
  .document-content[data-rw-highlight-resize-status="native-selection-made-but-user-hasnt-started-resizing-yet"] *,
  .document-content[data-rw-highlight-resize-status="actively-resizing"] * {
    /* !important is required because we need to change the cursor for everything */
    cursor: col-resize !important;
  }

.rw-highlight-resize-handle--start .rw-highlight-resize-handle__inner-wrapper {
  transform: rotate(180deg) !important;
  top: -15px !important;
  bottom: -8px !important;
}

.rw-mobile-web-view img.rw-image-highlight {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 213, 0, 0.2) !important;
}

.rw-mobile-web-view img.rw-image-highlight.rw-image-highlight--active {
  outline: 0px !important;
  box-shadow: 0px 0px 0px 6px rgba(255, 213, 0, 0.5) !important;
}

:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) ::selection,
    :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]) pre) #selection-emulation * {
      background-color: var(--highlight-background-color--normal-with-alpha) !important;
    }

:is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) ::selection,
      :is(:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]),:where([data-rw-highlight-resize-status]):not([data-rw-highlight-resize-status="inactive"]):where([data-rw-highlight-being-resized-has-alternative-color="true"]) pre) #selection-emulation * {
        background-color: var(--highlight-background-color--alternative) !important;
      }
._paletteWrapper_29opr_2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 9999;
  background-color: var(--background-backdrop);
}

._palette_29opr_2 {
  border-radius: .5rem;
  background: var(--cmd-palette-background);
  transition: background-color var(--theme-transition-time) ease-in-out;
  box-shadow: var(--cmd-palette-drop-shadow);
  max-height: 100%;
  overflow: hidden;
  position: relative;
  width: 680px;
  top: calc(34% - 200px);
  scrollbar-color: var(--cmd-palette-scrollbar) transparent;
}

._palette_29opr_2 ::-webkit-scrollbar-thumb {
    border-radius: .625rem;
    background-color: var(--cmd-palette-scrollbar);
  }

._paletteActionRow_29opr_33 {
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border-radius: 0 .25rem .25rem 0;
  border-left: .125rem solid var(--cmd-palette-cmd-container);
  align-items: center;
  font-size: .875rem;
  line-height: 1.25rem;
  padding-left: .75rem;
}

._paletteActionRow_29opr_33 > span {
    padding: .75rem 1rem;
    padding-left: 0;
  }

._paletteActionRow_29opr_33._focused_29opr_51 {
    background-color: var(--cmd-palette-row-hover);
    border-left: .125rem solid var(--icon-interactive);
    padding-left: .625rem;
  }

._paletteActionRow_29opr_33._focused_29opr_51 > span:first-child {
      padding-left: .125rem;
    }

._paletteActionRow_29opr_33._notClickable_29opr_61 {
    cursor: default;
  }

._paletteActionRow_29opr_33 ._actionKey_29opr_65 {
    background-color: var(--cmd-palette-key-background);
    display: flex;
    font-size: var(--font-size-sm);
    align-items: center;
    border-radius: .25rem;
    min-width: 1.25rem;
    padding: .125rem 0.3125rem;
    margin-right: 0.5rem;
    justify-content: center;
  }

._paletteActionRow_29opr_33 ._actionIcon_29opr_77 {
    display: flex;
    font-size: var(--font-size-sm);
    align-items: center;
    min-width: 1.25rem;
    padding: .125rem 0.3125rem;
    margin-right: 0.5rem;
    justify-content: center;
  }

._commandsContainer_29opr_88 {
  overflow-y: auto;
  max-height: 300px;
  position: relative;
  background: var(--cmd-palette-cmd-container);
  padding: 1rem;
  padding-left: .75rem;
  padding-right: .75rem;
  border-radius: 0 0 .5rem .5rem;
}

._commandsContainer_29opr_88._withTitle_29opr_98 {
    padding-top: 0;
  }

._inputContainer_29opr_103 {
  padding: 0.8125rem 1.5rem;
  background: var(--background-elevated);
  display: flex;
  justify-content: center;
  align-items: center;
}

._inputContainer_29opr_103 ._paletteInput_29opr_110 {
    font-size: 1rem;
    color: var(--text);
    background: transparent;
    border: 0;
    width: 100%;
    height: 1.875rem;
    font-family: inherit;
  }

._inputContainer_29opr_103 ._paletteInput_29opr_110:focus {
      outline: none;
    }

._inputContainer_29opr_103 ._paletteInput_29opr_110::placeholder {
      color: var(--text-placeholder);
    }

._inputContainer_29opr_103 ._paletteInputTextArea_29opr_127 {
    font-size: var(--f6);
    min-height: 200px;
  }

._inputContainer_29opr_103 ._paletteInputTextAreaWithRecordButton_29opr_132 {
    margin-top: 30px;
  }

._inputContainer_29opr_103 ._clearWrapper_29opr_136 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-right: .75rem;
  }

._inputContainer_29opr_103 ._clearWrapper_29opr_136 ._clearInput_29opr_143 {
      cursor: pointer;
      font-size: .875rem;
      color: var(--text-secondary);
      position: relative;
      bottom: 1px;
      padding-right: .75rem;
      border-right: 1px solid var(--border-primary);
    }

._inputContainer_29opr_103 ._closeIcon_29opr_154 {
    cursor: pointer;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    color: var(--icon-secondary);
  }

._title_29opr_164 {
  color: var(--text);
  font-size: var(--f5);
  padding-left: var(--s3);
  font-weight: var(--font-weight-lighter);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--grey-dark);
}

._customComponentContainer_29opr_173 {
  padding: var(--s1) 1.5rem;
  margin-bottom: var(--s1);
  margin-top: var(--s1);
}

._customComponentContainer_29opr_173 .tagItem { /* adds spacing between tags */
    margin-right: .25rem;
  }

._shortcutsPalette_29opr_182 {
  width: 400px;
  max-height: 80%;
  overflow-y: scroll;
  top: 8%;
}

._shortcutsPalette_29opr_182 ._commandsContainer_29opr_88 {
    max-height: 100%;
  }

._contextContainer_29opr_193 {
  display: flex;
  align-items: center;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

._contextItem_29opr_201 {
  padding: .25rem .75rem;
  color: var(--text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  background: var(--cmd-palette-context-item-background);
  border: 1px solid var(--cmd-palette-context-item-border);
  border-radius: 4.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  margin-right: .5rem;
}

._sectionTitle_29opr_216 {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  padding: 8px 1.525rem;
  background: var(--cmd-palette-section-title);
  z-index: 1;
  position: inherit;
  box-shadow: var(--shadow-100);
}

._paletteLabel_29opr_228 {
  color: var(--text-secondary);
  margin-bottom: .5rem;
  margin-top: .75rem;
  font-weight: 400;
  font-size: 0.75rem;
  padding-left: .75rem;
}

._truncatePaletteItem_29opr_237 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

._recordButton_29opr_243 {
  position: absolute;
  top: 8px;
  right: 8px;
}
._checkbox_d6f52_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background: transparent;
  transition: background 80ms ease-in, border 80ms ease-in;
  cursor: pointer;
}

._checkbox_d6f52_1:focus {
    outline: none;
  }

._checkboxChecked_d6f52_18 {
  border: 1px solid var(--background-interactive);
  background: var(--background-interactive);
}

._checkboxChecked_d6f52_18 span {
    display: flex;
    justify-content: center;
    align-items: center;
  }

._checkboxChecked_d6f52_18 svg {
    width: 16px;
    height: 16px;
    position: relative;
  }

._checkboxChecked_d6f52_18 svg._isMinusIcon_d6f52_33 {
      width: 10px;
      height: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
    }

._checkboxChecked_d6f52_18 svg * {
      fill: var(--checkbox-icon-color);
    }

._checkboxContainer_d6f52_48 {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
._checkboxContainer_d6f52_48 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
._checkmark_d6f52_70 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
._checkmark_d6f52_70 svg {
  display: none;
}

/* When the checkbox is checked, add a blue background */
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 {
  border: 1px solid var(--background-interactive);
  background: var(--background-interactive);
}
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 svg {
    display: flex;
    position: relative;
    left: -1px;
    top: -1px;
  }
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 svg * {
      fill: var(--checkbox-icon-color);
    }
.button._actionButton_jtidl_1 {
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  transition: background 150ms ease-in, box-shadow 150ms ease;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  padding: 0;
}

._actionButton_jtidl_1.button svg {
    height: 20px;
    min-height: 20px;
    width: 20px;
    min-width: 20px;
    color: var(--icon-secondary);
    fill: var(--icon-secondary);
  }

._actionButton_jtidl_1._isActive_jtidl_25.button:not(._isDisabled_jtidl_25) svg,
    ._actionButton_jtidl_1._isActive_jtidl_25.button:not(._isDisabled_jtidl_25) svg * {
      color: var(--icon-primary);
      fill: var(--icon-primary);
    }

._actionButton_jtidl_1._isDisabled_jtidl_25.button {
    cursor: default;
  }

._actionButton_jtidl_1._isDisabled_jtidl_25.button svg,
    ._actionButton_jtidl_1._isDisabled_jtidl_25.button svg * {
      color: var(--icon-disabled);
      fill: var(--icon-disabled);
    }

._actionButton_jtidl_1.button:hover:not(._isDisabled_jtidl_25) {
    background: var(--u-alpha-200);
  }

._actionButton_jtidl_1.button:hover:not(._isDisabled_jtidl_25) svg,
    ._actionButton_jtidl_1.button:hover:not(._isDisabled_jtidl_25) svg * {
      color: var(--icon-primary);
      fill: var(--icon-primary);
    }

._documentLocationActionButton_jtidl_52 {
  border-radius: 0;
}

._documentLocationActionButton_jtidl_52:first-child {
    border-radius: var(--action-button-border-radius) 0 0 var(--action-button-border-radius);
    padding-left: var(--spacer-2);
  }

._documentLocationActionButton_jtidl_52:last-child {
    border-radius: 0 var(--action-button-border-radius) var(--action-button-border-radius) 0;
    padding-right: var(--spacer-2);
  }

._pdfActionButtonsContainer_jtidl_66 {
  display: flex;
  position: fixed;
  top: 0.875rem;
  padding: 0.3em 0;
  left: 0;
  right: 0;
  margin: auto;
  width: max-content;
  flex-direction: column;
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
  z-index: 100;
}

._pdfActionButtonsContainer_jtidl_66:hover {
    opacity: 1;
  }


._pdfActionButtons_jtidl_66 {
  background: var(--default-blurred-button-background);
  -webkit-backdrop-filter: blur(var(--default-blurred-button));
          backdrop-filter: blur(var(--default-blurred-button));
  border-radius: 31px;
  justify-content: center;
  display: flex;
  align-items: center;
}


._pdfActionButtons_jtidl_66 svg {
    fill: var(--icon-secondary);
  }


._pdfActionButtons_jtidl_66 ._actionButton_jtidl_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
.tippy-content:has(._shortcut_1yawj_1) {
  padding-right: 5px;
}

.tippy-content:has(._onlyShortcut_1yawj_5) {
  padding: 0;
}

.tippy-content:has(._onlyShortcut_1yawj_5) ._shortcut_1yawj_1 {
    margin-left: 0;
    border-radius: 4px;
    background: var(--background-inverse);
  }

._tooltip_1yawj_15 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: var(--ui-font);
  white-space: nowrap;
}

._tooltip_1yawj_15 svg{
    opacity: .5;
    scale: .8333;
    margin: 0 -2px;
  }

._shortcut_1yawj_1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  background: var(--tooltip-shortcut-background);
  color: var(--tooltip-shortcut-color);
  border-radius: 2px;
  padding: 2px 5px;
  margin-left: 8px;
}

._shortcut_1yawj_1 svg {
    margin-right: 6px;
  }
._triggerButton_1n8ta_1 {
  background-color: var(--background-elevated);
  padding: 0;
  border: 0;
  border-radius: 100%;
  box-shadow: var(--shadow-100);
  outline: none;
}

._triggerButton_1n8ta_1 svg * {
    fill: var(--icon-secondary);
  }

._scrollableOptions_1n8ta_14 {
  max-height: 300px;
  overflow-y: auto;
  /* avoid separator margin */
  margin-top: -4px;
  margin-bottom: -4px;
}

._scrollableOptions_1n8ta_14 ._item_1n8ta_21:first-child {
    border-radius: 0;
  }

._scrollableOptions_1n8ta_14 ._item_1n8ta_21:last-child {
    border-radius: 0;
  }

._isActive_1n8ta_30 {
  background: var(--u-alpha-200);
}

._isActive_1n8ta_30 svg * {
    fill: var(--icon-primary);
  }

._content_1n8ta_38 {
  border-radius: 8px;
  background-color: var(--background-elevated);
  box-shadow: var(--shadow-200);
  min-width: 278px;
  padding: 4px 0;
  z-index: 3;
  max-height: 80vh;
  overflow-y: auto;
}

._enablePointerEvents_1n8ta_49 {
  pointer-events: auto !important;
}

._item_1n8ta_21 {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  outline: none;
  transition: background 80ms ease-in;
  cursor: pointer;
}

._item_1n8ta_21 label {
    cursor: pointer;
  }

._item_1n8ta_21._isDisabled_1n8ta_68 {
    cursor: default;
    pointer-events: none;
  }

._item_1n8ta_21._isDisabled_1n8ta_68 ._shortcut_1n8ta_72 {
      color: var(--text-disabled);
    }

._item_1n8ta_21._isCreate_1n8ta_77 {
    color: var(--text-interactive);
    font-weight: 500;
  }

._item_1n8ta_21._isCreate_1n8ta_77 svg {
      margin-right: 8px;
      fill: var(--icon-interactive);
    }

._item_1n8ta_21 ._isDanger_1n8ta_87 {
    color: var(--text-error);
  }

._item_1n8ta_21 ._isDisabled_1n8ta_68 {
    color: var(--text-disabled);
  }

._item_1n8ta_21 ._isDisabled_1n8ta_68 svg * {
      fill: var(--text-disabled);
    }

._item_1n8ta_21 ._ghostreaderPrompt_1n8ta_99 {
    margin-left: auto;
    padding-left: 20px;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
  }

._item_1n8ta_21 ._optionContent_1n8ta_106 {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
  }

._item_1n8ta_21 ._optionContent_1n8ta_106 small {
      display: inline-block;
      padding: var(--spacer-1) 0;
    }

._item_1n8ta_21 ._optionContent_1n8ta_106 svg {
      margin-right: 8px;
    }

._item_1n8ta_21 ._optionContent_1n8ta_106 svg * {
        color: var(--icon-secondary) !important;
      }

._item_1n8ta_21:hover,
  ._item_1n8ta_21:focus-visible {
    background: var(--u-alpha-100);
  }

._item_1n8ta_21:first-child {
    border-radius: 8px 8px 0 0;
  }

._item_1n8ta_21:last-child {
    border-radius: 0 0 8px 8px;
  }

._item_1n8ta_21 ._checkbox_1n8ta_139 {
    margin-right: 10px;
  }

._checkIcon_1n8ta_144 {
  margin-right: 4px;
  margin-left: -20px;
}

._checkIcon_1n8ta_144 * {
    fill: var(--icon-primary);
  }

._title_1n8ta_153 {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

._separator_1n8ta_163 {
  height: 1px;
  margin: 4px 0;
  background-color: var(--u-alpha-400);
}

._contentWithChecks_1n8ta_169 ._item_1n8ta_21,
._contentWithChecks_1n8ta_169 ._title_1n8ta_153 {
  padding: 0 26px;
}

._editTagsPopover_1n8ta_174 {
  /* To match the dropdown width: */
  max-width: 278px !important;
  width: 278px !important;
}

._triggerElement_1n8ta_180 {
  background: var(--btn-secondary) !important;
}

._triggerElement_1n8ta_180 svg * {
    fill: var(--icon-secondary) !important;
  }

._dropdownContent_1n8ta_188 {
  width: 410px;
}

._itemDescription_1n8ta_192 {
  height: 48px !important;
  font-size: 14px !important;
}

._itemDescription_1n8ta_192 ._optionContent_1n8ta_106 {
    flex-direction: column;
    align-items: start;
  }

._itemDescription_1n8ta_192._isDisabled_1n8ta_68 ._optionContent_1n8ta_106 {
      color: var(--text-disabled);
    }

._itemDescription_1n8ta_192._isDisabled_1n8ta_68 ._optionContent_1n8ta_106 small {
        color: var(--text-disabled);
      }

._itemDescription_1n8ta_192 ._checkIcon_1n8ta_144 {
    margin-top: -17px;
  }

._itemDescription_1n8ta_192 ._optionContent_1n8ta_106 {
    color: var(--text-primary);
  }

._itemDescription_1n8ta_192 ._optionContent_1n8ta_106 small {
      color: var(--text-secondary);
    }
/* This tells Safari to render animations with the GPU instead of the CPU */

/* More info: */

/* https://michaeluloth.com/css-translate-z/ */

/* https://x.com/andyngo/status/1263056084719202304 */

._modalContentWrapper_1k69k_3 p {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    margin-bottom: 16px;
  }

._modalContentWrapper_1k69k_3 input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: var(--metadata-input-background);
    box-shadow: 0 0 0 1px var(--border-secondary);
    border-radius: 4px;
    padding: 8px 10px;
    color: var(--text-primary);
    margin-top: 0;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    outline: none;
    transition: box-shadow 0.2s ease-in-out;
  }

._modalContentWrapper_1k69k_3 input:focus {
        box-shadow: 0 0 0 2px var(--border-focus);
    }

._cancelButton_1k69k_33 {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;

  background: none;
  padding: 6px 12px;
}
._modalBackdrop_kmyzt_1 {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  inset: 0;
  animation: _overlayShow_kmyzt_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 101;
}

._modalRoot_kmyzt_9 {
  --modal-vertical-padding: 20px;
  --modal-horizontal-padding: 24px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50.1%, -50%);
  width: 90vw;
  max-width: 543px;
  max-height: 85vh;

  z-index: 101;

  padding: 0;

  background-color: var(--background-elevated);
  border-radius: 8px;
  box-shadow: var(--shadow-400);

  font-family: var(--ui-font);

  animation: _contentShow_kmyzt_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

._modalRoot_kmyzt_9:focus {
    outline: none;
  }

._closeButton_kmyzt_38,
._modalMain_kmyzt_39,
._modalFooter_kmyzt_40 {
  padding: var(--modal-vertical-padding) var(--modal-horizontal-padding);
}

._modalHeader_kmyzt_44 {
  border-bottom: 1px solid var(--border-secondary-alpha);
  display: flex;
}

._title_kmyzt_49 {
  flex: 1;

  margin: var(--modal-vertical-padding) var(--modal-vertical-padding);

  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 20px;
  color: var(--text-primary);
}

._closeButton_kmyzt_38 {
  border-radius: 0;
  color: var(--text-primary);
  opacity: 0.85;
}

._closeButton_kmyzt_38:active,
  ._closeButton_kmyzt_38:focus,
  ._closeButton_kmyzt_38:hover {
    opacity: 1;
    outline: none;
  }

._modalMain_kmyzt_39 {

}

._modalFooter_kmyzt_40 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  border-top: 1px solid var(--border-secondary-alpha);
  background-color: var(--background-elevated);
  border-radius: 0 0 8px 8px;
}

@keyframes _contentShow_kmyzt_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.mainContentHeader._header_1auxb_3 {
    padding: 0;
}
button._hideNavigationBarButton_1auxb_7 {
    margin-left: 0;
}
._headerLeft_1auxb_11 {
    display: inline-flex;
    flex-direction: row;
    padding-left: 0;
    height: 100%;
}
@media (min-width: 769px) {
._headerLeft_1auxb_11 {
        padding-left: var(--min-left-pad);
}
    }
._headerLeft_1auxb_11 ._active_1auxb_21 {
        color: var(--inbox-header-active-tab-text-color);
        font-weight: 600;
        pointer-events: none;
    }
._headerLeft_1auxb_11 a,
    ._headerLeft_1auxb_11 button._splitButton_1auxb_28 {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        padding: 0 10px;
        text-decoration: none;
        font-weight: 500;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.05px;
    }
._headerLeft_1auxb_11 ._headerTab_1auxb_42 {
        position: relative;
        top: 1px;
    }
._headerLeft_1auxb_11 ._activeBorder_1auxb_47 {
        background: var(--icon-primary);
        width: calc(100% - 20px);
        height: 1px;
        position: absolute;
        bottom: 0;
    }
._headerLeft_1auxb_11 ._heading_1auxb_55 {
        display: flex;
        align-items: center;
        font-family: var(--ui-font);
        font-weight: 600;
        font-size: var(--font-size-lg);
        line-height: 24px;
        color: var(--text-primary);
        background: transparent;
        border: 0;
        border: 0;
        padding-right: 10px;
        cursor: pointer;
        max-width: 285px;
    }
._headerLeft_1auxb_11 ._heading_1auxb_55 span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
._headerLeft_1auxb_11 ._heading_1auxb_55 ._headingIcon_1auxb_76 {
            display: flex;
            margin-right: 8px;
        }
._headerLeft_1auxb_11 ._heading_1auxb_55 svg * {
            fill: var(--icon-secondary);
        }
._headerLeft_1auxb_11 ._headerTabTitle_1auxb_86 {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 300px;
        text-align: center;
    }
._headerRight_1auxb_99 {
    display: flex;
    padding-right: var(--s2);
}
._headerRight_1auxb_99 ._headerRightIcon_1auxb_103 {
        width: 16px;
        height: 16px;
    }
._headingButton_1auxb_109 {
    border: 0;
    display: flex;
    font-family: var(--ui-font);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 8px;
    padding: 6px 12px;
    font-weight: 500;
    font-size: var(--font-size-base);
    line-height: 1.25rem;
}
._headingButton_1auxb_109 a {
        display: flex;
        justify-content: center;
        align-items: center;
    }
._headingButton_1auxb_109._default_1auxb_128 {
        color: var(--text-primary);
        background: transparent;
        line-height: 20px;
    }
._headingButton_1auxb_109._default_1auxb_128 svg {
            margin-right: 8.7px;
        }
._headingButton_1auxb_109._default_1auxb_128 svg * {
            fill: var(--icon-secondary);
        }
._headingButton_1auxb_109._primary_1auxb_142 {
        border-radius: 48px;
        color: var(--text-interactive);
        background: var(--primary-button-background);
    }
._headingButton_1auxb_109._isDisabled_1auxb_148 {
        color: var(--text-disabled);
        cursor: default;
    }
._headingButton_1auxb_109._isDisabled_1auxb_148 svg * {
            fill: var(--text-disabled);
        }
._saveFilterButton_1auxb_158,
._feedSourcesButton_1auxb_159 {
    margin-left: var(--s1);
}
._hidePanelsButton_1auxb_163 {
    margin-left: var(--s1);
    display: flex;
    justify-content: center;
    align-items: center;
}
._hidePanelsButton_1auxb_163 svg * {
        fill: var(--default-button-text-color);
    }
/* @media (--max-width-sidebar-is-shown-at) {
        display: none;
    } */
._mainContentHeader_bcyh6_1 {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: var(--inbox-header-height);
    min-height: var(--inbox-header-height);

    padding: 0;
    font-size: var(--font-size-2xl);
    border-bottom: 1px solid var(--border-tertiary-alpha);
    background-color: var(--background-color);
    
    transition: box-shadow 0.2s ease-in;
    position: relative;
}

@media (min-width: 769px) {

._mainContentHeader_bcyh6_1 {
        padding: 0 var(--min-left-pad);
}
    }

._mainContentHeaderWhenPageIsScrolled_bcyh6_22 {
  border-bottom: 1px solid transparent;
}
._hideNavigationBarButton_1mszu_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  cursor: pointer;
  margin-left: 6px;
}
._hideNavigationBarButton_1mszu_1 svg * {
      stroke: var(--icon-secondary);
  }
._sortButton_1tsjx_1 {
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 6px;
  font-weight: 500;
  font-family: var(--ui-font);

  margin-right: -4px;

  color: var(--text-primary);
  background: transparent;
  font-size: 14px;
  line-height: 20px;
}

._sortButton_1tsjx_1._opened_1tsjx_18 {
    border-radius: 48px;
    background: var(--btn-secondary);
  }

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

._sortButton_1tsjx_1 svg * {
      fill: var(--icon-secondary);
  }

._chevronIcon_1tsjx_32 {
  transition: transform 0.2s ease-in-out;
}

._chevronIcon_1tsjx_32._opened_1tsjx_18 {
    transform:rotate(180deg);
  }

._sortView_1tsjx_40 {
  position: relative;
  display: inline-block;
}
._markAllFeedSeen_wf6on_1 {
  background: var(--background-primary);
  box-shadow: inset 0 0 0 200px var(--u-alpha-blue-200), var(--shadow-100);
  font-size: var(--font-size-base);
}
._markAllFeedSeen_wf6on_1 button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-interactive);
  }
._markAllFeedSeen_wf6on_1 svg {
    margin-right: 7px;
    fill: var(--text-interactive);
  }
._deleteDocumentDialog_90u56_1 {
}._hoverContainer_68rkk_1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

._hoverBar_68rkk_8 {
  position: absolute;
  width: calc(100% - 16px);
  background: var(--focus-background-color);
  left: 0;
  top: 0;
  transform-origin: top left;
  border-radius: 8px;
  margin: 0 8px;
}

._hoverBar_68rkk_8:after {
    content: " ";
    width:4px;
    height: 113px;
    background-color: var(--focus-indicator-color);
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 8px 0 0 8px;
  }
._listRoot_k7nh9_3 {
  flex: 1;
  padding-top: var(--document-list-padding-top);
  padding-bottom: 80px;
}
._listRoot_k7nh9_3 ol {
    position: relative;
  }
._theme--dark_k7nh9_13 ._listRoot_k7nh9_3 {
    --focus-background-color: var(--neutral-15);
  }
._listRootHidden_k7nh9_19 {
  /* !important is needed to override inline styles added by third-party library */
  position: absolute !important;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -9999;
  pointer-events: none;
}
._newListRootEmpty_k7nh9_29 {
  margin-top: calc(-1 * var(--inbox-header-height));
  display: flex;
  justify-content: center;
  align-items: center;
  position: inherit !important;
}
._newListRootEmpty_k7nh9_29 ._emptyListContentWrapper_k7nh9_36 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
._newListRootEmpty_k7nh9_29 ._emptyListContentWrapper_k7nh9_36 ._title_k7nh9_42 {
      font-weight: 600;
      font-size: 1em;
      margin: 1em 0;
      color: var(--text-primary);
    }
._newListRootEmpty_k7nh9_29 ._emptyListContentWrapper_k7nh9_36 ._text_k7nh9_49 {
      margin: 0;
      margin-bottom: 1em;
      margin-top: 1em;
      font-size: 0.875em;
      color: var(--text-secondary);
      text-align: center;
      max-width: 360px;
    }
._newListRootEmpty_k7nh9_29 ._emptyListContentWrapper_k7nh9_36 ._text_k7nh9_49._wideEmptyStateMessage_k7nh9_58 {
        max-width: 560px;
      }
._newListRootEmpty_k7nh9_29 ._emptyListContentWrapper_k7nh9_36 ._bigEmptyStateIcon_k7nh9_63 {
      height: 100px;
      width: 100px;
      color: var(--icon-faint);
      fill: var(--icon-faint);
    }
._rowLink_k7nh9_72 {
  color: inherit;
  text-decoration: inherit;
  display: inherit;
  overflow: hidden;
}
._row_k7nh9_72 {
  /* Height is set by JS */
  padding: var(--document-list-item-horizontal-padding) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  transition: transform 0.2s ease-out;
}
._row_k7nh9_72:focus {
    outline: none;
  }
@media (min-width: 769px) {
._row_k7nh9_72 {
    padding-left: var(--min-left-pad);
}
  }
._rowBeingRemoved_k7nh9_98 {
  transform: translate(-100%, 0);
}
._actionsSidebar_k7nh9_102 {
  width: 120px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
._actionsSidebar_k7nh9_102 ._bulletSeparator_k7nh9_110 {
    background: var(--border-primary);
    width: 4px;
    height: 4px;
    min-width: 4px;
    min-height: 4px;
    border-radius: 100%;
    margin: 0 6px;
    display: inline-block;
  }
._triggerClassName_k7nh9_122 {
  margin-right: 8px;
}
._actionsContainer_k7nh9_126 {
  display: flex;
  margin-right: 24px;
  margin-top: .5em;
  align-items: center;
  z-index: 2;
}
._triageActionsContainer_k7nh9_134 {
  display: none;
  justify-self: flex-end;
  border-radius: var(--action-button-border-radius);
  background-color: var(--background-elevated);
  box-shadow: var(--shadow-100);
  height: 32px;
  overflow: hidden;
}
._content_k7nh9_144 {
  flex: 1 1 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
._content_k7nh9_144._hiddenChildren_k7nh9_149 {
    opacity: 0;
  }
._content_k7nh9_144 ._titleRow_k7nh9_153 {
    display: flex;
    font-weight: 600;
    margin-right: var(--s1);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--document-list-title-color);
    margin-bottom: var(--spacer-1);
    font-size: var(--font-size-lg);
    line-height: 20px;
    display: block;
  }
._content_k7nh9_144 ._contentRow_k7nh9_167 {
    opacity: 1;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.25rem;
  }
._content_k7nh9_144 ._contentRow_k7nh9_167 ._itemPlaceholder_k7nh9_173 {
      height: var(--document-list-item-height);
    }
._content_k7nh9_144 ._contentRow_k7nh9_167 ._infoRow_k7nh9_177 {
      color: var(--document-list-info-color);
      font-size: var(--font-size-base);
      margin-top: var(--spacer-1);
      margin-bottom: var(--spacer-2);
      line-height: 1.25rem;
      display: flex;
      align-items: center;
    }
._content_k7nh9_144 ._contentRow_k7nh9_167 ._infoRow_k7nh9_177 ._author_k7nh9_186 {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: var(--text-secondary);
      }
._content_k7nh9_144 ._contentRow_k7nh9_167 ._infoRow_k7nh9_177 ._bulletSeparator_k7nh9_110 {
        /* color: var(--border-primary); */
        /* margin: 0 10px; */
        background: var(--border-primary);
        width: 4px;
        height: 4px;
        min-width: 4px;
        min-height: 4px;
        border-radius: 100%;
        margin: 0 10px;
      }
._content_k7nh9_144 ._contentRow_k7nh9_167 ._infoRow_k7nh9_177 ._tags_k7nh9_205 {
        display: flex;
        align-items: center;
      }
._content_k7nh9_144 ._contentRow_k7nh9_167 ._infoRow_k7nh9_177 ._tag_k7nh9_205 {
        margin-right: var(--spacer-2);
      }
._content_k7nh9_144 ._contentRow_k7nh9_167 div {
      margin-right: var(--s1);
    }
._content_k7nh9_144 ._contentRow_k7nh9_167 div a,
      ._content_k7nh9_144 ._contentRow_k7nh9_167 div ._archive_k7nh9_219 {
        color: var(--text);
      }
._date_k7nh9_226 {
  width: max-content;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding-right: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._date_k7nh9_226 ._currentDocumentLocation_k7nh9_235 {
    font-size: 10px;
    font-weight: 500;
  }
._description_k7nh9_241 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text-secondary);
  pointer-events: none;
}
._previewImageContainer_k7nh9_249 {
  position: relative;
  max-width: var(--document-list-image-width);
  min-width: var(--document-list-image-width);
  height: var(--document-list-image-height);
  margin-right: var(--s2);
  display: flex;
  opacity: 1;
  margin-bottom: auto;
  margin-top: var(--spacer-1);
}
._previewImageContainer_k7nh9_249._hiddenChildren_k7nh9_149 {
    opacity: 0;
  }
._timeToRead_k7nh9_265 {
  white-space: nowrap;
}
._searchPreviewText_k7nh9_269 {
  padding-top: 8px;
  padding-bottom: 8px;
  color: var(--text-grey-darker);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
._progressBarContainer_k7nh9_278 {
  padding-top: var(--s1);
}
._hoverContainer_k7nh9_282 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
._hoverContainer_k7nh9_282 ._hoverBar_k7nh9_288 {
    position: absolute;
    width: 100%;
    border-left: var(--focus-indicator-width) solid var(--focus-indicator-color);
    background: var(--focus-background-color);
    height: 50px;
    left: 0;
    top: 0;
    transform-origin: top left;
  }
._listItemIsFocused_k7nh9_300 ._triageActionsContainer_k7nh9_134 {
    display: flex;
    box-sizing: content-box;
  }
._truncate_k7nh9_307 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
._emptyStateMessage_k7nh9_313 a {
    text-decoration: underline;
  }
._allCaughtUp_k7nh9_319 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: calc(var(--safe100vh) - 65px);
}
._allCaughtUp_k7nh9_319 svg {
    width: 80px;
    height: 80px;
    color: var(--icon-faint);
    margin-bottom: 24px;
  }
._allCaughtUp_k7nh9_319 h2 {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
._allCaughtUp_k7nh9_319 p {
    margin: 0;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-secondary);
    text-align: center;
  }
._listItemDeleted_k7nh9_353 ._previewImageContainer_k7nh9_249,
  ._listItemDeleted_k7nh9_353 ._content_k7nh9_144 {
    opacity: 0.5;
  }
._listItemDeleted_k7nh9_353 ._date_k7nh9_226 {
    opacity: 0.5;
  }
._listItemDeleted_k7nh9_353 ._row_k7nh9_72 {
    cursor: default;
  }

._placeholder_1vcwy_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 0px 0px 0px 1px var(--border-tertiary-alpha);
  background-size: var(--document-list-image-width) var(--document-list-image-height);
}

._placeholder_1vcwy_1 svg path {
      fill: var(--placeholder-fill-color);
    }

._placeholder_1vcwy_1._placeholderBg1_1vcwy_17 {
    background-image: var(--placeholder-bg-1);
  }

._placeholder_1vcwy_1._placeholderBg2_1vcwy_21 {
    background-image: var(--placeholder-bg-2);
  }

._placeholder_1vcwy_1._placeholderBg3_1vcwy_25 {
    background-image: var(--placeholder-bg-3);
  }

._placeholder_1vcwy_1._placeholderBg4_1vcwy_29 {
    background-image: var(--placeholder-bg-4);
  }

._previewImage_1vcwy_34 {
  margin: auto;
  opacity: 0.75;
  border-radius: 4px;
  width: var(--document-list-image-width);
  height: var(--document-list-image-height);
  box-shadow: inset 0px 0px 0px 1px var(--border-tertiary-alpha);
  background-size: cover;
  background-position: center;
}
._docIcon_3pp68_1 {
  min-width: 16px;
  width: 16px;
  height: 16px;
  fill: var(--document-list-doc-icon-color);
  margin-right: 8px;
}

._favicon_3pp68_9 {
  min-width: 16px;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-size: cover;
  position: relative;
}

._selectRoot_q3h11_1 {
  font-family: var(--ui-font);
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

._selectRoot_q3h11_1 > span {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

._selectRoot_q3h11_1 .select__control {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-secondary-alpha);
    border-radius: 0;
    box-shadow: none;
  }

._selectRoot_q3h11_1 .select__control:focus {
      border: 0;
      border-bottom: 1px solid var(--border-secondary-alpha);
      box-shadow: none;
    }

._selectRoot_q3h11_1 .select__control:hover,
    ._selectRoot_q3h11_1 .select__control.select__control--is-focused:hover {
      border-color: var(--border-secondary-alpha);
      box-shadow: none;
    }

._selectRoot_q3h11_1 .select__input::placeholder,
  ._selectRoot_q3h11_1 .select__placeholder {
    font-size: 14px;
    font-family: inherit;
    color: var(--text-placeholder);
  }

._selectRoot_q3h11_1 .select__placeholder {
    grid-area: 1 / 1 / 2 / 3;
  }

._selectRoot_q3h11_1 .select__value-container {
    display: grid;
    padding: 12px;
    font-size: 14px;
  }

._selectRoot_q3h11_1 .select__input-container {
    flex: 1;
    display: flex;
    color: var(--text-primary);
    cursor: text;
    grid-area: 1 / 1 / 2 / 3;
    font-size: 14px;
  }

._selectRoot_q3h11_1 .select__value-container--has-value {
    display: flex;
    flex: 1 1 0%;
    flex-wrap: wrap;
    padding: 8px 12px;
  }

._selectRoot_q3h11_1 .select__input {
    font-size: 14px;
  }

._selectRoot_q3h11_1 .select__menu {
    background: var(--popover-background);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 4px 0;
    position: static;
  }

._selectRoot_q3h11_1 .select__menu-list {
    max-height: 400px;
    overflow-y: scroll;
  }

._selectedTag_q3h11_89 {
  margin: 4px 6px 4px 0;
}

._option_q3h11_93 {
  cursor: pointer;
  font-size: 12px;
}

._optionInner_q3h11_98 {
  padding: 4px 12px;
}

._optionInner_q3h11_98 * {
    cursor: pointer;
  }

._optionFocused_q3h11_106 ._optionInner_q3h11_98 {
    background: var(--edit-tags-form-focused-option-background);
  }

/* 
  This is an option like any other in the list but we want to make it look
  like it's in a separate section below the list
*/
._optionNew_q3h11_116 {
  border-top: 1px solid var(--border-secondary);
  margin-top: 8px;
}
._optionNew_q3h11_116 ._optionInner_q3h11_98 {
    margin-top: 8px;
  }
/*
    If it's the only item in the list, collapse
  */
._optionNew_q3h11_116._option_q3h11_93:first-child {
    border-top: 0;
    margin-top: 0;
  }
._optionNew_q3h11_116._option_q3h11_93:first-child ._optionInner_q3h11_98 {
      margin-top: 0;
    }

._optionPrefix_q3h11_137 {
  color: var(--text-secondary);
  margin-right: 0.5em;
}

._selectRootShownInMargin_q3h11_142:not(._selectRootInReadOnlyMode_q3h11_143) {
    background: var(--popover-background);
    box-shadow: -0.0687094px 1.99882px 10px rgba(25, 26, 28, 0.1), -0.0264658px 0.769916px 3.18519px rgba(25, 26, 28, 0.0607407), -0.00559855px 0.162867px 0.814815px rgba(25, 26, 28, 0.0392593);
  }

._selectRootInReadOnlyMode_q3h11_143 {
  width: auto;
}

._selectRootInReadOnlyMode_q3h11_143 .select__control {
    border-bottom: 0;
    box-shadow: none;
    cursor: pointer;
  }

._selectRootInReadOnlyMode_q3h11_143 .select__control:hover {
      border-bottom: 0;
    }

._selectRootInReadOnlyMode_q3h11_143 .select__control.select__input-container {
      display: none;
    }

._selectRootInReadOnlyMode_q3h11_143 .select__control button {
      pointer-events: none;
      padding-right: 6px;
    }

._selectRootInReadOnlyMode_q3h11_143 .select__control button span[aria-hidden="true"] {
        display: none;
      }

._selectRootInReadOnlyMode_q3h11_143 .select__menu {
    display: none;
  }._root_1lg1m_1 {
  background: var(--tag-background);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: default;
  height: 20px;
  display: inline-flex;
}

._rootHasHoverStyle_1lg1m_16 {
  cursor: pointer;
  transition: opacity 200ms linear;
}

._rootHasHoverStyle_1lg1m_16:hover {
    opacity: 0.8;
  }

._hasActionButton_1lg1m_25 {
  padding-right: 0;
}

._icon_1lg1m_29 svg * {
    fill: var(--icon-secondary);
  }
._root_104qh_1 {
  max-width: 305px;
  width: 305px;
}

._rootInReadOnlyMode_104qh_6 {
  border: none;
  box-shadow: none;
  width: auto;
}._progressBarContainer_q95nq_1 {
  width: 100%;
  height: 10px;
  display: flex;
  position: relative;
  overflow: visible;
  transition: all 0.2s;
}
._progressBar_q95nq_1 {
  position: absolute;
  height: 1px;
  background: var(--reading-progress-background);
  left: 0;
  transition: all 0.2s;
  border-right: 1px solid var(--background-primary);
}

._scrollProgressBar_q95nq_18 {
  position: absolute;
  height: 1px;
  background: var(--reading-progress-max-background);
  left: 0;
  transition: all 0.2s;
  z-index: 1;
  border-right: 1px solid var(--background-primary);
}

._scrollProgressBarGradient_q95nq_28 {
  background: #9708CC;
}

._maxProgressBar_q95nq_32 {
  position: absolute;
  height: 1px;
  background: var(--reading-progress-max-background);
  left: 0;
  transition: all 0.2s;
}

._progressPoint_q95nq_40 {
  height: 9px;
  width: 9px;
  border-radius: 5px;
  top: -4px;
  position: absolute;
  left: 0;
  z-index: 2;
  border: 2px solid var(--background-primary);
  background: var( --reading-progress-point);
  transition: transform 0.1s;
}

._gradient_q95nq_53 {
  background: var(--reading-progress-gradient);
  z-index: 1;
  height: 1px;
  position: absolute;
  left: 0;
  transition: width 0.2s;
  border-right: 1px solid var(--background-primary);
}

._progressBarLarge_q95nq_63 ._progressBar_q95nq_1, ._progressBarLarge_q95nq_63 ._gradient_q95nq_53, ._progressBarLarge_q95nq_63 ._scrollProgressBar_q95nq_18 {
    height: var(--progress-bar-large-height);
  }

._progressBarLarge_q95nq_63 ._progressPoint_q95nq_40 {
    height: 1px;
    width: 10px;
  }
._statusDot_1mj69_1 {
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 100%;
  border: 2px solid var(--background-primary);
  z-index: 1;
  top: -5px;
  left: -5px;
  box-sizing: content-box;
}

._statusDotUnopened_1mj69_13 {
  background: var(--status-dot--unopened-color);
}

._statusDotSavedMultipleTimes_1mj69_17 {
  background: var(--green-60);
}

._statusDotFeedUnopened_1mj69_21 {
  background: var(--teal-70);
}._timeLeftToRead_1pnns_1 {
  white-space: nowrap;
}._timeToListen_1f8fz_1 {
  white-space: nowrap;
}
._actionButton_90366_1 {
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  transition: background 150ms ease-in, box-shadow 150ms ease;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  padding: 0;
}
._actionButton_90366_1 svg {
    height: 20px;
    min-height: 20px;
    color: var(--icon-secondary);
  }
._actionButton_90366_1:hover:not(._isDisabled_90366_22) {
    background: var(--u-alpha-200);
  }
._actionButton_90366_1:hover:not(._isDisabled_90366_22) svg {
      color: var(--icon-primary);
    }
._actionButton_90366_1._documentLocationActionButton_90366_30 {
    border-radius: var(--action-button-border-radius);
  }._adaptiveHeader_1cti3_3 {
  display: flex;
  justify-content: flex-start;
  padding: 0.875em 0 var(--s1);
  position: fixed;
  top: 0;
  z-index: 101;
  flex-direction: column;
  align-items: flex-end;
  margin-top: var(--progress-bar-large-height);
  height: calc(var(--sidebar-nav-height) - 1px);
  min-height: calc(var(--sidebar-nav-height) - 1px);
  transition: top 0.2s ease-in-out, right var(--panels-transition-time) ease-in-out, opacity 0.2s ease-in-out, border-bottom-color 0.2s;
  width: calc(100% - (var(--sidebars-max-width) * 2));
  background: var(--content-background-color);
  border-bottom: 1px solid var(--border-tertiary-alpha);
  opacity: 1;
}
._adaptiveHeader_1cti3_3._isTop_1cti3_21 {
    border-bottom-color: transparent;
  }
/* On Safari sometimes the styles get stucked idk why :(, adding a transition for
  the width property seems to fix it */
._adaptiveHeader_1cti3_3._isSafari_1cti3_27 {
    transition: top 0.2s ease-in-out, right var(--panels-transition-time) ease-in-out, width var(--panels-transition-time) ease-in-out;
  }
._adaptiveHeader_1cti3_3._isHidden_1cti3_31 {
    top: -66px;
  }
._adaptiveHeader_1cti3_3._leftSidebarHidden_1cti3_35 {
    left: 0;
  }
._adaptiveHeader_1cti3_3._rightSidebarHidden_1cti3_39 {
    right: 0;
  }
._adaptiveHeader_1cti3_3._leftSidebarHidden_1cti3_35,
  ._adaptiveHeader_1cti3_3._rightSidebarHidden_1cti3_39 {
    width: calc(100% - var(--sidebars-max-width));
  }
._adaptiveHeader_1cti3_3._leftSidebarHidden_1cti3_35._rightSidebarHidden_1cti3_39 {
    width: 100%;
  }
._adaptiveHeader_1cti3_3._shouldShowHeaderOverYouTubeVideo_1cti3_52 {
    z-index: 3;
  }
._adaptiveHeader_1cti3_3._headerIsHiddenOverYouTubeVideo_1cti3_56 {
    display: none;
  }
._hiddenHeader_1cti3_61 {
  display: flex;
  justify-content: flex-start;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 30;
  flex-direction: column;
  align-items: flex-end;
  margin-top: var(--progress-bar-large-height);
  height: calc(var(--sidebar-nav-height) - 1px);
  min-height: calc(var(--sidebar-nav-height) - 1px);
  width: 100%;
  background: transparent;
}
._hiddenYouTubeHeader_1cti3_77 {
    height: 10px;
    min-height: 10px;
}
._adaptiveHeaderContent_1cti3_82 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  position: relative;
  padding: 0 16px;
}
._left_1cti3_35 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  flex: 1;
  gap: 8px;
}
._center_1cti3_100 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex: 1;
}
@media (max-width: 1300px){
._center_1cti3_100 {
    display: none;
}
  }
._right_1cti3_39 {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: 32px;
}
._hidden_1cti3_61 {
  opacity: 0;
  pointer-events: none;
}
._dropdownTriggerClassName_1cti3_125 {
  margin-left: 12px;
  background: transparent;
  box-shadow: none;
}
._triageActionsContainer_1cti3_131 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  background: var(--default-blurred-button-background);
  -webkit-backdrop-filter: blur(var(--default-blurred-button));
          backdrop-filter: blur(var(--default-blurred-button));
  border-radius: 31px;
  position: sticky;
  top: 0.875rem;
}
.button._actionButton_1cti3_143 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
}
._actionButton_1cti3_143.button svg {
    height: 20px;
    width: 20px;
    fill: var(--icon-secondary);
  }
._actionButton_1cti3_143.button svg * {
    fill: var(--icon-secondary);
  }
._actionButton_1cti3_143.button:hover {
    background: transparent;
  }
._actionButton_1cti3_143._isActive_1cti3_167.button svg * {
    fill: var(--icon-interactive);
  }
._hidePanelsButton_1cti3_172 {
  border-radius: 100%;
  margin-left: 0.4375em;
  transition: transform var(--panels-transition-time) ease-in-out;

}
@media (max-width: 1151px) {
._hidePanelsButton_1cti3_172 {
    background: var(--default-blurred-button-background);
    -webkit-backdrop-filter: blur(var(--default-blurred-button));
            backdrop-filter: blur(var(--default-blurred-button));

}
  }
._hidePanelsButton_1cti3_172 svg {
    fill: none;
    height: 20px;
    min-height: 20px;
    width: 20px;
    min-width: 20px;
  }
._hidePanelsButton_1cti3_172 svg path {
      fill: var(--icon-secondary);
    }
._pdfSnapshotButton_1cti3_196 {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}
._pdfSnapshotButton_1cti3_196 svg * {
    fill: var(--icon-secondary);
  }
._pdfSnapshotButton_1cti3_196._isActive_1cti3_167 {
    background: var(--u-alpha-blue-200);
  }
._pdfSnapshotButton_1cti3_196._isActive_1cti3_167 svg * {
      fill: var(--icon-interactive);
    }
._divider_1cti3_219 {
  background: var(--border-secondary);
  width: 16px;
  height: 1px;
  transform: rotate(90deg);
}
._appearancePanel_1cti3_226 {
  left: calc(var(--sidebars-max-width) + 16px) !important;
  top: calc(var(--sidebar-nav-height) + 5px);
}
._leftSidebarHidden_1cti3_35 ._appearancePanel_1cti3_226 {
  left: 208px !important;
}
._timeLeftToListen_1cti3_235,
._timeLeftToRead_1cti3_236 {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}
._headerSeparator_1cti3_243 {
  width: 22px;
  height: 1px;
  background: var(--border-secondary);
  max-height: 1px;
  transform: rotate(-90deg);
}
._docHeaderContent_1cti3_251 {
  display: flex;
  flex: 1;
}
._leftSidebarHidden_1cti3_35 ._docHeaderContent_1cti3_251 {
  padding-left: 210px;
}
._leftSidebarHidden_1cti3_35 ._notebookHeaderContent_1cti3_260 {
  padding-left: 110px;
}
._jumpToPageInput_1cti3_264 {
  margin-left: 66px;
}
._leftSidebarHidden_1cti3_35 ._jumpToPageInput_1cti3_264 {
  margin-left: -140px;
}
._leftSidebarHidden_1cti3_35._rightSidebarHidden_1cti3_39 ._jumpToPageInput_1cti3_264 {
  margin-left: -155px;
}
._videoHeaderDividerWrapper_1cti3_276 {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._videoHeaderDividerWrapper_1cti3_276 ._videoHeaderDivider_1cti3_276 {
    background: var(--border-tertiary-alpha);
    width: 20px;
    height: 1px;
    transform: rotate(90deg);
  }
._toggleVideHeaderOpenButton_1cti3_291 {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._toggleVideHeaderOpenButton_1cti3_291 svg * {
    fill: var(--icon-secondary);
  }
._enhacingTranscriptSpinner_1cti3_303 {
  width: 32px;
  height: 32px;
}
._enhacingTranscriptSpinner_1cti3_303 div {
    width: 15px;
    height: 15px;
    border-width: 2px;
  }
._overlay_1698a_1 {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1;
}
._panel_1psij_1 {
  z-index: 2;
  width: var(--appearance-panel-width);
  height: max-content;
  max-height: 500px;
  background: var(--background-elevated);
  position: fixed;
  left: 50px;
  bottom: 18px;
  box-shadow: var(--shadow-200);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
}

._normalPanelTitle_1psij_16 {
  margin: 0;
  margin-bottom: 1.625em;
  font-family: var(--ui-font);
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  color: var(--text-primary);
}

._isPdfView_1psij_26 {
  opacity: .5;
  pointer-events: none;
}

._themeSelectorWrapper_1psij_31 {
  margin-bottom: 1.25em;
}

._sizePickerWrapper_1psij_35 {
  height: 40px;
  padding: 0 4px 0 8px;
  border-bottom: 1px solid var(--border-tertiary-alpha);
  display: flex;
  align-items: center;
}

._sizePickerWrapper_1psij_35:last-child {
    border-bottom: none;
  }

._label_1psij_47 {
  margin: 0;
  margin-bottom: 0.5em;
  font-family: var(--ui-font);
  font-style: normal;
  font-weight: 500;
  font-size: 0.75em;
  color: var(--text-secondary);
}

._themes_1psij_57 {
  display: flex;
  justify-content: space-between;
}

._themes_1psij_57 ._theme_1psij_31 {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-family: var(--ui-font);
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
  }

._themes_1psij_57 ._theme_1psij_31 ._box_1psij_72 {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border-radius: 6px;
      height: 56px;
      width: 77px;
      margin-bottom: 0.5em;
      box-shadow: 0 0 0 1px var(--border-tertiary-alpha);
    }

._themes_1psij_57 ._theme_1psij_31._activeTheme_1psij_84 ._box_1psij_72 {
      border: 2px solid var(--border-focus);
      box-shadow: none;
    }

._themes_1psij_57 ._theme_1psij_31._light_1psij_89 ._box_1psij_72 {
      background: var(--neutral-100);
    }

._themes_1psij_57 ._theme_1psij_31._light_1psij_89 ._box_1psij_72 svg * {
        fill: var(--neutral-20);
      }

._themes_1psij_57 ._theme_1psij_31._dark_1psij_97 ._box_1psij_72 {
      background: var(--neutral-10);
    }

._themes_1psij_57 ._theme_1psij_31._dark_1psij_97 ._box_1psij_72 svg * {
        fill: #fff;
      }

._themes_1psij_57 ._theme_1psij_31._auto_1psij_105 ._box_1psij_72 {
      background: linear-gradient(65.89deg, #CBBACC 6.58%, #2580B3 106.2%);
    }

._themes_1psij_57 ._theme_1psij_31._auto_1psij_105 ._box_1psij_72 svg * {
        fill: #fff;
      }

._settingsWrapper_1psij_115 {
  border-radius: 6px;
  background: var(--u-alpha-100);
  border: 1px solid var(--border-tertiary-alpha);
}

._typeface_1psij_121 {
  display: flex;
  align-items: center;
  height: 32px;
  cursor: pointer;
  width: 100%;
  padding-right: 4px;
}

._typeface_1psij_121 ._left_1psij_129 {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }

._typeface_1psij_121 ._left_1psij_129 ._fontLabel_1psij_137 {
      margin-left: 8px;
    }

._typeface_1psij_121 ._left_1psij_129 svg * {
      fill: var(--icon-tertiary);
    }

._typeface_1psij_121 ._right_1psij_146 {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

._typeface_1psij_121 ._right_1psij_146 ._currentFont_1psij_151 {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: var(--text-secondary);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
      max-width: 120px;
    }

._typeface_1psij_121 ._right_1psij_146 svg {
      margin-left: 8px;
    }

/* & svg * {
      fill: var(--icon-secondary);
    } */

._typefaceSubpanel_1psij_173 ._titleWrapper_1psij_174 {
    height: 48px;
    margin: -12px;
    border-bottom: 1px solid var(--border-tertiary-alpha);
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
  }

._typefaceSubpanel_1psij_173 ._titleWrapper_1psij_174 ._backWrapper_1psij_184 {
      cursor: pointer;
      width: 30px;
    }

._typefaceSubpanel_1psij_173 ._titleWrapper_1psij_174 ._backWrapper_1psij_184 svg {
        transform: rotate(180deg);
      }

._typefaceSubpanel_1psij_173 ._titleWrapper_1psij_174 ._typefaceSubpanelTitle_1psij_193 {
      margin: 0 auto;
      font-family: var(--ui-font);
      font-style: normal;
      font-weight: 500;
      font-size: 1em;
      color: var(--text-primary);
      position: relative;
      left: -15px;
    }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._subHeader_1psij_206 {
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      color: var(--text-secondary);
      font-weight: var(--font-weight-medium);
      font-family: var(--ui-font);
      margin: 0;
      margin-bottom: 10px;
    }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._subHeader_1psij_206._sansSerif_1psij_216 {
        margin-top: 1em;
      }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontsWrapper_1psij_221 {
      background: var(--u-alpha-100);
      border-radius: 6px;
      border: 1px solid var(--border-tertiary-alpha);
    }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontsWrapper_1psij_221 ._fontWrapper_1psij_226:last-child {
        border-bottom: none;
      }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontWrapper_1psij_226 {
      cursor: pointer;
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 12px;
      font-variation-settings: "opsz" 19;
      border-bottom: 1px solid var(--border-tertiary-alpha);
      transition: background 0.15s ease-in-out;
    }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontWrapper_1psij_226:hover {
        background: var(--appearance-panel-item-hover-background);
      }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontWrapper_1psij_226 ._fontName_1psij_245 {
        font-size: 16px;
        line-height: 24px;
      }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontWrapper_1psij_226 ._checkOnIcon_1psij_250 {
        margin-left: auto;
      }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontWrapper_1psij_226 ._checkOnIcon_1psij_250 * {
          fill: var(--icon-interactive);
        }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontWrapper_1psij_226 ._checkOffIcon_1psij_258 {
        margin-left: auto;
      }

._typefaceSubpanel_1psij_173 ._fonts_1psij_205 ._fontWrapper_1psij_226 ._checkOffIcon_1psij_258 * {
          fill: var(--icon-faint);
        }

._sizePicker_1psij_35 {
  display: flex;
  align-items: center;
  width: 100%;
}

._sizePicker_1psij_35 ._left_1psij_129 {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }

._sizePicker_1psij_35 ._left_1psij_129 ._sizeLabel_1psij_282 {
      margin-left: 8px;
    }

._sizePicker_1psij_35 ._left_1psij_129 svg * {
      fill: var(--icon-tertiary);
    }

._sizePicker_1psij_35 ._right_1psij_146 {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

._sizePicker_1psij_35 ._right_1psij_146 ._displayValue_1psij_296 {
      color: var(--text-secondary);
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      margin-right: 8px;
    }

._sizePicker_1psij_35 ._right_1psij_146 ._buttonsWrapper_1psij_304 {
      display: flex;
      gap: 1px;
    }

._sizePicker_1psij_35 ._right_1psij_146 ._buttonsWrapper_1psij_304 button {
        height: 32px;
        width: 32px;
        background: var(--u-alpha-200);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background 0.15s ease-in-out;
      }

._sizePicker_1psij_35 ._right_1psij_146 ._buttonsWrapper_1psij_304 button:hover {
          background: var(--appearance-panel-item-hover-background);
        }

._sizePicker_1psij_35 ._right_1psij_146 ._buttonsWrapper_1psij_304 button svg * {
          fill: var(--icon-primary);
        }

._sizePicker_1psij_35 ._right_1psij_146 ._buttonsWrapper_1psij_304 button:first-child {
          border-radius: 4px 0 0 4px;
        }

._sizePicker_1psij_35 ._right_1psij_146 ._buttonsWrapper_1psij_304 button:last-child {
          border-radius: 0 4px 4px 0;
        }
._numberInput_fz9od_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: text;
  color: var(--text-tertiary);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  border-radius: 6px;
  padding: 8px 3px 8px 8px;
  gap: 2px;
  height: 32px;
  transition: box-shadow 100ms ease-in;
}
._numberInput_fz9od_1._isHovered_fz9od_17 {
    box-shadow: 0 0 0 1px var(--border-secondary);
  }
._numberInput_fz9od_1._isFocused_fz9od_21 {
    box-shadow: 0 0 0 2px var(--border-focus);
  }
._numberInput_fz9od_1 ::-webkit-outer-spin-button,
  ._numberInput_fz9od_1 ::-webkit-inner-spin-button {
    -webkit-appearance: none;
            appearance: none;
    margin: 0;
  }
._numberInput_fz9od_1 ._current_fz9od_31 {
    pointer-events: none;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 16px;
    -webkit-appearance: textfield;
            appearance: textfield;
    font-family: var(--ui-font);
    font-style: normal;
    font-weight: 500;
    outline: none;
  }
._numberInput_fz9od_1 ._current_fz9od_31:focus {
      pointer-events: auto;
    }
._numberInput_fz9od_1 ._actionButtons_fz9od_50 {
    display: flex;
    margin-left: auto;
    gap: 2px;
    visibility: hidden;
    cursor: pointer;
  }
._numberInput_fz9od_1 ._actionButtons_fz9od_50 button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 26px;
      height: 26px;
      background: var(--u-alpha-200);
    }
._numberInput_fz9od_1 ._actionButtons_fz9od_50 button:first-child {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        margin-left: 12px;
      }
._numberInput_fz9od_1 ._actionButtons_fz9od_50 button:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
._numberInput_fz9od_1 ._actionButtons_fz9od_50 button svg * {
        fill: var(--icon-primary);
        color: var(--icon-primary);
      }
._numberInput_fz9od_1._alwaysShowButtons_fz9od_83 ._actionButtons_fz9od_50,
  ._numberInput_fz9od_1._isHovered_fz9od_17 ._actionButtons_fz9od_50,
  ._numberInput_fz9od_1._isFocused_fz9od_21 ._actionButtons_fz9od_50 {
    visibility: visible;
  }

._root_1olx7_3 {
  position: relative;
}
._content_1olx7_7 {

}
._rtl_1olx7_11 {
  direction: rtl;
  text-align: right;
}
._contentWithoutHighlightIcons_1olx7_16 rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper, ._contentWithoutHighlightIcons_1olx7_16 rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
      display: none !important;
    }
._zenMode_1olx7_25 > h1,
._zenMode_1olx7_25 > h2,
._zenMode_1olx7_25 > h3,
._zenMode_1olx7_25 > h4,
._zenMode_1olx7_25 > h5,
._zenMode_1olx7_25 > h6,
._zenMode_1olx7_25 > a,
._zenMode_1olx7_25 > aside,
._zenMode_1olx7_25 > figure,
._zenMode_1olx7_25 > img,
._zenMode_1olx7_25 > blockquote,
._zenMode_1olx7_25 > figure,
._zenMode_1olx7_25 > ol li,
._zenMode_1olx7_25 > ul li,
._zenMode_1olx7_25 > p,
._zenMode_1olx7_25 > pre,
._zenMode_1olx7_25 > table,
._zenMode_1olx7_25 > dl dt,
._zenMode_1olx7_25 > dl dd,
._zenMode_1olx7_25 > pre code,
._zenMode_1olx7_25 > figcaption {
  opacity: 0.1;
}
._returnToReadingButton_1olx7_50 {
  outline: none;
  cursor: pointer;
  transition: right var(--panels-transition-time) ease-in-out, box-shadow 100ms ease-in;
  border-radius: 50%;
  position: fixed;
  bottom: calc(var(--safeBottom0) + 24px);
  right: 24px;
  z-index: 2;
  background: var(--background-elevated);
  box-shadow: var(--shadow-100);
  height: var(--s4);
  width: var(--s4);
  padding: 0;
  border: none;
  text-align: center;
}
@media (min-width: 1080px) {
._returnToReadingButton_1olx7_50 {
    right: calc(var(--sidebars-max-width) + 24px);
}
  }
._returnToReadingButton_1olx7_50._isRightSidebarHidden_1olx7_71 {
    right: 24px;
  }
._returnToReadingButton_1olx7_50 svg {
    transition: background 150ms ease-in, box-shadow 150ms ease, transform 150ms ease;
    height: 20px;
    width: 20px;
    color: var(--icon-secondary);
    position: relative;
    top:1px;
  }
._returnToReadingButton_1olx7_50:hover {
    box-shadow: var(--shadow-300), inset 0 0 0 200px var(--u-alpha-200);
    background: var(--background-elevated);
  }
._returnToReadingButton_1olx7_50:hover svg {
      color: var(--icon-primary);
    }
._reverseButton_1olx7_93 svg {
    transform: rotateZ(180deg);
  }
._progressBarContainer_1olx7_99 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 4px;
  left: 0;
  z-index: 102;
  transition: padding var(--panels-transition-time) ease-in-out;
  padding: 0;
}
._highlightsFailedToRenderMessage_1olx7_110 {
  margin: 0;
  margin-bottom: 32px;
  background: var(--background-tertiary);
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 2;
  font-size: var(--font-size-base);
  display: flex;
  justify-content: space-between;
}
._highlightsFailedToRenderMessage_1olx7_110 > span {
    margin-right: 8px;
  }
._highlightsFailedToRenderMessage_1olx7_110 span {
    font-size: 13px;
  }
._highlightsFailedToRenderMessageButton_1olx7_130 {
  display: inline;
  padding: 0 0.5rem;
  text-align: center;
  margin-left: auto;
  margin-right: 12px;
}
._highlightsFailedToRenderCloseButton_1olx7_138 svg {
  width: 10px;
  height: 10px;
}
._loaderContainer_1olx7_143 {
  margin: 150px auto 56px;
  max-width: calc(var(--reading-editable-line-length) + var(--content-gutter) * 2);
  text-align: center;
}
._loaderContainer_1olx7_143 a {
    text-decoration: underline;
  }
._previewAnimation_1olx7_153 {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  margin-left: auto;
  margin-right: auto;
  top: 150px;
  left: 0;
  right: 0;
}
._loadPDF_1olx7_165 {
  width: 444px;
  height: 300px;
  perspective: 1500px;
}
._loadPDF_1olx7_165 * {
    display: block;
    transform-origin: 0 0;
  }
._loadPDF_1olx7_165 p {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
    margin: 0;
    float: left;
    width: 50%;
    height: 100%;
    background: inherit;
    padding: 12px 6px;
    border-radius: 2px;
    background: var(--sidebar-background);
  }
._loadPDF_1olx7_165 p:nth-child(1) {
    border-right: 1px solid var(--sidebar-background);
  }
._loadPDF_1olx7_165 p:nth-child(2) {
    border-left: 1px solid var(--sidebar-background);
    animation: _page_1olx7_294 5s ease-in-out infinite;
  }
._loadPDF_1olx7_165 p:nth-child(2) u {
      transform: scaleX(0);
      animation: _line1_1olx7_1 5s ease-in-out infinite
    }
._loadPDF_1olx7_165 p:nth-child(2) u:nth-child(2) {
      animation-name: _line2_1olx7_1
    }
._loadPDF_1olx7_165 p:nth-child(2) u:nth-child(3) {
      animation-name: _line3_1olx7_1
    }
._loadPDF_1olx7_165 p:nth-child(2) u:nth-child(4) {
      animation-name: _line4_1olx7_1
    }
._loadPDF_1olx7_165 u {
    width: 100%;
    height: 7px;
    background: var(--text-secondary);
    margin: 27px 0;
    opacity: 0.5;
  }
@keyframes _page_1olx7_294 {
  0%, 80% {
    transform: rotateY(0deg)
  }
  98%, 100% {
    transform: rotateY(-180deg)
  }
}
@keyframes _line1_1olx7_1 {
  0% {
    transform: scaleX(0)
  }
  15%, 100% {
    transform: scaleX(1)
  }
}
@keyframes _line2_1olx7_1 {
  0%, 20% {
    transform: scaleX(0)
  }
  35%, 100% {
    transform: scaleX(1)
  }
}
@keyframes _line3_1olx7_1 {
  0%, 40% {
    transform: scaleX(0)
  }
  55%, 100% {
    transform: scaleX(1)
  }
}
@keyframes _line4_1olx7_1 {
  0%, 60% {
    transform: scaleX(0)
  }
  75%, 100% {
    transform: scaleX(1)
  }
}
._pdfHidden_1olx7_268 {
  visibility: hidden;
  height: 0;
  position: fixed;
}
._pdfVisible_1olx7_274 {
  height: 100%;
}
._pdfScrollContainer_1olx7_278 {
  height: var(--safe100vh);
  overflow: auto;
}
._pdfContainer_1olx7_283 {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 0 1rem;
  padding-top: 90px;
}
._invertedPDF_1olx7_291 {
  filter: invert(72%) contrast(188%) sepia(0%) saturate(366%) hue-rotate(300deg);
}
._invertedPDF_1olx7_291 ._pageSection_1olx7_294 {
  }
._header_1olx7_298 {
  margin: 0;
  margin-top: 88px;
  padding: 0 var(--content-gutter);
}
._documentSearchBarWrapper_1olx7_304 {
  position: fixed;
  display: flex;
  align-items: center;
  background: var(--background-elevated);
  border: 1px solid var(--border-secondary-alpha);
  border-radius: 8px;
  box-shadow: var(--shadow-200);
  max-width: 700px;
  min-width: 360px;
  left: 0;
  right: 0;
  top: 80px;
  margin: auto;
}
._searchIcon_1olx7_320 {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._searchIcon_1olx7_320 svg {
    fill: var(--icon-secondary);
  }
._searchInputWrapper_1olx7_331 {
  display: flex;
  padding: 0px 8px;
  position: relative;
  flex: 1;
  align-items: center;
}
._searchInput_1olx7_331 {
  height: 32px;
  width: 100%;
  padding: 6px 114px 6px 36px;
  color: var(--inbox-header-active-tab-text-color);
  background: var(--document-search-input-background);
  font-size: 14px;
  border: none;
  border-radius: 4px;
  font-family: var(--ui-font);
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  transition: box-shadow 0.2s ease-in-out;
  outline: none;
}
._searchInput_1olx7_331:focus {
    box-shadow: 0 0 0 2px var(--border-focus);
  }
._searchInput_1olx7_331::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--text-placeholder);
    opacity: 1; /* Firefox */
  }
._searchInput_1olx7_331:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--text-placeholder);
  }
._searchInput_1olx7_331::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--text-placeholder);
  }
._searchInputInfoContainer_1olx7_372 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  right: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
._searchNavActions_1olx7_382 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
._searchButton_1olx7_388 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
}
._searchButtonIcon_1olx7_396 {
  color: var(--icon-secondary);
  fill: var(--icon-secondary)
}
._searchDoneAction_1olx7_401 {
  display: flex;
  width: 60px;
  border-left: 1px solid var(--border-secondary-alpha);
}
._searchDoneButton_1olx7_406 {
  color: var(--text-interactive);
  text-align: center;
  width: 100%;
  height: 50px;
  cursor: pointer;
}
::highlight(search-results) {
  background-color: var(--find-in-document-match-passive);
}
::highlight(search-results-active) {
  background-color: var(--find-in-document-match-active);
}

  ._button_1076y_1,
  ._button_1076y_1 button,
  ._button_1076y_1 .contentWrapper {
    height: 24px;
    width: 24px;
  }

._content_1076y_4 {
  max-width: 230px;
}

._deleteOption_1076y_14 {
  color: var(--text-error);
}

._savedAtOption_1076y_18 {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 16px;
  cursor: default;
}

._savedAtOption_1076y_18:hover,
  ._savedAtOption_1076y_18[data-highlighted] {
    background: none;
  }
/* Needs some extra specifivity */
._root_quz1d_2[class] {
  color: var(--icon-secondary);
  border-radius: 28px;
}

._actions_quz1d_7 {
  display: flex;
}

._action_quz1d_7 {
  margin: 2px;
}

._actionButton_quz1d_15 {
  display: flex;
  align-content: center;
  padding: 6px;
  border-radius: 28px;
  color: inherit;
  outline: none;
}

._actionButton_quz1d_15:focus:not(:active) {
    outline: none;
    /* The outline was square in Safari */
    box-shadow: 0 0 0 1px var(--border-focus);
  }

/* Duplicated because this selector breaks in Safari so it doesn't run */

._actionButton_quz1d_15:focus-visible:not(:active) {
    outline: none;
    /* The outline was square in Safari */
    box-shadow: 0 0 0 1px var(--border-focus);
  }

._actionButton_quz1d_15:hover {
    background: var(--main-highlighter-popover-action-hover-background);
  }

._actionIcon_quz1d_41 {
  height: 20px;
}

._actionIcon_quz1d_41 path {
    fill: currentColor;
  }

._deleteHighlightAction_quz1d_49 ._actionButton_quz1d_15 {
    color: var(--main-highlighter-popover-delete-highlight-icon-color);
    background: var(--main-highlighter-popover-delete-highlight-action-background);
  }

._deleteHighlightAction_quz1d_49 ._actionButton_quz1d_15:hover {
      opacity: 0.9;
    }

._actionsHasNote_quz1d_60 ._noteAction_quz1d_60,
._actionsHasTag_quz1d_61 ._tagAction_quz1d_61 {
  position: relative;
}

._actionsHasNote_quz1d_60 ._noteAction_quz1d_60::after, ._actionsHasTag_quz1d_61 ._tagAction_quz1d_61::after {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%, 0);
    content: '∙';
    font-size: 30px;
    line-height: 0;
    pointer-events: none;
  }

._subPopover_quz1d_76 {
  border-radius: 8px;
  font-family: var(--ui-font);
  padding: 4px 0;
}


._subPopoverListItem_quz1d_83:not(._subPopoverListItemDisabled_quz1d_83):hover {
  background: var(--highlighter-sub-popover-list-item-focused-background);
}

._subPopoverListItem_quz1d_83 + ._subPopoverAutoHighlightListItem_quz1d_87 {
  border-top: 1px solid var(--border-secondary-alpha);
  margin-top: 4px;
}

._subPopoverButton_quz1d_92 {
  gap: 8px;
  padding: 6px 16px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  border-left: 1px solid transparent;
}

._subPopoverButton_quz1d_92:focus-visible {
    outline: none;
    border-color: var(--focus-indicator-color);
  }

._subPopoverButtonPreContent_quz1d_107 {
  display: none;
}

._rootAutoHighlightingEnabled_quz1d_111:not(._rootAutoHighlightingAlwaysEnabled_quz1d_111) ._subPopoverButtonPreContent_quz1d_107 {
  display: block;
  width: 14px;
}

._subPopoverAutoHighlightListItemEnabled_quz1d_116 ._subPopoverButtonPreContent_quz1d_107 {
  color: red;
}

._subPopoverButtonPrimaryContent_quz1d_120 {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  line-height: 20px;
  display: flex;
  flex-direction: column;
  width: 168px;
}

._subPopoverButtonPrimaryContentDescription_quz1d_131 {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: initial;
}

._subPopoverKeyboardShortcut_quz1d_138 {
  color: var(--text-tertiary);
  text-align: right;
  font-size: var(--font-size-sm);
  display: inline-block;
  width: 48px;
}

._subPopoverListItemDisabled_quz1d_83 ._subPopoverKeyboardShortcut_quz1d_138 {
  color: var(--text-disabled);
}

._shortcut_quz1d_150 {
  color: var(--text);
  background: var(--u-alpha-200);
  padding: 0 3px;
}

._checkmarkIcon_quz1d_156 {
  color: var(--icon-interactive);
}
._root_w4rn6_1 {
  border-radius: 8px;
  overflow: hidden;

  transition: 0.1s box-shadow;
}

._fieldWrapper_w4rn6_8,
._field_w4rn6_8 {
  background: none;
  min-height: 60px;
  max-width: 248px;
}

._buttonsContainer_w4rn6_15 {
  padding: 8px;

  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--border-tertiary);
  max-height: 48px;

  transition: 0.1s max-height, 0.1s padding-bottom, 0.1s padding-top;
}

._buttonsContainer_w4rn6_15 button:first-of-type {
    background: none;
  }

._buttonsContainer_w4rn6_15 button:focus-visible {
    outline-offset: -1px;
  }

._buttonsContainer_w4rn6_15 button + button {
    margin-left: 4px;
  }

._root_w4rn6_1._rootShownInMargin_w4rn6_39 {
  border: none;
  box-shadow: none;
  width: auto;
}

._root_w4rn6_1._rootShownInMargin_w4rn6_39:not(._rootInReadOnlyMode_w4rn6_44) {
    background: var(--popover-background);
    box-shadow: -0.0687094px 1.99882px 10px rgba(25, 26, 28, 0.1), -0.0264658px 0.769916px 3.18519px rgba(25, 26, 28, 0.0607407), -0.00559855px 0.162867px 0.814815px rgba(25, 26, 28, 0.0392593);
  }

._rootShownInMargin_w4rn6_39._rootWhenFollowingFormIsActive_w4rn6_52:not(._rootInReadOnlyMode_w4rn6_44) {
      margin-bottom: 4px;
      opacity: 0.5;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 {
    border: none;
    box-shadow: none;
  }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._buttonsContainer_w4rn6_15 {
      padding: 0;
      max-height: 0;
      opacity: 0;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._fieldWrapper_w4rn6_8,
    ._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
      min-height: 0;
      width: auto;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._fieldWrapper_w4rn6_8::after,
    ._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
      padding-bottom: 0;
    }

._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
      color: var(--text-primary);
    }
._root_1p15o_1._rootShownInMargin_1p15o_1 {
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  background-color: var(--background-primary) !important;
}

._root_1p15o_1._rootIsReadOnly_1p15o_9 {
  background: var(--background-elevated);
}

._root_1p15o_1._rootIsReadOnly_1p15o_9:not(._rootIsNotFixedToScreenEdge_1p15o_12) {
    position: fixed;
    inset: 0;
    top: auto;
    max-width: none;
    border-radius: 0;
    padding-bottom: 32px;
  }

._root_1p15o_1._rootIsReadOnly_1p15o_9._rootShownInMargin_1p15o_1::after {
      content: ' ';
      position: absolute;
      inset: 0;
      right: auto;
      width: 1px;
      border-left: 1px solid var(--border-secondary-alpha);
    }

._readOnlyNote_1p15o_33 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text-primary);
}

._rootShownInMargin_1p15o_1 ._readOnlyNote_1p15o_33 {
  padding-top: 0;
  padding-bottom: 0;
}

._readOnlyHeader_1p15o_46 {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

._readOnlyAuthor_1p15o_52 {
  flex: 1;
  margin: 0;
  padding: 0;

  font-size: var(--font-size-sm);
  line-height: 150%;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._readOnlyCloseButton_1p15o_68 {
  color: var(--icon-secondary);
}

._readOnlyCloseButton_1p15o_68:focus-visible {
    outline: none;
  }

._rootIsNotFixedToScreenEdge_1p15o_12._rootShownInMargin_1p15o_1 ._readOnlyCloseButton_1p15o_68 {
  display: none;
}

._readOnlyNoteContents_1p15o_80 {
  font-size: 15px;
  line-height: 150%;
  overflow-y: auto;
  max-height: 33vh;
}
.button._triggerElement_wdtpy_1 {
  margin-left: calc(var(--s1) * 1.5);
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}

._triggerElement_wdtpy_1.button svg {
    width: 20px;
    min-width: 20px;
    margin-right: 1px;
  }

._triggerElement_wdtpy_1.button svg path {
      fill: var(--icon-secondary);
    }

._dropdownContent_wdtpy_26 {
  width: 219px;
}

._zoomStepsWrapper_wdtpy_30 {
  padding: 7px 8px;
}

._triggerElement_3e60f_1 {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
  margin-left: -9px;
}

._triggerElement_3e60f_1 svg path {
    fill: var(--icon-secondary);
  }

._triggerElement_3e60f_1 svg {
    width: 20px;
    min-width: 20px;
  }

._dropdownContent_3e60f_26 {
  width: max-content;
}

._loadingCaptionsNode_3e60f_30 {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: row;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  padding: 3.5px 26px;
}

._loadingCaptionsNode_3e60f_30 ._spinner_3e60f_39 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    margin-right: 4px;
    margin-left: -20px;
  }

._loadingCaptionsNode_3e60f_30 ._spinner_3e60f_39 div {
      width: 15px;
      height: 15px;
      border-width: 2px;
    }
._triggerElement_1gsie_1 {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}

._triggerElement_1gsie_1 svg path {
    fill: var(--icon-secondary);
  }

._triggerElement_1gsie_1 svg {
    width: 20px;
    min-width: 20px;
  }

._dropdownContent_1gsie_25 {
  width: max-content;
}
@keyframes _loading_1584k_1 {
  to {
    background-position-x: -20%;
  }
}
._hiddenDocReader_1584k_9 {
  visibility: hidden;
  height: 0;
  width: 0;
}
._root_1584k_15 {
  flex: 1;
  display: flex;
}
._aside_1584k_20 {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 0 35%;
  font-family: var(--ui-font);
  max-height: var(--safe100vh);
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: var(--sidebar-background);
  transition: min-width var(--panels-transition-time) ease-in-out, flex var(--panels-transition-time) ease-in-out, background-color var(--theme-transition-time) ease-in-out;
  min-width: var(--sidebars-max-width);
  max-width: var(--sidebars-max-width);
  border-right: 1px solid var(--border-tertiary-alpha);
  z-index: 2;
  overscroll-behavior: contain;
}
._aside_1584k_20._sidebarsHidden_1584k_39 {
    min-width: 0;
    flex: 1 0 0%;
  }
._aside_1584k_20._sidebarsHidden_1584k_39 ._thumbnailsWrapper_1584k_43 {
      min-width: 0;
      width: 0;
    }
._inboxNav_1584k_50 {
  position: fixed;
  top: 0;
  z-index: 102;
  display: flex;
  align-items: center;
  height: calc(var(--sidebar-nav-height) - 1px);
  min-height: calc(var(--sidebar-nav-height) - 1px);
  padding-left: 16px;
  width: 100%;
  max-width: var(--sidebars-max-width);
  border-bottom: 1px solid var(--border-tertiary-alpha);
  margin-top: var(--progress-bar-large-height);
  transition: top 0.2s ease-in-out, right var(--panels-transition-time) ease-in-out;
}
._inboxNav_1584k_50 ._headerSeparator_1584k_65 {
    margin-left: 1px;
  }
._inboxNav_1584k_50._leftSidebarHidden_1584k_69 {
    width: min-content;
    max-width: min-content;
    border-bottom: 1px solid transparent;
  }
._inboxNav_1584k_50._leftSidebarHidden_1584k_69._headerIsHidden_1584k_74 {
      top: -64px;
    }
._inboxNav_1584k_50 ._inboxNavContent_1584k_79 {
    display: flex;
  }
._inboxNav_1584k_50 ._backButton_1584k_83 svg path {
      stroke: var(--icon-secondary);
    }
._inboxNav_1584k_50 ._navigationButtons_1584k_89 {
    display: flex;
    border-radius: 31px;
    padding: 0 5px;
    background: var(--default-blurred-button-background);
    -webkit-backdrop-filter: blur(var(--default-blurred-button));
            backdrop-filter: blur(var(--default-blurred-button));
  }
._inboxNav_1584k_50 ._navigationButtons_1584k_89 a {
      background-color: transparent;
      border-radius: 0;
      margin-right: var(--s1);
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
    }
._inboxNav_1584k_50 ._toggleLeftPanelWrapper_1584k_104 {
    margin-left: calc(var(--s1) * 1.5);
    width: 32px;
    height: 32px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
._inboxNav_1584k_50 ._toggleLeftPanelWrapper_1584k_104 svg path {
      fill: var(--icon-secondary);
    }
@media (max-width: 1151px) {
._inboxNav_1584k_50 ._toggleLeftPanelWrapper_1584k_104 {
      background: var(--default-blurred-button-background);
      -webkit-backdrop-filter: blur(var(--default-blurred-button));
              backdrop-filter: blur(var(--default-blurred-button));
  }
    }
._inboxNav_1584k_50 a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    border-radius: 100%;
    background: var(--default-blurred-button-background);
    -webkit-backdrop-filter: blur(var(--default-blurred-button));
            backdrop-filter: blur(var(--default-blurred-button));
    margin-right: 8px;
    transition: opacity 0.3s ease-in-out;
  }
._inboxNav_1584k_50 a._disabled_1584k_138 {
      pointer-events: none;
    }
._inboxNav_1584k_50 a._disabled_1584k_138 svg path {
        fill: var(--icon-disabled);
      }
._inboxNav_1584k_50 a:last-child {
      margin-right: 0;
    }
._inboxNav_1584k_50 a svg path {
      fill: var(--icon-secondary);
    }
._tocWrapper_1584k_156 {
  overflow: auto;
  margin: 64px var(--sidebar-padding-horizontal) 0px 0;
  padding-top: 23px;
  padding-bottom: 120px;
}
._thumbnailsWrapper_1584k_43 {
  flex: 1;
  margin-top: 64px;
  overscroll-behavior: contain;
  transition: min-width var(--panels-transition-time) ease-in-out;
  overflow: auto;
}
._thumbnailWrapper_1584k_171 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
._thumbnail_1584k_43 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  max-width: 100%;
}
._thumbnail_1584k_43:hover {
    opacity: 0.7;
  }
._thumbnail_1584k_43 ._imageLoading_1584k_194 {
    box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.05);
    filter: drop-shadow(0px 1px 4px rgba(60, 64, 67, 0.1));
    border-radius: 4px;
    max-width: 100%;
    width: 150px;
    max-height: 195px;
    height: 195px;
    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--thumbnail-loading-background);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1.5s _loading_1584k_1 ease-in-out infinite;
  }
._thumbnail_1584k_43 img {
    box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.05);
    filter: drop-shadow(0px 1px 4px rgba(60, 64, 67, 0.1));
    border-radius: 4px;
    max-width: 100%;
    max-height: 191px;
  }
._thumbnail_1584k_43 ._pageNumber_1584k_220 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    min-width: 20px;
    height: 16px;
    bottom: 16px;
    background: var(--background-tertiary);
    color: var(--text-secondary);
    border-radius: 12px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    padding: 0 4px;
  }
._thumbnail_1584k_43._activeThumbnail_1584k_238 {
    background: var(--u-alpha-200);
    opacity: 1 !important;
  }
._thumbnail_1584k_43._activeThumbnail_1584k_238 img {
      box-shadow: 0 0 0 2px var(--border-focus);
    }
._thumbnail_1584k_43._activeThumbnail_1584k_238 ._pageNumber_1584k_220 {
      background: var(--background-interactive);
      color: var(--text-inverse);
    }
._thumbnail_1584k_43._invertColors_1584k_252 img {
    filter: invert(72%) contrast(188%) sepia(0%) saturate(366%) hue-rotate(300deg);
  }
._main_1584k_257 {
  flex: 1 0 65%;
  min-height: 100%;
  margin-left: auto;
  background-color: var(--content-background-color);
  transition: flex var(--panels-transition-time) ease-in-out, background-color var(--theme-transition-time) ease-in-out;
  font-family: var(--ui-font);
  position: relative;
  min-width: 0; /* this is added to prevent a bug where pre elements wrapped in a flexbox element are prevented from overflowing properly */
}
._main_1584k_257._sidebarsHidden_1584k_39 {
    flex: 1 0 100%;
  }
@media (max-width: 1352px) {
  ._main_1584k_257 {
    flex: 1;
    padding: 0;
  }
}
h1 {
  margin-top: 0;
}
._progressBarContainer_1584k_283 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 4px;
  left: 0;
  z-index: 1;
}
._pdfAside_1584k_292 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    height: 100%;
    min-width: var(--sidebars-max-width);
    max-width: var(--sidebars-max-width);
}
._pdfAside_1584k_292 ._inboxNav_1584k_50, ._pdfAside_1584k_292 ._bottomNav_1584k_301 {
    z-index: 10;
  }
._pdfAside_1584k_292._sidebarsHidden_1584k_39 ._inboxNav_1584k_50, ._pdfAside_1584k_292._sidebarsHidden_1584k_39 ._bottomNav_1584k_301 {
      z-index: 0;
    }
._contentTypeButton_14qiw_1 {
  display: flex;
  margin-left: calc(var(--s1) * 1.5) !important;
}
._contentTypeButton_14qiw_1 svg path {
    fill: var(--icon-secondary);
  }
._contentTypeButton_14qiw_1 button:hover {
    background: var(--u-alpha-200);
  }
._contentTypeButton_14qiw_1 button:hover svg * {
      fill: var(--icon-primary);
    }
._contentTypeButton_14qiw_1 ._toggleLeftPanelOpenButton_14qiw_17 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border-radius: 16px;
  }
._contentTypeButton_14qiw_1._showChevron_14qiw_26 ._toggleLeftPanelOpenButton_14qiw_17 {
    padding: 6px 4px 6px 8px;
    border-radius: 16px 4px 4px 16px;
  }
._contentTypeButton_14qiw_1 ._triggerElement_14qiw_31 {
    width: 14px;
    height: 32px;
    padding: 6px 0px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1px;
    box-sizing: border-box;
  }
._contentTypeButton_14qiw_1 ._triggerElement_14qiw_31 svg {
      width: 20px;
      min-width: 20px;
    }
@media (max-width: 1151px) {
  ._contentTypeButton_14qiw_1 ._triggerElement_14qiw_31 {
      background: var(--default-blurred-button-background);
      -webkit-backdrop-filter: blur(var(--default-blurred-button));
              backdrop-filter: blur(var(--default-blurred-button));
  }
    }
._contentTypeButton_14qiw_1 ._dropdownContent_14qiw_53 {
    width: max-content;
  }
/* This tells Safari to render animations with the GPU instead of the CPU */

/* More info: */

/* https://michaeluloth.com/css-translate-z/ */

/* https://x.com/andyngo/status/1263056084719202304 */

._root_9392c_3 {
  font-size: var(--font-size-lg);
  color: var(--content-secondary-color);
}

._root_9392c_3 ._hidden_9392c_7 {
    opacity: 0;
  }

._title_9392c_12 {
  margin-top: 0;
  margin-left: var(--sidebar-padding-horizontal);
  margin-bottom: 1rem;
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--table-of-contents-font-size);
  transition: opacity var(--panels-transition-time) ease-in-out, max-height 0.2s ease-in-out;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: balance;
  max-height: 27px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
          line-clamp: 4;
  -webkit-box-orient: vertical;
}

._withDocTitle_9392c_31 {
  max-height: 80px;
}

._listItemWrapper_9392c_35 {
  display: flex;
  align-items: center;
  padding: 0;
  padding-bottom: 16px;
  cursor: pointer;
  border: none;
  background: none;
}

._listItemWrapper_9392c_35._active_9392c_44 li,
  ._listItemWrapper_9392c_35:hover li {
    color: var(--text-interactive);
  }

._listItemWrapper_9392c_35._active_9392c_44 li {
    font-weight: 500;
  }

._listItemWrapper_9392c_35 li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--table-of-contents-item-color);
    transition: color 0.2s ease-in-out, opacity var(--panels-transition-time) ease-in-out;
    font-size: var(--table-of-contents-font-size);
  }

/* h1 */

._listItemLevel1_9392c_63 ._bar_9392c_63 {
  width: var(--sidebar-padding-horizontal);
  min-width: var(--sidebar-padding-horizontal);
}

/* h2 */

._listItemLevel2_9392c_70 ._bar_9392c_63 {
  width: calc(var(--sidebar-padding-horizontal) - var(--table-of-contents-width-diff));
  min-width: calc(var(--sidebar-padding-horizontal) - var(--table-of-contents-width-diff));
  margin-right: calc(var(--table-of-contents-bar-margin-right) * 2);
}

/* h3 - h6 */

._listItemLevel3_9392c_78 ._bar_9392c_63,
._listItemLevel4_9392c_79 ._bar_9392c_63,
._listItemLevel5_9392c_80 ._bar_9392c_63,
._listItemLevel6_9392c_81 ._bar_9392c_63 {
  width: calc(var(--sidebar-padding-horizontal) - calc(var(--table-of-contents-width-diff) * 2));
  min-width: calc(var(--sidebar-padding-horizontal) - calc(var(--table-of-contents-width-diff) * 2));
  margin-right: calc(var(--table-of-contents-bar-margin-right) * 3);
}
._textContentWrapper_ifq4i_1 {
  margin: 0 auto 56px;
  max-width: calc(var(--reading-editable-line-length) + var(--content-gutter) * 2);
  margin-bottom: 115px;
  padding: 0 1rem;
}

._textContentWrapper_ifq4i_1._isYouTube_ifq4i_7 {
    max-width: calc(var(--reading-editable-line-length) + var(--content-gutter) * 6);
  }

._betaPreview_ifq4i_12 {
    position: absolute;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
    top: 10px;
    right: 34px;
    display: flex;
    align-items: center;
    max-width: 110px;
  cursor: default;
}

._betaPreview_ifq4i_12 span {
    font-size: 34px;
    margin-right: 8px;
  }

._contentWithHeaderMargin_ifq4i_30 {
  margin-top: 100px;
}
._root_1psg4_1 {
    --content-focus-indicator-vertical-padding: 0;

    display: none;
    position: absolute;
    top: 0;
    width: var(--focus-indicator-width);
    background: var(--focus-indicator-color);
    transition: all var(--animation-duration--move) cubic-bezier(0.19, 1, 0.22, 1);
}

._rootShown_1psg4_12 {
    display: block;
}

._rootWithoutAnimation_1psg4_16 {
    transition: none;
}

/*
    This is a static hardcoded/global class name (rather than one which gets a generated ID during the
    build) because other files need to read it and remove it from HTML strings before doing comparisons.
*/
#document-text-content:not(.is-youtube-video) .js_contentFocusIndicator_focusedTarget:not(.rw-highlight-resize-handle):not(.rw-highlight-resize-handle *), #document-text-content:not(.is-youtube-video) .js_contentFocusIndicator_focusedTarget *:not(.rw-highlight-resize-handle):not(.rw-highlight-resize-handle *) {
            opacity: 1 !important;
            filter: none !important;
        }

._button_1hsof_1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 11px;
  font-size: var(--f10);
  color: var(--tts-trigger-button-color);
  border: 1px solid var(--tts-trigger-border-color);
  background: none;
}

._icon_1hsof_12 {
  margin-right: 0.4rem;
}._modalRoot_1z12f_1 {
  max-width: calc(100vw - 24px);
  width: calc(100vw - 24px);
  overflow: hidden;
  height: 100vh;
  max-height: calc(100vh - 24px);
  background: var(--wisereads-modal-background);
}

._mainContentClassName_1z12f_10 {
  padding: 0;
}

._modalHeader_1z12f_14 {
  background: var(--wisereads-modal-header-background);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
}

._modalHeader_1z12f_14 ._titleContainer_1z12f_27 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
  }

._modalHeader_1z12f_14 ._title_1z12f_27 {
    margin-top: -8px;
  }

._modalHeader_1z12f_14 ._learnMore_1z12f_43 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    color: var(--text-interactive);
    cursor: pointer;
  }

._modalHeader_1z12f_14 ._popoverBridge_1z12f_57 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px;
  }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 22px;
    width: 471px;
    height: auto;
    background: var(--background-elevated);
    border-radius: 8px;
    padding: 16px;
    gap: 12px;
    box-shadow: var(--shadow-200);
    cursor: auto;
    color: var(--text-primary);
  }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 p {
      margin-top: 0;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 p:last-of-type {
        margin-bottom: 0px;
      }

._modalHeader_1z12f_14 ._learnMorePopoverContainer_1z12f_65 button {
      background: var(--wisereads-modal-button-background);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      color: var(--text-button-accent-subtle-text);
      margin-top: 12px;
    }

._closeButton_1z12f_104 {
  position: absolute;
  right: 20px;
  right: 24px;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._contentContainer_1z12f_115 {
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: var(--modal-vertical-padding) 20px;
  padding-top: 60px;
}

._truncate_1z12f_122 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 80%;
}

._loadingContainer_1z12f_129 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;
  height: 100vh;
  max-height: calc(100vh - 24px);
}

._card_1z12f_138 {
  background: var(--wisereads-modal-card-background);
  color: var(--text-primary);
  border-radius: 8px;
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-secondary-alpha);
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}

._card_1z12f_138:hover {
    border-color: var(--wisereads-modal-card-border-hover);
    box-shadow: var(--shadow-100);
    transform: perspective(1px) scale(1.02);
  }

._card_1z12f_138 ._coverImage_1z12f_155 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
  }

._card_1z12f_138 ._cardContent_1z12f_162 {
    padding: 22px 16px 16px 16px;
  }

._card_1z12f_138 ._publicationContainer_1z12f_166 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

._card_1z12f_138 ._publicationContainer_1z12f_166 ._publicationIcon_1z12f_172 {
      width: 16px;
      height: 16px;
    }

._card_1z12f_138 ._publicationContainer_1z12f_166 ._publicationName_1z12f_177 {
      font-size: 10px;
      color: var(--text-secondary);
      text-transform: uppercase;
      font-family: 'Inter VF';
      font-weight: 500;
      letter-spacing: 1px;
      margin-top: 1px;
    }

._card_1z12f_138 ._title_1z12f_27 {
    font-size: 20px;
    margin: 0 0 4px 0;
    color: var(--text-primary);
    font-family: 'Inter VF';
    font-weight: 700;
    line-height: 120%;
  }

._card_1z12f_138 ._meta_1z12f_197 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
  }

._card_1z12f_138 ._dot_1z12f_206 {
    color: var(--text-tertiary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

._card_1z12f_138 ._content_1z12f_115 {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 20px 0;
    color: var(--text-primary);
  }

._card_1z12f_138 ._addToReaderButton_1z12f_221 {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

._card_1z12f_138 ._addToReaderButton_1z12f_221:not(:disabled) {
      background: var(--wisereads-modal-button-background);
      color: var(--text-button-accent-subtle-text);
    }

._card_1z12f_138 ._addToReaderButton_1z12f_221 svg * {
      fill: var(--text-button-accent-subtle-text);;
    }

._card_1z12f_138 ._addToReaderButton_1z12f_221:disabled {
      background: var(--text-button-accent-subtle-disabled-background);
      color: var(--text-button-accent-subtle-disabled-text);
    }

._card_1z12f_138 ._addToReaderButton_1z12f_221:disabled svg * {
        fill: var(--text-button-accent-subtle-disabled-text);
      }

._actionsPopover_1vhhv_2 {
  width: 270px;
  height: 104px;
  border-radius: 8px;
  background-color: var(--background-elevated);
  box-shadow: var(--shadow-200);
  padding: 4px 0;
}

._actionsPopoverList_1vhhv_11 {
  display: flex;
  flex-direction: column;
}

._actionsPopoverList_1vhhv_11 > li {
    display: flex;
  }

._actionsPopoverAction_1vhhv_20 {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: var(--font-size-base);
  line-height: 20px;
  color: var(--text-primary);
  width: 100%;
  height: 32px;
}

._actionsPopoverAction_1vhhv_20 svg {
    margin-right: 8px;
  }

._actionsPopoverAction_1vhhv_20 svg * {
      fill: var(--icon-secondary);
    }

._actionsPopoverAction_1vhhv_20:hover {
    background: var(--u-alpha-100);
  }

._actionsPopoverShortcut_1vhhv_43 {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--font-size-sm);
  line-height: 20px;
  margin-left: auto;
  margin-right: 2px;
}
._loading-indicator_1ulp8_1 {
  position: relative;
  overflow: hidden;
  animation: 2s _fadeIn_1ulp8_1 ease-in-out;
}

._loading-indicator_1ulp8_1 span {
    display: inline-block;
    height: calc(var(--content-line-height) / 3 * 1em);
    width: 1em;
    margin-right: 1em;
    margin-bottom: calc(var(--content-line-height) / 3 * 2 * 1em);
    background: var(--text);
    opacity: 0.15;
    border-radius: 3px;
  }

._loading-indicator_1ulp8_1 span:nth-child(2n) {
      width: 7em;
    }

._loading-indicator_1ulp8_1 span:nth-child(3n) {
      width: 3em;
    }

._loading-indicator_1ulp8_1 span:nth-child(4n) {
      width: 4em;
    }

._loading-indicator_1ulp8_1 span:nth-child(5n) {
      width: 2em;
    }

._loading-indicator_1ulp8_1 span:nth-child(6n) {
      width: 6em;
    }

._loading-indicator_1ulp8_1 span:nth-child(7n) {
      width: 4em;
    }

._loading-indicator_1ulp8_1 span:nth-child(8n) {
      width: 2em;
    }

._loading-indicator_1ulp8_1 span:nth-child(9n) {
      width: 3em;
    }

._loading-indicator_1ulp8_1::after {
    content: ' ';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--content-background-color) 33%, var(--content-background-color) 66%, transparent 100%);
    opacity: 75%;
    animation: 2s _moveFromOffLeftToOffRight_1ulp8_1 infinite alternate ease-in-out;
  }

@keyframes _fadeIn_1ulp8_1 {
  0% {
    opacity: 0;
  }
  1%, 40% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
  70%, 100% {
    opacity: 1;
  }
}

@keyframes _moveFromOffLeftToOffRight_1ulp8_1 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
._findInDocumentBar_3l7ti_1 {
  position: fixed;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 200;
  top: calc(var(--sidebar-nav-height) + 10px);
  right: calc(var(--sidebars-max-width) + 15px);
  background: #fff;
  opacity: 0;
  transform: translateY(-10px);
  width: 420px;
}

._visible_3l7ti_18 {
  transition: opacity 0.1s ease, transform 0.1s ease;
  opacity: 1;
  transform: translateY(0);
  z-index: 200;
}

._hidden_3l7ti_25 {
  opacity: 0;
}

._icon_3l7ti_29 {
  margin-right: 8px;
  font-size: 16px;
  color: #666;
}

._findInDocumentBar_3l7ti_1 input {
  border: none;
  outline: none;
  flex-grow: 1;
  padding: 4px 8px;
  font-size: 14px;
}

._status_3l7ti_43 {
  margin-left: 8px;
  font-size: 14px;
  color: #999;
  width: 170px;
  white-space: nowrap;
}

._clearButton_3l7ti_51,
._doneButton_3l7ti_52 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin-left: 8px;
  color: #007bff;
}

._clearButton_3l7ti_51 {
  padding: 4px;
}

._doneButton_3l7ti_52 {
  background-color: #f1f1f1;
  padding: 4px 12px;
  border-radius: 4px;
}

._searchSpinner_3l7ti_71 {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

._searchSpinner_3l7ti_71 div {
  width: 15px;
  height: 15px;
  margin: 2px;
  border-width: 2px;
}
._root_vvy6s_1 {
  --focus-background-color: var(--document-list-focus-color);

  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--theme-transition-time) ease-in-out, box-shadow 150ms ease-in;
  display: flex;
  flex-direction: column;
}

._root_vvy6s_1:focus {
     outline: none;
  }

._hiddenDocReader_vvy6s_17 {
  visibility: hidden;
  height: 0;
  width: 0;
  position: fixed;
}
._container_6uvou_1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

._header_6uvou_8 {
  display: flex;
  align-items: center;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-secondary-alpha);
  width: 100%;
}

._title_6uvou_19 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._title_6uvou_19 svg {
    color: var(--icon-secondary);
  }

._title_6uvou_19 h1 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }

._content_6uvou_36 {
  flex-grow: 1;
  width: 100%;
}

._emptyTrash_6uvou_41 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 24px;
  
}

._emptyTrash_6uvou_41 svg {
    color: var(--icon-faint);
  }

._emptyTrash_6uvou_41 ._emptyTrashContent_6uvou_54 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

._emptyTrash_6uvou_41 ._emptyTrashContent_6uvou_54 h2 {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
      color: var(--text-primary);
    }

._emptyTrash_6uvou_41 ._emptyTrashContent_6uvou_54 p {
      font-size: 14px;
      font-weight: 400;
      margin: 0;
      color: var(--text-secondary);
    }

._emptyTrashButton_6uvou_80 {
  padding: 0px;
}

._emptyTrashButton_6uvou_80 button {
    display: flex;
    align-items: center;
    gap: 2px;
  }

._emptyTrashButton_6uvou_80 button svg {
      color: var(--icon-danger);
    }
._sliderRoot_1kuxx_1 {
  position: relative;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
          user-select: none;
  touch-action: none;
  height: 1.25rem;
  cursor: pointer;
}

._sliderTrack_1kuxx_11 {
  background: var(--slider-track-background);
  position: relative;
  flex-grow: 1;
  border-radius: 0.375rem;
  height: 0.25rem;
}

._sliderRange_1kuxx_19 {
  position: absolute;
  background: var(--slider-range-background);
  border-radius: 9999px;
  height: 100%;
  border-right: 1px solid var(--slider-range-border-right-color);
  z-index: 1;
}

._sliderRoot_1kuxx_1:hover ._sliderRange_1kuxx_19 {
    background: var(--slider-hover-range-background-color);
  }

*:has(> ._sliderThumb_1kuxx_32) { /* Radix doesn't an ID / class to this */
  z-index: 2;
}

._sliderThumb_1kuxx_32 {
  display: none;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--slider-thumb-background);
  box-shadow: var(--slider-thumb-box-shadow);
  border-radius: 0.625rem;
}

._sliderRoot_1kuxx_1:hover ._sliderThumb_1kuxx_32 {
    display: block;
  }

._sliderThumb_1kuxx_32:focus {
    outline: none;
  }/* This tells Safari to render animations with the GPU instead of the CPU */

/* More info: */

/* https://michaeluloth.com/css-translate-z/ */

/* https://x.com/andyngo/status/1263056084719202304 */

._ttsPlayer_1pbhb_3 {
  display: flex;
  z-index: 1;
  height: var(--tts-player-height);
  align-items: center;
  gap: calc(1.2rem + 5%);
  background: var(--tts-player-background);
  box-shadow: var(--tts-player-box-shadow);
  -webkit-user-select: none;
          user-select: none;
}

._ttsPlayer_1pbhb_3 .button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
  }

._ttsPlayer_1pbhb_3 > * {
  flex: 2;
  padding: 1.25rem;
}

._trackInfo_1pbhb_26 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}

._trackInfo_1pbhb_26 .previewImage {
    margin: 0;
    min-width: var(--document-list-image-width);
  }

._trackInfoText_1pbhb_39 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow: hidden;
  font-size: var(--f9);
}

._trackInfoText_1pbhb_39 p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    margin: 0;
  }

._trackTitle_1pbhb_54 {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

._trackSourceName_1pbhb_59 {
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

._main_1pbhb_64 {
  flex: 3;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 0.625em;
  padding-bottom: 0.625em;
}

._main_1pbhb_64 svg {
    color: var(--icon-primary);
  }

._mainButtons_1pbhb_79 {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  width: 30%;
}

._playButton_1pbhb_86 {
  position: relative;
}

._spinner_1pbhb_90 {
  position: absolute;
  top: -0.9375rem;
  left: -0.875rem;
  opacity: 0;
  z-index: -1;
}

._spinnerShown_1pbhb_98 {
  opacity: 0.2;
  animation-name: _fadeInSpinner_1pbhb_1;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.75s;
}

._timeline_1pbhb_106 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--f10);
  color: var(--text-secondary);
}

._currentTime_1pbhb_116,
._duration_1pbhb_117 {
  /*
    This prevents the slider's left & right edges from moving when the time changes (we're not using a monospace font)
  */
  min-width: 3.5rem;
}

._currentTime_1pbhb_116 {
  text-align: right;
}

._timelineSlider_1pbhb_128 {
  flex: 1;
}

._timelineSlider_1pbhb_128 .sliderRoot:hover .sliderRange {
    background: var(--reading-progress-gradient);
  }

._timelineBufferedRanges_1pbhb_136,
._timelineBufferedRange_1pbhb_136 {
  position: absolute;
  inset: 0;
  height: 100%;
}

._timelineBufferedRange_1pbhb_136 {
  background: var(--slider-range-background);
  border-radius: 0.375rem;
  opacity: 0.3;
}

.sliderRoot:hover ._timelineBufferedRange_1pbhb_136 {
    opacity: 0.8;
  }

._secondaryControls_1pbhb_153 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

._secondaryControls_1pbhb_153 svg {
    color: var(--icon-secondary);
  }

._settings_1pbhb_165 {
  flex: 1;
  
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

._settings_1pbhb_165 .button:not(:active, :hover, :focus) {
    background: none;
  }

._volume_1pbhb_178 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  border-radius: 3rem;
  padding: 0.25rem 0.75rem;
}

._volume_1pbhb_178:hover {
    background: rgba(40, 49, 59, 0.06);
  }

._volume_1pbhb_178:hover .sliderRange {
      background: var(--slider-hover-range-background-color);
    }

._volume_1pbhb_178:hover .sliderThumb {
      display: block;
    }

._volume_1pbhb_178 ._toggleMuteButton_1pbhb_198 {
    line-height: 0;
  }

._volumeSlider_1pbhb_203 {
  max-width: 4.75rem;
  min-width: 4.75rem;
}

._playrateDropdown_1pbhb_208 {
  max-width: 6.625rem;
  overflow: hidden;
}

._voiceDropdown_1pbhb_213 {
  max-height: 70vh;
  width: 275px;
  overflow-x: hidden;
  overflow-y: auto;
}

._voiceDropdown_1pbhb_213 > div:not([role]) {
    padding-left: 16px;
  }

._voiceDropdownOption_1pbhb_224 {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

._voiceDropdownOptionName_1pbhb_232 {
  flex: 1;
}

._voiceDropdownOptionSuffix_1pbhb_236 {
  color: var(--text-tertiary);
  text-align: right;
  font-size: var(--f10);
}

._closeButton_1pbhb_242 {
  border-radius: 3rem;
  padding: 0.375rem;
}

._closeButton_1pbhb_242 svg {
    width: 1.25rem;
    height: 1.25rem;
  }

@keyframes _fadeInSpinner_1pbhb_1 {
  0%, 25% {
    opacity: 0;
  }
  100% {
    opacity: 0.2;
  }
}