﻿.filterItems {
    height: 50px;
    width: 40px;
    position: fixed;
    z-index: 901;
    top: .5%;
    right: 0;
    background-color: var(--b2White);
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 0px;
    opacity: 0.3;
    cursor: pointer;
    border: thin solid var(--b2HeaderBg);
    overflow-y: hidden;
}

.filterItemsShown {
    opacity: 1;
    width: 420px;
    height: 100%;
    overflow-y: scroll;
    cursor: default;
    top: .5%;
    z-index: 1000;
/*    background-color: VAR(--b2BgMainColor);*/
}




.filterItems span {
    padding: 10px 0 0 5px;
    top: 0;
    font-size: 30px;
    font-weight: lighter;
    color: var(--b2DarkBlue);
    cursor: pointer;
}


.filterItems table tr td {
    padding-left: 2%;
    padding-right: 2%;
}
.filterItems table tr{
    border: 0px;
/*    margin-bottom:5%;
    margin-top:5%;
    border-collapse:separate;*/

}
        .filterItems table tr:nth-child(even) {
          /*  border-top: 1px dashed var(--b2DarkBlue);*/
        }
    .filterItems h4{
        padding:5%;
    }

    .filterItems .applyFilters {
        background-color: var(--b2Blue);
        border: none;
        color: white;
        padding: 8px 12px;
        text-decoration: none;
        margin: 10px 0 0 5px;
        cursor: pointer;
        border-radius: 4px;
        width: 175px;
    }

        .filterItems .applyFilters:hover {
            background-color: var(--b2NavyBlue);
        }

.filterItems .inputFlds {
    width: 180px;
    padding: 0 5px 0px 0px;
    margin: 0px 10px 0px 0px;
    display: inline-block;
     border: 1px solid grey;
    border-radius: 4px;
    border-style: hidden;
    border-bottom-style: groove;

}

        .filterItems .inputFlds:focus {
            background-color: var(--b2Blue);
            outline:none;
        }

        

.filteredStats {
    height: 6vh;
    width: 100%;
    align-content: center;
    text-align: center;
    padding-bottom: 0px;
    padding-top: 25px;
}

    .filteredStats .title {
        padding-bottom: 5px;
        color: #4b4b4b;
        text-decoration: underline;
        font-size: 18px;
    }

    .filteredStats ul {
        padding-left: 3px;
        padding-right: 3px;
    }

        .filteredStats ul li {
            display: inline-block;
            padding-left: .5%;
            padding-right: .5%;
            margin-left: 0%;
            margin-right: 0%;
            font-size: 14px;
            color: var(--b2Red);
            font-weight: 600;
            text-align: center;
            border-left-width: thin;
            border-left: 1px solid #19B041;
            border-image: linear-gradient(transparent 10%, #19B041 65% 20%, transparent 90%) 0 0 0 1 / 1px;
        }

            .filteredStats ul li:first-child {
                border-left: none;
            }

    .filteredStats li span {
        font-size: 12px;
        color: var(--b2DarkBlue); /* #253e8b; /* #0a7285; /*#8b8b8b;*/
    }


.tblFilter {
    height: 30vh;
    width: 85%;
    position: fixed;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    border:none;
    margin-bottom:8px;
    margin-top:-8px;
}
    .tblFilter .filterCondTxt{
        font-size:14px;
    }
    .tblFilter table tr {
        border: none;
    }
    .tblFilter .inputFlds {
        width: 250px;
        padding: 2px;
        margin: 2px 0;
        display: inline-block;
        /*        border: 1px solid grey;
        border-radius: 4px;*/
        /*     box-sizing: border-box;*/
        border-style: hidden;
        border-bottom-style: groove;
        border-bottom-color: var(--b2NavyBlue);
    }

 .tblFilter .inputFlds:focus {
        background-color: var(--b2Blue); /* #61cbe8;*/
        outline:none;
}
.tblFilter .filterBtn {
    background-color: var(--b2Blue);
    border: none;
    color: white;
    padding: 0px 12px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    width: 95px;
    height:40px;
}

    .tblFilter .filterBtn:hover {
        background-color: var(--b2NavyBlue);
    }



    /*Pagination*/
 .pagn {
    position: relative;
    display: inline-block;
    float:right;
    border:none;
}

 .pagn a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
     /*   border: 1px solid #ddd;*/
        width:150px;
    }

 .pagn a.active {
            background-color: #4CAF50;
            color: white;
       /*     border: 1px solid #4CAF50;*/
        }
    .pagn a:hover:not(.active) {
        background-color: var(--b2NavyBlue);
        color:#fff;
    }

    .bidDatesError{
        color:red;
        font-size:18px;
    }


.filterComp1, .filterComp3, .filterComp5, .filterComp2, .filterComp4, .filterComp6, .statusComp, .resRstimstorComp, .engineerComp, .workTypeComp, .ownerComp, .busniessUnitComp, .minBidAmtComp, .maxBidAmtComp, .wcStateComp, .stratificationComp {
    padding-left: 2px;
    float: left;
    position: relative;
    width: 190px;
    height: 60px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    margin-bottom: 12px;
    margin-left: 5px;
}
.topLevelfilters{
    margin-bottom:10px;
}
.hideFilterItem{
    display:none;
}

