/*#region Top Filters*/
.filters-container {
    display: flex;
    padding: 16px 20px 4px 20px;
}

.filters-container .mainFilters {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.filters-container .functionalButtons {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    /*!* Width property above is required for HOT FIX of dropdown behavior (is goes beyond page) *!*/
    min-width: 95px;
    gap: var(--toolbar-item-indent);
}


.filters-container .moduleLibraryButton,
.filters-container .exportReportsButton,
.filters-container .viewSettingsButton {
    width: 30px;
    height: 28px;
    border: 1px solid #abb8f8;
    border-radius: 4px;
    background-color: #fff;
}

.filters-container .functionalButtons .savedFiltersContainer.borderForTheIcon {
    width: 30px;
    height: 28px;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #ABB8F8;
}

.filters-container .functionalButtons .savedFiltersButton .mainButton .selectedInfo {
    padding-right: 8px;
    padding-left: 8px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.filters-container .savedFiltersButton .removeSelectedBtn,
.filters-container .savedFiltersButton .actionBtn {
    height: 26px;
}

.filters-container .savedFiltersContainer.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.filters-container .exitQuickEditModeButton,
.filters-container .spacerBig,
.filters-container .spacer,
.filters-container div.reorderItemsByPriority-container,
.filters-container .undoRedoButtonsContainer,
.filters-container .stepsTableEditingBarParentContainer,
.filters-container .filteringByTextContainer,
.filters-container div.prioritySlider,
.filters-container .assigneeFilterContainer,
.filters-container .stageFilterContainer,
.filters-container .statusFilterContainer,
.filters-container .summaryLevelContainer,
.filters-container .globalPlanningsContainer,
.filters-container .columnFilter,
.filters-container .tagSearch,
.filters-container .skills,
.filters-container .exitLoadAnalysisModeButton,
.filters-container .stepTypeFilterContainer {
    margin-bottom: 12px;
}

.filters-container .tagSearch,
.filters-container .skills {
    position: relative;
}


.filters-container div.reorderItemsByPriority-container.disabled,
.filters-container .undoRedoButtonsContainer.disabled,
.filters-container .filtersToggle.disabled,
.filters-container .filteringByTextContainer.disabled,
.filters-container .projectTagSearch.disabled,
.filters-container .prioritySlider.disabled,
.filters-container .assigneeFilterContainer.disabled,
.filters-container .stageFilterContainer.disabled,
.filters-container .statusFilterContainer.disabled,
.filters-container .summaryLevelContainer.disabled,
.filters-container .priorityFilter.disabled,
.filters-container .projNameFilter.disabled,
.filters-container .tagSearch.disabled,
.filters-container .skills.disabled,
.filters-container .attributes.disabled,
.filters-container .stepsTableEditingBarParentContainer.disabled,
.filters-container .dateRangeFilter.disabled .customRadioButtonDropdown-container,
.filters-container .globalPlanningsContainer.disabled,
.filters-container .viewSettingsButton.disabled,
.filters-container .exportReportsButton.disabled,
.ppln_container .stepsTableComponent.disabled,
.ppln_container .stepsTableComponent.disabled .stepsTableCellContainer,
.filters-container .planning-type-container.disabled,
.filters-container .stepTypeFilterContainer.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.filters-container .assigneeFilterContainer,
.filters-container .stageFilterContainer,
.filters-container .statusFilterContainer,
.filters-container .summaryLevelContainer,
.filters-container .tagSearch,
.filters-container .skills,
.filters-container .attributes,
.filters-container .dateRangeFilter .customRadioButtonDropdown-container,
.filters-container .filteringByTextContainer.textFilter,
.filters-container .loadAnalysisFilter,
.filters-container .generalFilters,
.filters-container .columnFilter,
.filters-container .filteringByTextContainer.pmFilter,
.filters-container .projectTagSearch,
.filters-container .projectBusinessValueFilter,
.filters-container .stepTypeFilterContainer {
    margin-right: var(--toolbar-item-indent);
}

.filters-container .summaryLevelClearFiltersButton {
    display: flex;
    width: 108px;
    justify-content: space-between;
}

.filters-container .filtersToggle {
    display: block;
    height: 36px;
    text-align: center;
    cursor: pointer;
}

.filters-container .moduleLibraryButton {
    display: flex;
    justify-content: center;
    align-items: center;
}

.filters-container .moduleLibraryButton.isModuleLibraryDisabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.filters-container .spacer {
    flex: 0 0;
    flex-basis: var(--toolbar-item-indent);
}

.filters-container .spacerBig {
    flex: 0 0;
    flex-basis: var(--toolbar-block-indent);
}

.filters-container .loadAnalysisFilter.loadAnalysisDateRangeFilter {
    margin-right: 0px;
}



.filters-container .undoRedoButtonsContainer {
    width: 62px;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 4px;
    border: 1px solid #ABB8F8;
    background: #ffffff;
    padding: 3px 8px;
    height: 28px;
}

.filters-container .undoRedoButtonsContainer .barButton {
    /*flex: 0 0 31px;*/
    height: 20px;
    width: 20px;
    border-radius: 4px;
    cursor: default;
    text-align: center;
}

.filters-container .undoRedoButtonsContainer .barButton.disabled {
    opacity: 0.4;
}

.filters-container .undoRedoButtonsContainer .barButton:not(.disabled):hover {
    cursor: pointer;
    background-color: #f6f7fe;
}

.filters-container .undoRedoButtonsContainer .barButton img {
    vertical-align: top;
    margin-top: 3px;
}

.filters-container .filteringByTextContainer {
    position: relative;
}

.filters-container .filteringByTextContainer.tagSearch {
    flex: 1 1 auto;
    position: relative;
}

.filters-container .tagSearch .tags-filter .tagsContainer,
.filters-container .tagSearch .tags-filter.active .tagsContainer {
    min-width: 120px;
}

.filters-container .skills .skills-filter .skillsContainer,
.filters-container .skills .skills-filter.active .skillsContainer {
    min-width: 120px;
}

.filters-container .itemFilters .customRadioButtonDropdown-container .button-container {
    width: 100px;
}

.filters-container .filteringByTextContainer.pmFilter {
    display: inline-block;
    width: 120px;
}

.filters-container .filteringByTextContainer.pmFilter.warning {
    width: 150px;
}

.filters-container .filteringByTextContainer.textFilter {
    width: 160px;
    position: relative;
}

.filters-container .filteringByTextContainer .ui-input-search.textFilter {
    width: 100%;
    padding-right: 20px;
}

.filters-container .filteringByTextContainer .ui-input-search.textFilter.filterIgnored {
    color: #b6b6b6;
}

.filteringByTextContainer.loadAnalysis__dateRange {
    margin-right: 6px;
}

.filteringByTextContainer.loadAnalysis__dateRange .textFilter {
    background: #ffffff;
    padding-left: 10px;
}

.filters-container .filteringByTextContainer .ui-input-search.projectManagerSearch {
    width: 100%;
    padding: 0 8px 0 8px;
    background: #FFFFFF;
}

.filters-container .filteringByTextContainer .ui-input-search-close {
    top: 10px;
    right: 7px;
    cursor: pointer;
}

.filters-container .assigneeFilterContainer {
    width: 120px;
}

    .filters-container .assigneeFilterContainer .arrowIcon-container {
        padding-top: 13px;
    }

.filters-container .stageFilterContainer,
.filters-container .statusFilterContainer,
.filters-container .stepTypeFilterContainer {
    min-width: 120px;
    width: auto;
}

.filters-container .summaryLevelContainer {
    width: 120px;
}

    .filters-container .summaryLevelContainer .arrowIcon-container {
        padding-top: 13px;
    }

    .filters-container .globalPlanningsContainer .arrowIcon-container {
        padding-top: 13px;
    }

.filters-container .clearRemoveAndAddFilters {
    display: flex;
    gap: 8px;
}

.filters-container .clearFiltersButtonContainer .clearFiltersButton {
    background: url('../../images/shared/clearFilter-gray.png') no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 6px 0;
}

.filters-container .clearFiltersButtonContainer .clearFiltersButton.removeFiltersButton {
    background: url('../../images/shared/newTrashIcon.png') no-repeat;
    width: 13px;
    height: 13px;
    margin: 8px 0;
}

.filters-container .clearFiltersButtonContainer.filterIsApplied .clearFiltersButton {
    background: url('../../images/shared/clearFilter-blue.png') no-repeat;
}

.filters-container .clearFiltersButtonContainer.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
}

.filters-container .exitQuickEditModeButton,
.filters-container .exitLoadAnalysisModeButton {
    cursor: pointer;
    flex: 0 0 60px;
    padding-top: 4px;
    padding-left: 0px;
    height: 28px;
    padding-right: 2px;
    font-size: 13px;
    border: 1px solid #ABB8F8;
}

.filters-container .exitLoadAnalysisModeButton {
    flex: 0 0 156px;
    margin-right: var(--toolbar-block-indent);
}

.filters-container .exitQuickEditModeButton.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.filters-container .exitQuickEditModeButton img,
.filters-container .exitLoadAnalysisModeButton img {
    transform: rotate(180deg);
    vertical-align: top;
    margin-top: 1px;
    margin-right: 3px;
}

.filters-container .stepsTableEditingBarParentContainer {
    flex: 0 0 auto;
}

.filters-container div.reorderItemsByPriority-container,
.filters-container div.prioritySlider {
    height: auto;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #ABB8F8;
    position: relative;
}

/* Reorder Items by Priority button */
.filters-container div.reorderItemsByPriority-container {
    height: 28px;
    cursor: pointer;
    flex: 0 0 30px;
}

.filters-container div.reorderItemsByPriority-container img {
    margin-left: 8px;
    margin-top: 3px;
}

.filters-container div.prioritySlider {
    width: 72px;
    border: none;
    background-color: transparent;
}

    .filters-container div.prioritySlider.withBlack {
        width: 80px;
    }

/* Arrow icon */
.filters-container div.prioritySlider .arrowIcon-container {
    width: 22px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 800;
    cursor: pointer;
    padding-top: 12px;
    padding-left: 8px;
}

.filters-container div.prioritySlider .arrowIcon-container .arrowIcon {
    width: 6px;
    height: 3px;
    background: url('../../images/shared/smallDownArrow.png');
}

.filters-container div.prioritySlider .arrowIcon-container.opened .arrowIcon {
    background: url('../../images/shared/smallUpArow.png');
}

.filters-container .slider-body-bottom {
    width: 100%;
    height: 170px;
    margin-top: 2px;
    padding-left: 32px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 4px;
    background: #FFFFFF;
    position: absolute;
    z-index: 10;
    box-shadow: 0px 2px 4px rgba(0, 41, 199, 0.2), 0px 0px 2px rgba(70, 89, 191, 0.3);
}

.filters-container .slider-body-top {
    height: 28px;
    cursor: pointer;
    padding-top: 8px;
    padding-left: 7px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
}

.filters-container .slider-body-top.opened {
    border: 1px solid #5774E7;
}

.filters-container circle.slider-body-top-icon-circle-blue {
    fill: #5774e7;
    stroke-width: 2px;
    stroke: #ffffff;
}

.filters-container .circles {
    width: 42px;
    height: 10px;
}

    .filters-container .circles.withBlack {
        width: 50px;
    }

.filters-container .circles.grey {
    background: url('../../images/pipeline/newColorSlider-grey.png');
}

    .filters-container .circles.withBlack.grey {
        background: url('../../images/pipeline/colorSliderWithBlack-grey.png');
    }

.filters-container .circles.red {
    background: url('../../images/pipeline/newColorSlider-red.png');
}

    .filters-container .circles.withBlack.red {
        background: url('../../images/pipeline/colorSliderWithBlack-red.png');
    }

.filters-container .circles.yellow {
    background: url('../../images/pipeline/newColorSlider-yellow.png');
}

    .filters-container .circles.withBlack.yellow {
        background: url('../../images/pipeline/colorSliderWithBlack-yellow.png');
    }

.filters-container .circles.green {
    background: url('../../images/pipeline/newColorSlider-green.png');
}

    .filters-container .circles.withBlack.green {
        background: url('../../images/pipeline/colorSliderWithBlack-green.png');
    }

.filters-container .circles.blue {
    background: url('../../images/pipeline/newColorSlider-blue.png');
}

    .filters-container .circles.withBlack.blue {
        background: url('../../images/pipeline/colorSliderWithBlack-blue.png');
    }

.filters-container .circles.withBlack.black {
    background: url('../../images/pipeline/colorSliderWithBlack-black.png');
}

.filters-container vertical-selection-slider {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}

.filters-container vertical-selection-slider .selection-slider.slider-empty-line {
    width: 8px;
    height: 100%;
    border-radius: 4px;
    position: relative;
}

.filters-container vertical-selection-slider .selection-slider .slider-colored-value {
    border-bottom: 2px solid transparent;
    background-clip: content-box;
    cursor: pointer;
}

.filters-container vertical-selection-slider .selection-slider .slider-colored-value.notSelected {
    opacity: 0.4;
}

.filters-container vertical-selection-slider .selection-slider .slider-colored-value .selection-slider-transparent-value {
    position: absolute;
    width: 200vw;
    height: 100%;
    left: -100vw;
    background-color: transparent;
}

.filters-container vertical-selection-slider .selection-slider .slider-colored-value:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.filters-container vertical-selection-slider .selection-slider .slider-colored-value:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
}

