.joint-paper {
	position: relative;
	background: url(images/ide/flow_designer_bg.png);
	display: inline-block;
}

.joint-papercontainer {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin-top: 8px;
	border: 8px solid #f1f1f1;
	position: relative;
}

.diagram-viewport {
	overflow: auto;
	width: 100%;
	height: 100%;
}

.paper-moveable {
	cursor: move;
}

.html-element {
	position: absolute;
	/* Make sure events are propagated to the JointJS element so, e.g. dragging works.*/
	pointer-events: none;
	-webkit-user-select: none;
	border-radius: 4px;
	box-sizing: border-box;
	z-index: 2;
}

	.html-element a, .html-element button {
		pointer-events: auto;
	}

	.html-element .port {
		position: absolute;
	}

		.html-element .port.inport.smallcircle {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #59a6ae;
			transform: translate(-5px,-3px);
		}

		.html-element .port.outport.decisionorange {
			width: 13px;
			height: 13px;
			background: #f58345;
			transform: translate(-6px,-8px) rotate(45deg);
		}

		.html-element .port.inport.smallcircle.faded:before {
			position: absolute;
			top: 3px;
			left: 5px;
			display: block;
			content: " ";
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #fff;
			opacity: 0.7;
			transform: translate(-5px,-3px);
		}

		.html-element .port.outport.decisionorange.faded:before {
			position: absolute;
			display: block;
			content: " ";
			width: 13px;
			height: 13px;
			background: #fff;
			opacity: 0.7;
		}

		.html-element .port.inport.faded, .html-element .port.outport.faded {
			z-index: 100;
		}

/*
*	Sima kártya CSS
*/

.effectorWorkflowCard.highlighted {
	outline-width: 0;
}

	.effectorWorkflowCard.highlighted rect {
		stroke: #3d9199;
		stroke-width: 5;
	}

.simple-workflow-card,
.subprocess-workflow-card {
	background-color: #fff;
	padding-top: 1px;
	border: 3px solid #46a7b0;
	box-sizing: border-box;
	height: 100% !important;
}

