.header {
    position: relative;
    margin-bottom: 5px;
}
.header.header-mobile {display: none;}

    .header .header-background {
        z-index: 1;
        margin-top: 4px;
        min-height: 150px;
        overflow: hidden;
    }

        .header .header-background img {
            height: 150px;
        }

    .header .header-text {
        z-index: 2;
        position: absolute;
    }

        .header .header-text.text-shadow {
            text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.25)
        }

        .header .header-text h5 {
            margin-top: -1px;
        }

    .header .header-emblem {
        padding: 15px 18px;
        overflow: auto;
        color: #fff;
    }

        .header .header-emblem figure {
            /* display: inline-block; */
            float: left;
            margin-right: 6px;
            min-width: 50px;
            min-height: 54px;
        }

            .header .header-emblem figure img {
                max-width: 50px;
            }

.header-emblem figure.white {
    background: #fff;
    width: 50px;
    min-width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 20%;
    text-align: center;
    box-sizing: content-box;
}

    .header-emblem figure.white img {
        max-width: 80%;
    }

.header .header-emblem h1 {
    font-size: 20px;
    /*text-transform: uppercase;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 2px; /* ÅÄÖ fix*/
    padding-right: 33px; /* space for hamburger*/
    margin: 2px 0 0;
}

.header .header-emblem h2 {
    font-size: 15px;
    font-weight: bold;
    /*opacity: 0.8;*/
    letter-spacing: normal;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 33px; /* space for hamburger*/
}

/* Hidden/internal page: ribbon across the top left corner of the mobile header (cut off by the header's overflow) */
.header-visibility-ribbon {
    position: absolute;
    top: 9px;
    left: -64px;
    z-index: 2;
    width: 180px;
    line-height: 26px;
    text-align: center;
    font-family: Roboto, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    transform: rotate(-30deg);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

    /* .header.header-mobile prefix to win over ".header.header-mobile a { color: inherit }" in header-responsive.css */
    .header.header-mobile .header-visibility-ribbon,
    .header.header-mobile .header-visibility-ribbon:hover,
    .header.header-mobile .header-visibility-ribbon:focus {
        text-decoration: none;
        outline: none;
    }

    .header.header-mobile .header-visibility-ribbon-danger {
        background-color: #eb445a;
        color: #fff;
    }

    /* Hover/tap: a bit lighter (unlike .sl-badge), since the header is often dark */
    .header.header-mobile .header-visibility-ribbon-danger:hover,
    .header.header-mobile .header-visibility-ribbon-danger:focus {
        background-color: #ee6073;
    }

    .header.header-mobile .header-visibility-ribbon-warning {
        background-color: #f7cb6b;
        color: #3a2a07;
    }

    .header.header-mobile .header-visibility-ribbon-warning:hover,
    .header.header-mobile .header-visibility-ribbon-warning:focus {
        background-color: #f9d589;
    }

/* Hidden/internal page: badge after the group name in the desktop header, same colors as the mobile ribbon.
   The header text uses the club's own fonts, letter spacing and text shadow, the badge should not */
.header-visibility-badge {
    display: inline-block;
    position: relative;
    top: -1px;
    height: 26px;
    min-width: 26px;
    margin-left: 2px;
    padding: 0 8px;
    border-radius: 3px;
    vertical-align: middle;
    text-align: center;
    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: normal;
    text-shadow: none;
    cursor: pointer;
}

    .header-visibility-badge .fa {
        line-height: inherit;
    }

.header-visibility-badge-danger {
    background-color: #eb445a;
    color: #fff;
}

    /* Hover: a bit lighter (unlike .sl-badge), since the header is often dark */
    .header-visibility-badge-danger:hover,
    .header-visibility-badge-danger:focus {
        background-color: #ee6073;
    }

.header-visibility-badge-warning {
    background-color: #f7cb6b;
    color: #3a2a07;
}

    .header-visibility-badge-warning:hover,
    .header-visibility-badge-warning:focus {
        background-color: #f9d589;
    }

/* Explanation of the badge (desktop) or ribbon (mobile), opened when clicking it. Above the mobile .navbar (1280) and the side menu (1440) */
.header-visibility-dialog {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1500;
    background-color: rgba(0, 0, 0, 0.5);
}

    .header-visibility-dialog.open {
        display: block;
    }

    /* Desktop: like a popover, right below the badge (placed by the script in VisibilityBadge.cshtml) without dimming the page.
       No layer over the page, which can still be scrolled, the box is placed in page coordinates from the top left corner */
    .header-visibility-dialog-desktop {
        position: absolute;
        right: auto;
        bottom: auto;
        width: 0;
        height: 0;
        background-color: transparent;
    }

        .header-visibility-dialog-desktop .header-visibility-dialog-box {
            position: absolute;
            width: 320px; /* the layer has no width to take a percentage of */
            margin: 0;
        }

        .header-visibility-dialog-desktop .header-visibility-dialog-arrow {
            position: absolute;
            top: -8px;
            margin-left: -8px;
            width: 0;
            height: 0;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
            border-left: 8px solid transparent;
        }

.header-visibility-dialog-box {
    position: relative;
    width: calc(100% - 60px);
    max-width: 320px;
    margin: 200px auto 0;
    padding: 16px 16px 16px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #444;
}

    .header-visibility-dialog-box p {
        margin: 0;
    }

    .header-visibility-dialog-name {
        font-weight: 500;
        color: #333;
    }

    .header-visibility-dialog-box .close {
        position: absolute;
        top: 10px;
        right: 14px;
        font-size: 23px;
    }

.header-visibility-dialog-title {
    margin: 0 0 4px;
    padding-right: 20px; /* space for the close button */
    font-size: 17px;
    font-weight: 600;
}

.header-visibility-dialog-title-danger {
    color: #eb445a;
}

.header-visibility-dialog-title-warning {
    color: #d9990e;
}

.header .show-teammenu {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 84px; /*same as .header-emblem*/
    width: 60px;
    font-size: 22px;
}