.tl-container {
    margin: 0 0 0 90px;
    height: 100%;
    position: relative;
}

/* Overriding jqx.bootstrap.css styles */
@font-face {
    font-family: "PFHighwayPro";
    src: url(/fonts/PFHighwaySansPro/PFHighwaySansPro-Regular.ttf) format('truetype');
}

.tl-container #pagergrid .jqx-widget-bootstrap,
.tl-container #pagergrid div,
.tl-container #pagergrid span,
.tl-container #pagergrid input,
.tl-container #pagergrid .jqx-widget-header-bootstrap,
.tl-container #pagergrid .jqx-fill-state-normal-bootstrap,
.tl-container #pagergrid .jqx-widget-content-bootstrap,
.tl-container #pagergrid .jqx-fill-state-hover-bootstrap,
.tl-container #pagergrid .jqx-fill-state-pressed-bootstrap {
    font-family: "PFHighwayPro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.tl-container #pagergrid #exportToCsvBtn,
.tl-container #pagergrid #exportTasksLoadToCsvBtn {
    font-size: 13px !important;
    margin-top: -2px;
}

.tl-container #pagergrid #exportTasksLoadToCsvBtn {
    width: 120px;
}

.tl-container #pagergrid #totalSection {
    display: flex;
    color: #4A4A4A;
    font-size: 12px;
    float: right;
    margin-right: 20px;
    margin-top: 1px;
}

    .tl-container #pagergrid #totalSection .totalTitle {
       font-family: GlowSemiBold !important;
    }

    .tl-container #pagergrid #totalSection .totalHoursTitle {
        color: #808080;
        font-family: GlowRegular !important;
    }

    .tl-container #pagergrid #totalSection .totalHoursValue {
        font-family: GlowSemiBold !important;
        margin-right: 10px;
    }

/*.tl-container input.jqx-input.jqx-input-bootstrap {*/
/*padding-right: 2px;*/
/*margin-right: 2px;*/
/*}*/

.tl-container .jqx-widget-content-bootstrap {
    background-color: #ffffff !important;
    border-color: white !important;
}

.tl-container .jqx-widget-header-bootstrap {
    background-color: white;
    border-bottom-color: white;
}

.tl-container .jqx-widget-bootstrap .jqx-grid-cell-bootstrap,
.tl-container .jqx-widget-bootstrap .jqx-grid-column-header-bootstrap,
.tl-container .jqx-widget-bootstrap .jqx-grid-group-cell {
    border-color: #ccc;
    border-right-color: white;
}

.jqx-grid-statusbar.jqx-grid-statusbar-bootstrap .jqx-grid-cell {
    text-align: right;

    padding-right: 10px;
}

.tl-container .jqx-combobox-content-bootstrap,
.tl-container .jqx-input-bootstrap {
    border-color: #cccccc !important;
    color: #555555 !important;
    background-color: #ffffff !important;
}

/* Overriding jqx.base.css */
.tl-container .jqx-disableselect {
    /*-webkit-tap-highlight-color: rgba(0,0,0,0);*/
}

.tl-container .jqx-grid-cell-wrap {
    white-space: normal;
}

.tl-container .jqx-grid-cell-pinned {
    background-color: white;
}

.tl-container .jqx-widget-content {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -ms-touch-action: none;
    -moz-background-clip: padding;
    -webkit-text-size-adjust: none;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: Verdana,Arial,sans-serif;
    font-style: normal;
    font-size: 13px;
    border-color: #c7c7c7;
    background: #fff;
}

/* Changing Remaining Hours more than double dialog */
.tl-container #dialog-confirmRemaining {
    display: none;
}

/* Changing Remaining, Spent and/or Total hours to more than double dialog */
.tl-container #dialog-confirmRemainingSpentTotal {
    display: none;
}

.tl-container .ui-dialog-buttonset button {
    width: 85px;
    background: none;
    border: 1px solid #ccc;
}

#Menu {
    font-size: 14px;
}

    #Menu.disabled {
        pointer-events: none;
    }

    #Menu.disabled li {
        opacity: 0.4;
    }

        #Menu li.disabled {
            pointer-events: none;
            opacity: 0.4;
        }
        
        #Menu li.hide {
            display: none;
        }

/*.tl-container .jqx-widget .jqx-grid-cell,*/
/*.tl-container .jqx-widget .jqx-grid-column-header,*/
/*.tl-container .jqx-widget .jqx-grid-group-cell {*/
/*border-color: #aaa;*/
/*border-right-color:white;*/
/*}*/

.tl-container header, footer, nav, section {
    display: block;
}

.tl-container .container.body-content {
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    width: auto;
}

.tl-container .tasklistContainer {
    position: relative;
}

.tl-container .ui-autocomplete,
.tl-container .ui-front, .ui-menu, .ui-widget, .ui-widget-content {
    background-color: white;
    border: 1px solid #ececec;
    border-radius: 3px;
    z-index: 5000;
}

.tl-container .demoDatePickerContainer .row {
    margin-bottom: 2px !important;
}

