html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

[onClick] {
	cursor: pointer;
}

body {
	font-family: sans-serif;
}

.records-tree {
	display: grid;
	grid-template-columns: min-content min-content 1fr;
	white-space: nowrap;

	.show {
		display: block !important;
	}

	.top,
	.record,
	.type,
	.value {
		display: none;
		border-bottom: 1px solid #ccc;
		padding: 4px 0px;
	}

	.top {
		font-weight: bold;
		background-color: #f8f8f8;
		user-select: none;
		grid-template-columns: repeat(3, min-content);
		align-items: center;

		&.open {
			.folder.open {
				display: inline-block;
			}
			.folder.closed {
				display: none;
			}
		}

		&:not(.open) {
			.folder.open {
				display: none;
			}
			.folder.closed {
				display: inline-block;
			}
		}

		img {

			height: 16px;
			display: none;
			margin-right: 4px;
		}


		span:first-child {
			color: #800033;
		}

		span:last-child {
			color: #444;
			font-weight: normal;
		}
	}

	.top+.type,
	.top+.type+.value {
		background-color: #f8f8f8;
	}

	.top-most,
	.top-most + .type,
	.top-most + .type + .value
	{
		display:grid;
	}

	.record {
		display: none;
		font-weight: normal;
		color: #444;

		span:first-child {
			color: #800033;
		}

		span:last-child {
			color: #888;
		}
	}

	.record+.type,
	.record+.type+.value {
		display: none;
		padding-left: 16px;
	}

	.record+.type+.value {
		color: #800033;
	}
}