.cwListContainer {
	/* overflow: auto; */
	max-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
}

.cwListContainer .filterArea {
	display: flex;
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: center;
	align-items: center;
	max-width: 100dvw;
}

.cwListContainer .filterArea .filterInput {
	/* width: 25ch; */
	max-width: 20ch;
	min-width: 5ch;
	/* min-width: 0; */
	font-size: inherit;
	padding: 0 0.25rem;
}

.cwListContainer .filterArea .pickFilterCntArea {
	margin-left: 0.5rem;
	white-space: nowrap;
}

.cwListContainer table {
	user-select: none;
	border-collapse: collapse;
	margin: 0 auto;
	position: relative;
	/* min-height: 300px; */
	/* outline: 2px solid; */
}

.cwListContainer table thead {
	border-top: 1px solid;
	border-right: 1px solid;
	border-left: 1px solid;
}

/* 2025-07-16 Needed to stop the last divider from causing horizontal scroll bar to appear */
.cwListContainer table thead th:last-child {
	overflow: hidden;
}

/* .cwListContainer table th {
	display: flex;
	align-items: center;
	justify-content: center;
} */

.cwListContainer table th {
	position: relative;
}

.cwListContainer table td {
	/* position: relative; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* .cwListContainer table th, */
.cwListContainer table tbody tr {
	cursor: pointer;
	/* white-space: nowrap; */
}

.cwListContainer table th .thTitle,
.cwListContainer table th .filterIconWrapper {
	cursor: pointer;
}

.cwListContainer table tr[selected],
.cwListContainer table tr[selected] th,
.cwListContainer table tr[selected] td {
	white-space: normal;
}

.cwListContainer table .showOnSelect {
	display: none;
}

.cwListContainer table [selected] .showOnSelect {
	display: revert;
}

.cwListContainer .filterClearBtn {
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1.25rem;
	font-weight: bold;
	padding: 0 0.25rem;
}

.cwListContainer table th[data-sort="desc"] .thTitle::after {
	content: "▼";
}

.cwListContainer table th[data-sort="asc"] .thTitle::after {
	content: "▲";
}

.cwListContainer table th .filterIconWrapper {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: text-bottom;
	margin-left: 0.25em;
}

.cwListContainer table th .filterIcon {
	pointer-events: none;
}

/* .cwListContainer table th .filterIcon path {
	pointer-events: none;
} */

.cwListContainer table th .filterIconWrapper:hover {
	outline: 2px solid;
	border-radius: 3px;
}

/* This color var is changed through js in cwList.js, this is just the default*/
.cwListContainer table tbody.stripe {
	--cw-list-stripe-color: rgba(0, 128, 0, 0.1);
}

.cwListContainer table tbody.stripe tr:nth-child(even) {
	background-color: var(--cw-list-stripe-color);
}

.cwListContainer table tbody tr[selected] {
	background-color: rgba(0, 0, 0, 0.2) !important;
}

.cwListContainer table td {
	border: 1px solid;
}
/* ====================================== Filter Action Group ========================================== */
.cwListContainer .filterActionGrp {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	max-width: 100dvw;
	margin-bottom: 0.5rem;
}

/* ====================================== list Action Area ========================================== */
.cwListContainer .listActionArea {
	display: flex;
	justify-content: center;
	align-items: center;
}

.cwListContainer .listActionArea button {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	/* padding: 3px 5px; */
	/* border-radius: 3px; */
}

/* ====================================== Column Filter ========================================== */
.cwListContainer .filterIconWrapper {
	position: relative;
}

.cwListContainer .colFilterWrapper {
	position: absolute;
	top: 1.5em;
	left: 0;
	/* background-color: rgba(255, 255, 255, 0.95); */
	background-color: rgb(185 219 255 / 95%);
	border: 2px solid;
	border-radius: 5px;
}

.cwListContainer .colFilterWrapper .filterForm {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem;
}

.cwListContainer .colFilterWrapper .filterForm .booleanOperatorWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.cwListContainer .colFilterWrapper .filterForm .setWrapper {
	margin-top: 0.5rem;
}

.cwListContainer .colFilterWrapper .filterForm .setWrapper .setValuesContainer {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 0.2rem;
	margin-top: 0.2rem;
	max-height: 15rem;
	overflow: auto;
	border: 1px solid;
	padding: 0.25rem;
}

.cwListContainer .colFilterWrapper .filterForm .setWrapper .setValuesContainer label {
	display: flex;
	align-items: center;
	gap: 3px;
	font-weight: normal;
}

.cwListContainer .colFilterWrapper .filterForm .setWrapper .setFilterWrapper {
	display: flex;
	gap: 5px;
	align-items: center;
}

.cwListContainer .colFilterWrapper .footer {
	display: flex;
	gap: 5px;
	align-self: flex-end;
}

/* ====================================== Column Resize ========================================== */
.cwListContainer table th .resizeHandle {
	display: inline-block;
	height: 1.25em;
	width: 16px;
	position: absolute;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	margin-right: -8px;
	cursor: ew-resize;
	touch-action: none;
	z-index: 1;
}

.cwListContainer table th .resizeHandle::before {
	content: "";
	display: block;
	width: 2px;
	height: 100%;
	margin: 0 auto;
	background-color: rgba(0, 0, 0, 0.25);
}

/* ====================================== Column Sizing ========================================== */
/* 2025-06-28 did this so could control table columns to fixed size so they don't change when content changes
helps keep things consistent when filters are applied.
th will hold the column width consistent.
If none of these classes are used on the th in the table scaffold it will revert back to auto size as default.
*/

/* Only the TD will shrink, th will hold column open, or the sizing set on the table scaffold */
.cwListContainer table.tdWidth-0 td {
	max-width: 0;
}

.cwListContainer table th.width-6 {
	min-width: 6ch;
	max-width: 6ch;
}

.cwListContainer table th.width-12 {
	min-width: 12ch;
	max-width: 12ch;
}

.cwListContainer table th.width-17 {
	min-width: 17ch;
	max-width: 17ch;
}

.cwListContainer table th.width-23 {
	min-width: 23ch;
	max-width: 23ch;
}

.cwListContainer table th.width-30 {
	min-width: 30ch;
	max-width: 30ch;
}

.cwListContainer table th.width-43 {
	min-width: 43ch;
	max-width: 43ch;
}

.cwListContainer table th.width-money {
	min-width: 10ch;
	max-width: 10ch;
}

.cwListContainer table th.width-date {
	min-width: 12ch;
	max-width: 12ch;
}

.cwListContainer table th.width-dateTime {
	min-width: 22ch;
	max-width: 22ch;
}