@import "config";
@import "fonts";
@import "libs/animate";
/*@import "libs/booking-print";*/
/*@import "libs/booking";*/
@import "libs/bootstrap-datepicker";
@import "libs/bootstrap-datetimepicker";
/* @import "libs/bootstrap-responsive"; */
@import "libs/bootstrap-wizard";
/*@import "libs/bootstrap.min";*/
@import "../vendor/bootstrap-sass/assets/stylesheets/bootstrap";
@import "libs/nanoscroller";
@import "libs/ng-grid";
@import "typeahead";
/*@import "libs/slick.grid";*/

@import "../vendor/font-awesome/scss/font-awesome";

/*
|--------------------------------------------------------------------------
| General Rules
|--------------------------------------------------------------------------
|
|
*/

html,
body {
	height: 100%;
}

body {
	background: $background_color;
}

.task-beta {
	/*font-family: 'Open Sans', sans-serif;*/
	/*	font-family: 'Source Sans Pro', sans-serif;*/
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*font-family: 'Oxygen', sans-serif;*/
	/*font-family: 'Maven Pro', sans-serif;*/
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.auto-overflow {
	overflow: auto;
}

.form-required {
	color: red;
	display: none;
}

.required .form-required {
	display: inline;
}

.right-border {
	border-right: 1px solid #E2E2E2;
}

.form-text {
	font-size: 12px;
	font-weight: bold;
}

.font-normal {
	font-weight: normal;
	font-size: 12px;
}

.hidden {
	display: none;
}

h1,
h2,
h3,
h4,
h5 {
	// font-family: Tahoma, Geneva, sans-serif;
	font-weight: normal;
}

.mt-5 {
	margin-top: 5px;
}

.mt-10 {
	margin-top: 10px;
}

.no-padding {
	padding: 0 !important;
}

tbody {
	font-size: 12px;
}

form {
	margin-bottom: 0;

	.control-label {
		font-size: 12px;
		font-weight: bold;
	}

	.form-actions {
		text-align: right;
	}
}

.draggable {
	cursor: move;
}

table {

	td.centered,
	th.centered {
		text-align: center;
	}
}

.text-danger {
	color: #a94442;
}

.subtable {
	border-left: 1px solid #DADADA;
	border-right: 1px solid #DADADA;
}

.dropdown-menu-checkbox li {
	@include text-shadow(none);
}

.dropdown-menu-checkbox input {
	padding: 0;
	margin: 0;
	width: 13px;
	height: 13px;
	vertical-align: bottom;
	position: relative;
	top: -1px;
	*overflow: hidden;
}

.input-append.fix-margin {
	margin-left: 20px !important;
}

.input-tiny {
	width: 50px;
}

.table-scroll {
	thead {
		display: block;
		margin: 0px;
		cell-spacing: 0px;
		left: 0px;
	}

	tbody {
		display: block;
		overflow: auto;
		height: 300px;
	}

	th {
		height: 50px;
	}

	td {
		height: 50px;
		margin: 0px;
		cell-spacing: 0px;
	}
}

.sla-table {
	td {
		vertical-align: top;
		font-size: 13px;
		padding: 3px 5px;
	}

	.distinct {
		color: #777;
		line-height: 15px;
	}

	.running {
		background-color: #DDD;
		@include border-radius(3px);
	}

	.sla-error {
		background-color: #ce0808;
		color: #FFF;
		height: 15px;
		@include border-right-radius(3px);
	}

	.sla-warning {
		background-color: #e8b425;
		height: 15px;
		@include border-right-radius(3px);
	}

	.sla-success {
		color: #26a518;
		height: 15px;
	}
}

.line-through {
	text-decoration: line-through;
}

.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.7);

	h1 {
		text-align: center;
		top: 50%;
		margin-top: -30px;
		position: absolute;
		left: 0;
		right: 0;
	}
}

ul.list-spaced {
	li {
		margin: 10px 0;
		padding-left: 12px;
		text-align: justify;
	}
}

.mg-right-10 {
	margin-right: 10px;
}

.yellow-highlight,
.table-striped tbody>tr.yellow-highlight:nth-child(odd)>td,
.table-striped tbody>tr.yellow-highlight:nth-child(odd)>th,
.table-hover tbody tr.yellow-highlight:hover>td,
.table-hover tbody tr.yellow-highlight:hover>th {
	background: #fcf8e3;
}

.red-highlight,
.table-striped tbody>tr.red-highlight:nth-child(odd)>td,
.table-striped tbody>tr.red-highlight:nth-child(odd)>th.red-highlight,
.table-hover tbody tr.red-highlight:hover>td,
.table-hover tbody tr.red-highlight:hover>th {
	background: #f2dede;
}

.green-highlight,
.table-striped tbody>tr.green-highlight:nth-child(odd)>td,
.table-striped tbody>tr.green-highlight:nth-child(odd)>th.green-highlight,
.table-hover tbody tr.green-highlight:hover>td,
.table-hover tbody tr.green-highlight:hover>th {
	background: #c7ffc0;
}

.orange-highlight,
.table-striped tbody>tr.orange-highlight:nth-child(odd)>td,
.table-striped tbody>tr.orange-highlight:nth-child(odd)>th.orange-highlight,
.table-hover tbody tr.orange-highlight:hover>td,
.table-hover tbody tr.orange-highlight:hover>th {
	background: #ffe5c0;
}

.text-break-out {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/*
|--------------------------------------------------------------------------
| Override Style
|--------------------------------------------------------------------------
|
| This overrides the Bootstrap style.
|
*/

.label-as-badge {
	border-radius: 1em;
}

.navbar-search .search-query {
	min-width: 220px;
	padding: 4px 14px;
	margin-bottom: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
	line-height: 1;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.navbar-inverse .navbar-search .search-query {
	background-color: #f5593c;
	border-color: #111111;
	border-radius: 3px;
	border: none;
	padding: 14px;
	color: white;
	background: #af2c14;
	width: 90%;
	font-size: 14px;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}

.navbar-inverse .navbar-search .search-query:-moz-placeholder {
	color: #cccccc;
}

.navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
	color: #cccccc;
}

.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
	color: #cccccc;
}

.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
	padding: 5px 15px;
	color: #333333;
	text-shadow: 0 1px 0 #ffffff;
	background-color: #ffffff;
	border: 0;
	outline: 0;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.nav-header {
	color: #999;
	display: block;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	padding: 3px 15px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
}

/**
	 * Fix Google Maps integration with bootstrap
	 */
#mapCanvas img,
.angular-google-map img {
	max-width: none;
}

#mapCanvas label,
.angular-google-map label {
	width: auto;
	display: inline;
}

/**
	 *	Overload popover
	 */
.popover.large {
	max-width: 600px;
	width: 600px;
}

.popover .form-actions {
	margin: 5px -15px -10px -15px;
	color: #333;
}

