html {
	margin: 0;
	padding: 0;
	height: 100%;
	position:relative;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	direction:ltr;
}

/* when mobile menu is active */
body.mobile-view-activated.hidden-menu {
	overflow-x:hidden;
}

body.modal-open {
	overflow:hidden !important;
}

a:hover, a:active, a:focus, button, button:active, button:focus, object, embed, input::-moz-focus-inner {
  outline: 0;
}
	
h1,h3,h4 {
	margin:0;
	font-family: $font-family-bold;
}

.page-title {
    margin: 12px 0 28px;
    span {
        font-size: $font-size-base+3;
        color: $gray-dark;
        display: inline-block;
        vertical-align: 1px;
    }
}

label {
	font-weight:normal;
}

*:not(td):focus {
    outline: 0 !important;
}

/*
 * IE FIX for tap delay
 */
a, input, button {
    -ms-touch-action: none !important;
} 

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  //-webkit-box-shadow: none !important;
  //-moz-box-shadow: none !important;
  //box-shadow: none !important;
  box-shadow: inset -1px 1px 5px 0 rgba(0, 0, 0, 0.8) !important;
}

.input-sm,
.input-lg,
.input-xs,
.form-control {
		  border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
}

.input-xs {
	height: 24px;
	padding: 2px 10px;
	font-size: 11px;
	line-height: 1.5;
}	

.btn-xs {
	padding: 0px 2px;
    font-size: 10px;
    line-height: 1.3;
}

.btn-sm {
	padding: 5px 8px 4px;
}

.btn-lg {
	padding: 10px 16px;
}

.no-space {
  margin: 0;

  > [class*="col-"] {
    margin: 0 !important;
    padding-right: 0;
    padding-left: 0;
  }
}


/*
 * Headers
 */

.h1, .h2, .h3, .h4, .h5, .h6 {
	display: inline-block;
}

h1, .h1 {
	letter-spacing: -1px;
	font-size: $font-size-h1;
	margin: 10px 0;

	small, .small {
		font-size: $font-size-h4;
		font-weight: 300;
		letter-spacing: -1px;
	}
}

h2, .h2 {
	font-size: $font-size-h2;
	margin: 20px 0;
	line-height: normal;
}

h3, .h3 {
	display: block;
	font-size: $font-size-h3;
	font-weight: 400;
	margin: 20px 0;
	line-height: normal;
}

h4, .h4 {
	line-height: normal;
	margin: 20px 0 10px 0;
}

h5, .h5 {
	font-size: $font-size-h5;
	font-weight: 300;
	margin-top: 0;
	margin-bottom: 10px;
	line-height: normal;
}

h6, .h6 {
	font-size: $font-size-h6;
	margin: 10px 0;
	font-weight: bold;
	line-height: normal;
}

.row-seperator-header {
	margin:15px 14px 20px;
	border-bottom:none;
	display:block;
	color: darken( $gray-light, 20.9%);
	font-size:20px;
	font-weight:400;
}

/*
 * Footer
 * see: component-page-footer.less
 */


/*
 * Center Canvas
 */
.center-canvas, .center-child-canvas > canvas {
	display:block !important;
	margin:0 auto !important;
}


/*
 * ***************************************************
 * MAIN LAYOUT END
 * ***************************************************
 */


/*
 * FORMS
 */

.form-control {
	box-shadow:none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
}

.form hr {
	margin-left:-13px;
	margin-right:-13px;
	border-color:rgba(red($black), green($black), blue($black), 0.1);
	margin-top: 20px;
	margin-bottom: 20px;
}

.form fieldset {
	display: block;
	border: none;
	background: rgba(red($white), green($white), blue($white), 0.9);
	position: relative;
}

 fieldset {
	position:relative;
}


.popover-content .form-actions {
	margin:0 -14px -9px;
	border-radius:0 0 3px 3px;
	padding:9px 14px
}

.no-padding .form .form-actions {
	margin:0;
	display: block;
	padding: 13px 14px 15px;
	border-top: 1px solid rgba(red($black), green($black), blue($black), 0.1);
	background: rgba(248, 248, 248, 0.9);
	text-align:right;
	margin-top:25px;
}

