/* Photon Colors CSS Variables v1.4.0
* Colors are taken from: https://github.com/FirefoxUX/design-tokens */

:root {
  --magenta-50: #ff1ad9;
  --magenta-60: #ed00b5;
  --magenta-70: #b5007f;
  --magenta-80: #7d004f;
  --magenta-90: #440027;
  --purple-50: #9400ff;
  --purple-60: #8000d7;
  --purple-70: #6200a4;
  --purple-80: #440071;
  --purple-90: #25003e;
  --blue-40: #45a1ff;
  --blue-50: #0a84ff;
  --blue-60: #0060df;
  --blue-70: #003eaa;
  --blue-80: #002275;
  --blue-90: #000f40;
  --teal-50: #00feff;
  --teal-60: #00c8d7;
  --teal-70: #008ea4;
  --teal-80: #005a71;
  --teal-90: #002d3e;
  --green-50: #30e60b;
  --green-60: #12bc00;
  --green-70: #058b00;
  --green-80: #006504;
  --green-90: #003706;
  --yellow-50: #ffe900;
  --yellow-60: #d7b600;
  --yellow-70: #a47f00;
  --yellow-80: #715100;
  --yellow-90: #3e2800;
  --red-50: #ff0039;
  --red-60: #d70022;
  --red-70: #a4000f;
  --red-80: #5a0002;
  --red-90: #3e0200;
  --orange-50: #ff9400;
  --orange-60: #d76e00;
  --orange-70: #a44900;
  --orange-80: #712b00;
  --orange-90: #3e1300;
  --grey-10: #f9f9fa;
  --grey-20: #ededf0;
  --grey-30: #d7d7db;
  --grey-40: #b1b1b3;
  --grey-50: #737373;
  --grey-60: #4a4a4f;
  --grey-70: #38383d;
  --grey-80: #2a2a2e;
  --grey-90: #0c0c0d;
  --ink-70: #363959;
  --ink-80: #202340;
  --ink-90: #0f1126;
}

:root {
  --primary-dark-color: var(--grey-70);
  /* Color of FF dark theme nav-bar */
  --primary-light-color: var(--grey-40);
  /* Off white */
  --light-accent-color: var(--grey-50);
  /* Slightly darker off white */
  --dark-accent: var(--grey-80);
  /* darker shade of main color */
  --mid-way-color: var(--grey-60);
  /* inbetween main dark and light color */
  --primary-accent-color: var(--blue-40);
  --primary-accent-color-dark: var(--blue-50);
}
@-moz-document url(chrome://browser/content/aboutDialog.xul)  {
  #clientBox {
    color: var(--primary-light-color) !important;
    background-color: var(--primary-dark-color) !important;
  }

  #bottomBox {
    background: var(--dark-accent) !important;
  }
}
/* The following code is based on that found on
* https://www.jeffersonscher.com/gm/url-bar-tweaks.html
* Copyright © 2017 Jefferson Scher (BSD-3-Clause License or CC-BY License) */

:root {
  --panel-separator-color: var(--grey-60) !important;
}

#urlbar[focused=true],
.searchbar-textbox[focused=true] {
  border: 1px solid var(--primary-accent-color) !important;
  box-shadow: 0 1px 4px var(--primary-accent-color) !important;
}

/* URL Bar Drop Down */

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
  background-color: var(--grey-60) !important;
}

#PopupAutoCompleteRichResult .autocomplete-richlistitem {
  border-bottom-color: var(--primary-light-color) !important;
}

/* Hover color */

.autocomplete-richlistitem:hover,
treechildren.searchbar-treebody::-moz-tree-row(hover) {
  background-color: var(--grey-70) !important;
}

.autocomplete-richlistitem .ac-title,
.autocomplete-richlistitem .ac-action,
.autocomplete-richlistitem .ac-separator,
#PopupSearchAutoComplete {
  color: var(--primary-light-color) !important;
}