/**
	 * 	Overload form actions
	 */
.form-actions {
	margin-bottom: 0;
}

/**
	 *	Overload tabs
	 */
.nav-tabs {
	margin-bottom: 0;
}

/**
	 * Fix the z-index so that it appears
	 * on top of the modal
	 */
.datepicker {
	z-index: 9999 !important;
}

/**
	 * Form subheader
	 */
.subheader {
	margin: 0 0 5px 0;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
}

form .subheader {
	margin-top: 25px;
	margin-bottom: 13px;
}

/**
	 *	Overload btn-primary colour
	 */
.btn-primary {
	background-color: #367096;
	*background-color: #367096;
	background-image: -moz-linear-gradient(top, #599bc6, #367096);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bc6), to(#367096));
	background-image: -webkit-linear-gradient(top, #599bc6, #367096);
	background-image: -o-linear-gradient(top, #599bc6, #367096);
	background-image: linear-gradient(to bottom, #599bc6, #367096);
	border-color: #367096 #367096 #002a80;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff599bc6', endColorstr='#ff367096', GradientType=0);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
	color: #ffffff;
	background-color: #367096;
	*background-color: #599bc6;
}

.btn-primary:active,
.btn-primary.active {
	background-color: #003399 \9;
}

/**
	 *	Do not style inputs when using
	 *	the jQueryUI Spinner
	 */
.ui-spinner {
	input {
		border: none;
		margin: 0;
		background: transparent;
		@include box-shadow(none);
	}

	input:focus {
		@include box-shadow(none);
	}
}

/**
	 *	Overload the table style
	 */
.table {
	margin-bottom: 0;
	font-size: 12px;

	select {
		font-size: 12px;
	}

	input {
		font-size: 12px;
	}
}

.table-striped-odd tbody>tr:nth-child(2n)>td,
.table-striped-odd tbody>tr:nth-child(2n)>th {
	background-color: #F9F9F9;
}

.table-no-header tbody tr:first-child td {
	border-top: none;
}

.table-no-outer-border {
	border: none;

	th:first-child {
		border-left: none;
	}

	td:first-child {
		border-left: none;
	}
}

.table-background {
	background: $box_background_color;
	border: 1px solid $border_color;
	@include border-radius($border_radius);
}

.input-micro {
	width: 40px;
}

.table .input-hidden {
	@include box-shadow(none);
	border-color: transparent;
	background-color: transparent;
}

.table tr:hover .input-hidden:focus {
	border: 1px solid rgba(82, 168, 236, 0.796875) !important;
}

.table tr:hover .input-hidden {
	border: 1px solid #ccc;
	background-color: #fff;
}

.table-header {
	background-color: #F1F1F1;
	text-transform: uppercase;
	color: #999;
	font-size: 0.95em;
	border-top: 1px solid #CACACA;
	border-bottom: 1px solid #CACACA;

	th {
		font-weight: normal;
	}
}

.table-header.inverse {
	background-color: #1b1b1b;
	@include background-image(linear-gradient(top, #333, #111));
	color: #FFF;
}

/**
	 * Inline checkboxes within a form.
	 */
.control-group.checkboxes {
	margin-bottom: 25px;
}

.control-group.checkboxes:first-child {
	margin-top: 20px;
}

.popover {
	max-width: 600px;
}

/**
	 * Creates a normal text input that has no borders
	 */
input[type="text"].basic-hidden-input {
	line-height: 23px;
	border: none;
	padding: 1px 0;
	height: 23px;
	min-height: 23px;
	margin-bottom: 0;
	background-color: transparent;
	@include border-radius(0);
	@include box-shadow(none);
}

input[type="text"].basic-hidden-input:hover {
	border: 1px solid #DADADA;
}

/* So we wont impact the original bootstrap menu
	or it's pseudo call-out arrow the menu is wrapped
	in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
	position: relative;
	display: inherit !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	-ms-overflow-scrolling: touch;
	-o-overflow-scrolling: touch;
	overflow-scrolling: touch;
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: auto;
	max-height: 400px;
	margin: 0;
	border-left: none;
	border-right: none;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-ms-border-radius: 0 !important;
	-o-border-radius: 0 !important;
	border-radius: 0 !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}

.tab-content {
	padding-top: 0;
}

.progress {
	position: relative;
}

.progress.progress-inverted {
	background-color: #555;
	background-image: none;
}

.progress span {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	color: #fff;
	text-align: center;
	width: 100%;
}

.progress-no-margin {
	margin-bottom: 0;
}

/** Hack to hide the input for a fileupload and display a button instead **/
.file-upload {
	position: relative;
	overflow: hidden;
}

.file-upload input {
	position: absolute;
	top: 0;
	right: 0;
	/* not left, because only the right part of the input seems to
	                 be clickable in some browser I can't remember */
	cursor: pointer;
	opacity: 0.0;
	filter: alpha(opacity=0);
	/* and all the other old opacity stuff you
	                                 want to support */
	font-size: 300px;
	/* wtf, but apparently the most reliable way to make
	                         a large part of the input clickable in most browsers */
	height: 200px;
}

input[type="number"].editable-input {
	width: 60px;
}

.alert {
	text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
}

.alert-success {
	background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
	background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
	background-repeat: repeat-x;
	border-color: #b2dba1;
}

.alert-info {
	background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
	background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
	background-repeat: repeat-x;
	border-color: #9acfea;
}

.alert-warning {
	background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
	background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
	background-repeat: repeat-x;
	border: 1px solid #E2C822;
}

.alert-danger {
	background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
	background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
	background-repeat: repeat-x;
	border-color: #dca7a7;
}

.dropdown-menu-arrow::before {
	border-bottom: 7px solid rgba(0, 0, 0, 0.2);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	content: "";
	display: inline-block;
	left: 9px;
	position: absolute;
	top: -7px;
}

.dropdown-menu-arrow::after {
	border-bottom: 6px solid #FFFFFF;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	content: "";
	display: inline-block;
	left: 10px;
	position: absolute;
	top: -6px;
}

.btn-group.pull-right>.dropdown-menu-arrow::before {
	left: inherit;
	right: 9px;
}

.btn-group.pull-right>.dropdown-menu-arrow::after {
	left: inherit;
	right: 10px;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
|
| Contains all the styles for the header
|
*/
#menu {
	padding-left: 20px;
	padding-right: 20px;
}

.search-results {
	clear: both;
	display: table;
	width: 100%;
	color: #999;
	border-top: 1px solid #222;
	padding-bottom: 20px;
}

.search-close {
	background: none repeat scroll 0 0 #222;
	@include border-radius(15px);
	bottom: -25px;
	font-size: 2em;
	left: 90%;
	line-height: 50px;
	position: absolute;
	text-align: center;
	width: 50px;
	z-index: 1029;
}

.search-results>.search-group {
	display: table-cell;
	padding: 10px 0;
	vertical-align: top;
}

.search-results .flagged {
	color: #DC3912;
}

/* nadeem cathren blind notes flagged fix 9.11.16 */

a.flagged,
.flagged,
.blind {
	color: #DC3912;
}

a.not-flagged {
	color: #333;
}

/* end cathren blind notes flagged */


/*
|--------------------------------------------------------------------------
| TASKS SEARCH - NADEEM | nov - dec 2016  /tasks
|--------------------------------------------------------------------------
|
| Contains all the styles for the tasks page "/tasks"
|
*/


#tasks_page.container {
	background: white;
	width: 100%;
}

#grid1 {
	height: 90vh;
}

#grid_container {
	padding-top: 15px;
}

// side bar form groups have 15px bottom margin and so do the rows so last row margin is negated here
#grid_sidebar div.form-group>div:last-of-type {
	margin-bottom: 0;
}

#grid_sidebar .form-group {
	box-shadow: 1px 1px 1px 0px #d2d2d2;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 15px;
	margin-left: -10px;
	margin-right: -10px;
	padding: 10px 10px;
}

#grid_sidebar .form-group .row {
	margin-bottom: 15px;
}

