$screen-xs-min: 480px;
$screen-xs-max: 479px;
$screen-sm-min: 768px;
$screen-sm-max: 767px;
$screen-md-min: 992px;
$screen-md-max: 991px;
$screen-lg-min: 1200px;
$screen-lg-max: 1199px;

$color-blue-wp:  #21759b;
$color-orange-wp:  #d54e21;
$color-grey-wp:  #464646;
$color-yellow: #ffff99;

$margin: 15px;



* {
	color: $color-grey-wp;
}

*:focus {outline:0;}

body.view-compact {
	.project_title,
	.row-worked {
		display: none;
	}
}

.btn {
	.glyphicon {
		color: inherit;
	}
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

// .ui-autocomplete {
// 	// list-style: none;
// 	max-width: $margin*20;
// 	// padding: 0;

// 	.ui-menu-item {
// 		cursor: pointer;

// 		// &:hover {
// 		// 	background: lighten($color-grey-wp, 65);
// 		// }

// 		// &:first-child {
// 		// 	border-radius: $margin/3 $margin/3 0 0;
// 		// }

// 		// &:last-child {
// 		// 	border-radius: 0 0 $margin/3 $margin/3;
// 		// }

// 		.badge {
// 			background: none;
// 			color: #999;
// 			font-weight: normal;
// 			text-decoration: underline;
// 		}
// 	}

// 	.ui-state-focus {
// 		background: lighten($color-grey-wp, 45);
// 	}
// }

// .ui-helper-hidden-accessible {
// 	display: none;
// }

#wrapper-footer {
	background: lighten($color-grey-wp, 45);
	bottom: 0;
	left: 0;
	padding: $margin/2 0;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 1;

	#filter-wrapper {
		display: inline-block;

		position: fixed;
		/* center the element */
		right: 0;
		left: 0;
		margin-right: auto;
		margin-left: auto;
		overflow: visible;
		top: $margin/2;
		white-space: nowrap;
		width: 20%;

		#btn-filter-apply {
			display: none;
		}

		.dropdown-menu {
			bottom: auto;
		}

		.dropdown-toggle {
			max-width: 10em;
			overflow: hidden;
		}

		@media screen and (max-width: $screen-sm-max) {
			display: block;
			margin-bottom: $margin/2;
			position: static;
			width: 100%;

			.dropdown-menu {
				bottom: 100%;
			}

		}

	}

	#search-wrapper {
		display: inline-block;
		margin: 0 $margin*2;

		input {
			display: inline;
			max-width: 50%;
		}

		@media screen and (max-width: $screen-sm-max) {
			display: block;
			margin-bottom: $margin/2;
		}
	}
}