.autocomplete-richlistitem[selected=true] {
  background-color: var(--primary-accent-color) !important;
}

.autocomplete-richlistitem[selected=true] .ac-title,
.ac-title[selected],
.autocomplete-richlistitem[selected=true] .ac-action,
.ac-action[selected],
.autocomplete-richlistitem[selected=true] .ac-separator,
.ac-separator[selected] {
  color: white !important;
}

.autocomplete-richlistitem[selected=true] .ac-url,
.ac-url[selected] {
  color: white !important;
}

.ac-url {
  color: var(--primary-accent-color) !important;
}

.search-one-offs {
  background: var(--grey-60) !important;
}

.search-panel-input-value {
  color: var(--primary-accent-color) !important;
}

/* Search one-offs */

.search-panel-one-offs {
  background: var(--grey-80) !important;
}

.search-panel-header {
  background-color: var(--grey-80) !important;
  border-top: none !important;
}

.search-panel-one-offs {
  border-top: none !important;
}

/* Searchbar */

panel[type="autocomplete"],
panel[type="autocomplete-richlistbox"],
.autocomplete-history-popup {
  color: var(--primary-light-color) !important;
  background: var(--primary-dark-color) !important;
}

/* Changes the hover color and text color */

.autocomplete-tree {
  color: var(--primary-light-color) !important;
}

.searchbar-treebody::-moz-tree-row {
  background-color: var(--grey-60) !important;
}

.searchbar-treebody::-moz-tree-row(hover) {
  background-color: background-color: var(--grey-70) !important;
}

.searchbar-treebody::-moz-tree-row(selected) {
  background-color: var(--primary-accent-color) !important;
}
/* Main context menu */

menupopup,
popup,
popup > menu > menupopup,
menupopup > menu > menupopup,
menupopup scrollbox {
  -moz-appearance: none !important;
  background: var(--grey-60) !important;
  border: none !important;
  padding: 0px 0px 0px 0px  !important;
}

/* More options right arrow */

.menu-right {
  filter: invert(95%)!important;
}

/* Top Row of Navigation Options */

#context-navigation menuitem {
  color: var(--grey-10) !important;
  background: var(--grey-70) !important;
}

#context-navigation menuitem:hover {
  background: var(--grey-80) !important;
}

/* Menu items */

menupopup menu,
menuitem {
  -moz-appearance: none !important;
  color: var(--grey-10) !important;
}

/* Menu Separators - removed */

menupopup menuseparator {
  padding: 0 !important;
  border-top: none !important;
  margin: 2px 6px 2px 6px !important;
}

menupopup menu:hover,
menuitem:hover {
  color: var(--grey-10) !important;
  background-color: var(--grey-80) !important;
}

/* Sidebar Header Context Menue */

.panel-arrowcontent {
  color: var(--grey-10) !important;
  background: var(--grey-60) !important;
}

/* The following snippets are designed to fix promblems 
 * only noticed on Windows computers. Thank you to u/markdarkness!
 * for helping me with these issues. */

/* Remove white separators between menu items */

menupopup menuseparator {
  -moz-appearance: none !important;
  background: rgba(0, 0, 0, 0) !important;
  border: 0px !important;
}

/* Increase height between menu items */

menupopup menu,
menuitem {
  padding-top: .5px !important;
}

/* Removes white bar between icons and menu items */

#context-navigation,
#context-sep-navigation {
  padding: 0px !important;
}
#customization-done-button {
  color: var(--primary-light-color);
  font-weight: 700;
  border-color: var(--primary-accent-color-dark) !important;
  background-color: var(--primary-accent-color) !important;
}

#customization-done-button:-moz-any(:focus, :active, :hover):not([disabled]) {
  background-color: var(--primary-accent-color-dark) !important;
}
/*Pop Down Arrow */

.panel-arrow {
  filter: invert(70%) !important;
}

/* main menu */

