userContent.css

/* ----- Included functions ----- */
@import url("thin_scrollbar_windows10.css");
@import url("remove_homepage_shortcut_title_text.css");
@import url("circular_homepage_shortcuts.css");

/*=====================================================================
================= D A R K   T H E M E   C O L O R S ===================
=====================================================================*/

@-moz-document url("about:home"), url("about:newtab"), url("about:privatebrowsing"),
               url-prefix("about:preferences"), url-prefix("about:addons"), url-prefix("about:support"),
               url("about:config"), url("about:profiles"), url("about:downloads"), url-prefix("about:logins"),
               url-prefix(about:firefoxview) {
  @media (prefers-color-scheme: dark) {
    :root {
      --firefoxcss-main-bg-color: hsl(240, 2%, 13%);
      --firefoxcss-main-bg-colorNova: hsl(240, 2%, 10%);
      --firefoxcss-item-bg-color: hsl(240, 2%, 20%);
      --firefoxcss-item-hover-bg-color: hsl(240, 2%, 25%);
      --firefoxcss-text-color: hsl(0, 0%, 100%);
      --firefoxcss-other-color: hsl(290, 21%, 20%);

      /* ----- Private Page Colors ----- */
      --firefoxcss-private-search-bg-color: hsla(275, 13%, 33%, 0.5);
      --firefoxcss-private-search-top-border: hsla(275, 13%, 40%, 0.6);
      --firefoxcss-private-search-fill: hsl(275, 13%, 53%);

      --firefoxcss-private-search-hover: hsla(275, 13%, 43%, 0.5);
      --firefoxcss-private-search-border-hover: hsla(275, 13%, 50%, 0.7);
      --firefoxcss-private-search-hover-fill: hsl(275, 13%, 63%);

      --firefoxcss-private-search-text: var(--firefoxcss-private-search-fill);
      --firefoxcss-private-search-text-hover: var(--firefoxcss-private-search-hover-fill);
      --firefoxcss-private-search-caret: hsl(290, 21%, 80%);

      --firefoxcss-private-search-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 6px 6px hsl(0deg 0% 0% / 0.075), 0 12px 12px hsl(0deg 0% 0% / 0.095);

      /* ----- Normal Page Colors ----- */
      --firefoxcss-search-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.095);

      --firefoxcss-search-color: rgb(251, 251, 254, 1);
      --firefoxcss-search-border-top-color: 1px solid #ffffff26;
      --firefoxcss-search-border-top-hover: 1px solid #97979791;
      --firefoxcss-search-outline: transparent;
      --firefoxcss-search-outline-hover: transparent;
      --firefoxcss-search-text-fill: #ffffff5e;
      --firefoxcss-search-bar-text-color: rgba(251, 251, 254, 1);
      --firefoxcss-search-bar-fill-icon-hover: rgba(251, 251, 254, 0.8);

      --firefoxcss-shortcut-item-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075),
        inset 0px 1px 0px 0px rgba(255, 255, 255, 0.11), inset 0 0px 0px 1px rgba(255, 255, 255, 0.025);
      --firefoxcss-shortcut-item-box-shadow-hover:
        0 1px 1px hsl(0deg 0% 0% / 0.085), 0 2px 2px hsl(0deg 0% 0% / 0.085), 0 5px 5px hsl(0deg 0% 0% / 0.095),
        0 10px 10px hsl(0deg 0% 0% / 0.095), 0 18px 18px hsl(0deg 0% 0% / 0.095),
        inset 0 1px 0px 0px rgba(255, 255, 255, 0.14), inset 0 0px 0px 1px rgba(255, 255, 255, 0.1);
      --firefoxcss-shortcut-item-top-border: #ffffff26;
      --firefoxcss-shortcut-item-top-border-hover: #97979791;

      /*       Overlay color when shortcut customization popup menu open */
      --newtab-overlay-color: color-mix(in srgb, var(--firefoxcss-main-bg-color) 65%, transparent) !important;

      --firefoxcss-customize-menu: hsla(210, 10%, 20%, 0.3);
      --firefoxcss-customize-menu-dropdown: #1e1e1e80;
      --firefoxcss-customize-menu-border: 1px solid rgba(255, 255, 255, 0.1);
      --newtab-background-color-secondary: var(--firefoxcss-customize-menu) !important;
      --firefoxcss-customize-menu-secondary-popup: hsla(210, 10%, 10%, 1);
      --firefoxcss-input-focus: white;
      /*  no changes */
      --firefoxcss-shortcut-item-active: hsla(0, 0%, 10%, 0.7);
      --firefoxcss-shortcut-item-context-menu: #13131380;
      --firefoxcss-shortcut-item-context-menu-border: hsla(0, 0%, 70%, 0.145);
      --firefoxcss-shortcut-item-context-menu-separator: #ffffff29;
      --firefoxcss-extra-search-bar-when-scroll: #1e1e1e8c;
      --firefoxcss-context-menu-three-dots: hsla(240, 2%, 80%, 0.7);
      --firefoxcss-context-menu-three-dots-hover: hsla(0, 0%, 80%, 0.1);
      --firefoxcss-settings-wheel-bg-color-hover: hsl(240, 2%, 30%);
      --firefoxcss-shortcut-search-icon-color: #7ae3f463;
      --firefoxcss-weather-widget: hsla(240, 2%, 10%, 0.2);
      --firefoxcss-weather-widget-hover: hsla(240, 2%, 35%, 0.3);

      /* ----- Firefox View color changes ----- */
      --fxview-background-color: var(--firefoxcss-main-bg-color) !important;
      --fxview-background-color-secondary: var(--firefoxcss-item-bg-color) !important;
      --firefoxcss-firefoxview-sticky-color: hsla(240, 2%, 13%, 0.75) !important;
      --firefoxcss-firefoxview-search-color: hsla(240, 2%, 35%, 0.5) !important;
    }
  }

  /*=====================================================================
================= L I G H T   T H E M E   C O L O R S =================
=====================================================================*/

  @media (prefers-color-scheme: light) {
    :root {
      --firefoxcss-main-bg-color: hsl(200, 5%, 90%);
      --firefoxcss-main-bg-colorNova: hsl(240, 2%, 10%);
      --firefoxcss-item-bg-color: hsl(200, 5%, 96%);
      --firefoxcss-item-hover-bg-color: hsl(200, 0%, 100%);
      --firefoxcss-text-color: hsl(0, 0%, 0%);
      --firefoxcss-other-color: hsl(290, 21%, 20%);

      /* ----- Private Page Colors ----- */
      --firefoxcss-private-search-bg-color: hsla(275, 13%, 33%, 0.5);
      --firefoxcss-private-search-top-border: hsla(275, 13%, 40%, 0.6);
      --firefoxcss-private-search-fill: hsl(275, 13%, 53%);

      --firefoxcss-private-search-hover: hsla(275, 13%, 43%, 0.5);
      --firefoxcss-private-search-border-hover: hsla(275, 13%, 50%, 0.7);
      --firefoxcss-private-search-hover-fill: hsl(275, 13%, 63%);

      --firefoxcss-private-search-text: var(--firefoxcss-private-search-fill);
      --firefoxcss-private-search-text-hover: var(--firefoxcss-private-search-hover-fill);
      --firefoxcss-private-search-caret: hsl(290, 21%, 80%);

      --firefoxcss-private-search-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 6px 6px hsl(0deg 0% 0% / 0.075), 0 12px 12px hsl(0deg 0% 0% / 0.095);

      /* ----- Normal Page Colors ----- */
      --firefoxcss-search-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.015), 0 2px 2px hsl(0deg 0% 0% / 0.015), 0 4px 4px hsl(0deg 0% 0% / 0.015),
        0 8px 8px hsl(0deg 0% 0% / 0.015), 0 16px 16px hsl(0deg 0% 0% / 0.035);

      --firefoxcss-search-color: rgb(87, 87, 87, 1);
      --firefoxcss-search-border-top-color: 1px solid hsla(0, 0%, 100%, 0.9);
      --firefoxcss-search-border-top-hover: 1px solid hsla(0, 0%, 100%, 0.6);
      --firefoxcss-search-outline: transparent;
      --firefoxcss-search-outline-hover: transparent;
      --firefoxcss-search-text-fill: rgba(10, 10, 10, 0.25);
      --firefoxcss-search-bar-text-color: rgba(10, 10, 10, 0.65);
      --firefoxcss-search-bar-fill-icon-hover: rgba(0, 0, 0, 0.5);

      --firefoxcss-shortcut-item-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.025), 0 2px 2px hsl(0deg 0% 0% / 0.025), 0 4px 4px hsl(0deg 0% 0% / 0.025),
        0 8px 8px hsl(0deg 0% 0% / 0.025), 0 16px 16px hsl(0deg 0% 0% / 0.025);
      --firefoxcss-shortcut-item-top-border: hsla(0, 0%, 100%, 0.9);
      --firefoxcss-shortcut-item-top-border-hover: hsla(0, 0%, 100%, 0.6);

      --newtab-overlay-color: color-mix(in srgb, var(--firefoxcss-main-bg-color) 65%, transparent) !important;

      --firefoxcss-customize-menu: hsla(0, 0%, 100%, 0.75);
      --firefoxcss-customize-menu-bg-image: none;
      --firefoxcss-customize-menu-dropdown: #fdfdfd80;
      --firefoxcss-customize-menu-border: 1px solid rgba(255, 255, 255, 0.2);
      --newtab-background-color-secondary: var(--firefoxcss-customize-menu) !important;
      --firefoxcss-customize-menu-secondary-popup: hsla(200, 10%, 100%, 1);
      --firefoxcss-input-focus: black; /*  no changes */
      --firefoxcss-shortcut-item-active: hsla(200, 15%, 85%, 0.4);
      --firefoxcss-shortcut-item-context-menu: hsla(0, 0%, 95%, 0.4);
      --firefoxcss-shortcut-item-context-menu-border: hsla(0, 0%, 100%, 0.5);
      --firefoxcss-shortcut-item-context-menu-separator: hsla(0, 0%, 50%, 0.2);
      --firefoxcss-extra-search-bar-when-scroll: hsla(0, 0%, 10%, 0.3);
      --firefoxcss-context-menu-three-dots: hsla(200, 10%, 20%, 0.5);
      --firefoxcss-context-menu-three-dots-hover: hsla(0, 0%, 10%, 0.1);
      --firefoxcss-settings-wheel-bg-color-hover: hsl(0, 0%, 100%);
      --firefoxcss-shortcut-search-icon-color: #2896a870;

      /* ----- Firefox View color changes ----- */
      --fxview-background-color: var(--firefoxcss-main-bg-color) !important;
      --fxview-background-color-secondary: var(--firefoxcss-item-bg-color) !important;
      --firefoxcss-firefoxview-sticky-color: hsla(200, 10%, 95%, 0.5) !important;
      --firefoxcss-firefoxview-search-color: hsla(200, 5%, 100%, 0.95) !important;
    }
  }

  :root {
    --firefoxcss-backdrop-filter: none !important;
    --firefoxcss-search-outline-offset: 0px !important;
  }

  body {
    --newtab-search-icon: url("chrome://global/skin/icons/search-glass.svg") !important;
  }
}

