#filterContainer {
	border-top: 1px solid #ccc; padding: 10px 20px 0 10px;
}
#filterContainer #filterInputs {
	display: inline-block; width: 100%; margin-bottom: 30px;
}
#filterContainer #filterError {
	display: inline-block; font-size: 0.8em; color: #FA0546;
}
#filterContainer #filterInputs .inputDiv{
	float: left; width: 18%; height: 40px; margin-right: 5px; /* the height is less than the height of its total content  */
}
#filterContainer .filterOptionTitle {
	margin-bottom: 5px; margin-left: 5px; font-size: 0.8em;
}
#filterContainer #categoryContainer {
	width: 100%; height: 41px; font-size: 0.95em; border-radius: 5px;
}
.tooltipContainer {
	position: relative;
}
.filterFlagsCont {
	position: absolute; top: 30px; left: 6px;
}
.filterFlagsCont .flag {
	float: left; width: 5px; height: 15px; background-color: #00A627; border-radius: 3px 0px 0px 3px;
}
.filterFlagsCont .flag:nth-child(2) {
	background-color: white;
}
.filterFlagsCont .flag:nth-child(3){
	background-color: #00A627; border-radius: 0 3px 3px 0px;
}
#attentionTooltip {
	position: absolute; min-width: 80px; top: -12px; padding: 6px 8px; background-color: white; border: 1px solid #ccc; border-radius: 5px; box-shadow: 3px 3px 5px #bbb	;
}
#attentionTooltip p{
	font-size: 0.75em;
}
#attentionTooltip:after{
	content: " "; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 6px; border-style: solid; border-color: #666666 transparent transparent transparent;
}
#filterContainer #filterInputs input{
	width: 100%; height: 35px; background-color: white; font-size: 0.8em; border: 2px solid gray; border-radius: 10px;
	-webkit-appearance: none; -moz-appearance: none;
}
#filterContainer #filterInputs select {
	width: 100%; height: 35px; font-size: 0.8em; padding-left: 20px; background-color: white; border: 2px solid gray; cursor: pointer; border-radius: 10px; color: black;
}
#filterContainer #filterInputs .countryCities {
	padding: 0;
}
#filterContainer #filterInputs button{
	height: 35px; margin-top: 20px; font-size: 0.8em; font-weight: bold; padding: 0 20px; background-color: white; border: 2px solid gray; cursor: pointer; border-radius: 10px; color: black;
}
#filterContainer #filterInputs button:hover{
	background-color: #E3E3E3;
}
#filterContainer #filterInputs:after {
	content: ""; display: block; clear: both;
}
#filterContainer #filterLocation {
	float: left;
}
#filterContainer #filterLocationText {
	float: left; display: inline-block; margin: 0 5px 5px 0px;
}
#filterContainer #filterLocationText p {
	display: inline-block; font-size: 0.7em; padding: 4px 6px; background-color: #eee; color: black; border: 1px solid #bbb; border-radius: 10px; cursor: pointer;;
}
#filterContainer #filterLocationText p:hover {
	background-color: white;
}
#filterContainer:after{
	content: ""; display: block; clear: both;
}

/* for new filter */
@media only screen and (max-width: 750px){
	body #filterLocationsContainer .filterStateNameCont {
	width: 23.3%;
	}
}
@media only screen and (max-width: 420px){
	body #filterLocationsContainer .filterStateNameCont {
	width: 32.3%;
	}
}
#filterFormWrapper {
	width:100%; height:100vh; overflow:hidden; background-color: white; border-radius: 5px;;
}
.filterFormContainer {
	width:108%; height:90%; padding: 0px 5% 200px 3%; overflow:auto;
}
.filterFadedBackground {
	display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: black; opacity: 0.5;
}
#filterControlBarWrapper {
	width: 102%; position:sticky; margin-left: -2%; padding: 20px 0 20px 0; background-color: white; z-index: 1;
}
#filterControlBarContainer {
	width:100%; display:flex; justify-content:space-between;
}
.filterControlBar {
	display: flex; flex-wrap: wrap; gap: 0.3rem; margin-right: 3%; background-color: white;
}

#filterControlBarContainer .filterControlBarButtonCont {}
#filterControlBarContainer button {
	margin-left: 5px; padding: 6px 12px; font-size:0.9em; background-color:white; cursor:pointer; color:#999; border:1px solid #00A627; border-radius:3px; color: #00A627;
}
#filterControlBarContainer #filterAcceptSubmitButton {
	background-color:#00A627; color:white; border:1px solid #00A627; font-weight: bolder;
}
#filterControlBarContainer #filterControlBarCloseIconContainer {
	display: none;
}
#filterControlBarContainer #filterControlBarCloseIcon {
	width:30px; height:30px; padding:5px; background-color:#f0f0f0; border-radius:3px; cursor:pointer;
}
#filterControlBarContainer .filterControlBarButtonCont button:hover, #filterControlBarContainer #filterAcceptSubmitButton:hover{
	background-color:white; color: #555; border: 1px solid #00A627;
}