.tl-container .manhoursPerAssignmentContainer {
    position: relative;
}

    .tl-container .manhoursPerAssignmentContainer .manhoursPerAssignmentFormatted {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: text;
        text-align: right;
        padding-right: 14px;
    }

    /* Color for Remaining/Spent/Total cell, which is being edited by another user */
    .tl-container .manhoursPerAssignmentContainer.remainingHoursContainerForEditing.isLockedByAnotherUser,
    .tl-container .manhoursPerAssignmentContainer.spentHoursContainerForEditing.isLockedByAnotherUser,
    .tl-container .manhoursPerAssignmentContainer.totalHoursContainerForEditing.isLockedByAnotherUser {
        opacity: 0.3;
    }


.tl-container .assignmentUnitsContainer {
    position: relative;
}

    .tl-container .assignmentUnitsContainer .unitPerAssignmentFormatted {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: text;
        text-align: right;
        padding-right: 14px;
    }




/* Input, which is used to enter Remaining time.
   It changes position to where the currently edited Remaining Hours cell is located. */
.tl-container #manhours_edit,
.tl-container #notes_edit {
    display: none;
    position: absolute;
    z-index: 4900;
    height: 18px;
    line-height: 15px;
    border: 1px solid #333;
    box-shadow: none;
    text-align: right;
    padding-right: 10px;
    font-size: 13px;
}

.tl-container #notes_edit {
    text-align: left;
}

    .tl-container #manhours_edit.visible,
    .tl-container #notes_edit.visible {
        display: block;
    }

.tl-container .custom-overlay {
    background-color: #aaaaaa;
}

/* Styles for basic forms
-----------------------------------------------------------*/
.tl-container fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

.tl-container legend {
    font-size: 1.2em;
    font-weight: bold;
}

.tl-container textarea {
    min-height: 75px;
}

.tl-container .editor-label {
    margin: 1em 0 0 0;
}

.tl-container .editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.tl-container .field-validation-error {
    color: #f00;
}

.tl-container .field-validation-valid {
    display: none;
}

.tl-container .input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.tl-container .validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.tl-container .validation-summary-valid {
    display: none;
}

/* Styles for grid
-----------------------------------------------------------*/
.tl-container .gridHeader {
    border-color: white !important;
    font-size: 12px;
}

.tl-container #grid .jqx-grid-column-header:hover.draggable {
    cursor: move;
}

.tl-container #grid .jqx-grid-column-header:hover .iconscontainer {
    margin-left: -48px;
    width: auto;
}

.tl-container #grid .jqx-grid-column-header .iconscontainer .reorderIcon {
    display: none;
    border: none;
    background: url(../../images/tasksList/moveColumnIcon.png) no-repeat center;
    width: 16px;
    height: 40px;
    float: right;
}

.tl-container #grid .jqx-grid-column-header:hover .iconscontainer .reorderIcon {
    display: block;
    cursor: move;
    background-color: #FFFFFF;
}

.tl-container #removeFilters {
    position: absolute;
    left: 5px;
    top: 44px;
    width: 14px;
    height: 21px;
    z-index: 999;
    background-color: transparent;
    outline-width: 0;
}

.tl-container .tasklistContainer.showCreateTaskHeader #removeFilters {
    top: 44px;
}


.tl-container #removeFilters.disabled {
    opacity: 0.2;
    cursor: default;
}

.tl-container #gridColumns {
    float: right;
    height: 30px;
    cursor: pointer;
    margin-right: 20px;
}

.tl-container.withoutPointerEvents #grid {
    pointer-events: none;
}

/* Grayed out cells for Deleted Tasks(could be deleted by changing Remaining to 0 by this user or other user) */
.tl-container #grid .resourceGroup.deletedTask,
.tl-container #grid .resourceGroup .deletedTask,
.tl-container #grid .resource.deletedTask,
.tl-container .manhoursPerAssignmentContainer.remainingHoursContainerForEditing.deletedTask,
.tl-container .manhoursPerAssignmentContainer.spentHoursContainerForEditing.deletedTask,
.tl-container .manhoursPerAssignmentContainer.totalHoursContainerForEditing.deletedTask,
.tl-container .assignmentUnitsContainer.deletedTask .unitPerAssignmentFormatted
{
    opacity: 0.3;
}

/* Do not show trashbin icon for task, which was removed in external system */
.tl-container #grid .resourceItem:hover .resource.deletedTask + .trash-icon {
    display: none;
}

.tl-container .columnsSettingsIcon {
    height: 14px;
    vertical-align: middle;
    width: 14px;
    left: 6px;
    top: 13px;
    position: absolute;
    z-index: 300;
    cursor: pointer;
    background-color: white;
}

.tl-container .tasklistContainer.showCreateTaskHeader .columnsSettingsIcon {
    top: 13px;
}


.tl-container .jqx-menu-wrapper:focus {
    outline: none;
}

.tl-container #jqxlistbox {
    position: absolute;
    display: none;
    z-index: 1000;
}

.tl-container #priogridheader {
    height: 18px;
    width: 45px;
    border: 1px solid #6E6E75;
    border-radius: 10px;
    padding-top: 1px;
    padding-left: 12px;
    margin-top: 8px !important;
}

