/* 
  Scoped styles for IC Workflow MFE
  
  STRATEGY: 
  - Use `all: initial` to reset all inherited host styles
  - Re-establish ONLY essential layout/display properties
  - NO element selectors (h1, a, button, *) - they interfere with MUI/Solstice
  - Component libraries handle their own styling
  - Component-specific styles go in component CSS files
  
  CRITICAL: Keep this file minimal!
*/

/* Reset body/html margin for standalone development */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

#root {
  margin: 0 !important;
  padding: 0 !important;
}

/* MFE Container Reset - Creates a clean slate from host styles */
#ic-workflow-mfe-container {
  /* 
    Reset ALL inherited host styles
    This is the nuclear option - resets everything to browser defaults
  */
  all: initial;
  
  /* 
    Re-establish ONLY essential container properties
    These don't interfere with child components
    
    Note: Using min-height: 100% instead of 100vh to properly fill the host 
    container without exceeding viewport when host navbar is present
  */
  display: block;
  position: relative;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  
  /* 
    Set container background and overflow
    These are safe container-level properties
    Note: overflow-y: visible allows content to participate in outer app scroll
  */
  background-color: #ffffff;
  overflow-x: hidden;
  overflow-y: visible;
}

/* 
  Apply box-sizing to all children
  This is a safe, non-invasive property that doesn't affect visual styling
*/
#ic-workflow-mfe-container *,
#ic-workflow-mfe-container *::before,
#ic-workflow-mfe-container *::after {
  box-sizing: border-box;
}

