Added custom scroll bars and separated the table header from the tables for Sales and the Graphs tables.

imports/ui/SalesSheetEditor.import.styl

@@ -1,21 +1,58 @@
 #salesSheetsMain
 	.salesSheetEditorControls
 		margin-bottom: 8px
-	.salesSheetEditorProductSelectionControls
+	.tableControls
 		margin-bottom: 8px
 		width: 100%
-		text-align: right
+		//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.5em
+			font-size: 1.3em
 			width: 400px
 			.include, .includeAs
 				text-overflow: ellipsis
@@ -25,26 +62,26 @@
 				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
-	.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
+				color: #4a4a4a
+				font-size: 1.1em
 				margin-bottom: 6px
 				text-overflow: ellipsis
 				white-space: nowrap