#salesSheetsMain
	.salesSheetEditorControls
		margin-bottom: 8px
	.tableControls
		margin-bottom: 8px
		width: 100%
		//text-align: left
		border-bottom: 2px solid #a7a8ff

		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: stretch;

		div, span, i
			//display: inline-block
			flex: 0 0 auto
			margin-right: 4px
		.controlLabel
			font-size: 9px
			font-weight: 700
			color: #5a5a5a
			position: relative
			top: -2px
		.toggleShowHidden
			margin: 0 40px 0 0
			position: relative
			top: -4px
			display: inline-block
		input[name='productFilter']
			font-size: 1.2em
			display: inline
			width: auto
		.showAlternateNames
			margin-right: 20px
		.heading
			display: inline-block
			.name
				padding: 6px 10px
				margin-bottom: 6px
				border-radius: 10px
				font-size: 1.4em
				text-transform: uppercase
				font-weight: 800
				background: #c1c2ff
			.nameEditor
				display: none
		.clearFilter
			font-size: 1.6em
	.selectionProductsListing
		width: 100%
		.selectionProduct
			color: #9f9f9f
			font-size: 1.3em
			width: 400px
			.include, .includeAs
				text-overflow: ellipsis
				white-space: nowrap
				overflow: hidden
			.includedRemove, .includedAdd
				cursor: pointer
			.includedRemove:hover, .includedAdd:hover
				color: blue
			span.deactivated
				background: #ff0
				//-webkit-box-shadow: inset 28px 0 10px -10px #fff
				//-moz-box-shadow: inset 28px 0 10px -10px #fff
				//box-shadow: inset 28px 0 10px -10px #fff
				box-shadow: inset 0px 0 100px 0px #fff
			span.hidden
				background: rgba(255, 20, 20, .7)
				//-webkit-box-shadow: inset 28px 0 10px -10px #fff
				//-moz-box-shadow: inset 28px 0 10px -10px #fff
				box-shadow: inset 0px 0px 100px 0px #fff
		.selectionProduct.selected
			color: black
	.configurationProductsListing
		width: 100%
		.product
			width: 300px
			.name
				color: #4a4a4a
				font-size: 1.1em
				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