.tl-container .triangleicon::before {
    content: "\25BC"; /* left point triangle in escaped unicode */
    color: #000;
    position: absolute;
    width: 5px;
    height: 5px;
    top: 13px;
    left: 8px;
    font-size: 8px;
    font-family: 'Times New Roman', Times, serif;
}

.tl-container .graytriangleicon::before {
    content: "\25BC"; /* left point triangle in escaped unicode */
    color: #CACBCF;
    position: absolute;
    width: 5px;
    height: 5px;
    top: 12px;
    left: 0px;
    font-size: 8px;
    font-family: 'Times New Roman', Times, serif;
}

.tl-container #selectedTaskInfo {
    display: flex;
}

.tl-container #selectedTaskInfo button {
    height: 28px;
    font-size: 13px;
    line-height: 18px;
    margin-left: 0;
}

.tl-container #selectedTaskInfo button.ui-btn-light {
    background-color: #FFFFFF;
    font-family: GlowRegular !important;
    border: 1px solid var(--border-light-blue);
}

.tl-container #selectedTaskInfo button.ui-btn-dark .assignOrReassignText {
    font-family: GlowSemiBold;
}

.tl-container #selectedTaskInfo button.ui-btn-light:hover {
    background-color: #dde3fa;
    font-family: GlowRegular !important;
    border: 1px solid var(--border-light-blue);
}

.tl-container #selectedTaskInfo button.ui-btn-dark {
    background-color: #5774e7;
    font-family: GlowRegular !important;
}

.tl-container #selectedTaskInfo button.ui-btn-dark:hover {
    background-color: #4659bf;
    font-family: GlowRegular !important;
}

.tl-container #selectedTaskInfo button#backBtn {
    width: 65px;
    margin-right: 6px;
}

.tl-container #selectedTaskInfo button#backBtn .backBtnSign {
    padding-bottom: 2px;
}

.tl-container #selectedTaskInfo div.selectDeselectAll button {
    width: 110px;
    margin-right: 6px;
    margin-left: 0;
}

.tl-container #selectedTaskInfo #numberOfSelectedTasksContainer {
    position: fixed;
    top: 12px;
    left: 430px;
    right: 300px;
    width: 59%;
}

.tl-container #selectedTaskInfo #numberOfSelectedTasksContainer.cameFromMilestone {
    display: flex;
    justify-content: center;
}

.tl-container #selectedTaskInfo #numberOfSelectedTasksContainer #numberOfSelectedTasks {
    white-space: nowrap;
}

.tl-container #selectedTaskInfo #numberOfSelectedTasksContainer .projectNameTitle  {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media screen and (max-width: 1599px) {
    .tl-container #selectedTaskInfo span#numberOfSelectedTasks {
        width: auto;
    }
}

.tl-container #selectedTaskInfo span#numberOfSelectedTasks span.taskCount {
    font-family: GlowSemiBold;
}

.tl-container #multiAssign {
    max-width: 287px;
    float: left;
    margin-left: 5px;
    color: white;
    margin-right: 6px;
    position: relative;
    z-index: 10;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tl-container #selectedTask {
    float: left;
    margin-left: auto;
    margin-right: auto;
}

.tl-container #undo {
    position: absolute;
    left: 220px;
    width: 78px;
    top: -5px;
    border: 1px solid var(--border-light-blue);
    font-family: GlowRegular;
}

.tl-container #undo.multiAssignVisible {
    left: 300px;
    top: auto;
}

.tl-container #selectAll {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tl-container .multiTaskBtn {
    font-size: 12px !important;
}

.tl-container .TaskPriority {
    margin-left: 18px !important;
}

.tl-container .TaskPriorityFlexible > div > div > div {
    display: flex;
    width: 100%;
    height: 100%;
}

.tl-container .TaskPriorityFlexible > div {
    height: 19px !important;
    width: 20px !important;
}

.tl-container .TaskPriorityFlexible {
    display: flex;
    width: 100% !important;
}

.tl-container.withoutPointerEvents .navbar {
    pointer-events: none;
}

.tl-container .navbar {
    position: absolute !important;
    left: 0;
    right: 0;
    background: #ECECEC;
    display: none;
    z-index: 999;
    min-height: 0px !important;
    width: max-content;
    top: 20px;
}

.navbar-collapse {
    padding: 0;
}

.tl-container .navbar-nav > li {
    float: none !important;
}

.tl-container .navbar-nav > li {
    display: flex!important;;
    width: max-content;
    height: 100%;
    align-items: center;
}

.mt-header-btns #undo {
    display: none;
    text-decoration: underline;
    color: blue;
    padding-left: 10px;
    cursor: pointer;
    padding-top: 4px;
    margin-left: 70px;
}

.tl-container #editTaskWidjet {
    display: none;
}

    .tl-container #editTaskWidjet input {
        font-size: 11px;
    }

    .tl-container #editTaskWidjet .customEditor {
        height: 15px !important;
        border-bottom-width: 0;
    }

        .tl-container #editTaskWidjet .customEditor:last-child {
            border-bottom-width: 1px;
        }

.tl-container #multiAssignAlertWindow {
    display: none;
}

/* .tl-container .row {
    padding-top: 30px;
} */

.tl-container .tasklistContainer.showCreateTaskHeader .row {
    padding-top: 0;
}

