:root {
    --lgc-palette-alpha-colors-neutral-10a: #0E1015E5;
    --lgc-palette-alpha-colors-neutral-v-10a: #222326B2;
    --lgc-palette-alpha-colors-neutral-v-99a: #F4F5F87F;

    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --lgc-space-0: 0;
    --lgc-space-025: 2px;
    --lgc-space-050: 4px;
    --lgc-space-075: 6px;
    --lgc-space-100: 8px;
    --lgc-space-150: 12px;
    --lgc-space-200: 16px;
    --lgc-space-250: 20px;
    --lgc-space-300: 24px;
    --lgc-space-400: 32px;
    --lgc-space-500: 40px;
    --lgc-space-600: 48px;
    --lgc-space-800: 64px;
    --lgc-space-1000: 80px;


    --lgc-palette-accent-0: #000000;
    --lgc-palette-accent-10: #B62B00;
    --lgc-palette-accent-20: #FD8D11;
    --lgc-palette-accent-30: #FE9D12;
    --lgc-palette-accent-40: #FEB012;
    --lgc-palette-accent-50: #FFBE17;
    --lgc-palette-accent-60: #FFC82D;
    --lgc-palette-accent-70: #FFD352;
    --lgc-palette-accent-80: #FFDE83;
    --lgc-palette-accent-90: #FFEBB4;
    --lgc-palette-accent-95: #FFF8E1;
    --lgc-palette-accent-99: #FFFFEB;
    --lgc-palette-accent-100: #FFFFFF;
    --lgc-palette-neutral-0: #000000;
    --lgc-palette-neutral-10: #0E1015;
    --lgc-palette-neutral-20: #14171F;
    --lgc-palette-neutral-30: #282B33;
    --lgc-palette-neutral-40: #3C3F47;
    --lgc-palette-neutral-50: #50535B;
    --lgc-palette-neutral-60: #64676F;
    --lgc-palette-neutral-60-5: #64676F80;
    --lgc-palette-neutral-70: #82858D;
    --lgc-palette-neutral-70-5: #82858D80;
    --lgc-palette-neutral-80: #9699A1;
    --lgc-palette-neutral-90: #AAADB5;
    --lgc-palette-neutral-95: #C8CBD3;
    --lgc-palette-neutral-99: #E6E9F1;
    --lgc-palette-neutral-100: #FFFFFF;
    --lgc-palette-neutral-variant-0: #000000;
    --lgc-palette-neutral-variant-10: #222326;
    --lgc-palette-neutral-variant-20: #36373A;
    --lgc-palette-neutral-variant-30: #4A4B4E;
    --lgc-palette-neutral-variant-40: #5E5F62;
    --lgc-palette-neutral-variant-50: #727376;
    --lgc-palette-neutral-variant-60: #86878A;
    --lgc-palette-neutral-variant-70: #9A9B9E;
    --lgc-palette-neutral-variant-80: #AEAFB2;
    --lgc-palette-neutral-variant-90: #C2C3C6;
    --lgc-palette-neutral-variant-95: #D6D7DA;
    --lgc-palette-neutral-variant-99: #F4F5F8;
    --lgc-palette-neutral-variant-100: #FFFFFF;
    --lgc-palette-success-0: #000000;
    --lgc-palette-success-10: #003700;
    --lgc-palette-success-20: #004B07;
    --lgc-palette-success-30: #025F1B;
    --lgc-palette-success-40: #16732F;
    --lgc-palette-success-50: #2A8743;
    --lgc-palette-success-60: #3E9B57;
    --lgc-palette-success-70: #52AF6B;
    --lgc-palette-success-80: #66C37F;
    --lgc-palette-success-90: #7AD793;
    --lgc-palette-success-95: #8EEBA7;
    --lgc-palette-success-99: #CAFFE3;
    --lgc-palette-success-100: #FFFFFF;
    --lgc-palette-danger-0: #000000;
    --lgc-palette-danger-10: #540000;
    --lgc-palette-danger-20: #860000;
    --lgc-palette-danger-30: #AE0B0B;
    --lgc-palette-danger-40: #CC2828;
    --lgc-palette-danger-50: #D63333;
    --lgc-palette-danger-60: #F45151;
    --lgc-palette-danger-70: #FF6565;
    --lgc-palette-danger-80: #FF8383;
    --lgc-palette-danger-90: #FFA1A1;
    --lgc-palette-danger-95: #FFC9C9;
    --lgc-palette-danger-99: #FFE7E7;
    --lgc-palette-danger-100: #FFFFFF;
    --lgc-palette-primary-0: #000000;
    --lgc-palette-primary-10: #001C38;
    --lgc-palette-primary-20: #00325B;
    --lgc-palette-primary-30: #004880;
    --lgc-palette-primary-40: #006FC2;
    --lgc-palette-primary-50: #0E79D0;
    --lgc-palette-primary-60: #3D94EC;
    --lgc-palette-primary-70: #6AAFFF;
    --lgc-palette-primary-80: #A1C9FF;
    --lgc-palette-primary-90: #D3E4FF;
    --lgc-palette-primary-95: #E5EFFF;
    --lgc-palette-primary-99: #F2F7FF;
    --lgc-palette-primary-100: #FFFFFF;
    --lgc-palette-ai-0: #000000;
    --lgc-palette-ai-10: #21184F;
    --lgc-palette-ai-20: #352C63;
    --lgc-palette-ai-30: #5E4DB2;
    --lgc-palette-ai-40: #6E5DC6;
    --lgc-palette-ai-50: #8270DB;
    --lgc-palette-ai-60: #8F7EE7;
    --lgc-palette-ai-70: #9F8FEF;
    --lgc-palette-ai-80: #B8ACF6;
    --lgc-palette-ai-90: #CCC0FF;
    --lgc-palette-ai-95: #DFD8FD;
    --lgc-palette-ai-99: #F3F0FF;
    --lgc-palette-ai-100: #FFFFFF;
}:root {
  --text-selection-background-color: #D6D7DA99;
  --text-selection-text: var(--text-primary);
  --contextmenu-item-color: var(--text-secondary);
  --contextmenu-item-bg: var(--elevations-surface-default);
  --contextmenu-item-hover-bg: var(--lgc-palette-neutral-variant-99);
  --contextmenu-item-hover-color: var(--text-primary);
  --contextmenu-item-border: var(--lgc-palette-neutral-variant-99);
  --contextmenu-item-disabled: var(--text-placeholder);
  --contextmenu-item-scroll: var(--lgc-palette-neutral-70-5);
  --alpha-colors-neutral-v-99a: #F4F5F87F;
  --alpha-colors-neutral-10a: #0E1015E5;
  --button-btn-radius-sm: var(--radius-xs);
  --select-color: var(--text-secondary);
  --select2-color: var(--text-primary);
  --select2-bg: var(--lgc-palette-neutral-variant-99);
  --select2-hover: var(--text-secondary);
  --select2-bg-hover: var(--lgc-palette-neutral-99);
  --select2-option: var(--text-secondary);
  --select2-option-bg: var(--lgc-palette-neutral-100);
  --select2-option-hover: var(--text-primary);
  --select2-option-hover-bg: var(--lgc-palette-neutral-variant-99);
  --select2-option-active-bg: var(--lgc-palette-primary-95);
  --select2-option-active-hover-bg: var(--lgc-palette-primary-90);
  --label-neutral-color: var(--text-secondary);
  --button-btn-radius-md: var(--radius-sm);
  --button-btn-radius-lg: var(--radius-md);
  --button-disabled-color: var(--lgc-palette-neutral-variant-60);
  --button-disabled-bg: var(--lgc-palette-neutral-variant-99);
  --button-icon-btn-color: var(--lgc-palette-neutral-60);
  --button-white-color: var(--text-secondary);
  --button-white-bg: var(--lgc-palette-neutral-100);
  --button-white-hover: var(--text-primary);
  --button-icon-btn-hover: var(--lgc-palette-neutral-10);
  --button-white-bg-hover: var(--lgc-palette-neutral-99);
  --button-icon-btn-hover-bg: var(--lgc-palette-neutral-variant-99);
  --button-icon-btn-active-bg: var(--lgc-palette-neutral-99);
  --button-icon-btn-light: var(--lgc-palette-neutral-90);
  --button-solid-primary-color: var(--lgc-palette-primary-100);
  --button-solid-primary-bg: var(--lgc-palette-primary-50);
  --button-solid-primary-hover-bg: var(--lgc-palette-primary-60);
  --button-solid-primary-active-bg: var(--lgc-palette-primary-30);
  --button-solid-primary-preloader-active: var(--lgc-palette-primary-70);
  --button-solid-primary-preloader: var(--lgc-palette-primary-95);
  --button-solid-neutral-color: var(--lgc-palette-neutral-99);
  --button-solid-neutral-bg: var(--lgc-palette-neutral-30);
  --button-solid-neutral-hover: var(--lgc-palette-neutral-100);
  --button-solid-neutral-hover-bg: var(--lgc-palette-neutral-40);
  --button-solid-neutral-active: var(--lgc-palette-neutral-100);
  --button-solid-neutral-active-bg: var(--lgc-palette-neutral-10);
  --button-solid-neutral-preloader-active: var(--lgc-palette-neutral-variant-40);
  --button-solid-neutral-preloader: var(--lgc-palette-neutral-99);
  --button-solid-neutral-preloader-bg: var(--lgc-palette-neutral-10);
  --button-solid-danger-color: var(--lgc-palette-danger-100);
  --button-solid-danger-bg: var(--lgc-palette-danger-40);
  --button-solid-danger-hover-bg: var(--lgc-palette-danger-50);
  --button-solid-danger-active-bg: var(--lgc-palette-danger-30);
  --button-solid-danger-preloader-active: var(--lgc-palette-danger-70);
  --button-solid-danger-preloader: var(--lgc-palette-danger-99);
  --button-solid-danger-preloader-bg: var(--lgc-palette-danger-30);
  --button-solid-success-color: var(--lgc-palette-primary-100);
  --button-solid-accent-color: var(--lgc-palette-neutral-20);
  --button-solid-accent-bg: var(--lgc-palette-accent-60);
  --button-solid-accent-hover-bg: var(--lgc-palette-accent-70);
  --button-solid-accent-active-bg: var(--lgc-palette-accent-40);
  --button-solid-accent-preloader: var(--lgc-palette-accent-95);
  --button-solid-success-bg: var(--lgc-palette-success-40);
  --button-solid-success-hover-bg: var(--lgc-palette-success-60);
  --button-solid-success-active-bg: var(--lgc-palette-success-30);
  --button-solid-success-preloader-active: var(--lgc-palette-success-20);
  --button-solid-success-preloader: var(--lgc-palette-success-99);
  --button-solid-ai-color: var(--lgc-palette-ai-100);
  --button-solid-ai-bg: var(--lgc-palette-ai-30);
  --button-solid-ai-hover-bg: var(--lgc-palette-ai-50);
  --button-solid-ai-active-bg: var(--lgc-palette-ai-20);
  --button-solid-ai-preloader-active: var(--lgc-palette-ai-20);
  --button-solid-ai-preloader: var(--lgc-palette-ai-95);
  --button-plain-primary-color: var(--lgc-palette-primary-50);
  --button-plain-primary-hover: var(--lgc-palette-primary-50);
  --button-plain-primary-hover-bg: var(--lgc-palette-primary-99);
  --button-plain-primary-active: var(--lgc-palette-primary-40);
  --button-plain-primary-preloader-active: var(--lgc-palette-primary-60);
  --button-plain-primary-preloader: var(--lgc-palette-primary-90);
  --button-plain-primary-preloader-bg: var(--lgc-palette-primary-99);
  --button-plain-neutral-color: var(--lgc-palette-neutral-60);
  --button-plain-neutral-hover: var(--lgc-palette-neutral-40);
  --button-plain-neutral-hover-bg: var(--lgc-palette-neutral-variant-99);
  --button-plain-neutral-active: var(--lgc-palette-neutral-30);
  --button-plain-neutral-active-bg: var(--lgc-palette-neutral-variant-99);
  --button-plain-neutral-preloader-active: var(--lgc-palette-neutral-40);
  --button-plain-neutral-preloader: var(--lgc-palette-neutral-90);
  --button-plain-neutral-preloader-bg: var(--lgc-palette-neutral-variant-99);
  --button-plain-danger-color: var(--lgc-palette-danger-50);
  --button-plain-danger-hover: var(--lgc-palette-danger-30);
  --button-plain-danger-hover-bg: var(--lgc-palette-danger-99);
  --button-plain-danger-active: var(--lgc-palette-danger-10);
  --button-plain-danger-active-bg: var(--lgc-palette-danger-95);
  --button-plain-danger-preloader: var(--lgc-palette-danger-80);
  --button-plain-success-color: var(--lgc-palette-success-40);
  --button-plain-success-hover: var(--lgc-palette-success-30);
  --button-plain-success-hover-bg: var(--lgc-palette-success-99);
  --button-plain-success-active: var(--lgc-palette-success-20);
  --button-plain-success-preloader-active: var(--lgc-palette-success-50);
  --button-plain-success-preloader: var(--lgc-palette-success-90);
  --button-plain-success-preloader-bg: var(--lgc-palette-success-99);
  --button-plain-accent-color: var(--lgc-palette-accent-10);
  --button-plain-accent-hover: var(--lgc-palette-accent-10);
  --button-plain-accent-hover-bg: var(--lgc-palette-accent-90);
  --button-plain-accent-active: var(--lgc-palette-accent-10);
  --button-plain-accent-active-bg: var(--lgc-palette-accent-80);
  --button-plain-accent-preloader-active: var(--lgc-palette-accent-10);
  --button-plain-accent-preloader: var(--lgc-palette-accent-99);
  --button-plain-accent-preloader-bg: var(--lgc-palette-accent-80);
  --button-plain-ai-color: var(--lgc-palette-ai-30);
  --button-plain-ai-hover: var(--lgc-palette-ai-30);
  --button-plain-ai-hover-bg: var(--lgc-palette-ai-99);
  --button-plain-ai-active: var(--lgc-palette-ai-20);
  --button-plain-ai-preloader-active: var(--lgc-palette-ai-40);
  --button-plain-ai-preloader: var(--lgc-palette-ai-95);
  --button-plain-ai-preloader-bg: var(--lgc-palette-ai-99);
  --button-outlined-primary-color: var(--lgc-palette-primary-50);
  --button-outlined-primary-hover: var(--lgc-palette-primary-60);
  --button-outlined-primary-active: var(--lgc-palette-primary-30);
  --button-outlined-primary-preloader-active: var(--lgc-palette-primary-60);
  --button-outlined-primary-preloader: var(--lgc-palette-primary-90);
  --button-outlined-neutral-color: var(--lgc-palette-neutral-40);
  --button-outlined-neutral-hover: var(--lgc-palette-neutral-60);
  --button-outlined-neutral-active: var(--lgc-palette-neutral-20);
  --button-outlined-neutral-preloader-active: var(--lgc-palette-neutral-40);
  --button-outlined-neutral-preloader: var(--lgc-palette-neutral-90);
  --button-outlined-danger-color: var(--lgc-palette-danger-40);
  --button-outlined-danger-hover: var(--lgc-palette-danger-50);
  --button-outlined-danger-active: var(--lgc-palette-danger-30);
  --button-outlined-danger-preloader-active: var(--lgc-palette-danger-40);
  --button-outlined-danger-preloader: var(--lgc-palette-danger-99);
  --button-outlined-success-color: var(--lgc-palette-success-40);
  --button-outlined-success-hover: var(--lgc-palette-success-50);
  --button-outlined-success-active: var(--lgc-palette-success-30);
  --button-outlined-success-preloader-active: var(--lgc-palette-success-60);
  --button-outlined-success-preloader: var(--lgc-palette-success-90);
  --button-outlined-accent-color: var(--lgc-palette-accent-10);
  --button-outlined-accent-hover: var(--lgc-palette-accent-0);
  --button-outlined-accent-active: var(--lgc-palette-accent-10);
  --button-outlined-accent-preloader-active: var(--lgc-palette-accent-10);
  --button-outlined-accent-preloader: var(--lgc-palette-accent-20);
  --button-outlined-ai-color: var(--lgc-palette-ai-30);
  --button-outlined-ai-hover: var(--lgc-palette-ai-50);
  --button-outlined-ai-active: var(--lgc-palette-ai-30);
  --button-outlined-ai-preloader-active: var(--lgc-palette-ai-30);
  --button-outlined-ai-preloader: var(--lgc-palette-ai-90);
  --button-soft-primary-color: var(--text-link);
  --button-soft-primary-bg: var(--lgc-palette-primary-99);
  --button-soft-primary-hover: var(--text-link-hover);
  --button-soft-primary-hover-bg: var(--lgc-palette-primary-99);
  --button-soft-primary-active: var(--lgc-palette-primary-30);
  --button-soft-primary-active-bg: var(--lgc-palette-primary-95);
  --button-soft-primary-preloader-active: var(--lgc-palette-primary-60);
  --button-soft-primary-preloader: var(--lgc-palette-primary-90);
  --button-soft-primary-preloader-bg: var(--lgc-palette-primary-99);
  --button-soft-neutral-color: var(--text-secondary);
  --button-soft-neutral-bg: var(--lgc-palette-neutral-variant-99);
  --button-soft-neutral-hover: var(--text-primary);
  --button-soft-neutral-hover-bg: var(--lgc-palette-neutral-variant-99);
  --button-soft-neutral-active: var(--text-primary);
  --button-soft-neutral-active-bg: var(--lgc-palette-neutral-99);
  --button-soft-danger-color: var(--lgc-palette-danger-40);
  --button-soft-danger-bg: var(--lgc-palette-danger-99);
  --button-soft-danger-hover: var(--lgc-palette-danger-30);
  --button-soft-danger-hover-bg: var(--lgc-palette-danger-95);
  --button-soft-danger-active: var(--lgc-palette-danger-10);
  --button-soft-danger-active-bg: var(--lgc-palette-danger-90);
  --button-soft-danger-preloader: var(--lgc-palette-danger-80);
  --select-bg: var(--lgc-palette-neutral-100);
  --label-neutral-bg: #AEAFB226;
  --select-hover: var(--text-primary);
  --button-soft-success-color: var(--lgc-palette-success-40);
  --button-soft-accent-color: var(--lgc-palette-accent-10);
  --button-soft-ai-color: var(--lgc-palette-ai-30);
  --button-soft-ai-bg: var(--lgc-palette-ai-99);
  --button-soft-ai-hover: var(--lgc-palette-ai-40);
  --button-soft-ai-hover-bg: var(--lgc-palette-ai-99);
  --button-soft-ai-active: var(--lgc-palette-ai-10);
  --button-soft-ai-active-bg: var(--lgc-palette-ai-95);
  --button-soft-ai-preloader-active: var(--lgc-palette-ai-40);
  --button-soft-ai-preloader: var(--lgc-palette-ai-95);
  --button-soft-ai-preloader-bg: var(--lgc-palette-ai-99);
  --button-soft-accent-bg: var(--lgc-palette-accent-90);
  --button-soft-accent-hover: var(--lgc-palette-accent-10);
  --select-bg-hover: var(--lgc-palette-neutral-99);
  --label-success-color: var(--lgc-palette-success-40);
  --button-soft-accent-hover-bg: var(--lgc-palette-accent-95);
  --button-soft-accent-active: var(--lgc-palette-accent-10);
  --button-soft-accent-active-bg: var(--lgc-palette-accent-80);
  --button-soft-accent-preloader-active: var(--lgc-palette-accent-10);
  --button-soft-accent-preloader: var(--lgc-palette-accent-95);
  --button-soft-accent-preloader-bg: var(--lgc-palette-accent-80);
  --button-soft-success-bg: var(--lgc-palette-success-99);
  --label-success-bg: var(--highlight-palegreen);
  --button-soft-success-hover: var(--lgc-palette-success-10);
  --select-option-hover-bg: var(--lgc-palette-neutral-variant-99);
  --label-neutral-grey-bg: var(--lgc-palette-neutral-99);
  --button-soft-success-hover-bg: var(--lgc-palette-success-95);
  --select-option-active-bg: var(--lgc-palette-primary-95);
  --button-soft-success-active: var(--lgc-palette-success-20);
  --select-option-active-hover-bg: var(--lgc-palette-primary-90);
  --button-soft-success-active-bg: var(--lgc-palette-success-99);
  --button-soft-success-preloader-active: var(--lgc-palette-success-50);
  --button-soft-success-preloader: var(--lgc-palette-success-90);
  --button-soft-success-preloader-bg: var(--lgc-palette-success-99);
  --text-primary: var(--lgc-palette-neutral-30);
  --text-secondary: var(--lgc-palette-neutral-50);
  --text-tertiary: var(--lgc-palette-neutral-60);
  --text-placeholder: var(--lgc-palette-neutral-90);
  --text-icon-primary: var(--lgc-palette-neutral-30);
  --text-icon-secondary: var(--lgc-palette-neutral-50);
  --text-link: var(--lgc-palette-primary-40);
  --text-link-hover: var(--lgc-palette-primary-60);
  --text-success: var(--lgc-palette-success-50);
  --text-danger: var(--lgc-palette-danger-40);
  --loader-active: var(--lgc-palette-primary-60);
  --fields-color: var(--text-secondary);
  --fields-bg: var(--lgc-palette-neutral-100);
  --loader-bg: var(--lgc-palette-neutral-variant-95);
  --fields-active-color: var(--text-primary);
  --fields-icon-color: var(--lgc-palette-neutral-70);
  --fields-border-color: var(--lgc-palette-neutral-60);
  --fields-focus-color: var(--lgc-palette-primary-50);
  --fields-successes-color: var(--lgc-palette-success-50);
  --messages-callout-text: var(--lgc-palette-neutral-30);
  --messages-callout-info-icon: var(--lgc-palette-primary-40);
  --messages-callout-info-bg: var(--lgc-palette-primary-95);
  --messages-callout-success-icon: var(--lgc-palette-success-40);
  --messages-callout-success-bg: var(--highlight-palegreen);
  --messages-callout-warning-icon: var(--lgc-palette-accent-20);
  --messages-callout-warning-bg: var(--lgc-palette-accent-95);
  --messages-callout-danger-icon: var(--lgc-palette-danger-40);
  --messages-callout-danger-bg: var(--lgc-palette-danger-99);
  --messages-section-warning-title: var(--lgc-palette-danger-40);
  --messages-section-warning-color: var(--text-primary);
  --messages-section-warning-bg: var(--lgc-palette-neutral-variant-99);
  --messages-section-danger-color: var(--lgc-palette-danger-40);
  --messages-section-danger-bg: var(--lgc-palette-danger-99);
  --messages-section-success-color: var(--lgc-palette-success-40);
  --messages-section-success-bg: var(--lgc-palette-success-99);
  --fields-error-color: var(--lgc-palette-danger-40);
  --messages-section-info-color: var(--lgc-palette-primary-30);
  --messages-section-info-bg: var(--lgc-palette-primary-95);
  --messages-toast-notification-color: var(--lgc-palette-neutral-100);
  --messages-toast-notification-bg: var(--lgc-palette-primary-50);
  --messages-toast-notification-btn: var(--lgc-palette-primary-100);
  --messages-toast-notification-btn-hover: var(--lgc-palette-primary-100);
  --messages-toast-default-color: var(--lgc-palette-neutral-99);
  --messages-toast-info-color: var(--text-primary);
  --messages-toast-default-bg: var(--lgc-palette-neutral-20);
  --messages-toast-info-bg: var(--elevations-surface-raised);
  --messages-toast-info-btn: var(--button-icon-btn-color);
  --messages-toast-default-btn: var(--lgc-palette-neutral-90);
  --messages-toast-danger-color: var(--lgc-palette-danger-100);
  --messages-inline-dialogs-color: var(--text-primary);
  --messages-inline-dialogs-bg: var(--elevations-surface-raised);
  --messages-toast-danger-bg: var(--lgc-palette-danger-40);
  --messages-toast-danger-btn: var(--lgc-palette-danger-100);
  --messages-toast-danger-btn-hover: var(--lgc-palette-danger-100);
  --messages-toast-danger-text-btn: var(--lgc-palette-danger-40);
  --messages-inline-dialogs-icon-color: var(--text-primary);
  --messages-toast-warning-color: var(--text-primary);
  --messages-toast-warning-bg: var(--lgc-palette-accent-50);
  --messages-toast-warning-btn: var(--lgc-palette-neutral-40);
  --messages-toast-warning-btn-hover: var(--lgc-palette-neutral-30);
  --messages-toast-success-color: var(--lgc-palette-success-100);
  --messages-toast-success-bg: var(--lgc-palette-success-50);
  --messages-toast-success-btn: var(--lgc-palette-success-100);
  --messages-toast-accent-color: var(--lgc-palette-neutral-30);
  --messages-toast-success-btn-hover: var(--lgc-palette-success-100);
  --messages-toast-accent-bg: var(--lgc-palette-accent-60);
  --messages-toast-accent-btn: var(--lgc-palette-neutral-30);
  --messages-toast-accent-btn-hover: var(--lgc-palette-neutral-10);
  --messages-toast-accent-btn-hover-bg: var(--lgc-palette-neutral-variant-99);
  --messages-toast-accent-border: var(--lgc-palette-accent-60);
  --messages-inline-dialogs-link-color: var(--lgc-palette-primary-60);
  --messages-confirm-modals-bg: var(--elevations-surface-raised);
  --messages-confirm-modals-primary: var(--lgc-palette-primary-50);
  --messages-confirm-modals-neutral: var(--text-primary);
  --messages-confirm-modals-danger: var(--text-danger);
  --messages-confirm-modals-success: var(--text-success);
  --messages-confirm-modals-accent: var(--lgc-palette-accent-20);
  --messages-confirm-modals-txt: var(--text-primary);
  --divider-highlight: var(--lgc-palette-primary-90);
  --divider-neutral: var(--lgc-palette-neutral-99);
  --highlight-palegreen: #E2EFDA;
  --elevations-surface-overlay: var(--lgc-palette-neutral-variant-99);
  --schedule-cell-bg: var(--lgc-palette-neutral-100);
  --schedule-cell-default: var(--button-icon-btn-light);
  --schedule-cell-completed: var(--lgc-palette-success-70);
  --schedule-cell-completed-disable: #52AF6B7F;
  --schedule-cell-completed-late: var(--lgc-palette-accent-40);
  --schedule-cell-danger: var(--lgc-palette-danger-50);
  --schedule-cell-danger-bg: var(--lgc-palette-danger-99);
  --schedule-cell-danger-disable: #D633337F;
  --schedule-cell-danger-bg-disable: #FFE7E7CC;
  --schedule-cell-scheduled: var(--lgc-palette-neutral-variant-95);
  --schedule-cell-scheduled-hover: var(--lgc-palette-neutral-60);
  --schedule-cell-danger-light: var(--lgc-palette-danger-90);
  --schedule-cell-danger-light-hover: var(--lgc-palette-danger-60);
  --schedule-cell-primary-light: var(--lgc-palette-primary-80);
  --schedule-cell-primary-light-hover: var(--lgc-palette-primary-60);
  --elevations-surface-raised: var(--lgc-palette-neutral-100);
  --elevations-surface-default: var(--lgc-palette-neutral-100);
  --elevations-surface-sunken: var(--lgc-palette-neutral-variant-99);
  --loader-color: var(--lgc-palette-neutral-variant-95);
  --messages-toast-default-btn-hover: var(--lgc-palette-neutral-99);
  --button-inline-danger-color: var(--lgc-palette-danger-40);
  --button-inline-danger-hover: var(--lgc-palette-danger-30);
  --button-inline-danger-active: var(--lgc-palette-danger-10);
  --messages-toast-danger-text-btn-bg: var(--lgc-palette-danger-100);
  --fields-disabled: var(--lgc-palette-neutral-variant-80);
  --button-inline-accent-color: var(--lgc-palette-accent-10);
  --button-inline-accent-hover: var(--lgc-palette-accent-20);
  --button-inline-accent-active: var(--lgc-palette-accent-10);
  --messages-section-ai-title: var(--lgc-palette-ai-20);
  --messages-section-ai-color: var(--lgc-palette-ai-20);
  --messages-section-ai-bg: var(--lgc-palette-ai-95);
  --messages-section-ai-icon-hover: var(--lgc-palette-ai-40);
  --messages-toast-ai-color: var(--lgc-palette-ai-100);
  --messages-toast-ai-bg: var(--lgc-palette-ai-30);
  --messages-toast-ai-btn: var(--lgc-palette-ai-100);
  --messages-toast-ai-btn-hover: var(--lgc-palette-ai-100);
  --sidebar-color: var(--text-secondary);
  --sidebar-bg: var(--elevations-surface-default);
  --sidebar-hover-bg: var(--lgc-palette-neutral-variant-99);
  --sidebar-hover-color: var(--text-primary);
  --sidebar-border: var(--lgc-palette-neutral-variant-99);
  --sidebar-disabled: var(--text-placeholder);
  --sidebar-scroll: var(--lgc-palette-neutral-70);
  --sidebar-bg2: var(--lgc-palette-neutral-99);
  --sidebar-tree-color: var(--text-secondary);
  --sidebar-tree-bg: var(--elevations-surface-sunken);
  --sidebar-tree-hover-color: var(--text-primary);
  --sidebar-tree-hover-bg: var(--lgc-palette-neutral-99);
  --sidebar-tree-scroll: #82858D7F;
}
.theme-dark {
  --text-selection-background-color: #64676F99;
  --text-selection-text: var(--text-primary);
  --contextmenu-item-color: var(--text-secondary);
  --contextmenu-item-bg: var(--elevations-surface-default);
  --contextmenu-item-hover-bg: var(--lgc-palette-neutral-40);
  --contextmenu-item-hover-color: var(--text-primary);
  --contextmenu-item-border: var(--lgc-palette-neutral-40);
  --contextmenu-item-disabled: var(--text-placeholder);
  --contextmenu-item-scroll: var(--lgc-palette-neutral-60-5);
  --alpha-colors-neutral-v-99a: #222326B2;
  --alpha-colors-neutral-10a: #0E1015E5;
  --button-btn-radius-sm: var(--radius-xs);
  --select-color: var(--text-secondary);
  --select2-color: var(--text-primary);
  --select2-bg: var(--lgc-palette-neutral-40);
  --select2-hover: var(--text-secondary);
  --select2-bg-hover: var(--lgc-palette-neutral-50);
  --select2-option: var(--text-secondary);
  --select2-option-bg: var(--lgc-palette-neutral-30);
  --select2-option-hover: var(--text-primary);
  --select2-option-hover-bg: var(--lgc-palette-neutral-40);
  --select2-option-active-bg: #00325B99;
  --select2-option-active-hover-bg: #00488099;
  --label-neutral-color: var(--text-secondary);
  --button-btn-radius-md: var(--radius-sm);
  --button-btn-radius-lg: var(--radius-md);
  --button-disabled-color: var(--lgc-palette-neutral-variant-50);
  --button-disabled-bg: var(--lgc-palette-neutral-variant-10);
  --button-icon-btn-color: var(--lgc-palette-neutral-90);
  --button-white-color: var(--text-secondary);
  --button-white-bg: var(--lgc-palette-neutral-30);
  --button-white-hover: var(--text-primary);
  --button-icon-btn-hover: var(--lgc-palette-neutral-99);
  --button-white-bg-hover: var(--lgc-palette-neutral-50);
  --button-icon-btn-hover-bg: var(--lgc-palette-neutral-40);
  --button-icon-btn-active-bg: var(--lgc-palette-neutral-60);
  --button-icon-btn-light: var(--lgc-palette-neutral-70);
  --button-solid-primary-color: var(--lgc-palette-primary-100);
  --button-solid-primary-bg: var(--lgc-palette-primary-50);
  --button-solid-primary-hover-bg: var(--lgc-palette-primary-60);
  --button-solid-primary-active-bg: var(--lgc-palette-primary-30);
  --button-solid-primary-preloader-active: var(--lgc-palette-primary-70);
  --button-solid-primary-preloader: var(--lgc-palette-primary-95);
  --button-solid-neutral-color: var(--lgc-palette-neutral-90);
  --button-solid-neutral-bg: var(--lgc-palette-neutral-30);
  --button-solid-neutral-hover: var(--lgc-palette-neutral-100);
  --button-solid-neutral-hover-bg: var(--lgc-palette-neutral-20);
  --button-solid-neutral-active: var(--lgc-palette-neutral-100);
  --button-solid-neutral-active-bg: var(--lgc-palette-neutral-20);
  --button-solid-neutral-preloader-active: var(--lgc-palette-neutral-100);
  --button-solid-neutral-preloader: var(--lgc-palette-neutral-90);
  --button-solid-neutral-preloader-bg: var(--lgc-palette-neutral-20);
  --button-solid-danger-color: var(--lgc-palette-danger-100);
  --button-solid-danger-bg: var(--lgc-palette-danger-40);
  --button-solid-danger-hover-bg: var(--lgc-palette-danger-50);
  --button-solid-danger-active-bg: var(--lgc-palette-danger-30);
  --button-solid-danger-preloader-active: var(--lgc-palette-danger-70);
  --button-solid-danger-preloader: var(--lgc-palette-danger-99);
  --button-solid-danger-preloader-bg: var(--lgc-palette-danger-30);
  --button-solid-success-color: var(--lgc-palette-primary-100);
  --button-solid-accent-color: var(--lgc-palette-neutral-20);
  --button-solid-accent-bg: var(--lgc-palette-accent-60);
  --button-solid-accent-hover-bg: var(--lgc-palette-accent-50);
  --button-solid-accent-active-bg: var(--lgc-palette-accent-40);
  --button-solid-accent-preloader: var(--lgc-palette-accent-95);
  --button-solid-success-bg: var(--lgc-palette-success-40);
  --button-solid-success-hover-bg: var(--lgc-palette-success-60);
  --button-solid-success-active-bg: var(--lgc-palette-success-30);
  --button-solid-success-preloader-active: var(--lgc-palette-success-20);
  --button-solid-success-preloader: var(--lgc-palette-success-99);
  --button-solid-ai-color: var(--lgc-palette-ai-100);
  --button-solid-ai-bg: var(--lgc-palette-ai-30);
  --button-solid-ai-hover-bg: var(--lgc-palette-ai-50);
  --button-solid-ai-active-bg: var(--lgc-palette-ai-20);
  --button-solid-ai-preloader-active: var(--lgc-palette-ai-20);
  --button-solid-ai-preloader: var(--lgc-palette-ai-95);
  --button-plain-primary-color: var(--lgc-palette-primary-60);
  --button-plain-primary-hover: var(--lgc-palette-primary-70);
  --button-plain-primary-hover-bg: var(--lgc-palette-primary-10);
  --button-plain-primary-active: var(--lgc-palette-primary-60);
  --button-plain-primary-preloader-active: var(--lgc-palette-primary-60);
  --button-plain-primary-preloader: var(--lgc-palette-primary-30);
  --button-plain-primary-preloader-bg: var(--lgc-palette-primary-10);
  --button-plain-neutral-color: var(--lgc-palette-neutral-90);
  --button-plain-neutral-hover: var(--lgc-palette-neutral-100);
  --button-plain-neutral-hover-bg: var(--lgc-palette-neutral-20);
  --button-plain-neutral-active: var(--lgc-palette-neutral-100);
  --button-plain-neutral-active-bg: var(--lgc-palette-neutral-20);
  --button-plain-neutral-preloader-active: var(--lgc-palette-neutral-100);
  --button-plain-neutral-preloader: var(--lgc-palette-neutral-90);
  --button-plain-neutral-preloader-bg: var(--lgc-palette-neutral-20);
  --button-plain-danger-color: var(--lgc-palette-danger-60);
  --button-plain-danger-hover: var(--lgc-palette-danger-30);
  --button-plain-danger-hover-bg: var(--lgc-palette-danger-95);
  --button-plain-danger-active: var(--lgc-palette-danger-10);
  --button-plain-danger-active-bg: var(--lgc-palette-danger-90);
  --button-plain-danger-preloader: var(--lgc-palette-danger-80);
  --button-plain-success-color: var(--lgc-palette-success-70);
  --button-plain-success-hover: var(--lgc-palette-success-80);
  --button-plain-success-hover-bg: var(--lgc-palette-success-20);
  --button-plain-success-active: var(--lgc-palette-success-90);
  --button-plain-success-preloader-active: var(--lgc-palette-success-60);
  --button-plain-success-preloader: var(--lgc-palette-success-30);
  --button-plain-success-preloader-bg: var(--lgc-palette-success-10);
  --button-plain-accent-color: var(--lgc-palette-accent-40);
  --button-plain-accent-hover: var(--lgc-palette-accent-10);
  --button-plain-accent-hover-bg: var(--lgc-palette-accent-90);
  --button-plain-accent-active: var(--lgc-palette-accent-10);
  --button-plain-accent-active-bg: var(--lgc-palette-accent-80);
  --button-plain-accent-preloader-active: var(--lgc-palette-accent-10);
  --button-plain-accent-preloader: var(--lgc-palette-accent-99);
  --button-plain-accent-preloader-bg: var(--lgc-palette-accent-90);
  --button-plain-ai-color: var(--lgc-palette-ai-95);
  --button-plain-ai-hover: var(--lgc-palette-ai-99);
  --button-plain-ai-hover-bg: var(--lgc-palette-ai-10);
  --button-plain-ai-active: var(--lgc-palette-ai-99);
  --button-plain-ai-preloader-active: var(--lgc-palette-ai-90);
  --button-plain-ai-preloader: var(--lgc-palette-ai-40);
  --button-plain-ai-preloader-bg: var(--lgc-palette-ai-10);
  --button-outlined-primary-color: var(--lgc-palette-primary-70);
  --button-outlined-primary-hover: var(--lgc-palette-primary-80);
  --button-outlined-primary-active: var(--lgc-palette-primary-70);
  --button-outlined-primary-preloader-active: var(--lgc-palette-primary-70);
  --button-outlined-primary-preloader: var(--lgc-palette-primary-30);
  --button-outlined-neutral-color: var(--lgc-palette-neutral-90);
  --button-outlined-neutral-hover: var(--lgc-palette-neutral-99);
  --button-outlined-neutral-active: var(--lgc-palette-neutral-95);
  --button-outlined-neutral-preloader-active: var(--lgc-palette-neutral-60);
  --button-outlined-neutral-preloader: var(--lgc-palette-neutral-90);
  --button-outlined-danger-color: var(--lgc-palette-danger-60);
  --button-outlined-danger-hover: var(--lgc-palette-danger-80);
  --button-outlined-danger-active: var(--lgc-palette-danger-70);
  --button-outlined-danger-preloader-active: var(--lgc-palette-danger-70);
  --button-outlined-danger-preloader: var(--lgc-palette-danger-90);
  --button-outlined-success-color: var(--lgc-palette-success-70);
  --button-outlined-success-hover: var(--lgc-palette-success-80);
  --button-outlined-success-active: var(--lgc-palette-success-90);
  --button-outlined-success-preloader-active: var(--lgc-palette-success-80);
  --button-outlined-success-preloader: var(--lgc-palette-success-30);
  --button-outlined-accent-color: var(--lgc-palette-accent-40);
  --button-outlined-accent-hover: var(--lgc-palette-accent-60);
  --button-outlined-accent-active: var(--lgc-palette-accent-80);
  --button-outlined-accent-preloader-active: var(--lgc-palette-accent-40);
  --button-outlined-accent-preloader: var(--lgc-palette-accent-95);
  --button-outlined-ai-color: var(--lgc-palette-ai-30);
  --button-outlined-ai-hover: var(--lgc-palette-ai-50);
  --button-outlined-ai-active: var(--lgc-palette-ai-30);
  --button-outlined-ai-preloader-active: var(--lgc-palette-ai-30);
  --button-outlined-ai-preloader: var(--lgc-palette-ai-90);
  --button-soft-primary-color: var(--text-link);
  --button-soft-primary-bg: var(--lgc-palette-neutral-10);
  --button-soft-primary-hover: var(--text-link-hover);
  --button-soft-primary-hover-bg: var(--lgc-palette-primary-10);
  --button-soft-primary-active: var(--lgc-palette-primary-60);
  --button-soft-primary-active-bg: var(--lgc-palette-primary-10);
  --button-soft-primary-preloader-active: var(--lgc-palette-primary-60);
  --button-soft-primary-preloader: var(--lgc-palette-primary-30);
  --button-soft-primary-preloader-bg: var(--lgc-palette-primary-10);
  --button-soft-neutral-color: var(--text-secondary);
  --button-soft-neutral-bg: var(--lgc-palette-neutral-30);
  --button-soft-neutral-hover: var(--text-primary);
  --button-soft-neutral-hover-bg: var(--lgc-palette-neutral-30);
  --button-soft-neutral-active: var(--text-primary);
  --button-soft-neutral-active-bg: var(--lgc-palette-neutral-20);
  --button-soft-danger-color: var(--lgc-palette-danger-20);
  --button-soft-danger-bg: var(--lgc-palette-danger-90);
  --button-soft-danger-hover: var(--lgc-palette-danger-50);
  --button-soft-danger-hover-bg: var(--lgc-palette-danger-95);
  --button-soft-danger-active: var(--lgc-palette-danger-10);
  --button-soft-danger-active-bg: var(--lgc-palette-danger-80);
  --button-soft-danger-preloader: var(--lgc-palette-danger-80);
  --select-bg: var(--lgc-palette-neutral-30);
  --label-neutral-bg: #36373A4C;
  --select-hover: var(--text-primary);
  --button-soft-success-color: var(--lgc-palette-success-10);
  --button-soft-accent-color: var(--lgc-palette-accent-10);
  --button-soft-ai-color: var(--lgc-palette-ai-95);
  --button-soft-ai-bg: var(--lgc-palette-ai-20);
  --button-soft-ai-hover: var(--lgc-palette-ai-80);
  --button-soft-ai-hover-bg: var(--lgc-palette-ai-30);
  --button-soft-ai-active: var(--lgc-palette-ai-99);
  --button-soft-ai-active-bg: var(--lgc-palette-ai-20);
  --button-soft-ai-preloader-active: var(--lgc-palette-ai-40);
  --button-soft-ai-preloader: var(--lgc-palette-ai-99);
  --button-soft-ai-preloader-bg: var(--lgc-palette-ai-20);
  --button-soft-accent-bg: var(--lgc-palette-accent-80);
  --button-soft-accent-hover: var(--lgc-palette-accent-10);
  --select-bg-hover: var(--lgc-palette-neutral-50);
  --label-success-color: var(--lgc-palette-success-40);
  --button-soft-accent-hover-bg: var(--lgc-palette-accent-90);
  --button-soft-accent-active: var(--lgc-palette-accent-10);
  --button-soft-accent-active-bg: var(--lgc-palette-accent-80);
  --button-soft-accent-preloader-active: var(--lgc-palette-accent-10);
  --button-soft-accent-preloader: var(--lgc-palette-accent-99);
  --button-soft-accent-preloader-bg: var(--lgc-palette-accent-80);
  --button-soft-success-bg: var(--lgc-palette-success-80);
  --label-success-bg: var(--highlight-palegreen);
  --button-soft-success-hover: var(--lgc-palette-success-10);
  --select-option-hover-bg: var(--lgc-palette-neutral-40);
  --label-neutral-grey-bg: var(--lgc-palette-neutral-50);
  --button-soft-success-hover-bg: var(--lgc-palette-success-95);
  --select-option-active-bg: #00325B99;
  --button-soft-success-active: var(--lgc-palette-success-10);
  --select-option-active-hover-bg: #00488099;
  --button-soft-success-active-bg: var(--lgc-palette-success-95);
  --button-soft-success-preloader-active: var(--lgc-palette-success-10);
  --button-soft-success-preloader: var(--lgc-palette-success-60);
  --button-soft-success-preloader-bg: var(--lgc-palette-success-90);
  --text-primary: var(--lgc-palette-neutral-99);
  --text-secondary: var(--lgc-palette-neutral-90);
  --text-tertiary: var(--lgc-palette-neutral-80);
  --text-placeholder: var(--lgc-palette-neutral-70);
  --text-icon-primary: var(--lgc-palette-neutral-99);
  --text-icon-secondary: var(--lgc-palette-neutral-90);
  --text-link: var(--lgc-palette-primary-60);
  --text-link-hover: var(--lgc-palette-primary-70);
  --text-success: var(--lgc-palette-success-80);
  --text-danger: var(--lgc-palette-danger-60);
  --loader-active: var(--lgc-palette-primary-60);
  --fields-color: var(--text-secondary);
  --fields-bg: var(--lgc-palette-neutral-20);
  --loader-bg: var(--lgc-palette-neutral-variant-40);
  --fields-active-color: var(--text-primary);
  --fields-icon-color: var(--lgc-palette-neutral-90);
  --fields-border-color: var(--lgc-palette-neutral-90);
  --fields-focus-color: var(--lgc-palette-primary-70);
  --fields-successes-color: var(--lgc-palette-success-70);
  --messages-callout-text: var(--lgc-palette-neutral-30);
  --messages-callout-info-icon: var(--lgc-palette-primary-30);
  --messages-callout-info-bg: var(--lgc-palette-primary-90);
  --messages-callout-success-icon: var(--lgc-palette-success-30);
  --messages-callout-success-bg: var(--highlight-palegreen);
  --messages-callout-warning-icon: var(--lgc-palette-accent-20);
  --messages-callout-warning-bg: var(--lgc-palette-accent-95);
  --messages-callout-danger-icon: var(--lgc-palette-danger-40);
  --messages-callout-danger-bg: var(--lgc-palette-danger-99);
    --messages-section-warning-title: var(--lgc-palette-accent-10);
    --messages-section-warning-color: var(--lgc-palette-neutral-20);
    --messages-section-warning-bg: var(--lgc-palette-neutral-variant-99);
    --messages-section-danger-color: var(--lgc-palette-danger-30);
    --messages-section-danger-bg: var(--lgc-palette-danger-95);
    --messages-section-success-color: var(--lgc-palette-success-30);
    --messages-section-success-bg: var(--lgc-palette-success-99);
    --fields-error-color: var(--lgc-palette-danger-70);
    --messages-section-info-color: var(--lgc-palette-primary-30);
    --messages-section-info-bg: var(--lgc-palette-primary-90);
    --messages-toast-notification-color: var(--lgc-palette-neutral-100);
    --messages-toast-notification-bg: var(--lgc-palette-primary-50);
    --messages-toast-notification-btn: var(--lgc-palette-primary-100);
    --messages-toast-notification-btn-hover: var(--lgc-palette-primary-100);
    --messages-toast-info-color: var(--text-primary);
    --messages-toast-default-color: var(--lgc-palette-neutral-99);
    --messages-toast-info-bg: var(--elevations-surface-raised);
    --messages-toast-default-bg: var(--lgc-palette-neutral-variant-30);
    --messages-toast-info-btn: var(--button-icon-btn-color);
    --messages-toast-default-btn: var(--lgc-palette-neutral-95);
    --messages-toast-danger-color: var(--lgc-palette-danger-100);
    --messages-inline-dialogs-color: var(--text-primary);
    --messages-inline-dialogs-bg: var(--elevations-surface-raised);
    --messages-toast-danger-bg: var(--lgc-palette-danger-40);
    --messages-toast-danger-btn: var(--lgc-palette-danger-100);
    --messages-toast-danger-btn-hover: var(--lgc-palette-danger-100);
    --messages-toast-warning-color: var(--lgc-palette-neutral-20);
    --messages-toast-danger-text-btn: var(--lgc-palette-danger-40);
    --messages-inline-dialogs-icon-color: var(--text-primary);
    --messages-toast-warning-bg: var(--lgc-palette-accent-30);
    --messages-toast-warning-btn: var(--lgc-palette-neutral-30);
    --messages-toast-warning-btn-hover: var(--lgc-palette-neutral-20);
    --messages-toast-success-color: var(--lgc-palette-success-100);
    --messages-toast-success-bg: var(--lgc-palette-success-50);
    --messages-toast-accent-color: var(--lgc-palette-neutral-30);
    --messages-toast-success-btn: var(--lgc-palette-success-100);
    --messages-toast-success-btn-hover: var(--lgc-palette-success-100);
    --messages-toast-accent-bg: var(--lgc-palette-accent-60);
    --messages-toast-accent-btn: var(--lgc-palette-neutral-30);
    --messages-toast-accent-btn-hover: var(--lgc-palette-neutral-10);
    --messages-toast-accent-btn-hover-bg: var(--lgc-palette-neutral-variant-99);
    --messages-toast-accent-border: var(--lgc-palette-accent-60);
    --messages-inline-dialogs-link-color: var(--lgc-palette-primary-60);
    --messages-confirm-modals-bg: var(--elevations-surface-raised);
    --messages-confirm-modals-primary: var(--lgc-palette-primary-60);
    --messages-confirm-modals-neutral: var(--text-primary);
    --messages-confirm-modals-danger: var(--text-danger);
    --messages-confirm-modals-success: var(--text-success);
    --messages-confirm-modals-accent: var(--lgc-palette-accent-80);
    --messages-confirm-modals-txt: var(--text-primary);
    --divider-highlight: var(--lgc-palette-primary-30);
    --divider-neutral: var(--lgc-palette-neutral-40);
    --highlight-palegreen: #E2EFDA;
    --elevations-surface-overlay: var(--lgc-palette-neutral-40);
    --schedule-cell-bg: var(--lgc-palette-neutral-20);
    --schedule-cell-default: var(--button-icon-btn-light);
    --schedule-cell-completed: var(--lgc-palette-success-70);
    --schedule-cell-completed-disable: #52AF6B7F;
    --schedule-cell-completed-late: var(--lgc-palette-accent-60);
    --schedule-cell-danger: var(--lgc-palette-danger-60);
    --schedule-cell-danger-bg: var(--lgc-palette-danger-90);
    --schedule-cell-danger-disable: #F451517F;
    --schedule-cell-danger-bg-disable: #FFA1A1CC;
    --schedule-cell-scheduled: var(--lgc-palette-neutral-variant-95);
    --schedule-cell-scheduled-hover: var(--lgc-palette-neutral-90);
    --schedule-cell-danger-light: var(--lgc-palette-danger-90);
    --schedule-cell-danger-light-hover: var(--lgc-palette-danger-60);
    --schedule-cell-primary-light: var(--lgc-palette-primary-80);
    --schedule-cell-primary-light-hover: var(--lgc-palette-primary-60);
    --elevations-surface-raised: var(--lgc-palette-neutral-30);
    --elevations-surface-default: var(--lgc-palette-neutral-20);
    --elevations-surface-sunken: var(--lgc-palette-neutral-10);
    --loader-color: var(--lgc-palette-neutral-variant-40);
    --messages-toast-default-btn-hover: var(--lgc-palette-neutral-99);
    --button-inline-danger-color: var(--lgc-palette-danger-60);
    --button-inline-danger-hover: var(--lgc-palette-danger-70);
    --button-inline-danger-active: var(--lgc-palette-danger-60);
    --messages-toast-danger-text-btn-bg: var(--lgc-palette-danger-100);
    --fields-disabled: var(--lgc-palette-neutral-40);
    --button-inline-accent-color: var(--lgc-palette-accent-60);
    --button-inline-accent-hover: var(--lgc-palette-accent-40);
    --button-inline-accent-active: var(--lgc-palette-accent-30);
    --messages-section-ai-title: var(--lgc-palette-ai-20);
    --messages-section-ai-color: var(--lgc-palette-ai-20);
    --messages-section-ai-bg: var(--lgc-palette-ai-95);
    --messages-section-ai-icon-hover: var(--lgc-palette-ai-40);
    --messages-toast-ai-color: var(--lgc-palette-ai-100);
    --messages-toast-ai-bg: var(--lgc-palette-ai-30);
    --messages-toast-ai-btn: var(--lgc-palette-ai-100);
    --messages-toast-ai-btn-hover: var(--lgc-palette-ai-100);
    --sidebar-color: var(--text-secondary);
    --sidebar-bg: var(--elevations-surface-default);
    --sidebar-hover-bg: var(--lgc-palette-neutral-40);
    --sidebar-hover-color: var(--text-primary);
    --sidebar-border: var(--lgc-palette-neutral-40);
    --sidebar-disabled: var(--text-placeholder);
    --sidebar-scroll: var(--lgc-palette-neutral-60);
    --sidebar-bg2: var(--lgc-palette-neutral-30);
    --sidebar-tree-color: var(--text-secondary);
    --sidebar-tree-bg: var(--elevations-surface-sunken);
    --sidebar-tree-hover-color: var(--text-primary);
    --sidebar-tree-hover-bg: var(--lgc-palette-neutral-50);
    --sidebar-tree-scroll: #64676F7F;
}
/*text style*/
:root {
    --body-large-line-height: 1.5rem;
    --label-large-line-height: 1.25rem;
}

