.topStepCardContainer {
    position: relative;
    /* TaskCard has fixed width, configured by dragging splitter */
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    /* TaskCard should never be less than 439px(two columns + columnsSplitter + TaskCard borders + taskCardSplitter), even if it goes out of bounds */
    min-width: 445px;
    height: 100%;
}

.step-drag-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #EEF1FEE5;
    border: 2px dashed #5774E7;
    z-index: 10;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.step-drag-overlay.visible {
    opacity: 1;
}

.step-drag-overlay .upload-file {
    margin-bottom: 12px;
}

.step-drag-overlay .upload-file-title {
    color: #4A4A4A;
    font-size: 16px;
    font-family: GlowBold;
    text-align: center;
    margin-bottom: 4px;
}

.step-drag-overlay .upload-file-subtitle {
    font-size: 14px;
    color: #808080;
    font-family: GlowRegular;
    text-align: center;
}

/* Splitter between TaskList and TaskCard */
.stepCardSplitter {
    /* Let Splitter shrink to 0px width, when TaskCard is being closed */
    flex: 0 0 auto;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    z-index: 1;
    position: absolute;
}

/*Do not allow any actions while dragging*/
.stepCard-container.disableActionsWhileFadingOut .bottomTabsWrapper,
.stepCard-container.disableActionsWhileFadingOut .leftColumn,
.stepCard-container.disableActionsWhileFadingOut .rightColumn,
.stepCard-container.disableActionsWhileFadingOut .header,
.stepCard-container.disableActionsWhileFadingOut .menuBtn,
.stepCard-container.disableActionsWhileFadingOut .cardName-container {
     pointer-events: none;
 }

