userChrome.css

/* ______ _           __             __  __           _   ____  _     _    _ _____  
  |  ____(_)         / _|           |  \/  |         | | |  _ \| |   | |  | |  __ \ 
  | |__   _ _ __ ___| |_ _____  __  | \  / | ___   __| | | |_) | |   | |  | | |__) |
  |  __| | | '__/ _ \  _/ _ \ \/ /  | |\/| |/ _ \ / _` | |  _ <| |   | |  | |  _  / 
  | |    | | | |  __/ || (_) >  <   | |  | | (_) | (_| | | |_) | |___| |__| | | \ \ 
  |_|    |_|_|  \___|_| \___/_/\_\  |_|  |_|\___/ \__,_| |____/|______\____/|_|  \_\
  
                                                                                    
  Github:         github.com/datguypiko/Firefox-Mod-Blur     */

/*===============================================================
===================== E X T R A   M O D S =======================
===============================================================*/

@import url("privacy_change_email_text.css");
@import url("privacy_blur_email_in_main_menu.css");
@import url("privacy_blur_email_in_sync_menu.css");
@import url("firefox_view_icon_change.css");
@import url("no_search_engines_in_url_bar.css");
@import url("white_github_icon_in_bookmarks.css");
@import url("only_show_list-all-tabs_when_tabs_overflowing.css");
@import url("min-max-close_buttons.css");
@import url("privacy_blur_tabs_content.css");
@import url("popout_bookmarks_bar_on_hover.css");
@import url("push_bookmarks_bar_on_hover.css");
@import url("remove_folder_icons_from_bookmarks.css");
@import url("bookmarks_bar_same_color_as_toolbar.css");
@import url("icons_in_main_menu.css");
@import url("ublock-icon-change.css");
@import url("selected_tabs_static_width.css");
@import url("autohide_tab_and_bookmarks_bars.css");
@import url("url_bar_no_border.css");
@import url("search_bar_transparent_background.css");
@import url("cleaner_extensions_menu.css");
@import url("colored_soundplaying_tab.css");
@import url("menu_icon_change_to_firefox.css");
@import url("pinned_tabs_no_bg_color.css");
@import url("reversed_tabs_bg_color.css");
@import url("transparent_tabs_bg_color.css");
@import url("tabs_separator.css");
@import url("searchbox_text_align_left.css");
@import url("tabs_take_full_bar_width.css");
@import url("show_searchbar_dots_only_on_hover.css");
@import url("thicker_control_buttons.css");

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

@media (prefers-color-scheme: dark) {
  :root {
    /* Main dark color, url bar, active tab etc. */
    --firefoxcss-main-bg-color: hsl(240, 2%, 13%);

    /* Main lighter color, toolbar background */
    --firefoxcss-item-bg-color: hsl(240, 2%, 20%);
    
    /* Tab colors */
    --firefoxcss-tab-bg-color: hsl(240, 2%, 26%);
    --firefoxcss-tab-hover-bg-color: hsl(240, 2%, 32%);
    --firefoxcss-tab-active-bg-color: var(--firefoxcss-main-bg-color);
    --firefoxcss-non-active-tabs: hsla(0, 0%, 100%, 0.65);

    --firefoxcss-normal-tabs-box-shadow:
      1px 1px 1px -1px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px hsla(0, 0%, 100%, 0),
      inset 1px 0px 0px 0px hsla(0, 0%, 100%, 0);
    --firefoxcss-tab-multiselect-outline: rgba(255, 255, 255, 0.1);

    /* Tab playing audio speaker icon colors */
    --firefoxcss-tab-speaker-color: hsla(0, 0%, 80%);
    --firefoxcss-tab-speaker-icon-color: hsl(0, 0%, 100%);
    --firefoxcss-tab-speaker-icon-hover-color: hsl(0, 0%, 10%);
    --firefoxcss-tab-speaker-icon-small-background: hsla(0, 0%, 80%);

    /* Context menu colors */
    --firefoxcss-context-menu-top-color: #131313cf;
    /* Bookmarks bar colors */
    --firefoxcss-bookmarks-bg-color: var(--firefoxcss-item-bg-color);

    /* Change background color when loading a page */
    --firefoxcss-bright-flash-color: var(--firefoxcss-main-bg-color);

    /* Toolbar buttons */
    --firefoxcss-toolbar-button-box-shadow: rgba(0, 0, 0, 0.1);
    --firefoxcss-toolbar-button-active-box-shadow: rgba(0, 0, 0, 0.2);

    --firefoxcss-new-tab-button-active: hsl(240, 2%, 18%);
    --firefoxcss-new-tab-button-box-shadow-active: rgba(0, 0, 0, 0.6);

    --firefoxcss-new-tab-button-hover: hsla(0, 0%, 30%, 0.85);
    --firefoxcss-new-tab-button-box-shadow-hover: rgba(0, 0, 0, 0.5);

    /* Search Bar and breakout (when in focus) colors */
    --firefoxcss-url-dark-border: color-mix(in srgb, var(--firefoxcss-main-bg-color) 35%, black);
    --firefoxcss-url-breakout-border-bottom-color: 1px solid
      color-mix(in srgb, var(--firefoxcss-url-dark-border) 25%, transparent);

    --firefoxcss-url-breakout-border-top-color: 1px solid transparent;
    --firefoxcss-url-bar-bg-color: var(--firefoxcss-main-bg-color);
    --firefoxcss-url-border-bottom-color: 1px solid hsla(0, 0%, 100%, 0.2);
    --firefoxcss-url-border-top-color: 1px solid hsla(0, 0%, 0%, 0.15);
    --firefoxcss-url-breakout-bar-bg-color: var(--firefoxcss-main-bg-color);
    --firefoxcss-url-box-shadow-color:
      0px 1px 0 0px hsla(0, 0%, 100%, 0.1), inset 1px 1px 2px 1px rgba(0, 0, 0, 0.25) !important;
    --firefoxcss-url-autocomplete-highlight: hsl(240, 2%, 26%);
    --firefoxcss-url-breakout-box-shadow:
      rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
      rgba(0, 0, 0, 0.09) 0px 12px 8px, rgba(0, 0, 0, 0.09) 0px 16px 16px, 0px -1px 0 0px hsla(0, 0%, 20%, 0.1);
    --firefoxcss-url-clipboard-button: color-mix(in srgb, currentColor 10%, transparent);

    /* Other colors */
    --firefoxcss-urlbar-zoom-button: hsla(0, 0%, 60%, 0.35);
    --firefoxcss-top-bar-border-bottom-color: hsla(0, 0%, 6%, 0.2);
    --firefoxcss-private-browsing-drop-shadow: drop-shadow(0px 0px 1px #000000d5);
    --firefoxcss-statuspanel-bg-color: var(--firefoxcss-main-bg-color);
    --firefoxcss-contextmenu-hover-text: white;
    --firefoxcss-customize-view-dashed-outline: hsla(0, 0%, 100%, 0.25);
    --firefoxcss-customize-view-flex-space: #d0ba9e;
    --firefoxcss-customize-view-overflow-menu: hsl(240, 2%, 10%);

    /* ============== Firefox Global colors change ==================== */

    &#main-window:not([lwtheme]) {
      --toolbar-background-color: var(--firefoxcss-item-bg-color) !important;
      --toolbarbutton-background-color-hover: var(--button-hover-bgcolor) !important;
      --toolbarbutton-background-color-active: var(--button-active-bgcolor) !important;
      --urlbarview-background-color-selected: color-mix(in srgb, currentColor 10%, transparent) !important;
    }
    &#main-window:not([theme-effective-id="ATBC@EasonWong"]) {
    /* Hamburger menu button hover color */
    --button-background-color-menu-hover: hsla(0, 0%, 60%, 0.25) !important;
    --panel-background-color: var(--firefoxcss-main-bg-color) !important;
    --toolbarbutton-hover-background: hsla(0, 0%, 60%, 0.35) !important;
    --urlbar-box-background-color-hover: var(--toolbarbutton-hover-background) !important;
    /*      Searchbar results row colors */
    
    --urlbarview-background-color-hover: color-mix(in srgb, currentColor 6%, transparent) !important;
    --urlbarview-background-color-selected: color-mix(in srgb, currentColor 10%, transparent) !important;

    --toolbarbutton-active-background: hsla(0, 0%, 80%, 0.35) !important;
    --button-hover-bgcolor: hsla(0, 0%, 60%, 0.35) !important;
    --button-active-bgcolor: hsla(0, 0%, 45%, 0.35) !important;
    --button-bgcolor: hsla(0, 0%, 45%, 0.9) !important;
    --panel-border-color: hsla(0, 0%, 50%, 0.25) !important;
    --dark-menu-background-color: #222121 !important;
    --dark-menu-border-color: rgb(55, 55, 55) !important;
    --dark-menuitem-hover-background-color: rgba(159, 159, 159, 0.35) !important;
    --panel-separator-color: var(--panel-border-color) !important;
    --panel-separator-zap-gradient: var(--panel-separator-color) !important;

    /* Color for add bookmarks menu when adding through tabs */
    --in-content-page-background: var(--panel-background-color) !important;
    --firefoxcss-context-menu-item-bg-color: hsla(0, 0%, 60%, 0.3);
    --firefoxcss-context-menu-item-bg-color-inactive: hsla(0, 0%, 60%, 0.15);
    }
  }
}

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

@media (prefers-color-scheme: light) {
  :root {
    /* Main dark color, url bar, active tab etc. */
    --firefoxcss-main-bg-color: hsl(200, 5%, 98%);

    /* Main lighter color, toolbar background */
    --firefoxcss-item-bg-color: hsl(200, 5%, 96%);

    /* Tab colors hsl(240, 15%, 90%) */
    --firefoxcss-tab-bg-color: hsl(200, 5%, 93%);
    --firefoxcss-tab-hover-bg-color: hsl(200, 5%, 88%);
    --firefoxcss-tab-active-bg-color: hsl(200, 5%, 86%);
    --firefoxcss-non-active-tabs: hsl(0, 0%, 25%);

    --firefoxcss-normal-tabs-box-shadow: none;
    --firefoxcss-tab-multiselect-outline: hsl(240, 8%, 75%);

    /* Tab playing audio speaker icon colors */
    --firefoxcss-tab-speaker-color: hsl(0, 0%, 20%);
    --firefoxcss-tab-speaker-icon-color: hsl(0, 0%, 10%);
    --firefoxcss-tab-speaker-icon-hover-color: white;
    --firefoxcss-tab-speaker-icon-small-background: hsl(0, 0%, 20%);

    /* Context menu colors */
    --firefoxcss-context-menu-top-color: hsl(240, 15%, 95%);

    /* Bookmarks bar colors */
    --firefoxcss-bookmarks-bg-color: var(--firefoxcss-item-bg-color);

    /* Change background color when loading a page */
    --firefoxcss-bright-flash-color: var(--firefoxcss-main-bg-color);

    /* Toolbar buttons */
    --firefoxcss-toolbar-button-box-shadow: rgba(0, 0, 0, 0);
    --firefoxcss-toolbar-button-active-box-shadow: rgba(0, 0, 0, 0);

    --firefoxcss-new-tab-button-active: hsl(200, 10%, 90%);
    --firefoxcss-new-tab-button-box-shadow-active: rgba(0, 0, 0, 0.4);

    --firefoxcss-new-tab-button-hover: hsla(200, 5%, 83%, 0.65);
    --firefoxcss-new-tab-button-box-shadow-hover: rgba(0, 0, 0, 0);

    /* Search Bar and breakout (when in focus) colors */
    --firefoxcss-url-breakout-border-top-color: 1px solid transparent;
    --firefoxcss-url-bar-bg-color: hsl(200, 5%, 92%);
    --firefoxcss-url-border-bottom-color: 1px solid hsla(0, 0%, 100%, 1);
    --firefoxcss-url-border-top-color: 1px solid hsla(0, 0%, 0%, 0);
    --firefoxcss-url-breakout-bar-bg-color: hsl(200, 5%, 98%);
    --firefoxcss-url-breakout-border-bottom-color: hsla(0, 0%, 70%, 0.05);
    --firefoxcss-url-box-shadow-color: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
    --firefoxcss-url-autocomplete-highlight: hsl(200, 5%, 90%);
    --firefoxcss-url-breakout-box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 2px 10px 22px;
    --firefoxcss-url-clipboard-button: color-mix(in srgb, currentColor 10%, transparent);

    /* Other colors */
    --firefoxcss-urlbar-zoom-button: hsla(200, 5%, 60%, 0.35);
    --firefoxcss-top-bar-border-bottom-color: hsla(0, 0%, 0%, 0.1);
    --firefoxcss-private-browsing-drop-shadow: none;
    --firefoxcss-statuspanel-bg-color: hsl(200, 10%, 98%);
    --firefoxcss-contextmenu-hover-text: black;
    --firefoxcss-customize-view-dashed-outline: hsla(0, 0%, 0%, 0.2);
    --firefoxcss-customize-view-flex-space: hsl(34, 50%, 70%);
    --firefoxcss-customize-view-overflow-menu: hsl(200, 5%, 100%);
    
    /* ============== Firefox Global colors change ==================== */
    /*      Searchbar results row colors */
    &#main-window:not([lwtheme]) {
    --toolbar-background-color: var(--firefoxcss-item-bg-color) !important;
    --toolbarbutton-background-color-hover: var(--button-hover-bgcolor) !important;
    --toolbarbutton-background-color-active: var(--button-active-bgcolor) !important; 
    --urlbarview-background-color-selected: color-mix(in srgb, currentColor 12%, transparent) !important;
    }
    &#main-window:not([theme-effective-id="ATBC@EasonWong"]) {
        
        --urlbarview-background-color-hover: color-mix(in srgb, currentColor 6%, transparent) !important;
        --urlbarview-background-color-selected: color-mix(in srgb, currentColor 12%, transparent) !important;
        --button-background-color-menu-hover: hsla(240, 5%, 70%, 0.35) !important;
        --toolbarbutton-hover-background: hsla(200, 5%, 70%, 0.35) !important;
        --urlbar-box-background-color-hover: var(--toolbarbutton-hover-background) !important;
        --toolbarbutton-active-background: hsla(200, 5%, 50%, 0.35) !important;
        --panel-background-color: hsl(200, 10%, 96%) !important;
        --button-hover-bgcolor: hsla(200, 5%, 70%, 0.35) !important;
        --button-active-bgcolor: hsla(200, 5%, 50%, 0.35) !important;
        --button-bgcolor: hsla(0, 0%, 45%, 0.1) !important;
          /* Search Bar */
        --panel-border-color: hsla(0, 0%, 100%, 0.5) !important;
        --panel-separator-color: hsla(0, 0%, 20%, 0.15) !important;
        --panel-separator-zap-gradient: var(--panel-separator-color) !important;
        /* Color for add bookmarks menu when adding through tabs */
        --in-content-page-background: var(--panel-background-color) !important;
        --firefoxcss-context-menu-item-bg-color: hsla(240, 2%, 70%, 0.35);
        --firefoxcss-context-menu-item-bg-color-inactive: hsla(240, 2%, 70%, 0.15);
    }

  }
}

/*=====================================================================
=================== G L O B A L   V A R I A B L E S ===================
=====================================================================*/

:root {
    /* --toolbarbutton-icon-fill: light-dark(var(--color-gray-70), var(--color-gray-0)) !important;
  --button-background-color-ghost-hover: light-dark(rgba(207, 207, 216, 0.66), rgba(207, 207, 216, 0.2)) !important;
  --panel-menuitem-border-radius: 8px !important; */

  --firefoxcss-top-bar-border-bottom-size: 1px;
  --firefoxcss-control-buttons-margin: 95px;
  --firefoxcss-tab-min-width: 110px;
  --firefoxcss-tab-max-width: 150px;

/*   Overal border radius. Affects searchbar, inner urlbar buttons, tabs */
  --firefoxcss-border-radius: 10px;
  
/*   Button border radius */
  --toolbarbutton-border-radius: 10px !important;
  --button-border-radius: calc(var(--firefoxcss-border-radius) - 2px) !important;
  
   --firefoxcss-context-menu-item-radius: 6px;
  
  
  --firefoxcss-popupmenus-border-radius: 12px;
  --firefoxcss-popupmenus-item-border-radius: 10px;
  
/*   Padding between searchbar: Default 4 */
/*   --urlbar-container-padding-block: 2px !important; */
  
  --firefoxcss-searchbar-height: 30px;
/*   --urlbar-height: 32px !important; */
  
  --firefoxcss-searchbar-container-height: 38px;
  
  
  
  --urlbar-inner-border-radius: calc(var(--firefoxcss-border-radius) - 2px) !important;
  @media not -moz-pref("sidebar.verticalTabs") {
    --tab-margin-block: 2px !important;
    /* Default: 4px */

    --tab-min-height: 28px !important;
    /* Default: 36px */

/*     --tabstrip-min-height: 30px !important; */
    --tabstrip-min-height: calc(var(--tab-min-height) + 2 * var(--tab-margin-block)) !important;
    
      @media -moz-pref("browser.nova.enabled") {
        &[lwtheme][theme-effective-id^="nova-"][theme-effective-id$="@mozilla.org"] {
          --tab-min-height: 30px !important;
        }
      }
  }


  /* Toolbar Buttons */
  --toolbarbutton-padding-outer: 2px !important; /* Default: 2px */
  --toolbarbutton-padding-inner: 6px !important; /* Default: 8px */

  /* Menu items */
  --panel-menuitem-padding-block: 6px !important;

  /*   Affects searchmode switcher panel and some others */
  /*   --panel-menuitem-padding-inline: 8px !important; */

  /* Bookmarks and hamburger menu top padding */
  --panel-subview-body-padding-block: 4px !important;

  /* Harburger menu padding */
  --panel-separator-padding-block: 1px !important;

  /*    Bookmarks dropdown */
  --panel-menuitem-padding: 4px 6px !important;
  --panel-menuitem-margin: 2px 6px !important;

  /* Toolbar right click panel */
  --panel-padding-block: 3px 1px !important;

  /*   Bookmarks and hamburger menu */
  /*      --panel-subview-body-padding: 4px 0px !important; */

  /* Vertical tabs margin and height modification */
  @media -moz-pref("sidebar.verticalTabs") {
    --tab-min-height: max(32px, calc(var(--tab-label-line-height) * 1em)) !important;
    --tab-margin-block: 1px !important;
    @media -moz-pref("mod.compact.vertical.tabs") {
      --tab-min-height: max(30px, calc(var(--tab-label-line-height) * 1em)) !important;
      --tab-margin-block: 0px !important;
    }
  }
}

