/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 25px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fafefe;
  --accent-2: #f2fbfa;
  --accent-3: #dff8f6;
  --accent-4: #cbf3ef;
  --accent-5: #b6eae5;
  --accent-6: #9fded8;
  --accent-7: #81cdc7;
  --accent-8: #50b8b1;
  --accent-9: #009e97;
  --accent-10: #00918b;
  --accent-11: #007f79;
  --accent-12: #0c3d3a;

  --accent-a1: #00cccc05;
  --accent-a2: #00b19d0d;
  --accent-a3: #00c8b820;
  --accent-a4: #00c5b134;
  --accent-a5: #00b6a549;
  --accent-a6: #00a89860;
  --accent-a7: #009a8e7e;
  --accent-a8: #00988eaf;
  --accent-a9: #009e97;
  --accent-a10: #00918b;
  --accent-a11: #007f79;
  --accent-a12: #003330f3;

  --accent-contrast: #fff;
  --accent-surface: #effaf9cc;
  --accent-indicator: #009e97;
  --accent-track: #009e97;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0047 189.2);
      --accent-2: oklch(98.1% 0.0089 189.2);
      --accent-3: oklch(96.1% 0.0269 189.2);
      --accent-4: oklch(93.5% 0.0417 189.2);
      --accent-5: oklch(90% 0.0539 189.2);
      --accent-6: oklch(85.6% 0.064 189.2);
      --accent-7: oklch(79.7% 0.076 189.2);
      --accent-8: oklch(72.1% 0.0968 189.2);
      --accent-9: oklch(63.1% 0.1092 189.2);
      --accent-10: oklch(59% 0.1092 189.2);
      --accent-11: oklch(53% 0.1092 189.2);
      --accent-12: oklch(32.7% 0.0502 189.2);

      --accent-a1: color(display-p3 0.0235 0.7569 0.7569 / 0.016);
      --accent-a2: color(display-p3 0.0196 0.6471 0.5569 / 0.044);
      --accent-a3: color(display-p3 0.0039 0.7059 0.6706 / 0.106);
      --accent-a4: color(display-p3 0.0039 0.7059 0.6392 / 0.173);
      --accent-a5: color(display-p3 0.0039 0.6471 0.5843 / 0.244);
      --accent-a6: color(display-p3 0.0039 0.5804 0.5333 / 0.326);
      --accent-a7: color(display-p3 0.0039 0.5255 0.4863 / 0.428);
      --accent-a8: color(display-p3 0 0.5059 0.4627 / 0.577);
      --accent-a9: color(display-p3 0 0.4667 0.4314 / 0.726);
      --accent-a10: color(display-p3 0 0.4157 0.3922 / 0.753);
      --accent-a11: color(display-p3 0 0.349 0.3255 / 0.785);
      --accent-a12: color(display-p3 0 0.1412 0.1333 / 0.891);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9451 0.9804 0.9765 / 0.8);
      --accent-indicator: oklch(63.1% 0.1092 189.2);
      --accent-track: oklch(63.1% 0.1092 189.2);
    }
  }
}


.light, :root {
  --grayscale-1: #fbfdfc;
  --grayscale-2: #f7f9f8;
  --grayscale-3: #eef1f0;
  --grayscale-4: #e6e9e8;
  --grayscale-5: #dfe2e0;
  --grayscale-6: #d7dad9;
  --grayscale-7: #cbcfcd;
  --grayscale-8: #b8bcba;
  --grayscale-9: #868e8b;
  --grayscale-10: #7c8481;
  --grayscale-11: #5f6563;
  --grayscale-12: #1a211e;

  --grayscale-a1: #00804004;
  --grayscale-a2: #00402008;
  --grayscale-a3: #002d1e11;
  --grayscale-a4: #001f1519;
  --grayscale-a5: #00180820;
  --grayscale-a6: #00140d28;
  --grayscale-a7: #00140a34;
  --grayscale-a8: #000f0847;
  --grayscale-a9: #00110b79;
  --grayscale-a10: #00100a83;
  --grayscale-a11: #000a07a0;
  --grayscale-a12: #000805e5;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #868e8b;
  --grayscale-track: #868e8b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.986 0.992 0.988);
      --grayscale-2: color(display-p3 0.97 0.977 0.974);
      --grayscale-3: color(display-p3 0.935 0.944 0.94);
      --grayscale-4: color(display-p3 0.904 0.913 0.909);
      --grayscale-5: color(display-p3 0.875 0.885 0.88);
      --grayscale-6: color(display-p3 0.844 0.854 0.849);
      --grayscale-7: color(display-p3 0.8 0.811 0.806);
      --grayscale-8: color(display-p3 0.725 0.738 0.732);
      --grayscale-9: color(display-p3 0.531 0.556 0.546);
      --grayscale-10: color(display-p3 0.492 0.515 0.506);
      --grayscale-11: color(display-p3 0.377 0.395 0.389);
      --grayscale-12: color(display-p3 0.107 0.129 0.118);

      --grayscale-a1: #00804004;
      --grayscale-a2: #00402008;
      --grayscale-a3: #002d1e11;
      --grayscale-a4: #001f1519;
      --grayscale-a5: #00180820;
      --grayscale-a6: #00140d28;
      --grayscale-a7: #00140a34;
      --grayscale-a8: #000f0847;
      --grayscale-a9: #00110b79;
      --grayscale-a10: #00100a83;
      --grayscale-a11: #000a07a0;
      --grayscale-a12: #000805e5;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.531 0.556 0.546);
      --grayscale-track: color(display-p3 0.531 0.556 0.546);
    }
  }
}


