/*
 * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
 *
 * @author Julius Härtl <jus@bitgrid.net>
 * @author Artem Anufrij <artem.anufrij@live.de>
 * @author Marin Treselj <marin@pixelipo.com>
 * @author Oskar Kurz <oskar.kurz@gmail.com>
 * @author Ryan Fletcher <ryan.fletcher@codepassion.ca>
 *
 * @license GNU AGPL version 3 or any later version
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Affero General Public License as
 *  published by the Free Software Foundation, either version 3 of the
 *  License, or (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

// colors
$color-warning-light: nc-lighten($color-warning, 15%);
$color-lightgrey: nc-darken($color-main-background, 4%);
$color-grey: nc-darken($color-main-background, 7%);
$color-darkgrey: nc-darken($color-main-background, 32%);

// margins/paddings
$board-item-margin: 10px 10px 20px 10px;
$board-last-item-margin: 10px;

$compact-board-item-margin: 5px 10px 10px 10px;
$compact-board-last-item-margin: 5px 10px 10px;

@import 'comp-appnav';
@import 'icons';
@import 'animations';
@import 'compact-mode';
@import 'autocomplete';
@import 'comments';

/**
 * General styles
 */

button,
.button,
.app-deck .icon {
	display: flex;
	&.button-inline {
		border: 0;
		background-color: transparent;
	}
    &.button-inline:hover {
		border: 0;
		background-color: transparent;
    }
}

input.input-inline {
	font-size: inherit !important;
	font-weight: inherit;
	background-color: transparent;
	padding: 0;
	border: none;
	width: 100%;
	border-radius: 0;
}

#app img {
	box-sizing: content-box;
}

#searchbox {
	display: flex !important;
}

.editable-inline {
	cursor: text;
}

/**
 * Generic app layout
 */

#content {
	height: 100%;
	min-height: initial;
}

.app.app-deck {
	width: 100%;
	height: 100%;
	display: flex;
}

#app-content {
	display: flex;
	flex-direction: column;
}

/**
 * Navigation sidebar
 */

#app-navigation {
	/** menu */
	.board-bullet {
		position: absolute;
		margin-left: 17px;
		margin-top: 16px;
		width: 12px;
		height: 12px;
		border: none;
		border-radius: 50%;
		cursor: pointer;
	}
	.app-navigation-entry-utils-menu-share i {
		height: 100%;
		width: 100%;
	}

	li {
		transition: height 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out;
	}
	.editing {
		height: 82px;

		.icon-add {
			background-position: 14px 14px;
		}
	}
	.app-navigation-entry-edit {
		.colorselect {
			div, label {
				height: 32px;
				width: auto;
			}
		}
		form {
			display: flex;
		}
	}

}

#app-settings-content {
	overflow: initial;

	.ui-select-match-item {
		border: 1px solid var(--color-background-darker) !important;
		.select-label {
			color: var(--color-main-text);
		}
	}

	p.hint {
		margin-top: 10px;
		color: var(--color-text-light);
	}
}

/**
 * Board view
 */
#board-status {
	position: absolute;
	z-index: 999;
	width: 100%;
	height: 100%;
	background-color: var(--color-main-background, $color-main-background);
}

#board {
	position: absolute;
	white-space: nowrap;
	overflow: auto;
	z-index: 100;
	width: 100%;
	bottom: 0px;
	top: 44px;

	&.as-sortable-un-selectable {
		.card-list {
			min-height: 96px;
		}
	}

	.card {
		opacity: 1;

		&.file-drop {

		}
	}

	&.card-selected {

		.card {
			box-shadow: 0px 0px 7px 0px var(--color-background-darker, $color-grey);

			&.current {
				box-shadow: 0px 0px 7px 0px var(--color-text-lighter, $color-darkgrey);
			}
		}
	}

}

// styles to provide a drop zone in empty stacks
.as-sortable-un-selectable {
	.card-list {
		min-height: 96px;
		flex-grow: 1;
	}

	// empty stack placeholders and last placeholders should fill the space
	.emptyStack .as-sortable-placeholder,
	li:last-child.as-sortable-placeholder {
		height: 100% !important;
	}
}