/*=====================================================================
====================== T O O L B A R   O R D E R ======================
=======================================================================
Order of Toolbars
  * 0 - top
  * 1 - second from top
  * 2 - bottom */

/* SEARCH BAR TOOLBAR */
#navigator-toolbox #nav-bar {
  order: 1 !important;
}

/* TABS TOOLBAR */
#TabsToolbar {
  order: 2 !important;
}

/* BOOKMARKS TOOLBAR*/
#PersonalToolbar {
  order: 3 !important;
}

/* Extra titlebar menu (above or below tabs, opens with alt) */
#toolbar-menubar {
  order: 0 !important;
}

/*=====================================================================
========================= S E T   C O L O R S =========================
=====================================================================*/

/* Sidebar background color change */
:root:not([lwtheme]) #browser #sidebar-box {
  --sidebar-background-color: var(--firefoxcss-main-bg-color) !important;
}

#main-window:not([lwtheme]) > body {
  background-color: var(--firefoxcss-item-bg-color) !important;
}

@media -moz-pref("sidebar.revamp") {
  :root:not([lwtheme]) #sidebar-container {
background-color: var(--firefoxcss-item-bg-color) !important;
    background-image: none !important;
  }
}

/*  :root[sidebar-expand-on-hover] #sidebar-container {
    background-color: transparent !important;
    background-image: none !important;
}

:root[sidebar-expand-on-hover]   #sidebar-container[sidebar-launcher-expanded],
:root[sidebar-expand-on-hover]   #sidebar-container[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
      background-color: color-mix(in srgb, var(--lwt-accent-color) 97%, transparent) !important;
  
 } */

@media not -moz-pref("sidebar.verticalTabs") {
  /*   #navigator-toolbox {
    border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid
      var(--firefoxcss-top-bar-border-bottom-color) !important;
  } */
}

@media not -moz-pref("sidebar.revamp") {
  /* Remove line between website content and top bar */
  #navigator-toolbox {
    border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid var(--firefoxcss-top-bar-border-bottom-color) !important;
  }
}

@media -moz-pref("sidebar.revamp") {
  @media not -moz-pref("sidebar.verticalTabs") {
    #navigator-toolbox {
      border-bottom: none !important;
    }
  }
}

/* Bookmarks bar background color */
:root:not([lwtheme]) #PersonalToolbar {
  background-color: var(--firefoxcss-bookmarks-bg-color) !important;
}

/* Set navigation toolbar to transparent */
:root:not([lwtheme]) #navigator-toolbox #nav-bar {
  background-color: var(--firefoxcss-item-bg-color) !important;
}

/* Whole Main Toolbar */
:root:not([lwtheme]) #navigator-toolbox {
  background-color: var(--firefoxcss-item-bg-color) !important;
}

@media not -moz-pref("browser.nova.enabled") {
  /* Trying to fix Custom Themes */
  :root[lwtheme] #navigator-toolbox,
  :root[lwtheme] #navigator-toolbox #nav-bar,
  :root[lwtheme-image] #navigator-toolbox,
  :root[lwtheme-image] #navigator-toolbox #nav-bar {
    background-image: var(--lwt-additional-images) !important;
  }
}

/* Remove background color from toolbars with some themes enabled */
:root[lwtheme]:not([privatebrowsingmode]),
:root[lwtheme-image]:not([privatebrowsingmode]) {
  #navigator-toolbox .browser-toolbar {
  &:not(.browser-titlebar) {
    background-color: transparent !important;
  }
}
  
}


:root[lwtheme]:not([privatebrowsingmode]),
:root[lwtheme-image]:not([privatebrowsingmode]) {
  
  --firefoxcss-lwtheme-fix-url-color: color-mix(in srgb, black 45%, transparent);
  
  --firefoxcss-url-bg-color-lwtheme: light-dark(
    color-mix(in srgb,  white 30%, transparent),
    color-mix(in srgb, black 34%, transparent));
  

  
/*   var(--toolbar-field-background-color); */
/*    var(--chrome-content-separator-color) */
/*   var(--lwt-accent-color) */
  
  --firefoxcss-url-popover-bg-color-lwtheme: var(--toolbar-field-background-color);
  
  --firefoxcss-url-bar-bg-color: var(--firefoxcss-url-bg-color-lwtheme);
  
    .urlbar[popover-open] > .urlbar-background {
      --firefoxcss-url-bar-bg-color: var(--firefoxcss-url-popover-bg-color-lwtheme) !important;
    }

    .urlbarView-background {
        --firefoxcss-url-bar-bg-color: var(--firefoxcss-url-popover-bg-color-lwtheme) !important;
    }
  
  
  --firefoxcss-lwtheme-fix-url-color-shadow-test: 
    color-mix(in srgb, var(--chrome-content-separator-color) 50%, transparent);

  @media (prefers-color-scheme: light) {
     --firefoxcss-url-box-shadow-color: inset 0px 0px 1px 1px 
       color-mix(in srgb, white 60%, transparent),  0px 0px 0px 1px hsla(0, 0%, 0%, 0.04) !important;
  }
  
/*         --firefoxcss-url-bg-color-lwtheme: light-dark(
    color-mix(in srgb,  black 4%, transparent),
    color-mix(in srgb, black 34%, transparent));
  
    @media (prefers-color-scheme: light) {
     --firefoxcss-url-box-shadow-color: 0px 0px 0px 1px 
       color-mix(in srgb, white 60%, transparent), inset  0px 0px 0px 1px hsla(0, 0%, 0%, 0.08)!important;
  } */
  
  @media (prefers-color-scheme: dark) {
   --firefoxcss-url-box-shadow-color: 0px 1px 0 0px hsla(0, 0%, 100%, 0.08),  inset 1px 1px 2px 1px hsla(0, 0%, 0%, 0.22) !important;
  }
  
  

  --urlbarview-background-color-selected: color-mix(
    in srgb,
    color-mix(in srgb, var(--lwt-accent-color) 80%, white) 30%,
    transparent
  ) !important;

  #vertical-tabs #tabbrowser-tabs[orient="vertical"] tab-split-view-wrapper:not([hasactivetab]) {
    background-color: color-mix(
      in srgb,
      color-mix(in srgb, var(--lwt-accent-color) 80%, white) 30%,
      transparent
    ) !important;
  }

  .toolbar-items #tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper:not([hasactivetab]) {
    background-color: color-mix(
      in srgb,
      color-mix(in srgb, var(--lwt-accent-color) 80%, white) 30%,
      transparent
    ) !important;
  }

/*   & #urlbar:not([searchmode]) .searchmode-switcher {
    --button-background-color-active: color-mix(
        in srgb,
        color-mix(in srgb, var(--lwt-accent-color) 86%, white) 70%,
        transparent
      ) !important;
    --button-background-color-hover: color-mix(
        in srgb,
        color-mix(in srgb, var(--lwt-accent-color) 86%, white) 70%,
        transparent
      ) !important;
    --button-background-color-selected: color-mix(
        in srgb,
        color-mix(in srgb, var(--lwt-accent-color) 86%, white) 70%,
        transparent
      ) !important;
  } */
}

@media not -moz-pref("browser.nova.enabled") {
  
  @media not -moz-pref("sidebar.verticalTabs") {
    :root[lwtheme],
    :root[lwtheme-image] {
      #browser,
      #navigator-toolbox {
        --toolbar-background-color: transparent !important;
      }
    }
  }
  
}

/* Fix purple background color when switching tabs in private */
:root {
  &[privatebrowsingmode="temporary"] {
      --tabpanel-background-color: var(--firefoxcss-main-bg-color) !important;
  }
}

/* Website Loading Background color fix */
:root:not([lwtheme]) #tabbrowser-tabpanels .browserContainer {
  background-color: var(--firefoxcss-bright-flash-color) !important;
}

/* CTRL+F Search Bar color changes  */
:root:not([lwtheme]) .browserContainer > findbar {
  background-image: none !important;
  background-color: var(--firefoxcss-main-bg-color) !important;
}

:root:not([lwtheme]) .browserContainer > findbar .findbar-textbox {
  background-color: var(--firefoxcss-item-bg-color) !important;
}

/* Add-bookmarks and add-bookmarks-folder popup panels */
#bookmarkproperties {
  --background-color-canvas: var(--firefoxcss-item-bg-color) !important;
  --background-color-box: color-mix(in srgb, var(--firefoxcss-item-bg-color) 80%, black) !important;
}

/* Fixes split view background color */
@media (not -moz-pref("sidebar.verticalTabs")) and (not -moz-pref("browser.nova.enabled")) {
  #browser {
    background-color: var(--firefoxcss-item-bg-color) !important;
  }
}

/*=====================================================================
========================= H I D E   E L E M E N T S ===================
=====================================================================*/

/* Remove empty space from tabs bar */
#TabsToolbar .titlebar-spacer[type="pre-tabs"],
#TabsToolbar .titlebar-spacer[type="post-tabs"],
#TabsToolbar .titlebar-spacer,
#nav-bar .titlebar-spacer[type="pre-tabs"],
#nav-bar .titlebar-spacer[type="post-tabs"],
/* Remove Line above search engine selection in search bar */
#urlbar .search-one-offs .search-panel-one-offs-header-label,
/* Remove lefover window buttons from extra menu bar (when pressing alt)*/
#toolbar-menubar .titlebar-buttonbox-container,
/* Private browser icons remove and change main menu to purple */
.private-browsing-indicator-with-label,
.private-browsing-indicator,
/* Hide tracking protection icon from Search Bar */
/* #tracking-protection-icon-container, */
/* Hide permission icons, see it when pressing permission button */
#blocked-permissions-container {
  display: none !important;
}

/* Remove line between website content and top bar */
#navigator-toolbox {
  /*   border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid
    var(--firefoxcss-top-bar-border-bottom-color) !important; */
}

/*=====================================================================
======================= H E I G H T   F I X E S =======================
=====================================================================*/

/* Menu Bar height */
#toolbar-menubar {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: 22px !important;
  max-height: 22px !important;
}

/*=====================================================================
=============================== I C O N S =============================
=====================================================================*/


/* This let us change the icon to our own using custom image path 
   instead of when icon is directly inside chrome directory */
@property --firefoxcss-arrow-icon {
  syntax: "<url> | none";
  inherits: true;
  initial-value: none;
}
  
  #forward-button{
    --firefoxcss-arrow-icon: url("ASSETS/icons/arrow/right-arrow.svg");
    list-style-image: url("ASSETS/icons/arrow/right-arrow.svg") !important;
    --menuitem-icon: var(--firefoxcss-arrow-icon) !important;
  }
  
  #context-forward {
      --firefoxcss-arrow-icon: url("ASSETS/icons/arrow/right-arrowContext.svg");
      --menuitem-icon: var(--firefoxcss-arrow-icon) !important;    
  }

  #back-button {
    --firefoxcss-arrow-icon: url("ASSETS/icons/arrow/left-arrow.svg");
    list-style-image: var(--firefoxcss-arrow-icon) !important;
    
  }
  
  #context-back {
      --firefoxcss-arrow-icon: url("ASSETS/icons/arrow/left-arrowContext.svg");
      --menuitem-icon: var(--firefoxcss-arrow-icon) !important;
    
  }
  
/*   Remove purple outline on active secondary search bar */
   #search-container .urlbar[popover-open][focused] > .urlbar-input-container {
    outline: none !important;
  }

/*=====================================================================
------------------- S E A R C H   B A R -------------------------------
=====================================================================*/
/* Default Searchbox font size */
#urlbar,
#searchbar {
  font-size: 1.1rem !important;
}

/* Pull the Go Button out of the layout flow */

#urlbar-container .urlbar-go-button {
  position: absolute !important;
  right: 3px !important;
  /* Vertically center it so it doesn't float to the top */
  top: 50% !important;
  transform: translateY(-50%) !important;
  :root#main-window:not([theme-effective-id="ATBC@EasonWong"]) & {
    background-color: light-dark(hsla(200, 5%, 96%, 0.6), hsla(0, 0%, 20%, 0.6)) !important;
  }
  /* Ensure it sits safely on top of the text if you type a long URL */
  z-index: 2 !important;
}

/* Styling Search Containers 
    .urlbar-background - main search container
    #searchbar - secondary/extra search container */
.urlbar-background,
#searchbar {
  border-radius: var(--firefoxcss-border-radius) !important;
  
  :root#main-window:not([theme-effective-id="ATBC@EasonWong"]) & {
    background-color: var(--firefoxcss-url-bar-bg-color) !important;
    box-shadow: var(--firefoxcss-url-box-shadow-color) !important;
    border: 0 !important;
  }

  /*   border-bottom: var(--mod-url-border-bottom-color) !important;  */
  /*   border-top: var(--mod-url-border-top-color) !important;  */
  /*   box-shadow: var(--mod-url-box-shadow-color) !important; */
  /*   inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05); */
  /*   color-mix(in oklab,var(--gray-a6),var(--gray-6) 30%) */
  /*   box-shadow: inset var(--shadow-4); */
  /*   --shadow-4: 0 0 0 1px color-mix(in oklab,black,white 30%),0 8px 40px var(--black-a3),0 12px 32px -16px var(--black-a5); */
  /*! background-color: transparent !important; */
  /*! background-color: red !important; */
  /*! z-index: 10 !important; */
}

/* Search box border radius  */
.urlbar-background,
#urlbar .urlbar-input-container,
#searchbar {
  border-radius: var(--firefoxcss-border-radius) !important;
}

/* Center search box text  */
#urlbar #urlbar-input {
  text-align: center !important;
}

/* Search outline disabled by default  */
@media not -moz-pref("mod.searchbox.focus.outline.enable") {
  /* Disable Focus outline */
  #urlbar[focused]:not([suppress-focus-border]) > .urlbar-background,
  #searchbar:focus-within {
    outline: none !important;
  }
}

/* When searchbar focused text opacity changed */
:root:not([lwtheme]) #urlbar[focused] .urlbar-input::placeholder {
  opacity: 0.4 !important;
}

/* Placeholder text - add shadow and spacing  */
:root:not([lwtheme]) #urlbar .urlbar-input::placeholder,
:root:not([lwtheme]) #urlbar .searchbar-textbox::placeholder {
  color: color-mix(in srgb, currentColor 80%, transparent) !important;
  opacity: 0.8 !important;
}

/* Remove border line between searche results and input  */
/* Remove line over search engines in popout search  */
#urlbar .urlbarView-body-inner,
#urlbar .urlbarView:not([noresults]) > .search-one-offs:not([hidden]) {
  border-top: none !important;
}


/* Secondary search box drowndow colors */
#PopupSearchAutoComplete {
  --panel-background-color: var(--firefoxcss-url-breakout-bar-bg-color) !important;
}

/* @media not -moz-pref("browser.nova.enabled") { */
  #urlbar {
      --urlbar-height: var(--firefoxcss-searchbar-height) !important;
  }
/* } */

@media not -moz-pref("browser.nova.enabled") {
  .urlbarView-results {
    #urlbar[open] > .urlbarView > & {
      border-top: none !important;
    }
  }
  
  .urlbarView-background {
    background-color:  var(--firefoxcss-url-bar-bg-color) !important;
    --urlbar-background-box-shadow-open: var(--firefoxcss-url-breakout-box-shadow) !important;
    border: 0px !important;
    
  }
  
  .urlbar[popover-open] > .urlbar-background {
    --urlbar-input-growth-open-inline: 0px !important;
    --urlbar-input-growth-open-block: 0px !important;
  }
  
  .urlbar[popover-open] > .urlbar-input-container {
     --urlbar-input-growth-open-inline: 0px !important;
     --urlbar-input-growth-open-block: 0px !important;
  }
  
}

 /* Dropdown search box colors */
 #urlbar[popover-open][open] .urlbar-background {
    border-top: var(--firefoxcss-url-breakout-border-top-color) !important;
    box-shadow: none !important;
 }

 #urlbar[popover-open][open] .urlbar-background {
  :root#main-window:not([theme-effective-id="ATBC@EasonWong"]) & {
     box-shadow: var(--firefoxcss-url-breakout-box-shadow) !important;
  }
}