@-moz-document url("about:privatebrowsing") {
  
  @media not -moz-pref("browser.nova.enabled") {
      body {
        background-color: var(--firefoxcss-main-bg-color) !important;
        background-size: auto;
        background-size: cover !important; 
      }
    
      html.private {
        --background-color-canvas: var(--firefoxcss-main-bg-color) !important;
        background: var(--firefoxcss-main-bg-color) !important;
      }
  }
  
  @media -moz-pref("browser.nova.enabled") {
    html.private {
    background: var(--firefoxcss-main-bg-colorNova) !important;
    }
  }
  
 

  /*   Disable random text in private tab */
  .showPrivate.showSearch {
    > .nova-tagline,
    > .nova-subheader {
      display: none !important;
    }
  }

  .search-inner-wrapper {
    margin-block-start: 3rem !important;
  }

  /*   Removes new tab page "leave no traces.." info container */
  .showPrivate.showSearch.container .info-border {
    display: none !important;
  }

  /* html.private {
		background-color: #1e1e1e80 !important;
		background-image: url(ASSETS/icons/.jpg) !important ;
		background-size: cover  !important;
	} */

  .search-handoff-button {
    appearance: none !important;
    background-color: var(--firefoxcss-private-search-bg-color) !important;
    box-shadow: none !important;
    border: 1px solid var(--firefoxcss-private-search-top-border) !important;
    border-radius: 14px !important;
    fill: var(--firefoxcss-private-search-fill) !important;
    box-shadow: var(--firefoxcss-private-search-box-shadow) !important;
    transition:
      background-color 100ms ease-in,
      border-color 100ms ease-in,
      fill 100ms ease-in !important;
    backdrop-filter: blur(24px) !important;
  }

  .search-handoff-button:hover,
  .search-handoff-button:focus,
  .search-handoff-button:active {
    background-color: var(--firefoxcss-private-search-hover) !important;
    border-top: 1px solid var(--firefoxcss-private-search-border-hover) !important;
    fill: var(--firefoxcss-private-search-hover-fill) !important;
  }

  .search-handoff-button .fake-textbox {
    color: var(--firefoxcss-private-search-text) !important;
    opacity: 0.8 !important;
    transition:
      color 100ms ease-in,
      opacity 100ms ease-in !important;
  }

  .search-handoff-button:active > .fake-textbox,
  .search-handoff-button:hover > .fake-textbox,
  .search-handoff-button:focus > .fake-textbox {
    color: var(--firefoxcss-private-search-text-hover) !important;
  }

  .search-handoff-button .fake-caret {
    background: var(--firefoxcss-private-search-caret) !important;
  }

  .logo-and-wordmark .wordmark {
    fill: #8f25d1 !important;
    opacity: 0.9 !important;
  }

  .private .search-inner-wrapper {
    height: 42px !important;
    /* 48px default */
  }

  /* Size of the search icon in searchbox */
  .search-handoff-button {
    background-size: 20px !important;
  }
}

@-moz-document url("about:home"),
url("about:newtab") {
  /*   Adjust new tab background so it works with different picked color theme */
  :root:not([style*="--newtab-background-color"]) {
    body {
      --newtab-background-color: var(--firefoxcss-main-bg-color) !important;
      background-size: cover !important;
    }
  }

  /*   :root[style*="--newtab-background-color: rgb(30, 17, 27)"] {
        --my-background: #...;
        --my-text: #...;
    }
   */

  /* HIDING ELEMENTS in NEW TAB */
  /*  Disable phone button in new tab */
  .mobileDownloadPromoWrapper.
   /* Remove photo attribution when wallpaper for new tab is set */
  .wallpaper-attribution,
  /*  Hide privacy notice button below top stories section */
  .discovery-stream .ds-navigation-privacy {
    display: none !important;
  }

  /* For background blur */
  /* .outer-wrapper {
    background-color: #1e1e1e88 !important;
    backdrop-filter: blur(24px) !important;
  } */

  .search-handoff-button {
    appearance: none !important;
    background-color: var(--firefoxcss-item-bg-color) !important;
    border: none !important;
    box-shadow: none !important;
    border-top: var(--firefoxcss-search-border-top-color) !important;
    border-radius: 12px !important;
    outline: 1px solid var(--firefoxcss-search-outline) !important;
    outline-offset: var(--firefoxcss-search-outline-offset) !important;
    backdrop-filter: var(--firefoxcss-backdrop-filter);
    box-shadow: var(--firefoxcss-search-box-shadow) !important;
    fill: var(--firefoxcss-search-text-fill) !important;
    color: var(--firefoxcss-search-bar-text-color) !important;
    transition:
      background-color 200ms ease,
      border-color 200ms ease,
      fill 200ms ease !important;
    padding-inline-start: 48px !important;
  }

  @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    .urlbar .urlbar-background {
      appearance: none !important;
      background-color: var(--firefoxcss-item-bg-color) !important;
      border: none !important;
      box-shadow: none !important;
      border-top: var(--firefoxcss-search-border-top-color) !important;
      border-radius: 14px !important;
      outline: 1px solid var(--firefoxcss-search-outline) !important;
      outline-offset: var(--firefoxcss-search-outline-offset) !important;
      backdrop-filter: var(--firefoxcss-backdrop-filter);
      box-shadow: var(--firefoxcss-search-box-shadow) !important;
      fill: var(--firefoxcss-search-text-fill) !important;
      color: var(--firefoxcss-search-bar-text-color) !important;
      transition:
        background-color 200ms ease,
        border-color 200ms ease,
        fill 200ms ease !important;
    }
  }

  /* ================== Customization Menu ========================================== */

  @media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    /* In customization menu, the go back arrow */
    menu .customize-menu .arrow-button {
      margin-top: 3px !important;
      margin-left: 5px !important;
      opacity: 0.7 !important;
    }

    /* Remove static color from close button wrapper in customization menu */
    .customize-menu .close-button-wrapper {
      background-color: transparent !important;
    }
  }
  
  @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    
/*     Theme picker menu modification */
    #themes-management-panel > .themes-mgmt-panel theme-picker {
      --button-border-radius: 12px !important;
    }
    
    moz-segmented-control[data-l10n-id="theme-picker-mode"] {
       --segmented-control-border-radius: 12px !important;
    }
}
  

  /* Line Dividers in customization menu */
  .home-section .divider {
    --border-color: light-dark(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 100%, 0.15)) !important;
    margin: 0 0rem !important;
  }

  .personalizeButtonWrapper .customize-menu {
    border: var(--firefoxcss-customize-menu-border) !important;
    border-radius: 1rem !important;
    margin: 1rem !important;
    /*     filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3)) !important; */
    height: unset !important;
    backdrop-filter: blur(18px);
    /*! outline: 1px solid #00000078 !important; */
    /*! outline-offset: 1px; */
    @media (prefers-color-scheme: dark) {
      filter: saturate(0.9) brightness(1.1);
      backdrop-filter: blur(32px);
    }
    min-height: auto !important;
  }

  .activity-stream.lightWallpaper {
    @media (prefers-color-scheme: dark) {
      .customize-menu.customize-animate-enter-done,
      .customize-menu.customize-animate-enter-active {
        box-shadow: none !important;
      }
    }
  }

  /*   Hide and show elements for wallpaper selection slide*/
  .wallpapers-section ~ *,
  .wallpapers-section .category-header,
  .wallpapers-section #wallpapers-toggle,
  .wallpapers-section .category-list,
  .appearance-section.section > h2,
  .appearance-section.section > theme-picker,
  .appearance-section.section > #themes-management-panel > moz-box-button,
  .manage-settings-footer,
  .close-button-wrapper {
    .customize-menu:has(.category.wallpaper-list) &,
    .customize-menu:has(#themes-management-panel .themes-mgmt-panel) & {
      opacity: 0 !important;
      visibility: hidden !important;
      transform: translateX(100px) !important;
      transition:
        opacity 0.2s ease,
        transform 0.3s ease,
        visibility 1s 0.2s !important;
    }

    .customize-menu:not(:has(.customize-menu-content.subpanel-open)) & {
      opacity: 1 !important;
      visibility: visible !important;
      transform: initial !important;
      transition:
        opacity 0.4s ease,
        transform 0.2s ease;
    }
  }

  /* Customization Widget submenu (if enabled - studies) */
  #widgets-management-panel .widgets-mgmt-panel,
