flexa 3 no grid

:root:not([customizing]) #navigator-toolbox {
    display: flex !important;
    position: relative !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    --toolbarbutton-outer-padding: 0px !important;
}

#PersonalToolbar {
    width: 100vw !important;
}

:root:not([customizing]) #nav-bar {
    flex-grow: 1 !important;
    flex-basis: 0px !important;
    --toolbar-start-end-padding: 2px !important;
    /*--urlbar-margin-inline: 2px !important;*/
}

:root:not([customizing]) #urlbar-container {
    /*flex-grow: 1 !important;*/
    flex-shrink: 1 !important;
    min-width: 20px !important;
}

#TabsToolbar {
    --ug-max_width: 60vw;
    --ug-button_width: calc(2 * var(--toolbarbutton-inner-padding) + 16px + 2 * var(--toolbarbutton-outer-padding));
    --ug_contain: initial;
    padding-inline: 12px 2px !important;
    --toolbarbutton-inner-padding: 8px !important;
}

:root[uidensity="compact"] #TabsToolbar {
    --toolbarbutton-inner-padding: 6px !important;
}

@media screen and (max-width: 1300px) {
    #TabsToolbar {
        --ug-max_width: 40vw;
    }
}

.tabbrowser-tab:not([pinned]) {
    width: 205px;
}

#tabbrowser-tabs {
    max-width: var(--ug-max_width) !important;
}

#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 2 * var(--ug-button_width)) !important;
}

@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
    max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
}

.scrollbox-clip[orient="horizontal"] {
    contain: var(--ug_contain, initial) !important;
}

#tabs-newtab-button {
    padding-inline: 2px !important;
}

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


/**   window control buttons right Mac !!!  **/

:root:not([sizemode="fullscreen"]) .titlebar-buttonbox-container {
    position: absolute !important;
    display: flex !important;
    top: 0 !important;
    right: 0 !important;
    height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important;
    z-index: 3 !important;
}

#TabsToolbar .titlebar-buttonbox {
    margin-inline: 12px !important;
    direction: rtl !important;
    transform: scaleX(-1);
    outline: 1px solid orange !important;
    outline-offset: -1px !important;*/
}

:root:not([sizemode="fullscreen"]) #nav-bar {
    border-right: 72px solid transparent !important;
}


/*  test colors  */

#PersonalToolbar {
    background-color: hsla(200, 45%, 85%, 1) !important;
}
#nav-bar {
    background-color: hsla(120, 50%, 80%, 1) !important;
}
#TabsToolbar {
    background-color: hsla(35, 60%, 82%, 1) !important;
}
.tabbrowser-tab .tab-background  {
    background-color: hsla(0, 0%, 90%, 1) !important;
    background-image: none !important;
    outline: 1px solid hsla(0, 0%, 70%, 1) !important;
    outline-offset: -0px !important;
    box-shadow: none !important;
}

.tabbrowser-tab:not([visuallyselected], [multiselected], :hover) .tab-background  {
    background-color: hsla(0, 0%, 80%, 1) !important;
    outline-offset: -1px !important;
}