body
	background-color: $color-background
	position: fixed
	top: 0
	left: 0
	right: 0
	bottom: 0
	height: 100%
	width: 100%
	margin: 0
	padding: 0
	font-family: 'Roboto'

a
	color: $color-primary
	&:hover
		color: $color-primary-dark

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

nav.sidebar
	position: fixed
	left: 0
	width: $sidebar-width
	height: 100%
	background-color: $color-background-nav

	dl
		dd
			margin: 0
			a
				display: flex
				color: $color-text-light-hint
				font-size: 1.5em
				align-items: center
				justify-content: center
				padding: 10px 0

				&:hover
					color: $color-text-light-primary

#col_sidebar
	width: $sidebar-width

#col_left, #col_main, #col_right
	display: flex
	flex-direction: column
	position: relative
	flex: 1
	height: 100%

#col_main
	box-shadow: 1px 0 0 $color-background-dark
	background-color: white

#col_right
	background-color: $color-background

.col_header
	position: relative
	display: flex
	align-items: center
	width: 100%
	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)

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

.input-transparent-group
	width: 100%

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

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

#status-bar
	color: $color-text-dark-secondary
	margin-left: auto
	font-size: .9em