
#customization-container {
  background-color: transparent !important;
}

#customization-content-container {
  background-color: #F7F7F7 !important;
}

#main-window[customizing] {
  background-image: var(--lwt-header-image), url("images/customizeUI/customizeMode-gridTexture.png") !important;
  background-attachment: fixed !important;
}

#main-window[customizing] .titlebar-buttonbox-container {
  margin-inline-end: -2em !important;
}

#main-window[customizing] #customization-container,
#main-window[customizing] #navigator-toolbox,
#main-window[customizing] #browser {
  margin-left: 2em !important;
  margin-right: 2em !important;
}

#navigator-toolbox,
#customization-container,
#titlebar,
#browser,
.titlebar-buttonbox-container {
  transition-property: margin-left, margin-right !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-out !important;
}

#main-window[customizing] #customization-container {
  margin-bottom: 2em !important;
}

#main-window[customizing]:not([echelon-style-4]) #appmenu-button-container {
  pointer-events: none !important;
  opacity: 0.5;
  transition: opacity 150ms ease-in !important;
}

#main-window[customizing] #wrapper-urlbar-container + #wrapper-stop-reload-button {
  opacity: 0.5 !important;
}

#main-window[customizing] #nav-bar,
#main-window[customizing] #wrapper-personal-bookmarks,
#main-window[customizing] #TabsToolbar,
#main-window[customizing] #toolbar-menubar {
  transition-property: padding-inline !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-out !important;
  padding-inline: 10px !important;
}

#main-window[customizing] #TabsToolbar {
  padding-inline-end: 0 !important;
}

@media (-moz-windows-compositor) {
  #main-window[echelon-style-4][customizing] .titlebar-buttonbox-container {
    right: calc(-11px - 2em) !important;
  }
}
#nav-bar[customizing] {
  outline: 1px dashed;
  outline-offset: -3px;
}

#PersonalToolbar:not(:hover)[customizing] {
  outline-color: transparent !important;
}

#bookmarks-toolbar-button, #bookmarks-toolbar-placeholder {
  list-style-image: url("images/bookmarksToolbar.png") !important;
}

#customization-footer {
  border-top: 1px solid #DDD !important;
  padding: 15px !important;
  padding-inline: 10px !important;
  background-color: #ECECEC !important;
}


#customization-titlebar-visibility-checkbox .checkbox-icon {
  width: 24px !important;
  height: 24px !important;
  background-image: url("images/customizeUI/customize-titleBar-toggle.png") !important;
}

#customization-titlebar-visibility-checkbox[checked] .checkbox-icon {
  background-position-x: -24px !important;
}

#customization-titlebar-visibility-checkbox .checkbox-label-box {
  gap: 6px !important;
  align-items: center !important;
}

.customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text {
  padding-inline-end: 4px !important;
}

.customizationmode-button > .box-inherit > .button-menu-dropmarker {
  width: 5px !important;
  height: 3px !important;
  list-style-image: url("images/dropdown.png") !important;
}

.customizationmode-checkbox,
.customizationmode-button,
#customization-lwtheme-link {
  min-height: 35px !important;
  border: 1px solid #C0C0C0 !important;
  border-radius: 3px !important;
  margin: 0px !important;
  margin-inline: 5px !important;
  padding: 2px 12px !important;
  background-color: #FBFBFB !important;
  color: #474747 !important;
  box-shadow: 0px 1px rgba(255, 255, 255, 0.5), 0px 1px rgba(255, 255, 255, 0.5) inset !important;
  text-decoration: none !important;
  cursor: unset !important;
}

.customizationmode-checkbox[checked=true] {
  background-color: rgb(218, 218, 218) !important;
  border-color: rgb(168, 168, 168) !important;
  text-shadow: 0 1px rgb(236, 236, 236) !important;
  box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px rgb(196, 196, 196) !important;
}

#customization-header {
  font-size: 1.75em !important;
  line-height: 1.75em !important;
  color: #666 !important;
  font-weight: lighter !important;
  margin-bottom: 1em !important;
  margin: 25px 25px 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

#customization-palette .toolbarbutton-icon {
  width: 18px !important;
  opacity: 1 !important;
}

#customization-palette #fxa-avatar-image {
  width: 18px !important;
  height: 18px !important;
}

#main-window[echelon-style-4] #customization-palette #fxa-avatar-image {
  width: 32px !important;
  height: 32px !important;
}

#customization-panel-container {
  background-image: url("images/customizeUI/customizeMode-separatorHorizontal.png"), url("images/customizeUI/customizeMode-separatorVertical.png"), url("images/customizeUI/customizeMode-gridTexture.png"), url("images/customizeUI/background-noise-toolbar.png"), linear-gradient(to bottom, #3E86CE, #3878BA);
  background-position: center top, left center, left top, left top, left top;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-size: auto 12px, 12px 100%, auto auto, auto auto, auto auto;
  background-attachment: scroll, scroll, fixed, fixed, scroll;
  padding: 15px 25px 25px !important;
}

#customization-panelWrapper {
  --panel-arrow-offset: 0 !important;
}

#customization-panelWrapper > .panel-arrowcontent {
  max-width: 300px !important;
  border: 1px solid #AAA !important;
  box-shadow: none !important;
  min-height: 100% !important;
}

#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side=top] {
  stroke: #AAA !important;
  position: relative !important;
  margin-left: 10px !important;
  margin-right: 6px !important;
}

#customization-panelHolder {
  min-height: 100% !important;
}

#customization-panelHolder > #widget-overflow-fixed-list::before {
  height: 100% !important;
  background-image: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-inline: 10px !important;
  border-radius: 4px !important;
  border: 1px dashed #BBB !important;
}

#customization-panelHolder > #widget-overflow-fixed-list:not(:empty)::before {
  display: none !important;
}

#customization-panelDescription {
  font-size: unset !important;
  color: #444 !important;
}

#customization-panelHeader {
  font-size: 1.5em !important;
  color: #406480 !important;
  font-weight: lighter !important;
}



#customization-lwtheme-link::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("images/customizeUI/theme-switcher-icon.png") !important;
  background-size: contain !important;
  margin-inline-end: 6px !important;
}

#customization-lwtheme-link::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 3px;
  background-image: url("images/dropdown.png") !important;
  margin-inline-start: 5px;
}

/** Hack to make entering CustomizeUI work properly **/
#main-window:not([customizing]) #customization-container {
  opacity: 0 !important;
  min-height: 0 !important;
  visibility: collapse !important;
}

#customization-container {
  display: flex !important;
}