.part-smartsearch {
    width:300px;
}

.part-smartsearch ::placeholder {
    color:var(--sotetszurke);
}

.part-smartsearch ::-ms-input-placeholder {
    color:var(--sotetszurke);
}

.part-smartsearch .is-hidden {
    display:none;
}

.part-smartsearch .is-selected {
    background-color:var(--kek);
}

.part-smartsearch .is-selected * {
    color:#ffffff;
}

.part-smartsearch .box_search_field {
    position:relative;
}

.part-smartsearch > h2 {
    display:none;
}

.part-smartsearch .component-body {
    margin:4px 0;
}

.part-smartsearch form {

}

.part-smartsearch form::after {
    content:"";
    display:block;
    float:none;
    clear:both;
}

.part-smartsearch form .box_search_field {
    float:left;
    width:calc(100% - 40px);
}

.part-smartsearch form > button {
    appearance:none;
    -webkit-appearance:none;
    transition:0.5s;
    display:block;
    float:left;
    width:40px;
    height:32px;
    border:none;
    padding:0;
    text-align:center;
    background-color:transparent;
    color:var(--kek);

    mask-image:url('../gfx/icon_search.svg');
    background-color:#ffffff;
    mask-repeat: no-repeat;
    mask-size: auto;
    mask-position: center;

    /* background-image:url('../gfx/icon_search.svg');
    background-image:url('../../com_webshop_search/gfx/search_32x32_kek.svg'); */
    background-repeat:no-repeat;
    background-position:center center;
    background-size:20px;
    cursor:pointer;
}

.part-smartsearch form > button.fa-search:before {
    content:"";
    display:none;
}

.part-smartsearch form > button:hover {
    transform:scale(1.1,1.1);

}

.part-smartsearch form input[type=text] {
    display: block;
    background-color: #ffffff;
    height: 32px;
    line-height: 30px;
    border: none;
    padding: 0 10px;
    color: var(--sotetszurke)!important;
    width: 100%;
    font-size: 16px;
}

.part-smartsearch .js-msearch-autocomplete {
    position: absolute;
    left:0;
    top:calc(100% + 8px);
    z-index:2001;
}

.part-smartsearch .msearch-autocomplete {
    width:800px;
    max-height:480px !important;
    overflow-y:auto;
    background-color:#ffffff;
    padding:20px;
    box-shadow:0 0 30px rgba(0,0,0,0.3);
    height: auto !important;
    color: var(--sotetszurke);
}

.part-smartsearch .msearch-autocomplete * {
    font-size:14px;
    line-height:1.4;
}

.part-smartsearch .msearch-arrow {
    position: absolute;
    top:0;
    left: 32px;
}

.part-smartsearch .msearch-arrow::before {
    content: "";
    display:block;
    border-color: transparent;
    border-style: solid;
    border-width: 8px 8px 0;
    border-top-color: #ffffff;
    transform-origin: center top;
    transform: rotate(180deg);
}

.part-smartsearch .search-container {

}

.part-smartsearch .search-container::after {
    content:"";
    display:block;
    float:none;
    clear:both;
}


.part-smartsearch .search-container .left-side {
    width:38%;
    float:left;
    padding-right:32px;
}

.part-smartsearch .search-container .right-side {
    width:62%;
    float:left;
}

.part-smartsearch .msearch-autocomplete-category {
    margin-bottom:10px;
}

.part-smartsearch .msearch-autocomplete-category ul li,
.part-smartsearch .msearch-autocomplete-content ul li {
    padding:5px;
    border-bottom:dashed 1px var(--halvanyszurke);
    transition:0.3s;
    cursor:pointer;
}

.part-smartsearch .msearch-autocomplete-category ul li:hover,
.part-smartsearch .msearch-autocomplete-content ul li:hover {
    background-color:var(--halvanyszurke);
}

.part-smartsearch .msearch-autocomplete-category ul li {
    font-weight:bold;
}

.part-smartsearch .msearch-title {
    background-color:var(--vilagosszurke);
    padding:5px 10px;
    color:#ffffff;
    font-size:20px;
    text-transform:uppercase;
}

.part-smartsearch .msearch-autocomplete-product .msearch-title {
    margin-bottom:10px;
}

.part-smartsearch .msearch-autocomplete-product ul li {
    margin-bottom:10px;
}

