.bx-filter { width: 100%; } .bx-filter .bx-filter-section { position: relative; } /*Sections*/ .bx-filter .bx-filter-parameters-box { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } /* * INPUTS * */ .bx-filter .bx-filter-input-container {} .bx-filter .bx-filter-input-container input { display: block; width: 100%; font-size: 18px; height: 38px; margin: 0; padding: 0 4px; border: 1px solid #ccd5db; border-radius: 2px; background: #fff; outline: none } .bx-retina .bx-filter .bx-filter-input-container input { border-style: solid; border-width: 1px; -webkit-border-image: url(images/border_default.png) 2 repeat; -moz-border-image: url(images/border_default.png) 2 repeat; -o-border-image: url(images/border_default.png) 2 repeat; border-image: url(images/border_default.png) 2 repeat; } /*.bx-filter .bx-filter-input-container input:focus { border-color: #499fd8; } .bx-retina .bx-filter .bx-filter-input-container input:focus { -webkit-border-image: url(images/active.png) 2 repeat; -moz-border-image: url(images/active.png) 2 repeat; -o-border-image: url(images/active.png) 2 repeat; border-image: url(images/active.png) 2 repeat; } /* COLOR */ .bx-ios .bx-filter .bx-filter-input-container input { /* Fix of input shadow for IOS browsers. */ background-image: -webkit-linear-gradient(#ffffff 0%, #ffffff 100%); background-image: linear-gradient(#ffffff 0%, #ffffff 100%); } .bx-filter .bx-filter-button-box { clear: both; } /* *Track * */ .bx-filter .bx-ui-slider-track-container { padding-top: 35px; padding-bottom: 25px; } .bx-filter .bx-ui-slider-track { position: relative; height: 7px; /*background: #d8e9f0;/* COLOR */ } .bx-filter .bx-ui-slider-part { position: absolute; top: -6px; width: 1px; height: 17px; background: #a2bfc7; } .bx-filter .bx-ui-slider-part.p1 { left: -1px; } .bx-filter .bx-ui-slider-part.p2 { left: 25%; } .bx-filter .bx-ui-slider-part.p3 { left: 50%; } .bx-filter .bx-ui-slider-part.p4 { left: 75%; } .bx-filter .bx-ui-slider-part.p5 { right: -1px; } .bx-filter .bx-ui-slider-part span { font-size: 11px; /*font-weight: bold;*/ position: absolute; top: -16px; left: 50%; display: block; width: 100px; margin-left: -50px; text-align: center; color: #000; } .bx-filter .bx-ui-slider-part.p2 span, .bx-filter .bx-ui-slider-part.p3 span, .bx-filter .bx-ui-slider-part.p4 span { color: #6b8086; } .bx-filter .bx-ui-slider-range, .bx-filter .bx-ui-slider-pricebar, .bx-filter .bx-ui-slider-pricebar-vd, .bx-filter .bx-ui-slider-pricebar-vn, .bx-filter .bx-ui-slider-pricebar-v { position: absolute; top: 0; bottom: 0; } .bx-filter .bx-ui-slider-range { z-index: 50; } .bx-filter .bx-ui-slider-pricebar { z-index: 100; } .bx-filter .bx-ui-slider-pricebar-vd { z-index: 60; /*background: #849da4;/* COLOR */ } .bx-filter .bx-ui-slider-pricebar-vn { z-index: 70; /*background: #a8dff3;/* COLOR */ } .bx-filter .bx-ui-slider-pricebar-v { z-index: 80; /*background: #499fd8;/* COLOR */ } .bx-filter .bx-ui-slider-handle { position: absolute; top: 100%; width: 22px; height: 22px; border-bottom: none; } .bx-filter .bx-ui-slider-handle:hover { -webkit-cursor: grab; -ms-cursor: grab; -o-cursor: grab; cursor: grab; } .bx-filter .bx-ui-slider-handle:active { -webkit-cursor: grabbing; -ms-cursor: grabbing; -o-cursor: grabbing; cursor: grabbing; } .bx-filter .bx-ui-slider-handle.left { left: 0; margin-left: -21px; /* COLOR */ /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAArUlEQVQ4y6WSQQ6FMAhEXbjyXwzOpBdx5bXKbYRWLFSJ2m8ysVHfzGA7DH9cuKVfNwwM40ZzZzJlmE3WTjjNfF9Fn2EwMH5pUGYWOJ3w6wZ4wDKz6rUBumQPPxrUmT0IxuxpqxYLQ7MOG5TaHtbk1iza5+VauW5dfdcYSDKcMLkP7wxdA5sMQWV/BkwDTY7mtAfHjpJ/Ihj4DoIgXZ9J+siaimi6rimLgSw87qod+1BRTwMJRYoAAAAASUVORK5CIIA=) no-repeat right top;*/ } .bx-filter .bx-ui-slider-handle.right { right: 0; margin-right: -21px; /* COLOR */ /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAq0lEQVQ4y6WSQRKDIAxFXXSlF0vOZC+SlddKblMUUhKCraIzX9Ahj58PE268TE8e3GSFJ5BUTDskaRl1QFk8BsHs4BCMQMruVEe+l4kWglFu5yLEZKDFXyeXIFoEpg3z738mJTzXhncj75+QtqjnJENO2sG4I1VXDtR3ogv7O1dHxV10gi75EGILiE78RRKy33AOq07i+Us4kRamkOPGptesQjeXIjZjO+fXB+hjUU/S3Z+WAAAAAElFTkSuQmCC) no-repeat left top;*/ } /* * Select * */ .bx-filter .bx-filter-select-container { display: inline-block; position: relative; z-index: 100; width: 150px; } .bx-filter .two-forms-criteria .bx-filter-select-container {width: 125px;} /* COLOR */ /*.bx-filter .bx-filter-select-container.bx-active, .bx-filter .bx-filter-select-container:focus { border-color: #499fd8; } .bx-retina .bx-filter .bx-filter-select-container.bx-active, .bx-retina .bx-filter .bx-filter-select-container:focus { -webkit-border-image: url(images/active.png) 2 repeat; -moz-border-image: url(images/active.png) 2 repeat; -o-border-image: url(images/active.png) 2 repeat; border-image: url(images/active.png) 2 repeat; }*/ .bx-filter .bx-filter-select-block { padding: 0 45px 0 12px; height: 34px; box-sizing: border-box; border: 0; background: #fff; border-radius: 0; box-shadow: none; text-shadow: none; font: 14px/34px "Arial"; color: #737373; cursor: pointer; } .bx-filter .bx-filter-select-text { display: block; overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis; } .bx-filter .bx-filter-select-text.fix { min-width: 120px; } .bx-filter .bx-filter-select-text label { cursor: pointer; } .bx-filter-select-arrow { position: absolute; top: 14px; right: 10px; width: 11px; height: 7px; background: url("/bitrix/templates/miel_2015/i/str-select.png") no-repeat 0 0; border: 0; } /* * Select popup * */ .bx-filter-select-popup { background: #fff; box-shadow: 0 -11px 15px rgba(0,0,0,.39); padding: 0; /* min-width: 173px; */ } .bx-filter-select-popup ul { margin: 0; padding: 0; list-style: none; } .bx-filter-select-popup ul li { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; font: 14px "Arial"; color: #737373; } .bx-filter-select-popup ul li label { display: block; min-height: 18px; padding: 8px 10px; text-align: left !important; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; cursor: pointer; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; -ms-text-overflow: ellipsis; } .bx-filter-select-popup ul li label.selected, .bx-filter-select-popup ul li label:hover { background-color: #eff3f5; color: #737373; } .bx-filter-select-popup ul li label.disabled { color: #b8b8b8; background: transparent; } .bx-filter-select-popup ul li .bx-filter-param-text { } /* * TAGS * */ .bx-filter .bx-filter-tag { padding: 18px; /*border-top: 1px solid #d7eaf7;/* COLOR */ /*border-bottom: 1px solid #d7eaf7;/* COLOR */ } .bx-filter .bx-tag-link { font-size: 12px; text-decoration: none; /*color: #68939e;/* COLOR */ text-shadow: none; } .bx-filter .bx-tag-link.bx-active, .bx-filter .bx-tag-link:hover { color: #1d3d46; } /* * LABEL * */ .bx-filter .bx-filter-param-btn-inline .bx-filter-param-label { float: left; display: block; margin-right: 5px; } .bx-filter .bx-filter-param-btn-block .bx-filter-param-label { display: block; } .bx-filter .bx-filter-param-label { /*font-size: 13px;*/ } .bx-filter .bx-filter-param-label.dib { display: inline-block; } .bx-filter .bx-filter-param-text { font-weight: normal; } .bx-filter .bx-filter-param-label.disabled .bx-filter-param-text { color: #6c6c6c; } .bx-filter-select-popup .bx-filter-param-label.bx-active { background: #f3f8fa; } /* * Checkbox / Radio * */ .bx-filter .bx-filter-input-checkbox {} .bx-filter .bx-filter-input-checkbox input[type=radio], .bx-filter .bx-filter-input-checkbox input[type=checkbox] {} .bx-filter .bx-filter-input-checkbox .bx-filter-param-text { display: block; text-align: left; } /* * BTN * */ .bx-filter .bx-filter-param-btn { font-weight: normal; display: inline-block; width: 38px; height: 38px; padding: 6px; text-align: center; text-decoration: none; color: #000; vertical-align: middle; border: 1px solid #ccd5db; border-radius: 2px; background: #fff; position: relative; -webkit-transition: border .3s ease, box-shadow .1s ease, color .3s ease; -moz-transition: border .3s ease, box-shadow .1s ease, color .3s ease; -ms-transition: border .3s ease, box-shadow .1s ease, color .3s ease; -o-transition: border .3s ease, box-shadow .1s ease, color .3s ease; transition: border .3s ease, box-shadow .1s ease, color .3s ease; cursor: pointer; } .bx-retina .bx-filter .bx-filter-param-btn { border-style: solid; border-width: 1px; -webkit-border-image: url(images/border_default.png) 2 repeat; -moz-border-image: url(images/border_default.png) 2 repeat; -o-border-image: url(images/border_default.png) 2 repeat; border-image: url(images/border_default.png) 2 repeat; } /* COLOR */ /*.bx-filter .bx-filter-param-label.bx-active .bx-filter-param-btn, .bx-filter .bx-filter-param-btn:hover, .bx-filter .bx-filter-param-btn:active, .bx-filter .bx-filter-param-btn:focus { border-color: #499fd8; } .bx-retina .bx-filter .bx-filter-param-label.bx-active .bx-filter-param-btn, .bx-retina .bx-filter .bx-filter-param-btn:hover, .bx-retina .bx-filter .bx-filter-param-btn:active, .bx-retina .bx-filter .bx-filter-select-container:focus { -webkit-border-image: url(images/active.png) 2 repeat; -moz-border-image: url(images/active.png) 2 repeat; -o-border-image: url(images/active.png) 2 repeat; border-image: url(images/active.png) 2 repeat; }*/ /* --- colors */ .bx-filter .bx-filter-param-btn.bx-color-sl {} .bx-filter .bx-filter-param-label.disabled .bx-filter-param-btn.bx-color-sl { background: transparent; box-shadow: none } .bx-filter .bx-filter-param-label.disabled .bx-filter-param-btn.bx-color-sl { position: relative; } .bx-filter .bx-filter-param-label.disabled .bx-filter-param-btn.bx-color-sl:before { position: absolute; bottom: 0; right: 0; top: 0; left: 0; content: ' '; display: block; z-index: 100; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAA/UlEQVQ4y5WSQQ6CQAxFOSBuwAtoAitc4R6MkKgYJULUi8Ax4DgKm9o/45BxBBNJmkB/33T6qUVEHkfDUXHY1sQD7V2DWg+JJox3lOZ3enYdf5IzAjnQkvxGa64Fg2S9PV3JXa4ozoovWEGbY0nOIqDkfIVeQ5hBAOQsAy5guO8FbEJxVqqDZ+rUuQ6rziJ3VLkBcs05BBxlF1nIADrJESYgE0YhAER0KH5DphEKFDNPuG1AhTAi4jnRWV17FNYhcT3NHLzLzuUnjI0YHP203EWY8ENqNsAq5Y3Qf4NuhIT7wTBsDxgIbRjvCfCUe6ozoFCuXIukj5c/lhy1/gvSDM3b8PrjegAAAABJRU5ErkJggg==") no-repeat center; opacity: .7; } .bx-filter .bx-filter-param-btn .bx-filter-param-text { line-height: 26px; } /* * BTN P/M * */ .bx-filter .bx-filter-param-btn.bx-spm { width: 23px; min-width: 23px; height: 23px; line-height: 23px; font-weight: normal; padding: 0; font-size: 17px; color: #767b7e; vertical-align: top; border-radius: 50%; background-color: transparent; } .bx-filter .bx-filter-param-btn.bx-spm.bx-plus { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAANUlEQVQoz2NgwAQsQMzJQCSwAeKGQa7YFKoAhmOgim3QsAxIcSFUkhC2GaqhgQ4UgNgFmwQAij8OUFmBFssAAAAASUVORK5CIIA=") no-repeat center; } .bx-filter .bx-filter-param-btn.bx-spm.bx-minus { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAG0lEQVQYV2NgYGDgBuI4AlgGiBn4gLicAFYGAAFkBwE95V42AAAAAElFTkSuQmCC") no-repeat center; } .bx-filter .bx-filter-param-btn.bx-spm:active { outline: none !important; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .12); } .bx-filter span.bx-spm { font-size: 18px; /*font-weight:bold;*/ line-height: 23px; display: inline-block; height: 23px; margin: 0 10px; vertical-align: middle; color: #000; } /* * icon * */ .bx-filter-select-popup .bx-filter-select-text-icon, .bx-filter .bx-filter-select-text-icon { line-height: 33px; position: relative; display: inline-block; width: 23px; height: 23px; margin-top: -4px; margin-right: 2px; vertical-align: middle; border-radius: 2px; } .bx-filter-select-popup .bx-filter-btn-color-icon, .bx-filter .bx-filter-btn-color-icon { line-height: 24px; /*position:relative;*/ /*top:4px;*/ border-radius: 2px; display: inline-block; width: 24px; height: 24px; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); -webkit-background-size: cover; background-size: cover; } .bx-filter-select-popup .bx-filter-btn-color-icon { width: 20px; height: 20px; margin: 2px 0; top: 0 !important; } .bx-filter .bx-filter-select-block .bx-filter-btn-color-icon { top: -1px !important; } .bx-filter-btn-color-icon.all { position: relative; border: none; box-shadow: none } .bx-filter-btn-color-icon.all:after, .bx-filter-btn-color-icon.all:before { position: absolute; width: 60%; height: 60%; background: #fff; content: " "; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); } .bx-filter-btn-color-icon.all:after { right: 0; bottom: 0; } .bx-filter-btn-color-icon.all:before { top: 0; left: 0; } .bx-filter .bx-filter-param-label.disabled .bx-filter-btn-color-icon { opacity: .2; } /* * BIZ * */ .bx-filter .bx-filter-parameter-biz { font-size: 14px; line-height: 15px; display: inline-block; margin-right: 10px; text-decoration: none; color: #1485ce; border-bottom: 1px dashed; } .bx-filter .bx-filter-parameter-biz:hover { text-decoration: none; border-bottom: 1px solid; } .bx-filter .bx-filter-parameter-biz.bx-active { position: relative; /*padding-left:20px;*/ color: #000; border-color: transparent; } /* * BTN result and reset * */ .btn-themes { /*background-color: #1485CE;/* COLOR */ /*border-color: #1485CE;/* COLOR */ color: #FFF } .btn-themes.bx-active, .btn-themes.focus, .btn-themes:active, .btn-themes:focus, .btn-themes:hover{ /*background-color: #53A4D8;/* COLOR */ /*border-color: #53A4D8;/* COLOR */ color: #FFF } /* * Result Popup * */ .bx-filter-container-modef {position: absolute;} .bx-filter .bx-filter-popup-result { font-size: 13px; font-weight: normal; position: absolute; z-index: 915; display: none; line-height: normal; margin-top: -7px; margin-left: 10px; padding: 0 10px; white-space: nowrap; color: #3f3f3f; min-height: 37px; line-height: 18px; border-style: solid; border: 1px solid #C6DCE7; } .bx-filter .bx-filter-popup-result.left { border-width: 2px 10px 2px 2px; -webkit-border-image: url(images/result_popup_left.png) 4 20 4 4 repeat; -moz-border-image: url(images/result_popup_left.png) 4 20 4 4 repeat; -o-border-image: url(images/result_popup_left.png) 4 20 4 4 repeat; border-image: url(images/result_popup_left.png) 4 20 4 4 fill repeat; } .bx-filter .bx-filter-popup-result.right { border-width: 2px 2px 2px 10px; -webkit-border-image: url(images/result_popup_right.png) 4 4 4 20 repeat; -moz-border-image: url(images/result_popup_right.png) 4 4 4 20 repeat; -o-border-image: url(images/result_popup_right.png) 4 4 4 20 repeat; border-image: url(images/result_popup_right.png) 4 4 4 20 fill repeat; } .bx-filter .bx-filter-popup-result.right { left: 97%; } .bx-filter .bx-filter-popup-result.left { right:97%; } .bx-filter-horizontal .bx-filter-popup-result{ display: inline-block; position: relative; left: auto; right: auto; bottom: -7px; } .bx-filter .bx-filter-popup-result a { color: #0073a3; line-height: 10px; } .bx-filter .bx-filter-popup-result a:hover { text-decoration: none; } .bx-filter .bx-filter-popup-result-close { display: none; } @media (max-width: 767px) { .bx-touch .bx-filter .bx-filter-popup-result { font-size: 12px; line-height: 14px; position: fixed !important; z-index: 1001; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; margin-top: 0; margin-left: 0; width: auto; height: auto; padding: 10px; border-radius: 2px; border: 1px solid #c6dae7; background: rgba(255,255,255,.9); } .bx-touch .bx-filter .bx-filter-popup-result br{display: none;} .bx-filter .bx-filter-popup-result .arrow { display: none; } } .popup-window { width: 150px; font: 14px/18px Arial, sans-serif; border: none; box-shadow: none; border-radius: 0; } .popup-window-top-row, .popup-window-left-column, .popup-window-right-column { display: none; } .popup-window-content { margin: 0; } .bx-filter-no-section { position: absolute; left: 174px; top: 0; width: 100%; height: 148px; z-index: 9999; }