.filters-container vertical-selection-slider .selection-slider .slider-circle-inner-container {
    height: 10px;
    width: 10px;
    margin-left: 1px;
    margin-top: 1px;
}

.filters-container vertical-selection-slider .selection-slider .slider-circle {
    top: 50%;
    bottom: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    padding: 0;
    position: absolute;
    border-radius: 14px;
    cursor: pointer;
    z-index: 9;
    border: solid 1px #ffffff;
    left: 4px !important;
    width: 14px;
    height: 14px;
}

.filters-container vertical-selection-slider .selection-slider .slider-circle-inner {
    z-index: 9;
    border: solid 2px #ffffff;
    position: absolute;
    border-radius: 7px;
    height: 10px;
    width: 10px;
}

.filters-container .columnFilter.projNameFilter {
    position: relative;
}

.filters-container .columnFilter.projNameFilter.warning {
    width: 150px;
}

.filters-container .columnFilter.projNameFilter > input.control {
    width: 100%;
    padding: 0 8px 0 8px;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}


.filters-container .columnFilter.priorityFilter > input.control,
.filters-container .columnFilter.projNameFilter > input.control {
    position: relative;
}

/*----------------------------------------Section for delete, remove from view and name of the filter-----------------*/
.filters-container .projectBusinessValueFilter {
	position: relative;
	width: 99px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__button {
	width: 24px;
	height: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border: 1px solid #dcdcdc;
	border-right: none;
	cursor: pointer;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__button:hover{
	background-color: #EEF1FE;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__button.projectBusinessValueFilter__button--bordered {
	border: 1px solid  #5774e7;
	border-right: none;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__popup {
	z-index: 20 !important;
	position: absolute;
	top: 32px;
	left: 0;
	background: white;
	width: 220px;
	height: 108px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: space-evenly;
	align-items: flex-start;
	box-shadow: 0px 0px 2px rgb(70 89 191 / 30%), 0px 2px 4px rgb(0 41 199 / 20%);
	border-radius: 4px;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__popup .projectBusinessValueFilter__popup--inner {
	width: 100%;
	padding-left: 16px;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding-top: 3px;
	padding-bottom: 3px;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__popup .projectBusinessValueFilter__popup--inner.checked {
	color: var(--link-blue);
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__popup .projectBusinessValueFilter__popup--inner:hover {
	background-color: #EEF1FE;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__popup .projectBusinessValueFilter__popup--inner span{
	margin-left: 5px;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__icon {
	width: 24px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 800;
	cursor: pointer;
	padding-top: 6px;
	padding-left: 8px;
	border: 1px solid #dcdcdc;
	border-left: none;
	background-color: #fff;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.filters-container .projectBusinessValueFilter .projectBusinessValueFilter__icon img {
	margin-bottom: 4px;
}

.filters-container .projectBusinessValueFilter .textInputFilter-container .ui-input-search {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding-left: 5px;
	padding-right: 5px;
	background: #fff;
}

.filters-container .columnFilter.priorityFilter .clearDeleteFilter,
.filters-container .columnFilter.projNameFilter .clearDeleteFilter,
.filters-container .filteringByTextContainer.pmFilter .clearDeleteFilter,
.filters-container .filteringByTextContainer.textFilter .clearDeleteFilter,
.filters-container .generalFilters .prioritySlider .clearDeleteFilter {
    display: none;
    position: absolute;
    top: 1px;
    right: 1px;
    height: 87%;
    justify-content: flex-end;
    align-items: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #FFFFFF;
    z-index: 1000;
}

.filters-container .columnFilter.priorityFilter:hover .clearDeleteFilter {
    display: flex;
    right: 16px;
}

.filters-container .columnFilter.projNameFilter:hover .clearDeleteFilter,
.filters-container .filteringByTextContainer.pmFilter:hover .clearDeleteFilter,
.filters-container .filteringByTextContainer.textFilter:hover .clearDeleteFilter,
.filters-container .generalFilters .prioritySlider .slider-body-top:hover ~ .clearDeleteFilter,
.filters-container .generalFilters .prioritySlider .clearDeleteFilter:hover {
    display: flex;
}

.filters-container .columnFilter.priorityFilter .warningTooltip,
.filters-container .columnFilter.projNameFilter .warningTooltip,
.filters-container .filteringByTextContainer.pmFilter .warningTooltip,
.filters-container .filteringByTextContainer.textFilter .warningTooltip,
.filters-container .generalFilters .prioritySlider .warningTooltip {
    position: absolute;
    top: 7px;
    left: 6px;
    z-index: 999;
}

.filters-container .filteringByTextContainer.warning .projectManagerSearch,
.filters-container .columnFilter.warning > input.projectNameSearch {
    padding-left: 24px;
    cursor: text;
}

.filters-container .filteringByTextContainer.warning .projectManagerSearch,
.filters-container .textFilter.warning .textFilter  {
    background: #fff;
}

.filters-container .columnFilter.priorityFilter:hover > input.control,
.filters-container .columnFilter.projNameFilter:hover > input.control,
.filters-container .filteringByTextContainer.pmFilter:hover .ui-input-search.projectManagerSearch,
.filters-container .filteringByTextContainer.textFilter:hover .ui-input-search.textFilter {
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding-right: 18px;
}

.filters-container .filteringByTextContainer.pmFilter .ui-input-search.projectManagerSearch:focus + .clearDeleteFilter {
    width: 40px;
    background: linear-gradient(to left, white 50%, transparent);
    background-color: transparent;
}

.filters-container .columnFilter.priorityFilter:hover > input.control.additionalPaddingForClearDeleteFilerIcons,
.filters-container .columnFilter.projNameFilter:hover > input.control.additionalPaddingForClearDeleteFilerIcons,
.filters-container .filteringByTextContainer.pmFilter:hover .ui-input-search.projectManagerSearch.additionalPaddingForClearDeleteFilerIcons,
.filters-container .filteringByTextContainer.textFilter:hover .ui-input-search.textFilter.additionalPaddingForClearDeleteFilerIcons {
    padding-right: 20px;
}

.filters-container .columnFilter.priorityFilter .filterName,
.filters-container .columnFilter.projNameFilter .filterName,
.filters-container .filteringByTextContainer.pmFilter .filterName,
.filters-container .filteringByTextContainer.textFilter .filterName,
.filters-container .generalFilters .prioritySlider .filterName {
    display: none;
    position: absolute;
    font-size: 9px;
    font-family: GlowSemiBold;
    top: -12px;
    left: 5px;
    text-transform: uppercase;
    opacity: 0.4;
}

.filters-container .columnFilter.priorityFilter:hover .filterName,
.filters-container .columnFilter.projNameFilter:hover .filterName,
.filters-container .filteringByTextContainer.pmFilter:hover .filterName,
.filters-container .filteringByTextContainer.textFilter:hover .filterName,
.filters-container .generalFilters .prioritySlider:hover .filterName {
   display: block;
}

.filters-container .clearFilter,
.filters-container .deleteFilter {
    cursor: pointer;
    padding-right: 5px;
}

/*-----------------------------The end of section for delete, remove from view and name of the filter-----------------*/

.filters-container .mainFilters .projectFilters .arrowIcon-container,
.filters-container .mainFilters .itemFilters .arrowIcon-container,
.filters-container .mainFilters .itemFilters.resourcesFilters .arrowIcon-container,
.filters-container .mainFilters .itemFilters.generalFilters .arrowIcon-container {
    display: none;
}

.filters-container .projectTagSearch {
    flex: 1 1 auto;
    position: relative;
    display: inline-block;
}

.filters-container .projectTagSearch .tags-filter .tagsContainer,
.filters-container .projectTagSearch .tags-filter.active .tagsContainer {
    min-width: 120px;
}


.filters-container .columnFilter input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #9b9b9b;
}

.filters-container .columnFilter input::-moz-placeholder { /* Firefox 19+ */
    color: #9b9b9b;
}

.filters-container .columnFilter input:-ms-input-placeholder { /* IE 10+ */
    color: #9b9b9b;
}

.filters-container .columnFilter input:-moz-placeholder { /* Firefox 18- */
    color: #9b9b9b;
}

.filters-container .columnFilter > div.jqx-widget {
    height: 26px !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

.filters-container .columnFilter .jqx-dropdownlist-state-normal {
    width: 13px !important;
}

.filters-container .columnFilter .jqx-dropdownlist-state-normal .jqx-icon {
    left: -2px;
    background-image: url('../../images/shared/downArrow.png');
}

.filters-container .columnFilter,
.filters div.control {
    display: inline-block;
}

.filters-container .columnFilter input.control.projectPrio {
    width: 85px;
    padding-left: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.filters-container .columnFilter input.control.jqx-input {
    box-sizing: border-box;
}

.filters-container .columnFilter .dropdown-menu {
    width: 330px;
    top: 85%;
    border-top-left-radius: 0px;
    background-color: #ececec;
    border: 1px solid black;
}

.filters-container .columnFilter .dropdown-menu .columnFilter {
    margin-right: 10px;
}

.filters-container .jqx-dropdownlist-content {
    display: none !important;
}

.filters-container .condition,
.filters-container [role="combobox"] {
    float: right;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    box-shadow: none;
}

.filters-container .condition,
.filters-container [id*=dropdownlistArrowjqxWidget],
.filters-container [id*=dropdownlistWrapper] {
    width: 15px !important;
}

.filters-container .priorityFilter  {
    display: flex;
    position: relative;
}

.filters-container .priorityFilter > input {
    padding-right: 5px;
}

.filters-container.editingProjectMode .priorityFilter,
.filters-container.editingProjectMode .projNameFilter {
    display: none;
}
/*#endregion*/

.ppln_container.unselectable {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

/* Main container for Pipeline page */
@-moz-keyframes rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.main_ppl_container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ppln_container {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    /* padding-left: 20px; */
    /* padding-right: 10px; */
    overflow: hidden;
}

    .main_ppl_container .pdfOptionsContainer {
        position: fixed;
        bottom: 88px;
        right: 30px;
        display: flex;
    }

        .main_ppl_container .pdfOptionsContainer .printButtonContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 54px;
            height: 54px;
            background: #5774E7;
            box-shadow: 0px 4px 8px rgba(1, 26, 126, 0.2);
            border-radius: 50%;
            margin-right: 20px;
        }

            .main_ppl_container .pdfOptionsContainer .printButtonContainer:hover {
                background: #4659BF;
                cursor: pointer;
            }

        .main_ppl_container .pdfOptionsContainer .exitPrintPDFModeButtonContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 54px;
            height: 54px;
            background: #5774E7;
            box-shadow: 0px 4px 8px rgba(1, 26, 126, 0.2);
            border-radius: 50%;
        }

            .main_ppl_container .pdfOptionsContainer .exitPrintPDFModeButtonContainer:hover {
                background: #4659BF;
                cursor: pointer;
            }

            @media print {
                .main_ppl_container .pdfOptionsContainer,
                .ppln_container #tabs #futureLoadContainer.futureLoadContainerStyleForPDFModeQEM,
                .ppln_container #tabs #futureLoadContainer.futureLoadContainerStyleForPDFModePipeline {
                    display: none !important;
                }
            }

    .ppln_container.isPrintingMode {
        padding-left: 0px;
        padding-right: 0px;
        overflow: visible;
    }

	.ppln_container.isPrintingMode.editingProjectMode {
		position: absolute;
		top: 0;
	}


        .ppln_container.isPrintingMode .ganttChart .rightSection *,
        .ppln_container.isPrintingMode .projectPipe *,
        .ppln_container.isPrintingMode .projectNameAndActionsSection .priority,
        .ppln_container.isPrintingMode .projectNameAndActionsSection .projectName,
        .ppln_container.isPrintingMode .projectNameAndActionsSection .actionButtonsContainer,
        .ppln_container.isPrintingMode .projectNameAndActionsSection .draggingAreaRect,
        .ppln_container.isPrintingMode .phasesChart *,
        .ppln_container.isPrintingMode .ganttChart .leftSection  .nodeInfoWrapper .nodePriority *,
        .ppln_container.isPrintingMode .ganttChart .leftSection  .nodeInfoWrapper .nodeName *,
        .ppln_container.isPrintingMode .ganttChart .leftSection  .nodeInfoWrapper .threeDotsMenuGroup *,
        .ppln_container.isPrintingMode .stepsTableComponent .stepsTableRow .stepsTableCellContainer:not(.nameCell) *,
        .ppln_container.isPrintingMode .stepsTableComponent .stepsTableRow .stepsTableCellContainer:not(.nameCell),
        .ppln_container.isPrintingMode .stepsTableComponent .stepsTableRow .stepsTableCellContainer.nameCell .iconsContainer {
            pointer-events: none !important;
            /*PDF*/
            color: transparent !important;
            text-shadow: 0 0 #4a4a4a!important;
        }

    .ppln_container .taskCard,
    .ppln_container .summaryCard,
    .ppln_container .milestoneCard,
    .ppln_container .projectGroupCard {
        position: relative;
        /* TaskCard has fixed width, configured by dragging splitter */
        flex: 0 0 auto;
        /* TaskCard should never be less than 445px(two columns + columnsSplitter + TaskCard borders + taskCardSplitter), even if it goes out of bounds */
        min-width: 445px;
        /* Turned off because of the case with the "Assignments" component in left column of a card */
        /* overflow: hidden; */
        z-index: 7;
    }

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

    .main_ppl_container.taskCardSplitterDragInProgress #todayWrapper {
        display: none;
    }

    /*While changing task card do not allow to click on pipeline elements*/
    .ppln_container.withoutPointerEvents  .project,
    .ppln_container.withoutPointerEvents  .project *,
    .ppln_container.withoutPointerEvents .stepsTableComponentWrapper * {
        pointer-events: none;
    }

    .ppln_container.editingProjectMode .tongue#futureLoadTab,
    .ppln_container.editingProjectMode #newProjectsContainer,

    .ppln_container.editingProjectMode #resourceFilterContainer,
    .ppln_container.editingProjectMode .futureLoadChartHeader {
        display: none;
    }

    .ppln_container.editingProjectMode .flowGraphContainer {
        top: 0;
    }

    .ppln_container #tabs {
        position: relative;
        height: 100%;
        flex: 1 1 auto;
        min-width: 565px;
    }

        .main_ppl_container #todayWrapper {
            position: absolute;
            pointer-events: none;
            z-index: 6;
            width: 100%;
            height: 100%;
            /* Since all other pipeline containers have border-left 1px, let's add margin-left, so that all DOM elements are aligned
               This is done, so that all containers can use the same xScaleMain.range() without subtracting/adding 1px */
            margin-left: 1px;
            top: 0px;
        }

        .main_ppl_container #todayWrapper.overTheTable {
            z-index: 6;
        }

            .main_ppl_container #todayWrapper #today {
                overflow: visible;
                position: absolute;
                top: 0px;
            }

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

                .main_ppl_container #todayWrapper #today #todayTextContainer rect,
                .main_ppl_container #todayWrapper #today #todayTextContainer circle.borderRadius {
                    fill: #5774e7;
                    z-index: 6;
                }

                .main_ppl_container #todayWrapper #today #todayTextContainer {
                    cursor: pointer;
                }

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

                .main_ppl_container #todayWrapper #today .goBack,
                .main_ppl_container #todayWrapper #today .goForward {
                    cursor: pointer;
                    display: none;
                    pointer-events: all;
                }



            .ppln_container #tabs #topAxisContainer > text {
                font-family: GlowRegular;
                font-size: 12px;
                color: #b6b6b6;
            }

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

                .ppln_container #tabs label {
                    margin-bottom: 0px;
                    margin-top: 10px;
                }

            .ppln_container #tabs svg#topAxisContainer {
                display: block;
                border-bottom: solid 1px #dcdcdc;
            }

			.ppln_container.isPrintingMode #tabs svg#topAxisContainer {
				position: absolute;
				top: 0;
			}

	/* Top Pipeline Axis */
                .ppln_container #tabs svg#topAxisContainer g.axis {
                }

                    .ppln_container #tabs svg#topAxisContainer g.axis .tick {
                    }

                        .ppln_container #tabs svg#topAxisContainer g.axis .tick line {
                            shape-rendering: crispEdges;
                            stroke: #dcdcdc;
                            stroke-width: 1;
                        }

                        .ppln_container #tabs svg#topAxisContainer g.axis .tick text {
                            font-family: GlowRegular;
                            font-size: 12px;
                            fill: #b6b6b6;
                            text-anchor: start !important;
                        }

                        .ppln_container #tabs svg#topAxisContainer g.axis .tick.dark text {
                            fill: #808080;
                        }

                    .ppln_container #tabs svg#topAxisContainer g.axis path.domain {
                        shape-rendering: crispEdges;
                        fill: none;
                        stroke: #dcdcdc;
                        stroke-width: 1px;
                        display: none;
                    }

            .ppln_container .activeProjectsTitle {
                position: absolute;
                z-index: 2;
                display: flex;
                height: 40px;
                padding-top: 10px;
                padding-left: 20px;
                top: 0;
                width: 100%;
            }

                .ppln_container .activeProjectsTitle .title {
                    font-family: GlowSemibold;
                    font-size: 14px;
                    color: #4a4a4a;
                }

            .ppln_container .createNewButtonContainer {
                width: 113px;
                font-size: 13px;
                font-family: GlowRegular;
                text-align: left;
                letter-spacing: initial;
                cursor: pointer;
                margin-left: 40px;
            }

                .ppln_container .createNewButtonContainer img {
                    vertical-align: top;
                    margin-top: 5px;
                    margin-right: 5px;
                }

                .ppln_container .createNewButtonContainer.disabled {
                    cursor: default;
                }

                .ppln_container .createNewButtonContainer.disabled img {
                    opacity: 0.4;
                }

        .ppln_container #tabs .tabSection {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .ppln_container #tabs .futureLoadContainer .tabSection {
            overflow: visible;
        }

        .ppln_container #tabs #projectsInPipelineWrapperWithTopAxis {
            background: #ffffff;
            border: solid 1px #dcdcdc;
            border-bottom: 2px solid transparent;
            overflow-x: hidden;
			overflow-y: hidden;
            position: relative;
        }

            .ppln_container.isPrintingMode #tabs #projectsInPipelineWrapperWithTopAxis {
				border: none;
            }

