$color-border: nc-darken($color-main-background, 8%);

#app-navigation {
	& > ul {
		display: flex;
		flex-direction: column;

		& > li {
			display: inline-flex;
			flex-wrap: wrap;
			order: 1;
			flex-shrink: 0;

			& > a,
			& > ul > li > a {
				flex: 1 1 0;
				z-index: 100;
			}

			& .app-navigation-entry-bullet,
			& > ul > li > .app-navigation-entry-bullet {
				position: absolute;
				display: block;
				margin: 16px;
				width: 12px;
				height: 12px;
				border: none;
				border-radius: 50%;
				cursor: pointer;
			}

			& .app-navigation-entry-menu,
			& > ul > li > .app-navigation-entry-menu {
				top: 44px;
			}

			& > a,
			& > .app-navigation-entry-deleted {
				padding-left: 44px !important;
			}
		}
	}

	& .app-navigation-entry-utils {
		flex: 0 1 auto;
		position: unset;
	}

	& .active.with-menu > a,
	& .with-counter > a {
		padding-right: 12px;
	}

	li .app-navigation-entry-menu > ul > li > a {
		line-height: 36px;
		height: 36px;
		min-height: 36px;
		display: flex;
	}

	.app-navigation-entry-edit {
		height: auto;

		form {
			display: inline-flex;
			width: 100%;
		}
	}
}

.bubble,
.app-navigation-entry-menu,
.popovermenu {
	box-shadow: unset;
	filter: drop-shadow(0 1px 3px rgba(179, 179, 179, .75));
}

$border-radius: 3px;

/* ---- jQuery UI datepicker ---- */
.ui-widget.ui-datepicker {
	margin-top: 10px;
	padding: 4px 8px;
	width: auto;
	border-radius: $border-radius;
	border: none;
	background: unset;
	background-color: $color-main-background;
	filter: drop-shadow(0 1px 3px rgba(179, 179, 179, .75));

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
		border: 1px solid transparent;
		background: inherit;
	}

	.ui-widget-header {
		padding: 7px;
		font-size: 13px;
		border: none;
		background-color: $color-main-background;
		color: $color-main-text;

		.ui-datepicker-title {
			line-height: 1;
			font-weight: 300;
		}

		.ui-icon {
			opacity: .5;

			&.ui-icon-circle-triangle-e {
				background: url('../img/arrow-right.svg') center center no-repeat;
			}

			&.ui-icon-circle-triangle-w {
				background: url('../img/arrow-left.svg') center center no-repeat;
			}
		}

		.ui-state-hover .ui-icon {
			opacity: 1;
		}
	}

	.ui-datepicker-calendar {
		th {
			font-weight: normal;
			color: nc-lighten($color-main-text, 33%);
			opacity: .8;
		}

		tr:hover {
			background-color: inherit;
		}

		td {
			> * {
				border-radius: 50%;
				text-align: center;
				font-weight: normal;
				color: $color-main-text;
				padding: 6px;
				line-height: 12px;
			}

			&.ui-datepicker-today a:not(.ui-state-hover) {
				background-color: nc-lighten($color-main-text, 86%);
			}

			&.ui-datepicker-current-day a.ui-state-active,
			.ui-state-hover,
			.ui-state-focus {
				background-color: $color-primary;
				color: $color-primary-text;
				font-weight: bold;
			}

			&.ui-datepicker-week-end :not(.ui-state-hover),
			.ui-priority-secondary:not(.ui-state-hover) {
				color: nc-lighten($color-main-text, 33%);
				opacity: .8;
			}
		}
	}
}

.ui-datepicker-prev,
.ui-datepicker-next {
	border: nc-darken($color-main-background, 14%);
	background: $color-main-background;
}

/* ---- jQuery UI timepicker ---- */
.ui-widget.ui-timepicker {
	margin-top: 10px !important;
	width: auto !important;
	border-radius: $border-radius;
	filter: drop-shadow(0 1px 3px rgba(179, 179, 179, .75));

	.ui-widget-content {
		border: none !important;
		background: unset;
		background-color: $color-main-background;
	}

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
		border: 1px solid transparent;
		background: inherit;
	}

	.ui-widget-header {
		padding: 7px;
		font-size: 13px;
		border: none;
		background-color: $color-main-background;
		color: $color-main-text;

		.ui-timepicker-title {
			line-height: 1;
			font-weight: 300;
		}
	}

	.ui-timepicker-table {
		th {
			font-weight: normal;
			color: nc-lighten($color-main-text, 33%);
			opacity: .8;
		}

		tr:hover {
			background-color: inherit;
		}

		td {
			> * {
				border-radius: 50%;
				text-align: center;
				font-weight: normal;
				color: $color-main-text;
				padding: 8px 7px;
				font-size: .9em;
				line-height: 12px;
			}

			&.ui-timepicker-hour-cell a.ui-state-active,
			&.ui-timepicker-minute-cell a.ui-state-active,
			.ui-state-hover,
			.ui-state-focus {
				background-color: $color-primary;
				color: $color-primary-text;
				font-weight: bold;
			}

			&.ui-timepicker-minutes:not(.ui-state-hover) {
				color: nc-lighten($color-main-text, 33%);
			}

			&.ui-timepicker-hours {
				border-right: 1px solid $color-border;
			}
		}
	}
}