/* =============== Cells styles start =============== */
/* Grid Cells */
.tl-container .priorityCell > div,
.tl-container .projectNameCell > div,
.tl-container .parentPathCell,
.tl-container .taskNameCell,
.tl-container .tagsCell,
.tl-container .taskStageCell,
.tl-container .inProgressStatusCell,
.tl-container .resourceGroupCell,
.tl-container .resourceNameCell,
.tl-container .dateOfFirstMilestoneCell,
.tl-container .nameOfFirstMilestoneCell,
.tl-container .remainingWorkCell,
.tl-container .actualWorkCell,
.tl-container .plannedWorkCell,
.tl-container .budgetNameCell,
.tl-container .projectIdCell,
.tl-container .taskIdCell,
.tl-container .projectManagerCell,
.tl-container .leadEngineerCell,
.tl-container .notesCell,
.tl-container .phasesCell,
.tl-container .customField2,
.tl-container .customField3,
.tl-container .skillsCell,
.tl-container .groupsTagsCell,
.tl-container .resourceTagsCell,
.tl-container .lastImportantCommentCell,
.tl-container .assignmentUnitsCell,
.tl-container .taskBookingIdCell{
    font-family: GlowRegular;
    font-size: 13px;
}

.tl-container .notesContainerForEditing {
    min-height: 18px;
}

.tl-container .priorityCell > div {
    margin-left: 19px !important;
}

/* Grid Headers */
.tl-container #grid .jqx-grid-column-header {
    font-size: 13px;
    font-family: GlowSemibold;
}

/* Override styles for the JQX Bootstrap selected cell */
.jqx-grid-cell-selected-bootstrap[role="gridcell"] {
    background-color: #D9EEFE !important;
    border-color: #D9EEFE !important;
}

.jqx-grid-cell-filter-bootstrap[role='gridcell'] {
    background-color: #F5F5F5;
}

.tl-container .highlightForOpenedTaskCard [role="gridcell"]{
    background-color: #EEF1FE;
    border-right-color: transparent;
}

.tl-container .highlightForSelectedRow [role="gridcell"]{
    background-color: #EEF1FE !important;
    border-color: #EEF1FE !important;
}

