tasks/css/style.scss

.icon {
	background: url("../img/sprites.svg") no-repeat;
}

.icon-add {
	background-position: 20% 0;
}

.icon-all {
	background-position: 80% 20%;
}

.icon-alphabetically {
	background-position: 0 20%;
}

.icon-calendar {
	background-position: 20% 20%;
}

.icon-calendar-due {
	background-position: 40% 0;
}

.icon-calendar-overdue {
	background-position: 40% 20%;
}

.icon-checkmark {
	background-position: 0 40%;
}

.icon-checkmark-color {
	background-position: 20% 40%;
}

.icon-clock {
	background-position: 40% 40%;
}

.icon-clock-due {
	background-position: 60% 0;
}

.icon-clock-overdue {
	background-position: 60% 20%;
}

.icon-close {
	background-position: 60% 40%;
}

.icon-current {
	background-position: 0 60%;
}

.icon-hide {
	background-position: 20% 60%;
}

.icon-manual {
	background-position: 40% 60%;
}

.icon-menu {
	background-position: 60% 60%;
}

.icon-note {
	background-position: 80% 0;
}

.icon-percent {
	background-position: 0 0;
}

.icon-percent-active {
	background-position: 80% 40%;
}

.icon-random {
	background-position: 80% 60%;
}

.icon-settings {
	background-position: 0 80%;
}

.icon-sort-down {
	background-position: 20% 80%;
}

.icon-sort-up {
	background-position: 40% 80%;
}

.icon-subtasks-hidden,
.icon-subtasks-hidden\:regular {
	background-position: 60% 80%;
}

.icon-subtasks-hidden:hover,
.icon-subtasks-hidden\:hover {
	background-position: 80% 80%;
}

.icon-subtasks-visible {
	background-position: 100% 0;
}

.icon-tag {
	background-position: 100% 20%;
}

.icon-tag-active {
	background-position: 100% 40%;
}

.icon-task-star {
	background-position: 100% 60%;
}

.icon-task-star-high {
	background-position: 100% 80%;
}

.icon-task-star-low {
	background-position: 0 100%;
}

.icon-task-star-medium {
	background-position: 20% 100%;
}

.icon-toggle {
	background-position: 40% 100%;
}

.icon-trash {
	background-position: 60% 100%;
}


//colors
$red: #f00;								// warnings and errors
$red_overdue: #b3312d;		// overdue dates and high importance
$yellow: #fd0;						// medium importance
$blue_due: #4271a6;				// due dates and low importance
$blue_background: #168ad4;// highlighting date/timepicker dates
$gray_dark: #404040;			// text
$gray: #a0a0a0;						// inactive text, checkbox-borders and separators
$gray_light: #ccc;
$gray_easy: #f7f7f7;
$black: #000;
$white: #fff;

//@extend-elements
//original selectors
//.icon.task-checkbox, .icon.detail-checkbox
%extend_1 {
	border-radius: 3px;
	border: 1px solid $gray;
	float: left;
	margin: 9px;
}

//original selectors
//#app-sidebar div.content-wrapper .title textarea, #app-sidebar div.content-wrapper .title pre
%extend_2 {
	box-shadow: none;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	background: none repeat scroll 0 0 transparent;
	border: medium none;
	padding: 0;
	white-space: pre-wrap;
	word-wrap: break-word;
}

//original selectors
//#app-sidebar div.content-wrapper .body .note .expandingArea textarea, #app-sidebar div.content-wrapper .body .note .expandingArea pre
%extend_3 {
	box-shadow: none;
	background: none repeat scroll 0 0 transparent;
	border: medium none;
	font-size: 13px;
	line-height: 26px;
	padding: 0;
	white-space: pre-wrap;
	word-wrap: break-word;
}

//original selectors
//.ui-datepicker table td.selected a, .ui-timepicker table td.selected a
%extend_11 {
	background: linear-gradient(to top, rgba($blue_background, .8), rgba($blue_background, .6)) repeat scroll 0 0 transparent !important;
	border-radius: 3px;
	color: $white !important;
	opacity: 1;
	position: relative;
}

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}

