.view-port::-webkit-scrollbar {
    width: 3px;               /* width of the entire scrollbar */
}
.view-port::-webkit-scrollbar-track {
    background: transparent;        /* color of the tracking area */
}
.view-port::-webkit-scrollbar-thumb {
    background-color: #999;    /* color of the scroll thumb */
    border-radius: 3px;
}

.leftHorizontalScroll::-webkit-scrollbar {
    height: 4px;               /* width of the entire scrollbar */
}
.leftHorizontalScroll::-webkit-scrollbar-track {
    background: transparent;        /* color of the tracking area */
}
.leftHorizontalScroll::-webkit-scrollbar-thumb {
    background-color: #999;    /* color of the scroll thumb */
    border-radius: 3px;
}

timesheet-page-v2 .expandCollapseArrowComponent {
    transform: rotate(270deg);
}

timesheet-page-v2 .expandCollapseArrowComponent.expanded {
    transform: rotate(360deg);
}

timesheet-page-v2 .leftHorizontalScroll {
    overflow-x: auto;
    position: absolute;
    bottom: 30px;
    cursor: pointer;
}

timesheet-page-v2 .leftHorizontalScroll > div {
    height: 0.1px;
}

timesheet-page-v2 .total-line {
    overflow: hidden;
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
}


timesheet-tree-node-spent-hours-row-v2 {
    position: relative;
}

timesheet-tree-node-spent-hours-row-v2:nth-child(even) {
    background: #ececec24;
}

timesheet-tree-node-spent-hours-row-v2.highlighted{
    background: #EEF1FE
}


timesheet-tree-node-spent-hours-row-v2.highlighted:before{
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background: #dcdcdc;
    right: 0;
    top: 0;
    position: absolute;
}


.timesheetContainer-v2 {
    width: 100%;
    height: 100%;
    padding-top: 22px;
    overflow: hidden;
}

.timesheetContainer-v2 .usersDropdownAndSettingsContainer .loader {
    position: absolute;
    background: white;
    width: 20px;
    height: 20px;
    z-index: 10;
}

.timesheetContainer-v2 .usersDropdownAndSettingsContainer .loader .ui-loader-dark {
    margin: 0;
}

.timesheetContainer-v2 .usersDropdownSettingsAndAvatarContainer .customDropdown .arrowIcon-container .arrowIcon {
    width: 16px;
    height: 16px;
    position: relative;
    top: -8px;
    left: -5px;
    background: url("../../../../images/shared/expand-gray.svg") no-repeat;
    background-size: contain;
    transform: rotate(90deg);
}

.timesheetContainer-v2 .usersDropdownSettingsAndAvatarContainer .customDropdown .arrowIcon-container .arrowIcon:hover {
    width: 16px;
    height: 16px;
    background: url("../../../../images/shared/expand-blue.svg") no-repeat;
    transform: rotate(90deg);
    background-size: contain;
}

.timesheetContainer-v2 .usersDropdown .customDropdown .selectDeselectAllClear-section::after {
	content: '';
    pointer-events: none;
	position: absolute;
    top: 35px;
    left: 0px;
	width: 100%;
	height: 30px;
	background: linear-gradient(white, rgba(255, 255, 255, 0.001)); 
    z-index: 1;
  }

.timesheetContainer-v2 .usersDropdown .customDropdown .dropdown-content::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30px;
	background: linear-gradient(rgba(255, 255, 255, 0.001), white);
	z-index: 1;
  }

.timesheetContainer-v2 .usersDropdown .customDropdown .dropdown-content .headerAndClear{
    z-index: 2;
}

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

        .timesheetContainer-v2 .mainContainer .mainContainerHeader {
            display: flex;
            position: fixed;
            z-index: 200;
            padding-left: 20px;
        }

        /*#region Tabs*/
        .timesheetContainer-v2 .mainContainer .timesheetTabsContainer {
            display: flex;
            /* Tabs tongues should overlap content, so that tabs tongues bottom borders are above content */
            z-index: 2;
            margin-right: var(--toolbar-block-indent);
            margin-bottom: 12px;
        }

