@import "../style/variables";

.htk-grid {
	margin: auto;
	border-collapse: collapse;

	& > thead > tr,
	& > tfoot > tr {
		background-color:  $color-primary;
		vertical-align: middle;
		height: 3em;
	}
	th {
		color: white;
		cursor: pointer;
		font-weight: normal;
		padding: 0 0.4em;
	}
	th:hover {
		background-color: rgba(1, 1, 1, 0.2);
	}
	tr {
		height: 3.5em;
	}
	& > tfoot a,
	& > thead a {
		color: black;
	}
	tr.pair-row {
		background-color: transparent;
	}
	& > tbody tr {
		border-top: 1px solid #DDD;
	}
	& > tbody tr:first-child {
		border-top: none;
	}
	& > tbody td {
		margin: 0;
		padding: 0 0.5em;
	}
	th,
	td {
		text-align: left;
	}
	td:first-child,
	th:first-child {
		padding-left: 1em;
	}
	td:last-child,
	th:last-child {
		padding-right: 1em;
	}
	.message {
		padding: 1.5em;
		text-align: center;
	}
	.message > * {
		display: inline-block;
		vertical-align: middle;
		padding-right: .8em;
	}
}