.ppln_container #tabs #projectsInPipelineWrapperWithTopAxis.dropable,
.ppln_container #tabs #newProjectsContainer.dropable #projectsOutOfPipelineWrapper,
.ppln_container #tabs #closedProjectsContainer.dropable #closedProjectsWrapper {
    border: 1px solid #5774e7 !important;
    border-bottom: 4px solid #5774e7 !important;
}

        .ppln_container #tabs #projectsInPipelineWrapper {
            position: relative;
        }

            .ppln_container.isPrintingMode #tabs #projectsInPipelineWrapper {
                height: auto !important;
				padding-bottom: 80px;
				overflow-y: visible !important;
            }

			.ppln_container.isPrintingMode #tabs #projectsInPipeline {
				top: 41px !important;
			}

            .ppln_container #tabs .moduleLibraryWrapper {
                position: absolute;
                width: auto;
                background: #FDFDFD;
                height: 100%;
                z-index: 6;
                top: 1px;
                border-left: 1px solid #DCDCDC;
                border-right: 1px solid #DCDCDC;
            }

            .ppln_container #tabs .stepsTableComponentWrapper {
                position: absolute;
                /*overflow-x: scroll;*/
                overflow-x: hidden;
                z-index: 3;
                left: 1px;
                overflow-y: hidden;
                top: 1px;
                background-color: #FDFDFD;
            }

            .ppln_container #tabs .stepsTableComponentWrapper .stepsTableComponentWrapperScrollable {
                height: 100%;
                width: 100%;
                position: relative;
            }

            .ppln_container #tabs .stepsTableComponent {
                position: absolute;
                top: 40px;
                z-index: 3;
                overflow-y: hidden;
                background-color: #fdfdfd;
                opacity: 1 !important;
            }

                .ppln_container #tabs .stepsTableComponent.isPrintingMode {
                    background-color: #fdfdfd !important;
                    /*Required for make it visible in PDF*/
                    box-shadow: inset 0 0 0 100vh #fdfdfd !important;
					top: 41px !important;
                }

            .ppln_container #tabs .stepsTableComponentBackground {
                background-color: #fdfdfd;
                position: fixed;
                height: 100%;
                z-index: 2;
            }

            .ppln_container #tabs .stepsTableComponentSplitter {
                position: absolute;
                height: 100%;
                top: 41px;
                z-index: 4;
                width: 9px;
                background-color: transparent;
                cursor: ew-resize;
                padding-left: 4px;
            }

                .ppln_container #tabs .stepsTableComponentSplitter.hideToOverlapInput {
                    z-index: 2;
                }

            .ppln_container #tabs .ganttChartLoaderContainer {
                background: #FDFDFD;
                position: absolute;
                width: 100%;
                z-index: 4;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: inset 0 1px 0 0 #dcdcdc, inset -1px 0 0 #dcdcdc;
            }

                .ppln_container #tabs .ganttChartLoaderContainer .notRunContainer {
                    text-align: center;
                }

                .ppln_container #tabs .ganttChartLoaderContainer .messageText {
                    color: #808080;
                    font-family: GlowRegular;
                    font-size: 13px;
                    margin-bottom: 10px;
                }

                .ppln_container #tabs .ganttChartLoaderContainer .ui-btn-dark {
                    width: 120px;
                }

            .ppln_container #tabs .rightLineForHeader {
                width: 1px;
                height: 41px;
                background: #dcdcdc;
                position: absolute;
                z-index: 5;
            }

            .ppln_container #tabs .stepsTableComponentSplitter .line {
                height: 100%;
                width: 1px;
                background: #ececec;
            }

                .ppln_container #tabs .stepsTableComponentSplitter.isPrintingMode .line {
                    /*Required for make it visible in PDF*/
                    box-shadow: inset 0 0 0 100vh #ececec !important;
                }

            .ppln_container #tabs .stepsTableComponentSplitter:hover .line {
                background: #5774e7;
            }

        .ppln_container #tabs #newProjectsContainer {
            position: absolute;
            width: 100%;
        }

            .ppln_container #tabs #newProjectsContainer #projectsOutOfPipelineWrapperBackground {
                height: 130px;
                background: #f7f7f7;
            }