/*---------------------------------------- FILTERS ----------------------------------------*/
        .timesheetContainer-v2 .savedFiltersComponent .mainButton .selectedInfo { 
            padding-right: 8px;
            padding-left: 8px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .timesheetContainer-v2 .mainContainer .oldFilteringContainer {
            display: flex;
            gap: var(--toolbar-item-indent);
            margin-bottom: 12px;
        }

        .timesheetContainer-v2 .mainContainer .timesheetHeader-container {
            display: flex;
            flex-wrap: wrap;
            z-index: 200;
            flex-grow: 1;
        }

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter {
                margin-right: 6px;
                margin-bottom: 12px;
            }

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter#dateRange .customRadioButtonDropdown-container .button-container {
                width: 100px;
            }

                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter.textInputFilter {
                    width: 160px;
                }

                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter.tagsFilters .tagsContainer,
                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter.stageFilter,
                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter.itemSkillFilter .skillsContainer{
                    min-width: 120px;
                }

                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter.summaryFilter,
                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter.userNameFilter,
                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter.groupNameFilter {
                    width: 120px;
                }

                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter .customDropdown .arrowIcon-container,
                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter .customRadioButtonDropdown-container .arrowIcon-container,
                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filter .stage-filter .arrowIcon-container {
                    display: none;
                }

                .timesheetContainer-v2 .mainContainer .timesheetHeader-container.disabled .filter,
                .timesheetContainer-v2 .mainContainer .timesheetHeader-container.disabled .clearFiltersButton-container {
                    pointer-events: none;
                }

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filtersToggle {
                display: block;
                text-align: center;
                cursor: pointer;
            }

                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filtersToggle .filterSign + span {
                    width: 40px;
                }

                .timesheetContainer-v2 .mainContainer .timesheetHeader-container .filtersToggle .filtersTogglingComponent .mainButton {
                    /*margin-bottom: 12px;*/
                }

/*----------------------------------------Section for delete, remove from view and name of the filter-----------------*/

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .clearRemoveAndAddFilters {
                display: flex;
                margin-bottom: 12px;
            }

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .clearRemoveAndAddFilters .clearFiltersButton-container .clearFiltersButton {
                background: url('../../../../images/shared/clearFilter-gray.svg') no-repeat;
                width: 16px;
                height: 16px;
                cursor: pointer;
                margin: 6px 5px 0 7px;
            }

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .clearRemoveAndAddFilters .clearFiltersButton-container .clearFiltersButton.removeFiltersButton {
                background: url('../../../../images/shared/newTrashIcon.svg') no-repeat;
                width: 16px;
                height: 16px;
                margin: 7px 7px 0 8px;
            }

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .clearRemoveAndAddFilters .clearFiltersButton-container.filterIsApplied .clearFiltersButton {
                background: url('../../../../images/shared/clearFilter-blue.svg') no-repeat;
            }

            .timesheetContainer-v2 .mainContainer .timesheetHeader-container .clearRemoveAndAddFilters .clearFiltersButton-container.disabled {
                pointer-events: none;
                cursor: default;
                opacity: 0.4;
            }