.visibility-hidden {
	visibility: hidden;
}

.task-body {
	background-color: $white;
	height: 37px;
	list-style: none outside none;
	margin: 0;
	position: relative;
	border-style: solid;
	border-width: 1px;
	border-color: $gray_light;
	overflow: hidden;

	.icon {
		&.large {
			margin: 8px;
		}

		&.task-separator {
			cursor: default;
			height: 100%;
			left: 34px;
			position: absolute;
			top: 1px;
			background: unset;
			width: 2px;
			border-left: 1px dotted $gray;
		}

		&.icon-add {
			&:hover {
				opacity: 1;
			}
		}

		&.subtasks {
			display: none;
		}

		&.toggle-completed-subtasks {
			display: none;
		}
	}

	&:hover {
		background-color: $gray_easy;
	}

	&.active {
		background-color: $gray_easy;
	}

	.title-wrapper {
		cursor: pointer;
		color: $gray_dark;
		display: block;
		line-height: 16px;
		margin: 0 0 0 44px;
		overflow: hidden;
		padding: 9px 0;
		position: relative;
		text-overflow: ellipsis;
		white-space: nowrap;

		.title {
			cursor: text;
		}
	}

	.duedate {
		color: $blue_due;
		float: right;
		font-size: 11px;
		line-height: 14px;
		margin: 10px;

		&.overdue {
			color: $red_overdue;
		}
	}

	.listname {
		color: $gray;
		float: right;
		font-size: 11px;
		line-height: 14px;
		margin: 10px;
	}

	&.attachment .icon.icon-note {
		display: inline-block;
		float: right;
	}

	&.subtasks .icon.subtasks {
		display: inline-block;
	}

	&.completedsubtasks .icon.toggle-completed-subtasks {
		display: inline-block;
	}
}

#app-navigation {
	li {
		transition: max-height 300ms ease 0s;
		max-height: 100px;

		> a {
			padding-right: 20px;
		}

		&.active {
			> a span {
				&.title {
					opacity: 1;
				}

				&.icon {
					opacity: 1;
				}
			}

			&.with-menu > a {
				padding-right: 70px;
			}
		}

		&.edit {
			> a {
				display: none;
			}

			.app-navigation-entry-utils {
				display: none;
			}

			.app-navigation-entry-menu {
				display: none;
			}

			.app-navigation-entry-edit.name {
				display: inline-block;
				height: auto;
			}
		}

		.app-navigation-entry-edit {
			&.name {
				display: none;
			}

			&.caldav {
				display: none;
			}
		}

		&.animate-up {
			max-height: 0;
			border-bottom: 0;
			overflow: hidden;
		}

		&:hover > a span {
			&.title {
				opacity: 1;
			}

			&.icon {
				opacity: 1;
			}
		}

		&.list:not(.active) .app-navigation-entry-utils-menu-button {
			display: none;
		}

		&.caldav .app-navigation-entry-edit.caldav {
			display: inline-block;
			height: auto;
		}

		a > span {
			&.icon {
				margin-top: -3px;
				margin-left: 2px;
			}

			&.title {
				margin-left: 11px;
			}
		}
	}

	.app-navigation-entry-edit {
		input.action {
			background-color: $gray_easy;
			width: 36px;
			border-left: 0 none;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			background-position: center;

			&:hover {
				border-left: 1px solid;
				margin-left: -1px;
				width: 37px;
			}
		}

		&.name input[type="text"] {
			width: calc(100% - 72px);
		}

		&.caldav input[type="text"] {
			width: calc(100% - 36px);
		}
	}

	.app-navigation-entry-utils li {
		font-size: 100%;
	}

	.app-navigation-entry-menu li {
		float: inherit;
		width: auto !important;
		cursor: pointer;

		img {
			cursor: pointer;
			margin-right: 5px;
			vertical-align: text-bottom;
		}

		span {
			cursor: pointer;
		}

		button {
			float: inherit;
		}

		&:hover a {
			opacity: 1 !important;
		}

		&.confirmed a {
			&.confirmation-confirm {
				display: inline-block !important;
				opacity: 1;
			}

			&.confirmation-abort {
				display: inline-block !important;
				opacity: 1;
			}
		}
	}

	> ul ul.colorpicker-list {
		display: inline-flex;
	}
}

