/* header {
    width: 100%;
} */

.header_nav_clone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100002;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 11%);

    transition: all ease-in-out 0.2s;
    display: none;

    .search__results{
        /* make sure the search results are well alligned when interacting with the cloned header */
        position: fixed !important;
        top: 173px !important;
    }
}

/*Media query for mobile devices ----------------------------------------*/
@media only screen and (max-width: 768px) {


    header{
        width: 100%;
        /* height: 50px; */
        /* background: rgba(0,0,0, .8); */
        /* border-top: 1px solid rgba(255,255,255, .2); */
        /* border-bottom: 1px solid rgba(255,255,255, .2); */
        position: sticky;
        top: 0;
        z-index: 100002;

    }
    

    .headerbar-top{
    
        .container{
            padding: 0;
        }
    }

    .headerbar__nav__desktop{
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: -15px; 

        width: auto;

        input[type="search"]::placeholder{

            color: #2e2e2e80;
        }
    }

    #speedfinder-bundle__search__searchInputOne{
        box-shadow: 0 4px 10px 0 rgb(0 0 0 / 11%);

    }

    .is-homepage{

        /* outline: 5px solid red; */
        .section-main{
            padding-top: 0;
        }

        /*
        * Spacing Rule for Header Adjacent Elements
        * ---------------------------------------
        * When an element with class .background-grey-lightest 
        * appears directly after the header, we add extra top padding
        * (.xs-pt3) to maintain proper visual spacing and ensure the
        * background color transition looks correct.
        */

        .xs-pt3{
            padding-top: 22px;

        }
    } 

    .header_nav_clone {
        display: block;
        transform: translateY(-100%);
    }

    body:not(.is-homepage){
        main{
            /* outline: 1px solid red; */
            >.row{
                padding-top: 22px;
            }
        }
    }

    .sf-bundle>.search > a {
        background: transparent;
       
        svg#speedfinder-bundle__icon__searchInputOne{
            path{
                fill: #2e2e2e33;
            }
        }
    }
}




/* Mobile Web-Specific Styling ----------------------------------------*/
.is-mobile{
    .headerbar__nav__mobile{
        /* outline: 1px solid red; */
    }
}

/* Mobile App-Specific Styling ----------------------------------------*/
.is-apoapp{
    .headerbar__nav__mobile{
        .headerbar__nav__item--user{
            display: none;
        }
    }
}