.tl-container #contenttablegrid [role="gridcell"],
.tl-container [role="gridcell"] .group-text,
.tl-container [role="gridcell"] .resource-text {
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

.tl-container [role="gridcell"] .resource,
.tl-container [role="gridcell"] .budgetedResourceName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.tl-container [role="gridcell"] .budgetedResourceName {
    width: 100%;
}

.tl-container [role="gridcell"] .trash-icon {
    background: url('/images/shared/newTrashIcon.png');
    display: none;
    width: 13px;
    height: 13px;
    margin-left: 20px;
    margin-right: 4px;
    float: right;
    margin-top: 1px;
}

.tl-container [role="gridcell"] .related-budgeted-icon {
    background: url('/images/tasksList/relatedBudgetIcon.svg');
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    float: left;
    cursor: pointer;
}

.tl-container [role="gridcell"].jqx-grid-cell-selected .related-budgeted-icon {
    background: url('/images/tasksList/relatedBudgetIcon.svg');
}

.tl-container [role="gridcell"].jqx-grid-cell-selected .trash-icon {
    background: url('/images/shared/newTrashIcon.png');
}

.tl-container [role="gridcell"] .resourceItem {
    display: flex;
}

.tl-container [role="gridcell"] .resourceItem,
.tl-container [role="gridcell"] .budgetedResourceItem {
    height: 16px;
    white-space: normal;
}

    .tl-container [role="gridcell"] .resourceItem:hover .resource,
    .tl-container [role="gridcell"] .budgetedResourceItem:hover .budgetedResourceName,
    .tl-container [role="gridcell"] .attributesContainer:hover .attributeItem {
        color: #5774e7;
        cursor: pointer;
        width: calc(100% - 36px); /*36 - is for trash icon*/
    }
    .tl-container [role="gridcell"] .resourceItem:hover .trash-icon {
        display: inline-block;
        cursor: pointer;
    }

/* this is for preventing resourses jumping upwards when upper resourse in the list is deleted */
.tl-container .resource-text > .resource {
    height: 16px;
    display: block;
}
.tl-container .resourceItem .resource.assignmentSelectedAsMultiAssignTemplate,
.tl-container .resource.assignmentSelectedAsMultiAssignTemplate,
.tl-container [role="gridcell"] .resourceGroup .assignmentSelectedAsMultiAssignTemplate {
    font-weight: bold;
}

.tl-container .resource:not(.assignmentSelectedAsMultiAssignTemplate).isNotAssigned,
.tl-container [role="gridcell"] .resource-text .resource:not(.assignmentSelectedAsMultiAssignTemplate).isNotAssigned {
    color: #808080;
}

.tl-container [role="gridcell"] .resource.highlighted,
.tl-container [role="gridcell"] .groupID.highlighted {
    color: #5774e7;
}

    .tl-container [role="gridcell"] .resourceGroup.isOutsideTheGroupAssignment {
        color: #FF7C10;
    }

    .tl-container [role="gridcell"] .resourceGroup:hover .groupID:not(.isMultiAssignMode) {
        color: #5774e7;
        cursor: pointer;
    }

.tl-container [role="gridcell"] .groupItem {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 16px;
}

.tl-container [role="gridcell"] .resourceGroup .groupID.isMultiAssignMode {
    cursor: default;
    pointer-events: none;
}

.tl-container [role="gridcell"] .priorityDiv {
    width: 2px;
    position: absolute;
}

.tl-container [role="gridcell"] .priorityText {
    padding-right: 40px;
    /* text-align: right; */
    font-family: GlowSemiBold;
    cursor: pointer;
}

    .tl-container [role="gridcell"] .priorityText:hover .priorityPromt {
        display: inline-block;
    }

.tl-container [role="gridcell"] .priorityPromt {
    height: 18px;
    display: none;
    position: absolute;
    border-radius: 2px;
    padding-left: 4px;
    padding-right: 4px;
    color: #ffffff;
}

.tl-container [role="gridcell"] .user-tags {
    display: flex;
    flex-wrap: wrap;
}

.tl-container [role="gridcell"] .skills {
    width: 100%;
}

.tl-container [role="gridcell"] .user-tags > div,
.tl-container [role="gridcell"] .skills > div {
    margin-right: 5px;
    display: flex;
    margin-bottom: 3px;
}

.tl-container [role="gridcell"] .user-tags div:last-child span,
.tl-container [role="gridcell"] .skills div:last-child > span{
    display: none;
}

.tl-container [role="gridcell"] .user-tags > div:hover,
.tl-container [role="gridcell"] .skills > div > div:hover{
    cursor: pointer;
    color: #5774e7;
}

.tl-container [role="gridcell"] .skills .skillName {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-container .priorityCell {
    overflow: visible !important;
}

.tl-container .tagsCell .tagsText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-container .taskNameCell .budgetTaskMark {
    display: inline-block;
    float: left;
    width: 12px;
    height: 100%;
}

    .tl-container .taskNameCell .budgetTaskMark .budgetTaskMarkIcon {
        background: url('../../images/tasksList/budget_task.png') no-repeat;
        width: 12px;
        height: 12px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
    }

.tl-container .taskNameCell .taskNameText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-container .taskNameCell .linkForTask {
    display: none;
    float: right;
    width: 20px;
    height: 100%;
    cursor: pointer;
}

    .tl-container .taskNameCell .linkForTask .linkForTaskIcon {
        background: url('../../images/tasksList/linkToTask.png') no-repeat;
        width: 12px;
        height: 12px;
        margin-left: auto;
        margin-right: auto;
    }

.tl-container .taskNameCell:hover .linkForTask {
    display: inline-block;
}

.tl-container .budgetNameCell .taskNameText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-container .budgetNameCell .linkForTask {
    display: none;
    float: right;
    width: 20px;
    height: 100%;
    cursor: pointer;
}

    .tl-container .budgetNameCell .linkForTask .linkForTaskIcon {
        background: url('../../images/tasksList/linkToTask.png') no-repeat;
        width: 12px;
        height: 12px;
        margin-left: auto;
        margin-right: auto;
    }

.tl-container .budgetNameCell:hover .linkForTask {
    display: inline-block;
}

.tl-container .parentPathCell > div,
.tl-container .nameOfFirstMilestoneCell > div,
.tl-container .notesCell > div {
    /*margin-top: 5px !important;*/
}

.tl-container .milestoneDate {
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

.tl-container .resourceGroupCell img.autoDetectIcon {
    margin-right: 4px;
    margin-top: -2px;
}

.tl-container .inProgressStatusCell .inProgressContainer .inProgressItem {
    height: 16px;
    position: relative;
}
.tl-container .inProgressStatusCell .inProgressContainer .inProgressItem img,
.tl-container .inProgressStatusCell .inProgressContainer img {
    margin-top: -2px;
}

.tl-container .inProgressStatusCell .arrowIcon-container {
    width: 24px;
    cursor: pointer;
    padding-top: 7px;
    padding-left: 8px;
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

    .tl-container .inProgressItem:hover .arrowIcon-container .arrowIcon {
        display: block;
    }

    .tl-container .inProgressStatusCell .arrowIcon-container .arrowIcon {
        width: 6px;
        height: 3px;
        background: url('../../images/shared/smallDownArrow.png');
        display: none;
    }

    .tl-container .inProgressStatusCell .arrowIcon-container.opened .arrowIcon {
        background: url('../../images/shared/smallUpArow.png');
        display: block;
    }

.tl-container #taskStatus {
    position: absolute;
}
/* =============== Cells styles end =============== */
.tl-container.withoutPointerEvents .unfeasibleMilestoneHeaderContainer {
    pointer-events: none;
}

.tl-container .unfeasibleMilestoneHeaderContainer {
    position: relative;
    height: 42px;
    display: none;
}

.tl-container .unfeasibleMilestoneHeaderContainer {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
}

.tl-container .unfeasibleMilestoneHeaderContainer .right-buttons {
    display: flex;
    align-items: center;
}

.tl-container .unfeasibleMilestoneHeaderContainer .backToPipelineContainer,
.tl-container .createNewHeaderContainer .backToPipelineContainer {
    position: relative;
    cursor: pointer;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-light-blue);
    border-radius: 4px;
    margin-right: 12px;
    background: #ffffff;
}

.tl-container .createNewHeaderContainer .projectNameTitle {
    position: relative;
    left: calc(50% - 130px);
    transform: translate(-50%, 0px);
    max-width: calc(100% - 90px - 130px - 160px);
}

.tl-container .createNewHeaderContainer .projectNameTitle.multiAssignMode {
    max-width: calc(100% - 90px - 340px - 160px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    top: -20px;
}

.tl-container .backToPipelineArrowLeft {
    position: relative;
    left: 1px;
}

.tl-container .backToPipelineText {
    position: relative;
    display: inline-block;
    margin-left: 7px;
    color: #5774e7;
    font-size: 13px;
    line-height: 0.77;
    font-family: GlowRegular;
}

.tl-container .tasksFromStartMilestoneToUnfeasibleMilestoneContainer {
    position: relative;
    display: inline-block;
    background-color: #ECECEC;
    font-size: 14px;
    font-family: GlowSemibold;
    margin: 0px auto;
    width: calc(100% - 90px - 130px - 160px);
}
.tl-container .tasksFromStartMilestoneToUnfeasibleMilestoneContainer.multiAssignVisible {
    height: 13px;
}

.tl-container .tasksFromStartMilestoneToUnfeasibleMilestoneContainer .projectNameTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-container .tasksFromStartMilestoneToUnfeasibleMilestoneContainer .milestoneContainer {
    display: flex;
    justify-content: center;
}

.tl-container .projectNameTitle {
    text-align: center;
    color: #4A4A4A;
    font-size: 14px;
    font-family: GlowSemibold;
}

.tl-container .tasksFromText {
    float: left;
    position: relative;
    color: #808080;
    margin-top: 1px;
    margin-left: -2px;
}

.tl-container .milestoneDiamondContainer {
    position: relative;
    float: left;
    padding-left: 11px;
    margin-top: 6px;
    margin-left: 1px;
}

.tl-container .milestoneDiamond {
    position: absolute;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-bottom: 4px solid #CB0D00;
    top: -3px;
}
/* List item Diamond before today should be light-red */
.tl-container .milestoneDiamondContainer.isFeasible .milestoneDiamond {
    border-bottom: 4px solid #5774E7;
}

/* List item diamond bottom of the diamond */
.tl-container .milestoneDiamond:after {
    content: '';
    position: absolute;
    left: -4px;
    top: 4px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #CB0D00;
}
/* List item Diamond before today should be light-red */
.tl-container .milestoneDiamondContainer.isFeasible .milestoneDiamond:after {
    border-top-color: #5774E7;
}

.tl-container .startMilestoneDate {
    float: left;
    position: relative;
    color: #393939;
    margin-left: 14px;
    margin-top: 1px;
}

.tl-container .startMilestoneName {
    float: left;
    position: relative;
    color: #393939;
    margin-left: 7px;
    margin-top: 1px;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-container .toText {
    float: left;
    position: relative;
    color: #808080;
    margin-left: 11px;
    margin-top: 1px;
}

.tl-container .unfeasibleMilestoneDate {
    float: left;
    position: relative;
    color: #4a4a4a;
    margin-left: 17px;
    margin-top: 1px;
}

.tl-container .unfeasibleMilestoneName {
    float: left;
    position: relative;
    color: #4a4a4a;
    margin-left: 7px;
    margin-top: 1px;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Container for TaskList and TaskCard */
.tl-container .tasklistContainer .row .tasklistWrap {
    display: flex;
}

    /* TaskList Grid container (left) */
    .tl-container .tasklistContainer .row .tasklistWrap #grid {
        flex: 1 1 auto;
        /* TaskList grid should never be less than 300px, even if it goes out of bounds */
        min-width: 298px;
        z-index: 99;
    }

    /* Task Card container (right) */
    .tl-container .tasklistContainer .row .tasklistWrap .taskCard,
    .tl-container .tasklistContainer .row .tasklistWrap .summaryCard,
    .tl-container .tasklistContainer .row .tasklistWrap .milestoneCard {
        position: relative;
        /* TaskCard has fixed width, configured by dragging splitter */
        flex: 0 0 auto;
        /*z-index required in order to avoid any overflow elements above the card*/
        z-index: 100;
    }

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

.tl-container.withoutPointerEvents .createNewHeaderContainer {
    pointer-events: none;
}

/* .tl-container .createNewHeaderContainer {
    position: relative;
    display: none;
} */

.tl-container .createNewHeaderContainer {
    display: flex;
    align-items: flex-end;
    padding: 16px 20px;
}

.tl-container .createNewHeaderContainer.multiAssignMode {
    height: 65px;
}

.tl-container .createNewHeaderContainer .createNewButtonContainer,
.tl-container .unfeasibleMilestoneHeaderContainer .createNewButtonContainer {
    padding-top: 13px;
    float: right;
    cursor: pointer;
}

.tl-container .exportButtonContainer {
    padding-top: 10px;
    margin-left: 10px;
    float: right;
    cursor: pointer;
}
.tl-container .createNewHeaderContainer .ui-btn-link,
.tl-container .unfeasibleMilestoneHeaderContainer .ui-btn-link,
.tl-container .navbar .createNewButtonContainer .ui-btn-link {
    display: inline-block;
}

.tl-container .createNewHeaderContainer .backToPipelineContainer .backToPipelineText.withOutArrow {
    margin-left: 0;
}

.tl-container .navbar .createNewButtonContainer {
    position: absolute;
    z-index: 30;
    right: 43px;
    top: 12px;
}

.tl-container .navbar .exportButtonContainer {
    position: absolute;
    z-index: 30;
    right: -1px;
    top: 9px;
    padding-top: 0;
}

/* Overrides */
.tl-container #columntablegrid div.jqx-grid-column-header div div span {
    font-family: GlowSemibold !important;
    font-size: 13px !important;
}

/* Custom assignee dropdown and its list items */
.assigneeDropdownListItemContainer {
}
    /* Name of the group or "All users" header */
    .assigneeDropdownListItemContainer .groupHeader {
        position: relative;
        font-family: GlowSemibold;
        background-color: white !important;
        margin-bottom: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .assigneeDropdownListItemContainer .itemText {
        position: relative;
        margin-left: -5px;
        padding-left: 5px;
        margin-right: -5px;
        padding-right: 5px;
        margin-top: -5px;
        padding-top: 5px;
        margin-bottom: -5px;
        padding-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .assigneeDropdownListItemContainer .itemText:hover {
            background-color: #EBEBEB;
            border-radius: 6px;
        }

    /* Horizontal line above the "All users" header */
    .assigneeDropdownListItemContainer .divider {
        position: relative;
        /*width: 152px;*/
        height: 1px;
        background-color: #d6d6d6;
        margin-left: -5px;
        margin-right: -5px;
        margin-bottom: 12px;
    }

/* Container with inputs for editing hours*/
.tl-container #hoursEditor {
    position: absolute;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    z-index: 4900;
    top: 20px;
    left: 20px;
    padding: 10px 10px 0 10px;
    display: none;
}

    .tl-container #hoursEditor .hoursRow {
        display: table;
    }

        .tl-container #hoursEditor .hoursRow .cell {
            display: table-cell;
        }

            .tl-container #hoursEditor .hoursRow .cell.linkModeContainer {
                width: 10px;
            }

                .tl-container #hoursEditor .hoursRow .cell.linkModeContainer .linkIcon {
                    background: url('../../images/tasksList/linkIsDisabled.png') no-repeat;
                    width: 8px;
                    height: 15px;
                    cursor: pointer;
                    margin-left: 1px;
                    margin-top: 3px;
                }

                    .tl-container #hoursEditor .hoursRow .cell.linkModeContainer .linkIcon.enabled {
                        background: url('../../images/tasksList/linkIsEnabled.png') no-repeat;
                    }

            .tl-container #hoursEditor .hoursRow .cell.emptyCell {
                width: 10px;
            }

            .tl-container #hoursEditor .hoursRow .cell.ui-input-bordered {
                height: 21px;
                text-align: right;
                font-size: 13px;
                padding: 5px 10px;
            }

            .tl-container #hoursEditor .hoursRow .cell.remainingHours,
            .tl-container #hoursEditor .hoursRow .cell.spentHours,
            .tl-container #hoursEditor .hoursRow .cell.totalHours {
                width: 80px;
            }

                .tl-container #hoursEditor .hoursRow .cell.remainingHours[disabled],
                .tl-container #hoursEditor .hoursRow .cell.spentHours[disabled],
                .tl-container #hoursEditor .hoursRow .cell.totalHours[disabled] {
                    color: #B4B4B4;
                }

        .tl-container #hoursEditor .hoursRow.difference {
            text-align: right;
            height: 8px;
            font-family: GlowRegular;
            font-size: 13px;
            width: 100%;
        }

            .tl-container #hoursEditor .hoursRow.difference .cell.up,
            .tl-container #hoursEditor .hoursRow.difference .cell.down {
                height: 22px;
                padding-right: 3px;
                padding-top: 2px;
            }

                .tl-container #hoursEditor .hoursRow.difference .cell.up .value {
                    color: #6ebc2c;
                }

                .tl-container #hoursEditor .hoursRow.difference .cell.down .value {
                    color: #ec4a43;
                }

                .tl-container #hoursEditor .hoursRow.difference .cell.up .directionIcon {
                    background: url('../../images/tasksList/up.png') no-repeat;
                    width: 5px;
                    height: 7px;
                    margin-bottom: 1px;
                    margin-top: 3px;
                    display: inline-block;
                }

                .tl-container #hoursEditor .hoursRow.difference .cell.down .directionIcon {
                    background: url('../../images/tasksList/down.png') no-repeat;
                    width: 5px;
                    height: 7px;
                    margin-bottom: 1px;
                    display: inline-block;
                }