.form header, legend {
	display: block;
	padding: 8px 0;
	border-bottom: 1px dashed rgba(red($black), green($black), blue($black), 0.2);
	background: $white;
	font-size: 16px;
	font-weight: 300;
	color:  $gray-darker;
	margin: 25px 0px 20px;
} .no-padding .form header {
	margin: 25px 14px 0;
}.form header:first-child {
	margin-top:10px;
} legend {
	font-weight:400;
	margin-top:0px;
	background:none;
}

.input-group-addon {
  padding: 6px 10px;
  will-change: background-color, border-color;
  border-radius: 0;
  @include transition(all ease-out .15s);
}

.input-group-addon .fa {
	font-size:14px;
}

.input-group-addon .fa-lg, .input-group-addon .fa-2x {
	font-size: 2em;
}

.input-group-addon .fa-3x, .input-group-addon .fa-4x, .input-group-addon .fa-5x {
	font-size: 30px;
}


input[type="text"],
input[type="password"],
input[type="email"]{
  &:focus + .input-group-addon {
    border-color: $teal-lighter;
    //background-color: lighten($state-info-text, 23%);
    color: $teal-lighter;
  }
}

.has-warning input[type="text"], .has-warning input[type="text"] + .input-group-addon {
	border-color: $state-warning-border;
}.has-warning input[type="text"] + .input-group-addon {
	background-color: darken($state-warning-bg, 5%);
	color:$state-warning-text;
}
.has-warning input[type="text"]:focus, .has-warning input[type="text"]:focus + .input-group-addon {
	border-color: $state-warning-border;
}.has-warning input[type="text"]:focus + .input-group-addon {
	background-color: darken($state-warning-bg, 45%);
	color:$white;
}

.has-error .input-group-addon {
	border-color: $red !important;
	background:$red !important;
	color:$state-danger-text !important;
}

.has-success .input-group-addon {
	border-color: $state-success-border !important;
	background-color:$state-success-text !important;
	color: $state-success-border !important;
}

.form fieldset .form-group:last-child, .form fieldset .form-group:last-child .note,
.form .form-group:last-child, .form .form-group:last-child .note {
	margin-bottom:0;
}

.note {
	margin-top: 6px;
	padding: 0 1px;
	font-size: 11px;
	line-height: 15px;
	color: lighten($text-color, 10%);
}

	/*
	 * WITH ICON
	 */
	.input-icon-right {
		position:relative;
	}
	.input-icon-right > i, .input-icon-left > i {
		position:absolute;
		right:10px;
		top:10px;
		font-size:12px;
		color:$gray-light;
	}

	.input-icon-left > i {
		right:auto;
		left:24px;
	}

	.input-icon-right .form-control {
		padding-right:27px;
	}

	.input-icon-left .form-control {
		padding-left:29px;
	}

	input[type="text"].ui-autocomplete-loading,
	input[type="password"].ui-autocomplete-loading,
	input[type="datetime"].ui-autocomplete-loading,
	input[type="datetime-local"].ui-autocomplete-loading,
	input[type="date"].ui-autocomplete-loading,
	input[type="month"].ui-autocomplete-loading,
	input[type="time"].ui-autocomplete-loading,
	input[type="week"].ui-autocomplete-loading,
	input[type="number"].ui-autocomplete-loading,
	input[type="email"].ui-autocomplete-loading,
	input[type="url"].ui-autocomplete-loading,
	input[type="search"].ui-autocomplete-loading,
	input[type="tel"].ui-autocomplete-loading,
	input[type="color"].ui-autocomplete-loading {
		background-image: url("#{$base-url}/select2-spinner.gif") !important;
		background-repeat: no-repeat;
		background-position: 99% 50%;
		padding-right:27px
	}

	.input-group-addon .checkbox, .input-group-addon .radio {
		min-height: 0px;
		margin-right:0px !important;
		padding-top:0;
	}

	.input-group-addon label input[type="checkbox"].checkbox + span,
	.input-group-addon label input[type="radio"].radiobox + span,
	.input-group-addon label input[type="radio"].radiobox + span:before,
	.input-group-addon label input[type="checkbox"].checkbox + span:before {
		margin-right:0px;
	}