#filterFormSectionContainer {
	width: 100%; display:flex; flex-wrap:wrap;
}
.filterSectionContainerWrapper {
	width: 49%; margin: 0.3% 0.5%; border: 1px solid #eee; border-radius: 5px;
}
.filterMultipleCheckBoxDataDiv {
	width:100%; height:260px; margin-bottom: 0px; overflow:hidden; padding:15px 10px 30px 10px;
}
.filterTopBox {
	display:flex; justify-content:space-between; cursor:pointer;
}
.filterCollapseIconBox {}
.filterCollapseIcon {
	width:12px; height:12px; cursor:pointer;
}

.filterSearchInputCont {
	display:flex; margin-top:12px;
}
.filterSearchInputTag {
	width:100%; height:40px; font-size:0.6em; font-weight:bolder; color:#999; padding-left:10px; border:1px solid #E1E1E1; border-radius:3px;
}

.filterFormInputInputWrapper {
	margin-top:5px; width:100%; height:64%; overflow:hidden;
}
.filterFormInputInputCont {
	width:110%; height:112%; overflow:auto; padding-bottom:50px;
}
.filterTagTitle {
	color: #444;
}
.filterTagDesc {
/*	margin-top:4px; font-size:0.7em; font-style:italic; color:gray;*/
}
.filterCheckBoxInputCont { 
	display:flex; margin-top:5px;
}
.filterCheckBoxInputParent {}
.filterTagLabelParent {}
.filterCheckBoxClass {
	width:15px; height:15px; margin-right:10px;
}
.filterCheckBoxLabel {
	font-size:0.8em; font-weight: bolder; color:#555;
}
.filterAttributeCountCont {
	height: 20px; margin-left: 5px;
}
.filterAttributeCountCont .filterAttributeCountPara {
	margin-top: 4px; font-size: 0.73em; color: #00A627;
}
.filterAttributeCountCont .filterAttributeCountValue {
}

.filterRangeMinMaxCont {
	margin-right:5px;
}
/*.filterRangeMinMaxTitle {
	position: absolute; top:3px; margin-left:5px; font-size:0.7em; color:gray;
}*/
.filterClearButtonCont {
	margin-top: 7px;
}
.filterClearButton {
	font-size: 0.65em; font-weight:bolder; text-transform: uppercase; letter-spacing: 0.07em; color: #FA0546; cursor: pointer;
}

