.tric-table-wrap {
	margin: 0 0 2em;
	font-size: 14px;
}

.tric-table-wrap *,
.tric-table-wrap *::before,
.tric-table-wrap *::after {
	box-sizing: border-box;
}

.tric-table td {
	overflow-wrap: anywhere;
}

.tric-table-title {
	margin: 0 0 .75em;
}

.tric-table-tools {
	display: flex;
	justify-content: flex-end;
	margin-bottom: .5em;
}

.tric-table-tools input {
	margin-left: .4em;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	min-width: 200px;
}

.tric-table-scroll {
	overflow-x: auto;
}

.tric-table {
	width: 100%;
	border-collapse: collapse;
}

.tric-table th,
.tric-table td {
	padding: 8px 10px;
	border: 1px solid #e2e2e2;
	text-align: left;
	vertical-align: top;
}

.tric-table thead th {
	background: #f5f5f5;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.tric-table thead th::after {
	content: " \2195";
	color: #aaa;
	font-size: .85em;
}

.tric-table thead th[aria-sort="ascending"]::after {
	content: " \2191";
	color: #333;
}

.tric-table thead th[aria-sort="descending"]::after {
	content: " \2193";
	color: #333;
}

.tric-table tbody tr:nth-child(even) {
	background: #fafafa;
}

.tric-table-empty td {
	text-align: center;
	color: #777;
}

.tric-table-img {
	max-width: 100%;
	height: auto;
}

.tric-table-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5em;
	margin-top: .5em;
}

.tric-table-pager button {
	margin-left: 2px;
	padding: 3px 9px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}

.tric-table-pager button.is-current {
	background: #333;
	border-color: #333;
	color: #fff;
}

.tric-table-pager button:disabled {
	opacity: .4;
	cursor: default;
}

@media (max-width: 640px) {
	.tric-table thead {
		display: none;
	}

	.tric-table,
	.tric-table tbody,
	.tric-table tr,
	.tric-table td {
		display: block;
		width: 100%;
	}

	.tric-table tr {
		margin-bottom: .75em;
		border: 1px solid #e2e2e2;
	}

	.tric-table td {
		border: 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.tric-table td::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		color: #555;
	}

	.tric-table-tools input {
		min-width: 0;
		width: 100%;
	}
}