/*
 * Alerts
 */
.alert {
    margin-bottom: 10px;
    margin-top: 0px;
    padding: 5px 15px 5px 34px;
    color:#675100;
    border-width:0px;
    border-left-width: 3px;
    padding:10px;

    .ui-pnotify-title{
      line-height: 12px;
    }

    .ui-pnotify-text{
      font-size: 10px;
    }

    .close {
        top: 0px;
        right: -5px;
        line-height: 18px;
    }
}

.alert-heading {
    font-weight:600;
}

.alert-danger {
    border-color: $state-danger-border;
    color: $state-danger-text;
    background: $state-danger-bg;
    text-shadow:none;

  .ui-pnotify-icon{
    color: $state-danger-border;
  }
}

.alert-warning {
    border-color: $state-warning-border;
    color:  $state-warning-text;
    background:  $state-warning-bg;

  .ui-pnotify-icon{
    color: $state-warning-border;
  }
}

.alert-success {
    border-color: $state-success-border;
    color: $state-success-text;
    background: $state-success-bg;

  .ui-pnotify-icon{
    color: $state-success-border;
  }
}

.alert-info {
    border-color: $state-info-border;
    color: $state-info-text;
    background: $state-info-bg;

  .ui-pnotify-icon{
    color: $state-info-border;
  }
}


/*
 * PROGRESS BARS
 */

.progress-micro {
	height: $progressbar-micro !important;
	line-height:$progressbar-micro !important;
}

.progress-xs {
	height: $progressbar-xs !important;
	line-height:$progressbar-xs !important;
}

.progress-sm {
	height: $progressbar-sm !important;
	line-height:$progressbar-sm !important;
}

.progress-lg {
	height: $progressbar-lg !important;
	line-height:$progressbar-lg !important;
}

.progress .progress-bar {
  position: absolute;
  overflow: hidden;
  line-height: 18px;
}