.ui-datepicker::after,
.ui-timepicker.ui-widget::after {
	left: 47%;
	bottom: 100%;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #fff;
	border-width: 9px;
	margin-left: -9px;
}

.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-list {
	background-position: 40% 60%;
}

.icon-manual {
	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%;
}


/**
	* SCSS variables
	*/

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

/**
	* rules for app-navigation
	*/

#app-navigation {
	> ul {
		> li {
			background-image: unset;

			> a {
				background-image: unset;
				background-position: inherit;
			}

			.sprite::before {
				content: '';
				position: absolute;
				z-index: -1;
				width: 16px;
				height: 16px;
				background: url('../../../apps/tasks/css/../img/sprites.svg') no-repeat;
				margin: 14px;
				margin-left: -30px;
				background-position: inherit;
			}

			&.active .app-navigation-entry-bullet {
				height: 16px;
				width: 16px;
				margin: 14px;
			}

			&.edit {
				> a,
				.app-navigation-entry-utils,
				.app-navigation-entry-menu {
					display: none;
				}

				.app-navigation-entry-edit.name {
					display: inline-block;
					position: relative;
				}
			}

			&.animate-up {
				display: none;
			}

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

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

			.app-navigation-entry-edit {
				padding-left: 5px !important;

				&.name,
				&.caldav {
					display: none;
				}
			}

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

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

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

		input.action {
			background-color: $gray_easy;
			width: 36px;
			border-left: 0 none;
			background-position: center;
			cursor: pointer;

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

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

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

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

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

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

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

		span {
			cursor: pointer;
		}

		button {
			float: inherit;
		}
	}

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

/**
	* rules for colorpicker
	*/

.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;
				}
			}
		}
	}
}

/**
	* rules for confirmation directive
	*/

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

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

.confirmation-default {
	overflow: hidden;
}

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

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

		.countdown {
			visibility: hidden;
		}
	}
}

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

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

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

/**
	* rules for settings area
	*/

#app-settings-content {
	.icon {
		margin-top: -3px;
	}

	li {
		line-height: 3em;
		position: relative;
		height: 40px;

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

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

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

#collection_today > a > span.date {
	position: absolute;
	font-size: 7px;
	left: 18px;
	top: 1.5px;
}

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

/**
	* rules for app-content
	*/

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

#content {
	color: $gray_dark;
}

#app-content {
	overflow-x: hidden;

	#add-task {
		margin: 12px 0;
		position: relative;
		border: 1px solid $gray_light;
		width: calc(100% - 56px);
		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;
		}
	}

	.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;
		}
	}
}

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

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

	.copy.dndDraggingSource {
		display: block;
	}
}

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

/**
	* rules for task-items
	*/

.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;
		}
	}

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

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

	&.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;
		}
	}

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

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

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

.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;

	&:hover,
	&.active {
		background-color: $gray_easy;
		box-shadow: inset 4px 0 var(--color-primary);
	}

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

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

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

	.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;
		}
	}

	.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;
		}
	}

	.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;
	}

	.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;
		}
	}
}

.template {
	display: none;
}

/**
	* rules for app-sidebar
	*/

