:root {
    /*tree style tab sidebar width*/
    --thin-tab-width: 60px!important;
    /*hovered width*/
    --wide-tab-width: 300px!important;
}
/* hide title bar and its elements */

:root[sizemode="normal"] #titlebar-secondary-buttonbox, :root[sizemode="normal"] #titlebar .titlebar-spacer, :root[sizemode="normal"] #toolbar-menubar, :root[sizemode="normal"] #tabbrowser-tabs, :root[sizemode="normal"] #TabsToolbar .toolbar-items {
    display: none!important;
}
:root[tabsintitlebar][sizemode="normal"] #titlebar {
    appearance: none!important;
}
:root[sizemode="normal"] #nav-bar {
    z-index: 1!important;
}
:root[sizemode="normal"]  #navigator-toolbox #toolbar-menubar {
    -moz-box-ordinal-group: 1 !important;
}
:root[sizemode="normal"]  #titlebar {
    -moz-box-ordinal-group: 2 !important;
}
:root[sizemode="normal"] .titlebar-buttonbox-container {
    z-index: 2!important;
    position: absolute!important;
}
:root[sizemode="normal"] toolbarspring {
    display: none!important;
}
:root[sizemode="normal"] #urlbar:not([focused="true"]) #urlbar-input {
    text-align: center!important;
}
:root[sizemode="normal"] #titlebar {
    max-height: 0px!important;
}
/* hide sidebar header */

:root[sizemode="normal"] #sidebar-header {
    display: none!important;
}
/* align nav bar buttons vertically with window control buttons */

:root[sizemode="normal"] #PanelUI-menu-button, :root[sizemode="normal"] #stop-reload-button, :root[sizemode="normal"] #nav-bar-customization-target>.toolbarbutton-1 {
    margin-top: 3px !important;
}
/* color menu button to mark private browsing windows */

:root[sizemode="normal"] #main-window[privatebrowsingmode="temporary"] #PanelUI-menu-button>.toolbarbutton-badge-stack {
    background-color: #25003E!important;
}
:root[sizemode="normal"] {
    --uc-vertical-toolbar-width: 35px!important;
}
/* Move Hamburger to left */

#PanelUI-button, #customization-panel-container, #customization-panelWrapper .panel-arrow {
    -moz-box-ordinal-group: 0 !important;
    margin-right: -6px !important;
}
#main-window[sizemode="normal"] #appMenu-popup {
    margin-right: -260px!important;
}
/*Vertical auto hidden personal toolbar show on hover*/

:root[sizemode="normal"] #PersonalToolbar {
    display: flex!important;
    flex-direction: column!important;
    position: absolute!important;
    height: 100vh!important;
    max-height: 100vh !important;
    padding: 0px!important;
    padding-bottom: 120px !important;
    z-index: 1111!important;
    pointer-events: auto !important;
    transition: all 0ms ease!important;
    overflow: scroll!important;
    scrollbar-width: none!important;
    width: 35px!important;
    margin-top:calc( -1 * var(--top-toolbar-height)  - 1px )!important;

}
:root:not([customizing])[sizemode="normal"] #PersonalToolbar:not(:hover) {
    width: 4px!important;
    min-width: 4px!important;
    opacity: 0!important;
}
:root[customizing][sizemode="normal"] #customization-container {
    margin-left: 100px!important;
}
:root[sizemode="normal"] #PersonalToolbar:hover {
    padding: 3px!important;
    width: var(--uc-vertical-toolbar-width)!important;
    opacity: 1!important;
    transition: opacity 800ms ease!important;
}
:root[customizing] #PersonalToolbar {
    padding: 3px!important;
    width: var(--uc-vertical-toolbar-width)!important;
    opacity: 1!important;
    transition: opacity 800ms ease!important;
}
#main-window[sizemode="normal"] #personal-toolbar-empty {
    display: none!important;
}
:root[sizemode="normal"] #personal-bookmarks {
    overflow-y: auto!important;
    scrollbar-width: none!important;
}
/* :root[sizemode="normal"] #PersonalToolbar>#personal-bookmarks>#PlacesToolbar>hbox {
    -moz-box-orient: vertical !important;
} */
:root[sizemode="normal"] #PersonalToolbar #PlacesToolbarItems {
    display: flex!important;
    flex-direction: column!important;
}
:root[sizemode="normal"] #PersonalToolbar .toolbarbutton-1 {
    padding-block: 8px !important;
    margin:0px!important;
    margin-right: 0px!important;

    
}
:root[sizemode="normal"] #PersonalToolbar #PlacesToolbarItems>.bookmark-item {
    padding-block: 4px !important;
}
:root[sizemode="normal"] #zoom-controls {
    opacity: 0.9;
    transform: rotate(90deg)!important;
    margin-bottom: 110px;
    margin-top: -10px;
}
:root[customizing][sizemode="normal"] #zoom-controls {
    margin-top: 50px;
    margin-left: -45px!important;
    margin-bottom: 50px!important;
}
:root[sizemode="normal"] #zoom-controls[cui-areatype="toolbar"]>#zoom-reset-button>.toolbarbutton-text {
    transform: rotate(180deg)!important;
    font-size: 15px!important;
    font-family: serif!important;
}
/* Sidebar min and max width removal */

:root[sizemode="normal"] #sidebar {
    max-width: none !important;
    min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */

:root[sizemode="normal"] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]+#sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */

:root[sizemode="normal"] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse!important;
    display: none!important;
}
:root[sizemode="normal"] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
    margin-top: calc( (-1) *( var(--sideheader-margin) + var(--tst-roots-gap))) !important;
}
/* Shrink sidebar until hovered, when using Tree Style Tab. */

:root[sizemode="normal"] #sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}
:root[sizemode="normal"] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    /*transition: all 100ms !important;*/
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index: 1!important;
    transition: all 200ms !important;
    z-index: 0!important;
}
:root[sizemode="normal"] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 200ms !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    min-width: var(--wide-tab-width) !important;
    z-index: 0!important;
    position: absolute
}
/* Titlebar min-max-close buttons  replace*/
:root[sizemode="normal"]  #nav-bar {
    padding-right: 120px;
}
:root[sizemode="normal"]  #TabsToolbar .titlebar-buttonbox-container {
    display: block !important;
    position: absolute !important;
    top: 2px!important;
    right: 0!important;
}
.titlebar-min {
    mask: url(./icons/arrowDown.svg) no-repeat!important;
}
.titlebar-restore, .titlebar-max {
    mask: url(./icons/arrowUp.svg) no-repeat!important;
}
:root[sizemode="normal"]  .titlebar-close {
    margin-left: 18px!important;
    margin-right: 8px!important;
    list-style-image: none!important;
    background-color: var(--toolbarbutton-icon-fill)!important;
    filter: grayscale(0.3)!important;
    mask: url(./icons/cclose.svg) no-repeat!important;
    margin-block: 5px!important;
    mask-size: 100% 100%!important;
    padding: 0!important;
    max-height: 18px!important;
    min-width: 18px!important;
}
:root[sizemode="normal"]  .titlebar-restore,:root[sizemode="normal"]  .titlebar-max,:root[sizemode="normal"]  .titlebar-min {
    margin-left: 20px!important;
    list-style-image: none!important;
    background-color: var(--toolbarbutton-icon-fill)!important;
    filter: grayscale(0.3)!important;
    mask-size: 100% 100%!important;
    min-width: 14px!important;
    min-height: 14px!important;
    max-width: 14px!important;
}
:root[sizemode="normal"] 
.titlebar-button{
    padding-left: 0px!important;
    padding-right: 0px!important;
}
