Made on
Tilda
<!--Формируем товарный фильтр-->
<div class="search-panel-wrapper t-text">
<!--ГОРОД-->
<div class="search-city-wpapper search-panel-box">
<div class="search-city-trigger">
<div class="search-city-title">Город</div>
<div class="search-city-descr" data-label-text="Любой">Любой</div>
</div>
<div class="search-city-data search-data-box">
<div class="search-city-data-boxes"></div>
<div class="search-city-clear clear-button">Очистить выбор</div>
</div>
</div>
<!--Тип недвижимости-->
<div class="search-type-wpapper search-panel-box">
<div class="search-type-trigger">
<div class="search-type-title">Тип недвижимости</div>
<div class="search-type-descr" data-label-text="Любой">Любой</div>
</div>
<div class="search-type-data search-data-box">
<div class="search-type-data-boxes"></div>
<div class="search-type-clear clear-button">Очистить выбор</div>
</div>
</div>
<!--Ценовой диапазон-->
<div class="search-price-wpapper search-panel-box">
<div class="search-price-trigger">
<div class="search-price-title">Ценовой диапазон</div>
<div class="search-price-descr" data-label-text="Любой">Любой</div>
</div>
<div class="search-price-data search-data-box t951 t951__sidebar">
<div class="search-price-data-boxes"></div>
<div class="search-price-clear clear-button">Очистить выбор</div>
</div>
</div>
<!--Тип предложения-->
<div class="search-quant-wpapper search-panel-box">
<div class="search-quant-trigger">
<div class="search-quant-title">Продажа/Аренда</div>
<div class="search-quant-descr" data-label-text="Всё">Всё</div>
</div>
<div class="search-quant-data search-data-box">
<div class="search-quant-data-boxes"></div>
<div class="search-quant-clear clear-button">Очистить выбор</div>
</div>
</div>
<!--ПОИСК НЕДВИЖИМОСТИ-->
<div class="search-button-wpapper search-panel-box">
<div class="search-button">Поиск</div>
</div>
</div>
<script>
$(document).ready(function(){
let finalPage= '/query-page';
let finalBlockId = '765179142';
// Нажатие на триггер
$(document).on('click' , '.search-panel-box>div:first-child' , function(){
let parent = $(this).closest('.search-panel-box');
//Если открыт в данный момент
if(parent.hasClass('active-trigger')){
parent.removeClass('active-trigger');
}else{
//Если закрыт в данный момент
//Если есть вообще открытые ещё, то закрываем их
if( $('.active-trigger').length>0 ) $('.active-trigger').removeClass('active-trigger');
//Открываем текущий
parent.addClass('active-trigger');
};
});
//Отслеживаем нажатие вне фильтра
$(document).on('click' , function(event){
if( event.target.closest('.search-panel-wrapper') === null ){
//Если какая-то вкладка открыта, то закрываем её
if( $('.active-trigger').length>0 ) $('.active-trigger').removeClass('active-trigger');
};
});
//Дожидаемся загрузки фильтров каталога
let filterNotLoaded = true;
$('.uc-filter-shop .js-store-grid-cont').on('tStoreRendered', function() {
if(filterNotLoaded){
filterNotLoaded = false;
//Запускаем заполнение
fillCharact();
};
});
//Функция заполнения кастомного фильтра
function fillCharact(){
//Обходим все фильтры
$('.uc-filter-shop .t-store__filter__item').each(function(){
let filter = $(this);
let nameOfFilter = filter.find('.t-store__filter__item-title').text();
//Если это фильтр города
if(nameOfFilter=='Город'){
let copyFilter = filter.find('.t-store__filter__item-controls-container').clone(true);
$('.search-city-data-boxes').append(copyFilter);
};
//Если это фильтр Тип недвижимости
if(nameOfFilter=='Тип недвижимости'){
let copyFilter = filter.find('.t-store__filter__item-controls-container').clone(true);
$('.search-type-data-boxes').append(copyFilter);
};
//Если это фильтр Количество комнат
if(nameOfFilter=='Количество комнат'){
let copyFilter = filter.find('.t-store__filter__item-controls-container').clone(true);
$('.search-quant-data-boxes').append(copyFilter);
};
//Если это фильтр Цена
if(filter.hasClass('t-store__filter__item_price')){
let copyFilter = filter.clone(true);
$('.search-price-data-boxes').append(copyFilter);
};
});
};
//При выборе опций
$(document).on('input' , '.search-panel-box' , function(){
let elem = $(this);
//Считаем выбранные опции
let boxChecked = elem.find('.t-checkbox:checked').length;
//Если выбор есть
if(boxChecked){
//Активируем кнопку очистки
elem.find('.clear-button').addClass('active-clear');
//Если это город
if(elem.hasClass('search-city-wpapper')){
let ending = 'городов';
let reminder = boxChecked % 10;
if(reminder==1) ending = 'город';
if(reminder==2 || reminder==3 || reminder==4) ending = 'города';
elem.find('.search-city-descr').addClass('active-descr').text(boxChecked+' '+ending);
};
//Если это тип
if(elem.hasClass('search-type-wpapper')){
let ending = 'типов';
let reminder = boxChecked % 10;
if(reminder==1) ending = 'тип';
if(reminder==2 || reminder==3 || reminder==4) ending = 'типа';
elem.find('.search-type-descr').addClass('active-descr').text(boxChecked+' '+ending);
};
//Если это кол-во
if(elem.hasClass('search-quant-wpapper')){
let ending = 'к. кв.';
let flatLine = '';
elem.find('.t-checkbox:checked').each(function(){
let filterVal = $(this).attr('data-filter-value');
filterVal = filterVal.replace(ending,'');
flatLine += filterVal+', ';
});
flatLine = flatLine.slice(0, -2)+' ';
elem.find('.search-quant-descr').addClass('active-descr').text(flatLine+' '+ending);
};
//Если выбора нет
}else{
//Если это не цена
if(!elem.hasClass('search-price-wpapper')){
//Дективируем кнопку очистки
elem.find('.clear-button').removeClass('active-clear');
};
//Если это город
if(elem.hasClass('search-city-wpapper')){
elem.find('.search-city-descr').removeClass('active-descr').text( elem.find('.search-city-descr').attr('data-label-text') );
};
//Если это тип
if(elem.hasClass('search-type-wpapper')){
elem.find('.search-type-descr').removeClass('active-descr').text( elem.find('.search-type-descr').attr('data-label-text') );
};
//Если это кол-во
if(elem.hasClass('search-quant-wpapper')){
elem.find('.search-quant-descr').removeClass('active-descr').text( elem.find('.search-quant-descr').attr('data-label-text') );
};
};
});
//При очистке опций
$(document).on('click' , '.clear-button' , function(){
let clearBtn = $(this);
let searchBox = clearBtn.closest('.search-panel-box');
searchBox.find('.t-checkbox').prop('checked', false);
clearBtn.removeClass('active-clear');
//Если это город
if(searchBox.hasClass('search-city-wpapper')){
searchBox.find('.search-city-descr').removeClass('active-descr').text( searchBox.find('.search-city-descr').attr('data-label-text') );
};
//Если это тип
if(searchBox.hasClass('search-type-wpapper')){
searchBox.find('.search-type-descr').removeClass('active-descr').text( searchBox.find('.search-type-descr').attr('data-label-text') );
};
//Если это кол-во
if(searchBox.hasClass('search-quant-wpapper')){
searchBox.find('.search-quant-descr').removeClass('active-descr').text( searchBox.find('.search-quant-descr').attr('data-label-text') );
};
//Если это цена
if(searchBox.hasClass('search-price-wpapper')){
searchBox.find('.search-price-descr').removeClass('active-descr').text( searchBox.find('.search-price-descr').attr('data-label-text') );
//Получаем поля с ценами и их минимальные + максимальные диапазоны
let minInp = $('.search-price-wpapper .js-store-filter-pricemin');
let maxInp = $('.search-price-wpapper .js-store-filter-pricemax');
//Получаем минимум и максимум для полей
let minAttrMin = minInp.attr('data-min-val');
let maxAttrMax = maxInp.attr('data-max-val');
let rangeMin = $('.search-price-wpapper .t-store__filter__range_min');
let rangeMax = $('.search-price-wpapper .t-store__filter__range_max');
minInp.val(divide(minAttrMin));
maxInp.val(divide(maxAttrMax));
rangeMin.val(minAttrMin);
rangeMax.val(maxAttrMax);
$('.search-price-wpapper .t-store__filter__price-outer_start').css('width', '0%');
$('.search-price-wpapper .t-store__filter__price-outer_end').css('width', '0%');
};
});
function divide(x, delimiter) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};
//Управление слайдером цены
//Рэнж минимальной цены
$(document).on('input', '.search-price-wpapper .t-store__filter__range_min', function(){
let rangeMin = $(this);
let val = +rangeMin.val();
//Ограничение по максимуму от максимального range
let rangeMaxVal = +$('.search-price-wpapper .t-store__filter__range_max').val();
let step = +rangeMin.attr('step');
//Если переход через максимальный, то делаем откат на 1 шаг назад
if(val>=rangeMaxVal){
val = rangeMaxVal - step;
rangeMin.val(val);
};
//Выводим в INPUT с разрядностью
let inputMin = $('.search-price-wpapper .js-store-filter-pricemin');
inputMin.val( divide(val));
//Заливка выделенного участка
let minRange = +rangeMin.attr('min');
let maxRange = +rangeMin.attr('max');
let onePercent =(maxRange - minRange)/100;
let rangeStep = Math.floor( (val - minRange)/onePercent );
$('.search-price-wpapper .t-store__filter__price-outer_start').css('width', rangeStep+'%');
//Выводим диапазон в текст
writePriceLabel();
});
//Рэнж максимальной цены
$(document).on('input', '.search-price-wpapper .t-store__filter__range_max', function(){
let rangeMax = $(this);
let val = +rangeMax.val();
//Ограничение по минимому от минимального range
let rangeMinVal = +$('.search-price-wpapper .t-store__filter__range_min').val();
let step = +rangeMax.attr('step');
//Если переход через минимальный, то делаем откат на 1 шаг вперёд
if(val<=rangeMinVal){
val = rangeMinVal + step;
rangeMax.val(val);
};
//Выводим в INPUT с разрядностью
let inputMax = $('.search-price-wpapper .js-store-filter-pricemax');
inputMax.val( divide(val));
//Заливка выделенного участка
let minRange = +rangeMax.attr('min');
let maxRange = +rangeMax.attr('max');
let onePercent =(maxRange - minRange)/100;
let rangeStep = Math.floor( (maxRange - val)/onePercent );
$('.search-price-wpapper .t-store__filter__price-outer_end').css('width', rangeStep+'%');
//Выводим диапазон в текст
writePriceLabel();
});
//Контролируем ввод сумм в input
//Запрет ввода букв и созание разрядности при вводе
function digits_int(target){
val = $(target).val().replace(/[^0-9]/g, '');
val = val.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
$(target).val(val);
};
$(document).on('input', '.search-price-wpapper .t-store__filter__input', function(){
digits_int(this);
});
//Формируем суммы после ввода Минимума
$(document).on('blur', '.search-price-wpapper .js-store-filter-pricemin', function(){
let inpMin = $('.search-price-wpapper .js-store-filter-pricemin');
let inpMax = $('.search-price-wpapper .js-store-filter-pricemax');
let inpMinVal = +(inpMin.val().replace(/[^0-9]/g, ''));
let inpMaxVal = +(inpMax.val().replace(/[^0-9]/g, ''));
let minimum = +inpMin.attr('data-min-val');
let rangeMin = $('.search-price-wpapper .t-store__filter__range_min');
let step = +rangeMin.attr('step');
let summ = inpMinVal;
if(inpMinVal<minimum) summ = minimum;
if(inpMinVal>=inpMaxVal) summ = inpMaxVal - step;
inpMin.val( divide(summ));
rangeMin.val( summ );
//Заливка выделенного участка
let minRange = +rangeMin.attr('min');
let maxRange = +rangeMin.attr('max');
let onePercent =(maxRange - minRange)/100;
let rangeStep = Math.floor( ( (+rangeMin.val())- minRange)/onePercent );
$('.search-price-wpapper .t-store__filter__price-outer_start').css('width', rangeStep+'%');
//Выводим диапазон в текст
writePriceLabel();
});
//Формируем суммы после ввода Максимума
$(document).on('blur', '.search-price-wpapper .js-store-filter-pricemax', function(){
let inpMin = $('.search-price-wpapper .js-store-filter-pricemin');
let inpMax = $('.search-price-wpapper .js-store-filter-pricemax');
let inpMinVal = +(inpMin.val().replace(/[^0-9]/g, ''));
let inpMaxVal = +(inpMax.val().replace(/[^0-9]/g, ''));
let maximum = +inpMax.attr('data-max-val');
let rangeMax = $('.search-price-wpapper .t-store__filter__range_max');
let step = +rangeMax.attr('step');
let summ = inpMaxVal;
if(inpMaxVal>maximum) summ = maximum;
if(inpMaxVal<=inpMinVal) summ = inpMinVal + step;
inpMax.val( divide(summ));
rangeMax.val( summ );
//Заливка выделенного участка
let minRange = +rangeMax.attr('min');
let maxRange = +rangeMax.attr('max');
let onePercent =(maxRange - minRange)/100;
let val = +rangeMax.val();
let rangeStep = Math.floor( (maxRange - val)/onePercent );
$('.search-price-wpapper .t-store__filter__price-outer_end').css('width', rangeStep+'%');
//Выводим диапазон в текст
writePriceLabel();
});
//Функция вывода выбранного диапазона
function writePriceLabel(){
//Получаем поля выбора цен
let minInp = $('.search-price-wpapper .t-store__filter__range_min');
let maxInp = $('.search-price-wpapper .t-store__filter__range_max');
//Получаем минимум и максимум для полей
let minAttrMin = +minInp.attr('min');
let maxAttrMax = +maxInp.attr('max');
//Получаем выбранное значение
let minVal = +minInp.val();
let maxVal = +maxInp.val();
//Если данные вернули по дефолту
if(minVal==minAttrMin && maxVal==maxAttrMax){
//То пишем дефолтный текст и убираем активный класс
$('.search-price-descr').text( $('.search-price-descr').attr('data-label-text') ).removeClass('active-descr');
$('.search-price-clear').removeClass('active-clear');
}else{
//Если выбрали новый диапазон, то
//Прописываем его и делаем элемент выделенным
$('.search-price-descr').addClass('active-descr');
let newLabel = `${divide(minVal)} - ${divide(maxVal)}`;
$('.search-price-descr').text( newLabel );
$('.search-price-clear').addClass('active-clear');
};
};
//Обработка запроса
$(document).on('click' , '.search-button' , function(){
//Проверяем выбранные позиции
//Проверяем город
let cityCharID = '';
let cityLine = '';
let cityBox = $('.search-city-data-boxes');
let cityChecked = cityBox.find('input.t-checkbox:checked');
if( cityChecked.length>0 ){
let cityCharID = 'tfc_'+cityBox.find('input.js-store-filter-opt').attr('name');
//Собираем выбранные города
cityChecked.each(function(){
cityLine += $(this).attr('data-filter-value')+':::';
});
cityLine = cityLine.slice(0,-3);
cityLine = `${cityCharID}[${finalBlockId}]=${cityLine}&`;
};
//Проверяем тип недвижимости
let typeCharID = '';
let typeLine = '';
let typeBox = $('.search-type-data-boxes');
let typeChecked = typeBox.find('input.t-checkbox:checked');
if( typeChecked.length>0 ){
let typeCharID = 'tfc_'+typeBox.find('input.js-store-filter-opt').attr('name');
//Собираем выбранные города
typeChecked.each(function(){
typeLine += $(this).attr('data-filter-value')+':::';
});
typeLine = typeLine.slice(0,-3);
typeLine = typeLine.replace(/\+/g, "%2B");
typeLine = `${typeCharID}[${finalBlockId}]=${typeLine}&`;
};
//Проверяем кол-во комнат
let quantCharID = '';
let quantLine = '';
let quantBox = $('.search-quant-data-boxes');
let quantChecked = quantBox.find('input.t-checkbox:checked');
if( quantChecked.length>0 ){
let quantCharID = 'tfc_'+quantBox.find('input.js-store-filter-opt').attr('name');
//Собираем выбранные города
quantChecked.each(function(){
quantLine += $(this).attr('data-filter-value')+':::';
});
quantLine = quantLine.slice(0,-3);
quantLine = quantLine.replace(/\s/g, "+");
quantLine = `${quantCharID}[${finalBlockId}]=${quantLine}&`;
};
//Проверяем цену
let minSumm = $('.search-price-wpapper .t-store__filter__range_min').val();
let maxSumm = $('.search-price-wpapper .t-store__filter__range_max').val();
let priceRange = `tfc_price:min[${finalBlockId}]=${minSumm}&tfc_price:max[${finalBlockId}]=${maxSumm}&`;
let finalUrl = `${finalPage}?${cityLine}${typeLine}${priceRange}${quantLine}tfc_div=:::`;
document.location = finalUrl;
});
});
</script>
<style>
.uc-search-panel {
position: relative;
z-index: 99;
top: -180px;
}
.uc-filter-shop {
position: fixed;
top: 0;
opacity: 0;
pointer-events: none;
}
.search-panel-wrapper .t-store__filter__price-outer{
z-index: 1;
}
.uc-search-panel .t-col {
height: 0;
}
.active-descr{
color: #cdab6e;
}
.search-panel-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
background-color: #fff;
border-radius: 5px;
font-weight: 500;
font-size: 14px;
padding: 20px 20px;
grid-gap: 20px;
}
.search-data-box {
display: none;
position: absolute;
top: 75px;
left: -20px;
background: #fff;
padding: 20px 15px;
border-radius: 5px;
width: 300px;
box-shadow: 0 0 10px 0 rgb(0 0 0 / 30%);
z-index: 19;
}
.active-trigger .search-data-box {
display: block;
}
.search-panel-wrapper div[class*="title"] {
color: #999999;
letter-spacing: 2px;
margin-bottom: 12px;
font-size: 12px;
}
.search-button {
width: max-content;
background-color: #9d9d9c;
color: #fff;
cursor: pointer;
padding: 17px 25px;
border-radius: 3px;
font-size: 13px;
}
.search-panel-box {
position: relative;
}
.search-panel-box:after {
content:"";
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 140%;
background-color: #e2e2e2;
translate: 0 -50%;
}
.search-button-wpapper.search-panel-box:after {
display: none;
}
.search-button-wpapper.search-panel-box>div:first-child:after {
display: none;
}
.search-panel-box>div:first-child {
position: relative;
cursor: pointer;
}
.search-panel-box>div:first-child:after {
content: "";
position:absolute;
width: 15px;
height: 10px;
background-image: url(https://static.tildacdn.com/tild6663-3264-4235-b562-323835626232/Vector_1_1.svg);
right: 10px;
top: 50%;
translate: 0 -50%;
background-size: contain;
background-repeat: no-repeat;
}
.search-button-wpapper.search-panel-box>div:first-child:after {
display: none;
}
.active-trigger.search-panel-box>div:first-child:after{
rotate:180deg;
}
.search-price-data .t-store__filter__item-title {
display: none;
}
.search-price-data .t-store__filter__item-title {
display: none;
}
.search-price-data .t-store__filter__range_bg {
z-index: 0;
background-color: #cdab6e;
}
.search-price-data .t-store__filter__item-controls-wrap.t-store__filter__item-price-slider {
margin-bottom: 10px;
}
.search-price-data input.t-store__filter__input {
height: 40px;
background: no-repeat;
border-color: #000;
border-radius: 4px;
font-weight: 400;
font-size: 16px;
}
.clear-button {
text-transform: uppercase;
font-size: 11px;
opacity: 0.3;
pointer-events: none;
position: relative;
margin-top: 30px;
cursor: pointer;
}
.clear-button.active-clear{
opacity: 1;
pointer-events: auto;
}
.clear-button:before {
content: "";
width: 100%;
height: 1px;
background-color: #6d6d6d;
top: -11px;
left: 0;
position: absolute;
}
.search-panel-wrapper .t-store__filter__item.t-store__filter__item_price.js-store-filter-item {
margin-bottom: 0;
}
.search-panel-wrapper .t-checkbox__indicator {
border: 1px solid #000;
height: 25px;
width: 25px;
border-radius: 3px;
}
.search-panel-wrapper label.t-checkbox__control.t-store__filter__checkbox {
margin-bottom: 10px;
}
.search-panel-wrapper .t-store__filter__item-controls-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search-panel-wrapper span.t-store__filter__title {
font-weight: 400;
}
.search-panel-wrapper label.t-checkbox__control.t-store__filter__checkbox {
display: flex;
align-items: center;
}
.search-panel-wrapper .t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator {
background-color: #cdab6e;
border-color: #cdab6e;
}
.search-panel-wrapper .t-checkbox__indicator:after {
border-color: #fff;
width: 8px;
height: 12px;
}
@media screen and (max-width: 1200px){
.uc-search-panel .t-col_12 {
max-width: none;
}
.uc-search-panel .t-container {
max-width: 960px;
max-width: none;
}
.uc-search-panel .t-col {
margin: 0;
}
}
@media screen and (max-width: 1050px){
.search-panel-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.uc-search-panel {
top: -240px;
}
.search-data-box {
top: 60px;
}
.search-quant-wpapper.search-panel-box:after {
display: none;
}
.search-button-wpapper.search-panel-box{
grid-column: 1 / 5;
margin: 0 auto;
margin-top: 15px;
}
.search-quant-data.search-data-box {
left: auto;
right: -20px;
}
}
@media screen and (min-width: 361px){
.t951__sidebar .t-store__filter__item-title {
margin-bottom: 10px;
padding-right: initial;
cursor: initial;
font-weight: 500;
}
.t951 .t-store__filter__item-controls-wrap {
left: 0;
}
.t-store__filter__price-outer_start {
left: 0;
}
.t-store__filter__price-outer {
z-index: 0;
position: absolute;
content: '';
height: 2px;
width: 1%;
background-color: #ddd;
border-radius: 4px;
}
.t-store__filter__price-outer, .t-store__filter__range_bg {
top: 14px;
}
.t-store__filter__range_bg {
position: absolute;
z-index: -1;
width: 100%;
height: 2px;
background-color: #7dc3fe;
border-radius: 4px;
}
.t951__sidebar .t-store__filter__item-controls-wrap.t-store__filter__item-price-box.js-store-filter-item-controls-wr {
display: flex;
align-items: center;
}
.t951__sidebar .t-store__filter__item-controls-wrap {
margin-top: 0;
display: block;
position: static;
box-shadow: none;
background: none;
}
.t951 .t-store__filter__btn {
display: none;
}
.t-store__filter__price-outer_end {
right: 0;
}
.t951__sidebar .t-store__filter__item_available .t-store__filter__item-controls-wrap, .t951__sidebar .t-store__filter__item_price .t-store__filter__item-controls-wrap {
/* margin-top: -2px; */
/* min-width: initial; */
/* padding: 0; */
}
.t951__sidebar .t-store__filter__item {
margin-right: initial;
margin-bottom: 30px;
}
.t951__sidebar .t-store__filter__item-controls-wrap.t-store__filter__item-price-slider {
/* position: relative; */
}
.t951__sidebar .t-store__filter__item_price .t-store__filter__input {
flex-grow: 1;
}
.t-store__filter__range {
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: none;
}
.t-store__filter__range {
position: absolute;
top: 0;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
pointer-events: none;
outline: 0;
}
}
@media screen and (max-width: 960px){
.t-store__filter__item:first-child {
border-top: none;
}
.t-store__filter__item, .t-store__filter__item.t-store__filter__item_sort-mobile {
border-bottom: none;
}
.t-store__filter__item-controls-wrap.t-store__filter__item-price-slider.js-store-filter-item-controls-wr {
display: none;
}
.t-store__filter__item.t-store__filter__item_price.js-store-filter-item.t-descr.t-descr_xxs {
padding: 0;
}
}
@media screen and (max-width: 960px){
.search-panel-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search-button-wpapper.search-panel-box {
grid-column: 1 / 3;
margin: 0 auto;
margin-top: 15px;
}
.search-panel-box:after {
opacity:0;
}
.uc-search-panel {
top: 0px;
padding-top: 35px;
padding-bottom: 35px;
}
.search-data-box {
position: static;
padding: 20px 0px;
border-radius: 5px;
width: 300px;
box-shadow: none;
z-index: 19;
}
.uc-search-panel .t-col {
height: auto;
}
}
@media screen and (max-width: 660px){
.search-panel-wrapper {
display: grid;
grid-template-columns: 1fr;
}
.search-button-wpapper.search-panel-box {
grid-column: 1 / 2;
margin: 0 auto;
margin-top: 15px;
}
}
</style>