//light
//$main-color: #F7F7F7
//$main-color: #DBD8CF 			//sable
//$main-color: #CFD7DD			//bleu
//$main-color: #E0E0E0 			//gris
//$main-color: #D7D6DE 			//violet
//$main-color: #F1F8FE 			//theme wordpress
//dark
//$main-color: #272A31 			//bleu PrestaShop
//$main-color: #3D3D3D 			//gris
//$main-color: #515561 			//gris bleu clair
//$main-color: #4D4645 			//taupe
//$main-color: #272822 			//gris vert
//$main-color: #313A45 			//gris bleu
//$main-color: #443A42 			//violet
//$main-color: #373E35 			//vert camo
//$main-color: #262C3F 			//bleu nuit  - pretty sure that a girl could do better naming the colors, sorry about that...
//$main-color: #8C8574
$main-color: #3A3A4A

//$secondary-color: white		//blanc
//$secondary-color: #F5792B		//orange
//$secondary-color: #81A98C		//vert d'eau
//$secondary-color: #1EAEC0		//bleu
//$secondary-color: #00C3C1		//turquoise
//$secondary-color: #97C885		//vert menthe
//$secondary-color: #4691D2		//bleu ciel
//$secondary-color: #814C76		//violet
//$secondary-color: #FE635F		//saumon
//$secondary-color: #F8235A		//rose
//$secondary-color: #F2B100		//moutarde
//$secondary-color: #F7854E		//abricot
//$secondary-color: #937976		//taupe clair
//$secondary-color: #60C276		//vert
//$secondary-color: #9DC44B		//vert pomme
//$secondary-color: #6992AF		//theme wordpress
//$secondary-color: #8BC954 	//vert PrestaShop

//some tests
//$secondary-color: #79C09D
//$secondary-color: invert($main-color)
//$secondary-color: lighten(invert($main-color),20%)
//$secondary-color: adjust-hue($main-color, 80%)
//$hue: hue(adjust-hue($main-color, 80%))
//$secondary-color: hsl($hue, 50%, 50%) //Creates a Color from hue, saturation, and lightness values
$secondary-color: #00A89C

//dark and light, love and war, fire and ice, etc...
$contrasted-dark-default: #333
$contrasted-light-default: white
$contrasted-lightness-threshold: 10% //30% default

//50 shades of gray
//$bg-content-color: #F8F9FB 	//bleu gris clair
//$bg-content-color: #F8FBF8 	//vert gris clair
//$bg-content-color: #F8F4E3 	//gris foncé
//$bg-content-color: #F6F6F6 		//gris
$bg-content-color: #F8F8F8 	//gris

//heading
//$bg-header-color: darken($secondary-color,20%)
$bg-header-color: #242424
$bg-footer-color: #242424
$bg-page-head-color : $secondary-color
$bg-panel-heading-color: hsl(hue($secondary-color), 20, 90)

//others
$badge-notif-color: #EF1778
$icon-color: #87C795

@import "compass"
@import "bootstrap/variables"
@import "bootstrap"
@import "font-awesome"
@import "toggle-switch"

//@import url("//fonts.googleapis.com/css?family=Ubuntu:300|Open+Sans")

html, body
	height: 100%

#header_infos
	@extend .navbar
	@extend .navbar-inverse
	@extend .navbar-fixed-top
	background-color: $bg-header-color
#header_shopname
	@extend .navbar-brand
	font: 300 1.3em/100% $headings-font-family
#header_notifs_icon_wrapper
	@extend .hidden-xs
	@extend .nav
	@extend .navbar-nav
	> li > a > i
		font-size: 1.2em
		color: white
	.notifs_badge
		@extend .badge
		background-color: $badge-notif-color
	.notifs_dropdown
		background-color: transparent
		border: none
		box-shadow: none
	.notifs_panel
		@extend .panel
		@extend .panel-default
		width: 300px
		@include box-shadow(rgba(black,0.5) 2px 2px 8px)
		.notifs_panel_header
			@extend .panel-heading
			h3
				padding: 0
				font-size: 1.3em
				margin: 0
		.notifs_panel_footer
			@extend .panel-footer

#header_nav_toggle
	background-color: black
	border: none
	color: white
