/* todo list - editor */
:root{
	--klique-primary-color: #24125f;
	--klique-secondary-color: #ff7500;
	--klique-white-color: #ffffff;
	--klique-border-color: #d1d2d2;
	--klique-opaque-color: #f7f7f7;
	--klique-border-color:#eeeeee;
	--klique-disabled-color:#cccccc;
}

.row{
	> div{
		padding:20px;
	}
	div#last-column{
		background:var(--klique-opaque-color);
	}
}
span.required{
	color:red;
	padding:6px;
}

.todo-list#task-editor{
	background-color:var(--klique-white-color);
	border:1px solid var(--klique-border-color);
	border-radius:8px;
	overflow:hidden;
	
	h2.title{
		font-size:18px;
		margin-bottom:20px;
		
	}
	
	#last-column{
		h2.title{
			padding-bottom:10px;
			border-bottom:1px solid var(--klique-border-color);
			cursor:pointer;
			width:100%;
			font-size:14px;
		}
		h2.title::after{
			content: '+';
			float:right;
			transition:ease 0.3s;
			transform:rotate(135deg);
			font-size:26px;
		}
		h2.title.closed::after{
			transition:ease 0.3s;
			transform:rotate(0deg);
		}
		.field{
			font-size:14px;
			
			input,select,textarea,label{
				font-size:inherit;
			}
			
		}
	}
	
	ul.fields{
		list-style:none;
		display:inline-flex;
		flex-wrap:wrap;
		margin:0;
		padding:0;
		margin-bottom:20px;
		
		.field{
			padding: 0;
			
			.hide{
				transition:ease 0.3s;
			}
			label{
				width:100%;
				margin-bottom:10px;
				
				input,textarea,select,.klique-button-group{
					margin-top:5px!important;
				}
				span.error{
					display:none;
					color:red;
				}
			}
			
			.klique-button-group{
				width:100%;
				display:inline-flex;
				flex-wrap:nowrap;
				flex-direction:row;
				cursor:pointer;
				
				label{
					display:inline-flex;
					min-height:32px;
					border: 1px solid var(--klique-border-color);
					width:-webkit-fill-available;
					text-align:center;
					cursor:pointer;
					align-items:center;
					justify-content:center;
					background:var(--klique-white-color);
					padding:5px 0;
					
					input{
						display:none!important;
					}
					
				}
				label:first-child{
					border-radius:30px 0 0 30px;
					border-right:0;
				}
				label:last-child{
					border-radius:0 30px 30px 0;
					border-left:0;
				}
				label.selected{
					background:var(--klique-primary-color);
					color: var(--klique-white-color);
					border-color:var(--klique-primary-color);
				}
			
			}
			
			.select2.select2-container{
				
				.select2-selection{
					min-height: 40px;
					display: inline-flex;
					align-content: center;
					align-items: center;
					flex-direction: row;
					width: 100%;
					border: 1px solid var(--klique-border-color) !important;
				}
				.select2-selection__rendered{
					width:100%;
					display:block;
					flex-wrap:wrap;
				}
			}
		}
		
	} /* fields */
	
	.action-bar{
		display:inline-flex;
		flex-wrap:nowrap;
		width:100%;
		padding:20px;
		border-top:1px solid var(--klique-border-color); 
		
		ul.buttons{
			display:inline-flex;
			flex-wrap:wrap;
			list-style:none;
			margin:0;
			padding:0;
			column-gap:10px;
			
			li.button{
				border-radius:25px;
				background: var(--klique-secondary-color);
				color:var(--klique-white-color);
				font-weight:600;
				font-size:16px;
				padding:10px 21px;
				cursor:pointer;
				
				&.approval{
					background:var(--klique-primary-color);
					&:hover{
						background:var(--klique-secondary-color);
						color:var(--klique-primary-color);
					}
				}
				&.cancel{
					background:var(--klique-disabled-color);
					color:#333333;
					&:hover{
						background:#333333;
						color:var(--klique-white-color);
					}
				}
				&:hover{
					background:var(--klique-primary-color);
					transition:ease 0.3s;
				}
			}
			
		}
	}
}

.todo-list#task-list{
	ul.tasks{
		list-style:none;
		display:inline-flex;
		flex-wrap:wrap;
		
		li.task{
			padding:0;
			
			.header{
				display:inline-flex;
				flex-wrap:nowrap;
				padding:10px;
				border-bottom:1px solid var(--klique-border-color);
				width:100%;
				align-items:center;
				
				i{
					font-size:26px;
					margin-right:10px;
				}
			}
			
			.body{
				padding:10px;
				width:100;
				display:inline-flex;
				flex-wrap:wrap;
			}
			.footer{
				padding:5px 10px;
				width:100%;
				display:inline-flex;
				flex-wrap:wrap;
				border-top:1px solid var(--klique-border-color);
				background:var(--klique-opaque-color);
			}
			h2.heading{
				font-size:16px;
				color:var(--klique-primary-color);
				margin:0;
			}
			
			.user-badge-wrapper{
				min-width:0;
				padding:2px;
				
				
				.user-badge{
					margin:0;
				}
			}
		}
	}
	
	
	
}