/**
 *
 *	Main CSS styles
 * 	Created with SASS
 *  
 * 
 */






/* Variables */
$qt-list-background: #efefef ;
$qt-button-background: #2196f3 ;
$qt-button-color: #FFF;
$qt-marker-color: #1976d2;

/* General styles */

.qtPlaces-container, .qtPlaces-container * {
	box-sizing: border-box;

}

.qtPlaces-container {
	.qtPlaces-list {
		.qtPlaces-entry {
			h4 {
				font-size: 18px;
				margin: 0;
				padding: 0 0 0 10px;
				/* $qt-button-background */
				border-left: 4px solid $qt-button-background;
				position: relative;
				z-index: 2;
				color: #FFFFFF !important;
			}
			p.listdetail {
				font-size: 0.8em;
				padding: 4px 0 0 0;
				margin-left: 0;
				position: relative;
				z-index: 2;
				color: #cdcdcd !important;
				i {
					opacity: 0.7;
					margin-right: 2px;
					font-size: 0.9em;
				}
			}

			.roundbtn {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				line-height: 50px;
				/* $qt-button-background */
				background: $qt-button-background;
				/* $qt-button-color */
				color: $qt-button-color;
				position: absolute; 
				right: 14px;
				top: 50%;
				margin-top: -25px;
				display: block;
				border: none;
				text-align: center;
				z-index: 3;
				i {
					font-size: 30px;
					line-height: 50px;
				}
			}
			&::after {
				display: block;
				content: " ";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: -moz-linear-gradient(45deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
				z-index: 1;
			}
			position: relative;
			padding: 20px 100px 15px  14px;
			margin: 1px 0 0 0;
			min-height: 100px;
			border-bottom: 1px dotted rgba(50,50,50,0.2);
			background-position: center;
			background-attachment: local;
			background-size: cover;
			background-repeat: no-repeat;

			
		}
		.qtPlaces-menuswitch {
			display: none;
		}
		display: block;
		float: left;
		width: 40%;
		height: 500px;
		/* $qt-list-background */
		background: $qt-list-background;
		overflow-y:  scroll;
		overflow-x: visible;

		/* Scrollbar
		==========================================================*/
		&::-webkit-scrollbar{width:10px;margin-right:-0px;z-index:99999999;  background-color: rgba(10,10,10,.1);}
		&::-webkit-scrollbar-track{width:10px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.1); background-color: rgba(0,0,0,.1);z-index:99999999;}
		&::-webkit-scrollbar-thumb {border-radius: 2px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
			 /* $qt-button-background */
			background-color: $qt-button-background;
		}
	}
	.qtPlaces-map {
		.qtPlaces-mapcontainer {
			height: 108%;
			background-color: #323232;
			.qtPlaces-mapmarker {
				.qtPlaces-marker-img {
					img {
						position: absolute;
						z-index: 3;
						width: 40px;
						height: 40px;
						border-radius: 50%;
						top: 5px;
						left: 5px;
						transition: all 0.2s;
						&.hidethumbnail {
							opacity: 0;
						}
					}
					i {
						width: 50px;
						height: 50px;
						line-height: 50px;
						font-size: 18px;
						text-align: center;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						color: #FFF;
						text-shadow: 2px 0 10px rgba(0,0,0,0.8);
					}
					&::after {
						display: block;
						content: " ";
						transform: rotate(45deg);
						bottom: -4px;
						left: 50%;
						margin-left: -6px;
						width:12px;
						height:12px;
						position: absolute;
						z-index: 1;
						/* $qt-marker-color */
						background: $qt-marker-color;
					}
					&::before {
						display: block;
						content: " ";
						width: 50px;
						height: 50px;
						border-radius: 50%;
						top: 0;
						left: 0;
						/* $qt-marker-color */
						background: $qt-marker-color;
						position: absolute;
						z-index: 0;
					}
					/* $qt-marker-color */
					background: $qt-marker-color;
					cursor: pointer;
					display: block;
					width: 50px;
					height: 50px;
					border-radius: 50%;
					position: relative;
					transition: all 0.4s ;
				}
				.markercontents {
					a {
						text-decoration: none;
					}
					p {
						margin: 0;
					}
					.det {
						i {
							margin-right: 10px;
						}
						font-size: 12px;
						 white-space: nowrap;
						 overflow: hidden;
						 text-overflow: ellipsis;
						 padding: 3px 0;
					}
					h5.locationname {
						margin-bottom: 4px;
						font-size: 18px;
						
					}
					.location {
						margin: 4px 0 15px;
						//border-bottom: 1px dotted rgba(10,10,10,0.4);
						padding-bottom: 10px;
						font-size: 12px;
						line-height: 1.3em;
						span {
							display: block;
							font-weight: bold;
							clear: both;
						}
					}

					display: none;
					position: absolute;
					background: #efefef;
					color: #343434;
					width: 250px;
					padding: 20px;
					transition: all 0.4s ;

					i.fa-close {
						position: absolute;
						top: 3px;
						right: 5px;
						font-size: 26px;
						cursor: pointer;
					}
				}
				&.active {
					.qtPlaces-marker-img {
						border-radius: 0;
						width: 250px;
						height: 130px;
						overflow: hidden;
						img, img.hidethumbnail {
							width: 100%;
							height: auto;
							border-radius: 0;
							left: 0;
							opacity: 1;
						}
					}
					.markercontents {
						display: block;
					}
					margin-left: -80px;
					margin-top: -120px;
					z-index: 100;
				}
				transition: margin 0.4s ease;
				z-index: 1;
				position: relative;
			}
		}
		position: relative;
		overflow: hidden;
		display: block;
		float: left;
		width: 60%;
		height: 500px;
		background: #dedede;
	}
	.qtPlaces-tags {
		.qtPlaces-tag {
			display: inline-block;
			font-size: 12px;
			line-height: 22px;
			height: 26px;
			margin: 0 5px 5px 0;
			font-size: 0.8em;
			background-color: rgba(10,10,10,0.4);
			color: #FFFFFF;
			border-radius: 12px;
			border: 3px solid #ffffff;
			padding: 0 10px 0 2px;
			transition:  background-color 0.5s;
			i {
				display: inline-block;
				border-radius: 50%;
				line-height: 19px;
				width: 17px;
				height: 17px;
				/* $qt-button-background */
				background: $qt-button-background;
				text-align: center;
				font-size: 12px;

			}
			&:hover {
				
				background-color: rgba(10,10,10,0.9);
			}
			&.active {
				opacity: 1;
				/* $qt-button-background */
				background-color: $qt-button-background;
			}
		}
		position: absolute;
		padding: 12px;
		bottom: 20px;
		left: 0;
		z-index: 2;
	}
	img[src*="http://maps.gstatic.com/mapfiles/google_white"] {
	    display: none; 
	}
	a {
		box-shadow: none !important;
		text-decoration: none !important;
		&:hover {
			box-shadow: none !important;
			text-decoration: none !important;
		}
	}
	.qtPlaces-menuswitch {
		display: none;
		i {
    		padding: 0;
		    line-height: 50px;
		    height: 50px;
		    position: relative;
		    top: 0;
    	}
	}
	&.dark .gm-style {
		background-color:#121212;
	}
	position: relative;
	display: block;
	width:100%;
	height: 500px;
	background: #efefef;
}