#header_employee_box
	@extend .nav
	@extend .navbar-nav
	@extend .navbar-right
#header_search
	@extend .navbar-form
	@extend .navbar-left
#header_quick
	@extend .nav
	@extend .navbar-nav
	@extend .navbar-left

#main
	min-height: 100%
	//height: auto!important
	padding: 36px 0 60px
	margin: 0 0 -60px 0
	background-color: $bg-content-color
	//background-image: url('../img/patterns/bedge_grunge.png') // texture

#content
	padding: 90px 20px 0
	margin-left: 240px
	@include transition-property(margin)
	@include transition-duration(0.4s)
	@include transition-timing-function(ease-out)
	fieldset, .panel
		padding: 20px
		margin-bottom: 20px
		border: solid 1px darken($bg-content-color,10%)
		background-color: lighten($bg-content-color,20%)
		@include border-radius(5px)
		@include box-shadow(rgba(black,0.10) 0 2px 0, white 0 0 0 3px inset)
	.panel-heading
		@extend h3
	h3, .panel-heading
		border: none
		height: 30px
		padding: 0 5px
		margin: -16px -16px 15px -16px
		color: contrasted($bg-panel-heading-color)	
		font-size: 1.2em
		line-height: 30px
		font-weight: 300
		text-transform: uppercase
		background-color: $bg-panel-heading-color
		i, a
			color: contrasted($bg-panel-heading-color)
		.badge
			background-color: lighten($bg-panel-heading-color,20%)
			@include border-radius(none)
			height: 29px
			line-height: 25px
			font-size: 1.3em
			margin-right: 7px
			font-weight: 300
			float: left
			margin-left: -5px
	.panel-danger .panel-heading
		background-color: $badge-notif-color!important
	.panel-heading-big
		font-size: 2em
		text-align: center
	form .alert
		clear: both
		color: darken(#D6D2CF,40%)
		border: solid 1px darken(#D6D2CF,5%)
		background-color: lighten(#D6D2CF,5%)
		&.alert-info
			background-color: white
			color: darken(#DAEAF8,30%)
			border: none
			border-bottom: solid 1px darken($bg-content-color,10%)
			@include box-shadow(white 0 0 0 1px inset)
	@media (max-width: $screen-tablet)
		margin-left: 0
		width: 100%

.page-head
	width: 100%
	height: 55px
	padding: 0 10px 0 0
	margin: 0
	border-bottom: 4px solid darken($secondary-color,10%)
	position: fixed
	top: 36px
	left: 0px
	z-index: 499
	background-color: $secondary-color
	@include box-shadow(rgba(black,0.15) 0 7px 0)
	h2.page-title
		@extend .pull-left
		padding: 0 0 0 260px
		font-size: 18px
		color: white
		text-transform: uppercase
		@media (max-width: $screen-tablet)
			padding: 0 0 0 20px
	.btn-toolbar
		margin: 0
		padding: 3px 0 0 0
		.nav-tabs
			margin: 0
		.nav-tabs > li > a
			color: #333
			> .active > a, > .active > a:hover
				//color: #3399ff
				//background: #f5f5f5

#nav-sidebar
	height: 100%!important
	z-index: 500
	float: left
	width: 240px
	background-color: $main-color
	border-bottom: 1px solid lighten($main-color,5%)
	.menu
		border-top: 1px black solid
		.maintab > a [class^="icon-"], .menu .maintab > a [class*=" icon-"]
			font-size: 20px
			@include border-radius(40px)
			height: 30px
			width: 30px
			color: white
			display: inline-block
			text-align: center
			line-height: 30px
	ul
		margin: 0
		padding: 0
	li
		list-style: none
	li:not(.active)
		ul
			display: none
	li.expanded
		ul
			display: block
			background-color: white
	> ul
		> li
			position: relative
			&.active > a
				color: contrast-color($main-color, white, #333, 10%)
				background-color: $secondary-color
				border-top: 1px solid lighten($secondary-color,5%)
				border-bottom: 1px solid darken($secondary-color,20%)
				@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
				i
					color: $brand-primary!important
					background-color: white
			&.active:hover > a
				color: contrast-color($main-color, white, #333, 10%)
				@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
			&:hover > a
				@include box-shadow($brand-primary -4px 0 0 inset)
				i
					color: $secondary-color!important
					background-color: white
			> a
				display: block
				padding: 2px 0 2px 8px
				border-top: 1px solid lighten($main-color,5%)
				border-bottom: 1px solid darken($main-color,10%)
				font-size: 12px
				line-height: 28px
				$color: contrast-color($main-color, white, #333, 10%)
				color: mix($main-color, $color, 30%)
				background-color: $main-color
				text-transform: uppercase
				text-decoration: none
				@include transition-property(background-color, border, box-shadow)
				@include transition-duration(0.4s)
				@include transition-timing-function(ease-out)
				@include box-shadow(darken($main-color,15%) -4px 0 0 inset)
				i
					color: lighten($main-color,25%)
					background-color: darken($main-color,25%)
					@include transition-property(color)
					@include transition-duration(0.4s)
					@include transition-timing-function(ease-out)
	ul.submenu
		a
			display: block
			padding: 2px 5px 2px 10px
			font-size: 12px
			border: none
			border-bottom: solid 1px #eee
			background-color: white
			i
				margin-top: 3px
				color: $secondary-color
			&:hover
				color: $brand-primary
				background-color: mix(white, $main-color, 90%)
				text-decoration: none
				i
					color: $main-color
		li.active
			a
				color: contrast-color($brand-primary, white, #333, 10%)
				background-color: $brand-primary
				i
					color: contrast-color($brand-primary, white, #333, 10%)
	@media (max-width: $screen-tablet)
		display: none


.page-sidebar-closed
	#nav-sidebar
		width: 50px
		@include transition-property(width)
		@include transition-duration(0.4s)
		@include transition-timing-function(ease-out)
		span.title
			display: none
		ul.submenu
			display: none!important
			padding-top: 38px
			position: relative
			top: 0
			@include box-shadow(rgba(black,0.3) 2px 2px 4px)
		> ul > li:hover
			width: 250px!important
			position: relative
			span.title
				display: inline-block
			ul.submenu
				display: block!important
				position: absolute
				left: 50px
				width: 200px!important
	#content
		margin-left: 50px
		.page-head h2.page-title
			padding: 0 0 0 70px
			@media (max-width: $screen-tablet)
				padding: 0 0 0 20px
		@media (max-width: $screen-tablet)
			margin-left: 0
			width: 100%

.menu-collapse
	height: 54px
	width: 100%
	font-size: 2em
	text-align: center
	line-height: 55px
	display: block
	background-color: darken($secondary-color,10%)
	border-bottom: 3px solid darken($secondary-color,20%)
	i
		color: lighten($secondary-color,10%)

// Tool bar
.toolbar_btn
	position: relative
	padding: 2px 5px !important
	margin-right: 3px
	font-size: 12px
	font-weight: 600
	color: white
	text-align: center
	text-shadow: none
	&:hover
		color: $secondary-color
		border-color: white
		background-color: white!important

.icon-AdminDashboard
	@extend .icon-dashboard
	background-color: adjust-hue($icon-color, 0)
.icon-AdminCatalog
	@extend .icon-book
	background-color: adjust-hue($icon-color, 30)
.icon-AdminParentOrders
	@extend .icon-credit-card
	background-color: adjust-hue($icon-color, 60)
.icon-AdminParentCustomer
	@extend .icon-group
	background-color: adjust-hue($icon-color, 90)
.icon-AdminPriceRule
	@extend .icon-tags
	background-color: adjust-hue($icon-color, 120)
.icon-AdminParentShipping
	@extend .icon-truck
	background-color: adjust-hue($icon-color, 150)
.icon-AdminParentLocalization
	@extend .icon-globe
	background-color: adjust-hue($icon-color, 180)
.icon-AdminParentModules
	@extend .icon-puzzle-piece
	background-color: adjust-hue($icon-color, 210)
.icon-AdminParentPreferences
	@extend .icon-wrench
	background-color: adjust-hue($icon-color, 240)
.icon-AdminTools
	@extend .icon-cogs
	background-color: adjust-hue($icon-color, 270)
.icon-AdminAdmin
	@extend .icon-cog
	background-color: adjust-hue($icon-color, 300)
.icon-AdminParentStats
	@extend .icon-bar-chart
	background-color: adjust-hue($icon-color, 330)
.icon-AdminStock
	@extend .icon-archive
	background-color: adjust-hue($icon-color, 360)

[class^="icon-Admin"]
	background-color: darken($main-color,10%)
	margin-right: 6px
	color: lighten($main-color,10%)!important

[class^="process-icon-"], [class*=" process-icon-"]
	height: 25px
	min-width: 32px
	background-position: center
	background-repeat: no-repeat
	display: block
	font-family: FontAwesome
	font-weight: normal
	font-style: normal
	font-size: 25px
	line-height: 25px
	text-decoration: inherit
	-webkit-font-smoothing: antialiased
	*margin-right: .3em

.process-icon-new
	@extend .icon-plus-sign-alt
.process-icon-save
	@extend .icon-save
.process-icon-back
	@extend .icon-arrow-left
.process-icon-save-and-stay
	@extend .icon-save
.process-icon-help
	@extend .icon-question-sign
.process-icon-export
	@extend .icon-cloud-download
.process-icon-import
	@extend .icon-cloud-upload
.process-icon-help-new
	@extend .icon-question-sign
.process-icon-edit
	@extend .icon-edit
.process-icon-newAttributes
	@extend .icon-plus-sign-alt
.process-icon-modules-list
	@extend .icon-puzzle-piece
.process-icon-save-date
	@extend .icon-download
.process-icon-save-status
	@extend .icon-download
.process-icon-new-module
	@extend .icon-plus
.process-icon-delete
	@extend .icon-trash
.process-icon-update
	@extend icon-refresh
.process-icon-preview
	@extend .icon-eye-open
.process-icon-previewURL
	@extend .icon-eye-open
.process-icon-stats
	@extend .icon-bar-chart
.process-icon-duplicate
	@extend .icon-copy
.process-icon-newCombination.toolbar-new
	@extend .icon-plus-sign
.process-icon-newCombination.toolbar-cancel
	@extend .icon-minus-sign
.process-icon-partial_refund
	@extend .icon-exchange
.process-icon-cancel
	@extend .icon-remove
.process-icon-new-url
	@extend .icon-plus-sign-alt
.process-icon-anchor
	@extend .icon-anchor
.process-icon-refresh
	@extend .icon-refresh
.process-icon-configure
	@extend .icon-cog

.navbar-inner
	box-shadow: none!important
	.input-append
		margin-bottom: 0

//form
label.control-label
	font-size: 13px
	font-weight: normal
	color: #666

label.control-label span.label-tooltip
	text-decoration: none
	font-size: 13px
	background-color: darken($bg-content-color,5%)
	border: none
	border-bottom: solid 1px darken($bg-content-color,10%)
	padding: 0 5px
	@include border-radius(3px)

.tooltip
	font-size: 12px

label.required:before
	content: '*'
	color: red
	font-size: 14px
	position: relative
	line-height: 12px

select.input-tiny,
input[type="text"].input-tiny,
input[type="password"].input-tiny
	width: 80px
	float: left

.btn-group-action
	min-width: 150px
	a
		text-decoration: none

.btn
	text-transform: uppercase

.btn-default
	@include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset)

.btn-primary
	@include box-shadow(lighten($brand-success,30%) 0 -2px 0  inset)

.btn-default[disabled]
	border-color: $gray-light
	color: $gray-light
	background-color: lighten($gray-light,35%)
	@include box-shadow(lighten($gray-light,20%) 0 -2px 0  inset)

.btn
	.caret
		border-top-color: $gray-dark!important
	&:hover, &:focus
		.caret
			border-top-color: white!important

hr
	border-color: darken($bg-content-color,10%)
	border-bottom: 1px solid white

//table 
.table
	@extend .table-striped
	@extend .table-hover
	border-collapse: separate
	border-spacing: 0 2px
	margin-bottom: 5px
	thead th
		background-color: darken($bg-content-color,10%)
	thead > tr > th
		font-weight: normal
		vertical-align: top
		span.title_box
			display: block
			word-wrap: nowrap
			white-space: nowrap
			&.active
				font-weight: bold
			a
				text-decoration: none
			a.active
				color: black
	input, select
		margin: 0
	tbody > tr > td
		border-top: none
		background-color: white
	tbody > tr > td
		padding: 3px 7px 3px 7px
		vertical-align: middle
		word-wrap: nowrap
		font-size: 12px
		@include box-shadow(rgba(black,0.15) 0 1px 0)

	td.center, th.center
		text-align: center
	tr td:first-child,
	tr th:first-child 
		border-top-left-radius: 3px
		border-bottom-left-radius: 3px
	tr td:last-child,
	tr th:last-child 
		border-top-right-radius: 3px
		border-bottom-right-radius: 3px

//filter table
tr.filter
	background-color: darken($bg-content-color,20%)
	input[type="text"].filter, input[type="password"].filter, select.filter
		font-size: 12px

.breadcrumb
	background-color: lighten($bg-content-color,7%)

.badge
	background-color: $secondary-color

.badge-success
	@extend .badge
	background-color: $brand-success

.badge-error
	@extend .badge
	background-color: $brand-danger

.icon-big
	font-size: 4em
	color: darken($bg-content-color,20%)

#module-list
	h3
		position: relative
		top: 0
		left: 0
		margin: 0
		padding: 0
		background-color: transparent
		color: $main-color
		font-weight: 500

#footer
	z-index: 600
	min-height: 60px
	display: block
	width: 100%
	padding: 15px 0 0 0
	background-color: $bg-footer-color
	color: #888
	a
		color: #ccc
	a.link-social
		&:hover
			text-decoration: none
		i
			font-size: 2em
			width: 30px
			height: 30px
			display: inline-block
			line-height: 30px
			text-align: center
			@include border-radius(30px)
	.link-twitter i
		color: white
		background-color: #7CCEEF
	.link-facebook i
		color: white
		background-color: #557DBB
	.link-github i
		color: black
		background-color: white
	.link-google i
		color: white
		background-color: #E6644E
	#go-top
		position: fixed
		bottom: 10px
		height: 30px
		width: 30px
		text-align: center
		line-height: 30px
		right: 10px
		z-index: 9003
		display: block
		padding: 0px 6px 0px 6px
		margin: -2px 0px 0px
		text-decoration: none
		color: #fff
		cursor: pointer
		font-size: 16px
		background-color: rgba(0,0,0,0.5)
		&:hover
			background-color: black

#nobootstrap
	float: left


//WIP

//some helpers to get fixed width
.fixed-width-XS
	width: 40px
.fixed-width-S
	width: 80px
.fixed-width-M
	width: 120px
.fixed-width-L
	width: 160px
.fixed-width-XL
	width: 200px


// temp fix for latest bootstrap
input[type="text"],input[type="search"],input[type="password"], textarea, select
	@extend .form-control
fieldset > .row
	@extend .form-group


.box-stats
	padding: 10px
	margin-bottom: 20px
	background-color: white
	@include box-shadow(rgba(black,0.10) 0 2px 0, white 0 0 0 3px inset)
	.boxchart-overlay
		padding: 10px
		margin-right: 10px
		float: left
		color: white
		@include border-radius(3px)
	i
		@include border-radius(3px)
		float: left
		color: white
		font-size: 30px
		height: 50px
		width: 50px
		text-align: center
		line-height: 50px
		margin-right: 10px
	.title
		color: #999
		display: block
	.value
		font-size: 25px
.color1
	i, .boxchart-overlay
		background-color: #2BA8E3
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #2BA8E3
.color2
	i, .boxchart-overlay
		background-color: #FF5450
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #FF5450
.color3
	i, .boxchart-overlay
		background-color: #9E5BA1
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #9E5BA1
.color4
	i, .boxchart-overlay
		background-color: #95CC6B
		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
	.value
		color: #95CC6B

.data_chart
	rect
		fill: white
	path
		stroke: white
		stroke-width: 2
		fill: none
	line
		stroke: black
	.area
		fill: rgba(white,0.30)
		stroke-width: 0

.highlighted
	background-color: blue

//.list-toolbar-btn
#topbar
	position: fixed
	left: 80
	width: 100%
	height: 25px
	z-index: 600
	background-color: $main-color
	border-top: black solid 1px
	border-bottom: black solid 1px
	a
		line-height: 25px
		color: white
		i
			height: 25px
			width: 25px
			line-height: 25px
			color: white
			font-size: 20px
	.menu-collapse
		display: none
	.menu
		padding: 0 0 0 60px
		display: inline
		li
			display: inline
	.submenu
		display: none


.hook_panel
	@extend .well
	@include box-shadow(rgba(white,0.9) 0 0 0 1px inset)
	padding: 10px 10px 5px 10px
	margin-bottom: 3px!important
	.module_name
		font-size: 1.2em
	.module_description
		@extend .text-muted
.hook_panel_header
	margin: 0 -10px 0 -10px
	padding: 0 10px 10px 10px
	.hook_name
		font-weight: 400
		font-size: 1.2em
		@include border-radius(3px)
		color: $brand-primary
		border: solid 1px #ccc
		background-color: white
		padding: 0 4px
	.hook_title 
		text-transform: uppercase
		font-size: 1em
	.hook_description
		@extend .text-muted
		padding: 3px 0 0 3px
.module_list
	.module_list_item
		display: table
		width: 100%
		padding: 5px 0
		margin-bottom: 4px
		background-color: white
		@include box-shadow(rgba(0,0,0,0.3) 0 0 3px,rgba(black,0.10) 0 -2px 0 inset)
		@include border-radius(3px)
.module_col_select
	display: table-cell
	width: 22px
	min-height: 35px
	vertical-align: middle
	text-align: center
	border-right: 1px solid #ddd
.module_col_position
	display: table-cell
	width: 60px
	vertical-align: middle
	text-align: right
	.positions
		font-family: $headings-font-family
		font-weight: 200
		@include text-shadow(white 1px 1px)
		padding: 0 5px
		font-size: 1.6em
		color: #aaa
		@include border-radius(3px)
		@include box-shadow(rgba(0,0,0,0.2) 0 1px 3px inset)
		border: solid 1px #ccc
		background-color: #eee
.module_col_icon
	display: table-cell
	width: 50px
	text-align: center
	vertical-align: middle
	
.module_col_infos
	display: table-cell
	height: 50px
	vertical-align: middle
	
.module_col_actions
	display: table-cell
	width: 160px
	padding: 0 10px
	vertical-align: middle
	text-align: right
	.btn-group
		text-align: left

.panel-heading-action
	@extend .pull-right
	margin-right: -5px
	a.list-tooolbar-btn
		float: left
		height: 30px
		width: 30px
		color: $brand-primary
		border-left: solid 1px white
		&:hover
			text-decoration: none
			color: white
			background-color: $brand-primary
		i
			text-align: center
			font-size: 1.2em
			line-height: 30px
			

//DASHBOARD

.size_s, .size_md, .size_l, .size_xl, .size_xxl
	font-family: $headings-font-family
	color: $main-color
.size_s
	font-size: 1.1em
.size_md
	font-size: 1.3em
.size_l
	font-size: 1.7em
.size_xl
	font-size: 2em
.size_xxl
	font-size: 2.3em


.dash_trend_down
	color: red
	&:before
		margin-right: 4px
		font-family: FontAwesome
		content: "\f0ab"
.dash_trend_up
	color: green
	&:before
		margin-right: 4px
		font-family: FontAwesome
		content: "\f0aa"

#dashboard
	section
		header
			padding: 3px 8px
			margin: 0 0 3px 0
			color: white
			font-size: 1.2em
			background-color: $brand-primary
		header.panel-heading
			color: #555
		
	.data_list
		@extend .list-group
		margin: 0 0 10px 0
		padding: 0
		li
			@extend .list-group-item
			position: relative
		.data_label
			small
		.data_value
			line-height: 39px
			position: absolute
			top: 0
			right: 0
			padding: 0 10px 0 0

	.data_list_small
		margin: 8px 0 10px 0
		padding: 0 0 0 0
		border-top: solid 1px #ddd
		li
			padding: 3px 0
			position: relative
			border: none
			margin: 0
			border-bottom: dashed 1px #ddd
		.data_label
			text-transform: uppercase
			color: #bbb
		.data_value
			line-height: 25px
			position: absolute
			top: 0
			right: 0
			padding: 0

	.data_list_large
		margin: 8px 0 10px 0
		padding: 0
		@extend .list-unstyled
		li
			padding: 6px 0
			position: relative
			border: none
			margin: 0
		.data_label
			line-height: 0.8em
			small
				font-size: 0.6em
		.data_value
			text-align: right
			line-height: 0.6em
			position: absolute
			top: 0
			right: 0
			padding: 8px 0 0 0
			small
				font-size: 0.5em

	.data_list_vertical
		@extend .list-unstyled
		@extend .row
		padding: 0
		margin: 0 0 10px 0
		border: 1px solid #ddd
		@include border-radius(3px)
		li
			border-left: solid 1px #ddd
			@extend .col-xs-4
			padding: 6px
			&:first-child
				border: none
		.data_label
			min-height: 32px
			display: block
			line-height: 1em
			text-align: center
		.data_value
			display: block
			text-align: center
			
	#dashtrends
		header
			margin-bottom: 0
		#dashtrends_toolbar
			margin: 4px -16px
		dl
			margin: 0
			min-height: 120px
			text-align: center
			background-color: white
			padding: 10px
			border-left: 1px solid #ddd
			border-bottom: 1px solid #ddd
			&:first-child
				border-left: none
			&.active
				background-color: #eee
		dt
			text-align: center
			height: 37px
			line-height: 1em
			font: 300 1.1em/120% $headings-font-family
		svg
			height: 350px
			
	#dashproducts
		header
			margin-bottom: 0
		nav
			border-bottom: solid 1px #ddd
			margin: 0 -11px
			ul
				margin: 0 -5px
				padding: 0
				text-decoration: none
				background-color: white
				li
					float: left
				li.active
					background-color: $brand-primary
					a
						color: white
	#dashactivity
		svg
			height: 150px

	.data_value
		span, .dash_trend
			@extend .data_loading
	.loading
		.data_value
			min-width: 30px
			text-align: center
			&:before
				@extend .icon-spin
				font-size: 0.7em
				font-family: FontAwesome
				content: "\f021"
				color: #ccc
			span, small
				display: none
		.data_trend
			display: none

		.data_table

		.data_chart

		.data_trends


=animation($name,$value)
	-webkit-animation-#{$name}: $value
	animation-#{$name}: $value

=keyframes($name)
	@-webkit-keyframes #{$name}
		@content
	@-moz-keyframes #{$name}
		@content
	@-ms-keyframes #{$name}
		@content
	@-o-keyframes #{$name}
		@content
	@keyframes #{$name}
		@content

.data_loading
	opacity: 1
	+animation(name,bounceG)
	+animation(duration,0.7s)
	+animation(direction,linear)
	+scale(0.7)

+keyframes(bounceG)
	0%
		+opacity(0)
		+scale(0.1)
	100%
		+opacity(1)
		+scale(1)
	
$treeBackgroundHover: lighten(blue,30%)
$treeBackgroundSelect: blue


.tree
	border: 1px solid #BBBBBB
	border-radius: 4px 4px 4px 4px
	overflow-y: auto
	overflow-x: hidden
	padding: 10px 15px 0 15px
	position: relative
	.tree-folder
		width: 100%
		min-height: 20px
		cursor: pointer
		margin-top: 1px
		.tree-folder-header
			position: relative
			height: 20px
			-webkit-border-radius: 6px
			-moz-border-radius: 6px
			border-radius: 6px
			&:hover
				background-color: $treeBackgroundHover

			i
				position: absolute
				float: left
				top: 1px
				left: 5px
			.tree-folder-name
				padding-left: 29px
				white-space: nowrap
				overflow: hidden
				text-overflow: ellipsis

		.tree-folder-content
			margin-left: 23px

	.tree-item 
		position: relative
		width: 100%
		height: 20px
		cursor: pointer
		margin-top: 1px
		-webkit-border-radius: 6px
		-moz-border-radius: 6px
		border-radius: 6px

		&:hover
			background-color: $treeBackgroundHover

		.tree-item-name
			position: absolute
			left: 29px
		.tree-dot
			position: absolute
			top: 8px
			left: 10px
			display: block
			width: 4px
			height: 4px
			background-color: #ccc
			-webkit-border-radius: 6px
			-moz-border-radius: 6px
			border-radius: 6px

		.icon-ok 
			position: absolute
			top: 1px
			left: 5px
	.tree-selected
		background-color: $treeBackgroundSelect
		&:hover
			background-color: $treeBackgroundSelect