#grid_sidebar {
	background: white;
	margin-top: 15px;
	padding-top: 10px;
}

#grid_sidebar label {
	font-size: 12px;
}

#grid_sidebar .reset-btn {
	position: absolute;
}

/* this is the red X that appears when a choice is made using the select boxes */
#grid_sidebar .fa-times {
	color: red;
	font-size: 24px;
}

#grid_sidebar label:first-of-type {
	padding-right: 0;
}

#grid_sidebar .input-group-addon {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	min-width: 38px;
	max-width: 38px;
}

#grid_controls {
	text-align: center;
	border: none !important;
}

#grid_sidebar .empty {
	background: transparent;
}

#grid_sidebar .not-empty,
.ui-select-container.ng-not-empty .ui-select-match>span {
	transition: all ease-in-out 0.15s;
	background: #4d394b;
	color: #ffffff;

}

#grid_sidebar .glyphicon.glyphicon-remove {
	color: #d9534f;
	top: 2px;
}

#tasks_reset_button {
	font-weight: 900;
	font-size: 16px;
}

/////// /tasks page - #select_section \\\\\\\

#select_section {
	vertical-align: top;
}

#select_section .form-control {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}

#select_section .select_box {
	padding-left: 0;
	padding-right: 0;
}

#select_section .select_box:hover {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}


#select_section .form-horizontal {
	margin-top: 20px;
}

/////// /tasks page - #checkbox_section \\\\\\\

#checkbox_section {
	border-radius: 4px;
	transition: all ease-in-out .2s;
}


#checkbox_section .input-group {
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 34px;
	width: 100%;
}

#checkbox_section span.input-group-addon {
	border-right: 1px solid #ccc !important;
}

#checkbox_section input[type='checkbox'],
#checkbox_section input[type='radio'] {
	margin: 0;
	float: right;
}

#checkbox_section label {
	font-size: 10px;
	margin: 0 0 0 2px;
	padding: 0;
}

#checkbox_section .radio_collection {
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

#checkbox_section {

	.radio_reset_element,
	.text_box,
	.check_box {
		padding-top: 8px;
	}
}

#checkbox_section .check_box:hover {
	border-color: #adadad;
	color: #333;
	background-color: #e6e6e6;
}

#checkbox_section .radio_container {
	border: 1px solid #ccc;
	margin: 5px 2px;
	border-radius: 3px;
	padding: 3px 3px;
	max-width: 31%;
	transition: all ease-in-out 0.15s !important;

	&:hover {
		border-color: #adadad;
		color: #333;
		background-color: #e6e6e6;

		input[type='radio'] {
			transform: scale(1.05);
		}
	}

}

#checkbox_section .radio_container:first-of-type {
	margin-left: 4px;
}

#checkbox_section .radio_selected {
	border-color: #4D394B;
	background: #4d394b;
	color: #fff;
	transition: all ease-in-out 0.15s !important;
}

/////// /tasks page - #text_section \\\\\\\
#text_section .text_input {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
}

#text_section label {
	padding-top: 0;
}

#text_section .input-group {
	width: 100%;
	border-radius: 4px;
}

#text_section .input-group .form-control {
	border-radius: 4px;
}

#text_section.form-group .row {
	margin-bottom: 15px;
}


/////// /tasks page - #mixed up areas, common effects \\\\\\\
#select_section select.form-control.empty:hover,
#text_section .text_input input:hover {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
	transition: all ease-in-out 0.15s !important;
}

//
//    /* overriding above style for selected select dropdown */
//    #select_section select.not-empty:hover {
//        background: #4d394b;
//        color: #ffffff;
//    }

/*
|--------------------------------------------------------------------------
| END TASKS SEARCH  PAGE - NADEEM
|--------------------------------------------------------------------------
*/



/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
|
| Contains all the styles for the footer
|
*/

footer {
	background-color: #f5593c;
	border-top: 1px solid black;
	height: $footer_height;
	padding: 20px 30px;
	color: #FFFFFF;
	position: relative;
	margin-top: -$footer_height;
	clear: both;
	z-index: 100;
}


/*
|--------------------------------------------------------------------------
| MAIN WRAPPER
|--------------------------------------------------------------------------
|
| Styles for the main content wrapper.
|
*/
#container {
	margin-top: 60px;
	margin-bottom: 20px;
	overflow: auto;
	padding-bottom: $footer_height;
}

#wrapper {
	min-height: 100%;
}

/*
|--------------------------------------------------------------------------
| CUSTOM ELEMENTS
|--------------------------------------------------------------------------
|
| Styles for various elements
|
*/
.tab-container {
	border: 1px solid #DADADA;
	border-top: none;
	padding: 10px;
}

.tab-container-background {
	background: #FFFFFF;
}

