/*
    This file is for the gradient-header founder on 2020 account pages.
*/

/*
    Gradient header can be used either as simple navigation header or a more feature-rich display.
    
    Simple nav:
    <div class="gradient-header">
        <div data-grid="container">
            <div data-grid="col-12">
                <h1,h2,h3,h4,h5,h6> Page Title
                <a class="back"> Return to previous area link

    Complex nav:
    <div class="gradient-header">
        <div data-grid="container">
            <div data-grid="col-12">
                <div> (flex container)
                    <div> (flex column)
                        Column 1
                    </div>
                    <div> (flex column)
                        Column 2
                    </div>
                    ...
*/
.account-header {
    width: 100%;
    margin: 0;
    background: #331159;
    color: white;
    min-height: 180px;
}

    .account-header h1,
    .account-header h2,
    .account-header h3,
    .account-header h4,
    .account-header h5,
    .account-header h6 {
        padding: 0;
        margin: 0;
    }

    .account-header [data-grid*="col-12"]>h1,
    .account-header [data-grid*="col-12"]>h2,
    .account-header [data-grid*="col-12"]>h3,
    .account-header [data-grid*="col-12"]>h4,
    .account-header [data-grid*="col-12"]>h5,
    .account-header [data-grid*="col-12"]>h6 {
        color: white;
        font-size: 34px;
        padding: 38px 0 6px;
    }

        .account-header [data-grid*="col-12"]>h1:not([class*="x-weight-"]),
        .account-header [data-grid*="col-12"]>h2:not([class*="x-weight-"]),
        .account-header [data-grid*="col-12"]>h3:not([class*="x-weight-"]),
        .account-header [data-grid*="col-12"]>h4:not([class*="x-weight-"]),
        .account-header [data-grid*="col-12"]>h5:not([class*="x-weight-"]),
        .account-header [data-grid*="col-12"]>h6:not([class*="x-weight-"]) {
            font-weight: 500;
        }

        .account-header [data-grid*="col-12"]>[class*="c-subheading-"] {
            font-size: 13px;
        }

    .account-header a,
    .account-header a.c-hyperlink:visited {
        color: #75B6E7;
    }

        .account-header a {
            font-size: 14px;
            vertical-align: middle;
        }

        .account-header a.back::before {
            content: "\E0D5";
            font-family: MWF-MDL2;
            vertical-align: middle;
            font-size: 16px;
            padding-right: 10px;
        }

            .account-header a:active,
            .account-header a:hover,
            .account-header a.c-hyperlink:not(.f-image):hover {
                text-decoration: underline;
                color: white;
            }

            .account-header a:focus,
            .account-header a.c-hyperlink:not(.f-image):focus:not(.x-hidden-focus) {
                color: white;
                border: 2px solid black;
                text-decoration: underline;
            }

            .account-header a.c-glyph::before {
                vertical-align: middle;
                padding-right: 5px;
            }


    .account-header > [data-grid*="container"],
    .account-header > [data-grid*="container"] > [data-grid*="col-12"] {
        height: 100%;
    }
    
    
    .account-header [data-grid*="col-12"] > div { /* flex container */
        display: flex;
        flex-direction: row;
        height: 100%;
        align-items: stretch;
    }

    .account-header [data-grid*="col-12"] > div > div { /* flex column */
        flex: 1 1 auto;
        padding-left: 10px;
        padding-right: 10px;
    }

        .account-header [data-grid*="col-12"] > div > div.centered {
            align-self: safe center;
        }

        .account-header [data-grid*="col-12"] > div > div.no-grow {
            flex-grow: 0;
        }

        .account-header [data-grid*="col-12"] > div > div:first-child { /* profile image, welcome fname + links*/
            padding-left: 0;
            flex-grow: 2;
        }

            .account-header [data-grid*="col-12"] > div > div:first-child a {
                display: block;
            }

            .account-header [data-grid*="col-12"] > div > div:first-child > div:last-child { /* Welcome, FName + links */
                padding-left: 30px;
            }

        .account-header [data-grid*="col-12"] > div > div:last-child {
            padding-right: 0;
        }


    .account-header [data-grid*="col-12"] > div > div:not(.centered) {
        padding-top: 40px;
        padding-bottom: 30px;
    }

        .account-header [data-grid*="col-12"] > div > div .c-caption-1,
        .account-header [data-grid*="col-12"] > div > div .c-caption-2 {
            color: rgba(255, 255, 255, 0.75);
        }

        .account-header [data-grid*="col-12"] > div > div div.c-glyph,
        .account-header [data-grid*="col-12"] > div > div span.c-glyph {
            font-size: 18px;
            display: block;
            margin-bottom: 7px;
        }

        .account-header [data-grid*="col-12"] > div > div p {
            line-height: 22px;
            margin: 0;
            padding: 0;
            font-size: 13px;
            padding-top: 4px;
        }

        .account-header .taglist {
            max-width: 200px;
        }

    .account-header [data-grid*="col-12"] > div > div .c-tag {
        background: #624991;
        font-size: 12px;
        font-weight: 400;
        margin-top: 6px;
        margin-right: 2px;
    }


.account-header img.c-image.f-round {
    margin: -5px 0 10px 0;
}

.account-header h1.x-weight-semibold {
    font-weight: 600;
}

    @media screen and (max-width:1300px) {
        .account-header [data-grid*="col-12"] > div > div:first-child > div:last-child {

         padding-left: 12px;
        }


        .account-header [data-grid*="col-12"] > div > div:not(.centered) {
            flex-basis: 10% !important;
        }
    }



@media screen and (max-width: 767px){
    .account-header [data-grid*="col-12"] > div {
        display: table;
        margin: 0 auto;
    }

    .account-header [data-grid*="col-12"] > div > div:not(.centered) {
        padding-top: 15px;
        padding-bottom: 15px;
        width: auto;
        display: block;
    }

    .account-header [data-grid*="col-12"] > div > div:first-child {
        text-align: center;
    }

    .account-header [data-grid*="col-12"] > div > div:first-child > div:first-child {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .account-header [data-grid*="col-12"] > div > div:first-child > div:last-child {
        text-align: left;
    }

    .account-header {
        padding-bottom: 34px;
    }
}

@media screen and (max-width:373px) {
    .account-header [data-grid*="col-12"] > div > div:first-child > div:last-child {
        text-align: center;
    }
}

@media screen and (max-width:1083px){
    .account-header {
        padding-left: 34px;
        padding-right: 34px;
    }
}
.account-header a:focus, .account-header a.c-hyperlink:not(.f-image):focus:not(.x-hidden-focus) {
    outline-style: solid;
    outline-color: #6E6E6E;
    outline-width: 2px;
}