.tl-container #gridpagerlistgrid {
    width: 52px !important;
}

    .tl-container #gridpagerlistgrid #dropdownlistContentgridpagerlistgrid {
        width: 32px !important;
    }

input.dummyClipboardInput {
    display: none;
    position: fixed;
}

.skill-level-dropdown:nth-child(1) {
    display: block;
}

.skill-level-dropdown {
    width: 30px;
    height: 19px;
    border-radius: 4px;
    border: none;
    /*outline: 1px solid #cccccc;*/
    position: absolute;
    right: 10px;
    outline: none;
    /*margin-right: 2px;*/
    color: #727272;
    display: none;
    /*border-color: #cccccc;*/
    /*color: transparent;*/
}

.skill-level-dropdown:hover {
    cursor: pointer;
}

.skill-level-dropdown option {
    padding: 20px;
    display: block;
}

input.Skills {
    padding-right: 40px;
}

.skill-levels-indicator {
    margin-left: 2px;
    margin-right: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.skill-levels-indicator .level {
    background: #B6B6B6;
    border-radius: 1px;
    height: 2px;
    margin-bottom: 1px;
}

.skill-levels-indicator .level.selected {
    background: #5774E7;
}
.skill-levels-indicator .level.level1 {
    width: 3px;
}
.skill-levels-indicator .level.level2 {
    width: 4px;
}
.skill-levels-indicator .level.level3 {
    width: 5px;
}
.skill-levels-indicator .level.level4 {
    width: 6px;
}
.skill-levels-indicator .level.level5 {
    width: 7px;
}

.jqx-grid-cell-selected .skill-levels-indicator .level:not(.selected) {
    background: #fff;
}
/*-----------------------*/
/* skills filter button */
.allowed-skills-indicator-button {
    flex-direction: column;
    align-items: flex-end;
    cursor: pointer;
    height: 100%;
    display: flex;
    justify-content: center;
}

.allowed-skills-indicator-button .level {
    border-radius: 1px;
    height: 3px;
    margin-bottom: 1px;
}

.allowed-skills-indicator-button .level5 {
    width: 9px;
}
.allowed-skills-indicator-button .level4 {
    width: 8px;
}
.allowed-skills-indicator-button .level3 {
    width: 7px;
}
.allowed-skills-indicator-button .level2 {
    width: 6px;
}
.allowed-skills-indicator-button .level1 {
    width: 5px;
}
/* end skills filter button */

/* skills filter range */
.skills_level_range {
    display: flex;
    align-items: flex-end;
}

.skills_level_range_container {
    display: none;
    position: fixed;
    padding: 10px;
    margin-left: -80px;
    background: #fff;
    border-radius: 4px;
}

.skills_level_range .level {
    background: #ABB8F8;
    border-radius: 4px;
    width: 10px;
    margin-right: 4px;
    cursor: pointer;
}

.skills_level_range .level {
    background: #5774E7;
}

.skills_level_range .level5 {
    height: 20px;
}
.skills_level_range .level4 {
    height: 18px;
}
.skills_level_range .level3 {
    height: 16px;
}
.skills_level_range .level2 {
    height: 14px;
}
.skills_level_range .level1 {
    height: 12px;
}
/* end skills filter range */


/* common */

.skills_level .level {
    background: #B6B6B6;
}

.skills_level .level.selected {
    background: #5774E7;
}

/* custom pager */

.jqx-grid-pager-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    margin-top: 5px;
    width: 100%;
    height: 100%;
}