@media -moz-pref("browser.nova.enabled") {

.urlbar[popover-open] > .urlbar-background {
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
/*   --urlbar-joint-background-overlap: -20px !important; */
/*   inset-block-end: calc(-1 * var(--urlbar-joint-background-overlap)) !important; */
  --urlbar-background-overhang-open: 0px !important;
  --urlbar-joint-background-shadow-margin: 0px !important;
  inset: 0 !important;
  clip-path: none !important;
}

  
.urlbarView-background {

  background-color:  var(--firefoxcss-url-bar-bg-color) !important;
/*   background-color: hsla(0, 0%, 20%, 0.9) !important; */
/*    background-color: hsla(0, 0%, 20%, 0.4) !important;
  backdrop-filter: blur(8px) !important; */
  
  --urlbar-background-box-shadow-open: var(--firefoxcss-url-breakout-box-shadow) !important;
/*   border-bottom: var(--firefoxcss-url-breakout-border-bottom-color) !important; */
  border-radius: var(--firefoxcss-border-radius) !important;
  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
 --urlbarview-margin-block: 0px !important;
/*   Fixes weird border flashing overlap when blur or transparent panel used */
  --urlbar-joint-background-overlap: 0px !important;

}

  :where(.urlbar:not([noresults])) > .urlbarView {
      padding-block-start: calc(1rem - 0.5rem) !important;
    
  }

.urlbarView {
  --urlbarview-margin-inline: 0px !important;
  --urlbarview-joint-background-outset-inline: 0px !important;
  padding-inline: 3px !important;
  --urlbarview-row-border-radius: 10px !important;
  margin: 0 !important;
}

#urlbar[popover-open] > .urlbar-input-container {
  outline: none !important;
}
  
  #urlbar > .urlbar-input-container{
/*     padding-inline: 3px !important;  */
  }
  
}

/*=====================================================================
============================= T A B S =================================
=====================================================================*/

/* Fix tab close button in vertical mode */
#tabbrowser-tabs[orient="vertical"] {
  &:not([expanded]) {
    & .tab-close-button {
      width: 14px !important;
      height: 14px !important;
      padding: 2px !important;
    }
  }
}

#vertical-pinned-tabs-splitter:not(:hover) {
  /*! margin-inline: var(--space-large) !important; */
  opacity: 0.3; 
}

#sidebar-tools-and-extensions-splitter:not(:hover) {
  opacity: 0.3; 
}

/*  Remove line when tabs overflow creating 2 lines - Bug? */
#tabbrowser-tabs[orient="vertical"] {
  &[overflow]::after {
    border-bottom: none !important;
    margin-inline: var(--space-large) !important;
  }
}

/* Non active tabs have darker text */
:root:not([lwtheme]) .tabbrowser-tab:not([selected]):not([multiselected]):not(:hover) .tab-label-container .tab-label {
  color: var(--firefoxcss-non-active-tabs) !important;
}

/* Remove empty space after pinned tabs */
#pinned-tabs-container[orient="horizontal"] {
  margin-inline-end: 0px !important;
}

.tabbrowser-tab .tab-label-container .tab-label {
  transition: color 100ms ease !important;
}

#tabbrowser-tabs {
  --tab-icon-fill-loading: transparent !important;
}

.tabbrowser-tab:not([selected]):not([multiselected]):not(:hover) .tab-icon-image {
  opacity: 0.8 !important;
  transition: opacity 100ms ease !important;
}

/* Normal tabs design */
  & .tabbrowser-tab .tab-background:not([selected]) {
    border: 0 !important;
    border-radius: var(--firefoxcss-border-radius) !important;
    :root:not([lwtheme]) & {
    background-image: none !important;
    background-color: var(--firefoxcss-tab-bg-color) !important;
    transition: background-color 100ms ease !important;
    box-shadow: var(--firefoxcss-normal-tabs-box-shadow) !important;
    /*! box-shadow: none !important; */
    /*! border-bottom: 1px solid #0006 !important; */
  }
}
/*   :root#main-window[privatebrowsingmode][theme-effective-id="firefox-privatewindow@mozilla.org"] > body{ */

@media -moz-pref("sidebar.verticalTabs") {
  :root:not([lwtheme]) .tabbrowser-tab:not([pinned]) .tab-background:not([selected]) {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #vertical-pinned-tabs-container-separator {
    margin-inline: calc(5 * var(--space-xsmall)) !important;
    border-bottom: 1px solid light-dark(#00000030, #ffffff2e) !important;
  }
}

/* Normal tabs design on hover */
  & #tabbrowser-tabs .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
    border-radius: var(--firefoxcss-border-radius) !important;
    :root:not([lwtheme]) &{
      border: 0 !important;
      background-image: none !important;
      background-color: var(--firefoxcss-tab-hover-bg-color) !important;
      box-shadow: var(--firefoxcss-normal-tabs-box-shadow) !important;
    }
  }

/* Selected tabs design */
  & #tabbrowser-tabs .tabbrowser-tab .tab-background[selected] {
    border-radius: var(--firefoxcss-border-radius) !important;
    :root:not([lwtheme]) &{
      border: 0 !important;
      background-image: none !important;
      background-color: var(--firefoxcss-tab-active-bg-color) !important;
      box-shadow: none !important;
      outline: none !important;
    }
  }

/* Multiselect tabs */
  & #tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected] {
    border-radius: var(--firefoxcss-border-radius) !important;
    :root:not([lwtheme]) &{
      border: 0 !important;
      background-image: none !important;
      outline: none !important;
      background-color: var(--firefoxcss-tab-active-bg-color) !important;
      box-shadow: none !important;
    }
  }

:root:not([lwtheme]) #tabbrowser-tabs .tabbrowser-tab .tab-background:is([selected]):is([multiselected]) {
  outline: 1px solid var(--firefoxcss-tab-multiselect-outline) !important;
  outline-offset: 0px !important;
  outline-width: 1px !important;
}

@media not -moz-pref("sidebar.verticalTabs") {
  /* Show Tab close button on hover */
  .tabbrowser-tab:not([pinned]) .tab-close-button {
    display: flex !important;
    opacity: 0;
    visibility: collapse !important;
  }
}

#navigator-toolbox .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  opacity: 1;
  visibility: visible !important;
  border-radius: 100% !important;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease,
    background-color 0.15s ease !important;
}

/* Show Tab close button on hover */
#navigator-toolbox .tabbrowser-tab:not([pinned]) .tab-close-button {
  display: flex !important;
  opacity: 0;
  visibility: collapse !important;
}

#navigator-toolbox .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  opacity: 1;
  visibility: visible !important;
  border-radius: 100% !important;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease,
    background-color 0.15s ease !important;
}

#tabbrowser-tabs[expanded][orient="vertical"] {
  & .tabbrowser-tab:not([pinned]):hover .tab-close-button {
    opacity: 1;
    visibility: visible !important;
    border-radius: 100% !important;
    transition:
      opacity 0.15s ease,
      visibility 0.15s ease,
      background-color 0.15s ease !important;
  }

  & .tabbrowser-tab:not([pinned]) .tab-close-button {
    display: flex !important;
    opacity: 0;
    visibility: collapse !important;
  }

  & .tabbrowser-tab:not([pinned]):hover .tab-close-button {
    opacity: 1;
    visibility: visible !important;
    border-radius: 100% !important;
    transition:
      opacity 0.15s ease,
      visibility 0.15s ease,
      background-color 0.15s ease !important;
  }
}

:root:not([lwtheme])
  #tabbrowser-tabs[movingtab]
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab:is([selected], [multiselected])
  .tab-background {
  background-color: color-mix(in srgb, var(--firefoxcss-tab-active-bg-color) 50%, transparent) !important;
  backdrop-filter: blur(12px);
}

/* .tab-icon-overlay {
  &:not([indicator-replaces-favicon]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      top: unset !important;
      inset-inline-end: unset !important;
      transform: translate(50%,-50%); 
    }
  }
} */

.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      /*     fill: var(--firefoxcss-tab-speaker-icon-color) !important; */
      color: var(--firefoxcss-tab-speaker-icon-color) !important;
      --button-text-color-ghost: var(--firefoxcss-tab-speaker-icon-color) !important;
      border-radius: 20px !important;
      transform: scale(1);
      filter: drop-shadow(-1px 1px 1px light-dark(#0000002e, #00000052));
      border: none !important;
      background-color: transparent !important;
      transition:
        transform 150ms ease-in-out,
        fill 100ms ease-in-out,
        background-color 100ms ease-in-out !important;
      --button-border-radius: 20px !important;

      &:hover {
        background-color: var(--firefoxcss-tab-speaker-color) !important;
        color: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        --button-text-color-ghost-hover: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        /*     fill: var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
        transform: scale(0.8);
        border: none !important;
        transition:
          transform 150ms ease-in-out,
          fill 100ms ease-in-out,
          background-color 100ms ease-in-out,
          filter 100ms ease-in-out !important;
        /*            animation: mod-bounce 250ms ease; */
      }
      &:hover:active {
        color: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        --button-text-color-ghost-active: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
      }
    }
  }
}

/* button > .button-background {
  &[type~="icon"]:not(.labelled) {
    fill: var(--firefoxcss-tab-speaker-icon-color) !important;
    border-radius: 20px !important;
    transform: scale(1);
    filter: drop-shadow(-1px 1px 1px light-dark(#0000002e, #00000052));
    border: none !important;
    transition: transform 150ms ease-in-out, fill 100ms ease-in-out,
      background-color 100ms ease-in-out !important;
  }
}

button:hover > .button-background {
  &[type~="ghost"] {
    background-color: var(--firefoxcss-tab-speaker-color) !important;
    fill: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
    transform: scale(0.8);
    border: none !important;
    transition: transform 150ms ease-in-out, fill 100ms ease-in-out,
      background-color 100ms ease-in-out, filter 100ms ease-in-out !important;
  }
} */

@media -moz-pref("sidebar.verticalTabs") {
  /* More compact vertical tabs */

  /*   #tabbrowser-tabs[orient="vertical"] {
    .tabbrowser-tab:not([pinned]) {
      padding-block: 2px 1px !important;
      &:nth-child(1 of :not([hidden], [pinned])) {
        padding-block-start: 4px !important;
      }
    }
  } */

  .tabbrowser-tab .tab-icon-overlay:not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      background-image: none !important;
      background-color: var(--firefoxcss-tab-speaker-color) !important;
      /*     background-color: #ffffff26 !important;  */
      background-color: #0000002e !important;
      border: 1px solid #ffffff29 !important;
      padding:1px !important;
      top: -9px !important;
      inset-inline-end: -10px !important;
      backdrop-filter: blur(6px);
      /*         border: 1px solid #ffffff29 !important; */
      /*      fill:  var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      /*       border: 1px solid #ffffff29 !important; */

      transition:
        transform 100ms ease-in-out,
        fill 100ms ease-in-out,
        background-color 100ms ease-in-out;

      &:hover {
        fill: var(--firefoxcss-tab-speaker-icon-color) !important;
        background-color: transparent !important;
        /*         background-color: #ffffff24 !important; */
        border: 1px solid #ffffff29 !important;
        background-color: #ffffff14 !important;
        transition:
          transform 100ms ease-in-out,
          fill 100ms ease-in-out,
          background-color 100ms ease-in-out !important;
        /*     transform: scale(1.4) translate(-0.35rem, 0.48rem); */
        transform: scale(1.2) translate(-8%, 14%);
        transform-origin: center !important;
      }
    }
  }

  .tabbrowser-tab[pinned] .tab-icon-overlay:not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      background-image: none !important;
      background-color: var(--firefoxcss-tab-speaker-color) !important;
      /*     background-color: #ffffff26 !important;  */
      background-color: #0000002e !important;
      border: 1px solid #ffffff29 !important;
      backdrop-filter: blur(6px);
      padding:1px !important;
      top: -9px !important;
      inset-inline-end: -10px !important;
      /*         border: 1px solid #ffffff29 !important; */
      /*      fill:  var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      /*       border: 1px solid #ffffff29 !important; */
      transition:
        transform 100ms ease-in-out,
        fill 100ms ease-in-out,
        background-color 100ms ease-in-out;

      &:hover {
        fill: var(--firefoxcss-tab-speaker-icon-color) !important;
        background-color: transparent !important;
        /*         background-color: #ffffff24 !important; */
        border: 1px solid #ffffff29 !important;
        background-color: #ffffff14 !important;
        transition:
          transform 100ms ease-in-out,
          fill 100ms ease-in-out,
          background-color 100ms ease-in-out !important;
        /*     transform: scale(1.4) translate(-0.35rem, 0.48rem); */
        transform: scale(1.2) translate(-8%, 14%);
        transform-origin: center !important;
      }
    }
  }
}

@media not -moz-pref("sidebar.verticalTabs") {
  .tabbrowser-tab[pinned] .tab-icon-overlay:not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      background-image: none !important;
      background-color: var(--firefoxcss-tab-speaker-color) !important;
      /*     background-color: #ffffff26 !important;  */
      background-color: #0000002e !important;
      padding:1px !important;
      top: -8px !important;
      backdrop-filter: blur(6px);
      border: 1px solid #ffffff29 !important;
      /*      fill:  var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      /*       border: 1px solid #ffffff29 !important; */
      transition:
        transform 100ms ease-in-out,
        fill 100ms ease-in-out,
        background-color 100ms ease-in-out;

      &:hover {
        fill: var(--firefoxcss-tab-speaker-icon-color) !important;
        background-color: transparent !important;
        /*         background-color: #ffffff24 !important; */
        border: 1px solid #ffffff29 !important;
        background-color: #ffffff14 !important;
        transition:
          transform 100ms ease-in-out,
          fill 100ms ease-in-out,
          background-color 100ms ease-in-out !important;
        /*     transform: scale(1.4) translate(-0.35rem, 0.48rem); */
        transform: scale(1.2) translate(-8%, 14%);
        transform-origin: center !important;
      }
    }
  }

  /* Pinned tabs padding  */
  :root:not([uidensity="compact"]) .tab-content[pinned] {
    padding: 0 8px !important;
  }

  #tabbrowser-tabs {
    margin-left: 2px !important;
  }

  /* Width of the tabs. Important to have Fadein or it breaks fonctionality */
  /* not([style^="max-width"] :not([overflow])*/
  #tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) {
    &:not(tab-split-view-wrapper .tabbrowser-tab) {
      max-width: var(--firefoxcss-tab-max-width) !important;
      min-width: var(--firefoxcss-tab-min-width) !important;
    }
  }

  /* Selected tabs width increase */
  #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[selected][fadein]:not([pinned]) {
    &:not(tab-split-view-wrapper .tabbrowser-tab) {
      max-width: 175px !important;
    }
  }

  /* Selected tabs width when overflowing */
  #tabbrowser-tabs[overflow] .tabbrowser-tab[selected][fadein]:not([pinned]) {
    &:not(tab-split-view-wrapper .tabbrowser-tab) {
      min-width: 150px !important;
    }
  }

  /* 
 * Fix the height of the tab because if you
 * change --tab-min-height it doesnt work for fullcreen
 */
  
  :root {
  /* Added to existing 2px tab margin.
     1px here gives approximately 3px below the tab background. */
  --firefoxcss-tabs-bottom-padding: 2px;
}

/* Permanent layout: independent of the bookmarks popout mod. */
:root:not([inDOMFullscreen], [customizing]) #navigator-toolbox {
  padding-block-end: 0 !important;
  margin-block-end: 0 !important;
}

#TabsToolbar {
  padding-block: 0 !important;
}

/* Only horizontal tabs receive the extra bottom spacing. */
@media not -moz-pref("sidebar.verticalTabs") {
  #TabsToolbar {
    padding-block-end:
      var(--firefoxcss-tabs-bottom-padding) !important;
  }
}
  

  /* Remove the line between the tabs / seperators */
  #tabbrowser-tabs .tabbrowser-tab::before,
  #tabbrowser-tabs .tabbrowser-tab::after {
    border: 0 !important;
  }


  /* Remove right and left side tab overflow border line */
  #scrollbutton-up ~ spacer {
    border-color: transparent !important;
  }
}

/* Make tab group works correctly */
tab-group[collapsed] > .tabbrowser-tab {
  visibility: collapse !important;
}
/*=====================================================================
============ W I N D O W   C O N T R O L   B U T T O N S ==============
=====================================================================*/
/* :root[sizemode="fullscreen"] #navigator-toolbox { position: relative; } */

/* Fix for web apps */
:root[taskbartab] #navigator-toolbox:not([tabs-hidden]) {
  #nav-bar .titlebar-buttonbox-container {
    display: none !important;
  }
}

/* Add more movable space for Web Apps */
:root[taskbartab] #nav-bar {
  & .titlebar-spacer[type="pre-tabs"] {
    width: 20px !important;
    display: initial !important;
  }
}

@media (-moz-platform: windows) {
  /* Keep showing the buttons when alt menu visible */
  .titlebar-buttonbox-container {
    #toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > & {
      visibility: visible !important;
    }
  }

  @media -moz-pref("sidebar.verticalTabs") {
    #toolbar-menubar[autohide]:not([inactive]) ~ :is(#TabsToolbar, #nav-bar) > .titlebar-buttonbox-container {
      visibility: unset !important;
    }
  }

  #TabsToolbar .titlebar-buttonbox-container,
  #nav-bar .titlebar-buttonbox-container {
    /*! padding-top: 3px !important; */
    /*! padding-bottom: 3px !important; */
    /*! padding-right: 3px !important; */
    /*! padding-left: 3px !important; */
  }

  .titlebar-buttonbox-container .titlebar-button > .toolbarbutton-icon {
    height: 12px !important;
    min-height: 12px !important;
    width: 12px !important;
    min-width: 12px !important;
  }
  
  

  .titlebar-buttonbox-container .titlebar-button {
    @media not -moz-pref("browser.nova.enabled") {
      border-radius: var(--toolbarbutton-border-radius);
    }
    padding: 11px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  @media not -moz-pref("mod.tabs.on.top.enable") {
    #toolbar-menubar .titlebar-button {
      padding-block: 0px !important;
    }

    #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
      padding-inline-start: 2px !important;
    }

    :root[sizemode="maximized"] .titlebar-buttonbox-container {
      padding-top: 0px !important;
    }

    #navigator-toolbox[inFullscreen] #nav-bar {
      padding-right: initial !important;
    }

    @media not -moz-pref("sidebar.verticalTabs") {
      #nav-bar {
        padding-right: var(--firefoxcss-control-buttons-margin) !important;
      }

      #navigator-toolbox:not([inFullscreen]) #TabsToolbar .titlebar-buttonbox-container {
        visibility: visible !important;
        display: flex !important;
        position: absolute !important;
        top: 0px;
        right: 0;
      }

      .titlebar-buttonbox-container .titlebar-min {
        order: 0 !important;
      }

      .titlebar-buttonbox-container .titlebar-max,
      .titlebar-restore {
        order: 1 !important;
      }

      .titlebar-buttonbox-container .titlebar-close {
        order: 2 !important;
      }

      @media only screen and (max-width: 670px) {
        #navigator-toolbox:not([inFullscreen]) #TabsToolbar .titlebar-buttonbox-container {
          visibility: visible !important;
          display: flex !important;
          position: relative !important;
          order: 1 !important;
          padding-top: 1px !important;
          padding-bottom: 1px !important;
        }

        #navigator-toolbox:not([inFullscreen]) #nav-bar {
          padding-right: initial !important;
        }
      }
    }
  }
}
/*=====================================================================
====================== C O N T E X T   M E N U ========================
=====================================================================*/