.project-task {
	border: 1px solid #DADADA;
	@include border-radius(3px);
	@include background(linear-gradient(#ffffff, #f3f3f3));
	margin-top: 5px;
	padding: 5px;
}

.basic-form {
	.control-label {
		padding-top: 5px;
		font-size: 12px;
		font-weight: bold;
		width: 100px;
		float: left;
	}

	.controls {
		margin-left: 100px;
	}

	.form-actions {
		text-align: right;
	}
}

.form-actions {
	border-top: 1px solid #e5e5e5;
	margin-top: 20px;
	background-color: #f5f5f5;
	padding: 20px;
}

.form-classic {
	.control-label {
		text-align: left;
	}
}

.form-edit {
	color: rgb(51, 51, 51);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	.form-group {
		margin-bottom: 15px;
		padding: 5px 0;
	}

	.control-label {
		font-weight: normal;
		font-size: 13px;
	}

	.form-group:hover {
		background-color: #F5F5F5;
	}
}

.label-required {
	padding-right: 7px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0QyOTlEMjZEQTBCMTFFMUE2NTZCOEYyQjFFMDJDQjgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0QyOTlEMjdEQTBCMTFFMUE2NTZCOEYyQjFFMDJDQjgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRDI5OUQyNERBMEIxMUUxQTY1NkI4RjJCMUUwMkNCOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRDI5OUQyNURBMEIxMUUxQTY1NkI4RjJCMUUwMkNCOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlC4ZBwAAABWSURBVHjaYvj//z8DDMPAV0MPYyAWBLGZGJAATBAIOoAYrIgRWec3I89QIDUTiN9DMQOKAkZGRpApaUBmGlRBGAsDJgBZEwbELkCshGICNkC5AoAAAwCxqydZAf50UQAAAABJRU5ErkJggg==');
	background-position: right 10px;
	background-repeat: no-repeat;
}

/* Reset the input style for a grid*/
.slick-grid {

	input,
	textarea,
	input:focus,
	textarea:focus {
		background-color: transparent;
		border: none;
		@include box-shadow(none);
		padding: 1px;
	}

	select {
		width: 100%;
		height: auto;
		line-height: 20px;
		border: none;
		background-color: transparent;
		outline: none;
		@include box-shadow(none);
	}

}


/**
	 *	Standard header that contains buttons
	 */
.button-header {
	background-color: #F5F5F5;
	padding: 10px 0;

	.btn-group {
		display: block;
		text-align: center;
	}
}

.widget-header .buttons-filter {
	margin-right: 10px;
	float: right;
}



/**
	 *	Custom WIDGET
	 */
.widget {
	clear: both;
	margin-bottom: 2em;
	// overflow: hidden;
	position: relative;
	width: auto;
	@include box-shadow(1px -1px 8px 1px #CACACA);
}

.widget-classic {
	@include box-shadow(none);

	.widget-content {
		@include border-radius(3px);
	}
}

.widget-header {
	@include background(linear-gradient(center top, #FAFAFA 0%, #E9E9E9 100%));
	border: 1px solid #D5D5D5;
	@include border-top-radius(4px);
	height: 40px;
	line-height: 40px;
	position: relative;
	padding-left: 10px;
}

.widget-header h3 {
	color: #555555;
	display: inline-block;
	font-size: 14px;
	font-weight: 800;
	left: 10px;
	line-height: 18px;
	margin-right: 3em;
	margin-top: 10px;
	position: relative;
	@include text-shadow(1px 1px 2px rgba(255, 255, 255, 0.5));
	top: 0;
}

.widget-header .widget-actions {
	float: right;
	margin-right: 15px;
}

.widget-header [class^="icon-"],
.widget-header [class*=" icon-"] {
	color: #555555;
	display: inline-block;
	font-size: 16px;
	margin-left: 13px;
	margin-right: -2px;
	vertical-align: middle;
}

.widget-content {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #D5D5D5;
	border-radius: 5px 5px 5px 5px;
	padding: 20px 15px 15px;

	.form-actions {
		margin-left: -15px;
		margin-right: -15px;
		margin-bottom: -15px;
		@include border-bottom-radius(3px);
	}
}

.widget-footer {
	border-top: 1px solid #e5e5e5;
	background-color: #f5f5f5;
	overflow: hidden;
	min-height: 15px;
	padding-top: 4px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 5px;
}

.widget-footer .pagination {
	margin-top: 4px;
	margin-bottom: 0;
}

.widget-footer input {
	margin-bottom: 2px;
}

.widget-footer ul.inline {
	margin-bottom: 2px;
}

.widget-header+.widget-content {
	border-top: medium none;
	@include border-top-radius(0);
}

.widget-nopad .widget-content {
	padding: 0;
}

.widget-content:before,
.widget-content:after {
	content: "";
	display: table;
}

.widget-content:after {
	clear: both;
}

.widget-content {}

.widget-table .widget-content {
	padding: 0;
}

.widget-table .table {
	border: medium none;
	margin-bottom: 0;
}

.widget-table .table tr td:first-child {
	border-left: medium none;
}

.widget-table .table tr th:first-child {
	border-left: medium none;
}

.widget-plain {
	background: none repeat scroll 0 0 transparent;
	border: medium none;
}

.widget-plain .widget-content {
	background: none repeat scroll 0 0 transparent;
	border: medium none;
	padding: 0;
}

.widget-box .widget-content {
	background: none repeat scroll 0 0 #FFFFFF;
}

.tree-view {
	padding-left: 5px;

	.icon-collapse-alt:before {
		cursor: pointer;
	}

	.icon-expand-alt:before {
		cursor: pointer;
	}

	a.selected {
		color: #212121;
	}
}

.tree-view li>a {
	padding-left: 5px;
	font-size: 12px;
}

.tree-view-sub {
	padding-left: 15px;
}


/** The header when grouping results in typeahead **/
.typeahead-header {
	padding-left: 10px;
	margin: 2px 0;
	background: #313131;
	color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 3px;
}

/**
	 * Paginator styles
	 */
.paginator_info {
	margin: 10px 0;
}

.paginator_pages {
	margin: 10px 0;
}

#reportrange {
	background: #ffffff;
	@include box-shadow(0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1));
	color: #333333;
	padding: 8px;
	line-height: 18px;
	cursor: pointer;
}

#reportrange .caret {
	margin-top: 8px;
	margin-left: 2px;
}

.headline {
	background: url('/images/backgrounds/headline-bg.png') 0 50% repeat-x;
	display: block;
	margin-bottom: 7px;

	h4 {
		background-color: #FFF;
		display: inline;
		padding: 0 10px 0 0;
		font-size: 14px;
		font-weight: bold;
	}
}

.section-header {
	border-top: 1px solid #777;

	h4 {
		color: #333333;
		font-size: 1.4em;
		display: inline-block;
		border-top: 3px solid #777;
		margin-top: 0;
		padding-top: 7px;
		padding-left: 3px;
		padding-right: 3px;
	}
}

.short-text-ellipsis {
	max-width: 50px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.medium-text-ellipsis {
	max-width: 90px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.excel-input,
input.excel-input {
	border: none !important;
	box-shadow: none !important;
	width: 100%;
	margin: 0;
	padding: 4px 0 !important;
	font-size: 12px;
	@include border-radius(0);

	&:focus {
		padding: 4px 0;
	}
}

textarea.excel-input {
	height: 17px;
}

.call-popup {
	position: fixed;
	right: 20px;
	top: 45px;
	max-width: 40%;
	min-width: 250px;
	background: #FAFAFA;
	border: 1px solid #CACACA;
	@include border-radius(3px);
	@include box-shadow(3px 3px 4px #CACACA);
	padding: 10px;
}

.call-popup-wrapper {
	background: #FFFFFF;
	border-top: 1px solid #DADADA;
	margin: 0 -10px -10px;
	padding: 10px;
}


/*
|--------------------------------------------------------------------------
| PAGES
|--------------------------------------------------------------------------
|
| Custom pages styling
|
*/

.page-content {
	background: $box_background_color;
	border: 1px solid $border_color;
	@include border-radius($border_radius);
	padding: 10px;
	@include box-sizing(border-box);

	.form-actions {
		margin-left: -10px;
		margin-bottom: -10px;
		margin-right: -10px;
	}
}

/*
	|--------------------------------------------------------------------------
	| Login page
	|--------------------------------------------------------------------------
	|
	| Login page related styles
	|
	*/

.modal-login {
	width: 312px;
	top: 25% !important;
	left: 50% !important;
	margin-left: -130px;

	.modal-content {
		padding: 15px;
	}
}

/*
	|--------------------------------------------------------------------------
	| Stock page
	|--------------------------------------------------------------------------
	|
	| Stock page related styles
	|
	*/
#stock_grid {
	min-height: 400px;
}

/*
	|--------------------------------------------------------------------------
	| Sales page
	|--------------------------------------------------------------------------
	|
	| Sales page related styles
	|
	*/
#sales_page {

	h3 {
		text-transform: uppercase;
	}

	.table {
		@include border-radius(0);
	}

	.sales-basket {
		min-height: 200px;
		position: relative;
		border: 1px solid #DDDDDD;
		margin-top: 20px;
		margin-bottom: 20px;
		@include border-radius(3px);

		.info {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			font-size: 20px;
			color: #555;
			text-align: center;
			margin-top: -12px;
			@include opacity(0.7);
		}

		input[type="text"],
		textarea {
			border: none;
			box-shadow: none;
			width: 100%;
			margin: 0;
			padding: 4px 0;
			font-size: 12px;
			@include border-radius(0);
		}

		input[type="text"]:focus,
		textarea {
			padding: 4px 0;
		}

		input[type="text"].barcode-input {
			border-bottom: 1px dashed #E3272D;
			font-size: 12px;
		}

	}

	.total-price {
		margin-top: 20px;

		h2 {
			color: #212121;
		}
	}

	.form-actions {
		.margin {
			margin-right: 20px;
		}
	}

	label.radio,
	label.checkbox {
		font-size: 12px;
	}

	h6 {
		margin-top: 0;
		margin-bottom: 0;
	}

	.refunded {
		text-decoration: line-through;
		font-style: italic;
		background-color: #F5F5F5;
		@include opacity(0.7);
	}


}

/*
	|--------------------------------------------------------------------------
	| Bookings page
	|--------------------------------------------------------------------------
	|
	| Bookings page related styles
	|
	*/
#bookings_page {
	min-height: 500px;
}

.repair-tab {
	background: #FFFFFF !important;
}

.bookings-content {
	min-height: 20px;
	border: 1px solid #DDDDDD;
	border-top: none;
	padding: 20px;
	position: relative;
	@include border-bottom-radius(3px);

	.form-actions {
		margin-left: -20px;
		margin-right: -20px;
		margin-bottom: -20px;
		@include border-bottom-radius(3px);
	}
}

.bookings-content.locked {
	@include opacity(0.6);
}

.bookings-content.locked:after {
	font-size: 50px;
	position: absolute;
	background-position: center center;
	content: "select a customer first";
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	padding-top: 50%;
	text-align: center;
}

.call-tabs {
	padding-top: 20px;
	padding-bottom: 20px;
}

.selectable-devices {
	max-width: 100px;
	width: 100px;
	position: relative;
	margin-left: 5px;
	padding: 3px;
	margin-bottom: 2px;

	.checkbox {
		position: absolute;
		top: 3px;
		right: 5px;
		color: #259B25;
		padding: 0 3px;
	}

	small {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: block;
	}
}

.edit-selectable-device {
	margin-left: 3px;
}

.selectable-devices:hover,
.selectable-devices.active,
.call-tabs:hover,
.call-tabs.active {
	background-color: #DADADA;
	cursor: pointer;
	@include border-radius(5px);
	@include box-shadow(-1px -1px 0 0 #AAA);
}

/*
	|--------------------------------------------------------------------------
	| Dashboard page
	|--------------------------------------------------------------------------
	|
	| Dashboard page related styles
	|
	*/
.dashboard-column-droppable {
	border: 2px dashed #CACACA;
	min-height: 50px !important;
	margin-bottom: 20px;
}

.info {
	margin-bottom: 10px;
}

.install-widgets {
	h6 {
		color: #212121;
	}

	a {
		display: block;
	}

	a:hover {
		text-decoration: none;
	}
}

.dashboard-calendar {
	margin-top: 20px;

	h2 {
		font-size: 16px;
		font-weight: bold;
	}
}

.dashboard-column {
	.table {
		td {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			max-width: 80px;
			font-size: 11px;
			line-height: 16px;

			.badge {
				font-size: 11px;
			}
		}

		td.standard {
			overflow: visible;
			white-space: normal;
		}
	}

	.paginator-controls {
		font-size: 12px;
		border-top: 1px solid #E5E5E5;

		li>a {
			padding: 10px 3px 5px;
		}

		input {
			margin-top: 5px;
		}

		.nav {
			height: 40px;
		}
	}

	.paginator-counter {
		padding-top: 5px;
	}
}

td.widget-id {
	background-color: #F5F5F5 !important;
	color: #333;
	border-right: 1px solid silver;
}

.severity_1>td {
	// Low
	background-color: #D6D6D6;
}

.severity_3>td {
	// High
	background-color: #EDFC67;
}

.severity_4>td {
	// Gold Service
	background-color: #F28202;
}

.severity-1 {
	// Low
	border-left: 4px solid #D6D6D6;
}

.severity-3 {
	// High
	border-left: 4px solid #F89406;
}

.severity-4 {
	// Gold Service
	border-left: 4px solid #b94a48;
}

.prebook-note {
	border-left: 4px solid #3A87AD;
}

.new-comment {
	border-left: 4px solid rebeccapurple;
}

.widget-header a {
	font-size: 13px;
	color: #777;

	.caret {
		margin-top: 18px;
	}
}

.prebook {
	background-color: #729BD9;
	color: #FFF;

	a {
		color: #FFF;
	}
}

.prebook:hover {
	color: inherit;

	a {
		color: inherit;
	}
}


/**
 *Drag and drop templates style
 */

/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
.templateSelector ul[dnd-list],
.templateSelector ul[dnd-list]>li {
	position: relative;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.templateSelector ul[dnd-list] {
	min-height: 42px;
	padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
.templateSelector ul[dnd-list] .dndDraggingSource {
	display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.templateSelector ul[dnd-list] .dndPlaceholder {
	display: block;
	background-color: #ddd;
	min-height: 42px;
}

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
.templateSelector ul[dnd-list] li {
	background-color: #fff;
	border: 1px solid #ddd;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	display: block;
	padding: 5px 15px;
	margin-bottom: -1px;
}

/**
 * Show selected elements in green
 */
.templateSelector ul[dnd-list] li.selected {
	background-color: #dff0d8;
	color: #3c763d;
}


/*
	|--------------------------------------------------------------------------
	| Repairs page
	|--------------------------------------------------------------------------
	|
	| Repairs page related styles
	|
	*/
.parts-row {
	border-top: 1px solid #DADADA;
	padding-top: 7px;

	.text {
		padding-top: 3px;
	}
}

.paid-ribbon,
.due-ribbon {
	width: 140px;
	height: 130px;
	position: absolute;
	top: -14px;
	left: -13px;
	background-repeat: no-repeat;
}

.paid-ribbon {
	background-image: url('/images/ribbons/paid-ribbon.png');
}

.due-ribbon {
	background-image: url('/images/ribbons/due-ribbon.png');
}

#bookings-pages.affix {
	position: fixed;
	z-index: 999;
}

#bookings-pages.affix-top {
	position: static;
	top: 0;
}

#bookings-pages.affix-bottom {
	position: fixed;
	bottom: 0;
}

.task-group {
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid #E5E5E5;
	border-top: 2px solid #717171; // grey
	// border-top: 2px solid #FF6363; // red
	// border-top: 2px solid #FF9538; // orange
	@include box-shadow(1px 1px 5px 0 #D1D1D1);

	.headline {
		padding-bottom: 10px;
	}

	.icons-ul {
		margin-left: 43px;

		li {
			margin-bottom: 4px;
			border-bottom: 1px solid #EAEAEA;
			border-top: 1px solid #EAEAEA;
			background: #FAFAFA;
		}
	}
}

.task-group-inner {
	margin-left: 23px;
}

.task-label {
	margin-bottom: 0px;
	margin-top: 15px;
}

.affix.task-navbar {
	left: 20px;
	right: 17.8%;
	z-index: 999;
}

.task-list .span4 {
	width: 30.215%;
}

.task-details-block {
	height: 60px;
}

.editable-click,
a.editable-click {
	border-bottom: none !important;
}

.go-top {
	display: none;
}

.affix .go-top {
	display: inline-block;
}

.editable-click:after {
	font-family: FontAwesome;
	font-size: 11.9px;
	content: "\0000a0\f040";
}

.mg-right-10 {
	margin: 0 20px 0 0 !important;
}

.tasks-grid {
	width: 550px;
	height: 250px;
}

/*
	|--------------------------------------------------------------------------
	| Followup and QA page
	|--------------------------------------------------------------------------
	|
	| Repairs page related styles
	|
	*/
.navbar-inner.qa-bar {

	background-color: #212121;
	background-image: none;
	border: 1px solid #d4d4d4;
	box-shadow: none;
	color: #fff;
	border-radius: 0;
}

.navbar-inner.qa-bar .brand {
	text-shadow: none;
	color: white;
}

.navbar-inner.qa-bar .caret {
	border-top: 4px solid #fff;
}

.navbar-inner.qa-bar .dropdown.brand {
	font-size: 0.9rem;
}

.navbar-inner.qa-bar .brand>a {
	color: white;
}


/*
	|--------------------------------------------------------------------------
	| Workflow styles
	|--------------------------------------------------------------------------
	|
	|
	*/
.workflow-filter {
	background: #FFF;
	border: 1px solid #DADADA;
	padding: 5px;
	margin: 10px 0;

	.workflow-filter-remove {
		margin-right: 10px;
		color: #D31D1D;
		cursor: pointer;
	}
}

.workflow-filter-element {
	display: inline-block;
	margin-right: 30px;
	background: #F1F1F1;
	padding: 0 7px;
	border-bottom: none !important;
}

.workflow-group {
	margin-top: 5px;
}

.workflow-group-inner {
	background: #FFFFFF;
	border-left: 3px solid #CACACA;
	padding: 10px;
}

.workflow-group-logic {
	text-align: center;
	margin: 30% auto;
}

.workflow-action-settings {
	padding-left: 20px;
}

/*
	|--------------------------------------------------------------------------
	| Chat Styles
	|--------------------------------------------------------------------------
	|
	|
	*/

#sidebar {
	position: fixed;
	width: 17%;
	right: 0;
	top: 0;
	bottom: 0;
	background: #4D394B;
	padding-top: 50px;
	border-left: 2px solid #372c36;
	z-index: 101;
}

#sidebar-user {
	background: #3e313c;
	border-bottom: 3px solid #372c36;
	color: #FFFFFF;
	padding: 10px;

	img {
		font-size: 8px;
		width: 50px;
		height: 50px;
		border: 1px solid #FAFAFA;
		@include border-radius(3px);
	}

	.user_info {
		margin-left: 60px;
	}

	h4 {
		margin-bottom: 2px;
		margin-top: 2px;
	}

	h5 {
		color: #ccc;
		margin-top: 0;
		margin-bottom: 2px;
	}
}

.channels_header {
	color: #ab9ba9;
	font-size: 14px;
	color: #ffffff;
	font-size: 18px;
	/* text-decoration: underline; */
	text-align: center;
	font-weight: 500;
	padding: 5px;
	background: #f5593c;
}

#sidebar-channels {
	margin-top: 10px;
	padding-left: 15px;
	padding-right: 10px;
	position: absolute;
	top: 110px;
	left: 0;
	right: 0;
	bottom: 173px;
	overflow: auto;

	a {
		color: #ccc;
		text-decoration: none;
		border-bottom: 1px dotted #ccc;
	}

	.chat-channels {
		list-style: none;
		color: #ccc;
		margin-left: 0;
		padding-left: 0;
		font-size: 14px;

		li {
			padding-top: 3px;
			padding-bottom: 3px;
		}
	}

	.channel-group {
		margin-bottom: 15px;
	}

	.channel-group ul {
		margin-right: 12px;
	}

	.channel-group .dial-options a {
		border: none;
		margin: 0 3px;
	}

	.call-list {
		li {
			border-bottom: 1px solid #aaa;
			position: relative;
			margin-bottom: 10px;
			background: #382436;
			padding: 10px 7px 3px;
			@include border-radius(3px);
		}

		li:last-child:after {
			border-top: 1px solid #aaa;
			content: " ";
			position: absolute;
			left: 3px;
			right: 3px;
			bottom: -2px;
		}
	}

	.active {
		background: #4c9689;
		color: #ffffff;
		@include border-right-radius(3px);
		margin-left: -15px;
		padding: 3px 0 3px 15px;
	}
}

.chat-item {
	margin-top: 0;

	.media-heading {
		margin: 0;
	}
}

.chat-file {
	border: 1px solid #CACACA;
	@include border-radius(5px);
	background: #F1F1F1;
	padding: 5px 10px;
	margin-right: -12px;
	margin-bottom: 5px;
}

.chat-messages {
	min-height: 150px;
	max-height: 250px;
	padding: 5px 7px;
	overflow: auto;
	overflow-x: hidden;
}

#sidebar-tabs {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1px solid #372c36;
	background: #3e313c;

	.sidebar-tab {
		display: inline-block;
		padding: 10px 20px;
		border-right: 1px solid #372c36;
		color: #FFFFFF;
		position: relative;

		.notification {
			position: absolute;
			top: -5px;
			right: -5px;
		}

		&:hover {
			background: #4C9689;
			cursor: pointer;
		}
	}
}