.panel-subview-body,
#appMenu-zoomReset-button {
  color: var(--grey-10) !important;
  background: var(--grey-60) !important;
}

/* header of sub menus */

.panel-subview-footer,
[class^="PanelUI-"] {
  color: var(--grey-10) !important;
  background: var(--grey-70) !important;
}

/* webextension popup fix */

.webextension-popup-browser {
  background: white !important;
}

/* Fix for downloads menu */

photonpanelmultiview panelview {
  background: none !important;
  color: var(--primary-light-color) !important;
}

#emptyDownloads {
  background: var(--grey-60) !important;
  color: var(--primary-light-color) !important;
}

#downloadsFooterButtons {
  background: var(--grey-70) !important;
  color: var(--primary-light-color) !important;
}

/* Fix downloads list - only appears to be necessary in Nightly */

#downloadsListBox {
  background: var(--primary-dark-color) !important;
}

#appMenu-mainView toolbarbutton:hover,
#customizationui-widget-multiview toolbarbutton:hover,
#widget-overflow-list toolbarbutton:hover {
  background: var(--grey-80) !important;
}

#BMB_bookmarksPopup {
  background: none !important;
}

/* Secure Connection Drop Down */

#identity-popup-securityView {
  background: var(--grey-60) !important;
}

/* Divider */

#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  background: var(--primary-light-color) !important;
}

/* Button */

.identity-popup-expander[panel-multiview-anchor] {
  background-color: var(--primary-accent-color) !important;
  fill: var(--primary-light-color) !important;
}

/* Secure connection drop-down - necessary change for FF 59 */

/* Main Background */

#identity-popup-mainView {
  background: var(--grey-60) !important;
  color: var(--primary-light-color) !important;
}

/* Lock color */

#identity-popup[connection^="secure"] .identity-popup-security-content {
  fill: var(--primary-accent-color) !important;
}

/* Permissions logo - white (can't change background image only) 
 * Temporary hack until I fish out the icon and invert that */

#identity-popup-permissions-content {
  filter: invert(90%) !important;
}

/* Change color of text to account for ^^ */

#identity-popup-permissions-content {
  color: var(--grey-70) !important;
}

/* More info right button */

.identity-popup-expander {
  border-right: solid 1px var(--grey-50) !important;
  background-color: var(--grey-60) !important;
  fill: var(--grey-50) !important;
}

/* New update is available */

.popup-notification-button[default][highlight="true"]:not([disabled]) {
  background-color: var(--primary-accent-color) !important;
  color: #ccc;
}

#update-available-whats-new {
  color: var(--primary-accent-color) !important;
}

.popup-notification-icon[popupid="update-available"],
.popup-notification-icon[popupid="update-manual"],
.popup-notification-icon[popupid="update-restart"] {
  background-color: var(--primary-accent-color) !important;
  border-radius: 50%;
}
/* Sidebar */

.sidebar-placesTree {
  -moz-appearance: none !important;
  background: var(--grey-70) !important;
  color: var(--primary-light-color) !important;
  opacity: 1 !important;
}

/* Change the outline of icons to light instead of dark */

.sidebar-placesTree::-moz-tree-image,
.sidebar-placesTreechildren::-moz-tree-image {
  fill: var(--primary-light-color) !important;
}

/* Sidebar Header */

.sidebar-header,
#sidebar-header {
  background: var(--grey-80) !important;
  color: var(--primary-light-color) !important;
}

/* Sidebar search container */

#sidebar-search-container {
  background: var(--grey-80) !important;
  color: var(--primary-light-color) !important;
}

/* Sidebar search box */

#sidebar-search-container textbox {
  -moz-appearance: none !important;
  border-radius: .3em !important;
  background-color: var(--grey-60) !important;
  color: var(--primary-light-color) !important;
  border: solid 1px var(--mid-way-color) !important;
}

/* Sidebar "view" button */

#sidebar-search-container #viewButton {
  color: var(--primary-light-color) !important;
}

