:root {
	--line-color: #ccc;
	--line-color-record: #eee;

	--type-background: #ddd;
	--type-foreground: #000;

	--label-first: #800033;
	--label-rest: #666;

	--label-background: #f8f8f8;
	--label-border: #ccc;

	--copy-color: #d48700;
}

html {
	box-sizing: border-box;
}

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

[onClick] {
	cursor: pointer;
}

body {
	font-family: sans-serif;
	font-size: 12pt;
	margin-left: 32px;
}

#records-tree {
	white-space: nowrap;

	.folder {
		padding-left: 32px;

		&.top-most {
			padding-left: 0px;
		}

		&.open {
			&>.label>img.open {
				display: block;
			}
		}

		&.closed {
			&>.label>img.closed {
				display: block;
			}

			&>.subfolders {
				display: none;
			}

			&>.records {
				display: none;
			}
		}

		&>.label {
			display: grid;
			grid-template-columns: min-content min-content 1fr;
			align-items: center;
			padding: 5px 0px;
			cursor: pointer;
			user-select: none;

			/*
			background-color: var(--label-background);
			width: min-content;
			padding: 4px 8px;
			border-radius: 4px;
			border: 1px solid var(--label-border);
			margin-top: 8px;
			margin-bottom: 8px;
			*/

			img {
				height: 20px;
				margin-right: 6px;
				display: none;
			}
		}

		&>.subfolders {
			border-left: 1px solid var(--line-color);
			margin-left: 10px;
		}

		&>.records {
			padding-left: 30px;
			margin-left: 10px;

			display: grid;
			grid-template-columns: repeat(3, min-content) 1fr;
			grid-gap: 4px 10px;
			align-items: center;
			border-left: 1px solid var(--line-color);

			&>img {
				display: block;
				padding-left: 4px;
			}

			.copy {
				color: var(--copy-color) !important;

				span {
					color: var(--copy-color) !important;
				}
			}

			.fqdn {
				cursor: pointer;
				user-select: none;

				.first-label {
					color: var(--label-first);
				}

				.rest-label {
					color: var(--label-rest);
				}
			}

			.type {
				background-color: var(--type-background);
				color: var(--type-foreground);
				padding: 4px 8px;
				border-radius: 4px;
				margin-top: 2px;
				margin-bottom: 2px;
				width: min-content;
				font-weight: bold;
				font-size: 0.85em;
			}

			.value {
				cursor: pointer;
				user-select: none;
			}

			.separator {
				grid-column: 1 / -1;

				&:not(:last-child) {
					border-bottom: 1px solid var(--line-color-record);
				}
			}

		}

	}
}


#record-dialog {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-gap: 8px;
	align-items: center;

	.buttons {
		grid-column: 1 / -1;
		text-align: right;
	}

}

input, select, button {
	font-size: 1em;
	padding: 4px 8px;
}