.environment-header {
    box-sizing: border-box;
    position: absolute;
    z-index: 600;
    top: @navbar-height;
    left: @bws-sidebar-width;
    right: 0;
    height: @environment-header-height;

    ul {
        .display-flex;
        height: @environment-header-height - 1;
        margin: 0;
        list-style: none;

        li {
            @spacer: 20px;

            .flex-basis(auto);
            padding: 0 @spacer;
            background-color: #fff;
            border-width: 0 1px 1px 0;
            border-style: solid;
            border-right-color: #d9d9d9;
            border-bottom-color: #cdcdcd;
            line-height: @environment-header-height;

            &:last-child {
                border-right: none;
            }
            &.tab {
                &.active {
                    &.services {
                        background-color: transparent;
                        border-bottom: none;
                    }
                    &.machines a {
                        background-color: #fff;
                    }
                    a {
                        height: @environment-header-height;
                        color: @text-colour;
                    }
                }
            }
            &.spacer {
                .flex(1);
            }
            a {
                display: block;
                margin: 0 (-@spacer);
                padding: 0 @spacer;
            }
        }
    }
}
body.state-sidebar-hidden .environment-header {
    left: 0;
}

.environment-header {
    box-sizing: border-box;
    position: absolute;
    z-index: 600;
    top: @navbar-height;
    left: @bws-sidebar-width;
    right: 0;
    height: @environment-header-height;

    ul {
        .display-flex;
        height: @environment-header-height - 1;
        margin: 0;
        list-style: none;

        li {
            @spacer: 20px;

            .flex-basis(auto);
            padding: 0 @spacer;
            background-color: #fff;
            border-width: 0 1px 1px 0;
            border-style: solid;
            border-right-color: #d9d9d9;
            border-bottom-color: #cdcdcd;
            line-height: @environment-header-height;

            &:last-child {
                border-right: none;
            }
            &.tab {
                &.active {
                    &.services {
                        background-color: #f2f2f2;
                        border-bottom: none;
                    }
                    &.machines a {
                        background-color: #fff;
                    }
                    a {
                        height: @environment-header-height;
                        color: @text-colour;
                    }
                }
            }
            &.spacer {
                .flex(1);
            }
            a {
                display: block;
                margin: 0 (-@spacer);
                padding: 0 @spacer;
            }
        }
    }
}
body.state-sidebar-hidden .environment-header {
    left: 0;
}

Tweak service nav tab's background.
Tweak service nav tab's background.

Set the background to something that blends with the canvas, but won't
allow canvas elements (relations lines, services, etc.) to bleed
through.