.ppln_container #tabs #newProjectsContainer #projectsOutOfPipelineWrapper {
    background: #f7f7f7;
    border: solid 1px #dcdcdc;
    border-bottom: 2px solid transparent;
    overflow-x: hidden;
    width: 100%;
}

.ppln_container #tabs #closedProjectsContainer {
    position: absolute;
    width: 100%;
    z-index: 4;
}

.ppln_container #tabs #closedProjectsContainer #closedProjectsWrapperBackground {
    height: 130px;
    background: #f7f7f7;
}

.ppln_container #tabs #closedProjectsContainer #closedProjectsWrapper {
    background: #FAF9F9;
    border: solid 1px #dcdcdc;
    border-bottom: 2px solid transparent;
    overflow-x: hidden;
    width: 100%;
}

.ppln_container #tabs #verticalLinesInPipelineWrapper,
.ppln_container #tabs #verticalLinesOutOfPipelineWrapper,
.ppln_container #tabs #verticalLinesClosedProjectsWrapper {
    position: fixed;
    height: 100%;
    width: 100%;
}

.ppln_container.isPrintingMode #tabs #verticalLinesInPipelineWrapper {
                position: absolute;
            }

.ppln_container #tabs #verticalLinesInPipelineWrapper #verticalLinesInPipeline,
.ppln_container #tabs #verticalLinesOutOfPipelineWrapper #verticalLinesOutOfPipeline,
.ppln_container #tabs #verticalLinesClosedProjectsWrapper #verticalLinesClosedProjects {
    position: absolute;
    /* Vertical lines will go till the bottom of the page, so that
    when tab is resized, vertical lines are already rendered */
    height: 100%;
    width: 100%;
}