/*---------------------------------------- END OF FILTERS ----------------------------------------*/

            /*.timesheetContainer-v2 .mainContainer .timesheetTabsContainer .timesheetTab {*/
            /*    background-color: #FFFFFF;*/
            /*    padding: 0 12px;*/
            /*    border: 1px solid #dcdcdc;*/
            /*    font-size: 13px;*/
            /*    line-height: 18px;*/
            /*    font-family: GlowSemiBold;*/
            /*    color: #4e4e4e;*/
            /*    cursor: pointer;*/
            /*    height: 28px;*/
            /*    display: flex;*/
            /*    align-items: center;*/
            /*}*/

            /*.timesheetContainer-v2 .mainContainer .timesheetTabsContainer .timesheetTab:first-child {*/
            /*    border-top-left-radius: 4px;*/
            /*    border-bottom-left-radius: 4px;*/
            /*}*/

            /*.timesheetContainer-v2 .mainContainer .timesheetTabsContainer .timesheetTab:last-child {*/
            /*    border-top-right-radius: 4px;*/
            /*    border-bottom-right-radius: 4px;*/
            /*}*/

            /*.timesheetContainer-v2 .mainContainer .timesheetTabsContainer .timesheetTab:not(:first-child) {*/
            /*    !* Overlap tabs borders, so that border takes only 1px *!*/
            /*    margin-left: -1px;*/
            /*}*/

            /*.timesheetContainer-v2 .mainContainer .timesheetTabsContainer .timesheetTab.active {*/
            /*    color: #5774E7;*/
            /*    cursor: default;*/
            /*    border-color: #ABB8F8;*/
            /*    z-index: 3;*/
            /*}*/
        /*#endregion */

        /*#region Filters and navigation*/
        .timesheetContainer-v2 .mainContainer .timesheetFiltersAndNavigationContainer {
            display: inline-block;
            position: fixed;
            right: 20px;
            top: 16px;
            z-index: 200;
        }

            .timesheetContainer-v2 .mainContainer .oldFilteringContainer .filteringByTextContainer {
                position: relative;
            }

                .timesheetContainer-v2 .mainContainer .oldFilteringContainer .filteringByTextContainer .ui-input-search {
                    width: 180px;
                    padding-right: 20px;
                }

                .timesheetContainer-v2 .mainContainer .oldFilteringContainer .filteringByTextContainer .ui-input-search-close {
                    top: 10px;
                    cursor: pointer;
                }

            .timesheetContainer-v2 .mainContainer .navigationAndSettingsContainer {
                display: flex;
                gap: var(--toolbar-item-indent);
                z-index: 100;
            }

            .timesheetContainer-v2 .mainContainer .timesheetFiltersAndNavigationContainer .datepicker {
                width: 130px;
                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-v2 .mainContainer .timesheetFiltersAndNavigationContainer .datepicker:focus {
                    border-color: var(--link-blue);
                }

            .timesheetContainer-v2 .mainContainer .timesheetFiltersAndNavigationContainer .exportButtonContainer {
                background: #FFFFFF;
                border: 1px solid #ABB8F8;
                box-sizing: border-box;
                border-radius: 4px;
                height: 28px;
                display: flex;
                justify-content: center;
                width: 30px;
            }

            .timesheetContainer-v2 .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-v2 .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-v2 .mainContainer .timesheetFiltersAndNavigationContainer .modes .mode.second {
                    border-radius: 0px 4px 4px 0px;
                    margin-left: 0px;
                    border-left: none;
                }

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

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

            .timesheetContainer-v2 .mainContainer .timesheetFiltersAndNavigationContainer .navigationArrowsContainer {
                height: 28px;
                -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-v2 .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-v2 .mainContainer .timesheetFiltersAndNavigationContainer .navigationArrowsContainer .arrowButton.rightButton {
                        margin-left: 2px;
                    }

                    .timesheetContainer-v2 .mainContainer .timesheetFiltersAndNavigationContainer .navigationArrowsContainer .arrowButton.disabled {
                        opacity: 0.4;
                        cursor: default;
                        pointer-events: none;
                    }
        /*#endregion */

/*region --------------------SAVED FILTERS--------------*/

.timesheetContainer-v2 .mainContainer .timesheetFiltersAndNavigationContainer .savedFiltersContainer {
    margin-right: 6px;
}

.timesheetContainer-v2 .mainContainer .timesheetFiltersAndNavigationContainer .savedFiltersContainer.borderForTheIcon {
    width: 30px;
    height: 28px;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #ABB8F8;
    position: relative;
}

.timesheetContainer-v2 .savedFiltersComponent .savedFiltersListContainer {
    top: 30px;
    left: 0;
}

/*endregion*/
        /*region Today button*/
        .timesheetContainer-v2 .mainContainer #todayWrapper {
            position: absolute;
            z-index: 199;
            width: 50px;
            right: -21px;
            top: -5px;
            cursor: pointer;
        }

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

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

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

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

        .timesheetContainer-v2 .mainContainer #todayWrapper #today .goBack,
        .timesheetContainer-v2 .mainContainer #todayWrapper #today .goForward {
            cursor: pointer;
            pointer-events: all;
        }
        /*endregion*/
        /*#region Tab Content */
        .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer {
                /*overflow: hidden;*/
                display: flex;
                flex-direction: column;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port {
                overflow-y: hidden;
                overflow-x: hidden;
                background: #fff;
                flex-grow: 1;
                border: 1px solid #dcdcdc;
                border-top: none;
                border-bottom: none;
                /*box-shadow:*/
                /*inset -1px 0 0 #dcdcdc,*/
                /*inset 1px 0 0 #dcdcdc;*/
            }

            .timesheetContainer-v2 .availability-container {
                border-left: 1px solid #dcdcdc;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port:hover {
                overflow-y: auto;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port > .content-wrapper {
                display: flex;
                min-height: 100%;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .timesheetSplitter {
                cursor: e-resize;
                position: absolute;
                top: 0px;
                bottom: 0px;
                width: 3px;
                border-right: 1px solid rgb(236, 236, 236);
                z-index: 4;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .timesheetSplitter:hover {
                border-right-color: #5774e7;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .left .content,
            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .right .content,
            .timesheetContainer-v2 .mainContainer .tabContentContainer  .total-line .left .content,
            .timesheetContainer-v2 .mainContainer .tabContentContainer  .total-line .right .content{
                overflow: hidden;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .totalLine_wapper {
                height: 28px;
                width: 100%;
                position: sticky;
                top: 0px;
                left: 0px;
                z-index: 1;
                overflow: hidden;
                display: flex;
            }

                .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .totalLine_wapper .totalLine_right {
                    flex: 1 1 0px;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    overflow: hidden;
                }


            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .left{
                /*background: blue;*/
                height: 100%;
                overflow: hidden;
            }

            .timesheetContainer-v2 .mainContainer .tabContentContainer .view-port .right{
                /*background: red;*/
                flex-grow: 1;
                overflow: hidden;
            }

            /*-------------TOTAL LINE--------------*/
            /*.timesheetContainer-v2 .mainContainer .tabContentContainer  .total-line {*/
            /*    height: 28px;*/
            /*}*/

            .timesheetContainer-v2 .mainContainer .tabContentContainer .total-line > div {
                display: flex;
            }

            /*--------------END TOTAL LINE-------------*/


            /*header-row*/
            .tabContentContainer .leftBorderHeaderRow {
                height: 41px;
                width: 1px;
                background: #DCDCDC;
                position: fixed;
                z-index: 101;
            }

                .header-row {
                    height: 41px;
                    min-height: 41px;
                    background-color: white;
                    display: flex;
                    flex-direction: row;
                    flex-shrink: 0;
                    flex-grow: 0;
                    overflow-x: hidden;
                    border-right: 1px solid rgb(236, 236, 236)
                }

                .header-row .usersDropdownSettingsAndAvatarContainer {
                    position: absolute;
                    top: 6px;
                    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;
                    align-items: center;
                    height: 27px;
                }

                .header-row .usersDropdownSettingsAndAvatarContainer .usersDropdownAndSettingsContainer {
                    flex: 0 0 24px;
                    padding-top: 1px;
                    display: flex;
                    position: relative;
                    align-items: center;
                }

                    .header-row .usersDropdownSettingsAndAvatarContainer .usersDropdownAndSettingsContainer .columnsSetting .columnsConfigurationComponent .menuButtons-container {
                        left: -8px;
                    }

                .header-row .usersDropdownSettingsAndAvatarContainer .columnsConfigurationComponent {
                    margin-right: 10px;
                }

                .header-row .usersDropdownSettingsAndAvatarContainer .leftLine {
                    position: absolute;
                    bottom: -6px;
                    left: 25px;
                }

                .header-row .usersDropdownAndSettingsContainer  .avatar {
                    margin-left: 10px;
                }

                .header-row.usersDropdownAndSettingsContainer  .avatar,
                .header-row .usersDropdownAndSettingsContainer  .avatar-picture {
                    margin-left: 10px;
                    width: 24px;
                    height: 24px;
                    border-radius: 100%;
                    text-align: center;
                }

                .header-row .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;
                }

                .header-row .usersDropdownAndSettingsContainer .initials {
                    height: 100%;
                    width: 100%;
                    text-align: center;
                    padding-top: 3px;
                    font-family: GlowSemibold;
                    font-size: 13px;
                    color: #ffffff;
                    text-transform: uppercase;
                }

                .header-row .usersDropdownAndSettingsContainer .initials.longInitials {
                    font-size: 11px;
                    padding-top: 4px;
                }

                .header-row .usersDropdown {
                    flex: 1 1 auto;
                    margin-top: 2px;
                }

                .header-row .usersDropdown input {
                    font-family: GlowSemibold;
                    border: none;
                    cursor: text;
                    min-width: 150px;
                }

                .header-row .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;*/
                }

                .header-row .headerCell:nth-child(2) {
                    border-left: 1px solid #dcdcdc;
                    /*box-shadow: inset 0 1px 0 0 #dcdcdc,*/
                        /*inset -1px 0 0 #dcdcdc,*/
                    /*inset 0 -1px 0 #dcdcdc;*/
                    /*inset 1px 0 0 #dcdcdc;*/
                }
                .header-row .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;*/
                }

                .header-row .headerCell .headerAndArrowContainer {
                    flex: 1 1 auto;
                    align-self: center;

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

                .header-row .headerCell.nonReorderable .headerAndArrowContainer {
                    cursor: default;
                }

                .header-row .headerCell.numeric .headerAndArrowContainer {
                    justify-content: flex-end;
                }

                .header-row .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;
                }

                .header-row .headerCell.nonReorderable .headerAndArrowContainer .headerText {
                    padding-right: 10px;
                }

                .header-row .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) */
                .header-row .headerCell.sortedAscending .headerAndArrowContainer .orderingArrow {
                    visibility: visible;
                    background: url('/images/shared/columnOrderingArrowUpGray.png') no-repeat;
                }
                .header-row .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) */
                .header-row .headerCell:hover .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                    visibility: visible;
                    background: url('/images/shared/columnOrderingArrowUpGray.png') no-repeat;
                }
                .header-row .headerCell:hover.sortedAscending .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                    background: url('/images/shared/columnOrderingArrowUpBlue.png') no-repeat;
                }
                .header-row .headerCell:hover.sortedDescending .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                    background: url('/images/shared/columnOrderingArrowUpBlue.png') no-repeat;
                    transform: rotate(180deg);
                }

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

                .header-row .headerCell.resizable .rightLineContainer {
                    cursor: ew-resize;
                }

                .header-row .headerCell:last-child:hover .rightLineContainer {
                    right: -3px;
                }

                .header-row .headerCell .rightLine {
                    flex: 0 0 auto;
                    width: 1px;
                    height: 26px;
                    background-image: linear-gradient(to top, #dcdcdc, #ffffff);
                    align-self: flex-end;
                }

                .header-row .headerCell.resizable .rightLineContainer:hover .rightLine {
                    background-image: linear-gradient(to top, #5774E7, #ffffff);
                }

                .header-row .headerCell.noRightLine .rightLineContainer {
                    visibility: hidden;
                }
            /*end header-row*/


                /*#region Right table - Spent by day */
                .tabContentContainer .rightTableSpentByDay {
                    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;
                    height: 100%;
                }

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

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

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

                    display: flex;
                    flex-direction: row;
                }

                .tabContentContainer  .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;
                }
                .tabContentContainer .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;
                }

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

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

                    padding-top: 2px;
                }

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

                    display: flex;
                    flex-direction: row;
                }

                .tabContentContainer  .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;
                }
                .tabContentContainer  .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;
                }
                .tabContentContainer .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer.isAvailabilityZero {
                    background-color: #F8F8F8;
                    color: #b6b6b6;
                }
                .tabContentContainer .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer.isTotal {
                    font-family: GlowSemiBold;
                    background-color: #F8F8F8;
                }

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

                .tabContentContainer  .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;
                }

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


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

                /*#region Spent Hours container: scrollable vertically and horizontally(horiz. only via code) */
                .tabContentContainer  .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;
                }

                .tabContentContainer .spentRowsContainer {
                    flex: 1 1 0px;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                }

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

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


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

                    flex: 0 0 auto;

                    display: flex;
                    flex-direction: row;
                }

                .tabContentContainer .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;*/
                }
                .tabContentContainer .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;*/
                }
                .tabContentContainer .availabilityRow .availabilityCellContainer.isTotal {
                    font-family: GlowSemiBold;
                }

                .tabContentContainer .availabilityRow .availabilityCellContainer.editable {
                    cursor: pointer;
                }

                .tabContentContainer  .availabilityRow .availabilityCellContainer.isHovered {
                    background-color: #dcdcdc;
                }

                .tabContentContainer .availabilityRow .availabilityCellContainer .availabilityCell {
                    padding-top: 7px;
                }

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

                .tabContentContainer .availabilityRow .availabilityCellContainer .availabilityInput::-webkit-outer-spin-button,
                .tabContentContainer .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 */
                }

                .tabContentContainer .availabilityRow .availabilityCellContainer .availabilityInput[type=number] {
                    -moz-appearance: textfield; /* Firefox */
                }

                .timesheetContainer-v2 .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 0 -1px 0 #dcdcdc;
                    border-right: 1px solid rgb(236, 236, 236)
                }

                .timesheetContainer-v2 .d-flex.hiddenAvailability {
                    height: 30px;
                    min-height: 30px;
                    padding-right: 12px;
                    background-color: #f5f5f5;
                    box-shadow: inset 0 1px 0 0 #dcdcdc,
                    inset 0 -1px 0 #dcdcdc;
                    border-right: 1px solid rgb(236, 236, 236)
                }

                .timesheetContainer-v2 .availabilityLabel {
                    font-family: GlowRegular;
                    font-size: 14px;
                    color: #4a4a4a;
                }

                .timesheetContainer-v2 .availabilityRow {
                    height: 30px;
                    min-height: 30px;

                    flex: 0 0 auto;

                    display: flex;
                    flex-direction: row;
                }

                .timesheetContainer-v2 .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-v2 .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-v2 .availabilityRow .availabilityCellContainer.isTotal {
                    font-family: GlowSemiBold;
                }

                .timesheetContainer-v2 .availabilityRow .availabilityCellContainer.editable {
                    cursor: pointer;
                }

                .timesheetContainer-v2 .availabilityRow .availabilityCellContainer.isHovered {
                    background-color: #dcdcdc;
                }

                .timesheetContainer-v2 .availabilityRow .availabilityCellContainer .availabilityCell {
                    padding-top: 7px;
                }

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

                .timesheetContainer-v2 .availabilityRow .availabilityCellContainer .availabilityInput::-webkit-outer-spin-button,
                .timesheetContainer-v2 .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-v2 .availabilityRow .availabilityCellContainer .availabilityInput[type=number] {
                    -moz-appearance: textfield; /* Firefox */
                }


            /*---------------------------------------------------------------------------------*/

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

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

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

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

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

                    .timesheetContainer-v2 .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-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownSettingsAndAvatarContainer .usersDropdownAndSettingsContainer {
                                flex: 0 0 24px;
                                padding-top: 1px;
                                display: flex;
                                position: relative;
                                align-items: center;
                            }

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

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

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

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

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

                                .timesheetContainer-v2 .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-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .usersDropdownAndSettingsContainer .initials.longInitials {
                                    font-size: 11px;
                                    padding-top: 4px;
                                }

                                .timesheetContainer-v2 .usersDropdownSettingsAndAvatarContainer .itemName{
                                    font-size: 13px;
                                    color: #808080;
                                    font-family: GlowSemibold;
                                    cursor: default;
                                }

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

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

                        .timesheetContainer-v2 .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-v2 .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-v2 .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-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.nonReorderable .headerAndArrowContainer {
                                    cursor: default;
                                }

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

                                .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.nonReorderable .headerAndArrowContainer .headerText {
                                    padding-right: 10px;
                                }

                                .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.sortedAscending .headerAndArrowContainer .orderingArrow {
                                    visibility: visible;
                                    background: url('/images/shared/columnOrderingArrowUpGray.png') no-repeat;
                                }
                                .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:hover .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                                    visibility: visible;
                                    background: url('/images/shared/columnOrderingArrowUpGray.png') no-repeat;
                                }
                                .timesheetContainer-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:hover.sortedAscending .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                                    background: url('/images/shared/columnOrderingArrowUpBlue.png') no-repeat;
                                }
                                .timesheetContainer-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell:hover.sortedDescending .headerAndArrowContainer .orderingArrow:not(.draggingInProgress) {
                                    background: url('/images/shared/columnOrderingArrowUpBlue.png') no-repeat;
                                    transform: rotate(180deg);
                                }

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

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

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

                        .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .headerRow .headerCell.resizable .rightLineContainer:hover .rightLine {
                            background-image: linear-gradient(to top, #5774E7, #ffffff);
                        }

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

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

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

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


                    .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .leftTableTotalValues .availabilityLabel {
                            font-family: GlowRegular;
                            font-size: 14px;
                            color: #4a4a4a;
                        }
                        /*#endregion */

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

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




                /*endregion*/

                /*#region Right table - Spent by day */
                .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer {
                        height: 41px;
                        min-height: 41px;

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

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

                            display: flex;
                            flex-direction: row;
                        }

                            .timesheetContainer-v2 .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-v2 .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-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .monthsHeaderRow .monthCellContainer .monthCell {
                                    color: #b6b6b6;
                                    font-family: GlowRegular;
                                    font-size: 12px;

                                    padding-top: 2px;
                                }

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

                            display: flex;
                            flex-direction: row;
                        }

                            .timesheetContainer-v2 .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-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer.isAvailabilityZero {
                                background-color: #F8F8F8;
                                color: #b6b6b6;
                            }
                            .timesheetContainer-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer.isTotal {
                                font-family: GlowSemiBold;
                                background-color: #F8F8F8;
                            }

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

                            .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .headerRowsContainer .daysHeaderRow .dayInMonthCellContainer .dayInMonthCell {
                                    padding-top: 2px;
                                }
                                /*#endregion */


                    .timesheetContainer-v2 .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-v2 .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-v2 .mainContainer .tabContentContainer .spentRowsContainer {
                            flex: 1 1 0px;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                        }

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

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


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

                        flex: 0 0 auto;

                        display: flex;
                        flex-direction: row;
                    }

                        .timesheetContainer-v2 .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-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer.isTotal {
                            font-family: GlowSemiBold;
                        }

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

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

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

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

                            .timesheetContainer-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer .availabilityInput::-webkit-outer-spin-button,
                            .timesheetContainer-v2 .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-v2 .mainContainer .tabContentContainer .personalTimesheetTable .rightTableSpentByDay .availabilityRow .availabilityCellContainer .availabilityInput[type=number] {
                                -moz-appearance: textfield; /* Firefox */
                            }
                            /*#endregion */
                /*#endregion */


        /*#endregion */

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

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

        .timesheet_container .stepCard-wrapper {
            display: flex;
        }

        /*While changing task card do not allow to click on elements*/
        .timesheet_container.withoutPointerEvents .timesheetContainer-v2 {
            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;
            }

.refresh-button {
    height: 27px;
    width: 28px;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #ABB8F8;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1px;
    margin-left: -12px;
    margin-right: 12px;
}