// property list

.property-list{
	&.property-list--has-map-desktop{
		@media (min-width: $screen-md-min){

		}
		.property-list__list-by-card-section{
			@media (min-width: $screen-md-min){
				width: 60%;
				float: left;
				height: calc(100vh - 60px - 26px);
				// background-color: #fff;
				overflow-y: auto;
			}
		}
		.property-list__list-on-map-section{
			// display: none;
			@media (max-width: $screen-sm-max){
				width: 100%;
				height: 320px;
				height: 100vh;
			}
			@media (min-width: $screen-md-min){
				display: block;
				width: 40%;
				float: left;
				height: calc(100vh - 60px - 26px);
				// background-color: $grey400;
			}
		}
	}
	.property-list__search{
		padding: 12px 12px;
		background-color: #fff;
		border-bottom: $border;
		@media (min-width: $screen-sm-min){
			padding: 12px 24px;
		}
		.form-group{
			display: flex;
			align-items: center;
		}
		.search-label{
			display: block;
			line-height: 20px;
			font-size: 13px;
			font-weight: 500;
			color: $grey800;
			@media (min-width: $screen-sm-min){
				margin: 0 12px 0 0;
			}
		}
		.serach-input{
			border-color: transparent;
		}
		.search-submit{
			margin: 0 -4px 0 12px;
			padding: 0;
			line-height: 36px;
			font-size: 28px;
			color: $color-primary_text;
			background-color: transparent;
			border-color: transparent;
		}
	}
	.property-list__filter{
		padding: 24px 12px;
		background-color: #fff;
		border-bottom: $border;
		@media (min-width: $screen-sm-min){
			padding: 24px;
		}
		.more-pr{
			@media (min-width: $screen-sm-min){
				padding-right: 30px;
			}
		}
		.more-pl{
			@media (min-width: $screen-sm-min){
				padding-left: 30px;
			}
		}
		.more-mt-on-xs{
			@media (max-width: $screen-xs-max){
				margin-top: 12px;
			}
		}
		.property-list__filter__show-content{
			padding: 0;
			.row{
				margin-bottom: 12px;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		.property-list__filter--collapsed-content{
			margin: 12px 0 0;
			padding: 12px 0 0;
			border-top: 1px solid #eee;
		}
		.filter-label-wrap{
			height: 34px;
			display: flex;
			align-items: center;
			label{
				margin: 0;
				line-height: 16px;
			}
		}
		.filter-input-wrap{
			height: 34px;
			.slider{
				&.slider-horizontal{
					width: calc(100% - 12px);
				}
			}
		}

		.property-list__filter__action{
			margin: 12px 0 0;
			padding: 12px 0 0;
			border-top: 1px solid #eee;
		}
	}
	.property-list__toggle-view{
		padding: 12px 0;
		margin: 0 12px;
		border-bottom: $border;
		@media (min-width: $screen-sm-min){
			margin: 0 24px;
		}
		ul{
			margin: 0;
			padding: 0;
			li{
				display: table-cell;
				width: 1%;
				a{
					display: block;
					text-align: center;
					padding: 9px 8px 7px;
					line-height: 22px;
					font-size: 14px;
					font-weight: 500;
					color: $grey700;
					border-radius: 2px;
					&:hover, &:focus, &:active{
						text-decoration: none;
					}
					&.active{
						color: $grey900;
						background-color: material-color("orange", '100');
					}
				}
			}
		}
	}
}

#properties_viewByList,
#properties__viewByMap{
	@media (max-width: $screen-sm-max){
		display: none;
		&.mobile-view-active{
			display: block;
		}
	}
}








#stickySidebar_container{
	padding-bottom: 180px;
}
.detail-property__right-col{
	will-change: min-height;
	@media (min-width: $screen-md-min){
		width: 25%;
		float: right;
	}
}







.sticky-sidebar__inner{
	transform: translate(0, 0); /* For browsers don't support translate3d. */
  transform: translate3d(0, 0, 0);
  will-change: position, transform;
}
.detail-property__left-col{
	@media (min-width: $screen-md-min){
		width: 75%;
		float: right;
		padding-right: 12px;
	}
}

