/**
* #.# Header
*
* @summary: This file contains the css for the header
*
* @resources:
*    ~ResourcePackages\TenetHealth\GridSystem\Templates\header.html
*
* @media-queries: Yes
*
*/

#mainHeader
{
    background-color: #fcfdfe;
    display: block;
    position: relative;
}

#mainHeader .header-logo
{
    display: none;
}

#mainHeader .header-logo,
.HeaderSecondaryNavRow
{
    background-color: #e5e8eb;
    position: relative;
    text-align: right;
}

.HeaderSecondaryNavRow .HeaderSecondaryNav
{
    display: inline-block;
}

.HeaderSecondaryNavRow .HeaderSecondaryNav ul > li > a
{
    color: #616455;
    display: inline-block;
    font-size: 1em;
    font-weight: 700;
    padding: 21px 20px;
}

.HeaderSecondaryNavRow .HeaderSecondaryNav ul > li > a:hover
{
    background-color: #d2d6d9;
    color: #333;
    text-decoration: none;
}

.HeaderSecondaryNavRow .HeaderSearch
{
    display: inline-block;
    padding: 15px;
}

.HeaderSecondaryNavRow .HeaderSearch .btn
{
    margin-right: 10px;
    margin-top: -5px;
}

.HeaderSecondaryNavRow .HeaderSearch input[type=search]
{
    margin-top: -5px;
}

.HeaderSecondaryNavRow .nagivation-simpleList ul, .HeaderSecondaryNavRow
{
    display: none;
}

#mainHeader .navbar-brand
{
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 120px;
    margin-left: 10px;
    padding: 0;
    width: 130px;
}


ul.simpleNav
{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.simpleNav > li
{
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.simpleNav > li > a
{
    display: normal;
    width: auto;
}

ul.simpleNav > li > a:hover
{
    text-decoration: none;
}


.HeaderMainNavRow .dropdown:nth-child(1) .dropdown-menu,
.HeaderMainNavRow .dropdown:nth-child(2) .dropdown-menu
{
    box-shadow: 5px 5px 10px rgba(0,0,0,.175);
}

.HeaderMainNavRow .dropdown:nth-child(3) .dropdown-menu,
.HeaderMainNavRow .dropdown:nth-child(4) .dropdown-menu
{
    box-shadow: -5px 5px 10px rgba(0,0,0,.175);
}



/*#region Bootstrap Menu Dropdown Click -> Hover*/
.open > .dropdown-menu
{
    display: none;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus
{
    background-color: transparent;
}

.navbar-default .navbar-nav > .open > a:hover .navbar-default .navbar-nav a:hover
{
    background-color: #f0f2f4;
}

/*#endregion*/





@media (min-width: 768px)
{
    .navbar-default
    {
        background-color: transparent;
        border: none;
        display: block;
        margin: 0 auto;
        max-width: 1200px;
        transition: all 0.5s ease-in-out 0s;
    }

    .navbar-default .navbar-nav
    {
        float: right;
    }


    .navbar-default .navbar-nav > li > a
    {
        color: #616455;
        font-size: 20px;
        padding: 50px 14px;
    }

    .navbar-default .navbar-nav > li:hover > a
    {
        background-color: #f0f2f4;
    }

    .navbar-nav > li > .dropdown-menu
    {
        background-color: #e7e7e7;
        transition: all 0.35s ease-in-out 0s;
    }

    .navbar-nav > li.dropdown:last-of-type .dropdown-menu
    {
        left: auto;
        right: 0;
    }

    li.dropdown:nth-of-type(4) ul.dropdown-menu, li.dropdown:nth-of-type(3) ul.dropdown-menu
    {
        left: auto;
        right: 0;
    }

    li.dropdown:hover ul.dropdown-menu
    {
        display: block;
    }

    .navbar-nav > li:hover > .dropdown-menu, .navbar-nav > li.open > .dropdown-menu
    {
        height: auto;
        max-height: 500px;
        opacity: 1;
        top: 100%;
        transform: translateY(0);
    }

    .dropdown-menu
    {
        border: none;
        margin: 0;
        opacity: 0;
        padding: 0;
        transform: translateY(-100%);
    }

    .dropdown-menu > li > a
    {
        background-color: #f0f2f4;
        color: #616455;
        font-size: 20px;
        padding: 5px 15px;
    }

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus
    {
        background-color: #E7E7E7;
    }

    .dropdown-menu > ul
    {
        display: block;
        margin: 0 auto;
    }

    .dropdown-menu > ul > li
    {
        float: left;
        list-style: none;
    }

    .dropdown-menu > ul > li > a
    {
        color: #fcfdfe;
        display: block;
        font-size: 20px;
        padding: 6px 20px;
    }

    .dropdown-menu > ul > li > a:hover
    {
        text-decoration: none;
    }

    .nav > li.hidden-desktop
    {
        display: none;
    }

    .HeaderSecondaryNavRow .nagivation-simpleList ul, .HeaderSecondaryNavRow
    {
        display: block;
    }
}

@media (min-width: 768px) and (max-width:992px)
{
    .navbar-default .navbar-nav > li > a
    {
        font-size: 16px;
        padding: 50px 8px;
    }

    .dropdown-menu > ul > li > a
    {
        color: #fcfdfe;
        font-size: 16px;
        padding: 10px 10px;
    }
}

@media (min-width: 992px)
{
    #mainHeader .navbar-brand
    {
        margin-left: 0;
    }

    .dropdown-menu > ul
    {
        background-color: transparent;
        border: 0 none;
        box-shadow: none;
        box-sizing: border-box;
        float: none;
        margin-left: 0;
        margin-top: 0;
        padding-left: 0;
        position: static;
        width: auto;
    }

    .dropdown-menu > ul > li
    {
        box-sizing: border-box;
        list-style: outside none none;
    }

    .dropdown-menu > ul > li > a
    {
        background-color: #e7e7e7;
        box-sizing: border-box;
        color: #555;
        display: block;
        padding: 5px 10px;
    }

    .navbar-nav > li:hover > .dropdown-menu, .navbar-nav > li > .dropdown-menu
    {
        display: none;
    }

    /*.navbar-nav > li.open > .dropdown-menu
    {
        display: block;
    }*/



    .FooterNavigation ul.simpleNav > li
    {
        display: block;
    }

    #mainFooter ul.simpleNav > li > a
    {
        font-size: 14px;
    }

    .FooterNavigation .simpleNav
    {
        float: none;
        margin-top: 20px;
    }

    .FooterLogo
    {
        margin-top: 25px;
        max-width: 175px;
    }
}