.sortorder-dropdown {
	display: none;
	top: 68px;
	right: 3px;

	li {
		float: inherit;
		width: auto !important;
		cursor: pointer;
		opacity: .57;

		&.active {
			opacity: 1 !important;
		}

		img {
			cursor: pointer;
			margin-right: 5px;
			vertical-align: text-bottom;
		}

		span {
			cursor: pointer;
		}

		&:hover {
			opacity: 1 !important;
		}
	}

	a {
		width: 100% !important;
	}

	&.open {
		display: block;
	}

	.icon {
		margin: 12px 8px;

		&.sort-indicator {
			margin-left: auto;
			margin-right: 0;
			filter: alpha(opacity=80);
			opacity: .8;
			float: right;
			visibility: hidden;
		}
	}

	.label {
		margin-right: 10px;
	}

	.active .icon.sort-indicator {
		visibility: visible;
	}
}

.app-navigation-entry-menu {
	&.sortorder-dropdown li > a span {
		opacity: 1 !important;

		&[class*=" icon-"] {
			padding: 0;

			&.icon-menu {
				@extend .icon-menu;
			}

			&.icon-calendar {
				@extend .icon-calendar;
			}

			&.icon-task-star {
				@extend .icon-task-star;
			}

			&.icon-alphabetically {
				@extend .icon-alphabetically;
			}

			&.icon-manual {
				@extend .icon-manual;
			}

			&.icon-sort-up {
				@extend .icon-sort-up;
			}

			&.icon-sort-down {
				@extend .icon-sort-down;
			}
		}
	}

	li > a {
		&:not(:empty).confirmation-confirm {
			padding-right: 0 !important;
		}

		span.countdown {
			background-color: inherit;
			color: $white;
			display: block;
			text-align: center;
			filter: alpha(opacity=100) !important;
			opacity: 1 !important;
		}
	}
}

#content {
	overflow: hidden;
	color: $gray_dark;
}

#collection_today > a > span.icon,
#app-settings .label-container span.icon {
	font-size: 7px;
	font-weight: bold;
	line-height: 21px;
	text-align: center;
}

.icon {
	height: 16px;
	width: 16px;
	display: inline-block;
	vertical-align: middle;
	opacity: .5;

	&.input-date {
		display: none;
		opacity: .4;
		transition: opacity 100ms ease 0s;
		right: 35px;
		top: 7px;
	}

	&.input-star {
		display: none;
		opacity: .5;
		right: 9px;

		&.starred {
			opacity: 1;
		}
	}

	&.task-checkbox,
	&.detail-checkbox {
		@extend %extend_1;

		&:not(.icon-checkmark) {
			background: unset;
		}

		&:not(.disabled):hover {
			border-color: $black;
		}

		&.disabled {
			cursor: not-allowed;
		}
	}

	&.icon-note {
		display: none;
	}

	&.right {
		float: right;
	}

	&.detail-settings {
		transition: opacity 100ms ease 0s;
		opacity: .6;
	}

	&.detail-reminder {
		height: 20px;
		width: 20px;
	}

	&.icon-checkmark {
		opacity: 1;
	}

	&.note-fullscreen {
		opacity: .6;

		&:hover {
			opacity: 1;
		}
	}

	&.toggle-completed-subtasks {
		float: right;
		opacity: 1;

		&.hidden {
			opacity: .5;
		}

		&:hover {
			opacity: 1;
		}
	}

	&.detail-delete {
		display: none;
		margin-left: auto;
		right: 22px;

		&:hover {
			opacity: .8;
		}
	}

	&.detail-save {
		display: none;
		margin-left: auto;
		right: 44px;

		&:hover {
			opacity: .8;
		}
	}

	&.icon-tag-active {
		opacity: 1;
	}
}

