﻿#search-result-page {
}

    #search-result-page h1 {
        font-size: 30px;
        font-weight: bold;
        color: #000;
        margin-bottom: 20px;
    }


    #search-result-page .new-search-cont {
    }

        #search-result-page .new-search-cont input {
            float: left;
        }

            #search-result-page .new-search-cont input#ss360search2 {
                border: 1px solid #ccc;
                padding: 8px 10px;
                width: 70%;
            }

            #search-result-page .new-search-cont input#ss360Button {
                background-color: #7f9332;
            }

.results-container h2 {
    color: #000;
    font-size: 18px;
    margin: 20px 0 0 0;
}

#ss360-layer {
    padding: 0;
    margin: 15px 0 0;
}

    #ss360-layer .ss360-tc-b {
        border: none;
        border-radius: 0;
        font-weight: bold;
        color: #000;
    }

    #ss360-layer .ss360-nav--tabs .ss360-nav__menu-item--active .ss360-nav__entry {
        background-color: #0076bd;
        color: #fff;
        border: 1px solid #0076bd;
    }
    .ss360-nav__result-count {
        pointer-events: none;
    }

    #ss360-layer .ss360-ac-bg,
    #ss360-layer .ss360-ac-bg--focus:focus,
    #ss360-layer .ss360-ac-bg--hover:focus,
    #ss360-layer .ss360-ac-bg--hover:hover {
        background-color: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }

    #ss360-layer .ss360-nav--tabs .ss360-nav__entry {
        background: #dedede;
        border: 0;
        box-shadow: none;
        border: 1px solid #dedede;
    }

    #ss360-layer .ss360-suggests {
        box-shadow: none;
        margin: 4px 0;
    }

    #ss360-layer .ss360-ac-c,
    #ss360-layer .ss360-ac-c--hover:focus,
    #ss360-layer .ss360-ac-c--hover:hover {
        color: #0076bd !important;
        font-weight: bold;
    }

    #ss360-layer .ss360-suggests__snippet {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 12px;
        margin-top: 0;
        padding-right: 16px;
        word-break: break-word;
        color: #000;
    }

    #ss360-layer li[data-cgkey="all_results"] {
        display: none;
    }

    #ss360-layer button.ss360-more-results {
        display: inline-block;
        border: 1px solid #7f9333;
        background-color: #7f9333;
        font-size: 15px;
        color: #fff !important;
        font-weight: 700;
        -webkit-box-shadow: 0px 2px 11.04px 0.96px rgba(102, 102, 102, 0.5);
        box-shadow: 0px 2px 11.04px 0.96px rgba(102, 102, 102, 0.5);
        text-decoration: none;
        padding: 7px 18px;
        -webkit-transition: all .25s;
        transition: all .25s;
    }

nav .ss360-nav__select-wrapper {
    max-width: none;
}

#ss360-layer nav .ss360-tc-bg {
    background-color: #0076bd;
    color: #fefefe;
}

.mobile-copy {
    display: block;
}

.dsk-copy {
    display: none;
}


@media (min-width: 600px) {
    nav .ss360-nav__select-wrapper {
        max-width: 440px;
    }
}

@media (min-width: 992px) {
    #ss360-layer {
        margin: 0;
    }

    .mobile-copy {
        display: none;
    }

    .dsk-copy {
        display: block;
    }
}


/* Get rid of the display none on the breadrumb bar */
span#ctl00_breadcrumbproducts {
    display: initial !important;
}

/* Adjust font sizes for search results to match style guide */
#search-result-page h1 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 400;
    margin-top: 0px;
}

#ss360-layer .ss360-suggests__snippet {
    font-size: 16px;
    line-height: 24px;
}

/* Remove excess margin/padding */
.ss360-suggests__content {
    margin: 0!important;
}


/* Get rid of weird gap on the left of result tab buttons */
.ss360-nav--tabs.ss360-nav--top .ss360-nav__pre {
    flex-grow: 0!important;
}

/* Nudge result tab buttons */
.ss360-nav {
    border-bottom: 1px solid #e0e0e0!important;
    padding-bottom: 20px!important;
}

.ss360-nav--tabs.ss360-nav--top {
    margin-bottom: 15px;
    margin-top: 15px;
}

/* Fix search button */
#search-result-page .new-search-cont input#ss360search2 {
    width: calc(100% - 160px);
    border-right: none;
    font-size: 16px;
    line-height: 44px;
    padding: 0 10px;
}

#search-result-page .new-search-cont input#ss360Button2 {
    width: 160px;
    color: white;
    font-weight: 700;
    text-align: center;
    background-color: #7f9333;
    border: 2px solid #7f9333;
    padding: 8px 15px
}

    #search-result-page .new-search-cont input#ss360Button2:hover {
        background-color: white;
        color: #7f9333;
    }


/* Add dividing borders */

