.timesheetTreeNodeRow {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 28px;
}

    .timesheetTreeNodeRow.updateIsNotFinished {
        box-shadow: inset 0 1px 0 0 #EC4A43, inset 0 -1px 0 #EC4A43;
    }

    /* This emulates the background-color. For different items opacity of 0.1 or 0.03 can be used,
        so that color is the same, but opacity changes. */
    .timesheetTreeNodeRow .backgroundColor {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
    }

    .timesheetTreeNodeRow.group .backgroundColor:not(.isFrozenInTheTop),
    .timesheetTreeNodeRow.rootNode .backgroundColor:not(.isFrozenInTheTop) {
        opacity: 0.1 !important;
    }
    .timesheetTreeNodeRow.project .backgroundColor,
    .timesheetTreeNodeRow.summary .backgroundColor,
    .timesheetTreeNodeRow.task .backgroundColor,
    .timesheetTreeNodeRow.timesheetAssignment .backgroundColor {
        opacity: 0.03;
    }

    /* Show .backgroundColor on 1st line, 3rd etc. But, also make sure to always show .backgroundColor for groups */
    timesheet-tree-node-row:nth-child(even) .timesheetTreeNodeRow:not(.group):not(.rootNode) .backgroundColor {
        display: none;
    }

    .timesheetTreeNodeRow .highlightOverBackgroundColor {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #5774E7;
        opacity: 0.1;
        left: 0;
    }