.dark {
  --accent-1: #000;
  --accent-2: #0a1514;
  --accent-3: #0a2927;
  --accent-4: #023836;
  --accent-5: #0a4643;
  --accent-6: #155652;
  --accent-7: #1e6864;
  --accent-8: #217e78;
  --accent-9: #009e97;
  --accent-10: #00918b;
  --accent-11: #56d1c9;
  --accent-12: #aaefe9;

  --accent-a1: #00000000;
  --accent-a2: #7afff315;
  --accent-a3: #3ffff329;
  --accent-a4: #0afff638;
  --accent-a5: #25fff546;
  --accent-a6: #3ffff456;
  --accent-a7: #4afff668;
  --accent-a8: #43fff37e;
  --accent-a9: #00fff49e;
  --accent-a10: #00fff591;
  --accent-a11: #69fff5d1;
  --accent-a12: #b5fff9ef;

  --accent-contrast: #fff;
  --accent-surface: #142a2880;
  --accent-indicator: #009e97;
  --accent-track: #009e97;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0118 189.2);
      --accent-2: oklch(18.5% 0.0162 189.2);
      --accent-3: oklch(25.8% 0.0364 189.2);
      --accent-4: oklch(30.9% 0.0525 189.2);
      --accent-5: oklch(35.8% 0.0578 189.2);
      --accent-6: oklch(41.1% 0.0628 189.2);
      --accent-7: oklch(47.2% 0.0711 189.2);
      --accent-8: oklch(53.8% 0.0834 189.2);
      --accent-9: oklch(63.1% 0.1092 189.2);
      --accent-10: oklch(59% 0.1092 189.2);
      --accent-11: oklch(78.9% 0.1092 189.2);
      --accent-12: oklch(90.5% 0.0694 189.2);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.5686 0.9961 0.9451 / 0.083);
      --accent-a3: color(display-p3 0.4784 1 0.9765 / 0.157);
      --accent-a4: color(display-p3 0.3843 1 0.9804 / 0.216);
      --accent-a5: color(display-p3 0.451 1 0.9725 / 0.271);
      --accent-a6: color(display-p3 0.4941 1 0.9647 / 0.334);
      --accent-a7: color(display-p3 0.5176 1 0.9725 / 0.404);
      --accent-a8: color(display-p3 0.5098 1 0.9686 / 0.487);
      --accent-a9: color(display-p3 0.451 1 0.9608 / 0.612);
      --accent-a10: color(display-p3 0.4431 1 0.9647 / 0.561);
      --accent-a11: color(display-p3 0.5882 1 0.9725 / 0.808);
      --accent-a12: color(display-p3 0.7804 1 0.9843 / 0.93);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0941 0.1647 0.1569 / 0.5);
      --accent-indicator: oklch(63.1% 0.1092 189.2);
      --accent-track: oklch(63.1% 0.1092 189.2);
    }
  }
}


