.timesheetTreeNodeCellName {
    height: 100%;
    padding-top: 4px;
    font-size: 14px;
    color: #4a4a4a;
}


    .timesheetTreeNodeCellName .highlightSubstringOfTextSearch {
        color: #5774e7;
    }

    .timesheetTreeNodeCellName.rootNode {
        padding-top: 0;
    }

    .timesheetTreeNodeCellName .cellContainer {
    }

        .timesheetTreeNodeCellName .cellContainer .cell {
        }

        .timesheetTreeNodeCellName .cellContainer .cell .selectableForOpeningCard:hover {
            color: #5774e7;
            cursor: pointer !important;
        }

        /*#region Group */
        .timesheetTreeNodeCellName .cellContainer .cell.rootNode {
            display: flex;
            flex-direction: row;
            /*margin-left: 36px;*/
        }

        .timesheetTreeNodeCellName .cellContainer .cell.rootNode .rootNodeName {
            display: flex;
            margin-left: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: GlowSemibold;
        }

        .timesheetTreeNodeCellName .cellContainer .cell.rootNode .rootNodeName .loader {
            width: 36px;
        }

        .timesheetTreeNodeCellName .cellContainer .cell.rootNode .rootNodeName .name {
            padding-top: 4px;
        }
        /*#endregion */

        /*#region Group */
        .timesheetTreeNodeCellName .cellContainer .cell.group {
            display: flex;
            flex-direction: row;
            position: relative;
        }

            .timesheetTreeNodeCellName .cellContainer .cell.group .loaderForGroupIcon {
                position: absolute;
                -webkit-transform-origin: 50% 50%;
                -moz-transform-origin: 50% 50%;
                -o-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                -webkit-animation: rotate 1s linear infinite;
                -moz-animation: rotate 1s linear infinite;
                animation: rotate 1s linear infinite;
                top: -3px;
                left: -3px;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.group div.expandCollapseArrow {
                background: url("../../../../../images/shared/expandCollapse_node_arrowDown.png");
                -moz-background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 14px;
                margin-top: 3px;
                padding: 7px;
                position: absolute;
                cursor: pointer;
                transition: 0.30s;
                -webkit-transition: 0.30s;
                -moz-transition: 0.30s;
                -ms-transition: 0.30s;
                -o-transition: 0.30s;
                z-index: 5;
            }
            /* If node is expanded, rotate arrow 180 degrees, so it points to the top */
            .timesheetTreeNodeCellName .cellContainer .cell.group div.expandCollapseArrow.expanded {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .timesheetTreeNodeCellName:hover .cellContainer .cell.group div.expandCollapseArrow {
                background-image: url("../../../../../images/shared/expandCollapse_node_arrowDown_hover.png");
            }

            .timesheetTreeNodeCellName .cellContainer .cell.group .groupColoredCircle {
                flex: 0 0 6px;
                height: 6px;
                /* Margin-left from ".group" container, not from arrow(which is absolute). */
                margin-left: 21px;
                margin-top: 7px;
                border-radius: 50%;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.group .groupNameAndSign {
                display: flex;
                align-items: center;
                overflow: hidden;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.group .groupNameAndSign .groupName {
                margin-left: 6px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 5px;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.group .groupNameAndSign .groupSign {
                display: flex;
                align-items: center;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.group .groupNameAndSign .materialIcon,
            .timesheetTreeNodeCellName .cellContainer .cell.group .groupNameAndSign .superGroupIcon,
            .timesheetTreeNodeCellName .cellContainer .cell.group .groupNameAndSign .ucltGroup {
                padding: 0 1px;
            }
            /*#endregion */

        /*#region Project */
        .timesheetTreeNodeCellName .cellContainer .cell.project {
            display: flex;
            flex-direction: row;
        }

            .timesheetTreeNodeCellName .cellContainer .cell.project div.expandCollapseArrow {
                background: url("../../../../../images/shared/expandCollapse_node_arrowDown.png");
                -moz-background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 14px;
                margin-top: 3px;
                padding: 7px;
                position: absolute;
                cursor: pointer;
                transition: 0.30s;
                -webkit-transition: 0.30s;
                -moz-transition: 0.30s;
                -ms-transition: 0.30s;
                -o-transition: 0.30s;
                z-index: 5;
            }
            /* If node is expanded, rotate arrow 180 degrees, so it points to the top */
            .timesheetTreeNodeCellName .cellContainer .cell.project div.expandCollapseArrow.expanded {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .timesheetTreeNodeCellName:hover .cellContainer .cell.project div.expandCollapseArrow {
                background-image: url("../../../../../images/shared/expandCollapse_node_arrowDown_hover.png");
                cursor: pointer !important;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.project .projectName {
                margin-left: 17px;
                font-family: GlowSemiBold;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /*#endregion */

        /*#region Summary */
        .timesheetTreeNodeCellName .cellContainer .cell.summary {
            display: flex;
            flex-direction: row;
        }

            .timesheetTreeNodeCellName .cellContainer .cell.summary div.expandCollapseArrow {
                background: url("../../../../../images/shared/expandCollapse_node_arrowDown.png");
                -moz-background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 14px;
                margin-top: 3px;
                padding: 7px;
                position: absolute;
                cursor: pointer;
                transition: 0.30s;
                -webkit-transition: 0.30s;
                -moz-transition: 0.30s;
                -ms-transition: 0.30s;
                -o-transition: 0.30s;
                z-index: 5;
            }
            /* If node is expanded, rotate arrow 180 degrees, so it points to the top */
            .timesheetTreeNodeCellName .cellContainer .cell.summary div.expandCollapseArrow.expanded {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .timesheetTreeNodeCellName:hover .cellContainer .cell.summary div.expandCollapseArrow {
                background-image: url("../../../../../images/shared/expandCollapse_node_arrowDown_hover.png");
                cursor: pointer !important;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.summary .summaryName {
                margin-left: 17px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /*#endregion */


        /*#region Task */
        .timesheetTreeNodeCellName .cellContainer .cell.task {
            display: flex;
            flex-direction: row;
        }

            .timesheetTreeNodeCellName .cellContainer .cell.task div.expandCollapseArrow {
                background: url("../../../../../images/shared/expandCollapse_node_arrowDown.png");
                -moz-background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                height: 14px;
                margin-top: 3px;
                padding: 7px;
                position: absolute;
                cursor: pointer;
                transition: 0.30s;
                -webkit-transition: 0.30s;
                -moz-transition: 0.30s;
                -ms-transition: 0.30s;
                -o-transition: 0.30s;
                z-index: 5;
            }
            /* If node is expanded, rotate arrow 180 degrees, so it points to the top */
            .timesheetTreeNodeCellName .cellContainer .cell.task div.expandCollapseArrow.expanded {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .timesheetTreeNodeCellName:hover .cellContainer .cell.task div.expandCollapseArrow {
                background-image: url("../../../../../images/shared/expandCollapse_node_arrowDown_hover.png");
                cursor: pointer !important;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .assignmentNameContainer,
            .timesheetTreeNodeCellName .cellContainer .cell.task .taskNameContainer {
                display: flex;
                align-items: center;
                padding-left: 17px;
                overflow: hidden;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .assignmentNameContainer  .iconContainer,
            .timesheetTreeNodeCellName .cellContainer .cell.task .taskNameContainer .iconContainer {
                height: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin-right: 6px;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .assignmentNameContainer .iconContainer .autoDepletionIcon,
             .timesheetTreeNodeCellName .cellContainer .cell.task .taskNameContainer .iconContainer .autoDepletionIcon {
                 background-image: url("../../../../../images/resourceManagement/ucltIcon12x12.png");
                 width: 12px;
                 height: 12px;
             }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .assignmentNameContainer .iconContainer .errorIcon,
            .timesheetTreeNodeCellName .cellContainer .cell.task .taskNameContainer .iconContainer .errorIcon {
                background-image: url("../../../../../images/shared/error.png");
                width: 15px;
                height: 15px;
                margin: 1px 0 1px 1px;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.task .taskNameContainer .taskName {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: default;
                padding-right: 10px;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.task .taskNameContainer .completeBtn {
                cursor: pointer;
                margin-left: 5px;
            }
            /*#endregion */


        /*#region Summary */
        .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment {
            display: flex;
            flex-direction: row;
        }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .assignmentNameContainer .timesheetAssignmentName {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: default;
            }

                .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .assignmentNameContainer .timesheetAssignmentName.withoutLeftMargin,
                .timesheetTreeNodeCellName .cellContainer .cell.task .taskNameContainer .taskName.withoutLeftMargin {
                    margin-left: 0;
                }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .infoIcon,
            .timesheetTreeNodeCellName .cellContainer .cell.task .infoIcon {
                margin-right: 6px;
                cursor: pointer;
                padding-top: 3px;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .infoIcon img,
            .timesheetTreeNodeCellName .cellContainer .cell.task .infoIcon img {
                vertical-align: top;
                margin-top: 1px;
            }

            .timesheetTreeNodeCellName .cellContainer .cell.timesheetAssignment .assignmentNameContainer .completeBtn {
                cursor: pointer;
                margin-left: 5px;
            }
/*#endregion */