$overlayBaseZIndex: 700000;

$selectionOutlineThickness: 2px;

.vac-outline-border {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	$outlineColor: #0075cd;
	
	background-color: $outlineColor;
	//background-color: #5D83C0;
	width: $selectionOutlineThickness;
	height: 100px;

	border: 0 dashed $outlineColor;
	border-radius: 0;

	position: absolute;
	left: 10px;
	top: 20px;

	z-index: $overlayBaseZIndex + 2;
}

.vac-outline-border-left, .vac-outline-border-right {
	width: $selectionOutlineThickness;
}

.vac-outline-border-top, .vac-outline-border-bottom {
	height: $selectionOutlineThickness;
}

/*.vac-outline-border-left {
	border-left-width: $selectionOutlineThickness;
}
.vac-outline-border-right {
	border-right-width: $selectionOutlineThickness;
}
.vac-outline-border-top {
	border-top-width: $selectionOutlineThickness;
}
.vac-outline-border-bottom {
	border-bottom-width: $selectionOutlineThickness;
}*/

.vac-is-selecting .vac-outline-border {
	pointer-events: none;
}

.vac-fog {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;

	background-color: silver;
	opacity: 0.5;

	z-index: $overlayBaseZIndex + 1;
}

.vac-fog-top, .vac-fog-bottom {
	width: 100%;
}

.vac-fog-transparent {
	background-color: transparent;
	opacity: 1;
}

.vac-path-tooltip {
	position: absolute;
	z-index: $overlayBaseZIndex + 3;
	display: inline-block;
	max-width: 400px;

	pointer-events: none;

	$tooltipBorderWidth: 1px;

	.vac-tooltip-text {
		color: #fff;
		background-color: #337ab7;
		border: $tooltipBorderWidth solid #2e6da4;

		font-size: 13px;
		padding: 3px 6px;
		margin-left: -$selectionOutlineThickness;

		white-space: nowrap;
		overflow: hidden;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
	}
}

//Action classes
.vac-removed {
	display: none !important;
}

.vac-hidden {
	visibility: hidden !important;
}