$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-bluegrey: #AAB1BA;
$color-grey-wp: #464646;
$color-orange-wp: #d54e21;
$color-yellow: #ffff99;

$margin: 15px;

* {
	color: $color-grey-wp;
	font-family: 'Open Sans', sans-serif;
}

*:focus,
*:active {
	outline: 0 !important;
}

html, body {
	height: 100%;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	overflow: hidden;
}

@media screen and (max-width: $screen-sm-max) {
	body {
		font-size: 1.618em;
	}
}

sub {
	bottom: auto;
	color: lighten($color-grey-wp, 10);
	margin-left: -.382em;
}

.btn-default, .open > .dropdown-toggle.btn-default {
	background-color: white !important;

	&:hover,
	&:active,
	&:active {
		background-color: lighten($color-grey-wp, 70) !important;
	}
}

.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);
	}
}

.modal-body {
	.close {
		height: $margin*3.82;
		opacity: 1;
		position: absolute;
		right: 0;
		top: 0;
		width: $margin*3.82;
		&:hover {
			background: lighten($color-bluegrey, 28);
		}
	}

	a.panel-title {
		display: block;
	}
}

.tab-content {
	height: 100%;
}

#page-loading {
	left: 25%;
	position: fixed;
	top: 33%;
	text-align: center;
	width: 50%;
}

.board {
	height: 100%;
	margin: 0 $margin*1.5;
	overflow: hidden;
	position: relative;

	&:before {
		content: attr(data-board-title);
		display: block;
	}

	&.hide_time_tracking {
		.col-task-hours,
		.col-task-estimate,
		.task-progress {
			display: none;
		}

		.col.col-task-assigned {
			float: right;
			small {
				display: inline;
			}
		}
	}

	.row-statuses,
	.row-tasks {
		margin: 0;
	}

	.board-no-statuses {
		left: 0;
		position: absolute;
		text-align: center;
		top: $margin*2;
		width: 100%;
	}

	@media screen and (max-width: $screen-sm-max) {
		margin: 0;

		.row-statuses,
		.row-tasks {
			margin-left: 0 !important;
			width: 100% !important;
		}

		.col_percent_w {
			width: 100% !important;
		}
	}
}

.row-statuses-wrapper {
	overflow: hidden;
}

.row-statuses {
	position: relative;
	z-index: 1;

	.col-status {
		-webkit-box-shadow: 0px $margin $margin (-$margin)/3 white;
		-moz-box-shadow: 0px $margin $margin (-$margin)/3 white;
		box-shadow: 0px $margin $margin (-$margin)/3 white;

		padding: 0px $margin*.66;
		position: relative;

		&:nth-child(even) {
			-webkit-box-shadow: 0px $margin $margin (-$margin)/3 lighten($color-bluegrey, 28);
			-moz-box-shadow: 0px $margin $margin (-$margin)/3 lighten($color-bluegrey, 28);
			box-shadow: 0px $margin $margin (-$margin)/3 lighten($color-bluegrey, 28);
			background: lighten($color-bluegrey, 28);

			@media screen and (max-width: $screen-sm-max) {
				background: white;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
			}
		}

		h3 {
			border-top: $margin/3 solid orange;
			padding: $margin/2 0 0;
			text-align: center;

			.status-task-count {
				color: lighten($color-grey-wp, 50);
			}

			.status-wip-task-limit {
				color: lighten($color-grey-wp, 50);
				margin-left: -.236em;
			}
		}

		.btn-group-status-actions {
			bottom: 0;
			position: absolute;
			right: $margin/3;

			.glyphicon,
			span {
				color: white;
			}
		}

		@media screen and (min-width: $screen-sm-min) {
			// width: 16.66%;
		}

		@media screen and (max-width: $screen-sm-max) {
			display: none;
			text-align: center;
			&:first-child {
				display: block;
			}

			.btn-group-status-actions {
				display: inline-block !important;
				position: relative;
			}
		}
	}

}