.display-large-bold {
    font-size: 3.5625rem;
    font-weight: 700;
    letter-spacing: -0.015625rem;
    line-height: 4rem;
}

.display-large {
    font-size: 3.5625rem;
    font-weight: 400;
    letter-spacing: -0.015625rem;
    line-height: 4rem;
}

.display-medium {
    font-size: 2.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 3.25rem;
}

.display-small {
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.75rem;
}

.display-small-bold {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 2.75rem;
}

.headline-large-bold {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 2.5rem;
}

.headline-large {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.5rem;
}

.headline-medium-bold {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 2.25rem;
}

.headline-medium {
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.25rem;
}

.headline-small-bold {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 2rem;
}

.headline-small {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2rem;
}

.title-large-bold {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.75rem;
}

.title-large {
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.75rem;
}

.title-medium-bold {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.00937500037252903rem;
    line-height: 1.5rem;
}

.title-medium {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.00937500037252903rem;
    line-height: 1.5rem;
}

.title-small {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.0062500000931322575rem;
    line-height: 1.25rem;
}

.label-large-bold {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.0062500000931322575rem;
    line-height: 1.25rem;
}

.label-large {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.0062500000931322575rem;
    line-height: var(--label-large-line-height);
}

.label-medium {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    line-height: 1rem;
}

.label-small {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    line-height: 1rem;
}

.label-small-bold {
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.03125rem;
}

.body-large {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03125rem;
    line-height: var(--body-large-line-height);
}

.body-large-bold {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03125rem;
    line-height: 1.5rem;
}

.body-large-underline {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03125rem;
    line-height: 1.5rem;
}

.body-medium {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.015625rem;
    line-height: 1.25rem;
}

.body-medium-bold {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: 0.015625rem;
}

.body-small {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1rem;
}
:root {
    --left-ident: var(--lgc-space-300); /* const LEFT_IDENT in JS */
    --header-height: 68px;
    --mobile-editor-header-height: 68px;
    --right-menu-min: 56px;
    --right-menu-content: 364px;
    --right-menu-header: 44px;
    --in-editor-inline-padding: 4px;
    --editor-width: 700px;
    --workspace-row-height: 48px;
    --joy-fontFamily-body: 'Roboto Flex';
    --tablet-breakpoint: 1250px;
    --mobile-breakpoint: 1250px;
    --column-page-width: 480px;


    --box-shadow-small: 0px 0px 6px 0px rgba(0, 0, 0, 0.02), 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    --box-shadow-medium: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    --box-shadow-large: 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.02);

    --highlight-bg: var(--lgc-palette-accent-80);
}

body, html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-primary);
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    overflow: auto;
    padding: 0;
    background-color: var(--lgc-palette-neutral-20);
    transition: color .3s cubic-bezier(.3, 1, .3, 1), background-color .3s cubic-bezier(.3, 1, .3, 1), border-color .3s cubic-bezier(.3, 1, .3, 1), box-shadow .3s cubic-bezier(.3, 1, .3, 1)
}

#root {
    background: var(--elevations-surface-default);
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    word-break: break-word;
    word-wrap: break-word;
    /*noinspection CssInvalidPropertyValue*/
    scrollbar-width: inherit;
    padding: 0;
    margin: 0;
}

a {
    color: var(--text-link);
    text-decoration: none;
}

@media (hover: hover) {
    a:hover {
        color: var(--text-link-hover);
    }
}

a:active {
    color: var(--text-link-hover);
}

html.no-mobile a:hover {
    cursor: pointer
}

em, strong {
    font-style: normal;
    font-weight: 600
}

html.no-mobile a.nav .text:hover, html.no-mobile h1 a:hover {
    text-decoration: underline
}

p {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 400;
    margin: 0 0 8px
}

code, p, pre {
    font-size: 1rem;
    line-height: 1.6
}

code, pre {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, monospace
}

::placeholder {
    color: var(--text-placeholder);
    font-weight: 400;
}


:focus {
    outline-color: transparent !important;
    outline-style: none !important
}

img::selection,
img::-moz-selection {
    background-color: var(--text-selection-background-color)
}

textarea {
    -webkit-appearance: none;
    font-family: 'Roboto Flex', monospace;
}

input {
    font-family: 'Roboto Flex', monospace;
}

textarea::-webkit-input-placeholder {
}

textarea:-moz-placeholder, textarea::-moz-placeholder {
}

textarea:-ms-input-placeholder {
}

iframe {
    border: none
}

.d-none {
    display: none;
}

@media (min-width: 1040px) {
    .d-lg-inline {
        display: inline;
    }
}

html:not(.macos):not(.mobile) {
    scrollbar-color: var(--contextmenu-item-scroll) !important;
    scrollbar-width: auto !important;


}

html:not(.macos):not(.mobile) ::-webkit-scrollbar {
    background-color: transparent !important;
    scrollbar-color: var(--contextmenu-item-scroll) !important;
    width: 8px !important;
    height: 8px !important;
}

