.version_history {

	$installation: rgba(44, 168, 27, 0.35);
	$forced: rgba(76, 78, 141, 0.35);
	$origin: rgba(253, 186, 0, 0.35);
	$current: rgba(0, 129, 202, 0.35);
	$failed: rgba(244, 6, 0, 0.35);

	tbody {
		tr {

			&.installation-version {
				background-color: $installation;
				color: shade($installation, 40);

				&:hover {
					td {
						background-color: tint($installation, 15);
					}
				}
			}

			&.origin-version {
				background-color: $origin;
				color: shade($origin, 40);

				&:hover {
					td {
						background-color: tint($origin, 15);
					}
				}
			}

			&.forced-version {
				background-color: $forced;
				color: shade($forced, 40);

				&:hover {
					td {
						background-color: tint($forced, 15);
					}
				}
			}

			&.current-version {
				background-color: $current;
				color: shade($current, 40);

				&:hover {
					td {
						background-color: tint($current, 15);
					}
				}
			}

			&.failed-version {
				background-color: $failed;
				color: shade($failed, 40);

				&:hover {
					td {
						background-color: tint($failed, 15);
					}
				}
			}

		}
	}

	tfoot {

		.legend-headline {
			color: #777777;
			font-size: 12px;
			font-weight: bold;
			margin-top: 6px;
		}

		.legend-background-box {
			background-color: #FBFBFB;
			border: 1px solid #E4E4E4;
			margin: 0 -11px;
			padding: 12px 0;
		}

		.legend-container {
			display: table;
			margin-left: 12px;

			.legend {
				display: table-cell;
				vertical-align: middle;
				width: 30px;
				padding-right: 6px;

				.legend-color-box {
					display: inline-block;
					height: 15px;
					width: 100%;

					&.installation {
						background-color: $installation;
					}

					&.forced {
						background-color: $forced;
					}

					&.origin {
						background-color: $origin;
					}

					&.current {
						background-color: $current;
					}

					&.failed {
						background-color: $failed;
					}
				}
			}

			.legend-name {
				color: #777777;
				display: table-cell;
				font-weight: bold;
				vertical-align: middle;
			}
		}
	}
}

.modal-lg {
	@media (min-width: 1613px) {
		width: 1350px;
		margin-top: 70px;
		margin-left: 224px;
	}
	@media (max-width: 1612px) {
		@media (min-width: 827px) {
			width: auto;
			margin: 50px 24px 0 224px;
		}
	}

	@media (max-width: 826px) {
		width: auto;
		margin: 50px 0 0 224px;

	}
}

.modal_iframe {
	height: 70vh;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}