.timesheetTreeNodeSpentHoursRowContainer {
    height: 28px;
}

.timesheetTreeNodeSpentHoursRow {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 28px;
}
    /*.timesheetTreeNodeSpentHoursRow:hover,*/
    .timesheetTreeNodeSpentHoursRow.highlighted{
        background: #EEF1FE
    }

    .timesheetTreeNodeSpentHoursRow.total {
        background: #F0F0F4;
    }

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

    .timesheetContainer-v2 .timesheetTreeNodeSpentHoursRow.updateIsNotFinished {
        border: 1px solid #EC4A43;
        box-shadow: none;
    }

    /* 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. */
    .timesheetTreeNodeSpentHoursRow .backgroundColor {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
    }

    .timesheetTreeNodeSpentHoursRow.group .backgroundColor:not(.isFrozenInTheTop),
    .timesheetTreeNodeSpentHoursRow.rootNode .backgroundColor:not(.isFrozenInTheTop) {
        opacity: 0.1 !important;
    }
    .timesheetTreeNodeSpentHoursRow.project .backgroundColor,
    .timesheetTreeNodeSpentHoursRow.summary .backgroundColor,
    .timesheetTreeNodeSpentHoursRow.task .backgroundColor,
    .timesheetTreeNodeSpentHoursRow.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-spent-hours-row:nth-child(even) .timesheetTreeNodeSpentHoursRow:not(.group):not(.rootNode) .backgroundColor {
        display: none;
    }

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