#salesSheetsMain
	.salesSheetEditorControls
		margin-bottom: 8px
	.salesSheetEditorProductSelectionControls
		margin-bottom: 8px
		width: 100%
		text-align: right
		input[name='productFilter']
			font-size: 1.2em
			display: inline
			width: auto
		.showAlternateNames
			margin-right: 20px
	.selectionProductsListing
		width: 100%
		.selectionProduct
			color: #9f9f9f
			font-size: 1.5em
			width: 400px
			.include, .includeAs
				text-overflow: ellipsis
				white-space: nowrap
				overflow: hidden
			.includedRemove, .includedAdd
				cursor: pointer
			.includedRemove:hover, .includedAdd:hover
				color: blue
		.selectionProduct.selected
			color: black
	.configurationControls
		width: 100%
		background: #c1c2ff
		border-bottom: 2px solid #a7a8ff
		.heading
			.name
				font-size: 1.5em
				text-transform: uppercase
				font-weight: 800
			.nameEditor
				display: none
	.configurationProductsListing
		width: 100%
		.product
			width: 300px
			.name
				color: #9f9f9f
				font-size: 1.5em
				margin-bottom: 6px
				text-overflow: ellipsis
				white-space: nowrap
				overflow: hidden
			.name.edit
				display: none
			.nameEditor
				display: none
				margin-bottom: 6px
				input[name='name']
					flex: 1 1 auto
					display: inline-block
				.accept, .reject
					flex: 0 0 auto
					font-size: 1.7em
					margin-left: 8px
				.accept:hover
					color: green
				.reject:hover
					color: red
				.accept:active
					text-shadow: 0px 0px 10px #fda1ff
				.reject:active
					text-shadow: 0px 0px 10px #fda1ff
			.nameEditor.edit
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: stretch;
			.measures
				margin: 1px 0 8px 0
		.heading
			width: 300px
			.headingNameRow
				display: flex
				flex-flow: row nowrap
				justify-content: flex-start
				align-items: center
				align-content: stretch
				margin-top: 4px
				margin-bottom: 2px
				border-bottom: 1px solid grey
				.name
					flex: 1 0 auto
					color: black
					font-size: 1.5em
					text-transform: uppercase
					font-weight: 800
					text-overflow: ellipsis
					white-space: nowrap
					overflow: hidden
				.sort
					flex: 0 0 auto
			.headingNameRow.edit
				display: none
			.nameEditor
				display: none
				input[name='name']
					flex: 1 1 auto
					display: inline-block
				.accept, .reject
					flex: 0 0 auto
					font-size: 1.7em
					margin-left: 8px
				.accept:hover
					color: green
				.reject:hover
					color: red
				.accept:active
					text-shadow: 0px 0px 10px #fda1ff
				.reject:active
					text-shadow: 0px 0px 10px #fda1ff
			.nameEditor.edit
				display: flex
				flex-flow: row nowrap
				justify-content: flex-start
				align-items: center
				align-content: stretch
/*** These styles are for the drag and drop.  The D&D element is a child of the body tag while it exists, and as such will not use the styles above. ***/
.heading.gu-mirror
	width: 300px
	.name
		color: black
		font-size: 1.5em
		text-transform: uppercase
		font-weight: 800
		margin-top: 4px
		margin-bottom: 2px
		border-bottom: 1px solid grey
	.nameEditor
		display: none
.product.gu-mirror
	color: #9f9f9f
	font-size: 1.5em
	width: 300px
	.name
		font-size: 1em
	.nameEditor
		display: none
	.measures
		display: none