.task-item {
	cursor: default;
	min-height: 37px;
	list-style: none outside none;
	overflow: hidden;
	margin-top: -1px;

	&:first-child {
		margin-top: 0;

		.task-body {
			border-width: 1px;
		}
	}

	.subtasks-container {
		margin-left: 35px;

		.task-item {
			margin-top: -1px;
		}

		&.subtaskshidden li.subtask {
			display: none;
		}
	}

	&.add-subtask {
		background: $white;
		border: 1px solid $gray_light;

		input {
			background: transparent none repeat scroll 0 0 !important;
			border: medium none !important;
			border-radius: 0 !important;
			box-shadow: none !important;
			box-sizing: border-box;
			color: $gray_dark;
			cursor: text;
			font-size: 100%;
			margin: 0;
			padding: 0 60px 0 32px;
			width: 100%;
			min-height: 36px;
		}
	}

	.task-star .icon:hover {
		opacity: .7;
	}

	&.done .task-body {
		opacity: .6;

		.title {
			text-decoration: line-through;
		}
	}
}

.icon-task-star-low,
.icon-task-star-medium,
.icon-task-star-high {
	opacity: 1 !important;
}

a {
	&.detail-star {
		padding: 15px;
		margin-left: auto;
		float: right;

		.icon {
			height: 24px;
			width: 24px;
			background-size: 144px 144px;
			opacity: .3;

			&:hover {
				opacity: .5;
			}
		}
	}

	&:hover .icon {
		&.detail-trash,
		&.detail-settings,
		&.detail-close,
		&.input-star {
			opacity: 1;
		}

		&.detail-delete,
		&.input-date {
			opacity: .8;
		}
	}
}

.calendar-indicator {
	min-width: 12px;
	min-height: 12px;
	background-color: $red;
	display: inline-block;
	height: 12px;
	width: 12px;
	margin-top: 0;
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	line-height: 20px;
	margin-left: 4px;
	margin-right: 2px;
}

#app-content {
	div {
		&.content-wrapper {
			padding: 6px 17px 75px;
			box-sizing: border-box;
			height: 100%;
			overflow: hidden;

			.task-list {
				height: 100%;
				width: 100%;
				overflow-y: auto;
			}

			.task-body .title-wrapper span.title a {
				cursor: pointer;
				text-decoration: underline;
			}
		}

		&.task-list {
			.loadmore {
				font-size: 11px;
				margin-top: 10px;
				text-align: center;

				span {
					color: $gray;
					background-color: $gray_easy;
					border-radius: 10px;
					padding: 3px 6px;

					&:hover {
						cursor: pointer;
						color: $gray_dark;
					}
				}
			}

			.grouped-tasks {
				position: relative;
			}

			.completed-hidden ol.completed-tasks {
				display: none;
			}
		}
	}

	h2 {
		font-weight: bold;
		font-size: 13px;
		margin-bottom: 10px;
		margin-top: 20px !important;
		word-wrap: break-word;
		opacity: .5;

		&:hover {
			opacity: .7;
		}

		&.heading-hiddentasks {
			display: inline-block;
			padding-right: 16px;
			background-position: right center;
			cursor: pointer;
		}
	}

	#add-task {
		margin: 12px 0;
		position: relative;
		border: 1px solid $gray_light;
		background: none repeat scroll 0 0 $gray_light;
		width: calc(100% - 54px);
		float: left;
		height: 34px;

		&.focus {
			background-color: $white;
		}

		.icon {
			position: absolute;
			top: 6px;
		}

		input {
			font-size: 13px;
			width: 100%;
			color: $gray_dark;
			border: medium none !important;
			border-radius: 0 !important;
			box-shadow: none !important;
			padding: 0 60px 0 32px;
			margin: 0;
			cursor: text;
			outline: none;
			min-height: 32px;
		}
	}

	.sortorder-dropdown-button {
		background-color: $gray_easy;
		border: 1px solid $gray_light;
		width: 42px;
		height: 34px;
		margin: 12px 0 12px 12px;
		padding: 0;
		float: right;
		cursor: pointer;

		.sort-indicator {
			margin-left: 0;
			visibility: visible;
		}
	}
}

