.stepsTableContainer {

}

    .stepsTableComponentWrapper .columnsSetting {
        top: 10px;
        left: 13px;
        z-index: 5;
        position: absolute;
        transition: 250ms;
        -webkit-transition: 250ms;
        -moz-transition: 250ms;
    }

            .stepsTableComponentWrapper .columnsSetting.allowSortByLineIndex.moveLeft {
                left: 9px;
            }

   .stepsTableComponentWrapper .headerRowContainer {
        position: absolute;
        top: -1px;
        z-index: 4;
        /*overflow: hidden;*/
    }

    .stepsTableComponentWrapper .headerRow {
        height: 41px;
        min-height: 41px;
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        flex-grow: 0;
    }

            .stepsTableComponentWrapper .headerRow .modeName {
                font-family: GlowSemiBold;
                font-size: 14px;
                color: #4a4a4a;
                position: absolute;
                top: 7px;
                z-index: 100;
                width: 195px;
            }

                .stepsTableComponentWrapper .headerRow .modeName .defaultPlanLabel {
                    margin-left: 10px;
                    margin-top: 4px;
                }

                .stepsTableComponentWrapper .headerRow .modeName .ui-input-bordered {
                    border: none;
                    font-family: GlowSemiBold;
                    cursor: pointer;
                }

                    .stepsTableComponentWrapper .headerRow .headerCell.isPrintingMode .modeName .ui-input-bordered {
                        /*PDF*/
                        color: transparent !important;
                        text-shadow: 0 0 #4a4a4a!important;
                    }
                    .stepsTableComponentWrapper .headerRow .modeName .ui-input-bordered.disabled {
                        cursor: default;
                    }

                .stepsTableComponentWrapper .headerRow .modeName .arrowIcon-container {
                    padding-top: 8px;
                }

                .stepsTableComponentWrapper .headerRow .modeName .customDropdown .arrowIcon-container .arrowIcon {
                    width: 14px;
                    height: 14px;
                    background: url("../../../../images/shared/expandCollapse_node_arrowDown.png");
                }

                .stepsTableComponentWrapper .headerRow .modeName .customDropdown .arrowIcon-container.opened .arrowIcon {
                    background: url("../../../../images/shared/expandCollapse_node_arrowUp.png");
                }

                .stepsTableComponentWrapper .headerRow .modeName .customDropdown .dropdown-content {
                    width: 250px !important;
                }

        .stepsTableComponentWrapper .headerRow .headerCell {
            position: relative;
            height: 41px;
            display: flex;
            flex-direction: row;
            cursor: pointer;
            box-shadow: inset 0 1px 0 0 #dcdcdc,
                /*inset -1px 0 0 #dcdcdc,*/
                inset 0 -1px 0 #dcdcdc;
                /*inset 1px 0 0 #dcdcdc;*/
        }

            .stepsTableComponentWrapper .headerRow .headerCell.nonReorderable {
                cursor: default;
            }

            .stepsTableComponentWrapper .headerRow .headerCell:last-child {
                box-shadow: inset 0 1px 0 0 #dcdcdc,
                    /*inset -1px 0 0 #dcdcdc,*/
                    inset 0 -1px 0 #dcdcdc;
                    /*inset 1px 0 0 #dcdcdc;*/
            }

            .stepsTableComponentWrapper .headerRow .headerCell:last-child:hover .rightLineContainer {
                right: -3px;
            }

            .stepsTableComponentWrapper .headerRow .headerCell .headerAndArrowContainer {
                flex: 1 1 auto;
                align-self: center;

                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                overflow: hidden;

                height: 100%;
                align-items: center;
            }

            .stepsTableComponentWrapper .headerRow .headerCell.numeric .headerAndArrowContainer {
                justify-content: flex-end;
            }

            .stepsTableComponentWrapper .headerRow .headerCell .headerAndArrowContainer .headerText {
                font-size: 13px;
                font-family: GlowSemiBold;
                color: #808080;
                -webkit-touch-callout: none; /* iOS Safari */
                -webkit-user-select: none; /* Safari */
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-left: 4px;
                padding-right: 4px;
                /*Hack for Safari. Since safari override default behaviour and adds a tooltip in case there are any text overflow*/
                pointer-events: none;
            }

                .stepsTableComponentWrapper .headerRow .headerCell .headerAndArrowContainer .headerText.isPrintingMode {
                    /*PDF */
                    color: transparent !important;
                    text-shadow: 0 0 #808080 !important;
                }

                .stepsTableComponentWrapper .headerRow .headerCell#manualLineIndex.allowSortByLineIndex .headerAndArrowContainer .headerText {
                    padding-right: 20px;
                }

        .stepsTableComponentWrapper .headerRow .headerCell.orderingColumn {
            background: linear-gradient(180deg, rgba(87, 116, 231, 0) 0%, rgba(87, 116, 231, 0.04));
        }

            .stepsTableComponentWrapper .headerRow .headerCell.orderingColumn .headerAndArrowContainer .headerText {
                color: #5774E7
            }

                .stepsTableComponentWrapper .headerRow .headerCell.orderingColumn .headerAndArrowContainer .headerText.isPrintingMode {
                    /*PDF*/
                    color: transparent !important;
                    text-shadow: 0 0 #5774E7!important;
                }

            .stepsTableComponentWrapper .headerRow .headerCell .headerAndArrowContainer .orderingArrow {
                flex: 0 0 6px;
                height: 9px;
                display: none;
                margin-right: 4px;
                margin-left: 4px;
                margin-top: 1px;
            }

                .stepsTableComponentWrapper .columnsSetting.allowSortByLineIndex.moveLeft:hover + .headerRowContainer .headerRow .headerCell#manualLineIndex.allowSortByLineIndex .headerAndArrowContainer .orderingArrow,
                .stepsTableComponentWrapper .headerRow .headerCell#manualLineIndex.allowSortByLineIndex:hover .headerAndArrowContainer .orderingArrow {
                    display: block;
                    cursor: pointer;
                }

                    .stepsTableComponentWrapper .columnsSetting.allowSortByLineIndex.moveLeft:hover + .headerRowContainer .headerRow .headerCell#manualLineIndex.allowSortByLineIndex .headerAndArrowContainer,
                    .stepsTableComponentWrapper .headerRow .headerCell#manualLineIndex.allowSortByLineIndex:hover .headerAndArrowContainer {
                        cursor: pointer;
                    }

            /* Ordering(sorting) Arrows in header column(without hover) */
            .stepsTableComponentWrapper .headerRow .headerCell.sortedAscending .headerAndArrowContainer .orderingArrow {
                display: block;
            }

            .stepsTableComponentWrapper .headerRow .headerCell.sortedDescending .headerAndArrowContainer .orderingArrow {
                display: block;
                transform: rotate(180deg);
            }


            /* Ordering(sorting) Arrows in header column(on hover) */
            .stepsTableComponentWrapper .headerRow .headerCell:not(.nonReorderable):not(.sortedDescending):not(.sortedAscending):hover .headerAndArrowContainer .orderingArrow {
                display: block;
                transform: rotate(180deg);
            }

                .stepsTableComponentWrapper .headerRow .headerCell.sortedAscending .headerAndArrowContainer .headerText,
                .stepsTableComponentWrapper .headerRow .headerCell.sortedDescending .headerAndArrowContainer .headerText,
                .stepsTableComponentWrapper .headerRow .headerCell:not(.nonReorderable):hover.sortedDescending .headerAndArrowContainer .headerText,
                .stepsTableComponentWrapper .headerRow .headerCell:not(.nonReorderable):not(.sortedDescending):not(.sortedAscending):hover .headerAndArrowContainer .headerText {
                    padding-right: 0;
                }

            .stepsTableComponentWrapper .headerRow .headerCell:not(.nonReorderable):hover.sortedAscending .headerAndArrowContainer .orderingArrow {
            }

            .stepsTableComponentWrapper .headerRow .headerCell:not(.nonReorderable):hover.sortedDescending .headerAndArrowContainer .orderingArrow {
                transform: rotate(180deg);
            }

            .stepsTableComponentWrapper .fakeDraggableLine {
                width: 1px;
                height: 100%;
                position: absolute;
                cursor: ew-resize;
                background: #5774E7;
                z-index: 5;
                margin-left: 4px;
            }

            .stepsTableComponentWrapper .headerRow .headerCell .rightLineContainer {
                width: 9px;
                height: 41px;
                position: absolute;
                right: -4px;
                padding-left: 4px;
                display: flex;
            }

            .stepsTableComponentWrapper .headerRow .headerCell.resizable .rightLineContainer {
                cursor: ew-resize;
            }

            .stepsTableComponentWrapper .headerRow .headerCell .rightLine {
                flex: 0 0 auto;
                width: 1px;
                height: 26px;
                -webkit-box-shadow: -0.2em -3.2em 1.3em -1.9em #DCDCDC inset;
                -moz-box-shadow:  -0.2em -3.2em 1.3em -1.9em #DCDCDC inset;
                box-shadow: -0.2em -3.2em 1.3em -1.9em #DCDCDC inset;
                align-self: flex-end;
                margin-bottom: 1px;
            }

                .stepsTableComponentWrapper .headerRow .headerCell .rightLine.isPrintingMode {
                    -webkit-box-shadow: -0.2em -3.2em 1.3em -1.9em #DCDCDC inset !important;
                    -moz-box-shadow:  -0.2em -3.2em 1.3em -1.9em #DCDCDC inset !important;
                    box-shadow:-0.2em -3.2em 1.3em -1.9em #DCDCDC inset !important;
                    /*0em -2.1em 1em -0.9em #DCDCDC inset*/
                    /*-0.2em -3.2em 1.3em -1.9em #DCDCDC inset*/
                }

                .stepsTableComponentWrapper .headerRow .headerCell.resizable .rightLineContainer:hover .rightLine {
                    -webkit-box-shadow: -0.2em -3.2em 1.3em -1.9em #5774E7 inset;
                    -moz-box-shadow: -0.2em -3.2em 1.3em -1.9em #5774E7 inset;
                    box-shadow: -0.2em -3.2em 1.3em -1.9em #5774E7 inset;
                }

            .stepsTableComponentWrapper .headerRow .headerCell.noRightLine .rightLineContainer {
                visibility: hidden;
            }


/*Container with clone of the dragged items*/
.rowsDragHelperContainer {
    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;
}

    .rowsDragHelperContainer.collapsedRows {
        background-color: transparent;
        box-shadow: none;
    }

    .rowsDragHelperContainer .rowContainer {
        display: flex;
        height: 28px;
        padding-left: 15px;
        padding-right: 15px;
    }

        .rowsDragHelperContainer .stepsTableCellName .cell .expandCollapseArrow,
        .rowsDragHelperContainer .stepsTableCellName .cell .iconsContainer {
            display: none;
        }

    .rowsDragHelperContainer .itemsCountContainer {
        background-color: #ffffff;
        position: absolute;
        left: -4px;
        top: -4px;
        width: 100%;
        height: 28px;
        box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2);
        padding-left: 15px;
        padding-top: 5px;
    }

    .rowsDragHelperContainer .itemsCountContainer span {
        font-family: GlowRegular;
        font-size: 14px;
        color: #4a4a4a;
    }

    .rowsDragHelperContainer .shadowContainer {
        background-color: #ffffff;
        height: 28px;
        box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2);
    }

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

.stepsTableCellContainerDragging {
    cursor: move;
}