/* Drop down arrow - next to "view" */

.button-menu-dropmarker,
.button-menubutton-dropmarker {
  filter: invert(65%);
}

/* Sidebar splitter 
 * Adjust width to personal preference - 
 * I keep it at 4 for easy mobility and Tree Style Tabs
 * utilizes it for container indicators */

#sidebar-splitter {
  width: 4px !important;
  background: var(--primary-dark-color) !important;
  opacity: 0 !important;
}

/* Reverse color of sidebar header icon for Tree Style Tabs
*  you may delete this snippit if you don't use the extension */

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-icon {
  filter: invert(60%);
}

#button_treestyletab_piro_sakura_ne_jp-sidebar-action .toolbarbutton-icon {
  filter: invert(87%);
}

/* Siderbar slider - thank you u/_Dimitri_ 
 *  Add this section if on Windows 
scrollbar > slider {
  max-width: 4px !important;
}

scrollbar > slider > thumb, scrollbar > scrollbarbutton {
  -moz-appearance: none !important;
  background-color: var(--grey-80) !important;;
}
*/
statuspanel .statuspanel-label {
  background-color: var(--grey-80) !important;
  color: var(--primary-light-color) !important;
  border: none !important;
}
/* Top Border */

.browserContainer > findbar {
  border-top: 1px solid var(--grey-80) !important;
}

/* Alter buttons */

.findbar-find-previous,
.findbar-find-next {
  border: none !important;
  background: none !important;
  border-radius: 2px !important;
  fill: var(--primary-light-color) !important;
}

/* Fix spacing */

.findbar-find-previous {
  margin-left: 6px !important;
}

/* Buttons on hover */

