/* Tabs must be set to Bottom in Vivaldi settings. */

#header {
    min-height: 0px !important; /* Hide the titlebar. */
}

/* "Headerbar" gradient */
.linux .window-buttongroup { /* Buttons */
    background-image: linear-gradient(#e6e6e6, #d0d0d0) !important;
    border-top-width: 0px !important;
    border-top-right-radius: 4px !important;
    border-bottom: 1px solid #979797 !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important;
}

.toolbar-addressbar.toolbar { /* Central part (url field + extensions + back/forward buttons) */
    order: 1;
    -webkit-app-region: drag; /* Can drag the window by dragging the toolbar. */
    margin-left: 32px; /* Make room for Close button. */
    margin-right: 64px; /* Make room for Vivaldi and Maximize button. */
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 0 !important;
    background: linear-gradient(#e6e6e6, #d0d0d0) !important;
    border-top-width: 0px !important;
    border-bottom: 1px solid #979797 !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important;

}
.vivaldi { /* Vivaldi button */
    right: 32px !important;
    z-index: 1; /* Draw on top. */
    height: 49px !important;
    background: linear-gradient(#e6e6e6, #d0d0d0) !important;
    border-top-width: 0px !important;
    border-top-left-radius: 4px !important;
    border-bottom: 1px solid #979797 !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important;
}

.toolbar-addressbar.toolbar::after {
    display: none; /* Hide line under toolbar. */
}

.bookmark-bar {
    order: 2;
}

#tabs-container {
    order: 3;
    border-top-width: 0px !important; /* Hide tab top border. */
    padding-bottom: 0 !important;
}

#tabs-container .resize {
    margin-right: -30px !important; /* Get rid of the space between tabs and the Trash button. */
}

button.button-tabbar.toggle-trash {
    z-index: 1 !important; /* Fix clicking issues. */
}

.inner {
    order: 4;
}

button.window-close {
    margin-top: 9px;
    z-index: 1; /*put on top*/
}
#browser.tabs-off button.window-close {
    display: none !important; /* Hide Close button in F11 Fullscreen mode. */
}

button.window-minimize {
    display: none;
}

button.window-maximize {
    margin-left: auto !important;
    margin-top: 9px;
    z-index: 2; /* Draw on top. */
}
#browser.tabs-off button.window-maximize {
    display: none !important; /* Hide Maximize button in F11 Fullscreen mode. */
}


#browser.tabs-off button.vivaldi {
    display: none !important; /* Hide Vivaldi button in F11 Fullscreen mode. */
}
span.burger-icon {
    height: 22px !important; /* Magic number formatting. */
    padding-top: 0px !important; /* Removing unneeded padding. */
}

.addressfield {
    max-width: 750px; /* To leave some room to drag the toolbar. */
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 1; /* So the URL bar will shrink in small windows. */
    background: linear-gradient(to bottom, #eee, #fff) !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0,0,0, 0.25) !important;
    border-radius: 2.5px !important;
    box-shadow:
              inset 0 0 0 1px rgba(0,0,0, 0.06),
              0 1px 0 0 rgba(255,255,255, 0.3) !important;
}

/* Tabs and tab bar */
button.button-tabbar.newtab {
    left: 3px !important; /* Move New Tab button to the left. */
}

.tab {
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-image: linear-gradient(to bottom, transparent, rgba(0,0,0, 0.1)) 1 !important;
}

.tab-strip span .tab-position{
    margin-left: 34px; /* Make room for New Tab button. */
    max-height: 30px !important;
    min-height: 30px !important;
}

.tab-strip {
    width: 100vw !important;
    display: flex !important;
    justify-content: flex-end !important;
    background: linear-gradient(#cacaca, #d5d5d5) !important;
    border-bottom: 1px solid #898989 !important;
    box-shadow: inset 0 1px 2px 1px rgba(0,0,0, 0.1) !important;
    direction: ltr;
}

.tab-position .tab.active {
    border-top: 1px solid none !important;
    border-left: 1px solid #898989 !important;
    border-right: 1px solid #898989 !important;
    border-bottom: 1px solid #898989 !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    box-shadow: 0 0 1px 1px rgba(0,0,0, 0.1),
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2),
        inset 1px 0 0 0 rgba(255,255,255, 0.2),
        inset -1px 0 0 0 rgba(255,255,255, 0.2) !important;
}

#browser.color-behind-tabs-off #main{
    background: var(--colorAccentBg); /* Use correct color behind control buttons not actually on toolbar. */
}