#right-area.flow.diagram.container {
	.unselectable();
	width: @digram-container-width-percentage;
	position: absolute;
	top: 0;
	right: 0;

	#alert-messages {
		position: fixed;
		top: 10%;
		right: 4%;
		opacity: 0;
		height: 80px;
		width: 200px;
		margin: 10px;
		border-radius: 10px;
		text-align: center;
		font-family: monospace;
		font-size: large;
		font-weight: bold;
		z-index: @z-index-absolute;

		span {
			position: absolute;
			left: 5%;
			right: 5%;
			top: 10%;
			bottom: 10%;
		}

		&[data-flow-message-type="info"] {
			box-shadow: 0 0 10px @bright-color;
		}
		&[data-flow-message-type="warning"] {
			box-shadow: 0 0 10px @danger-color;
		}
		&[data-flow-message-type="success"] {
			box-shadow: 0 0 10px @success-color;
		}
		&[data-flow-message-type="error"] {
			box-shadow: 0 0 10px @error-color;
		}
	}

	.flow.tab.menu {
		position: relative;
		margin: 10px 0 0 0;
		height: @tab-menu-height;

		.flow.tab.item {
			position: relative;
			display: inline;
			padding: 10px 20px 10px 20px;
			border-top-left-radius: @border-radius;
			border-top-right-radius: @border-radius;

			a.flow.tab.link {
				position: relative;
				text-decoration: none;
				color: @test-primary-color;
				padding-left: 2%;
				padding-right: 2%;
				&:hover {
					cursor: pointer;
				}
			}

			.flow.tab.close {
				color: @danger-color;
				position: absolute;
				top: -5px;
				right: 5px;
				font-size: 24px;
				font-weight: bold;
				font-style: italic;
				opacity: @low-opacity;
				&:hover {
					cursor: pointer;
					opacity: 1;
				}
			}

			&:not(.active) {
				opacity: @low-opacity;
				&:hover {
					opacity: 1;
				}
			}

			&.active {
				border: @border-size solid @bright-color;
				border-bottom: 6px solid white;
				z-index: @z-index-high;
			}
		}
	}

	.flow.active.diagram {
		outline: none;
		position: absolute;
		top: @tab-menu-height;
		height: 100%;
		width: 100%;
		overflow: scroll;
		border: @border-size solid @bright-color;
		z-index: @z-index-moderate;

		.connection.label {
			text-transform: uppercase;
			font-weight: bold;
			color: @bright-color;
			font-size: large;
			position: absolute;
		}

		.hidden-anchor {
			position: absolute;
			top: 300%;
			left: 300%;
			visibility: hidden;
		}
	}

	#console-area {
		position: fixed;
		width: @digram-container-width-percentage;
		border: 1px solid @bright-color;
		background-color: white;
		bottom: 0;
		z-index: @z-index-absolute;
		height: 0;

		.console.toggle.button {
			position: absolute;
			left: 0;
			bottom: 100%;
			border-bottom: 2px solid @dark-color;
			background-color: @dark-color;
			color: white;
			padding: 18px;
			border-top-right-radius: @border-radius;
		}

		.console.execution.buttons {
			.unselectable();
			float: left;
			width: 42%;
			border-right: 1px solid black;
			height: 100%;

			button {
				margin: 20px 10px 10px 20px;
				border-radius: 2px;

				&.execute, &.start.debug {
					background-color: @bright-color;
					width: 200px;
				}

				&.debug.next, &.stop.debug {
					height: 40px;
					width: 40px;
					background-color: white;
					border: 1px solid gray;

					&:before {
						position: absolute;
						left: 30%;
						right: 30%;
						top: 30%;
						bottom: 30%;
					}
				}

				&.debug.next {
					color: @bright-color;
				}
				&.stop.debug {
					color: @danger-color;
				}

				i {
					left: 1%;
					width: 20px;
				}
			}
		}

		.console.exhibition {
			float: left;
			width: 40%;
			border-right: 1px solid black;
			height: 100%;
			overflow-y: scroll;
			padding: 1%;

			.terminal {
				position: fixed;
			}
			.clean.console {
				color: @danger-color;
				position: fixed;
				left: 82%;
				cursor: pointer;
				&:hover {
					opacity: @medium-opacity;
				}
			}
			.content {
				margin-bottom: 10%;
				padding-left: 10%;
				line-height: 150%;

				code:last-of-type:before {
					content: '-';
				}
			}
		}
	}
}