.mainFilterSubmitBtns{
    top:92.75%;
    position:absolute;
}

.filterItemsShown h4 {
    margin-top: -60px;
    font-size: 26px;
    margin-left: 140px;
}

.filterNote {
    position: relative;
    color: var(--b2Red);
    margin-top: -25px;
    font-size: 12px;
    margin-left: 70px;
}

.manageFilters{
    width:100%;
    margin-top:30px;
    height:70px;
}
.manageFilters table{
    width:100%;
}

.manageFilters table td{
   padding:0px;
   margin:0px;
   float:left;
}
.manageFilters table tr:first-child td:nth-child(2){
    width:75%;
    margin-bottom:10px;
}
    .manageFilters table tr:nth-child(2) td:first-child{
        margin-left:5%;
    }
    .manageFilters .inputUserFilters {
        height: 30px;
        font-size: 18px;
        font-weight: 500;
        width: 300px;
        padding: 0px;
        margin: 0px;
        /*      display: inline-block;*/
        border: 1px solid grey;
        border-radius: 4px;
        float: left;
    }
        .manageFilters .inputUserFilters:focus {
            background-color: var(--b2Blue);
        }
        .manageFilters .opts {
            font-size: 22px;
            margin-top: -7px;
            margin-left: 25px;
            margin-right: 25px;
            cursor:pointer;
        }
          /*  .manageFilters .opts .b2ToolTip{
                display:none;
            }

            .manageFilters .opts:hover .b2ToolTip {
                display: inline;
                font-size:14px;
                top:30px;
                left:-30px;
                cursor:default;
                background-color:var(--b2Blue);
                position:relative;
                align-content:center;
            }*/
            .manageFilters .oi-plus {
                color: var(--b2DarkBlue);
                margin-left: 90px;
            }
    .manageFilters .oi-hard-drive {
        color: var(--b2Green);
    }

    .manageFilters .oi-briefcase {
        color: var(--b2Blue);
    }

    .manageFilters .oi-minus{
        color: var(--b2Red);
    }

    .manageFilters .opts title{
        font-size:20px;
    }

.b2CustomFilterInputFlds {
    width: 400px;
    height:30px;
    padding: 0 5px 0px 0px;
    margin: 0px 10px 0px 0px;
    display: inline-block;
    border: 1px solid grey;
    border-radius: 4px;
    /*border-style: hidden;
    border-bottom-style: groove;*/
}

.b2CustomFilterInputFlds:focus{
    background-color:var(--b2Blue);
}

.b2CustomFilterTxtAreaFlds {
    width: 400px;
    padding: 0 5px 0px 0px;
    margin: 0px 10px 0px 0px;
    display: inline-block;
    border: 1px solid grey;
    border-radius: 4px;
    resize:none;    
 
    /*    border-style: hidden;
    border-bottom-style: groove;*/
}

    .b2CustomFilterTxtAreaFlds:focus {
        background-color: var(--b2Blue);
    }

.manageFilters .btnOpts {
    width: 75px;
    height: 30px;
    float: left;
    background-color: var(--b2Blue);
    border: none;
    color: white;
    text-decoration: none;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
}
    .manageFilters .btnOpts:hover{
        background-color:var(--b2NavyBlue);
    }

.manageFilters .newBtn {
    background-color:var(--b2Green);
}
.manageFilters .updateBtn {
    background-color: var(--b2Orange);
}
.manageFilters .removeBtn {
    background-color: var(--b2Red);
}

.manageFilters .manageBtn {

}

.reqFieldAsterisk{
    font-size:14px;
    color:var(--b2Red);
    margin-top:-16px;
}

.tblSaveFilter td:first-child{
    vertical-align:top;
}
.tblSaveFilter #sharedFilter, #defaultFilter {
    margin-top: -3px;
    padding: 0px;
    vertical-align: middle;
}

.manageFiltersContainer {
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    width: 100%;
    height: 50%;
}

.tblManageFilters table{
    width:100%;
    height:100%;
    overflow:auto;    

}
    .tblManageFilters table tr:not(:first-child):hover {
        background-color: var(--b2Blue);
        cursor: pointer;
    }

.tblManageFilters table th{
    position:sticky;
    z-index:300;
    border:0px;
}

.tblManageFilters .updateBtn {
    background-color: var(--b2Green);
    border: none;
    color: white;
    padding: 2px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    width: 100px;
}
    .tblManageFilters .updateBtn:hover {
        background-color: var(--b2NavyBlue);
    }
    .tblManageFilters .removeBtn {
        background-color: var(--b2Red);
        border: none;
        color: white;
        padding: 2px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
        width: 100px;
    }
        .tblManageFilters .removeBtn:hover {
            background-color: var(--b2NavyBlue);
        }