/* Alternative templates */

.qtPlaces-container.qtPlaces-template-2 {
	 .qtPlaces-list {
		width: 360px;
		position: absolute; 
		z-index: 20;
		left: -360px;
		top: 0;
		transition: left 0.4s ease;
	}
	.qtPlaces-map { 
		width: 100%;
		
		.qtPlaces-mapcontainer {
			left: 0;
			transition: left 0.4s ease;
		}
	}
	.qtPlaces-tags {
		
		bottom: 8px;
		right: 30px;
		left: auto;
	}
	.qtPlaces-menuswitch {
		display: block;
		position: absolute;
		background-color: rgba(0,0,0,0.8);
		color: #FFFFFF;
		width: 50px;
		height: 50px;
		line-height: 50px;
		left: 0;
		z-index: 10;
		text-align: center;
    	font-size: 28px;
    	top: 100px;
    	
    	margin: -25px 10px 10px 10px;
    	transition: left 0.4s ease;
    	cursor: pointer;

	}
	
	&.open {
		.qtPlaces-list {
			left: 0;
		}
		.qtPlaces-menuswitch {
			left: 360px;
		}
		.qtPlaces-mapcontainer { 
			left: 160px;
		}
	} 
	overflow: hidden;
}



.qtPlaces-container.qtPlaces-template-3 {
	 .qtPlaces-list {
		width: 360px;
		position: absolute; 
		z-index: 20;
		right: -360px;
		left: auto;
		top: 0;
		transition: right 0.4s ease;
	}
	.qtPlaces-map { 
		width: 100%;
		.qtPlaces-mapcontainer {
			right: 0;
			transition: right 0.4s ease;
		}
	}
	.qtPlaces-tags {
		top: 0;
		bottom: auto;
		left: 0;
	}
	.qtPlaces-menuswitch {
		display: block;
		position: absolute;
		background-color: rgba(0,0,0,0.8);
		color: #FFFFFF;
		width: 50px;
		height: 50px;
		line-height: 50px;
		left: auto;
		right: 0;
		z-index: 10;
		text-align: center;
    	font-size: 28px;
    	top: 100px;
    	margin: -25px 10px 10px 10px;
    	transition: right 0.4s ease;
    	cursor: pointer;
	}
	
	&.open {
		.qtPlaces-list {
			right: 0;
		}
		.qtPlaces-menuswitch {
			right: 360px;
		}
		.qtPlaces-mapcontainer { 
			right: 360px;
		}
	} 
	overflow: hidden;
}


