/* filter-on-sidebar */
.filter-on-sidebar {width: 100%; border: 1px solid #5f7fa1; border-radius: 1rem; background-color: #fdfdfd;}
.filter-on-sidebar > form {width: 100%; margin: 0; padding: 0;}
.filter-on-sidebar > form > fieldset {width: 100%; margin: 0; padding: 0; border: none;}
.filter-on-sidebar-items {width: 100%; padding: 2.5rem 3rem 1rem 3rem;}
/* filter-on-sidebar - item */
.filter-on-sidebar-item {width: 100%; border-bottom: 2px solid #9bafc4; padding-bottom: 2.5rem; margin-bottom: 2.5rem;}
.filter-on-sidebar-item:last-child {border-bottom: none; padding-bottom: 0;}
/* filter-on-sidebar - item - h */
.filter-on-sidebar-item-h {width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 0; cursor: pointer;}
.filter-on-sidebar-item-h > span {font-size: 2.4rem; font-family: "Manrope", sans-serif; font-weight: 700; color: #192B41; line-height: 1;}
.filter-on-sidebar-item-h::after {content: ""; width:23px; height: 10px; display: inline-block; transform: rotate(-180deg);  
    background: url("../../icon/filter-item-name-arrow.svg") center/contain no-repeat; transition: all 0.3s ease 0s;}
.filter-on-sidebar-item.open .filter-on-sidebar-item-h {margin-bottom: 2.5rem;}
.filter-on-sidebar-item.open .filter-on-sidebar-item-h::after {transform: rotate(0deg); transition: all 0.3s ease 0s;}
/* filter-on-sidebar - item - content */
.filter-on-sidebar-item-content {width: 100%; opacity: 0; visibility: hidden; height: 0; transition: all 0.3s ease 0s;
    display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 1rem; column-gap: 1rem;}
.filter-on-sidebar-item.open .filter-on-sidebar-item-content {opacity: 1; visibility: visible; height: auto; }
/* filter-on-sidebar - item - content - filter_name */
.filter-on-sidebar-item-content .filter_name {font-size: 1.6rem; font-weight: 400; color: #192b41; background-color: transparent; 
    border-radius: 0.5rem; padding: 0.5rem 2rem 0.7rem 2rem; cursor: pointer; line-height: 1; transition: all 0.3s ease;} 
.filter-on-sidebar-item-content .filter_name:hover {color: #fff; background-color: #3a6fa7;}
.filter-on-sidebar-item-content .filter_name.active {color: #fff; background-color: #3a628c;}
.filter-on-sidebar-item-content .filter_name.active:hover {color: #fff; background-color: #3a6fa7;}