//colors
$color_white : #ffffff;
$color_red   : #d70a0a;
$color_green : #2DB92D;
$color_blue  : #0d61ab;

//mixins
@mixin animation($a){
	-webkit-animation: $a;
	-moz-animation: $a;
	-ms-animation: $a;
	animation: $a;
}
@mixin border-radius($r : 3px){
	-webkit-border-radius: $r;
	-moz-border-radius: $r;
	-ms-border-radius: $r;
	border-radius: $r;
}
@mixin box-shadow($boxshadow : none){
	-webkit-box-shadow: $boxshadow;
	-moz-box-shadow: $boxshadow;
	-ms-box-shadow: $boxshadow;
	box-shadow: $boxshadow;
}
@mixin transition($x : all 0.5s ease-out 0s){
	-webkit-transition: $x;
	-moz-transition: $x;
	-o-transition: $x;
	transition: $x;
}
@mixin transform($transform){
	-webkit-transform: $transform;
	-moz-transform: $transform;
	-ms-transform: $transform;
	-o-transform: $transform;
	transform: $transform;
}
@mixin linear-gradient($t, $b){
	background: $b;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from($t), to($b));
	background: -webkit-linear-gradient($t, $b);
	background: -moz-linear-gradient($t, $b);
	background: -ms-linear-gradient($t, $b);
	background: -o-linear-gradient($t, $b);
	background: linear-gradient($t, $b);
}
@mixin box-sizing($s : border-box){
	-webkit-box-sizing: $s;
	-moz-box-sizing: $s;
	-o-box-sizing: $s;
	box-sizing: $s;
}

.kanban-board {
	background: #fff;
	position: relative;
	min-width: 1170px;
	padding: 10px;
	//font-family: Tahoma;
	.kanban-board__head {
		.kanban-row {
			min-height: auto;
		}
		.kanban-col {
			border-color: transparent;
			padding: 0px 10px 10px;
			font-weight: bold;
		}
	}
	.kanban-board__body {}

	.kanban-line {
		background: #dde4ec;
		position: relative;
		margin-top: 10px;
		&:first-child { margin-top: 0px; }
	}

	.kanban-row {
		position: relative;
		display: flex;
		min-height: 200px;
		white-space: nowrap;
	}
	.kanban-col {
		border-left: 1px dotted #979797;
		width: 16%;
		min-width: 180px;
		padding: 10px;
		white-space: normal;
		&:first-child {
			border-left: none;
			width: 20%;
			min-width: 250px;
		}
	}
	strong {
		font-weight: bold;
	}
}

.kanban-task {
	a {
		color: #000;
		&:hover {
			color: $color_blue;
		}
	}
	.collapse-arrow {
		background: url(../images/uarr-10-dblue.png) no-repeat 50% 50%;
		display: block;
		width: 14px; height: 14px;
		margin: 5px auto 0px;
		&:hover {
			background-color: #c0c5cc;
			cursor: pointer;
		}
	}
}
.kanban-inner-task {
	position: relative;
	font-size: 11px;
	line-height: normal;
	.overlink {
		position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
		z-index: 5;
		display: block;
	}
	.name {
		a {
			display: block;
			color: #000;
			&:hover {
				color: $color_blue;
			}
		}
	}
	.status {
		position: relative;
		padding-left: 10px;
		font-size: 10px;
		line-height: normal;
		color: #666;
		&:before {
			content: '';
			background: #9b9b9b;
			position: absolute; top: 50%; left: 0px;
			display: block; width: 6px; height: 6px;
			margin-top: -3px;
			@include border-radius(50%);
		}
		&.red {
			&:before {
				background: $color_red;
			}
		}
		&.green {
			&:before {
				background: $color_green;
			}
		}
	}

	.kanban-bubble {
		background: #fff;
		position: fixed; left: 50%; z-index: 9999;
		width: 600px;
		margin-left: -300px;
		padding: 20px;
		display: none;
		@include border-radius(10px);
		@include box-shadow(0px 0px 10px #666);
		@include box-sizing();
		@media (max-width: 640px){
			left: 20px; right: 20px;
			width: auto;
			margin: 0px;
		}
	}

	&:hover {
		//color: #0d61ab;
	}
}