#userManagement
	margin: 20px 20px
	height: 100%
	//Flex container options.
	flex-flow: column nowrap
	justify-content: space-around  //Spacing between sales along the primary axis.  (vertical spacing for a column layout)
	align-items: flex-start  //Align the sales within a line along the primary axis.  (horizontal alignment for a column layout)
	align-content: center  //Spacing between lines along the secondary axis.  (spacing between columns for a column layout)
	display: -webkit-box
	display: -moz-box
	display: -ms-flexbox
	display: -moz-flex
	display: -webkit-flex
	display: flex
	text-align: left

	.editor
		height: 100%
		overflow-y: auto

	.insert
		flex: none
		width: 100%

		.col-md-6
			padding: 10px 30px 0 30px
			background: #EFEFEF
			border-radius: 1em

		.formGroupHeading
			font-size: 1.6em
			font-family: "Arial Black", "Arial Bold", Gadget, sans-serif
			font-style: normal
			font-variant: normal
			font-weight: 500

	.grid
		flex: auto
		align-self: stretch
		overflow-y: auto
		overflow-x: auto
		margin-bottom: 20px
		border: 0
		padding-top: 20px

		.table > thead > tr > th
			border: 0
			padding-top: 0
			padding-bottom: 6px

		.dataTable
			table-layout: fixed

			.tdLarge
				font-size: 1.5em
			.userRemove
				color: red
			.userEdit
				color: darkblue
			.editorApply
				color: green
			.editorCancel
				color: red
	td.roles
		.role
			padding: 4px 4px
			border: 1px solid #555
			border-radius: .25em
			background: white
			color: #999
			cursor: pointer
		.selected
			color: black

	div.roles
		padding: 4px 0
		.role
			padding: 4px 4px
			border: 1px solid #555
			border-radius: .25em
			background: white
			color: #999
			cursor: pointer
		.selected
			color: black
	.center
		vertical-align: middle !important