.dark {
  --grayscale-1: #101211;
  --grayscale-2: #171918;
  --grayscale-3: #202221;
  --grayscale-4: #272a29;
  --grayscale-5: #2e3130;
  --grayscale-6: #373b39;
  --grayscale-7: #444947;
  --grayscale-8: #5b625f;
  --grayscale-9: #63706b;
  --grayscale-10: #717d79;
  --grayscale-11: #adb5b2;
  --grayscale-12: #eceeed;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f0f2f108;
  --grayscale-a3: #f3f5f412;
  --grayscale-a4: #f2fefd1a;
  --grayscale-a5: #f1fbfa22;
  --grayscale-a6: #edfbf42d;
  --grayscale-a7: #edfcf73c;
  --grayscale-a8: #ebfdf657;
  --grayscale-a9: #dffdf266;
  --grayscale-a10: #e5fdf674;
  --grayscale-a11: #f4fefbb0;
  --grayscale-a12: #fdfffeed;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #63706b;
  --grayscale-track: #63706b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.064 0.07 0.067);
      --grayscale-2: color(display-p3 0.092 0.098 0.094);
      --grayscale-3: color(display-p3 0.128 0.135 0.131);
      --grayscale-4: color(display-p3 0.155 0.164 0.159);
      --grayscale-5: color(display-p3 0.183 0.193 0.188);
      --grayscale-6: color(display-p3 0.218 0.23 0.224);
      --grayscale-7: color(display-p3 0.269 0.285 0.277);
      --grayscale-8: color(display-p3 0.362 0.382 0.373);
      --grayscale-9: color(display-p3 0.398 0.438 0.421);
      --grayscale-10: color(display-p3 0.453 0.49 0.474);
      --grayscale-11: color(display-p3 0.685 0.709 0.697);
      --grayscale-12: color(display-p3 0.927 0.933 0.93);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f0f2f108;
      --grayscale-a3: #f3f5f412;
      --grayscale-a4: #f2fefd1a;
      --grayscale-a5: #f1fbfa22;
      --grayscale-a6: #edfbf42d;
      --grayscale-a7: #edfcf73c;
      --grayscale-a8: #ebfdf657;
      --grayscale-a9: #dffdf266;
      --grayscale-a10: #e5fdf674;
      --grayscale-a11: #f4fefbb0;
      --grayscale-a12: #fdfffeed;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.398 0.438 0.421);
      --grayscale-track: color(display-p3 0.398 0.438 0.421);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 158, 151, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(228, 231, 235, 1);
  --sidebar-background: initial;
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(0, 158, 151, 1);
  --background: rgba(0, 0, 0, 1);
  --border: rgba(102, 102, 102, 1);
  --sidebar-background: initial;
  --header-background: rgba(0, 0, 0, 1);
  --card-background: initial;
  --theme-color: #000;
}

/** Define accent color variable */
:root {
  --accent-color: #009E97;
  --link-color: #000000;
  --header-border-color: #E4E7EB;
  --sidebar-border-color: #101010;
  --sidebar-icon-color: #F0F0F0;
  --text-highlight-color: #C9E3FE;
  --active-sidebar-link-color: #101010;
  --secondary-button-background-color: #000000;
  --secondary-button-text-color: #ffffff;
  --other-button-background-color: #E8E8E8;
  --other-button-text-color: #333333;
}

.dark {
  --accent-color: #009E97;
  --link-color: #ffffff;
  --header-border-color: #666666;
  --sidebar-border-color: #ffffff;
  --sidebar-icon-color: #595959;
  --text-highlight-color: rgba(201, 227, 254, 0.3);
  --active-sidebar-link-color: #ffffff;
  --secondary-button-background-color: #ffffff;
  --secondary-button-text-color: #000000;
  --other-button-background-color: #505050;
  --other-button-text-color: #ffffff;
}

/* Add separator after each tab, including the last one */
.fern-header-tabs [data-radix-collection-item]::after {
 content: "|";
 position: absolute;
 left: calc(100% + 0px); /* Moved separator closer to the tab */
 top: 25%; 
 transform: translateY(-50%);
 color: var(--grayscale-a11) !important;
 font-weight: normal;
 pointer-events: none;
 font-size: var(--text-sm);
 line-height: var(--text-sm--line-height);
 opacity: 0.6;
 z-index: 1;
}

[data-theme=default]#fern-header [data-radix-collection-item][data-state=active] {
 color: var(--accent-color) !important;
}
/* 
  API Reference Tab Styles
  These styles set the fonts, sizes, and colors for headers, code blocks, and links
  within the API reference tab (fern-layout-reference-content).
*/
/* Style for h3 headers in the API reference tab */
.fern-layout-reference-content .prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    /* Set header color, font size, and font family */
    color: var(--tw-prose-headings);
    font-size: 32px;
    font-family: 'Cash Sans Medium', 'CashSans-Medium', 'CashSans', 'Inter', Arial, sans-serif;
    font-weight: 600;
}

/* Style for inline code in the API reference tab */
.fern-layout-reference-content .prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
    /* Set code color and font size */
    color: var(--tw-prose-code);
    font-size: 14px;
    font-weight: 600;
}


