
._jsPlumb_connector:hover {
    cursor: pointer;
    opacity: 0.7;
}

._jsPlumb_endpoint, ._jsPlumb_dragging {
    cursor: move !important;
    z-index: 999; /* bypass overlay z-index*/
}

.source-anchor {
    visibility: hidden;
    cursor: default;
    z-index: -1;
}

.flow.active.diagram > .flow.shape {
	position: absolute;
	background-color: white;

	&:hover {
		border: 1px dashed @bright-color;
		&:not(.end) .connector, .resize.anchor {
			visibility: visible;
			z-index: @z-index-moderate;
			.transition-delay(0ms);
		}
	}

	.resize.anchor, .connector {
		position: absolute;
		visibility: hidden;
		height: 10px;
		width: 10px;
		border-radius: 2px;
		.transition-delay(1s);
	}

	.resize.anchor {
		&.top.left {
			bottom: 100%;
			right: 100%;
			.rotate (-35deg);
			cursor: nw-resize;
		}
		&.top.right {
			bottom: 100%;
			left: 100%;
			.rotate (35deg);
			cursor: ne-resize;
		}
		&.bottom.left {
			top: 100%;
			right: 100%;
			.rotate (35deg);
			cursor: sw-resize;
		}
		&.bottom.right {
			top: 100%;
			left: 100%;
			.rotate (-35deg);
			cursor: se-resize;
		}
	}

	.connector {
		border: 1px solid black;
		&.one {
			bottom: 100%;
			left: 45%;
		}
		&.two {
			top: 100%;
			left: 45%;
		}
		&.three {
			top: 40%;
			right: 100%;
		}
		&.four {
			top: 40%;
			left: 100%;
		}
	}

	code, input {
		font-family: monospace;
		position: absolute !important;
		top: 30%;
		bottom: 30%;
		left: 5%;
		right: 5%;
		word-break: break-all;
		min-height: 15px;
		z-index: @z-index-absolute;
	}

	input {
		width: 90%;
	}

	code {
		bottom: 5%;
	}
}

.flow.shape.menu .flow.shape {
	//display: table-cell;
	cursor: move;
	display: inline-block;
	margin: 15px;

	*:not(.image) {
		display: none;
	}

	& .shape.image {
		width: @general-shape-width / 2;
		height: @general-shape-height / 2;
		border: 1px solid black;
	}

	&.decision .shape.image, &.connector .shape.image {
		width: 60px / 2;
		height: 60px / 2;
	}
}

.flow.shape {
	text-align: center;
	outline: none;

	.shape.image {
		position: relative;
		border: 2px solid black;
		display: block;
	}

	&.selected .shape.image {
		border-color: #9ecaed;
		box-shadow: 0 0 40px @bright-color;
		z-index: @z-index-absolute;
	}

	&.executed .shape.image {
		border-color: green;
		box-shadow: 0px 0px 40px green;
	}

	&.invalid .shape.image {
		border-color: #D95C5C;
		box-shadow: 0 0 40px #D95C5C;
	}

	&.begin .shape.image, &.end .shape.image, &.process .shape.image,
	&.display .shape.image, &.manual_input .shape.image {
		width: @general-shape-width;
		height: @general-shape-height;
	}

	&.begin .shape.image, &.end .shape.image {
		border-radius: 30px;
	}

	&.end .shape.image {
		background-color: @dark-color;
	}

	&.connector {
		visibility: visible !important;
	}
	&.connector .shape.image {
		border-radius: 50%;
	}

	&.decision .shape.image, &.connector .shape.image {
		width: 60px;
		height: 60px;
	}

	&.decision .shape.image {
		.rotate(45deg);
		input, code {
			.rotate(-45deg);
		}
	}

	&.display .shape.image, &.manual_input .shape.image {
		border: none !important;
	}
}

.flow.shape .resize.anchor, .flow.shape .connector {
	visibility: hidden;
}