#tech-docs {
	position: absolute;
	bottom: 90px;
	left: 0px;
	right: 0;
	height: 190px;
	background: #f3f3f3;
	color: #FAFAFA;

	.channels_header {
		margin-bottom: 7px;
	}

	a {
		color: #150707;
		text-decoration: none;
		font-size: 11px;
		margin-left: 15px;
	}

	a:hover {
		text-decoration: underline;
	}
}

/*
	|--------------------------------------------------------------------------
	| Admin Styles
	|--------------------------------------------------------------------------
	|
	|
	*/

.admin-settings-list {
	margin-top: 20px;

	li {
		width: 70px;
		display: inline-block;
		margin-right: 15px;
		vertical-align: top;
	}

	.icon-stack {
		height: 3em;

		.icon-stack-base {
			font-size: 4.5em;
			margin-left: -13px;
			color: #333;
		}

		.icon-stack-icon {
			font-size: 1.8em;
		}
	}
}

/*
	 *	Pulled list-groups from bootstrap 3
	 */
.list-group {
	padding-left: 0;
	margin-bottom: 20px;
}

.list-group-item {
	position: relative;
	display: block;
	padding: 5px 10px;
	margin-bottom: -1px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.list-group-item:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.list-group-item:last-child {
	margin-bottom: 0;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.list-group-item>.badge {
	float: right;
}

.list-group-item>.badge+.badge {
	margin-right: 5px;
}

a.list-group-item {
	color: #555;
}

a.list-group-item .list-group-item-heading {
	color: #333;
}

a.list-group-item:hover,
a.list-group-item:focus {
	color: #555;
	text-decoration: none;
	background-color: #f5f5f5;
}

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
	color: #777;
	cursor: not-allowed;
	background-color: #eee;
}

.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
	color: inherit;
}

