.item-map-section{
	position: relative;
	display: flex;
	height: 100vh;
	min-height: 480px;
	align-items: strech;
	background-color: $grey200;

	.list-items-col{
		// flex: 1 1 auto;
		position: relative;
		display: flex;
		flex-direction: column;
		min-width: 240px;
		width: 400px;
		background-color: #fff;
		box-shadow: 1px 0 3px 0 rgba(#000,.08);
		overflow: hidden;
		// width: 0;
	}
	.resize-drag-col{
		flex: 0 0 auto;
		position: relative;
		min-width: 0;
		width: 4px;
		background-color: $grey200;
		cursor: e-resize;
		.helped-resize-btn{
			display: none;
			position: absolute;
			top: 50%; right: 0;
			margin-top: -28px;
			line-height: 56px;
			width: 28px;
			height: 56px;
			padding-left: 2px;
			font-size: 18px;
			text-align: center;
			color: $grey500;
			background-color: $grey200;
			border-radius: 28px 0 0 28px;
			&.active{
				display: block;
			}
		}
	}
	.map-items-col{
		flex: 1 1 auto;
		min-width: 0;
		// background-color: red;
	}

	.list-item-action--show{
		position: absolute;
		top: 8px; left: 8px;
		z-index: 950;
		display: block;
		line-height: 28px;
		width: 40px;
		text-align: center;
		color: material-color('blue','500');
		background-color: #fff;
		border: 1px solid #eaeaea;
		@include translateX(-56px);
		@include transition(transform .3s ease-in-out);
		i{
			position: relative;
			display: inline-block;
			vertical-align: top;
			font-size: 20px;
			line-height: 38px;
		}
		&:focus, &:active{
			outline: none;
		}
		&:active{
			
			background-color: $grey50;
		}
		&.active{
			@include translateX(0);
		}
	}
	.list-items__header{
		position: relative;
		min-height: 0;
		flex: 0 0 auto;
		.header-wrapper{
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e0e0e0;
			.header-action-btn{
				display: block;
				line-height: 56px;
				width: 56px;
				text-align: center;
				color: material-color('blue','500');
				// background-color: $grey100;
				i{
					position: relative;
					// top: 3px;
					display: inline-block;
					vertical-align: top;
					font-size: 24px;
					line-height: 56px;
				}
				&:active{
					background-color: $grey50;
				}
			}
			.header-title{
				margin: 0;
				padding: 0;
				line-height: 24px;
				font-size: 18px;
			}
		}
		.header-search{
			display: none;
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 1px;
			z-index: 100;
			padding: 11px 16px;
			background-color: $grey100;
			overflow: hidden;
			&.active{
				display: block;
			}
			.form-group{
				position: relative;
				margin: 0;
			}
			.search-input{
				padding-left: 12px;
				padding-right: 50px;
				border-color: #eaeaea;
			}
			.search-submit{
				display: block;
				position: absolute;
				top: 0; right: 0;
				width: 38px; 
				line-height: 34px;
				font-size: 24px;
				text-align: center;
				color: $grey400;
				background-color: transparent;
				border: 0;
				@include transition(color .2s ease-in-out);
				&:hover{
					color: $blue500;
				}
			}
			.search-dismiss{
				display: block;
				padding: 4px;
				line-height: 24px;
				font-size: 18px;
				color: $red400;
				@include transition(color .2s ease-in-out);
				&:hover{
					color: $red600;
				}
			}
		}
	}
	.list-items__main{
		min-height: 0;
		flex: 1 1 auto;
		&.list--scrollable{
			overflow: auto;
			@include scrollbar(6px, $grey500, $grey300, 0);
		}		
		.list-items{
			//
		}
		.single-item{
			display: flex;
			align-items: center;
			padding: 16px;
			border-bottom: 1px solid #eee;
			@include transition(background-color, .2s ease-in-out);
			a{
				&:hover, &:active, &:focus{
					text-decoration: none;
				}
			}
			.item__data-wrapper{
				display: block;
				min-height: 96px;
				.item__title{
					margin: 0 0 4px;
					line-height: 20px;
					font-size: 16px;
					font-weight: 500;
					color: $grey900;
				}
				.item__type{
					margin: 4px 0 0;
					line-height: 20px;
					font-size: 14px;
					font-weight: 500;
					color: $color-primary;
				}
				.item__ratings{
					line-height: 18px;
					.item__rating__points{
						display: inline-block;
						vertical-align: top;
						margin: 0 4px 0 0;
						line-height: 18px;
						font-size: 12px;
						font-weight: 500;
						color: $color-primary;
					}
					.item__ratings__stars{
						display: inline-block;
						vertical-align: top;
						line-height: 18px;
						font-size: 0;
						color: $color-primary;
						i{
							display: inline-block;
							vertical-align: top;
							line-height: 18px;
							font-size: 14px;
						}
					}
					.item__rating__votes{
						display: inline-block;
						vertical-align: top;
						margin: 0 0 0 4px;
						line-height: 18px;
						font-size: 12px;
						color: $grey600;
					}
				}
				.item__address{
					margin: 4px 0 0;
					line-height: 19px;
					font-size: 13px;
					color: $grey600;
				}
				.item__price{
					margin: 10px 0 0;
					span{
						display: inline-block;
						vertical-align: top;
						line-height: 22px;
					}
					.item__price__main{
						font-size: 16px;
						font-weight: 500;
						color: $color-primary;
					}
					.item__price__currency{
						margin: 0 0 0 2px;
						font-size: 12px;
						font-weight: 500;
						color: $color-primary;
						line-height: 16px;
					}
					.item__price__unit{
						margin: 0 0 0 4px;
						font-size: 13px;
						color: $grey500;
					}
				}
			}
			.item__actions-wrapper{
				padding: 0 0 0 8px;
				position: relative;
				right: -8px;
				.item__single-action{
					display: inline-block;
					vertical-align: top;
					padding: 12px 8px;
					text-align: center;
					color: material-color('blue','500');
					@media (min-width: $screen-sm-min){
						padding: 16px 12px;
					}
					.action-icon{
						display: block;
						line-height: 28px;
						font-size: 24px;
					}
					.action-label{
						display: block;
						margin: 4px 0 0;
						padding: 0 8px;
						line-height: 18px;
						font-size: 12px;
						font-weight: 500;
					}
					&.active{
						color: material-color('blue','800');
					}
				}
			}
			&:hover{
				background-color: $grey50;
			}
			&.active{
				background-color: material-color('blue','50');
			}
		}
	}
	.list-items__filter{
		min-height: 0;
		flex: 0 0 auto;
		border-top: 1px solid #e0e0e0;
		.filter__input-content{
			max-height: 0;
			overflow: hidden;
			// border-bottom: 1px solid #e0e0e0;
			@include scrollbar(6px, $grey500, $grey300, 0);
			@include transition(max-height .2s ease-in-out);
			&.active{
				max-height: 320px;
				overflow: auto;
				border-bottom: 1px solid #e0e0e0;
			}
			.content-inner{
				padding: 16px;
			}
			.form-group{
				&:last-child{
					margin: 0;
				}
			}
			label{
				display: block;
			}
			.select2{
				width: 100% !important;
			}
			.list-room-options{
				font-size: 0;
				.single-room-option{
					display: inline-block;
					vertical-align: top;
					margin: 0 12px 0 0;
					width: calc(50% - 12px);
					max-width: 200px;
				}
			}
		}
		.filter__label-content{
			display: flex;
			align-items: center;
			padding: 16px;
			.filter__current-options{
				line-height: 20px;
				font-size: 14px;
			}
			.filter__toggle-input{
				line-height: 20px;
				font-size: 14px;
				font-weight: 500;
				color: material-color('blue','500');
				&:hover, &:active, &:focus{
					text-decoration: none;
				}
				&:hover{
					color: material-color('blue','700');
				}
			}
		}
	}

	.list-items-col{
		&.sm-size,
		&.md-size,
		&.lg-size{
			.list-items{
				display: flex;
				flex-wrap: wrap;
				align-items: stretch;
	    	justify-content: flex-start;
	    	.single-item{
	    		border-right: 1px solid #eee;
	    	}
	    }
		}
		&.sm-size{
			.list-items{
				.single-item{
					width: 50%;
					&:nth-child(2n){
						border-right: 0;
					}
				}
			}
		}
		&.md-size{
			.list-items{
				.single-item{
					width: 33.33%;
					&:nth-child(3n){
						border-right: 0;
					}
				}
			}
		}
		&.lg-size{
			.list-items{
				.single-item{
					width: 25%;
					&:nth-child(4n){
						border-right: 0;
					}
				}
			}
		}
	}

	@media (max-width: 768px){
		.list-items-col{
			width: 320px;
		}
	}
	// @media (max-width: 560px){
	// 	.list-items-col{
	// 		width: 100% !important;
	// 		max-width: none;
	// 	}
	// 	.resize-drag-col{
	// 		display: none;
	// 	}
	// 	.map-items-col{
	// 		display: none;
	// 	}
	// }
		
}