/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */
div.ccm-page main .search_plus_plus.ccm-search-block-form {
    width: 50%;
    display: block;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
}

.search_plus_plus.ccm-search-block-form input.spp-q.ccm-search-block-text {
    width: 100%;
}


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

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

.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;
}

.search_plus_plus.ccm-search-block-form .submit-on-enter {
    display: none;
}
/*
 * 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;
}

.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;
}

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


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

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

/*
 * Ensure inputs and buttons align nicely
 */
.spp-with-button .input-group,
.spp-with-button .input-group-btn {
    vertical-align:top;
}

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

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

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


@media (max-width: 768px) {
    .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) {
    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) {
    .search_plus_plus.ccm-search-block-form .tt-menu {
        width: clamp(640px, 970px, 90vw);
    }
}

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

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

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

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

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

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

.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;
}