html:not(.macos):not(.mobile) ::-webkit-scrollbar-thumb {
    background-color: var(--contextmenu-item-scroll) !important;
    scrollbar-color: var(--contextmenu-item-scroll) !important;
    border-radius: 10px;
    border: 2px solid transparent !important; /* Adjusts the size of the scrollbar-thumb */
    background-clip: content-box !important;
}

html:not(.macos):not(.mobile) ::-webkit-scrollbar-track {
    background-color: var(--contextmenu-item-bg) !important;
    scrollbar-color: var(--contextmenu-item-scroll) !important;
    border-radius: 10px;
}

html.no-mobile html:not(.macos):not(.mobile) ::-webkit-scrollbar:hover {
    background-color: rgba(0, 2, 4, .05)
}


html.mobile html:not(.macos):not(.mobile) ::-webkit-scrollbar-thumb:active, html.no-mobile html:not(.macos):not(.mobile) ::-webkit-scrollbar-thumb:active {
    background: rgba(0, 2, 4, .3);
    -webkit-border-radius: 4px
}


/* react-toggle */
.react-toggle-wrapper {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.react-toggle-wrapper .react-toggle-label {
    display: block;
    flex-grow: 1;
    font-size: .875rem;
    overflow: hidden;
    padding: 0 4px 0 0;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    user-select: none;
    white-space: pre
}

.react-toggle {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    background-color: initial;
    border: 0;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    position: relative;
    -webkit-user-select: none;
    user-select: none
}

.react-toggle-screenreader-only {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.react-toggle--disabled {
    cursor: default
}

.react-toggle-track {
    background-color: var(--lgc-palette-neutral-50);
    border-radius: 30px;
    height: 28px;
    padding: 0;
    position: relative;
    transition: all .3s cubic-bezier(.3, 1, .3, 1);
    width: 52px
}

html.no-mobile .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: var(--lgc-palette-neutral-80)
}

.react-toggle--checked .react-toggle-track {
    background-color: #7bce47
}

html.no-mobile .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: #6dc735
}

.react-toggle-track-check {
    align-items: center;
    bottom: 0;
    display: flex;
    flex-direction: row;
    height: 10px;
    justify-content: center;
    left: 8px;
    line-height: 0;
    margin-bottom: auto;
    margin-top: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .3s cubic-bezier(.3, 1, .3, 1);
    width: 14px
}

.react-toggle-track-check > i {
    color: #fff
}

.react-toggle--checked .react-toggle-track-check, .react-toggle-track-x {
    opacity: 1;
    transition: opacity .3s cubic-bezier(.3, 1, .3, 1)
}

.react-toggle-track-x {
    align-items: center;
    bottom: 0;
    display: flex;
    flex-direction: row;
    height: 10px;
    justify-content: center;
    line-height: 0;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    right: 10px;
    top: 0;
    width: 10px
}

.react-toggle-track-x > i {
    color: #fff
}

.react-toggle--checked .react-toggle-track-x {
    opacity: 0
}

.react-toggle-thumb {
    background-color: #fff;
    border-radius: 50%;
    height: 24px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: all .3s cubic-bezier(.3, 1, .3, 1);
    width: 24px
}

.react-toggle--checked .react-toggle-thumb {
    left: 26px
}

.other {
    display: none;
    height: 0;
    overflow: hidden;
    position: absolute;
}

.visibility_hidden {
    visibility: hidden;
}

@media print {
    @page {
        margin: 15mm 10mm 15mm 20mm;
    }

    @page :first {
        margin: 12.5mm 10mm 15mm 20mm;
    }

    html, body {
        height: auto;
        position: static;
        overflow: visible !important;
        background-color: var(--elevations-surface-default);
    }

    .layout {
        overflow: visible !important;
    }

    .pm-image-wrapper::before,
    .layout__panel,
    .TreeCollapseHandler,
    .layout__divider,
    .hm,
    .MainSidebar,
    .BreadcrumbsWithAddition,
    .drag-handle,
    .RightMenu,
    .RightMenu__content-animation,
    .pointer,
    .ctx-menu-position,
    .pm-plus-icon,
    .acknowledgmentRow_wrapper,
    .notistack-SnackbarContainer,
    .title-placeholder  {
        display: none !important;
        caret-color: transparent;
    }

    .layout__screen {
        max-width: 100% !important;
    }

    .NodeTitle {
        -webkit-margin-after: var(--lgc-space-200) !important;
                margin-block-end: var(--lgc-space-200) !important;
        caret-color: transparent;
    }

    .NodeTitle:has(.title-placeholder) {
        margin-block: 0 !important;
    }

   .workspace, .ER-wrapper {
        height: auto !important;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-inside: avoid;
    }
}.SnackbarRoot {
    z-index: 5000 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0;
    transform: none !important;
    bottom: 0 !important;
    max-width: 100% !important;
}

@media screen and (min-width: 1250px) {
    .SnackbarRoot {
        width: auto;
        margin-inline: auto;
        bottom: 14px !important;
    }
}

.Snackbar {
    width: 100% !important;
    min-width: unset !important;
}

@media screen and (min-width: 1250px) {
    .Snackbar {
        width: auto !important;
        min-width: unset !important;
    }
}

.notistack-CollapseWrapper {
    padding: 0 !important;
}

.go1671063245 + .go1671063245 {
    -webkit-margin-after: var(--lgc-space-150) ;
            margin-block-end: var(--lgc-space-150) ;
}.material-symbols-rounded {
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
    -webkit-user-select: none;
            user-select: none;
}

.material-symbols-rounded::selection {
    background-color: transparent;
}

.icon {
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: center;
    box-sizing: initial;

    width: auto;
    -webkit-user-select: none;
            user-select: none;
}

.icon--filled {
    font-variation-settings:
            'FILL' 1
}

.icon--clickable {
    -webkit-user-select: auto;
            user-select: auto;
    cursor: pointer;
}

.icon--inherit-color {
    color: inherit;
}

.icon--14 {
    font-size: 14px;
    width: 14px;
    height: 14px;
    font-variation-settings: 'opsz' 20;
}

.icon--16 {
    font-size: 16px;
    width: 16px;
    height: 16px;
    font-variation-settings: 'opsz' 20;
}

.icon--20 {
    font-size: 20px;
    width: 20px;
    height: 20px;
    font-variation-settings: 'opsz' 20;
}

.icon--24 {
    font-size: 24px;
    width: 24px;
    height: 24px;
    font-variation-settings: 'opsz' 24;
}

.icon--32 {
    font-size: 32px;
    width: 32px;
    height: 32px;
    font-variation-settings: 'opsz' 40;
}

.icon--48 {
    font-size: 48px;
    width: 48px;
    height: 48px;
    font-variation-settings: 'opsz' 48;
}

.icon--64 {
    font-size: 64px;
    width: 64px;
    height: 64px;
    font-variation-settings: 'opsz' 48;
}

/*
 * Google's hosted Material Symbols stylesheet (see index.html / Storybook
 * preview.tsx font @import) ships its own `.material-symbols-rounded { font-size:
 * 24px }` boilerplate rule. It has the same specificity as `.icon--N` above, so
 * whichever stylesheet is inserted into the DOM last wins the tie -- not
 * necessarily this one. In Storybook the font import is injected later (via an
 * Emotion `<Global>` in the story decorator), so it won and silently overrode
 * icon sizing (e.g. a 14px icon rendering at 24px and overflowing its box).
 * Re-assert font-size here at higher specificity, scoped to `.material-symbols-
 * rounded` only, so it doesn't affect the hand-authored SVG icons that share
 * these same `.icon--N` classes via IconBox (see index.tsx) but never carry that
 * class.
 */

.material-symbols-rounded.icon--14 { font-size: 14px; }

.material-symbols-rounded.icon--16 { font-size: 16px; }

.material-symbols-rounded.icon--20 { font-size: 20px; }

.material-symbols-rounded.icon--24 { font-size: 24px; }

.material-symbols-rounded.icon--32 { font-size: 32px; }

.material-symbols-rounded.icon--48 { font-size: 48px; }

.material-symbols-rounded.icon--64 { font-size: 64px; }

.icon--primary {
    color: var(--messages-confirm-modals-primary)
}

.icon--accent {
    color: var(--messages-confirm-modals-accent)
}

.icon--success {
    color: var(--messages-confirm-modals-success)
}

.icon--neutral {
    color: var(--messages-confirm-modals-neutral)
}

.icon--danger {
    color: var(--messages-confirm-modals-danger)
}

.icon--fullHeight {
    height: 100%;
    box-sizing: border-box;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.LoadingIcon {
    margin-inline: auto;
    animation: rotate 0.8s linear infinite;
}

.LoadingIcon--primary .LoadingIcon__track {
    color: var(--lgc-palette-primary-95);
}

.LoadingIcon--primary .LoadingIcon__load {
    color: var(--lgc-palette-primary-70);
}

.LoadingIcon--danger .LoadingIcon__track {
    color: var(--lgc-palette-danger-99);
}

.LoadingIcon--danger .LoadingIcon__load {
    color: var(--lgc-palette-danger-70);
}

.LoadingIcon--neutral .LoadingIcon__track {
    color: var(--lgc-palette-neutral-99);
}

.LoadingIcon--neutral .LoadingIcon__load {
    color: var(--lgc-palette-neutral-70);
}

.LoadingIcon--success .LoadingIcon__track {
    color: var(--lgc-palette-success-99);
}

.LoadingIcon--success .LoadingIcon__load {
    color: var(--lgc-palette-success-70);
}

.LoadingIcon--accent .LoadingIcon__track {
    color: var(--lgc-palette-accent-99);
}

.LoadingIcon--accent .LoadingIcon__load {
    color: var(--lgc-palette-accent-70);
}

.LoadingIcon--ai .LoadingIcon__track {
    color: var(--lgc-palette-ai-99);
}

.LoadingIcon--ai .LoadingIcon__load {
    color: var(--lgc-palette-ai-70);
}
.btn {
    border-width: 0;
    border-radius: var(--button-btn-radius-md);
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    padding: var(--lgc-space-100) var(--lgc-space-300);
}

.btn--loading {
    position: relative;
}

.btn--loading .btn__text, .btn--loading .btn-icon {
    visibility: hidden;
}

.btn__loading {
    position: absolute;

    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    transform: translate(-50%, -50%);
}

.btn__text {
    text-align: center;
    white-space: nowrap;
    font-family: "Roboto Flex";
}

.btn__icon {
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
}

.btn--sm .btn__icon {
    -webkit-margin-end: var(--lgc-space-050);
            margin-inline-end: var(--lgc-space-050);
}

.btn--sm {
    padding: var(--lgc-space-075) var(--lgc-space-150);
}

.btn--lg {
    padding: var(--lgc-space-150) var(--lgc-space-300);
    min-width: 86px;
}

.btn--withIcon {
    -webkit-padding-start: var(--lgc-space-200);
            padding-inline-start: var(--lgc-space-200);
}

.btn--sm.btn--withIcon {
    -webkit-padding-start: var(--lgc-space-100);
            padding-inline-start: var(--lgc-space-100);
}

.btn--lg.btn--withIcon {
    -webkit-padding-start: var(--lgc-space-200);
            padding-inline-start: var(--lgc-space-200);
}

.btn--iconOnly {
    -webkit-padding-end: var(--lgc-space-200);
            padding-inline-end: var(--lgc-space-200);
}

.btn--sm.btn--withIcon {
    -webkit-padding-end: var(--lgc-space-150);
            padding-inline-end: var(--lgc-space-150);
}

.btn--iconOnly .btn__icon {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
}

.btn--fullwidth {
    width: 100%;
}

.btn--clickable {
    cursor: pointer;
}

.btn--disabled {
    background-color: var(--button-disabled-bg);
    color: var(--button-disabled-color);
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    cursor: not-allowed;
}

.btn--solid.btn--primary {
    background-color: var(--button-solid-primary-bg);
    color: var(--button-solid-primary-color);
}

@media (hover: hover) {
    .btn--solid.btn--primary:hover {
        background-color: var(--button-solid-primary-hover-bg);
    }
}

.btn--solid.btn--primary.btn--down, .btn--solid.btn--primary:active, .btn--solid.btn--primary.btn--loading {
    background-color: var(--button-solid-primary-active-bg);
}

.btn--solid.btn--neutral {
    color: var(--button-solid-neutral-color);
    background-color: var(--button-solid-neutral-bg);
}

@media (hover: hover) {
    .btn--solid.btn--neutral:hover {
        background-color: var(--button-solid-neutral-hover-bg);
    }
}

.btn--solid.btn--neutral.btn--down, .btn--solid.btn--neutral:active, .btn--solid.btn--neutral.btn--loading {
    background-color: var(--button-solid-neutral-active-bg);
}

.btn--solid.btn--danger {
    color: var(--button-solid-danger-color);
    background-color: var(--button-solid-danger-bg);
}

@media (hover: hover) {
    .btn--solid.btn--danger:hover {
        background-color: var(--button-solid-danger-hover-bg);
    }
}

.btn--solid.btn--danger.btn--down, .btn--solid.btn--danger:active, .btn--solid.btn--danger.btn--loading {
    background-color: var(--button-solid-danger-active-bg);
}

.btn--solid.btn--success {
    color: var(--button-solid-success-color);
    background-color: var(--button-solid-success-bg);
}

@media (hover: hover) {
    .btn--solid.btn--success:hover {
        background-color: var(--button-solid-success-hover-bg);
    }
}

.btn--solid.btn--success.btn--down, .btn--solid.btn--success:active, .btn--solid.btn--success.btn--loading {
    background-color: var(--button-solid-success-active-bg);
}

.btn--solid.btn--accent {
    color: var(--button-solid-accent-color);
    background-color: var(--button-solid-accent-bg);
}

@media (hover: hover) {
    .btn--solid.btn--accent:hover {
        background-color: var(--button-solid-accent-hover-bg);
    }
}

.btn--solid.btn--accent.btn--down, .btn--solid.btn--accent:active, .btn--solid.btn--accent.btn--loading {
    background-color: var(--button-solid-accent-active-bg);
}

.btn--solid.btn--ai {
    color: var(--button-solid-ai-color);
    background-color: var(--button-solid-ai-bg);
}

@media (hover: hover) {
    .btn--solid.btn--ai:hover {
        background-color: var(--button-solid-ai-hover-bg);
    }
}

.btn--solid.btn--ai.btn--down, .btn--solid.btn--ai:active, .btn--solid.btn--ai.btn--loading {
    background-color: var(--button-solid-ai-active-bg);
}

.btn--white {
    padding: var(--lgc-space-100, 8px) var(--lgc-space-150, 12px);
}

.btn--solid.btn--white {
    color: var(--button-white-color);
    background-color: var(--button-white-bg);
}

@media (hover: hover) {
    .btn--solid.btn--white:hover {
        color: var(--button-white-hover);
        background-color: var(--button-white-bg-hover);
    }
}

.btn--solid.btn--white.btn--down,
.btn--solid.btn--white:active,
.btn--solid.btn--white.btn--loading {
    color: var(--button-white-hover);
    background-color: var(--button-white-bg-hover);
}


.btn--plain {
    background-color: transparent;
    border: none;
    outline: none;
    text-transform: none;
}

.btn--plain.btn--primary {
    color: var(--button-plain-primary-color);
}

@media (hover: hover) {
    .btn--plain.btn--primary:hover {
        color: var(--button-plain-primary-hover);
        background-color: var(--button-plain-primary-hover-bg);
    }
}

.btn--plain.btn--primary.btn--down, .btn--plain.btn--primary:active, .btn--plain.btn--primary.btn--loading {
    color: var(--button-plain-primary-active);
    background-color: var(--button-plain-primary-hover-bg);
}

.btn--plain.btn--neutral {
    color: var(--button-plain-neutral-color);
}

@media (hover: hover) {
    .btn--plain.btn--neutral:hover {
        color: var(--button-plain-neutral-hover);
        background-color: var(--button-plain-neutral-hover-bg);
    }
}

.btn--plain.btn--neutral.btn--down, .btn--plain.btn--neutral:active, .btn--plain.btn--neutral.btn--loading {
    color: var(--button-plain-neutral-active);
    background-color: var(--button-plain-neutral-hover-bg);
}

.btn--plain.btn--danger {
    color: var(--button-plain-danger-color);
}

@media (hover: hover) {
    .btn--plain.btn--danger:hover {
        color: var(--button-plain-danger-hover);
        background-color: var(--button-plain-danger-hover-bg);
    }
}

.btn--plain.btn--danger.btn--down, .btn--plain.btn--danger:active, .btn--plain.btn--danger.btn--loading {
    color: var(--button-plain-danger-active);
    background-color: var(--button-plain-danger-active-bg);
}

.btn--plain.btn--success {
    color: var(--button-plain-success-color);
}

@media (hover: hover) {
    .btn--plain.btn--success:hover {
        color: var(--button-plain-success-hover);
        background-color: var(--button-plain-success-hover-bg);
    }
}

.btn--plain.btn--success.btn--down, .btn--plain.btn--success:active, .btn--plain.btn--success.btn--loading {
    color: var(--button-plain-success-active);
    background-color: var(--button-plain-success-hover-bg);
}

.btn--plain.btn--accent {
    color: var(--button-plain-accent-color);
}

@media (hover: hover) {
    .btn--plain.btn--accent:hover {
        color: var(--button-plain-accent-hover);
        background-color: var(--button-plain-accent-hover-bg);
    }
}

.btn--plain.btn--accent.btn--down, .btn--plain.btn--accent:active, .btn--plain.btn--accent.btn--loading {
    color: var(--button-plain-accent-active);
    background-color: var(--button-plain-accent-hover-bg);
}

.btn--plain.btn--ai {
    color: var(--button-plain-ai-color);
}

@media (hover: hover) {
    .btn--plain.btn--ai:hover {
        color: var(--button-plain-ai-hover);
        background-color: var(--button-plain-ai-hover-bg);
    }
}

.btn--plain.btn--ai.btn--down, .btn--plain.btn--ai:active, .btn--plain.btn--ai.btn--loading {
    color: var(--button-plain-ai-active);
    background-color: var(--button-plain-ai-hover-bg);
}


.btn--outlined {
    background: none;
    color: var(--button-outlined-primary-color);
    border: 1px solid var(--button-outlined-primary-color);
    padding-block: calc(var(--lgc-space-100) - 1px);
}

.btn--outlined.btn--lg {
    padding-block: calc(var(--lgc-space-150) - 1px);
}

.btn--outlined.btn--sm {
    padding-block: calc(var(--lgc-space-075) - 1px);
}

@media (hover: hover) {
    .btn--outlined:hover {
        color: var(--button-outlined-primary-hover);
        border-color: var(--button-outlined-primary-hover);
        background-color: var(--button-plain-primary-hover-bg);
    }
}

.btn--outlined.btn--down, .btn--outlined:active, .btn--outlined.btn--loading {
    color: var(--button-outlined-primary-active);
    border-color: var(--button-outlined-primary-active);
}

.btn--outlined.btn--neutral {
    color: var(--button-outlined-neutral-color);
    border-color: var(--button-outlined-neutral-color);
}

@media (hover: hover) {
    .btn--outlined.btn--neutral:hover {
        color: var(--button-outlined-neutral-hover);
        border-color: var(--button-outlined-neutral-hover);
        background-color: var(--button-plain-neutral-hover-bg);
    }
}

.btn--outlined.btn--neutral.btn--down, .btn--outlined.btn--neutral:active, .btn--outlined.btn--neutral.btn--loading {
    color: var(--button-outlined-neutral-active);
    border-color: var(--button-outlined-neutral-active);
}

.btn--outlined.btn--danger {
    color: var(--button-outlined-danger-color);
    border-color: var(--button-outlined-danger-color);
}

@media (hover: hover) {
    .btn--outlined.btn--danger:hover {
        color: var(--button-outlined-danger-hover);
        border-color: var(--button-outlined-danger-hover);
        background-color: var(--button-plain-danger-hover-bg);
    }
}

.btn--outlined.btn--danger.btn--down, .btn--outlined.btn--danger:active, .btn--outlined.btn--danger.btn--loading {
    color: var(--button-outlined-danger-active);
    border-color: var(--button-outlined-danger-active);
}


.btn--outlined.btn--success {
    color: var(--button-outlined-success-color);
    border-color: var(--button-outlined-success-color);
}

@media (hover: hover) {
    .btn--outlined.btn--success:hover {
        color: var(--button-outlined-success-hover);
        border-color: var(--button-outlined-success-hover);
        background-color: var(--button-plain-success-hover-bg);
    }
}

.btn--outlined.btn--success.btn--down, .btn--outlined.btn--success:active, .btn--outlined.btn--success.btn--loading {
    color: var(--button-outlined-success-active);
    border-color: var(--button-outlined-success-active);
}


.btn--outlined.btn--accent {
    color: var(--button-outlined-accent-color);
    border-color: var(--button-outlined-accent-color);
}

@media (hover: hover) {
    .btn--outlined.btn--accent:hover {
        color: var(--button-outlined-accent-hover);
        border-color: var(--button-outlined-accent-hover);
        background-color: var(--button-plain-accent-hover-bg);
    }
}

.btn--outlined.btn--accent.btn--down, .btn--outlined.btn--accent:active, .btn--outlined.btn--accent.btn--loading {
    color: var(--button-outlined-accent-active);
    border-color: var(--button-outlined-accent-active);
}

.btn--outlined.btn--ai {
    color: var(--button-outlined-ai-color);
    border-color: var(--button-outlined-ai-color);
}

@media (hover: hover) {
    .btn--outlined.btn--ai:hover {
        color: var(--button-outlined-ai-hover);
        border-color: var(--button-outlined-ai-hover);
        background-color: var(--button-plain-ai-hover-bg);
    }
}

.btn--outlined.btn--ai.btn--down, .btn--outlined.btn--ai:active, .btn--outlined.btn--ai.btn--loading {
    color: var(--button-outlined-ai-active);
    border-color: var(--button-outlined-ai-active);
}


.btn--soft {
    border: none;
    outline: none;
}

.btn--soft.btn--primary {
    color: var(--button-soft-primary-color);
    background-color: var(--button-soft-primary-bg);
}

@media (hover: hover) {
    .btn--soft.btn--primary:hover {
        color: var(--button-soft-primary-hover);
        background-color: var(--button-soft-primary-hover-bg);
    }
}

.btn--soft.btn--primary.btn--down, .btn--soft.btn--primary:active, .btn--soft.btn--primary.btn--loading {
    color: var(--button-soft-primary-active);
    background-color: var(--button-soft-primary-active);
}

.btn--soft.btn--neutral {
    color: var(--button-soft-neutral-color);
    background-color: var(--button-soft-neutral-bg);
}

@media (hover: hover) {
    .btn--soft.btn--neutral:hover {
        color: var(--button-soft-neutral-hover);
        background-color: var(--button-soft-neutral-hover-bg);
    }
}

.btn--soft.btn--neutral.btn--down, .btn--soft.btn--neutral:active, .btn--soft.btn--neutral.btn--loading {
    color: var(--button-soft-neutral-active);
    background-color: var(--button-soft-neutral-active-bg);
}

.btn--soft.btn--danger {
    color: var(--button-soft-danger-color);
    background-color: var(--button-soft-danger-bg);
}

@media (hover: hover) {
    .btn--soft.btn--danger:hover {
        color: var(--button-soft-danger-hover);
        background-color: var(--button-soft-danger-hover-bg);
    }
}

.btn--soft.btn--danger.btn--down, .btn--soft.btn--danger:active, .btn--soft.btn--danger.btn--loading {
    color: var(--button-soft-danger-active);
    background-color: var(--button-soft-danger-active-bg);
}

.btn--soft.btn--success {
    color: var(--button-soft-success-color);
    background-color: var(--button-soft-success-bg);
}

@media (hover: hover) {
    .btn--soft.btn--success:hover {
        color: var(--button-soft-success-hover);
        background-color: var(--button-soft-success-hover-bg);
    }
}

.btn--soft.btn--success.btn--down, .btn--soft.btn--success:active, .btn--soft.btn--success.btn--loading {
    color: var(--button-soft-success-active);
    background-color: var(--button-soft-success-active);
}

.btn--soft.btn--accent {
    color: var(--button-soft-accent-color);
    background-color: var(--button-soft-accent-bg);
}

@media (hover: hover) {
    .btn--soft.btn--accent:hover {
        color: var(--button-soft-accent-hover);
        background-color: var(--button-soft-accent-hover-bg);
    }
}

.btn--soft.btn--accent.btn--down, .btn--soft.btn--accent:active, .btn--soft.btn--accent.btn--loading {
    color: var(--button-soft-accent-active);
    background-color: var(--button-soft-accent-active);
}

.btn--soft.btn--ai {
    color: var(--button-soft-ai-color);
    background-color: var(--button-soft-ai-bg);
}

@media (hover: hover) {
    .btn--soft.btn--ai:hover {
        color: var(--button-soft-ai-hover);
        background-color: var(--button-soft-ai-hover-bg);
    }
}

.btn--soft.btn--ai.btn--down, .btn--soft.btn--ai:active, .btn--soft.btn--ai.btn--loading {
    color: var(--button-soft-ai-active);
    background-color: var(--button-soft-ai-active-bg);
}

.btn.btn--inline {
    padding: 0;
    background: none;
}

.btn--inline.btn--primary {
    color: var(--button-soft-primary-color);
}

@media (hover: hover) {
    .btn--inline.btn--primary:hover {
        color: var(--button-soft-primary-hover);
    }
}

.btn--inline.btn--primary.btn--down, .btn--inline.btn--primary:active, .btn--inline.btn--primary.btn--loading {
    color: var(--button-soft-primary-active);
}

.btn--inline.btn--neutral {
    color: var(--button-plain-neutral-color);
}

@media (hover: hover) {
    .btn--inline.btn--neutral:hover {
        color: var(--button-plain-neutral-hover);
    }
}

.btn--inline.btn--neutral.btn--down, .btn--inline.btn--neutral:active, .btn--inline.btn--neutral.btn--loading {
    color: var(--button-plain-neutral-active);
}

.btn--inline.btn--danger {
    color: var(--button-inline-danger-color);
}

@media (hover: hover) {
    .btn--inline.btn--danger:hover {
        color: var(--button-inline-danger-hover);
    }
}

.btn--inline.btn--danger.btn--down, .btn--inline.btn--danger:active, .btn--inline.btn--danger.btn--loading {
    color: var(--button-inline-danger-active);
}

.btn--inline.btn--success {
    color: var(--button-outlined-success-color);
}

@media (hover: hover) {
    .btn--inline.btn--success:hover {
        color: var(--button-outlined-success-hover);
    }
}

.btn--inline.btn--success.btn--down, .btn--inline.btn--success:active, .btn--inline.btn--success.btn--loading {
    color: var(--button-outlined-success-active);
}

.btn--inline.btn--accent {
    color: var(--button-inline-accent-color);
}

@media (hover: hover) {
    .btn--inline.btn--accent:hover {
        color: var(--button-inline-accent-hover);
    }
}

.btn--inline.btn--accent.btn--down, .btn--inline.btn--accent:active, .btn--inline.btn--accent.btn--loading {
    color: var(--button-inline-accent-active);
}

.btn--inline.btn--ai {
    color: var(--button-soft-ai-color);
}

@media (hover: hover) {
    .btn--inline.btn--ai:hover {
        color: var(--button-soft-ai-hover);
    }
}

.btn--inline.btn--ai.btn--down, .btn--inline.btn--ai:active, .btn--inline.btn--ai.btn--loading {
    color: var(--button-soft-ai-active);
}.DummyBox {
    display: inline-block;
    width: 100%;
    height: 40px;
    border-radius: var(--radius-xs, 2px);
    background: var(--elevations-surface-overlay);
}

.DummyBox--circle {
    border-radius: 50%;
}.Avatar {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
}

/*
 * MUI Joy's Avatar root class (`.css-*-JoyAvatar-root`) sizes width/height/font-size off a
 * `var(--Avatar-size, 2.5rem)` fallback with the same selector specificity (one class) as the
 * rules below. Whichever stylesheet lands in the DOM last wins the tie, so these must be
 * compounded with `.Avatar` to out-specificity Joy's rule regardless of injection order --
 * same root cause as .ai/memory/icon-size-specificity-vs-google-font-css.md.
 */
.Avatar.Avatar--24 {
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 12px;
}

.Avatar.Avatar--28 {
    width: 28px;
    height: 28px;
    font-size: 12px;
    line-height: 12px;
}

.Avatar.Avatar--32 {
    width: 32px;
    height: 32px;
    font-size: 12px;
    line-height: 12px;
}

.Avatar.Avatar--36 {
    width: 36px;
    height: 36px;
    font-size: 12px;
    line-height: 12px;
}


.Avatar.Avatar--40 {
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 12px;
}

.Avatar.Avatar--42 {
    width: 42px;
    height: 42px;
    font-size: 12px;
    line-height: 12px;
}

.Avatar.Avatar--108 {
    width: 108px;
    height: 108px;
    font-size: 12px;
    line-height: 12px;
}

.Avatar.Avatar--scale {
    width: 100%;
    height: 100%;
}
.pointer {
    position: absolute;
    --p-long-half: 5px;
    --p-short: 4px;
    --p-large-long-half: 12px;
    --p-large-short: 10px;
}

.pointer::before, .pointer::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    z-index: 2100;
    border-color: transparent;
    border-style: solid;
    display: block;
}