:is(menupopup, panel):where([type="arrow"]) {
  --panel-menuitem-margin: 1px 6px !important;
  --panel-menuitem-padding: 5px 6px !important;
}

/*  Context menu padding */
:not(#ContentSelectDropdown) > menupopup {
  @media (-moz-platform: windows) {
    & > menu,
    & > menuitem {
      --menuitem-margin: 2px 4px !important;
      --menuitem-padding-block: 0.35em !important;
      --menuitem-padding-inline: 0.5em !important;
    }
  }
}


/* Some website and menu dropdown colors  */
#ContentSelectDropdownPopup {
  --content-select-background-image: none !important;
}

/* ----- Menu Separator #context-sep-selectall ----- */
menuseparator {
  border-color: var(--panel-border-color) !important;
  padding-block: 1px !important;
}

menuseparator#context-sep-navigation {
  border-color: var(--panel-border-color) !important;
}

/* ----- Menu Colors ----- */
menupopup,
panel {
  /*   #ContentSelectDropdown used to remove websites native dropdown modifications */
  /*   #ctrlTab-panel used to fix Ctr+Tab */
  :not(#ContentSelectDropdown) > &:not(#ctrlTab-panel, #autoscroller) {
    /*! --panel-border-color: var(--panel-border-color) !important; */
    /*! --panel-padding: 2px 0px !important; */

/*     --panel-border-radius: 50px !important; */
    /*! --panel-padding-block: 4px 0px !important; */
    --menuitem-border-radius: var(--firefoxcss-context-menu-item-radius) !important;
    

    @media (-moz-platform: linux) {
       :root#main-window:not([theme-effective-id="ATBC@EasonWong"]) & {
      --panel-background-color: var(--firefoxcss-main-bg-color) !important;
      }
    }

    @media (-moz-platform: windows) {
      @media -moz-pref("widget.windows.mica.popups", 1) {
        :root#main-window:not([theme-effective-id="ATBC@EasonWong"]) & {
          --panel-background-color: var(--firefoxcss-main-bg-color) !important;
        }
      }
    }

    /*  Target windows 10 with no mica support */
    @media not (-moz-windows-mica-popups) {
      :root#main-window:not([theme-effective-id="ATBC@EasonWong"]) & {
        --panel-background-color: var(--firefoxcss-main-bg-color) !important;
      }
    }
  }
}


/* Can only change context menu corner radius
   when mica popup is disabled.
   This only targets non context menu type popups */
:root#main-window {
  --popup-border-radius: var(--firefoxcss-popupmenus-border-radius) !important;
  --panel-menuitem-border-radius: var(--firefoxcss-popupmenus-item-border-radius) !important;
}

  
/* Right click */
#context-navigation:not([hidden]) {
  background-color: var(--firefoxcss-context-menu-top-color) !important;
  padding: 4px !important;
  border-top-left-radius: var(--panel-border-radius) !important;
  border-top-right-radius: var(--panel-border-radius) !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Most website right click menus */
menupopup#contentAreaContextMenu {
  --panel-padding: 3px 0 3px !important;
}

/* Top of specific rightclick context menu to fix design choice */
menupopup#contentAreaContextMenu:has(#context-navigation:not([hidden])) {
  --panel-padding: unset !important;
  --panel-padding: 0 0 2px !important;
}

#context-sep-navigation {
  padding-block: 0px !important;
}

#context-navigation #context-back[disabled="true"] .menu-iconic-left .menu-iconic-icon {
  opacity: 0.5 !important;
}

#context-navigation #context-forward[disabled="true"] .menu-iconic-left .menu-iconic-icon {
  opacity: 0.5 !important;
}

menu,
menuitem {
  &:where([disabled="true"]) {
  }

  &:where([_moz-menuactive]:not([disabled="true"])) {
    color: -moz-menuhovertext;
    background-color: var(--firefoxcss-context-menu-item-bg-color, initial) !important;
  }

  &:where([_moz-menuactive="true"][disabled="true"]) {
    background-color: var(--firefoxcss-context-menu-item-bg-color-inactive, initial) !important;
  }
}

@media (-moz-platform: linux) {
  :not(#ContentSelectDropdown) > menupopup {
    & > menu,
    & > menuitem {
      padding: 4px 4px !important;
      margin-inline: 2px !important;
      margin-block: 2px !important;
    }
  }

  #context-navigation > .menuitem-iconic .menu-iconic-icon {
    padding: 4px !important;
  }

  #context-navigation:not([hidden]) {
    padding: 3px 3px !important;
  }
}
/*=====================================================================
===================== B O O K M A R K S   B A R =======================
=====================================================================*/

/* Set bookmarks bar items padding */
#PlacesToolbarItems > .bookmark-item {
  padding-block: 5px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

#PersonalToolbar {
/*   padding-block-end: 2px !important; */
}



/*=====================================================================
=========================== B U T T O N S =============================
=====================================================================*/

/* Go Back button */
#back-button > .toolbarbutton-icon {
  border-radius: var(--toolbarbutton-border-radius) !important;
}

#back-button > .toolbarbutton-icon{
  border: none !important;
  background: none !important;
  width: calc(2 * var(--toolbarbutton-padding-inner) + 16px) !important;
  height: calc(2 * var(--toolbarbutton-padding-inner) + 16px) !important;
  padding: var(--toolbarbutton-padding-inner) !important;
}

#forward-button > .toolbarbutton-icon {
   width: calc(2 * var(--toolbarbutton-padding-inner) + 16px) !important;
  height: calc(2 * var(--toolbarbutton-padding-inner) + 16px) !important;
  padding: var(--toolbarbutton-padding-inner) !important;
}

/* Main Menu Button */
#PanelUI-button {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  border: none !important;
  border-inline-start: none !important;
}

toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-badge-stack {
  box-shadow: 0 0 4px var(--firefoxcss-toolbar-button-box-shadow) !important;
}

toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-badge-stack {
  box-shadow: 0 0 4px var(--firefoxcss-toolbar-button-active-box-shadow) !important;
}

/* ----- New tab icon size (16-default). Not change the rest of calc --- */
@media not -moz-pref("sidebar.verticalTabs") {
  #tabs-newtab-button .toolbarbutton-icon,
  #new-tab-button .toolbarbutton-icon {
    width: calc(2 * var(--toolbarbutton-padding-inner) + 12px) !important;
    height: calc(2 * var(--toolbarbutton-padding-inner) + 12px) !important;
  }
}

/* Design of the plus/newtab button - active/press */
:root:not([lwtheme])
  toolbar
  #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
  > .toolbarbutton-icon,
:root:not([lwtheme])
  toolbar
  #new-tab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
  > .toolbarbutton-icon {
  border: 0 !important;
  border-radius: 100% !important;
  background-image: none !important;
  background-color: var(--firefoxcss-new-tab-button-active) !important;
  box-shadow: inset 2px 2px 2px 0px var(--firefoxcss-new-tab-button-box-shadow-active) !important;
}

/* Design of the plus/newtab button - hover */
:root:not([lwtheme])
  toolbar
  #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
  > .toolbarbutton-icon,
:root:not([lwtheme])
  toolbar
  #new-tab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
  > .toolbarbutton-icon {
  border: 0 !important;
  border-radius: 100% !important;
  background-image: none !important;
  background-color: var(--firefoxcss-new-tab-button-hover) !important;
  box-shadow: 1px 1px 4px -1px var(--firefoxcss-new-tab-button-box-shadow-hover) !important;
}

/* Back button hover/active color */
#back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-hover-background) !important;
}

#back-button:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-active-background) !important;
}

/* Firefox view button */
#TabsToolbar #firefox-view-button {
  margin-left: 2px !important;
}

#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon {
  background-image: none !important;
  box-shadow: none !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-color: var(--firefoxcss-tab-hover-bg-color) !important;
}

#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon {
  background-image: none !important;
  background-color: var(--firefoxcss-main-bg-color) !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  box-shadow: none !important;
}

/* Remove line after firefox view button when put at the beginning of tabs strip */
:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem), 
:root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) {
  & ~ #tabbrowser-tabs[orient="horizontal"]::before {
    border-inline-start: none !important;
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
  }
}

#firefox-view-button {
  padding-right: 0px !important;
}

/*=====================================================================
============== U R L   A U T O   H I D E   B U T T O N S ==============
=====================================================================*/

@media not -moz-pref("mod.search.info.buttons.show.always") {
  @media -moz-pref("browser.urlbar.trustPanel.featureGate") {
    
 
        /* Hide the long text and animate the compact tracker count. */
/* @media -moz-pref("browser.urlbar.trustPanel.featureGate") {
  #trust-icon-container.has-blocked-trackers:not(.breached, .insecure) {
    --firefoxcss-tracker-count-delay: 400ms;
    --firefoxcss-tracker-count-duration: 230ms;

    #trust-icon-tracker-count-longform-wrapper {
      display: none !important;
    }

    #trust-icon-tracker-count-shortform-wrapper {
      display: grid !important;
      grid-template-columns: 1fr;
      opacity: 1;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      animation: none !important;
    }

    #trust-icon-tracker-count-shortform {
      min-width: 0;
      margin: 0 !important;
      margin-inline-start: var(--space-xxsmall) !important;
    }

    @media (prefers-reduced-motion: no-preference) {
      #trust-icon-tracker-count-shortform-wrapper {
        animation:
          show-shortform-tracker-count
          var(--firefoxcss-tracker-count-duration)
          cubic-bezier(0.2, 0, 0, 1)
          var(--firefoxcss-tracker-count-delay)
          both !important;
      }

      #urlbar:focus-within & {
        #trust-icon-tracker-count-shortform-wrapper {
          animation-play-state: paused !important;
        }
      }
    }
  }
} */
    
 /*   When location permission granted show permission box */
    /*   @media not -moz-pref("mod.hide.location.permissions.icon") {
    #urlbar #identity-permission-box:has(image.sharing-icon[sharing]) {
      opacity: 1 !important;
      transform: translateX(0) !important;
      margin-inline-end: initial !important;
      transition: margin-inline-end 100ms ease, opacity 100ms ease;
      transition-delay: 100ms;
    }
  }  */
    
    
 .urlbar-page-action,
    .urlbar-revert-button,
    .search-go-button {
      &:not([disabled]):hover {
        background-color: var(--toolbarbutton-hover-background, initial)  !important;
      }
    }
    
    
/* Hide tracker count text */
    @media -moz-pref("browser.urlbar.trackerCount.featureGate") or  -moz-pref("browser.urlbar.trackerCount.enabled"){
  #trust-icon-container {
    &.has-blocked-trackers:not(.breached, .insecure) {
          & #trust-icon-tracker-count-longform-wrapper {
                display: none !important;
          }
      }
    }
      
    #trust-icon-container.has-blocked-trackers:not(.breached, .insecure) {
      &:not(:hover, :active, [open="true"]) {
/*         background-color: transparent !important; */
      }
    }
  }
    
 


    .urlbar-go-button:not([disabled]):hover {
      background-color: light-dark(hsla(200, 5%, 100%, 1), hsla(0, 0%, 34%, 0.8)) !important;
    }

    .identity-box-button,
    #tracking-protection-icon-container {
      &:hover:not([open="true"]) {
        background-color: var(--toolbarbutton-hover-background, initial)  !important;
      }
    }

    #urlbar-label-box,
    #urlbar-zoom-button {
      background-color: var(--firefoxcss-item-bg-color) !important;
    }

    #urlbar-zoom-button:hover {
      background-color: var(--firefoxcss-urlbar-zoom-button) !important;
    }

    #urlbar-container .urlbar-input-box {
      margin-inline-start: 0px !important;
    }

    #identity-box {
      padding-inline-end: 4px !important;
    }

    /* Let you hide location permission icons to fix padding     */
    @media -moz-pref("mod.hide.location.permissions.icon") {
      #identity-permission-box box image.sharing-icon {
        opacity: 0 !important;
        visibility: collapse !important;
        transition:
          opacity 100ms ease-in-out,
          visibility 100ms ease-in-out;
        transition-delay: 100ms;
      }

      #identity-permission-box[open="true"] box image.sharing-icon {
        opacity: 1 !important;
        visibility: visible !important;
        transition:
          opacity 100ms ease,
          visibility 100ms ease;
        transition-delay: 100ms;
      }
    }

    #identity-box.extensionPage #identity-icon-box:not([open]) #identity-icon-label {
      opacity: 0 !important;
      visibility: collapse;
    }

    #identity-box.extensionPage #identity-icon-box #identity-icon-label {
      transition: opacity 0.3s ease !important;
    }

    @media -moz-pref("mod.hide.extension.url.icon") {
      #identity-box.extensionPage #identity-icon-box {
        display: none !important;
      }
    }
    
    
    /* Account for the permission button's start margin when hidden. */
    #urlbar #identity-box > #identity-permission-box {
      --firefoxcss-hidden-icon-gap: var(--urlbar-component-gap);
    }

    /* Adjust extension pages while preserving chromeUI and notification spacing. */
    #urlbar #identity-box.extensionPage > #identity-icon-box,
    #urlbar #identity-box > #notification-popup-box{
      margin-inline-start: 0 !important;
    }
    

  /* Default hidden state and shared transitions. */
  #urlbar :is(#trust-icon-container, #identity-permission-box) {
    opacity: 0 !important;
    transform: translateX(-14px) !important;
    margin-inline-end: calc( -16px - 2 * var(--urlbar-icon-padding) - var(--firefoxcss-hidden-icon-gap, 0px)
    ) !important;

/*     transition: transform 100ms ease, margin-inline-end 100ms ease, opacity 100ms ease !important;
    transition-delay: 80ms !important; */
  }
    
 #urlbar :is(#trust-icon-container, #identity-permission-box) {
  transition:
    transform 150ms cubic-bezier(0.2, 0, 0, 1),
    margin-inline-end 150ms cubic-bezier(0.2, 0, 0, 1),
    padding-inline-end 150ms cubic-bezier(0.2, 0, 0, 1),
    opacity 120ms ease !important;
  transition-delay: 0ms !important;
}
    
