/*******************************************/
/***            Filters start           ****/
/*******************************************/
.filter__container{position: unset; margin-bottom: 25px}
.filter-funnel__icon{height: 16px; width:16px}
.filter-options__container{border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; display: flex; justify-content: center; border: 0px #fff solid;}
.filter__swipe .filter__option{display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background-color: #fafafa; border-radius: 5px; cursor: pointer; flex-wrap: nowrap; width: max-content; border: 1px solid var(--filter-color); &.celc{background-color: #ffffff; padding: 11px 12px; height: 46px; border: 1px solid #2D3751}}
.filter__option .filter__name{font-weight: bold; font-size: 14px; display: flex; width: max-content; white-space: nowrap; cursor: pointer}
.filter__option.celc .filter__name{font-weight: 700; font-size: 16px}
.filter__option:nth-child(odd){background-color: #fafafa}
.filter__swipe .filter__option:not(:last-child){margin-right: 15px; &.celc{margin-right: 10px}}
input[type="radio"]{appearance: none; background-color: #fff; margin: 0; font: inherit; color: currentColor; width: 20px; height: 20px; border: 2px solid #d3d3d3; border-radius: 50%; display: grid; place-content: center}
.filter__swipe input[type="radio"]::before{content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--filter-color)}
.filter__swipe input[type="radio"]:checked::before{transform: scale(1)}
.filter__swipe .filter__option:hover{background-color: var(--filter-color); color: #fff; &.celc{background-color: #F0F0F0; color: #2D3751}}
.filter__swipe .filter__option.active-filter__option{background-color: var(--filter-color); color: #fff; &.celc{background-color: #D1D1D1; color: #2D3751}}
.filter__swipe .filter__option,
.filter__dropdown .filter__option{color: #222; &.celc{color: #2D3751}}
.filter__swipe .filter__option input{display: none}
.divLoading{margin: 0; display: none; padding: 0; position: absolute; right: 0; top: -5px; width: 101%; height: 100%; background-color: rgb(255, 255, 255); z-index: 30001; opacity: 0.8}
.loading_icon{position: absolute; top: 45px; left: 45%; font-size: 30px; color: var(--filter-color); text-align: center}
.loading_icon p{font-size: 16px}
.loading-container{position: relative; display: inline-block}
.loading-circle{width: 30px; height: 30px; border: 4px solid var(--filter-color); border-top: 4px solid #f3f3f3; border-radius: 50%; animation: spin 1s linear infinite}
.loading-text{position: absolute; top: 34px; bottom: -20px; left: 50%; transform: translateX(-50%)}
@keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)}}
.topnew_inner{position: relative}
.filter__icon{height: 24px !important; width:24px; margin-right: 5px}
.filter__option.celc .filter__name .filter__icon{margin-right: 8px}
@media (max-width: 991px){.filter__dropdown .filter__option .filter__name{display: flex}
    .filter__dropdown .filter__option:not(:last-child){border-bottom: 1px solid #d3d3d3}
    .filter__dropdown .filter__option{padding: 10px}}
@media (min-width: 992px){.filter__option{display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background-color: #fafafa; border-radius: 5px; transition: all 0.3s; flex-wrap: nowrap; width: max-content; border: 1px solid var(--filter-color)}
    .filter__option:not(.filter_checkbox):not(.filters__form-select){cursor: pointer}  }
@media (max-width: 992px){.filter__swipe .filter-options__container.celc{display: inline-flex}
    .filter__swipe.filter__container.celc{overflow-x: scroll; scrollbar-width: none; -moz-scrollbar-width: none; width: 100%; margin-left: -15px}
    .filter__swipe.filter__container.celc::-webkit-scrollbar{display: none}
    .filter__swipe.celc .filter__option:first-child{margin-left: 15px}
    .filter__swipe.celc .filter__option:last-child{margin-right: 15px}}
@media (max-width: 767px){.filter__swipe .filter-options__container{display: inline-flex}
    .filter__swipe.filter__container{overflow-x: scroll; scrollbar-width: none; -moz-scrollbar-width: none; width: 108%; margin-left: -15px}
    .filter__swipe.filter__container::-webkit-scrollbar{display: none}
    .filter__swipe .filter__option:first-child{margin-left: 15px}
    .filter__swipe .filter__option:last-child{margin-right: 15px}}
.filter__dropdown .filter__container{position: relative; margin-top: 25px}
.filter__dropdown .filter-funnel__icon{height: 16px; width:16px}
.filter__dropdown .chevron{height: 18.21px; width: 18.21px; background-size: cover}
.filter__dropdown .show-filter__toggle{width: 100%; color: #fff; background-color: var(--filter-color); display: flex; justify-content: space-between; align-items: center; padding: 10px 10px; border-top-right-radius: 5px; border-top-left-radius: 5px; border: 0 #fff solid}
.filter__dropdown .show-filter__toggle div{display: flex; justify-content: center; align-items: center}
.filter__dropdown .show-filter__toggle div span{background-color: #fff; height: 24px; width: 24px; color: #068587; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 5px}
.filter__dropdown .filter-options__container{border: 1px solid #d3d3d3; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; overflow: hidden; display: none}
.filter__dropdown .filter__option{display: flex; justify-content: space-between; align-items: center}
.filter__dropdown .filter__option .filter__name{font-weight: bold; font-size: 14px; align-items: center}
.filter__dropdown .filter__option:nth-child(even){background-color: #FFFFFF}
.filter__dropdown .filter__option:nth-child(odd){background-color: #fafafa}
.filter__dropdown input[type="radio"]::before{content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--filter-color)}
.filter__dropdown input[type="radio"]:checked::before{transform: scale(1)}
@media only screen and (min-width: 992px){.filter__dropdown .filter__container{position: unset}
    .filter__dropdown .show-filter__toggle{display: none}
    .filter__dropdown .filter-options__container{display: flex; justify-content: center; border: 0px #fff solid}
    .filter__dropdown .filter__option:not(:last-child){margin-right: 15px}
    .filter__dropdown .filter__option:nth-child(odd){background-color: #fafafa}
    .filter__dropdown .filter__option:hover{background-color: var(--filter-color); color: #fff}
    .filter__dropdown .filter__option.active-filter__option{background-color: var(--filter-color); color: #fff}
    .filter__dropdown .filter__option input{display: none}}
.filters__base_container{padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto}
.filters__base_row{display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center;}
.filter__checkbox{padding: 15px 15px 15px 30px; background-color: var(--filter-color); margin-bottom: 20px; border-radius: 4px; max-width: 1200px}
.filter__checkbox label{color: #fff; font-size: 13px; display: inline-block; margin-right: 2px;}
.filters__form-check{display: flex; min-height: 1.5rem; margin-bottom: 0.125rem; align-items: center}
.filters__form-check .input{float: left; margin-left: -1.5em}
.filters input{border: solid 1px #707070; background: #FFFFFF 0 0 no-repeat padding-box; height: 34px; width: 34px; min-width: 34px; font-size: 14px; border-radius: 4px; vertical-align: top; background-size: contain; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact;}
.filters select{color: #707070; height: 34px; border: 1px solid #707070; font-size: 14px; border-radius: 4px}
.filters__form-select:focus{outline: none}
.filters input:active{filter: brightness(90%)}
.filters input:focus{border: solid 1px #707070; outline: 0}
.filters input:checked{background-color: #fff}
.filters input:checked[type=checkbox]{background-image: url("data:image/svg+xml,%3Csvg fill='none' width='800px' height='800px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline id='primary' points='5 12 10 17 19 8' style='fill: none; stroke: %2387B947; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'/%3E%3C/svg%3E")}
.filters input:disabled{pointer-events: none; filter: none; opacity: 0.5}
.filters__form-select{display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="%23707070" d="M8 0h1v16h-1v-16z"/></svg>'), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234081B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1.75rem center, right 0.75rem center; background-size: 1.25rem, 16px 16px; border: 1px solid #ced4da; border-radius: 0.25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none}

/*
* OCRB Template
 */
@media only screen and (max-width: 767px){body.bjf-site .filter__swipe.filter__container{width: 100%; margin-left: 0}
    body.bjf-site .filter__swipe .filter__option:first-child{margin-left: 0}}
/* - */
@media (max-width: 767px){.filters__flex{-ms-flex: 0 0 45%; flex: 0 0 100%; max-width: 100%}
    .filters__flex_payment{margin: 10px auto 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%}
    .filters__form-check{justify-content: space-between}
    .filters__base_row{margin-right: 0; margin-left: 0}
    .filter__checkbox{padding: 15px}
    .filter__checkbox label{padding: 10px 0 10px 0; width: 100%}}
@media (min-width: 768px){.filter__checkbox label{font-size: 14px; margin-right: 15px}
    .filters__flex, .filters__flex_payment{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%}
    .filters__form-check{justify-content: left}
    .filters__flex_payment{margin-right: 20px}}
@media (min-width: 992px){.filters__flex, .filters__flex_payment{-ms-flex: 0 0 auto; flex: 0 0 max-content; max-width: max-content}
    .filters__flex{margin-right: 20px}}
/*******************************************/
/***            Filters end           ******/
/*******************************************/