.row-tasks-wrapper {
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	position: relative;
	width: 100%;
	z-index: 0;

	.col-tasks {
		padding: $margin $margin*.66 $margin*15;
		position: relative;
		z-index: 0;

		&:nth-child(even) {
			background: lighten($color-bluegrey, 28);

			@media screen and (max-width: $screen-sm-max) {
				background: white;
			}
		}

		&.active,
		&.hover {
			z-index: 1;
		}

		@media screen and (max-width: $screen-sm-max) {
			display: none;
			&:first-child {
				display: block;
			}
		}
	}

}

// row-tasks-wrapper

// must be "global" for dragging styles
.task {
	background: white;
	border: 1px solid #DDD;
	border-radius: $margin/3;
	margin-bottom: $margin;
	padding: 0 $margin/2 $margin/3 $margin;
	position: relative;
	z-index: 0;

	&:hover,
	&.active {
		z-index: 1;
	}

	&.ui-sortable-helper {
		height: auto !important;
		.task-fields {
			display: none;
		}
	}

	[contenteditable],
	[data-contenteditable] {
		overflow-x: hidden;
		margin: 0 (-$margin/5) 0 (-$margin/5);
		min-height: $margin+($margin/5*2);
		padding: $margin/5;
	}

	[contenteditable="true"],
	[data-contenteditable="true"] {
		cursor: pointer;

		&:hover,
		&:focus,
		&:active {
			background: lighten($color-bluegrey, 28);
		}

		&:empty:before {
			color: lighten($color-grey-wp, 60);;
			content: attr(placeholder);
			display: block; /* For Firefox */
		}

		a {
			cursor: pointer;
		}
	}

	.task-menu {
		border: 1px solid transparent;
		position: absolute;
		right: $margin/5;
		top: $margin/5;
		z-index: 1;

		.dropdown {
			opacity: .618;

			&:hover,
			&.open {
				opacity: 1;
			}
		}

		@media screen and (min-width: $screen-sm-min) {
			&:hover,
			&:active,
			&:focus {
				background: white;
				border: 1px solid #EEE;
			}
		}

		@media screen and (max-width: $screen-sm-max) {
			background: white;
			border: 1px solid #EEE;
		}
	}

	.task-project {
		max-width: 80%;
		min-height: .618em;
		z-index: 1;

		&.open {
			z-index: 2;
		}

		[contenteditable="true"] {
			color: #888;

			&:empty:before {
				color: lighten($color-grey-wp, 60);;
				content: attr(placeholder);
			}
		}
	}

	.task-title {
		font-size: 1.382em;
		margin-bottom: $margin/5;
		z-index: 1;
	}

	.row-task-actions {
		$task-action-size: 1.8em;

		clear: both;
		margin: 0 0 $margin/3;

		.col {
			padding: 0;
			text-align: center;

			small {
				color: #999;
			}

			.dropdown-menu {
				overflow-x: hidden;
			}

			&.col-task-hours,
			&.col-task-estimate {
				line-height: 1.236;
			}

			&.col-task-estimate:before {
				content: '/';
				font-size: 2em;
				left: -.236em;
				position: absolute;
				bottom: $margin/5;
				z-index: 1;
			}

			&.col-task-assigned {
				.btn {
					overflow-x: hidden;
				}

				small {
					line-height: 1.618;
				}

				.avatar {
					border-radius: 50%;
					height: ceil($task-action-size);
					width: ceil($task-action-size);
				}
			}

			small {
				display: block;
				font-size: .8em;
				font-weight: normal;
			}

			.btn-task-action {
				border: 0;
				line-height: 1.236;
				padding: $margin/3 0;
			}

			.task-hours,
			.task-estimate {
				color: lighten($color-grey-wp, 10);
				display: block;
				font-size: $task-action-size;
				// font-weight: bold;
				// letter-spacing: -3px;
			}

			.task-assigned-initials {
				background: lighten($color-grey-wp, 10);
				border-radius: 50%;
				color: white;
				display: inline-block;
				height: $task-action-size;
				line-height: $task-action-size;
				// margin-bottom: $margin/5;
				width: $task-action-size;

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

			&.col-task-hours {
				.dropdown-menu {
					background: transparent;
					box-shadow: none;
					border: 0;
					padding: 0;
				}
				.btn-group {
					width: 100%;
					.btn {
						width: 50%;
					}
				}
			}
		}
	}

	.task-progress {
		height: $margin/3;
		margin: 0;
		opacity: .382;
	}

	&:hover .task-progress {
		opacity: .618;
	}

	.task-handle {
		background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTAgMjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe29wYWNpdHk6MC4xNjg7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjMiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjIiIHk9IjAiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjciIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjYiIHk9IjAiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjMiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjIiIHk9IjQiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjciIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjYiIHk9IjQiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjMiIHk9IjkiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjIiIHk9IjgiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjciIHk9IjkiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjYiIHk9IjgiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjMiIHk9IjEzIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+Cgk8L2c+Cgk8Zz4KCQk8cmVjdCB4PSIyIiB5PSIxMiIgY2xhc3M9InN0MSIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPgoJPC9nPgo8L2c+CjxnPgoJPGcgY2xhc3M9InN0MCI+CgkJPHJlY3QgeD0iNyIgeT0iMTMiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjYiIHk9IjEyIiBjbGFzcz0ic3QxIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8ZyBjbGFzcz0ic3QwIj4KCQk8cmVjdCB4PSIzIiB5PSIxNyIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPgoJPC9nPgoJPGc+CgkJPHJlY3QgeD0iMiIgeT0iMTYiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjciIHk9IjE3IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+Cgk8L2c+Cgk8Zz4KCQk8cmVjdCB4PSI2IiB5PSIxNiIgY2xhc3M9InN0MSIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPgoJPC9nPgo8L2c+CjxnPgoJPGcgY2xhc3M9InN0MCI+CgkJPHJlY3QgeD0iMyIgeT0iMjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjIiIHk9IjIwIiBjbGFzcz0ic3QxIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8ZyBjbGFzcz0ic3QwIj4KCQk8cmVjdCB4PSI3IiB5PSIyMSIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPgoJPC9nPgoJPGc+CgkJPHJlY3QgeD0iNiIgeT0iMjAiIGNsYXNzPSJzdDEiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHg9IjMiIHk9IjI1IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+Cgk8L2c+Cgk8Zz4KCQk8cmVjdCB4PSIyIiB5PSIyNCIgY2xhc3M9InN0MSIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPgoJPC9nPgo8L2c+CjxnPgoJPGcgY2xhc3M9InN0MCI+CgkJPHJlY3QgeD0iNyIgeT0iMjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz4KCTwvZz4KCTxnPgoJCTxyZWN0IHg9IjYiIHk9IjI0IiBjbGFzcz0ic3QxIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		cursor: move;
		cursor: -webkit-grab;
		left: 0;
		position: absolute;
		height: 100%;
		top: 0;
		width: $margin/2;

		@media screen and (max-width: $screen-sm-max) {
			cursor: default;
		}
	}
}



// task

.alert-task-restore {
	cursor: pointer;
}

.task-placeholder {
	border: 1px dashed #999;
	margin-bottom: $margin;
	min-height: 9em;
}

body.board-view-compact {
	.task {
		.row-task-actions,
		.task-progress {
			display: none;
		}

		&:hover {
			.row-task-actions,
			.task-progress {
				display: block;
			}
		}

	}
}

body.board-view-all-cols {
	.col-tasks-sidebar {
		display: none;
	}
	.board,
	.row-statuses,
	.row-tasks {
		margin: 0 !important;
		width: 100% !important;
	}

}

body.board-view-restrict-visibility #btn-restrict-visibility .glyphicon{
	display: inline-block;
}