/* Pause before revealing both buttons on hover. */
#urlbar:has(#identity-box:hover, #trust-icon-container:hover)
  :is(#trust-icon-container, #identity-permission-box) {
  transition-delay: 30ms !important;
}

  /* Prevent overlap with the search mode switcher. */
  #urlbar:has(.searchmode-switcher:not([aria-hidden="true"])) :is(#trust-icon-container, #identity-permission-box) {
    transform: none !important;
  }

  /* Reveal on hover or while a button is pressed/open. */
  #urlbar:has(#identity-box:hover, #trust-icon-container:hover) :is(#trust-icon-container, #identity-permission-box),
  #urlbar :is(#trust-icon-container, #identity-permission-box):is(:hover:active,[open="true"]),
  /* Always show counts and security states at their natural width. */
  #urlbar #trust-icon-container:is(.has-blocked-trackers,.insecure,.breached,.warning),
  /* Always show Firefox UI and extension identity buttons. */
  #urlbar #identity-box[pageproxystate="valid"]:is(.chromeUI, .extensionPage) > #identity-icon-box {
    opacity: 1 !important;
    transform: none !important;
    margin-inline-end: 0px !important;
  }
    
    
    
    /* Hide the additional sharing icons. */
    #identity-permission-box[hasPermissions] #permissions-granted-icon + box,
    #identity-permission-box[hasSharingIcon] #permissions-granted-icon + box {
      visibility: collapse !important;
    }



    
 :root {
    /* Padding around searhbar container */
    --urlbar-input-container-padding: 3px !important;
  }
    
    /*  Left and right padding on searchbar container sides */
   .urlbar-input-container {
      padding-inline: calc(var(--urlbar-input-container-padding) - 1px) !important;
      
   }

    #urlbar #trust-icon-container.insecure {
      background-color: var(--firefoxcss-item-bg-color) !important;

      &:hover:not([open]) {
        background-color: var(--firefoxcss-urlbar-zoom-button) !important;
      }

      &:is(:hover:active, [open]) {
        background-color: var(--firefoxcss-urlbar-zoom-button) !important;
      }
    }
    #urlbar #trust-icon-container.insecure:is(:not(:hover, [open])) #trust-label {
      margin-inline-end: -70px !important;
      visibility: collapse !important;
      opacity: 0 !important;
      transition:
        visibility 100ms ease,
        margin-inline-end 120ms ease,
        opacity 100ms ease;
      transition-delay: 100ms;
    }

    #urlbar #trust-icon-container.insecure #trust-label {
      transition:
        visibility 120ms ease,
        margin-inline-end 120ms ease,
        opacity 120ms ease;
      transition-delay: 100ms;
    }

    :root:not([lwtheme])
      #urlbar
      #identity-box[pageproxystate="valid"]:is(.chromeUI, .extensionPage)
      > #identity-icon-box {
      background-color: var(--firefoxcss-item-bg-color) !important;

      &:hover:not([open]) {
        background-color: var(--firefoxcss-urlbar-zoom-button) !important;
      }

      &:is(:hover:active, [open]) {
        background-color: var(--firefoxcss-urlbar-zoom-button) !important;
      }
    }


    /*   This helps fixing start of "www" being cut off after hover when text overflowing */
    #urlbar .urlbar-input {
      will-change: transform;
      /*! transform: translateZ(0); */
    }

    #trust-icon-container:hover ~ .urlbar-input-box > #urlbar-input,
    #identity-box:hover ~ .urlbar-input-box > #urlbar-input {
      mask-image:
        linear-gradient(to right, transparent, black 3ch), linear-gradient(to left, transparent, black 3ch) !important;
      mask-composite: intersect;
    }

    #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms]):not([pageproxystate="invalid"])
      #page-action-buttons {
      padding-inline-start: 6px;
    }

    #urlbar:not([persistsearchterms]) .urlbar-input-container .urlbar-input-box {
      padding-inline-start: 3px !important;
    }

    #urlbar:not(.searchButton)
      > .urlbar-input-container
      > #identity-box[pageproxystate="invalid"]
      > .identity-box-button {
      padding-inline: var(--urlbar-icon-padding) !important;
    }

    #page-action-buttons .urlbar-page-action {
      margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
      opacity: 0 !important;
      transition:
        margin-inline-end 150ms ease-in-out,
        opacity 100ms ease-in-out;
    }

    #page-action-buttons:not(:hover) #translations-button[translationsactive="true"]:not([open]) {
      /*     visibility: collapse !important; */
    }

    #translations-button-locale {
      color: white !important;
    }

    #page-action-buttons #translations-button[translationsactive="true"] {
      margin-inline-end: initial !important;
      opacity: 1 !important;
    }

    #page-action-buttons #reader-mode-button[readeractive] {
      margin-inline-end: initial !important;
      opacity: 1 !important;
    }

    #page-action-buttons:hover > .urlbar-page-action,
    #page-action-buttons .urlbar-page-action[open],
    #page-action-buttons .urlbar-page-action[open] ~ .urlbar-page-action {
      opacity: 1 !important;
      margin-inline-end: initial !important;
      transition:
        margin-inline-end 100ms ease,
        opacity 100ms ease;
    }

    /* Create visual dots on both sides */
    /* left side identity-box dots modification dark color %23FFFFFF*/
    #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms]):not([pageproxystate="invalid"])
      #identity-box::after,
    #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms]):not([pageproxystate="invalid"])
      #page-action-buttons::before {
      position: relative;
      content: "•••";
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 32 32' fill='context-fill'%3E%3Ccircle cx='16' cy='5' r='4.25'/%3E%3Ccircle cx='16' cy='16' r='4.25'/%3E%3Ccircle cx='16' cy='27' r='4.25'/%3E%3C/svg%3E");
 
      pointer-events: none;
      -moz-context-properties: fill, fill-opacity;
      fill: var(--toolbarbutton-icon-fill) !important;
      transition: opacity 100ms ease;
      align-self: center;
      font-size: 1.25rem;

      /*    background-image: url('ASSETS/svg/dots-three-outline-vertical-fill-svgrepo-com.svg');
   background-size: 14px 14px;
    background-repeat: no-repeat;
  
      */ /*! width:14px; */ /* 
      height: 14px;
      content:""; */

      /*   -moz-context-properties: fill, fill-opacity;
    fill: currentColor; */
    }

    #identity-box::after,
    #page-action-buttons::before {
      opacity: 0.2;
    }

    #identity-box::after {
      /*   transform: rotate(90deg); */
      left: 2px;
    }

    #page-action-buttons::before {
      /*   transform: rotate(-90deg); */
      right: 2px;
    }

    #identity-box:hover::after,
    #page-action-buttons:hover::before {
      opacity: 0.2 !important;
      transition: opacity 50ms ease;
      pointer-events: none;
    }

    #identity-box[pageproxystate="invalid"]::after,
    .urlbar-input-container[pageproxystate="invalid"] > #page-action-buttons::before {
      opacity: 0 !important;
      transition: opacity 50ms ease;
    }

    /* Linux changes for visual dots */
    @media (-moz-platform: linux) {
      #identity-box::after,
      #page-action-buttons::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 32 32' fill='%23FFFFFF'%3E%3Ccircle cx='16' cy='5' r='4.25'/%3E%3Ccircle cx='16' cy='16' r='4.25'/%3E%3Ccircle cx='16' cy='27' r='4.25'/%3E%3C/svg%3E");
        transform: none !important;
        font-size: unset !important;
      }

      #page-action-buttons::before {
        right: 2px;
      }

      #identity-box::after {
        left: 2px;
      }
    }
    
    
    
    
    

  /* Remove the left dots when neither auto-hidden button
     is available to reveal. */
  #urlbar:not(:has(
    .urlbar-input-container[pageproxystate="valid"]
      > #trust-icon-container:not(
        .has-blocked-trackers,
        .insecure,
        .breached,
        .warning,
        .chickletShown,
        [hidden],
        [collapsed]
      ),

    #identity-box[pageproxystate="valid"]:not([hidden], [collapsed])
      > #identity-permission-box:is(
        [hasPermissions],
        [hasSharingIcon]
      ):not([hidden], [collapsed])
  )) #identity-box::after {
    content: none !important;
  }


    
    
  }

  

  
  @media not -moz-pref("browser.urlbar.trustPanel.featureGate") {
    
    @media -moz-pref("browser.nova.enabled") {
      #identity-box {
        column-gap: 0px !important;
      }
    }
    
    @media -moz-pref("browser.nova.enabled") {
        #urlbar > .urlbar-input-container {
          column-gap: 0px !important;
        }
    }
    /* - [persistsearchterms] - 
     Used when "Show search terms instead of URL on 
     default search engine results page" enabled.
     When you search a globe icon shows up to show full url */

    /*
  #urlbar:not([persistsearchterms]) #identity-icon-box,
  #urlbar:not([persistsearchterms]) #identity-permission-box {
    opacity: 0 !important;
    margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
    transition: margin-inline-start 100ms linear, opacity 200ms linear;
  }
  
  #identity-box:hover #identity-icon-box,
  #identity-box:hover #identity-permission-box,
  #identity-box #identity-permission-box[open="true"],
  #identity-box #identity-icon-box[open="true"] {
    opacity: 1 !important;
    margin-inline-start: initial !important;
  }
   */

    .urlbar-page-action,
    .urlbar-revert-button,
    .search-go-button {
      &:not([disabled]):hover {
        background-color: var(--toolbarbutton-hover-background, initial)  !important;
      }
    }

    .urlbar-go-button:not([disabled]):hover {
      background-color: light-dark(hsla(200, 5%, 100%, 1), hsla(0, 0%, 34%, 0.8)) !important;
    }

    .identity-box-button,
    #tracking-protection-icon-container {
      &:hover:not([open="true"]) {
        background-color: var(--toolbarbutton-hover-background, initial)  !important;
      }
    }

    #urlbar-label-box,
    #urlbar-zoom-button {
      background-color: var(--firefoxcss-item-bg-color) !important;
    }

    #urlbar-zoom-button:hover {
      background-color: var(--firefoxcss-urlbar-zoom-button) !important;
    }

    /* Let you hide location permission icons to fix padding     */
    @media -moz-pref("mod.hide.location.permissions.icon") {
      #identity-permission-box box image.sharing-icon {
        opacity: 0 !important;
        visibility: collapse !important;
        transition:
          opacity 100ms ease-in-out,
          visibility 100ms ease-in-out;
        transition-delay: 100ms;
      }

      #identity-permission-box[open="true"] box image.sharing-icon {
        opacity: 1 !important;
        visibility: visible !important;
        transition:
          opacity 100ms ease,
          visibility 100ms ease;
        transition-delay: 100ms;
      }
    }

    #identity-box.extensionPage #identity-icon-box:not([open]) #identity-icon-label {
      opacity: 0;
      visibility: collapse;
    }

    #identity-box.extensionPage #identity-icon-box #identity-icon-label {
      transition: opacity 0.3s ease;
    }

    @media -moz-pref("mod.hide.extension.url.icon") {
      #identity-box.extensionPage #identity-icon-box {
        display: none !important;
      }
    }

    #tracking-protection-icon-container,
    #identity-icon-box,
    #identity-permission-box {
      /* Initial hidden state for the elements */
      /* persistsearchterms - is when you see globe in search */
      #urlbar & {
        opacity: 0 !important;
        margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
        transition:
          margin-inline-start 150ms ease-in-out,
          opacity 100ms ease-in-out;
        transition-delay: 100ms;
      }

      /* Specific rules to keep the elements shown when hovering */
      #urlbar:has(#identity-box:hover) &,
      #urlbar:has(#tracking-protection-icon-container:hover) & {
        opacity: 1 !important;
        margin-inline-start: initial !important;
        transition:
          margin-inline-start 100ms ease,
          opacity 100ms ease;
        transition-delay: 100ms;
      }

      #urlbar &:hover:active,
      #urlbar &[open="true"] {
        opacity: 1 !important;
        margin-inline-start: initial !important;
      }
    }

    /*   When location permission granted show permission box */
    @media not -moz-pref("mod.hide.location.permissions.icon") {
      #urlbar #identity-permission-box:has(image.sharing-icon[sharing]) {
        opacity: 1 !important;
        margin-inline-start: initial !important;
        transition:
          margin-inline-start 100ms ease,
          opacity 100ms ease;
        transition-delay: 100ms;
      }
    }

    #urlbar #identity-box[pageproxystate="valid"] {
      &.weakCipher,
      &.mixedDisplayContent,
      &.mixedDisplayContentLoadedActiveBlocked,
      &.certUserOverridden,
      &.certErrorPage,
      &.notSecureText {
        & #identity-icon-box {
          margin-inline-start: initial !important;
          opacity: 1 !important;
          color: #e36f6f !important;
          background-color: var(--firefoxcss-item-bg-color) !important;

          &:hover:not([open]) {
            background-color: var(--firefoxcss-urlbar-zoom-button) !important;
          }

          &:is(:hover:active, [open]) {
            background-color: var(--firefoxcss-urlbar-zoom-button) !important;
          }
        }
      }

      &.notSecure,
      &.mixedActiveContent,
      &.httpsOnlyErrorPage {
        & #identity-icon-box {
          margin-inline-start: initial !important;
          opacity: 1 !important;
        }
      }
    }

    #urlbar #identity-box[pageproxystate="valid"]:is(.chromeUI, .extensionPage) > #identity-icon-box {
      margin-inline-start: initial !important;
      opacity: 1 !important;
      background-color: var(--firefoxcss-item-bg-color) !important;

      &:hover:not([open]) {
        background-color: var(--firefoxcss-urlbar-zoom-button) !important;
      }

      &:is(:hover:active, [open]) {
        background-color: var(--firefoxcss-urlbar-zoom-button) !important;
      }
    }

    /* #identity-box.chromeUI::after,
  #identity-box.chromeUI:hover::after {
    opacity: 0 !important;
  } */

    #urlbar:not([persistsearchterms]) .urlbar-input-container .urlbar-input-box {
      padding-inline-start: 3px !important;
    }

    #identity-box:hover ~ .urlbar-input-box > #urlbar-input {
      mask-image:
        linear-gradient(to right, transparent, black 3ch), linear-gradient(to left, transparent, black 3ch) !important;
      mask-composite: intersect;
    }

    #tracking-protection-icon-container:hover ~ .urlbar-input-box > #urlbar-input {
      mask-image:
        linear-gradient(to right, transparent, black 3ch), linear-gradient(to left, transparent, black 3ch) !important;
      mask-composite: intersect;
    }

    #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms]) #page-action-buttons {
      padding-inline-start: 6px;
    }

    #urlbar:not(.searchButton)
      > .urlbar-input-container
      > #identity-box[pageproxystate="invalid"]
      > .identity-box-button {
      padding-inline: var(--urlbar-icon-padding) !important;
    }

    #page-action-buttons .urlbar-page-action {
      margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
      opacity: 0 !important;
      transition:
        margin-inline-end 150ms ease-in-out,
        opacity 100ms ease-in-out;
    }

    #page-action-buttons:not(:hover) #translations-button[translationsactive="true"]:not([open]) {
      /*     visibility: collapse !important; */
    }

    #translations-button-locale {
      color: white !important;
    }

    #page-action-buttons #translations-button[translationsactive="true"] {
      margin-inline-end: initial !important;
      opacity: 1 !important;
    }

    #page-action-buttons #reader-mode-button[readeractive] {
      margin-inline-end: initial !important;
      opacity: 1 !important;
    }

    #page-action-buttons:hover > .urlbar-page-action,
    #page-action-buttons .urlbar-page-action[open],
    #page-action-buttons .urlbar-page-action[open] ~ .urlbar-page-action {
      opacity: 1 !important;
      margin-inline-end: initial !important;
      transition:
        margin-inline-end 100ms ease,
        opacity 100ms ease;
    }

    /* Create visual dots on both sides */
    /* left side identity-box dots modification dark color %23FFFFFF*/
    #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms]) #identity-box::after,
    #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms]) #page-action-buttons::before {
      position: relative;
      content: "•••";
      content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg fill="context-fill" width="13px" height="12px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 16c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 27c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 5c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25z"></path></svg>');
      pointer-events: none;
      -moz-context-properties: fill, fill-opacity;
      fill: var(--toolbarbutton-icon-fill) !important;
      transition: opacity 100ms ease;
      align-self: center;
      font-size: 1.25rem;

      /*    background-image: url('ASSETS/svg/dots-three-outline-vertical-fill-svgrepo-com.svg');
   background-size: 14px 14px;
    background-repeat: no-repeat;
  
      */ /*! width:14px; */ /* 
      height: 14px;
      content:""; */

      /*   -moz-context-properties: fill, fill-opacity;
    fill: currentColor; */
    }

    #identity-box::after,
    #page-action-buttons::before {
      opacity: 0.2;
    }

    #identity-box::after {
      /*   transform: rotate(90deg); */
      left: 2px;
    }

    #page-action-buttons::before {
      /*   transform: rotate(-90deg); */
      right: 2px;
    }

    #identity-box:hover::after,
    #page-action-buttons:hover::before {
      opacity: 0.2 !important;
      transition: opacity 50ms ease;
      pointer-events: none;
    }

    #identity-box[pageproxystate="invalid"]::after,
    .urlbar-input-container[pageproxystate="invalid"] > #page-action-buttons::before {
      opacity: 0 !important;
      transition: opacity 50ms ease;
    }

    /* Linux changes for visual dots */
    @media (-moz-platform: linux) {
      #identity-box::after,
      #page-action-buttons::before {
        content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg fill="context-fill" width="13px" height="12px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 16c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 27c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 5c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25z"></path></svg>') !important;
        transform: none !important;
        font-size: unset !important;
      }

      #page-action-buttons::before {
        right: 2px;
      }

      #identity-box::after {
        left: 2px;
      }
    }

    /* Search button show on hover in URL bar. */
    /* #urlbar-container:not(:hover) #urlbar:not(.searchButton):not([focused])
    > .urlbar-input-container > 
    #identity-box[pageproxystate="invalid"] #identity-icon {
      opacity: 0 !important; 
    }
    
    #urlbar-container #urlbar:not(.searchButton)
    > .urlbar-input-container > 
    #identity-box[pageproxystate="invalid"] #identity-icon {
      opacity: 1 !important; 
      visibility: visible !important;
      transition: opacity 0.2s ease;
    } */
  }
}
/*=====================================================================
==================== L I N U X   S U P P O R T ========================
=======================================================================
@media (-moz-gtk-csd-available)
@media (-moz-gtk-csd-reversed-placement) */

@media (-moz-platform: linux) {
  /*   Smaller tab text and height. Broken on fedora? */
  #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
    height: 2.4em !important;
    font-size: 0.85em;
  }

  @media -moz-pref("sidebar.verticalTabs") {
    #nav-bar {
      padding-bottom: 1px !important;
      border-top: none !important;
    }
  }
}

/*=====================================================================
=============== C U S T O M I Z A T I O N   M E N U ===================
=====================================================================*/
/* Customize toolbar background color */
#customization-container {
  background-image: none !important;
  background-color: var(--firefoxcss-main-bg-color) !important;
}

#PersonalToolbar[customizing] toolbarpaletteitem[place="toolbar"] > toolbarspring,
#nav-bar[customizing] toolbarpaletteitem[place="toolbar"] > toolbarspring,
#customization-container toolbarpaletteitem[place="palette"] > toolbarspring {
  outline: 1px solid var(--firefoxcss-customize-view-flex-space) !important;
  outline-offset: -3px !important;
  border-radius: 6px !important;
}

@media not (-moz-platform: macos) {
  #customization-panelWrapper > .panel-arrowcontent {
    border-radius: 10px !important;
    background-color: var(--firefoxcss-customize-view-overflow-menu) !important;
  }
}

#PersonalToolbar[customizing] {
  outline: 1px dashed var(--firefoxcss-customize-view-dashed-outline) !important;
}