#wrapper-board {
	overflow-x: hidden;
	width: 100%;

	#row-statuses {
		/* Permalink - use to edit and share this gra/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+62,ffffff+100&1+0,1+75,0+100 */
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 62%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(62%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 62%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 62%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 62%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 62%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */


		margin: 0;
		padding-top: $margin/2;
		position: fixed;
		top: 0px;
		z-index: 1;

		.col-status {
			padding: $margin*3 $margin/5 0;

			.toggle-sidebar {
				display: none;
			}

			&:first-child {
				.toggle-sidebar {
					display: inline-block;
					margin-left: $margin;
					position: absolute;
					top: 0;
					z-index: 1;

					&.toggle-sidebar-open {
						left: 0%;
					}
					&.toggle-sidebar-close {
						left: 100%;
					}
				}
			}

			&:last-child {
				.toggle-sidebar {
					display: inline-block;
					margin-right: $margin;
					position: absolute;
					top: 0;
					z-index: 1;

					&.toggle-sidebar-open {
						right: 100%;
					}
					&.toggle-sidebar-close {
						right: 0%;
					}
				}
			}


			h2 {
				border-top: $margin/2 solid lighten($color-grey-wp, 45);
				margin: 0 0 $margin;
				text-align: center;
			}

			.btn-group-status-actions {
				display: none;
				right: $margin/3;
				position: absolute;
				bottom: 0;
				z-index: 1;

				.glyphicon {
					color: white;
				}
			}

			&:hover,
			&.hover {
				.btn-group-status-actions {
					display: block;
				}
			}

			@media screen and (max-width: $screen-sm-max) {
				display :none;
				padding: 0;
				width: 100%;

				&:first-child {
					display: block;
				}

				.btn-group-status-actions {
					display: none;
				}

				.toggle-sidebar {
					display: none !important;
				}

				h2 {
					padding-top: $margin/2;

					&:before,
					&:after {
						cursor: pointer;
						display: block;
						height: 100%;
						padding-top: $margin/2;
						position: absolute;
						top: $margin/2;
						display: block;
						font-family: 'Glyphicons Halflings';
						font-style: normal;
						font-weight: 400;
						line-height: 1;
						-webkit-font-smoothing: antialiased;
						width: 50%;
						z-index: 1;
					}

					&:before {
						content: "\e079";
						left: 0;
					}

					&:after {
						content: "\e080";
						right: 0;
					}
				}


			}

		} // col-status


		@media screen and (max-width: $screen-sm-max) {
			left: 0% !important;
			padding: 0;
			width: 100%;
		}

	} // #row-statuses



	#row-tasks {
		margin: 0;
		position: relative;
		z-index: 0;

		> .col-tasks {
			padding: 100px 5px 200px;
			position: relative;

			&:hover,
			&.hover {
				background: lighten($color-blue-wp, 60);
			}

			> h2 {
				display: none;
			}

			.task-placeholder {
				background: white;
				border: 1px dashed lighten($color-grey-wp, 10);
				margin-bottom: $margin;
				opacity: .618;
				min-height: $margin*10;
			}

			@media screen and (max-width: $screen-sm-max) {
				display: none;
				height: auto !important;
				padding: 6em 0 0;
				width: 100%;

				&:first-child {
					display: block;
				}

				> h2 {
					left: 0;
					position: absolute;
					text-align: center;
					top: 0;
					width: 100%;
				}
			}

		}

		.task {
			margin-bottom: $margin;
			padding-left: $margin/2;
			position: relative;

			&.active {
				z-index: 10;
			}

			.panel-body {
				padding: $margin/3 $margin/2;
				position: relative;
				z-index: 1;
			}

			.task-id {
				font-weight: normal;
				position: absolute;
				right: $margin/3;
				top: $margin/3;

				.badge {
					cursor: pointer;
				}
			}

			.project {
				margin: 0 (-$margin/5);
				padding: 0;
				position: relative;
				width: 66%;
				z-index: 1;

				.list-group {
					-webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.75);
					-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.75);
					box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.75);
					left: 0;
					list-style: none;
					position: absolute;
					top: 100%;
					z-index: 1;
					width: 100%;

					.list-group-edit {
						position: absolute;
						right: $margin/5;
						top: $margin/5;
						z-index: 1;

						a {
							font-size: .82em;
							text-decoration: underline;
						}
					}

					.list-group-item {
						cursor: pointer;

						&:hover {
							background: #DDD;
						}
					}
				}
			}

			.wrapper-task-title {
				margin: 0 (-$margin/5) $margin/5;
				padding: 0;

				.task_title {
					font-weight: normal;

					@media screen and (max-width: $screen-sm-max) {
						height: 2.382em !important;
						font-size: 2em;
					}
				}
			}

			.row-worked {
				margin: 0 0 $margin/3;

				.btn-title {
					color: #999;
					font-size: .82em;
					display: block;
				}

				> .col {
					padding: 0;
				}

				.col > .btn {
					background: transparent;
					border: 0;
					padding: $margin/3;
					width: 100%;

					&:hover {
						background: lighten($color-grey-wp, 65);
					}
				}

				.dropdown-menu {
					.btn {
						background: transparent;
						border-bottom: 1px solid lighten($color-grey-wp, 45);
						border-radius: 0;
						text-align: left;

						&:hover {
							background: lighten($color-grey-wp, 65);
						}
					}

					li:last-child .btn {
						border-bottom-width: 0;
					}
				}

			}

			.task-assigned-to-initials {
				background: black;
				border-radius: 50%;
				color: white;
				display: block;
				height: 2em;
				line-height: 2;
				margin: 0 auto;
				width: 2em;

				img {
					border-radius: 50%;
					height: 2em;
					width: 2em;
				}

				&.empty {
					background: lighten($color-grey-wp, 45);
					color: lighten($color-grey-wp, 45);
				}
			}

			.col-task-hours {
				position: relative;

				.task-hours-operators {
					display: none;
					left: 0;
					position: absolute;
					top: 100%;
					width: 100%;

					&.active {
						display: block;
					}

					.btn {
						width: 50%;
					}
				}

				&:hover {
					.task-hours-operators {
						display: block;
					}
				}
			}

			.btn-task-hours,
			.btn-estimate {
				overflow: hidden;
			}

			.task-estimate,
			.task-hour-count {
				font-size: 1.618em;
				line-height: 1;
			}

			.progress {
				height: $margin/3;
				margin-bottom: 0;
			}

			.task-handle {
				background-color: lighten($color-grey-wp, 45);
				cursor: move;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: $margin/2;
			}

			@media screen and (max-width: $screen-sm-max) {
				margin-left: $margin/3;
				margin-right: $margin/3;
			}

		}

		@media screen and (max-width: $screen-sm-max) {
			left: 0% !important;
			width: 100%;
		}

	} // row-tasks

	// disable sidebar hiding
	&.show_all_cols {
		#row-statuses,
		#row-tasks {
			left: 0;
			width: 100%;
		}

		.toggle-sidebar {
			display: none !important;
		}
	}


}


.modal {
	.panel-heading {
		display: block;
	}
	.btn-close {
		position: absolute;
		right: 0;
		top: 0;
	}
}

.bootstrap-growl {
	position: fixed !important;
}


.editable-input {
	cursor: pointer;
	border: 1px solid lighten($color-grey-wp, 45);
	box-shadow: none;
	font-size: inherit;
	height: auto;
	padding: $margin/5 $margin/5 0;
	width: 100%;

	&[readonly] {
		background: transparent;
		border: 1px solid transparent;
		&:hover {
			background: lighten($color-grey-wp, 65);
		}
	}

}