#innerBoard {
	padding: 10px;

	> .as-sortable-placeholder {
		display: flex !important;
		width: 320px;
		min-width: 320px;
		margin-top: 0;
		margin-left: 0;
	}

	> .as-sortable-drag {
		background-color: var(--color-main-background $color-main-background);
	}
}

#controls {
	width: inherit;
	z-index: 120;
	display: flex;
	align-items: center;
	position: inherit;
    padding-left: 44px;

	.crumb {
		order: 0;

		.bullet {
			opacity: 1;
		}

		a:nth-child(2),
		a:nth-child(3) {
			padding-left: 0;
			margin-left: -5px;
		}

		a .icon {
			margin-top: 2px;
		}

		.board-bullet {
			display: inline-block;
			width: 20px;
			height: 20px;
			border: none;
			border-radius: 50%;
		}
	}

	button {
		width: 36px;
		height: 36px;
		padding: 9px;
	}

	#stack-add form {
		button {
			height: auto;
			width: 32px;
		}
	}
	input[type='text'] {
		padding: 6px;
		border: 0 none transparent;
		min-height: initial;
		background-color: transparent;
		height: inherit;
	}

	.icon-home { // TODO: deprecate this
		background-position: 8px center;
		padding: 10px 24px 10px 14px;
	}
}

#app-navigation-toggle-custom {
	width: 44px;
	height: 44px;
	cursor: pointer;
	opacity: 1;
	display: inline-block !important;
	position: fixed;
}

.board-header-controls {
	margin-left: auto;
	align-items: center;

	&.app-popover-menu-utils {
		display: flex;

		#popover-controls {
			display: flex;
			align-items: center;
		}

		.popovermenu {
			margin-top: 35px;
			margin-right: 6px;
		}
	}
}

.filter-select {
	position: absolute;
	right: auto;
	top: 42px;
	left: -21%;

	li {
		padding: 3px;
		overflow: hidden;
		width: auto;

		span {
			display: block;
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
	}
}

#stack-add {
	background-color: var(--color-background-dark, $color-lightgrey);
	border-radius: 3px;
	margin: 3px;
	display: flex;
	align-content: center;
	height: 34px;

	> form {
		display: flex;
		align-content: center;
	}

	input {
		&:invalid,
		&:-moz-submit-invalid,
		&:-moz-ui-invalid {
			box-shadow: none;
		}
	}
}