/*   When enabled browser.newtabpage.activity-stream.discoverystream.sections.enabled */
  #pocket-section .sections-mgmt-panel {
    background-color: light-dark(hsla(200, 5%, 90%, 0.96), hsla(240, 2%, 10%, 0.96)) !important;
    height: 100% !important;
  }

  /* Wallpaper selection submenu */
  .customize-menu .category.wallpaper-list {
    background-color: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-block-start: 0px !important;
    padding-top: var(--space-large) !important;
  }

  /* Disable background and gradient from customization menu footer */
  .customize-menu-content .manage-settings-footer::before,
  .manage-settings-footer {
    background: none !important;
  }

  /* Try removing overflow scrollbar from showing */
  .customize-menu:has(.category.wallpaper-list) {
    overflow-x: hidden !important;
  }

  .home-section {
    overflow-x: hidden !important;
  }

  .customize-menu .customize-menu-content {
    overflow-x: hidden !important;
  }

  /* ================== NEW TAB SHORTCUTS ========================================== */

  /* Shortcuts */
  .top-sites .top-site-outer .tile {
    background-color: var(--firefoxcss-item-bg-color) !important;
    border: none !important;
    box-shadow: var(--firefoxcss-shortcut-item-box-shadow) !important;
    transition:
      background-color 150ms ease,
      border-color 150ms ease !important;
    border-radius: 12px !important;
  }

  .top-sites .top-site-outer .top-site-button:hover .tile {
    background-color: var(--firefoxcss-item-hover-bg-color) !important;
    box-shadow: var(--firefoxcss-shortcut-item-box-shadow-hover) !important;
  }

  /* For old non Nova theme */
  @media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    /* Removes bg from shortcut hover */
    .top-sites-list:not(.dnd-active) .top-site-outer:hover:not(.active),
    /* Removes bg from shortcut icon - maybe not used anymore */
    .top-site-outer .top-site-icon {
      background-color: transparent !important;
    }

    /* On shortcut focus/edit */
    .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus) {
      background-color: transparent !important;
    }

    .search-wrapper .logo-and-wordmark {
      opacity: 0.9 !important;
      order: 1 !important;
      margin-bottom: 0 !important;
      flex: 1 !important;
      flex-basis: 20% !important;
    }

    .search-wrapper .logo-and-wordmark .logo {
      background-size: 60px !important;
      height: 60px !important;
      width: 60px !important;
    }

    .search-wrapper .logo-and-wordmark .wordmark {
      background-size: 132px !important;
      height: 42px !important;
      margin-inline-start: 12px !important;
      width: 144px !important;
    }
  }

  /*   ---------------------------------------------------------------------------  */
  /*   ---------------------------------------------------------------------------  */
  /*   ======= NOVA LAYOUT  ======================================================  */
  /*   ---------------------------------------------------------------------------  */
  @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    .container :is(.top-sites, .search-wrapper, .logo-and-wordmark-wrapper) {
      --space-medium: 1rem !important;
      --col-width: calc(340px / 4) !important;
      --size-item-large: 36px !important;
    }

    .search-wrapper,
    .logo-and-wordmark {
      margin-block: var(--space-medium) !important;
    }

    /* Fix margins for searchbar in newtab, broken in v151.0.4 */
    @media (height > 700px) {
      .container .search-wrapper {
        padding-block: 0px !important;
      }
    }

    /* add some margin between top site rows */
    .top-sites .top-site-outer {
      margin-block-end: 0.4rem !important;
    }

    .logo-and-wordmark-wrapper {
      margin-bottom: 0px !important;
    }

    /* Make searchbar more aligned with top sites */
    .search-wrapper .search-inner-wrapper {
      padding-inline: 6px !important;
    }

    /* Shortcut title label */
    .top-site-outer .title .title-label {
      /* width: 100px !important;
       padding: 0 0.25rem !important; */
    }

    /* Firefox logo size change     */
    .logo-and-wordmark-wrapper .logo-and-wordmark .logo {
      background-size: 50px !important;
    }

    /* Always show firefox logo text */
    .logo-and-wordmark .wordmark {
      display: inline-block !important;
      margin-inline-start: 0.5rem !important;
    }

    /*  Disable shortcuts hover effect    */
    .top-site-outer .tile {
      height: calc(var(--size-item-large) * 2) !important;
      width: calc(var(--size-item-large) * 2) !important;
    }

    /* Changes when logo is not in the corner which is used with top stories enabled     */
    .container.logo-in-content {
      /* Force the parent container height to fix vertical alignment */
      height: calc(100vh - var(--space-xlarge)) !important;

      /* Ensure the grid stretches fully and kill native push-down padding */
      align-content: stretch !important;
      padding-block: 0 !important;
    }

    /* ------------------------------------------------------------------
     - BASE LAYOUT 
     ------------------------------------------------------------------ */
    .content > .logo-and-wordmark-wrapper,
    .content > .search-wrapper {
      /* Take up all available horizontal space */
      grid-column: 1 / -1 !important;
      justify-self: center !important;
      /* Matches native Top Sites default width (6 cols) */

      max-width: none !important;

      display: flex !important;
      align-items: center !important;

      /* Click-through safety wrapper as both sit on the same row 
       on top of each other*/
      pointer-events: none !important;
    }

	/* Fixes searchbar invisible height */
	.nova-enabled.container > .search-wrapper {
      grid-row: 2/span 1 !important;
      pointer-events: none !important;
    }

    .container .search-wrapper {
      display: flex !important;
      justify-self: center !important;
    }

    .container .logo-and-wordmark,
    .container .search-inner-wrapper {
      pointer-events: auto !important;
      margin: 0 !important;
    }

    /* Logo Centering & Margin spacing */
    .container .logo-and-wordmark-wrapper {
      justify-content: center !important;
    }

    .content > .search-inner-wrapper {
      width: 100% !important;
    }

    /* Shortcuts wrapper resets */
    .content .top-sites-list-wrapper,
    .content .edit-topsites-wrapper {
      grid-column: 1 / -1 !important;
    }

    .container {
      grid-template-rows: var(--row-height) var(--row-height) 1fr !important;
    }

    .container .content {
      grid-row: 3 / -1 !important;
      grid-column: 2 !important;
      margin-block: 0 !important;
    }

    /* ======= WIDE SCREEN ======================================================  */
    @media (min-width: 673px) {
      /*       Move layout up by 2 rows when top stories not enabled */
      @media not -moz-pref("browser.newtabpage.activity-stream.feeds.section.highlights") {
        .container.logo-in-content .content {
          align-self: center !important;
          transform: translateY(calc(var(--row-height) * -2)) !important;
        }
      }
    }

    /* ------------------------------------------------------------------
     - MODIFICATION WHEN LOGO IS NOT IN CONTENT
     ------------------------------------------------------------------ */
    .container:not(.logo-in-content):has(.sidebar-inline-start .logo-and-wordmark-wrapper) {
      @media (min-width: 673px) {
        .search-wrapper {
          margin-block-start: 0.55rem !important;
        }
      }

      @container outer-grid (inline-size < calc(1000px + 6.75rem)) {
        .sidebar-inline-start .logo-and-wordmark .wordmark {
          display: none !important;
        }
      }
    }

    /* ------------------------------------------------------------------
------- FIXING LAYOUT
------------------------------------------------------------------ */

    /* Number of shortcuts */
    .container .top-sites-list {
      grid-template-columns: repeat(6, auto) !important;
    }

    .container .top-sites-list .nova-hide-for-xs,
    .container .top-sites-list .nova-hide-for-s {
      display: none !important;
    }

    @container outer-grid (inline-size < calc(560px + 5.25rem)) {
      .container:has(> .search-wrapper) .search-inner-wrapper {
        /*       .container .logo-and-wordmark-wrapper */
        width: calc(3 * var(--col-width) + 2 * var(--space-medium)) !important;
      }
      .content .top-sites-list {
        grid-template-columns: repeat(3, var(--col-width)) !important;
        gap: var(--space-medium) !important;
        justify-content: center !important;
      }
    }

    @container outer-grid (inline-size >= calc(560px + 5.25rem)) {
      .container:has(> .search-wrapper) .search-inner-wrapper {
        width: calc(6 * var(--col-width) + 5 * var(--space-medium)) !important;
      }
    }

    @container outer-grid (inline-size >= calc(880px + 8.25rem)) {
      .container .top-sites-list {
        grid-template-columns: repeat(8, auto) !important;
      }
      .container .top-sites-list .nova-hide-for-xs,
      .container .top-sites-list .nova-hide-for-s {
        display: inline-block !important;
      }

      .container:has(> .search-wrapper) .search-inner-wrapper {
        width: calc(8 * var(--col-width) + 7 * var(--space-medium)) !important;
      }
    }

    /* Move container content down when small widget is enabled with logo not in content     */
    .container:not(.logo-in-content):has(.weather-widget.small-widget) .search-wrapper {
      grid-row: 3 / span 1 !important;
    }

    .container:not(.logo-in-content):has(.weather-widget.small-widget) .content {
      grid-row: 4 / -1 !important;
    }

    /* ------------------------------------------------------------------
     - DYNAMIC LAYOUT
     - Only when logo is part of the content
 ------------------------------------------------------------------ */
    /*  Default size  */
    /* This affects only when logo is part of the content */
    .content > .search-wrapper .search-inner-wrapper {
      width: calc(6 * var(--col-width) + 5 * var(--space-medium)) !important;
    }

    /* Transition to smaller layout */
    @container outer-grid (inline-size < calc(560px + 5.25rem)) {
      .content > .search-wrapper .search-inner-wrapper {
        width: calc(3 * var(--col-width) + 2 * var(--space-medium)) !important;
      }
    }

    /* This affects only when logo is part of the content */
    @container content-grid (inline-size >= calc(600px + 5.25rem)) {
      /* Pin to Row 1 & match Firefox 8-column Top Sites width */
      .content > .logo-and-wordmark-wrapper,
      .content > .search-wrapper {
        grid-row: 1 !important;
        width: calc(8 * var(--col-width) + 7 * var(--space-medium)) !important;
        max-width: none !important;
      }

      /* Align logo left */
      .content > .logo-and-wordmark-wrapper {
        justify-content: flex-start !important;
      }
      /* Align searchbar right */
      .content > .search-wrapper {
        justify-content: flex-end !important;
      }

      /* Shrink search bar to 6 columns so it fits nicely alongside the logo */
      .content > .search-wrapper .search-inner-wrapper {
        width: calc(6 * var(--col-width) + 5 * var(--space-medium)) !important;
      }

      @media -moz-pref("browser.newtabpage.activity-stream.hideLogo") {
        .content > .search-wrapper .search-inner-wrapper {
          width: calc(8 * var(--col-width) + 7 * var(--space-medium)) !important;
        }
      }

      /* Top sites sit directly underneath on Row 2 */
      .content:has(> .search-wrapper) .top-sites-list-wrapper,
      .content:has(> .search-wrapper) .edit-topsites-wrapper {
        grid-row: 2 !important;
      }
    }

    /* ------------------------------------------------------------------
   - EXTRA-SMALL SCREENS 
   ------------------------------------------------------------------ */
    @media (max-width: 672px) {
      /* Redefine the Parent Grid */
      .container {
        grid-template-columns: 1fr 1fr 1fr !important;
      }

      .content {
        grid-row: 3 / -1 !important;
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        align-self: center !important;
      }

      .container:not(.logo-in-content):has(.sidebar-inline-start .logo-and-wordmark-wrapper) {
        .logo-and-wordmark-wrapper .logo-and-wordmark {
          margin-block-end: 0px !important;
        }
      }

      /* Top-Left: Logo */
      .sidebar-inline-start {
        grid-row: 1 / span 1 !important;
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        align-self: center !important;
      }

      /* Top-Right: Weather Widget (Spans 2 Rows) */
      .sidebar-inline-end {
        grid-row: 1 / span 2 !important;
        grid-column: 3 !important;
        justify-self: flex-end !important;
      }

      /*       When weather widget is set to small and is fixed top right corner */
      @media -moz-pref("browser.newtabpage.activity-stream.widgets.weather.size", "small") {
        .container:has(.sidebar-inline-end .weather-widget):not(.logo-in-content) {
          .content {
            grid-row: 4 / -1 !important;
          }

          .search-wrapper {
            grid-column: 1 / -1 !important;
            grid-row: 3 / span 1 !important;
          }

          .sidebar-inline-start {
            grid-row: 1 / span 2 !important;
          }

          @media not -moz-pref("mod.firefox-logo.centered.with.top-stories.enabled") {
            &:not(.logo-in-content) .sidebar-inline-start {
              align-self: end !important;
            }
          }
        }
      }

      /* When weather widget is disabled */
      .container:not(:has(.sidebar-inline-end .weather-widget)) {
        &:not(.logo-in-content) .sidebar-inline-start {
        }
      }

      /* Narrow Content Shifts based on Weather Widget availability */
      .container.logo-in-content:not(:has(.sidebar-inline-end .weather-widget)) .content {
        transform: translateY(calc(var(--row-height) * -2)) !important;
      }

      @media -moz-pref("browser.newtabpage.activity-stream.widgets.weather.size", "small") {
        @media -moz-pref("browser.newtabpage.activity-stream.widgets.weather.enabled") and (min-height: 1051px) {
          /* ignore when Recent activity section enabled */
          @media not -moz-pref("browser.newtabpage.activity-stream.feeds.section.highlights") {
            .container.logo-in-content:has(.sidebar-inline-end .weather-widget) .content {
              transform: translateY(calc(var(--row-height) * -2)) !important;
            }
          }
        }
      }
    }
  }
  /*   --------------------------------------------------------------   */
  /*   --------------------------------------------------------------   */

  @media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    .outer-wrapper:not(.fixed-search) .search-wrapper {
      padding: 0px !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      align-items: center !important;
      align-content: space-around !important;
      gap: 20px 16px !important;
    }

    .body-wrapper .collapsible-section {
      padding-top: 20px !important;
    }

    .top-sites-list-wrapper .top-site-outer:not(.add-button) .tile .icon-wrapper {
      height: 48px !important;
      width: 48px !important;
    }

    .top-sites-list-wrapper .top-site-outer .tile {
      height: 80px !important;
      width: 80px !important;
    }
  }

  /* Icon over some default shortcuts */
  .top-site-outer .search-topsite {
    backdrop-filter: blur(8px) !important;
    background-color: var(--firefoxcss-shortcut-search-icon-color) !important;
  }

  .top-site-outer .top-site-button .title {
    opacity: 0.6 !important;
    transition: opacity 0.15s !important;
  }

  .top-site-outer .top-site-button:hover .title {
    opacity: 1 !important;
  }

  .top-site-outer .context-menu-button.icon:is(:active, :focus, :hover) {
    /*     fill: #f79743 !important; */
    background-color: var(--firefoxcss-context-menu-three-dots-hover) !important;
    backdrop-filter: blur(2px);
  }

  .top-site-outer .context-menu-button {
    fill: var(--firefoxcss-context-menu-three-dots) !important;
    inset-inline-end: 18px !important;
    top: -8px !important;

    @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
      top: -10px !important;
      inset-inline-end: 4px !important;
    }
  }

  .top-sites-list-wrapper .top-sites-list {
    row-gap: unset !important;
  }

  .top-site-outer .tile .default-icon {
    background-size: 48px !important;
    height: 48px !important;
    width: 48px !important;
  }

  @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    @media -moz-pref("browser.newtabpage.activity-stream.feeds.section.topstories") {
      .has-recommended-stories .wordmark {
        display: block !important;
      }

      .has-recommended-stories .logo-and-wordmark {
        position: initial !important;
      }
    }

    /*  Adjust new tab searchbar height */
    .search-wrapper .search-inner-wrapper {
      --urlbar-height: 42px !important;
      height: var(--urlbar-height) !important;
    }

    .urlbar-input-box {
      font-size: 14px !important;
    }

    .search-wrapper .search-inner-wrapper .urlbar {
      --urlbar-height: 42px !important;
      /*       min-height: 42px !important; */
    }

    .urlbar-background {
      .urlbar[in-page]:not([popover-open]) > & {
        background-clip: border-box !important;
      }
    }

    /*  Searchmode switcher padding */
    .urlbar[in-page] {
      --urlbar-input-container-padding: 6px !important;
    }

    /*  New tab searchmode switcher config   */
    .urlbar .searchmode-switcher {
      --button-background-color-muted-hover: light-dark(
        color-mix(in srgb, black 5%, transparent),
        color-mix(in srgb, white 15%, transparent)
      ) !important;
      --button-background-color-muted-active: light-dark(
        color-mix(in srgb, black 8%, transparent),
        color-mix(in srgb, white 25%, transparent)
      ) !important;
      --button-background-color-muted-selected: light-dark(
        color-mix(in srgb, black 5%, transparent),
        color-mix(in srgb, white 15%, transparent)
      ) !important;
      --button-background-color-muted-disabled: light-dark(
        color-mix(in srgb, black 2%, transparent),
        color-mix(in srgb, black 10%, transparent)
      ) !important;
      --button-background-color-muted: transparent !important;
    }

    /*   Remove purple outline when searchbar active    */
    .urlbar[popover-open][focused] > .urlbar-input-container {
      outline: none !important;
    }

    .urlbar[popover-open] > .urlbar-background {
      border: var(--urlbar-background-border-open);
      box-shadow: var(--urlbar-background-box-shadow-open);
      inset-inline: 0px !important;
      inset-block: 0px !important;
      /*    --urlbar-background-overhang-open: 2px !important;
   --urlbar-input-growth-open-inline: 0px !important;
   --urlbar-input-growth-open-block: 0px !important; */
      border-start-start-radius: var(--urlbar-background-border-top-radius-open);
      border-start-end-radius: var(--urlbar-background-border-top-radius-open);
      clip-path: none !important;
    }

    /*  inset-inline: calc(-1 * (var(--urlbar-background-overhang-open) + var(--urlbar-input-growth-open-inline)));
    inset-block: calc(-1 * (var(--urlbar-background-overhang-open) + var(--urlbar-input-growth-open-block))); */

    /*     Fixing searchbar dropdown */
    .urlbar .urlbarView-background {
      background-color: color-mix(in srgb, var(--firefoxcss-item-bg-color) 30%, transparent) !important;
      backdrop-filter: blur(22px);
      .activity-stream.lightWallpaper &,
      .activity-stream.darkWallpaper & {
        background-color: var(--firefoxcss-item-bg-color) !important;
        backdrop-filter: var(--firefoxcss-backdrop-filter);
      }
      box-shadow: none !important;
      border: none !important;
      border-top: 1px solid var(--firefoxcss-private-search-top-border) !important;
      border-radius: 12px !important;
      outline: 1px solid var(--firefoxcss-search-outline) !important;
      outline-offset: var(--firefoxcss-search-outline-offset) !important;
      box-shadow: var(--firefoxcss-search-box-shadow) !important;
      inset-block: 0px !important;
      inset-inline: -4px !important;
      clip-path: none !important;
    }

    :where(.urlbar:not([noresults])) > .urlbarView {
      padding-block: 6px !important;
      padding-inline: 2px !important;
    }

    .urlbarView {
      margin: 8px 4px !important;
      --urlbarView-row-border-radius: 12px !important;
    }

    /*  Border radius for searchmode switcher     */
    button#main-button:has(img, label) .button-background {
      border-radius: 10px !important;
    }

    /*    Drop arrow config */
    .searchmode-switcher .searchmode-switcher-dropmarker {
      fill: color-mix(in srgb, currentColor 60%, transparent) !important;
    }

    .search-handoff-button:hover {
      background-color: var(--firefoxcss-item-hover-bg-color) !important;
      border-top: var(--firefoxcss-search-border-top-hover) !important;
      outline: 1px solid var(--firefoxcss-search-outline-hover) !important;
      fill: var(--firefoxcss-search-bar-fill-icon-hover) !important;
    }

    .collapsible-section .card-outer {
      background-color: var(--firefoxcss-item-bg-color) !important;
    }

    .collapsible-section .card-outer .card-preview-image-outer {
      background-color: var(--firefoxcss-item-hover-bg-color) !important;
    }

    .compact-cards .card-outer .card-context {
      background-color: var(--firefoxcss-item-bg-color) !important;
    }
  }

  @media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    @media (max-width: 723px) {
      .outer-wrapper:not(.fixed-search) .newtab-main .search-wrapper {
        width: 346px !important;
        padding-inline: 14px !important;
      }
    }

    @media (min-width: 724px) {
      .outer-wrapper:not(.fixed-search) .newtab-main .search-wrapper {
        width: 680px !important;
      }

      .search-wrapper .logo-and-wordmark .logo {
        margin-inline-start: 8px !important;
      }
    }

    @media (min-width: 1122px) {
      .outer-wrapper:not(.fixed-search) .newtab-main .search-wrapper {
        width: 960px !important;
        /*        Make it smaller when stories and weather is enabled */
        @media -moz-pref("browser.newtabpage.activity-stream.feeds.section.topstories") {
          @media -moz-pref("browser.newtabpage.activity-stream.showWeather") {
            width: 780px !important;
          }
        }
        padding-inline: 20px !important;
      }
    }

    @media (min-width: 1400px) {
      .outer-wrapper:not(.fixed-search) .newtab-main .search-wrapper {
        width: 960px !important;
        padding-inline: 20px !important;
      }
    }

    .outer-wrapper:not(.fixed-search) .newtab-main .search-wrapper {
      margin-inline: auto !important;
      /*      padding-inline: 20px !important; */
    }

    @media -moz-pref("browser.newtabpage.activity-stream.feeds.section.topstories") {
      .has-recommended-stories .wordmark {
        display: block !important;
      }

      .has-recommended-stories .logo-and-wordmark {
        position: initial !important;
      }
    }

    .search-handoff-button,
    .search-wrapper input {
      background-size: 20px !important;
    }

    .search-wrapper .search-inner-wrapper {
      height: 42px !important;
      /* 52px default */
      order: 2 !important;
      flex: 3 !important;
      flex-basis: 60% !important;
      top: 4px !important;
    }

    /* When there is overflow because of the height, search bar gets fixed position */
    .outer-wrapper.fixed-search .search-wrapper {
      min-height: 60px !important;
      background-color: transparent !important;
      border-bottom: none !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

    .outer-wrapper.fixed-search .search-wrapper .search-inner-wrapper {
      top: 0 !important;
    }

    .search-handoff-button .fake-textbox {
      opacity: 0.5 !important;
      color: var(--firefoxcss-search-bar-text-color) !important;
      transition: opacity 0.4s !important;
    }

    .search-handoff-button:active > .fake-textbox,
    .search-handoff-button:hover > .fake-textbox,
    .search-handoff-button:focus > .fake-textbox {
      opacity: 0.8 !important;
    }

    .search-handoff-button:hover {
      background-color: var(--firefoxcss-item-hover-bg-color) !important;
      border-top: var(--firefoxcss-search-border-top-hover) !important;
      outline: 1px solid var(--firefoxcss-search-outline-hover) !important;
      outline-offset: 0px;
      fill: var(--firefoxcss-search-bar-fill-icon-hover) !important;
    }

    .collapsible-section .card-outer {
      background-color: var(--firefoxcss-item-bg-color) !important;
    }

    .collapsible-section .card-outer .card-preview-image-outer {
      background-color: var(--firefoxcss-item-hover-bg-color) !important;
    }

    .compact-cards .card-outer .card-context {
      background-color: var(--firefoxcss-item-bg-color) !important;
    }

    @media only screen and (max-width: 609px) {
      .ds-outer-wrapper-breakpoint-override main {
        width: 386px !important;
      }
    }

    @media only screen and (max-width: 385px) {
      .search-handoff-button {
        padding-top: 4px !important;
        padding-bottom: 6px !important;
      }

      .ds-outer-wrapper-breakpoint-override main {
        width: 266px !important;
      }
    }
  }

  /* ================== Weather widget mods ============================================ */

  @media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    .weatherButtonContextMenuWrapper .context-menu {
      background-color: hsla(240, 2%, 20%, 1) !important;
    }

    .activity-stream:not(.darkWallpaper, .lightWallpaper) {
      .weatherInfoLink {
        background-color: transparent !important;
        &:hover {
          background-color: var(--firefoxcss-weather-widget-hover) !important;
        }
      }
      .weatherButtonContextMenuWrapper {
        background-color: transparent !important;
        &:hover {
          background-color: var(--firefoxcss-weather-widget-hover) !important;
        }
      }
    }

    .weatherCard .weatherButtonContextMenuWrapper {
      opacity: 0 !important;
      width: 0px !important;
      visibility: collapse !important;
      transition:
        opacity 0.3s ease,
        width 0.3s ease,
        visibility 0s ease;
    }

    .weatherCard:hover .weatherButtonContextMenuWrapper,
    .weatherCard:has(.context-menu) .weatherButtonContextMenuWrapper {
      opacity: 1 !important;
      width: 50px !important;
      visibility: visible !important;
    }

    .weatherCard .weatherInfoLink {
      border-start-end-radius: var(--border-radius-medium) !important;
      border-end-end-radius: var(--border-radius-medium) !important;
    }

    .weatherCard:hover .weatherInfoLink,
    .weatherCard:has(.context-menu) .weatherInfoLink {
      border-start-end-radius: 0 !important;
      border-end-end-radius: 0 !important;
    }

    .weather .weatherSponsorText {
      display: none !important;
    }

    .weatherInfoLink {
      background-color: var(--firefoxcss-weather-widget) !important;
      &:hover {
        background-color: var(--firefoxcss-weather-widget-hover) !important;
      }
    }

    .weatherButtonContextMenuWrapper {
      background-color: var(--firefoxcss-weather-widget) !important;
      &:hover {
        background-color: var(--firefoxcss-weather-widget-hover) !important;
      }
    }

    .activity-stream.darkWallpaper .weatherInfoLink,
    .activity-stream.darkWallpaper .weatherButtonContextMenuWrapper {
      border: 1px solid hsla(0, 0%, 100%, 0.04) !important;
    }

    @media (prefers-color-scheme: light) {
      .activity-stream.darkWallpaper {
        .weatherCard {
          color-scheme: dark !important;
        }
        .weatherButtonContextMenuWrapper .context-menu {
          background-color: hsla(240, 2%, 95%, 1) !important;
        }
      }

      .activity-stream.lightWallpaper {
        .weatherButtonContextMenuWrapper .context-menu {
          background-color: hsla(240, 2%, 95%, 1) !important;
        }
      }
    }

    .weatherCard {
      backdrop-filter: blur(6px) !important;
    }

    .weatherButtonContextMenuWrapper::after {
      opacity: 0.1 !important;
      background-color: white !important;
    }

    .weatherButtonContextMenuWrapper:hover::after {
      opacity: 0 !important;
    }

    .weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after {
      opacity: 0 !important;
    }
  }

  /*   NOVA WEATHER WIDGET FIXES */
  @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    @media -moz-pref("browser.newtabpage.activity-stream.widgets.weather.size", "large") or -moz-pref("browser.newtabpage.activity-stream.widgets.weather.size", "medium") {
      .weather-widget.large-widget {
        .weather-container .forecast-row {
          padding-block-end: 2px !important;
        }
      }

      .weather-widget {
        .forecast-footer {
          display: none !important;
        }
      }
    }

    /*     Fix clock widget edit menu background color  */
    .clocks-widget .clocks-panel {
      backdrop-filter: blur(12px);
    }

    @media -moz-pref("browser.newtabpage.activity-stream.widgets.weather.size", "small") {
      /* Fixing overlap with searchbar */
      .container .weather-widget.small-widget {
        z-index: 4 !important;
      }

      .activity-stream {
        --firefoxcss-weather-widget-bg: var(--firefoxcss-item-bg-color);
        --firefoxcss-weather-widget-hover-bg: var(--firefoxcss-item-bg-color);

        &.darkWallpaper {
          --firefoxcss-weather-widget-bg: light-dark(hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.1));
          --firefoxcss-weather-widget-hover-bg: light-dark(hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.1));
        }

        &.lightWallpaper {
          --firefoxcss-weather-widget-bg: light-dark(hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 0%, 0.4));
          --firefoxcss-weather-widget-hover-bg: light-dark(hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 0%, 0.4));
        }

        & .weather-widget {
          background-color: transparent !important;
          box-shadow: none !important;
          border: none !important;
          margin-left: -20px !important;

          & .weather-container {
            background-color: var(--firefoxcss-weather-widget-bg) !important;
            box-shadow:
              0 1px 1px hsl(0deg 0% 0% / 0.06),
              0 8px 8px hsl(0deg 0% 0% / 0.075),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.11),
              inset 0 0px 0px 1px rgba(255, 255, 255, 0.025);
            padding-inline: 8px;
            padding-block: 8px;
            border-radius: 12px !important;
          }

          &:hover,
          &:focus-within {
            background-color: var(--firefoxcss-weather-widget-hover-bg) !important;
            outline: 1px solid light-dark(hsla(0, 0%, 0%, 0.06), hsla(0, 0%, 100%, 0.2)) !important;
            transition: background-color 0.2s ease !important;

            & .weather-container {
              background-color: transparent !important;
              backdrop-filter: none !important;
              box-shadow: none !important;
              transition:
                box-shadow 0.2s ease,
                background-color 0.2s ease !important;
            }

            & .widget-title,
            & .weather-context-menu-wrapper {
              opacity: 1 !important;
              transition: opacity 0.2s ease !important;
            }
          }

          & .widget-title-bar {
            margin-block-end: 10px !important;
          }

          & .sponsored-text {
            display: none !important;
          }

          /* Hide city text and menu button */
          & .widget-title,
          & .weather-context-menu-wrapper {
            opacity: 0 !important;
          }
        }

        &:not(.darkWallpaper, .lightWallpaper) {
          & .weather-widget {
            box-shadow: none !important;
          }
        }

        &.lightWallpaper {
          .weather-widget .weather-container {
            box-shadow: none !important;
          }
        }

        &:is(.darkWallpaper, .lightWallpaper) {
          & .weather-widget {
            &:hover,
            &:focus-within {
              backdrop-filter: blur(12px);
            }

            .weather-container {
              backdrop-filter: blur(12px);
            }
          }
        }
      }

      .nova-enabled.container {
        grid-auto-rows: min-content !important;
      }
    }
  }

  /* ================== Customization Menu button ===================================== */
  @media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    .personalize-button {
      background-color: var(--firefoxcss-item-bg-color) !important;
      border-radius: 16px !important;
      min-width: unset !important;
      width: auto !important;
      transition: all 0.2s ease !important;

      & > div {
        width: 14px !important;
        height: 14px !important;
      }
      & > label {
        display: none !important;
      }
      &:hover {
        background-color: var(--firefoxcss-settings-wheel-bg-color-hover) !important;
      }
    }

    :root:has(.activity-stream.darkWallpaper) {
      @media (prefers-color-scheme: light) {
        .personalize-button {
          & > div > img {
            color: white !important;
          }
        }
      }
    }

    /* Make animation faster so the  Customization Menu button hidden quicker */
    .personalize-button.personalize-animate-exit-active {
      display: none !important;
    }
  }

  /*   NOVA  */
  @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    :root {
      --firefoxcss-newtab-customize-button: light-dark(hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 0%, 0.3));
      --firefoxcss-newtab-customize-button-border: light-dark(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 100%, 0.1));
    }

    .button-background.labelled:has(img[src="chrome://global/skin/icons/edit-outline.svg"]):not([type~="ghost"]) {
      #main-button[aria-haspopup="dialog"] > & {
        backdrop-filter: blur(8px);
        background-color: var(--firefoxcss-newtab-customize-button) !important;

        @media (prefers-color-scheme: dark) {
          color-scheme: dark !important;
        }
        color: light-dark(var(--color-gray-70), var(--color-white)) !important;
        border: none !important;
        outline: 1px solid var(--firefoxcss-newtab-customize-button-border) !important;
        outline-offset: 0px;

        & > img {color: light-dark(var(--color-gray-70), var(--color-white)) !important;
/*           border: medium !important; 
          outline: 1px solid var(--firefoxcss-newtab-customize-button-border) !important;
          outline-offset: 0px; */
        }
      }

      #main-button[aria-haspopup="dialog"]:hover > & {
        /* Make default purple on hover */
        outline: 1px solid var(--button-border-color-hover) !important;
      }
    }
  }

  /* ================== NEW TAB CARDS  ================================================= */

  :root {
    --firefoxcss-newtab-cards-bg-color: light-dark(hsla(200, 5%, 96%, 1), hsla(240, 2%, 22%, 0.3));
    --firefoxcss-newtab-cards-bg-hover-color: light-dark(hsla(200, 5%, 100%, 1), hsla(240, 2%, 25%, 0.4));
    --firefoxcss-newtab-cards-outline-color: light-dark(hsla(200, 5%, 100%, 0.9), hsla(0, 0%, 100%, 0.08));
    --firefoxcss-newtab-cards-outline-hover-color: light-dark(hsla(200, 5%, 100%, 1), hsla(0, 0%, 100%, 0.12));
  }

  /* Top/Recommended stories cards*/
  .ds-card-grid .sections-card-ui,
   /* Widget Cards */
  #widgets-container > .widget-wrapper > article,
   /* Recent activity cards */
   .compact-cards .card-outer {
    background-color: var(--firefoxcss-newtab-cards-bg-color) !important;
    outline: 1px solid var(--firefoxcss-newtab-cards-outline-color) !important;
    /*      box-shadow: inset 0 0 0 0.5px hsla(0, 0%, 0%, 0.2) !important;
     outline-offset: -2px; */
    /*      outline-offset: -1px; */
    .activity-stream.darkWallpaper & {
      backdrop-filter: blur(16px) saturate(120%) !important;
      @media (prefers-color-scheme: light) {
        outline-offset: -1px;
      }
    }
    .activity-stream.lightWallpaper & {
      backdrop-filter: blur(16px) saturate(180%) !important;
      @media (prefers-color-scheme: light) {
        outline-offset: -1px;
      }
    }

    &:hover {
      background-color: var(--firefoxcss-newtab-cards-bg-hover-color) !important;
      outline: 1px solid var(--firefoxcss-newtab-cards-outline-hover-color) !important;
    }
  }

  .activity-stream.lightWallpaper {
    :root & {
      --firefoxcss-newtab-cards-bg-color: light-dark(hsla(200, 10%, 95%, 0.75), hsla(240, 2%, 4%, 0.75));
      --firefoxcss-newtab-cards-bg-hover-color: light-dark(hsla(200, 10%, 100%, 0.85), hsla(240, 2%, 8%, 0.72));
      --firefoxcss-newtab-cards-outline-color: light-dark(hsla(200, 10%, 100%, 0.7), hsla(0, 0%, 100%, 0.2));
      --firefoxcss-newtab-cards-outline-hover-color: light-dark(hsla(200, 10%, 100%, 1), hsla(0, 0%, 100%, 0.25));
    }
    /*     background-color: light-dark(
      color-mix(in SRGB, var(--firefoxcss-main-bg-color), 60% white),
      color-mix(in SRGB, var(--firefoxcss-main-bg-color), 25% black)
    ) !important; */
  }

  .activity-stream.darkWallpaper {
    :root & {
      --firefoxcss-newtab-cards-bg-color: light-dark(hsla(200, 5%, 100%, 0.8), hsla(240, 2%, 18%, 0.6));
      --firefoxcss-newtab-cards-bg-hover-color: light-dark(hsla(200, 5%, 100%, 0.9), hsla(240, 2%, 22%, 0.6));
      --firefoxcss-newtab-cards-outline-color: light-dark(hsla(200, 5%, 100%, 0.7), hsla(0, 0%, 90%, 0.14));
      --firefoxcss-newtab-cards-outline-hover-color: light-dark(hsla(200, 5%, 100%, 1), hsla(0, 0%, 94%, 0.18));
    }
    /*     background-color: light-dark(
      color-mix(in SRGB, var(--firefoxcss-item-bg-color), 60% white),
      color-mix(in SRGB, var(--firefoxcss-item-bg-color), 10% transparent)
    ) !important; */
  }

  /* ========================================================================================= */
  /* ================== Context Menu Global  ================================================= */
  /* ========================================================================================= */
  /*   Try combine all context menus from new tab into one place */
  /*   New tab weather context menu and submenu*/
  /*   #weather-widget-context-menu,
  #weather-size-submenu, */
  /*   Target multiple widget cards context menu and submenu */
  /*   .widgets-section-container #lists-panel,
  panel-list[id$="submenu"][role="menu"][slot="submenu"],
   #widgets-container panel-list[id$="context-menu"][role="menu"],
  .task-list-wrapper  .task-item panel-list[role="menu"], */
  /*  Widgets context menu */
  /*    #widgets-header-context-panel, */
  /*   Shortcuts  */
  /*    .top-site-outer .top-site-inner > div > panel-list, */
  /*   Recent activity/Highlights context menu */
  /*    .card-outer .context-menu, */
  /*   Top/Recommended stories  */
  /*   .discovery-stream .context-menu-position-container panel-list {
    background-color: var(--firefoxcss-shortcut-item-context-menu) !important;
    backdrop-filter: blur(18px) !important;
    border: 1px solid var(--firefoxcss-shortcut-item-context-menu-border) !important;
    border-radius: 8px !important;
  } */
  panel-list[role="menu"][popover="auto"],
  panel-list[id$="submenu"][role="menu"][slot="submenu"] {
    --panel-list-background-color: var(--firefoxcss-shortcut-item-context-menu) !important;
    backdrop-filter: blur(18px) !important;
    border: 1px solid var(--firefoxcss-shortcut-item-context-menu-border) !important;
    --panel-list-border-radius: 8px !important;
  }

  /*   Fix panel menu padding and item border radius */
  panel-list[role="menu"] panel-item {
    --panel-item-button-border-radius: 6px !important;
    --panel-item-button-margin: 0 4px !important;
    --panel-item-button-padding: 5px 5px !important;
  }

  /*   Context menu separators line */
  .top-site-outer .context-menu > ul > li.separator,
  .card-outer .context-menu > ul > li.separator {
    border-bottom: 1px solid var(--firefoxcss-shortcut-item-context-menu-separator) !important;
  }

  /*   Shortcuts customization popup menu bg color */
  .edit-topsites .modalOverlayOuter {
    backdrop-filter: blur(32px);
    background-color: light-dark(hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 0%, 0.2)) !important;
    /*     outline: 1px solid light-dark(hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.14)) !important;
    outline-offset: -0px;
    border: none !important; */

    & .actions {
      border-block-start: 0px solid white !important;
    }
  }
  /* =================================================================================== */
  /* ================== Shortcut pin icon behaviour ==================================== */
  /* =================================================================================== */
  .top-site-button .icon.icon-pin-small {
    opacity: 0 !important;
    transition: opacity 200ms ease 0ms !important;

    /* Nova position fix */
    @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
      inset-block-start: 2px !important;
      inset-inline-start: -5px !important;
    }
  }

  .top-site-button:has(.title.has-icon.pinned:hover) .icon.icon-pin-small {
    opacity: 0.6 !important;
    transition: opacity 200ms ease 300ms !important;
  }

  .top-site-button .icon.icon-pin-small {
    @media (prefers-color-scheme: dark) {
      .activity-stream.lightWallpaper & {
        fill: black !important;
      }
    }
    @media (prefers-color-scheme: light) {
      .activity-stream.darkWallpaper & {
        fill: white !important;
      }
    }
  }

  /* ================== STICKY SEARCHBAR ================================ */

  /*   Remove sticky searchbar */
  @media (height > 700px) {
    .nova-outer-wrapper.stuck-search::before {
      display: none !important;
    }

    .stuck-search > .container > .search-wrapper {
      position: relative !important;
    }
  }

  /* ================== THEME COLOR PICKER =============================== */
  moz-visual-picker moz-visual-picker-item[value="default-theme@mozilla.org"] {
    .theme-preview {
      background-image: linear-gradient(96deg, hsl(240, 2%, 20%) 39.84%, hsl(240, 2%, 23%) 101.72%) !important;
    }
  }

  /* ================== CONFIRMATION DIALOG =============================== */
  .confirmation-dialog {
    backdrop-filter: blur(12px);
    background: none !important;
    background-color: light-dark(hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 0%, 0.2)) !important;
  }

  /* ================== NEW TAB WIDGET CENTERING ========================= */
  @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
    @media -moz-pref("mod.center.widgets") {
      @media -moz-pref("mod.centered.widgets.hide.title-text") {
        .widgets-section-container .widgets-title-container {
          display: none !important;
        }

        .widgets-section-container {
          margin-block-start: 3rem !important;
        }
      }

      @media not -moz-pref("mod.centered.widgets.hide.title-text") {
        .widgets-section-container .widgets-title-container {
          justify-content: center !important;

          .widgets-title-container-text {
            margin-inline-end: 0px !important;
          }
        }

        .widgets-section-container:not(:hover) .widgets-title-actions {
          opacity: 0 !important;
          transition: opacity 200ms ease 200ms;
        }
        .widgets-section-container .widgets-title-container .widgets-title-actions {
          margin-inline-start: 5px !important;
        }
      }

      #widgets-container {
        grid-template-columns: repeat(auto-fit, var(--col-width)) !important;
        justify-content: center !important;

        .widgets-add-button {
          display: none !important;
        }
      }
    }
  }

  /* ================== NEW TAB BACKGROUND BLUR MOD ========================= */
  @media -moz-pref("mod.new-tab.background.blur") {
    body.activity-stream:is(.darkWallpaper, .lightWallpaper):after {
      position: absolute !important;
      z-index: -1 !important;
      background-color: light-dark(hsla(0, 0%, 80%, 0.08), hsla(0, 0%, 10%, 0.3)) !important;
      backdrop-filter: blur(20px) !important;
      content: "";
      inset: 0;

      @media -moz-pref("mod.new-tab.background.blur", 1) {
        backdrop-filter: blur(4px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 2) {
        backdrop-filter: blur(8px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 3) {
        backdrop-filter: blur(12px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 4) {
        backdrop-filter: blur(16px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 5) {
        backdrop-filter: blur(20px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 6) {
        backdrop-filter: blur(24px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 7) {
        backdrop-filter: blur(32px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 8) {
        backdrop-filter: blur(50px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 9) {
        backdrop-filter: blur(80px) !important;
      }

      @media -moz-pref("mod.new-tab.background.blur", 10) {
        backdrop-filter: blur(140px) !important;
      }
    }
  }

  /* ================== Dark and Light wallpaper modifications ========================= */

  :root:has(.activity-stream.darkWallpaper) {
    --firefoxcss-backdrop-filter: blur(20px) !important;

    & .top-sites .tile {
      backdrop-filter: blur(20px) !important;
      border: 0px solid hsla(0, 0%, 0%, 0.51) !important;
      outline: 1px solid light-dark(hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 100%, 0.08));
      outline-offset: 0px;
    }

    & .top-sites .top-site-button:hover .tile {
      filter: brightness(105%);
      border: 0px solid hsla(0, 0%, 58%, 0.2) !important;
      outline: 1px solid light-dark(hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0.14));
    }

    @media (prefers-color-scheme: dark) {
      --firefoxcss-item-bg-color: hsla(240, 2%, 10%, 0.4) !important;
      --firefoxcss-item-hover-bg-color: hsla(240, 2%, 16%, 0.4) !important;
      --firefoxcss-settings-wheel-bg-color-hover: hsla(0, 0%, 30%, 0.6) !important;

      --firefoxcss-shortcut-item-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
      --firefoxcss-shortcut-item-box-shadow-hover:
        0 1px 1px hsl(0deg 0% 0% / 0.085), 0 2px 2px hsl(0deg 0% 0% / 0.085), 0 5px 5px hsl(0deg 0% 0% / 0.095),
        0 10px 10px hsl(0deg 0% 0% / 0.095), 0 18px 18px hsl(0deg 0% 0% / 0.095);

      --firefoxcss-context-menu-three-dots: hsla(200, 10%, 100%, 0.6);
      --firefoxcss-context-menu-three-dots-hover: hsla(0, 0%, 80%, 0.2);

      --firefoxcss-search-outline: hsla(0, 0%, 100%, 0.08);
      --firefoxcss-search-border-top-color: 0px solid transparent !important;
      --firefoxcss-search-border-top-hover: 0px solid transparent !important;
      --firefoxcss-search-outline-hover: hsla(0, 0%, 100%, 0.14) !important;

      & .top-sites .tile {
        outline-offset: -0px;
      }

      & .top-sites .top-site-button:hover .tile {
        filter: brightness(115%);
      }
    }

    @media (prefers-color-scheme: light) {
      --firefoxcss-backdrop-filter: blur(20px) !important;
      --firefoxcss-search-outline-offset: -1px !important;
      --firefoxcss-item-bg-color: hsla(200, 10%, 100%, 0.8) !important;
      --firefoxcss-item-hover-bg-color: hsla(200, 10%, 100%, 0.9) !important;
      --firefoxcss-search-text-fill: rgba(0, 0, 0, 0.5) !important;
      --firefoxcss-search-bar-text-color: rgba(0, 0, 0, 0.9) !important;
      --firefoxcss-search-bar-fill-icon-hover: rgba(0, 0, 0, 0.6) !important;
      --firefoxcss-shortcut-item-top-border-hover: 1px solid hsla(0, 0%, 100%, 0.15) !important;
      --firefoxcss-shortcut-item-active: hsla(200, 20%, 90%, 0.8) !important;
      --firefoxcss-weather-widget: hsla(200, 10%, 80%, 0.15) !important;
      --firefoxcss-weather-widget-hover: hsla(200, 10%, 30%, 0.2) !important;
      --firefoxcss-settings-wheel-bg-color-hover: hsla(200, 10%, 90%, 0.3) !important;

      --firefoxcss-context-menu-three-dots: hsla(200, 10%, 100%, 0.8);
      --firefoxcss-context-menu-three-dots-hover: hsla(0, 0%, 80%, 0.2);

      --firefoxcss-search-outline: hsla(0, 0%, 100%, 0.7);
      --firefoxcss-search-border-top-color: 0px solid transparent !important;
      --firefoxcss-search-border-top-hover: 0px solid transparent !important;
      --firefoxcss-search-outline-hover: hsla(0, 0%, 100%, 1) !important;

      .top-site-outer:hover:not(.active) .title,
      .top-site-outer:hover:not(.active) .title .icon.icon-pin-small {
        color: #fbfbfe !important;
      }

      .top-site-outer .context-menu,
      .card-outer .context-menu {
        --firefoxcss-shortcut-item-context-menu: hsla(0, 0%, 95%, 0.8) !important;
        --firefoxcss-shortcut-item-context-menu-border: hsla(0, 0%, 100%, 0.1) !important;
        --firefoxcss-shortcut-item-context-menu-separator: hsla(0, 0%, 0%, 0.1) !important;
      }

      & .top-sites .tile {
        outline-offset: -1px;
        backdrop-filter: blur(20px) !important;
      }
    }
  }

  :root:has(.activity-stream.lightWallpaper) {
    --firefoxcss-backdrop-filter: blur(20px) !important;

    & .top-sites .tile {
      backdrop-filter: blur(20px) !important;
      border: 0px solid hsla(0, 0%, 0%, 0.51) !important;
      outline: 1px solid light-dark(hsla(200, 10%, 100%, 0.7), hsla(0, 0%, 100%, 0.2)) !important;
      outline-offset: 0px;
    }

    & .top-sites .top-site-button:hover .tile {
      outline: 1px solid light-dark(hsla(200, 10%, 100%, 1), hsla(0, 0%, 100%, 0.25)) !important;
      border-top: 0px solid hsla(0, 0%, 58%, 0.1) !important;
    }

    @media (prefers-color-scheme: dark) {
      --firefoxcss-item-bg-color: hsla(240, 2%, 4%, 0.75) !important;
      --firefoxcss-item-hover-bg-color: hsla(240, 2%, 8%, 0.72) !important;
      --firefoxcss-settings-wheel-bg-color-hover: hsla(0, 0%, 16%, 0.6) !important;
      --firefoxcss-customize-menu: hsla(210, 10%, 10%, 0.6) !important;
      --firefoxcss-weather-widget: hsla(240, 2%, 10%, 0.8) !important;
      --firefoxcss-weather-widget-hover: hsla(240, 2%, 18%, 0.8) !important;

      --firefoxcss-shortcut-item-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
      --firefoxcss-shortcut-item-box-shadow-hover:
        0 1px 1px hsl(0deg 0% 0% / 0.085), 0 2px 2px hsl(0deg 0% 0% / 0.085), 0 5px 5px hsl(0deg 0% 0% / 0.095),
        0 10px 10px hsl(0deg 0% 0% / 0.095), 0 18px 18px hsl(0deg 0% 0% / 0.095);

      --firefoxcss-search-outline: hsla(0, 0%, 100%, 0.18);
      --firefoxcss-search-border-top-color: 0px solid transparent !important;
      --firefoxcss-search-border-top-hover: 0px solid transparent !important;
      --firefoxcss-search-outline-hover: hsla(0, 0%, 100%, 0.3) !important;

      --firefoxcss-context-menu-three-dots: hsla(200, 10%, 0%, 0.5);
      --firefoxcss-context-menu-three-dots-hover: hsla(0, 0%, 10%, 0.1);

      .top-site-outer:hover:not(.active) .title,
      .top-site-outer:hover:not(.active) .title .icon.icon-pin-small {
        --firefoxcss-item-bg-color: hsla(0, 0%, 10%, 0.8) !important;
        --firefoxcss-item-hover-bg-color: hsla(0, 0%, 0%, 0.5) !important;
        --firefoxcss-settings-wheel-bg-color-hover: hsla(0, 0%, 16%, 0.6) !important;
      }

      & .top-sites .top-site-button:hover .tile {
        filter: brightness(115%);
      }
    }

    @media (prefers-color-scheme: light) {
      --firefoxcss-search-outline-offset: -1px !important;
      --firefoxcss-item-bg-color: hsla(200, 10%, 95%, 0.75) !important;
      --firefoxcss-item-hover-bg-color: hsla(200, 10%, 100%, 0.85) !important;
      --firefoxcss-weather-widget: hsla(200, 10%, 98%, 0.75) !important;
      --firefoxcss-weather-widget-hover: hsla(200, 10%, 92%, 0.75) !important;
      --firefoxcss-settings-wheel-bg-color-hover: hsla(200, 10%, 100%, 0.9) !important;

      --firefoxcss-search-outline: hsla(0, 0%, 100%, 0.7);
      --firefoxcss-search-border-top-color: 0px solid transparent !important;
      --firefoxcss-search-border-top-hover: 0px solid transparent !important;
      --firefoxcss-search-outline-hover: hsla(0, 0%, 100%, 1) !important;

      --firefoxcss-context-menu-three-dots: hsla(200, 10%, 0%, 0.5);
      --firefoxcss-context-menu-three-dots-hover: hsla(0, 0%, 10%, 0.1);

      & .top-sites .tile {
        outline-offset: -1px !important;
        backdrop-filter: blur(20px) !important;
      }
    }
  }
}

@-moz-document url-prefix(about:firefoxview) {
  .search-container {
    border: none !important;
  }

  .search-container input {
    background-color: var(--firefoxcss-firefoxview-search-color) !important;
  }

  div.sticky-container.bottom-fade {
    background: none !important;
    background-color: var(--firefoxcss-firefoxview-sticky-color) !important;
    backdrop-filter: blur(7px) !important;
    flex-direction: row !important;
    padding-block: 30px 20px !important;
  }

  @media (max-width: 52rem) {
    div.sticky-container.bottom-fade {
      flex-direction: column !important;
    }
  }
}

@-moz-document url-prefix("about:preferences"), url-prefix("about:addons"), url-prefix("about:support"),
  url("about:config"), url("about:profiles"), url("about:downloads"), url-prefix("about:logins") {
  :root {
    --background-color-canvas: var(--firefoxcss-main-bg-color) !important;
    --background-color-box: var(--firefoxcss-item-bg-color) !important;
    --background-color-box-info: var(--firefoxcss-item-bg-color) !important;
  }
}

@media -moz-pref("mod.card-theme.style.1") or -moz-pref("mod.card-theme.style.2") {
  @-moz-document url("about:home"), url("about:newtab") {
    :root {
      --firefoxcss-wallpaper-tile-bottom-border: 1px solid light-dark(hsla(0, 0%, 0%, 0), hsla(0, 0%, 100%, 0.12));
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --firefoxcss-shortcut-item-box-shadow:
          0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
          0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075),
          inset 0px 1px 0px 0px rgba(255, 255, 255, 0.03), inset 0 0px 0px 1px rgba(255, 255, 255, 0.06);
        --firefoxcss-shortcut-item-box-shadow-hover:
          0 1px 1px hsl(0deg 0% 0% / 0.085), 0 2px 2px hsl(0deg 0% 0% / 0.085), 0 5px 5px hsl(0deg 0% 0% / 0.095),
          0 10px 10px hsl(0deg 0% 0% / 0.095), 0 18px 18px hsl(0deg 0% 0% / 0.095),
          inset 0 1px 0px 0px rgba(255, 255, 255, 0.08), inset 0 0px 0px 1px rgba(255, 255, 255, 0.1);
      }
    }

    :root:has(.activity-stream.darkWallpaper) {
      .top-sites .top-site-inner .top-site-button {
        outline: 1px solid light-dark(hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 100%, 0.08)) !important;
        outline-offset: 0px;
      }

      .top-sites .top-site-inner .top-site-button:hover {
        outline: 1px solid light-dark(hsla(0, 0%, 100%, 0.88), hsla(0, 0%, 100%, 0.14)) !important;
      }

      @media (prefers-color-scheme: light) {
        .top-sites .top-sites-list .top-site-outer {
          color-scheme: light !important;
        }

        .top-sites .top-site-inner .top-site-button {
          outline-offset: -1px !important;
        }

        .top-site-outer .title,
        .top-site-outer .top-site-button .icon.icon-pin-small {
          fill: black !important;
          color: black !important;
        }

        .top-site-outer:hover:not(.active) .title,
        .top-site-outer:hover:not(.active) .title .icon.icon-pin-small {
          color: black !important;
        }

        --firefoxcss-context-menu-three-dots: black !important;
        --firefoxcss-item-bg-color: hsla(200, 10%, 98%, 0.7) !important;
        --firefoxcss-item-hover-bg-color: hsla(200, 10%, 100%, 0.8) !important;

        --firefoxcss-wallpaper-tile-bottom-border: 1px solid hsla(0, 0%, 100%, 0.14);
      }

      @media (prefers-color-scheme: dark) {
        @media -moz-pref("mod.card-theme.style.2") {
          --firefoxcss-wallpaper-tile-bottom-border: 1px solid hsla(0, 0%, 100%, 0.08);

          .top-site-outer {
            --firefoxcss-item-bg-color: hsla(240, 2%, 13%, 0.5) !important;
            --firefoxcss-item-hover-bg-color: hsla(240, 2%, 13%, 0.5) !important;
          }
        }
      }
    }

    :root:has(.activity-stream.lightWallpaper) {
      .top-sites .top-site-inner .top-site-button {
        outline: 1px solid light-dark(hsla(200, 10%, 100%, 0.5), hsla(0, 0%, 100%, 0.2)) !important;
        outline-offset: -1px;
      }

      .top-sites .top-site-inner .top-site-button:hover {
        outline: 1px solid light-dark(hsla(200, 10%, 100%, 0.7), hsla(0, 0%, 100%, 0.32)) !important;
      }

      @media (prefers-color-scheme: light) {
        --firefoxcss-item-bg-color: hsla(200, 10%, 100%, 0.4) !important;
        --firefoxcss-item-hover-bg-color: hsla(200, 10%, 100%, 0.7) !important;
        --firefoxcss-search-text-fill: hsla(0, 0%, 0%, 0.5) !important;
        --firefoxcss-search-bar-text-color: hsla(0, 0%, 0%, 0.8) !important;
        --firefoxcss-search-outline: hsla(0, 0%, 100%, 0.4) !important;
        /*           --firefoxcss-search-outline-offset: 0px !important; */
        --firefoxcss-wallpaper-tile-bottom-border: 1px solid hsla(0, 0%, 100%, 0.2);
        @media -moz-pref("mod.card-theme.style.2") {
          --firefoxcss-item-bg-color: hsla(200, 10%, 92%, 0.3) !important;
        }
      }

      @media (prefers-color-scheme: dark) {
        .top-sites .top-sites-list .top-site-outer {
          color-scheme: dark !important;
        }

        .top-site-outer .title,
        .top-site-outer .top-site-button .icon.icon-pin-small {
          fill: white !important;
          color: white !important;
        }
        .top-sites .top-site-inner .top-site-button {
          outline-offset: -0px !important;
        }

        --firefoxcss-item-bg-color: hsla(240, 2%, 4%, 0.6) !important;
        --firefoxcss-item-hover-bg-color: hsla(240, 2%, 8%, 0.7) !important;
        --firefoxcss-context-menu-three-dots: white !important;
        --firefoxcss-search-outline: hsla(0, 0%, 100%, 0.2) !important;
        --firefoxcss-search-outline-hover: hsla(0, 0%, 100%, 0.32) !important;
        --firefoxcss-search-outline-offset: -0px !important;

        --firefoxcss-wallpaper-tile-bottom-border: 1px solid hsla(0, 0%, 0%, 0.1);

        @media -moz-pref("mod.card-theme.style.2") {
          .top-site-outer {
            --firefoxcss-item-bg-color: hsla(240, 2%, 4%, 0.5) !important;
            --firefoxcss-item-hover-bg-color: hsla(240, 2%, 4%, 0.5) !important;
          }
        }
      }
    }

    #root .top-sites .top-sites-list .tile {
      backdrop-filter: none !important;
      border-top: 0px solid hsla(0, 0%, 100%, 0) !important;
      border-bottom: 0px solid hsla(0, 0%, 100%, 0) !important;
      background-color: transparent !important;
      border-bottom-left-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
      border: 0px !important;
      box-shadow: none !important;
      margin: 0 auto;
      width: 100% !important;
      outline: none !important;
      /*! padding-inline: 10px !important; */
    }

    #root .top-site-inner .top-site-button {
      background-color: var(--firefoxcss-item-bg-color) !important;
      border-radius: 12px !important;
      box-shadow: var(--firefoxcss-shortcut-item-box-shadow) !important;
      transition: background-color 200ms ease !important;
      backdrop-filter: blur(18px) !important;
    }

    #root .top-site-inner .top-site-button:hover {
      @media not -moz-pref("mod.card-theme.style.2") {
        background-color: var(--firefoxcss-item-hover-bg-color) !important;
      }
    }

    @media -moz-pref("mod.card-theme.style.2") {
      #root .top-sites .top-sites-list .tile {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        background-color: light-dark(hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 0%, 0.3)) !important;
        transition: background-color 200ms ease !important;
        border-bottom: var(--firefoxcss-wallpaper-tile-bottom-border) !important;
        .activity-stream:not(.darkWallpaper, .lightWallpaper) & {
          background-color: light-dark(hsla(0, 0%, 100%, 1), hsla(0, 0%, 0%, 0.22)) !important;
        }
      }

      #root .top-sites .top-sites-list .top-site-button:hover .tile {
        background-color: transparent !important;
        @media -moz-pref("mod.card-theme.style.2") {
          background-color: light-dark(hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 0%, 0.4)) !important;
          .activity-stream:not(.darkWallpaper, .lightWallpaper) & {
            background-color: light-dark(hsla(0, 0%, 94%, 1), hsla(0, 0%, 0%, 0.3)) !important;
          }
        }
      }
    }

    .top-sites .top-sites-list .top-site-outer .top-site-button .title {
      opacity: 0.7 !important;
    }

    /* Different approach  */
    .top-sites .top-sites-list .top-site-outer .top-site-inner {
      /*     background-color: var(--firefoxcss-item-bg-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--firefoxcss-shortcut-item-box-shadow) !important;
    transition: background-color 250ms ease; */
    }

    /* This is to fix the context menu being behind other element when blur used on top sites inner */
    .top-sites .top-sites-list .top-site-outer .top-site-inner:before {
      /*     content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px) !important;
    z-index: -1;
    border-radius: 12px !important; */
    }

    .search-wrapper .search-inner-wrapper {
      height: 44px !important;
    }

    @media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
      .top-sites .top-sites-list .top-site-outer {
        padding-inline: 12px !important;
      }

      .top-site-outer .title {
        padding-block-end: 0.25rem !important;
        padding-block-start: 0.4rem !important;
      }

      .top-sites .top-site-outer .top-site-inner .top-site-button {
        padding: 10px 16px 0px !important;
      }

      @media -moz-pref("mod.card-theme.style.2") {
        .top-sites .top-site-outer .top-site-inner .top-site-button {
          padding: 0px 0px !important;
        }

        .top-sites .top-site-outer .tile {
          height: 100px !important;
        }

        .top-site-outer .title {
          padding-block-end: 0.3rem !important;
          padding-block-start: 0.3rem !important;
        }

        .title-label {
          align-content: center !important;
        }
      }

      .top-sites .top-sites-list .top-site-outer {
        margin-block-end: 2rem !important;
      }
    }

    @media -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
      .top-site-outer .title {
        padding-block-end: 0.4rem !important;
        padding-block-start: 0.1rem !important;
      }

      .top-sites .top-sites-list .top-site-outer {
        margin-block-end: 2rem !important;
      }

      .search-wrapper .search-inner-wrapper {
        padding-inline: 1px !important;
      }

      .logo-and-wordmark-wrapper .logo-and-wordmark .logo {
        background-size: 52px !important;
        height: 60px !important;
        width: 60px !important;
      }

      .logo-and-wordmark .wordmark {
        background-size: 120px !important;
        height: 44px !important;
        margin-inline-start: 0.2rem !important;
        width: 140px !important;
      }

      @media -moz-pref("mod.card-theme.style.2") {
        .top-sites-list .top-site-outer .top-site-button {
          align-items: start !important;
        }

        .top-site-outer .title {
          padding-block-end: 0.6rem !important;
          padding-block-start: 0.4rem !important;
        }

        .title-label {
          align-content: center !important;
        }
      }

      @container content-grid (inline-size >= calc(600px + 5.25rem)) {
        .container.logo-in-content {
          .logo {
            margin-inline-start: 0.6rem !important;
          }
        }
      }

      .content .logo-and-wordmark {
        align-items: center !important;
      }

      #root .content > :is(.top-sites, .search-wrapper, .logo-and-wordmark-wrapper) {
        --space-medium: 1.8rem !important;
        --col-width: calc(380px / 4) !important;
        --size-item-large: 48px !important;
      }

      .top-sites-list-wrapper .top-site-outer:not(.add-button) .tile .icon-wrapper {
        height: 48px !important;
        width: 48px !important;
      }

      .content .top-sites .top-sites-list-wrapper {
        margin-block-start: 4px !important;
      }

      .top-site-button .icon.icon-pin-small {
        inset-block-start: 5px !important;
        inset-inline-start: 5px !important;
      }
    }

    .top-sites .top-site-outer .context-menu-button {
      inset-inline-end: 6px !important;
      top: 1px !important;
    }

    button.search-handoff-button .fake-textbox {
      opacity: 0.6 !important;
    }

    .top-sites .top-site-outer .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus) {
      z-index: 8;
      position: relative;
      background-color: transparent !important;
    }
  }
}

