#selectImageDialog
	width: 80%
	height: 80%
	.dialog
		display: table
		//min-height: 320px
		//height: auto
		overflow: hidden
		height: 100%
		width: 100%

		.leftControls
			display: table-cell
			vertical-align: top
			background: #EEE
			height: 100%
			min-height: 320px
			min-width: 120px
			-webkit-box-shadow: 2px 0 5px -2px rgba(0,0,0,0.65)
			-moz-box-shadow: 2px 0 5px -2px rgba(0,0,0,0.65)
			box-shadow: 2px 0 5px -2px rgba(0,0,0,0.65)
			h1
				font-size: 12px
				font-weight: 800
				font-name: Arial, "Sans Serif"
				text-decoration: none
				text-transform: uppercase
				background-color: #7babab
				padding-top: 1px
				white-space: nowrap
			div
				white-space: nowrap
			input::-webkit-outer-spin-button, input::-webkit-inner-spin-button
				//display: none; <- Crashes Chrome on hover
				-webkit-appearance: none;
				margin: 0  //Apparently some margin are still there even though it's hidden
			label.checkContainer
				line-height: 14px
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				input[type='checkbox'], .checked
					display: none
				input[type='checkbox']:checked ~ .checked
					display: inline-block
				input[type='checkbox']:checked ~ .unchecked
					display: none
				.unchecked
					margin-right: 2px
			.number
				display: inline-block
				width: 100px
				user-select: none;
			.leftArrow, .rightArrow
				display: inline-block
				//width: 20px
				padding: 0 4px
				margin: 0 5px
				cursor: pointer
				text-decoration: none
				border: 0
				border-radius: 8px
				user-select: none;
			.leftArrow:hover, .rightArrow:hover
				background-color: white
			.leftArrow:active, .rightArrow:active
				background-color: #999

		.canvasContainer
			display: table-cell
			vertical-align: top
			height: auto
			width: 100%
			padding-left: 4px
			.canvasWrapper
				position: relative
				width: 100%
				height: 100%
				overflow: auto
				.insertImageCanvas
					position: absolute
					left: 0
					right: 0
					top: 0
					bottom: 0
					display: block
					border: 1px solid #888
					cursor: pointer
					//Setting a max causes the canvas to scale automatically
					//max-height: 100%
					//max-width: 100%
				.insertImageCanvas.empty
					border: 3px dashed #444
					border-radius: 10px
					margin: 20px 20px
		.close, .select
			position: absolute
			top: 6px
			height: 30px
			width: 30px
			background-color: #BBB
			border: 1px solid #999
			border-radius: 8px
			line-height 30px
			text-align: center
			cursor: pointer
		.close
			right: 20px
			color: #A31
		.select
			right: 56px
			color: #072
		.close:hover, .select:hover
			background-color: #EEE
		.close:active, .select:active
			background-color: #999