.col-tasks-sidebar {
	// background: red;
	cursor: pointer;
	height: 100%;
	position: fixed;
	top: 0;
	width: $margin*1.5;
	z-index: 0;

	$sidebar-offset: 5px;

	&.col-tasks-sidebar-left {
		left: 0; // ceil((-$margin*1.5)+$sidebar-offset);

		.col-tasks-sidebar-label {
			transform: rotate(270deg);
			-webkit-transform: rotate(270deg);
			-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
		}

		.col-tasks-sidebar-arrow {
			border-width: $margin*3.82 0px $margin*3.82 $margin;
			border-color: transparent;
			left: 100%;
		}
	}

	&.col-tasks-sidebar-right {
		right: 0; // ceil((-$margin*1.5)+$sidebar-offset);

		.col-tasks-sidebar-label {
			transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
		}

		.col-tasks-sidebar-arrow {
			border-width: $margin*3.82 $margin*1 $margin*3.82 0px;
			border-color: transparent;
			right: 100%;
		}
	}

	.col-tasks-sidebar-label {
		height: $margin*1.5;
		line-height: 0;
		margin-top: $margin*.75;
		padding: $margin*1.5/2;
		position: absolute;
		text-align: center;
		top: 50%;
		width: $margin*1.5;
		white-space: nowrap;
		z-index: 1;

		.col-tasks-sidebar-label-inner {
			color: white;
			height: 0px;
			left: (-$margin*10/2)+($margin*1.5/2);
			position: absolute;
			top: 45%;
			width: $margin*10;
		}
	}

	.col-tasks-sidebar-arrow {
		width: 0;
		height: 0;
		border-style: solid;
		margin-top: -($margin*3.82/2);
		position: absolute;
		top: 50%;
	}

	@media screen and (max-width: $screen-sm-max) {
		display: none;
	}
}