/* arrow points to top (menu is at the bottom of the target) */
.pointer[data-direction="top"]::before,
.pointer[data-direction="top"]::after {
    border-width: 0 var(--p-long-half) var(--p-short);
    border-bottom-color: var(--elevations-surface-default);
}

.pointer[data-direction="top"]::after {
    top: 1px;
    border-bottom-color: var(--elevations-surface-default);
}

/* arrow points to bottom (menu is at the top of the target) */
.pointer[data-direction="bottom"]::before,
.pointer[data-direction="bottom"]::after {
    border-width: var(--p-short) var(--p-long-half) 0;
    border-top-color: var(--elevations-surface-default);
}

.pointer[data-direction="bottom"]::after {
    top: -1px;
    border-top-color: var(--elevations-surface-default);
}

/* arrow points to the right (menu is at the left of the target) */
.pointer[data-direction="right"]::before,
.pointer[data-direction="right"]::after {
    border-width: var(--p-long-half) 0 var(--p-long-half) var(--p-short);
    border-left-color: var(--elevations-surface-default);
}

.pointer[data-direction="right"]::after {
    left: -1px;
    border-left-color: var(--elevations-surface-default);
}

/* arrow points to the left (menu is at the right of the target) */
.pointer[data-direction="left"]::before,
.pointer[data-direction="left"]::after {
    border-width: var(--p-long-half) var(--p-short) var(--p-long-half) 0;
    border-right-color: var(--elevations-surface-default);
}

.pointer[data-direction="left"]::after {
    left: 1px;
    border-right-color: var(--elevations-surface-default);
}

/* Raised pointer styles with --elevations-surface-raised */

/* arrow points to top (menu is at the bottom of the target) */
.pointer.pointer--raised[data-direction="top"]::before,
.pointer.pointer--raised[data-direction="top"]::after {
    border-bottom-color: var(--elevations-surface-raised);
}

.pointer.pointer--raised[data-direction="top"]::after {
    border-bottom-color: var(--elevations-surface-raised);
}

/* arrow points to bottom (menu is at the top of the target) */
.pointer.pointer--raised[data-direction="bottom"]::before,
.pointer.pointer--raised[data-direction="bottom"]::after {
    border-top-color: var(--elevations-surface-raised);
}

.pointer.pointer--raised[data-direction="bottom"]::after {
    border-top-color: var(--elevations-surface-raised);
}

/* arrow points to the right (menu is at the left of the target) */
.pointer.pointer--raised[data-direction="right"]::before,
.pointer.pointer--raised[data-direction="right"]::after {
    border-left-color: var(--elevations-surface-raised);
}

.pointer.pointer--raised[data-direction="right"]::after {
    border-left-color: var(--elevations-surface-raised);
}

/* arrow points to the left (menu is at the right of the target) */
.pointer.pointer--raised[data-direction="left"]::before,
.pointer.pointer--raised[data-direction="left"]::after {
    border-right-color: var(--elevations-surface-raised);
}

.pointer.pointer--raised[data-direction="left"]::after {
    border-right-color: var(--elevations-surface-raised);
}


/* arrow points to top (menu is at the bottom of the target) */
.pointer--large[data-direction="top"]::before,
.pointer--large[data-direction="top"]::after {
    border-width: 0 var(--p-large-long-half) var(--p-large-short);
}

.pointer--large[data-direction="top"]::after {
    top: 3px;
}

/* arrow points to bottom (menu is at the top of the target) */
.pointer--large[data-direction="bottom"]::before,
.pointer--large[data-direction="bottom"]::after {
    border-width: var(--p-large-short) var(--p-large-long-half) 0;
}

.pointer--large[data-direction="bottom"]::after {
    top: -3px;
}

/* arrow points to the right (menu is at the left of the target) */
.pointer--large[data-direction="right"]::before,
.pointer--large[data-direction="right"]::after {
    border-width: var(--p-large-long-half) 0 var(--p-large-long-half) var(--p-large-short);
}

.pointer--large[data-direction="right"]::after {
    left: -3px;
}

/* arrow points to the left (menu is at the right of the target) */
.pointer--large[data-direction="left"]::before,
.pointer--large[data-direction="left"]::after {
    border-width: var(--p-large-long-half) var(--p-large-short) var(--p-large-long-half) 0;
}

.pointer--large[data-direction="left"]::after {
    left: 3px;
}.Tooltip {
    align-content: center;
    position: absolute;
    background-color: var(--elevations-surface-raised);
    color: var(--text-primary);
    padding: var(--lgc-space-075, 6px);
    border-radius: 4px;
    z-index:4750;
    box-shadow: var(--box-shadow-small);
    max-width: 240px;
}

.Tooltip-Title {
    display: flex;
    gap: var(--lgc-space-075);
}

.Tooltip-HotKeys {
    color: var(--text-secondary);
}

.rootToolTip {
    top: 0;
    left: 0;
}
.ProfileIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hm {
    position: relative;
    text-align: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    left: 0;
    min-height: var(--header-height);
    height: var(--header-height);
    max-height: var(--header-height);
    padding: 0;
    -webkit-user-select: none;
            user-select: none;
    width: 100%;
    z-index: 1000;
    background: var(--elevations-surface-default);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.01), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