.ppln_container .verticalLinesInPipelineSeparatorContainer .verticalLinesInPipelineSeparator {
	stroke: #DCDCDC;
}

.ppln_container.editingProjectMode .verticalLinesInPipelineSeparatorContainer .verticalLinesInPipelineSeparator {
	display: none;
}

.ppln_container #tabs #verticalLinesInPipelineWrapper #verticalLinesInPipeline g.tickLines,
.ppln_container #tabs #verticalLinesOutOfPipelineWrapper #verticalLinesOutOfPipeline g.tickLines,
.ppln_container #tabs #verticalLinesClosedProjectsWrapper #verticalLinesClosedProjects g.tickLines {
}

.ppln_container #tabs #verticalLinesInPipelineWrapper #verticalLinesInPipeline g.tickLines line.tickLine,
.ppln_container #tabs #verticalLinesOutOfPipelineWrapper #verticalLinesOutOfPipeline g.tickLines line.tickLine,
.ppln_container #tabs #verticalLinesClosedProjectsWrapper #verticalLinesClosedProjects g.tickLines line.tickLine {
    shape-rendering: crispEdges;
    stroke-width: 1;
}

.ppln_container #tabs #verticalLinesInPipelineWrapper #verticalLinesInPipeline g.tickLines line.tickLine {
    stroke: #f5f5f5;
    fill: #f5f5f5;
}

.ppln_container #tabs #verticalLinesOutOfPipelineWrapper #verticalLinesOutOfPipeline g.tickLines line.tickLine,
.ppln_container #tabs #verticalLinesClosedProjectsWrapper #verticalLinesClosedProjects g.tickLines line.tickLine {
    stroke: #f0f0f0;
    fill: #f5f5f5;
}

.ppln_container #tabs #verticalLinesInPipelineWrapper #verticalLinesInPipeline g.dayOffs rect.dayOffRect,
.ppln_container #tabs #verticalLinesOutOfPipelineWrapper #verticalLinesOutOfPipeline g.dayOffs rect.dayOffRect,
.ppln_container #tabs #verticalLinesClosedProjectsWrapper #verticalLinesClosedProjects g.dayOffs rect.dayOffRect {
    fill: #dcdcdc;
    fill-opacity: 0.2;
}

.ppln_container #tabs #projectsInPipeline,
.ppln_container #tabs #projectsOutOfPipeline,
.ppln_container #tabs #closedProjects {
    position: relative;
    padding-top: 10px;
    /*show in case if element is out of bounds*/
    overflow: visible;
}

.ppln_container #tabs #projectsInPipeline .projects .project .projectNameAndActionsSection.isPrintingModeForQEM,
.ppln_container #tabs #projectsInPipeline .projects .project .leftSection.isPrintingModeForQEM,
.ppln_container #tabs #projectsInPipeline .projects .project .leftPhasesSection.isPrintingModeForQEM {
    opacity: 0 !important;
}

.ppln_container #tabs .tongue#newProjectsTab {
    left: 204px;
    width: 93px;
}

.ppln_container #tabs .tongue#closedProjectsTab {
    left: 113px;
    width: 92px;
    background: #FAF9F9;
}

.ppln_container #tabs .tongue#futureLoadTab {
    background-color: #fdfdfd;
}

.ppln_container #tabs .tongue.ui-draggable-handle {
    cursor: grab;
}