.jqx-grid-pager-container .left-button-container, .jqx-grid-pager-container .rigth-button-container {
    max-width: 27px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 3px;
    width: 27px;
    height: 15px;
    cursor: pointer;
}

.jqx-grid-pager-container .change-page-button {
    margin-left: 6px;
    width: 16px;
    height: 16px;
}

.jqx-grid-pager-container input.go-to-page-input {
    text-align: right;
    margin-right: 7px;
}

.jqx-grid-pager-container .rows-counter-label, .jqx-grid-pager-container .page-size-dropdown, .jqx-grid-pager-container span {
    margin-right: 7px;
}

.tl-container .row {
    display: flex;
}

.tl-container #dropdownlistContentcomboboxeditorgridResourceName,
.tl-container #dropdownlistContentcomboboxeditorgridResourceGroup,
.tl-container div[id*='dropdownlistContenteditor']  {
    width: 100% !important;
}

.tl-container #suggestedArrowWrapper {
    float: left;
    margin-top: 4px;
    width: 18px;
    height: 21px;
    margin-left: -2px;
    margin-right: 2px;
}

.tl-container #suggestedList {
    background-color: transparent;
    outline: none;
    width:100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: relative;
}

.tl-container .suggestedArrowWrapper {
    overflow: hidden;
    outline: none;
    background-color: transparent;
    border: none;
    float: left;
    width:100%;
    height: 100%;
    position: relative;
}

.tl-container .suggestedArrowBox {
    background-color: transparent;
    border: none;
    float: right;
    position: relative;
    width: 19px;
    height: 21px;
}

.tl-container .suggestedDropdownOptions {
    border: 1px solid #c5c5c5;
    display: none;
    position: fixed;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    border-radius: 4px;
    top: 131px;
    width: 170px;
    height: 76px;
    animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;
}

@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}

.tl-container .suggestedDropdownOption {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 28px;
    cursor: pointer;
    font-family: GlowRegular;
    font-size: 13px;
}

.tl-container .suggestedDropdownOption:hover {
    background-color: #ececec;
}