.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
	color: #777;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
	z-index: 2;
	color: #fff;
	background-color: #428bca;
	border-color: #428bca;
}

.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading>small,
.list-group-item.active:hover .list-group-item-heading>small,
.list-group-item.active:focus .list-group-item-heading>small,
.list-group-item.active .list-group-item-heading>.small,
.list-group-item.active:hover .list-group-item-heading>.small,
.list-group-item.active:focus .list-group-item-heading>.small {
	color: inherit;
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
	color: #e1edf7;
}

.list-group-item-heading {
	margin-top: 0;
	margin-bottom: 5px;
}

.list-group-item-text {
	margin-bottom: 0;
	line-height: 1.3;
}


/**Panels copied from Bootstrap 3 **/
.panel {
	padding: 15px;
	margin-bottom: 20px;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
	padding: 10px 15px;
	margin: -15px -15px 15px;
	font-size: 17.5px;
	font-weight: 500;
	background-color: #f5f5f5;
	border-bottom: 1px solid #dddddd;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

.panel-footer {
	padding: 10px 15px;
	margin: 15px -15px -15px;
	background-color: #f5f5f5;
	border-top: 1px solid #dddddd;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

.panel-primary {
	border-color: #428bca;
}

.panel-primary .panel-heading {
	color: #ffffff;
	background-color: #428bca;
	border-color: #428bca;
}

.panel-success {
	border-color: #d6e9c6;
}

.panel-success .panel-heading {
	color: #468847;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

.panel-warning {
	border-color: #fbeed5;
}

.panel-warning .panel-heading {
	color: #c09853;
	background-color: #fcf8e3;
	border-color: #fbeed5;
}

.panel-danger {
	border-color: #eed3d7;
}

.panel-danger .panel-heading {
	color: #b94a48;
	background-color: #f2dede;
	border-color: #eed3d7;
}

.panel-info {
	border-color: #bce8f1;
}

.panel-info .panel-heading {
	color: #3a87ad;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.choice-option {
	padding: 5px;
	margin: 5px;
	text-align: center;
	color: #333;
	border: 1px solid #aaa;
	border-radius: 3px;
	box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, .05);
	background-color: #e4e4e4;
}

/* 9.2.17 nadeem   "project add task modal" css hack
 bbotstrap .hide had important! set on it
 no way to ovveride
 added my own hide class without !important to
 /home/nadeem/projects/seraph3/app/Modules/Bookings/views/templates/modals/assign-task.blade.php

<div id="assignTaskModal" class="modal nadeem_hide fade container" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

 */
div#assignTaskModal .nadeem_hide {
	/* see above comment */
	display: none;
}

/* restyled x to be more visible and correct looking
in the file above i borrowed the .fade class to give the hover on the x a nicer transition
*/
div#assignTaskModal button.close {
	color: red;
	font-size: 2.4em;
	position: relative;
	left: 10px;
	opacity: .4;
}

