

/* Start:/local/templates/skinwell/components/bitrix/news.list/catalog_list/style.css?178303021211222*/
/* CATALOG LIST STYLES */ 

:root {
  --tpl-catg-sidebar-width: 300px; 
} 

@media (max-width: 900px) { 
  :root {
    --tpl-catg-sidebar-width: 100%;  
  } 
}

#catalog_container {opacity:0;transition:0.5s;}
#catalog_container.rendered {opacity:1;} 

.catalog_quantity_block {margin-bottom: 35px;} 
.catalog_quantity_caption { font-size: 15px; margin-bottom: 0px; color: #7e8c3f; } 

.tpl_catg_content {display:flex;}  
.tpl_catg_sidebar {width: var(--tpl-catg-sidebar-width);padding-right:50px;}  
.tpl_catg_list_container { width: calc(100% - var(--tpl-catg-sidebar-width));  }  
.tpl_catg_list_outer {overflow: hidden;margin-bottom: 20px;} 
.tpl_catg_list {display: flex;flex-wrap: wrap;margin-left: calc(-1 * var( --tpl-catg-item-margin));margin-right: calc(-1 * var(--tpl-catg-item-margin));} 
.catalog_paginator { margin: 0; width: 187px; margin: 0 auto; } 
.catalog_paginator_loader { position: relative; display: block; padding-bottom: 33px; cursor: pointer; } 
.catalog_paginator_loader span { font-family: Manrope; cursor: pointer; display: block; font-size: 18px; color: #808c40 !important; text-align: center; font-weight: 700; }
.catalog_paginator_loader::after { position: absolute; bottom: 0; left: calc(50% - 12px); width: 24px; height: 24px; content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Cpath fill='%237d8c3e' d='M12 16a1 1 0 01-.71-.29l-6-6a1 1 0 011.42-1.42l5.29 5.3 5.29-5.3a1 1 0 011.42 1.42l-6 6A1 1 0 0112 16z'/%3E%3C/svg%3E");
}

/* SELECTED */ 
.catg_filter_selected { min-height: 0px; } 
.catg_filter_selected_list { margin-bottom: 0px; } 
.catg_filter_selected_item { transition: 0.3s; font-weight: 400; font-size: 14px; display: inline-block; position: relative; margin-right: 10px; margin-bottom: 10px; background-color: rgb(173 173 173); border-radius: 30px; padding: 2px 8px 3px 22px; line-height: 1.4; max-width: 260px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; padding-right: 13px; color: #fff !important; }
.catg_filter_selected_item:hover {background: #707070;}
.catg_filter_selected_item:after { content: '✕'; position: absolute; top: -2px; bottom: 0; left: 6px; margin-top: auto; margin-bottom: auto; margin-right: 4px; padding: 3px; height: 10px; font-size: 10px; line-height: 1; } 
.catg_filter_selected_item_reset { transition: 0.3s; display: inline-block; font-weight: 400; font-size: 14px; vertical-align: top; padding-top: 4px; margin-bottom: 10px; line-height: 1.2; cursor: pointer; background: #ff776a; padding: 4px 11px; border-radius: 12px; color: #fff !important; }
.catg_filter_selected_item_reset:hover { background: #da6257;}

/* SEARCH */ 
.catalog_search { width: 100%; height: 50px; width: 100%; margin-bottom: 24px; } 
.catalog_search_form {border-radius:5px;height: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;border: 1px solid silver;padding-right: 4px;} 
.catalog_search_text { width: 100%; } 
.catalog_search_input { outline: none; display: block; width: 100%; height: 100%; font-size: 17px; line-height: inherit; border: none; padding: 4px 11px; padding-right: 0; } 
.catalog_search_reset {display:none;background: none;width: 50px;aspect-ratio: 1/1;background: url(/img/icons/icon_close.svg) center center no-repeat;cursor: pointer;position: relative;left: 4px;}
.catalog_search_reset.active {display:block;}
.catalog_search_submit {width: 44px;aspect-ratio: 1/1;outline: none;border: none;background: url(/img/icons/icon_search.svg) center center no-repeat;padding: 0;margin: 0;cursor: pointer;flex: 0 0 38px;}

/* FILTER */
.tpl_catg_filter_top, 
.tpl_catg_filter_bottom {display:none;} 

.tpl_catg_filter_handler {display:none;}
.catalog_filter_section { padding-top: 0px; padding-bottom: 60px; } 
.catalog_filter_title.section_title { margin-bottom: 55px; } 
.catalog_filter_list {margin:0 auto;position: relative;border-radius: 5px;border: 1px solid #d8d8d8;overflow: hidden;}
.catalog_filter_item {-webkit-tap-highlight-color: transparent;  margin-bottom: 0;box-shadow: none;transition: all .2s ease;cursor: pointer;padding: 0;position: relative;overflow: hidden;background: #fff;border-bottom: 1px solid #d8d8d8;} 
.catalog_filter_item_caption { background-color:rgb(250, 250, 250);color: rgb(0, 0, 0);margin-bottom: 0;padding: 11px;position: relative;transition: all .3s ease;}
.catalog_filter_item_caption_text {font-size: 20px;font-weight: 500;line-height: 1.1;padding-right:20px;}
.catalog_filter_item_icon {position: absolute;height: 16px;width: 16px;top: 50%;right: 10px;margin-top: -8px;opacity: .3;border: none;cursor: pointer;transition: .2s;background: transparent;outline: none;}
.catalog_filter_item_icon:before, .catalog_filter_item_icon:after {content: ""; display: block; position: absolute; transition: .3s; border-radius: 4px; background: currentColor; width: 10px; height: 2px; top: 10px; left: 3px;}    
.catalog_filter_item_icon:before {transform: rotate(45deg) translateX(-4px);}   
.catalog_filter_item_icon:after {transform: rotate(-45deg) translateX(4px);}  
.catalog_filter_item_select { display: none; pointer-events: initial; padding: 12px 11px 12px 11px; position: relative; box-sizing: content-box !important; cursor: auto; background-color: #fff; transition: .2s all ease; overflow: hidden; } 
.catalog_filter_item_select_text {color: rgb(100, 100, 100);line-height: 130%;font-size: 15px;font-weight: 400;} 
.catalog_filter_item.active .catalog_filter_item_caption {/* background-color:rgb(255, 255, 255); */border-bottom: 1px solid #dadada;}
.catalog_filter_item.active .catalog_filter_item_select {display:block;}
.catalog_filter_item.active .catalog_filter_item_icon {transform: rotateX(180deg);}

.tpl_catg_list_empty {padding:20px; border: 1px dashed silver;}
.tpl_catg_list_empty p {text-align:center;} 
 
/* CHECKBOXES */
.checkbox_01 { display: inline-block; position: relative; } 
.checkbox_01 input[type='checkbox'] { display: none; } 
.checkbox_01 .checkbox-text { color: #000; cursor: pointer; font-size: 14px; line-height: 150%; position: relative; padding-left: 30px; display: block; -webkit-transition: .3s; -o-transition: .3s; transition: .3s }
.checkbox_01 .checkbox-text:before { background: #fff; left: 0; top: 2px; width: 16px; height: 16px; content: ''; position: absolute; display: inline-block; border: 2px solid #000000; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
.checkbox_01 .checkbox-text:after { left: 4px; top: 2px; width: 16px; height: 16px; content: ''; position: absolute; display: none; background: url(/local/templates/skinwell/img/icons/icon_checkbox.svg) 50% 50% transparent no-repeat; }
.checkbox_01 .checkbox-text:hover { color: #333; -webkit-transition: .3s; -o-transition: .3s; transition: .3s }
.checkbox_01 .checkbox-text:hover:before { border-color: #bebebe; -webkit-transition: .3s; -o-transition: .3s; transition: .3s }
.checkbox_01 input[type='checkbox']:checked + .checkbox-text { color: #000; }
.checkbox_01 input[type='checkbox']:checked + .checkbox-text:before { border-color: #bebebe !important; }
.checkbox_01 input[type='checkbox']:checked + .checkbox-text:after { display: inline-block }
.checkbox_01 a, .checkbox_01 a:hover { text-decoration: underline; color: inherit; }

.catalog_filter_label_item { margin-bottom: 11px; } 
.catalog_filter_label_item .checkbox_01 .checkbox-text {font-size: 13px;font-weight: 500;line-height: 120%;letter-spacing: 0.02em;text-transform: capitalize;position:relative;}
.catalog_filter_label_item .checkbox-text-inner {position:relative;top: 5px;text-transform: uppercase;}

@media (max-width: 1150px) { 
    .tpl_catg_sidebar { overflow: auto; width: 100%; padding: 0; margin-bottom: 30px; position: fixed; z-index: 5007; top: 0; bottom: 0; left: 0; right: 0; height: 100%; display: none; }
		.tpl_catg_sidebar.opened {display: block; }  
		.tpl_catg_sidebar:before { content: ''; position: fixed; z-index: 5005; top: 0; left: 0; bottom: 0; right: 0; height: 100%; width: 100%; background: #000; opacity: 0.7; } 
    .tpl_catg_filter_handler {transition:0.5s;display:block;position: fixed;bottom: -100px;width: 100%;z-index: 2010;left:0;padding: 14px;background: #fff;border-top: 1px solid silver;}
    .tpl_catg_filter_handler.active {bottom: 0px;} 
    .tpl_catg_filter_handler_inner { display: flex; align-items: center; justify-content: center; pointer-events: fill; } 
    .tpl_catg_filter_handler_btn {padding: 10px;display: inline-block;background: red;color: #fff;min-width: 200px;text-align: center;cursor: pointer;border-radius: 5px;position: relative;text-transform: uppercase;font-size: 15px;padding-left: 21px;}
    .tpl_catg_filter_handler_btn:before { content:''; width: 24px; aspect-ratio:1/1; border:1px solid red; display: block; position:absolute; top: 7px; left: 37px; z-index:1; background: url(/img/icons/icon_filter_white_01.svg) center center no-repeat transparent; background-size: contain; } 
    .tpl_catg_content { display: flex; flex-direction: column; } 
    .tpl_catg_filter_close { width: 50px; aspect-ratio: 1 / 1; background: url(/img/icons/icon_close.svg) center center no-repeat; cursor: pointer; cursor: pointer; position: absolute; right: 0px; top: 0; }
		.tpl_catg_filter_top { position: fixed; top: 0; width: inherit; background: #fff; border-bottom: 1px solid silver; max-width: inherit; z-index: 5020; } 
    .tpl_catg_filter_top_inner { padding: 11px 10px; display: flex; padding-left: 20px; } 
    
    .tpl_catg_filter_bottom {display:block; position: fixed; bottom: 0; width: inherit; background: #fff; border-top: 1px solid silver; max-width: inherit; z-index: 5020; } 
    .tpl_catg_filter_bottom { display: block; position: fixed; bottom: 0; width: inherit; background: #fff; border-top: 1px solid silver; max-width: inherit; z-index: 5020; } 
		.tpl_catg_filter_bottom_inner { padding: 14px 20px; padding-bottom: 20px; display: flex; padding-left: 20px; justify-content: space-around; gap: 17px; }
    
    .tpl_catg_filter_caption { font-weight: bold; font-size: 20px; } 
    .tpl_catg_filter { transition: 0.5s; overflow: auto; max-width: 300px; background: #fff; height: 100%; position: fixed; top: 0; left: 0; width: 100%; z-index: 5010; } 
    .tpl_catg_filter_inner { padding: 20px; padding-top: 70px; padding-bottom:95px; } 

    .tpl_catg_item { width: calc(33.33% - calc(2 * var(--tpl-catg-item-margin))); } 
    .tpl_catg_list_container { width: 100%; }  
    .tpl_catg_filter { left: -320px; } 
    .tpl_catg_filter.opened { left: 0px; }  
    .tpl_catg_sidebar.opened .tpl_catg_filter_top {display:block;} 
    
    .catg_filter_footer_btn {cursor:pointer; padding: 8px; border: 1px solid #9b9b9b; width: 50%; text-align: center; border-radius: 5px; }
    .catg_filter_footer_btn.ext_btn_reset {color:#fff;background:red;border:1px solid red;}
    .catg_filter_footer_btn.ext_btn_close {color:#fff;background:#728b2e;border:1px solid #728b2e;} 
}

@media (max-width: 450px) {  
  .tpl_catg_filter { max-width: 100%; left: -450px; }  
} 

/* End */
/* /local/templates/skinwell/components/bitrix/news.list/catalog_list/style.css?178303021211222 */
