:root {
	--u1-sticky-top: 0px;
	--u1-table-bg: #fff;
}
.u1-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;

	/*WHY: Sometimes slightly different colored backgrounds parent conflict with zebra striping..
		LONGTERM: A better option should be customizable background color from the table so this 
		doesn't need to be overriden by other class. But maybe not. Testing/use will give an answer 
		here later.
		*/
	background: var(--u1-table-bg);
}

.u1-table th {
	/*WHY: Because by default th are centered, and td are left align.
	And by leaving td to their default, it's easier to override with other
	classes and styles.*/
	text-align: left;
}
.u1-table th,
.u1-table td {
	padding: 0.9rem 1.6rem;
	vertical-align: top;
}

.u1-table-sortable th:hover {
	cursor: pointer;
	background: hsla(0, 0%, 0%, 0.05);
	user-select: none; /* Pressing shift to multi-sort causes selection of headers */
}

.u1-th-is-sorted {
	background: hsla(0, 0%, 0%, 0.03);
}

.u1-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.u1-table thead {
	background: linear-gradient(#fff calc(100% - 2px), rgb(70, 70, 70) calc(100% - 2px));
}
.u1-table thead,
.u1-table thead th {
	/*ICKY HACK: th Needed because Chrome won't work with sticky on thead...*/
	position: sticky;
	top: calc(0px + var(--u1-sticky-top));
	z-index: 1; /*Must display over top of table contents*/
}

.u1-table tbody tr {
	background: #fff;
}

.u1-table tr:nth-child(even) {
	background: hsla(0, 0%, 0%, 0.04);
}

.u1-auto-table-search {}

@media (max-width: 960px) {
	.u1-table {
		--u1-mobile-cols: 2;
		display: flex;
		flex-direction: column;
	}
	.u1-table thead {
		font-size: 1rem;
	}
	.u1-table tr {
		display: flex;
		flex-wrap: wrap;
	}
	.u1-table td,
	.u1-table th {
		flex: 1 1 calc(100% / var(--u1-mobile-cols));
		border: none;
		border-width: 0 1px 1px 0;
		padding: 0.4rem 1rem;
	}
	.u1-table tbody tr {
		border: 1px solid hsla(0, 0%, 0%, 0.06);
		border-width: 1px 0 1px 0;
		border-radius: 0;
		overflow: hidden;
	}
}