.stack {
	width: 100%;
	vertical-align: top;
	display: flex;
	flex-direction: column;

	h3 {
		padding: 10px 10px 8px;
		margin: 0;
		font-size: 12pt;
		font-weight: normal;
		overflow: hidden;
		display: flex;
		min-height: 40px;

		&:hover button {
			display: flex;
		}

		input {
			padding: 0;
			width: 100%;
			margin: 0;
			font-size: 12pt;
			border: 0;
			background-color: var(--color-main-background, $color-main-background);
			min-height: initial;
		}

		span {
			white-space: normal;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		button {
			margin-left: auto;
			display: flex;
			opacity: 0.3;
			padding-right: 0;
		}
	}

	form {
		width: 100%;
	}

	.as-sortable-placeholder {
		margin: $board-item-margin;
		border: 1px dashed $color-darkgrey;
		min-height: 96px;
		transition: margin 250ms linear;

		&:last-child {
			margin: $board-last-item-margin;
		}
	}

	&.as-sortable-item {
		height: 100%;
		display: flex;
	}

	> ul {
		display: flex;
		flex-direction: column;
	}

}

.card {
	background-color: var(--color-main-background, $color-main-background);
	margin: $board-item-margin;
	white-space: normal;
	position: relative;
	box-shadow: 0 0 3px 1px var(--color-background-darker, $color-darkgrey);
	border-radius: 3px;
	transition: margin 250ms linear;

	&:last-child {
		margin: $board-last-item-margin;
	}

	&.archived .card-upper {
		opacity: 0.5;
	}

	.card-upper {
		overflow: hidden;
		position: relative;
		padding: 5px;
	}

	.card-assigned-users {
		display: flex;
		justify-content: flex-end;
		flex-grow: 1;
		.assigned-user {
			z-index: 4;
			margin: 6px 0 6px 6px;
		}
	}

	.card-controls {
		background: var(--color-background-dark, $color-lightgrey);
		display: flex;
		position: relative;
		padding-left: 10px;

		.card-options {
			justify-content: flex-end;
		}

		&:hover .card-options {
			opacity: 1;
		}

		.icon-description {
			margin: 10px;
			margin-left: 0px;
			opacity: 0.5;
		}

		.due {
			border-radius: 3px;
			margin: 6px 4px 6px 0px;
			padding: 0 4px;
			font-size: 90%;
			opacity: 0.5;
			display: flex;
			align-items: center;

			.icon {
				background-size: contain;
			}

			&.overdue {
				background-color: $color-error;
				color: var(--color-primary-text, $color-primary-text);

				.icon-badge {
					background-image: url('../img/calendar-white.svg');
				}
			}
			&.now {
				background-color: $color-warning;
			}
			&.next {
				background-color: $color-warning-light;
			}

			span {
				margin-left: 3px;
			}
		}

		.card-tasks, .card-files, .card-comments {
			border-radius: 3px;
			margin: 4px 4px 4px 0px;
			padding: 0 2px;
			font-size: 90%;
			opacity: 0.5;
			display: flex;
			align-items: center;

			.icon {
				background-size: contain;
				margin-right: 2px;
			}
		}

		button {
			padding: 22px;
			margin: 0;
		}
	}

	a {
		display: block;
	}

	h4 {
		font-weight: normal;
		font-size: 10pt;
		padding: 0;
		margin: 0 5px;
		overflow: hidden;
		text-overflow: ellipsis;

		span {
			padding: 6px 0;
			padding-top: 7px;
			display: block;
		}

		input {
			width: 100%;
			margin: 0;
		}
	}

	.labels {
		position: relative;
		margin-left: 5px;

		li {
			padding: 0 4px;
			margin: 0 2px 2px 0;
			border-radius: 3px;
			font-size: 75%;
			border: none transparent;
			float: left;

			span {
				display: inline-block;
				font-weight: bold;
				background-color: inherit;
				line-height: normal;
			}
		}
	}

	&.create {
		text-align: center;
		margin: 20px 10px 10px;
		border: 1px solid;
		border-radius: 3px;
		background-color: transparent;
		overflow: hidden;
		box-shadow: none;
		cursor: pointer;

		&.emptyStack {
			margin-top: 10px;
		}

		&:hover {
			text-align: center;
			opacity: 1;
		}

		.icon-add {
			padding: 20px;
		}

		h4 {
			width: 100%;
			padding: 0;
			margin: 0;

			input {
				width: 100%;
				border: 0;
				font-size: 10pt;
				margin: 0;
				padding: 10px;
			}
		}
	}
}

/* ng-sortable: Fix mobile touch scrolling */
.as-sortable-item,
.as-sortable-item-handle {
	-ms-touch-action: auto !important;
	touch-action: auto !important;
	-webkit-touch-callout: inherit !important;
}
/* disable scrolling only when a card is dragged */
.as-sortable-un-selectable .as-sortable-item,
.as-sortable-un-selectable .as-sortable-item-handle {
	-ms-touch-action: none !important;
	touch-action: none !important;
	-webkit-touch-callout: inherit !important;
}


.app-popover-menu-utils {
	margin-left: auto;
	min-height: 16px;
}

.popovermenu:not(.action-item__menu) {
	z-index: 999;
	opacity: 1;
	display: block;

	&.hidden {
		display: none;
	}

	ul {
		display: flex !important;
		flex-direction: column;
	}
}

.info {
	padding-left: 5px;
	padding-right: 5px;
	display: inline-block;
	opacity: 0.5;

	i {
		margin-left: 2px;
	}

	span {
		margin-right: 2px;
	}
}

/**
 * App sidebar
 */

#sidebar-header {

	position: sticky;
	top: 0;
	background-color: var(--color-main-background, $color-main-background);
	z-index: 200;

	h3 {
		font-size: 14pt;
		padding: 15px 15px 3px;
		margin: 0;
		overflow: hidden;

		input {
			min-height: 0px;
			margin: 0px;
		}
	}

	#card-dates {
		font-size: 80%;
		opacity: 0.5;
		padding-left: 15px;
	}

	.icon-close {
		position: absolute;
		top: 0px;
		right: 0px;
		padding: 14px;
		height: 44px;
		width: 44px;
	}
}