.findbar-find-previous:hover,
.findbar-find-next:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
@-moz-document url(chrome://browser/content/places/places.xul),
url(chrome://browser/content/places/bookmarkProperties.xul)  {
  /* Details Dock and Bookmark Properties*/

  #detailsDeck,
  #bookmarkproperties {
    -moz-appearance: none !important;
    background-color: var(--grey-70) !important;
    color: var(--primary-light-color) !important;
    border: 0px solid black !important;
  }

  /* Toolbar */

  toolbar {
    -moz-appearance: none !important;
    background-color: var(--grey-80) !important;
    border: 0px solid black !important;
  }

  /* Main Area */

  #placeContent,
  #places #downloadsRichListBox {
    -moz-appearance: none !important;
    border: 1px solid var(--grey-60) !important;
    color: rgb(200,200,200) !important;
    background-color: var(--grey-60) !important;
  }

  /* Sidebar */

  #placesList {
    -moz-appearance: none !important;
    color: rgb(200,200,200) !important;
    background-color: rgba(12, 12, 13, .8) !important;
  }

  /* Column Header */

  #contentView treecol {
    -moz-appearance: none !important;
    border: 0px solid !important;
    border-bottom: 1px solid !important;
    border-right: 1px solid rgb(0,0,0) !important;
    -moz-border-bottom-colors: rgb(0,0,0) !important;
    background: linear-gradient(to bottom,
		           rgba(56,70,82,1) 0%,
		           rgba(35,39,48,1) 100%) !important;
    color: white !important;
  }

  /* Text Boxes - One Line */

  #places textbox:not([multiline="true"]),
  #editBookmarkPanelContent textbox:not([multiline="true"]) {
    -moz-appearance: none !important;
    color: var(--primary-light-color) !important;
    background-color: var(--grey-60) !important;
  }

  /* Bookmarks Description Field */

  #places #editBMPanel_descriptionField,
  #editBookmarkPanelContent #editBMPanel_descriptionField {
    -moz-appearance: none !important;
    background-color: var(--grey-60) !important;
    color: var(--primary-light-color) !important;
  }

  /*  Bookmark Tag Options  */

  listbox {
    -moz-appearance: none !important;
    background-color: var(--grey-60) !important;
    color: var(--primary-light-color) !important;
  }

  #places listbox:focus > listitem[selected="true"] {
    background-color: var(--primary-accent-color) !important;
    color: black !important;
  }

  /*								*
	 *	  Tree Items	*
	 *								*/

  #places treechildren::-moz-tree-row {
    background-color: transparent !important;
    overflow-y: scroll  !important;
  }

  /* Change the outline of icons to light instead of dark */

  #places treechildren::-moz-tree-image,
  #places treechildren::-moz-tree-image {
    fill: var(--primary-light-color) !important;
  }

  /* Selected, in focus */

  #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
    background: var(--primary-accent-color) !important;
  }

  /* Selected, not in focus */

  #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current) {
    background: var(--blue-40) !important;
  }

  treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
    -moz-border-top-colors: var(--grey-80) !important;
    -moz-border-right-colors: var(--grey-80) !important;
    -moz-border-left-colors: var(--grey-80) !important;
    -moz-border-bottom-colors: var(--grey-80) !important;
  }

  #placeContent treechildren:not(.autocomplete-treebody)::-moz-tree-row(odd) {
    background: rgba(12, 12, 13, .1) !important;
  }

  #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
    background: var(--dark-accent) !important;
    -moz-border-top-colors: var(--dark-accent) !important;
    -moz-border-right-colors: var(--dark-accent) !important;
    -moz-border-left-colors: var(--dark-accent) !important;
    -moz-border-bottom-colors: var(--dark-accent) !important;
  }

  #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
    background: var(--primary-accent-color) !important;
  }
}
@-moz-document url(chrome://browser/content/pageinfo/pageInfo.xul)  {
  #topBar {
    -moz-appearance: none !important;
    background: var(--grey-80) !important;
  }

  #mainDeck {
    background: var(--primary-dark-color) !important;
    color: white !important;
  }

  textbox {
    color: var(--primary-light-color) !important;
  }

  tree {
    -moz-appearance: none !important;
    border: 1px solid rgb(0,0,0) !important;
    color: rgb(200,200,200) !important;
    background-color: var(--grey-60) !important;
  }

  treechildren::-moz-tree-row {
    background-color: transparent !important;
    overflow-y: scroll  !important;
  }

  treecol {
    -moz-appearance: none !important;
    border: 0px solid !important;
    border-bottom: 1px solid !important;
    border-right: 1px solid rgb(0,0,0) !important;
    -moz-border-bottom-colors: rgb(0,0,0) !important;
    background: linear-gradient(to bottom, 
			           rgba(56,70,82,1) 0%,
			           rgba(35,39,48,1) 100%) !important;
    color: white !important;
  }

  treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
    background: var(--primary-accent-color) !important;
  }

  .permission {
    -moz-appearance: none !important;
    background: var(--grey-60) !important;
    color: var(--primary-light-color) !important;
    border-color: var(--grey-70) !important;
  }

  #permPluginTemplate {
    color: var(--primary-light-color) !important;
  }

  #permList {
    border: 2px solid var(--grey-70) !important;
  }
}
/* Remove 1px border underneath bookmarks bar */

#navigator-toolbox::after {
  border-bottom: 0px !important;
}
/* Minimize white flash when loading some sites */

browser[type="content-primary"],
#content,
browser[type="content"] > html {
  background: #323234 !important;
}
#identity-box.verifiedIdentity {
  --urlbar-separator-color: var(--grey-50) !important;
}

.identity-popup-connection-secure,
#identity-box.verifiedIdentity #identity-icon-labels {
  color: var(--primary-accent-color) !important;
}

#identity-popup[connection^=secure] #identity-popup-securityView,
#identity-popup[connection^=secure] #identity-popup-security-content,
#connection-icon {
  fill: var(--primary-accent-color) !important;
}
/* Change active tab line color */

.tab-line[selected="true"] {
  background-color: var(--primary-accent-color) !important;
}