.uxListView																								{ display: flex; flex-direction: column; border: 1px solid #bebebe; color: #444; }
.uxListView > header																					{ flex: 0 0 32px; display: flex; flex-direction: column; color: #444; height: 32px; min-height: 32px; transition: height .2s 0s ease-in, min-height .2s 0s ease-in; overflow: hidden; }
.uxListView	> div.list																					{ flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; }
.uxListView > footer																					{ background: #fff; flex: 0 0 42px; display: flex; flex-direction: column; }

.uxListView select																						{ border: thin solid #bebebe; font-size: 1em; font-family: "ABBVoice", "Arial"; }
.uxListView input																						{ border: thin solid #bebebe; font-size: 1em; font-family: "ABBVoice", "Arial"; padding: 2px 4px; }

.uxListView select:hover																				{ border-color: #444; }
.uxListView select:focus																				{ border-color: #36F; outline: none; }
.uxListView input:hover																					{ border-color: #444; }
.uxListView input:focus																					{ border-color: #36F; outline: none; }

.uxListView:not(.minimal) > header.open																	{ height: 112px; min-height: 112px; transition: height .2s .1s, min-height .2s .1s; }

.uxListView > header > div.title																		{ display: flex; flex: 0 0 32px; background: #fff }
.uxListView > header > div.title > span:nth-child(1)													{ padding-left: 8px; padding-right: 8px; align-self: center; flex: 1 1 auto; position: relative; -ms-user-select: none !important; user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uxListView > header > div.title > span:nth-child(1):not(:empty):after									{ content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background-color: #bebebe; }
.uxListView > header > div.title > span:nth-child(2)													{ margin-right: 8px; flex: 0 0 40px; box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1) inset; transition: box-shadow .1s .2s linear; display: flex; flex-direction: column; }
.uxListView > header > div.title > span:nth-child(2) > div.icon											{ background: url("res/header-params-open.svg") no-repeat 50% 50%; flex: 1 1 auto; box-sizing: border-box; transition: background .2s .2s, opacity .2s, border .2s; opacity: .5; border-top: 0px solid #36f; border-bottom: 0px solid transparent; }
.uxListView > header > div.title > span:nth-child(2):hover												{ transition: background-color .05s, box-shadow .1s .2s linear; cursor: pointer; }
.uxListView > header > div.title > span:nth-child(2):hover > div.icon									{ opacity: 1; }
.uxListView > header > div.params																		{ border-bottom: 0px solid #ebebeb; flex: 1 1 auto; background: #f5f5f5; display: none; }
.uxListView > header > div.params > span.filters														{ flex: 1 1 50%; padding: 4px 8px; }
.uxListView > header > div.params > span.filters:empty													{ display: none; }
.uxListView > header > div.params > span.filters > form													{ margin: 0; }
.uxListView > header > div.params > span.filters > form > header										{ color: #bebebe; border-bottom: 1px solid #bebebe; margin-bottom: 4px; font-size: .8em; font-weight: bold; -ms-user-select: none !important; user-select: none; }
.uxListView > header > div.params > span.filters > form > table											{ width: 100%; font-size: .8em; -ms-user-select: none !important; user-select: none; }
.uxListView > header > div.params > span.filters > form > table	div										{ width: 100%; display: flex; position: relative; }
.uxListView > header > div.params > span.filters > form > table	div > input[name='filter']				{ flex: 1 1 auto; padding: 2px 22px 2px 4px; width: 100%; }
.uxListView > header > div.params > span.filters > form > table	div > input[name='filter']::-ms-clear	{ display: none; }
.uxListView > header > div.params > span.filters > form > table	div > button[action='filter']			{ flex: 0 0 auto; border: 0; font-size: 16px; background: transparent; position: absolute; right: 1px; bottom: 1px; top: 1px; cursor: pointer; height: unset; min-height: unset; padding: 0; width: 20px; box-shadow: unset; transition: color .2s; color: #444; }
.uxListView > header > div.params > span.filters > form > table	div > button[action='filter']:hover		{ color: #D00; font-weight: bold; }
.uxListView > header > div.params > span.filters > form > table	div > button[action='filter']:focus		{ color: #D00; font-weight: bold; outline: none; }
.uxListView > header > div.params > span.sort															{ flex: 1 1 50%; padding: 4px 8px; }
.uxListView > header > div.params > span.sort:empty														{ display: none; }
.uxListView > header > div.params > span.sort > form													{ margin: 0; }
.uxListView > header > div.params > span.sort > form > header											{ color: #bebebe; border-bottom: 1px solid #bebebe; margin-bottom: 4px; font-size: .8em; font-weight: bold; -ms-user-select: none !important; user-select: none; }
.uxListView > header > div.params > span.sort > form > table											{ width: 100%; font-size: .8em; -ms-user-select: none !important; user-select: none; }
.uxListView > header > div.params > span.sort > form > table select										{ width: 100%; }

.uxListView > header.open > div.params																	{ border-bottom-width: 1px; display: flex; }
.uxListView > header.open > div.title > span:nth-child(2)												{ box-shadow: 0px 32px 0px 0px #f5f5f5 inset; transition: background-color .2s, box-shadow .1s 0s linear; }
.uxListView > header.open > div.title > span:nth-child(2) > div.icon									{ background-image: url("res/header-params-open.svg"); transition: background .2s 0s, opacity .2s, border .2s; opacity: 1; border-top: 2px solid #36f; border-bottom: 2px solid transparent; }

.uxListView	> div.list > div.listItem																	{ height: 40px; border: 1px solid transparent; font-size: 16px; font-weight: bold; transition: color .2s, background .2s, border-color .2s, font-size .2s, height .2s, opacity .2s; display: flex; position: relative; }
.uxListView	> div.list > div.listItem:nth-child(even)													{ background-color: #ebebeb; }

.uxListView	> div.list > div.listItem.ui-draggable.ui-draggable-dragging								{ z-index: 9999; opacity: 1; }
.uxListView > div.list > div.listItem > div.drop														{ position: absolute; height: 16px; width: 100%; background: transparent; transition: background .2s; visibility: hidden; }
.uxListView > div.list > div.listItem > div.drop.ui-droppable-active									{ visibility: visible; }
.uxListView > div.list > div.listItem > div.drop.drop-hover												{ background: rgba(0,0,0,.5); }
.uxListView > div.list > div.listItem > div.drop.top													{ top: -1; }
.uxListView > div.list > div.listItem > div.drop.bottom													{ bottom: -1; }

.uxListView	> div.list > div.listItem > span.drag														{ flex: 0 0 24px; background: url("res/drag-black.svg") no-repeat 50% 50%/40%; opacity: .3; transition: opacity .2s; cursor: grab; }
.uxListView	> div.list > div.listItem > span.drag:hover													{ opacity: 1; transition: opacity .05s; }
.uxListView	> div.list > div.listItem > span.icon														{ flex: 0 0 40px; margin: 6px 6px 6px 8px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; transition: background .2s; }
.uxListView	> div.list > div.listItem > span.name														{ flex: 1 1 auto; display: flex; align-items: center; padding-left: 4px; padding-right: 4px; word-break: break-all; -ms-user-select: none !important; user-select: none; }
.uxListView	> div.list > div.listItem > span.conf														{ flex: 0 0 40px; background: url("res/config-black.svg") no-repeat 50% 50%; transition: background .2s, opacity .2s, flex .2s; opacity: .5; cursor: pointer; }
.uxListView	> div.list > div.listItem > span.conf:hover													{ opacity: 1; transition: opacity .05s; }

.uxListView	> div.list > div.listItem:hover																{ cursor: pointer; border-color: #bdc3c7; background-color: #bdc3c7; transition: color .05s, background .05s, border-color .05s, opacity .05s; color: #FFF; }
.uxListView	> div.list > div.listItem:hover > span.drag													{ background-image: url("res/drag-white.svg"); }
.uxListView	> div.list > div.listItem:hover > span.icon													{ transition: background .05s; }
.uxListView	> div.list > div.listItem:hover > span.conf													{ background-image: url("res/config-white.svg"); transition: background .05s; }

.uxListView	> div.list > div.listItem.active															{ background-color: #36f; color: #fff; border-color: rgba(0,0,0,.1); }
.uxListView	> div.list > div.listItem.active > span.drag												{ background-image: url("res/drag-white.svg"); }
.uxListView	> div.list > div.listItem.active > span.icon												{ transition: background .05s; }
.uxListView	> div.list > div.listItem.active > span.conf												{ background-image: url("res/config-white.svg"); transition: background .05s; }

.uxListView	> div.list > div.listItem.clone																{ background-color: rgba(255,255,255,.7); color: #000; border: 1px dashed #000; backdrop-filter: blur(1px); }
.uxListView	> div.list > div.listItem.clone > span.drag													{ background: none; }
.uxListView	> div.list > div.listItem.clone > span.conf													{ background: none; }

.uxListView	> div.list > div.listItem.ghost.active														{ opacity: .5; }
.uxListView	> div.list > div.listItem.ghost:not(.active)												{ display: none; }

.uxListView	> div.list > div.listItem.dragging															{ opacity: .4; }

.uxListView > footer > hr																				{ border: none; border-bottom: 1px solid #bebebe; margin: 3px 8px; height: 1px; box-sizing: border-box; }

/* Minimal state */
.uxListView.minimal > header > div.title > span:nth-child(2)											{ display: none; }
.uxListView.minimal > header.open > div.params															{ display: none; }
.uxListView.minimal	> div.list > div.listItem > span.drag												{ display: none; }
.uxListView.minimal	> div.list > div.listItem > span.name												{ display: none; }
.uxListView.minimal	> div.list > div.listItem > span.conf												{ display: none; }