/*  Common styles for search components */
/*.mobile-search-area,*/
.search-area {
    /*border: 1px solid #ccc;*/
    border-radius: 6px;
    width: 350px;
    padding: 1px;
}

.search-area form {
    display: flex;
    font-size: 0.875rem;
    height: 2.5rem;
    line-height: 1.25rem;
    position: relative;
    width: 100%;
}
/*.search-area form:before {
    background: rgba(0, 0, 0, 0) url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235a5e9a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E) repeat scroll 0% 0%;
    content: "";
    height: 1rem;
    left: 1rem;
    margin-top: -0.5rem;
    position: absolute;
    top: 50%;
    width: 1rem;
}*/

.search-input {
    width: 100%;
    padding: 0px 81px 0px 0px;
    background-image: url(/assets/zeale/search-icon-not-active.png);
    background-repeat: no-repeat;
    background-position: right 0px center;
    background-size: 72px 40px;
    /*border: 1px solid #CCC;
    border-radius: 6px;*/
}

    .search-input:focus {
        width: 100%;
        padding: 0px 81px 0px 0px;
        background-image: url(/assets/zeale/search-icon-active.png);
        background-repeat: no-repeat;
        background-position: right 0px center;
        background-size: 72px 40px;
        /*border: 1px solid #CCC;
        border-radius: 6px;*/
    }


input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

    .mobile-search-area input:active,
    .mobile-search-area inputfocus-visible,
    .mobile-search-area input,
    .search-area input:active,
    .search-area input:focus-visible,
    .search-area input {
        border: none;
        outline: none;
    }


.search-area input, .search-area input:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    height: 38px;
    max-width: 282px;
    caret-color: #5a5e9a;
    color: #23263b;
    flex: 1 1 0%;
    font: inherit;
    max-width: 100%;
    padding-left: 1rem;
    border: 1px solid #CCC;
    border-radius: 6px;
}

.mobile-search-area input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    height: 38px;
    max-width: 282px;
    caret-color: #5a5e9a;
    color: #23263b;
    flex: 1 1 0%;
    font: inherit;
    max-width: 100%;
    padding-left: 1rem;
}
/* mobile */
button.search {
    background: transparent;
    border: none;
}

.mobile-search-area input {
    padding-left: 0;
    font-size:1.25rem;
}

    .mobile-search-area input::placeholder {
        font-family: "FigTree", serif !important;
        font-size:1.25rem;
        padding-left:.75rem;
    }

.mobile-search-area {
    padding-top:0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}
    .mobile-search-area.active {
        max-height: 100px;
        max-width: 286px;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 1px;
        margin-top:.75rem;
    }

/* Search Results*/
.search-page-container {
    width: 1060px;
    margin: 0 auto;
}
    .search-page-container > div {
        display: flex;
        gap:32px;
    }

#latest_news_sidebar {
    margin-top: 5.1rem;
}

.search-results {
    margin-top:6rem;
}

.srch-container {
    /*margin: 0 6rem;
    margin-top: 4rem;*/

    max-width:728px;
}

.search-stats {
    font-size: .8em;
    color: #666;
}
#hits-root {
    max-width: 728px;
}
#hits {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
    max-width: 728px;
}

.hit-item, .hit-item-container {
    height:100%;
    width:227px !important;
}

    .hit-item img {
        height: 151px;
        width: 227px;
        object-fit: cover;
        object-position: 50% 32%;
    }

.hit-title {
    font-family: "Lora", serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: black;
    padding-top:.75rem;
}

.hit-attributes .zeale-news-info-text {
    margin-top: 3px;
    font-size: .9rem !important;
    line-height: 1.2rem !important;
    cursor: default;
    display: inline-block
}

.ais-SearchBox-submit,
.ais-SearchBox-reset {
    display: none;
}


@media (max-width:1354px) {
    /*.mobile-search-area,*/ .search-area {
        /*border: 1px solid #ccc;
        border-radius: 6px;*/
        width: 100%;
        padding: 1px;
    }

        .search-area input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: #fff;
            height: 38px;
            width: 100%;
            caret-color: #5a5e9a;
            color: #23263b;
            flex: 1 1 0%;
            font: inherit;
            max-width: 100%;
            padding-left: 1rem;
        }
}

@media (max-width: 1060px) {
    .search-page-container {
        width: 100%;
        margin: 0 auto;
    }
    .srch-container {
        width: 100%;
        margin-left: 1.5rem;
        max-width: 100%;
    }

    #hits-root {
        max-width: 100%;
    }

    #hits {
        display: flex;
        flex-wrap: wrap;
        gap: 23px;
        max-width: 100%;
    }

    #latest_news_sidebar {
        display: none;
    }
}

@media (max-width: 500px){
    .hit-item, .hit-item-container {
        height: 100%;
        width: 100% !important;
    }
        .hit-item img {
            height: 224px;
            width: 100%;
            object-fit: cover;
            object-position: 50% 32%;
        }

    #hits {
        display: flex;
        flex-wrap: wrap;
        gap: 23px;
        max-width: 728px;
        justify-content: center;
    }

    .srch-container {
        width: 100%;
        margin-left: 0;
    }

    .search-page-container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

        .search-page-container > div {
            display: flex;
            gap: 0;
        }
}