#app-main
	display: flex
	align-items: stretch
	height: 100%

.flyout.notifications
	left: $sidebar-width + 5
	top: initial
	bottom: 40px
	box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)

nav.sidebar
	position: fixed
	z-index: 1
	left: 0
	width: $sidebar-width
	height: 100%
	background-color: $color-background-nav-dark
	display: flex
	flex-direction: column

	.dropdown
		min-width: $sidebar-width

	.dropdown-menu
		top: initial
		bottom: 3px
		left: $sidebar-width + 5
		box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
		min-width: 200px

		li a
			justify-content: flex-start

	ul
		width: 100%
		margin: 0
		padding: 0

		&.bottom
			margin-top: auto

		li
			display: block
			padding: 0
			margin: 0
			a, button
				display: flex
				color: $color-text-light-hint
				font-size: 1.5em
				align-items: center
				justify-content: center
				padding: 10px 0
				background: transparent
				border: none
				width: 100%

				&:hover
					color: $color-text-light-primary
				&:active
					outline: none

			a.navbar-item

			a.dropdown-toggle
				padding: 0
				margin: 0
				width: $sidebar-width
				max-width: $sidebar-width


#col_sidebar
	width: $sidebar-width
	min-width: $sidebar-width

#col_left, #col_main, #col_right
	display: flex
	flex-direction: column
	position: relative
	flex: 0 0 auto
	height: 100%
	min-width: 150px

#col_main
	background-color: white
	border-right: thin solid $color-background-dark
	width: 50% // gets overriden by JS, dragging the col-splitter

#col_right
	background-color: $color-background-light
	flex: 1 1 auto

.col_header
	position: relative
	display: flex
	align-items: center
	width: 100%
	min-height: 50px
	background-color: white
	padding: 10px 15px

	font-size: 1.2em
	border-bottom: thin solid $color-background

	&.scrolled
		box-shadow: 0 -2px 20px rgba(black, .2)

	.header_text::first-letter
		text-transform: capitalize

.col-list-item
	display: flex
	align-items: center
	width: 100%
	background-color: white
	border-bottom: thin solid $color-background

.col-splitter
	flex: 0 0 auto
	width: 8px
	background-color: $color-background
	min-height: 200px
	cursor: col-resize
	position: relative
	z-index: 1

.input-group-flex
	display: flex

	.input-transparent-group+.input-transparent-group
		margin-left: 10px

.input-transparent-group
	width: 100%
	display: flex
	align-items: center

	label
		padding-right: 10px
		font-weight: normal
		color: $color-text-dark-primary
		min-width: 80px

	&.select_multiple
		margin-bottom: 10px

select.input-transparent
	background-color: $color-background

	option
		background-color: white

.input-transparent
	border: thin solid transparent
	border-radius: 3px
	padding: 5px
	margin-top: 10px
	margin-bottom: 10px
	width: 100%

	&:hover
		border: thin solid $color-text-dark-hint

#status-bar
	color: $color-text-dark-secondary
	margin-left: auto
	text-align: right

.table
	display: table
	width: 100%
	position: relative

	.table-row
		display: table-row
		&:hover
			background-color: $color-background-light

	.table-head
		display: table-header-group

		.table-cell
			font-size: .9em
			color: $color-text-dark-secondary

	.table-body
		display: table-row-group

	.table-cell
		display: table-cell
		border-bottom: thin solid $color-background-dark
		vertical-align: middle

	.table-cell-spacer
		background-color: $color-background-light
		width: 6px
		min-width: 4px
		height: 100%
		display: table-cell
		border: 2px solid $color-background
		border-top: none
		border-bottom: none
		cursor: e-resize

/* Generic Statuses */
.processing
	+stripes(rgba($color-background, .2), rgba($color-background, .5), -45deg, 25px)
	+stripes-animate
	animation-duration: 2s

.flash-on
	background-color: lighten($color-success, 50%) !important
	border-color: lighten($color-success, 40%) !important
	color: $color-success !important
	text-shadow: 1px 1px 0 white
	transition: all .1s ease-in
	img
		transition: all .1s ease-in
		opacity: .8

.flash-off
	transition: all 1s ease-out
	img
		transition: all 1s ease-out

.btn:active
	box-shadow: none

.bg-status
	@include status-color-property(background-color, '', 'dark')

.fg-status
	@include status-color-property(color, '', 'dark')

.modal-content
	border: none
	border-radius: 3px
	box-shadow: 0 0 25px rgba(black, .25)
	background-color: $color-background-light

	.modal-header
		border-top-left-radius: 3px
		border-top-right-radius: 3px
		background-color: white
		padding: 10px 10px 10px 15px

		.title
			font-size: 1.2em

		.close
			float: right
			background: transparent
			border: none
			color: $color-text-dark-hint

			&:hover
				color: $color-primary

.modal-backdrop
	background-color: $color-background-nav


.modal-help-panel
	overflow: hidden
	border-radius: 3px
	width: 30%
	background-color: white
	box-shadow: 1px 2px 10px rgba(black, .1)

	.title
		display: block
		padding: 10px
		color: $color-text-dark-primary

.status-debug-item
	width: 100%

.status-debug-item-statuses
	display: flex
	align-items: center
	justify-content: center
	color: $color-text
	text-shadow: 1px 1px 0 rgba(white, .3)

	.light, .regular, .dark
		flex: 1
		min-height: 25px
		display: flex
		align-items: center
		justify-content: center

	.light
		@include status-color-property(background-color, '', 'light')
	.regular
		flex: 3
		@include status-color-property(background-color, '', '')
	.dark
		@include status-color-property(background-color, '', 'dark')