.workflowengine {
	.pull-right {
		float: right
	}

	.invalid-input {
		border-color: var(--color-error);
	}

	.operation {
		padding: 5px 5px 20px;
		margin-bottom: 20px;
		border-bottom: var(--color-border) 1px solid;
		border-left: rgba(0, 0, 0, 0) 2px solid;

		&.modified {
			border-left: var(--color-warning) 2px solid;
		}

		button {
			margin-bottom: 0;
		}

		span.info {
			padding: 7px;
			color: var(--color-border);
		}

		.msg {
			border-radius: 3px;
			margin: 3px 3px 3px 0;
			padding: 5px;
			transition: opacity .5s;
		}

		.check {
			padding-left: 5px;
			&:hover {
				background-color: var(--color-background-dark);
			}
		}

		.button-delete,
		.button-delete-check {
			opacity: 0.5;
			padding: 11px;

			&:hover,
			&:focus {
				opacity: 1;
				cursor: pointer;
			}
		}
	}

	.rules {
		.icon-loading-small {
			display: inline-block;
			margin-right: 5px;
		}

		.operation:nth-last-child(2) {
			margin-bottom: 5px;
		}
	}

	.operation-header {
		display: flex;
		margin-left: 5px;

		.operation-name {
			width: 100%;
			max-width: 500px;
			align-self: flex-start;
			padding: 10px;
		}

		.select2-container {
			align-self: flex-end;
		}

		.icon-delete {
			margin-left: auto;
		}
	}
}