/*
 * Default
 */
.wrap {
	font-family: monospace;
}

[data-tooltip] {
	text-decoration: underline dashed;
}

[data-tooltip]:before,
[data-tooltip]:after {
	position: absolute;
}

[data-tooltip]:before {
	bottom: 100%;
	left: 50%;
}

[data-tooltip]:after {
	margin-left: -50%;
	padding: 0.4em 0.8em;

	background-color: rgba(51, 51, 51, 0.6);
	color: #f4f4f4;
}

[data-tooltip]:hover {
	text-decoration-style: solid;
}

[data-tooltip]:hover:after {
	content: attr(data-tooltip);
	position: absolute;
	background-color: #000;
}

/*
 * Single Page Layout
 */
.wrap {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: [header-start] minmax(0, 10vh) [content-start] minmax(0, calc(80vh - 52px - 65px) ) [footer-start] minmax(0, 10vh);
}

/*
 * Heading
 */
.wrap h1 {
	margin-bottom: 1em;

	overflow: hidden auto;
}

main {
	overflow: hidden auto;

	border: 1px solid #d9d9d9;
}

/*
 * Table
 */
table {

}

tr {
	cursor: default;
}

th,
td {
	padding: 0.4em 0.8em;
}

th {
	text-align: left;
}

thead {
	position: sticky;
	top: 0;
	background-color: #f4f4f4;
}

thead th {
  border-bottom: 1px solid #d9d9d9;
}

/* Options */
td.options {
	opacity: 0;
}

tr:hover td.options {
	opacity: 1;
}


/*
 * Error Types
 */
tbody tr[class*="error"] {
	background-color: rgba(255, 0, 0, 0.05);
	border-left: 1px solid rgba(255, 0, 0, 0.25);
	border-right: 1px solid rgba(255, 0, 0, 0.25);
}

tbody tr[class*="warning"] {
	background-color: rgba(255, 128, 0, 0.05);
	border-left: 1px solid rgba(255, 128, 0, 0.25);
	border-right: 1px solid rgba(255, 128, 0, 0.25);
}

tbody tr[class*="notice"] {
	background-color: rgba(255, 255, 0, 0.05);
	border-left: 1px solid rgba(255, 255, 0, 0.25);
	border-right: 1px solid rgba(255, 255, 0, 0.25);
}

tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/*
 * Textarea
 */
textarea {
	width: 100%;
	height: 62.5vh;
}

/*
 * Row
 */
.wrap .row {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}

.wrap .row > * {
	margin-right: 0.8em;
}

.wrap .row:last-child {
	margin-right: 0;
}

.wrap .row_end {
	margin-left: auto;
}