.drop-indicator {
	display: none;
}
.card .nv-file-over,
.drop-indicator.nv-file-over {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--color-main-background, $color-main-background);
	z-index: 100;
	opacity: 0.9;
	text-align: center;

	p {
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		position: absolute;
		padding: 20px;
		border: 1px dashed #AAA;
		margin: 10px;
		border-radius: 5px;
	}
}


#card-meta { // TODO: use .card-block instead?
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 15px;

	.duedate {
		display: flex;
		align-content: center;
		min-height: 38px;

		.timepicker-input {
			width: 50px;
			border-left: 0;
			border-radius: 0px 3px 3px 0px;
		}

		.datepicker-input {
			width: 85px;
			margin: 3px 0px;
			border-radius: 3px 0px 0px 3px;
		}

		.icon {
			opacity: 0.5;
			&:hover {
				opacity: 1;
			}
		}
	}

	.section-header {
		border-bottom: 1px solid $color-lightgrey;
		display: flex;
		flex-shrink: 0;
		margin-bottom: 5px;
		margin-top: 10px;
		h4 {
			padding-top: 5px;
			padding-bottom: 5px;
			flex: 1;
		}
	}

	.section-header-tabbed {
		margin-top: 10px;
		margin-bottom: 5px;
		flex-shrink: 0;
		display: flex;
		.tabHeaders {
			margin: 0;
			flex-grow: 1;
		}
	}

	.tabDetails {
		display: flex;
		height: 40px;
		align-items: center;
		justify-content: center;
		input[type=button] {
			width: 32px;
		}
	}

	.save-indicator {
		border-radius: 3px;
		margin: 5px;
		padding: 0 10px;
		font-size: 8pt;
		display: none;
		text-align: center;
		&.saved {
			background-color: $color-success;
			color: $color-primary-text;
		}
		&.unsaved {
			background-color: var(--color-background-dark, $color-lightgrey);
			color: var(--color-text-light, $color-darkgrey);
		}
	}

	.icon-help {
		opacity: 0.5;
		padding: 5px 15px;
		display: inline;
	}

	.card-details-assign-users {

		.select2 .ui-select-choices-row-inner {
			display: flex;
			padding: 5px !important;
		}

		.card-details-assign-users-list {
			display: flex;
			.assigned-user {
				position: relative;

				.avatardiv-container {
					margin-right: 5px;
				}
			}
			.tooltip {
				z-index: 998;
				position: fixed;
			}
		}
	}

	.icon-upload.icon-loading-small {
		background-image: none;
	}
	.attachment-list-wrapper {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba($color-darkgrey, 0.5);
		left: 0;
		top: 0;
		z-index: 300;
	}
	.attachment-list {
		&.selector {
			padding: 10px;
			position: absolute;
			width: 30%;
			max-width: 500px;
			min-width: 200px;
			max-height: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: var(--color-main-background, $color-main-background);
			z-index: 2;
			border-radius: 3px;
			box-shadow: 0 0 3px var(--color-background-dark, $color-darkgrey);
			overflow: scroll;
		}
		h3.attachment-selector {
			margin: 0 0 10px;
			padding: 0;
			.icon-close {
				display: inline-block;
				float: right;
			}
		}

		li.attachment {
			display: flex;
			padding: 3px;

			&.deleted {
				opacity: .5;
			}

			.fileicon {
				display: inline-block;
				min-width: 32px;
				width: 32px;
				height: 32px;
				background-size: contain;
			}
			.details {
				flex-grow: 1;
				flex-shrink: 1;
				min-width: 0;
				flex-basis: 50%;
				line-height: 110%;
				padding: 2px;
			}
			.filename {
				width: 70%;
				display: flex;
				.basename {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-bottom: 2px;
				}
				.extension {
					opacity: 0.7;
				}
			}
			.filesize, .filedate {
				font-size: 90%;
				color: $color-darkgrey;
			}
			.app-popover-menu-utils {
				position: relative;
				right: -10px;
				button {
					height: 32px;
					width: 42px;
				}
			}
			button.icon-history {
				width: 44px;
			}
			progress {
				margin-top: 3px;
			}
		}
	}

	.card-description {
		&.section-header {
			.save-indicator {
				margin-bottom: 5px;
				margin-top: 5px;
			}
		}
		&.section-content {
			height: 100%;
			display: flex;
			flex-direction: column;

			> div {
				height: 100%;
			}

			textarea {
				width: 100%;
				height: 200px;
				border: none;
				margin: 0;
				padding: 0;
			}

			.container {
				background-color: var(--color-main-background, $color-main-background);

			}
		}
	}
}