.ppln_container #tabs .tongue.ui-draggable-handle:active {
            cursor: grabbing;
        }

        /* This media query is using in order to detect IE 10 and 11,
        because cursor: grab and grabbing is not support by them */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            .ppln_container #tabs .tongue.ui-draggable-handle {
                cursor: ns-resize;
            }
        }

        .ppln_container #tabs .tongue {
            width: 114px;
            height: 30px;
            display: inline-block;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border: solid 1px #dcdcdc;
            border-bottom: none;
            background-color: #f7f7f7;
            position: absolute;
            left: 0;
            right: 0;
            margin-top: -29px;
        }

            .ppln_container #tabs .tongue.unmappedResourcesTongue {
                margin-left: -5px;
                background-color: #f5f5f5;
            }

            .ppln_container #tabs .tongue.futureLoadTongue {
                background-color: #fdfdfd;
            }

            .ppln_container #tabs .tongue .tongueContent {
                padding: 0 12px;
                margin-top: 3px;
                width: 100%;
            }

                .ppln_container #tabs .tongue .tongueContent .tongueTitle {
                    font-family: GlowSemibold;
                    font-size: 13px;
                    color: #4a4a4a;
                }

                .ppln_container #tabs .tongue .tongueContent .tongueIcon {
                    display: inline-block;
                    float: right;
                }

        .ppln_container #tabs #futureLoadContainer {
            position: absolute;
            width: 100%;
            bottom: 0 !important;
            z-index: 6;
        }

            .ppln_container #tabs #futureLoadContainer.futureLoadContainerStyleForPDFModeQEM {
                position: fixed !important;
                height: 58px !important;
                bottom: 0 !important;
                z-index: 1000 !important;
            }

                .ppln_container #tabs #futureLoadContainer.futureLoadContainerStyleForPDFModePipeline {
                    position: fixed !important;
                    height: 58px !important;
                    bottom: 0 !important;
                    top: auto !important;
                }

            .ppln_container.editingProjectMode #tabs #futureLoadContainer #futureLoadGraphWrapper {
                padding-top: 10px;
                background-color: #ECECEC;
            }

            .ppln_container #tabs #futureLoadContainer #futureLoadGraphWrapper {
                border: solid 1px #dcdcdc;
                z-index: 101;
                bottom: 0;
                width: 100%;
                /*font-size: 0; this makes inline children be closer to each other. VAVILOV: This attribute makes a Back button to go a bit down in pipeline tab -> Future load.*/
                overflow: hidden;
                background-color: #ffffff;
                height: 100% !important;
            }

            .ppln_container #tabs #futureLoadContainer.futureLoadContainer-Pipeline #futureLoadGraphWrapper {
               overflow: visible;
               left: 260px;
            }

                .ppln_container #tabs #futureLoadContainer #futureLoadGraphWrapper #resourceFilterContainer {
                    position: relative;
                    float: left;
                    width: 260px;
                    height: 100%;
                }

                    .ppln_container #tabs #futureLoadContainer #futureLoadGraphWrapper #resourceFilterContainer #resourceFilter {
                        height: 100%;
                    }

                .ppln_container #tabs #futureLoadContainer.futureLoadContainer-Pipeline .flowGraphMainContainer{
                    min-width: 50px;
                    overflow: visible;
                }

                .ppln_container.editingProjectMode #tabs #futureLoadContainer.futureLoadContainer-Pipeline .flowGraphMainContainer{
                    left: 0px !important;
                    max-width: 100% !important;
                }

    .ppln_container .mileStoneMovedApplyCancelDialog {
        width: 180px;
        height: 36px;
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
        display: inline-flex;
        position: absolute;
        top: 63px;
        left: 59px;
        cursor: pointer;
        font-family: GlowSemibold;
        display: table;
        z-index: 999;
    }

        .ppln_container .mileStoneMovedApplyCancelDialog .cancelButton {
            padding-right: 23px;
            padding-left: 26px;
            margin-right: 63px;
            display: table-cell;
            text-align: center;
            cursor: pointer;
            height: 100%;
            vertical-align: middle;
            border-right: 1px #EEEEEE solid;
            color: #ec4a43;
            min-width: 60px;
            font-family: GlowRegular;
            font-size: 12px;
            font-weight: 600;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.33;
            letter-spacing: -0.2px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

            .ppln_container .mileStoneMovedApplyCancelDialog .cancelButton:hover {
                background-color: #f4f5fc;
            }

        .ppln_container .mileStoneMovedApplyCancelDialog .applyButton {
            padding-left: 28px;
            padding-right: 29px;
            margin-left: 23px;
            display: table-cell;
            text-align: center;
            cursor: pointer;
            height: 100%;
            vertical-align: middle;
            font-family: GlowRegular;
            font-size: 12px;
            font-weight: 600;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.33;
            letter-spacing: -0.2px;
            text-align: center;
            color: #5774e7;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

            .ppln_container .mileStoneMovedApplyCancelDialog .applyButton:hover {
                background-color: #f4f5fc;
            }

    .ppln_container #tabs .ui-helper-hidden-accessible {
        display: none;
    }

    .loadAnalysis__background {
        position: absolute;
        top: 40px;
        height: calc(100% - 40px);
        background: rgba(182, 182, 182, 0.1);
        pointer-events: none;
        z-index: 1;
    }

    .loadAnalysis__background svg {
        width: 100%;
        height: 100%;
    }

    .loadAnalysis__background svg.loadAnalysis__svg line {
        shape-rendering: crispEdges;
        stroke: rgba(182, 182, 182, 0.4);
        stroke-width: 1px;
        stroke-dasharray: 6, 6;
        min-width: 1px;
    }

    /*Global styles*/

    .ppln_container .project .pipe {
    }

        .ppln_container .project .pipe .pipeRect {
            cursor: pointer;
        }

        .ppln_container .project .pipe .selectedPipeWithBackgroud {
            fill: #EEEFF6 !important;
        }

        .ppln_container .project .pipe .diamondBorder {
            fill: #ffffff;
        }

            .ppln_container .project .pipe .diamondBorder.diamondBorderOutOfPipeline {
                fill: #f7f7f7;
            }

        .ppln_container .project .pipe .mileStoneGroup {
        }

            .ppln_container .project .pipe .mileStoneGroup .projectMileStoneDraggingCursorStyle,
            .ppln_container .project-group .pipe .mileStoneGroup .projectMileStoneDraggingCursorStyle,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .projectMileStoneDraggingCursorStyle {
                cursor: ew-resize;
            }

            .ppln_container .project .pipe .mileStoneGroup.selectable,
            .ppln_container .project-group .pipe .mileStoneGroup.selectable,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup.selectable {
                cursor: pointer;
            }


			.ppln_container .project .pipe .mileStoneGroup .leveled-milestone-line,
			.ppln_container .project-group .pipe .mileStoneGroup .leveled-milestone-line,
			.ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .leveled-milestone-line {
				fill: #B6B6B6;
			}

			.ppln_container .project .pipe .mileStoneGroup .arrow-right,
			.ppln_container .project-group .pipe .mileStoneGroup .arrow-right,
			.ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .arrow-right {
				fill: #ffffff;
				fill-opacity: 0;
				stroke: #808080;
			}

            .ppln_container .project .pipe .mileStoneGroup .mileStoneLine,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneLine,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneLine {
                fill: #ffffff;
            }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneLine.isOutOfPipeline,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneLine.isOutOfPipeline {
                    fill: #f7f7f7;
                }

            .ppln_container .project .pipe .mileStoneGroup.hidden-line .mileStoneLine,
            .ppln_container .project-group .pipe .mileStoneGroup.hidden-line .mileStoneLine {
                display: none;
            }

            .ppln_container .project .pipe .mileStoneGroup .mileStoneBorder,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneBorder,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneBorder {
                fill: #ffffff;
            }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneBorder.isOutOfPipeline,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneBorder.isOutOfPipeline {
                    fill: #f7f7f7;
                }

            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.green,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.green,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.green {
                fill: #0ac200;
            }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.green.beforeToday,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.green.beforeToday,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.green.beforeToday {
                    fill: #C4F0C2;
                }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.green.grayedOut,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.green.grayedOut,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.green.grayedOut {
                    fill: #b6b6b6;
                }

            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.blue,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.blue,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.blue {
                fill: #0090ff;
            }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.blue.beforeToday,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.blue.beforeToday,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.blue.beforeToday {
                    fill: #C2E4FF;
                }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.blue.grayedOut,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.blue.grayedOut,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.blue.grayedOut {
                    fill: #b6b6b6;
                }

            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.red,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.red,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.red {
                fill: #ff002b;
            }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.red.beforeToday,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.red.beforeToday,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.red.beforeToday {
                    /*fill: #FFC2CC;*/
                }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.red.grayedOut,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.red.grayedOut,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.red.grayedOut {
                    fill: #b6b6b6;
                }

            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.yellow,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.yellow,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.yellow {
                fill: #ffb400;
            }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.yellow.grayedOut,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.yellow.grayedOut,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.yellow.grayedOut {
                    fill: #FFEDC2;
                }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.yellow.grayedOut,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.yellow.grayedOut,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.yellow.grayedOut {
                    fill: #b6b6b6;
                }

                .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.grayedOut.baseline,
                .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.grayedOut.baseline {
                    fill: #808080;
                }

            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamondSelectionArea,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamondSelectionArea,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamondSelectionArea {
                fill: #ffffff;
            }

            .ppln_container .project .pipe .mileStoneGroup .changedMilestoneMark,
            .ppln_container .project-group .pipe .mileStoneGroup .changedMilestoneMark,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .changedMilestoneMark {
                fill: #ff7c10;
                stroke-width: 2;
                stroke: #ffffff;
            }

                .ppln_container .project .pipe .mileStoneGroup .changedMilestoneMark.isOutOfPipeline,
                .ppln_container .project-group .pipe .mileStoneGroup .changedMilestoneMark.isOutOfPipeline {
                    stroke: #f7f7f7;
                }

                .ppln_container .project .pipe .mileStoneGroup .changedMilestoneMark.selectedPipeWithStroke,
                .ppln_container .project-group .pipe .mileStoneGroup .changedMilestoneMark.selectedPipeWithStroke {
                    stroke: #EEEFF6;
                }

            .ppln_container .project .pipe .mileStoneGroup.hidden-by-color-filter,
            .ppln_container .project-group .pipe .mileStoneGroup.hidden-by-color-filter {
                display: none;
            }

            .ppln_container .project .pipe .mileStoneGroup.mileStoneRangeBeforeToday .mileStoneDiamond,
            .ppln_container .project-group .pipe .mileStoneGroup.mileStoneRangeBeforeToday .mileStoneDiamond {
                fill: #b6b6b6;
            }

            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.green.hasCorruptedRanges,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.green.hasCorruptedRanges,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.green.hasCorruptedRanges,
            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.blue.hasCorruptedRanges,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.blue.hasCorruptedRanges,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.blue.hasCorruptedRanges,
            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.red.hasCorruptedRanges,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.red.hasCorruptedRanges,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.red.hasCorruptedRanges,
            .ppln_container .project .pipe .mileStoneGroup .mileStoneDiamond.yellow.hasCorruptedRanges,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStoneDiamond.yellow.hasCorruptedRanges,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStoneDiamond.yellow.hasCorruptedRanges {
                fill: #4a4a4a;
            }

            .ppln_container .project .pipe .mileStoneGroup .mileStonesCountAndType,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStonesCountAndType,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStonesCountAndType {
                font-family: GlowBold;
                font-size: 9px;
                fill: #4a4a4a;
            }

            .ppln_container .project .pipe .mileStoneGroup .mileStonesCountAndType.baseline,
            .ppln_container .project-group .pipe .mileStoneGroup .mileStonesCountAndType.baseline,
            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .mileStoneGroup .mileStonesCountAndType.baseline {
                font-family: 'GlowSemiBold';
                font-size: 10px;
                fill: #4A4A4A;
            }

        .ppln_container .project .pipe .rangesGroup .corruptedRangesGroup .range,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.rangeWithWrongDates,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.rangeWithWrongDates,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.rangeWithWrongDates,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.rangeWithWrongDates {
            fill: #6e6e6e;
        }

            .ppln_container .project .pipe .rangesGroup .corruptedRangesGroup .range:hover {
                fill: #4a4a4a;
            }

    .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range {
        cursor: pointer;
    }

    .ppln_container .project .pipe .rangesGroup .grayRangesGroup .range {
        fill: #dcdcdc;
    }
    .ppln_container .project .pipe .rangesGroup .baselineGroup .range {
        fill: rgb(220, 220, 220);

    }

    .ppln_container .project .pipe .rangesGroup .greenRangesGroup .range,
    .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.green {
        fill: #6CDA66;
    }

        .ppln_container .project .pipe .rangesGroup .greenRangesGroup .range:hover,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.green.hovered {
            fill: #0AC200;
        }

    .ppln_container .project .pipe .rangesGroup .blueRangesGroup .range,
    .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.blue {
        fill: #66BCFF;
    }

        .ppln_container .project .pipe .rangesGroup .blueRangesGroup .range:hover,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.blue.hovered {
            fill: #0090FF;
        }

    .ppln_container .project .pipe .rangesGroup .yellowRangesGroup .range,
    .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.yellow {
        fill: #FFD266;
    }

        .ppln_container .project .pipe .rangesGroup .yellowRangesGroup .range:hover,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.yellow.hovered {
            fill: #ffb400;
        }

    .ppln_container .project .pipe .rangesGroup .redRangesGroup .range,
    .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.red {
        fill: #FF667F;
    }

        .ppln_container .project .pipe .rangesGroup .redRangesGroup .range:hover,
        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.red.hovered {
            fill: #ff002b;
        }

    .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.grey {
        fill: #dcdcdc;
    }

        .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.grey.hovered {
            fill: #808080;
        }

    .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .range.rangeWithWrongDates.hovered {
        fill: #4a4a4a;
    }

    .ppln_container .project .pipe .rangesGroup .transparentRangesGroup {
    }

        .ppln_container .project .pipe .rangesGroup .transparentRangesGroup .range.red {
            fill: #FFC2CC;
        }

        .ppln_container .project .pipe .rangesGroup .transparentRangesGroup .range.yellow {
            fill: #FFEDC2;
        }

        .ppln_container .project .pipe .rangesGroup .transparentRangesGroup .range.green {
            fill: #C4F0C2;
        }

        .ppln_container .project .pipe .rangesGroup .transparentRangesGroup .range.blue {
            fill: #C2E4FF;
        }


        .ppln_container .project .pipe .rangesGroup .transparentRangesGroup .range.hidden-by-color-filter,
        .ppln_container .project .pipe .rangesGroup .greenRangesGroup .range.hidden-by-color-filter,
        .ppln_container .project .pipe .rangesGroup .blueRangesGroup .range.hidden-by-color-filter,
        .ppln_container .project .pipe .rangesGroup .yellowRangesGroup .range.hidden-by-color-filter,
        .ppln_container .project .pipe .rangesGroup .redRangesGroup .range.hidden-by-color-filter,
        .ppln_container .project .pipe .rangesGroup .notEstimatedRangesGroup .range.hidden-by-color-filter,
        .ppln_container .project .pipe .rangesGroup .grayRangesGroup .range.hidden-by-color-filter,
        .ppln_container .project .pipe .rangesGroup .corruptedRangesGroup .range.hidden-by-color-filter {
            visibility: hidden;
        }

    .ppln_container .project .pipe .range-on-top-of-all .range.red {
        fill: #ff002b;
    }

    .ppln_container .project .pipe .range-on-top-of-all .range.yellow {
        fill: #ffb400;
    }

    .ppln_container .project .pipe .range-on-top-of-all .range.green {
        fill: #0AC200;
    }

    .ppln_container .project .pipe .range-on-top-of-all .range.blue {
        fill: #0090FF;
    }

    .ppln_container .project .pipe .range-on-top-of-all .range.black {
        fill: #4a4a4a;
    }

    .ppln_container .project .pipe .range-on-top-of-all .range.grey {
        fill: #808080;
    }

    .ppln_container .project .pipe rect.loadAnalysisWork__rect {
        fill: rgba(245, 245, 245, 0.8);
        height: 18px;
        width: 59px;
        pointer-events: none;
    }

    .ppln_container .project .pipe text.loadAnalysisWork__text {
        fill: #4A4A4A;
        font-size: 12px;
        font-family: GlowSemiBold;
        pointer-events: none;
    }

    .ppln_container #draggingProjects {
        cursor: move;
        position: absolute;
        padding: 5px;
        border-radius: 4px;
        background-color: white;
        -webkit-box-shadow: 0px 5px 12px 0px #bcbcbc;
        -moz-box-shadow: 0px 5px 12px 0px #bcbcbc;
        box-shadow: 0px 5px 12px 0px #bcbcbc;
    }

    .ppln_container .remainingwork {
        fill: #4a4a4a;
        font-size: 12px;
        font-family: GlowSemiBold;
        pointer-events: none;
    }

    .ppln_container .remainingwork {
        display: none;
    }

        .ppln_container .remainingwork.visible {
            display: block;
        }

    .ppln_container .completedwork {
        fill: #808080;
        font-size: 12px;
        font-family: GlowSemiBold;
        pointer-events: none;
    }

    .ppln_container .completedwork {
        display: none;
    }

        .ppln_container .completedwork.visible {
            display: block;
        }

    .ppln_container svg line {
        stroke: rgb(200,200,200);
    }

    .ppln_container svg > text {
        fill: rgb(150,150,150);
        font-family: sans-serif;
        font-size: 11px;
    }

    .ppln_container .background {
        visibility: visible;
        fill: #dfdfe0;
    }

    .ppln_container .overlay {
        fill: none;
        pointer-events: all;
    }

    .main_ppl_container .focus line,
    .main_ppl_container .focusTop line {
        stroke-width: 1px;
        stroke: #5774e7;
        fill: #5774e7;
    }

    .ppln_container .priorityText {
        font-size: 13px;
        font-family: "GlowBold";
    }

    .ppln_container .priorityColorDragging {
        display: table-cell;
        vertical-align: middle;
    }

    .ppln_container .priorityTextDragging {
        font-size: 13px;
        font-family: "GlowBold";
        display: table-cell;
        vertical-align: middle;
        padding-left: 10px;
        width: 35px;
        text-align: right;
    }

    .ppln_container .projectNameDragging {
        display: table-cell;
        vertical-align: middle;
        padding-left: 10px;
    }

    .ppln_container .priorityPromt {
        height: 18px;
        display: none;
        font-size: 13px;
        font-family: "GlowBold";
        position: absolute;
        border-radius: 2px;
        padding-left: 4px;
        padding-right: 4px;
        color: #ffffff;
        cursor: pointer;
    }

    .ppln_container .priorityOutOfPipeline {
        opacity: 0.5;
    }

    .ppln_container .pencilContainer {
        pointer-events: all;
    }

        .ppln_container .pencilContainer rect.gExpander {
            /* These two styles are used to catch mouse */
            fill: none;
            pointer-events: all;
        }

    .ppln_container .plusminus,
    .ppln_container .threeDotsMenuGroup,
    .ppln_container .dragicon,
    .ppln_container .pencilContainer,
    .ppln_container .actionButtonsContainer {
        cursor: pointer;
    }

    .ppln_container .projectNameAndActionsSection .threeDotsMenuIcon {
        transform: translate(15px, -6px) rotate(90deg);
    }

    .ppln_container .notSelectable {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                        not supported by any browser */
    }

    .ppln_container .project.NewlyAdded {
        font-weight: 600;
    }

    .ppln_container .project.unprioritized g.priority {
        display: none;
    }

    .ppln_container .project g.projectNameAndActionsSection .expandCollapseArrow {
        cursor: pointer;
    }

    .ppln_container .project .projectName .statusIcon {
        cursor: default;
    }

    .ppln_container .project .projectName text {
        font-family: GlowRegular;
        font-size: 14px;
        fill: #4a4a4a;
    }

    .ppln_container .project .projectName .projectLink:hover {
         text-decoration: none;
    }

        .ppln_container .project .projectName .projectLink:hover text {
            fill: #5774e7;
            cursor: pointer;
        }

    .ppln_container .animatedIcon {
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-animation: rotate 2s linear infinite;
        -moz-animation: rotate 2s linear infinite;
        animation: rotate 2s linear infinite;
    }

    .ppln_container .inner-dropdown-menu {
        display: inline-block;
        margin: 0px 5px;
    }

    .ppln_container .jqx-input-popup.jqx-menu.jqx-menu-vertical.jqx-menu-dropdown {
        background-color: white;
        border: 1px solid #999999;
        border-radius: 3px;
        z-index: 5000;
    }

    .ppln_container .jqx-menu li,
    .ppln_container .jqx-menu-dropdown li a {
        text-decoration: none;
        display: block;
        line-height: 1.5;
        zoom: 1;
        color: #000000;
    }

    /*Styles for ranges directive*/
    .ppln_container .milestone-ranges-container {
        z-index: 999;
        position: absolute;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
        display: none;
    }

        .ppln_container .milestone-ranges-container .milestone-ranges-arrow {
            content: '';
            width: 0;
            height: 0;
            border-bottom: 7px solid #fff;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            position: absolute;
            top: -7px;
            -webkit-filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
            -moz-filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
            -o-filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
            filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
        }

        .ppln_container .milestone-ranges-container #selectAllButton {
            height: 35px;
            text-align: center;
            border-bottom: 1px solid #EBEBEB;
            padding-top: 9px;
            cursor: pointer;
        }

            .ppln_container .milestone-ranges-container #selectAllButton:hover {
                background-color: #f4f5fc;
            }

            .ppln_container .milestone-ranges-container #selectAllButton .buttonText {
                font-family: GlowRegular;
                font-size: 13px;
                color: #5774e7;
                -webkit-touch-callout: none; /* iOS Safari */
                -webkit-user-select: none; /* Safari */
                -khtml-user-select: none; /* Konqueror HTML */
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
            }

        .ppln_container .milestone-ranges-container .milestone-ranges-body {
            max-height: 410px;
        }

            .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges {
                overflow-y: visible;
                overflow-x: hidden;
            }

                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .backgroundRange rect {
                    fill: #e1e6fb;
                }

                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .backgroundRange .startCutting,
                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges .rangeContainer .backgroundRange .endCutting {
                    fill: #ffffff;
                }

                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges #maskBeforeAndAfterToday .slightlyTransparent {
                    fill: #ffffff;
                    opacity: 0.4;
                }

                .ppln_container .milestone-ranges-container .milestone-ranges-body #milestoneRanges #maskBeforeAndAfterToday .notTransparent {
                    fill: #ffffff;
                    opacity: 1;
                }

            .ppln_container .milestone-ranges-container .milestone-ranges-body .todayLine {
                position: absolute;
                border-left: 1px solid #5774e7;
                z-index: 2;
            }

            .ppln_container .milestone-ranges-container .milestone-ranges-body .topBlur {
                position: absolute;
                height: 12px;
                width: 100%;
                pointer-events: none;
                background-image: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%);
                top: 0;
                left: 0;
            }

            .ppln_container .milestone-ranges-container .milestone-ranges-body .bottomBlur {
                position: absolute;
                height: 12px;
                width: 100%;
                pointer-events: none;
                /* Go from completely transparent on the top to completely solid white on the bottom */
                background-image: linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%);
                bottom: 0;
                left: 0;
            }