#app-sidebar {
	.flex-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.content-wrapper {
		padding: 0;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;

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

		.footer {
			border-top: 1px solid $gray_light;
			flex: 0 0 auto;
			height: 30px;

			a {
				padding: 7px;

				&.left {
					float: left;
				}

				&.right {
					float: right;
				}

				.icon {
					display: block;
				}
			}
		}

		.title {
			flex: 0 0 auto;
			background-color: $gray_easy;
			border-bottom: 1px solid $gray_light;
			font-size: 16px;
			font-weight: bold;
			min-height: 50px;
			word-wrap: break-word;

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

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

			.title-text {
				cursor: text;
				display: inline-block;
				min-height: 24px;
				margin: 13px 0;
				width: calc(100% - 115px);
				padding: 0 6px;
				line-height: 22px;
				// this border is to adjust the size of the div to the size
				// of the input field for editing the title
				// (setting a padding always led to a small flickering)
				border: 1px solid transparent;

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

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

			.expandable-container {
				background: none repeat scroll 0 0 $white;
				border: 1px solid $gray;
				padding: 0 6px;
				display: none !important;
				margin: 13px 0;
				width: calc(100% - 115px);
				line-height: 24px;
				min-height: 24px;

				.expandingArea {
					position: relative;
				}
			}

			.checkbox {
				float: left;
				padding: 16px 17px 18px;

				.icon {
					cursor: pointer;
					margin: 0;
				}
			}

			.star {
				padding: 13px;
				float: right;

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

			textarea,
			pre {
				box-shadow: none;
				font-size: 16px;
				font-weight: bold;
				line-height: 22px;
				min-height: 22px;
				background: none repeat scroll 0 0 transparent;
				border: medium none;
				padding: 0;
				white-space: pre-wrap;
				word-wrap: break-word;
			}

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

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

		.body {
			flex: 1 1 auto;
			overflow-y: auto;
			position: relative;

			.section {
				border-bottom: 1px dotted $gray;
				padding: 0;
				position: relative;
				margin-bottom: 0;
				width: 100%;
				color: $gray;

				&:last-of-type {
					border-bottom: unset;
				}

				&.low,
				&.date {
					color: $blue_due;
				}

				&.high {
					color: $red_overdue;
				}

				&.medium {
					color: $yellow;
				}

				&.date:hover .icon.icon-trash {
					display: block;
				}

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

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

				&.detail-all-day {
					div,
					span {
						cursor: pointer;
					}
				}

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

					.section-title {
						display: none;
					}

					.section-edit {
						display: inline-block;
					}
				}

				.icon {
					&.icon-trash {
						display: none;
						margin-left: auto;
						right: 22px;
					}

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

				> div {
					padding-left: 12px;
					line-height: 44px;

					&.utils {
						position: absolute;
						right: 0;
						top: 0;
						padding-right: 15px;

						a {
							vertical-align: middle;
							display: inline-block;
						}
					}

					.section-title {
						font-weight: bold;
						margin-left: 12px;
						line-height: 22px;
						width: calc(100% - 100px);
						display: inline-block;
						vertical-align: middle;
					}

					.icon {
						margin: 0;
						float: unset;
					}
				}

				input[type="range"] {
					border: medium none;
					box-shadow: none;
					width: calc(100% - 50px);
					vertical-align: middle;
				}

				input[type="text"] {
					background: none repeat scroll 0 0 $gray_easy;
					margin: 0;
					min-height: 0;
				}

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

					&.datepicker-input {
						width: 60%;
					}

					&.timepicker-input {
						width: calc(40% - 10px);
					}

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

					&.percent-input,
					&.priority-input {
						width: 35px;
						margin-top: 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;
				}

				.section-edit {
					display: none;
					margin-left: 12px;
					vertical-align: middle;
					width: calc(100% - 80px);
					line-height: 0;
				}

				.detail-categories-container {
					width: calc(100% - 40px);
					display: inline-block;
					margin-left: 12px;
				}

				&.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;
							padding: 3px 5px 3px 18px;

							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;
					}
				}

				.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;
				}

				.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,
						pre {
							box-shadow: none;
							background: none repeat scroll 0 0 transparent;
							border: medium none;
							line-height: 26px;
							padding: 0;
							white-space: pre-wrap;
							word-wrap: break-word;
						}

						textarea {
							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 {
							border: 0 none !important;
							display: block;
							margin: 0;
							outline: 0 none;
							padding: 0 !important;
							visibility: hidden;
						}
					}

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

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

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

							.display-view {
								cursor: text;
								display: block;
								white-space: pre-wrap;
							}

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

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

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

/**
	* timepicker fixes
	*/
.ui-timepicker-table td a {
	display: block;
	width: 14px;
}

/**
	* datepicker fixes
	*/
.ui-widget.ui-datepicker .ui-datepicker-calendar td > a {
	width: 18px;
	line-height: 18px;
	height: 18px;
}

/**
	* rules for icons
	*/
.collection .icon {
	opacity: 1;
}

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

.reactive {
	&:hover {
		.icon {
			opacity: .7;
		}

		.detail-checkbox:not(.disabled) {
			border-color: $black;
		}
	}

	.icon {
		cursor: pointer;
	}
}

.icon {
	height: 16px;
	width: 16px;
	display: inline-block;
	vertical-align: middle;
	opacity: .5;
	transition: opacity 100ms ease 0s;
	cursor: default;

	&.reactive {
		cursor: pointer;

		&:hover {
			opacity: .7;
		}
	}

	&.active {
		opacity: .7;
	}

	&.icon-checkmark,
	&.icon-tag-active,
	&[class*=" icon-task-star-"] {
		opacity: 1 !important;
	}

	&.task-checkbox,
	&.detail-checkbox {
		border-radius: 3px;
		border: 1px solid $gray;
		float: left;
		margin: 9px;

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

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

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

	&.icon-note {
		display: none;
	}

	&.right {
		float: right;
	}
}

#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;
	}
}

/**
	* rules for sortorder-dropdown
	*/

.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;
	}
}

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

	&.open {
		display: block;
	}

	.icon {
		margin: 12px 8px;

		&.sort-indicator {
			margin-left: auto;
			margin-right: 0;
			float: right;
			visibility: hidden;
		}
	}

	.label {
		margin-right: 10px;
	}

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

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

		& > a span {
			opacity: 1 !important;

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

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

				&.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;
				}
			}
		}

		a {
			width: 100% !important;
		}

		&.active {
			opacity: 1 !important;
		}

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