@import "variables";
.b-listing-filters {
	.b-listing-filters-header {
		margin: 0;
		padding: 0;
		list-style: none;
		@media (max-width: 767px){
			display: none;
		}
		li {
			position: relative;
			display: inline-block;
			vertical-align: top;
			a, span {
				background: $color_gray_05;
				border: none;
				display: block;
				padding: 12px 32px;
				font-size: 16px;
				color: $color_dark;
				line-height: normal;
				@include border-radius(3px 3px 0 0);
			}
			.imark {
				//background: $color_green;
				background: url(../images/icons/newLabel.png) no-repeat 0 0 / 100% 100%;
				position: absolute; top: 0; right: 0;
				display: block;
				width: 48px;
				height: 48px;
				margin: -24px -24px 0 0;
			}
			&.active {
				a, span {
					background: $color_light_blue;
					color: $color_blue;
				}
			}
		}
	}
	.b-listing-filters-body {
		background: $color_light_blue;
		position: relative;
		padding: 24px 24px 16px;
		@media (max-width: 767px){
			position: fixed; top: 0; right: 0; bottom: 0; left: 0;
			overflow-y: auto;
			z-index: 9999;
			padding-top: 48px;
			display: none;
			& > .closer {
				background: $color_wildblue;
				top: 16px;
				right: 24px;
				width: 24px;
				height: 24px;
				opacity: 1;
				@include border-radius(3px);
				&:before, &:after {
					background: $color_white;
					width: 75%;
				}
				&:hover {
					background: $color_red;
				}
			}
			.b-listing-filters-form {
				padding-bottom: 80px;
			}
		}
		@media (min-width: 768px){
			margin-bottom: 40px;
			& > .closer { display: none; }
			.item-hide { display: none; }
		}

		.b-listing-filters-shorter {
			@media (max-width: 767px){ display: none; }
			a { border-color: transparent; }
			.a { display: inline; }
			.b { display: none; }
		}

		.b-listing-filters-footer {
			//background: inherit;
			background: -moz-linear-gradient(top, rgba(217,233,247,0) 0%, rgba(217,233,247,1) 35%, rgba(217,233,247,1) 100%);
			background: -webkit-linear-gradient(top, rgba(217,233,247,0) 0%,rgba(217,233,247,1) 35%,rgba(217,233,247,1) 100%);
			background: linear-gradient(to bottom, rgba(217,233,247,0) 0%,rgba(217,233,247,1) 35%,rgba(217,233,247,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d9e9f7', endColorstr='#d9e9f7',GradientType=0 );

			position: fixed; right: 24px; bottom: 0; left: 0;
			z-index: 55;
			padding: 16px;
			text-align: center;
			@media (min-width: 768px){ display: none; }
		}

		//forms
		.form-group {
			.form-label {
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 12px;
				//color: $color_blue;
				opacity: 0.75;
				&:first-letter {
					text-transform: uppercase;
				}
			}
			.field {
				&.active {
					.form-control {
						background: $color_body;
					}
				}
			}
		}
	}

	//mod
	&.active {
		.b-listing-filters-body {
			//background: darken($color_light_blue, 5%);
		}
	}
	&.wide {
		.b-listing-filters-body {
			@media (min-width: 768px){
				.item-hide { display: block !important; }
			}
		}
		.b-listing-filters-shorter {
			.a { display: none; }
			.b { display: inline; }
		}
	}
	.body-listing-filters & {
		.b-listing-filters-body {
			@media (max-width: 767px){
				display: block;
			}
		}
	}
}

.b-listing-filters-mobile {
	position: fixed; bottom: 20px; left: 20px; right: 20px;
	z-index: 888;
	text-align: center;
	@media (min-width: 768px){ display: none; }
	.button {
		position: relative;
		display: inline-block;
		font-size: 16px;
		line-height: 24px;
		color: $color_white;
		@include border-radius(50px);
		a {
			display: block;
			padding: 8px 24px 10px;
			border: none;
			color: inherit;
			text-decoration: none;
			.fa {
				margin-right: 6px;
			}
		}
		a.b-listing-filters-reset {
			background: $color_white;
			position: absolute; top: 50%; right: 8px;
			display: block; width: 24px; height: 24px;
			margin-top: -12px;
			padding: 0;
			@include border-radius(50%);
			&:before, &:after {
				content: '';
				background: #00a331;
				position: absolute; top: 50%; left: 50%;
				display: block; width: 65%; height: 2px;
			}
			&:before {
				@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
			}
			&:after {
				@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
			}
			i {
				background: $color_white;
				position: absolute; top: 0; bottom: 0; left: -12px;
				display: block; width: 1px;
			}
		}
		&.a {
			background: $color_blue;
		}
		&.b {
			background: #00a331;
			padding-right: 32px;
			display: none;
		}
	}
	&.active {
		.button {
			&.a { display: none; }
			&.b { display: inline-block; }
		}
	}
}

.body-listing-filters {
	@media (max-width: 767px){
		overflow: hidden;
	}
}

.b-listing-nothing {
	display: none;
	margin-bottom: 24px;
}