/*Popup with project info*/
.projectInfo-popup > .modal-dialog {
    width: 840px;
}

.projectInfo-popup.projectInfo-popup--multi-project-teams > .modal-dialog {
    width: 900px;
}

@media (max-height: 900px)   {
    .projectInfo-popup > .modal-dialog {
        margin-top: -30px;
    }
}

    .projectInfo-popup > .modal-dialog > .modal-content {
        min-height: 255px;
        width: 840px;
        background: transparent;
        border: none;
    }

    .projectInfo-popup.projectInfo-popup--multi-project-teams > .modal-dialog > .modal-content {
        width: 900px;
    }

/*This class is applied when dragging a milestone in pipeline page to those projects which the dragging milestone is not related to.*/
.fadedOutProjectOnMilestoneDrag,
.fadedOutProjectGroupOnMilestoneDrag,
.project:not(.fadedOutProjectOnMilestoneDrag) .fadedOutGanttChartOnMilestoneDrag {
    opacity: 0.2;
}

.fadedOutProjectOnMilestoneDrag *,
.fadedOutProjectGroupOnMilestoneDrag *,
.project:not(.fadedOutProjectOnMilestoneDrag) .fadedOutGanttChartOnMilestoneDrag * {
    pointer-events: none !important;
}

.project-group.fadedOutProjectGroupOnMilestoneDrag .project.fadedOutProjectOnMilestoneDrag,
.project-group.fadedOutProjectGroupOnMilestoneDrag .project.fadedOutProjectOnMilestoneDrag * {
    opacity: initial;
}

    .fadedOutGanttChartOnMilestoneDrag .gExpander {
        pointer-events: none !important;
    }

