div.mcx-instancebrowser
{
	&.mcx-inline
	{
		display: inline-block;
	}
	&> div.uwt-title
	{
		display: none;
		font-weight: bold;
		padding: 8px;
	}
	&> ul
	{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		&> li
		{
			&> a.uwt-delete-button
			{
				display: none;
			}
		}
	}
	&> input[type="text"]
	{
		display: none;
		width: 100%;
		box-sizing: border-box;
		border: none;
	}
	&.mcx-editable
	{
		// .TextBoxBase();
		background: #fff;
		transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
		&.mcx-disabled
		{
			background-color: var(--uwt-color-gray-200);
			&> input[type="text"]
			{
				pointer-events: none;
			}
		}
		&> input[type="text"]
		{
			background-color: transparent;
		}
		border: solid 1px var(--uwt-color-gray-400);
		border-radius: 3px;
		box-shadow: none;
		position: relative;
		&::after
		{
			content: "\f03a";
			display: inline-block;
			height: 24px;
			width: 24px;
			font-family: "Font Awesome 6 Pro";
			position: absolute;
			right: 0px;
			top: 5px;
			color: var(--uwt-color-gray);
			pointer-events: none;
		}
		
		&:focus-within
		{
			box-shadow: 0px 0px 4px #00ACAC;
		}
		&::placeholder
		{
			color: #6c757d;
			opacity: 1;
		}
		
		&> input[type="text"]
		{
			border: none;
			box-shadow: none;
			outline-style: none;

			display: block;
			&:not(:focus)
			{
				cursor: default;
			}
		}
		&> ul.mcx-selected-items
		{
			&> li
			{
				display: table;
				background: var(--uwt-color-gray-200);
				border-radius: 4px;
				padding: 0px 8px;
				margin: 8px;
				&> a.uwt-delete-button
				{
					display: inline-block;
					margin: 4px;
					margin-left: 10px;
					padding: 0px 4px;
					color: var(--uwt-color-dark);
					&:hover
					{
						color: var(--uwt-color-black);
						cursor: pointer;
						text-decoration: none;
					}

					&::after
					{
						content: "\f00d";
						font-family: "Font Awesome 6 Pro";
					}
				}
			}
		}
		&> div.mcx-search-results
		{
			position: absolute;
			width: 400px;
			max-height: 200px;
			overflow: scroll;
			overflow-x: hidden;

			&> ul
			{
				&> li
				{
					cursor: pointer;
					&> div.uwt-actionpreviewbutton
					{
						display: block;
						&> a.apb-button
						{
							position: absolute;
							right: 10px;
							top: 0px;
						}
					}
					&:hover
					{
						&> div.uwt-actionpreviewbutton
						{
							&> a.apb-button
							{
								visibility: visible;
								opacity: 1;
							}
						}
					}
				}
			}
			&> div.uwt-spinner
			{
				display: none;
			}
			&.uwt-loading
			{
				&> ul
				{
					display: none;
				}
				&> div.uwt-spinner
				{
					display: block;
				}
			}
			&> div.uwt-placeholder
			{
				padding: 16px;
				color: var(--uwt-color-gray);
				display: none;
			}
			&.mcx-placeholder-visible > div.uwt-placeholder
			{
				display: block;
			}
		}
	}
}
/*
div.mcx-instancebrowser
{
	display: inline-block;
	position: relative;
	
	&:not(.mcx-display-as-count):not(.mcx-editable).mcx-empty
	{
		&::after
		{
			content: "(empty)";
			color: #aaaaaa;
		}
	}
	
	&:not(.mcx-editable) > input
	{
		display: none;
	}
	&> input
	{
		&:not(:focus)
		{
			cursor: default;
		}
	}
	
	&.mcx-editable
	{
		&> input
		{
			padding-right: 32px;
		}
		&::before
		{
			content: "\f0c9";
			position: absolute;
			right: 10px;
			top: 7px;
			pointer-events: none;
			
			font-family: FontAwesome;
			font-size: 16px;
			color: #999;
		}
		&> ul
		{
			border: solid 1px #ccc;
			border-bottom-right-radius: 4px;
			border-bottom-left-radius: 4px;
			margin-top: -1px;
			padding: 4px;
		}
	}
	&.mcx-editable:hover::before, &.mcx-active::before
	{
		color: #00ACAC;
	}
	
	&> ul
	{
		margin: 0px;
		padding: 0px;
		
		&> li
		{
			list-style-type: none;
			&+ li
			{
				padding-top: 8px;
			}
			
			&> a.mcx-count-link
			{
				cursor: pointer;
				&::after
				{
					content: "\f0d7";
					font-family: "FontAwesome";
					padding-left: 4px;
				}
			}
		}
	}
	&> div.uwt-popup > div.uwt-dropdown-content > ul.uwt-menu
	{
		width: max-content;
		min-width: 100%;
		max-width: 400px;
		
		&> li
		{
			&> a
			{
				&> span.uwt-subtitle, &> span.uwt-content
				{
					display: none;
				}
			}
		}
	}

	&:not(.uwt-loading) > div.uwt-popup > div.uwt-spinner
	{
		display: none;
	}
	&.uwt-loading > div.uwt-popup > div.uwt-dropdown-content
	{
		display: none;
	}
}

div.apb-preview.uwt-collapsed
{
	height: 10px;
	overflow: hidden;
	&> div.apb-actions, &> div.apb-content > div > div.uwt-content
	{
		visibility: hidden;
	}
	&> div.apb-content > div > div.apb-title
	{
		position: absolute;
		left: 4px;
		top: 0px;
		&> h1, h2
		{
			display: inline-block;
			font-size: 16pt;
			font-weight: bold;
			margin: 0px;
			margin-right: 8px;
		}
	}
}
*/
body.uwt-javascript-disabled div.mcx-instancebrowser
{
	&.mcx-editable
	{
		&:not(.mcx-disabled)
		{
			&:hover, &:focus-within
			{
				border-color: var(--uwt-color-accent);
			}
			&:focus-within > div.mcx-search-results
			{
				opacity: 1;
				visibility: visible;
			}
		}
	}
}
body:not(.uwt-javascript-disabled) div.mcx-instancebrowser
{
	&.mcx-editable
	{
		&:not(.mcx-disabled)
		{
			&:hover, &:focus-within
			{
				border-color: var(--uwt-color-accent);
			}
			&.mcx-editing > div.mcx-search-results
			{
				opacity: 1;
				visibility: visible;
			}
		}
	}
}
body.uwt-javascript-disabled div.mcx-instancebrowser
{
	&.mcx-editable
	{
		&::after
		{
			display: none;
		}
		background-color: var(--uwt-color-gray-200);
		&> input[type="text"]
		{
			// display: none;
		}
	}
	&> ul.mcx-selected-items
	{
		&> li
		{
			&> a.uwt-delete-button
			{
				&::after
				{
					display: none;
				}
			}
		}
	}
}

body.uwt-javascript-disabled div.mcx-moniker
{
	/*
	override visibility settings for UWT ActionPreviewButton
	since we can specify a non-JS page to present related actions
	*/
	&.apb-selected > a.apb-button
	{
		visibility: visible;
		opacity: 1;
	}
	&:hover, &:focus-within
	{
		&> a.apb-button
		{
			opacity: 1;
			visibility: visible;
			&:hover
			{
				text-decoration: none;
			}
		}
	}
}