#userManagement
	display: table
	content-box: border-box
	padding: 10px 20px
	height: 100%
	width: 100%
	text-align: left

	.tableControls
		display: table
		width: 100%
		text-align: right
		margin-right: 20px
		.contentControls
			vertical-align: bottom
			display: table-cell
			text-align: right
			min-width: 100px
			a
				font-size: 12px
				font-family: "Arial", san-serif
				font-weight: 800
				color: #2d1b8c
				text-decoration: none
			a:hover
				text-decoration: underline
			a.disabled
				visibility: hidden
	.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
	.table
		table-layout: fixed
		min-width: 100%
		thead, tbody
			> tr
				> .username
					width: 50%
					min-width: 100px
				> .email
					width: 50%
					min-width: 100px
				> .roles
					width: 260px
					min-width: 260px
				> .actions
					width: 80px
					min-width: 80px
	.separatedTableHeader
		.actions
			text-align: center
			.newUserButton
				margin-top: 4px
				padding: 0 12px
				.fa-plus-circle
					display: inline-block
				.fa-times-circle
					display: none
			.newUserButton.active
				background-color: #fb557b
				color: black
				.fa-times-circle
					display: inline-block
				.fa-plus-circle
					display: none
	.listRow
		display: table-row
		.listCell
			display: table-cell
			position: relative
			height: 100%
			width: 100%
			.tableContainer
				position: absolute
				top: 0
				bottom: 0
				left: 0
				right: 0
				width: auto
				height: auto
				border: 0
				font-size: 12.5px
				overflow-y: auto
				table
					table-layout: fixed
					width: 100%
					thead
						display: none
						visibility: hidden
					.userRemove
						color: red
					.userEdit
						color: darkblue
					.editorApply
						color: green
					.editorCancel
						color: red
					.userEditor > div
						display: table
						> div
							display: table-cell
							padding: 10px
						.roles
							.role
								vertical-align: middle
	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