/***
NEW TODO Page
***/

@import '../global/_variables'; // global variables.
@import '../global/components/_mixins'; // global mixings.

.todo-main-header{
	margin-top: -20px;

	> h3{
		font-weight: 400;
		font-size:22px;
		margin-right: 1em;
		display: inline-block;
		color:#3b464f;
	}

	>.todo-breadcrumb{
		border-left:1px solid;
		border-color:#dae3eb;
		padding:0.5em 2em;
		display: inline-block;
		margin-top:17px;

		> li{
			display: inline-block;
			font-size:11px;

			> a{
				color:#77838d;
				text-transform: uppercase;
				text-decoration: none;

				&:hover{
					color:#337ab7;
					text-decoration: none;
				}
			}

			>.todo-active{
				color:#49a7fa;
			}


			&:before{
				content: "•";
    			color: #b6c1cb;
    			margin:0 1em;
			}

			&:first-child:before{
				content: "";
				margin:0;
			}
			
		}
	}
}

.todo-container{

	.todo-projects-container,
	.todo-tasks-container{
		background-color:#fff;
		border:1px solid;
		border-color: #ebf0f5;
	}

	.todo-projects-container{
		padding:0;

		>li {
			list-style: none;
			padding:30px 20px;
		}
	}

	.todo-projects-divider{
		height:1px;
		margin:0;
		background-color: #ebf0f5;
	}

	.todo-tasks-container{
		padding:30px 20px;
	}

	.todo-head{
		border-bottom:1px solid;
		border-color:#ebf0f5;
		padding-bottom:20px;

		> h3{
			margin-top:0;
			display: inline-block;
			color:#4db3a4;
			font-weight: 600;
			text-transform: uppercase;
			font-size: 15px;
		}

		> p{
			display: inline-block;
			color:#9eacb4;
			font-size:12px;
			margin-left:2em;
			margin-bottom: 0;
			margin-top: 0;
		}

		> button{
			float:right;
			font-weight: 600;
			font-size: 11px;
			text-transform: uppercase;
		}
	}

	.todo-projects-content,
	.todo-tasks-content {
		padding-left:0;
	}

	.todo-projects-item,
	.todo-tasks-item {
		list-style: none;
		margin-left: 0;
	}

	.todo-projects-item{

		> h3{
			font-size: 20px;
			color: #4e5a64;
			font-weight: 600;
			margin-top:0;
			margin-bottom: 15px;
		}

		p{
			color:#a0a9b4;
			margin-bottom: 15px;
			margin-top: 0;
		}

		&:last-child{
			border-bottom: none;
		}

		&.todo-active{
			background-color: #fafbfc;
			position: relative;

			>h3{
				color:#49a7fa;
			}

			&:after{
				content: " ";
				width:0;
				height:0;
				border-top: 40px solid transparent;
				border-bottom: 40px solid transparent;
				border-left: 20px solid #fafbfc;
				position: absolute;
    			right: -20px;
    			top: 65px;
			}
		}

		&:hover{
			background-color: #fafbfc;
			cursor: pointer;
		}

		>.todo-project-item-foot{
			font-size:12px;
		}
	}

	.todo-tasks-item{
		padding:30px 0;
		border-bottom:1px solid;
		border-color:#ebf0f5;

		>h4{
			font-size: 16px;
			font-weight: 600;
			margin:0;
			line-height: 1.3em;

			> a{
				color:#65717b;

				&:hover{
					color:#49a7fa;
					text-decoration: none;
				}

				&:focus{
					color:#65717b;
					text-decoration: none;
				}
			}
		}

		>p {
			margin: 0;
			color:#9eacb4;
		}

		&:last-child{
			border-bottom: none;
		}
	}

}

.todo-add-button{
	border:1px solid;
	border-color: #e0e6e9;
	background-color: #fff;
	color:#c1cbd1;
	text-decoration: none;
	padding: 0 0.4em;
	font-size: 20px;
	margin: -0.3em 0 0 0.5em;
	float: right;

	&:hover{
		background-color: #4db3a4;
		color:#fff;
		text-decoration: none;
	}

	&:focus{
		color:#c1cbd1;
		text-decoration: none;
	}
}

// TODO CUSTOM MODAL STYLING
#todo-members-modal{

	>.modal-dialog{
		top:20px;
	}

	.select-height{
		height:10em;
	}
}

#todo-task-modal{

	>.modal-dialog{
	    position: absolute;
	    top: 0;
	    right: 0;
	    //left:0;
	    bottom: 0;
	    width: 60%;
	    margin:0 auto;

		.modal-content{
			position: absolute;
			top:0;
			bottom:0;
			right:0;
			left:0;
			overflow:auto;

			.todo-task-modal-title {
				font-weight: 600;
				text-transform: uppercase;
				margin-left: 2em;
			}

			.todo-task-due{
				margin-left: 1em;
				font-weight: 600;
				color:#4db3a4;
				width:150px !important;
			}

			.todo-task-assign{
				margin-left: 1em;
				border:1px solid;
				border-color: #ccc;
				padding:6px 10px;
				font-weight: 600;
				color:#4db3a4;
				text-transform: uppercase;

				&:hover,
				&:focus{
					text-decoration: none;
				}
			}

			> .todo-task-modal-body{

				>.todo-task-modal-bg{
					background-color: #f7f9fa;
					padding: 20px;
				}

				>h3{
					margin: 15px 0;
					font-size: 20px;
					color:#4e5a64;
					font-weight: 600;
				}

				> p{
					font-size: 15px;
					color:#8f9ea6;
					line-height: 24px;
				}

				>h4{
					font-size: 14px;
					font-weight: 600;
					text-transform: uppercase;
					color:#9eacb4;
					margin-top:25px;

					> .todo-add-button{
						float:none;
					}
				}

				>.todo-task-file{
					color: #49a7fa;
					font-size:13px;

					> i{
						margin-right: 0.5em;
					}

					>.todo-remove-file{
						color:#9eacb4;
						margin-left: 0.5em;

						&:hover{
							color:#4db3a4;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
}

// TODO CUSTOM FONT STYLING

.todo-inline{
	display: inline-block;
}

.todo-float-r{
	float:right;
}

.todo-bold{
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
}

.todo-padding-b-0{
	padding-bottom: 0 !important;
}

.todo-grey{
	color:#9eacb4;
}

.todo-red{
	color: #d39790 !important;
}

.todo-green{
	color:#4db3a4;
}



/* RESPONSIVE MODE */
@media (max-width: $screen-md-max) { 

	.todo-head{

		>p{
			display:block;
			margin-left: 0 !important;
		}
	}

}


@media (max-width: $screen-sm-max) { /* 991px */

	#todo-task-modal{

		>.modal-dialog{
			width: 95%;	
		}
	}

	.todo-active{
		&:after{
			border:none !important;
		}
	}

}

@media (max-width: $screen-xs-min){

	.todo-task-modal-title{
		margin-left:0 !important;
		margin-top:1em;
		display:block !important;
	}

	.todo-tasks-container{

		.todo-head{
			>p {
				margin-left: 0 !important;
				margin-top: 1em;
			}
		}
	}

	#todo-task-modal{

		.modal-content{
			//overflow-y: scroll;
		}
	}
}