.browserContainer > findbar .findbar-textbox {
  background-color: var(--firefoxcss-item-bg-color) !important;
}

#customization-container #customization-footer {
  border-top: none !important;
}

@media (-moz-platform: macos), (-moz-platform: windows), not (prefers-contrast) {
  #customization-container #customization-footer .customizationmode-button {
    border-radius: 4px !important;
  }
}

/*=====================================================================
============================= O T H E R ===============================
=====================================================================*/
@media -moz-pref("mod.disable.tab.preview.panel.fully") {
  #tab-preview-panel,
  #tabbrowser-tab-tooltip {
    display: none !important;
  }
}

/* Status URL change (bottom left when hovering a link)  */
#statuspanel-label {
  background-color: var(--firefoxcss-statuspanel-bg-color) !important;
  border-radius: 4px !important;
  border-color: transparent !important;
  color: currentColor !important;
  margin: 0 0 3px 3px !important;
  padding: 4px !important;
}

/* Make forward and back buttons smaller  */
#back-button .toolbarbutton-icon,
#forward-button .toolbarbutton-icon {
  padding: calc(var(--toolbarbutton-padding-inner) + 1px) !important;
}

/* Container extension code */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[usercontextid] .tab-background:not([selected]) {
  background: var(--identity-tab-color) !important;
  opacity: 0.3 !important;
}

/* Container extension code */
#tabbrowser-tabs .tab-context-line {
  display: none !important;
}

/* Three dots in search results. Only affects when row is hovered */
.urlbarView-button {
  .urlbarView-row:is([row-selectable]:hover, [selected]) &:not(:hover, [aria-expanded="true"]) {
    background-color: transparent !important;
    opacity: 0.8 !important;
  }
}

@media not -moz-pref("svg.context-properties.content.enabled") {
  #navigator-toolbox::before {
    width: 100%;
    content: ">>>> To fix buttons enable 'svg.context-properties.content.enabled' in about:config (type about:config in search) <<<<";
    color: #ffc6a4;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    background-color: #000;
    font-size: 1.1rem;
  }
}

/*===================== A L T  M E N U  BAR =========================*/
#toolbar-menubar {
  &[autohide="true"] {
    :root[customtitlebar] #navigator-toolbox:not([tabs-hidden]) > & {
      min-height: 0 !important;
    }
  }
}

#toolbar-menubar {
  &[autohide="true"] {
    :root[customtitlebar] #navigator-toolbox[tabs-hidden] > & {
      min-height: 0 !important;
    }
  }
}

/*===================== V E R T I C A L =========================*/

@media -moz-pref("sidebar.verticalTabs") and -moz-pref("sidebar.revamp") {
  :root {
    --firefoxcss-top-bar-border-bottom-size: 0px;
  }

  #nav-bar .titlebar-spacer[type="post-tabs"] {
    width: 5px !important;
    display: initial !important;
  }

  #vertical-spacer {
    width: 20px !important;
    min-width: 20px !important;
  }

  #tabbrowser-arrowscrollbox {
    --toolbox-background-color: var(--firefoxcss-item-bg-color) !important;
  }

  @media -moz-pref("mod.disable.scrollbar.in.vertical.tabs") {
    spacer[part="overflow-start-indicator"] + scrollbox[orient="vertical"][part="scrollbox"] {
      scrollbar-width: none !important;
    }
  }
}

@media -moz-pref("sidebar.revamp") {
  
  @media not -moz-pref("browser.nova.enabled") {
  /*   Outline around the browser container */
    .browserContainer {
      outline: 0.01px solid color-mix(in srgb, var(--chrome-content-separator-color) 70%, transparent) !important;
    }
  }

  @media -moz-pref("mod.disable.browser.border-and-shadow") {
    #tabbrowser-tabbox .browserContainer {
      outline: none !important;
      box-shadow: none !important;
    }
  }
}

/*===================== TABS TOP =========================*/

/* Tabs On Top */
@media -moz-pref("mod.tabs.on.top.enable") {
  @media not -moz-pref("sidebar.verticalTabs") {
    /* SEARCH BAR TOOLBAR */
    #nav-bar {
      order: 2 !important;
    }

    /* TABS TOOLBAR */
    #TabsToolbar {
      order: 1 !important;
    }

    /* BOOKMARKS TOOLBAR*/
    #PersonalToolbar {
      order: 3 !important;
    }

    /* Extra titlebar menu (above or below tabs, opens with alt) */
    #toolbar-menubar {
      order: 0 !important;
    }

    /* Tab bar top and bottom padding */
    #TabsToolbar {
      padding-top: 2px !important;
      padding-bottom: 0px !important;
    }

    #nav-bar {
      padding-bottom: 1px !important;
    }

    :root {
      --firefoxcss-searchbar-container-height: 36px !important;
    }

    #PanelUI-menu-button {
      padding-inline-end: 3px !important;
    }

    #TabsToolbar .titlebar-buttonbox-container {
      order: 1 !important;
      padding: 0px !important;
    }
  }
}

@media -moz-pref("mod.centered.tabs") {
  @media not -moz-pref("sidebar.verticalTabs") {
    #tabbrowser-arrowscrollbox:not([overflowing]) {
      --uc-justify-content: center;
    }

    scrollbox[orient="horizontal"] > slot {
      justify-content: var(--uc-justify-content, initial);
    }
  }
}

/* Linux window control stuff */

@media (-moz-platform: linux) {
  @media -moz-pref("sidebar.verticalTabs") {
    #nav-bar .titlebar-spacer[type="post-tabs"] {
      display: none !important;
    }
  }

  /* Keep showing the buttons when alt menu visible */
  #toolbar-menubar[autohide]:not([inactive]) ~ :is(#TabsToolbar, #nav-bar) > :is(.titlebar-buttonbox-container) {
    visibility: visible !important;
  }

  /* Hide window control buttons by default until manually enabled when needed */
  /* Remove extra alt menu window buttons because we use main buttons */
  .titlebar-buttonbox-container {
    #TabsToolbar > &,
    #nav-bar > &,
    #toolbar-menubar & {
      display: none !important;
    }
  }

  /* Hide all spacers to show manually when needed*/
  #TabsToolbar > .titlebar-spacer,
  #nav-bar > .titlebar-spacer {
    display: none !important;
  }

  /* Enable Window control buttons */
  @media not -moz-pref("sidebar.verticalTabs") {
    @media not -moz-pref("mod.tabs.on.top.enable") {
      #nav-bar > .titlebar-buttonbox-container {
        display: flex !important;
      }
    }

    @media -moz-pref("mod.tabs.on.top.enable") {
      #TabsToolbar > .titlebar-buttonbox-container {
        display: flex !important;
      }
    }
  }

  /* Enable Window Control buttons in Vertical Tabs state */
  @media -moz-pref("sidebar.verticalTabs") {
    #nav-bar:not([tabs-hidden]) > .titlebar-buttonbox-container {
      display: flex !important;
    }
  }

  /* Window control buttons on left side  */
  @media -moz-pref("mod.force.window.control.buttons.left.side"),
    (-moz-gtk-csd-reversed-placement),
    -moz-pref("mod.macos") {
    @media not -moz-pref("mod.force.window.control.buttons.right.side") {
      #navigator-toolbox .titlebar-buttonbox-container {
        order: -1 !important;
      }

      /* Reverse direction only for Windows OS */
      @media (-moz-platform: windows) {
        #navigator-toolbox .titlebar-buttonbox-container {
          & .titlebar-min {
            order: 3 !important;
          }

          & .titlebar-max,
          & .titlebar-restore {
            order: 2 !important;
          }

          & .titlebar-close {
            order: 1 !important;
          }
        }
      }
    }
  }

  /* Window control buttons right side  */
  @media not (-moz-pref("mod.force.window.control.buttons.left.side")
 or (-moz-gtk-csd-reversed-placement) 
 or -moz-pref("mod.macos")),
    -moz-pref("mod.force.window.control.buttons.right.side") {
    /* Reverse button direction*/
    #navigator-toolbox .titlebar-buttonbox-container {
      & .titlebar-min {
        order: 1 !important;
        @media (-moz-platform: macos) {
          order: 2 !important;
        }
      }

      & .titlebar-max,
      & .titlebar-restore {
        order: 2 !important;
        @media (-moz-platform: macos) {
          order: 1 !important;
        }
      }

      & .titlebar-close {
        order: 3 !important;
        @media (-moz-platform: macos) {
          order: 3 !important;
        }
      }
    }
  }

  /* When screen is small and cant fit window 
     control buttons in nav-bar move them down to tab-bar */
  @media not -moz-pref("sidebar.verticalTabs") {
    @media not -moz-pref("mod.tabs.on.top.enable") {
      @media (max-width: 600px) {
        #navigator-toolbox #nav-bar > .titlebar-buttonbox-container {
          display: none !important;
        }

        #navigator-toolbox #TabsToolbar > .titlebar-buttonbox-container {
          display: flex !important;
        }
      }
    }
  }
}

@media -moz-pref("browser.tabs.fadeOutUnloadedTabs") {
  .tabbrowser-tab[pending] .tab-icon-stack,
  .tabbrowser-tab[pending] .tab-text.tab-label {
    opacity: 0.65 !important;
  }

  .tabbrowser-tab[pending] .tab-icon-image[pending] {
    /*     filter: grayscale(80%) !important; */
  }
}

/*=====================================================================
----------------- S E A R C H   M O D E   S W I T C H E R -------------
=====================================================================*/
@media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or -moz-pref("browser.urlbar.scotchBonnet.enableOverride") {
  #urlbar[searchmode] .searchmode-switcher {
    --button-background-color-active: var(--button-background-color);
    --button-background-color-hover: var(--button-background-color);
    --button-background-color-selected: var(--button-background-color);
    --button-background-color: var(--firefoxcss-item-bg-color) !important;
    
    
    --button-background-color-muted: light-dark( color-mix(in srgb, black 5%, transparent), color-mix(in srgb, white 10%, transparent)) !important;
    --button-background-color-muted-hover:  light-dark( color-mix(in srgb, black 8%, transparent), color-mix(in srgb, white 20%, transparent)) !important;
    --button-background-color-muted-active:  light-dark( color-mix(in srgb, black 8%, transparent), color-mix(in srgb, white 20%, transparent)) !important;
    --button-background-color-muted-selected:light-dark( color-mix(in srgb, black 5%, transparent), color-mix(in srgb, white 10%, transparent)) !important;
  }

  #urlbar:not([searchmode]) .searchmode-switcher {
    --button-background-color: transparent !important;
    --button-background-color-muted: transparent !important;
    --button-background-color-muted-hover: transparent !important;
  }

  #urlbar:not([searchmode]) .searchmode-switcher {
    --button-background-color-active: var(--firefoxcss-item-bg-color) !important;
    --button-background-color-hover: var(--firefoxcss-item-bg-color) !important;
    --button-background-color-selected: var(--firefoxcss-item-bg-color) !important;
    
    --button-background-color-muted-hover: light-dark(color-mix(in srgb, black 5%, transparent), color-mix(in srgb, white 10%, transparent)) !important;
    --button-background-color-muted-active:  light-dark( color-mix(in srgb, black 8%, transparent), color-mix(in srgb, white 20%, transparent)) !important;
    --button-background-color-muted-selected:light-dark( color-mix(in srgb, black 5%, transparent), color-mix(in srgb, white 10%, transparent)) !important;
    --button-background-color-muted-disabled: light-dark( color-mix(in srgb, black 2%, transparent), color-mix(in srgb, black 10%, transparent)) !important;
  }
 
  @media -moz-pref("browser.nova.enabled") {
    :root#main-window {
      #nav-bar .searchmode-switcher{
         --button-border-radius: calc(var(--firefoxcss-border-radius) - 2px) !important;
      }
    }
  }

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

  .searchmode-switcher .searchmode-switcher-dropmarker {
    #urlbar .searchmode-switcher[open] & {
      transform: rotate(180deg);
      transition: transform 150ms ease;
    }

    #urlbar .searchmode-switcher & {
      transition: transform 150ms ease;
    }

    #urlbar .searchmode-switcher:hover & {
      fill: color-mix(in srgb, currentColor 90%, transparent) !important;
    }
  }
}

@media -moz-pref("mod.main.window.frame.style-1") or -moz-pref("mod.main.window.frame.style-2") {
  /*   #navigator-toolbox #PersonalToolbar {
     background-color: var(--firefoxcss-item-bg-color) !important;
  }  */

  /*  --------------------------------------------------------- */
  /*  Fix Split Tab View  */
  #tabbrowser-tabpanels[splitview] .split-view-panel.split-view-panel-active {
    margin: 0px !important;
  }

  #tabbrowser-tabbox #tabbrowser-tabpanels[splitview] {
    .split-view-panel[column="0"] .browserContainer {
      margin-inline-end: 0 !important;
    }

    .split-view-panel[column="1"] .browserContainer {
      margin-inline-start: 0 !important;
    }
  }

  /*  --------------------------------------------------------- */

  :root {
    --firefoxcss-top-bar-border-bottom-size: 0px !important;
  }

  /* Remove the white line around the content window */
  @media -moz-pref("sidebar.revamp") {
    #tabbrowser-tabbox .browserContainer {
      outline: none !important;
      box-shadow: none !important;
    }
  }

  /*   @media -moz-pref("sidebar.revamp") or -moz-pref("sidebar.verticalTabs") { */

  /* Variables used for the rounded corners. */
  #main-window:not([chromehidden~="toolbar"]) {
    --uc-tweak-rounded-corners-padding: 6px;
    --uc-tweak-rounded-corners-padding2: 1px;
    --uc-tweak-rounded-corners-padding3: var(--uc-tweak-rounded-corners-padding);
    --uc-tweak-rounded-corners-radius: 10px;
    @media -moz-pref("sidebar.verticalTabs") {
      --uc-tweak-rounded-corners-padding2: 0px;
      --uc-tweak-rounded-corners-padding3: 0px;
    }
    --uc-tweak-rounded-corners-shadow:
      0 -0.8px 0 0 rgb(0 0 0 / 0.02), 0 0.5px 1px 1px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.1);
    --browser-frame-bgcolor: var(--firefoxcss-item-bg-color);

    /* Different shadow for higher resolution displays. */
    @media (resolution > 1.8dppx) {
      --uc-tweak-rounded-corners-shadow: 0 0 0.5px 0.5px rgb(0 0 0 / 0.06), 0 0.5px 1.5px rgb(0 0 0 / 0.1);
    }
  }

  /* Hide border below titlebar on macOS, as its titlebar already has a border. */
  @media (-moz-platform: macos) {
    :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
      border-top: none !important;
    }
  }

  /* Disable rounded corners in fullscreen, only if the toolbar is hidden. */
  :root[inFullscreen] #navigator-toolbox[style*="margin-top"] + #browser,
  :root[inDOMFullscreen] #browser {
    --uc-tweak-rounded-corners-padding: 0px;
    --uc-tweak-rounded-corners-radius: initial;
    --uc-tweak-rounded-corners-shadow: unset;
    --uc-tweak-rounded-corners-padding2: 0px;
    --uc-tweak-rounded-corners-padding3: 0px;
  }

  /* Apply rounded corners to the browser container. */
  #tabbrowser-tabbox .browserContainer {
    margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
    margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
    margin-block-start: var(--uc-tweak-rounded-corners-padding2) !important;
    margin-inline-start: var(--uc-tweak-rounded-corners-padding3) !important;

    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
    background-color: var(--firefoxcss-main-bg-color) !important;
    position: relative !important;
    /*           box-shadow: inset 0px 1px 0 0px hsla(0, 0%, 100%, 0.03), 0px 2px 4px 0px rgba(0, 0, 0, 0.2) !important; */

    /*     border-top:1px solid #0000 !important; */

    /* Use pseudo element overlay to simulate rounded corners, similar to the
       * tab corners, fixes bug with backdrop-filter. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      /* Draw toolbar background on the negative corner space, then draw the
         * same shadow from the browser window on top. */
      box-shadow:
        var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
        0 0 0 16px var(--browser-frame-bgcolor),
        inset 0px 1px 0 0px hsla(0, 0%, 100%, 0.06) !important;
      border: 1px solid hsla(0, 0%, 0%, 0.2) !important;

      @media -moz-pref("mod.main.window.frame.style-2") {
        box-shadow:
          var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
          0 0 0 16px var(--browser-frame-bgcolor) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
      }

      clip-path: inset(0);
      pointer-events: none;
    }
  }

  /* Prevent status panel corners and shadow from appearing outside the browser. */
  #statuspanel {
    overflow: hidden;
  }

  /* Apply rounded corners to sidebar. */
  #sidebar-box {
    margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
    margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
    margin-block-start: var(--uc-tweak-rounded-corners-padding2) !important;
    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;

    &[positionend] {
      margin-inline-start: 0 !important;
      margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
    }
  }

  /* Devtools window when docked to the left or right. */
  .devtools-toolbox-side-iframe {
    margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;

    /* Devtools window when docked to the left. */
    &:first-child {
      margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
    }

    /* Devtools window when docked to the right. */
    &:last-child {
      margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
    }
  }

  /* Devtools window when docked to the bottom. */
  .devtools-toolbox-bottom-iframe {
    margin: var(--uc-tweak-rounded-corners-padding) !important;
    margin-block-start: 0 !important;
    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
  }

  /* Hide devtools splitter. */
  .devtools-side-splitter,
  .devtools-horizontal-splitter {
    background-color: transparent !important;
  }

  /* Remove sidebar border when not in full screen. */
  :not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"]) + #browser #sidebar-splitter {
    border-inline-width: 0 !important;
  }

  /* Apply colour to the frame around the browser window. */
  #browser {
    /*     background-color:   var(--mod-main-bg-color) !important; */
    /*! background-color: red !important; */
  }
}