.stepCard-container {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 150px;
    background-color: #ffffff;
    border: solid 1px #dcdcdc;
}

    .stepCard-container .cardHeader {
        display: flex;
        flex: 0 0 auto;
        border-bottom: solid 1px #dcdcdc;
        height: 41px;
        font-family: GlowSemibold;
        font-size: 14px;
        color: #4a4a4a;
    }

        .stepCard-container .cardHeader .actionButtons-container {
            flex: 0 0 auto;
            display: flex;
            padding-top: 8px;
        }

            .stepCard-container .cardHeader .actionButtons-container .settingsBtn,
            .stepCard-container .cardHeader .actionButtons-container .closeBtn,
            .stepCard-container .cardHeader .actionButtons-container .materialToggleButton {
                width: 32px;
                height: 36px;
                text-align: center;
                cursor: pointer;
            }

                .stepCard-container .cardHeader .actionButtons-container .materialToggleButton {
                    display: flex;
                    justify-content: center;
                    padding-top: 3px;
                }

                    .stepCard-container .cardHeader .actionButtons-container .materialToggleButton .icon {
                        background-image: url('../../../../images/shared/materialSignBlue.png');
                        width: 16px;
                        height: 16px;
                    }

                    .stepCard-container .cardHeader .actionButtons-container .materialToggleButton .icon.enabled {
                        background-image: url('../../../../images/shared/materialSign.png');
                    }

            .stepCard-container .cardHeader .actionButtons-container .menuBtn {
                height: 36px;
                text-align: center;
            }

                .stepCard-container .cardHeader .actionButtons-container .menuBtn .menuBtnIcon {
                    display: inline-block;
                    width: 32px;
                    cursor: pointer;
                }

                .stepCard-container .cardHeader .actionButtons-container .menuBtn .menuBtnIcon.disabled {
                    opacity: 0.4;
                    pointer-events: none;
                    cursor: default;
                }

                /* We don't show Settings Button yet */
                .stepCard-container .cardHeader .actionButtons-container .settingsBtn {
                    display: block;
                    margin: 0 3px 0 3px;
                }

                .stepCard-container .cardHeader .actionButtons-container .closeBtn {
                    margin-right: 12px;
                }

        .stepCard-container .cardHeader .cardBack-container {
            border-right: solid 1px #dcdcdc;
            flex: 0 0 83px;
            padding-top: 12px;
            cursor: pointer;
            padding-left: 20px;
        }

            .stepCard-container .cardHeader .cardBack-container .ui-btn-text {
                font-size: 13px;
            }

            .stepCard-container .cardHeader .cardBack-container img{
                transform: rotate(180deg);
            }

        .stepCard-container .cardHeader .cardName-container {
            display: flex;
            flex: 1 1 auto;
            padding-left: 20px;
            position: relative;
            align-items: center;
        }

        .stepCard-container .cardHeader .cardName-container.clickable {
            cursor: pointer;
        }

            .stepCard-container .cardHeader .cardName-container .stepIcon {
                margin-right: 9px;
                margin-left: 2px;
                margin-bottom: 2px;
            }

    .stepCard-container .header{
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        border-bottom: solid 1px #ebebeb;
    }

         .priorityAndName-container {
            display: flex;
            padding-right: 10px;
        }

             .priorityAndName-container .priority-container {
                flex: 0 0 auto;
                display: flex;
                width: 45px;
            }

                 .priorityAndName-container .priority-container .priorityColor {
                    flex: 0 0 auto;
                    height: 42px;
                    width: 2px;
                    margin-top: 7px;
                }

                     .priorityAndName-container .priority-container .priorityColor .priorityDiv {
                        width: 2px;
                        height: 42px;
                        position: absolute;
                    }

                 .priorityAndName-container .priority-container .priorityText {
                    cursor: pointer;
                    flex: 1 0 auto;
                    text-align: right;
                    padding-right: 8px;
                    padding-top: 18px;
                    color: #2e3447;
                    font-size: 14px;
                    font-family: GlowSemibold;
                }

                 .priorityAndName-container .priority-container .stepPriorityPromt {
                    height: 19px;
                    display: none;
                    position: absolute;
                    border-radius: 2px;
                    padding-left: 4px;
                    padding-right: 4px;
                    color: #ffffff;
                }

                     .priorityAndName-container .priority-container .priorityText:hover .stepPriorityPromt {
                        display: inline-block;
                    }

             .priorityAndName-container .stepName-container {
                flex: 1 1 auto;
                padding-right: 10px;
            }

                 .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue {
                    margin-top: 14px;
                    margin-bottom: 10px;
                    display: flex;
                }

                     .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue .nameInfo-container {
                        flex: 1 1 auto;
                        /* IE-specific. IE doesn't shrink elemenent if "flex-basis: auto", it only respects "flex-basis: 0<unit>" */
                        -ms-flex: 1 1 0%;
                        padding: 3px 20px;
                        font-family: GlowSemibold;
                        font-size: 16px;
                        color: #4a4a4a;
                        word-break: break-word;
                        max-height: 72px;
                        /*!*Add 3 dots after 3 rows. Does not work in IE & Firefox*!*/
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        min-height: 29px;
                    }

                    /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                    @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                         .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue .nameInfo-container {
                            word-break: break-all;
                        }
                    }

                    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                         .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue .nameInfo-container {
                            word-break: break-all;
                        }
                    }

                         .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue .nameInfo-container .placeholder {
                            color: #808080;
                            font-family: GlowRegular;
                            font-size: 14px;
                        }

                     .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue.editable:hover{
                        cursor: pointer;
                    }

                     .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue.editable:hover .nameInfo-container {
                        border-radius: 4px;
                        background-color: #f5f5f5;
                        cursor: pointer;
                    }

                     .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue .pencil-container {
                        text-align: right;
                        vertical-align: middle;
                        flex: 0 0 20px;
                        align-self: center;
                    }

                         .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue .pencil-container img {
                            display: none;
                        }

                         .priorityAndName-container .stepName-container .stepName.stepComponent .componentValue.editable:hover .pencil-container img {
                            display: inline-block;
                            cursor: pointer;
                        }

                     .priorityAndName-container .stepName-container .stepName.stepComponent .stepNameTextArea {
                        resize: none;
                        width: 100%;
                        margin-top: 15px;
                        margin-left: 5px;
                        padding-left: 10px;
                        padding-right: 10px;
                        margin-bottom: 8px;
                    }

        /* Container for Working hours line and Remaining/Spent/Total */
         .stepComponent.fullWorkingHours {
            margin-top: 4px;
        }

        .assignmentEditing-container-v2 .stepComponent.fullWorkingHours {
            margin-top: 16px;
            padding: 0 20px;
        }

         .stepComponent.fullWorkingHours .topLine-container {
            height: 8px;
            position: relative;
            overflow: hidden;
        }

             .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container {
                height: 4px;
                width: 100%;
                position: relative;
            }

                 .stepComponent.fullWorkingHours .topLine-container:hover .workingHoursLine-container.editable,
                 .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container.editable.dragInProgress {
                    height: 8px;
                    cursor: ew-resize;
                }

                 .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .total {
                    background-color: #d6ddfa;
                    position: relative;
                    height: 100%;
                    width: 100%;
                }

                    .teamAssignmentEditing-container .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .total {
                        border-radius: 4px;
                    }

                     .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .total.full {
                        background-color: #6ebc2c;
                        opacity: 0.4;
                    }

                 .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .spent {
                    background-color: #8197ed;
                    position: absolute;
                    height: 100%;
                    top: 0;
                }

                     .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .spent.budgetExceeded {
                        background-color: #ec4a43;
                    }

                 .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .endOfTheSpent {
                    position: absolute;
                    top: 0;
                }

                 .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .space-container {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    display: flex;
                    top: 0;
                }

                     .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .space-container .space {
                        flex: 1 1 auto;
                    }

                     .stepComponent.fullWorkingHours .topLine-container .workingHoursLine-container .space-container .border {
                        flex: 0 0 2px;
                        background-color: #ffffff;
                    }

         .stepComponent.fullWorkingHours .workingHoursValues,
         .assignmentEditing-container-v2 .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues{
            display: flex;
            column-gap: 0;
            flex-direction: row;
            padding-right: 20px;
        }

            .assignmentEditing-container-v2 .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues {
                padding: 0;
            }

            .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues {
                padding: 0 20px;
                column-gap: 20px;
            }

             .stepComponent.fullWorkingHours .workingHoursValues .title-container {
                flex: 0 0 auto;
                font-family: GlowRegular;
                font-size: 14px;
                color: #b6b6b6;
                padding-left: 20px;
                padding-top: 7px;
                gap: 0;
  
            }
            
             .stepComponent.fullWorkingHours .workingHoursValues .title-container.summaryBudget {
                padding-left: 0;
            }
            

                 .stepComponent.fullWorkingHours .workingHoursValues .title-container.spent {
                    padding-left: 0;
                }

                 .stepComponent.fullWorkingHours .workingHoursValues .workingHoursValue {
                    flex: 1 1 auto;
                    display: flex;
                    flex-wrap: initial;
                }

                    .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .workingHoursValue  {
                        flex-wrap: wrap;
                        column-gap: 2px;
                    }

                    .assignmentEditing-container-v2 .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .workingHoursValue  {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: initial;
                    }

                 .stepComponent.fullWorkingHours .workingHoursValues .workingHoursValue.divider {
                    max-width: 1px;
                    min-width: 1px;
                    margin-top: -4px;
                    background: #DCDCDC;
                }

                 .stepComponent.fullWorkingHours .workingHoursValues .title-container.dimensions {
                    padding-left: 5px;
                    display: flex;
                    flex-direction: column;
                    gap: 7px;
                }

                    .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .title-container.dimensions {
                        display: flex;
                        align-items: start;
                        justify-content: center;
                        flex-wrap: wrap-reverse;
                        flex-shrink: 1;
                        gap: 0 6px;
                    }

                    
                    .assignmentEditing-container-v2 .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .title-container.dimensions { 
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: center;
                        padding-bottom: 6px;
                        row-gap: 7px;
                    }

                   
                     .stepComponent.fullWorkingHours .workingHoursValues .title-container .dimensionString.summaryBudget {
                        padding-top: 7px;
                    }

                    .stepComponent.fullWorkingHours .workingHoursValues .title-container .dimensionString .material-unit {
                        color: #9F2517;
                    }
                       

                        .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .title-container .dimensionString {
                            padding-top: 0;
                            order: -1;
                        }

                        .assignmentEditing-container-v2.fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .title-container .dimensionString {
                            order: initial;
                        }

                 .stepComponent.fullWorkingHours .workingHoursValues .title-container.total {
                    padding-left: 10px;
                }

                    .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .title-container{ 
                        padding-left: 0;    
                    }

                 .stepComponent.fullWorkingHours .workingHoursValues .title-container.collapsedText {
                    display: none;
                }

                .topTaskCardContainer.oneColumnMode  .stepComponent.fullWorkingHours .workingHoursValues .title-container.collapsedText {
                    display: block;
                }

                .topTaskCardContainer.oneColumnMode  .stepComponent.fullWorkingHours .workingHoursValues .title-container.fullText,
                .topTaskCardContainer.oneColumnMode  .stepComponent.fullWorkingHours .workingHoursValues .title-container.dimensions {
                    display: none;
                }

             .stepComponent.fullWorkingHours .workingHoursValues .linkIcon-container {
                flex: 0 0 auto;
                width: 20px;
                text-align: center;
                margin-top: 6px;
            }

                 .stepComponent.fullWorkingHours .workingHoursValues .linkIcon-container .linkIcon {
                    height: 28px;
                }

                 .stepComponent.fullWorkingHours .workingHoursValues .linkIcon-container img {
                    cursor: pointer;
                }

             .stepComponent.fullWorkingHours .workingHoursValues .value-container {
                position: relative;
                flex: 1 1;
                font-family: GlowRegular;
                font-size: 14px;
                color: #4a4a4a;
                padding-left: 5px;
                cursor: default;
                padding-top: 2px;
                padding-bottom: 3px;
            }

                .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .value-container {
                    padding-left: 0;
                }
             .stepComponent.fullWorkingHours .workingHoursValues .value-container.summaryBudget {
                padding-left: 0;
            }
             .stepComponent.fullWorkingHours .workingHoursValues .value-container.linkedModeDisabled {
                padding-right: 10px;
            }

                 .stepComponent.fullWorkingHours .workingHoursValues .value-container .valuePerUnit {
                    display: flex;
                    position: relative;
                    flex-direction: row;
                }

                 .stepComponent.fullWorkingHours .workingHoursValues .value-container .ui-input-bordered {
                    width:100%;
                    padding-left: 10px;
                }

                 .stepComponent.fullWorkingHours .workingHoursValues .value-container .value {
                    flex: 1 1;
                    /* padding-left: 11px; */
                    padding-top: 5px;
                }

                    .fullWorkingHours--teams.stepComponent.fullWorkingHours .workingHoursValues .value-container .value {
                        margin: 0;
                    }

                     .stepComponent.fullWorkingHours .workingHoursValues .value-container .value .valueString{
                        height: 23px;
                    }

                     .stepComponent.fullWorkingHours .workingHoursValues .value-container .valuePerUnit.editable:hover .value {
                        border-radius: 4px;
                        background-color: #f5f5f5;
                        cursor: pointer;
                    }

                     .stepComponent.fullWorkingHours .workingHoursValues .value-container .valuePerUnit.disabled {
                        cursor: default;
                        pointer-events: none;
                     }

                .topTaskCardContainer.compactMode  .stepComponent.fullWorkingHours .workingHoursValues .value-container .value {
                    padding-left: 5px;
                }

                 .stepComponent.fullWorkingHours .workingHoursValues .value-container .pencilIcon {
                    width: 14px;
                    margin-top: 8px;
                    margin-left: 5px;
                }

                .topTaskCardContainer.compactMode  .stepComponent.fullWorkingHours .workingHoursValues .value-container .pencilIcon {
                    display: none;
                }

                     .stepComponent.fullWorkingHours .workingHoursValues .value-container .pencilIcon img {
                        display: none;
                        cursor: pointer;
                    }

                     .stepComponent.fullWorkingHours .workingHoursValues .value-container .valuePerUnit.editable:hover .pencilIcon img {
                        display: block;
                    }

                     .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container {
                        position: absolute;
                        height: 18px;
                        top: 23px;
                        left: 0;
                        width: 100%;
                        text-align: center;
                        padding-left: 6px;
                        z-index: 9999;
                    }

                    .topTaskCardContainer.compactMode  .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container {
                        padding-left: 0px;
                    }

                         .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container .delta {
                            border-radius: 4px;
                            font-family: GlowSemibold;
                            font-size: 13px;
                            color: #ffffff;
                            padding: 0px 4px;
                        }

                             .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container.up .delta {
                                background-color: #8bc956;
                            }

                             .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container.down .delta {
                                background-color: #f06e69;
                            }

                             .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container .arrowIcon {
                                width:5px;
                                height: 7px;
                                display: inline-block;
                                margin-left: 4px;
                            }

                             .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container.up .arrowIcon {
                                background: url('../../../../images/tasksList/upArrow.png') no-repeat;
                            }

                             .stepComponent.fullWorkingHours .workingHoursValues .value-container .delta-container.down .arrowIcon {
                                background: url('../../../../images/tasksList/downArrow.png') no-repeat;
                            }

    .stepCard-container .body {
        /* This position: relative is needed to calculate draggable splitter offset from the parent easily */
        position: relative;
        /* Set flex-basis to 0(last number), so that IE will also shrink the height */
        flex: 1 1 0px;
        display: flex;
        flex-direction: row;
        /* Default height, if user opens Task Card for the first time */
        padding-top: 2px;
        /* IMPORTANT! for Firefox(and maybe others) - let browser know that min possible height is 0,
           so it shrinks this element instead of shrinking fixed-height footer. */
        min-height: 100px;
    }

        .stepCard-container .body .leftColumn {
            flex: 1 1 auto;
            /* IE-specific. IE doesn't shrink elemenent if "flex-basis: auto", it only respects "flex-basis: 0<unit>" */
            -ms-flex: 1 1 0%;
            min-width: 215px;
        }

            /* Set padding-right to 10px inside column, so that scroll will never overlap pencil
               or any other child element */
            .stepCard-container .body .leftColumn.uniqSelectorForCustomScrollBar {
                padding-right: 6px;
            }

            .stepCard-container .body .leftColumn.uniqSelectorForCustomScrollBar::-webkit-scrollbar-thumb {
                visibility: hidden;
            }

            .stepCard-container .body .leftColumn:hover.uniqSelectorForCustomScrollBar::-webkit-scrollbar-thumb {
                visibility: visible;
            }

        .stepCard-container .body .columnsSplitter {
            flex: 0 0 auto;
            width: 7px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: ew-resize;
            z-index: 1000;
        }

            .topTaskCardContainer.oneColumnMode .stepCard-container .body .columnsSplitter {
                display: none;
            }

            .stepCard-container .body .columnsSplitter .topLine,
            .stepCard-container .body .columnsSplitter .bottomLine {
                flex: 1 1 auto;
                width: 1px;
                background-color: #ebebeb;
            }

            .stepCard-container .body .columnsSplitter .splitterHandle {
                flex: 0 0 auto;
                height: 18px;
                width: 7px;
                margin-bottom: 3px;
                margin-top: 2px;
                margin-left: 3px;
            }

        .stepCard-container .body .rightColumn {
            /* Do NOT grow or shrink right column */
            /* Width for .rightColumn will be set during dragging */
            flex: 0 0 auto;
            min-width: 180px;
        }


            /* Set padding-right to 10px inside column, so that scroll will never overlap pencil
               or any other child element */
            .stepCard-container .body .rightColumn.uniqSelectorForCustomScrollBar {
                padding-right: 10px;
            }

            .stepCard-container .body .rightColumn.uniqSelectorForCustomScrollBar::-webkit-scrollbar-thumb {
                visibility: hidden;
            }

            .stepCard-container .body .rightColumn:hover.uniqSelectorForCustomScrollBar::-webkit-scrollbar-thumb {
                visibility: visible;
            }

        /*TODO hide only empty column*/
        .topTaskCardContainer.oneColumnMode .rightColumn {
            display: none;
        }

        .stepCard-container .body .stepComponent {
        }

            .stepCard-container .body .stepComponent .componentName,
            .stepCard-container .bottomTab .stepComponent .componentName {
                font-family: GlowRegular;
                font-size: 14px;
                color: #b6b6b6;
                padding-left: 20px;
                padding-top: 18px;
            }

            .stepCard-container .body .stepComponent .notSelectedValuePlaceholder,
            .stepCard-container .bottomTab .stepComponent .notSelectedValuePlaceholder {
                font-family: GlowRegular;
                font-size: 14px;
                color: #808080;
                padding-left: 20px;
                padding-top: 5px;
            }

            .stepCard-container .body .stepComponent .componentValue,
            .stepCard-container .bottomTab .stepComponent .componentValue {
                font-family: GlowRegular;
                font-size: 14px;
                color: #4a4a4a;
                word-break: break-word;
                margin-left: 10px;
                padding-left: 10px;
                padding-top: 4px;
                padding-bottom: 4px;
                margin-right: 5px;
            }

            .stepCard-container .body .attributesComponent:not(.isForResize,.filterMode),
            .stepCard-container .bottomTab .attributesComponent:not(.isForResize,.filterMode),
            .stepCard-container .body .skillsComponent:not(.isForResize),
            .stepCard-container .bottomTab .skillsComponent:not(.isForResize),
            .stepCard-container .body .tags,
            .stepCard-container .bottomTab .tags,
            .stepCard-container .body .bookingId,
            .stepCard-container .bottomTab .bookingId {
                margin: 0 10px;
                margin-right: 0;
            }

            .stepCard-container .body .assignmentEditing-container-v2 .attributesComponent:not(.isForResize,.filterMode),
            .stepCard-container .bottomTab .assignmentEditing-container-v2 .attributesComponent:not(.isForResize,.filterMode),
            .stepCard-container .body .assignmentEditing-container-v2 .skillsComponent:not(.isForResize),
            .stepCard-container .bottomTab .assignmentEditing-container-v2 .skillsComponent:not(.isForResize),
            .stepCard-container .body .assignmentEditing-container-v2 .tags,
            .stepCard-container .bottomTab .assignmentEditing-container-v2 .tags {
                margin: 0 10px;
            }

            .stepCard-container .body .assignmentEditing-container-v2 .skillsComponent .componentName {
                padding-top: 0;
            }

            .stepCard-container .body .attributesComponent.stepComponent .componentValue,
            .stepCard-container .bottomTab .attributesComponent.stepComponent .componentValue,
            .stepCard-container .body .skillsComponent.stepComponent .componentValue,
            .stepCard-container .bottomTab .skillsComponent.stepComponent .componentValue,
            .stepCard-container .body .tags.stepComponent .componentValue,
            .stepCard-container .bottomTab .tags.stepComponent .componentValue,
            .stepCard-container .body .bookingId.stepComponent .componentValue,
            .stepCard-container .bottomTab .bookingId.stepComponent .componentValue {
                margin: 0;
                padding: 0;
            }

            .stepCard-container .body .attributesComponent:not(.isForResize,.filterMode) .componentValue.side-paddings,
            .stepCard-container .bottomTab .attributesComponent:not(.isForResize,.filterMode) .componentValue.side-paddings,
            .stepCard-container .body .skillsComponent:not(.isForResize) .componentValue.side-paddings,
            .stepCard-container .bottomTab .skillsComponent:not(.isForResize) .componentValue.side-paddings,
            .stepCard-container .body .tags .componentValue.side-paddings,
            .stepCard-container .bottomTab .tags .componentValue.side-paddings {
                padding: 0px 10px;
                margin: 0;
            }

            .stepCard-container .body .attributesComponent:not(.isForResize,.filterMode) .componentValue.add-attribute,
            .stepCard-container .bottomTab .attributesComponent:not(.isForResize,.filterMode) .componentValue.add-attribute,
            .stepCard-container .body .skillsComponent:not(.isForResize) .componentValue.add-skill,
            .stepCard-container .bottomTab .skillsComponent:not(.isForResize) .componentValue.add-skill,
            .stepCard-container .body .tags .componentValue.add-tag,
            .stepCard-container .bottomTab .tags .componentValue.add-tag {
                padding: 4px 10px;
                margin: 0;
            }

            .stepCard-container .body .attributesComponent:not(.isForResize,.filterMode) .componentValue,
            .stepCard-container .bottomTab .attributesComponent:not(.isForResize,.filterMode) .componentValue,
            .stepCard-container .body .skillsComponent:not(.isForResize) .componentValue,
            .stepCard-container .bottomTab .skillsComponent:not(.isForResize) .componentValue,
            .stepCard-container .body .tags .componentValue,
            .stepCard-container .bottomTab .tags .componentValue {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px;
                border-radius: 4px;
                font-family: GlowRegular;
                font-size: 14px;
                color: #4A4A4A;
            }

            .stepCard-container .body .attributesComponent.stepComponent .componentName,
            .stepCard-container .bottomTab .attributesComponent.stepComponent .componentName,
            .stepCard-container .body .skillsComponent.stepComponent .componentName,
            .stepCard-container .bottomTab .skillsComponent.stepComponent .componentName,
            .stepCard-container .body .tags.stepComponent .componentName,
            .stepCard-container .bottomTab .tags.stepComponent .componentName,
            .stepCard-container .body .bookingId.stepComponent .componentName,
            .stepCard-container .bottomTab .bookingId.stepComponent .componentName {
                padding-left: 0;
            }

            .stepCard-container .body .attributesComponent.stepComponent .notSelectedValuePlaceholder,
            .stepCard-container .bottomTab .attributesComponent.stepComponent .notSelectedValuePlaceholder,
            .stepCard-container .body .skillsComponent.stepComponent .notSelectedValuePlaceholder,
            .stepCard-container .bottomTab .skillsComponent.stepComponent .notSelectedValuePlaceholder,
            .stepCard-container .body .tags.stepComponent .notSelectedValuePlaceholder,
            .stepCard-container .bottomTab .tags.stepComponent .notSelectedValuePlaceholder {
                font-family: GlowRegular;
                font-size: 14px;
                color: #4A4A4A;
                padding: 4px 10px;
            }



            .stepCard-container .body .stepComponent .componentValue.fullWorkingHours--teams {
                padding-left: 0;
            }

            /*As Mozilla and Edge do not support break-word - override style browser specifically*/
            @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                .stepCard-container .body .stepComponent .componentValue,
                .stepCard-container .bottomTab .stepComponent .componentValue {
                    word-break: break-all;
                }
            }

            @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                .stepCard-container .body .stepComponent .componentValue,
                .stepCard-container .bottomTab .stepComponent .componentValue {
                    word-break: break-all;
                }
            }

                .stepCard-container .body .stepComponent .componentValue .placeholder,
                .stepCard-container .bottomTab .stepComponent .componentValue .placeholder,
                .stepCard-container .body .stepComponent .componentValue .info-container.placeholder {
                    color: #808080;
                    text-transform: none;
                }

            .stepCard-container .body .stepComponent.createdBy .componentValue .photoAndNameContainer {
                display: flex;
                align-items: center;
                gap: 6px;
            }

                .stepCard-container .body .stepComponent.createdBy .componentValue .photoAndNameContainer .photo .avatar-picture {
                    width: 24px;
                    height: 24px;
                    border-radius: 100%;
                    background-position: center;
                    background-size: cover;
                }

            .stepCard-container .body .stepComponent.budget .componentValue .budget-container .name {
                display: inline-block;
            }

            .stepCard-container .body .stepComponent.budget .componentValue .budget-container .linkIcon {
                background: url(../../../../images/tasksList/linkToTask.png) no-repeat;
                width: 12px;
                height: 12px;
                margin-top: 2px;
                cursor: pointer;
                display: none;
            }
            .stepCard-container .body .stepComponent.relatedBudgets .componentValue{
                width: 100%;
                margin: 0;
            }

                .stepCard-container .body .stepComponent.relatedBudgets .componentValue.disabled {
                    cursor: default;
                    pointer-events: none;
                }

            .stepCard-container .body .stepComponent.relatedBudgets .relatedBudget-container .linkIcon {
                background-image: url(../../../../images/tasksList/relatedBudgetIcon.svg);
                width: 16px;
                height: 16px;
                margin-top: 2px;
                cursor: pointer;
                margin-right: 5px;
                float: left;
            }

            .stepCard-container .body .stepComponent.relatedBudgets .componentValue .pencil-container {
                flex: 0 0 20px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .stepCard-container .body .stepComponent.relatedBudgets .componentValue .relatedBudget-container {
                display: flex;
            }

            .stepCard-container .body .stepComponent.relatedBudgets .componentValue .relatedBudget-container .budget-content-container {
                border-radius: 4px;
                cursor: pointer;
                padding: 4px 10px;
                flex: 1 1 auto;
            }

            .stepCard-container .body .stepComponent.relatedBudgets .relatedBudget-container .name {
                flex: 1 1 auto;
            }

            .stepCard-container .body .stepComponent.relatedBudgets .componentValue .pencil-container {
                display: flex;
            }

            .stepCard-container .body .stepComponent.relatedBudgets .componentValue .pencil-container img {
                display: none;
            }

            .stepCard-container .body .stepComponent.relatedBudgets .componentValue .relatedBudget-container:hover .pencil-container img {
                display: inline-block;
                cursor: pointer;
            }

            .stepCard-container .body .stepComponent.relatedBudgets .componentValue .relatedBudget-container:hover .budget-content-container{
                background-color: #f5f5f5;
            }

            .stepCard-container .body .stepComponent.budget .componentValue .budget-container:hover .linkIcon {
                display: inline-block;
            }

            .stepCard-container .body .stepComponent.summary .componentValue {
                width: 100%;
                margin: 0;
                display: flex;
            }

                .stepCard-container .body .stepComponent.summary .componentValue .summaryInfo-container {
                    flex: 1 1 auto;
                    word-break: break-word;
                    padding: 4px 10px;
                }

                /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                    .stepCard-container .body .stepComponent.summary .componentValue .summaryInfo-container {
                        word-break: break-all;
                    }
                }

                @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                    .stepCard-container .body .stepComponent.summary .componentValue .summaryInfo-container {
                        word-break: break-all;
                    }
                }

            .stepCard-container .body .stepComponent.summary .componentValue .pencil-container {
                flex: 0 0 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }

                .stepCard-container .body .stepComponent.summary .componentValue .pencil-container.withTrashIcon {
                    flex-basis: 45px;
                }

                .stepCard-container .body .stepComponent.summary .componentValue .pencil-container img {
                    display: none;
                }

                    .stepCard-container .body .stepComponent.summary .componentValue .pencil-container img.trashIcon {
                        margin-right: 6px;
                    }

                .stepCard-container .body .stepComponent.summary .componentValue.editable:hover .summaryInfo-container {
                    border-radius: 4px;
                    background-color: #f5f5f5;
                    cursor: pointer;
                }

                .stepCard-container .body .stepComponent.summary .componentValue:hover .pencil-container img {
                    display: inline-block;
                    cursor: pointer;
                }

                .stepCard-container .body .stepComponent.summary .componentEditingDropdown {
                    padding: 4px 10px;
                }

        .stepCard-container .body .stepComponent.milestone .componentValue {
            display: flex;
            width: 100%;
            margin: 0;
        }

            .stepCard-container .body .stepComponent.milestone .componentValue .info-container {
                flex: 1 1 auto;
                word-break: break-word;
                padding: 4px 10px;
            }

                .stepCard-container .body .stepComponent.milestone .componentValue .pencil-container {
                    flex: 0 0 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }

                .stepCard-container .body .stepComponent.milestone .componentValue .pencil-container img {
                    display: none;
                }

                .stepCard-container .body .stepComponent.milestone:hover .pencil-container img {
                    display: inline-block;
                }

            .stepCard-container .body .stepComponent.description .componentValue {
                width: 100%;
                margin: 0;
                display: table;
            }

                .stepCard-container .body .stepComponent.description .componentValue .descriptionInfo-container {
                    display: table-cell;
                    word-break: break-word;
                    padding: 4px 10px;
                }

                    .stepCard-container .body .stepComponent.description .componentValue .descriptionInfo-container .noValue {
                        display: flex;
                        padding-left: 7px;
                    }

                    .stepCard-container .body .stepComponent.description .componentValue .descriptionInfo-container .noValue .buttonText {
                        font-family: GlowRegular;
                        font-size: 14px;
                        color: #5774E7;
                        margin-left: 4px;
                        cursor: pointer;
                    }

                /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                @supports ((-moz-appearance:none) or (-ms-ime-align:auto) or (-ms-high-contrast: active)) {
                    .stepCard-container .body .stepComponent.description .componentValue .descriptionInfo-container {
                        word-break: break-all;
                    }
                }

                @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                    .stepCard-container .body .stepComponent.description .componentValue .descriptionInfo-container {
                        word-break: break-all;
                    }
                }

                    .stepCard-container .body .stepComponent.description .componentValue .descriptionInfo-container .linkInsideDescription {
                        line-height: initial;
                        font-size: 14px;
                    }

                .stepCard-container .body .stepComponent.description .componentValue .pencil-container {
                    text-align: right;
                    width: 20px;
                    vertical-align: middle;
                    display: table-cell;
                }

                    .stepCard-container .body .stepComponent.description .componentValue .pencil-container img {
                        display: none;
                    }

                    .stepCard-container .body .stepComponent.description .componentValue.editable:hover {
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.description .componentValue.editable:hover .descriptionInfo-container {
                        border-radius: 4px;
                        background-color: #f5f5f5;
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.description .componentValue.editable:hover .pencil-container img {
                        display: inline-block;
                        cursor: pointer;
                    }

                .stepCard-container .body .stepComponent.description .stepDescriptionTextArea-container {
                    margin: 4px 20px 1px 10px;
                }

                    .stepCard-container .body .stepComponent.description .stepDescriptionTextArea-container .stepDescriptionTextArea {
                        resize: vertical !important;
                        width: 100%;
                        padding-left: 9px;
                        padding-right: 9px;
                        padding-top: 3px;
                        word-break: break-word;
                    }

                    /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                    @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                        .stepCard-container .body .stepComponent.description .stepDescriptionTextArea-container .stepDescriptionTextArea {
                            word-break: break-all;
                        }
                    }

                    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                        .stepCard-container .body .stepComponent.description .stepDescriptionTextArea-container .stepDescriptionTextArea {
                            word-break: break-all;
                        }
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentName,
                    .stepCard-container .body .stepComponent.bookingId .componentName {
                        display: flex;
                    }

                        .stepCard-container .body .stepComponent.businessValue .title,
                        .stepCard-container .body .stepComponent.bookingId .title {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .stepCard-container .body .stepComponent.businessValue .buttons-container,
                        .stepCard-container .body .stepComponent.bookingId .buttons-container {
                            width: 50px;
                            display: none;
                        }

                        .stepCard-container .body .stepComponent.businessValue .buttons-container .refreshButton,
                        .stepCard-container .body .stepComponent.bookingId .buttons-container .refreshButton {
                            cursor: pointer;
                            vertical-align: top;
                            margin-left: 5px;
                            margin-right: 5px;
                            margin-top: 4px;
                        }

                        .stepCard-container .body .stepComponent.businessValue .buttons-container .refreshButton.disabled,
                        .stepCard-container .body .stepComponent.bookingId .buttons-container .refreshButton.disabled {
                            opacity: 0.4;
                            cursor: default;
                        }

                        .stepCard-container .body .stepComponent.businessValue.editable:hover .buttons-container,
                        .stepCard-container .body .stepComponent.bookingId.editable:hover .buttons-container {
                            display: inline-block;
                        }

                        .stepCard-container .body .stepComponent.businessValue .refreshButton,
                        .stepCard-container .body .stepComponent.bookingId .refreshButton {
                            vertical-align: top;
                            margin-top: 4px;
                            margin-left: 5px;
                            display: none;
                            cursor: pointer;
                        }

                    .stepCard-container .body .stepComponent.businessValue.editable:hover .refreshButton,
                    .stepCard-container .body .stepComponent.bookingId.editable:hover .refreshButton {
                        display: inline-block;
                    }
                    .stepCard-container .body .stepComponent.businessValue .componentValue,
                    .stepCard-container .body .stepComponent.bookingId .componentValue {
                        width: 100%;
                        margin: 0;
                        display: table;
                        text-transform: uppercase;
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentValue .info-container,
                    .stepCard-container .body .stepComponent.bookingId .componentValue .info-container {
                        word-break: break-word;
                        padding: 4px 10px;
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentValue .info-container.notSpecified,
                    .stepCard-container .body .stepComponent.bookingId .componentValue .info-container.notSpecified {
                        color: #b6b6b6;
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentValue .pencil-container,
                    .stepCard-container .body .stepComponent.bookingId .componentValue .pencil-container {
                        text-align: right;
                        width: 20px;
                        vertical-align: middle;
                        display: table-cell;
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentValue .pencil-container img,
                    .stepCard-container .body .stepComponent.bookingId .componentValue .pencil-container img {
                        display: none;
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentValue.editable:hover,
                    .stepCard-container .body .stepComponent.bookingId .componentValue.editable:hover {
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentValue.editable:hover .info-container,
                    .stepCard-container .body .stepComponent.bookingId .componentValue.editable:hover .info-container {
                        border-radius: 4px;
                        background-color: #f5f5f5;
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.businessValue .componentValue.editable:hover .pencil-container img,
                    .stepCard-container .body .stepComponent.bookingId .componentValue.editable:hover .pencil-container img {
                        display: inline-block;
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.businessValue input,
                    .stepCard-container .body .stepComponent.bookingId input {
                        width: 100%;
                        padding-left: 10px;
                        margin-right: -1px;
                        text-transform: uppercase;
                    }

                    .stepCard-container .body .stepComponent.bookingId input::placeholder {
                        text-transform: none;
                    }

                .stepCard-container .body .stepComponent.duration .componentValue {
                    width: 100%;
                    margin: 0;
                    display: table;
                }

                    .stepCard-container .body .stepComponent.duration .componentValue .info-container {
                        display: table-cell;
                        word-break: break-word;
                        padding: 4px 10px;
                    }

                    .stepCard-container .body .stepComponent.duration .componentValue .pencil-container {
                        text-align: right;
                        width: 20px;
                        vertical-align: middle;
                        display: table-cell;
                    }

                    .stepCard-container .body .stepComponent.duration .componentValue .pencil-container img {
                        display: none;
                    }

                    .stepCard-container .body .stepComponent.duration .componentValue.editable:hover {
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.duration .componentValue.editable:hover .info-container {
                        border-radius: 4px;
                        background-color: #f5f5f5;
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.duration .componentValue.editable:hover .pencil-container img {
                        display: inline-block;
                        cursor: pointer;
                    }

                        .stepCard-container .body .stepComponent.duration input {
                            width: 100%;
                            padding-left: 10px;
                            margin-right: -1px;
                        }

                    .stepCard-container .body .stepComponent.stepDates {
                        padding: 15px 6px 5px 20px;
                        max-width: 364px;
                    }

                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.constraints {
                            position: relative;
                            width: 96px;
                            display: flex;
                            justify-content: center;
                            height: 28px;
                            border: solid 1px #dcdcdc;
                            outline: none;
                            border-radius: 4px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.constraints .pin {
                            background: url(../../../../images/shared/pin.svg) no-repeat;
                            width: 16px;
                            height: 16px;
                            float: right;
                            margin-top: 6px;
                            cursor: pointer;
                        }

                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.constraints .remove {
                            background: url(../../../../images/shared/crossBlue.svg) no-repeat;
                            width: 16px;
                            height: 16px;
                            float: right;
                            margin-top: 6px;
                            cursor: pointer;
                        }

                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.constraints .datepicker {
                            width: 70px;
                            font-family: GlowRegular;
                            font-size: 13px;
                            color: #4a4a4a;
                            border: none;
                            outline: none;
                            padding: 0 0 0 10px;
                            cursor: pointer;
                            margin-top: 2px;
                            z-index: 0;
                        }
                        
                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.constraints .datepicker[disabled] {
                            border-color: #F1F1F1;
                            cursor: default;
                            display: flex;
                            align-items: center;
                        }

                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.leveling {
                            position: relative;
                            width: 96px;
                        }
                        
                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.leveling .datepicker {
                            width: 100%;
                            height: 28px;
                            border-radius: 4px;
                            border: solid 1px #dcdcdc;
                            outline: none;
                            font-family: GlowRegular;
                            font-size: 13px;
                            color: #4a4a4a;
                            background: #ffffff url(../../../../images/shared/small-calendar.png) no-repeat right 10px center;
                            padding: 0 30px 0 10px;
                            cursor: pointer;
                            margin-top: 2px;
                        }
                        
                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.leveling .datepicker.withoutPickerIcon {
                            background: #ffffff;
                            border: none;
                        }
                        
                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.leveling .datepicker[disabled] {
                            border-color: #F1F1F1;
                            cursor: default;
                            padding-left: 0;
                        }
                        
                        .stepCard-container .body .stepComponent.stepDates .datePicker-container.leveling .emptyDatePlaceholder {
                            font-family: GlowRegular;
                            font-size: 13px;
                            color: #4A4A4A;
                            position: absolute;
                            left: 1px;
                            top: 7px;
                            cursor: pointer;
                            background: #ffffff;
                            width: 64px;
                        }
                        
                        .stepCard-container .body .stepComponent.stepDates .tongues {
                            flex: 1 1 auto;
                            display: flex;
                            flex-direction: row;
                            cursor: pointer;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tongues .tongue {
                            flex: 1 1 auto;
                            height: 28px;
                            border-top-left-radius: 4px;
                            border-top-right-radius: 4px;
                            border: solid 1px #dcdcdc;
                            background-color: #f5f5f5;
                            color: #4a4a4a;
                            overflow: hidden;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tongues .tongue.notFirst {
                            margin-left: -1px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tongues .tongue.active {
                            border-bottom: none;
                            background-color: #ffffff;
                            color: #5774e7;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tongues .tongue .tongueContent {
                            width: 100%;
                            height: 100%;
                            padding: 3px 6px;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tongues .tongue .tongueContent .tongueTitle {
                            font-family: GlowSemibold;
                            font-size: 13px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tongues .tongue .tongueContent img {
                            vertical-align: top;
                            margin-top: 4px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent {
                            border: solid 1px #dcdcdc;
                            border-bottom-left-radius: 4px;
                            border-bottom-right-radius: 4px;
                            border-top: none;
                            display: flex;
                            flex-wrap: wrap;
                            column-gap:8px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .column {
                            flex: 1 0 auto;
                            padding-left: 11px;
                            padding-top: 16px;
                            padding-bottom: 16px;
                            overflow: hidden;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .move-summary-btn {
                            width: 100%;
                            text-align: center;
                            color: #5774E7;
                            font-size: 13px;
                            border-top: 1px solid #DCDCDC;
                            padding: 8px 0;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .move-summary-btn:hover {
                            background-color: #f5f5f5;
                            cursor: pointer
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .column.widthInput {
                            flex: 1 1 100px;
                            max-width: 150px;
                            padding-left: 3px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .column.widthInput .title {
                            padding-left: 11px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .column .daysLabel {
                            color: #B6B6B6;
                            margin-left: 2px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .column .minLabel {
                            width: 33px;
                            height: 19px;
                            background: #C4C4C4;
                            border-radius: 4px;
                            color: #FFFFFF;
                            font-size: 13px;
                            font-family: GlowSemiBold;
                            padding: 0;
                            text-align: center;
                            display: inline-block;
                            margin-left: 2px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .column .title {
                            font-family: GlowRegular;
                            font-size: 14px;
                            line-height: 17px;
                            color: #B6B6B6;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            padding-bottom: 2px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .tabsContent .column .value {
                            font-family: GlowRegular;
                            font-size: 14px;
                            line-height: 19px;
                            color: #4A4A4A;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue {
                            width: 100%;
                            margin: 0;
                            display: flex;
                            padding-left: 0;
                            padding-top: 2px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue .info-container {
                            display: inline-flex;
                            flex: 1 1 auto;
                            padding: 4px 0 4px 5px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin-left: 5px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue .info-container .durationDaysContainer {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue .pencil-container {
                            width: 20px;
                            display: none;
                            flex: 0 0 20px;
                            justify-content: center;
                            padding-top: 7px;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue .pencil-container img {
                            display: none;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue.editable:hover {
                            cursor: pointer;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue.editable:hover .pencil-container {
                            display: flex;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue.editable:hover .info-container {
                            border-radius: 4px;
                            background-color: #f5f5f5;
                            cursor: pointer;
                        }

                        .stepCard-container .body .stepComponent.stepDates .componentValue.editable:hover .pencil-container img {
                            display: inline-block;
                            cursor: pointer;
                        }

                        .stepCard-container .body .stepComponent.stepDates input {
                            width: 100%;
                            padding-left: 10px;
                            margin-right: -1px;
                        }

            .stepCard-container .body .stepComponent.assignee .componentName .addIcon {
                display: inline-block;
                cursor: pointer;
                width: 16px;
                text-align: center;
                margin-left: 3px;

            }

            .stepCard-container .body .stepComponent.assignee .isDeleted .avatar,
            .stepCard-container .body .stepComponent.assignee .isDeleted .avatar-picture,
            .stepCard-container .body .stepComponent.assignee .isDeleted .assignUnits,
            .stepCard-container .body .stepComponent.assignee .isDeleted .userAndGroupName-container {
                opacity: 0.4;
            }

            .stepCard-container .body .stepComponent.assignee .componentName .infoIcon {
                vertical-align: top;
                margin-top: 3px;
                margin-left: 5px;
            }

                .stepCard-container .body .stepComponent.assignee .componentName .addIcon img {
                    margin-bottom: 2px;
                }

                .stepCard-container .body .stepComponent.assignee .componentName .addIcon .addText {
                    color: #5774e7;
                    font-family: GlowRegular;
                    font-size: 14px;
                    padding-left: 5px;
                }

                .stepCard-container .body .stepComponent.assignee .componentName .addIcon.withoutAssignments {
                    display: block;
                    width: 100%;
                    text-align: left;
                    margin-left: 0px;
                    padding-top: 4px;
                }

            .stepCard-container .body .stepComponent.assignee .assignment {
                width: 100%;
                display: flex;
                margin-top: 4px;
                cursor: pointer;
                position: relative;
            }

                .stepCard-container .body .stepComponent.assignee .assignment:hover {
                    background-color: #F5F5F5;
                }

                .stepCard-container .body .stepComponent.assignee .assignment.selected {
                    background-color: #F5F5F5;
                }


                .stepCard-container .body .stepComponent.assignee .assignment.isMultiGroupAssigned .userAndGroupName-container .groupAndWork-container .assignmentActionIcon {
                    display: none;
                }

                .stepCard-container .body .stepComponent.assignee .assignment.isMultiGroupAssigned:hover .userAndGroupName-container .groupAndWork-container .assignmentActionIcon,
                .stepCard-container .body .stepComponent.assignee .assignment.isMultiGroupAssigned:hover .userAndGroupName-container .groupAndWork-container .iconContainer {
                    display: inline-block;
                    float: right;
                }

                .stepCard-container .body .stepComponent.assignee .assignment.isMultiGroupAssigned .userAndGroupName-container .groupAndWork-container .iconContainer {
                    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #F5F5F5 25%, #F5F5F5 100%);
                    background-color: transparent;
                    position: absolute;
                    right: 0px;
                    transform: translateX(-100%);
                    display: none;
                    width: 20px;
                    height: 16px;
                    left: 100%;
                }

                .stepCard-container .body .stepComponent.assignee .userAndGroupName-container .groupAndWork-container .iconContainer.isTeams,
                .stepCard-container .body .stepComponent.assignee .iconContainer.isTeamAssignment, 
                .stepCard-container .body .stepComponent.assignee .userAndGroupName-container .teamName-container .iconContainer {
                    display: none;
                }

                .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .groupAndWork-container .iconContainer.isTeams,
                .stepCard-container .body .stepComponent.assignee .assignment:hover .iconContainer.isTeamAssignment {
                    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #F5F5F5 25%, #F5F5F5 100%);
                    background-color: transparent;
                    position: absolute;
                    right: 7px;
                    justify-content: end;
                    /* transform: translateX(-100%); */
                    display: flex;
                    width: 32px;
                    height: 16px;
                    top: 8px;
                }

                .stepCard-container .body .stepComponent.assignee .assignment.isMultiGroupAssigned .userAndGroupName-container .groupAndWork-container .assignmentActionIcon {
                    position: relative;
                    right: -4px;
                }

                .stepCard-container .body .stepComponent.assignee .componentValue {
                    padding-left: 0;
                    padding-top: 0;
                    padding-bottom: 0;
                }

                .stepCard-container .body .stepComponent.assignee .componentValue .assignment {
                    padding: 8px 8px 4px 10px;
                    border-radius: 2px;
                }

                .stepCard-container .body .stepComponent.assignee .componentValue .assignment.notActive {
                    pointer-events: none;
                }

                .stepCard-container .body .stepComponent.assignee .assignment .notAssigned.increasedZIndex {
                    position: relative;
                    z-index: 1002;
                }

                .stepCard-container .body .stepComponent.assignee .assignment:not(.isDeleted).editable {
                    cursor: pointer;
                }

                .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container {
                    display: table-cell;
                    width: 36px;
                    position: relative;
                }

                    .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .avatar,
                    .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .avatar-picture {
                        width: 36px;
                        height: 36px;
                        border-radius: 100%;
                        text-align: center;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .avatar.groupAvatar {
                        border-radius: 8px;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .avatar-picture {
                        background-position: center;
                        /* Make the background image cover the area of the <div>, and clip the excess */
                        background-size: cover;
                    }

                        .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .avatar .anyone {
                            top: 6px;
                            position: relative;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .avatar .initials {
                            height: 100%;
                            width: 100%;
                            text-align: center;
                            padding-top: 7px;
                            font-family: GlowSemibold;
                            font-size: 16px;
                            color: #ffffff;
                            text-transform: uppercase;
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .avatar .initials.longInitials{
                                font-size: 14px;
                                padding-top: 8px;
                            }

                    .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .assignUnits {
                        width: 20px;
                        height: 20px;
                        background-color: #f4f5fc;
                        border: solid 2px #ffffff;
                        border-radius: 100%;
                        font-family: GlowSemibold;
                        font-size: 11px;
                        text-align: center;
                        color: #4a4a4a;
                        position: absolute;
                        top: 21px;
                        left: 21px;
                    }

                        .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .assignUnits.longUnitsText {
                            font-size: 9px;
                            padding-top: 2px;
                        }

                    .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .inProgressIcon {
                        width: 20px;
                        height: 20px;
                        border: solid 2px #ffffff;
                        background: #ffffff;
                        border-radius: 100%;
                        text-align: center;
                        color: #4a4a4a;
                        position: absolute;
                        top: -7px;
                        left: -7px;
                        z-index: 2;
                    }

                        .stepCard-container .body .stepComponent.assignee .assignment .avatarAndUnits-container .inProgressIcon img {
                            vertical-align: top;
                        }

                .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container,
                .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container {
                    display: table-cell;
                    vertical-align: top;
                    flex-grow: 1;
                    min-width: 0px;
                }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userNameAndIconContainer {
                        display: flex;
                        justify-content: space-between;
                        position: relative;
                        overflow: hidden;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userNameAndIconContainer .iconContainer {
                        background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #F5F5F5 25%, #F5F5F5 100%);
                        background-color: transparent;
                        position: absolute;
                        right: 0px;
                        transform: translateX(-100%);
                        display: none;
                        width: 31px;
                        height: 16px;
                        left: 100%;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userNameAndIconContainer .assignmentActionIcon {
                        display: none;
                        position: relative;
                        right: -15px;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .userNameAndIconContainer .assignmentActionIcon,
                    .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .userNameAndIconContainer .iconContainer {
                        display: block;
                        
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .userNameAndIconContainer .iconContainer {
                        z-index: 1005;                        
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .budgetedTaskIcon {
                        float: left;
                        margin-top: 2px;
                        margin-right: 4px;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .notAssigned {
                        font-size: 14px;
                        line-height: initial;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userName,
                    .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName {
                        font-family: GlowRegular;
                        font-size: 14px;
                        color: #4a4a4a;
                        word-break: break-word;
                        display: block;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName.withUserName {
                        font-size: 13px;
                        color: #808080;
                        word-break: break-word;
                        flex: 1 1 auto;
                    }

                    /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                    @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userName,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName {
                            word-break: break-all;
                        }
                    }

                    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userName,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName {
                            word-break: break-all;
                        }
                    }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userName.withTrashIcon,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName.withTrashIcon {
                            height: 20px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userName.withTrashIcon span,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName.withTrashIcon span{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: inline-block;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .userName.withTrashIcon span,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName.withTrashIcon span {
                            width: calc(100% - 20px);
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .userName .trashIcon,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .assignedGroupName .trashIcon {
                            display: none;
                            cursor: pointer;
                            margin-top: 3px;
                            float: right;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .userName .trashIcon,
                        .stepCard-container .body .stepComponent.assignee .assignment:hover .budgetGroupAssignment-container .assignedGroupName .trashIcon {
                            display: inline-block;
                        }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .teamName-container {
                        font-size: 13px;
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .teamName,
                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .teamNames .teamAssignmentName {
                        color: #8197ED;
                        word-break: break-word;
                        display: block;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .warning-icon {
                        margin: 0;
                        margin-bottom: 1px;
                    }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .warning-icon img {
                        display: block;
                    }
                    
                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container {
                        width: 100%;
                    }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container.onlyGroupsMode,
                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container.isTeams,
                        .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .teamName-container .iconContainer {
                            display: flex;
                        }
                        .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .teamName-container .iconContainer {
                            background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #F5F5F5 25%, #F5F5F5 100%);
                            background-color: transparent;
                            position: absolute;
                            right: 7px;
                            justify-content: end;
                            /* transform: translateX(-100%); */
                            width: 32px;
                            height: 16px;
                            top: 8px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container.onlyGroupsMode .superGroupIcon {
                            margin-right: 3px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container.isSuperGroup {
                            /*height: 23px;*/
                            padding-top: 3px;
                            position: relative;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .superGroupIcon,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .groupNameAndHours-container .superGroupIcon {
                            margin-top: 2px;
                            margin-left: 1px;
                            vertical-align: top;
                            margin-right: 2px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .autodetectIcon {
                            margin-top: 4px;
                            vertical-align: top;
                            margin-right: 2px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .materialGroupIcon,
                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .groupNameAndHours-container .materialGroupIcon {
                            margin-top: 2px;
                            vertical-align: top;
                            margin-right: 2px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .ucltGroup {
                            margin-top: 2px;
                            vertical-align: top;
                            margin-right: 2px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .groupName {
                            font-family: GlowRegular;
                            font-size: 13px;
                            color: #808080;
                            word-break: break-word;
                            flex: 1 1 auto;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .trashIcon {
                            display: none;
                            cursor: pointer;
                            flex: 0 0 12px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment:hover .userAndGroupName-container .groupAndWork-container .trashIcon {
                            display: inline-block;
                        }

                        /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                        @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                            .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .groupName {
                                word-break: break-all;
                            }
                        }

                        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                            .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .groupName {
                                word-break: break-all;
                            }
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container.isSuperGroup .groupName{
                                font-size: 14px;
                                color: #4a4a4a;
                            }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .groupName.isOutsideTheGroup {
                            color: #FF7C10;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .workingHours {
                            font-family: GlowRegular;
                            font-size: 13px;
                            color: #8197ed;
                            float: right;
                            margin-left: 10px;
                            padding-top: 1px;
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .workingHours mark {
                                background: none;
                                background-color: transparent;
                                color: #8197ed;
                                padding: 0;
                            }

                                .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .workingHours mark.isZero {
                                    color: #6ebc2c;
                                }

                        .stepCard-container .body .rightColumn.compactMode .stepComponent.assignee .assignment .userAndGroupName-container .groupAndWork-container .workingHours {
                            margin-left: 5px;
                        }

                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHours {
                            font-family: GlowRegular;
                            font-size: 13px;
                            color: #8197ed;
                            float: right;
                            margin-left: 10px;
                            padding-top: 1px;
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container  .workingHours mark {
                                background: none;
                                background-color: transparent;
                                color: #8197ed;
                                padding: 0;
                            }

                                .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container  .workingHours mark.isZero {
                                    color: #6ebc2c;
                                }

                        .stepCard-container .body .rightColumn.compactMode .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHours {
                            margin-left: 5px;
                        }

                    .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .workingHoursLine-container {
                        height: 2px;
                        border-radius: 4px;
                        width: 100%;
                        position: relative;
                        margin-top: 4px;
                        clear: both;
                    }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .workingHoursLine-container .total {
                            background-color: #d6ddfa;
                            position: relative;
                            height: 100%;
                            width: 100%;
                            border-radius: 4px;
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .workingHoursLine-container .total.full {
                                background-color: #6ebc2c;
                                opacity: 0.4;
                            }

                        .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .workingHoursLine-container .spent {
                            background-color: #8197ed;
                            position: absolute;
                            height: 100%;
                            top: 0;
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .workingHoursLine-container .spent.full {
                                border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px;
                            }

                            .stepCard-container .body .stepComponent.assignee .assignment .userAndGroupName-container .workingHoursLine-container .spent.budgetExceeded {
                                background-color: #ec4a43;
                            }

                    .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHoursLine-container {
                        height: 2px;
                        border-radius: 4px;
                        width: 100%;
                        position: relative;
                        margin-top: 4px;
                        clear: both;
                    }

                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHoursLine-container .total {
                            background-color: #d6ddfa;
                            position: relative;
                            height: 100%;
                            width: 100%;
                            border-radius: 4px;
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHoursLine-container .total.full {
                                background-color: #6ebc2c;
                                opacity: 0.4;
                            }

                        .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHoursLine-container .spent {
                            background-color: #8197ed;
                            position: absolute;
                            height: 100%;
                            top: 0;
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                        }

                            .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHoursLine-container .spent.full {
                                border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px;
                            }

                            .stepCard-container .body .stepComponent.assignee .assignment .budgetGroupAssignment-container .workingHoursLine-container .spent.budgetExceeded {
                                background-color: #ec4a43;
                            }

                .stepCard-container .body .infoDropdownForAssignments-container {
                    position: absolute;
                    /* Info Dropdown is always 92px from the top */
                    top: 92px;
                    /* Info Dropdown should be above everything else */
                    z-index: 9999;
                    font-family: GlowRegular;
                    font-size: 14px;
                    width: 190px;
                    border-radius: 4px;
                    background-color: #ffffff;
                    box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2);
                    display: none;
                    opacity: 0;

                    /* 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 */
                }

                    /* Triangle above the Dropdown */
                    .stepCard-container .body .infoDropdownForAssignments-container .infoDropdown-arrow {
                        content: " ";
                        width: 0;
                        height: 0;
                        position: absolute;
                        top: 40px;
                    }

                        .stepCard-container .body .infoDropdownForAssignments-container .infoDropdown-arrow.leftArrow {
                            border-top: 4px solid transparent;
                            border-bottom: 4px solid transparent;
                            border-right: 5px solid #ffffff;
                            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
                            left: -5px;
                        }

                        .stepCard-container .body .infoDropdownForAssignments-container .infoDropdown-arrow.rightArrow {
                            border-top: 4px solid transparent;
                            border-bottom: 4px solid transparent;
                            border-left: 5px solid #ffffff;
                            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
                            left: 190px;
                        }

                    .stepCard-container .body .infoDropdownForAssignments-container .infoDropdown-text {
                        padding: 15px 18px;
                    }

                    .stepCard-container .body .infoDropdownForAssignments-container .infoDropdown-text .ui-btn-link {
                        font-size: 14px;
                    }

            .stepCard-container .body .stepComponent.constraintDates {
                display: flex;
                flex-wrap: wrap;
                padding-left: 10px;
            }

                .stepCard-container .body .stepComponent.constraintDates .dateSection {
                    width: 120px;
                }

                .stepCard-container .body .stepComponent.constraintDates .componentName {
                    padding-left: 10px;
                }

                .stepCard-container .body .stepComponent.constraintDates .datePicker-container {
                    margin: 2px 0px 1px 10px;
                    width: 110px;
                    position: relative;
                }

                    .stepCard-container .body .stepComponent.constraintDates .datePicker-container .datepicker {
                        width: 100%;
                        height: 28px;
                        border-radius: 4px;
                        border: solid 1px #dcdcdc;
                        outline: none;
                        font-family: GlowRegular;
                        font-size: 13px;
                        color: #4a4a4a;
                        background: #ffffff url(../../../../images/shared/small-calendar.png) no-repeat right 10px center;
                        padding: 0 30px 0 10px;
                        cursor: pointer;
                        margin-top: 2px;
                    }

                    .stepCard-container .body .stepComponent.constraintDates .datePicker-container .datepicker[disabled] {
                        border-color: #F1F1F1;
                        cursor: default;
                    }

                    .stepCard-container .body .stepComponent.constraintDates .datePicker-container .emptyDatePlaceholder {
                        font-family: GlowRegular;
                        font-size: 13px;
                        color: #4A4A4A;
                        position: absolute;
                        left: 10px;
                        top: 7px;
                        cursor: pointer;
                    }

    .stepCard-container .bottomTabsTongues {
        display: flex;
        flex-direction: row;
        cursor: pointer;
        max-width: 100%;
    }

        .stepCard-container .bottomTabsTongues .tongue {
            height: 30px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border: solid 1px #dcdcdc;
            background-color: #f5f5f5;
            color: #4a4a4a;
            margin-left: -1px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .stepCard-container .bottomTabsTongues .expandCollapseBottomTabs {
           flex: 0 0 25px;
            height: 30px;
            width: 25px;
            border-top-right-radius: 4px;
            border: solid 1px #dcdcdc;
            background-color: #f5f5f5;
            color: #4a4a4a;
            margin-left: -1px;
        }

        .stepCard-container .bottomTabsTongues .expandCollapseBottomTabs .expandCollapseBottomTabsArrow {
            display: flex;
            height: 100%;
            width: 100%;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .stepCard-container .bottomTabsTongues .expandCollapseBottomTabs .expandCollapseBottomTabsArrow.collapsed {
            transform: rotate(180deg);
        }

        .stepCard-container .bottomTabsTongues .expandCollapseBottomTabs .expandCollapseBottomTabsArrow .leftLine,
        .stepCard-container .bottomTabsTongues .expandCollapseBottomTabs .expandCollapseBottomTabsArrow .rightLine {
            width: 6px;
            height: 2px;
            background-color: #B6B6B6;
            position: absolute;
        }

        .stepCard-container .bottomTabsTongues .expandCollapseBottomTabs .expandCollapseBottomTabsArrow .leftLine {
            transform: rotate(45deg);
            left: 7px;
        }

        .stepCard-container .bottomTabsTongues .expandCollapseBottomTabs .expandCollapseBottomTabsArrow .rightLine {
            transform: rotate(135deg);
            right: 7px;
        }


            .stepCard-container .bottomTabsTongues .tongue.active {
                border-bottom: none;
                background-color: #ffffff;
                color: #5774e7;
            }

            .stepCard-container .bottomTabsTongues .tongue.active .commentsCount,
            .stepCard-container .bottomTabsTongues .tongue.active .attachmentsCount{
                color: #4A4A4A;
            }

            .stepCard-container .bottomTabsTongues .tongue .tongueContent {
                width: 100%;
                height: 100%;
                padding: 5px 20px;
                position: relative;
                display: flex;
                justify-content: space-between;
                flex-wrap: nowrap;
                
            }   
            
                .stepCard-container .bottomTabsTongues .tongue .tongueContent .tongueTitle {
                    font-family: GlowSemibold;
                    font-size: 13px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: block;
                }

                .stepCard-container .bottomTabsTongues .tongue .tongueContent .attachmentsCount,
                .stepCard-container .bottomTabsTongues .tongue .tongueContent .commentsCount {
                    font-family: GlowSemibold;
                    font-size: 13px;
                    position: relative;
                    right: 0;
                    padding-left: 2px;
                }

        .stepCard-container .bottomTabsTongues .emptySpace {
            flex: 1 1 auto;
            min-width: 0;
            border-bottom: solid 1px #dcdcdc;
        }

        .stepCard-container .commentsToggle-container {
            height: 30px;
            text-align: center;
            padding-top: 10px;
            padding-right: 20px;
            padding-left: 20px;
        }

            .stepCard-container .commentsToggle-container span.toggleLabel {
                font-family: GlowRegular;
                font-size: 13px;
                color: #4a4a4a;
                margin-left: 1px;
            }

    .stepCard-container .bottomTabsWrapper {
        flex: 0 0 auto;
        background: #ffffff;
        /*Set Flex as in IE there is a problem with wrapping - content has big width*/
        display: flex;
    }

        .stepCard-container .bottomTabsWrapper .bottomTab {
            height: 200px;
            width: 100%;
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .stepCard-container .bottomTabsWrapper .bottomTab.commentsTab {
                padding-bottom: 0;
                padding-top: 0;
                height: 100%;
                /*Set Flex as in IE there is a problem with wrapping - content has big width*/
                flex: 1 1 0px;
                overflow-y: hidden;
            }

            .stepCard-container .bottomTabsWrapper .bottomTab.attachmentsTab {
                padding-bottom: 0;
                padding-top: 0;
                height: 100%;
                flex: 1 1 0px;
                overflow-y: hidden;
            }

            .stepCard-container .bottomTabsWrapper .infoForHiddenTab {
                padding: 25px;
                font-family: GlowRegular;
                font-size: 14px;
                color: #b6b6b6;
            }

            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentName {
                padding-top: 12px;
            }

            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue {
                width: 100%;
                margin: 0;
                display: flex;
                padding-right: 10px;
                padding-top: 2px;
            }

                .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container {
                    flex: 1 1 auto;
                }
                    .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue {
                        display: flex;
                    }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueIcon-container {
                            flex: 0 0 28px;
                            padding-left: 8px;
                            vertical-align: top;
                            display: flex;
                            justify-content: center;
                        }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueIcon-container.task {
                                padding-top: 7px;
                            }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueIcon-container.summary {
                                padding-top: 7px;
                            }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueIcon-container.milestone {
                                padding-top: 8px;
                            }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueIcon-container.task .icon {
                                background-image: url('../../../../images/tasksList/newTaskIcon.png');
                                width: 16px;
                                height: 16px;
                            }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueIcon-container.summary .icon {
                                background-image: url('../../../../images/tasksList/newSummaryIcon.png');
                                width: 16px;
                                height: 16px;
                            }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueIcon-container.milestone .icon {
                                background-image: url('../../../../images/tasksList/milestone.png');
                                width: 12px;
                                height: 12px;
                                margin-top: 1px;
                                margin-left: 2px;
                                margin-right: 3px;
                            }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueInfo-container {
                            flex: 1 1 auto;
                            padding-top: 5px;
                            /* IE-specific. IE doesn't shrink elemenent if "flex-basis: auto", it only respects "flex-basis: 0<unit>" */
                            -ms-flex: 1 1 0%;
                            word-break: break-word;
                        }

                        /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                        @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueInfo-container {
                                word-break: break-all;
                            }
                        }

                        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueInfo-container {
                                word-break: break-all;
                            }
                        }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueInfo-container .issueId {
                                font-size: 13px;
                                color: #808080;
                            }

                            .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issue .issueInfo-container .stageIcon {
                                width: 12px;
                                height: 12px;
                                vertical-align: top;
                                margin-top: 4px;
                            }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issueItem:last-child .issueIcon-container,
                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issueItem:last-child .issueInfo-container {
                            padding-bottom: 4px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issueItem:first-child .issueIcon-container {
                            border-top-left-radius: 4px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issueItem:first-child .issueInfo-container {
                            border-top-right-radius: 4px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issueItem:last-child .issueIcon-container {
                            border-bottom-left-radius: 4px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .issueItem:last-child .issueInfo-container {
                            border-bottom-right-radius: 4px;
                        }

                    .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .relationsInfo-container .placeholder {
                        margin-top: 4px;
                        padding-left: 10px;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .pencil-container {
                        align-self: center;
                        flex: 0 0 30px;
                        text-align: center;
                        cursor: pointer;
                    }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .pencil-container.withTrashIcon {
                            flex-basis: 50px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .pencil-container .trashIcon {
                            margin-right: 6px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .pencil-container img {
                            display: none;
                            cursor: pointer;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue.editable:hover {
                            cursor: pointer;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue.editable:hover .relationsInfo-container .issueIcon-container,
                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue.editable:hover .relationsInfo-container .issueInfo-container {
                            background-color: #f5f5f5;
                            cursor: pointer;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentValue .issue:hover .pencil-container img {
                            display: inline-block;
                        }

                .stepCard-container .bottomTabsWrapper .bottomTab .stepComponent.relations .componentEditingDropdown {
                    padding: 5px 10px;
                }

                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                }

                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container {
                        flex: 1 1 0px;
                        overflow: hidden;
                        padding: 10px;
                        padding-right: 0;
                    }

                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment {
                            display: flex;
                            padding-top: 10px;
                            padding-bottom: 10px;
                            border-radius: 4px;
                            margin-right: 10px;
                        }

                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment:hover {
                                background-color: #f5f5f5;
                            }

                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container {
                                flex: 0 0 50px;
                                padding-top: 1px;
                            }

                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container .avatar,
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container .avatar-picture,
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .currentUserAvatar-container .avatar,
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .currentUserAvatar-container .avatar-picture {
                                    width: 36px;
                                    height: 36px;
                                    border-radius: 100%;
                                    text-align: center;
                                    margin-left: 21px;
                                }

                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container .avatar-picture,
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .currentUserAvatar-container .avatar-picture {
                                    background-position: center;
                                    /* Make the background image cover the area of the <div>, and clip the excess */
                                    background-size: cover;
                                }

                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container .avatar,
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container .avatar-picture {
                                    margin-left: 11px;
                                }

                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container .avatar .initials,
                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .currentUserAvatar-container .avatar .initials {
                                        height: 100%;
                                        width: 100%;
                                        text-align: center;
                                        padding-top: 7px;
                                        font-family: GlowSemibold;
                                        font-size: 16px;
                                        color: #ffffff;
                                        text-transform: uppercase;
                                    }

                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .avatar-container .initials.longInitials,
                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .currentUserAvatar-container .initials.longInitials {
                                        font-size: 14px;
                                        padding-top: 8px;
                                    }

                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container {
                                flex: 1 1 auto;
                                word-break: break-word;
                                padding-right: 20px;
                                padding-left: 6px;
                            }

                            /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                            @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container {
                                    word-break: break-all;
                                }
                            }

                            @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container {
                                    word-break: break-all;
                                }
                            }
                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container {
                                    display: flex;
                                }

                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .userNameAndDate-container {
                                        flex: 1 1 auto;
                                    }

                                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .userNameAndDate-container .userName {
                                            display: inline-block;
                                            font-family: GlowSemibold;
                                            font-size: 14px;
                                            color: #4a4a4a;
                                            margin-right: 7px;
                                        }

                                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .userNameAndDate-container .date {
                                            display: inline-block;
                                            font-family: GlowRegular;
                                            font-size: 13px;
                                            color: #808080;
                                        }

                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo {
                                        flex: 0 0  155px;
                                    }

                                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .extSystemName {
                                            float: right;
                                            font-family: GlowRegular;
                                            font-size: 13px;
                                            color: #b6b6b6;
                                            height: 20px;
                                            padding-top: 2px;
                                        }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment:hover .data-container .topInfo-container .additionalInfo .extSystemName {
                                                display: none;
                                            }

                                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons {
                                            float: right;
                                        }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .ui-btn-link {
                                                display: inline-block;
                                            }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons img {
                                                cursor: pointer;
                                            }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .editIcon {
                                                margin-right: 11px;
                                                vertical-align: middle;
                                            }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .starIconOff,
                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .starIconOn {
                                                margin-left: 8px;
                                            }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .cancelIcon {
                                                margin-right: 17px;
                                                margin-left: 17px;
                                            }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .editIcon,
                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .trashIconForHidding,
                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons .starIconOffForHidding {
                                                display: none;
                                            }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment:hover .data-container .topInfo-container .additionalInfo .actionButtons .editIcon,
                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment:hover .data-container .topInfo-container .additionalInfo .actionButtons .trashIconForHidding,
                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment:hover .data-container .topInfo-container .additionalInfo .actionButtons .starIconOffForHidding {
                                                display: inline-block;
                                            }

                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .topInfo-container .additionalInfo .actionButtons img.notEditable {
                                                cursor: default !important;
                                            }

                                .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .mainText {
                                    font-family: GlowRegular;
                                    font-size: 14px;
                                    color: #4a4a4a;
                                }

                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .mainText .linkInsideComments {
                                        line-height: initial;
                                        font-size: 14px;
                                    }

                                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .mainText .commentTextArea-container {
                                        padding-top: 7px;
                                    }

                                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .mainText .commentTextArea-container .commentTextArea {
                                            resize: none !important;
                                            width: 100%;
                                            padding-left: 9px;
                                            padding-right: 9px;
                                            padding-top: 3px;
                                            word-break: break-word;
                                        }

                                        /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                                        @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .mainText .commentTextArea-container .commentTextArea {
                                                word-break: break-all;
                                            }
                                        }

                                        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .showing-container .comment .data-container .mainText .commentTextArea-container .commentTextArea {
                                                word-break: break-all;
                                            }
                                        }

                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container {
                        flex: 0 0 auto;
                        background-color: #f5f5f5;
                        max-height: 88px;
                        overflow: hidden;
                        border-top: solid 1px #dcdcdc;
                        display: flex;
                        padding-top: 6px;
                        padding-bottom: 6px;
                        padding-right: 20px;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .currentUserAvatar-container {
                        flex: 0 0 60px;
                        align-self: center;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container {
                        flex: 1 1 auto;
                        padding-top: 5px;
                        padding-left: 6px;
                    }

                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container .newCommentTextTextArea {
                            resize: none !important;
                            width: 100%;
                            padding-left: 9px;
                            padding-right: 9px;
                            padding-top: 3px;
                            word-break: break-word;
                        }

                        /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                        @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container .newCommentTextTextArea {
                                word-break: break-all;
                            }
                        }

                        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container .newCommentTextTextArea {
                                word-break: break-all;
                            }
                        }
                            /* Chrome/Opera/Safari */
                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container .newCommentTextTextArea::-webkit-input-placeholder {
                                font-family: GlowRegular;
                                font-size: 13px;
                                color: #b6b6b6;
                            }
                            /* Firefox 19+ */
                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container .newCommentTextTextArea::-moz-placeholder {
                                font-family: GlowRegular;
                                font-size: 13px;
                                color: #b6b6b6;
                            }
                            /* IE 10+ */
                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container .newCommentTextTextArea:-ms-input-placeholder {
                                font-family: GlowRegular;
                                font-size: 13px;
                                /* IE11 needs the !important flag */
                                color: #b6b6b6 !important;
                            }
                            /* Firefox 18- */
                            .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .textArea-container .newCommentTextTextArea::-moz-placeholder {
                                font-family: GlowRegular;
                                font-size: 13px;
                                color: #b6b6b6;
                            }

                    .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .buttons-container {
                        flex: 0 0 87px;
                        align-self: center;
                        text-align: right;
                    }

                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .buttons-container .ui-btn-dark {
                            height: 28px;
                            width: 50px;
                            margin-right: 7px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .commentsComponent .adding-container .buttons-container .starIcon {
                            cursor: pointer;
                            vertical-align: top;
                            margin-top: 6px;
                        }

                .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent {
                    height: 100%;
                    padding: 20px;
                    padding-left: 8px;
                    padding-right: 8px;
                    padding-top: 10px;
                }

                    .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem {
                        display: flex;
                    }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueIcon-container {
                            flex: 0 0 28px;
                            padding-left: 8px;
                            vertical-align: top;
                            display: flex;
                            justify-content: center;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueIcon-container.task {
                            padding-top: 7px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueIcon-container.summary {
                            padding-top: 7px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueIcon-container.milestone {
                            padding-top: 8px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueIcon-container.task .icon {
                            background-image: url('../../../../images/tasksList/newTaskIcon.png');
                            width: 16px;
                            height: 16px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueIcon-container.summary .icon {
                            background-image: url('../../../../images/tasksList/newSummaryIcon.png');
                            width: 16px;
                            height: 16px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueIcon-container.milestone .icon {
                            background-image: url('../../../../images/tasksList/milestone.png');
                            width: 12px;
                            height: 12px;
                            margin-top: 1px;
                            margin-left: 2px;
                            margin-right: 3px;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueInfo-container {
                            flex: 1 1 auto;
                            padding-top: 5px;
                            /* IE-specific. IE doesn't shrink elemenent if "flex-basis: auto", it only respects "flex-basis: 0<unit>" */
                            -ms-flex: 1 1 0%;
                            word-break: break-word;
                            padding-left: 10px;
                            padding-top: 4px;
                            padding-bottom: 4px;
                        }

                        /*As Mozilla and Edge do not support break-word - override style browser specifically*/
                        @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                            .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueInfo-container {
                                word-break: break-all;
                            }
                        }

                        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                            .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueInfo-container {
                                word-break: break-all;
                            }
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueInfo-container .issueId {
                            font-size: 13px;
                            color: #808080;
                        }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .issueInfo-container .stageIcon {
                            width: 12px;
                            height: 12px;
                            vertical-align: top;
                            margin-top: 4px;
                        }

                    .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .priority {
                        font-family: GlowSemiBold;
                        font-size: 14px;
                        overflow: hidden;
                        padding-right: 2px;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .priority.blue {
                        color: #0090FF;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .priority.green {
                        color: #0ac200;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .priority.yellow {
                        color: #ffb400;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem .priority.red {
                        color: #ff002b;
                    }

                    .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem.isCompleted .priority {
                        color: #B6B6B6;
                    }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .pencil-container {
                            align-self: center;
                            flex: 0 0 30px;
                            text-align: center;
                            cursor: pointer;
                        }

                            .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .pencil-container img {
                                display: none;
                            }

                                .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem:hover .pencil-container img {
                                    display: inline-block;
                                }

                        .stepCard-container .bottomTabsWrapper .bottomTab .summarySubitemsComponent .issueItem:hover .issueInfo-container {
                            cursor: pointer;
                            background: #F5F5F5;
                            border-radius: 4px;
                        }

                .stepCard-container .body .stepComponent.totalBaseline .componentValue {
                    padding-left: 0;
                }

                .stepCard-container .body .stepComponent.totalBaseline .componentValue .baselineIsSmallerThanTotal {
                    color: #ec4a43;
                }

                .stepCard-container .body .stepComponent.totalBaseline .componentName {
                    display: flex;
                }

                .stepCard-container .body .stepComponent.totalBaseline .title {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .stepCard-container .body .stepComponent.totalBaseline .buttons-container {
                    width: 50px;
                    display: none;
                }

                    .stepCard-container .body .stepComponent.totalBaseline .buttons-container .refreshButton,
                    .stepCard-container .body .stepComponent.totalBaseline .buttons-container .resetButton {
                        cursor: pointer;
                        vertical-align: top;
                        margin-top: 5px;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline .buttons-container .refreshButton {
                        margin-left: 5px;
                        margin-right: 5px;
                        margin-top: 4px;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline.editable:hover .buttons-container {
                        display: inline-block;
                    }


                    .stepCard-container .body .stepComponent.totalBaseline .refreshButton,
                    .stepCard-container .body .stepComponent.totalBaseline .resetButton {
                        vertical-align: top;
                        margin-top: 4px;
                        margin-left: 5px;
                        display: none;
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline .resetButton {
                        margin-top: 5px;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline.editable:hover .refreshButton,
                    .stepCard-container .body .stepComponent.totalBaseline.editable:hover .resetButton {
                        display: inline-block;

                    }

                    .stepCard-container .body .stepComponent.totalBaseline .componentValue.editable:hover .baselineValue {
                        border-radius: 4px;
                        background-color: #f5f5f5;
                        cursor: pointer;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline .baselineValue {
                        margin-bottom: 5px;
                        padding-left: 11px;
                        padding-right: 11px;
                        padding-top: 5px;
                        height: 28px;
                        display: inline-block;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline .ui-input-bordered {
                        width: 140px;
                        padding-left: 10px;
                    }

            .stepCard-container .body .stepComponent.totalBaseline .delta-container {
                height: 18px;
                display: inline-block;
            }

                .stepCard-container .body .stepComponent.totalBaseline .delta-container .delta {
                    border-radius: 4px;
                    font-family: GlowSemibold;
                    font-size: 13px;
                    color: #ffffff;
                    padding: 0px 4px;
                }

                    .stepCard-container .body .stepComponent.totalBaseline .delta-container.up .delta {
                        background-color: #f06e69;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline .delta-container.down .delta {
                        background-color: #8bc956;
                    }

                    .stepCard-container .body .stepComponent.totalBaseline .delta-container .arrowIcon {
                        width:5px;
                        height: 7px;
                        display: inline-block;
                        margin-left: 4px;
                        vertical-align: top;
                        margin-top: 7px;
                    }

                        .stepCard-container .body .stepComponent.totalBaseline .delta-container.up .arrowIcon {
                            background: url('../../../../images/tasksList/upArrow.png') no-repeat;
                        }

                        .stepCard-container .body .stepComponent.totalBaseline .delta-container.down .arrowIcon {
                            background: url('../../../../images/tasksList/downArrow.png') no-repeat;
                        }

    .stepCard-container .footer {
        flex: 0 0 auto;
        display: flex;
        height: 58px;
        background-color: #fbfbfb;
        box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2), 0 0 2px 0 rgba(70, 89, 191, 0.3);
        border-top: solid 1px #dcdcdc;
        padding: 10px 20px;
    }

        .stepCard-container .footer .question {
            font-family: GlowRegular;
            font-size: 16px;
            color: #4a4a4a;
            padding-top: 8px;
            flex: 0 0 140px;
        }

            .topTaskCardContainer.oneColumnMode .stepCard-container .footer .question {
                display: none;
            }

        .stepCard-container .footer .buttons {
            flex: 1 1 auto;
            display: flex;
            justify-content: flex-end;
        }

            .stepCard-container .footer .buttons .space {
                flex: 0 0 20px;
            }

            .stepCard-container .footer .buttons .ui-btn-light,
            .stepCard-container .footer .buttons .ui-btn-dark {
                width: 100%;
                max-width: 138px;
            }

    /*Actions menu*/
    .stepCard-container .stepActionsMenu-container {
        position: absolute;
        top: 46px;
        right: 49px;
        width: 120px;
        height: 85px;
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2), 0 0 2px 0 rgba(70, 89, 191, 0.3);
        padding-top: 20px;
    }

        .stepCard-container .stepActionsMenu-container .actionsTitle {
            font-family: GlowSemibold;
            color: #4a4a4a;
            font-size: 14px;
            padding-left: 20px;
            margin-bottom: 5px;
        }

        .stepCard-container .stepActionsMenu-container .actionButton {
            font-family: GlowRegular;
            color: #4a4a4a;
            font-size: 14px;
            height: 28px;
            padding-top: 5px;
            cursor: pointer;
            padding-left: 20px;
        }

            .stepCard-container .stepActionsMenu-container .actionButton:hover {
                background: #F6F7FE;
            }

            .stepCard-container .stepActionsMenu-container .actionButton.disabled {
                opacity: 0.4;
                cursor: default;
            }

                .stepCard-container .stepActionsMenu-container .actionButton.disabled:hover {
                    background:transparent;
                }

    .stepCard-container .loader-container {
        position: absolute;
        height: 100%;
        width: 100%;
        background: white;
        opacity: 0.6;
    }

        .stepCard-container .loader-container .ui-loader-dark {
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            position: absolute;
        }

    /*Fully hide element when added hidden attr*/
    .stepCard-container [hidden] {
        display: none !important;
    }

/* This class was created in order to avoid brake and damage of the layout while dragging tabs on the Pipeline page.
It will append to the body tag on the Pipeline page. */
.fixForDrag {
    position: fixed;
    width: 100%;
}

.budget-teams-line {
    width: 100%;
    height: 4px;
}

.budget-teams-line.summaryPopup {
    position: absolute;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.budget-teams-line .section {
    height: 4px;
    float: left;
}

.budget-teams-line .spent {
    background-color: #ABB8F8;
}

.budget-teams-line .remaining,
.budget-teams-line--background {
    background-color: #DDE3FC;
}

.budget-teams-line .overrun-spent {
    background-color: #F4928E;
}

.budget-teams-line .overrun {
    background-color: #FBDBD9;
}

.budget-teams-line .buffer {
    background-color: #EEF1FE;
}

.budget-teams-line .separator {
    background-color: #FFFFFF;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .showing-container {
    flex: 1 1 0px;
    overflow: hidden;
    padding: 12px 8px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .adding-container {
    flex: 0 0 auto;
    max-height: 88px;
    overflow: hidden;
    border-top: solid 1px #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 20px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment {
    display: flex;
    justify-content: space-between;
    height: 52px;
    padding: 8px 12px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment:hover {
    cursor: pointer;
    background-color: #F5F5F5;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .uploading-file {
    height: 52px;
    padding: 8px 12px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .uploading-file .uploading-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .uploading-file .uploading-info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .uploading-file .uploading-info .section-with-loader {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 8px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .uploading-file .uploading-info .section-with-loader .section-naming {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .uploading-file .file-icon {
    cursor: pointer;
    padding: 8px;
    background-color: #EEF1FE;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .progress-bar {
    width: 100%;
    height: 3px;
    background-color: #D6DDFA;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 5px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .progress {
    height: 100%;
    height: 2px;
    background-color: #8197ED;
    transition: width 0.2s ease-in-out;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .attachment-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .attachment-info .attachment-create-info .file-name {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .trash-icon {
    display: none;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment:hover .trash-icon {
    display: block;
    cursor: pointer;
    padding: 4px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .file-icon {
    cursor: pointer;
    padding: 8px;
    background-color: #EEF1FE;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .file-addedBy {
    display: inline-block;
    padding: 0 2px;
    color: #808080;
    font-family: GlowRegular;
    font-size: 13px;

}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .file-addedAt {
    display: inline-block;
    padding: 0 2px;
    color: #808080;
    font-family: GlowRegular;
    font-size: 13px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachment .file-size {
    display: inline-block;
    padding: 0 2px;
    color: #B6B6B6;
    font-family: GlowRegular;
    font-size: 13px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .upload-section {
    color: #B6B6B6;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .upload-section label.choose-btn {
    display: inline-block;
    color: #5774E7;
    cursor: pointer;
    font-family: GlowRegular;
    font-weight: normal;
    margin-bottom: 0;
    margin-left: 5px;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .upload-section input#attachmentInput {
    display: none;
}

.stepCard-container .bottomTabsWrapper .bottomTab .attachmentsComponent .attachmentsComponent__cancel-btn {
    color: #5774E7;
    cursor: pointer;
    padding: 4px;
    font-size: 13px;
    align-self: flex-end;
}