.timesheetContainer {
    width: 100%;
    height: 100%;
    padding-top: 20px;
}
.timesheetContainer .stepCard-wrapper {
    display: flex;
}


    /* Container for Timesheet tabs and datepicker + navigation arrows at the top right */
    .timesheetContainer .mainContainer {
        position: relative;
        height: 100%;
    }

        /*#region Tabs*/
        .timesheetContainer .mainContainer .timesheetTabsContainer {
            /*position: absolute;*/
            display: flex;
            /*flex-direction: row;*/
            /* Tabs tongues should overlap content, so that tabs tongues bottom borders are above content */
            z-index: 2;
        }

            .timesheetContainer .mainContainer .timesheetTabsContainer .timesheetTab {
                background-color: #F5F5F5;
                padding: 10px 20px;
                border: 1px solid #dcdcdc;
                /* Border-radius only at the top */
                border-radius: 4px;
                border-bottom-right-radius: unset;
                border-bottom-left-radius: unset;

                font-size: 13px;
                font-family: GlowSemiBold;
                color: #4e4e4e;
                cursor: pointer;
                height: 40px;
            }
            .timesheetContainer .mainContainer .timesheetTabsContainer .timesheetTab:not(:first-child) {
                /* Overlap tabs borders, so that border takes only 1px */
                margin-left: -1px;
            }
            .timesheetContainer .mainContainer .timesheetTabsContainer .timesheetTab.active {
                background-color: white;
                border-bottom: none;
                color: #5a67fe;
                cursor: default;
            }
        /*#endregion */

        /*#region Filters and navigation*/
        .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer {
            display: flex;
            justify-content: space-between;
            height: 40px;
            width: 100%;
        }

            .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .filteringContainer {
                display: flex;
                margin-left: 10px;
            }

            .timesheetContainer .mainContainer .navigationAndSettingsContainer {
                display: flex;
                position: fixed;
                right: 20px;
                top: 20px;
                z-index: 10;
            }

            .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .datepicker {
                width: 130px;
                margin-left: 10px;
                height: 28px;
                border-radius: 4px;
                border: solid 1px #dcdcdc;
                outline: none;
                font-family: GlowRegular;
                font-size: 13px;
                color: #4a4a4a;
                background: #ffffff url(../../../../images/shared/small-calendar.svg) no-repeat right 10px center;
                padding: 0 20px 0 10px;
                cursor: pointer;
            }

            .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .exportButtonContainer {
                width: 40px;
            }

            .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .modes {
                height: 28px;
                display: flex;
                -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 */
            }

                .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .modes .mode {
                    background: #FFFFFF;
                    border: 1px solid #DCDCDC;
                    border-radius: 4px 0px 0px 4px;
                    width: 74px;
                    font-family: GlowSemibold;
                    font-size: 13px;
                    line-height: 15px;
                    color: #4A4A4A;
                    padding-top: 6px;
                    /*text-align: center;*/
                    padding-left: 13px;
                    cursor: pointer;
                }

                .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .modes .mode.second {
                    border-radius: 0px 4px 4px 0px;
                    margin-left: 0px;
                    border-left: none;
                }

                .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .modes .mode.second.active {
                    margin-left: -1px;
                    padding-left: 12px;
                }

                .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .modes .mode.active {
                    border: 1px solid #ABB8F8;
                    color: #5774E7;
                    padding-left: 14px;
                }

            .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .navigationArrowsContainer {
                height: 28px;
                margin-left: 10px;
                -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 */
            }

                .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .navigationArrowsContainer .arrowButton {
                    width: 28px;
                    height: 28px;
                    border-radius: 4px;
                    border: solid 1px #abb8f8;
                    background-color: #ffffff;
                    display: inline-block;
                    padding-top: 2px;
                    text-align: center;
                    cursor: pointer;
                    -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 */
                }

                    .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .navigationArrowsContainer .arrowButton.rightButton {
                        margin-left: 2px;
                    }

                    .timesheetContainer .mainContainer .timesheetFiltersAndNavigationContainer .navigationArrowsContainer .arrowButton.disabled {
                        opacity: 0.4;
                        cursor: default;
                        pointer-events: none;
                    }
        /*#endregion */
        /*region Today button*/
        .timesheetContainer .mainContainer #todayWrapper {
            position: absolute;
            z-index: 1000;
            width: 50px;
            right: -21px;
            top: 34px;
            cursor: pointer;
        }

        .timesheetContainer .mainContainer #todayWrapper #today {
            pointer-events: none;
            overflow: visible;
            position: absolute;
            top: 0px;
        }

        .timesheetContainer .mainContainer #todayWrapper #today .focus {
            pointer-events: all;
        }

        .timesheetContainer .mainContainer #todayWrapper #today #todayTextContainer rect,
        .timesheetContainer .mainContainer #todayWrapper #today #todayTextContainer circle.borderRadius {
            fill: #5774e7;
        }

        .timesheetContainer .mainContainer #todayWrapper #today #todayTextContainer .todayText {
            fill: #ffffff;
            font-family: GlowSemiBold;
            font-size: 9px;
        }

        .timesheetContainer .mainContainer #todayWrapper #today .goBack,
        .timesheetContainer .mainContainer #todayWrapper #today .goForward {
            cursor: pointer;
            pointer-events: all;
        }
        /*endregion*/
        /*#region Tab Content */
        .timesheetContainer .mainContainer .tabContentContainer {
            position: relative;
            width: 100%;
            /* Minus tabs height(which are "position: absolute" at the top) */
            height: calc(100% - 39px);
            top: -1px;
            background-color: white;
            /* Top, right, bottom, left borders */
            box-shadow: inset 0 1px 0 0 #dcdcdc,
                inset -1px 0 0 #dcdcdc,
                inset 0 -1px 0 #dcdcdc,
                inset 1px 0 0 #dcdcdc;
        }

            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable {
                position: relative;
                height: 100%;
                display: flex;
                flex-direction: row;
            }

                /*#region Left Table (Status/Rem/Spent/Total total values) */
                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues {
                    height: 100%;
                    flex: 0 0 auto;
                    display: flex;
                    flex-direction: column;
                    border-left: 1px solid #dcdcdc;
                }

                .timesheetContainer .mainContainer .tabContentContainer .taskStatusComponent .menuButtons-container {
                    margin-top: 0;
                }

                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .leftTableTotalValuesScrollable {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        position: relative;
                    }

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

                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow {
                        height: 41px;
                        min-height: 41px;
                        background-color: white;
                        display: flex;
                        flex-direction: row;
                        flex-shrink: 0;
                        flex-grow: 0;
                        overflow-x: hidden;
                    }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownSettingsAndAvatarContainer {
                            position: absolute;
                            top: 7px;
                            width: 226px;
                            display: flex;
                            padding-left: 10px;
                            /* Dropdown should be above header cell, so it's possible to click on its whole area. And above regular body cells */
                            z-index: 100;
                        }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownSettingsAndAvatarContainer .usersDropdownAndSettingsContainer {
                                flex: 0 0 24px;
                                padding-top: 1px;
                                display: flex;
                                position: relative;
                                align-items: center;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownSettingsAndAvatarContainer .columnsConfigurationComponent {
                                margin-right: 10px;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownSettingsAndAvatarContainer .leftLine {
                                position: absolute;
                                bottom: -6px;
                                left: 25px;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownAndSettingsContainer  .avatar {
                                margin-left: 10px;
                            }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownAndSettingsContainer  .avatar,
                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownAndSettingsContainer  .avatar-picture {
                                    margin-left: 10px;
                                    width: 24px;
                                    height: 24px;
                                    border-radius: 100%;
                                    text-align: center;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownAndSettingsContainer  .avatar-picture {
                                    margin-left: 10px;
                                    background-position: center;
                                    /* Make the background image cover the area of the <div>, and clip the excess */
                                    background-size: cover;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownAndSettingsContainer .initials {
                                    height: 100%;
                                    width: 100%;
                                    text-align: center;
                                    padding-top: 3px;
                                    font-family: GlowSemibold;
                                    font-size: 13px;
                                    color: #ffffff;
                                    text-transform: uppercase;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownAndSettingsContainer .initials.longInitials {
                                    font-size: 11px;
                                    padding-top: 4px;
                                }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdown {
                                flex: 1 1 auto;
                                margin-top: -1px;
                            }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdown input {
                                    border: none;
                                }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell {
                            position: relative;
                            height: 41px;
                            flex-grow: 0;
                            flex-shrink: 0;
                            display: flex;
                            flex-direction: row;
                            cursor: default;

                            box-shadow: inset 0 1px 0 0 #dcdcdc,
                                /*inset -1px 0 0 #dcdcdc,*/
                                inset 0 -1px 0 #dcdcdc;
                                /*inset 1px 0 0 #dcdcdc;*/
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:nth-child(2) {
                            box-shadow: inset 0 1px 0 0 #dcdcdc,
                                /*inset -1px 0 0 #dcdcdc,*/
                                inset 0 -1px 0 #dcdcdc;
                                /*inset 1px 0 0 #dcdcdc;*/
                        }
                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .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;*/
                        }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell .headerAndArrowContainer {
                                flex: 1 1 auto;
                                align-self: center;

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

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.nonReorderable .headerAndArrowContainer {
                                    cursor: default;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.numeric .headerAndArrowContainer {
                                    justify-content: flex-end;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .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: 10px;
                                    padding-right: 4px;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.nonReorderable .headerAndArrowContainer .headerText {
                                    padding-right: 10px;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell .headerAndArrowContainer .orderingArrow {
                                    flex: 0 0 6px;
                                    height: 9px;
                                    visibility: hidden;
                                    margin-right: 10px;
                                    margin-top: 5px;
                                }
                                /* Ordering(sorting) Arrows in header column(without hover) */
                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.sortedAscending .headerAndArrowContainer .orderingArrow {
                                    visibility: visible;
                                    background: url('/images/shared/columnOrderingArrowUpGray.png') no-repeat;
                                }
                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.sortedDescending .headerAndArrowContainer .orderingArrow {
                                    visibility: visible;
                                    background: url('/images/shared/columnOrderingArrowUpGray.png') no-repeat;
                                    transform: rotate(180deg);
                                }
                                /* Ordering(sorting) Arrows in header column(on hover) */
                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:hover .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                                    visibility: visible;
                                    background: url('/images/shared/columnOrderingArrowUpGray.png') no-repeat;
                                }
                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:hover.sortedAscending .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                                    background: url('/images/shared/columnOrderingArrowUpBlue.png') no-repeat;
                                }
                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:hover.sortedDescending .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                                    background: url('/images/shared/columnOrderingArrowUpBlue.png') no-repeat;
                                    transform: rotate(180deg);
                                }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell .rightLineContainer {
                            width: 9px;
                            height: 41px;
                            position: absolute;
                            right: -4px;
                            padding-left: 4px;
                            display: flex;
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.resizable .rightLineContainer {
                            cursor: ew-resize;
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:last-child:hover .rightLineContainer {
                            right: -3px;
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell .rightLine {
                            flex: 0 0 auto;
                            width: 1px;
                            height: 26px;
                            background-image: linear-gradient(to top, #dcdcdc, #ffffff);
                            align-self: flex-end;
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.resizable .rightLineContainer:hover .rightLine {
                            background-image: linear-gradient(to top, #5774E7, #ffffff);
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.noRightLine .rightLineContainer {
                            visibility: hidden;
                        }

                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .frozenRows {
                        position: absolute;
                        top: 41px;
                        z-index: 4;
                    }

                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .viewport {
                        flex: 1 1 auto;
                        overflow-y: hidden;
                        overflow-x: hidden;
                    }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .viewport .scrollableContainer {
                        }


                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .availabilityLabelContainer {
                        position: relative;
                        height: 30px;
                        min-height: 30px;
                        flex: 0 0 auto;

                        display: flex;
                        flex-direction: row;
                        justify-content: flex-end;
                        padding-right: 12px;
                        align-items: center;

                        background-color: #f5f5f5;

                        box-shadow: inset 0 1px 0 0 #dcdcdc,
                                /*inset -1px 0 0 #dcdcdc,*/
                                inset 0 -1px 0 #dcdcdc;
                                /*inset 1px 0 0 #dcdcdc;*/
                    }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .availabilityLabel {
                            font-family: GlowRegular;
                            font-size: 14px;
                            color: #4a4a4a;
                        }
                        /*#endregion */

                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightLineForHeader {
                    width: 1px;
                    height: 41px;
                    background: #dcdcdc;
                    position: absolute;
                    z-index: 4;
                }

                /*region Splitter*/
                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .timesheetSplitter {
                    position: absolute;
                    height: calc(100% - 41px);
                    z-index: 4;
                    width: 9px;
                    background-color: transparent;
                    cursor: ew-resize;
                    padding-left: 4px;
                    top: 41px;
                }

                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .timesheetSplitter .line {
                        height: 100%;
                        width: 1px;
                        background: #ececec;
                    }

                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .timesheetSplitter:hover .line {
                        background: #5774e7;
                    }
                /*endregion*/

                /*#region Right table - Spent by day */
                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay {
                    flex: 1 1 auto;
                    overflow-x: hidden;
                    overflow-y: hidden;

                    /* This is needed, so that there is a border even though some month name overlaps the right side(with it's background-color */
                    border-right: 1px solid #dcdcdc;

                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    position: relative;
                }

                    /*#region Conainer for 2 Header rows: Months, Days & Total */
                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer {
                        height: 41px;
                        min-height: 41px;

                        display: flex;
                        flex-direction: column;
                        flex: 0 0 auto;
                        cursor: ew-resize;
                    }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .monthsHeaderRow {
                            height: 20px;
                            min-height: 20px;

                            display: flex;
                            flex-direction: row;
                        }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .monthsHeaderRow .monthCellContainer {
                                flex: 0 0 auto;
                                background-color: white;
                                /* TODO: Month name should be in the center of visible space, could be done via angular */
                                text-align: center;
                                position: relative;
                                box-shadow: inset 0 1px 0 0 #dcdcdc,
                                    /*inset -1px 0 0 #dcdcdc;*/
                                    /*inset 0 -1px 0 #dcdcdc;*/
                                    inset 1px 0 0 #dcdcdc;
                            }
                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .monthsHeaderRow .monthCellContainer: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;
                            }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .monthsHeaderRow .monthCellContainer .weekNumberCell {
                                    color: #b6b6b6;
                                    font-family: GlowRegular;
                                    font-size: 12px;
                                    position: absolute;
                                    padding-left: 20px;
                                    padding-top: 2px;
                                }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .monthsHeaderRow .monthCellContainer .monthCell {
                                    color: #b6b6b6;
                                    font-family: GlowRegular;
                                    font-size: 12px;

                                    padding-top: 2px;
                                }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow {
                            height: 21px;
                            min-height: 21px;

                            display: flex;
                            flex-direction: row;
                        }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer {
                                flex: 0 0 auto;
                                background-color: white;
                                color: #808080;
                                text-align: center;
                                height: 100%;
                                font-family: GlowRegular;
                                font-size: 12px;

                                box-shadow: inset 0 1px 0 0 #dcdcdc,
                                    /*inset -1px 0 0 #dcdcdc;*/
                                    inset 0 -1px 0 #dcdcdc,
                                    inset 1px 0 0 #dcdcdc;
                            }
                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer: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;
                            }
                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer.isAvailabilityZero {
                                background-color: #F8F8F8;
                                color: #b6b6b6;
                            }
                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer.isTotal {
                                font-family: GlowSemiBold;
                                background-color: #F8F8F8;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer.isToday {
                                background-color: #5774e7;
                                color: #FFFFFF;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer:not(.isToday).isHovered {
                                background-color: #f4f5fc;
                                color: #5774e7;
                                font-family: GlowSemiBold;
                                box-shadow: inset 0 1px 0 0 #5774e7,
                                inset -1px 0 0 #5774e7,
                                inset 0 -1px 0 #5774e7,
                                inset 1px 0 0 #5774e7;
                            }

                                .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer .dayInMonthCell {
                                    padding-top: 2px;
                                }
                                /*#endregion */


                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .frozenRowsContainer {
                        position: absolute;
                        top: 41px;
                        z-index: 3;
                    }

                    /*#region Spent Hours container: scrollable vertically and horizontally(horiz. only via code) */
                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .spentRowsViewport {
                        flex: 1 1 0px;
                        width: 100%;

                        /*!* This container is Y-scrollable *!*/
                        /*overflow-y: auto;*/
                        /*!* This container is scrolled horizontally(via margin-left), when header rows are dragged *!*/
                        overflow-x: hidden;

                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;

                        min-height: 0;
                    }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .spentRowsContainer {
                            /*flex: 1 1 0px;*/
                            /*display: flex;*/
                            /*flex-direction: column;*/
                            /*align-items: flex-start;*/
                        }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .spentRowsViewport .ps__rail-x {
                                display: none;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .spentRowsViewport .ps__rail-y {
                                z-index: 5;
                            }
                    /*endregion */


                    /*#region Availability Row */
                    .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow {
                        height: 30px;
                        min-height: 30px;

                        flex: 0 0 auto;

                        display: flex;
                        flex-direction: row;
                    }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer {
                            flex: 0 0 auto;
                            background-color: #F5F5F5;
                            text-align: center;
                            height: 100%;
                            color: #808080;
                            font-family: GlowRegular;
                            font-size: 12px;

                            box-shadow: inset 0 1px 0 0 #dcdcdc,
                                /*inset -1px 0 0 #dcdcdc;*/
                                inset 0 -1px 0 #dcdcdc;
                                /*inset 1px 0 0 #dcdcdc;*/
                        }
                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer: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;*/
                        }
                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer.isTotal {
                            font-family: GlowSemiBold;
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer.editable {
                            cursor: pointer;
                        }

                        .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer.isHovered {
                            background-color: #dcdcdc;
                        }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer .availabilityCell {
                                padding-top: 7px;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer .availabilityInput {
                                width: 100%;
                                padding-left: 2px;
                                padding-right: 2px;
                                text-align: right;
                                height: 30px;
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer .availabilityInput::-webkit-outer-spin-button,
                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer .availabilityInput::-webkit-inner-spin-button {
                                /* display: none; <- Crashes Chrome on hover */
                                -webkit-appearance: none;
                                margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
                            }

                            .timesheetContainer .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer .availabilityInput[type=number] {
                                -moz-appearance: textfield; /* Firefox */
                            }
                            /*#endregion */
                /*#endregion */


        /*#endregion */

    /* Container for status changing*/
    .timesheetContainer .taskStatusComponent {
        position: absolute;
        z-index: 1000;
    }

    .timesheet_container {
        height: 100%;
        margin-left: 90px;
        /* margin-right: 20px; */
        position: relative;
        display: flex;
    }

        /*While changing task card do not allow to click on elements*/
        .timesheet_container.withoutPointerEvents .timesheetContainer {
            pointer-events: none;
        }

        .timesheet_container .timesheet {
            position: relative;
            height: 100%;
            flex: 1 1 auto;
            min-width: 565px;
            /*overflow: hidden;*/
        }

        .timesheet_container .taskCard,
        .timesheet_container .summaryCard,
        .timesheet_container .milestoneCard {
            /* TaskCard should never be less than 445px(two columns + columnsSplitter + TaskCard borders + taskCardSplitter), even if it goes out of bounds */
            min-width: 445px;
            padding-top: 59px;
            z-index: 4;
            position: relative;
            /* TaskCard has fixed width, configured by dragging splitter */
            flex: 0 0 auto;
        }

            .timesheet_container .taskCard.dragInProgress,
            .timesheet_container .summaryCard.dragInProgress,
            .timesheet_container .milestoneCard.dragInProgress {
                /* This is needed, so that when bottom tabs section is moved down quickly, browser won't "jump" */
                overflow: hidden;
            }