.part-smartsearch .msearch-autocomplete-product ul li:last-child {
    margin-bottom:0;
}

.part-smartsearch .msearch-autocomplete-product .row {
    min-height:92px;
    padding:5px 5px 5px 102px;
    position:relative;
    cursor:pointer;
    transition:0.3s;
}

.part-smartsearch .msearch-autocomplete-product .row:hover {
    background-color:#f0f0f0;
}

.part-smartsearch .msearch-autocomplete-product .is-selected .row:hover {
    background:none;
}

.part-smartsearch .msearch-autocomplete-product .search_name {
    font-weight:bold;
}

.part-smartsearch .msearch-product-img {
    position:absolute;
    top:0;
    left:0;
    width:92px;
    height:92px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

.part-smartsearch .msearch-product-img img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
}

.part-smartsearch .msearch-product-img.nopic {
    background-image:url('../gfx/nopic.svg');
    background-color:#f0f0f0;
}

.part-smartsearch .msearch-product-img.nopic img {
    display:none;
}

.part-smartsearch a.js-search-result {
    display:block;
    background-color:var(--kek);
    border:solid 1px var(--kek);
    width:100%;
    color:#ffffff;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
    padding:10px;
    margin-top:20px;
    transition:0.3s;
}

.part-smartsearch a.js-search-result:hover {
    background-color:#ffffff;
    color:var(--sotetszurke);
}

@media only screen and (max-width:1320px) {
    .part-smartsearch {
        width:160px;
    }
    
    .part-smartsearch .box_search_field {
        position:static;
    }
    
    .part-smartsearch .msearch-arrow {
        left:30%;
    }
}

@media only screen and (max-width:880px) {
    .page-header_1_left > div.part-smartsearch {
        margin-left: 2px;
    }

    .part-smartsearch {
        width:auto;
    }

    .part-smartsearch > h2 {
        display:block;
        margin: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        color: transparent;
        overflow: hidden;
        cursor: pointer;
    }

    .part-smartsearch h2::before {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center;
        content: "\f002";
        font-family: "Font Awesome 5 Free";
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-weight: 900;
        font-size: 24px;
        color: #fff;
        background-color: var(--kek);
        transition: 0.3s;
    }

    .part-smartsearch .component-body {
        display:none;
        position:absolute;
        padding:4px;
    }

    .part-smartsearch.open .component-body {
        display: block;
        animation: slide-down_30 .4s
            ease-out;
        width: 200px;
        background-color: #fff;
        box-shadow: 3px 7px 8px rgba(0,0,0, 0.3);
    }

    .part-smartsearch form .box_search_field {
        position:static;
        width: calc(100% - 80px);
        transition:0.5s;
    }

    .part-smartsearch form .msearch-autocomplete {
        width:auto;
    }

    .part-smartsearch form .js-msearch-autocomplete {
        width:540px;
    }

    .part-smartsearch form .box_search_blur {
        width:40px;
        height:32px;
        float:left;
        transition:0.5s;
        background-color:var(--kek);
        background-repeat:no-repeat;
        background-position:center center;
        background-image:url('../gfx/icon-close.svg');
        background-size:16px;
    }

    .part-smartsearch form.blur-hidden .box_search_field {
        width: calc(100% - 40px);
    }

    .part-smartsearch form.blur-hidden .box_search_blur {
        width:0;
    }
    
    .part-smartsearch form > button {
        background-color:var(--sotetkek);
    }
}

@media only screen and (max-width:640px) {

    .part-smartsearch {
        width:auto;
    }

    .part-smartsearch .msearch-autocomplete {
        padding:10px;
    }

    .part-smartsearch .search-container {
        display:flex;
        flex-direction:column;
    }

    .part-smartsearch .search-container .left-side {
        order:2;
        float:none;
        width:auto;
        padding-right:0;
    }

    .part-smartsearch .search-container .right-side {
        order:1;
        float:none;
        width:auto;
        margin-bottom:20px;
    }
    
    .part-smartsearch form .js-msearch-autocomplete {
        left:-40px;
        width:400px;
    }
}

@media only screen and (max-width:479px) {
    .part-smartsearch .msearch-autocomplete {
        max-height:600px !important;
    }
    
    .part-smartsearch form .js-msearch-autocomplete {
        width:340px;
    }
}