#filterLocationsWrapper {
	display: none; position:fixed; top:0; left:0; width:100%; height:100vh; margin-top: 80px; overflow: hidden; background-color: white;
}
#filterLocationsContainer {
	align-items: flex-start; width: 100%; height: 100%; overflow: auto;
}
#filterLocationsControlBox {
	display: flex; width: 100%; background-color:white;
}
#filterCloseLocationsContainer {
	margin:10px;
}
#filterCloseLocationsContainer img {
	width:25px; height:25px; padding:5px; background-color:#f0f0f0; border-radius:3px; cursor:pointer;
}
#filterLocationsContainer .filterStateSection {
	width: 105%; display: flex; flex-wrap: wrap; padding: 10px;
}
#filterLocationsContainer .filterStateNameCont {
	display: flex; flex-wrap: wrap; width: 15.3%; margin: 10px 0.5%;
}
#filterLocationsContainer .filterStateName {
	color: #1259C2; font-weight: bolder; cursor: pointer;
}
#filterLocationsContainer .filterStateName:hover {
	color: gray;
}
#filterCitiesCollectionWrapper {
	display: none; position: fixed; top: 15%; left: 0; width: 100%; height: 70%;
}
#filterCitiesCollectionWrapper #filterCitiesWrapper {
	width: 80%; height: 100%; margin: 0 auto; padding: 20px; overflow: hidden; background-color: white; border-radius: 3px;
}
#filterCitiesWrapperTopBox {}
#filterCitiesWrapperTopBox img {
	width:25px; height:25px; padding:5px; background-color:#f0f0f0; border-radius:3px; cursor:pointer;
}
#filterCitiesCollectionWrapper #filterCitiesContParent {
	width: 100%; height: 100%; margin: 0 auto; padding: 20px; overflow: hidden;
}
#filterCitiesCollectionWrapper .filterCitiesCont {
	width: 110%; height: 100%; overflow: auto; padding-bottom: 5%;
}
#filterCitiesCollectionWrapper .filterCityBoxCont {
	display: flex; margin-top: 10px;
}
#filterCitiesCollectionWrapper .filterCityBox {
}
.filterCategoriesTagTitle {
	font-size: 1em; color: #00A627;
}
.filterCategoriesTagDesc {
	margin-top: 3px; font-size: 0.7em; font-style: italic;
}
.filterCategoriesTablesCont {
	display: block;
}
.filterCategoriesTablesCont .filterCategoriesTables {
	margin-bottom: 8px;
}
.filterCategoriesTablesCont .filterCategoryNameWrapper {
	display: flex;
}
.filterCategoriesTablesCont .filterCategoriesTables p {
	display: inline-block; color:#555; cursor: pointer; font-weight: bolder;
}
.filterCategoriesSearchInputCont {
	display: flex; border:1px solid #00A627; border-radius: 3px;
}
.filterCategoriesSearchInputCont button {
	height: 30px; font-size:0.7em; letter-spacing: 0.1em; background-color: white; font-weight:bolder; color:#00A627; padding-right: 10px; border: none; border-radius: 5px; cursor:pointer;
}
.filterCategoriesSearchInputCont img {
	width: 40px; height: 30px; padding: 10px; border-radius:3px; cursor:pointer;
}
#inlineFilterWrapper {
	background-color:white; padding: 15px; border-radius:5px;
}
#inlineFilterContainer {
	width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; gap: 0.4em; justify-content: space-between; background-color: white; border-radius: 5px;
}
#inlineFilterContainer .filterOption {
	display: flex; justify-content: center; gap:3%; flex: 1; height: 35px; padding: 8px 5px; background-color: #EDF2FA; border: 1px solid #D2DEF1; border-radius: 3px; cursor: pointer;
}
#inlineFilterContainer .filterOptionFilterCondPurpose {
	background-color: white; border: 2px solid #D2DEF1;
}
#inlineFilterContainer .filterOption .iconBox {}
#inlineFilterContainer .filterOption .text {}
#inlineFilterContainer .filterOption .text p {
	font-size: 0.8em; font-weight: bolder; margin-top: 1px; color: #555;
}
#inlineFilterContainer .filterOption .iconBox img {
	width: 13px; height: 13px;
}
#inlineFilterContainer .filterOption .iconBox2 img {
	float: right; width: 7px; height: 7px; margin-top: 5px;
}

#filterListSelectedAttributesCont {
	width: 100%; margin-top: 2px; background-color: white; border-radius: 5px;
}
#filterListSelectedAttributesCont .filterListSelectedAttributes{
	width: 100%; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 10px;
}
#filterListSelectedAttributesCont .outputWrapper{
	display: flex; flex-wrap: wrap; gap: 0.3rem; padding:2px; background-image: linear-gradient(#ddd, #eee); border-radius: 50px; cursor: pointer;
}
#filterListSelectedAttributesCont .outputContainer{
	display: flex; flex-wrap: wrap; gap: 0.3rem; height: 25px; padding: 5px 7px; background-image: linear-gradient(white, #ddd); border-radius: 50px;
}
#filterListSelectedAttributesCont .output p {
	font-size: 0.7em; font-weight: bolder; color: #444;
}
#filterListSelectedAttributesCont .removeFilterIcon img{
	float: right; width: 13px; height: 13px; border-radius: 50px;
}
#filterListSelectedAttributesCont .outputContainer:hover{
	background-color: #E2EAF6;
}
#filterListSelectedAttributesCont #FILTER_LIST_PRICE_CONTAINER {
	width: 100%;
}
#FILTER_LIST_PRICE_CONTAINER .filterFormInputInputCont {
	display: flex; flex-wrap: wrap; gap: 0em 0.25em; width:100%; padding:10px;
}
#FILTER_LIST_PRICE_CONTAINER .filterCheckBoxInputCont {
	padding: 6px; background-color:#F3FBF7; border:1px solid #F0F3FA; border-radius: 5px; cursor: pointer;
}
#FILTER_LIST_PRICE_CONTAINER .filterCheckBoxInputCont:hover {
	background-color: white;
}
#FILTER_LIST_PRICE_CONTAINER .filterCheckBoxInputParent {
	display: none;
}
#FILTER_LIST_PRICE_CONTAINER .filterCheckBoxLabel {
	font-weight: unset; cursor: pointer;
}