.modal-task-move {
	.list-group-item {
		position: relative;

		.task-handle {
			cursor: pointer;
			left: 0;
			position: absolute;
			height: 100%;
			top: 0;
			width: 8px;

			@media screen and (max-width: $screen-sm-max) {
				cursor: default;
			}
		}
	}
}

#modal-projects {
	#modal-projects-sort-filter {
		input {
			display: inline;
			width: auto;
		}
	}
}

#page-footer {
	background: $color-bluegrey;
	border: 0;
	border-radius: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0 $margin/3;
	position: fixed;
	text-align: center;
	width: 100%;

	#footer-settings-toggle {
		color: white;

		.caret {
			color: white;
		}

		&:hover,
		&:focus {
			color: black;

			.caret {
				color: black;
			}
		}

		@media screen and (max-width: $screen-sm-max) {
			color: black;

			.caret {
				color: black;
			}
		}
	}

	.navbar-toggle {
		background: white;
		border-color: $color-grey-wp;
		.icon-bar {
			background: $color-grey-wp
		}
	}

	.dropdown-toggle {
		color: black;
	}

	.open #footer-settings-toggle {
		color: black;

		.caret {
			color: black;
		}
	}

	#page-search {
		margin: $margin/2 (-$margin);
		padding: 0;

		#board-search-clear {
			color: #999;
			cursor: pointer;
			pointer-events: all;

			&:hover {
				color: $color-grey-wp;
			}
		}
	}

	@media screen and (max-width: $screen-sm-max) {
		background: transparent;

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

		#page-search {
			margin: $margin/2 (-$margin);
			padding: 0;

			.btn {
				background: lighten($color-grey-wp, 70) !important;
				border: 0;
				display: block;
				text-align: left;

				&:hover,
				&:focus {
					background: white !important;
				}
			}
		}

		.navbar-nav {
			a {
				color: black;
				display: block;
				font-size: 1.618rem;
				text-align: left;

				&:hover,
				&:focus {
					background: white;
				}
			}
		}
	}
}

.btn-view-toggle {
	.glyphicon {
		display: none;
		text-indent: -1em;
	}
}

body.board-view-compact {
	#btn-view-compact {
		.glyphicon {
			display: inline-block;
		}
	}
}

body.board-view-all-cols {
	#btn-view-all-cols {
		.glyphicon {
			display: inline-block;
		}
	}
}