/*
 * data-role overrides for customstyle.scss
 * Load this file AFTER customstyle.scss.
 * Every rule in customstyle.scss that targets a [data-role="..."] attribute is repeated here
 * targeting [data-role="..."], in the original order and inside its original @media query.
 * Selectors that reference two or more different roles use
 * :is([data-role="x"], [data-role="x"]) so they keep working whether each role has been
 * migrated in the markup or not (specificity is unchanged).
 */

[data-role="secondary-nav"] {
    background-color: #e10c2a;
}

[data-role="user-nav"] {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

    [data-role="user-nav"] li {
        border: 0px !important;
        background: rgba(0, 0, 0, 0.08) none repeat scroll 0 0;
    }

li[data-role="sign-out"] .btn.sign-out,
li[data-role="sign-in"] .btn.sign-in,
[data-role="user-msgs"] a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

[data-role="arrow"] {
    display: none !important;
}

[data-role="user-nav"] {
    border: 0px !important;
    float: left;
}

[data-role="right"] {
    float: right !important;
}

@media (max-width: 767px) {
    [data-role="contact"] p {
        display: none;
    }

    [data-role="sign-in"] {
        display: none !important;
    }

    [data-role="sign-out"] {
        display: none !important;
    }

    [data-role="arrow"] {
        display: block !important;
    }

    [data-role="contact"] {
        display: none !important;
    }

    [data-role="user-nav"] li.li-bod {
        border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    [data-role="main"] {
        display: inline-block !important;
        padding-top: 120px !important;
    }

    [data-role="user-nav"] {
        left: 44px;
    }
}

[data-role="secondary-nav"] {
    background-color: #e10e2a !important;
}

li[data-role="sign-out"] .btn.sign-out,
li[data-role="sign-in"] .btn.sign-in,
[data-role="user-msgs"] a {
    background-color: black !important;
}

[data-role="user-nav"] li {
    background: none;
}

li[data-role="sign-out"] .btn.sign-out:hover,
li[data-role="sign-out"] .btn.sign-out:focus,
li[data-role="sign-in"] .btn.sign-in:hover,
li[data-role="sign-in"] .btn.sign-in:focus,
[data-role="user-msgs"] a:hover,
[data-role="user-msgs"] a:focus {
    background-color: rgba(222, 226, 228, 0.76);
}

[data-role="secondary-nav"] .user-button:hover,
[data-role="secondary-nav"] .user-button:focus,
.topbar-user [data-role="secondary-nav"] .user-button,
[data-role="secondary-nav"] a.search:hover,
[data-role="secondary-nav"] a.search:focus,
.topbar-search [data-role="secondary-nav"] a.search {
    background-color: transparent;
}

:is([data-role="user-nav"], [data-role="user-nav"]) li:is([data-role="user-options"], [data-role="user-options"]) a.user-button {
    max-width: 100%;
}

[data-role="secondary-nav"] .user-button:hover,
[data-role="secondary-nav"] .user-button:focus,
.topbar-user [data-role="secondary-nav"] .user-button,
[data-role="secondary-nav"] a.search:hover,
[data-role="secondary-nav"] a.search:focus,
.topbar-search [data-role="secondary-nav"] a.search {
    background-color: #d8374c !important;
    color: #fff;
}

[data-role="mobile-filters"] {
    background-color: white;
}

[data-role="panel-wrap"] {
    transform: unset !important;
}