:root {
	--color-table-border: #e1e1e1;
	--color-table-legend-bg: #eee;
	--color-table-legend-text: #aaa;
	--color-table-head-bg: #f9f9f9;
	--color-table-foot-bg: #f9f9f9;
	--color-table-active: #2a9bd9;
	--color-table-wp-btn-text: #2271b1;
	--color-table-wp-btn-bg: rgb( 246, 247, 247 );
	--color-table-acf-btn-text: rgb(99, 108, 117);
	--color-table-acf-btn-border: #b5bcc2;
	--color-table-editor-bg: rgb(229, 248, 255 );
	--color-table-editor-border: rgb( 34, 113, 177 );
	--size-1px: .0625em;
}

/* the table wrapper element */

	.editing-table {
		cursor: default;
		font-size: 1rem; /* scale table by increasing the font-size */
		line-height: 0;
		font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	}

/* the table element */

	.editing-table table {
		border-collapse: collapse;
		border: var(--size-1px) solid transparent;
	}

/* default cell styles */

	.editing-table td {
		position: relative;
		height: 2.13em;
		width: 2em;
		padding: 0;
		border: var(--size-1px) solid var(--color-table-border);
	}
	.editing-table ._top td {
		height: auto;
	}

/* top row cells */

	.editing-table ._top td:not(:first-child):not(:last-child) {
		height: 1.9em;
		background-color: var(--color-table-legend-bg);
	}

	.editing-table ._top td:first-child {
		border-left-color: transparent;
		border-top-color: transparent;
		border-bottom-color: transparent;
	}

	.editing-table ._top td {
		color: var(--color-table-legend-text);
		padding-left: 1em;
		text-align: center;
	}

/* thead row cells */

	.editing-table ._thead td:not(:first-child):not(:last-child) {
		background-color: var(--color-table-head-bg);
		font-weight: 600;
		font-variation-settings: 'wght' 600;
	}

	.editing-table ._thead td:first-child {
		border-left-color: transparent;
		border-top-color: transparent;
	}

/* tbody row cells */

	.editing-table ._tbody td {

	}

/* tfoot row cells */

	.editing-table ._tfoot :not(:first-child):not(:last-child) {
		background-color: var(--color-table-head-bg);
		font-weight: 600;
		font-variation-settings: 'wght' 600;
	}

	.editing-table ._tfoot td:first-child {
		border-left-color: transparent;
		border-bottom-color: transparent;
	}

/* bottom row cells */

	.editing-table ._bottom td {
		height: 1.9em;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	.editing-table ._bottom td:first-child {
		border-top-color: transparent;
	}

/* tools right cells */

	.editing-table td:last-child {
		border-right-color: transparent;
		border-top-color: transparent;
		border-bottom-color: transparent;
	}

/* tools left cells */

	.editing-table tr:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) td:first-child {
		background-color: var(--color-table-legend-bg);
		color: var(--color-table-legend-text);
		padding-left: 2em;
	}

/* cell padding */

	.editing-table ._top td:not(:nth-child(1)):not(:nth-last-child(1)),
	.editing-table ._thead td:not(:nth-child(1)):not(:nth-last-child(1)),
	.editing-table ._tfoot td:not(:nth-child(1)):not(:nth-last-child(1)),
	.editing-table ._tbody td:not(:nth-child(1)):not(:nth-last-child(1)) {
		padding-left: 1em;
		padding-right: 2.4em;
	}

/* buttons */

	.editing-table ._btn {
		border: var(--size-1px) solid var(--color-table-acf-btn-border);
		display: block;
		width: 1.125em;
		height: 1.125em;
		border-radius: 50%;
		position: absolute;
		z-index: 1;
		background-color: #fff;
	}

	.editing-table ._top ._btn {
		right: -.62em;
		top: -.62em;
	}
	.editing-table ._bottom ._btn {
		margin: auto;
		left: 50%;
		transform: translate(-50%, 0);
		top: .4em;
	}

	/* tools left cells */
	.editing-table tr:not(:nth-child(-n+1)):not(:nth-last-child(-n+2)) td:first-child ._btn {
		left: -.62em;
		bottom: -.73em;
	}

	/* tools right cells */
	.editing-table td:last-child ._btn {
		left: .4em;
		top: .4em;
	}

	/* plus */
	.editing-table ._btn._plus:before,
	.editing-table ._btn._plus:after {
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: var(--size-1px);
		background-color: var(--color-table-acf-btn-text);
	}
	.editing-table  ._btn._plus:before {
		width: 56%;
		height: .125em;
	}
	.editing-table  ._btn._plus:after {
		width: .125em;
		height: 56%;
	}

	/* minus */
	.editing-table ._btn._minus:before {
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: var(--size-1px);
		background-color: var(--color-table-acf-btn-text);
		width: 56%;
		height: .125em;
	}