#app-sidebar {
	.icon.detail-checkbox {
		left: 16px !important;
		cursor: pointer;
		position: absolute;
		top: 19px;
		margin: 0;
	}

	div.content-wrapper {
		padding: 0;
		height: 100%;

		> div {
			height: 100%;
			position: relative;
		}

		div {
			&.notice {
				color: $gray;
				font-size: 16px;
				position: absolute;
				text-align: center;
				top: 50%;
				width: 100%;
			}

			&.footer {
				border-top: 1px solid $gray_light;
				bottom: 0;
				height: 65px;
				left: 0;
				position: absolute;
				right: 0;

				.icon {
					position: absolute;
					bottom: 7px;
					left: 8px;
				}

				.detail-close .icon {
					left: auto;
					right: 8px;
				}
			}
		}

		.title {
			background-color: $gray_easy;
			border-bottom: 1px solid $gray_light;
			font-size: 16px;
			font-weight: bold;
			line-height: 24px;
			min-height: 24px;
			padding: 16px 55px 13px;
			word-wrap: break-word;

			.title-text {
				cursor: text;
				display: block;

				&.strike-through {
					text-decoration: line-through;
				}

				a {
					cursor: pointer;
					text-decoration: underline;
				}
			}

			textarea {
				@extend %extend_2;

				margin: 0;
				border-radius: 0;
				height: 100%;
				left: 0;
				overflow: hidden;
				position: absolute;
				resize: none;
				top: 0;
				width: 100%;
			}

			pre {
				@extend %extend_2;

				border: 0 none !important;
				display: block;
				margin: 0;
				outline: 0 none;
				padding: 0 !important;
				visibility: hidden;
			}

			.expandable-container {
				background: none repeat scroll 0 0 $white;
				border: 1px solid $gray;
				margin: -1px -4px -1px -6px;
				padding: 0 5px;
				display: none !important;

				.expandingArea {
					position: relative;
				}
			}

			&.editing {
				.title-text {
					display: none !important;
				}

				.expandable-container {
					display: block !important;
				}
			}
		}

		.body {
			bottom: 65px;
			left: 0;
			overflow: auto;
			position: absolute;
			right: 0;
			top: 55px;

			.note {
				border-width: 1px;
				border-style: solid;
				border-color: $gray_light;
				font-size: 13px;
				line-height: 26px;
				margin: 0 20px;
				padding: 5px 15px;
				cursor: text;

				.expandingArea {
					position: relative;
					margin-left: -1px;

					textarea {
						@extend %extend_3;

						margin: 0 0 0 1px;
						border-radius: 0;
						height: 100%;
						left: 0;
						overflow: hidden;
						position: absolute;
						resize: none;
						top: 0;
						width: 100%;
						color: $gray_dark;
						font-weight: 500;
						outline: medium none;
					}

					pre {
						@extend %extend_3;

						border: 0 none !important;
						display: block;
						margin: 0;
						outline: 0 none;
						padding: 0 !important;
						visibility: hidden;
					}
				}

				.note-body,
				.note-edit {
					cursor: text;
					min-height: 140px;
					word-wrap: break-word;

					a {
						cursor: text;
					}

					.content-fakeable {
						cursor: text !important;

						.display-view {
							display: block;
						}

						.edit-view {
							display: none !important;
						}

						&.editing {
							.display-view {
								display: none !important;
							}

							.edit-view {
								display: block !important;
							}
						}
					}

					.edit-view {
						cursor: text !important;
					}

					.display-view {
						cursor: text !important;
						white-space: pre-wrap;

						a {
							cursor: pointer;
							text-decoration: underline;
						}
					}
				}
			}

			.section {
				border-bottom: 1px dotted $gray;
				height: 46px;
				padding: 9px 20px 9px 55px;
				position: relative;
				border-top: none;
				margin-bottom: 0;

				input {
					background-color: $white;
					border: 1px solid $blue_background;
					border-radius: 0;
					margin-top: 0;
					color: $gray_dark;
					font-weight: 500;
					outline: medium none;
					padding: 4px;
				}

				input[type="range"] {
					border: medium none;
					box-shadow: none;
					width: calc(100% - 90px);
					margin: 0 36px 0 5px;
					height: 28px;
					min-height: 20px;
				}

				input[type="text"] {
					box-shadow: 0 0 4px rgba($blue_background, .3), 0 1px 1px rgba($white, .4), 0 2px 4px rgba($blue_background, .1) inset, 0 0 4px rgba($blue_background, .2) inset;
					background: none repeat scroll 0 0 $gray_easy;
					float: left;
					min-height: 0;
				}

				select {
					background-color: rgba(0, 0, 0, 0);
					border-radius: 0;
					border: 1px solid $gray_light;
					padding: 0;
					width: 98px;
					margin: 0;
					font-weight: normal;
					height: 19px;
				}

				.icon {
					left: 16px;
					position: absolute;
					top: 13px;

					&.detail-remindertype {
						display: none;
						left: 38px;
						opacity: .4;

						&:hover {
							opacity: .8;
						}
					}
				}

				.section-title {
					color: $gray;
					font-weight: bold;
					margin-top: 3px;
					display: block;
				}

				.section-edit {
					display: none;
				}

				&.editing {
					.icon {
						&.detail-save {
							display: inline-block;
						}

						&.detail-delete,
						&.detail-remindertype {
							display: block;
						}
					}

					.section-title {
						display: none;
					}

					.section-edit {
						display: block;
					}
				}

				&.date {
					.section-title {
						&.overdue {
							color: $red_overdue !important;
						}

						&.repeat {
							margin-top: -2px;
						}
					}

					.icon.icon-percent {
						opacity: 1;
					}

					&:hover .icon.detail-delete {
						display: block;
					}
				}

				&.detail-reminder {
					.section-description {
						display: none;
						font-size: 11px;
						margin-top: -6px;

						&.repeat {
							display: block;
						}
					}

					&.date .section-description {
						display: block;
					}
				}

				&.detail-categories {
					height: auto;
					padding-left: 50px;
				}

				&.detail-note {
					padding: 20px 0;
					height: auto;
				}

				.select2-search-field input {
					border: 0 none;
					box-shadow: none;
					font-weight: bold;
					margin-top: 0;
					font-family: inherit;
				}

				&.active .select2-search-field input {
					color: $blue_due;
				}
			}
		}

		&.completed .body .section .section-title {
			color: $gray !important;
		}

		.task-list .task-body .title-wrapper .title a {
			cursor: pointer;
			text-decoration: underline;
		}

		.disabled .body .section {
			.select2-search-field input {
				width: auto;
				display: block !important;
			}

			&.date:hover .icon.detail-delete {
				display: none;
			}
		}
	}
}

