.status-filter {
    /* display: inline-block; */
    width: 100%;
    min-width: 70px;
    max-width: 100%;
    position: relative;
}

    .status-filter .clearDeleteFilter {
        display: none;
        position: absolute;
        top: 1px;
        right: 1px;
        height: 87%;
        justify-content: flex-end;
        align-items: center;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: #FFFFFF;
        z-index: 1000;
        background: -moz-linear-gradient(to left, white 50%, rgba(255,255,255,0));
        background: -webkit-linear-gradient(to left, white 50%, rgba(255,255,255,0));
        background: -o-linear-gradient(to left, white 50%, rgba(255,255,255,0));
        background: -ms-linear-gradient(to left, white 50%, rgba(255,255,255,0));
        background: linear-gradient(to left, white 50%, rgba(255,255,255,0));
    }

    .status-filter div.ui-input-bordered:hover + .clearDeleteFilter,
    .status-filter .clearDeleteFilter:hover {
        display: flex;
    }

        .status-filter .clearFilter,
        .status-filter .deleteFilter {
            cursor: pointer;
            padding-right: 5px;
        }

    .status-filter .filterName {
        display: none;
        position: absolute;
        font-size: 9px;
        font-family: GlowSemiBold;
        top: -12px;
        left: 5px;
        text-transform: uppercase;
        opacity: 0.4;
    }

    .status-filter .ui-input-bordered .option {
        display: flex;
    }

    .status-filter:hover .filterName {
        display: block;
    }

    .status-filter:hover .clearDeleteFilter {
        width: 30px;
    }


    .status-filter .ui-input-bordered {
        padding-left: 10px;
        padding-right: 24px;
        width: 100%;
        cursor: default;
        display: flex;
        padding-top: 4px;
        overflow: hidden;
    }

        .status-filter .ui-input-bordered.opened {
            border: 1px solid #5774e7;
            outline: none;
        }

        .status-filter .optionInputIconSpace {
            margin-right: 3px;
        }

        .status-filter .ui-input-bordered .placeholder {
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            letter-spacing: normal;
            font-family: GlowRegular;
            font-size: 13px;
            color: #b6b6b6;
        }
        /* Clear icon that is shown only when search is enabled */
        .status-filter .clear-input {
            width: 10px;
            height: 10px;
            position: absolute;
            top: 12px;
            right: 26px;
            z-index: 999;
            cursor: pointer;
            background: url(../../../../images/shared/close.png);
        }

            .status-filter .clear-input:hover {
                background: url(../../../../images/shared/close-hovered.png);
            }

    /* Arrow icon */
    .status-filter .arrowIcon-container {
        width: 24px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 800;
        cursor: pointer;
        padding-top: 13px;
        padding-left: 8px;
    }

        .status-filter .arrowIcon-container .arrowIcon {
            width: 6px;
            height: 3px;
            background: url('../../../../images/shared/smallDownArrow.svg');
        }

        .status-filter .arrowIcon-container.opened .arrowIcon {
            background: url('../../../../images/shared/smallUpArow.svg');
        }

        .status-filter .arrowIcon-container.disabled {
            opacity: 0.4;
            cursor: default;
        }

    .status-filter .dropdown-content {
        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);
        position: absolute;
        width: 100%;
        z-index: 1000;
        padding: 4px 0px 12px;
        min-height: 43px;
        margin-top: 2px;
        -webkit-transition: opacity 0.1s ease-in-out;
        -moz-transition: opacity 0.1s ease-in-out;
        -ms-transition: opacity 0.1s ease-in-out;
        -o-transition: opacity 0.1s ease-in-out;
        transition: opacity 0.1s ease-in-out;
        opacity: 0;
    }

        .status-filter .dropdown-content.renderContent {
            opacity: 1;
        }

        .status-filter .dropdown-content .headerAndClear {
            height: 35px;
            padding-top: 10px;
            padding-right: 20px;
            padding-left: 20px;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 8px;
        }

        .status-filter .dropdown-content .headerAndClearWrapper {
            padding-right: 4px;
        }

        .status-filter .dropdown-content .headerAndClear .mainHeader {
            font-family: GlowSemibold;
            font-size: 14px;
            color: #4a4a4a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* flex: 1 1 auto; */
            padding-right: 8px;            
         }

        .status-filter .dropdown-content .headerAndClear .clearButton {
            margin-top: 5px;
        }

        .status-filter .dropdown-content .headerAndClear .clearButton.disabled {
            pointer-events: none;
            opacity: 0.4;
        }

        .status-filter .dropdown-content .option {
            display: flex;
            align-items: center;
            padding: 2px 20px;
        }

            .status-filter .dropdown-content .option:hover {
                background-color: #F6F7FE;
                cursor: pointer;
            }

            .status-filter  .dropdown-content .option .checkbox-container {
                flex: 0 0 28px;
                padding-top: 4px;
            }

            .status-filter .dropdown-content .option .icon-container {
                flex: 0 0 28px;
            }

                .status-filter .dropdown-content .option .icon-container .statusIcon,
                .status-filter .ui-input-bordered .statusIcon {
                    height: 16px;
                    width: 16px;
                    background: url(../../../../images/tasksList/readyToStart.svg);
                }

                .status-filter .dropdown-content .option .icon-container .statusIcon.notStartedIcon,
                .status-filter .ui-input-bordered .statusIcon.notStartedIcon {
                    background: url(../../../../images/shared/notInProgress.svg);
                }

                .status-filter .dropdown-content .option .icon-container .statusIcon.inProgressIcon,
                .status-filter .ui-input-bordered .statusIcon.inProgressIcon {
                    background: url(../../../../images/shared/inProgress.svg);
                }

                .status-filter .dropdown-content .option .icon-container .statusIcon.onHoldIcon,
                .status-filter .ui-input-bordered .statusIcon.onHoldIcon {
                    background: url(../../../../images/shared/onHold.svg);
                }

                .status-filter .dropdown-content .option .icon-container .statusIcon.completedIcon,
                .status-filter .ui-input-bordered .statusIcon.completedIcon {
                    background: url(../../../../images/shared/completedStatus.svg);
                }

                .status-filter .dropdown-content .option .icon-container .statusIcon.deletedIcon,
                .status-filter .ui-input-bordered .statusIcon.deletedIcon {
                    background: url(../../../../images/shared/newRemovedIcon.png);
                }

            .status-filter .dropdown-content .option .value-container {
                flex: 1 1 auto;
                font-family: GlowRegular;
                font-size: 14px;
                color: #4a4a4a;
                padding-top: 2px;
                word-break: break-word;
            }

                .status-filter .ui-input-bordered .option .optionLabel.isFilteredOutOption,
                .status-filter .dropdown-content .option .value-container.isFilteredOutOption {
                    opacity: 0.4;
                }

            @supports ((-moz-appearance:none) or (-ms-ime-align:auto)) {
                .status-filter .dropdown-content .option .value-container {
                    word-break: break-all;
                }
            }

            @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                .status-filter .dropdown-content .option .value-container {
                    word-break: break-all;
                }
            }

        .status-filter perfect-scrollbar .ps-content {
            padding-right: 0 !important;
        }

.status-filter [hidden] {
    display: none !important;
}