/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Keep the Account dropdown directly below the fixed top navigation. */
#navbar-main .nav_right .login ul.dropdown-menu {
    margin-top: 0;
}

/* Keep the right-side Account control anchored to its button at every width. */
#navbar-main .nav_right .login {
    position: relative;
}

#navbar-main .nav_right .login > ul.navbar-nav {
    margin: 0;
}

#navbar-main .nav_right .login > ul.navbar-nav > li.dropdown {
    position: relative;
}

#navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu {
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    min-width: 230px;
    max-width: calc(100vw - 16px);
    z-index: 10000;
}

#navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu > li > a {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Use the same navigation row metrics for the right-side Account item as the
   primary navigation items. This keeps both baselines aligned on desktop. */
#navbar-main #navbar > ul.navbar-nav > li > a,
#navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > a {
    line-height: 38px !important;
    padding: 24px 12px !important;
    box-sizing: border-box;
    vertical-align: top;
}

/* Use the hamburger layout before laptop-width navigation starts wrapping. */
@media only screen and (max-width: 991px) {
    #navbar-main {
        position: relative !important;
        overflow: visible !important;
    }

    #navbar-main .navbar-toggle {
        display: block;
    }

    #navbar-main .navbar-header {
        float: left;
    }

    #navbar-main .nav_right {
        position: absolute;
        top: 0;
        right: 0;
        float: none;
        margin: 0;
        z-index: 10002;
        overflow: visible;
    }

    #navbar-main .nav_right .login > ul.navbar-nav {
        display: block;
        float: none;
        margin: 0 !important;
        white-space: nowrap;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown {
        display: block;
        float: none;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > a {
        line-height: 38px !important;
        padding: 22px 10px !important;
        box-sizing: border-box;
    }

    #navbar-main #navbar.navbar-collapse.collapse {
        display: none !important;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 0;
        border: 0;
        background: #434955;
        z-index: 10001;
    }

    #navbar-main #navbar.navbar-collapse.collapse.in {
        display: block !important;
    }

    #navbar-main #navbar > ul.navbar-nav {
        float: none;
        margin: 0;
        padding: 5px 0;
    }

    #navbar-main #navbar > ul.navbar-nav > li {
        display: block;
        float: none;
        width: 100%;
    }

    #navbar-main #navbar > ul.navbar-nav > li > a {
        display: block;
        float: none;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 20px;
        text-align: left;
    }
}

@media only screen and (max-width: 767px) {
    /* Keep the mobile header as one fixed navigation row. The legacy theme
       floats Account links, which makes their inherited padding add extra
       height and pushes the item below the logo/hamburger. */
    #navbar-main,
    #navbar-main .navbar-header,
    #navbar-main .nav_right,
    #navbar-main .nav_right .login,
    #navbar-main .nav_right .login > ul.navbar-nav,
    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown {
        height: 60px;
        min-height: 60px;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        float: none;
        height: 60px !important;
        min-height: 60px !important;
        padding: 0 12px !important;
        line-height: 1.2 !important;
        box-sizing: border-box;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > a {
        white-space: nowrap;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu {
        position: absolute !important;
        display: none;
        top: 60px !important;
        right: 0 !important;
        left: auto !important;
        margin: 0 !important;
        min-width: 210px;
        max-width: calc(100vw - 16px);
        padding: 5px 0 !important;
        overflow: hidden;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu > li > a {
        display: block;
        float: none;
        width: 100%;
        box-sizing: border-box;
        line-height: 20px !important;
        padding: 12px 16px !important;
        white-space: nowrap;
        background: #434955 !important;
        color: #fff !important;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu > li > a:hover,
    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu > li > a:focus {
        background: #080808 !important;
        color: #fff !important;
    }

    /* The secondary Account menu contains an empty divider item. Its anchor
       must not create a visible blank row on small screens. */
    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu > li.nav-divider {
        display: none !important;
    }

    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown.open > .dropdown-menu {
        display: block;
    }

}

@media only screen and (max-width: 374px) {
    #navbar-main .nav_right .login > ul.navbar-nav > li.dropdown > .dropdown-menu {
        min-width: 190px;
        max-width: calc(100vw - 12px);
    }
}