/*IN ORDER TO MAKE THIS WORK: ENABLE LEGACYUSERPRO (CHANGE IT TO TRUE)*/

/*===COLORS===*/

:root {
  --accent-color: 45, 45, 45;
  --tab-color: 240, 240, 244;
  --tab-text-color: 255, 255, 255;
  --secondary-accent-color: 127,127,127;
  --second-tab-text-color: 127,127,127;
  --third-accent-color: 235, 219, 178;
  --light-color: 255, 255, 255;
  --dark-color: 0, 0, 0;
  --url-back: 249, 249, 251;
  --caption-min-color: 215, 153, 33;
  --caption-max-color: 69, 133, 136;
  --caption-close-color: 177, 98, 134;
}


/* MIN MAX CLOSE Remove */
#TabsToolbar > .titlebar-buttonbox-container {
  visibility: collapse !important;}

/*Basic Settings*/


:root {
  --navbarWidth     : 40vw; /* Set width of navbar. Use px for a fixed width
                                or vw for a percentage of your window. */
  --animationSpeed  : 0.5s;
}


#TabsToolbar {
  margin-left : var(--navbarWidth) !important;
}

#nav-bar {
  margin-right: calc(100vw - var(--navbarWidth)) !important;
}

#urlbar-container {
  min-width   : 0px !important;
}

:root[uidensity="compact"] #nav-bar {
  margin-top  : -37px !important;
  height      : 37px !important;
}

:root:not([uidensity="compact"]):not([uidensity="touch"]) #nav-bar {
  margin-top  : -44px !important;
  height      : 44px !important;
}

:root[uidensity="touch"] #nav-bar {
  margin-top  : -49px !important;
  height      : 49px !important;
}


/* Back Hide */
#back-button[disabled="true"] { display: none !important }

/* Forward Hide */
#forward-button[disabled="true"] { display: none !important }

/* Site information button */
#identity-box { display: none !important }

/* "Shield" icon */
#tracking-protection-icon-container { display: none !important }


/* Simplifying interface */

#nav-bar {
  background  : none !important;
  box-shadow  : none !important;
}

#navigator-toolbox {
  border      : none !important;
}

.titlebar-spacer {
  display     : none !important;
}

#urlbar-background {
  border      : none !important;
}

#urlbar:not(:hover):not([breakout][breakout-extend]) > #urlbar-background {
  box-shadow  : none !important;
  background  : none !important;
}


/* Element Hiding stuff */

.urlbar-icon, #userContext-indicator, #userContext-label {
  fill        : transparent !important;
  background  : transparent !important;
  color       : transparent !important;
}

#urlbar:hover .urlbar-icon,
#urlbar:active .urlbar-icon,
#urlbar[focused] .urlbar-icon {
  fill        : var(--toolbar-color) !important;
}

/*================== TABS BAR ==================*/

#titlebar #TabsToolbar {
  background: rgba(var(--dark-color), 1) !important;
}


#PersonalToolbar {
  background: rgba(var(--dark-color), 1) !important;
  color: rgba(var(--light-color), 1) !important;
  padding-bottom: 6px !important;
  padding-top: 1px !important;
}

toolbar#nav-bar {
  background: rgba(var(--dark-color), 1) !important;
  box-shadow: none !important;
  padding-bottom: 4px !important;
}

/*================ DARK THEME ================*/
:root:-moz-lwtheme-brighttext,
.sidebar-panel[lwt-sidebar-brighttext],
body[lwt-sidebar-brighttext] {
	--main-bgcolor: var(--dark-color);
	--transparent-bgcolor: var(--dark-color);
}

tab[selected="true"] .tab-content {
  color: rgba(var(--secondary-accent-color), 1) !important;
}

tab[selected="true"] .tab-background {
  background: rgba(var(--accent-color), 1) !important;
}
.tabbrowser-tab>.tab-stack>.tab-background:not([selected="true"]) {
  transition: all 0.3s ease !important;
}

