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 1fr;
	white-space: nowrap;

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

	.top {
		font-weight: bold;
		background-color: #f8f8f8;

		span:first-child {
			/*color: #004680;*/
		}

		span:last-child {
			color: #444;
			font-weight: normal;
		}
	}
	.top + .type {
		background-color: #f8f;
	}

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

		&.show {
			display: block;
		}

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

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

	.record + .type {
		color: #f0f;
	}
}