.date {
	.icon {
		&.icon-calendar-due,
		&.icon-calendar-overdue {
			opacity: 1;
		}
	}

	.section-title {
		color: $blue_due !important;
	}
}

.high .section-title {
	color: $red_overdue !important;
}

.medium .section-title {
	color: $yellow !important;
}

.low .section-title {
	color: $blue_due !important;
}

.high,
.medium,
.low {
	.icon.detail-priority {
		opacity: 1;
	}
}

input {
	&.datepicker-input {
		width: 120px;
	}

	&.timepicker-input {
		width: 80px;
	}

	&.duration-input {
		margin: 2px 0 0 .3em;
		width: 35px;
	}

	&.percent-input,
	&.priority-input {
		width: 35px;
		margin-top: 0;
	}
}

.ui-widget-content {
	background: none repeat scroll 0 0 $gray_easy;
	border-radius: 4px;
	color: $gray_dark;
	max-width: 304px;
	min-height: 15px;
	min-width: 150px;
	z-index: 1000;
	border: none;
}

.ui-timepicker,
.ui-datepicker {
	width: 185px;

	table {
		width: 100%;

		tr {
			line-height: 15px;

			&:hover {
				background: none repeat scroll 0 0 transparent;
			}
		}

		td {
			width: 14%;
			padding: 0;
		}

		thead th {
			color: $gray;
			font-size: 9px;
			height: auto;
			padding: 4px 0;
			text-align: center;
			text-transform: uppercase;
		}

		a.ui-state-default {
			border: none;
			background: none repeat scroll 0 0 transparent;
			color: $gray_dark;
			border-radius: 3px;
			cursor: pointer;
			display: block;
			font-size: 12px;
			font-weight: 500;
			padding: 2px 0;
			margin: 1px;
			text-align: center;

			&:hover {
				border: none;
				background: none repeat scroll 0 0 $gray_light;
			}
		}
	}

	.ui-widget-header {
		background: none repeat scroll 0 0 transparent;
		border: none;
		color: $gray_dark;
		font-weight: 600;
		font-size: 12px;
	}
}