.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"]) {
  background-color: rgba(var(--transparent-bgcolor), 0.7) !important;
}

.tab-line {
  height: 0px !important;
}

.tabbrowser-tab {
  margin-right: 5px !important;
}

.tabbrowser-tab:not([visuallyselected="true"]),
.tabbrowser-tab:-moz-lwtheme {
  color: rgba(var(--second-tab-text-color), 1) !important;
}

tab[selected="true"] .tab-content {
  color: rgba(var(--tab-text-color), 1) !important;
}

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

.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border-left: 0 !important;
  opacity: 0 !important;
}

.tab-close-button {
  transition: all 0.3s ease !important;
  border-radius: 4px !important;
}

.tabbrowser-tab .tab-label  { color: var(--uc-inverted-colour) !important; }
.tab-close-button { fill: var(--uc-inverted-colour) !important }


/*Auto Hide Top Bar - to disable auto-hide feature delete rows 1 - 86*/
:root{
  --uc-autohide-toolbox-delay: 200ms; /* Wait 0.1s before hiding toolbars */
  --uc-toolbox-rotation: 65deg;  /* This may need to be lower on mac - like 75 or so */
}

:root[sizemode="maximized"]{
  --uc-toolbox-rotation: 63deg;
}

@media (-moz-os-version: windows-win10){

  :root[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen]) > body > box{ margin-top: 9px !important; }
  :root[tabsintitlebar][sizemode="maximized"] #navigator-toolbox{ margin-top: -1px }

  @media screen and (min-resolution: 1.25dppx){
    :root[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen]) > body > box{ margin-top: 8px !important; }
  }
  @media screen and (min-resolution: 1.5dppx){
    :root[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen]) > body > box{ margin-top: 8px !important; }
  }
  @media screen and (min-resolution: 2dppx){
    :root[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen]) > body > box{ margin-top: 7px !important; }
  }
  #navigator-toolbox:not(:-moz-lwtheme){ background-color: rgb(32, 35, 64) !important; }
}

:root[sizemode="fullscreen"]{ margin-top: 0px !important; }

#navigator-toolbox{
  position: fixed !important;
  display: block;
  background-color: var(--lwt-accent-color,black) !important;
  transition: transform 82ms linear, opacity 82ms linear !important;
  transition-delay: var(--uc-autohide-toolbox-delay) !important;
  transform-origin: top;
  transform: rotateX(var(--uc-toolbox-rotation));
  opacity: 0;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}

/* #mainPopupSet:hover ~ box > toolbox,
/* Uncomment the above line to make toolbar visible if some popup is hovered */
#navigator-toolbox:hover,
#navigator-toolbox:focus-within{
  transition-delay: 33ms !important;
  transform: rotateX(0);
  opacity: 1;
}

#navigator-toolbox > *{ line-height: normal; pointer-events: auto }

#navigator-toolbox,
#navigator-toolbox > *{
  width: 100vw;
  -moz-appearance: none !important;
}

/* These two exist for oneliner compatibility */
#nav-bar{ width: var(--uc-navigationbar-width,20vw) }
#TabsToolbar{ width: calc(100vw - var(--uc-navigationbar-width,0px)) }

/* Don't apply transform before window has been fully created */
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }

:root[customizing] #navigator-toolbox{
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
}

#navigator-toolbox[inFullscreen] > #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{ display: none }

/* Uncomment this if tabs toolbar is hidden with hide_tabs_toolbar.css */
 /*#titlebar{ margin-bottom: -9px }*/

/* Uncomment the following for compatibility with tabs_on_bottom.css - this isn't well tested though */
/*
:root{ --uc-titlebar-padding: 0px !important; }
#navigator-toolbox{ flex-direction: column; display: flex; }
#titlebar{ order: 2 }
*/

#TabsToolbar
{
    visibility: collapse;
}