.left-filter{width:20rem;}
.left-filter-inner{position:sticky;top:4.2rem;}
.left-filter-inner .offcanvas-top{height:4rem;}
.left-filter-inner .offcanvas-body{max-height:calc(100vh - 8.2rem);overflow:auto;scrollbar-width:thin;}
.left-filter-inner .offcanvas-body::-webkit-scrollbar{width:0.5rem;}
.left-filter-inner .offcanvas-body::-webkit-scrollbar-track{background:#f1f1f1;}
.left-filter-inner .offcanvas-body::-webkit-scrollbar-thumb{background:#ccc;transition:all 0.3s;}
.left-filter-inner .offcanvas-body::-webkit-scrollbar-thumb:hover{background:#aaa;}
.left-filter-inner .filter-apply{border-radius:2rem;padding:0.3rem 0.7rem;background:var(--first_color);color:var(--light_color);cursor:pointer;font-size:0.9rem;font-weight:600;}
.filter-options{--bs-btn-active-bg:var(--first_color);--bs-btn-active-color:var(--light_color);}
.filter-options .btn{box-shadow:0.2rem 0.2rem 0.3rem rgb(0 0 0 / 20%), 0.1rem 0.1rem 0.3rem rgb(0 0 0 / 10%) inset, -0.1rem -0.1rem 0.2rem rgb(0 0 0 / 10%) inset;}
.filter-options .btn-theme{background-color:transparent;color:#666;}
.filter-options .btn-check:focus+.btn{box-shadow:0.2rem 0.2rem 0.3rem rgb(0 0 0 / 20%), 0.1rem 0.1rem 0.3rem rgb(0 0 0 / 10%) inset, -0.1rem -0.1rem 0.2rem rgb(0 0 0 / 10%) inset;}


.right-bonds-box{width:calc(100% - 20rem);}
.right-bonds-box .sorting-select{width:17rem;}
.right-bonds-box .filter-toggle{border-radius:2rem;padding:0.5rem 1rem;background:var(--first_color);color:var(--light_color);cursor:pointer;}
.right-bonds-box .sorting-select label{width:fit-content;}
.right-bonds-box .sorting-select .form-select{width:12rem;}
.right-bonds-box .bonds-box-inner{display:grid;grid-template-columns:33.3% 33.3% 33.3%; justify-content:space-between;}

@media (max-width: 1199.98px){
    .right-bonds-box .bonds-box-inner{grid-template-columns:50% 50%;}    
}

@media (max-width: 991.98px)
{
    .left-filter.offcanvas{border:none;}
    .left-filter-inner{position:static;display:flex;flex-direction:column;}
    .left-filter-inner .offcanvas-body{max-height:calc(100vh - 7rem);}
    .right-bonds-box{width:100%;}
}

@media (max-width: 575.98px) 
{
    .right-bonds-box .bonds-box-inner{grid-template-columns:100%;}
}