.lb-img-wrapper{position:relative;overflow:hidden}.lb-img-wrapper.height100p{height:100%;width:100%}.lb-img-wrapper.height100p img{position:absolute}.lb-img-wrapper picture{height:100%;display:block}.lb-img-wrapper picture img{display:block}.lb-img-wrapper img.lb-object-fit{width:100%;height:100%}.lb-img-wrapper img.lb-object-absolute{position:absolute;top:0}.lb-object-fit-fill{object-fit:fill}.lb-object-fit-cover{object-fit:cover}.lb-object-fit-contain{object-fit:contain}.lb-object-fit-none{object-fit:none}.lb-object-fit-scale-down{object-fit:scale-down}

/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

/*
 * Styles are suited to Elemental and Atomik, v8 and v9 for most uses,
 * But may need to be adapted for other themes
 */

div.ccm-page .search_plus_plus.ccm-search-block-form {
    display: block;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
}

div.ccm-page main .search_plus_plus.ccm-search-block-form {
    width: 50%;
}

div.ccm-page .search_plus_plus.ccm-search-block-form.spp-with-button input.spp-q.ccm-search-block-text {
    width: calc(100% - 77px);
}

div.ccm-page main .search_plus_plus.ccm-search-block-form.spp-with-button input.spp-q.ccm-search-block-text,
div.ccm-page main .search_plus_plus.ccm-search-block-form input.spp-q.ccm-search-block-text {
    width: 100%;
}



div.ccm-page .search_plus_plus.ccm-search-block-form input.spp-q.ccm-search-block-text {
    padding: 10px 10px 10px 35px;
    margin-bottom: 0;
    height: auto;
}

div.ccm-page .search_plus_plus.ccm-search-block-form input.spp-q.ccm-search-block-text {
    border-radius: 30px;
}

div.ccm-page .search_plus_plus.ccm-search-block-form.spp-with-button .input-group input.spp-q.ccm-search-block-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 10px 20px 10px 35px;
}

div.ccm-page .search_plus_plus.ccm-search-block-form .submit-on-enter {
    display: none;
}


/*
 * The above can be specific to Elemental
 * Here we tweak it a little for Atomik
 */

.theme-atomik.ccm-page .search_plus_plus.ccm-search-block-form.spp-with-button input.spp-q.ccm-search-block-text{
    width: calc(100% - 60px);
}
.theme-atomik.ccm-page .search_plus_plus.ccm-search-block-form input.spp-q.ccm-search-block-text {
    border-radius: 0.25rem;
}



/*
 * NOTE - this may be a bit too greedy for some users - for example, if there is a 'MainAreaHeader' containing
 * a search form.
 */
header .search_plus_plus.ccm-search-block-form .form-control,
[id*="header"] .search_plus_plus.ccm-search-block-form .form-control,
[class*="header"] .search_plus_plus.ccm-search-block-form .form-control{
    height: inherit;
}


/* Optional - Change icon when autocomplete active
.search_plus_plus.spp-autocomplete.ccm-search-block-form:before {
    content: "\f0d0" !important;
}
*/

div.ccm-page .search_plus_plus.ccm-search-block-form:before {
    content: "\f00e" !important;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    position: absolute;
    left: 14px;
    top: 9px;
    text-decoration: inherit;
    color: #cbcbcb;
    z-index: 10;
}



/*
 * Honey trap
 */
.search_plus_plus.ccm-search-block-form .spp-ht {
    position: absolute;
    z-index: -1000;
    width: 1px;
    height: 1px;
    opacity: 0
}

/*
 * Ensure inputs and buttons align nicely
 */
div.ccm-page .spp-with-button .input-group {
    vertical-align:top;
}
div.ccm-page .spp-with-button .input-group-btn,
div.ccm-page .spp-with-button .input-group-btn .spp-submit{
   position:absolute;
    top:0;
    right:0;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.ccm-page main .search_plus_plus.ccm-search-block-form .input-group-btn,
div.ccm-page main .search_plus_plus.ccm-search-block-form .input-group-btn .spp-submit{
    left:calc(100% - 3px);
    right:auto;
}

div.ccm-page .search_plus_plus.ccm-search-block-form.spp-with-button  input.spp-q.ccm-search-block-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

div.ccm-page .search_plus_plus.ccm-search-block-form.spp-autocomplete .spp-submit:focus {
    outline: none;
    outline-color: initial;
    outline-style: none;
    outline-width: initial;
}

div.ccm-page form.search_plus_plus.ccm-search-block-form .twitter-typeahead input.ccm-search-block-text.form-control {
    margin-bottom: 0;
}

div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu {
    min-width: 100%;
    width: clamp(640px, 1140px, 90vw);
    cursor: default;
}



/*
 * Typeahead
 */
div.ccm-page .search_plus_plus.ccm-search-block-form .twitter-typeahead {
    width: 100%;
}

@media (max-width: 768px) {
    div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu {
        left: 0 !important;
        right: 0;
        min-width: inherit;
        max-width: calc(99vw - 30px);
    }
}

/*
 * Special case for header, so it grows to left from
 * a fixed right. Right then offset in js top line up with button.
 *
 * NOTE - this may be a bit too greedy for some users - for example, if there is a 'MainAreaHeader' containing
 * a search form.
 */
@media (min-width: 769px) {
    div.ccm-page header .search_plus_plus.ccm-search-block-form .tt-menu,
    [id*="header"] .search_plus_plus.ccm-search-block-form .tt-menu,
    [class*="header"] .search_plus_plus.ccm-search-block-form .tt-menu{
        left: auto!important;
        right: 0;
    }
}

@media (max-width: 1200px) {
    div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu {
        width: clamp(640px, 970px, 90vw);
    }
}

@media (max-width: 992px) {
    div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu {
        width: clamp(640px, 720px, 90vw);
    }
}

div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu.form-control {
    height: auto;
}

div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu.form-control {
    padding: 0;
}
div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu.form-control .tt-suggestion{
    padding: 6px 12px;
}
div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu.form-control .tt-suggestion h3{
    text-transform:none;
}

div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu .tt-suggestion:nth-of-type(odd) {
    background-color: #f9f9f9
}
div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu .tt-suggestion:hover {
    background-color: #f5f5f5;
}

div.ccm-page .search_plus_plus.ccm-search-block-form .tt-suggestion strong.spp-highlight {
    font-weight:inherit;
}
div.ccm-page .search_plus_plus.ccm-search-block-form .tt-suggestion .pageLink strong.spp-highlight {
    background-color:inherit;
}

div.ccm-page .search_plus_plus.ccm-search-block-form .tt-menu .spp_cancel{
    position:absolute;
    top:10px;
    right:10px;
    font-weight:800;
}

.debug-autocomplete.spp-autocomplete .tt-suggestion.list_heading_from_page {
    border-left:5px solid lightyellow;
}
.debug-autocomplete.spp-autocomplete .tt-suggestion.list_from_page {
    border-left:5px solid yellow;
}
.debug-autocomplete.spp-autocomplete .tt-suggestion.suggestion_search_log {
    border-left:5px solid yellowgreen;
}
.debug-autocomplete.spp-autocomplete .tt-suggestion.suggestion_search_columns {
    border-left:5px solid green;
}


/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

div.ccm-page .ccm-search-block-form.search_plus_plus.search_plus_plus_results {
    width: 100%;
}

div.ccm-page .ccm-search-block-form.search_plus_plus.search_plus_plus_results::before {
    display: none;
}