.hm-WithoutWorkspace {
    justify-content: space-between;
    background: var(--elevations-surface-sunken, #F4F5F8);
    box-shadow: none;
}

@media screen and (min-width: 1250px) {
    .hm-WithoutWorkspace {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
}

.hm_left-part {
    height: var(--header-height);
    background-color: var(--elevations-surface-default);
    color: var(--lgc-palette-neutral-100);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    overflow: hidden;
    flex-shrink: 0;
    transition: flex-basis 0.3s;
}

.WithoutWorkspace-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    flex-grow: 1;
    background: var(--elevations-surface-sunken, #F4F5F8);
}

.WithoutWorkspace-layout .hm_left-part {
    background: var(--elevations-surface-sunken, #F4F5F8);
}


.hm_hamburger-box {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    margin: 22px var(--lgc-space-050, 4px) 22px var(--lgc-space-200, 16px);
    color: var(--text-icon-secondary);
}

.hm_hamburger-box:hover {
    color: var(--button-icon-btn-hover);
}

.hm-logo_main {
    padding: var(--lgc-space-075, 6px) var(--lgc-space-250, 20px);
    color: var(--text-primary);
}

.hm--collapsed .hm-logo {
    display: none;
}

.hm_button {
    cursor: pointer;
    -webkit-margin-end: var(--lgc-space-150);
            margin-inline-end: var(--lgc-space-150);
}

.hm_sb {
    margin-left: var(--left-ident);
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100);
}

.hm-title {
    color: var(--text-secondary);
}
.ActiveUserStatusDot {
    --ActiveUserStatusDot-color: var(--lgc-palette-success-80);
    --ActiveUserStatusDot-ring-color: var(--elevations-surface-default, #14171F);
    --ActiveUserStatusDot-ring-size: var(--lgc-space-025, 2px);
    --ActiveUserStatusDot-size: var(--lgc-space-075, 6px);

    background-color: var(--ActiveUserStatusDot-color);
    border-radius: 50%;
    box-shadow: 0 0 0 var(--ActiveUserStatusDot-ring-size) var(--ActiveUserStatusDot-ring-color);
    display: inline-block;
    flex: 0 0 auto;
    height: var(--ActiveUserStatusDot-size);
    width: var(--ActiveUserStatusDot-size);
}

.ActiveUserStatusDot--medium {
    --ActiveUserStatusDot-size: var(--lgc-space-100, 8px);
}

.ActiveUserStatusDot--no-ring {
    --ActiveUserStatusDot-ring-size: 0;
}
.Select {
  display: inline-flex;
  cursor: pointer;
  justify-content: space-between;
  padding: 0;
  background-color: var(--select-bg, #FFF);
  border: none;
  align-items: center;
  border-radius: var(--radius-sm);
  transform: translate(0, 0);
  transition: transform 0.20s ease, left 0.2s ease, top 0.2s ease;
  box-sizing: border-box;
}

.Select--transparent {
  background-color: transparent;
}

.Select--bg-sunken,
.Select--bg-sunken.Select-withBorder,
.Select--bg-sunken.Select-withBorder.SelectInput--unfocused,
.Select--bg-sunken.Select--active,
/* Same specificity (two classes) as `.Select--active:not(.Select-withBorder)` below,
   which would otherwise win on source order alone and flash the hover background
   on a single-select sunken field when it opens. The extra `.Select` here (always
   present alongside Select--bg-sunken) breaks the tie without touching that rule. */
.Select.Select--bg-sunken.Select--active,
.Select--bg-sunken.Select--multi.Select--active {
  background-color: var(--elevations-surface-sunken, #F4F5F8);
}

.Select--bg-sunken .Select__label {
  background: var(--elevations-surface-sunken, #F4F5F8);
}

.Select--bg-sunken .MultiSelect__value {
  background-color: var(--select-bg-hover, #E6E9F1);
}

.Select--2 {
  background-color: var(--select2-bg);
}

.Select__label {
  color: var(--text-placeholder);
  z-index: 1;
  -webkit-user-select: none;
          user-select: none;
  background: var(--fields-bg);
  position: absolute;
  top: 11px;
  transition: font-size 0.2s ease, transform 200ms ease, left 200ms ease, top 200ms ease;
}

.Select__label.Select__label--isRaised {
  color: var(--text-secondary);
  padding: 0 var(--lgc-space-050);
}

.Select__label--isRaised {
  position: absolute;
  left: 11px;
  top: -11px;
  transition: font-size 0.2s ease, transform 200ms ease, left 200ms ease, top 200ms ease;
}

.Select__label.Select__label--isRaised.Select__label--isFocused {
  color: var(--fields-focus-color);
  -webkit-margin-before: -1px;
          margin-block-start: -1px;
}

.Select__box {
  max-width: 100%;
  padding: var(--lgc-space-100, 8px) var(--lgc-space-100, 8px) var(--lgc-space-100, 8px) calc(var(--lgc-space-150, 12px));
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  color: var(--select-color, #50535B);
}

.Select--box__withIcon {
  max-width: 100%;
  padding: var(--lgc-space-100, 8px);
}

.SelectInput--focused .Select--box__withIcon {
  padding: calc(var(--lgc-space-100, 8px) - 2px);
}

.selectSize--extraLarge .Select__box {
  padding: var(--lgc-space-250, 20px);
}

.Select__box-boxIcon {
  -webkit-margin-end: var(--lgc-space-100);
          margin-inline-end: var(--lgc-space-100);
}

.Select__box--Text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.Select__box-icon {
  -webkit-margin-start: var(--lgc-space-050);
          margin-inline-start: var(--lgc-space-050);
}

.Select__box-input {
  flex-grow: 1;
  border: none;
  color: var(--text-primary);
  background-color: inherit;
  caret-color: var(--lgc-palette-primary-60, #3D94EC);
  -webkit-margin-end: var(--lgc-space-100);
          margin-inline-end: var(--lgc-space-100);
}

.selectSize--small {
    height: 36px;
}

.selectSize--medium {
  height: 40px;
}

.selectSize--large {
  min-height: 48px;
}


.selectSize--extraLarge {
  height: 64px;
}

.Select__box--Text-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  max-width: 100%;
}

.Select__box--Text-content--placeholder {
  align-items: center;
  color: var(--text-placeholder, #AAADB5);
}

.SelectInput--error {
  border: 1px solid var(--fields-error-color, #CC2929);
}

.selectSize--extraLarge.SelectInput--error .Select__box {
  padding: calc(var(--lgc-space-250) - 1px);
}

.selectSize--extraLarge.SelectInput--focused .Select__box {
  padding: calc(var(--lgc-space-250, 20px) - 2px);
}

.Select.SelectInput--focused {
  border: 2px solid var(--fields-focus-color);
  border-radius: var(--radius-sm);
}

.Select-withBorder {
  position: relative;
  --border-width: 1px;
  border: var(--border-width) solid var(--fields-border-color);
  background-color: inherit;
}

.Select-withBorder.SelectInput--focused {
  --border-width: 2px;
}

/* Non-filterable outlined selects never get SelectInput--focused (that class
   only toggles with allowFilter), so they need the same 2px focus border the
   filterable case gets from `.Select.SelectInput--focused` above, or an open
   outlined select would show no visual change at all now that hover/active no
   longer fill the bg. Uses Select--open, not Select--active - the latter also
   stays true at rest once a non-default value is picked (see its definition
   in Select.tsx), which would make this border permanent instead of focus-only. */
.Select-withBorder.Select--open {
  --border-width: 2px;
  border: 2px solid var(--fields-focus-color, #0E79D0);
}

/* Opt-in for selects that use neither allowFilter nor withBorder (see `focusRing`
   prop) - same open-only focus border as the two cases above, for a plain filled
   select that would otherwise show no focus indicator at all. */
.Select--focusRing.Select--open {
  border: 2px solid var(--fields-focus-color, #0E79D0);
  border-radius: var(--radius-sm);
}

.selectSize--large.Select-withBorder .Select__box {
  padding: calc(11px - (var(--border-width) + 1px)) calc(var(--lgc-space-250) - var(--border-width) + 1px) calc(11px - (var(--border-width) + 1px)) calc(var(--lgc-space-200) - var(--border-width) + 1px);
}

/* Same border-compensation idea as the large formula above, but for medium
   (e.g. Invite's role picker, ReportProblemModal's Location select): border
   grows 1px -> 2px on open/focus, and without this the fixed base padding
   would let the content shift by 1px. Targets are today's resting values
   (8/12/8 plain, 8 all-round with an icon) at border-width:1px, so nothing
   moves at rest - only the focused/open state stops drifting. Both rules
   out-specificity `.Select--box__withIcon` / `.SelectInput--focused
   .Select--box__withIcon` above (3 classes vs 1-2), so the icon variant is
   covered too. */
.selectSize--medium.Select-withBorder .Select__box {
  padding: calc(9px - var(--border-width)) calc(9px - var(--border-width)) calc(9px - var(--border-width)) calc(13px - var(--border-width));
}

.selectSize--medium.Select-withBorder .Select--box__withIcon {
  padding: calc(9px - var(--border-width));
}

.Select-withBorder.SelectInput--unfocused {
  border: var(--border-width) solid var(--fields-border-color);
  background: var(--elevations-surface-default, #14171F);
}

.Select--transparent.Select-withBorder.SelectInput--unfocused {
  background: transparent;
}

.Select--fullwidth {
  width: 100%;
}

.MultiSelect__value {
  background-color: var(--lgc-palette-neutral-99, #E6E9F1);
}

.Select--plainFilter {
  color: var(--fields-color);
}

/* ---------- ACTIVE SUPPORT ---------- */
/* Same outlined-field rule as hover below: Select-withBorder keeps its resting
   background when open/active instead of filling. */
.Select:active:not(.Select-withBorder),
.Select--active:not(.Select-withBorder) {
  background-color: var(--select-bg-hover, #E6E9F1);
}

.Select--plainFilter:active,
.Select--plainFilter.Select--active {
  color: var(--fields-active-color);
  background-color: var(--elevations-surface-default, #FFF);
}

.Select--multi.Select--active {
  background-color: var(--elevations-surface-default, #FFF);
}


/* ---------- HOVER SUPPORT (only on hover devices) ---------- */
@media (hover: hover) {
  /* Outlined selects (Select-withBorder) keep whatever background their state
     rules already set - matches the plain bordered Input, which has no hover
     background change either. Only borderless/filled selects fill on hover. */
  .Select:hover:not(.Select-withBorder) {
    background-color: var(--select-bg-hover, #E6E9F1);
  }

  .Select:hover.Select--allowFilter .Select__box--Text-content--placeholder {
    color: var(--text-placeholder, #AAADB5);
  }

  .Select:hover .Select__box-boxIcon,
  .Select:hover .Select__box--Text-content--placeholder,
  .Select:hover .Select__box-icon {
    color: var(--select-hover, #282B33);
  }

  .Select--2:hover,
  .Select--2.Select--active:hover {
    background-color: var(--select2-bg-hover, #E6E9F1);
  }

  .Select--2:hover .Select__box-boxIcon,
  .Select--2:hover .Select__box--Text-content--placeholder,
  .Select--2:hover .Select__box-icon {
    color: var(--select2-hover, #282B33);
  }

  .Select--multi:hover {
    background-color: var(--elevations-surface-default, #FFF);
  }

  .Select--bg-sunken:hover,
  .Select--bg-sunken.Select--multi:hover {
    background-color: var(--elevations-surface-sunken, #F4F5F8);
  }

  .Select--plainFilter:hover {
    color: var(--fields-active-color);
    background-color: var(--elevations-surface-default, #FFF);
  }
}


.Select--box-icon--active {
  color: var(--text-primary);
}

.Select__option--loading {
  cursor: wait;
  pointer-events: none;
}

.Select_option_content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.Select__options {
  border-radius: var(--radius-sm);
  padding: var(--lgc-space-100, 8px);
  background-color: var(--elevations-surface-raised);
  list-style: none;
  margin: 0;
  overflow: auto;
  box-shadow: var(--box-shadow-medium);
}

.Select__option {
  padding: var(--lgc-space-075) var(--lgc-space-050);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-primary);
  max-width: 100%;
}

.Select_option_icon {
  display: flex;
  align-items: center;
  height: var(--body-large-line-height);
  -webkit-margin-end: var(--lgc-space-100);
          margin-inline-end: var(--lgc-space-100);
}

.Select_option_mark {
  color: var(--select-hover, #E6E9F1);
  align-items: center;
  -webkit-margin-start: var(--lgc-space-100, 8px);
          margin-inline-start: var(--lgc-space-100, 8px);
  display: flex;
}

@media screen and (min-width: 1250px) {

  .Select_option_mark {
    display: flex;
  }
}

.Select_option_textCol {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.Select_option_header {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-between;
}

.Select_option__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.Select_option_description {
  color: var(--text-tertiary);
}

.Select__sectionLabel {
  padding: var(--lgc-space-100, 8px) var(--lgc-space-050, 4px) var(--lgc-space-100, 8px);
  cursor: default;
}

.Select__sectionLabel:not(:first-child) {
  -webkit-margin-before: var(--lgc-space-100, 8px);
          margin-block-start: var(--lgc-space-100, 8px);
  -webkit-padding-before: var(--lgc-space-150, 12px);
          padding-block-start: var(--lgc-space-150, 12px);
  -webkit-border-before: 1px solid var(--divider-neutral, #E3E5E9);
          border-block-start: 1px solid var(--divider-neutral, #E3E5E9);
}

.Select__sectionLabel-title {
  color: var(--text-secondary);
}

.Select__sectionLabel-desc {
  color: var(--text-tertiary);
  -webkit-margin-before: 2px;
          margin-block-start: 2px;
}

.Select_option_moreAction {
  display: flex;
  -webkit-margin-start: var(--lgc-space-100, 8px);
          margin-inline-start: var(--lgc-space-100, 8px);
}

@media screen and (min-width: 1250px) {
  .Select_option_moreAction {
    display: none;
  }
}

.MultiSelect__value {
  justify-content: space-between;
  width: 160px;
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  align-items: center;
  padding: var(--lgc-space-050, 4px) var(--lgc-space-100, 8px);
  border-radius: var(--radius-sm, 6px);
  background-color: var(--select-option-hover-bg);
  color: var(--contextmenu-item-color);
  -webkit-margin-end: var(--lgc-space-100);
          margin-inline-end: var(--lgc-space-100);
  -webkit-margin-before: var(--lgc-space-100);
          margin-block-start: var(--lgc-space-100);
}

.MultiSelect__value-text {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-padding-end: var(--lgc-space-075);
          padding-inline-end: var(--lgc-space-075);
}

.MultiSelect:has(.MultiSelect__value-text) {
  -webkit-margin-before: -8px;
          margin-block-start: -8px;
}

.MultiSelect:has(.MultiSelect__value-text) .Select__box-input {
  -webkit-margin-before: 8px;
          margin-block-start: 8px;
  min-height: 28px;
}

.ContextMenuWithNavigation--showNavigationHover .Select__option--isInNavigationFocus,
.ContextMenuWithNavigation--hideNavigationHover .Select__option:hover {
  background-color: var(--elevations-surface-overlay);
}

.ContextMenuWithNavigation--showNavigationHover .Select__option--isInNavigationFocus .Select_option_header,
.ContextMenuWithNavigation--hideNavigationHover .Select__option:hover .Select_option_header {
  color: var(--text-primary);
}


@media screen and (min-width: 1250px) {
  .ContextMenuWithNavigation--showNavigationHover .Select__option--isInNavigationFocus .Select_option_moreAction,
  .ContextMenuWithNavigation--hideNavigationHover .Select__option:hover .Select_option_moreAction {
    display: flex;
  }

  .ContextMenuWithNavigation--showNavigationHover .Select__option--isInNavigationFocus .Select_option_mark,
  .ContextMenuWithNavigation--hideNavigationHover .Select__option:hover .Select_option_mark {
    display: none;
  }
}
.WorkspaceSelect {
    margin: var(--lgc-space-075, 6px) var(--lgc-space-100, 8px);
    overflow: hidden;

    display: flex;
    flex-grow: 1;
    max-width: 100%;
    background-color: var(--sidebar-bg);
}

.WorkspaceSelect:hover {
    background-color: var(--contextmenu-item-hover-bg, #3C3F47);
}

.WorkspaceSelect:hover .WorkspaceSelect__name {
    color: var(--text-primary);
}

.Select.view.workspaceSelect {
    background: var(--contextmenu-item-bg);
    margin: var(--lgc-space-100, 8px);
}

.Select.view.workspaceSelect:hover {
    background: var(--contextmenu-item-hover-bg);
}

.Select.view.workspaceSelect:hover .Select__box .WorkspaceSelect__name {
    color: var(--text-primary);
}

.Select.view.workspaceSelect:hover .Select__box .WorkspaceSelect__CompanyName {
    color: var(--text-secondary);
}

.WorkspaceSelect__Selected {
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.WorkspaceSelect__name--active {
    color: var(--text-primary);
}

.WorkspaceSelect_header {
    cursor: default;
    display: flex;
    justify-content: space-between;
    color: var(--text-placeholder, #82858D);
    padding: var(--lgc-space-075);
    align-items: center;
}

.Workspace__AddIcon {
    -webkit-margin-start: var(--lgc-space-300);
            margin-inline-start: var(--lgc-space-300);
}

.Workspace__AddIcon:hover {
    color: var(--button-icon-btn-hover);
    cursor: pointer;
}

.WorkspaceSelect__RightBlock {
    overflow: hidden;
    max-width: 100%;
    -webkit-margin-start: var(--lgc-space-150);
            margin-inline-start: var(--lgc-space-150);
}

.WorkspaceSelect__RightBlockOption {
    color: var(--select-hover, #E6E9F1);
}

.WorkspaceRow__RightBlockOption {
    overflow: hidden;
    max-width: 100%;
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
    color: var(--select-hover, #E6E9F1);
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
}

.WorkspaceSelect__Avatar--small {
    border-radius: var(--radius-xs);
}

.WorkspaceSelect__Avatar--medium {
    border-radius: var(--radius-sm);
}

.WorkspaceSelect__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.WorkspaceSelect__CompanyName {
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-placeholder, #82858D);
    text-overflow: ellipsis;
}.ActiveUsers {
    flex-grow: 1;
    box-sizing: border-box;
    color: var(--text-secondary);
    max-width: 100%;
    max-height: 100%;
    padding: var(--lgc-space-250, 20px);
}

@media screen and (min-width: 1250px) {
    .ActiveUsers {
        padding-block: 0;
    }
}

.ActiveUsers-header {
    display: flex;
    color: var(--text-primary);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    -webkit-padding-start: var(--lgc-space-075, 6px);
            padding-inline-start: var(--lgc-space-075, 6px);
    width: 100%;
}

@media screen and (min-width: 1250px) {
    .ActiveUsers-header {
        gap: var(--lgc-space-100, 8px);
        padding: 0;
    }
}

.ActiveUsers-title {
    flex-grow: 1;
    color: var(--text-secondary);
}

.ActiveUsers-count {
    min-width: 36px;
    text-align: right;
    -webkit-padding-end: var(--lgc-space-100, 8px);
            padding-inline-end: var(--lgc-space-100, 8px);

}

@media screen and (min-width: 1250px) {
    .ActiveUsers-count {
        min-width: 36px;
        padding: 0;
    }
}

.ActiveUsersIcon {
    -webkit-padding-end: var(--lgc-space-150, 12px);
            padding-inline-end: var(--lgc-space-150, 12px);
    display: flex;
    align-items: center;
}

@media screen and (min-width: 1250px) {
    .ActiveUsersIcon {
        -webkit-padding-end: 0;
                padding-inline-end: 0;
    }
}

.ActiveUsers__content {
    color: var(--text-secondary);
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

@media screen and (min-width: 1250px) {
    .ActiveUsers__content {
        -webkit-margin-before: var(--lgc-space-150, 12px);
                margin-block-start: var(--lgc-space-150, 12px);
    }
}

.ActiveUsers__name-block {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: var(--lgc-space-075, 6px) var(--lgc-space-100, 8px);
}

.ActiveUsers__avatar {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    position: relative;
}

.ActiveUsers__avatar-status {
    bottom: var(--lgc-space-025, 2px);
    position: absolute;
    right: var(--lgc-space-025, 2px);
    z-index: 1;
}

.ActiveUsers__name-block + .ActiveUsers__name-block {
    -webkit-margin-before: var(--lgc-space-050, 4px);
            margin-block-start: var(--lgc-space-050, 4px);
}

.ActiveUsers__name {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary, #AAADB5);
}

.ActiveUsers-empty {
    color: var(--text-secondary);
}
.RightMenuHeader {
    display: flex;
    justify-content: space-between;
    height: var(--header-height);
    -webkit-padding-start: var(--lgc-space-250);
            padding-inline-start: var(--lgc-space-250);
    -webkit-padding-end: var(--lgc-space-100);
            padding-inline-end: var(--lgc-space-100);
    align-items: center;
    color: var(--text-primary);
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-border-end: 1px solid var(--contextmenu-item-border);
            border-inline-end: 1px solid var(--contextmenu-item-border);
}

@media screen and (min-width: 1250px) {
    .RightMenu__header-animation--open {
        width: 100%;
    }
}

.RightMenuHeader__icon {
    color: var(--button-icon-btn-color);
    -webkit-padding-start: var(--lgc-space-250);
            padding-inline-start: var(--lgc-space-250);
}

.RightMenuHeader__icon:hover {
    color: var(--button-icon-btn-hover)
}
.MobileProfileHeader {
    display: flex;
    width: 100%;
    padding-block: var(--lgc-space-075, 6px);
    align-items: center;
    background: var(--elevations-surface-default);
    color: var(--text-primary);
    height: var(--mobile-editor-header-height);
}

.MobileProfileHeader_subHeader {
    color: var(--text-primary);
    text-transform: uppercase;
}

.MobileProfileHeader_logout {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    padding: var(--lgc-space-150, 12px);
}

.MobileProfileHeader__icon {
    padding: 22px var(--lgc-space-050, 4px) 22px var(--lgc-space-200, 16px);
}
.MobileHeader {
    display: flex;
    width: 100%;
    align-items: center;
    background: var(--elevations-surface-default);
    justify-content: space-between;
    color: var(--text-secondary)
}

.MobileHeader--simple {
    justify-content: flex-start;
    gap: var(--lgc-space-100);
}

.MobileHeader__right {
    justify-content: end;
    display: inline-flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}

.MobileHeader__icon {
    color: var(--button-icon-btn-color);
    padding: 22px var(--lgc-space-050, 4px) 22px var(--lgc-space-200, 16px);
}

.MobileHeader__icon:hover {
    color: var(--button-icon-btn-hover);
}

.MobileHeader .ActiveUserIcon {
    position: relative;
}

.MobileHeader .ActiveUsersIcon_badge {
    position: absolute;
    bottom: 16px;
    right: 14px;
}

.MobileHeader__button {
    -webkit-margin-end: var(--lgc-space-200);
            margin-inline-end: var(--lgc-space-200);
}
.TextButton {
    color: var(--button-plain-neutral-color);
    border-radius: var(--button-btn-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.TextButton:hover {
    color: var(--button-plain-neutral-hover);
}

.TextButton__text {
    -webkit-margin-start: var(--lgc-space-050);
            margin-inline-start: var(--lgc-space-050);
}.Callout {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    gap: var(--lgc-space-100);
    border-radius: var(--radius-sm, 6px);
    padding: var(--lgc-space-150) var(--lgc-space-200) var(--lgc-space-150) var(--lgc-space-150);
    color: var(--messages-callout-text);
}

.Callout--info {
    background: var(--messages-callout-info-bg);
}

.Callout--ai {
    color: var(--messages-section-ai-color);
    background: var(--messages-section-ai-bg);
}

.Callout--success {
    background: var(--messages-callout-success-bg);
}

.Callout--info .Callout__icon {
    color: var(--messages-callout-info-icon);
}

.Callout--success .Callout__icon {
    color: var(--messages-callout-success-icon);
}

.Callout--warning {
    background: var(--messages-callout-warning-bg);
}

.Callout--warning .Callout__icon {
    color: var(--messages-callout-warning-icon);
}

.Callout--danger {
    background: var(--messages-callout-danger-bg);
}

.Callout--danger .Callout__icon {
    color: var(--messages-callout-danger-icon);
}

.Callout__icon {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    -webkit-padding-before: var(--lgc-space-025);
            padding-block-start: var(--lgc-space-025);
}

.Callout__iconSvg {
    color: inherit;
}

.Callout__text {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

.Callout__button {
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);
}

.Callout__closeIcon {
    color: inherit;
    flex-shrink: 0;
}
.ModalBase {
    --modal-header-height: 40px;
    --modal-header-height-sm: 36px;
    --modal-pad-inline-end: var(--lgc-space-150, 12px);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: 100dvh;
    max-width: 100vw;
    width: 100%;
    overflow: hidden;

    padding: var(--lgc-space-250, 20px) var(--lgc-space-150, 12px);
    background: var(--elevations-surface-raised);
    border-radius: var(--radius-sm);
    /* large */
    box-shadow: var(--box-shadow-large);
}

@media screen and (min-width: 441px) {
    .ModalBase {
        --modal-pad-inline-end: var(--lgc-space-250, 20px);
        padding: var(--lgc-space-250, 20px);
    }
}

@media screen and (min-width: 1250px) {
    .ModalBase {
        --modal-pad-inline-end: var(--lgc-space-400);
        padding: var(--lgc-space-400);
        width: auto;
    }
}

/* Rises from the bottom edge instead of centering — rounded top corners only. */
.ModalBase--bottomSheet {
    width: 100%;
    max-width: 100vw;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    animation: ModalBase-slideUp 0.25s ease-out;
}

@keyframes ModalBase-slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Edge-to-edge bottom sheet on mobile — no corners to round. */
.ModalBaseFullScreen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: var(--elevations-surface-default);
    align-content: end;
    padding: 0;
    border-radius: 0;
}

.ModalBaseFullScreen .ModalBase_content {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    padding: var(--lgc-space-250, 20px);
    flex-grow: 1;
}

.ModalTitle__icon {
    -webkit-padding-before: 1px;
            padding-block-start: 1px;
    width: 24px;
    height: 24px;
    -webkit-margin-end: var(--lgc-space-075, 6px);
            margin-inline-end: var(--lgc-space-075, 6px);
}

.ModalBase_close {
    position: absolute;
    padding: var(--lgc-space-200);
    top: 0;
    right: 0;
    color: var(--button-plain-neutral-color);
    cursor: pointer;
}

.ModalBase_header {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    -webkit-padding-end: var(--lgc-space-500);
            padding-inline-end: var(--lgc-space-500);
    width: 100%;
}

/* Desktop / bottom-sheet modals: header and close button stay fixed, only
   the content scrolls. (Mobile full-screen has its own sticky-header rules
   below and is excluded here via :not() so it keeps its own scroll behavior.)
   The box is widened by the parent's own inline-end padding (border-box, so
   this grows the border edge, not the content) and that same amount is put
   back as the box's own padding — net result: the box's right edge reaches
   the modal's true border, so the scrollbar rides flush against it, while
   the visible content keeps the same margin from the edge as before.
   overflow-x is pinned to hidden so a stray 1px rounding overflow never
   spawns a bottom horizontal scrollbar. */
.ModalBase:not(.ModalBaseFullScreen) > .ModalBase_content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: calc(100% + var(--modal-pad-inline-end));
    -webkit-padding-end: var(--modal-pad-inline-end);
            padding-inline-end: var(--modal-pad-inline-end);
}

.ModalBase_title {
    display: flex;
}

.ModalBase_subtitle {
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);
    color: var(--text-tertiary, #64676F);
}

.ModalBase--info .ModalBase_title {
    color: var(--messages-confirm-modals-primary, #0E79D0);
}

.ModalBase--neutral .ModalBase_title {
    color: var(--messages-confirm-modals-neutral, #282B33);
}

.ModalBase--danger .ModalBase_title {
    color: var(--messages-confirm-modals-danger, #CC2929);
}

.ModalBase--success .ModalBase_title {
    color: var(--messages-confirm-modals-success, #2A8743);
}

.ModalBase--warning .ModalBase_title {
    color: var(--messages-confirm-modals-accent, #FD8D11);
}

.ModalBase_content {
    -webkit-margin-before: var(--lgc-space-300);
            margin-block-start: var(--lgc-space-300);
    color: var(--messages-confirm-modals-txt, #282B33);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ModalBase_content--no-header {
    -webkit-margin-before: 0;
            margin-block-start: 0;
}

.modalClose_button {
    border-radius: var(--radius-sm, 6px);
    background: var(--button-icon-btn-hover-bg, #F4F5F8);
}

.modalClose_button .btn__icon {
    margin: 0;
}

.ModalBase_title-highlight {
    width: 6px;
    height: var(--modal-header-height);
    border-radius: 100px;
    background-color: var(--text-primary);
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
}

.MobileFullScreenHeader {
    display: flex;
    width: 100%;
    /* Horizontal padding matches .ModalBaseFullScreen .ModalBase_content's so the
       header text lines up with the content below it. */
    padding: var(--lgc-space-075, 6px) var(--lgc-space-250, 20px);
    align-items: center;
    justify-content: space-between;
    gap: var(--lgc-space-100, 8px);
    background: var(--elevations-surface-default);
    color: var(--text-primary);
    border-bottom: 1px solid var(--elevations-surface-sunken);
}

.MobileFullScreenHeader__titleGroup {
    display: flex;
    align-items: center;
    min-width: 0;
}

.MobileFullScreenHeader__title {
    -webkit-margin-start: var(--lgc-space-075, 6px);
            margin-inline-start: var(--lgc-space-075, 6px);
}

/* When mobile full-screen header should be sticky, make the content the scroller */
.ModalBaseFullScreen--stickyHeader {
    /* outer should not scroll; header + content layout handles it */
    overflow: hidden;
}

/* content must be a flex child that can scroll */
.ModalBaseFullScreen--stickyHeader .ModalBase_content {
    flex: 1 1 auto;
    min-height: 0;                  /* critical: allow flex item to shrink */
    overflow: auto;                 /* the only scroll container */
    -webkit-overflow-scrolling: touch;
}

/* sticky mobile header */
.MobileFullScreenHeader--sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;                     /* above content, below any floating menus */
    background: var(--elevations-surface-default);
    border-bottom: 1px solid var(--elevations-surface-sunken);
}

/* optional: subtle shadow when content scrolls under the sticky header */
@supports ((position: -webkit-sticky) or (position: sticky)) {
    .MobileFullScreenHeader--sticky {
        /* feel free to adjust or remove */
        box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    }
}
.PaddleLikeSelect {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.PaddleLikeSelect__trigger {
    width: 100%;
    min-height: var(--lgc-space-600);
    border: 1px solid var(--fields-border-color);
    border-radius: var(--radius-sm);
    background: var(--fields-bg);
    color: var(--fields-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lgc-space-075);
    padding: var(--lgc-space-150) var(--lgc-space-200);
    text-align: start;
    cursor: pointer;
    font: inherit;
}

.PaddleLikeSelect__value {
    flex: 1 1 auto;
    min-width: 0;
}

.PaddleLikeSelect__arrow {
    color: var(--text-icon-secondary);
    flex-shrink: 0;
}

.PaddleLikeSelect--open .PaddleLikeSelect__trigger,
.PaddleLikeSelect__trigger:focus-visible {
    border-color: rgb(0, 150, 255);
    box-shadow: var(--box-shadow-small);
    outline: none;
}

.PaddleLikeSelect--disabled .PaddleLikeSelect__trigger,
.PaddleLikeSelect__trigger:disabled {
    border-color: var(--fields-disabled);
    color: var(--fields-disabled);
    opacity: 0.7;
    cursor: not-allowed;
}

.PaddleLikeSelect__listbox {
    list-style: none;
    margin: var(--lgc-space-050) 0 0;
    padding: var(--lgc-space-050);
    border: 1px solid var(--fields-border-color);
    border-radius: var(--radius-sm);
    background: var(--fields-bg);
    box-shadow: var(--box-shadow-medium);
    max-height: calc(var(--lgc-space-600) * 5);
    overflow-y: auto;
    position: absolute;
    z-index: 20;
    width: 100%;
    box-sizing: border-box;
}

.PaddleLikeSelect__listbox:focus {
    outline: none;
}

.PaddleLikeSelect__option {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--fields-color);
    text-align: start;
    padding: var(--lgc-space-100) var(--lgc-space-150);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
}

.PaddleLikeSelect__option--active,
.PaddleLikeSelect__option:hover {
    background: var(--select-option-hover-bg);
}

.PaddleLikeSelect__option--selected {
    font-weight: 500;
}
.SelectPeriod__save {
    color: var(--text-success);
}
.Input {
    -webkit-appearance: none;
            appearance: none;
    box-sizing: border-box;
    font-style: normal;
    width: 100%;
    max-width: 100%;
    height: 48px;
    min-height: 48px;
    border: 1px solid var(--fields-border-color);
    box-shadow: none;
    border-radius: var(--radius-sm);
    padding: var(--lgc-space-150) var(--lgc-space-200);
    color: var(--fields-color);
    background: var(--fields-bg);
    cursor: pointer;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
}

.Input--disabled {
    border-color: var(--fields-disabled);
    color: var(--fields-disabled);
    opacity: 0.7;
}

.Input--error {
    border-color: var(--fields-error-color, #CC2929);
}

.Input:focus {
    border: 2px solid var(--fields-focus-color, #0E79D0);
    outline: none;
    padding: calc(var(--lgc-space-150) - 1px) calc(var(--lgc-space-200) - 1px);
}

.Input--error:focus {
    border-color: var(--fields-error-color, #CC2929);
}.PriceDetails {
    width: 100%;
}

.PriceDetails-loader {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.PriceDetails-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.PriceDetails-main--upgrade {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
    color: var(--text-tertiary);
}

.PriceDetails-row {
    display: flex;
    align-items: center;
}

.PriceDetails-description {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
    color: var(--text-secondary);
}

.PriceDetails-total-value {
    color: var(--lgc-palette-primary-50);
    text-wrap: nowrap;
}

.PriceDetails-main--upgrade .PriceDetails-total-value {
    color: var(--text-secondary);
}

.PriceDetails-expand {
    color: var(--button-icon-btn-color);
}

.PriceDetails-total {
    display: flex;
    align-items: center;
}

.PriceDetails-check {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);

    display: none;
    width: 100%;
    padding: var(--lgc-space-150);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    border-radius: var(--radius-sm, 6px);
    background: var(--elevations-surface-sunken, #F4F5F8);
}

.PriceDetails-check--upgrade {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.PriceDetails-check--standalone {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    padding: 0;
    background: inherit;
}

.PriceDetails-check--expanded {
    display: flex;
}

.pdl-check-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pdl-check-item--total {
    color: var(--lgc-palette-primary-50);
}

.pdl-detail-row {
    color: var(--text-tertiary);
    flex: 1;
    width: 100%;
}

.pdl-discount-row {
    color: var(--text-success);
}

.pdl-detail-row:not(:first-child) {
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);
}

.pdl-check-divider {
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: var(--lgc-palette-neutral-variant-95);
    margin-block: var(--lgc-space-150);
}
.HintRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    gap: 6px;
}

.HintRow__text {
    flex: 1;
    color: #282B33;
}

.HintRow__end {
    display: flex;
    align-items: center;
    gap: 6px;
}

.HintRow__number {
    color: #282B33;
    text-align: right;
}

.HintRow__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}.LoadingCircle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
}
.SuccessModal-icon-row {
    display: flex;
    justify-content: center;
}

.SuccessModal-subtitle {
    display: flex;
    justify-content: center;
    -webkit-margin-before: var(--lgc-space-300);
            margin-block-start: var(--lgc-space-300);
}

.SuccessModal-text {
    display: flex;
    justify-content: center;
    text-align: center;
    -webkit-margin-before: var(--lgc-space-200);
            margin-block-start: var(--lgc-space-200);
}
.BaseCheckout {
    --checkout-column-width: 410px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media screen and (min-width: 1250px) {
    .BaseCheckout {
        flex-direction: row;
        width: auto;
        gap: var(--lgc-space-500);
    }
}

.BaseCheckout-vertical {
    flex-direction: column;
    gap: var(--lgc-space-300);
}

.BaseCheckout_settings {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--lgc-space-200, 16px);
}

@media screen and (min-width: 1250px) {
    .BaseCheckout_settings {
        width: var(--checkout-column-width)
    }
}

.BaseCheckout_setting-total-block {
    -webkit-margin-before: var(--lgc-space-200);
            margin-block-start: var(--lgc-space-200);
}

.BaseCheckout__discount-callout {
    width: 100%;
    -webkit-margin-after: var(--lgc-space-200);
            margin-block-end: var(--lgc-space-200);
}

.BaseCheckout_setting-label {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100, 8px);
}

.BaseCheckout_setting-value {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.BaseCheckout__btns-row {
    -webkit-margin-before: var(--lgc-space-400);
            margin-block-start: var(--lgc-space-400);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.BaseCheckout__btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--lgc-space-150, 12px);
    align-self: stretch;
}

.BaseCheckout__frame {
    -webkit-margin-before: var(--lgc-space-400);
            margin-block-start: var(--lgc-space-400);
}
.NodeTitle {
    flex-grow: 0;
    position: relative;
    color: var(--text-primary);
    max-width: var(--editor-width);
    width: 100%;
    margin-block: var(--lgc-space-300) var(--lgc-space-150);
    margin-inline: auto;
    padding-inline: 0;
}

@media screen and (min-width: 1250px) {
    .NodeTitle {
        margin-block: var(--lgc-space-100) var(--lgc-space-300);
        margin-inline: auto;
        padding-inline: 0;
    }
}

.NodeTitle__input--readOnly {
    cursor: default;
    min-height: 44px;
}

.NodeTitle__input, .title-placeholder {
    border: none;
    line-height: 2.5rem;
    font-size: 2rem;
}

@media screen and (min-width: 1250px) {
    .NodeTitle__input, .title-placeholder {
        line-height: 2.75rem;
        font-size: 2.25rem;
    }
}

.title-placeholder {
    position: absolute;
    top: 0;
    pointer-events: none;
    color: var(--text-placeholder);
    font-weight: 400;
}
.BreadcrumbsWithAddition {
    flex-grow: 0;
    display: flex;
    --path-max-width: 190px;
    --breadcrumbs-base: 20px;

    -webkit-margin-before: var(--lgc-space-150);

            margin-block-start: var(--lgc-space-150);
    max-width: var(--editor-width);

    margin-inline: auto;
    width: 100%;
    position: relative;
    box-sizing: initial;
    line-height: var(--breadcrumbs-base);
    cursor: pointer;
    color: var(--text-secondary);
    align-items: flex-start;
}

.BreadcrumbsAddition {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 48px;
    -webkit-margin-start: var(--lgc-space-150);
            margin-inline-start: var(--lgc-space-150);
}

.Editor__CreateQuizButton {
    --moreAction-additional-padding: 5px;
    display: flex;
    height: -webkit-fit-content;
    height: fit-content;
    align-items: center;
    -webkit-margin-end: calc(var(--lgc-space-150) - var(--moreAction-additional-padding));
            margin-inline-end: calc(var(--lgc-space-150) - var(--moreAction-additional-padding));
}

.breadcrumbs__wrap {
    width: 100%;
}

.breadcrumbs {
    --line-block-padding: 0px;
    --bc-text-padding: var(--lgc-space-075);
    --bc-path-gap: var(--lgc-space-075);
    --bc-outer-padding: var(--lgc-space-100);

    padding: var(--bc-outer-padding);
    -webkit-padding-before: calc(var(--lgc-space-100) - var(--line-block-padding));
            padding-block-start: calc(var(--lgc-space-100) - var(--line-block-padding));
    -webkit-margin-start: calc(0px - var(--bc-path-gap) - var(--bc-outer-padding) - var(--bc-text-padding));
            margin-inline-start: calc(0px - var(--bc-path-gap) - var(--bc-outer-padding) - var(--bc-text-padding));
    position: relative;

    max-width: var(--editor-width);
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: initial;
    border-radius: var(--radius-lg);
}


.breadcrumbs--editing {
    background: var(--elevations-surface-overlay);
    --line-block-padding: var(--lgc-space-075);
}

.breadcrumbs--editing.breadcrumbs--empty {
    line-height: calc(var(--breadcrumbs-base) + 10px);
}

.breadcrumbs__empty {
    -webkit-margin-start: var(--bc-path-gap);
            margin-inline-start: var(--bc-path-gap);
    color: var(--text-placeholder);
    padding: var(--bc-text-padding);
    cursor: pointer;
}

.breadcrumbs:hover .breadcrumbs__empty {
    color: var(--text-tertiary);
}

.breadcrumbs__plus {
    display: none;
    color: var(--button-icon-btn-color);
    -webkit-margin-start: var(--lgc-space-025);
            margin-inline-start: var(--lgc-space-025);
    padding-block: var(--bc-text-padding);
    height: var(--breadcrumbs-base);
    align-items: center;
    cursor: pointer;
}

.breadcrumbs:hover .breadcrumbs__plus {
    display: flex;
}

.breadcrumbs--readOnly:hover .breadcrumbs__plus {
    display: none;
}

.breadcrumbs__input {
    -webkit-margin-start: var(--bc-path-gap);
            margin-inline-start: var(--bc-path-gap);
    -webkit-margin-before: var(--line-block-padding);
            margin-block-start: var(--line-block-padding);
    padding: var(--bc-text-padding);
    line-height: var(--breadcrumbs-base);
    width: 120px;
    border: none;
    background: var(--elevations-surface-overlay);
    outline: none;
    color: var(--text-secondary);
}

.breadcrumbs__path-wrap {
    max-width: 100%;
    -webkit-margin-before: var(--line-block-padding);
            margin-block-start: var(--line-block-padding);
    display: flex;
    align-items: center;
    padding: var(--bc-text-padding);
    border-radius: var(--radius-sm);
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}

.breadcrumbs__path-wrap--editing {
    background: var(--lgc-palette-neutral-100);
}

.breadcrumbs__path-wrap--editing .breadcrumbs__path {
    max-width: var(--path-max-width);
}

.breadcrumbs__path {
    max-width: var(--path-max-width);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: var(--breadcrumbs-base);
    box-sizing: border-box;
}

.breadcrumbs__path--united:hover {
    border-bottom: 1px solid var(--text-secondary);
}

.breadcrumbs__path-remove {
    margin-inline: 5px;
}

.breadcrumbs--single .breadcrumbs__path {
    display: inline-block;
    max-width: initial;
    white-space: normal;
    word-break: break-all;
    flex-wrap: wrap;
    overflow: auto;
}

.breadcrumbs__path-node {
    cursor: pointer;
    flex-shrink: 0;
    flex-grow: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400;
}

.breadcrumbs__path-node--final {
    flex-shrink: 1;
}

.breadcrumbs--single .breadcrumbs__path-node:hover {
    text-decoration: underline;
}

.breadcrumbs__path-divider {
    padding-inline: 3px;
    flex-grow: 0;
}

.breadcrumbs__path-divider:last-child {
    display: none;
}
.MoreActions {
    display: flex;
    align-items: center;
    color: var(--button-icon-btn-color);
}

.MoreActions:hover, .MoreActions--open {
    color: var(--button-icon-btn-hover);
}
.doc-loading-line {
  position: relative;
  overflow: hidden;
  height: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #e0e0e0;
}

/* The shimmering moving light */
.doc-loading-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  height: 100%;
  width: 150%;
  background: linear-gradient(
          120deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.5) 50%,
          rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.6s infinite;
}

/* Keyframes for shimmer animation */
@keyframes shimmer {
  0% {
    left: -150%;
  }
  100% {
    left: 100%;
  }
}

/* Title line variant */
.doc-loading-line--title {
  height: 24px;
  margin-bottom: 20px;
  background: #f0f0f0;
}

/* Container styles */
.doc-loading-placeholder {
  padding: 20px;
  min-height: 200px;
  opacity: 0.9;
}

.doc-loading-content {
  max-width: var(--editor-width);
  margin: 0 auto;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .doc-loading-placeholder {
    padding: 16px;
  }

  .doc-loading-line {
    height: 14px;
    margin-bottom: 10px;
  }

  .doc-loading-line--title {
    height: 20px;
    margin-bottom: 16px;
  }
}
.Tree {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
}


:root {
    --grid: 8px;
}

.TreeItem {
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.TreeItemContent {
    color: inherit;
    border: 0;
    width: 100%;
    position: relative;
    background: transparent;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
}

.TreeItemContent__inner {
    padding: var(--grid);
    padding-right: 40px;
    align-items: center;
    display: flex;
    flex-direction: row;
    background: transparent;
    border-radius: 3px;
}

.TreeItemContent__inner--dragging {
    opacity: 0.4;
}

.TreeItemContent__inner--POI {
    background: transparent;
}

.TreeItemContent__text {
    flex-grow: 1;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.debug-style {
    position: absolute;
    right: var(--grid);
    bottom: 0;
    font-size: 6px;
}

.preview-style {
    padding: var(--grid);
    border-radius: 3px;
}
.TrashMenuConfirmation {
    padding: var(--lgc-space-150) var(--lgc-space-250);
    background-color: var(--sidebar-tree-hover-bg);
}

.TrashMenuConfirmation--noHover {
    background-color: var(--sidebar-tree-bg);
}

.TrashMenuConfirmation__title {
    color: var(--text-danger);
}

.TrashMenuConfirmation__message {
    -webkit-margin-before: var(--lgc-space-050);
            margin-block-start: var(--lgc-space-050);
    color: var(--text-secondary);
}

.TrashMenuConfirmation__buttons {
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);
    text-align: right;
}

.TrashMenuConfirmation__button + .TrashMenuConfirmation__button {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}
.ItemLine {
    --itemLineHeight: 36px;
    max-height: var(--itemLineHeight);
    min-height: var(--itemLineHeight);
    box-sizing: border-box;

    border-radius: var(--radius-sm);
    background: var(--sidebar-tree-bg);
}

.ItemLine--inEditorView {
    background-color: var(--elevations-surface-default);
    border-radius: 0;
    max-height: 40px;
    min-height: 40px;
}

.ItemLine:hover,
.ItemLine--selected {
    color: var(--text-primary);
    background-color: var(--sidebar-tree-hover-bg);
}

.ItemLine--inEditorView:hover,
.ItemLine--inEditorView.ItemLine--selected {
    background-color: var(--contextmenu-item-hover-bg)
}

.ItemLine--selected .ItemLine_delete {
    -webkit-padding-start: 16px;
            padding-inline-start: 16px;
}

.ItemLine--search {
    color: var(--text-tertiary);
}

.ItemLine--selected.ItemLine--search {
    color: var(--text-secondary);
}

.ItemLine--dragging {
    background-color: var(--elevations-surface-sunken);
    box-shadow: var(--box-shadow-small);
}

.ItemLine--drag-over {
    background-color: var(--lgc-palette-primary-60) !important;
    color: var(--text-primary);
}

.ItemLine--confirm-delete {
    max-height: unset;
    background-color: var(--sidebar-tree-hover-bg);
}

.ItemLine--isCluster {
    transition: border-left-width 0s !important;
}

.ItemLine--withSubtitle {
    --itemLineHeight: calc(var(--lgc-space-600) + var(--lgc-space-100));
}

.ItemLine_pin {
    -webkit-margin-end: var(--lgc-space-050);
            margin-inline-end: var(--lgc-space-050);
}

.ItemLine--selected .ItemLine_pin {
    color: var(--text-primary);
}

.ItemLine__row {
    display: flex;
    align-items: stretch;
    align-content: center;
    cursor: pointer !important;
    max-width: 100%;
    justify-content: space-between;
}


@media screen and (min-width: 1250px) {
    .ItemLine__row {
        padding-inline: var(--lgc-space-250) var(--lgc-space-300) ;
    }

    .ItemLine__row:hover {
        -webkit-padding-end: var(--lgc-space-150);
                padding-inline-end: var(--lgc-space-150);
    }

    .ItemLine__row-Reader:hover {
        -webkit-padding-end: var(--lgc-space-300);
                padding-inline-end: var(--lgc-space-300);
    }
}

.ItemLine--search {
    max-height: 92px;
}

.ItemLine__block {
    flex-shrink: 1;
    flex-grow: 1;
    max-width: 100%;
    flex-basis: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lgc-space-025);
    padding-block: var(--lgc-space-100);
}

.ItemLine--withSubtitle .ItemLine__block {
    gap: var(--lgc-space-050);
}

.ItemLine__buttons {
    display: none;
    flex-shrink: 0;
    flex-grow: 0;
    color: var(--button-icon-btn-color);
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
    align-items: center;
}

@media (hover: none) {
    .ItemLine__buttons {
        display: flex;
    }
}

.ItemLine:hover .ItemLine__buttons {
    display: flex;
}

.ItemLine__block-main {
    max-width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
}

.ItemLine__text {
    -webkit-padding-start: 2px;
            padding-inline-start: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ItemLine__subtitle {
    max-width: 100%;
    -webkit-padding-start: var(--lgc-space-025);
            padding-inline-start: var(--lgc-space-025);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ItemLine__subtitle--withExpand {
    -webkit-padding-start: var(--lgc-space-300);
            padding-inline-start: var(--lgc-space-300);
}

.ItemLine--search .ItemLine__text {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
}

.flex-line-break {
    flex-basis: 100%;
    height: 0;
}

.ItemLine__search-context {
    -webkit-padding-before: 2px;
            padding-block-start: 2px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    text-overflow: ellipsis;
    overflow: hidden;
}

.ItemLine em {
    font-weight: bold;
    color: var(--text-primary);
}

.ItemLine__active-users-badge {
    display: none;
    position: relative;
    right: -2px;
    bottom: 14px;
}

.ItemLine__active-users-badge--isVisible {
    -webkit-margin-start: calc(var(--lgc-space-150) + 2px);
            margin-inline-start: calc(var(--lgc-space-150) + 2px);
}

.ItemLine__button,
.ItemLine:hover .ItemLine__active-users-badge--isVisible {
    display: none;
}

.ItemLine:hover .ItemLine__button,
.ItemLine:hover .ItemLine__active-users-badge--VisibleInHover,
.ItemLine__active-users-badge--isVisible {
    display: inline-flex;
}

.ItemLine__button:hover {
    color: var(--button-icon-btn-hover);
}

@media (hover: none) {
    .ItemLine__button {
        display: inline-flex;
        color: var(--lgc-palette-neutral-60);
    }
}

.ItemLine__buttons--isMoreClicked {
    display: flex;
}

.ItemLine__buttons--isMoreClicked .ItemLine__button--more {
    display: inline-flex;
    color: var(--button-icon-btn-hover);
}

.ItemLine__row-moreClicked {
    -webkit-padding-end: var(--lgc-space-150);
            padding-inline-end: var(--lgc-space-150);
}
.EmptyListView {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
    padding-inline: var(--lgc-space-250);
    line-height: 24px;
}

.EmptyListTitle {
    font-weight: 600;
    color: var(--text-primary);
}

.EmptyListMessage {
    -webkit-margin-before: var(--lgc-space-050);
            margin-block-start: var(--lgc-space-050);
    color: var(--text-secondary);
}
.ClusterEmpty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-padding-after: 160px;

            padding-block-end: 160px;
}

.ClusterEmpty__content {
    text-align: center;
}

.ClusterEmpty__header {
    color: var(--text-secondary);
}

.ClusterEmpty__message {
    color: var(--text-tertiary);
    -webkit-margin-before: var(--lgc-space-075);
            margin-block-start: var(--lgc-space-075);
}

.ClusterEmpty__btns {
    -webkit-margin-before: var(--lgc-space-075);
            margin-block-start: var(--lgc-space-075);
}

.ClusterEmpty_btn + .ClusterEmpty_btn {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}
.ClusterView {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-inline: var(--lgc-space-150);
}

.ClusterView_tree_wrap {
    max-width: var(--editor-width);
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    min-height: 100%;
}


@media screen and (min-width: 1250px) {
    .ClusterView {
        margin-inside: 0;
    }

    .ClusterView_tree_wrap {
        width: var(--editor-width);
        margin: 0;
    }
}

.ClusterView_text {
    font-size: 16px;
}

.acknowledgmentRow {
    display: flex;
    -webkit-padding-after:var(--lgc-space-800);
            padding-block-end:var(--lgc-space-800);
    margin-inline: auto;
    max-width: calc(var(--editor-width) + 2 * var(--in-editor-inline-padding));
    width: 100%;
    position: relative;
}

.acknowledgmentRow__markedRead {
    padding: var(--lgc-space-100, 8px);
    display: flex;
    align-items: center;
    color: var(--text-tertiary);
}

.acknowledgmentRow__markedRead__icon {
    color: var(--button-icon-btn-color);
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
}

.acknowledgmentRow__markReadButton {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
}.ER-wrapper {
    min-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative; /* Establish positioning context for children */
}

.ER-context-root {
    z-index: 500;
    flex-grow: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* Remove media query overrides that were breaking desktop positioning */
@media screen and (max-width: 1249px) {
    .ER-context-root {
    }
}

@media screen and (min-width: 1250px) {
    .ER-context-root {
        bottom: initial;
    }
}

.ER-empty-note {
    color: var(--text-placeholder);
    font-size: 1.12rem;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: var(--editor-width);
    opacity: .7;
    pointer-events: none;
    position: absolute;
    right: 0;
    padding-top: 2px;
    width: 100%;
}

.ER-position-group {
    position: relative;
    flex-grow: 1;
}

.ER-editor-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ER-editor-wrapper--short {
    min-height: unset;
}

.ER-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-inline: var(--lgc-space-150);
}

@media screen and (min-width: 1250px) {
    .ER-body {
        padding-inline: var(--lgc-space-200);
    }
}


.ER-history-header {
    -webkit-padding-before: calc(10px + var(--lgc-space-150));
            padding-block-start: calc(10px + var(--lgc-space-150));
    -webkit-padding-after: 10px;
            padding-block-end: 10px;
    max-width: var(--editor-width);
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ER-view_only {
    display: inline-flex;
    padding: var(--lgc-space-025, 2px) var(--lgc-space-100, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--lgc-space-0, 0px);

    border-radius: var(--radius-sm, 6px);
    background: var(--select-bg-hover, #E6E9F1);
}

.ER-view_header {
    -webkit-margin-start: var(--lgc-space-150);
            margin-inline-start: var(--lgc-space-150);
    color: var(--text-secondary, #50535B);
}

.SnapshotViewReact__upgrade {
    color: var(--button-icon-btn-light, #64676F);
    text-align: center;
}
.LoadingHorizontal {
    --LinearProgress-thickness: 4px;
    --LinearProgress-progressThickness: 4px;

    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--LinearProgress-thickness);
}

.LoadingHorizontal--visible {
    display: block;
}

.LoadingHorizontal__line {
    bottom: var(--LinearProgress-thickness);
}
.sr-header-wrapper {
    --search-bar-height: 48px;

    position: relative;
    display: inline-block;
    min-height: var(--search-bar-height);
    width: 100%;
}

.sr-header {
    padding: var(--lgc-space-100) var(--lgc-space-200) var(--lgc-space-100) var(--lgc-space-250);
    color: var(--text-secondary);
    flex-direction: row;
    display: flex;
    align-items: center;
    min-height: var(--search-bar-height);
    width: 100%;
    justify-content: start;

    white-space: nowrap;
}

.sr-call-to-search {
    cursor: pointer;
    font-weight: bold;
    color: var(--button-plain-primary-color);
}

.sr-call-to-empty b {
    color: var(--text-primary);
}

.sr-no-results {
    color: var(--text-secondary)
}

.sr-searched-word {
    color: var(--text-primary)
}

.sr-text {
    line-height: 16px;
    -webkit-margin-start: var(--lgc-space-050);
            margin-inline-start: var(--lgc-space-050);
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Recent {

}.Active {

}.tree-dummy-loading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}

.tree-dummy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  opacity: 0.6;
}

.tree-dummy-item--nested {
  margin-left: 20px;
  opacity: 0.4;
}

.tree-dummy-item__icon {
  width: 16px;
  height: 16px;
  background: var(--lgc-palette-neutral-variant-99);
  border-radius: 2px;
  flex-shrink: 0;
}

.tree-dummy-item__text {
  height: 14px;
  background: var(--lgc-palette-neutral-variant-99);
  border-radius: 7px;
  min-width: 60px;
}

/* Shimmer animation */
.tree-dummy-item__icon,
.tree-dummy-item__text {
  animation: tree-shimmer 1.8s ease-in-out infinite;
}

.tree-dummy-item:nth-child(2n) .tree-dummy-item__icon,
.tree-dummy-item:nth-child(2n) .tree-dummy-item__text {
  animation-delay: 0.2s;
}

.tree-dummy-item:nth-child(3n) .tree-dummy-item__icon,
.tree-dummy-item:nth-child(3n) .tree-dummy-item__text {
  animation-delay: 0.4s;
}

@keyframes tree-shimmer {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}.list-view_context-root {
    z-index: 500;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: -8px;
    pointer-events: none;
}

@media screen and (min-width: 1250px) {
    .list-view_context-root {
        bottom: initial;
    }
}

.list-view {
    position: relative;
    -webkit-user-select: none;
            user-select: none;
    color: var(--text-secondary);
    max-width: 100%;
    flex-grow: 1;
    width: 100%;
    overflow: auto;
}
.rootContextMenu {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4500;
}

.rootContextMenu--middle {
    z-index: 950;
}

.rootContextMenu--low {
    z-index: 3500;
}

.rootContextMenu > * {
    pointer-events: auto;
}

.ctx-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    /* Ensure it doesn't create scrollbars */
    overflow: hidden;
}


@media screen and (min-width: 1250px) {
    .rootContextMenu {
        position: fixed;
    }
}

.ctx-menu-overlay {
    display: inline-block;
    position: fixed;
    bottom: 0;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 4200;
    pointer-events: auto;

    opacity: 0.4;
    background-color: black;
}

@media screen and (min-width: 1250px) {
    .ctx-menu-overlay {
        display: none;
        top: 0;
        left: 0;
    }
}

.ctx-menu-position {
    position: absolute;

    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    z-index: 4500;

    max-height: 80vh;
    width: 100vw;
    bottom: 0;
    background: var(--elevations-surface-raised);
}

@media screen and (min-width: 1250px) {
    .ctx-menu-position {
        background: none;
        border-radius: var(--radius-sm);
        bottom: initial;
        width: initial;
        max-height: initial;
        box-shadow: var(--box-shadow-medium);
    }
}

.ctx-menu-position-mobile {
    background: none;
    border-radius: var(--radius-sm);
    bottom: initial;
    width: initial;
    max-height: initial;
    max-width: 100vw;
    overflow: auto;
}

/**
 * Stacking Context Promotion
 * When a context menu is active within a container, we promote the container
 * to ensure it's on top of siblings (like sidebars).
 * We use 900 because the Header is at 1000, and we want menus to scroll behind it.
 */

.ctx-menu-open {
    z-index: 900 !important;
    position: relative;
}

/* Ensure the root itself is on top of everything within its container when active */
.ER-context-root:has(.ctx-anchor),
.list-view_context-root:has(.ctx-anchor) {
    z-index: 9999 !important;
}



.ContextMenuItem {
    width: 100%;
    padding: var(--lgc-space-075) var(--lgc-space-100);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.ContextMenuItem_withPointer {
    cursor: pointer;
}

.ContextMenuItem_withIcon {
    padding: var(--lgc-space-075) var(--lgc-space-100) var(--lgc-space-075) var(--lgc-space-050);
}

.ContextMenuItem:hover.ContextMenuItem_withPointer {
    background-color: var(--elevations-surface-overlay);
    color: var(--text-primary);
}

.ctx-menu__item-icon {
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
}

.ctx-menu__ActionItem-icon {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    color: var(--button-icon-btn-color);
    display: flex;
}

@media screen and (min-width: 1250px) {
    .ctx-menu__ActionItem-icon {
        display: none;
    }
}


.ctx-menu__ActionItem-icon:hover {
    color: var(--button-icon-btn-hover);
}

.ContextMenuItem:hover .ctx-menu__ActionItem-icon {
    display: flex;
}
.ContextMenu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    overflow: auto;
    background: var(--elevations-surface-raised);
    color: var(--text-secondary);
    padding: var(--lgc-space-100) var(--lgc-space-150);
    min-width: 140px;
    -webkit-user-select: none;
            user-select: none;
    border-radius: var(--radius-sm);
}

.ContextMenuWithTitle {
    padding: var(--lgc-space-400, 32px) var(--lgc-space-250, 20px);
}

.ContextMenu__withIcon {
    padding: var(--lgc-space-100);
}

.ContextMenu--wide {
    min-width: 208px;
}

.ContextMenu__title {
    width: 100%;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    color: var(--messages-confirm-modals-neutral, #282B33);
}

.ContextMenu__subTitle {
    display: flex;
    align-items: center;
    margin-block: var(--lgc-space-150) var(--lgc-space-300);
    width: 100%;
}

.ContextMenu__subTitleText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-tertiary, #64676F);
    -webkit-margin-start: var(--lgc-space-075);
            margin-inline-start: var(--lgc-space-075);
}

.Context-Menu__button {
    width: 100%;
    -webkit-margin-before: var(--lgc-space-300);
            margin-block-start: var(--lgc-space-300);
}

.ContextMenu.theme-dark {
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.35);
}

@media screen and (min-width: 1250px) {
    .ContextMenu {
        box-shadow: var(--box-shadow-medium);
    }
}.ContextMenuInEditorItem {
    border-radius: var(--radius-xs, 2px);
    padding: var(--lgc-space-050);
    width: 100%;

    background: var(--contextmenu-item-bg);
    color: var(--contextmenu-item-color);
    cursor: pointer;

    display: flex;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;

    max-width: 100%;
}

.ContextMenuWithNavigation--showNavigationHover .ContextMenuInEditorItem--isInNavigationFocus,
.ContextMenuWithNavigation--hideNavigationHover .ContextMenuInEditorItem:hover {
    color: var(--contextmenu-item-hover-color);
    background: var(--contextmenu-item-hover-bg);
}

.ContextMenuInEditorItem--isActive {
    pointer-events: none;
    cursor: initial;
    color: var(--contextmenu-item-disabled);
    background: none;
}

.ContextMenuInEditorItem__icon {
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
}

.ContextMenuInEditorItem__text {
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.ContextMenuInEditorItem em {
    color: var(--text-primary);
    font-weight: bold;
}

.ContextMenuInEditor__add-new {
    color: var(--button-plain-primary-color);
}

.ContextMenuInEditor__add-new.ContextMenuInEditorItem--isInNavigationFocus,
.ContextMenuInEditor__add-new:hover {
    color: var(--button-plain-primary-hover);
    background-color: var(--button-plain-primary-hover-bg);
}
.ContextMenuInEditor {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    padding: var(--lgc-space-100);

    border-radius: var(--radius-sm, 6px);

    background: var(--contextmenu-item-bg);
    color: var(--contextmenu-item-color);
    -webkit-user-select: none;
            user-select: none;
}

@media screen and (min-width: 1250px) {
    .ContextMenuInEditor {
        max-width: 400px;
    }
}

.ContextMenuInEditor__content {
    width: 100%;
}

.ContextMenuInEditor--isInline .ContextMenuInEditor__content {
    max-height: calc(28px * 10 + 9px * 2);
    overflow: auto;
}

.ContextMenuInEditor--isInline .ContextMenuInEditorItem {
    padding: var(--lgc-space-050, 4px) var(--lgc-space-100, 8px);
}

.ContextMenuInEditor__header {
    color: var(--contextmenu-item-disabled);
    padding: var(--lgc-space-050, 4px) var(--lgc-space-100, 8px);
}

.ContextMenuInEditor__not-found {
    color: var(--contextmenu-item-color);
    padding: var(--lgc-space-050, 4px) var(--lgc-space-100, 8px);
}

.ContextMenuInEditor__divider {
    display: inline-block;
    height: 1px;
    flex-shrink: 0;
    width: 100%;
    background: var(--contextmenu-item-border, #0E1015);
    margin-block: var(--lgc-space-050);
}

.ContextMenuInEditor__divider--wide {
    margin-block: var(--lgc-space-100);
}
.DocumentContextMenuItem {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--lgc-space-075) var(--lgc-space-150);
    white-space: nowrap;
    cursor: pointer;
}

.DocumentContextMenuItem:hover {
    background-color: var(--elevations-surface-overlay);
    color: var(--text-primary);
}

.DocumentContextMenuItem-text {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}.DocumentContextMenuComponent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--lgc-space-150);
    background: var(--contextmenu-item-bg);
    -webkit-user-select: none;
            user-select: none;
    color: var(--text-secondary);
    box-shadow: var(--box-shadow-large);
    border-radius: var(--radius-sm);
}

@media screen and (min-width: 1250px) {
    .DocumentContextMenuComponent {
        min-width: 285px;
    }
}

.DocumentContextMenuComponent-divider {
    height: 1px;
    width: 100%;
    background-color: var(--elevations-surface-overlay);
    margin-block: var(--lgc-space-075);
}
.DocumentInfo {
    padding: var(--lgc-space-075) var(--lgc-space-200);
    display: flex;
    flex-direction: column;
    gap: var(--lgc-space-150);
}


.DocumentInfo__name-block {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}


.DocumentInfo__label,
.DocumentInfo__date {
    color: var(--text-tertiary);
}

.DocumentInfo__name {
    -webkit-margin-start: var(--lgc-space-150);
            margin-inline-start: var(--lgc-space-150);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.DocumentInfo__date {
    white-space: nowrap;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    -webkit-padding-start: var(--lgc-space-150);
            padding-inline-start: var(--lgc-space-150);
}

.DocumentInfo__date--today {
    font-weight: bold;
}.CalendarSelectInput {
    color: var(--select2-color);
    cursor: pointer;
    display: flex;
    padding: var(--lgc-space-100, 8px) var(--lgc-space-100, 8px) var(--lgc-space-100, 8px) var(--lgc-space-150, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--lgc-space-050, 4px);
    border-radius: var(--radius-sm, 6px);
    background: var(--select2-bg);
}


.CalendarSelectInput:hover {
    color: var(--select2-hover);
    background: var(--select2-bg-hover);
}

.CalendarSelectInput--withBackground {
    background: var(--button-soft-neutral-bg, #F4F5F8);
}

.CalendarSelectInput--withBackground {
    background: var(--select-bg, #F4F5F8);
}

.CalendarSelectInput--placeholder {
    color: var(--text-placeholder, #AAADB5);
}

.CalendarSelectInput__label-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    flex: 1 1 auto;
}

.CalendarSelectInput__icon {
    margin-left: auto;
}

.CalendarSelectInput--placeholder .CalendarSelectInput__icon {
    color: var(--button-icon-btn-color);
}

.CalendarSelectInput--active.CalendarSelectInput--placeholder,
.CalendarSelectInput--placeholder:hover,
.CalendarSelectInput--active.CalendarSelectInput--placeholder .CalendarSelectInput__icon,
.CalendarSelectInput--placeholder:hover .CalendarSelectInput__icon {
    color: var(--select2-hover);
}

.TaskLists_calendarChevronIcon {
    cursor: pointer;
    color: var(--button-icon-btn-color);
}

.TaskLists_calendarChevronIcon:hover {
    color: var(--button-icon-btn-hover);
}

.CalendarSelectOptions {
    border-radius: var(--radius-sm, 6px);
    background: var(--elevations-surface-default, #FFF);
    padding: var(--lgc-space-200, 16px);
    box-shadow: var(--box-shadow-large);
}

.Calendar__Repeat__Month {
    border-radius: var(--radius-sm, 6px);
    background: var(--elevations-surface-default, #FFF);
    padding: var(--lgc-space-250, 20px);
    box-shadow: var(--box-shadow-large);
}

.Calendar__Repeat__Month--days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: var(--lgc-space-150);
    gap: var(--lgc-space-150);
}

.Calendar__ContentHeader {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    -webkit-margin-after: var(--lgc-space-100, 8px);
            margin-block-end: var(--lgc-space-100, 8px);
}

.Calendar__Option__row {
    display: flex;
    justify-content: space-between;
}

.Calendar__Option__row + .Calendar__Option__row {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.Calendar__Option {
    min-width: 56px;
    padding: var(--lgc-space-075, 6px) var(--lgc-space-150, 12px);
    border-radius: var(--button-btn-radius-md, 6px);
    cursor: pointer;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    color: var(--button-plain-neutral-color, #64676F);
}

.Calendar__Options--dayMode {
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: var(--lgc-space-100, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    color: var(--select-color);
}

.Calendar__Option + .Calendar__Option {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}

.Calendar__Option:first-letter {
    text-transform: uppercase;
}

.Calendar__Option:hover {
    color: var(--select-hover);
    border-radius: var(--button-btn-radius-md, 6px);
    background: var(--select-option-hover-bg);
}

.Calendar__Option--active {
    background: var(--select-bg-hover);
    color: var(--select-hover);
}

.Calendar__Option:hover.Calendar__Option--active,
.Calendar__Options--dayMode:hover.Calendar__Option--active {
    background: var(--select-bg-hover);
    color: var(--select-hover);
}

.Calendar__WeekDays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    -webkit-margin-after: var(--lgc-space-100);
            margin-block-end: var(--lgc-space-100);
    grid-gap: var(--lgc-space-050);
    gap: var(--lgc-space-050);
}

.Calendar__ContentHeader__Header {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    padding: var(--lgc-space-075, 6px) var(--lgc-space-150, 12px);
    margin-inline: var(--lgc-space-400, 32px);
    cursor: pointer;
    text-transform: capitalize;

}

.Calendar__ContentHeader__Header:hover {
    border-radius: var(--button-btn-radius-md, 6px);
    background: var(--button-plain-neutral-hover-bg, #F4F5F8);
}

.Calendar__ContentHeader__Chevron {
    cursor: pointer;
}

.Calendar__ContentHeader__Chevron:hover {
    border-radius: var(--button-btn-radius-md, 6px);
    background: var(--button-plain-neutral-hover-bg, #F4F5F8);
}

.Calendar__Options--day {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: var(--lgc-space-050);
    gap: var(--lgc-space-050);
}

.Calendar__Options--dayMode:hover {
    background: var(--select-bg-hover);
    color: var(--select-hover);
}

.Calendar__Repeat__Month__day {
    display: flex;
    max-width: 32px;
    padding: var(--lgc-space-100, 8px);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    height: 32px;
    white-space: nowrap;
    color: var(--button-icon-btn-color);
}


.Calendar__Repeat__Month--active {
    border-radius: var(--radius-sm, 6px);
    background: var(--button-icon-btn-active-bg, #E6E9F1);
    color: var(--button-icon-btn-hover, #0E1015);
}

.Calendar__Repeat__Month__endDays {
    justify-content: start;
}

.Calendar__Repeat__Month__endDays::after {
    content: '*';
    font-size: 10px;
    line-height: 1;
    vertical-align: super;
    margin-left: 2px;
}

.Calendar__Repeat__Month__Button {
    margin-block: 10px;
}

.Calendar__Repeat__Year__Button {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.YearCalendarModal {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.CalendarRepeat__Footer {
    display: flex;
    align-items: start;
    max-width: 296px;
    color: var(--text-placeholder, #AAADB5);
}

.CalendarRepeat__Footer__icon {
    -webkit-margin-end: var(--lgc-space-050);
            margin-inline-end: var(--lgc-space-050);
}

.Calendar__Options--dayMode:hover {
    background: var(--select-option-hover-bg, #F4F5F8);
}

.Calendar__WeekDay {
    width: 44px;
    padding: var(--lgc-space-100, 8px);
    color: var(--text-secondary, #50535B);
}

.Calendar__Option--dimmed {
    color: var(--button-disabled-color, #86878A);
}

.NotificationCardBadge {
    --notification-badge-size: var(--lgc-space-200);
    width: var(--notification-badge-size);
    height: var(--notification-badge-size);
    padding: calc(var(--notification-badge-size) / 4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
}

.NotificationCardBadge::before {
    content: "";
    width: calc(var(--notification-badge-size) / 2);
    height: calc(var(--notification-badge-size) / 2);
    border-radius: 50%;
    box-sizing: border-box;
}

.NotificationCardBadge--read::before {
    border: calc(var(--lgc-space-025) / 2) solid var(--lgc-palette-neutral-60);
}

.NotificationCardBadge--unread::before {
    background: var(--lgc-palette-primary-60);
}

.NotificationCardBadge--clickable {
    cursor: pointer;
}

.NotificationCardBadge--size-16 {
    --notification-badge-size: var(--lgc-space-200);
}

.NotificationCardBadge--size-20 {
    --notification-badge-size: var(--lgc-space-250);
}

.NotificationCardBadge--size-24 {
    --notification-badge-size: var(--lgc-space-300);
}
.NotificationCard {
    padding: var(--lgc-space-100, 8px);
    display: flex;
    border-radius: var(--radius-sm, 6px);
    background: var(--select-option-hover-bg, #F4F5F8);
    position: relative;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.NotificationCard_background {
    position: relative;
}

.NotificationCard_background_deleteIcon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%)
}

.NotificationCard_background_markIcon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(0, -50%)
}

.NotificationCard--isRead {
    background: var(--elevations-surface-default);
}

.NotificationCard--swiped--left {
    transform: translateX(-25%);
    background: var(--select-bg-hover, #E6E9F1);
}

.NotificationCard--swiped--right {
    transform: translateX(25%);
    background: var(--select-bg-hover, #E6E9F1);
}

.NotificationCard_background + .NotificationCard_background {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.Notification__message__block {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
}

.Notification__message__header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    word-wrap: break-word;
    flex-grow: 1;
    cursor: default;
    color: var(--text-placeholder);
    -webkit-margin-after: var(--lgc-space-050);
            margin-block-end: var(--lgc-space-050);
}

.NotificationCard__AvatarPath {
    min-width: 50px;
}

.NotificationCard__IconColor {
    color: var(--text-placeholder)
}

.Notification__message {
    display: block;
    word-wrap: break-word;
    flex-grow: 1;

    cursor: default;
}

.Notification__rightPart {
    display: flex;
    margin-left: auto;
}

.Notification__Actions {
    min-width: -webkit-fit-content;
    min-width: fit-content;
    display: flex;
    align-items: start;
    justify-content: end;
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}

@media screen and (min-width: 1250px) {
    .Notification__Actions {
        min-width: 58px;
        -webkit-margin-end: var(--lgc-space-050);
                margin-inline-end: var(--lgc-space-050);
    }
}


.Notification__DeleteIcon {
    cursor: pointer;
}

.NotificationCard:not(:hover) .Notification__DeleteIcon {
    display: none;
}

.Notification__Date {
    color: var(--text-tertiary, #64676F);
}

.NotificationCard:hover .Notification__Date {
    display: none;
}
.NotificationPanel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--lgc-space-250, 20px) var(--lgc-space-100, 8px);
    background: var(--contextmenu-item-bg);
    color: var(--text-secondary);
    box-shadow: var(--box-shadow-large);
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

@media screen and (min-width: 1250px) {
    .NotificationPanel {
        border-radius: var(--radius-sm);
        max-width: 480px;
    }
}


.NotificationPanel__wrapper {
    padding: 0 var(--lgc-space-050, 12px);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.NotificationPanel__header__wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--elevations-surface-default);
    z-index: 1000;
}


.NotificationPanel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-padding-end: var(--lgc-space-100, 8px);
            padding-inline-end: var(--lgc-space-100, 8px);
}

.Notification__message__headerBlock {
    display: flex;
}

.NotificationPanel__title {
    text-transform: uppercase;
    color: var(--messages-confirm-modals-neutral, #282B33);
}

.NotificationPanel__actions {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-150);
}

.NotificationPanel__action {
    cursor: pointer;
}

.NotificationPanel__action:hover,
.NotificationPanel__action--active {
    color: var(--button-plain-neutral-active, #282B33);
}

.NotificationPanel__divider {
    height: 2px;
    align-self: stretch;
    border-radius: var(--radius-sm, 6px);
    background: var(--contextmenu-item-border, #F4F5F8);
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.NotificationPanel__notifications {
    padding: var(--lgc-space-100, 8px);
}

.NotificationPanel__group {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.NotificationPanel__group-title {
    color: var(--text-placeholder, #AAADB5);
    -webkit-margin-after: var(--lgc-space-100);
            margin-block-end: var(--lgc-space-100);
}

.NotificationPanel__notifications--empty {
    padding: var(--lgc-space-200, 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.NotificationPanel__empty-icon {
    -webkit-margin-after: var(--lgc-space-150);
            margin-block-end: var(--lgc-space-150);
}

.NotificationPanel__empty-title {
    color: var(--text-secondary, #50535B);
    -webkit-margin-after: var(--lgc-space-050);
            margin-block-end: var(--lgc-space-050);
}

.NotificationPanel__empty-text {
    color: var(--text-tertiary, #64676F);
}

.Notification_button {
    color: var(--button-icon-btn-hover);
}

@media screen and (min-width: 1250px) {
    .Notification_button {
        color: var(--button-icon-btn-color);
    }
}

.Notification_button:hover, .Notification_button--open {
    color: var(--button-icon-btn-hover);
}.UserCard {
    display: flex;
    align-items: center;
    min-height: 52px;
    box-sizing: border-box;
    justify-content: flex-start;
    width: -webkit-fit-content;
    width: fit-content;
}

.UserCard__withBackground {
    border-radius: var(--radius-sm, 6px);
    background: var(--select-option-hover-bg, #F4F5F8);
    padding: var(--lgc-space-075, 6px) var(--lgc-space-100, 8px);

}
.DeleteModal__userCard {
    padding: var(--lgc-space-200, 16px);
    margin-block: var(--lgc-space-300);
    background: var(--elevations-surface-sunken, #F4F5F8);
    border-radius: var(--radius-sm, 6px);
}

.DeleteModal__userCard .UserName {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03125rem;
    line-height: 1.5rem;
}

.UserCard--inline .UserCard-block {
    flex-direction: row;
}

.UserCard--inline .UserName {
    display: flex;
    justify-content: start;
}

.UserCard--inline .UserEmail {
    -webkit-margin-start: var(--lgc-space-050);
            margin-inline-start: var(--lgc-space-050);
}

.UserCard-block {
    display: flex;
    flex-direction: column;
    align-items: start;
    overflow: hidden;
    -webkit-margin-start: var(--lgc-space-150, 12px);
            margin-inline-start: var(--lgc-space-150, 12px);
}

.UserName, .UserEmail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

@media screen and (min-width: 1250px) {
    .UserName, .UserEmail {
        width: auto;
    }
}

.UserCard_email {
    color: var(--text-secondary);
}

.UserCard--24 {
    min-height: 24px;
}

.UserCard--36 {
    min-height: 36px;
}

.UserCard--24 .UserCard-block {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}

.UserCard--40 {
    min-height: 40px;
}
.AccessRoleGroupContextMenu__item {
    padding: var(--lgc-space-075) var(--lgc-space-100);
}

.AccessRoleGroupContextMenu__futureItem {
    color: var(--text-tertiary);
    padding: var(--lgc-space-100);
}

.AccessRoleGroupContextMenu__location {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100);
    min-width: 0;
}

.AccessRoleGroupContextMenu__locationName {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}
.TreeHeaderOptions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 250px;
    max-height: calc(100vh - var(--lgc-space-800));
    padding: var(--lgc-space-100);
    margin: 0;
    overflow: auto;
    -webkit-user-select: none;
            user-select: none;
    background: var(--select-bg, #FFFFFF);
    color: var(--select-color, #50535B);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 var(--lgc-space-050) rgba(0, 0, 0, 0.04), 0 var(--lgc-space-100) var(--lgc-space-200) rgba(0, 0, 0, 0.08);
}

.TreeHeaderOptions__header {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-300);
    width: 100%;
    padding: var(--lgc-space-075) var(--lgc-space-050);
    box-sizing: border-box;
}

.TreeHeaderOptions__headerText {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-placeholder, #AAADB5);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.TreeHeaderOptions__headerIcon {
    flex-shrink: 0;
    color: var(--button-icon-btn-color);
    cursor: pointer;
}

.TreeHeaderOptions__headerIcon:hover {
    color: var(--button-plain-neutral-hover);
}

.TreeHeaderOptions__row {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: var(--lgc-space-100);
    padding: var(--lgc-space-075) var(--lgc-space-050);
    border-radius: var(--radius-xs);
    color: var(--select-color, #50535B);
    cursor: pointer;
}

.TreeHeaderOptions__row:hover,
.TreeHeaderOptions__row--focused {
    background: var(--select-option-hover-bg, #F4F5F8);
    color: var(--text-primary, #282B33);
}

.TreeHeaderOptions__text,
.TreeHeaderOptions__viewText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.TreeHeaderOptions__text {
    flex: 1 1 auto;
}

.TreeHeaderOptions__viewText {
    flex: 0 1 auto;
}

.TreeHeaderOptions__check {
    flex-shrink: 0;
    color: var(--text-primary, #282B33);
}

.TreeHeaderOptions__libraryOptions {
    position: absolute;
    inset-inline-end: var(--lgc-space-050);
    flex-shrink: 0;
    opacity: 0;
    color: var(--button-icon-btn-color);
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.TreeHeaderOptions__libraryRow:hover .TreeHeaderOptions__libraryOptions,
.TreeHeaderOptions__libraryOptions:hover {
    opacity: 1;
    pointer-events: auto;
}

.TreeHeaderOptions__libraryRow:hover .TreeHeaderOptions__check {
    opacity: 0;
}

.TreeHeaderOptions__libraryOptions:hover {
    color: var(--button-plain-neutral-hover);
}

.TreeHeaderOptions__viewIcon {
    flex-shrink: 0;
    color: var(--text-tertiary, #64676F);
}

.TreeHeaderOptions__viewRow--active {
    color: var(--text-primary, #282B33);
}

.TreeHeaderOptions__viewRow--active .TreeHeaderOptions__viewIcon,
.TreeHeaderOptions__viewRow:hover .TreeHeaderOptions__viewIcon,
.TreeHeaderOptions__row--focused .TreeHeaderOptions__viewIcon {
    color: currentColor;
}

.TreeHeaderOptions .ContextMenuInEditor__divider {
    display: block;
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    margin-block: var(--lgc-space-050);
    background: var(--divider-neutral, #E6E9F1);
}
.TreeSelect {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.TreeSelect__header {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100);
    padding: var(--lgc-space-075) var(--lgc-space-100);
    border-radius: var(--radius-xs);
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    transition: background-color 0.15s ease;
}

.TreeSelect__header:hover {
    background-color: var(--lgc-palette-neutral-variant-99);
}

.TreeSelect__empty {
    padding: var(--lgc-space-200);
    color: var(--lgc-palette-neutral-70);
    text-align: center;
}

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

.TreeSelect__node-content {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100);
    padding: var(--lgc-space-075) var(--lgc-space-100);
    border-radius: var(--radius-xs);
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    transition: background-color 0.15s ease;
}

.TreeSelect__node-content:hover {
    background-color: var(--select2-option-hover-bg);
}

.TreeSelect__node--level-0 .TreeSelect__node-content {
    padding-left: var(--lgc-space-100);
}

.TreeSelect__node--level-1 .TreeSelect__node-content {
    padding-left: calc(var(--lgc-space-100) + var(--lgc-space-200));
}

.TreeSelect__node--level-2 .TreeSelect__node-content {
    padding-left: calc(var(--lgc-space-100) + var(--lgc-space-200) * 2);
}

.TreeSelect__node--level-3 .TreeSelect__node-content {
    padding-left: calc(var(--lgc-space-100) + var(--lgc-space-200) * 3);
}

.TreeSelect__node--level-4 .TreeSelect__node-content {
    padding-left: calc(var(--lgc-space-100) + var(--lgc-space-200) * 4);
}

.TreeSelect__node--level-5 .TreeSelect__node-content {
    padding-left: calc(var(--lgc-space-100) + var(--lgc-space-200) * 5);
}

.TreeSelect__expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lgc-space-200);
    height: var(--lgc-space-200);
    flex-shrink: 0;
    color: var(--select2-option);
    transition: transform 0.2s ease;
}

.TreeSelect__expand-icon:hover {
    color: var(--lgc-palette-neutral-50);
}

.TreeSelect__expand-icon-spacer {
    width: var(--lgc-space-200);
    height: var(--lgc-space-200);
    flex-shrink: 0;
}

.TreeSelect__checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--select2-option);
}

.TreeSelect__checkbox--selected {
    color: var(--button-plain-primary-color);
}

.TreeSelect__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.TreeSelect__label {
    flex: 1;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
}

.TreeSelect__label--parent {
    font-weight: 600;
}

.TreeSelect__children {
    display: flex;
    flex-direction: column;
}
.TreeSelectDropdownMenu {
    display: flex;
    flex-direction: column;
    background: var(--contextmenu-item-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--select2-option-bg);
    overflow: hidden;
    padding: var(--lgc-space-100);
}

.TreeSelectDropdownMenu__body {
}

.TreeSelectDropdownMenu__tree {
    max-height: inherit;
}

.TreeSelectDropdownMenu__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lgc-space-150);
}
.Divider {
    height: 2px;
    align-self: stretch;
    border-radius: var(--radius-sm, 6px);
    margin-block: var(--lgc-space-100);
    background: var(--contextmenu-item-hover-bg);
}

.Divider--withPadding {
}
.inputWithClear {
    --border-width: 2px;
    display: flex;
    flex-grow: 1;
    background-color: var(--elevations-surface-default);
    border-radius: var(--radius-sm, 6px);
    padding: var(--lgc-space-100, 8px);
    align-items: center;
    min-width: 216px;
    box-sizing: border-box;
}

.inputWithClear--isFocused {
    border: var(--border-width) solid var(--fields-focus-color, #0E79D0);
    padding: calc(var(--lgc-space-100, 8px) - var(--border-width));
    caret-color: var(--fields-focus-color, #0E79D0);
}

.inputWithClear--error {
    border: var(--border-width) solid var(--fields-error-color, #CC2929);
    padding: calc(var(--lgc-space-100, 8px) - var(--border-width));
}

.inputWithClear--withoutIcon.inputWithClear--error {
    padding: calc(12px - var(--border-width)) calc(var(--lgc-space-250, 20px) - var(--border-width)) calc(12px - var(--border-width)) calc(var(--lgc-space-200, 16px) - var(--border-width));
}

.inputWithClear__input {
    border: 0;
    line-height: 24px;
    width: 100%;
    background-color: var(--elevations-surface-default);
    color: var(--text-primary);
}

.inputWithClear--withBackground {
    background: var(--elevations-surface-sunken, #F4F5F8);
}

.inputWithClear--withoutIcon {
    padding: 12px var(--lgc-space-250, 20px) 12px var(--lgc-space-200, 16px);
}

.inputWithClear--withoutIcon.inputWithClear--isFocused {
    padding: calc(12px - var(--border-width)) calc(var(--lgc-space-250, 20px) - var(--border-width)) calc(12px - var(--border-width)) calc(var(--lgc-space-200, 16px) - var(--border-width));
}

.inputWithClear__icon {
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
    color: var(--button-icon-btn-color);
}

.inputWithClear__CloseIcon {
    color: var(--button-icon-btn-color);
    -webkit-margin-start: var(--lgc-space-100, 8px);
            margin-inline-start: var(--lgc-space-100, 8px);
    visibility: visible;
}

.inputWithClear__CloseIcon--hidden {
    visibility: hidden;
}

.inputWithClear__CloseIcon:hover,
.inputWithClear:hover .inputWithClear__icon {
    color: var(--button-icon-btn-hover);
}

@media screen and (min-width: 1250px) {
    .inputWithClear {
        flex: 1;
        -webkit-margin-after: 0;
                margin-block-end: 0;
    }
}
.SectionSelectOptions {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100);
    padding: var(--lgc-space-100) var(--lgc-space-150);
    cursor: pointer;
}

.SectionSelectOptions__text {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.SectionSelectOptions__mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--lgc-palette-primary-500);
}

.SectionSelectOptions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--lgc-space-100) var(--lgc-space-150);
    color: var(--lgc-palette-neutral-600);
}

.SectionSelectOptions__header__icon {
    cursor: pointer;
    color: var(--button-icon-btn-color);
}

.SectionSelectOptions__header__icon:hover {
    color: var(--button-plain-neutral-hover);
}

.SectionSelectOptions__row__delete {
    flex-shrink: 0;
    opacity: 0;
    cursor: pointer;
    color: var(--button-icon-btn-color);
    transition: opacity 0.1s;
}

.SectionSelectOptions__row:hover .SectionSelectOptions__row__delete {
    opacity: 1;
}

.SectionSelectOptions__row__delete:hover {
    color: var(--lgc-palette-error-500);
}
.EmptyPage {
    margin: auto;
    text-align: center;
    max-width: 320px;
    padding-bottom: 0;
}

@media screen and (min-width: 1250px) {
    .EmptyPage {
        max-width: 520px;
        padding-bottom: var(--header-height);
    }
}

.EmptyPage__icon {
    color: var(--text-placeholder);
    -webkit-margin-after: var(--lgc-space-250);
            margin-block-end: var(--lgc-space-250);
}

.EmptyPage__header {
    position: relative;
    color: var(--text-secondary, #50535B);
}

.EmptyPage__importantHeader {
    position: relative;
    color: var(--text-primary);
}

.EmptyPage__text {
    color: var(--text-secondary);
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
}


.EmptyPage__buttons {
    width: 100%;
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
}

@media screen and (min-width: 1250px) {
    .EmptyPage__buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

.EmptyPage__button {
    width: 100%;
}

.EmptyPage__button + .EmptyPage__button {
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);

}

@media screen and (min-width: 1250px) {
    .EmptyPage__button {
        width: auto;
    }

    .EmptyPage__button + .EmptyPage__button {
        -webkit-margin-before: 0;
                margin-block-start: 0;
        -webkit-margin-start: var(--lgc-space-150);
                margin-inline-start: var(--lgc-space-150);
    }
}

.EmptyPage__helperText {
    color: var(--text-secondary);
    -webkit-margin-before: var(--lgc-space-200);
            margin-block-start: var(--lgc-space-200);
}
.SectionMessage {
    display: flex;
    align-items: flex-start;
    gap: var(--lgc-space-150);
    max-width: 100%;
    padding: var(--lgc-space-250);
    border-radius: var(--radius-sm, 6px);
}

.SectionMessage--success {
    color: var(--messages-section-success-color);
    background: var(--messages-section-success-bg);
}

.SectionMessage--error {
    color: var(--messages-section-danger-color);
    background: var(--messages-section-danger-bg);
}

.SectionMessage--warning {
    color: var(--messages-section-warning-color);
    background: var(--messages-section-warning-bg);
}

.SectionMessage--warning .SectionMessage__header,
.SectionMessage--warning .SectionMessage__icon {
    color: var(--messages-section-warning-title);
}

.SectionMessage--info {
    color: var(--messages-section-info-color);
    background: var(--messages-section-info-bg);
}

.SectionMessage--ai {
    color: var(--messages-section-ai-color);
    background: var(--messages-section-ai-bg);
}

.SectionMessage__icon {
    color: inherit;
}

.SectionMessage__closeIcon {
    color: inherit;
    flex-shrink: 0;
}

.SectionMessage__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--lgc-space-150);
    min-width: 0;
}

.SectionMessage__header,
.SectionMessage__message {
    margin: 0;
}
.HardRefreshWarning {

}

.HardRefreshWarning__btns {
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);
}
.Loading {
    --LinearProgress-thickness: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--text-primary);
}

.Loading__icon {
    width: 200px;
    height: auto;
}
.Loading__icon .icon, .Loading__icon .icon svg {
    width: 100%;
    height: auto;
}

.Loading__line {
    width: 320px;
    -webkit-margin-before: var(--lgc-space-400);
            margin-block-start: var(--lgc-space-400);
    position: relative;
    height: var(--LinearProgress-thickness);
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
}

.Loading__warning {
    -webkit-margin-before: var(--lgc-space-300);
            margin-block-start: var(--lgc-space-300);
}.PageSurface {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: var(--lgc-space-300, 24px) var(--lgc-space-250, 20px) var(--lgc-space-500, 40px) var(--lgc-space-250, 20px);
  background-color: var(--elevations-surface-sunken);
}

.PageSurface--white {
  background-color: var(--white);
}

.PageSurface:has(.TabContent) {
  scrollbar-gutter: stable;
}

@media screen and (min-width: 1250px) {
  .PageSurface {
    /* padding-block-start only — padding-block-end must stay at the base
       rule's larger --lgc-space-500 (40px) so there's always room to scroll
       past the last bit of content, not just up to its bottom edge. */
    -webkit-padding-before: var(--lgc-space-300);
            padding-block-start: var(--lgc-space-300);
    padding-inline: var(--lgc-space-300);
  }
}

.PageSurface--no-padding {
    padding: 0;
}

.PageSurface::-webkit-scrollbar-track-piece {
  background-color: inherit;
}

.PageSurface__width {
  max-width: 100%;
}

@media screen and (min-width: 1250px) {
  .PageSurface__width {
    max-width: var(--column-page-width);
  }
}

.PageSurface__filters {
  margin-block: var(--lgc-space-300);
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1250px) {
  .PageSurface__filters {
    flex-direction: row;
  }
}

.PageSurface__filters-input {
  -webkit-margin-after: var(--lgc-space-150, 12px);
          margin-block-end: var(--lgc-space-150, 12px);
}

@media screen and (min-width: 1250px) {
  .PageSurface__filters-input {
    -webkit-margin-end: var(--lgc-space-150);
            margin-inline-end: var(--lgc-space-150);
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}

/* Keep legacy section/row classnames used by settings screens */
.SettingsMenuPage__row {
  -webkit-margin-before: var(--lgc-space-250);
          margin-block-start: var(--lgc-space-250);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.SettingsMenuPage__section + .SettingsMenuPage__section {
  -webkit-margin-before: var(--lgc-space-500);
          margin-block-start: var(--lgc-space-500);
}
.hm {
    position: relative;
    text-align: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    left: 0;
    min-height: var(--header-height);
    height: var(--header-height);
    max-height: var(--header-height);
    padding: 0;
    -webkit-user-select: none;
            user-select: none;
    width: 100%;
    z-index: 1000;
    background: var(--elevations-surface-default);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.01), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

.hm-WithoutWorkspace {
    justify-content: space-between;
    background: var(--elevations-surface-sunken, #F4F5F8);
    box-shadow: none;
}

@media screen and (min-width: 1250px) {
    .hm-WithoutWorkspace {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
}

.hm_left-part {
    height: var(--header-height);
    background-color: var(--elevations-surface-default);
    color: var(--lgc-palette-neutral-100);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    overflow: hidden;
    flex-shrink: 0;
    transition: flex-basis 0.3s;
}

.WithoutWorkspace-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    flex-grow: 1;
    background: var(--elevations-surface-sunken, #F4F5F8);
}

.WithoutWorkspace-layout .hm_left-part {
    background: var(--elevations-surface-sunken, #F4F5F8);
}


.hm_hamburger-box {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    margin: 22px var(--lgc-space-050, 4px) 22px var(--lgc-space-200, 16px);
    color: var(--text-icon-secondary);
}

.hm_hamburger-box:hover {
    color: var(--button-icon-btn-hover);
}

.hm-logo_main {
    padding: var(--lgc-space-075, 6px) var(--lgc-space-250, 20px);
    color: var(--text-primary);
}

.hm--collapsed .hm-logo {
    display: none;
}

.hm_button {
    cursor: pointer;
    -webkit-margin-end: var(--lgc-space-150);
            margin-inline-end: var(--lgc-space-150);
}

.hm_sb {
    margin-left: var(--left-ident);
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100);
}

.hm-title {
    color: var(--text-secondary);
}
.ProgressBarHorizontal {
    border-radius: 10px;
    height: 8px;
    background: var(--button-solid-neutral-preloader, #E6E9F1);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.ProgressBarHorizontal__bar {
    position: absolute;
    height: 100%;
    top: 0;
    border-radius: 10px;
}

.ProgressBarHorizontal__bar--info {
    background: var(--lgc-palette-primary-60, #3D94EC);
}

.ProgressBarHorizontal__bar--ai {
    background: var(--lgc-palette-ai-40, #6E5DC6);
}

.ProgressBarHorizontal__bar--correct {
    background: var(--lgc-palette-success-80, #66C37F);
}

.ProgressBarHorizontal__bar--wrong {
    background: var(--lgc-palette-danger-80, #FF8383);
}

.ProgressBarHorizontal__bar--accent {
    background: var(--lgc-palette-accent-60);
}

.ProgressBarHorizontal__bar_fromStart {
    left: 0;
}

.ProgressBarHorizontal__bar_fromEnd {
    right: 0;
}
.ProgressCircle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
}

.ProgressCircle__svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    color: var(--lgc-palette-neutral-variant-95);
}

.ProgressCircle.ProgressCircle--success {
    stroke: var(--lgc-palette-success-80);
}

.ProgressCircle.ProgressCircle--error  {
    stroke: var(--lgc-palette-danger-80);
}

.ProgressCircle.ProgressCircle--warning {
    stroke: var(--lgc-palette-accent-40);
}

.ProgressCircle__content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none; /* Optional: disable interaction */
}
.UpgradePlanCard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--text-primary);
    align-items: flex-start;
    gap: var(--lgc-space-150, 12px);
    align-self: stretch;

    border-radius: var(--radius-md, 8px);
    background: var(--elevations-surface-raised, #282B33);
    padding: var(--lgc-space-250, 20px);
    margin-bottom: var(--lgc-space-100);
}

.UpgradePlanCard__header_row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    color: inherit;
}

.UpgradePlanCard__tail {
    display: flex;
    align-items: center;
}

.UpgradePlanCard__rocketIcon {
    -webkit-margin-start: var(--lgc-space-150);
            margin-inline-start: var(--lgc-space-150);
}

.UpgradePlanCard__ProgressBar {
    margin: 0;
    background-color: var(--lgc-palette-neutral-20);
}

.UpgradePlanCard__button {
    justify-content: center;
    align-self: flex-start;
}

.UpgradePlanCardCollapsed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;

    padding-block: var(--lgc-space-075, 6px);
    gap: var(--lgc-space-075, 6px);
}

.UpgradePlanCardCollapsed:hover {
    background: var(--sidebar-hover-bg, #282B33);
    border-radius: var(--radius-md, 8px);
}
.MainSidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-color);
    width: 280px;
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: width 200ms ease, flex-basis 200ms ease;
    --collapsed-menu-width: 56px;
}

.MainSidebar--overlay {
    position: fixed;
    top: var(--mobile-editor-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: 100%;
    flex: none;
    border-right: 0;
}

.MainSidebar--collapsed {
    width: var(--collapsed-menu-width);
    flex-basis: var(--collapsed-menu-width);
}

.MainSidebar__inner {
    padding: var(--lgc-space-075, 6px) var(--lgc-space-100, 8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    min-height: 0;
}

.MainSidebar_section {
    display: flex;
    flex-direction: column;
    gap: var(--lgc-space-050);
    margin-bottom: var(--lgc-space-300, 24px);
}

.MainSidebar_item {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-150, 12px);
    padding: var(--lgc-space-075, 6px) var(--lgc-space-100, 8px);
    border-radius: var(--radius-sm, 6px);
    color: var(--sidebar-color);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.MainSidebar_item--active {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-color);
}

.MainSidebar_item:hover:not(.MainSidebar_item--active) {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-color);
}

.MainSidebar__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.MainSidebar__workspace {
    height: var(--header-height);
    padding: 0 var(--lgc-space-100, 8px);
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    align-items: center;
}

.MainSidebar__collapseToggle {
    color: var(--sidebar-color);
    cursor: pointer;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    transition: opacity 150ms ease;
}

.MainSidebar__collapseToggle:active {
    color: var(--sidebar-hover-color);
}

@media (hover: hover) {
    .MainSidebar__collapseToggle:hover {
        color: var(--sidebar-hover-color);
    }
}

.MainSidebar--collapsed .MainSidebar__collapseToggle { display: none; }

.MainSidebar--collapsed .WorkspaceSelect__Selected {
    display: flex;
    align-items: center;
    justify-content: center;
}

.MainSidebar__wsCollapsed {
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--header-height);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.MainSidebar__wsAvatar {
    grid-area: 1 / 1;
    opacity: 1;
    transition: opacity 150ms ease;
}

.MainSidebar__wsOpenIcon {
    grid-area: 1 / 1;
    box-sizing: border-box;
    width: 100%;
    padding: var(--lgc-space-075) var(--lgc-space-100) !important;
    border-radius: var(--radius-sm, 6px);
    color: var(--sidebar-color);
    opacity: 0;
    transition: opacity 150ms ease, background-color .2s ease, color .2s ease;
}

.MainSidebar__wsCollapsed:hover .MainSidebar__wsOpenIcon {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-color);
}

.MainSidebar:hover .MainSidebar__wsAvatar { opacity: 0; }
.MainSidebar:hover .MainSidebar__wsOpenIcon { opacity: 1; }
.SettingsSecondaryNav {
  width: 326px;
  flex: 0 0 326px;
  background: var(--sidebar-bg2);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--contextmenu-item-border, rgba(255,255,255,0.06));
}

.SettingsSecondaryNav--overlay {
    position: fixed;
    top: var(--mobile-editor-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 18;
    width: 100%;
    overflow: auto;
}

.SettingsSecondaryNav__section {
  color: var(--text-primary);
  padding: var(--lgc-space-300, 16px) var(--lgc-space-200, 16px) var(--lgc-space-100, 8px) var(--lgc-space-200, 16px);
}

.SettingsSecondaryNav_item {
  cursor: pointer;
  padding: var(--lgc-space-100) var(--lgc-space-200);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.SettingsSecondaryNav_item:hover {
  background-color: var(--contextmenu-item-hover-bg, #3C3F47);
  color: var(--contextmenu-item-hover-color);
}

.SettingsSecondaryNav_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.SettingsSecondaryNav_item--selected {
  background-color: var(--contextmenu-item-hover-bg, #3C3F47);
  box-sizing: border-box;
  border-left-width: 4px;
  -webkit-padding-start: calc(16px - 4px);
          padding-inline-start: calc(16px - 4px);
  border-left-style: solid;
  border-color: var(--lgc-palette-primary-60);
  color: var(--text-primary);
}

.SettingsSecondaryNav_icon {
  -webkit-margin-end: 12px;
          margin-inline-end: 12px;
}
.LayoutTrialInfoLine {
    flex: 0 0 auto;
    width: 100%;
    color: var(--messages-toast-accent-color);
    background-color: var(--messages-toast-accent-bg);
    border-bottom: 1px solid var(--messages-toast-accent-border);
}

.LayoutTrialInfoLine__content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    grid-gap: var(--lgc-space-250);
    gap: var(--lgc-space-250);
    padding: var(--lgc-space-075) var(--lgc-space-250);
}

.LayoutTrialInfoLine__main {
    grid-column: 2;
    max-width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lgc-space-100);
}

.LayoutTrialInfoLine__messageRow {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--lgc-space-100);
}

.LayoutTrialInfoLine__icon {
    flex: 0 0 auto;
}

.LayoutTrialInfoLine__message {
    margin: 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
}

.LayoutTrialInfoLine__strong {
    font-weight: 700;
}

.LayoutTrialInfoLine__inlineLink {
    color: inherit;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    -webkit-text-decoration-style: dotted;
            text-decoration-style: dotted;
    text-underline-offset: var(--lgc-space-025);
}


.LayoutTrialInfoLine__button {
    flex: 0 0 auto;
}

.LayoutTrialInfoLine__closeButton {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--messages-toast-accent-btn);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    padding: var(--lgc-space-100);
    cursor: pointer;
}

@media (hover: hover) {
    .LayoutTrialInfoLine__closeButton:hover {
        color: var(--messages-toast-accent-btn-hover);
        background: var(--messages-toast-accent-btn-hover-bg);
    }
}

.LayoutTrialInfoLine__closeButton:active {
    color: var(--messages-toast-accent-btn-hover);
    background: var(--messages-toast-accent-btn-hover-bg);
}

@media screen and (max-width: 1249px) {
    .LayoutTrialInfoLine__content {
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: var(--lgc-space-150);
        padding: var(--lgc-space-100) var(--lgc-space-150);
    }

    .LayoutTrialInfoLine__main {
        grid-column: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--lgc-space-200);
    }

    .LayoutTrialInfoLine__messageRow {
        align-items: flex-start;
        gap: var(--lgc-space-100);
    }

    .LayoutTrialInfoLine__message {
        text-align: left;
    }

    .LayoutTrialInfoLine__button {
        width: 100%;
    }

    .LayoutTrialInfoLine__closeButton {
        grid-column: 2;
        justify-self: end;
        padding: 0;
    }
}
.ServerConnectionNotice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lgc-space-100);
    min-height: var(--lgc-space-500);
    padding: var(--lgc-space-075) var(--lgc-space-200);
    color: var(--messages-toast-warning-color);
    background: var(--messages-toast-warning-bg);
    border-bottom: 1px solid var(--messages-toast-warning-btn);
    text-align: center;
    flex-wrap: wrap;
}

.ServerConnectionNotice__title {
    font-weight: 600;
}

.ServerConnectionNotice__message {
    min-width: 0;
}
.layout__allView {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--elevations-surface-default);
    height: calc(var(--vh, 1vh) * 100);
}

.layout {
    display: flex;
    background-color: var(--elevations-surface-default);

    width: 100%;
    max-width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    flex-grow: 1;
}

.layout__allView .layout {
    height: auto;
    min-height: 0;
}

.layout--center {
    justify-content: center;
}

.layout__screen {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.layout__panel {
    background-color: var(--sidebar-tree-bg);
    color: var(--sidebar-tree-color);
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    width: 342px;
    left: 0;
    flex: 1;
    flex-shrink: 0;
    transition: flex-basis 0.3s, width 0.3s;
    padding: var(--lgc-space-100);
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 1250px) {
    .layout__panel {
        flex-grow: 0;
    }
}

.layout__panel-tree {
    display: flex;
    flex-direction: column;
    width: 100%;
    left: 0;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.layout__panel-treeScroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
}

.layout__panel-tree:has(.list-view--dragover)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    transition: background 0.2s ease-out 0s;
    background: rgba(61, 148, 236, 0.50);
}

.layout__panel--collapsed {
    display: none;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0;
}

.layout__panel .TreeLayoutHeader,
.layout__panel .ItemLine,
.layout__panel .list-view {
    transition: opacity 0.3s, border-left-width 0.1s;
    opacity: 100%;
}

.layout__panel--collapsed .TreeLayoutHeader,
.layout__panel--collapsed .ItemLine,
.layout__panel--collapsed .list-view {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

@media screen and (min-width: 1250px) {
    .layout__panel--collapsed {
        display: inline-flex;
    }
}

.layout__divider {
    width: 8px;
    flex: 1;
    max-width: 8px;
    cursor: ew-resize;
    background: transparent;
    -webkit-user-select: none;
            user-select: none;
}

.layout__withMenus {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.layout__content {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.layout__content--closed {
    display: none;
}

.LayoutAfterFreeTrial__EmptyPage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}



.LayoutAfterFreeTrial__logo {
    padding: var(--lgc-space-300, 24px) var(--lgc-space-400, 32px);
    position: absolute;
}
.SnackbarBlock {
    padding: var(--lgc-space-150, 12px) var(--lgc-space-200, 16px);

    display: flex;
    justify-content: flex-start;
    color: var(--messages-toast-default-color);
    background-color: var(--messages-toast-default-bg);

    min-width: unset !important;
    width: 100% !important;
}

@media screen and (min-width: 1250px) {
    .SnackbarBlock {
        border-radius: var(--radius-sm, 6px);
    }
}

.SnackbarBlock-header-withButton {
    flex-direction: column;
}

.SnackbarBlock--noIcon {
    padding-inline: var(--lgc-space-250);
}

.SnackbarBlock-action {
    display: flex;
    align-items: center;
}

.SnackbarBlock-action-withButton {
    display: flex;
    width: 100%;
}

.SnackbarBlock__btn {
    -webkit-margin-before: var(--lgc-space-200);
            margin-block-start: var(--lgc-space-200);
    display: flex;
    flex-grow: 1;
}

@media screen and (min-width: 1250px) {
    .SnackbarBlock__btn {
        -webkit-margin-before: 0;
                margin-block-start: 0;
        -webkit-margin-start: var(--lgc-space-200);
                margin-inline-start: var(--lgc-space-200);
    }
}

.SnackbarBlock__text-btn {
    -webkit-margin-start: var(--lgc-space-200);
            margin-inline-start: var(--lgc-space-200);
    color: var(--messages-toast-default-btn);
    text-transform: uppercase;
    white-space: nowrap;
}

.SnackbarBlock__text-btn:hover {
    color: var(--messages-toast-default-btn-hover);
}


.SnackbarBlock--success {
    color: var(--messages-toast-success-color);
    background-color: var(--messages-toast-success-bg)
}

.SnackbarBlock--primary {
    background-color: var(--button-solid-primary-bg);
    color: var(--button-solid-primary-color, #FFF);
}

.SnackbarBlock--ai {
    background-color: var(--button-solid-ai-bg);
    color: var(--button-solid-ai-color, #FFF);
}

.SnackbarBlock--danger {
    color: var(--messages-toast-danger-color);
    background-color: var(--messages-toast-danger-bg);
}

.SnackbarBlock--danger .SnackbarBlock__text-btn {
    color: var(--messages-toast-danger-btn);
}

.SnackbarBlock--danger .SnackbarBlock__text-btn:hover {
    color: var(--messages-toast-danger-btn-hover);
}

.SnackbarBlock--warning .SnackbarBlock__text-btn {
    color: var(--messages-toast-warning-btn);
}

.SnackbarBlock--warning .SnackbarBlock__text-btn:hover {
    color: var(--messages-toast-warning-btn-hover);
}

.SnackbarBlock--success .SnackbarBlock__text-btn {
    color: var(--messages-toast-success-btn);
}

.SnackbarBlock--success .SnackbarBlock__text-btn:hover {
    color: var(--messages-toast-success-btn-hover);
}

.SnackbarBlock--warning {
    color: var(--messages-toast-warning-color);
    background-color: var(--messages-toast-warning-bg);
}

.SnackbarBlock--info {
    color: var(--messages-toast-info-color);
    background-color: var(--messages-toast-info-bg);
}

.SnackbarBlock-header-line {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

@media screen and (min-width: 1250px) {
    .SnackbarBlock-header-line {
        align-items: center;
    }

}

.SnackbarBlock-header {
    display: flex;
    align-items: start;
}

.SnackbarBlock-icon {
    -webkit-margin-end: var(--lgc-space-075);
            margin-inline-end: var(--lgc-space-075);
    -webkit-padding-before: var(--lgc-space-025);
            padding-block-start: var(--lgc-space-025);
}

.SnackbarBlock-icon-close {
    -webkit-margin-start: var(--lgc-space-200);
            margin-inline-start: var(--lgc-space-200);
    color: var(--messages-toast-default-btn);
}

.SnackbarBlock-icon-close:hover {
    color: var(--messages-toast-default-btn-hover);
}

.SnackbarBlock--danger .SnackbarBlock-icon-close {
    color: var(--messages-toast-danger-btn);
}

.SnackbarBlock--danger .SnackbarBlock-icon-close:hover {
    color: var(--messages-toast-danger-btn-hover);
}

.SnackbarBlock--success .SnackbarBlock-icon-close {
    color: var(--messages-toast-success-btn);
}

.SnackbarBlock--success .SnackbarBlock-icon-close:hover {
    color: var(--messages-toast-success-btn-hover);
}

.SnackbarBlock--warning .SnackbarBlock-icon-close {
    color: var(--messages-toast-warning-btn);
}

.SnackbarBlock--warning .SnackbarBlock-icon-close:hover {
    color: var(--messages-toast-warning-btn-hover);
}

.SnackbarBlock--primary .SnackbarBlock-icon-close {
    color: var(--messages-toast-notification-btn);
}

.SnackbarBlock--primary .SnackbarBlock-icon-close:hover {
    color: var(--messages-toast-notification-btn-hover);
}

.SnackbarBlock--ai .SnackbarBlock-icon-close {
    color: var(--messages-toast-notification-btn);
}

.SnackbarBlock--ai .SnackbarBlock-icon-close:hover {
    color: var(--messages-toast-notification-btn-hover);
}
.Auth {
    --auth-width: 448px;
    display: flex;
    width: 100%;
    height: 100%;
}

.Auth-image-part {
    display: none;
    flex-basis: 63.030303%;
    flex-grow: 0;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
    .Auth-image-part {
        display: flex;
        background-position: center;
    }
}

.Auth-content-part {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    justify-content: space-between;
    padding: var(--lgc-space-300);
    flex-direction: column;
    background: var(--elevations-surface-default);
    min-width: 0;
    overflow: auto;
}

@media screen and (min-width: 768px) {
    .Auth-content-part {
        min-width: 576px;
        padding-block: calc((102 / 1080) * calc(var(--vh, 1vh) * 100));
    }
}


.Auth-logo-row {
    width: 100%;
    max-width: var(--auth-width);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.Auth-logo svg {
    width: 170px;
    height: 40px;
}

.Auth-form {
    max-width: var(--auth-width);
    width: 100%;
}

@media screen and (min-width: 1250px) {
    .Auth-form {
        -webkit-margin-before: var(--lgc-space-800);
                margin-block-start: var(--lgc-space-800);
    }
}

.Auth-logo-footer {
    display: inline-flex;
    width: 100%;
    max-width: 450px;
    justify-content: center;
    -webkit-padding-before: 26px;
            padding-block-start: 26px;
    text-align: right;
    height: 40px;
}

.Auth-wave {
    position: absolute;
}

.Auth-wave-horizontal {
    display: none;
}

.AuthModalHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.Auth-input + .Auth-input {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
}

.Auth-small-margin {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.Auth-back-row {
    text-align: right;
}

.Auth-back-btn {
    margin-inline: auto;
}

.Auth__inline-btn {
    -webkit-margin-start: var(--lgc-space-100);
            margin-inline-start: var(--lgc-space-100);
}

.Auth-text-line {
    text-align: right;
    font-size: 16px;
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);
    color: var(--text-tertiary, #64676F);
}

.Auth-btn {
    -webkit-margin-before: var(--lgc-space-150);
            margin-block-start: var(--lgc-space-150);
}

.Auth-policy-info {
    margin-block: var(--lgc-space-250);
    text-align: center;
}

.Auth-confirmation-message {
    color: var(--text-success);
}

.Auth-confirmation-message-header {
    -webkit-margin-before: var(--lgc-space-100);
            margin-block-start: var(--lgc-space-100);
}

.Auth-locked-ok-btn {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
}

.Auth-fill-info-line {
    display: flex;
    gap: var(--lgc-space-100);
    -webkit-margin-before: var(--lgc-space-400);
            margin-block-start: var(--lgc-space-400);
}

.Auth-fill-info-line__item {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 1;
}

.AuthModalBodyStart {
    -webkit-margin-before: var(--lgc-space-400);
            margin-block-start: var(--lgc-space-400);
}

.Auth-social-links {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lgc-space-100, 8px);
}

.Auth-pot {
    display: none;
}
.TextLink {
    border-radius: var(--button-btn-radius-md);
    cursor: pointer;
    color: var(--text-link);
}

.TextLink:hover {
    color: var(--text-link-hover);
}

.TextLink__inheritColor {
    color: inherit;
}

.TextLink__inheritColor:hover {
    color: inherit;
}

.TextLink--error {
    color: var(--fields-error-color);
}
.TextLink--error:hover {
    color: var(--fields-error-color);
    text-decoration: underline;
}
.MaterialUiInput {
    --help-text-height: 24px;
    --icon-size: 16px;
    --label-line-height: 1.25rem;
    --input-line-height: 24px;
    --vertical-center-shift: calc((var(--lgc-space-150) * 2 + var(--input-line-height)) / 2 - var(--label-line-height) / 2);
    --horizontal-intop-shift: calc(var(--lgc-space-200) - var(--lgc-space-050) + 1px);
    --border-width: 1px;

    display: inline-flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    box-sizing: border-box;
}


.MaterialUiInput--error, .MaterialUiInput--focused {
    --border-width: 2px
}

.MaterialUiInput--focused .MaterialUiInput__input {
    border-color: var(--fields-focus-color);
}

.MaterialUiInput--focused .MaterialUiInput__label {
    color: var(--fields-focus-color);
}

.MaterialUiInput--error .MaterialUiInput__label {
    color: var(--fields-error-color);
}


.MaterialUiInput__label {
    color: var(--text-secondary);
    display: block;
    transform-origin: top left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 24px);
    position: absolute;
    left: 0;
    top: 0;
    line-height: var(--label-line-height);

    transform: translate(var(--horizontal-intop-shift), calc(-1 * var(--label-line-height) / 2));
    transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,
    transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,
    max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,
    font-size 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
    z-index: 1;
    pointer-events: auto;
    -webkit-user-select: none;
            user-select: none;
    background: var(--fields-bg);
    padding: 0;
}

.MaterialUiInput__label--raised {
    padding: 0 var(--lgc-space-050)
}

.MaterialUiInput__label.MaterialUiInput--grayBackground {
    background-color: var(--elevations-surface-sunken, #F4F5F8);
}

.MaterialUiInput--empty:not(.MaterialUiInput--focused) .MaterialUiInput__label {
    transform: translate(var(--lgc-space-200), var(--vertical-center-shift));
    color: var(--text-placeholder);
}

.MaterialUiInput--full {
    width: 100%;
}

.MaterialUiInput__input {
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    letter-spacing: inherit;
    background: var(--fields-bg);
    color: var(--text-primary);
    border: var(--border-width) solid var(--fields-border-color);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    background: none;
    margin: 0;
    padding-block: calc(var(--lgc-space-150) - var(--border-width));
    -webkit-padding-start: calc(var(--lgc-space-200) - var(--border-width) + 1px);
            padding-inline-start: calc(var(--lgc-space-200) - var(--border-width) + 1px);
    -webkit-padding-end: calc(var(--lgc-space-250) - var(--border-width) + 1px);
            padding-inline-end: calc(var(--lgc-space-250) - var(--border-width) + 1px);
    display: block;
    min-width: 0;
    width: 100%;
    line-height: var(--input-line-height);
}

.MaterialUiInput__input:-webkit-autofill,
.MaterialUiInput__input:-webkit-autofill:hover,
.MaterialUiInput__input:-webkit-autofill:focus,
.MaterialUiInput__input:-webkit-autofill:active {
    -webkit-transition: background-color 0s 50000s;
    transition: background-color 0s 50000s;
    border-color: var(--fields-border-color) !important;
    background: var(--fields-bg) !important;
    color: var(--text-secondary) !important;
}

.MaterialUiInput--focused .MaterialUiInput__input:-webkit-autofill,
.MaterialUiInput--focused .MaterialUiInput__input:-webkit-autofill:hover,
.MaterialUiInput--focused .MaterialUiInput__input:-webkit-autofill:focus,
.MaterialUiInput--focused .MaterialUiInput__input:-webkit-autofill:active {
    border-color: var(--fields-focus-color) !important;
}


.MaterialUiInput--error .MaterialUiInput__input,
.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill,
.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill:hover,
.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill:focus,
.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill:active {
    border-color: var(--fields-error-color) !important;
    color: var(--fields-error-color) !important;
}

.MaterialUiInput--focused.MaterialUiInput--error .MaterialUiInput__input,
.MaterialUiInput--focused.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill,
.MaterialUiInput--focused.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill:hover,
.MaterialUiInput--focused.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill:focus,
.MaterialUiInput--focused.MaterialUiInput--error .MaterialUiInput__input:-webkit-autofill:active {
    border-color: var(--fields-error-color) !important;
    color: var(--fields-error-color) !important;
}


.MaterialUiInput__input:-webkit-autofill + .MaterialUiInput__label {
    transform: translate(18px, -6px) scale(0.75);
}

.MaterialUiInput__input-error {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--fields-error-color);
    -webkit-margin-before: var(--lgc-space-050);
            margin-block-start: var(--lgc-space-050);
}

.MaterialUiInput--error .MaterialUiInput__input {
    border-color: var(--fields-error-color);
    color: var(--text-primary);
}

.MaterialUiInput__input-error-icon {
    -webkit-margin-before: calc((var(--label-large-line-height) - var(--icon-size)) / 2);
            margin-block-start: calc((var(--label-large-line-height) - var(--icon-size)) / 2);
}

.MaterialUiInput__input-error-text {
    -webkit-padding-start: var(--lgc-space-050);
            padding-inline-start: var(--lgc-space-050);
}

.MaterialUiInput__input-show-pwd {
    position: absolute;
    height: 20px;
    top: 14px;
    right: var(--lgc-space-200);
    color: var(--fields-icon-color);
}
.SocialSignInRow {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
}

.SocialSignInRow__divider {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    text-align: center;
    white-space: nowrap; /* Prevents text wrapping */
}

.SocialSignInRow__divider:before,
.SocialSignInRow__divider:after {
    content: '';
    flex: 1;
    border-bottom: 2px solid var(--text-tertiary);
}

.SocialSignInRow__divider:before {
    -webkit-margin-end: var(--lgc-space-150);
            margin-inline-end: var(--lgc-space-150);
}

.SocialSignInRow__divider:after {
    -webkit-margin-start: var(--lgc-space-150);
            margin-inline-start: var(--lgc-space-150);
}

.SocialSignInRow__btn-row {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
    display: flex;
    gap: var(--lgc-space-250);
}

.SocialSignInRow__btn {
    flex: 1;
}
.SignUpByLink_modalBackground {
    background-image: url("/app/assets/images/sigh-up-by-link-DgaL_h6i.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.SignUpByLink_logo {
    color: var(--lgc-palette-neutral-99);
    margin: var(--lgc-space-400);
}

.SignUpByLink_Modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.SignUpByLink__buttonPart {
    -webkit-margin-before: var(--lgc-space-300);
            margin-block-start: var(--lgc-space-300);
    text-align: center;
}

.SignUpByLink-Auth-fill-info-line {
    -webkit-margin-before: var(--lgc-space-300);
            margin-block-start: var(--lgc-space-300);
    display: flex;
    gap: var(--lgc-space-100);
}

.SignUpByLink__bottomText {
    -webkit-margin-before: var(--lgc-space-250);
            margin-block-start: var(--lgc-space-250);
}
.RequestAccessHint {
    display: flex;
    flex-direction: column;
    gap: var(--lgc-space-200);
}

.RequestAccessHint__body {
    color: var(--lgc-palette-neutral-50);
}

.RequestAccessHint__team {
    align-self: flex-start;
    padding: var(--lgc-space-075) var(--lgc-space-150);
    border-radius: var(--radius-sm);
    background: var(--lgc-palette-neutral-variant-99);
    color: var(--lgc-palette-neutral-10);
}
.DemoPanel {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 4800;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
    pointer-events: none;
    max-width: 340px;
}

/* ── Badge / toggle ──────────────────────────────────────────────────────── */
.DemoPanel__badge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg-primary, #1a1d25);
    color: var(--text-on-dark, #f0f2f7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    pointer-events: all;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

.DemoPanel__badge:hover {
    background: #22273a;
    border-color: rgba(255, 255, 255, 0.18);
}

.DemoPanel__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #52c87a;
    flex-shrink: 0;
    animation: DemoPanel__pulse 2.5s ease-in-out infinite;
}

@keyframes DemoPanel__pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.DemoPanel__badge-persona {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    font-size: 0.75rem;
}

.DemoPanel__chevron {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 0.1rem;
}

/* ── Device switcher (always visible, no drawer needed) ─────────────────── */
.DemoPanel__devices {
    display: flex;
    gap: 2px;
    background: var(--bg-primary, #1a1d25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 3px;
    pointer-events: all;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.DemoPanel__deviceBtn {
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, background 0.12s;
}

.DemoPanel__deviceBtn:hover {
    color: #fff;
    background: #22273a;
}

.DemoPanel__deviceBtn--active {
    background: rgba(79, 110, 247, 0.2);
    color: #b0bffc;
}

/* ── Drawer (expanded state) ─────────────────────────────────────────────── */
.DemoPanel__drawer {
    background: var(--bg-primary, #1a1d25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    pointer-events: all;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    width: 100%;
}

.DemoPanel__section-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.38);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ── Persona switcher ────────────────────────────────────────────────────── */
.DemoPanel__personas {
    display: flex;
    gap: 0.35rem;
}

.DemoPanel__persona {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
    line-height: 1.25;
    text-align: center;
}

.DemoPanel__persona:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.18);
}

.DemoPanel__persona--active {
    background: rgba(79, 110, 247, 0.2);
    border-color: rgba(79, 110, 247, 0.55);
    color: #b0bffc;
}

.DemoPanel__persona--active:hover {
    background: rgba(79, 110, 247, 0.28);
    color: #c4d0fd;
}

.DemoPanel__persona-name {
    font-size: 0.775rem;
    font-weight: 600;
}

.DemoPanel__persona-role {
    font-size: 0.63rem;
    font-weight: 400;
    opacity: 0.75;
}

/* ── Action row ──────────────────────────────────────────────────────────── */
.DemoPanel__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.DemoPanel__btn {
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: opacity 0.12s, transform 0.1s;
    white-space: nowrap;
    line-height: 1.3;
}

.DemoPanel__btn:hover { opacity: 0.85; }
.DemoPanel__btn:active { transform: scale(0.97); }

.DemoPanel__btn--primary {
    background: var(--color-accent, #4f6ef7);
    color: #fff;
}

.DemoPanel__btn--ghost {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.DemoPanel__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.DemoPanel__select {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    outline: none;
    min-width: 0;
}

.DemoPanel__select:focus {
    border-color: rgba(255, 255, 255, 0.28);
}

.DemoPanel__select--full {
    width: 100%;
}

.DemoPanel__select option {
    background: #1a1d25;
    color: #f0f2f7;
}

/* ── Device preview overlay (tablet/mobile selected) ─────────────────────── */
.App__devicePreview {
    position: fixed;
    inset: 0;
    z-index: 4700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e9ebf1;
    overflow: auto;
    padding: 2rem;
}

.DeviceFrame__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.DeviceFrame__label {
    font-size: 0.75rem;
    color: #64676f;
}

.DeviceFrame__bezel {
    background: #1f2430;
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.DeviceFrame__iframe {
    border: none;
    border-radius: 16px;
    background: #fff;
    display: block;
}
.UnexpectedErrorMessage {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.UnexpectedErrorMessage_block {
    width: 562px;
    max-width: 100%;
    -webkit-padding-end: var(--lgc-space-400);
            padding-inline-end: var(--lgc-space-400);
}

.UnexpectedErrorMessage_options {
    -webkit-padding-start: var(--lgc-space-250);
            padding-inline-start: var(--lgc-space-250);
    margin-block: var(--lgc-space-150);
}

.UnexpectedErrorMessage_options li + li {
    -webkit-margin-before: var(--lgc-space-075);
            margin-block-start: var(--lgc-space-075);
}
.InTextLabel {
    display: inline-flex; /* Makes the element an inline-level block container */
    vertical-align: middle; /* Aligns the element vertically with the surrounding text */
    line-height: 20px;

    border-radius: var(--radius-sm);
    padding-inline: var(--lgc-space-100);
    padding-block: var(--lgc-space-025);
}

@media screen and (min-width: 1250px) {
    .InTextLabel {
        line-height: 24px;
    }
}

.InTextLabel--lg {
    padding: var(--lgc-space-100, 8px) var(--lgc-space-200, 16px);
}

.InTextLabel--sm {
    padding: var(--lgc-space-025, 2px) var(--lgc-space-100, 8px);
}

.InTextLabel__icon {
    -webkit-margin-end: var(--lgc-space-100);
            margin-inline-end: var(--lgc-space-100);
}


.InTextLabel--success {
    color: var(--label-success-color);
    background: var(--label-success-bg);
}

.InTextLabel--danger {
    color: var(--text-danger);
    background: var(--button-soft-danger-bg);
}

.InTextLabel--neutral {
    background-color: rgba(174, 175, 178, 0.15);
    color: var(--label-neutral-color, #50535B);
}

.InTextLabel--info {
    color: var(--text-link, #0E79D0);
    background: var(--button-soft-primary-bg, #E6F1FB);
}

.InTextLabel--warning {
    color: var(--button-soft-accent-color, #7A4F00);
    background: var(--button-soft-accent-bg, #FCEFD0);
}
.ModalConfirm {
    display: flex;
    width: 640px;
    min-width: 640px;
    max-width: 820px;
    padding: var(--lgc-space-400, 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lgc-space-400, 32px);
}

.ModalConfirm_title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--lgc-space-075);
}

.ModalConfirm--info .ModalConfirm_title {
    color: var(--messages-confirm-modals-primary, #0E79D0);
}

.ModalConfirm--neutral .ModalConfirm_title {
    color: var(--messages-confirm-modals-neutral, #282B33);
}

.ModalConfirm--danger .ModalConfirm_title {
    color: var(--messages-confirm-modals-danger, #CC2929);
}

.ModalConfirm--success .ModalConfirm_title {
    color: var(--messages-confirm-modals-success, #2A8743);
}

.ModalConfirm--warning .ModalConfirm_title {
    color: var(--messages-confirm-modals-accent, #FD8D11);
}

.ModalConfirm_content {
    color: var(--messages-confirm-modals-txt, #282B33);
}

.ModalConfirm_actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--lgc-space-150);
    -webkit-margin-before: var(--lgc-space-300);
            margin-block-start: var(--lgc-space-300);
    width: 100%;
}

.ModalConfirm_actions--reverse {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.FullScreenModalButton {
    flex-grow: 1;
    width: 100%;
}

@media screen and (min-width: 1250px) {

    .FullScreenModalButton {
        flex-grow: 0;
        width: auto;
    }
}/* min-width: 0 lets this shrink below its content width when it's itself a
   flex item in a constrained row (e.g. Audits-cardFooter next to the row
   actions) — without it, a flex item's default min-width:auto keeps it at
   its intrinsic (unwrapped-name) width and the name below just overflows
   instead of truncating, no matter what ellipsis rules it carries. */
.AssigneeTag { display: inline-flex; align-items: center; gap: var(--lgc-space-100, 8px); font-weight: 500; min-width: 0; }

.AssigneeTag-roleIcon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--elevations-surface-sunken, #f4f5f8);
    color: var(--text-secondary, #64676f);
}

/* flex: 1 1 auto + min-width: 0 makes this the one part of the tag that
   shrinks (avatar/icon stay fixed via their own flex: 0 0 auto) — white-space:
   nowrap is required for text-overflow: ellipsis to have any effect at all;
   without it the name wraps to a second line instead of truncating. */
.AssigneeTag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

/* Compact variant — see AssigneeTagProps.size. De-emphasizes the tag next to a
   more prominent sibling (e.g. AuditProgressTable's card-footer score). The
   role icon shrinks via its own size prop passed by AssigneeTag.tsx; the
   avatar can't (BGAvatar's size enum bottoms out at 24px, this component's
   existing default — see AssigneeTag.tsx), so it's shrunk here instead, with
   .AssigneeTag--sm .Avatar.Avatar--24 out-specificity-ing Avatar.css's own
   same-specificity .Avatar.Avatar--24 rule (see that file's comment on why
   compound selectors are required against MUI Joy's Avatar root class). */
.AssigneeTag--sm { gap: var(--lgc-space-075, 6px); font-weight: 400; }
.AssigneeTag--sm .AssigneeTag-roleIcon { width: 18px; height: 18px; }
.AssigneeTag--sm .Avatar.Avatar--24 { width: 18px; height: 18px; font-size: 9px; }
.AssigneeTag--sm .AssigneeTag-name { font-size: 12px; color: var(--text-secondary, #64676f); }
.HoverCard {
    position: absolute;
    z-index: 4750;
}
.TaskStatusMarker {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    /* Wider than a plain icon gap would need — the count badge overflows past the
       icon's own box (it's absolutely positioned), so a small margin here still
       let it visually crowd the task name right after it. */
    margin-right: 14px;
    cursor: default;
}

.TaskStatusMarker__anchor {
    display: inline-flex;
    align-items: center;
}

.TaskStatusMarker--overdue .TaskStatusMarker__icon {
    color: var(--schedule-cell-danger, #D63333);
}

.TaskStatusMarker--corrective .TaskStatusMarker__icon {
    color: var(--lgc-palette-accent-40, #e0a21b);
}

/* Blue rather than red/orange - schedule-ended isn't a failure state like
   overdue or corrective, just an administrative one (renew the schedule or
   archive the task), so it gets the neutral-informational palette instead of
   a danger/warning tone. */
.TaskStatusMarker--schedule_ended .TaskStatusMarker__icon {
    color: var(--lgc-palette-primary-40, #006FC2);
}

.TaskStatusMarker__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--schedule-cell-danger, #D63333);
    color: #FFF;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    font-weight: 700;
}

/* Multi-reason marker - a filled circle with the number of reasons, in the most
   severe reason's colour. Same 16px footprint as the icon so the task name
   doesn't shift between single- and multi-reason rows. */
.TaskStatusMarker__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    color: #FFF;
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
}

.TaskStatusMarker--overdue .TaskStatusMarker__count {
    background: var(--schedule-cell-danger, #D63333);
}

.TaskStatusMarker--corrective .TaskStatusMarker__count {
    background: var(--lgc-palette-accent-40, #e0a21b);
}

.TaskStatusMarker--schedule_ended .TaskStatusMarker__count {
    background: var(--lgc-palette-primary-40, #006FC2);
}
.TaskOverdueDetailsCard {
    display: flex;
    flex-direction: column;
    width: -webkit-max-content;
    width: max-content;
    min-width: 272px;
    background: var(--elevations-surface-raised, #FFF);
    color: var(--text-primary, #282B33);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--box-shadow-medium);
    overflow: hidden;
}

.TaskOverdueDetailsCard__header {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-150, 12px);
    padding: var(--lgc-space-150, 12px) var(--lgc-space-200, 16px);
    background: var(--schedule-cell-danger-bg, #FDEAEA);
}

.TaskOverdueDetailsCard__headerIconWrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.TaskOverdueDetailsCard__headerIcon {
    color: var(--schedule-cell-danger, #D63333);
}

.TaskOverdueDetailsCard__headerBadge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--schedule-cell-danger, #D63333);
    color: #FFF;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
}

.TaskOverdueDetailsCard__headerText {
    color: var(--schedule-cell-danger, #D63333);
}

.TaskOverdueDetailsCard__list {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.TaskOverdueDetailsCard__row {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-150, 12px);
    padding: var(--lgc-space-150, 12px) var(--lgc-space-200, 16px);
}

.TaskOverdueDetailsCard__row + .TaskOverdueDetailsCard__row {
    border-top: 1px solid var(--divider-neutral, #E6E9F1);
}

.TaskOverdueDetailsCard__row--clickable {
    cursor: pointer;
}

.TaskOverdueDetailsCard__row--clickable:hover {
    background: var(--contextmenu-item-hover-bg, #F4F5F8);
}

.TaskOverdueDetailsCard__rowIcon {
    flex: 0 0 auto;
    color: var(--schedule-cell-danger, #D63333);
}

.TaskOverdueDetailsCard__rowText {
    flex: 1 1 auto;
    min-width: 0;
}

.TaskOverdueDetailsCard__rowOverdue {
    color: var(--schedule-cell-danger, #D63333);
}

.TaskOverdueDetailsCard__rowChevron {
    flex: 0 0 auto;
    color: var(--text-placeholder, #82858D);
}

.TaskOverdueDetailsCard__summary {
    display: flex;
    flex-direction: column;
    gap: var(--lgc-space-075, 6px);
    padding: var(--lgc-space-150, 12px) var(--lgc-space-200, 16px);
}

.TaskOverdueDetailsCard__summaryLabel {
    color: var(--text-secondary, #50535B);
}

.TaskOverdueDetailsCard__summaryRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lgc-space-150, 12px);
}

.TaskOverdueDetailsCard__summaryPill {
    flex: 0 0 auto;
    padding: 2px var(--lgc-space-100, 8px);
    border-radius: 999px;
    background: var(--schedule-cell-danger-bg, #FDEAEA);
    color: var(--schedule-cell-danger, #D63333);
    white-space: nowrap;
}

.TaskOverdueDetailsCard__footer {
    display: flex;
    align-items: center;
    gap: var(--lgc-space-075, 6px);
    padding: var(--lgc-space-100, 8px) var(--lgc-space-200, 16px);
    border-top: 1px solid var(--divider-neutral, #E6E9F1);
    background: var(--elevations-surface-sunken, #F4F5F8);
    color: var(--text-secondary, #50535B);
    white-space: nowrap;
}

.TaskOverdueDetailsCard__footerIcon {
    flex: 0 0 auto;
    color: var(--text-secondary, #50535B);
}

.TaskOverdueDetailsCard__remindWrap {
    padding: 0 var(--lgc-space-200, 16px) var(--lgc-space-150, 12px);
}

/* Inside HoverCard's mobile bottom sheet the card keeps its own rounded
   corners and sits inset within ModalBase's normal padding — it doesn't bleed
   to the sheet's edges. Only drops its own box-shadow (ModalBase already
   provides the sheet's elevation, so a second shadow would just double up)
   and widens to fill the available width. Rows get taller for a thumb-sized
   tap target, and the header drops its red fill since the icon/text are
   still red and the fill isn't needed for contrast. */
@media screen and (max-width: 480px) {
    .TaskOverdueDetailsCard {
        width: 100%;
        min-width: 0;
        box-shadow: none;
    }

    /* No tinted background on phones, so the divider comes back to separate
       the header from the first row (on the tint it was just extra noise). */
    .TaskOverdueDetailsCard__header {
        background: none;
        border-bottom: 1px solid var(--divider-neutral, #E6E9F1);
    }

    .TaskOverdueDetailsCard__row {
        padding: var(--lgc-space-200, 16px);
        min-height: 48px;
    }

    .TaskOverdueDetailsCard__summary {
        padding: var(--lgc-space-200, 16px);
    }

    .TaskOverdueDetailsCard__remindWrap {
        padding: 0 var(--lgc-space-200, 16px) var(--lgc-space-200, 16px);
    }
}