.activity-icon {
	opacity: 1 !important;
	.avatardiv-container {
		top: -4px;
		left: -7px;
		margin-right: 5px;
		img {
			max-width: 24px;
			max-height: 24px;
			opacity: 1;
		}
	}
	& > img {
		opacity: 0.7;
	}
}

.activitysubject.commentAuthor {
	margin-left: 26px;
	margin-right: 0;
	margin-top: 10px;
}
.activityTabView {
	.activity {
		margin-bottom: 20px;
	}
	.activitytime {
		margin: 0 !important;
	}
}
.activitysubject .app-popover-menu-utils {
	display: inline-block;
	position: relative;
	a {
		font-weight: normal;
	}
	button {
		opacity: .5;
		padding: 7px;
		margin-left: 10px;
	}
}

#commentsTabView {
	.newCommentRow .avatardiv-container {
		left: -7px;
	}
	.comment {
		position: relative;
		padding: 0 0 15px;

		.avatardiv {
			width: 24px;
			height: 24px;
			line-height: 24px;
		}
	}
	.newCommentForm {
		margin-left: 26px;
	}
}

.card-attachments {
	.error {
		padding-left: 38px;
		margin-bottom: 5px;
		background-position: 10px;
	}
}

.labels {
	display: block;
	overflow: hidden;

	li {
		padding: 0px 0px 5px 0px;
		border-radius: 3px;
		margin: 1px;
		color: $color-primary-text;
		min-width: 20px;
		display: flex;
	}
}

/**
 * Color selection
 */
.colorselect {
	overflow: hidden;
	border-radius:3px;
	flex-direction: row;
	display: flex;

	.color {
		opacity: 0.7;
		height: 100%;
		flex-grow: 1;
		border: none;
	}

	label.color {
		flex-grow: 1;
	}

	.selected {
		background-image: url('../../../core/img/actions/checkmark.svg');
		background-position: center center;
		background-repeat: no-repeat;
		opacity: 1;
		&.selected {
			background-image: url('../../../core/img/actions/checkmark-white.svg');
		}
	}

	.colorselect-label, .colorselect-label-white {
		background-image: url('../img/color_picker-dark.svg');
		background-position: center center;
		background-repeat: no-repeat;
		opacity: 1;
		input {
			position: absolute;
			visibility: hidden;
			height: 32px;
			width: 40px;
		}
	}
	.colorselect-label-white {
		background-image: url('../img/color_picker.svg');
  }
}

.labels {
	.colorselect {
		padding: 0;
		clear: none;
		overflow: visible;

		.color {
			width: 26px;
			height: 26px;
		}
	}

	.label-edit {
		display: flex;
		width: 100%;

		.colorselect {
			margin: 0px 0px 0px 3px;
		}

		input {
			border-bottom: 1px solid $color-lightgrey;
			padding: 5px 5px 4px 5px !important;
		}
	}
}