.fern-prose.prose.max-w-none.break-words .fern-mdx-link {
 color: var(--link-color) !important;
 font-weight: 500;
 font-size: 16px;
 text-decoration: underline;
}

.fern-layout-guide .fern-mdx-link svg.external-link-icon {
  color: var(--link-color) !important;
}

.fern-layout-guide .fern-mdx-link {
 color: var(--link-color) !important;
 font-weight: 500;
 font-size: 16px;
 text-decoration: underline;
}

/* Style for links in the API reference tab */
.fern-layout-guide .prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
  /* Set link color, font weight, font size, and underline */
  color: var(--link-color);
  font-weight: 500;
  font-size: 16px;
  text-decoration: underline;
}

.fern-layout-reference-content .prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
 color: var(--link-color);
 font-weight: 500;
 font-size: 16px;
 text-decoration: underline;
}

.fern-layout-reference-content .prose {
 font-size: 16px !important;
}


/* Add top border to the tabs header */
.fern-header-tabs {
  border-top: 1px solid;
  width: 100%;
  box-sizing: border-box;
  border-top-color: var(--header-border-color) !important;
 }

/* Mobile styles for tablet screens (max-width: 768px) */
@media (max-width: 768px) {

 /* Home page specific styles for tablet */
 .home-page-specific .fern-card {
   width: 100% !important;
   max-width: 650px;
   font-size: 14px;
   border-radius: 12px;
   margin-bottom: -16px;
   padding: 16px;
   margin-left: auto;
   margin-right: auto;
 }

 .home-page-specific .centered-content {
   max-width: 100%;
   padding: 0 16px;
 }

}

h1 {
 font-family: 'CashSans-Medium', sans-serif;
 src: url('../assets/fonts/CashSans-AllStyles-v1.000-OTF-MAC/CashSans-Medium.otf') format('opentype');
 font-size: 44px;
 font-weight: 501;
} 

h2 {
  font-family: 'CashSans-Medium', sans-serif;
  src: url('../assets/fonts/CashSans-AllStyles-v1.000-OTF-MAC/CashSans-Medium.otf') format('opentype');
  font-size: 32px;
  font-weight: 501;
} 

/* Fix chevron arrow color for subsections when selected */
.fern-sidebar-link[data-state=active] svg {
  color: var(--sidebar-border-color) !important;
}
.fern-sidebar-link .expand-indicator[data-state=active] {
  background-color: var(--sidebar-icon-color) !important;
}

/* Clearpay Callout styling */
.fern-callout {
  border: 1px solid;
  border-bottom: 3px solid;
  background: none !important;
}

.fern-callout[data-intent="note"] {
  color: var(--accent-color);
}
.fern-callout[data-intent="note"] svg {
  color: inherit !important;
}