.subprocess-workflow-card {
	border: 6px double #46a7b0;
}
	.simple-workflow-card .card-workflow-name,
	.subprocess-workflow-card .card-workflow-name {
		color: #555;
		font-size: 13px;
		font-weight: normal;
		line-height: 1.3;
		padding: 2px 0;
		width: 100%;
		display: table;
		height: 35px;
	}

		.simple-workflow-card .card-workflow-name span,
		.subprocess-workflow-card .card-workflow-name span {
			display: table-cell;
			vertical-align: middle;
		}

	.simple-workflow-card .card-responsible-name,
	.subprocess-workflow-card .card-responsible-name {
		font-size: 11px;
		color: #ae9835;
		background-color: #f0f0f0;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		text-transform: uppercase;
		position: absolute;
		bottom: 27px;
	}

	.simple-workflow-card .card-buttons,
	.subprocess-workflow-card .card-buttons {
		font-size: 25px;
		position: absolute;
		bottom: -2px;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.simple-workflow-card .wfd-icon-trigger,
	.subprocess-workflow-card .wfd-icon-trigger {
		color: #f78850;
	}

	.simple-workflow-card .wfd-icon-editconsultant,
	.subprocess-workflow-card .wfd-icon-editconsultant {
		color: #589f97;
	}

/*
*	END Sima kártya CSS
*/

/*
*	start kártya CSS
*/
.startmarker-card {
	background-color: #fff;
	border: 3px solid #00a44e;
	box-sizing: border-box;
	height: 100% !important;
	border-radius: 28px;
	color: #898989;
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
}

	.startmarker-card .card-title {
		display: table;
		margin: auto;
		height: 100%;
	}

		.startmarker-card .card-title span {
			display: table-cell;
			vertical-align: middle;
		}
/*
*	END start kártya CSS
*/

/*
*	stop kártya CSS
*/
.exitmarker-card,
.stopmarker-card {
	background-color: #fff;
	border: 3px solid #D8818D;
	box-sizing: border-box;
	height: 100% !important;
	border-radius: 28px;
	color: #898989;
	text-align: center;
	text-transform: uppercase;
	font-size: 16px;
}
.exitmarker-card {
	border-style: dashed;
}

	.exitmarker-card .card-title,
	.stopmarker-card .card-title {
		display: table;
		margin: auto;
		height: 100%;
	}

		.exitmarker-card .card-title span,
		.stopmarker-card .card-title span {
			display: table-cell;
			vertical-align: middle;
		}

/*
*	END stop  kártya CSS
*/

/*
*	placeholder kártya CSS
*/
.placeholder-card {
	background-color: #fff;
	border: 3px dashed #bbb;
	box-sizing: border-box;
	height: 100% !important;
	color: #898989;
	text-align: center;
}

	.placeholder-card .card-title {
		color: #888888;
		font-weight: normal;
		font-size: 17px;
		line-height: 1em;
		font-variant: small-caps;
		padding: 13px 0px;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.placeholder-card .card-buttons {
		font-size: 25px;
		position: absolute;
		bottom: 4px;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

		.placeholder-card .card-buttons button, .placeholder-card .card-buttons button:hover {
			background: none !important;
			padding: 0px;
			color: initial;
			border: 0px;
		}

	.placeholder-card .wfd-icon-newstep {
		color: #46a7b0;
	}

/*
*	END placeholder kártya CSS
*/



.nonhuman-task-card .halfgear-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.nonhuman-task-card .card-title {
	color: #888888;
	font-weight: normal;
	font-size: 19px;
	line-height: 1em;
	font-variant: small-caps;
	margin: 23px 0px;
}

.nonhuman-task-card .card-buttons {
	font-size: 25px;
	position: absolute;
	bottom: 4px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.nonhuman-task-card .wfd-icon-halfgear svg {
	width: 57px;
}

.nonhuman-task-card .wfd-icon-halfgear path {
	fill: #46a7b0 !important;
}

/*
*	levélküldés kártya CSS
*/
.sendmail-card {
	background-color: #fff;
	border: 3px solid #46a7b0;
	box-sizing: border-box;
	height: 100% !important;
	color: #898989;
	text-align: center;
}

	.sendmail-card .wfd-icon-mail svg {
		width: 42px;
	}

	.sendmail-card .wfd-icon-mail path {
		fill: #d3b462 !important;
	}

/*
*	END levélküldés kártya CSS
*/

/*
*	üzletilogika kártya CSS
*/
.businesslogic-card {
	background-color: #fff;
	border: 3px solid #46a7b0;
	box-sizing: border-box;
	height: 100% !important;
	color: #898989;
	text-align: center;
}

	.businesslogic-card .wfd-icon-mail svg {
		width: 42px;
	}

	.businesslogic-card .wfd-icon-mail path {
		fill: #d3b462 !important;
	}

/*
*	END üzletilogika kártya CSS
*/

/*
*	systemtask kártya CSS
*/
.systemtask-card {
	background-color: #fff;
	border: 3px solid #46a7b0;
	box-sizing: border-box;
	height: 100% !important;
	color: #898989;
	text-align: center;
}

	.systemtask-card .wfd-icon-flow-process2 {
		font-size: 41px;
		color: #d3b462;
	}

/*
*	END üzletilogika kártya CSS
*/


/*
*	új lépés kártya CSS
*/
.newstep-card {
	background-color: #fff;
	border: 3px solid #46a7b0;
	box-sizing: border-box;
	height: 100% !important;
	color: #898989;
	text-align: center;
}

.subprocess-card {
	background-color: #fff;
	border: 6px double #46a7b0;
	box-sizing: border-box;
	height: 100% !important;
	color: #898989;
	text-align: center;
}

	.subprocess-card .card-buttons,
	.newstep-card .card-buttons {
		font-size: 25px;
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.subprocess-card .card-title,
	.newstep-card .card-title {
		color: #888888;
		font-weight: normal;
		font-size: 24px;
		line-height: 1em;
		font-variant: small-caps;
		margin: 15px 0px;
	}

	.subprocess-card .wfd-icon-trigger,
	.newstep-card .wfd-icon-trigger {
		color: #f78850;
	}

	.subprocess-card .wfd-icon-editconsultant,
	.newstep-card .wfd-icon-editconsultant {
		color: #589f97;
	}

/*
*	END új lépés kártya CSS
*/



/*
*	összekötő CSS
*/

	.type-effector-effectorworkflowconnection .label text {
		font-size: 11px !important;
		fill: #fff;
		font-weight: normal;
	}

	.type-effector-effectorworkflowconnection .label rect {
		fill: #46A7B0;
		stroke: #46A7B0;
		stroke-width: 4px;
	}

.type-effector-effectorworkflowconnection .marker-arrowhead-group-target .marker-arrowhead {
	fill: #12496c;
}

.type-effector-effectorworkflowconnection .marker-arrowhead-group-source {
	display: none;
}

.type-effector-effectorworkflowconnection .connection {
	stroke: #79c6f0;
	stroke-width: 3;
}

.type-effector-effectorworkflowconnection .marker-target {
	stroke: #79c6f0;
	fill: #79c6f0;
}

/**
	workflow status viewer style
*/
.type-effector-effectorworkflowconnection.faded .connection {
	stroke: #cae6f5;
	stroke-width: 3;
}

.type-effector-effectorworkflowconnection.faded .marker-target {
	stroke: #cae6f5;
	fill: #cae6f5;
}

.type-effector-effectorworkflowconnection.faded .label rect {
	fill: #90ced4;
	stroke: #90ced4;
	stroke-width: 4px;
}

.type-effector-effectorworkflowconnection.faded .marker-arrowhead-group-target .marker-arrowhead {
	fill: #cae6f5;
}

.type-effector-effectorworkflowconnection.active .connection {
	stroke: #46a7b0;
	stroke-width: 3;
}

.type-effector-effectorworkflowconnection.active .marker-target {
	stroke: #46a7b0;
	fill: #46a7b0;
}


.simple-workflow-card.small-text .card-workflow-name span,
.subprocess-workflow-card.small-text .card-workflow-name span {
	font-size: 10px;
}

/*
*	END összekötő CSS
*/

/* törlés gomb elrejtése a nyilon*/
.link-tools {
	display: none;
}



/*
* Toolbar CSS
*/

.joint-diagram-toolbar {
	position: absolute;
	background: #fff;
	top: 5%;
	left: -178px;
	width: 178px;
	height: 606px;
	z-index: 300;
	border: 1px solid #c8c8c8;
	transition: left cubic-bezier(0.65, 0.05, 0.36, 1) .5s
}
.joint-diagram-toolbar.active {
	left: 0;
}
	.joint-diagram-toolbar .toggle_arrow {
		cursor: pointer;
		position: absolute;
		right: -15px;
		top: 20px;
		width: 15px;
		height: 40px;
		background: #fff;
		border: 1px solid #c8c8c8;
		border-left: 0;
		overflow: hidden;
	}
		.joint-diagram-toolbar .toggle_arrow i {
			font-size: 20px;
			margin: 9px 0 0 -3px;
			position: relative;
			display: block;
		}

	.joint-diagram-toolbar .toolbar-title {
		text-transform: uppercase;
		font-weight: normal;
		text-align: center;
		font-size: 18px;
		color: #759ab5;
		border-bottom: 2px solid #e7e7e7;
		width: 90%;
		margin: 5px auto;
	}

.toolbar-element {
	position: relative;
	cursor: move;
	margin-left: auto;
	margin-right: auto;
}


/* regibol */
/*

Elements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class "element basic Rect".
This makes it possible to easilly style elements in CSS and have generic CSS rules applying to
the whole group of elements. Each plugin can provide its own stylesheet.

*/

.element {
   /* Give the user a hint that he can drag&drop the element. */
   cursor: move;
}

.element * {
   /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */
   vector-effect: non-scaling-stroke;
   user-drag: none;
}

/*

connection-wrap is a <path> element of the joint.dia.Link that follows the .connection <path> of that link.
In other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the
.connection <path>. The advantage of using .connection-wrap is to be able to catch pointer events
in the neighborhood of the .connection <path>. This is especially handy if the .connection <path> is
very thin.

*/

.connection-wrap {
   fill: none;
   stroke: black;
   stroke-width: 15;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
   cursor: move;
}
.connection-wrap:hover {
   opacity: .4;
   stroke-opacity: .4;
}

.connection {
   fill: none;
   stroke-linejoin: round;
}

.marker-source, .marker-target {
   /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */
   vector-effect: non-scaling-stroke;
}
.link-tools .tool-remove circle {
   fill: red;
}
.link-tools .tool-remove path {
   fill: white;
}
.link:hover .marker-vertices,
.link:hover .marker-arrowheads,
.link:hover .link-tools {
   opacity: 1;
}

/* <circle> element inside .marker-vertex-group <g> element */
.marker-vertex {
   fill: #1ABC9C;
}
.marker-vertex:hover {
   fill: #34495E;
   stroke: none;
}

.marker-arrowhead {
   fill: #1ABC9C;
}
.marker-arrowhead:hover {
   fill: #F39C12;
   stroke: none;
}
/* <circle> element used to remove a vertex */
.marker-vertex-remove {
   cursor: pointer;
   opacity: .1;
   fill: white;
}

.marker-vertex-group:hover .marker-vertex-remove {
   opacity: 1;
}

.marker-vertex-remove-area {
   opacity: .1;
   cursor: pointer;
}
.marker-vertex-group:hover .marker-vertex-remove-area {
   opacity: 1;
}