

div.mcx-element > label, div.mcx-elementcontent > label
{
	margin: 8px;
	font-weight: bold;
}
div.mcx-element.uwt-listview
{
	margin: 8px;
}
table.mcx-element.uwt-listview
{
	&:not(.mcx-editable)
	{
		&> tr > th, &> thead > tr > th, &> tr > td, &> tbody > tr > td
		{
			&.uwt-listview-row-buttons
			{
				display: none;
			}
		}
	}
}

div.mcx-element
{
	display: grid;
	&.uwt-tabcontainer
	{
		margin-top: 16px;
	}
}
div.uwt-listview.mcx-element
{
	&> div.uwt-content
	{
		&> div.uwt-listview-column-headers
		{
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: minmax(0, 1fr);
			&> div.uwt-listview-column-header
			{
				margin: 0px;
				padding: 8px;
			}
		}
		&> div.uwt-listview-items > div.uwt-listview-item
		{
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: minmax(0, 1fr);
			&> div.mcx-elementcontent
			{
				padding: 8px;
			}
		}
	}
}
div.mcx-element
{
	&.mcx-display-subelements-vertically
	{
		display: flex;
		flex-direction: column;
	}
}

div.mcx-elementcontent
{
	display: grid;

	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;

	&> *
	{
		// display: table-cell;
		margin: 8px;
		vertical-align: top;
	}
	&> div:last-child
	{
		&:first-child
		{
			// do not show label
			grid-column-start: 1;
			grid-column-end: 2;
		}
		&> input
		{
			width: 100%;
			box-sizing: border-box;
		}
	}
}


// these styles override the previous ones earlier defined
div.mcx-element
{
	display: block;
}
div.mcx-element > label, div.mcx-elementcontent > label
{
	display: table-cell;
	padding: 8px;
	padding-right: 32px;
}

div.mcx-elementcontent
{
	&:not(.uwt-listview-item-column)
	{
		display: table-row;
	}
	&.uwt-listview-item-column
	{
		display: table-cell;
	}
	&.mcx-failed-validation
	{
		&> div
		{
			&> input, &> div.mcx-instancebrowser
			{
				border: solid 1px var(--uwt-color-danger);
				box-shadow: 0px 0px 4px var(--uwt-color-danger);
			}
		}
	}
}