@-moz-document url("about:home"), url("about:newtab"), url("about:privatebrowsing") {
  @media -moz-pref("mod.spill-theme") {
    /* Spill style. Modifications for userContent file */
    @media (prefers-color-scheme: dark) {
      :root #root {
        --firefoxcss-item-bg-color: hsla(240, 2%, 45%, 0.4) !important;
        --firefoxcss-item-hover-bg-color: hsl(240, 2%, 55%, 0.4) !important;
      }
    }

    @-moz-document url("about:privatebrowsing") {
      @media (prefers-color-scheme: dark) {
        html:not(#ublock0-epicker),
        html:not(#ublock0-epicker) body,
        #newtab-customize-overlay {
          background-image: url("ASSETS/other/spill.svg") !important;
        }
      }
      @media (prefers-color-scheme: light) {
        html:not(#ublock0-epicker),
        html:not(#ublock0-epicker) body,
        #newtab-customize-overlay {
          background-image: url("ASSETS/other/spill-light.svg") !important;
        }
      }

      button.search-handoff-button {
        background-color: hsla(290, 21%, 35%, 0.2) !important;
        fill: hsl(290, 21%, 60%) !important;
        backdrop-filter: blur(14px) !important;
      }

      button.search-handoff-button:hover,
      button.search-handoff-button:focus,
      button.search-handoff-button:active {
        background-color: hsla(290, 21%, 45%, 0.2) !important;
        border-top: 1px solid hsla(290, 21%, 55%, 0.2) !important;
        fill: hsl(290, 21%, 70%) !important;
      }

      button.search-handoff-button .fake-textbox {
        color: hsl(290, 21%, 60%) !important;
      }

      button.search-handoff-button:active > .fake-textbox,
      button.search-handoff-button:hover > .fake-textbox,
      button.search-handoff-button:focus > .fake-textbox {
        color: hsl(290, 21%, 70%) !important;
      }
    }

    @-moz-document url("about:home"),
  url("about:newtab") {
      @media (prefers-color-scheme: dark) {
        html:not(#ublock0-epicker),
        html:not(#ublock0-epicker) body,
        #newtab-customize-overlay {
          background-image: url("ASSETS/other/spill-main.svg") !important;
        }
      }
      @media (prefers-color-scheme: light) {
        html:not(#ublock0-epicker),
        html:not(#ublock0-epicker) body,
        #newtab-customize-overlay {
          background-image: url("ASSETS/other/spill-main-light.svg") !important;
        }
      }

      :root {
        --firefoxcss-backdrop-filter: blur(14px) !important;
      }

      .top-sites .top-site-outer .tile {
        backdrop-filter: blur(14px) !important;
      }
    }
  }
}

@-moz-document url("about:config") {
  body .config-background-wrapper .config-background::after{
    content:
  "⚙️ Extra Modifications: \A"
  "- Bookmarks bar\A" 
  "   • mod.transparent.bookmarks-bar  •  mod.transparent.bookmarks-bar.centered\A"
  " \A "
  "- Searchbar\A"
  "   • mod.search.info.buttons.show.always\A"
  "   • mod.searchbox.focus.outline.enable\A"
  "   • Experimental: mod.popout.searchbar • mod.popout.searchbar.no-animation (if HDR used, it may turn off while searchbar is open)\A"
  " \A "
  "- Tabs\A"
  "   • mod.tabs.on.top.enable\A"
  "   • mod.compact.vertical.tabs\A"
  "   • mod.disable.tab.preview.panel.fully\A"
  "   • mod.centered.tabs\A"
  "   • mod.disable.scrollbar.in.vertical.tabs\A" 
  " \A "
  "- Window Frame:\A"
  "   • mod.disable.browser.border-and-shadow\A"
  "   • mod.main.window.frame.style-1  •  mod.main.window.frame.style-2\A"
  " \A "
  "- Extra Blur mods (HDR doesnt work with this enabled since v153):\A"
  "   • mod.panel-menu.blur\A"
  "   • mod.searchbar.blur\A"
  "   • mod.vertical-tabs.expand.blur\A"
  "   • mod.combined.extra.blur (combines blur mods in one)\A"
  " \A "
  "- Extension Menu (Still need to install the main mod file):\A"
  "   • [number] mod.number.of.extensions.in.a.row [1 to 10] - Default [4]\A"
  "   • [number] mod.extensions.menu.extention-icon.size [12 to 30] - Default [22]\A"
  "   • mod.hide.manage-extensions.button\A"
  "   • mod.disable.extensions-menu.separator\A"
  "   • mod.hide.faded-extensions.inside.extensions-menu\A"
  " \A "
  "- New Tab and Themes:\A"
  "   • mod.spill-theme\A"
  "   • mod.card-theme.style.1  •  mod.card-theme.style.2\A"
  "   • [number] mod.new-tab.background.blur [1 to 10 intensity] - Default [5]\A"
  "   • mod.center.widgets  •  mod.centered.widgets.hide.title-text\A"
  " \A "
  "- Other:\A"
  "   • mod.disable.scrollbar.in.vertical.tabs\A"
  " \A "
  " \A "
  "❔ Type 'mod.' to see all your enabled modifications.\A"
  "❔ Read github readme for full mod list and instructions.\A"
  " \A "
  "🔧 Firefox ModBlur v2.80.4 • 04/10/2026 (October)";
    white-space: pre-wrap;
    color: light-dark(hsla(290, 21%, 0%, 0.9), hsla(290, 21%, 94%, 0.9)) !important;
    font-size: 14px !important;
    font-family:
      Inter,
      Segoe UI,
      system-ui !important;
    user-select: text !important;
  }

  body .config-background-wrapper .config-background {
    background: none !important;
    width: clamp(340px, 70vw, 900px) !important;
    height: auto !important;
    margin-inline: 28px auto !important;
    padding-block: 30px !important;
    padding-inline: 35px !important;
    border-radius: 32px !important;
    user-select: text !important;
    /*     background-color: light-dark(hsla(290, 21%, 0%, 0.06),hsla(290, 21%, 0%, 0.3)) !important;
    box-shadow: 
      1px 3px 20px 10px light-dark(hsla(0, 0%, 0%, 0.1),hsla(0, 0%, 0%, 0.2)),
      0px 0px 0px 2px  light-dark(hsla(0, 0%, 0%, 0.02),hsla(0, 0%, 0%, 0.4)),
      inset 0px 0px 10px 4px light-dark(hsla(0, 0%, 100%, 0.4),hsla(0, 0%, 100%, 0.0)) !important; */
  }
  body .config-background-wrapper .config-help-text {
    display: none !important;
  }
  body.table-shown .config-background-wrapper {
    display: initial !important;
  }

  body.table-shown #show-all {
    display: none !important;
  }
}