/* Custom UX Builder table — child theme */

.ux-table {
	--ux-table-cols: 6;
	--ux-table-bg: #f7f6f4;
	--ux-table-border-color: #d5cfc6;
	--ux-table-border-width: 1px;
	--ux-table-color: #8a8178;
	--ux-table-padding: 22px;
	--ux-table-min-height: 76px;
	--ux-table-font-size: 0.75rem;
	--ux-table-font-weight: 600;
	--ux-table-letter-spacing: 0.06em;
	display: grid;
	grid-template-columns: repeat(var(--ux-table-cols), minmax(0, 1fr));
	width: 100%;
	max-width: 100%;
	padding: var(--ux-table-border-width);
	gap: var(--ux-table-border-width);
	background-color: var(--ux-table-border-color);
	color: var(--ux-table-color);
	box-sizing: border-box;
}

.ux-table > style {
	display: none !important;
}

.ux-table > *:not(.ux-table-cell):not(style) {
	display: contents;
}

.ux-table > .ux-table-cell {
	min-width: 0;
}

.ux-table-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: var(--ux-table-min-height);
	padding: var(--ux-table-padding) 8px;
	background-color: var(--ux-table-cell-bg, var(--ux-table-bg));
	color: inherit;
	font-size: var(--ux-table-font-size);
	font-weight: var(--ux-table-font-weight);
	letter-spacing: var(--ux-table-letter-spacing);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.ux-table-cell,
.ux-table-cell:hover,
.ux-table-cell:focus,
a.ux-table-cell,
a.ux-table-cell:hover,
a.ux-table-cell:focus {
	color: inherit;
	text-decoration: none;
}

a.ux-table-cell {
	cursor: pointer;
}

.ux-table-cell__text {
	max-width: 100%;
}

.ux-table.is-uppercase .ux-table-cell {
	text-transform: uppercase;
}

.ux-table.is-capitalize .ux-table-cell {
	text-transform: capitalize;
}

.ux-table.align-left .ux-table-cell {
	justify-content: flex-start;
	text-align: left;
}

.ux-table.align-right .ux-table-cell {
	justify-content: flex-end;
	text-align: right;
}

.ux-table.v-align-top .ux-table-cell {
	align-items: flex-start;
}

.ux-table.v-align-bottom .ux-table-cell {
	align-items: flex-end;
}

.ux-table-cell.is-header {
	background-color: var(--ux-table-header-bg, #efece8);
	font-weight: 700;
}

.ux-table.has-hover .ux-table-cell:hover {
	background-color: #efece8;
}

@media (max-width: 549px) {
	.ux-table {
		font-size: 0.75rem;
	}
}