/* Font face declaration for CashSans-Regular */
@font-face {
  font-family: 'CashSans-Regular', sans-serif;
  src: url('../fonts/CashSans-AllStyles-v1.000-OTF-MAC/CashSans-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Table of Contents (TOC) styling with Cash Sans Regular 16px */
.mb-2.last\:mb-0,
.mb-2.last\:mb-0 *,
.mb-2.last\:mb-0 a,
.mb-2.last\:mb-0 span {
  font-family: 'CashSans-Regular', sans-serif !important;
  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
}

/* Override any var(--text-sm) usage in TOC items */
.mb-2.last\:mb-0,
.mb-2.last\:mb-0 * {
  font-size: 16px !important;
} 

/* Text selection styling */
::selection {
  background-color: var(--text-highlight-color) !important;
  color: inherit !important;
}

::-moz-selection {
  background-color: var(--text-highlight-color) !important;
  color: inherit !important;
}


/* API Property Key styling with Cash Mono Medium 18px, bold */
.fern-api-property-key {
  font-family: 'CashMono-Medium', monospace !important;
  font-size: 18px !important;
  /* font-weight: bold !important; */
} 

/* Make the selected item in the search bar light gray */
#fern-search-desktop-command[data-cmdk-root] [data-cmdk-item][data-selected=true]:not([data-conversation-id]) {
  background-color: var(--sidebar-icon-color) !important;
}

/* Hide feedback on home page */
body:has(.home-page-specific) .fern-page-actions {
  display: none !important;
}

/* Home page specific styles - scoped to prevent affecting other pages */
.home-page-specific .fern-button {
    align-items: center;
    border-radius: 9999px;
    font-weight: bold !important;
}

.home-page-specific .first-button {
    background-color: var(--other-button-background-color);
    color: var(--other-button-text-color);
    width: 150px;
    height: 44px;
    gap: 8px;
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: bold !important;
    text-align: center;
    white-space: nowrap;
}

.home-page-specific .short-button {
    background-color: var(--other-button-background-color);
    color: var(--other-button-text-color);
    width: 120px;
    height: 44px;
    gap: 8px;
    border-radius: 9999px;
    padding: 10px 20px;
    font-weight: bold !important;
    text-align: center;
    white-space: nowrap;
}

.home-page-specific .second-button {
    background-color: var(--secondary-button-background-color);
    color: var(--secondary-button-text-color);
    min-width: 109px;
    height: 44px;
    gap: 8px;
    border-radius: 9999px;
    padding: 10px 24px;
    opacity: 1;
    font-weight: bold !important;
    text-align: center;
    white-space: nowrap;
    width: auto;
}


.home-page-specific .fern-card {
  width: 700px;
  font-size: 16px;
  border-radius: 16px;
  border: 1.5px solid #959595;
  margin-bottom: -24px; /* Negative margin to bring cards closer together */
  min-height: auto !important;
  height: auto !important;
}

/* Galaxy Z Fold 5 specific styles (344 x 882) */
  
.home-page-specific .fern-card:last-of-type {
  margin-bottom: 0; /* Remove margin after last card */
}

/* Target all card elements more specifically */
.home-page-specific .centered-content .fern-card {
  margin-bottom: -35px !important;
}

/* Base styles for buttons within cards */
.home-page-specific .fern-card .first-button,
.home-page-specific .fern-card .second-button,
.home-page-specific .fern-card button {
  font-size: 14px !important;
}

/* Media query styles that override the general .first-button rule */
@media (max-width: 344.9px) and (max-height: 882.9px), 
       (max-width: 345px) and (max-height: 883px) {

  .home-page-specific .first-button,
  .home-page-specific .second-button,
  .home-page-specific .short-button {
    font-size: 12px !important;
    padding: 8px 16px !important;
    min-height: 32px !important;
    border-radius: 9999px !important;
    line-height: 1.2 !important;
    width: auto !important;
    height: auto !important;
  }

}

.home-page-specific .centered-content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-page-specific .centered-content h1 {
  margin-top: 0;
  margin-bottom: 2px;
}

.home-page-specific .centered-content h2 {
  width: 100%;
  text-align: left;
}

/* Sidebar link styling - default state */
.fern-sidebar-link {
 color: var(--active-sidebar-link-color) !important;
}

/* Sidebar link styling for selected/active state */
.fern-sidebar-link[data-state="active"] {
 background-color: var(--sidebar-icon-color) !important;
 color: var(--active-sidebar-link-color) !important;
 font-weight: normal !important;
}

/* Also handle hover state for better UX */
.fern-sidebar-link:hover {
 background-color: var(--sidebar-icon-color) !important;
 color: var(--sidebar-border-color) !important;
}
.fern-sidebar-link:focus-visible {
 background-color: var(--sidebar-icon-color) !important;
 color: var(--sidebar-border-color) !important;
}

/* Ensure the sidebar right border line extends the full height of the viewport */
#fern-sidebar[data-viewport=desktop] {
 border-right: 1px solid var(--header-border-color);
 min-height: 100vh;
}

#fern-search-button, #fern-ask-ai-button {
 border-radius: 9999px;
}

.fern-scroll-area-scrollbar {
  color: var(--accent-color);
}

@media (min-width: 769px) {

 #fern-search-button {
   font-size: 0px; 
   position: relative; /* Add this to enable absolute positioning */
   width: 950px !important; /* Make the bar longer */
   min-width: 320px !important;
   max-width: 100% !important;
 }

 #fern-search-button::before {
   content: "Search Developer Resources";
   font-size: 14px;
   position: absolute;
   left: 32px; 
   top: 50%;
   transform: translateY(-50%);
   color: var(--grayscale-a11);
   pointer-events: none;
 }

 #fern-search-button .fern-kbd {
  position: absolute;
  left: 230px; 
  top: 50%;
  transform: translateY(-50%);
}

}

/* Invert black and white colors */
.invert {
  filter: invert(1) hue-rotate(180deg);
}

/* White background for images with a bit of padding */
.white-bg-img{
  background-color: #ffffff !important;
  padding: 8px !important;
  border-radius: 12px !important;
}

/* White background for mermaid diagrams */
.mermaid-diagram {
  background-color: #ffffff !important;
  padding: 16px !important;
  border-radius: 8px !important;
}