/* @define ColumnPicker */
.ColumnPicker {
    display: flex;
    height: 100%;
}

.ColumnPicker-filterInputGroup {
    max-width: 460px;
    margin-bottom: 15px;
}

.ColumnPicker-filterInputContainer {
    width: 100%;
}

/* Select all buttons in the middle */
.ColumnPicker-bulkColumnSelectors {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ColumnPicker-selectAllButton {
    margin: 10px 20px;
}

/* Sort Button */
.ColumnPicker-sortReportOnColumnButton {
    opacity: 0;
    margin: 3px;
    width: 3rem;
}

/* stylelint-disable */
/*.DragAndDropCard-item:hover .ColumnPicker-sortReportOnColumnButton,*/
.ColumnPicker-sortReportOnColumnButton:focus,
.ColumnPicker-sortReportOnColumnButton:hover,
.ColumnPicker-sortReportOnColumnButton[data-sortState="0"]:hover,
.ColumnPicker-sortReportOnColumnButton[data-sortState="1"],
.ColumnPicker-sortReportOnColumnButton[data-sortState="2"] {
    opacity: 1;
}

/* stylelint-enable */

/* Other containers */

.ColumnPicker-selectorContainer {
    display: flex;
    flex-direction: row;
    flex-grow: 2;
    max-height: calc(100% - 50px);
    min-height: 1vh;
}

.ColumnPicker-content {
    display: flex;
    flex-direction: column;
    margin: 10px 0 10px 10px;
}

.ColumnPicker-selectedColumnName,
.ColumnPicker-availableColumnName {
    margin: auto 5px;
    width: 100%;
}

.ColumnPicker-moveButton {
    flex-grow: 0;
    flex-shrink: 0;
    border: none;
    width: 2.3rem;
}

.ColumnPicker-moveColumnLeftButton {
    border-radius: 3px 0 0 3px;
    border-right: 1px solid #ddd;
}

.ColumnPicker-moveColumnRightButton {
    border-radius: 0 3px 3px 0;
    border-left: 1px solid #ddd;
}

.ColumnPicker-pivotTabDescription {
    margin: 0 0 10px;
}

.ColumnPicker-filterColumns {
    width: 490px;
    margin-left: -15px;
}