.customFieldPage__search {
	display: flex;
	gap: 16px;
	max-width: 50%;
	padding-bottom: 12px;
	align-items: center;

	.searchInput {
		border-radius: 18px;
		background: var(--base-hlt-g-easy);
		box-shadow: var(--shadow-brd-enable);
		margin: 0;
		height: 36px;

		.delete {
			padding-right: 8px;
			--icon-color: var(--base-txt-tertiary);
		}
	}
}

table.customFieldPage__table {
	font: var(--font-ui-14-regular-reg);
	color: var(--base-txt-secondary);
	margin: 16px 0;
	border: 0;
	width: 100%;
	border-collapse: collapse;

	tr {
		transition: all 0.5s;
		border-top: 0.5px solid var(--base-txt-ghost);
	}

	td {
		padding: 8px 4px;
		background: transparent;
		white-space: nowrap;
	}

	th {
		padding: 0;
		height: 40px;
		background: var(--base-cont-top);
		color: var(--base-txt-accent);
		font: var(--font-ui-13-small-med);
		border-top: none;
		text-align: left;
		white-space: nowrap;
	}
	th.sortable {
		--icon-color: var(--base-txt-btn-b);
		ws-icon {
			margin-left: 4px;
			margin-right: -24px;
			transition: transform 0.3s;
		}
		ws-icon.rotated_up {
			transform: rotate(180deg);
		}
		span:not(:first-child) {
			padding-left: 40px;
		}
	}

	tbody tr, tfoot tr { cursor: pointer; }

	tbody tr:hover td,
	tbody tr.active td,
	tfoot tr:hover td,
	tfoot tr.active td { background: var(--base-cont-top); }

	.customFieldPage__addRow {
		ws-icon { --icon-color: var(--base-txt-btn-b); }
		td span {
			color: var(--base-txt-btn-b);
			font: var(--font-ui-14-regular-reg);
		}
	}

	tr {
		td.td_icon {
			padding: 8px 12px;
			width: 1%;
			ws-icon { --icon-color: var(--base-txt-ghost); }
			ws-icon[name=lock_sm] {--icon-color: var(--base-txt-btn-w);}
		}
		td.td_name {
			color: var(--base-txt-primary);
			font: var(--font-ui-14-regular-semi);
			width: 20%;
			text-transform: uppercase;
		}
		td.td_type {
			color: var(--base-txt-secondary);
			font: var(--font-ui-13-small-reg);
			width: 10%;
			& > .flex_row { column-gap: 8px; }
		}
		td.td_descr {
			width: auto;
			color: var(--base-txt-tertiary);
			font: var(--font-ui-12-mini-reg);
			max-width: 200px;
		}
		td.td_usage {
			text-align: right;
			width: 1%;
		}
		td.td_options {
			padding: 8px 8px 8px 4px;
			width: 1%;
		}
	}
}