/**
 * Association UI: Selector
 */

[data-interface^="aui-selector"] .selectize-control {
	position: relative;
	box-sizing: border-box;
	margin-top: 0.4rem;
	padding: 1rem;
	background-color: WhiteSmoke;
}

[data-interface^="aui-selector"] .selectize-input {
	overflow: hidden;
}

/* Items */

[data-interface^="aui-selector"] .item {
	display: inline-table;
	width: 100%;
	position: relative;
	position: relative;
	color: #3d3d3d;
	background-color: white;
	z-index: 100;
}

[data-interface^="aui-selector"] .item * {
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
}

[data-interface^="aui-selector"] .item a {
  padding: 0 0 0 1rem;
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

[data-interface^="aui-selector"] .multi .item {
	box-sizing: border-box;
	min-height: 3.3rem;
	border-top: 0.1rem solid WhiteSmoke;
}

[data-interface^="aui-selector"] .multi .item + .item {
	border-top: 0.1rem solid WhiteSmoke;
}

[data-interface^="aui-selector"] .multi .ordering {
	background-color: WhiteSmoke !important;
	box-shadow: 0 0.2rem 0.15rem rgba(0,0,0,0.2);
	cursor: move;
}

[data-interface^="aui-selector"] .selectize-input input {
	display: block;
	position: relative !important;
	left: 0 !important;
	box-sizing: border-box;
	width: 100% !important;
	height: 3.3rem;
	margin: 0;
	padding: 0.6rem 3rem 0.6rem 1rem;
	line-height: 2.1rem;
	border: none;
	border-top: 0.1rem solid WhiteSmoke;
	border-bottom: 0.1rem solid rgba(0,0,0,.2);
	-webkit-user-select: auto !important;
	opacity: 1 !important;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' width='32px' height='32px' viewBox='0 0 32 32'><g><polyline fill='none' stroke='rgba(0,0,0,0.25)' stroke-width='2' stroke-miterlimit='10' points='4,11 16,22 28,11 '/></g></svg>");
	background-repeat: no-repeat;
	background-position: right 6px top 6px;
	background-size: 20px 20px;
}

[data-interface^="aui-selector"] .selectize-input:not(.has-items) input {
	height: 3.3rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

[data-interface^="aui-selector"] .item span {
  display: table-cell;
  vertical-align: middle;
	white-space: normal;
	word-break: break-all;
	width: 100%;
	padding: 0;
}

[data-interface^="aui-selector"] .multi .item span {
	white-space: normal;
	word-break: break-all;
}

[data-interface^="aui-selector"] .destructor {
	display: table-cell;
	margin: 0;
	color: #aeaeae;
	font-weight: normal;
	border-bottom: none;
}

[data-interface^="aui-selector"] .destructor:hover {
	color: #494949;
}

/* Dropdown */

[data-interface^="aui-selector"] .selectize-dropdown {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0.2rem 0 0 0;
	background: white;
	box-shadow: 0 1rem 2rem rgba(0,0,0,0.2), 0 0.6rem 0.6rem rgba(0,0,0,0.2);
	z-index: 1000;
}

[data-interface^="aui-selector"] .selectize-dropdown-content {
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 22rem;
}

[data-interface^="aui-selector"] .selectize-dropdown .optgroup,
[data-interface^="aui-selector"] .selectize-dropdown .option {
	overflow: hidden;
	width: 100%;
	padding: 0.8rem 1rem 0.7rem;
	color: #3d3d3d;
	box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.15);
}

[data-interface^="aui-selector"] .selectize-dropdown .optgroup {
	font-weight: bold;
}

[data-interface^="aui-selector"] .selectize-dropdown .active {
	color: #fff;
	background-color: #668abe;
	box-shadow: none;
	cursor: pointer;
}

/* Index table */

table .multi[data-interface^="aui-selector"] {
	position: relative;
	margin: -0.8rem 0 0 -0.8rem;
	padding-bottom: 2.4rem;
}

table tr .multi[data-interface^="aui-selector"]::after {
	content: '↓ ' attr(data-count) ' ' attr(data-label-plural);
	position: absolute;
	left: 0;
	bottom: -0.8rem;
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 0.8rem 0.8rem;
	pointer-events: none;
	border-top: 0.1rem solid #e6e6e5;
}

table tr .multi[data-interface^="aui-selector"][data-count="1"]::after {
	content: '↓ '  attr(data-count) ' ' attr(data-label-singular);
}

table tr.selected .multi[data-interface^="aui-selector"]::after {
	border-top-color: #9eb4d5;
}

table .multi[data-interface^="aui-selector"] ul {
	overflow-y: auto;
  overflow-x: hidden;
	max-height: 4.9rem;
	margin: 0;
}

table .multi[data-interface^="aui-selector"] li {
	display: block;
	padding: 0.8rem;
	border-bottom: 0.1rem solid #e6e6e5;
}

table tr.selected .multi[data-interface^="aui-selector"] li {
	border-top-color: #9eb4d5;
}

table .multi[data-interface^="aui-selector"] li::before {
	display: none;
}

table .multi[data-interface^="aui-selector"] li br {
	display: block;
}

table .multi[data-interface^="aui-selector"] li a {
	color: #000;
	border-bottom: none;
}

table .multi[data-interface^="aui-selector"] li strong {
	font-weight: bold;
}

/* Layouts */

[data-interface^="aui-selector"] .item,
[data-interface^="aui-selector"] .selectize-dropdown .option,
table .multi[data-interface^="aui-selector"] li {
	white-space: normal;
	word-break: break-all;
	padding: 1rem;
	box-sizing: border-box;
}

[data-interface^="aui-selector"] .item img,
[data-interface^="aui-selector"] .selectize-dropdown .option img,
table .multi[data-interface^="aui-selector"] li img {
	float: left;
	margin: 0 1rem 0 0;
}

[data-interface^="aui-selector"] .selectize-dropdown .option img {
	margin-bottom: 0;
}

[data-interface^="aui-selector"] .item em,
[data-interface^="aui-selector"] .selectize-dropdown .option em,
table .multi[data-interface^="aui-selector"] li em {
	color: rgba(0, 0, 0, 0.4);
	font-style: normal;
}

[data-interface^="aui-selector"] .selectize-dropdown .active em {
	color: rgba(255, 255, 255, 0.7);
}

/* Sortable */

[data-interface='aui-selector-sortable'] .multi .item {
	cursor: -webkit-grab;
	cursor: grab;
	transition: all 0.2s ease-in-out;
	/* padding-left: 2rem; */
}

[data-interface='aui-selector-sortable'] .multi .item:hover {
	box-shadow: 0 1rem 2rem rgba(0,0,0,0.2), 0 0.6rem 0.6rem rgba(0,0,0,0.2);
	z-index: 1000;
}


.field-association label > span {
  color: #a9a9a9;
}

[data-interface='aui-selector-sortable'] .multi .ordering {
	cursor: -webkit-grabbing;
	cursor: grabbing;
	box-shadow: 0 1rem 2rem rgba(0,0,0,0.2), 0 0.6rem 0.6rem rgba(0,0,0,0.2);
	z-index: 1000;
}

[data-interface^="aui-selector"] .multi .ordering .destructor,
[data-interface^="aui-selector"] .multi .ordering a {
	color: DarkGray;
}

/* Hide input on single selects with selected item since search wont work */
div.single .has-items input {
  display: none;
}