/**
 * Board list main screen area
 */
#boardlist {
	position: absolute;
	overflow: auto;
	width: 100%;
	bottom: 0px;
	top: 44px;

	thead td {
		opacity: .5;
		padding: 15px;
	}

	td {
		padding: 0 10px;
		border-bottom: 1px solid $color-grey;

		.board-bullet {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			cursor: pointer;
			margin: 6px;
		}

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

		.colorselect {
			flex-grow: 1;

			div,
			label {
				min-width: 32px;
			}
		}

		input[type=text] {
			flex-grow: 2;
		}

		input[type=submit] {
			width: 32px;
		}

		.app-popover-menu-utils {
			position: relative;

			button {
				opacity: 0.5;
				padding: 22px;
			}

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

	.icon {
		padding: 25px;
		margin: 0 0 0 auto;
	}

	tr.deleted td *,
	tbody .board-create td {
		opacity: 0.5;
	}

	.board-edit-controls {
		display: flex;
	}

	input {
		margin: 0px;
	}

	#assigned-users {
		display: flex;

		.avatardiv-container {
			margin: 6px;
		}
	}
}

/**
 * Board details
 */

#tabBoardShare .select2 .ui-select-choices-row-inner {
	display: flex;
	padding: 5px !important;
}

#shareWithList {
	list-style-type: none;
	padding: 0 0 16px;

	li {
		padding-top: 5px;
		padding-bottom: 5px;
		font-weight: bold;
		white-space: normal;
		display: flex;
		align-items: center;
	}

	.username {
		padding-right: 8px;
		padding-left: 8px;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
		flex-grow: 1;
	}

	.icon-delete {
		display: inline-block;
		background-size: 16px 16px;
		width: 16px;
		height: 16px;
		padding: 0;
		margin-top: 10px;
	}

	.sharingOptionsGroup {
		margin-right:10px;
	}
	.shareOption {
		margin-top: 5px;
	}
}

.avatardiv {
	background-color: $color-lightgrey;
	border-radius: 16px;
	width: 32px;
	height: 32px;

	.icon-group, .icon {
		padding: 16px;
		opacity: 0.5;
	}

	&.has-contactsmenu img {
		cursor: pointer;
	}
}

.avatardiv-container {
	position: relative;
}

.board-detail__deleted-list__item {
	display: flex;
	flex-direction: row;

	* {
		flex-basis: 44px;
	}

	.title {
		flex-grow: 2;
	}
	.live-relative-timestamp {
		flex-grow: 1;
	}
}

#board-detail-labels {
	ul li {
		input {
			margin: 0px;
			padding: 5px;
			min-height: 0px;
		}

		.label-title {
			width: 100%;
			padding: 4px;
			border: none;
			border-radius: 0px 0px 5px 5px;
		}

		a.icon {
			padding: 5px;
			opacity: 0.5;
			&:hover {
				opacity: 1;
			}
		}
	}

	.color {
		width: 28px;
		height: 100%;
	}
}

.label-create {
	width: 100%;
	padding: 0px 56px 0px 0px !important;

	a {
		margin: 0px;
	}

	.icon {
		margin-right: 10px;
	}
}

.tabHeaders {
	clear: both;
	overflow: initial;
	margin-bottom: 0;
	.icon {
		display: inline-block;
		background-size: contain;
		margin-right: 5px;
		opacity: 0.5;
	}
}

.tabsContainer {
	margin-top: 15px;
	height: 100%;

	.tab {
		height: 100%;
	}
}

.ui-select-offscreen {
	display: none;
}

.ui-select-match-item {
	padding: 0;
	float: left !important;
	display: block;
	border-radius: 3px !important;

	.select-label {
		color: $color-primary-text;
		padding: 6px 23px 6px 6px;
		margin-right: -23px !important;
	}

	.select2-search-choice-close {
		z-index: 100;
		position: relative;
		display: inline-flex !important;
		margin-right: 7px;
		vertical-align: top;
	}
}

