/*
 * Layout
 */

.staff-chooser {
    height: 400px;
    border: 1px solid #9e9e9e;
}

/* Content layout */

.staff-chooser-panel {
    display: flex;
    height: 100%;
}

/* Tabs */

.staff-chooser-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    min-width: 0;
}

.staff-chooser-tabs:not(:last-child) {
    border-right: 1px solid #9e9e9e;
}

/* Tabs container */

.staff-chooser-tabs-container > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 8px 24px 0;
    background: #ededed;
    border-bottom: 1px solid #9e9e9e;
}

.staff-chooser-tabs-container > ul > li {
    position: relative;
}

.staff-chooser-tabs-container > ul > li > .wicket-ajax-indicator{
    position: absolute;
    background: url('../images/loader-black-ver-0F139D7A7C8E8BF27418108A8298DA68.svg') center no-repeat;
    top: 0;
    right: 0;
    margin: 4px;
    animation: loader-rotation 1s linear infinite;
}

.staff-chooser-tabs-container > ul > li.selected > .wicket-ajax-indicator{
    background: url('../images/loader-white-ver-84BBD997A1A183AB86E0B8021251C646.svg') center no-repeat;
}

.staff-chooser-tabs-container > ul > li > .wicket-ajax-indicator > img {
    display: none;
}

.staff-chooser-tabs-container > ul > li:not(:last-child) {
    margin-right: 6px;
}

.staff-chooser-tabs-container > ul > li > a {
    display: block;
    padding: 0 24px;
    line-height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #424242;
    background: #c6c6c6;
}

.staff-chooser-tabs-container > ul > li.selected > a {
    color: #fff;
    background: #f44336;
}

/*
 * Tree
 */

/* Subtree */

.staff-chooser-tree {
    flex: 1 1;
    min-height: 0;
    padding: 12px 6px 12px 24px;
    overflow: auto;
}

.staff-chooser-tree .tree-subtree {
    margin-left: 18px;
}

/* Tree node */

.staff-chooser-tree .tree-node {
    display: flex;
    align-items: center;
    min-width: 0;
}

.staff-chooser-tree .tree-node:hover {
    background: #e3e5e5;
}

/* Tree junction */

.staff-chooser-tree .tree-node .tree-junction,
.staff-chooser-tree .tree-node .tree-junction-collapsed,
.staff-chooser-tree .tree-node .tree-junction-expanded {
    width: 16px;
    height: 16px;
    background: url('../images/arrow-right-ver-0E060F2A955D02BC3CA18B2820C1BFFD.svg') center no-repeat;
    background-size: 16px;
    cursor: default;
    text-decoration: none;
}

.staff-chooser-tree .tree-node .tree-junction {
    background: url('../images/node-leaf-ver-1E7356017E9ABFDF96AB531B72D5BE06.svg') center no-repeat;
    background-size: 6px;
    opacity: 0.5;
}

.staff-chooser-tree .tree-node .tree-junction-expanded {
    transform: rotate(90deg);
}

/* Tree item */

.staff-chooser-tree-item-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.staff-chooser-tree-item-wrapper:hover {
    background: #e3e5e5;
}

.staff-chooser-tree-item {
    display: flex;
    align-items: center;
    flex: 0 auto;
    min-width: 0;
    padding: 4px 0;
}

.staff-chooser-tree-item > input[type='checkbox'] {
    width: 14px;
    min-width: 14px;
    height: 14px;
}