.ui-timepicker {
	table {
		td {
			a.ui-state-active {
				@extend %extend_11;
			}
		}
	}

	.ui-timepicker-title {
		text-align: center;
	}
}

.ui-datepicker {
	table {
		td {
			&.selected a {
				@extend %extend_11;
			}

			&.ui-datepicker-today a {
				color: $blue_background;
			}
		}
	}

	.ui-datepicker-next,
	.ui-datepicker-next-hover {
		right: 2px;
		top: 2px;
		background: none;
		border: none;
	}

	.ui-datepicker-prev,
	.ui-datepicker-prev-hover {
		left: 2px;
		top: 2px;
		background: none;
		border: none;
	}

	.ui-icon {
		@extend .icon;

		height: 16px;
		width: 16px;
	}

	.ui-icon-circle-triangle-w {
		@extend .icon-sort-up;
	}

	.ui-icon-circle-triangle-e {
		@extend .icon-sort-down;
	}
}

div {
	&.ui-datepicker,
	&.ui-timepicker {
		background: none repeat scroll 0 0 $gray_easy;
		border-radius: 4px;
		box-shadow: 0 1px 6px $gray_dark;
		color: $gray_dark;
		max-width: 304px;
		min-height: 15px;
		min-width: 150px;
		position: absolute;
		z-index: 1000;
		margin-top: 9px;
		padding: 8px;

		.arrow {
			border-color: transparent transparent $gray_easy;
			left: 50%;
			margin-left: -12px;
			top: -24px;
			border-style: solid;
			border-width: 12px;
			height: 0;
			position: absolute;
			width: 0;
			z-index: 100;
		}

		&::after {
			border-bottom: 9px solid $gray_easy;
			border-left: 9px solid rgba(0, 0, 0, 0);
			border-right: 9px solid rgba(0, 0, 0, 0);
			content: "";
			display: inline-block;
			left: 46%;
			position: absolute;
			top: -9px;
		}

		&::before {
			border-bottom: 9px solid $gray_light;
			border-left: 9px solid rgba(0, 0, 0, 0);
			border-right: 9px solid rgba(0, 0, 0, 0);
			content: "";
			display: inline-block;
			left: 46%;
			position: absolute;
			top: -9px;
		}
	}
}

.percentbar {
	height: 3px;
	position: relative;
	top: 28px;
	left: 42px;
	margin-right: 103px;
	margin-bottom: -5px;
	background-color: $gray_light;
	border-radius: 2px;

	.percentdone {
		height: 3px;
		border-radius: 2px 0 0 2px;
		opacity: .75;
	}
}

