.toolbox-selector { font-family: 'Source Sans Pro', 'tenforce', Arial, sans-serif; font-kerning: normal; font-size: 16px; -webkit-font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures; -webkit-font-feature-settings: "kern" 1,"liga" 0; font-feature-settings: "kern" 1,"liga" 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: inline-flex; align-items: center; white-space: nowrap; border-radius: 15px; background-color: transparent; border: .125rem solid transparent; margin: .25rem; vertical-align: top; /* Modifiers */ }

.toolbox-selector:focus { outline: 0; }

.toolbox-selector__item { position: relative; display: inline-block; display: flex; vertical-align: top; max-width: 100%; overflow: hidden; border-radius: 15px; transform: translate(0); -webkit-transition: all .3s ease-in-out, transform .5s ease; transition: all .3s ease-in-out, transform .5s ease; cursor: pointer; opacity: .5; margin: 0 1px; }

.toolbox-selector__item::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 2px 8px -2px black; border-radius: inherit; pointer-events: none; }

.toolbox-selector__item:focus, .toolbox-selector__item:focus-within { transform: translate(0); animation: focusUpDown .3s ease forwards; }

.toolbox-selector__item:hover { opacity: .7; background-color: white; box-shadow: none; }

.toolbox-selector__item:hover:focus, .toolbox-selector__item:hover:focus-within { animation: hoverDown .5s ease forwards; }

.toolbox-selector__item:active { opacity: .45; }

.toolbox-selector__item:first-child { margin-left: 0; }

.toolbox-selector__item:first-child .toolbox-selector__block:first-child { border-bottom-left-radius: 15px; border-top-left-radius: 15px; }

.toolbox-selector__item:first-child .toolbox-selector__block:first-child .toolbox-selector__blockPart:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }

.toolbox-selector__item:last-child { margin-right: 0; }

.toolbox-selector__item:last-child .toolbox-selector__block:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

.toolbox-selector__item:last-child .toolbox-selector__block:last-child .toolbox-selector__blockPart:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

.toolbox-selector__item:not(.toolbox-selector__item--selected) .toolbox-selector__blockPart { filter: grayscale(1); }

.toolbox-selector__item--selected { opacity: 1; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5); }

.toolbox-selector__item--selected::after { display: none; }

.toolbox-selector__item--selected .toolbox-selector__blockPart { background-color: #FFF; }

.toolbox-selector__input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0 !important; cursor: pointer; }

.toolbox-selector__block { border: 0; outline: 0; padding: 0; position: relative; display: flex; border-radius: inherit; }

.toolbox-selector__blockPart { position: relative; display: inline-block; display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; max-width: 345px; }

.toolbox-selector__blockPart > span { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.toolbox-selector__blockPart:first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; }

.toolbox-selector__blockPart:last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; }

.toolbox-selector--inverted { color: #FFF; }

.toolbox-selector--inverted.toolbox-selector--expanded { background-color: #000; }

.toolbox-selector--inverted .toolbox-selector__item { box-shadow: inset -1px 3px 10px -3px rgba(255, 255, 255, 0.75); }

.toolbox-selector--inverted .toolbox-selector__item--selected { box-shadow: 0 2px 8px -2px black; }

.toolbox-selector--inverted .toolbox-selector__item--selected .toolbox-selector__blockPart { background-color: #333; }

.toolbox-selector--inverted .toolbox-selector__item:hover { background-color: #333; box-shadow: none; }

.toolbox-selector--singleselect .toolbox-selector__blockPart { border-radius: 0; }

.toolbox-selector--expanded { background-color: #d7d7d7; }

.toolbox-selector--multiselect .toolbox-selector__item { overflow: visible; border-radius: 4px; margin: 0; }

.toolbox-selector--multiselect .toolbox-selector__item:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }

.toolbox-selector--multiselect .toolbox-selector__item:first-child .toolbox-selector__block:first-child { box-shadow: none; }

.toolbox-selector--multiselect .toolbox-selector__item:first-child .toolbox-selector__block:first-child .toolbox-selector__blockPart:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }

.toolbox-selector--multiselect .toolbox-selector__item:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

.toolbox-selector--multiselect .toolbox-selector__item:last-child .toolbox-selector__block:last-child .toolbox-selector__blockPart:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

.toolbox-selector--multiselect .toolbox-selector__item:not(:first-child) { margin-left: 2px; }

.toolbox-selector--multiselect .toolbox-selector__item--selected:hover, .toolbox-selector--multiselect .toolbox-selector__item--selected:focus { opacity: .85; }

.toolbox-selector--required.toolbox-selector--locked .toolbox-selector__item--selected { cursor: default; pointer-events: none; transform: translate(0); opacity: 1; box-shadow: none; }

.toolbox-selector--required.toolbox-selector--locked .toolbox-selector__item--selected:focus, .toolbox-selector--required.toolbox-selector--locked .toolbox-selector__item--selected:hover { transform: translate(0); animation: none; }

.toolbox-selector--required.toolbox-selector--locked .toolbox-selector__item--selected:active { transform: translate(0); }

.toolbox-selector--draggable { cursor: move; background-size: 200%; }

.toolbox-selector--draggable:hover, .toolbox-selector--draggable:active { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0.2) 5px, rgba(0, 0, 0, 0.2) 10px); }

.toolbox-selector--draggable:hover .toolbox-selector__item, .toolbox-selector--draggable:active .toolbox-selector__item { opacity: 1; transform: none; }

.toolbox-selector--draggable .toolbox-selector__item { cursor: move; box-shadow: none; }

.toolbox-selector--draggable .toolbox-selector__item::before { display: none; }

.toolbox-selector--draggable .toolbox-selector__block { background-color: #FFF; }

.toolbox-selector--filter { background-color: #D7D7D7; border: 2px solid #D7D7D7; }

.toolbox-selector--filter .toolbox-selector__item:hover { transform: translate(0, 0); opacity: 1; }

.toolbox-selector--filter .toolbox-selector__item--selected { box-shadow: none; }

@keyframes dragBorderRotate { 100% { background-position: 100% 100%; } }

/* Draggable plugin */
.JS_draggable.ui-draggable .toolbox-selector--draggable:active, .JS_draggable.ui-draggable-dragging .toolbox-selector--draggable { overflow: visible; z-index: 1; transform: scale(1.03); box-shadow: 0 0 150px rgba(0, 0, 0, 0.2); animation: dragBorderRotate 10s linear infinite; }

.JS_draggable.is-dragging .toolbox-selector--draggable, .JS_draggable.is-dragging .toolbox-selector--draggable:active { opacity: .4; background-image: none; box-shadow: none; }