.staff-chooser-tree-item .staff-chooser-tree-item-title {
    flex: 1 auto;
    padding-left: 20px;
    background: 4px center no-repeat;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.staff-chooser-tree-item-info {
    color: #999;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * List panel
 */

.staff-chooser-list {
    flex: 1 1;
    min-height: 0;
    padding: 12px 6px 12px 24px;
    overflow: auto;
}

/*
 * Search panel
 */

.staff-chooser-search {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    min-height: 0;
}

/* Search form */

.staff-chooser-form {
    display: flex;
    position: relative;
    min-width: 0;
    padding: 8px 24px;
    border-bottom: 1px solid #9e9e9e;
    background: #fff;
}

.staff-chooser-form-field {
    flex: 1 1;
    margin-right: 6px;
}

.staff-chooser-form-button {
    display: inline-block;
    font: inherit;
    font-weight: bold;
    border: 0;
    border-radius: 2px;
    min-width: 120px;
    height: 40px;
    padding: 0 20px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #616161;
    -webkit-appearance: none;
    transition: background-color 0.2s ease;
}

.staff-chooser-form-button:active {
    background: #424242;
}

.staff-chooser-form .wicket-ajax-indicator {
    position: absolute;
    top: 11px;
    right: 6px;
}

/* Search result */

.staff-search-result {
    flex: 1 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 24px;
}

.staff-search-count {
    font-weight: bold;
    padding: 8px 24px 0;
}

.staff-list-item {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 4px;
}

.staff-list-item:hover {
    background: #e3e5e5;
}

.staff-list-item > input[type='checkbox'] {
    width: 14px;
    height: 14px;
    min-width: 14px;
}

.staff-list-item-name,
.staff-list-item-info {
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.staff-list-item-name {
    padding-left: 16px;
    background: left center no-repeat;
    min-width: 40%;
}

.staff-list-item-name:not(:first-child) {
    margin-left: 4px;
}

.staff-list-item-name:not(:last-child) {
    flex: 1 1;
}

.staff-list-item-info {
    width: 25%;
}

.staff-list-item-remove {
    width: 16px;
    height: 16px;
    background: url('../images/cross-small-ver-F8828730A785CBFFA7130F86BB1B4695.png') center no-repeat;
    text-decoration: none;
}

/* List */

.staff-chooser-list-item-wrapper {
    display: flex;
    align-items: center;
}

.staff-chooser-list-item-wrapper:hover {
    background: #e3e5e5;
}

.staff-chooser-list-item-info {
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.staff-chooser-list-item-info:not(:last-child) {
    margin-right: 8px;
}

/*
 * Selection list
 */

.staff-chooser-selection {
    width: 230px;
    margin-left: 6px;
    padding: 12px 6px;
    border-left: 1px solid #9e9e9e;
    overflow: auto;
}

.staff-chooser-selection-title {
    font-weight: bold;
    text-transform: uppercase;
    color: #f44336;
    margin-bottom: 6px;
}

.staff-chooser-selection-item-wrapper {
    font-size: 12px;
    display: block;
}

.staff-chooser-selection-item-wrapper:hover {
    background: #e3e5e5;
}

.staff-chooser-selection-item-info {
    font-size: 0.95em;
    line-height: 1.15;
    padding-left: 20px;
    padding-bottom: 4px;
}

.staff-chooser-selection-item-info > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Types
 */

/* Staff */

.staff-chooser-tree-item--principal .staff-chooser-tree-item-title,
.staff-list-item--principal .staff-list-item-name {
    background-image: url('../images/types/user-ver-B9FFC0F87A591CE3B26AEAFF34667243.png');
}

.staff-chooser-tree-item--department .staff-chooser-tree-item-title,
.staff-list-item--department .staff-list-item-name {
    background-image: url('../images/types/department-ver-8032F58169755B962C87988F802CE7C7.png');
}

.staff-chooser-tree-item--organization .staff-chooser-tree-item-title,
.staff-list-item--organization .staff-list-item-name {
    color: #f44336;
    background-image: url('../images/types/organization-ver-7D4D371AE044F4CF10ED9E513CFE8DD5.png');
}

.staff-chooser-tree-item--role .staff-chooser-tree-item-title,
.staff-list-item--role .staff-list-item-name {
    background-image: url('../images/types/role-ver-854B2D58758349972A4CA88A6AC41456.png');
}

/* Attributes */

.staff-chooser-tree-item--attribute .staff-chooser-tree-item-title,
.staff-list-item--attribute .staff-list-item-name {
    background-image: url('../images/types/attribute-ver-67BDC6DF47196F318C74922B1B0778C6.png');
}

/* Structure */

.staff-chooser-tree-item--card .staff-chooser-tree-item-title,
.staff-list-item--card .staff-list-item-name {
    background-image: url('../images/types/card-ver-74954D0863795A9018A0FC0A8EEEDAAB.png');
}

.staff-chooser-tree-item--card.staff-chooser-tree-item--link .staff-chooser-tree-item-title,
.staff-list-item--card.staff-list-item--link .staff-list-item-name {
    background-image: url('../images/types/card-link-ver-912F765DE2F54BA13CA9BA644FB56002.png');
}

.staff-chooser-tree-item--folder .staff-chooser-tree-item-title,
.staff-list-item--folder .staff-list-item-name {
    background-image: url('../images/types/folder-ver-11146A1AFD64BDFA642870BA2CFA158F.png');
}

.staff-chooser-tree-item--folder.staff-chooser-tree-item--link .staff-chooser-tree-item-title,
.staff-list-item--folder.staff-list-item--link .staff-list-item-name {
    background-image: url('../images/types/folder-link-ver-4E92A5C08E26C8FE00CD27F3A24B0F56.png');
}

.staff-chooser-tree-item--smart-folder .staff-chooser-tree-item-title,
.staff-list-item--smart-folder .staff-list-item-name {
    background-image: url('../images/types/folder-smart-ver-AEBB94A8160D0D396A4E018DF6038880.png');
}

.staff-chooser-tree-item--document .staff-chooser-tree-item-title,
.staff-list-item--document .staff-list-item-name {
    background-image: url('../images/types/document-ver-344E80F727F3EF086DE3BF31E1DF7DD3.png');
}

.staff-chooser-tree-item--dictionary .staff-chooser-tree-item-title,
.staff-list-item--dictionary .staff-list-item-name {
    background-image: url('../images/types/dictionary-ver-C97288226C055146B2DB05D96137A9F6.png');
}

.staff-chooser-tree-item--dictionary-record .staff-chooser-tree-item-title,
.staff-list-item--dictionary-record .staff-list-item-name {
    background-image: url('../images/types/record-ver-11D18167903523464FB60F72CE0185B3.png');
}

.staff-chooser-tree-item--dictionary-record.staff-chooser-tree-item--historical .staff-chooser-tree-item-title,
.staff-list-item--dictionary-record.staff-list-item--historical .staff-list-item-name {
    background-image: url('../images/types/record-irrelevant-ver-DE434C413B3D7F867AD1DF769DC070C0.png');
}

/* Workflow */

.staff-chooser-tree-item--route .staff-chooser-tree-item-title,
.staff-list-item--route .staff-list-item-name {
    background-image: url('../images/types/route-ver-F1A5CC576CDE6D6254B92F4D6C8A6A16.png');
}

.staff-chooser-tree-item--route-node .staff-chooser-tree-item-title,
.staff-list-item--route-node .staff-list-item-name {
    background-image: url('../images/types/route-node-ver-8273714FEF137B316C038E2645B64880.png');
}

/* General */

.staff-chooser-tree-item--disabled .staff-chooser-tree-item-title,
.staff-list-item--disabled .staff-list-item-name {
    color: #999;
}

/*
 * Chooser box
 */

/* Panel */

.chooser-box .attribute-editor-combobox {
    position: relative;
    cursor: default;
    color: #000;
}

/* Field */

.chooser-box .mz-ul {
    list-style: none;
    min-height: 40px; /* Height of the component */
    margin: 0;
    padding-left: 6px;
    padding-right: 40px; /* Width of the arrow button */
    border: 1px solid #9e9e9e;
    background: #fff;
}

.chooser-box .attribute-editor-combobox.focused .mz-ul {
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(243, 65, 53, 0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chooser-box .attribute-editor-combobox .show-dialog {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url('../images/dots-ver-14D1D9BFBCE3C20418DB0A5E6AA158D0.svg') center no-repeat;
    background-size: 20px auto;
}

.chooser-box .mz-choice,
.chooser-box .empty-choice {
    display: block;
    font-size: 13px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    cursor: default;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chooser-box .attribute-editor-combobox .wicket-ajax-indicator {
    position: absolute;
    display: block;
    top: 4px;
    right: 24px;
}

/* Field for multiple selection */

.chooser-box--multiselect .mz-ul {
    font-size: 0;
    padding-left: 1px;
    padding-bottom: 1px;
}

.chooser-box--multiselect .mz-ul > li {
    display: inline-block;
    min-height: 36px;
    line-height: 34px;
}

.chooser-box--multiselect .mz-choice {
    border: 1px solid #e0e0e0;
    margin: 1px 1px 0 0;
    padding: 0 18px 0 6px;
    background: #eee;
    white-space: normal;
}

.chooser-box--multiselect .empty-choice {
    border: 1px solid #e0e0e0;
    margin: 1px 1px 0 0;
    padding: 0 18px 0 6px;
    background: #fff;
    white-space: normal;
    font-weight: bold;
    line-height: 20px;
}

.chooser-box--multiselect .remove-choice {
    position: absolute;
    display: block;
    top: 11px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: url('../images/cross-small-ver-F8828730A785CBFFA7130F86BB1B4695.png') center no-repeat;
}