.gm-style * {
	box-shadow: none !important;
}



.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
	bottom: 82px !important;
    right: 38px !important;
}



/* Responsive styles */

@media (max-width:1023px){
	.qtPlaces-container {
		.qtPlaces-list, .qtPlaces-map {
			width: 100%;
			float: none;
			clear: both;
			height: 150px;
		} 
		.qtPlaces-map {
			height: 300px;
		}


		height: 450px;
	}

	.qtPlaces-tags {
		display: none;
	}

	.qtPlaces-container.qtPlaces-template-1 {
		.qtPlaces-list {
			height: 180px !important;
		}
		.qtPlaces-map {
			height: 200px !important;
			.qtPlaces-mapcontainer {
				height: 112%;
			}
		}
		height: 380px !important;
	}

	.qtPlaces-container.qtPlaces-template-2 {
		 .qtPlaces-list {
			width: 80%;
			left: -80%;
		}
		.qtPlaces-menuswitch {
			margin: 0;
		}

		.qtPlaces-list, .qtPlaces-map {
			height: 100%;
		} 
		
		&.open {
			.qtPlaces-list {
				left: 0;
			}
			.qtPlaces-menuswitch {
				left: 80%;
			}
			.qtPlaces-mapcontainer { 
				left: 60%;
			}
		} 
		overflow: hidden;
	}



	.qtPlaces-container.qtPlaces-template-3 {
		 .qtPlaces-list {
			width: 80%;
			right: -80%;
		}
		.qtPlaces-list, .qtPlaces-map {
			height: 100%;
		} 
		&.open {
			.qtPlaces-list {
				right: 0;
			}
			.qtPlaces-menuswitch {
				right: 80%;
			}
			.qtPlaces-mapcontainer { 
				right: 50%;
			}
		} 
		overflow: hidden;
	}

	.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
		bottom: 48px !important;
	    right: 24px !important;
	}



}