/* Detail page*/
.treeViewHolder .headingRow {
	background: #0E9AEF;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: white;
	height: 35px;
	padding-top: 10px;
}

.treeViewHolder .heading {
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	height: 17px;
	margin-left: 10px;
	margin-right: 10px;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
}

	.treeViewHolder .heading.first {
		width: 35%;
		padding-left: 15px;
		text-align: left;
		margin: 0;
	}

	.treeViewHolder .heading.last {
		padding-left: 15px;
		text-align: right;
		margin: 0;
	}

.treeViewHolder .treeView {
	border: 1px solid #0E9AEF;
}

	.treeViewHolder .treeView div:last-child {
		border-bottom: 0;
	}

	.treeViewHolder .treeView .treeRowHolder {
		border-bottom: 1px solid #aaa;
	}

		.treeViewHolder .treeView .treeRowHolder .groupRow {
			display: flex;
			align-items: center;
			padding: 5px 0;
		}

			.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowControlHolder {
				display: inline-flex;
				align-items: center;
				width: 35%;
				height: 35px;
				padding-left: 15px;
			}

			.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder {
				display: inline-flex;
				align-items: center;
				justify-content: flex-end;
				margin-left: 10px;
				margin-right: 10px;
				height: 35px;
			}

				.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder .groupRowDataLoader {
					border: 4px solid #EDEDED;
					border-radius: 50%;
					border-top: 4px solid #0E9AEF;
					width: 25px;
					height: 25px;
					-moz-animation: spin 1s linear infinite;
					-webkit-animation: spin 1s linear infinite;
					animation: spin 1s linear infinite;
					position: relative;
					background: none;
					margin-left: 5px;
				}

					.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder .groupRowDataLoader :before {
						width: 0;
					}

					.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder .groupRowDataLoader :after {
						width: 0;
					}

				.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder .groupRowDataLabel {
					margin-right: 10px;
				}

				.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder .groupRowDataImageHolder,
				.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder .groupRowDataImageHolder svg {
					width: 20px;
					height: 20px;
				}

					.treeViewHolder .treeView .treeRowHolder .groupRow .groupRowDataHolder .groupRowDataImageHolder svg.yellow path:nth-child(2) {
						fill: red;
					}

			.treeViewHolder .treeView .treeRowHolder .groupRow .rowHeading {
				white-space: nowrap;
				font-size: 18px;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.treeViewHolder .treeView .treeRowHolder .groupRow .iconButton {
				height: 30px;
				width: 30px;
				margin-right: 15px;
			}

			.treeViewHolder .treeView .treeRowHolder .groupRow .editButtonHolder {
				text-align: right;
			}

				.treeViewHolder .treeView .treeRowHolder .groupRow .editButtonHolder .iconButton {
					margin: 0;
				}

					.treeViewHolder .treeView .treeRowHolder .groupRow .editButtonHolder .iconButton.out {
						display: none;
					}

					.treeViewHolder .treeView .treeRowHolder .groupRow .editButtonHolder .iconButton svg g {
						fill: white;
					}

					.treeViewHolder .treeView .treeRowHolder .groupRow .editButtonHolder .iconButton.saveButton {
						margin-right: 10px;
					}

					.treeViewHolder .treeView .treeRowHolder .groupRow .editButtonHolder .iconButton.cancelButton {
						background: red;
					}

		.treeViewHolder .treeView .treeRowHolder .groupContent {
			background: #eeeeee;
			overflow: hidden;
			transition: max-height 0.55s;
			max-height: 15000px;
		}

			.treeViewHolder .treeView .treeRowHolder .groupContent.collapsed {
				max-height: 0;
			}

			.treeViewHolder .treeView .treeRowHolder .groupContent.expanded {
				max-height: 15000px;
			}

			.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow {
				padding: 12px 0;
				font-size: 14px;
			}

				.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow.odd {
					background: #eeeeee;
				}

				.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow.even {
					background: #e0e0e0;
				}

				.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow div {
					display: inline-block;
				}

				.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupRowLabel {
					width: 35%;
					text-align: left;
					padding-left: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align: middle;
				}

				.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder {
					margin-left: 10px;
					margin-right: 10px;
					display: inline-flex;
					align-items: center;
					justify-content: flex-end;
				}

					.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowDataLoader {
						border: 4px solid #fff;
						border-radius: 50%;
						border-top: 4px solid #0E9AEF;
						width: 17px;
						height: 17px;
						-moz-animation: spin 1s linear infinite;
						-webkit-animation: spin 1s linear infinite;
						animation: spin 1s linear infinite;
						position: relative;
						background: none;
						margin-left: 5px;
					}

						.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowDataLoader :before {
							width: 0;
						}

						.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowDataLoader :after {
							width: 0;
						}

					.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowLabel {
						margin-right: 10px;
					}

					.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowImageHolder,
					.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowImageHolder svg {
						width: 20px;
						height: 20px;
					}

						.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowImageHolder svg.green {
							width: 18px;
							height: 18px;
						}

							.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowImageHolder svg.green path {
								stroke: green;
							}

						.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .groupContentRowImageHolder svg.yellow path:nth-child(2) {
							fill: red;
						}

					.treeViewHolder .treeView .treeRowHolder .groupContent .groupContentRow .groupContentRowDataHolder .editInput {
						width: 60px;
						padding-left: 10px;
						text-align: right;
					}

/* Tree holder pagination treeViewFooter*/
.treeViewHolder .treeViewFooter {
	width: 100%;
	border: 1px solid #0E9AEF;
	border-top: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

	.treeViewHolder .treeViewFooter .paginatedFooterControlsHolder {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.treeViewHolder .treeViewFooter .tableReturnToFirstHolder {
		height: 30px;
		width: 30px;
		margin-left: -30px;
	}

		.treeViewHolder .treeViewFooter .tableReturnToFirstHolder svg {
			height: 65%;
			width: 65%;
			cursor: pointer;
			transform: rotate(90deg);
			margin-top: 5px;
		}

			.treeViewHolder .treeViewFooter .tableReturnToFirstHolder svg polygon {
				fill: #0E9AEF;
			}

			.treeViewHolder .treeViewFooter .tableReturnToFirstHolder svg:hover polygon {
				fill: #79AFF2;
			}

	.treeViewHolder .treeViewFooter .tableBackwardsHolder {
		height: 30px;
		width: 30px;
	}

		.treeViewHolder .treeViewFooter .tableBackwardsHolder svg {
			height: 100%;
			width: 100%;
			cursor: pointer;
		}

		.treeViewHolder .treeViewFooter .tableBackwardsHolder.disabled svg {
			cursor: default;
		}

		.treeViewHolder .treeViewFooter .tableBackwardsHolder svg polygon {
			fill: #0E9AEF;
		}

		.treeViewHolder .treeViewFooter .tableBackwardsHolder svg:hover polygon {
			fill: #79AFF2;
		}

		.treeViewHolder .treeViewFooter .tableBackwardsHolder.disabled svg polygon {
			fill: #EDEDED;
		}

	.treeViewHolder .treeViewFooter .tableForwardsHolder {
		height: 30px;
		width: 30px;
	}

		.treeViewHolder .treeViewFooter .tableForwardsHolder.out {
			display: none;
		}

		.treeViewHolder .treeViewFooter .tableForwardsHolder svg {
			height: 100%;
			width: 100%;
			cursor: pointer;
		}

		.treeViewHolder .treeViewFooter .tableForwardsHolder.disabled svg {
			cursor: default;
		}

		.treeViewHolder .treeViewFooter .tableForwardsHolder svg polygon {
			fill: #0E9AEF;
		}

		.treeViewHolder .treeViewFooter .tableForwardsHolder svg:hover polygon {
			fill: #79AFF2;
		}

		.treeViewHolder .treeViewFooter .tableForwardsHolder.disabled svg polygon {
			fill: #EDEDED;
		}

	.treeViewHolder .treeViewFooter .pageNumber {
		color: #0E9AEF;
		font-size: 18px;
	}

	.treeViewHolder .treeViewFooter .paginatedFooterControlsHolder .tableLoader {
		display: none;
		border: 4px solid #EDEDED;
		border-radius: 50%;
		border-top: 4px solid #0E9AEF;
		width: 25px;
		height: 25px;
		-moz-animation: spin 1s linear infinite;
		-webkit-animation: spin 1s linear infinite;
		animation: spin 1s linear infinite;
		position: relative;
		background: none;
		margin-left: 5px;
	}

		.treeViewHolder .treeViewFooter .paginatedFooterControlsHolder .tableLoader.in {
			display: block;
		}

		.treeViewHolder .treeViewFooter .paginatedFooterControlsHolder .tableLoader :before {
			width: 0;
		}

		.treeViewHolder .treeViewFooter .paginatedFooterControlsHolder .tableLoader :after {
			width: 0;
		}