// helpers class for fixing input width
.fixed-width-xs
	width: 40px!important
.fixed-width-sm
	width: 80px!important
.fixed-width-md
	width: 120px!important
.fixed-width-lg
	width: 160px!important
.fixed-width-xl
	width: 200px!important
.fixed-width-xxl
	width: 250px!important

//quick fix for inline hidden content on device width - waiting for bootstrap update https://github.com/twbs/bootstrap/issues/8869
.hidden-inline-xs
	@media (max-width: $screen-xs)
		display: none!important

.row-margin-bottom
	margin-bottom: 15px
.row-margin-top
	margin-top: 15px
.row-padding-top
	padding-top: 15px

.thumbnail,
.img-thumbnail
	background-color: white
	border-color: #ccc!important

// highlighting element (ie: a special row in a table)
.highlight
	background-color: #FFFF00

.badge
	font-weight: normal
	font-size: 1.1em
	letter-spacing: 0.0625em
	background-color: $brand-primary
	&.badge-success
		background-color: $brand-success
	&.badge-error
		background-color: $brand-danger

//tabs
.nav-tabs
	border-bottom: none
	li a
		font-size: 1.1em
		font-family: $headings-font-family
		text-transform: uppercase
		font-weight: 300
	li.active
		a, a:hover, a:focus
			background-color: white

.table tr.parent td
	background-color: #eee!important
	border-bottom: solid 1px #ccc!important

//alert boxs
@mixin alert-panel($icon,$color)
	padding-left: 50px
	position: relative
	border: none
	border-left: solid 3px lighten($color,9%)
	&:before
		position: absolute
		top: 6px
		left: 7px
		display: block
		height: 25px
		width: 25px
		color: lighten($color,9%)
		@extend .icon
		@extend .icon-3x
		@extend .#{$icon}

.alert.alert-warning
	@include alert-panel(icon-exclamation-circle, $brand-warning)

.alert.alert-danger
	@include alert-panel(icon-exclamation-triangle, $brand-danger)

.alert.alert-success
	@include alert-panel(icon-check-circle, $brand-success)

.alert.alert-info
	@include alert-panel(icon-question-circle, $brand-info)

.alert.alert-addons
	$alert-addons-border: lighten($brand-addons,10%)
	$alert-addons-text: $brand-addons
	@include alert-variant(#F3F3F2, $alert-addons-border, $alert-addons-text)
	@include alert-panel(icon-puzzle-piece, $brand-addons)

.overflow-y
	max-height: 200px
	margin-bottom: 15px
	overflow-y: auto