.select2-container {
	width: 100%;
	margin: 0;

	.select2-choices {
		padding: 0 !important;

		.select2-search-choice {
			padding: 3px 0 !important;
			border: 0 !important;
			overflow: hidden;
		}
		.select2-search-field {
			margin-right: -10px;
			flex-grow: 1;
			input {
				width: 100% !important;
			}
		}
	}

	.select2-choice {
		height: auto;
	}
}

.ui-select-container[disabled] .ui-select-match-item {
	margin-right: 0 !important;

	.select-label {
		padding: 4px;
		min-width: 26px !important;
		height: 100%;
		display: inline-block;
	}
}

.select2-search input {
	width: 100% !important;
}

.select2-result-label {
	padding: 0px !important;
	display: flex;
	span {
		flex-grow: 1;
		padding: 6px;
	}
}

/**
 * Markdown rendering
 */
#markdown {
	width: 100% !important;
	min-height: 40px;
	cursor: text;

	p {
		margin-bottom: 15px;
	}

	* {
		white-space: normal;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	a {
		opacity: 0.5;
		text-decoration: underline;
	}

	ol,
	ul {
		margin-left: 20px;
		margin-bottom: 10px;
	}

	ul {
		list-style-type: disc;
	}

	h1 {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
	}

	h2 {
		font-size: 16px;
		font-weight: 600;
	}

	h3 {
		font-size: 14px;
		font-weight: 600;
	}

	h4 {
		font-size: 13px;
		font-weight: 600;
	}

	h6 {
		font-size: 12px;
		font-weight: 600;
	}

	pre {
		background-color: var(--color-background-dark, $color-lightgrey);
		padding: 3px;
		overflow: auto;

		code {
			white-space: pre;
		}
	}

	img {
		max-width: 100%;
		max-height: 50vh;
		margin: auto;
		display: block;
	}

	input[type=checkbox] {
		margin: 0px 10px 0px 0px;
		line-height: 10px;
		font-size: 10px;
		display: inline-block;
		min-height: 12px;
	}

	li 	input[type="checkbox"].checkbox + label::before {
		margin-left: -15px;

	}
	input[type="checkbox"].checkbox + label::before {
		position: relative;
		z-index: 100;
		margin-right: 10px;
		margin-top: 0;
	}
	li input[type="checkbox"].checkbox:not(:checked) + label::before {
			background-color: $color-main-background;
	}

	table {
		margin-bottom: 10px;
		border-collapse: collapse;

		thead {
			background-color: var(--color-background-dark, $color-lightgrey);
		}
		td, th {
			border: 1px solid var(--color-background-darker, $color-darkgrey);
			padding: 3px;
		}
	}
}

.section-wrapper {
	display: flex;
	max-width: 100%;
	margin-top: 10px;
}

.section-label {
	background-position: 0px center;
	width:28px;
	flex-shrink: 0;
}

.section-details {
	flex-grow: 1;
}
/**
 * Mobile optimizations
 */
@media (min-width: 481px) {
	/* hide board actions on mobile */
	.board-header-controls {
		display: flex;

		&.app-popover-menu-utils {
			display: none;
		}
	}

	#innerBoard {
		display: flex;
	}

	.stack {
		width: 320px;
		min-width: 320px;
		border-right: 1px solid $color-lightgrey;
		margin-right: 10px;
		padding-right: 10px;

		&:last-child {
			border-right: 1px solid transparent;
		}

		h3 button {
			display: none;
		}
		h2:hover button {
			display: inline-flex;
		}
	}
}


/**
 * Hotfix for https://github.com/angular-ui/ui-select/issues/1652
 */
.ui-select-dropdown.select2-drop-active {
	opacity: 1 !important;
}

/**
 * Custom app sidebar handling
 */
body:not(.snapjs-left) {
	.app-navigation-hide {
		#app-content {
			margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/
		}
		#app-navigation {
			transform: translateX(-300px);
		}
	}
}
@media only screen and (max-width: 768px) {
	#app-navigation-toggle-custom {
		display: none;
	}
}

/**
 * Print settings, better leave them at the eof
 */
@import 'print.scss';