.drag-drop__container {
	display: block;
	width: 100%;
	min-height: 6rem;
	background: rgba($color--seashell,0.1);
	border: 0.1rem dashed $color--seashell;
	padding: 0.5rem 1rem 0.5rem 1rem;
	line-height: 2.8rem;
	font-size: 1.3rem;
	list-style: none;
	margin: 0 0 1rem 0;
	border-radius: 1rem;
}

.drag-drop__container--in {
	@extend .drag-drop__container;
	padding-bottom: 6rem;
}
.drag-drop__container--out {
	@extend .drag-drop__container;
	border: none;
	background: none;
	padding: 0;
}

.drag-drop__item {
	cursor: move;
	font-size: 1.3rem;
	line-height: 1.4rem;
	margin: 0.5rem 0;
	padding: 0.6rem;
	display: block;
	background: $color--white;
	border: 0.1rem solid lighten($color--grayforms-border, 5%);
	padding-left: 3.5rem;
	border-radius: 1rem;
	transition: box-shadow 0.1s linear;

	&:hover {
		box-shadow: 1px 1px 10px -3px rgba(0,0,0,0.4);
		border: 0.1rem solid $color--mint;
	}
}

.drag-drop__item__remove {
	cursor: pointer;
	&:before {
		display: inline-block;
		float: left;
		font-family: 'FontAwesome';
		content: $fa-var-remove;
		color: $color--grayforms-label;
		margin-right: 1rem;
		margin-left: -2.5rem;
		width: 1rem;
	}
	&:hover {
		&:before {
			color: $color--red;
		}
	}
			
}

.drag-drop__item__add {
	@extend .drag-drop__item__remove;
	&:before {
		content: $fa-var-plus;
	}
	&:hover {
		&:before {
			color: $color--green;
		}
	}
}

table .ui-sortable-handle {
	cursor: move;
}


.drag-drop__note {
	font-weight: 200;
	padding: 0.5rem 0;
	font-size: 1.8rem;
	text-align: center;
	line-height: 3rem;
	display: inline-block;
	margin: auto;

	&:before {
		font-family: 'FontAwesome';
		display: inline-block;
		font-size: 3rem;
		line-height: 3rem;
		float: left;
		margin-right: 2rem;
		color: $color--seashell;
	}

}
.drag-drop__note--searching {
	@extend .drag-drop__note;
	&:before {
		content: $fa-var-spinner;
		color: $color--mint;
		animation: spinner-loading 0.8s steps(8, end) infinite;
	}
}
.drag-drop__note--nothing-found {
	@extend .drag-drop__note;
	&:before {
		content: $fa-var-info-circle;
	}
}