/* Separator */
menuseparator,
#contentAreaContextMenu menuseparator,
toolbarseparator,
.bookmarks-actions-menuseparator {
    -moz-appearance: none !important;
    border-color: var(--moonlight-gray-1) !important;
    border-width: 1px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
/* Reset form elements appereance */
panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
menupopup,
menu,
menuitem {
    -moz-appearance: none !important;
}

/* Spacing between menu items */
menulist,
menuitem,
menu {
    min-height: 2.5em;
}


/* ? */
panel menulist {
    border: 1px solid transparent;
}
/* Menus */
#sidebarMenu-popup toolbarbutton,
panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
menupopup:not(#BMB_bookmarksPopup),
#main-menubar > menu > menupopup,
#context-navigation {
    color: var(--moonlight-gray-10) !important;
    background-color: var(--moonlight-gray-2) !important;
    border-color: var(--moonlight-gray-1) !important;
}
#sidebarMenu-popup toolbarbutton:hover,
panel treechildren::-moz-tree-row(selected),
panel button:hover,
menu:hover,
menu[_moz-menuactive],
menu[open],
menuitem:hover,
menuitem[_moz-menuactive] {
    background-color: var(--moonlight-gray-5) !important;
    color: var(--moonlight-gray-10) !important;
}

menu[disabled="true"] {
    color: var(--moonlight-gray-6) !important;
}
menuitem[disabled="true"] {
    color: var(--moonlight-gray-6) !important;
}

menulist > menupopup > menuitem,
menulist > menupopup > menucaption,
menulist > menupopup > menu {
  color: var(--moonlight-gray-10) !important;
}
.menupopup-arrowscrollbox{
    background-color: var(--moonlight-gray-2) !important;
    
}
.expander-up {
    list-style-image: url("./icons/collapse.png") !important;
}
.expander-down {
    list-style-image: url("./icons/expand.png") !important;
}

#editBookmarkPanel label {
    color: var(--moonlight-gray-10) !important;
}
#editBookmarkPanel input {
    -moz-appearance: none;
    background-color: var(--moonlight-gray-4) !important;
    color: var(--moonlight-gray-10) !important;
    border: 1px solid var(--moonlight-gray-1) !important;
    border-radius: 3px !important;
    transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
#editBookmarkPanel input:focus {
    background-color: var(--moonlight-gray-3) !important;
    border-color: var(--moonlight-blue) !important;
}


/* Popup panels (more tools... , open menu) */
panel panelview {
    color: var(--moonlight-gray-10) !important;
    background-color: var(--moonlight-gray-2)  !important;
}
.panel-arrowcontent {
    background-color: var(--moonlight-gray-2)  !important;
}
.panel-arrowcontainer .panel-arrowbox .panel-arrow {
    fill: var(--moonlight-gray-1) !important;
}
.panel-arrowcontainer .panel-arrowcontent {
    border-color: var(--moonlight-gray-1) !important;
}

/* Context navigation buttons (right-click page) */
#context-navigation menuitem {
    color: var(--moonlight-gray-7) !important;
    background: none !important;
    transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
#context-navigation menuitem:hover {
    color: var(--moonlight-gray-9) !important;
}
/* Customize button in more extensions */
#overflowMenu-customize-button {
    background-color: var(--moonlight-gray-4) !important;
    border: 1px solid var(--moonlight-gray-1) !important;
    border-radius: 3px !important;
    margin: 4px !important;
    color: var(--moonlight-gray-10) !important;
    transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
#overflowMenu-customize-button:hover {
    background-color: var(--moonlight-gray-5) !important;
    border: 1px solid var(--moonlight-blue) !important;
}
#appMenu-zoomReset-button {
    border-color: var(--moonlight-gray-1) !important;
    background-color: var(--moonlight-gray-4) !important;
    color: var(--moonlight-gray-10) !important;
    transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
#appMenu-zoomReset-button:hover {
    background-color: var(--moonlight-gray-5) !important;
    border-color: var(--moonlight-blue) !important;
}

/* Change bookmark icon colors */
/* Standard folder -- on Toolbar and Menus */
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
:-moz-any(
#PlacesToolbarItems,
#PlacesChevronPopup,
#BMB_bookmarksPopup,
#bookmarksMenu) menu[container="true"] > .menu-iconic-left > .menu-iconic-icon,
/* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */
:-moz-any(
#bookmarks-view, 
#editBMPanel_folderTree, 
#placesList, 
#placeContent) treechildren::-moz-tree-image(container), 
#editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,
#editBMPanel_folderMenuList menupopup menuitem {
    fill: var(--moonlight-blue) !important;
}

/* Arrow customization in the bookmark folder while overflowing */
.menupopup-scrollbutton {
    -moz-appearance: none !important;
    background-color: var(--moonlight-gray-3) !important;
    width: 100%;
}
.menupopup-scrollbutton:hover {
    background-color: var(--moonlight-gray-5) !important;
}
.scrollbutton-up:not([orient="horizontal"]),
.scrollbutton-up:not([orient="horizontal"]) .toolbarbutton-icon {
    -moz-appearance: none !important;
    list-style-image: url("./icons/collapse.png") !important;
}
.scrollbutton-down:not([orient="horizontal"]),
.scrollbutton-down:not([orient="horizontal"]) .toolbarbutton-icon {
    -moz-appearance: none !important;
    list-style-image: url("./icons/expand.png") !important;
}