div#assignTaskModal button.close:hover {
	opacity: .6;
}

div#project_buttons {
	background-color: #ffffff;
	border-top: none;
	margin-top: 0;
}

.navbar-default .navbar-nav>li>a.task_project_link {
	padding: 6px 12px;
	color: #fff;
	margin: 0 4px;
}

.navbar-default .navbar-nav>li>a.task_project_link:hover {
	background-color: #449d44;
	border-color: #398439;
}

button#project-breadcrumb-cog {
	background: none !important;
}

#project-cancel-button {
	border-radius: 4px;
}

/* 16.6.17 nadeem - app/Modules/Clients/views/edit-client.blade.php

fixing modal look and feel

using client-edit-form as a namespace to hold all sub-styles

*/

#client-edit-modal-header,
#customer-edit-modal-header {
	padding: 5px 15px;
}

#client-edit-form,
#customer-edit-form {

	.controls {
		margin-left: 0;
	}

	.control-group input,
	.control-group select {
		margin-bottom: 2px;
		float: right;
	}

	.input-group {
		margin-bottom: 2px;
	}

	.control-label {
		padding-left: 0;
		padding-top: 10px;
		width: auto;
	}
}

#client-edit-form {
	#site-user-legend {
		padding-top: 10px;
	}

	#contract-details-fieldset {
		position: relative;
		top: 47px;
	}
}

