/* ++
	ScrollView.css
-- */
div.scroll-view table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--grid-border-color);
}

@media all and (max-aspect-ratio: 13/9) {
	div.scroll-view thead, div.scroll-view tbody {
		width: calc(100% - 0px); /* - 5px because of the scrollbar width */
	}
}

@media all and (min-aspect-ratio: 13/9) {
	div.scroll-view thead {
		width: calc(100% - 17px); /* - 17px because of the scrollbar width */
	}
}

div.scroll-view thead {
	display: table; /* to take the same width as tr */
}

div.scroll-view th {
	background-color: var(--grid-header-background);
	vertical-align: middle;
	color: var(--grid-header-foreground);
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	word-break: break-all;
}

	div.scroll-view th i {
		font-size: 14pt;
		display: inline-block;
		vertical-align: middle;
		margin-left: 3px;
	}

	div.scroll-view th span {
		display: inline-block;
		vertical-align: middle;
	}


div.scroll-view tbody {
	display: block; /* to enable vertical scrolling */
	overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

	div.scroll-view tbody tr {
		display: table; /* display purpose; th's border */
		width: 100%;
		box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
	}

div.scroll-view td {
	border-collapse: collapse;
	border: 1px solid var(--grid-border-color);
	border-top: none;
	border-left: none;
	border-right: none;
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 7px;
	padding-bottom: 7px;
	word-break: break-all;
}

div.scroll-view tr.deleted td {
	text-decoration: line-through;
}

div.scroll-view td.edited {
	text-decoration: line-through;
}

div.scroll-view tr.clickable:hover td {
	background-color: #eeeeee;
}

div.scroll-view td.clickable {
	cursor: pointer;
}


div.scroll-view div.footer {
	text-align: center;
	padding-top: 15px;
	font-weight: bold;
}


div.scroll-view span.highlight-result {
	background-color: #ffff80;
}