/* Project filter control common default Styles. */
/* Prefix "pf_" is used to make sure these styles won't have conflicts with elements on the same page.'*/

/* Main container */
.pf_projectFilter {
    min-width: 200px;
    background-color: rgb(253, 253, 253);
    /* 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 */
}

/* Container for header text: "Projects   Select all/Deselect all" */
.pf_headerContainer {
    margin-left: 19px;
    padding-top: 19px;
    margin-right: 20px;
}

.pf_currentHeaderText {
    font-family: GlowSemiBold;
    font-size: 13px;
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.pf_selectAllButton,
.pf_deselectAllButton,
.pf_selectAllNotActiveButton,
.pf_deselectAllNotActiveButton {
    float: right;
    font-family: GlowRegular;
    font-size: 13px;
    color: #5774e7;
    cursor: pointer;
}

    .pf_selectAllButton:hover,
    .pf_deselectAllButton:hover,
    .pf_selectAllNotActiveButton:hover,
    .pf_deselectAllNotActiveButton:hover {
        text-decoration: underline;
    }

/*Container for searching*/
.pf_searchFilterContainer {
    width: 100%;
    margin-top: 20px;
    position: relative;
}

    .pf_searchFilterContainer .ui-input-bordered {
        width: 100%;
        padding-left: 10px;
    }

    .pf_searchFilterContainer .ui-input-search-close {
        top: 10px;
        cursor: pointer;
    }

/* Container for Projects List Items: "o [v] Project" */
.pf_projectsListContainer {
    position: absolute;
    min-width: 200px;
    top: 98px;
    left: 0;
    right: 0;
    /* This is to take all available space and still be scrollable */
    bottom: 0;
}

.pf_projectListItem, .pf_showTotal {
    padding-top: 4px;
    padding-bottom: 3px;
    width: 100%;
}

.pf_projectsListContainer .pf_notActiveProjectsHeader {
    margin-right: 20px;
}

    .pf_projectsListContainer .pf_notActiveProjectsHeader .pf_notActiveProjectsHeaderText {
        display: inline-block;
        font-size: 13px;
        font-family: GlowRegular;
        line-height: 45px;
        padding-left: 20px;
        color: #808080;
    }

    .pf_projectsListContainer .pf_notActiveProjectsHeader .pf_selectAllDeselectAllButtonsContainer {
        line-height: 45px;
        display: inline-block;
        float: right;
    }

.pf_projectsListContainer .pf_projectItemsNotActive.collapsed {
    display: none;
}

.pf_projectsListContainer .pf_notActiveProjectsHeader .triangle {
    background: url(../../images/dataSources/triangle-up.png) no-repeat;
    width: 7px;
    height: 7px;
    margin-left: 5px;
    display: inline-block;
}

    .pf_projectsListContainer .pf_notActiveProjectsHeader .triangle.collapsed {
        background: url(../../images/dataSources/triangle-down.png) no-repeat;
        width: 7px;
        height: 7px;
        margin-left: 5px;
        display: inline-block;
    }

.pf_projectListItem:hover,
.pf_projectListItem:has(.frozen),
.pf_projectListItem.highlighted,
.pf_showTotal:hover {
    background-color: #EEF1FE;
}

.pf_projectItemsActive .pf_projectListItem:hover,
.pf_projectItemsActive .pf_projectListItem.highlighted,
.pf_showTotal:hover {
    cursor: pointer;
}

.pf_showTotal {
    cursor: default !important;
}

.pf_projectItemColoredCircleTableCellContainer {
    display: table-cell;
}

/* Colored Circle and Frozen Colored Circle styles */
.pf_projectListItem .pf_projectItemColoredCircleTableCellContainer .pf_projectItemColoredCircleContainer .pf_projectItemColoredCircle {
    display: block;
}

.pf_projectListItem .pf_projectItemColoredCircleTableCellContainer .pf_projectItemColoredCircleContainer .pf_projectItemColoredCircleFrozen {
    display: none;
}

/* Project is Checked and Frozen */
.pf_projectListItem.checked .pf_projectItemColoredCircleTableCellContainer.frozen .pf_projectItemColoredCircleContainer .pf_projectItemColoredCircle {
    display: none;
}

.pf_projectListItem.checked .pf_projectItemColoredCircleTableCellContainer.frozen .pf_projectItemColoredCircleContainer .pf_projectItemColoredCircleFrozen {
    display: block;
}


.pf_projectItemColoredCircleContainer {
    width: 10px;
    height: 10px;
    position: relative;
    margin-left: 19px;
    top: -1px;
}

.pf_projectListItem.checked .pf_projectItemColoredCircleTableCellContainer.frozen .pf_projectItemColoredCircleContainer {
    top: -3px;
}

.pf_projectItemColoredCircle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: black;
}

.pf_projectItemColoredCircleFrozen {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    border-width: 1px;
    border-style: solid;
    margin-left: -2px;
}

.pf_projectListItem:hover .pf_projectItemColoredCircle,
.pf_projectListItem.highlighted .pf_projectItemColoredCircle {
    position: relative;
    width: 10px;
    height: 10px;
    margin-left: -2px;
    top: -2px;
}

.pf_projectItemCheckboxTableCellContainer {
    display: table-cell;
}

.pf_projectItemCheckboxContainer {
    width: 16px;
    height: 16px;
    border: 1px solid #b6b6b6;
    border-radius: 1px;
    position: relative;
    margin-left: 6px;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 2px;
}

    .pf_projectItemCheckboxContainer.pf_projectItemCheckboxWithoutColor {
        margin-left: 19px;
    }

    .pf_projectItemCheckboxContainer:hover {
        border-color: #5774e7;
    }

.pf_showTotal .pf_projectItemCheckboxContainer {
    cursor: pointer;
}

.pf_projectItemCheckbox {
    position: relative;
    margin-top: 3px;
    margin-left: 2px;
    display: none;
}

.pf_projectListItem.checked .pf_projectItemCheckbox {
    display: block;
}

.pf_showTotal.checked .pf_projectItemCheckbox {
    display: block;
}

.pf_projectItemTextTableCellContainer {
    display: table-cell;
    /* Take all the remaining space and wrap the text. */
    width: 100%;
    vertical-align: middle;
    /* Handle use-case when there is a very long word(20 charactes) without spaces.
       Without styles below this word didn't wrap, but added ugly scroll at the bottom
       of Project Filter.*/
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.pf_projectLink {
    color: #333;
}

.pf_projectItemText {
    margin-right: 19px;
    position: relative;
    font-size: 14px;
    font-family: GlowRegular;
    word-break: break-all;
}

    .pf_projectItemText img {
        margin-right: 6px;
        padding-bottom: 2px;
    }

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

.pf_projectItemRightArrowContainer {
    width: 6px;
    height: 10px;
    margin-right: 19px;
    margin-left: 13px;
}

.pf_projectListItem.unselectable .pf_projectItemRightArrow {
    display: none;
}

.pf_projectsListBottomBlur {
    height: 12px;
    position: absolute;
    width: 100%;
    bottom: 0;
    /* Go from completely transparent on the top to completely solid white on the bottom */
    background: linear-gradient(rgba(253, 253, 253, 0) 10%, rgb(253, 253, 253) 100%);
    pointer-events: none;
}

.pf_projectsListTopBlur {
    height: 12px;
    position: absolute;
    width: 100%;
    top: 96px;
    /* Go from completely solid white on the top to completely transparent on the bottom */
    background: linear-gradient(rgb(253, 253, 253) 10%, rgba(253, 253, 253, 0) 100%);
    pointer-events: none;
}