#customer-edit-form {

	/* reset only for customer-edit-form */
	label {
		margin: 0;
		padding-top: 0;
	}

	#additional-notes-legend {
		padding-top: 10px;
	}

	#additional-notes-fieldset {
		label {
			&.inline {
				display: inline;
			}

			&.control-label {
				padding-top: 0;
				padding-left: 0;
			}
		}
	}

	#contact-details-fieldset {
		position: relative;
		top: 118px;
	}

	input[type='radio'] {
		// margin: 7px 0 0;
	}

	.blind-notes {
		padding-top: 12px;
	}
}

.hr-header {
	background: #eee;
}

/* Yusuf style changes  	*/

.navbar-inverse .navbar-brand {
	color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a {
	color: #ffffff;
}

.navbar-inverse {
	border-color: #090909;
	background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}

// .navbar-inverse {
//     background: linear-gradient(-45deg, #ee7752, #d60303, #f5593c, #f5593c);
// 	background-size: 400% 400%;
// 	-webkit-animation: Gradient 15s ease infinite;
// 	-moz-animation: Gradient 15s ease infinite;
// 	animation: Gradient 15s ease infinite;
// }


@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}

	50% {
		background-position: 100% 50%
	}

	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}

	50% {
		background-position: 100% 50%
	}

	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}

	50% {
		background-position: 100% 50%
	}

	100% {
		background-position: 0% 50%
	}
}



#sidebar-user {
	background: #f5593c;
	color: #FFFFFF;
	padding: 10px;
	margin-bottom: 11px;
	border-bottom: 1px solid #372c36 !important;
}

#sidebar {
	background: #f3f3f3;
	border-left: 1px solid #372c36;
}

#sidebar-tabs {
	background: #f5593c;
}

.navbar-nav>li:after {
	content: '';
	position: absolute;
	width: 0;
	height: 3px;
	display: block;
	margin-top: 5px;
	right: 0;
	background: #fff;
	transition: width .2s ease;
	-webkit-transition: width .2s ease;
}

.navbar-nav>li:hover:after {
	width: 100%;
	left: 0;
	background: #fff;
}

.navbar-nav>li>a {
	padding-top: 15px;
	padding-bottom: 2px;
}

#sidebar .btn-block {
	display: block;
	width: 98%;
	margin: auto;
	overflow: hidden;
}

#sidebar .btn-block+.btn-block {
	margin-top: 5px;
}

#sidebar .btn-xs,
.btn-group-xs>.btn {
	padding: 10px;
}

#sidebar .leftToReadButton {
	background: #0f8b96;
	width: 98%;
	color: white;
	text-transform: uppercase;
	/* margin: 5px; */
	/* margin-left: 10px; */
	padding: 10px;
	margin-top: 3px;
	margin-right: 2px;
}

.leftToRead {
	background: white;
	padding: 9px;
	color: #0f8b96;
	font-size: 21px;
}

ul.messenger-theme-future {
	background-color: #0f8b96 !important;
	;
	background-image: none !important;
	margin-top: 14px !important;
	color: white;
	border: none !important;
}

ul.messenger-theme-future .messenger-message .close {
	color: #ffffff !important;
}

ul.messenger-theme-future .messenger-message .messenger-actions a {
	position: relative;
	border-radius: unset !important;
	-webkit-border-radius: unset !important;
	text-shadow: none !important;
	margin: 3px 5px 3px !important;
	background-color: rgba(0, 0, 0, 0.25) !important;
	box-shadow: 0 3px rgba(0, 0, 0, 0.4) !important;
	border: none;
	padding: 10px 15px !important;
	font-size: 16px;
	font-family: 'Source Sans Pro';
	color: #fff !important;
	outline: none;
	cursor: pointer !important;
}

ul.messenger-theme-future .messenger-message .messenger-actions {
	margin-top: 7px !important;
}

.alert {
	text-shadow: none !important;
}

ul.messenger-theme-future .messenger-message {
	text-shadow: none !important;
	font-family: 'Source Sans Pro';
	line-height: 1.2;
	text-align: left;
	color: white !important;
	font-size: 16px !important;
}

.fa-search {
	position: relative;
	left: -25px;
	color: white;
}

#sidebar-user .user_info {
	margin-left: 0px !important;
	text-align: center;
}

#sidebar-user .pull-left {
	float: none !important;
	text-align: center;
	margin: auto;
	display: block;
	width: 100%;
	padding-bottom: 10px;
}

#sidebar-user h4 {
	margin-top: 0px !important;
}

#sidebar-user {
	background: #f5593c;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid #372c36 !important;
}

#sidebar-user #dropdownMenu1>small>span {
	color: white !important;
}

.user_options {
	background: #0f8b96;
	padding: 7px;
	color: black;
	margin-right: 5px;
	display: inline-block;
	cursor: pointer;
}

#sidebar-user .user_options h5 {
	color: white !important;
}

.media-list .media:after {
	-webkit-box-shadow: 0 0 0 3px #f5593c;
	box-shadow: 0 0 0 3px #f5593c;
	left: -8.8px;
	background: #fff;
	border-radius: 50%;
	height: 9px;
	margin-right: 7px;
	right: 6px;
	width: 9px;
	position: absolute;
	content: "";
	/* position: absolute; */
	display: block;
	z-index: 99999;
	top: 0;
	/* top: 115px; */
}

.media,
.media-body {
	position: relative;
}

.media {
	border-top: 1px dashed #ded6d6;
	padding-top: 22px;
}

.media-list {
	border-left: 3px solid #df1d14;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
	margin: 0 auto;
	letter-spacing: 0.2px;
	position: relative;
	line-height: 1.4em;
	font-size: 1.03em;
	padding: 50px;
	padding-top: 0px !important;
	padding-left: 0px !important;
	list-style: none;
	text-align: left;
}

#sidebar .notifications ul {
	list-style-type: none !important;
	margin-left: -37px;
}

#sidebar .notifications ul li {
	padding: 10px;
	padding-bottom: 5px;
	margin: 5px;
	padding-top: 5px;
	border-radius: 19px;
	background: white;
	text-align: center;
	cursor: pointer;
}

.notifications {
	height: 380px;
}

.notifications-btn {
	padding: 1px;
	width: 50%;
	text-align: center;
	color: white;
	background: #0f8b96;
	margin: 0 auto;
	cursor: pointer;
}

.search-group {
	display: inline-block;
	color: white;
	width: 10%;
	margin: 10px;
}

.search-results {
	clear: both;
	display: table;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	color: #999;
	border-top: 1px dashed #dcd5d5;
	padding-bottom: 10px;
	padding-top: 9px;
}

.search-results a {
	color: #fff;
}

.confidential:hover {
	background-color: #ffffff
}

.confidential {
	background-color: #000000;
	color: #000000;
}