/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */
@import 'mixins';
.todos {
	background: #f8f8f8;
}
.todos-header {
	background: lighten($grey, 41);
	padding: 15px 15px 5px 15px;
	text-align: center;
}
.todos ul {
	margin: 0;
}
.todos .checkbox-outer {
	line-height: 18px;
	width: 21px;
	margin: 0 10px 0 0;
	border: 1px solid rgba(black, 0.3);
	background: rgba(white, 0.5);
	text-align: center;
	display: inline-block;
}
.todos li i {
	@include opacity(0);
	font-size: 12px;
	color: black;
	vertical-align: middle;
}
.todos .name {
	vertical-align: middle;
}
.todos li {
	padding: 7px 15px;
	@include stripes($shade);
}
.progressBar--medium {
	width: 80%;
	margin: 10px auto;
}
.npo-todo-percent span {
	font-size: 18px;
}
.todos li.is-done {
	i { 
		@include opacity(1); 
	}
	.name { 
		text-decoration: line-through;
		color: rgba(black, 0.4);
	}
	a {
		pointer-events: none;
		color: inherit;
	}
}