.custom-panel-bar { 
    color: #fff;
    background: #333;   
    /* position: fixed; Apparently we still need to support IE6 or what :/, hance this and the margin-bottom 
    width: 100vw;
    margin-bottom: -100%;*/
    display: flex;
    width: 100%;
    z-index: 900;
    display: block;
    opacity: 0;
    overflow: hidden;
    height: 50px;
    transition: opacity 1s ease-in-out;
}
.custom-panel-bar.visible {
    opacity: 1;
}
.custom-panel-bar .container {
    max-width: 100%;
}
.custom-panel-bar .bar-section {
    display: block;
    margin: 7px 0px;
    width: auto;
}
.custom-panel-bar .bar-section.left {
    float: left;
}
.custom-panel-bar .bar-section.right {
    float: right;
}
.custom-panel-bar ul.links {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.custom-panel-bar ul.links li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}
.custom-panel-bar ul.links li a {
    display: block;
    margin: 0px 5px;
    padding: 5px;
    color: inherit;
}
.custom-panel-bar .bar-section.left ul.links li:first-child a {
    margin-left: -5px;
}
.custom-panel-bar .bar-section.right ul.links li:last-child a {
    margin-right: -5px;
}
.custom-panel-bar ul.links li a.btn {
    padding: 8px 10px;
}
.custom-panel-bar ul.links li a.btn--red {
    color: #fff;
    background: #e0301e;
    font-weight: normal;
}
.custom-panel-bar .bar-section.right ul.links li:last-child a.btn {
     margin-right: 12px;
}

/* Because there is a white line visible in Chrome and Chrodge and it doesn't look that great with the additional dark bar as the last item in the SlimHeader. */
@supports (-webkit-appearance:none) {
    #wrapper > div {
        margin-bottom: -3px;
    }
}