.columnsConfigurationComponent {
    position: relative;
}

    .columnsConfigurationComponent .mainButton {
        cursor: pointer;
    }

    .columnsConfigurationComponent .menuButtons-container {
        position: absolute;
        top: 26px;
        left: -10px;
        width: 200px;
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2), 0 0 2px 0 rgba(70, 89, 191, 0.3);
        padding-top: 16px;
        padding-bottom: 12px;
        z-index: 999;
    }

        .columnsConfigurationComponent .menuButtons-container .header {
            display: flex;
            height: 24px;
            padding-left: 20px;
            justify-content: space-between;
        }

            .columnsConfigurationComponent .menuButtons-container .header .title {
                font-family: GlowSemiBold;
                font-size: 14px;
                color: #4a4a4a;
                cursor: default;
                flex: 0 0 115px;
            }

                .columnsConfigurationComponent .menuButtons-container .header .title img {
                    margin-left: 4px;
                }

            .columnsConfigurationComponent .menuButtons-container .header .ui-btn-link {
                font-size: 14px;
                line-height: normal;
                margin-right: 20px;
            }

        .columnsConfigurationComponent .menuButtons-container .menuButton,
        .columnDragHelperContainer .menuButton {
            position: relative;
            font-family: GlowRegular;
            color: #4a4a4a;
            font-size: 14px;
            height: 28px;
            padding-top: 5px;
            cursor: pointer;
            padding-left: 20px;
            text-align: left;
            display: flex;
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
        }

            .columnsConfigurationComponent .menuButtons-container .menuButton .titleContainer,
            .columnDragHelperContainer .menuButton .titleContainer {
                display: flex;
                max-width: 181px;
            }

            .columnsConfigurationComponent .menuButtons-container .menuButton .sortedBy,
            .columnDragHelperContainer .menuButton .sortedBy {
                flex: 0 0 auto;
                color: #8197ED;
                font-size: 13px;
                line-height: 20px;
                margin: 0 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .columnsConfigurationComponent .menuButtons-container .menuButton .ui-checkbox,
            .columnDragHelperContainer .menuButton .ui-checkbox {
                margin-top: 2px;
                flex: 0 0 auto;
            }

            .columnsConfigurationComponent .menuButtons-container .menuButton .ui-checkbox.disabled,
            .columnDragHelperContainer .menuButton .ui-checkbox.disabled {
                opacity: 0.4;
                cursor: move;
                pointer-events: none;
            }

            .columnsConfigurationComponent .menuButtons-container .menuButton .text,
            .columnDragHelperContainer .menuButton .text {
                flex: 1 1 auto;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .columnsConfigurationComponent .menuButtons-container .menuButton .reorderIcon,
            .columnDragHelperContainer .menuButton .reorderIcon {
                position: absolute;
                /* flex: 0 0 28px; */
                /* padding-top: 7px; */
                display: none;
                right: 0;
                top: 0;
                /* width: 15px; */
                padding: 3px 15px 0 20px;
                /* background-color: #F6F7FE; */
                /* display: flex; */
                height: 100%;
                background: -moz-linear-gradient(to left, #F6F7FE 70%, rgba(255,255,255,0));
                background: -webkit-linear-gradient(to left, #F6F7FE 70%, rgba(255,255,255,0));
                background: -o-linear-gradient(to left, #F6F7FE 70%, rgba(255,255,255,0));
                background: -ms-linear-gradient(to left, #F6F7FE 70%, rgba(255,255,255,0));
                background: linear-gradient(to left, #F6F7FE 70%, rgba(255,255,255,0));
            }

                .columnsConfigurationComponent .menuButtons-container .menuButton .reorderIcon img {
                    vertical-align: middle;
                }

            .columnsConfigurationComponent .menuButtons-container .menuButton:hover .reorderIcon {
                display: block;
                cursor: move;
            }

        .columnsConfigurationComponent .menuButtons-container .menuButton:hover {
            background: #F6F7FE;
        }

        .columnsConfigurationComponent .menuButtons-container .menuButton.disabled {
            opacity: 0.4;
            cursor: default;
            pointer-events: none;
        }
        .columnsConfigurationComponent .menuButtons-container .menuButton.disabled.dragging {
            opacity: 0.4;
            cursor: move;
            pointer-events: none;
        }

        .columnsConfigurationComponent .menuButtons-container .menuButton.disabled:hover {
            background:transparent;
        }

        .columnsConfigurationComponent .menuButtons-container .menuButton.hiddenWhileDragging {
            visibility: hidden;
        }

        .columnsConfigurationComponent .menuButtons-container .menuButton.hoveredOnTop {
            -webkit-box-shadow: inset 0 1px 0 0 #5774e7;
            -ms-box-shadow: inset 0 1px 0 0 #5774e7;
            box-shadow: inset 0 1px 0 0 #5774e7;
        }

        .columnsConfigurationComponent .menuButtons-container .menuButton.hoveredOnBottom {
            -webkit-box-shadow: 0 1px 0 0 #5774e7;
            -ms-box-shadow: 0 1px 0 0 #5774e7;
            box-shadow: 0 1px 0 0 #5774e7;
        }

/*Container with clone of the dragged column item*/
.columnDragHelperContainer {
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2);
    z-index: 103;
    cursor: move;
    pointer-events: none;
}

/*Contnainer placeholder to show on the place of dragged resource*/
.draggableColumnPlaceholderAreaContainer {
    position: absolute;
    z-index: 102;
    background-color: #f4f5fc;
    border: dashed 2px #abb8f8;
    cursor: move;
}


.columnsConfigurationComponentRreorderIconDragging {
    cursor: move !important;
}