/* SPLIT VIEW FIXES v149  */
#tabbrowser-tabpanels[splitview] .split-view-splitter {
  /*       Remove border in the middle */
  border: 1px solid transparent !important;
  border-width: 0px 1px !important;
  background-color: transparent !important;
}

/* Fix padding between split view tab and normal tabs */
#tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper {
  margin-inline: 2px !important;
}

/* Remove line between split tabs */
#tabbrowser-tabs tab-split-view-wrapper {
  &:not([hasactivetab]) {
    & .tabbrowser-tab {
      &:last-child {
        border-inline-start: 0px solid transparent !important;
      }
    }
  }
}

    /*   Fix Split View tab height */
/*   Wont be needed soon? */
#tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper {
  /* margin-block: 2px !important; */
  
/*   Delete later */
/*   --split-view-tab-height: calc(var(--tab-min-height) - 
    2 * 2px) !important;
  padding: var(--split-view-padding-block) 0 !important; */
  
  
}


/* Delete later */
  #tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper {
  & .tabbrowser-tab {
    & .tab-background {
/*       min-height: var(--split-view-tab-height) !important; */
    }
  }
}
  

  
/*   Fix Split view tab moving on focus */
  #tabbrowser-tabs tab-split-view-wrapper .tabbrowser-tab:last-child {
    /* border-inline-start: 0  !important; */
}

#tabbrowser-tabs[orient="vertical"] tab-split-view-wrapper {
  @container vertical-tabs-container (max-width: 210px) {
    &:not([hasactivetab]) .tabbrowser-tab {
      &:first-child {
        border-block-end: 0px solid transparent !important;
      }
    }
  }
}

/* Add separator between split tabs */
#tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper:not([hasactivetab]):not(:hover) {
  & .tabbrowser-tab {
    &:first-child::after {
      @media (prefers-color-scheme: dark) {
        content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB2aWV3Qm94PSIwIDAgMzEuOTU1IDMxLjk1NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI3LjI1LDQuNjU1QzIwLjk5Ni0xLjU3MSwxMC44OC0xLjU0Niw0LjY1Niw0LjcwNkMtMS41NzEsMTAuOTYtMS41NDgsMjEuMDc2LDQuNzA1LDI3LjMNCgkJYzYuMjU2LDYuMjI2LDE2LjM3NCw2LjIwMywyMi41OTctMC4wNTFDMzMuNTI2LDIwLjk5NSwzMy41MDUsMTAuODc4LDI3LjI1LDQuNjU1eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTMuMjg4LDIzLjg5NmwtMS43NjgsNS4yMDdjMi41NjcsMC44MjksNS4zMzEsMC44ODYsNy45MjYsMC4xN2wtMC42NjUtNS40MTYNCgkJQzE3LjAxLDI0LjQ4NywxNS4wNjcsMjQuNSwxMy4yODgsMjMuODk2eiBNOC4xMiwxMy4xMjJsLTUuNjQ1LTAuODU5Yy0wLjc0MSwyLjY2Ni0wLjY2Niw1LjUxNCwwLjIyNSw4LjE0M2w1LjQ5MS0xLjM3NQ0KCQlDNy40NTIsMTcuMTM4LDcuNDI2LDE1LjAyOSw4LjEyLDEzLjEyMnogTTI4Ljc2MywxMS4zMzNsLTQuOTY1LDEuNjc1YzAuNzk4LDIuMTA2LDAuNzE2LDQuNDY4LTAuMjQ3LDYuNTIybDUuMzUxLDAuNjcyDQoJCUMyOS44MjcsMTcuMzE5LDI5Ljc4LDE0LjE5MywyOC43NjMsMTEuMzMzeiBNMTEuMzk0LDIuODgzbDEuMDE4LDUuNTI4YzIuMDI3LTAuOTU0LDQuMzU2LTEuMDUsNi40NDItMC4yODhsMS41ODMtNS4xMzcNCgkJQzE3LjUyMywxLjk0LDE0LjMyOCwxLjkwNiwxMS4zOTQsMi44ODN6Ii8+DQoJPGNpcmNsZSBzdHlsZT0iZmlsbDojRkZGRkZGOyIgY3g9IjE1Ljk3OSIgY3k9IjE1Ljk3NyIgcj0iNi4xMTciLz4NCjwvZz4NCjwvc3ZnPg==");
      }
      @media (prefers-color-scheme: light) {
        content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyBoZWlnaHQ9IjgwMHB4IiB3aWR0aD0iODAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHZpZXdCb3g9IjAgMCAzMS45NTUgMzEuOTU1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiMwMDAwMDA7IiBkPSJNMjcuMjUsNC42NTVDMjAuOTk2LTEuNTcxLDEwLjg4LTEuNTQ2LDQuNjU2LDQuNzA2Qy0xLjU3MSwxMC45Ni0xLjU0OCwyMS4wNzYsNC43MDUsMjcuMw0KCQljNi4yNTYsNi4yMjYsMTYuMzc0LDYuMjAzLDIyLjU5Ny0wLjA1MUMzMy41MjYsMjAuOTk1LDMzLjUwNSwxMC44NzgsMjcuMjUsNC42NTV6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDsiIGQ9Ik0xMy4yODgsMjMuODk2bC0xLjc2OCw1LjIwN2MyLjU2NywwLjgyOSw1LjMzMSwwLjg4Niw3LjkyNiwwLjE3bC0wLjY2NS01LjQxNg0KCQlDMTcuMDEsMjQuNDg3LDE1LjA2NywyNC41LDEzLjI4OCwyMy44OTZ6IE04LjEyLDEzLjEyMmwtNS42NDUtMC44NTljLTAuNzQxLDIuNjY2LTAuNjY2LDUuNTE0LDAuMjI1LDguMTQzbDUuNDkxLTEuMzc1DQoJCUM3LjQ1MiwxNy4xMzgsNy40MjYsMTUuMDI5LDguMTIsMTMuMTIyeiBNMjguNzYzLDExLjMzM2wtNC45NjUsMS42NzVjMC43OTgsMi4xMDYsMC43MTYsNC40NjgtMC4yNDcsNi41MjJsNS4zNTEsMC42NzINCgkJQzI5LjgyNywxNy4zMTksMjkuNzgsMTQuMTkzLDI4Ljc2MywxMS4zMzN6IE0xMS4zOTQsMi44ODNsMS4wMTgsNS41MjhjMi4wMjctMC45NTQsNC4zNTYtMS4wNSw2LjQ0Mi0wLjI4OGwxLjU4My01LjEzNw0KCQlDMTcuNTIzLDEuOTQsMTQuMzI4LDEuOTA2LDExLjM5NCwyLjg4M3oiLz4NCgk8Y2lyY2xlIHN0eWxlPSJmaWxsOiMwMDAwMDA7IiBjeD0iMTUuOTc5IiBjeT0iMTUuOTc3IiByPSI2LjExNyIvPg0KPC9nPg0KPC9zdmc+);
      }
      width: 4px !important;
      height: 4px !important;
      display: flex;
      align-self: center;
      opacity: 0.3;
    }
  }
}

/* Split tab changes in horitontal tab mode */
.toolbar-items #tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper {
  border-radius: var(--firefoxcss-border-radius) !important;

  & .tabbrowser-tab {
    padding-inline: 1px !important;

    & .tab-background {
      margin-inline: 1px !important;
      border-radius: calc(var(--firefoxcss-border-radius) - 2px) !important;
    }
    &:hover .tab-background {
      border-radius: calc(var(--firefoxcss-border-radius) - 2px) !important;
    }
    & .tab-background[selected] {
      border-radius: calc(var(--firefoxcss-border-radius) - 2px) !important;
    }
  }

  :root:not([lwtheme]) &[hasactivetab] {
    background-color: var(--firefoxcss-tab-bg-color) !important;
    box-shadow: var(--firefoxcss-normal-tabs-box-shadow) !important;
    outline: 1px solid light-dark(#4f4f4f3d, #fefefe1a) !important;
    outline-offset: -1px !important;
    & .tab-background,
    & .tabbrowser-tab:hover .tab-background {
      box-shadow: none !important;
    }
  }

  &:not([hasactivetab]) {
    background-color: var(--firefoxcss-tab-bg-color) !important;
    box-shadow: var(--firefoxcss-normal-tabs-box-shadow) !important;
    outline: 1px solid light-dark(#4f4f4f21, #fefefe0d) !important;
    outline-offset: -1px !important;
    /*   box-shadow: none !important; */
    & .tab-background {
      box-shadow: none !important;
    }

    &:hover {
      & .tabbrowser-tab:hover .tab-background {
        box-shadow: none !important;
      }
    }
  }
}

/* Split tab changes in vertical tab mode */
#vertical-tabs #tabbrowser-tabs[orient="vertical"] tab-split-view-wrapper {
  border-radius: var(--firefoxcss-border-radius) !important;

  & .tabbrowser-tab {
    & .tab-background {
      margin-inline: 1px !important;
      margin-block: 0px !important;
    }
  }

  :root:not([lwtheme]) &[hasactivetab] {
    background-color: var(--firefoxcss-tab-bg-color) !important;
    box-shadow: var(--firefoxcss-normal-tabs-box-shadow) !important;
    outline: 1px solid light-dark(#4f4f4f3d, #fefefe1a) !important;
    outline-offset: -1px !important;
    & .tab-background,
    & .tabbrowser-tab:hover .tab-background {
      box-shadow: none !important;
    }
  }

  &:not([hasactivetab]) {
    background-color: var(--firefoxcss-tab-bg-color) !important;
    /*! background-color: #fff0 !important; */
    box-shadow: var(--firefoxcss-normal-tabs-box-shadow) !important;
    outline: 1px solid light-dark(#4f4f4f21, #fefefe0d) !important;
    outline-offset: -1px !important;
    /*   box-shadow: none !important; */
    & .tab-background {
      box-shadow: none !important;
    }

    &:hover {
      & .tabbrowser-tab:hover .tab-background {
        box-shadow: none !important;
      }
    }
  }
}

@media -moz-pref("mod.transparent.bookmarks-bar") or -moz-pref("mod.transparent.bookmarks-bar.centered") {
  /* Change bookmarks bar color to be the same as top toolbar */
  :root {
    --firefoxcss-bookmarks-bg-color: transparent !important;
  }
  
   #navigator-toolbox#navigator-toolbox #PersonalToolbar {
      background-color: transparent !important;
  }

  #PersonalToolbar #personal-bookmarks toolbarbutton.bookmark-item {
    background-color: var(--firefoxcss-main-bg-color) !important;
  }
  
/* Choose the background once. */
#PersonalToolbar {
  --firefoxcss-bookmark-bg: var(--firefoxcss-main-bg-color);
}

:root:is([lwtheme], [lwtheme-image]):not([privatebrowsingmode])
  #PersonalToolbar {
  --firefoxcss-bookmark-bg:
    var(--lwt-accent-color, var(--firefoxcss-main-bg-color));
}

/* Normal state. */
#PersonalToolbar #personal-bookmarks toolbarbutton.bookmark-item {
  background-color: var(--firefoxcss-bookmark-bg) !important;
}

/* Derive interaction colors from the selected background. */
#PersonalToolbar #PlacesToolbarItems
  > toolbarbutton.bookmark-item:not(.subviewbutton, [disabled="true"]) {

  &:hover:not([open="true"]) {
    background-color: color-mix(
      in srgb,
      var(--firefoxcss-bookmark-bg) 86%,
      light-dark(black, white)
    ) !important;
  }

  &:is(:hover:active, [open="true"]) {
    background-color: color-mix(
      in srgb,
      var(--firefoxcss-bookmark-bg) 80%,
      light-dark(black, white)
    ) !important;
  }
}

  #PersonalToolbar:not([customizing]) {
    max-width: fit-content;
    
  }

  @media -moz-pref("mod.transparent.bookmarks-bar.centered") {
    :root:not([inDOMFullscreen]):not([customizing])
      #navigator-toolbox
      > #PersonalToolbar:not([collapsed]):not([customizing]) {
      width: fit-content !important;
      max-width: 100% !important;
      align-self: center !important;

      /* Center the absolute popout between its side insets. */
      inset-inline: 0 !important;
      margin-inline: auto !important;
    }
  }
  
  
  
  
}

@media -moz-pref("mod.popout.searchbar") or -moz-pref("mod.popout.searchbar.no-animation") {
  /* Opacity causes Blur to stop working. This is only used when vertical tabs enabled */
  .browser-titlebar {
    :root[customtitlebar] & .urlbar:popover-open {
      will-change: auto !important;
      transition: none !important;
      &:-moz-window-inactive {
        opacity: 1 !important;
      }
    }
  }

  @keyframes mod-urlbarFlyIn2 {
    0% {
      transform: translateY(-15%) scale(0.9);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }

  .browserContainer .browserStack {
    /* Fix the white rounded corners. This is not needed if we put backdrop-filter inside this element*/
    /* clip-path: inset(0 round 10px 0 0 0) ; */

    /* Help to make backdrop filter blur work on some elements  */
    /* backdrop-filter: blur(0) !important; */
  }

  /* Fix when HDR is used. Only trigger on seachbar open. HDR will stop working when searchbar opens */
  #navigator-toolbox:has(#urlbar:is([breakout][breakout-extend])) + #browser .browserContainer .browserStack {
    backdrop-filter: blur(0) !important;
  }

  /* Fix the white rounded corners in vertical tabs mode on website content because of the blur */
  browser {
/*     clip-path: inset(0 round 12px) !important; */
/*      clip-path: inset(0 round 10px 0 0 0); */
  }

  /*   #urlbar:is([breakout][breakout-extend], [breakout][focused]) */
  #urlbar:is([breakout][breakout-extend]) {
    & > .urlbar-input-container {
      height: 40px !important;
      padding-block: 6px !important;
      padding-inline: 6px !important;
    }
    position: fixed !important;

    width: clamp(800px, 60vw, 1200px) !important;
    max-width: 1200px !important;
    min-width: 800px !important;

    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    inset-block-start: 25% !important;
    margin: 0 auto !important;
    @media (max-width: 800px) {
      min-width: 85vw !important;
    }
    @media (min-width: 1800px) {
      /*       width: 45vw !important; */
    }
    @media (min-width: 2800px) {
      /*       width: 35vw !important; */
    }

    max-width: 90vw !important;
    z-index: 9999 !important;

    border-radius: var(--firefoxcss-border-radius) !important;
    @media not -moz-pref("mod.popout.searchbar.no-animation") {
      animation: mod-urlbarFlyIn2 100ms ease-out forwards !important;
    }
  }

  #navigator-toolbox #urlbar:is([breakout][breakout-extend]) .urlbar-background {
    backdrop-filter: blur(18px) !important;
    border-radius: var(--firefoxcss-border-radius) !important;
    @media (prefers-color-scheme: dark) {
      box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.2) !important;
    }
    backdrop-filter: blur(18px) saturate(1.6) brightness(0.6) !important;
    border: 1px solid light-dark(hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 70%, 0.145)) !important;
    outline: 1px solid light-dark(hsla(0, 0%, 0%, 0.08), hsla(0, 0%, 0%, 0.4)) !important;
    background-color: light-dark(hsla(0, 0%, 100%, 0.8), hsla(240, 2%, 12%, 0.65)) !important;
    @media (prefers-color-scheme: light) {
      backdrop-filter: blur(18px) saturate(1.1) brightness(1.2) !important;
    }
  }

  /* Create a visual placeholder in the original spot */
  #urlbar-container:has(#urlbar:is([breakout][breakout-extend]))::before {
    display: flex !important;
    content: "..." !important;
    align-items: center !important; /* Vertical centering */
    justify-content: center !important; /* Horizontal centering */
    width: 100% !important;
    color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.2)) !important;
    letter-spacing: 0.15em !important;
    @media (prefers-color-scheme: dark) {
      box-shadow:
        0px 1px 0 0px hsla(0, 0%, 100%, 0.05),
        inset 1px 1px 2px 1px rgba(0, 0, 0, 0.1) !important;
    }
    min-height: var(--firefoxcss-searchbar-height);
    border: 0 !important;
    border-radius: var(--firefoxcss-border-radius) !important;
    background-color: light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.2)) !important;
  }
}

@media -moz-pref("mod.spill-theme") {
  /* ----- My Custom Colors ----- */
  @media (prefers-color-scheme: dark) {
    :root {
      --firefoxcss-bookmarks-bg-color: var(--firefoxcss-item-bg-color) !important;
    }
  }
  
  /* Bookmarks bar background color */
  :root:not([lwtheme]) #navigator-toolbox #PersonalToolbar {
    background-color: var(--firefoxcss-item-bg-color) !important;
  }

  /* Main BAR */
  #main-window #navigator-toolbox {
    border-bottom: none !important;
  }

  #tabbrowser-tabbox .browserContainer {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Remove the white line around the content window */
  #tabbrowser-tabbox .browserContainer {
    box-shadow:
      0px 10px 0.75px light-dark(hsla(0, 0%, 0%, 0.03), hsla(0, 0%, 0%, 0.15)),
      -1px 10px 6px light-dark(hsla(0, 0%, 0%, 0.05), hsla(0, 0%, 0%, 0.2)) !important;
  }
}