.detail-property{
	// padding: 0 0 48px;
	.detail-property__photos{
		position: relative;
		.detail-property__photos__actions{
			position: absolute;
			top: 12px; right: 12px;
			.single-action{
				&.active{
					color: #fff;
					background-color: $color-primary;
					border-color: $color-primary;
				}
			}
			.tooltip-inner{
				white-space: nowrap;
			}
		}
		.detail-property__photos__albums{
			position: absolute;
			bottom: 44px;
			left: 50%;
			@include translateX(-50%);
			.view-property-album{
				display: block;
				padding: 8px 20px;
				line-height: 21px;
				font-size: 15px;
				font-weight: 500;;
				color: #fff;
				border: 2px solid rgba(#000,.7);
				background-color: rgba(#000,.6);
				border-radius: 2px;
				z-index: 100;
				&:hover, &:active, &:focus{
					text-decoration: none;
				}
				&:hover{
					border: 2px solid rgba(#000,.9);
					background-color: rgba(#000,.8);
				}
				&:active{
					border: 2px solid rgba(#000,1);
					background-color: rgba(#000,1);
				}
			}
		}
	}
	.detail-property__header{
		padding: 12px 0;
		@media (min-width: $screen-sm-min){
			padding: 16px 0;
		}
		@media (min-width: $screen-md-min){
			padding: 20px 0;
		}
		&.has-bottom-info{
			padding: 12px 0 0;
			@media (min-width: $screen-sm-min){
				padding: 16px 0 0;
			}
			@media (min-width: $screen-md-min){
				padding: 20px 0 0;
			}
		}
		.detail-property__header__title{
			margin: 0;
			line-height: 1.2;
			font-size: 18px;
			font-weight: 700;
			color: $grey900;
			@media (min-width: $screen-sm-min){
				font-size: 24px;
			}
			@media (min-width: $screen-md-min){
				font-size: 28px;
			}
		}
		.detail-property__header__subtitle{
			position: relative;
			margin: 8px 0 0;
			padding: 0 0 0 24px;
			line-height: 24px;
			font-size: 13px;
			color: $grey800;
			@media (min-width: $screen-sm-min){
				font-size: 14px;
			}
			@media (min-width: $screen-md-min){
				font-size: 15px;
			}
			i{
				display: block;
				position: absolute;
				top: -1px; left: 0;
				font-size: 22px;
				line-height: 28px;
				color: material-color('deep-orange','400');
			}
		}
		.detail-property__header__infos{
			padding: 8px 0;
			margin: 12px 0 0;
			@media (min-width: $screen-sm-min){
				padding: 0;
				margin: 16px 0 0;
			}
			@media (min-width: $screen-md-min){
				margin: 20px 8px 0 0;
			}
			border-top: $border;
			.single-info{
				padding: 6px 0px;
				@media (min-width: $screen-sm-min){
					display: table-cell;
					width: 1%;					
					padding: 10px 4px;
					text-align: center;
					border-right: $border;
					&:first-child{
						border-left: $border;
					}
				}
				.single-info__label{
					color: $grey800;
					@media (max-width: $screen-xs-max){
						float: left;
					}
					span{
						display: inline-block;
						vertical-align: top;
						line-height: 22px;
					}
					.label-icon{
						font-size: 16px;
						width: 24px;
					}
					.label-text{
						font-size: 14px;
					}
				}
				.single-info__data{
					@media (max-width: $screen-xs-max){
						margin: 0;
						float: right;
					}
					margin: 7px 0 0;
					line-height: 20px;
					font-size: 16px;
					font-weight: 500;
					color: $color-primary_text;
				}
			}
			&.has-4-items{
				.single-info{
					@media (min-width: $screen-sm-min){
						width: 25%;
						display: block;
						float: left;
					}
				}
			}
		}
	}


	.detail-property__menubar{
		z-index: 1000;
		ul{
			text-align: center;
			font-size: 0;
			padding: 0;
			margin: 0;
			@media (max-width: $screen-xs-max){
				overflow-x: auto;
				white-space: nowrap;
			}
			li{
				display: inline-block;
				vertical-align: top;
				@media (min-width: $screen-sm-min){
					display: table-cell;
					width: 1%;
				}
				a{
					display: block;
					padding: 8px 16px;
					line-height: 22px;
					font-size: 14px;
					font-weight: 500;
					border-right: $border;
					color: $grey900;
					@media (min-width: $screen-sm-min){
						padding: 8px;
					}
					&:hover, &:active, &:focus{
						text-decoration: none;;
					}
					&:hover{
						background-color: $grey100;
					}
					&.active{
						color: $color-primary_text;
					}
				}
				&:last-child{
					a{
						border-right: 0;
					}
				}
			}
			&.has-4-items{
				li{
					@media (min-width: $screen-sm-min){
						width: 25%;
						display: block;
						float: left;
					}
				}
			}
		}
	}
	.detail-property__description{
		padding: 12px;
		.descr-title{
			margin: 0 0 12px;
		}
		.descr__features-list{
			list-style: none;
			margin: 8px 0;
			padding: 0;
			li{
				display: block;
				line-height: 18px;
				margin: 8px 0;
				padding: 0;
				@media (min-width: $screen-sm-min){
					width: 33%;
					float: left;
				}
				img{
					display: inline-block;
					vertical-align: top;
					margin: 2px 5px 0 0;
				}
				span{
					display: inline-block;
					vertical-align: top;
					line-height: 18px;
				}
			}
		}
	}
	.single-room__data-tables{
		margin: 0 0 16px;
		table{
			margin: 0;
			& + table{
				margin-top: -1px;
			}
		}
	}
	.descr__table-list{
		position: relative;
		margin: 0;
		thead{
			tr{
				th{
					background-color: $grey50;
					text-align: center;
					@media (max-width: $screen-xs-max){
						font-size: 13px;
						line-height: 18px;
					}
				}
			}
		}
		tbody{
			tr{
				td{
					text-align: center;
					@media (max-width: $screen-xs-max){
						font-size: 13px;
						line-height: 18px;
					}
				}
			}
		}
		&.table-vertical-on-xs{
			@media (max-width: $screen-xs-max){
				@include clearfix();
				thead, tbody{
					display: block;
					float: left;
					tr{
						display: block;
						td, th{
							display: block;
							white-space: nowrap;
							overflow: auto;
							overflow: overlay;
							border: none;
							border-top: 1px solid #eee;
							&:first-child{
								border-top: 0;
							}
						}
					}
				}
				thead{
					width: 45%;
					tr{
						th{
							text-align: left;
						}
					}
				}
				tbody{
					width: 55%;
					tr{
						td{
							text-align: right;
						}
					}
				}
			}
		}
		.single-property-feature{
			display: inline-block;
			vertical-align: top;
			line-height: 18px;
			margin: 8px 24px 8px 0;
			padding: 0;
			img{
				display: inline-block;
				vertical-align: top;
				margin: 2px 5px 0 0;
			}
			span{
				display: inline-block;
				vertical-align: top;
				line-height: 18px;
			}
		}
	}
	.detail-property__owner{
		margin-bottom: 12px;
		padding: 12px;
		@media (max-width: $screen-sm-max){
			display: flex;
			align-items: center;
			text-align: left;
		}
		@media (min-width: $screen-md-min){
			position: relative;
			top: -180px;
			padding: 24px;
		}
		// text-align: center;
		.owner-avatar-wrap{
			@media (min-width: $screen-md-min){
				margin: 0 0 12px;
				text-align: center;
			}
			.owner-avatar{
				display: inline-block;
				border: 2px solid $color-primary;
				border-radius: 50%;
				background-color: $grey50;
				width: 124px;
				@media (min-width: $screen-md-min){
					width: 168px;
				}
				img{
					display: block;
					width: 120px;
					height: 120px;
					object-fit: cover;
					border-radius: 50%;
					@media (min-width: $screen-md-min){
						width: 160px;
						height: 160px;
					}
				}
			}
		}
		.owner-content{
			margin: 0 0 0 12px;
			@media (min-width: $screen-md-min){
				margin: 0 0 12px;
			}
			.owner-title{
				margin: 0 0 0;
				line-height: 26px;
				font-size: 20px;
				font-weight: 700;
				text-align: center;
			}
			.owner-info{
				.single-info{
					margin: 0 0 4px;
					&:last-child{
						margin: 0;
					}
					a{
						display: inline-block;
						vertical-align: top;
						&:hover{
							text-decoration: none;
						}
					}
					&:last-child{
						margin: 0;
					}
					.info-icon{
						display: inline-block;
						width: 26px;
						height: 26px;
						line-height: 26px;
						font-size: 16px;
						color: #fff;
						background-color: $grey800;
						border-radius: 50%;
						text-align: center;
						i{
							display: inline-block;
							line-height: 24px;
							padding-top: 2px;
						}
					}
					.info-data{
						line-height: 20px;
						font-size: 15px;
						font-weight: 500;
						color: $grey800;
					}
					&.single-info--verified{
						.info-icon{
							background-color: $color_primary;
						}
						.info-data{
							color: $color-primary_text;
						}
					}
				}
			}
		}
	}
	.detail-property__addresses{
		.detail-property__addresses__details__maps{
			@media (min-width: $screen-md-min){
				display: flex;
			}
			margin-top: 12px;
			border: $border;
			.row{
				margin-left: 0;
				margin-right: 0;
			}
			[class^="col"]{
				padding-left: 0;
				padding-right: 0;
			}
			.map_container{
				height: 320px;
				position: relative;
				.map-actions{
					position: absolute;
					top: -1px; right: -1px;
					.btn{
						height: 36px;
						line-height: 22px;
					}
					.map__location__toggle-btn{
						&.hide-map{
							i{
								&:before{
									content: "\f3cf";
								}
							}
						}
						&:focus{
							background-color: #fff;
						}
					}
				}
			}
			.map__locations{
				@media (max-width: $screen-sm-max){
					border-top: $border;
				}
				@media (min-width: $screen-md-min){
					border-left: $border;
					.ht-wrapper{
						width: 300px;
					}
				}
				.map__locations__types{
					.form-group{
						margin: 0;
					}
					.form-control{
						-webkit-appearance: none;
					  -moz-appearance: none;
					  appearance: none;   
						background-color: $grey100;
						border-color: transparent;
						border-radius: 0;
						border-bottom-color: $border-color;
						&.has-border-left{
							border-left-color: $border-color;
						}
					}
				}
				.map__locations__selected{
					height: 320px - 34px;
					overflow: auto;
					.locations__selected__list{
						.single-location{
							display: block;
							padding: 12px 12px;
							border-bottom: 1px solid #eee;
							&:last-child{
								border-bottom: 0;
							}
							.single-location__title{
								margin: 0;
								line-height: 20px;
								font-size: 15px;
								font-weight: 500;
								color: $grey900;
							}
							.single-location__subtitle{
								margin: 4px 0 0;
								line-height: 17px;
								font-size: 13px;
								color: $grey700;
							}
							&:hover, &:active, &:focus{
								text-decoration: none;
							}
							&:hover{
								background-color: $grey100;
							}
							&.active{
								background-color: $color-primary;
								.single-location__title{
									color: #fff;
								}
								.single-location__subtitle{
									color: $grey200;
								}
							}
						}
					}
				}
			}

		}
			
	}
	.detail-property__share{
		margin: 24px 0;
		text-align: center;
		@media (min-width: $screen-md-min){
			text-align: left;
		}
		.detail-property__share__wrap{
			@media (min-width: $screen-md-min){
				display: flex;
			}
			.share-label{
				line-height: 24px;
				font-size: 18px;
				font-weight: 500;
				margin: 0 0 12px 0;
				@media (min-width: $screen-md-min){
					margin: 0 24px 0 0;
				}
			}
		}
	}
	.detail-property__related{
		padding: 48px 0;
		.related-properies-title{
			margin: 0 0 24px;
			line-height: 28px;
			font-size: 22px;
			font-weight: 500;
			@media (max-width: $screen-xs-max){
				text-align: center;
			}
		}
	}


	.detail-property__content{
		&.has-sticky-navbar{
			& + *{
				margin-top: -180px;
			}
		}
	}
	.detail-property__header{
		&.has-bottom-info{
			& + .detail-property__content{
				#stickySidebar_container{
					padding-bottom: 270px;
				}
				&.has-sticky-navbar{
					& + *{
						margin-top: -270px;
					}
				}
				.detail-property__owner{
					@media (min-width: $screen-md-min){
						top: -270px;
					}
				}
			}
		}
	}
}

	
		

.detail-property__photos__carousel{
	position: relative;
	.carousel-indicators{
		cursor: pointer;
		font-size: 0;
		bottom: 12px;
		line-height: 12px;
		li{
			vertical-align: top;;
			margin-left: 1px;
			margin-right: 1px;
			border-radius: 0;
		}
	}
	.carousel-inner{
		.item{

		}
		.img-wrap{
			display: block;
			height: 240px;
			@media (min-width: $screen-xs-min){
				height: 240px;
			}
			@media (min-width: $screen-sm-min){
				height: 300px;
			}
			@media (min-width: $screen-md-min){
				height: 360px;
			}
			@media (min-width: $screen-lg-min){
				height: 420px;
			}
			@media (min-width: 1440px){
				height: 480px;
			}
			background-color: $grey300;
			img{
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.ht-carousel-control{
		display: block;
		position: absolute;
		top: 50%;
		margin-top: -30px;
		padding: 0 24px;
		line-height: 60px;
		font-size: 48px;
		color: $grey400;
		&.left{
			left: 0;
		}
		&.right{
			right: 0;
		}
		&:hover{
			color: $color-primary;
		}
		&:active{
			color: $color-primary_text;
		}
	}
}

#stickyMenu_singleProperty{
	will-change: position, top, left;
}


// list page
.single-property-in-map{
	display: inline-block;
	position: relative;
	// &.show-card{
		
	// }
	.single-property-card{
		position: absolute;
		text-align: left;
		bottom: 100%; 
		left: 50%;
		width: 220px;
		@include translateX(-50%);
		margin: 0 0 12px;
		&:after{
			content: "";
			position: absolute;
			top: 100%;
			// margin-bottom: 4px;
			left: 50%;
			margin-left: -8px;
			width: 16px;
			height: 10px;
			background-image: url('../img/dropdown-arrow.png');
			background-repeat: no-repeat;
		}
		.property__intro{
			height: auto;
		}
		.property__prices{
			.single-price{
				line-height: 20px;
				span{
					display: inline-block;
					vertical-align: top;
					font-size: 15px;
				}
				.single-price__number{
					font-size: 14px;
				}
				.single-price__currency{
					line-height: 18px;
					font-size: 12px;
				}
			}
		}
		.property__title{
			line-height: 19px;
			font-size: 14px;
		}
		.property__address{
			margin: 3px 0 0;
			font-size: 12px;
			color: $grey700;
			@include multiLineEllipsis(17px, 2);
		}
		.property__infos{
			margin-top: 8px;
			padding-top: 8px;
			.single-info{
				.single-info__icon{
					img{
						width: 20px;
						height: 20px;
					}
				}
				.single-info__data{
					margin: 0 0 0 6px;
					font-size: 13px;
				}
			}
		}
	}
}
.property-room-in-map{
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	color: $color-primary_text;
	background-color: #fff;
	border: 2px solid $color-primary;
	border-radius: 50%;
	span{
		display: block;
		padding: 6px;
		line-height: 20px;
		font-weight: 500;
	}
	@include transition(background-color .1s ease-in-out);
	&:hover{
		background-color: material-color('grey','200');
	}
	&.active{
		color: #fff;
		background-color: $color-primary;
	}
}