/* Circular button for selecting Milestones in pipeline */
.selectionMilestonesActionsContainer {
    opacity: 0;
    display: none;
    position: absolute;
    /* Container should be above everything else */
    z-index: 9999;
    /*box-shadow: 0 3px 10px 2px rgba(0, 17, 40, 0.3);*/
    /* make text non-selectable for all children elements */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

    .selectionMilestonesActionsContainer .actionButtonWithIcon {
        width: 22px;
        height: 22px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        border-radius: 11px;
        padding-left: 2px;
        margin-left: 0;
        cursor: pointer;
    }

        .selectionMilestonesActionsContainer .actionButtonWithIcon.selectToRightButton img {
            width: 17px;
            height: 8px;
        }

        .selectionMilestonesActionsContainer .actionButtonWithIcon.detachButton img {
            width: 15px;
            height: 13px;
            margin-left: 2px;
        }

        .selectionMilestonesActionsContainer .actionButtonWithIcon.detachButton {
            margin-bottom: 2px;
        }

        .selectionMilestonesActionsContainer .actionButtonWithIcon .buttonLabel {
            font-family: GlowRegular;
            font-size: 11px;
            color: #4a4a4a;
            margin-left: 7px;
            margin-right: 9px;
            opacity: 0;
            display: none;
        }

/* Circular button "Delete Relations" displayed for Gantt. */
.deleteRelationButtonContainer {
    opacity: 0;
    display: none;
    position: absolute;
    /* Container should be above everything else */
    z-index: 9999;
    /*box-shadow: 0 3px 10px 2px rgba(0, 17, 40, 0.3);*/
    /* make text non-selectable for all children elements */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

    .deleteRelationButtonContainer .deleteRelationButton {
        width: 22px;
        height: 22px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        border-radius: 11px;
        padding-left: 5px;
        margin-left: 0;
        cursor: pointer;
    }

        .deleteRelationButtonContainer .deleteRelationButton img {
            width: 12px;
            height:12px;
        }

/* Circular button for selecting Milestones in pipeline */
.circleButtonsContainer {
    opacity: 0;
    display: none;
    position: absolute;
    /* Container should be above everything else */
    z-index: 9999;
    /*box-shadow: 0 3px 10px 2px rgba(0, 17, 40, 0.3);*/
    /* make text non-selectable for all children elements */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

    .circleButtonsContainer .actionButtonWithIcon {
        width: 22px;
        height: 22px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        border-radius: 11px;
        padding-left: 2px;
        margin-left: 0;
        cursor: pointer;
        position: absolute;
    }

        .circleButtonsContainer .actionButtonWithIcon img {
            margin-left: 2px;
        }

        .circleButtonsContainer .actionButtonWithIcon .buttonLabel {
            font-family: GlowRegular;
            font-size: 11px;
            color: #4a4a4a;
            margin-left: 7px;
            margin-right: 9px;
            opacity: 0;
            display: none;
        }

.milestoneDatepickerContainer {
    position: absolute;
    opacity: 0;
}



/*!*--------------------------- Project loader -----------------------------*!*/
.ppln_container .project g.projectNameAndActionsSection .projectLoader {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.ppln_container .project g.projectNameAndActionsSection .projectLoader.fadeAway {
    opacity: 0;
}


.ppln_container #tabs .ganttHorizontalScrollForPrintingModeWrapper {
    /*height: 100px;*/
    position: absolute;
    bottom: 0;
    z-index: 1000;
    /*background-color: red;*/
    overflow: hidden;
}

.ppln_container #tabs .ganttHorizontalScrollForPrintingModeWrapper .ganttHorizontalScrollForPrintingMode {
    height: 100%;
    width: 100%;
    position: relative;
}


#isPrintingModeForHorizontalScroll {
    position: fixed !important;
    bottom: 58px !important;
    top: auto !important;
}

/*Progress bar printing mode*/
.creatingPDFProgressContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFFF;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.creatingPDFProgressContainer.active {
    display: flex;
    opacity: 1;
}

.creatingPDFProgressContainer .progressAndTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.creatingPDFProgressContainer .progressAndTitle .title {
    font-family: GlowRegular;
    font-size: 14px;
    line-height: 20px;
    color: #808080;
    margin-bottom: 12px;
}

.creatingPDFProgressContainer .progressAndTitle .progressBar {
    background: #D6DDFA;
    border-radius: 3px;
    height: 2px;
    width: 200px;
}

.creatingPDFProgressContainer .progressAndTitle .progressBar .progressGoing {
    height: 100%;
    background: #8197ED;
    border-radius: inherit;
    width: 0;
}

.ppln_container .project g.infoIconContainer .InfoIcon {
    cursor: pointer;
    display:none;
}
.ppln_container .project g.infoIconContainer .showInfoIcon {
    display:block;
}


#calculateGanttTitleTextWidth{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

.highlighting-after-changes {
    fill: transparent;
}

.hidden-due-to-overlap {
    display: none;
}

.project.isHighlighted .highlighting-after-changes,
.project.isHighlighted .actionButtonsContainerBackground,
.project.isHighlighted .projectNameAndActionsSectionBackground {
    animation: pulse 5s ease-in;
}

.project.isHighlighted .projectNameAndActionsSectionBackground {
    display: none !important;/*important is used because property display wrote in style of HTML node*/
}

.ppln_container.isPrintingMode #topAxisContainer1 date-scale {
	position: absolute;
	width: 100%
}

div#topAxisContainer1 date-scale {
	display: block;
	position: relative;
    border-bottom: 1px solid #dcdcdc;
}

.ppln_container more-less-toggle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

* {
	page-break-inside: avoid !important; /* Prevent breaks inside the list */
	page-break-after: avoid !important;
	page-break-before: avoid !important;
}

.project.showThreeDotsMenu .projectNameAndActionsSectionBackground {
    fill: rgb(238, 241, 254) !important;
    display: block !important;
}
.project.showThreeDotsMenu .actionButtonsContainerBackground {
    fill: rgb(238, 241, 254) !important;
}

.nodeInfoWrapper.showThreeDotsMenu .gExpander {
    fill: #EEF1FE;
}