/* Blur for search bar, vertical tabs on expand and other menu panels */
@media -moz-pref("mod.panel-menu.blur") or -moz-pref("mod.searchbar.blur") or -moz-pref("mod.vertical-tabs.expand.blur")
  or -moz-pref("mod.combined.extra.blur") {
  .browserContainer .browserStack {
    /* Fix the white rounded corners. This is not needed if we put backdrop-filter inside this element*/
    /* clip-path: inset(0 round 10px 0 0 0) ; */

    /* Help to make backdrop filter blur work on some elements  */
    backdrop-filter: blur(0) !important;
  }
  
  @media -moz-pref("mod.searchbar.blur") or -moz-pref("mod.combined.extra.blur") {
    /* Opacity causes Blur to stop working. This is only used when vertical tabs enabled */
    .browser-titlebar {
      :root[customtitlebar] & .urlbar:popover-open {
        will-change: auto !important;
        transition: none !important;
        &:-moz-window-inactive {
          opacity: 1 !important;
        }
      }
    }

    #navigator-toolbox #urlbar:is([breakout][open]) .urlbar-background {
      border: 1px solid light-dark(hsla(0, 0%, 100%, 0.45), hsla(0, 0%, 70%, 0.145)) !important;
      outline: 1px solid light-dark(hsla(0, 0%, 0%, 0.08), hsla(0, 0%, 0%, 0.4)) !important;
      backdrop-filter: blur(18px) saturate(1.6) brightness(0.6) !important;
      @media (prefers-color-scheme: light) {
        backdrop-filter: blur(32px) saturate(1.1) !important;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15));
      }
      background-color: light-dark(hsla(240, 2%, 100%, 0.74), hsla(240, 2%, 12%, 0.6)) !important;
    }
  }

  @media -moz-pref("mod.panel-menu.blur") or -moz-pref("mod.combined.extra.blur") {
    /* Force blur using menupopup */
    panel#appMenu-popup,
    panel#unified-extensions-panel,
    panel#customizationui-widget-panel,
    panel#downloadsPanel,
    panel#trustpanel-popup,
    panel#editBookmarkPanel,
    panel#full-page-translations-panel,
    panel#permission-popup,
    panel#tab-preview-panel,
    menupopup#BMB_bookmarksPopup,
    panel#notification-popup
/*     Disable as not always triggers blur */
/*  .bookmark-item .toolbar-menupopup,
    .bookmark-item .toolbar-menupopup menupopup  */ {
      appearance: menupopup !important;
      background-color: transparent !important;
      --panel-background-color: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.6)) !important;
/*         --panel-background-color: linear-gradient(145deg, 
        rgba(255, 255, 255, .075), 
        rgba(255, 255, 255, .012) 54%, transparent 76%), 
         rgba(29, 29, 34, .78) !important;  */

      /* Disables gray area around the menu */
      --panel-box-shadow-margin: 0px !important;
    }

    /* ------------------------------------------------------------*/
    /* Add-bookmarks and add-bookmarks-folder popup panels */
    #bookmarkproperties {
      --background-color-canvas: light-dark(hsla(0, 0%, 100%, 0.8), hsla(240, 2%, 13%, 0.6)) !important;
      --background-color-box: color-mix(in srgb, var(--firefoxcss-item-bg-color) 40%, transparent) !important;
    }

    #bookmarkpropertiesdialog {
      backdrop-filter: blur(18px);
    }

    /* Fix some shitty forced background color on bookmark icon */
    #titleContainer .titleIcon {
      background-color: transparent !important;
    }
    /* ------------------------------------------------------------*/

    /* Disable animation so you avoid seeing gray background transition color 
   being drawn because of "menupopup" usage  */
    .animatable-menupopup,
    panel[type="arrow"] {
      transition: none !important;
      animation: none !important;
    }
  }

  /*   Tab group preview blur for multiple preferences */
  @media -moz-pref("mod.panel-menu.blur") or -moz-pref("mod.combined.extra.blur") or -moz-pref("mod.vertical-tabs.expand.blur") {
    panel#tabgroup-preview-panel {
      appearance: menupopup !important;
      --panel-background-color: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.6)) !important;
      background-color: transparent !important;
      /* Disables gray area around the menu */
      --panel-box-shadow-margin: 0px !important;
    }
  }

  @media -moz-pref("mod.vertical-tabs.expand.blur") or -moz-pref("mod.combined.extra.blur") {
    /* Make tab text in vertical tabs a bit brighter */
    @media (prefers-color-scheme: dark) {
      :root:not([lwtheme]) #tabbrowser-tabs[orient="vertical"] {
        --firefoxcss-non-active-tabs: hsla(0, 0%, 100%, 0.75) !important;
      }
    }

    :root[sidebar-expand-on-hover]:not([lwtheme]) {
      #tabbrowser-tabs[orient="vertical"] {
        &[expanded] {
          & .tab-background[selected] {
            background-color: light-dark(hsla(200, 5%, 0%, 0.1), hsla(240, 2%, 2%, 0.4)) !important;
          }

          & .tabbrowser-tab[pinned] .tab-background:not([selected]) {
            background-color: light-dark(hsla(200, 5%, 0%, 0.04), hsla(240, 2%, 34%, 0.4)) !important;
          }

          & .tabbrowser-tab:hover .tab-background:not([selected]) {
            background-color: light-dark(hsla(200, 5%, 0%, 0.12), hsla(240, 2%, 2%, 0.4)) !important;
          }
        }
        & .tabbrowser-tab:hover .tab-background:not([selected]) {
          background-color: light-dark(hsla(200, 5%, 0%, 0.12), hsla(240, 2%, 2%, 0.4)) !important;
        }
      }
    }

    /* Sidebar color on expand */
    :root[sidebar-expand-on-hover] #sidebar-container[sidebar-launcher-expanded],
    :root[sidebar-expand-on-hover] #sidebar-container[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
      background-color: light-dark(
        hsla(200, 5%, 96%, 0.8),
        color-mix(in srgb, var(--firefoxcss-item-bg-color) 78%, transparent)
      ) !important;
      backdrop-filter: blur(32px) saturate(140%) !important;
      @media (prefers-color-scheme: light) {
        backdrop-filter: blur(32px) saturate(120%) brightness(140%) !important;
      }
    }
  }
}


















/* :root[lwtheme] .urlbar-background,
:root[lwtheme] #searchbar {
  background-color: var(--toolbar-field-background-color) !important;
}

:root[lwtheme] {
  --panel-background-color: var(--lwt-accent-color) !important;
  --button-background-color-menu-hover: color-mix(in srgb, var(--lwt-accent-color) 80%, var(--lwt-text-color) 20%) !important;
  --dark-menu-background-color: var(--lwt-accent-color) !important;
  --dark-menu-border-color: color-mix(in srgb, var(--lwt-text-color) 20%, transparent) !important;
  --firefoxcss-context-menu-item-bg-color: color-mix(in srgb, var(--lwt-text-color) 15%, transparent) !important;
  --firefoxcss-context-menu-item-bg-color-inactive: color-mix(in srgb, var(--lwt-text-color) 8%, transparent) !important;
}

:root[lwtheme] #navigator-toolbox #urlbar[breakout][breakout-extend][open] .urlbar-background {
  background-color: var(--toolbar-field-focus-background-color) !important;
}

:root[lwtheme] .tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      color: var(--lwt-text-color) !important;
      --button-text-color-ghost: var(--lwt-text-color) !important;
      &:hover {
        color: light-dark(hsl(0, 0%, 10%), hsl(0, 0%, 100%)) !important;
        --button-text-color-ghost-hover: light-dark(hsl(0, 0%, 10%), hsl(0, 0%, 100%)) !important;
      }
      &:hover:active {
        color: light-dark(hsl(0, 0%, 10%), hsl(0, 0%, 100%)) !important;
        --button-text-color-ghost-active: light-dark(hsl(0, 0%, 10%), hsl(0, 0%, 100%)) !important;
      }
    }
  }
}
 */



@media -moz-pref("browser.nova.enabled") {
  
  #nav-bar {
    border-top: none !important;
  }
  
/* Make sure not to use ":root/html > body" because other elements like sidbar has exact same structure in shadow root
   Just target "#main-window body" instead */
   :root#main-window:not([lwtheme]):not([theme-image-in-toolbox]) > body,
/*   Private window on default theme is marked as lwtheme so need specific target */
  :root#main-window[privatebrowsingmode][theme-effective-id="firefox-privatewindow@mozilla.org"] > body{
    background-image: none !important;
    background-color: var(--firefoxcss-item-bg-color) !important;
  }
  
  
/*   Remove private window buttons */
  :root#main-window[privatebrowsingmode] {
   .private-browsing-indicator-button.toolbarbutton-1 {
      display: none !important;
    }
  }
  
/*   Private Window content window border fix */
  :root#main-window[privatebrowsingmode][theme-effective-id="firefox-privatewindow@mozilla.org"] {
    --chrome-content-separator-color:  color-mix(in srgb, white 12%, transparent) !important;
  }
  
/* ================================================================================================ */  
/* Corner radius fixes */
  #browser {
    --firefoxcss-browser-content-border-radius: 12px;
  }

  #tabbrowser-tabpanels > :not(.split-view-panel) .browserContainer {
    --content-area-start-radius: var(--firefoxcss-browser-content-border-radius) !important;
    --sidebar-box-start-start-radius: var(--firefoxcss-browser-content-border-radius) !important;
  }

  #sidebar-box, #sidebar-box #sidebar {
    --sidebar-box-start-start-radius: var(--firefoxcss-browser-content-border-radius) !important;
    --sidebar-box-start-end-radius: var(--firefoxcss-browser-content-border-radius) !important;
  }

  #tabbrowser-tabpanels[splitview] {
     --border-radius-medium:  var(--firefoxcss-browser-content-border-radius)  !important;
  }
  
/*   Update available message button in main menu */
  #appMenu-update-banner {
    --promo-border-radius: calc(var(--firefoxcss-popupmenus-border-radius) - 2px) !important;
  }
  
 
/* ================================================================================================ */
  
/*   Only target firefox themes */
  :root#main-window[lwtheme][theme-effective-id$="@mozilla.org"] {
    #navigator-toolbox {
/*         background-image: var(--toolbox-background-image) !important; */
    }
    
/*     Make every toolbar same bg color  */
    #navigator-toolbox .browser-toolbar:not(.browser-titlebar):not(#PersonalToolbar) {
      --toolbar-background-color: transparent !important;
    }
    
  }
  
  
  :root#main-window:not([lwtheme]) #browser {
/*      --chrome-content-separator-color: color-mix(in srgb, currentColor 6%, transparent) !important; */
  }

  
  
  
   @media not -moz-pref("sidebar.verticalTabs") {
    /* Make browser content window including sidebar content have same bg color */
      #browser {
        --toolbar-background-color: transparent !important;
    }
  }
      
/*   Remove border around the content window */
  :root#main-window:not([lwtheme]) {
          #navigator-toolbox.chrome-block,
          #sidebar-container.chrome-block,
          #tabbrowser-tabpanels > :not(.split-view-panel) .browserContainer,
          #sidebar-box.chrome-block{
/*               border: none !important; */
          }
  }
    
     
  :root#main-window:not([lwtheme]) #tabbrowser-tabpanels .browserContainer {
    background: var(--firefoxcss-bright-flash-color) !important;
  }
  
  
  :root#main-window:not([lwtheme]) {
      /* Sidebar and content window border */
      --chrome-content-separator-color: light-dark(
        color-mix(in srgb, white 25%, transparent), 
        color-mix(in srgb, white 12%, transparent)) !important;
    
      /* Toolbar button color */
      --toolbarbutton-icon-fill:  light-dark(#5b5b66, #fbfbfe) !important;
    
      /* Searchbar text color */
      --toolbar-field-text-color: light-dark(#15141a, #fbfbfe) !important;
    
      #tabbrowser-tabpanels[splitview] .split-view-panel.deck-selected > .browserContainer {
        --focus-outline-width: 1px !important;
        --focus-outline-color: light-dark( #26add6, color-mix(in srgb, white 25%, transparent)) !important;
      }
    
      /* Active Tabs fix */
      .tab-background:is([selected]:not([multiselected])) {
          background: var(--firefoxcss-tab-active-bg-color) !important;
      }

    }
    
  :root#main-window {
    #tabbrowser-tabpanels[splitview] .split-view-panel.deck-selected > .browserContainer {
      --focus-outline-width: 0px !important;

    }
    
  }
  
/*   Disable humburger menu gradient line */
   .PanelUI-subView toolbarseparator.proton-zap::before {
        border-image: none !important;
   }
  
/*   Humburger menu "Sign In" button code */
  #appMenu-nova-fxa-label {
    --button-min-height: 24px !important;
    --button-border-radius: 10px !important;
    --button-border: 1px solid color-mix(in srgb, currentColor 40%, transparent) !important;
  }
  
  #appMenu-update-banner {
    --panel-separator-padding-inline: 4px !important;
    --panel-separator-padding-block: 4px !important;
  }
  
  
 .sidebar-splitter {
  @media (-moz-overlay-scrollbars) {
      --splitter-width: 2px !important;
    }
  }
 
 #sidebar-launcher-splitter {
  @media -moz-pref("browser.nova.enabled") {
      margin-inline-start: calc(0 * var(--splitter-width)) !important;
    }
  }
  
  #sidebar-splitter {
  @media -moz-pref("sidebar.revamp") {
    width: 4px !important;
    }
  }

/* #appMenu-update-available-notification */
/* #appMenu-notification-popup */


.searchmode-switcher .searchmode-switcher-content{
  display: none !important;
  
}
#main-button[title][aria-haspopup] > .button-background[type~="muted"] > label[part="moz-button-label"]{
  display: none !important;
}



/* This let us change the icon to our own using custom image path 
   instead of when icon is directly inside chrome directory */
@property --firefoxcss-google-icon {
  syntax: "<url> | none";
  inherits: true;
  initial-value: none;
}

@property --firefoxcss-duckduckgo-icon {
  syntax: "<url> | none";
  inherits: true;
  initial-value: none;
}
  
@property --firefoxcss-bing-icon {
  syntax: "<url> | none";
  inherits: true;
  initial-value: none;
}
  
@property --firefoxcss-startpage-icon {
  syntax: "<url> | none";
  inherits: true;
  initial-value: none;
}

@property --firefoxcss-brave-icon {
  syntax: "<url> | none";
  inherits: true;
  initial-value: none;
}
  
@media (prefers-color-scheme: light) {
  :root#main-window {
    --firefoxcss-google-icon: url("ASSETS/icons/search-icons/google_main-forLight.svg");
    --firefoxcss-duckduckgo-icon: url("ASSETS/icons/search-icons/duckduckgo-search-icon-darker.png");
    --firefoxcss-bing-icon: url("ASSETS/icons/search-icons/bing-darker.svg");
    --firefoxcss-startpage-icon: url("ASSETS/icons/search-icons/startpage-forBoth.svg");
    --firefoxcss-brave-icon: url("ASSETS/icons/search-icons/brave-forLight.svg");
  }
}

@media (prefers-color-scheme: dark) {
  :root#main-window {
    --firefoxcss-google-icon: url("ASSETS/icons/search-icons/google_main-forDark.svg");
    --firefoxcss-duckduckgo-icon: url("ASSETS/icons/search-icons/duckduckgo-search-icon-lighter.png");
    --firefoxcss-bing-icon: url("ASSETS/icons/search-icons/bing-lighter.svg");
    --firefoxcss-startpage-icon: url("ASSETS/icons/search-icons/startpage-forBoth.svg");
    --firefoxcss-brave-icon: url("ASSETS/icons/search-icons/brave-forDark.svg");
  }
}

/* Fix later */
/* Fixes for adaptive tab bar color extension */
:root#main-window[lwt-toolbar-field="light"] {
/*   --firefoxcss-google-icon: url("ASSETS/icons/search-icons/google3.svg");
  --firefoxcss-duckduckgo-icon: url("ASSETS/icons/search-icons/duckduckgo-search-icon-darker.png");
  --firefoxcss-bing-icon: url("ASSETS/icons/search-icons/bing-darker.svg"); */
  
}

/* Fix later */
:root#main-window[lwt-toolbar-field="dark"] {
/*   --firefoxcss-google-icon: url("ASSETS/icons/search-icons/googleWhite3.svg");
  --firefoxcss-duckduckgo-icon: url("ASSETS/icons/search-icons/duckduckgo-search-icon-lighter.png");
  --firefoxcss-bing-icon: url("ASSETS/icons/search-icons/bing-lighter.svg"); */
}

/* Toolbar switcher icons */
  
#main-button[aria-haspopup="menu"] {
  &[aria-label*="Google"],&[title*="Google"] { --button-icon-content: var(--firefoxcss-google-icon) !important;}
  &[aria-label*="DuckDuckGo"],&[title*="DuckDuckGo"] { --button-icon-content: var(--firefoxcss-duckduckgo-icon) !important;}
  &[aria-label*="Bing"],&[title*="Bing"] {       --button-icon-content: var(--firefoxcss-bing-icon) !important;}
  &[aria-label*="Startpage"],&[title*="Startpage"] {  --button-icon-content: var(--firefoxcss-startpage-icon) !important;}
  &[aria-label*="Brave"],&[title*="Brave"] {      --button-icon-content: var(--firefoxcss-brave-icon) !important;} 
}
  
/* Popup menu icons */
panel-item.searchmode-switcher-installed {
  &[label="Google"] {     --icon-url: var(--firefoxcss-google-icon) !important; }
  &[label="DuckDuckGo"] { --icon-url: var(--firefoxcss-duckduckgo-icon) !important;}
  &[label="Bing"] {       --icon-url: var(--firefoxcss-bing-icon) !important;}
  &[label*="Startpage"] { --icon-url: var(--firefoxcss-startpage-icon) !important;}
  &[label="Brave"] {      --icon-url: var(--firefoxcss-brave-icon) !important;}
  
}