/*
    Global fields
*/

.is-component {
    border : 1px solid #A9A9A9;
    font-family : Calibri, sans-serif;
}

.is-icon {
    background-repeat : no-repeat;
    background-position : center center;
    background-size : contain;
}

.is-field {
    font-size : 2em;
    padding : 5px;
}

.is-button {
    padding : 15px;
    border : 1px solid transparent;
    border-radius : 4px;
    font-size : 1.25em;
    cursor : pointer;
    user-select : none;
}

.is-field:focus, .is-field:focus{
    outline: none;
}


/*
    Assets
*/

.is-title {
    font-size : 4em;
    color : #3C434B;
    font-family : Calibri, sans-serif;
    margin : 20px 0 10px 5%;
}

.is-line {
    width : 90%;
    margin: auto;
}


/*
    SearchBox
*/

.is-component.is-searchbox {
    display : flex;
    width : 90%;
    margin : 20px auto;
}

.is-icon.is-searchbox {
    width : 50px;
    height : 50px;
    margin : 5px;
    background-image : url('./images/search.svg');
    opacity : .4;
}

.is-field.is-searchbox {
    width : 100%;
    border : 0;
    color : #2C2C2C;
}


/*
    Search Datalist
*/

.is-component.is-search-datalist {
    display : flex;
    width : 90%;
    margin : 0 auto;
}

.is-icon.is-search-datalist {
    width : 50px;
    height : 50px;
    margin : 5px;
    background-image : url('./images/search.svg');
    opacity : .4;
}

.is-field.is-search-datalist {
    width : 100%;
    border : 0;
    color : #2C2C2C;
}

.is-search-datalist-items {
    width : 90%;
    margin : 0 auto;
}

.is-search-datalist-items li {
    display : inline-block;
    margin : 10px 5px;
    padding : 5px 10px;
    border-radius : 4px;
    background-color : rgba(209, 209, 209, 0.8);
    transition : all 0.3s ease;
    cursor : pointer;
}

.is-search-datalist-items li:hover {
    background-color : rgba(209, 209, 209, 1);
}

.is-search-datalist-items li:first-child {
    margin-left : 0 !important;
}

.is-search-datalist-items li:after {
    content : 'x';
    margin-left : 5px;
    color : rgba(129, 35, 35, 0.6);
    font-family : Calibri, sans-serif;
    font-weight : bolder;
    transition : all 0.3s ease;
}

.is-search-datalist-items li:hover:after {
    color : rgba(129, 35, 35, 0.8);
}

.is-search-datalist-suggestions {
    width : 90%;
    margin : 0 auto;
    border-right : 1px solid #A9A9A9;
    border-bottom : 1px solid #A9A9A9;
    border-left : 1px solid #A9A9A9;
}

.is-search-datalist-suggestions ul {
    max-height : 250px;
    overflow : auto;
}

.is-search-datalist-suggestions li {
    padding : 5px 10px;
    font-family : Calibri, sans-serif;
}

.is-search-datalist-suggestions li:not(.noresult) {
    cursor : pointer;
}

.is-search-datalist-suggestions li:not(.noresult):nth-child(odd) {
    background-color : #EAEAEA;
}

.is-search-datalist-suggestions li:not(.noresult):nth-child(even) {
    background-color : #F9F9F9;
}

.is-search-datalist-suggestions li.noresult {
    font-style : oblique;
    font-weight : bolder;
}

.is-search-datalist-suggestions li:not(.noresult).selected {
    background : #181818;
    color : #F0F0F0;
}

.is-search-datalist-suggestions li em {
    font-style : normal;
    font-weight : bold;
}


/*
    Refinement list
*/

.is-component.is-refinement-list {
    width : 90%;
    margin : 20px auto;
    padding : 15px;
    font-size : 1.25em;
    box-sizing : border-box;
}

.is-item.is-refinement-list {
    display : inline-block;
    width : 100%;
}


/*
    Search & Reset Button
*/

.is-component.is-search-button, .is-component.is-reset-button {
    display : inline-block;
    margin : 5px 10px 5px 0;
    border : 0;
}

.is-button.is-search-button {
    color : #fff;
    background-color : #337ab7;
    border-color : #2e6da4;
}

.is-button.is-search-button:hover {
    color : #fff;
    background-color : #286090;
    border-color : #204d74;
}

.is-button.is-search-button:active {
    color : #fff;
    background-color : #286090;
    border-color : #204d74;
}

.is-button.is-search-button:focus {
    color : #fff;
    background-color : #286090;
    border-color : #122b40;
}

.is-button.is-reset-button {
    color : #fff;
    background-color : #B73337;
    border-color : #A42E2E;
}

.is-button.is-reset-button:hover {
    color : #fff;
    background-color : #902828;
    border-color : #742020;
}

.is-button.is-reset-button:active {
    color : #fff;
    background-color : #902828;
    border-color : #742020;
}

.is-button.is-reset-button:focus {
    color : #fff;
    background-color : #902828;
    border-color : #401212;
}

/*
    Hits
*/

.is-component.is-hits {
    width : 90%;
    margin : 20px auto;
    padding : 15px;
    font-size : 1.25em;
    box-sizing : border-box;
}

.is-score.is-hits {
    margin : 10px 0 20px 50px;
    font-size : 1.75em;
    font-weight : bolder;
    font-variant : small-caps;
}

.is-item.is-hits {
    width : 90%;
    margin : 20px auto;
    padding : 20px;
    background : #EFEFEF;
}

.is-item.is-hits ul {
    margin : 0;
}


/*
    Pagination
*/


/*
    Suggestion Box
*/

.is-component.is-suggestion-box {
    width : 90%;
    margin : 0 auto;
    border : 2px solid #C4C4C4;
    padding : 10px;
}