/* 
  ⚠️ IMPORTANT: NO MORE STYLES BELOW THIS LINE!
  
  ❌ DON'T add:
  - #ic-workflow-mfe-container h1 { }
  - #ic-workflow-mfe-container a { }
  - #ic-workflow-mfe-container button { }
  - #ic-workflow-mfe-container * { font-family: ... }
  
  These interfere with MUI, Solstice, and other component libraries.
  
  ✅ Instead:
  - Let MUI Typography handle h1, h2, etc.
  - Let MUI Link handle anchor tags
  - Let MUI Button handle buttons
  - Use component-specific CSS files for custom components
  - Use styled-components or sx prop for one-offs
*/
:root {
  /* Typography Scale */
  --scale-s2-size: 14px;
  --scale-s2-lineHeight: 20px;
  --scale-s3-size: 16px;
  --scale-s3-lineHeight: 24px;
  --scale-s4-size: 18px;
  --scale-s4-lineHeight: 28px;
  --scale-s5-size: 20px;
  --scale-s5-lineHeight: 32px;
  --scale-h5-size: 24px;
  --scale-h5-lineHeight: 32px;

  /* Font Family */
  --fontFamily: 'DM Sans', Helvetica, Arial, sans-serif;

  /* Font Weights */
  --core-typeWeight-regular: 400;
  --core-typeWeight-medium: 500;
  --core-typeWeight-semibold: 600;
  --core-typeWeight-bold: 700;

  /* Standardized Font Weight Names */
  --fontWeight-Regular: 400;
  --fontWeight-Medium: 500;
  --fontWeight-SemiBold: 600;
  --fontWeight-Bold: 700;

  /* Figma Design Tokens - Typography (from components/table/header) */
  --fontSize-0750: 12px;
  --fontSize-0875: 14px;
  --lineHeight-150: 24px;
  --letterSpacing-0: 0.175px;

  /* Figma Design Tokens - Typography (from typography/body2) */
  --lineHeight-143: 20px;
  --lineHeight-125: 20px;

  /* Figma Design Tokens - Typography (from typography/h6) */
  --fontSize-h6: 20px;
  --lineHeight-h6: 32px;
  --letterSpacing-h6: 0.175px;
  --fontWeight-h6: 600;

  /* Figma Design Tokens - Typography (from components/input-text) */
  --fontSize-input-text: 14px;
  --lineHeight-input-text: 24px;
  --letterSpacing-input-text: 0.15px;
  --fontWeight-input-text: 400;

  /* Figma Design Tokens - Typography (from components/input/value) */
  --fontSize-input-value: 16px;
  --lineHeight-input-value: 24px;
  --letterSpacing-input-value: 0.175px;
  --fontWeight-input-value: 400;

  /* Figma Design Tokens - Typography (from components/button/large) */
  --fontSize-button-large: 16px;
  --lineHeight-button-large: 24px;
  --fontWeight-button-large: 400;

  /* Figma Design Tokens - Typography (from style_T5VQMY - subtitle) */
  --fontSize-subtitle: 16px;
  --lineHeight-subtitle: 28px;
  --letterSpacing-subtitle: 0.15px;
  --fontWeight-subtitle: 600;

  /* Figma Design Tokens - Typography (from typography/body1) */
  --fontSize-body1: 16px;
  --lineHeight-body1: 24px;
  --letterSpacing-body1: -0.04px;
  --fontWeight-body1: 400;

  /* Figma Design Tokens - Typography (from typography/body2) */
  --fontSize-body2: 14px;
  --lineHeight-body2: 20px;
  --fontWeight-body2: 400;

  /* Figma Design Tokens - Typography (from typography/caption) */
  --fontSize-caption: 12px;
  --lineHeight-caption: 20px;
  --fontWeight-caption: 400;

  /* Figma Design Tokens - Typography (from components/table/header) */
  --fontSize-table-header: 14px;
  --lineHeight-table-header: 24px;
  --letterSpacing-table-header: 0.175px;
  --fontWeight-table-header: 600;

  /* Figma Design Tokens - Typography (from components/button/medium) */
  --fontSize-button-medium: 14px;
  --lineHeight-button-medium: 20px;
  --letterSpacing-button-medium: 0.4px;
  --fontWeight-button-medium: 400;

  /* Figma Design Tokens - Typography (from components/alert-description) */
  --fontSize-alert-description: 14px;
  --lineHeight-alert-description: 20px;
  --fontWeight-alert-description: 300;

  /* Figma Design Tokens - Typography (from components/chip-label) */
  --fontSize-chip-label: 14px;
  --lineHeight-chip-label: 18px;
  --letterSpacing-chip-label: 0.16px;
  --fontWeight-chip-label: 400;

  /* Figma Design Tokens - Typography (from components/avatar/initialsLg) */
  --fontSize-avatar-initials: 20px;
  --lineHeight-avatar-initials: 20px;
  --letterSpacing-avatar-initials: 0.175px;
  --fontWeight-avatar-initials: 400;

  /* Letter Spacing */
  --scale-s3-letterSpacing: -0.04px;
  --letterSpacing-1: 0;

  /* Text Colors */
  --text-primary: rgba(0, 4, 11, 1);
  --text-secondary: rgba(0, 4, 11, 0.6);
  --text-tertiary: rgba(0, 4, 11, 0.4);
  --text-disabled: rgba(0, 4, 11, 0.2);

  /* Status Colors */
  --text-error: #d32f2f;
  --text-success: #2e7d32;
  --text-warning: #ed6c02;
  --text-info: #0288d1;

  /* Button Colors */
  --button-primary-bg: #002776;
  --button-primary-text: #ffffff;
  --button-primary-hover: #001f5c;
  --button-secondary-bg: #dfeaff;
  --button-secondary-text: #000b20;
  --button-secondary-hover: #c8dcff;
  --button-disabled-bg: #f5f5f5;
  --button-disabled-text: #9e9e9e;

  /* Border Radius */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;

  /* Input States */
  --input-background: #ffffff;
  --input-border: rgba(0, 0, 0, 0.23);
  --input-error-border: #d32f2f;
  --input-error-bg: #ffebee;
  --input-success-border: #2e7d32;
  --input-success-bg: #e8f5e8;

  /* Card Styling */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --card-shadow-elevated: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Neutral Background & Border Colors */
  --background-neutral-light: #f3f4f6;
  --border-neutral-light: #d1d5db;

  /* Alert Styling */
  --alert-error-bg: #ffebee;
  --alert-error-border: #d32f2f;
  --alert-success-bg: #e8f5e8;
  --alert-success-border: #2e7d32;
  --alert-warning-bg: #fff3e0;
  --alert-warning-border: #ed6c02;
  --alert-info-bg: #e3f2fd;
  --alert-info-border: #0288d1;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  /* Font Feature Settings */
  --font-feature-settings: 'liga' off, 'clig' off;

  /* Responsive Breakpoints (based on Figma 1512px design) */
  --breakpoint-xs: 480px; /* Mobile */
  --breakpoint-sm: 768px; /* Tablet */
  --breakpoint-md: 1024px; /* Small laptop */
  --breakpoint-lg: 1265px; /* Development screen */
  --breakpoint-xl: 1512px; /* Figma design size */
  --breakpoint-xxl: 1920px; /* Large desktop */

  /* Responsive Scaling Factors */
  --scale-factor-xs: 0.75; /* 75% of Figma size */
  --scale-factor-sm: 0.85; /* 85% of Figma size */
  --scale-factor-md: 0.9; /* 90% of Figma size */
  --scale-factor-lg: 0.95; /* 95% of Figma size */
  --scale-factor-xl: 1; /* 100% Figma size */
  --scale-factor-xxl: 1.1; /* 110% of Figma size */

  /* Container Max Widths */
  --container-max-width-xs: 100%;
  --container-max-width-sm: 720px;
  --container-max-width-md: 960px;
  --container-max-width-lg: 1200px;
  --container-max-width-xl: 1440px;
  --container-max-width-xxl: 1600px;

  /* Figma Design Tokens - Typography (from components/breadcrumb) */
  --fontSize-breadcrumb: 16px;
  --lineHeight-breadcrumb: 24px;
  --letterSpacing-breadcrumb: -0.04px;
  --fontWeight-breadcrumb: 400;

  /* Figma Design Tokens - Typography (from typography/h5) */
  --fontSize-header: 24px;
  --lineHeight-header: 1.3333333333333333em;
  --fontWeight-header: 400;

  /* Figma Design Tokens - Semantic Colors (from components/button) */
  --primary-main: #002776;
  --primary-hover: #001f5c;
  --secondary-main: #dfeaff;
  --secondary-hover: #c8dcff;
  --text-primary: #000b20;
  --text-on-primary: #ffffff;

  /* Figma Design Tokens - UI Properties (from components/button) */
  --spacing-button-padding: 8px 12px;

  /* Tab Navigation Specific Tokens */
  --color-button-medium-inactive: var(--text-secondary);
  --color-button-medium-active: var(--primary-main);
  --underline-button-medium: 2px;
  --padding-button-medium: 9px 0px;
  --gap-button-medium: 24px;
  --background-tab-container: #f8f9fc;

  /* Avatar Colors */
  --avatar-fill: #4a7980;

  /* Background Colors */
  --background-paper-elevation-0: #FFF;
}
.new-ic-drawer-paper {
  background: var(--mui-palette-background-paper, #fff);
  border-radius: 0;
  box-shadow: var(--mui-shadows-8, 0 0 24px rgba(0, 0, 0, 0.08));
  overflow-y: auto;
}

.new-ic-title {
  font-size: var(--mui-typography-h5-fontSize, 22px);
  font-weight: var(--mui-typography-fontWeightBold, 700);
  color: var(--mui-palette-text-primary, #222);
  letter-spacing: var(--mui-typography-letterSpacing, 0.01em);
}

.new-ic-banner {
  background: var(--mui-palette-grey-50, #f3f6f9);
  border-radius: var(--mui-shape-borderRadius, 6px);
  padding: var(--mui-spacing-2, 14px) var(--mui-spacing-3, 24px);
  margin: 0 0 var(--mui-spacing-3, 24px) 0;
  border: 1px solid var(--mui-palette-divider, #e5e7eb);
  display: flex;
  align-items: center;
}

.new-ic-link {
  color: var(--mui-palette-primary-main, #1a73e8);
  text-decoration: underline;
  font-weight: var(--mui-typography-fontWeightMedium, 500);
}

.new-ic-form {
  padding: 0px var(--mui-spacing-4, 32px) var(--mui-spacing-4, 32px) var(--mui-spacing-4, 32px);
}

.new-ic-form .MuiFormControl-root,
.new-ic-form .MuiTextField-root {
  background: var(--mui-palette-background-paper, #fff);
  border-radius: 4px;
}

.new-ic-form .MuiInputBase-root {
  font-size: var(--mui-typography-body1-fontSize, 14px);
  font-weight: var(--mui-typography-fontWeightMedium, 500);
  height: 40px;
}

.new-ic-form .MuiOutlinedInput-root {
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

.new-ic-form
  .MuiOutlinedInput-root:not(.Mui-error):not(.Mui-disabled):not(.Mui-focused):not(:hover)
  fieldset {
  border-color: var(--input-outlined-enabledBorder, rgba(0, 0, 0, 0.23));
  border-width: 1px;
}

.new-ic-form .MuiInputBase-input {
  padding: 12px 14px !important;
  font-size: 14px;
  box-sizing: border-box;
}

.new-ic-form .MuiInputBase-input.MuiInputBase-inputMultiline {
  padding: 0px 0px !important;
  height: auto !important;
  min-height: auto;
}

.new-ic-form .MuiSelect-select {
  padding: 12px 14px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box;
  line-height: 1.5 !important;
}

.new-ic-form .MuiSelect-select em {
  font-style: normal;
  display: flex;
  align-items: center;
  height: 100%;
}

.new-ic-form .MuiOutlinedInput-input {
  padding: 12px 14px !important;
  box-sizing: border-box;
}

.new-ic-form .MuiOutlinedInput-root.MuiInputBase-multiline {
  height: auto !important;
  min-height: auto;
  border-radius: 4px;
  font-size: 14px;
}

.new-ic-form
  .MuiOutlinedInput-root.MuiInputBase-multiline:not(.Mui-error):not(.Mui-disabled):not(
    .Mui-focused
  ):not(:hover)
  fieldset {
  border-color: var(--input-outlined-enabledBorder, rgba(0, 0, 0, 0.23));
  border-width: 1px;
}

.new-ic-form .MuiOutlinedInput-root.MuiInputBase-multiline:hover fieldset {
  border-color: #9ca3af;
}

.new-ic-form .MuiOutlinedInput-root.MuiInputBase-multiline.Mui-focused fieldset {
  border-color: #1976d2;
  border-width: 1px;
}

.new-ic-form .MuiOutlinedInput-root.MuiInputBase-multiline.Mui-error fieldset {
  border-color: #d32f2f;
  border-width: 2px;
}

.new-ic-form .MuiOutlinedInput-root.MuiInputBase-multiline.Mui-error:hover fieldset {
  border-color: #d32f2f;
}

.new-ic-form .MuiOutlinedInput-root.MuiInputBase-multiline.Mui-error.Mui-focused fieldset {
  border-color: #d32f2f;
  border-width: 2px;
}

.new-ic-form .MuiPickersOutlinedInput-root {
  height: 40px;
  border-radius: 4px;
}

.new-ic-form
  .MuiPickersOutlinedInput-root:not(.MuiPickersInputBase-error):not(
    .MuiPickersInputBase-disabled
  ):not(.MuiPickersInputBase-focused):not(:hover)
  .MuiPickersOutlinedInput-notchedOutline {
  border-color: var(--input-outlined-enabledBorder, rgba(0, 0, 0, 0.23));
  border-width: 1px;
}

.new-ic-form .MuiPickersInputBase-input {
  padding: 12px 14px !important;
  font-size: 14px;
  box-sizing: border-box;
}

.new-ic-form .MuiInputLabel-root {
  font-size: var(--mui-typography-body1-fontSize, 15px);
  font-weight: var(--mui-typography-fontWeightMedium, 500);
  margin: var(--mui-spacing-2, 15px) 0px var(--mui-spacing-2, 15px) 0px;
}

.new-ic-form .MuiButton-text {
  font-weight: var(--mui-typography-fontWeightBold, 600);
  font-size: var(--mui-typography-body1-fontSize, 15px);
  text-transform: none !important;
}

.new-ic-form .MuiPickersSectionList-root,
.new-ic-form .MuiPickersInputBase-sectionsContainer,
.new-ic-form .MuiPickersOutlinedInput-sectionsContainer {
  padding: var(--mui-spacing-1, 6.5px) 0px !important;
}

.new-ic-form .MuiButton-containedPrimary {
  background: var(--mui-palette-primary-main, #1a73e8);
  font-weight: var(--mui-typography-fontWeightBold, 600);
  font-size: var(--mui-typography-body1-fontSize, 15px);
  border-radius: var(--mui-shape-borderRadius, 8px);
  box-shadow: none;
  text-transform: none !important;
}

/* Autocomplete chip spacing - prevent overlap */
.new-ic-form .MuiAutocomplete-root .MuiOutlinedInput-root {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  flex-wrap: wrap;
  align-items: center !important;
  overflow: hidden;
}

.new-ic-form .MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-inputRoot {
  padding: 0 !important;
  min-height: 32px;
  height: 100% !important;
  max-height: 32px;
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
}

.new-ic-form .MuiAutocomplete-root .MuiAutocomplete-tag {
  margin: 2px 4px 2px 0 !important;
  height: 28px;
  max-width: 100%;
  display: flex !important;
  align-items: center !important;
}

.new-ic-form .MuiAutocomplete-root .MuiAutocomplete-input {
  padding: 8px 0 !important;
  min-width: 60px;
  display: flex !important;
  align-items: center !important;
  line-height: 1.5 !important;
}

.new-ic-form .MuiAutocomplete-root .MuiOutlinedInput-input::placeholder {
  display: flex;
  align-items: center;
  line-height: 1.5;
}
/* Rich Text Editor Styles */
.editor-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
}

.editor-input > * {
  flex-shrink: 0;
}

.editor-placeholder {
  color: #999;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  top: 0; /* Position relative to editor-inner padding */
  left: 0; /* Position relative to editor-inner padding */
  font-size: 15px;
  user-select: none;
  display: inline-block;
  pointer-events: none;
}

.editor-paragraph {
  margin: 0;
  margin-bottom: 8px;
  position: relative;
  line-height: 1.5;
}

/* Empty paragraphs in the editor need height so the caret is visible after Enter */
.editor-input .editor-paragraph {
  min-height: 1.5em;
}

.editor-input {
  line-height: 1.5;
  scrollbar-gutter: stable;
  padding: 0; /* No padding - parent editor-inner handles all padding */
  word-break: break-word;
  overflow-wrap: break-word;
  /* Lexical uses this for paragraph indent (ql-indent-* import); 1 level = 1.5em */
  --lexical-indent-base-value: 1.5em;
}

.viewer-input {
  --lexical-indent-base-value: 1.5em;
}

.editor-input .editor-paragraph:last-child {
  margin-bottom: 0 !important;
}

.viewer-input .editor-paragraph:last-child,
.viewer-container .editor-paragraph:last-child,
.rich-text-content .editor-paragraph:last-child,
.viewer-input .editor-paragraph:last-of-type,
.viewer-input p.editor-paragraph:last-child {
  margin-bottom: 0 !important;
}

/* Ensure viewer-input container has no bottom spacing */
.viewer-input:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove bottom margin from any paragraph that is the only child or last child in viewer-input */
.viewer-input > .editor-paragraph:only-child,
.viewer-input > .editor-paragraph:last-child {
  margin-bottom: 0 !important;
}

.editor-quote {
  margin: 0;
  margin-left: 20px;
  margin-bottom: 10px;
  padding-left: 16px;
  border-left: 4px solid #ccc;
  color: #666;
  font-style: italic;
}

.editor-heading-h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}

.editor-heading-h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.83em 0;
}

.editor-heading-h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

.editor-heading-h4 {
  font-size: 1em;
  font-weight: bold;
  margin: 1.33em 0;
}

.editor-heading-h5 {
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

.editor-heading-h6 {
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

.editor-list-ol {
  padding: 0;
  margin: 0;
  margin-left: 16px;
}

.editor-list-ul {
  padding: 0;
  margin: 0;
  margin-left: 16px;
}

.editor-listitem {
  margin: 8px 32px 8px 32px;
}

.editor-nested-listitem {
  list-style-type: none;
}

.editor-image {
  cursor: default;
  display: inline-block;
  position: relative;
  user-select: none;
}

.editor-link {
  color: #0066cc;
  text-decoration: none;
}

.editor-link:hover {
  text-decoration: underline;
}

.editor-text-bold {
  font-weight: bold;
}

.editor-text-italic {
  font-style: italic;
}

.editor-text-underline {
  text-decoration: underline;
}

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

.editor-text-underlineStrikethrough {
  text-decoration: underline line-through;
}

.editor-text-code {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
}

.editor-code {
  background-color: #f5f5f5;
  font-family: 'Courier New', Courier, monospace;
  display: block;
  padding: 8px 8px 8px 52px;
  line-height: 1.53;
  font-size: 13px;
  margin: 0;
  margin-top: 8px;
  margin-bottom: 8px;
  tab-size: 2;
  /* white-space: pre; */
  overflow-x: auto;
  position: relative;
}

/* Code highlighting */
.editor-tokenComment {
  color: #708090;
}

.editor-tokenPunctuation {
  color: #999;
}

.editor-tokenProperty {
  color: #905;
}

.editor-tokenSelector {
  color: #690;
}

.editor-tokenOperator {
  color: #9a6e3a;
}

.editor-tokenAttr {
  color: #07a;
}

.editor-tokenVariable {
  color: #e90;
}

.editor-tokenFunction {
  color: #dd4a68;
}

/* Viewer specific styles */
.viewer-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  display: flow-root; /* Contain float-left images so following content (e.g. next reply) starts below */
}

.viewer-placeholder {
  color: #999;
  font-style: italic;
}

.viewer-input {
  cursor: default;
  user-select: text;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove bottom margin from last paragraph in viewer-input to eliminate extra space */
.viewer-input .editor-paragraph:last-child {
  margin-bottom: 0 !important;
}

/* Ensure viewer preserves inline styles */
.viewer-input * {
  /* Allow all inline styles in viewer */
}

.viewer-input [style*='color'] {
  /* Ensure color styles are preserved in viewer */
}

.viewer-input [style*='font-size'] {
  /* Ensure font-size styles are preserved in viewer */
}

.viewer-input [style*='background-color'] {
  /* Ensure background-color styles are preserved in viewer */
}

.viewer-input span {
  /* Ensure span elements with inline styles are rendered correctly */
}

.viewer-input p {
  /* Ensure paragraph elements with inline styles are rendered correctly */
  margin-bottom: 0 !important;
}

.viewer-input p:last-child {
  margin-bottom: 0 !important;
}

.viewer-input div {
  /* Ensure div elements with inline styles are rendered correctly */
}

/* Nested list indentation (Lexical-rendered lists; Quill ql-indent-* converted to nested ul/ol) */
.viewer-input ul,
.viewer-input ol {
  padding-left: 1.5em;
  margin: 0.25em 0;
}
.viewer-input ul ul,
.viewer-input ol ul,
.viewer-input ol ol,
.viewer-input ul ol {
  margin: 0.1em 0;
}
.viewer-input li {
  margin: 0.15em 0;
}

/* Image support in viewer-input */
.viewer-input img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 4px;
}

/* Center image when paragraph has text-align: center (e.g. from imported img style="display: block; margin: auto;") */
.viewer-input .editor-paragraph[style*='text-align: center'] .editor-image,
.viewer-input .editor-paragraph[style*='text-align:center'] .editor-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Support for inline images in viewer */
.viewer-input img[style*="display: block"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Support for images with explicit dimensions in viewer */
.viewer-input img[width],
.viewer-input img[height] {
  max-width: 100%;
  height: auto;
}

/* Support for base64 images in viewer */
.viewer-input img[src^="data:image"] {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
}

/* Raw HTML viewer (Quill/legacy) - match Lexical viewer base text styling */
.viewer-html-content {
  font-size: inherit;
  line-height: 1.7;
  word-break: break-word;
  outline: none;
  cursor: default;
  user-select: text;
  margin: 0;
  padding: 0;
}

/* Image support in viewer-html-content */
.viewer-html-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 4px;
}

/* Support for inline images */
.viewer-html-content img[style*="display: block"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Support for images with explicit dimensions */
.viewer-html-content img[width],
.viewer-html-content img[height] {
  max-width: 100%;
  height: auto;
}

/* Support for base64 images */
.viewer-html-content img[src^="data:image"] {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
}

/* Quill-style list indentation (ql-indent-*) for legacy/HTML content - preserves indent and color */
.viewer-html-content li.ql-indent-1 {
  padding-left: 3em;
}
.viewer-html-content li.ql-indent-2 {
  padding-left: 6em;
}
.viewer-html-content li.ql-indent-3 {
  padding-left: 9em;
}
.viewer-html-content li.ql-indent-4 {
  padding-left: 12em;
}
.viewer-html-content ul,
.viewer-html-content ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}
/* Match editor list appearance: disc for bullets, decimal for numbers (avoids inconsistent bullet size/style after refresh) */
.viewer-html-content ul {
  list-style-type: disc;
}
.viewer-html-content ol {
  list-style-type: decimal;
}
.viewer-html-content li {
  margin: 0.25em 0;
}
.viewer-html-content p {
  margin: 0 0 0.5em 0;
}
.viewer-html-content p:last-child {
  margin-bottom: 0;
}

/* Toolbar styles */
.toolbar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafbfc;
  padding: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
  /* Ensure toolbar respects parent border-radius at top corners */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background: #e0e0e0;
  margin: 0 4px;
}

/* Focus styles */
.editor-container:focus-within {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
  /* Ensure border-radius is maintained on focus */
  border-radius: inherit;
}

.editor-input:focus {
  outline: none;
}

/* Highlight cursor when editor is focused - enhanced visibility with blinking */
.editor-input:focus {
  caret-color: #002776 !important; /* LaSalle primary blue for visible cursor */
  /* Ensure cursor blinks - browser default blinking is enabled */
  /* Force cursor to be visible */
  -webkit-text-fill-color: inherit; /* Ensure text color doesn't hide cursor */
}

/* Ensure cursor is visible and blinks even when not actively typing */
.editor-container:focus-within .editor-input {
  caret-color: #002776 !important; /* LaSalle primary blue */
  /* Cursor will blink automatically when focused */
  /* Ensure cursor is always visible */
  -webkit-text-fill-color: inherit;
}

/* Additional cursor highlighting for better visibility */
.editor-input[contenteditable="true"]:focus {
  caret-color: #002776 !important;
  /* Ensure blinking cursor is visible */
  -webkit-text-fill-color: inherit;
}

/* Ensure cursor is always visible when editor container has focus */
.editor-container:focus-within {
  /* Subtle border highlight to indicate focus */
  border-color: #002776 !important;
}

/* Make sure the contentEditable area shows the cursor with LaSalle blue */
.editor-input {
  caret-color: #002776 !important;
  /* Cursor will blink when editor has focus */
  /* Ensure text rendering doesn't interfere with cursor */
  -webkit-text-fill-color: inherit;
}

/* Enhanced cursor visibility for Q&A editor drawer - ensure blinking */
.editor-container:focus-within .editor-input {
  caret-color: #002776 !important;
  /* Ensure cursor is visible and blinking */
  /* Remove any properties that might prevent cursor blinking */
  -webkit-text-fill-color: inherit;
}

/* Force cursor visibility - ensure it appears even in empty editors */
.editor-input[contenteditable="true"] {
  caret-color: #002776 !important;
  /* Ensure cursor appears in empty content */
  /* Cursor will be visible when editor has focus */
}

/* Blinking cursor in Q&A drawer: ensure caret is visible when editor is focused */
.editor-input[contenteditable="true"]:focus {
  caret-color: #002776 !important;
  outline: none;
  /* Ensure no style prevents native caret blink */
  -webkit-user-select: text;
  user-select: text;
}

/* Remove any default border from the editable area */
.editor-input {
  border: none !important;
  /* Ensure proper scrolling behavior */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Ensure caret has a visible line when editor is empty (no content) */
  min-height: 1.5em;
}

/* Image styles */
.image-container {
  display: inline-block;
  position: relative;
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* List styles */
.editor-list-ol,
.editor-list-ul {
  padding-left: 20px;
}

.editor-list-ol li,
.editor-list-ul li {
  margin: 4px 0;
}

/* Selection styles */
::selection {
  background: #b3d4fc;
}

/* Allow inline styles for text formatting */
.editor-input * {
  /* Allow all inline styles */
}

.editor-input [style*='color'] {
  /* Ensure color styles are preserved */
}

.editor-input [style*='font-size'] {
  /* Ensure font-size styles are preserved */
}

.editor-input [style*='background-color'] {
  /* Ensure background-color styles are preserved */
}

/* Responsive styles */
@media (max-width: 768px) {
  .toolbar-container {
    flex-wrap: wrap;
  }

  .editor-placeholder {
    font-size: 14px;
  }
}
.custom-link-insertion {
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #e1e5e9;
  min-width: 500px;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-link-insertion .link-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

.custom-link-insertion .link-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.custom-link-insertion .button-container {
  display: flex;
  gap: 8px;
}

.custom-link-insertion .cancel-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-link-insertion .confirm-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-link-insertion .cancel-button:hover,
.custom-link-insertion .confirm-button:hover {
  background-color: #555;
}

.custom-link-insertion .confirm-button.disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.custom-link-insertion .confirm-button.disabled:hover {
  background-color: #ccc;
}
.link-editor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  min-width: 500px;
  max-width: 600px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #e1e5e9;
  opacity: 0;
  transform: translate(-10000px, -10000px);
  transition: opacity 0.2s ease;
}

.link-editor .link-input {
  width: calc(100% - 80px);
  padding: 8px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.link-editor .link-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.link-editor .link-view {
  position: relative;
  padding-right: 70px;
}

.link-editor .link-view a {
  display: block;
  word-break: break-word;
  width: calc(100% + 40px);
  color: #007bff;
  text-decoration: underline;
  padding: 4px 0;
}

.link-editor .link-view a:hover {
  color: #0056b3;
}

.link-editor div.link-edit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.link-editor div.link-edit:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.link-editor div.link-trash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.link-editor div.link-trash:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

.link-editor div.link-cancel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  position: absolute;
  right: 40px;
  top: 8px;
  cursor: pointer;
  border: none;
  background-color: #333;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.link-editor div.link-cancel:hover {
  background-color: #555;
}

.link-editor div.link-confirm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 8px;
  top: 8px;
  cursor: pointer;
  border: none;
  background-color: #333;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.link-editor div.link-confirm:hover {
  background-color: #555;
}

.link-editor .link-input a {
  color: #007bff;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 30px;
  text-overflow: ellipsis;
}

.link-editor .link-input a:hover {
  text-decoration: underline;
}
.docx-preview {
  --docx-bg: #ffffff;
}

.docx-preview, .docx-preview * {
  box-sizing: border-box;
}

/* Ensure content wraps and does not get cut off */
.docx-preview table { 
  table-layout: auto !important; 
  width: 100%;
  border-collapse: collapse;
}
.docx-preview td, .docx-preview th {
  word-break: break-word;
  white-space: pre-wrap;
  overflow: visible !important;
}

/* Images scale within cells */
.docx-preview img {
  max-width: 100%;
  height: auto;
}

/* Paragraph/text wrapping */
.docx-preview p, .docx-preview span, .docx-preview div {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Page container should allow overflow */
.docx-preview .page, .docx-preview .section {
  overflow: visible !important;
}


/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-annotation-layer: 1;
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --input-focus-border-color: Highlight;
  --input-focus-outline: 1px solid Canvas;
  --input-unfocused-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-hover-border-color: black;
  --link-outline: none;
}

@media screen and (forced-colors: active) {
  :root {
    --input-focus-border-color: CanvasText;
    --input-unfocused-border-color: ActiveText;
    --input-disabled-border-color: GrayText;
    --input-hover-border-color: Highlight;
    --link-outline: 1.5px solid LinkText;
  }
  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
  .annotationLayer .choiceWidgetAnnotation select:required,
  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
    outline: 1.5px solid selectedItem;
  }

  .annotationLayer .linkAnnotation:hover {
    backdrop-filter: invert(100%);
  }
}

.annotationLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.annotationLayer[data-main-rotation='90'] .norotate {
  transform: rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation='180'] .norotate {
  transform: rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation='270'] .norotate {
  transform: rotate(90deg) translateY(-100%);
}

.annotationLayer canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.annotationLayer section {
  position: absolute;
  text-align: initial;
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  transform-origin: 0 0;
}

.annotationLayer .linkAnnotation {
  outline: var(--link-outline);
}

.textLayer.selecting ~ .annotationLayer section {
  pointer-events: none;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  background-image: var(--annotation-unfocused-field-background);
  border: 2px solid var(--input-unfocused-border-color);
  box-sizing: border-box;
  font: calc(9px * var(--total-scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
  outline: 1.5px solid red;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  resize: none;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
  background: none;
  border: 2px solid var(--input-disabled-border-color);
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
  border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  border-radius: 2px;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
  background-image: none;
  background-color: transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  border: 2px solid var(--input-focus-border-color);
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  background-color: CanvasText;
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  appearance: none;
}

.annotationLayer .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
  position: absolute;
}

.annotationLayer .popupWrapper {
  position: absolute;
  font-size: calc(9px * var(--total-scale-factor));
  width: 100%;
  min-width: calc(180px * var(--total-scale-factor));
  pointer-events: none;
}

.annotationLayer .popup {
  position: absolute;
  max-width: calc(180px * var(--total-scale-factor));
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--total-scale-factor));
  padding: calc(6px * var(--total-scale-factor));
  margin-left: calc(5px * var(--total-scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.annotationLayer .popup > * {
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--total-scale-factor));
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--total-scale-factor));
  padding-top: calc(2px * var(--total-scale-factor));
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.annotationLayer section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .annotationTextContent {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.annotationLayer .annotationTextContent span {
  width: 100%;
  display: inline-block;
}
/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-text-layer: 1;
  --highlight-bg-color: rgba(180, 0, 170, 1);
  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
}

@media screen and (forced-colors: active) {
  :root {
    --highlight-bg-color: Highlight;
    --highlight-selected-bg-color: ButtonText;
  }
}

[data-main-rotation='90'] {
  transform: rotate(90deg) translateY(-100%);
}
[data-main-rotation='180'] {
  transform: rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation='270'] {
  transform: rotate(270deg) translateX(-100%);
}

.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  margin: 0;
  transform-origin: 0 0;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
 * the problem doesn't show up in "text" reference tests. */
.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: var(--highlight-bg-color);
  border-radius: 4px;
}

.textLayer .highlight.appended {
  position: initial;
}

.textLayer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
  border-radius: 0;
}

.textLayer .highlight.selected {
  background-color: var(--highlight-selected-bg-color);
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}

.textLayer.selecting .endOfContent {
  top: 0;
}

.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}
._optionBox_kqg2l_1 {
  display: flex;
  flex-direction: column;
}

._ellipsisText_kqg2l_6 {
  display: inline-block;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

._optionMeta_kqg2l_15 {
  font-size: var(--mui-typography-caption-fontSize, 12px);
  color: var(--mui-palette-text-secondary, #888);
}

._icTitleCell_kqg2l_20 {
  display: inline-block;
  max-width: 650px;
  min-width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}