.progress .progressbar-back-text {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.progress .progressbar-front-text {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.progress.right .progress-bar {
  right: 0;
}

.progress.right .progressbar-front-text {
  position: absolute;
  right: 0;
}

.progress.vertical {
  width: 25px;
  height: 100%;
  min-height:150px;
  margin-right: 20px;
  display:inline-block;
  margin-bottom:0px;
}

.progress.wide-bar {
	width: 40px;
}

.progress.vertical.bottom {
  position: relative;
}

.progress.vertical.bottom .progressbar-front-text {
  position: absolute;
  bottom: 0;
}

.progress.vertical .progress-bar {
  width: 100%;
  height: 0;
  -webkit-transition: height 0.6s ease;
          transition: height 0.6s ease;
}

.progress.vertical.bottom .progress-bar {
  position: absolute;
  bottom: 0;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
	height: 18px;
	background: $gray-light;
	@include box-shadow( 0 1px 0 transparent, 0 0 0 1px $gray-light inset);
	border-radius: $progressbar-radius;
}

.progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 11px;
	color: $white;
	text-align: center;
	background-color: $blue;
	font-weight: bold;
	@include transition(width 1s ease-in-out, background-color 1s ease-in-out) ;
}

.progress-striped .progress-bar {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar-danger {
  background-color: $brand-danger;
}

.progress-striped .progress-bar-danger {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-success {
  background-color: $brand-success;
}

.progress-striped .progress-bar-success {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-warning {
  background-color: $brand-warning;
}

.progress-striped .progress-bar-warning {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-info {
  background-color: $brand-info;
}

.progress-striped .progress-bar-info {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
}


.progress-info .bar, .progress .bar-info {
	background:  $brand-info;
}

.vertical-bars {
	padding:0;
	margin:0;
}

.vertical-bars:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
}
.vertical-bars li {
	padding: 14px 0;
	width: 25%;
	display: block;
	float: left;
	text-align: center;
}
.vertical-bars li:first-child {
	border-left: none;
}
.vertical-bars > li > .progress.vertical:first-child {
	margin-left: auto;
}
.vertical-bars > li > .progress.vertical {
	margin: 0 auto;
	float: none;
}

/*
 * TABS
 */
.nav-tabs{
  border-bottom: none;
}

.nav-tabs>li > a .badge {
	font-size: 11px;
	padding: 3px 5px 3px 5px;
	opacity: .5;
	margin-left: 5px;
	min-width: 17px;
	font-weight: normal;
}

.tabs-left .nav-tabs>li > a .badge {
	margin-right:5px;
	margin-left:0px;
}
.nav-tabs>li > a .label {
	display:inline-block;
	font-size:11px;
	margin-left:5px;
	opacity: .5;
}

.nav-tabs>li>a {
	  color: $gray-light;
  //color: $gray-lighter;
  font-family: $font-family-bold;

  &:hover{
    color: $gray-lighter;
    border-color: transparent transparent $gray-light transparent;
    margin-top: 1px;
    border-top-width: 0;
  }
}
.nav-tabs > li.active > a {

    background-color: $gray-lighter;
    color: $gray-darkest;
	border-top-width: 0px !important;
	margin-top: 1px !important;
	font-weight:bold;
}
.tabs-left .nav-tabs > li.active > a {
	-webkit-box-shadow: -2px 0 0 $blue;
	-moz-box-shadow: -2px 0 0 $blue;
	box-shadow: -2px 0 0 $blue;
	border-top-width: 1px !important;
	border-left: none !important;
	margin-left: 1px !important;
}
.tabs-left .nav-pills > li.active > a {
	border:none !important;
	box-shadow:none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
}
.tabs-right .nav-tabs > li.active > a {
	-webkit-box-shadow: 2px 0 0 $blue;
	-moz-box-shadow: 2px 0 0 $blue;
	box-shadow: 2px 0 0 $blue;
	border-top-width: 1px !important;
	border-right: none !important;
	margin-right: 1px !important;
}
.tabs-below .nav-tabs > li.active > a {
	-webkit-box-shadow: 0 2px 0 $blue;
	-moz-box-shadow: 0 2px 0 $blue;
	box-shadow: 0 2px 0 $blue;
	border-bottom-width: 0px !important;
	border-top: none !important;
	margin-top: 0px !important;
}

.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
	border-bottom: 0;
}

.tab-content > .tab-pane, .pill-content > .pill-pane {
	display: none;
}

.tab-content > .active, .pill-content > .active {
	display: block;
}

.tabs-below > .nav-tabs {
	border-top: 1px solid darken($gray-lighter, 7%);
}

.tabs-below > .nav-tabs > li {
	margin-top: -1px;
	margin-bottom: 0;
}

.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li,
.tabs-left > .nav-pills > li, .tabs-right > .nav-pills > li {
	float: none;
}

.tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a,
.tabs-left > .nav-pills > li > a, .tabs-right > .nav-pills > li > a {
	min-width: 74px;
	margin-right: 0;
	margin-bottom: 3px;
}

.tabs-left > .nav-tabs, .tabs-left > .nav-pills {
	float: left;
	margin-right: 19px;
	border-right: 1px solid darken($gray-lighter, 7%);
} .tabs-left > .nav-pills {
	border-right:none;
}

.tabs-left > .nav-tabs > li > a {
	margin-right: -1px;
}

.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {
	border-color: $gray-lighter darken($gray-lighter, 10%) $gray-lighter $gray-lighter;
}

.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {
	border-color: darken($gray-lighter, 10%) transparent darken($gray-lighter, 10%) darken($gray-lighter, 7%);
	*border-right-color: $white;
}

.tabs-left > .tab-content {
	margin-left: 109px;
}

.tabs-right > .nav-tabs {
	float: right;
	margin-left: 19px;
	border-left: 1px solid darken($gray-lighter, 7%); /* DDD */
}

.tabs-right > .nav-tabs > li > a {
	margin-left: -1px;
}

.tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus {
	border-color: $gray-lighter $gray-lighter $gray-lighter darken($gray-lighter, 7%);
}

.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {
	border-color: darken($gray-lighter, 7%) darken($gray-lighter, 7%) darken($gray-lighter, 7%) transparent;
	*border-left-color: $white;
}

.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
	border-bottom: 0;
}

.tab-content > .tab-pane, .pill-content > .pill-pane {
	display: none;
}

.tab-content > .active, .pill-content > .active {
	display: block;
}

.tabs-below > .nav-tabs {
	border-top: 1px solid darken($gray-lighter, 7%);
}

.tabs-below > .nav-tabs > li {
	margin-top: -1px;
	margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus {
	border-top-color: darken($gray-lighter, 7%);
	border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus {
	border-color: transparent darken($gray-lighter, 7%) darken($gray-lighter, 7%) darken($gray-lighter, 7%); /* tabs */
}

/* bordered tabs */
.nav-tabs.bordered {
	background:$white;
	border:1px solid darken($gray-lighter, 7%);
}

.nav-tabs.bordered >:first-child a{
	border-left-width:0px !important;
}

.nav-tabs.bordered + .tab-content {
	border:1px solid darken($gray-lighter, 7%);
	border-top:none;
}

/* bordered tabs top right */

.tabs-pull-right.nav-tabs>li, .tabs-pull-right.nav-pills>li {
	float:right;
}

.tabs-pull-right.nav-tabs>li:first-child > a, .tabs-pull-right.nav-pills>li:first-child > a {
	margin-right:1px;
}

.tabs-pull-right.bordered.nav-tabs>li:first-child > a, .tabs-pull-right.bordered.nav-pills>li:first-child > a {
	border-left-width:1px !important;
	margin-right:0px;
	border-right-width:0px;
}

/*
 * DROPDOWN MENU
 */
.dropdown-menu-xs {
  min-width:37px;
}

.dropdown-menu-xs>li>a {
  padding: 3px 10px;
}.dropdown-menu-xs>li>a:hover i {
   color:#fff !important;
 }

/* Dropdown menu extended */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}

.dropdown-submenu:hover{
	// show sub menu
	&>.dropdown-menu{
		display: block;
	}

	&>a{
		// keep "hover" effect on parent item when submenu is open
		background-color: $gray-light;
		color: $gray-darkest
	}
	a:after{
		border-left-color: $green;
	}
}

.dropdown-submenu>a {
	&:after{
		content: " ";
		display: block;
		position: absolute;
		right: 5px;
		top: 7px;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 5px 0 5px 5px;
		border-left-color: $gray-darker;
	}

	&:hover{
		&:after{
			border-left-color: $gray-lighter;
		}
	}
}

.dropdown-submenu.disabled>a:after {
	border-left-color: $gray-light;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

/*
 * CUSTOM BUTTON
 */

.pagination > li > a, .pagination > li > span {
	box-shadow: inset 0 -2px 0 rgba(red($black), green($black), blue($black), 0.05);
	-moz-box-shadow: inset 0 -2px 0 rgba(red($black), green($black), blue($black), 0.05);
	-webkit-box-shadow: inset 0 -2px 0 rgba(red($black), green($black), blue($black), 0.05);
}

.disabled {
	//color:$white;
}
.btn-default.disabled {
	color: $gray-lighter;
}

.btn {
  font-family: $font-family-bold;
  will-change: background-color, border-color;
  border-radius: $btn-border-radius-base;
  //@include transition( all 0.06s linear );
  @include transition( color 0.18s ease-in-out, background-color 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out );
  //@include box-shadow(0 1px 3px 0 rgba(red($black), green($black), blue($black), 0.12), 0 1px 2px 0 rgba(red($black), green($black), blue($black), 0.24));
}
.btn:active {
  //position: relative; conflict with bootstrap-toggle plugin
  //top:1px;
  //left:1px;
}

.btn.btn-ribbon {
	background-color: #707070;
	background-image: -moz-linear-gradient(top, #777, #666);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#777), to(#666));
	background-image: -webkit-linear-gradient(top, #777, #666);
	background-image: -o-linear-gradient(top, #777, #666);
	background-image: linear-gradient(to bottom, #777, #666);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff777777', endColorstr='#ff666666', GradientType=0);
	color: white;
	padding: 0 5px;
	line-height: 20px;
	vertical-align: middle;
	height: 20px;
	display: block;
	border: none;
	float: left;
	margin: 0 8px 0 0;
	cursor: pointer;
}

.btn.btn-ribbon > i {
	font-size:111%;
}

.ribbon-button-alignment {
	padding-top: 10px;
	display: inline-block;
}

.ribbon-button-alignment.pull-right > .btn.btn-ribbon {
	margin: 0 0 0 8px;
}


/*
 * Panels
 */
.panel-purple {
    border-color:$purple;
    & > .panel-heading {
        color: $white;
        background-color: $purple;
        border-color: $purple;
    }
}
.panel-greenLight {
    border-color:$greenLight;
    & > .panel-heading {
        color: $white;
        background-color: $greenLight;
        border-color: $greenLight;
    }
}
.panel-greenDark {
    border-color:$greenDark;
    & > .panel-heading {
        color: $white;
        background-color: $greenDark;
        border-color: $greenDark;
    }
}
.panel-darken {
    border-color:$gray-dark;
    & > .panel-heading {
        color: $white;
        background-color: #404040;
        border-color: #404040;
    }
}
.panel-green {
    border-color:$green;
    & > .panel-heading {
        color: $white;
        background-color: $green;
        border-color: $green;
    }
}
.panel-red {
    border-color: $red;
    & > .panel-heading {
        color: $white;
        background-color: $red;
        border-color: $red;
    }
}
.panel-teal {
    border-color: $teal-lighter;
    & > .panel-heading {
        color: $white;
        background-color: $teal-lighter;
        border-color: $teal-lighter;
    }
}
.panel-orange {
    border-color: $orange;
    & > .panel-heading {
        color: $white;
        background-color: $orange;
        border-color: $orange;
    }
}
.panel-blueDark {
    border-color: $blueDark;
    & > .panel-heading {
        color: $white;
        background-color: $blueDark;
        border-color: $blueDark;
    }
}
.panel-magenta {
    border-color:$magenta;
    & > .panel-heading {
        color: $white;
        background-color: $magenta;
        border-color: $magenta;
    }
}
.panel-blue {
    border-color: $blue;
    & > .panel-heading {
        color: $white;
        background-color: $blue;
        border-color: $blue;
    }
}


.panel-footer > .btn-block {
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius: 0px;
	border-bottom:none;
	border-left:none;
	border-right:none;
}

/*
 * Circle Buttons
 */

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 18px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  @include box-shadow(0 1px 6px 0 rgba(0, 0, 0, 0.12),0 1px 6px 0 rgba(0, 0, 0, 0.12));
}
.btn-circle.btn-sm {
  width: 22px;
  height: 22px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 14px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 15px;
  font-size: 18px;
  line-height: 30px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 15px;
  font-size: 24px;
  line-height: 50px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}


/*
 * buttons with labels
 */

.btn-label {
  position: relative;
  left: -8px;
  display: inline-block;
  padding: 5px 8px;
  background: rgba(red($black), green($black), blue($black), 0.15);
  border-radius: 2px 0 0 2px;
}

.btn-labeled {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 8px;
}

.btn-link {
	box-shadow: none;
	-webkit-box-shadow: none;
	font-size: $font-size-base + 1;
}


/*
 * Morris Charts
 */

.morris-hover.morris-default-style {
    border-radius: 5px;
    padding: 5px;
    color: #666;
    background: rgba($gray-darkest, 0.85);
    //border: solid 2px $teal-dark;
    font-family: 'Oxygen Bold';
    font-size: 10px;
    text-align: left;
    @include box-shadow(0 6px 12px rgba(0,0,0,.4));


  .morris-hover-row-label {
        font-weight: bold;
       // margin: 0.25em 0;
    }
    .morris-hover-point {
        white-space: nowrap;
       // margin: 0.1em 0;
    }
}
.morris-hover {
    position: absolute;
    z-index: $morris-hover;
}
.fixed-page-footer .morris-hover {
	 z-index: $fixed-footer-zindex - 1;
}