#searchresults {
	padding-top: 0 !important;
	margin-top: 20px !important;
	background-color: transparent !important;
	min-height: 150px;

	#status {
		padding: 10px 0 18px !important;
		height: 22px !important;
		background-color: transparent !important;
		font-weight: bold;
		color: $gray;
		font-size: 13px !important;

		&.emptycontent {
			position: relative;
		}
	}

	span.icon.task-checkbox {
		opacity: .6;
	}
}

.template {
	display: none;
}

.categories-list {
	display: inline-block;
	vertical-align: middle;

	li {
		background-color: $gray_easy;
		border: 1px solid $gray_light;
		border-radius: 2px;
		color: $gray;
		float: left;
		font-weight: bold;
		margin: -2px 4px 0;
		padding: 2px 5px;
		min-height: 22px;
	}
}

#app-settings-content {
	li {
		line-height: 3em;
		position: relative;
		height: 40px;

		.label-container {
			white-space: nowrap;
			padding-right: 115px;
			display: inline-block;
			text-overflow: ellipsis;
			width: 100%;
			overflow: hidden;
			height: 100%;
		}

		select {
			position: absolute;
			right: 0;
		}

		&.headline {
			font-weight: bold;
			line-height: 1.5em;
		}
	}

	.icon {
		margin-top: -3px;
	}

	select {
		float: right;
		min-width: 105px;
	}
}

ol[dnd-list] {
	.dndDraggingSource {
		display: none;
	}

	.dndPlaceholder {
		display: block;
		background-color: $gray_light;
		min-height: 37px;
	}

	.copy.dndDraggingSource {
		display: block;
	}
}

.colorpicker {
	display: block;
	height: 30px;
	height: auto;
	padding-bottom: 3px;
	padding-top: 3px;

	.colorpicker-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;

		li {
			height: 24px;
			width: calc(100% / 10) !important;

			&.selected {
				border: 1px solid $gray_dark;
			}

			&.randomcolour {
				cursor: pointer;

				.icon-random {
					filter: invert(1);
					opacity: 1;
				}
			}
		}
	}
}

.confirmation-default {
	overflow: hidden;
}

.confirmed {
	.confirmation-default {
		display: none !important;
	}

	&.active {
		.confirmation-confirm {
			cursor: pointer !important;
		}

		.countdown {
			display: none;
		}
	}
}

.confirmation-abort {
	width: 50% !important;
	display: none !important;
	padding-right: 0 !important;
	background-position: center !important;
}

.confirmation-confirm {
	@extend .confirmation-abort;

	background-color: $red !important;
	cursor: default !important;
}

.collection .icon {
	opacity: 1;
}

.disabled .icon.detail-star:hover {
	cursor: not-allowed;
}

.active .calendar-indicator {
	height: 16px;
	width: 16px;
	margin-left: 2px;
	margin-right: 2px;
}

tr:last-child .task-item {
	height: 39px;

	div.task-body {
		border-width: 1px;
	}
}

.app-tasks #app-content {
	overflow-x: hidden;
}

td.ui-timepicker-hours table {
	border-right: 1px solid $gray_light;
}

li.ui-draggable-dragging {
	width: 300px;
	z-index: 101 !important;

	.duedate {
		display: none;
	}
}

.detail-categories .select2-container-multi {
	.select2-choices {
		border: 1px solid transparent;

		.select2-search-choice {
			color: $blue_due;
			font-weight: bold;
			line-height: 14px;
			margin: 2px 0 3px 5px;
			background-image: none;
			background-color: $gray_easy;
			box-shadow: none;
			border-color: $gray_light;
			min-height: 22px;

			a.select2-search-choice-close {
				opacity: .4;
				display: initial;

				@extend .icon;
				@extend .icon-close;

				&:hover {
					opacity: 1;
				}
			}
		}
	}

	&.select2-container-disabled .select2-choices {
		background-color: $white;
		background-image: none;
		border: none;
		cursor: default;
	}
}

.dropzone-visible > ol[dnd-list] {
	min-height: 50px;
}

.error input.edit {
	color: $red;
	border-color: $red !important;
	box-shadow: 0 0 6px rgba($red, .3);
}