.EditForwardingGraphPaths {

	padding: 8px;

	&.-with-transitions {
		* {
			transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		}
	}

	.NetworkService {
		position: relative;
		> .footer-actions {
			border-top: 1px solid silver;
		}
	}

	.ForwardingGraph {

		margin-top: 20px;

		&:first-child {
			margin-top: 0;
		}

		border-bottom: 1px solid silver;

		> div > .footer-actions {
			padding-left: 80px;
		}

	}

	.RecordServicePath {

		position: relative;

		min-height: 100px;

		white-space: nowrap;

		overflow: visible;

		margin: 8px 0;

		background-color: #CBD1D1;

		.EditableProperty {
			display: block;
			margin: 12px 0;
			width: 200px;
		}

		.ConstituentVnfd {

			position: relative;
			display: none;

			> small {
				vertical-align: bottom;
			}

			&:hover {
				small.vnfd-title {
					display: block;
				}
			}

			small.vnfd-title {
				display: none;
				position: absolute;
				top: -20px;
				width: 100%;
				left: 0;
			}

			.connectors {
				border-top: 3px solid silver;
				border-radius: 9px;
				padding-top: 3px;
				.connection-point {
					border: 2px solid;
					margin: 2px;
					* {
						vertical-align: middle;
					}
				}
			}
		}

		&.-is-factory {
			opacity: 0.33;
			&:hover {
				opacity: 1;
				.ConstituentVnfd {
					display: inline-block;
				}
			}
			.create-record-service-path {
				display: none;
			}
			.EditableProperty {
				visibility: hidden;
			}
		}

		&:hover {
			> .header-actions {
				display: block;
				&:hover {
					opacity: 1;
				}
			}
			&.-is-edit-paths-mode {
				.ConstituentVnfd {
					display: inline-block;

				}
				.enter-path-edit-mode {
					display: none;
				}
				.selection {
					display: inline-block;
				}
				> .header-actions {
					display: none;
				}
			}
			.rsp-create-new-connection-point-line,
			.enter-path-edit-mode {
				opacity: 1;
			}

		}

	}

	.RspConnectionPointRef {
		border: 2px solid transparent;
		border-radius: 8px;
		width: 35px;
		height: 35px;
		display: inline-block;
		margin: 0;
		padding: 0;
		font-size: 11px;
		text-align: center;
		cursor: pointer;
		vertical-align: middle;
		&.create-new-connection-point {
			width: auto;
			height: auto;
			border: dotted red;
		}
		small {
			vertical-align: baseline;
		}

	}

	.connection-point {
		@extend .RspConnectionPointRef;
		display: inline-block;
		border: dotted red;
		text {
			fill: #111831;
			stroke: #111831;
		}
	}

	.Classifier {
		background-color: #CBD1D1 !important;
		td {
			.match-attr-name {
				display: none;
			}
		}
	}

	.fg-classifier {

		position: relative;
		margin-bottom: 13px;

		th,
		td {
			padding: 4px;
			min-width: 80px;
			text-align: left;
			vertical-align: top;
			&.primary-action-column,
			&.secondary-action-column {
				max-width: 40px;
			}
			&.id-property {
				display: none;
			}
		}

		th {
			line-height: 10px;
			vertical-align: bottom;
		}

		th {
			@extend h2;
		}

		input {
			&.match-attr-value {
				min-width: 100px;
			}
		}

		.classifier-properties {
			line-height: 25px;
			.classifier-property {
				position: relative;
				vertical-align: top;
				display: inline-block;
				margin: 4px;
			}
		}

		.select-connection-point-ref {
			display: none;
			position: absolute;
			top: 30px;
			left: 2px;
			width: auto;/* set by the code*/
			min-width: 150px;
			box-shadow: 0.1px 0.1px 3px silver;
			z-index: 9999;
			.ConnectionPointSelector {
				background-color: white;
				border-radius: 3px;
				width: 100%;
				text-align: left;
				margin: 0;
				small.Button {
					display: none;
				}
			}
		}

		&.-is-edit-classifier-connection-point-ref {
			.select-connection-point-ref {
				display: block;
			}
		}

	}

	h2 {
		font-size: 9px;
		text-transform: uppercase;
		color: #AEAEAE;
		img {
			border: 0;
			width: 30px;
			margin: 3px;
			vertical-align: middle;
		}
	}

	h4 {
		@extend h2;
		margin: 4px 4px 4px 80px;
	}

	.primary-action-column {
		width: 40px;
		input {
			margin: 8px 12px;
		}
	}

	.secondary-action-column {
		width: 40px;
	}

	.rsp {
		display: inline-block;
	}

	.rsp-line {
		border: 2px solid red;
		display: inline-block;
		width: 20px;
		vertical-align: middle;
		&.rsp-create-new-connection-point-line {
			border-style: dotted;
		}
	}


	.header-actions {
		position: absolute;
		right: 0;
	}

	.row-action-column {
		width: 50px;
		overflow: visible;
		white-space: nowrap;
		text-align: center;
		padding: 8px;
		display: inline-block;
		.action {
			cursor: pointer;
		}
	}

	.connection-points {
		display: inline-block;
		margin-right: 25px;
		vertical-align: middle;
		.selection {
			display: none;
			position: absolute;
			bottom: 2px;
			font-size: 10px;
			text-align: center;
			border-radius: 33px;
			margin: 0 0 0 -12px;
			padding: 12px;
			background-color: rgba(255, 255, 255, 0.66);
			border-top: 1px solid rgba(192, 192, 192, 0.13);
			border-bottom: 1px solid rgba(192, 192, 192, 0.13);
		}
		.rsp:first-child {
			.rsp-line {
				display: none;
			}
		}
	}

	.create-new-connection-point.Button {
		padding: 0;
		img {
			width: 34px;
			height: 34px;
		}
	}

	.header-actions {
		display: none;
		opacity: 0.33;
	}

	.footer-actions {
		border-color: transparent;
		opacity: 0.33;
		&:hover {
			opacity: 1;
		}
	}

	.vnfd-list {
		display: inline-block;
	}

	.rsp-create-new-connection-point-line,
	.enter-path-edit-mode {
		opacity: 0.33;
	}

	.fg-icon {
		width: 25px;
		vertical-align: middle;
	}

	input {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	select {
		width: auto !important;
		max-width: none !important;
		min-width: 150px !important;
	}

	.classifier-match-attributes {
		> tbody {
			> tr:nth-of-type(odd) {
				background-color: rgba(238, 232, 213, 0.33);
			}
			//> tr:nth-of-type(even) {
			//	background-color: rgba(147, 161, 161, 0.33);
			//}
		}
	}

	.no-service-function-chain-msg {
		margin-left: 80px;
	}

	.hint {
		color: #073642;
		font-size: 12.8px;
	}

	.EditableProperty {
		&.-is-disabled {
			h3,
			val input {
				background: #aeaeae !important;
			}
		}
	}
}

.tooltip-indicator {
	.cpNumber {
		i {
			display: none;
		}
		val {
			position: absolute;
			top: -10px;
			left: -5px;
			margin-left: 50%;
			margin-right: 50%;
			padding: 0;
		}
	}
}