#ss360-layer .ss360-suggests {
    margin: 15px 0;
}

    #ss360-layer .ss360-suggests:not(:last-child) {
        border-bottom: 1px solid #e0e0e0;
    }


/* Show where the result will take you to / URL text */
.ss360-suggests__result-url {
    font-size: 14px;
    color: #7f9333;
    display: block;
}

/* Add a SVG icon to the .ss360-suggests__link link if the href ends with .pdf */
.ss360-suggests__link[href$=".pdf"]::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.94 46.3"><defs><style>.cls-1{fill:%230076BD;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M34,0H1.93A1.9,1.9,0,0,0,0,1.55V35.17a1.82,1.82,0,0,0,.42,1.4l9.31,9.31a1.51,1.51,0,0,0,1,.42H34a2,2,0,0,0,1.92-2.07,1.79,1.79,0,0,0,0-.23V1.55A1.89,1.89,0,0,0,34,0Zm.42,44c0,.19,0,.79-.42.79H10.8V35.51H1.53a1.93,1.93,0,0,1,0-.34V1.68A.69.69,0,0,1,2,1.5H34a.64.64,0,0,1,.42.18Z"/><path class="cls-1" d="M8,32.38A1.79,1.79,0,0,1,7,32a2.53,2.53,0,0,1-1.17-2.38c.19-1.72,2.32-3.52,6.33-5.36a69.42,69.42,0,0,0,4-11.37c-1.05-2.3-2.08-5.28-1.33-7A2,2,0,0,1,16,4.62a5.67,5.67,0,0,1,1-.18c.54,0,1,.69,1.34,1.11s1,1.24-.4,7.19a34.33,34.33,0,0,0,5.38,8,21.41,21.41,0,0,1,3.56-.38c1.66,0,2.66.39,3.07,1.19a2.12,2.12,0,0,1-.41,2.28,2.83,2.83,0,0,1-2.35,1.26c-1.29,0-2.79-.81-4.46-2.42a51.09,51.09,0,0,0-9.34,3,29.6,29.6,0,0,1-2.52,4.5c-1.08,1.51-2,2.22-2.94,2.22ZM10.78,27c-2.26,1.27-3.18,2.31-3.24,2.9,0,.1,0,.35.45.74C8.15,30.58,9.07,30.17,10.78,27Zm14.43-4.7c.86.67,1.07,1,1.64,1a1.59,1.59,0,0,0,1.28-.47,1.88,1.88,0,0,0,.24-.44c-.13-.07-.31-.21-1.25-.21A15.31,15.31,0,0,0,25.21,22.3Zm-7.9-7a75.18,75.18,0,0,1-2.83,8,53.54,53.54,0,0,1,6.87-2.14,36.09,36.09,0,0,1-4-5.86Zm-.65-9a2.56,2.56,0,0,0,.11,3.41C17.77,7.47,16.71,6.29,16.66,6.3Z"/></g></g></svg>');
    margin-left: 10px;
    width: 15px;
    height: 20px;
    display: inline-block;
    position: relative;
    top: 3px;
}


/* Make filter button borders a little bit thicker */
#ss360-layer .ss360-nav--tabs .ss360-nav__menu-item--active .ss360-nav__entry, #ss360-layer .ss360-nav--tabs .ss360-nav__entry, #ss360-layer .ss360-ac-bg,
#ss360-layer .ss360-ac-bg--focus:focus,
#ss360-layer .ss360-ac-bg--hover:focus,
#ss360-layer .ss360-ac-bg--hover:hover {
    border-width: 2px !important;
    line-height: 26px;
    padding: 8px 12px;
}


/* remove parenthesis from result count, add background circle */
.ss360-nav__result-count {
    background-color: rgba(255,255,255, 0.6);
    color: black;
    border-radius: 20px;
    padding: 0 5px;
    margin-left: 5px;
    aspect-ratio: 1 / 1;
    display: inline-block;
    height: 24px;
    font-size: 12px;
    font-weight: initial;
    line-height: 24px;
}

    .ss360-nav__result-count::before, .ss360-nav__result-count::after {
        content: none!important;
    }

.ss360-nav__menu-item--active .ss360-n-button {
    background-color: #00558c !important;
    border-color: #00558c !important;
}

.ss360-nav__menu-item--active .ss360-nav__result-count {
    background-color: rgba(0,0,0, 0.8);
    color: white;
}

.ss360-n-button:hover .ss360-nav__result-count {
    background-color: rgba(0,0,0, 0.1);
    color: black;
}

/* Minor filter button alignment and spacing cleanup */
.ss360-nav--top .ss360-nav__menu-item{
    margin: 0 0 8px 0!important;
}
.ss360-nav--tabs.ss360-nav--top .ss360-nav__menu-item--active{
    margin-left: initial!important;
    margin-right: initial!important;
}

.ss360-nav--tabs .ss360-nav__menu {
    display: flex;
    flex-wrap: wrap;
}
.ss360-nav--top .ss360-nav__menu-item {
    white-space: nowrap;
}