ng-component{
    display: inline-block;
    width:100%;
}
.scrollGrid {
    border: 1px solid #cecece;
    position: relative;
}
.scrollGrid.greyGrid .ui-table-tablewrapper, 
.scrollGrid.greyGrid .ui-datatable-tablewrapper, 
.scrollGrid.greyGrid .ui-widget-header {
    background: darkgrey;
}
.scrollGrid .ui-datatable-tablewrapper {
    background: #6e9de1;
}


.ui-expanded-row-content .scrollGrid .ui-datatable-scrollable-body, 
.ui-expanded-row-content .ui-datatable .ui-datatable-scrollable-body,
.ui-expanded-row-content .scrollGrid .ui-table-scrollable-body, 
.ui-expanded-row-content .ui-table .ui-table-scrollable-body {
    min-height: 0px;
}
.ui-table .ui-sortable-column.ui-state-highlight {
    background: #b3dcfc;
    color: #4d4c57;
}
.ui-table,.ui-datatable {
    position: static;
    font-size: 1rem;
    .ui-selection-column .ui-chkbox {
        display: inline-block;
    }
   
    
    th.ui-state-default{
        background: #ebebeb;
        color: #4d4c57;
    }
    th.ui-state-active{
        background: #b3dcfc;
    }
    .ui-table-tbody > tr > td,
    .ui-datatable-data > tr > td {
        border: none;
    }
    tbody > tr {
      
        &.ui-widget-content.ui-table-even,
        &.ui-widget-content.ui-datatable-even {
            background-color: #fff;
           
        }
        &.ui-widget-content.ui-table-odd,
        &.ui-widget-content.ui-datatable-odd {
            background-color: #edf7ff;
            
        }
        &.ui-widget-content.ui-state-highlight { 
            color: inherit;
        }
    }
    .ui-table-footer,
    .ui-datatable-footer {
        border: none;
        background: none;
        text-align: left;
        font-size: .8rem;
        padding: 0;
    }
    th.ui-sortable-column:not(.ui-state-active):hover {
        background-color: #b3dcfc;
        .ui-sortable-column-icon {
            color: #4c4c4c;
        }
    }
    
    .col-icon {
        width: 30px;
    }
    .col-select {
        width: 38px;
    }
    .actionMenu {
        width: 50px;
    }
    .ui-table .ui-table-thead > tr > th, 
    .ui-table .ui-table-tfoot > tr > td{
        color: #4c4c4c;
    }
    .ui-table-thead > tr:nth-child(2) th {
        background: #b8d4e8;
    }
    .ui-table-thead > tr:nth-child(2) th span {
        padding: 0;
    }
    .ui-table-thead > tr > th,
    .ui-datatable-thead > tr > th {
        position: relative;
        text-align: left;
        border: none;
        padding: .6rem  .5rem ;
        line-height: 1.2rem;
        font-size: 1rem;
        &> span {
            display: block;
            text-align: left;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 30px; 
            
        }

        .filterHolder{
            position: relative;
            display:inline-block;
            width: 90%;
            input{
                width: 100%;
            }
            button{
                position: absolute;
                right: 4px;
                top: 2px;
                background: transparent;
                border: none;
                height: 1.2rem;
                color: #b9b6b6;
                padding: 0;
                &:hover, &:focus{
                    color: #4c4c4c;
                }
            }
        }
        .filterSubmit{
            padding: .2rem .3rem 0;
            line-height: 1.3;
            background: #fff;
            color: #e5991c;
            &:hover, &:focus{
                background: #4a90e2;
                color: #fff;
            }
        }
        .gridFilterIcon {
            position:absolute;
            right: 2px;
            top: .6rem;
            color: #94acbc;
            &::before{
                background-size: 15px 15px;
                height: 15px;
                width: 15px;
                display: block;
                font-family: "fontAwesome";
                content: "\f0b0";
                font-size: 1.2rem;
            }
            &:hover, &:focus{
                color: #4c4c4c;
            }
        }
       
       
        .ui-sortable-column-icon {
            font-size: 1.2rem;
            color: #669fe2;
            position:absolute;
            right: 6px;
            top: .6rem;
            &:hover, &:focus{
                color: #4c4c4c;
            }
        }
        .fa-sort:before, .fa-unsorted:before {
            content: "\f176";;
        }
        .fa-sort:after, .fa-unsorted:after {
            content: "\f175";;
        }
        .fa-sort-asc:before,.fa-sort-asc:after {
            color: #e5991c;
            &:hover{
                color: #4c4c4c;
            }
        }
        .fa-sort-desc:before,.fa-sort-desc:after {
            color: #e5991c;
            &:hover{
                color: #4c4c4c;
            }
        }
    }
    tr.ui-expanded-row-content {
        background: inherit;
        padding: .4rem;
        .ui-table, .ui-datatable {
            .ui-state-default {
                background-color: #ccc;
                color: #555;
                span.ui-sortable-column-icon {
                    color: #555;
                }
            }
        }
    }
    // p-header {
    //     float:left;
    //     margin-left: 1rem;
    //     font-size: 1.3rem;
    //     margin-top: .3rem;
    //     position: relative;
    //     z-index: 1;
    // }
    th.imageColumn, td.imageColumn {
        width: 40px;
    }
    th.dropdown, td.dropdown {
        width: 40px;
    }
    td:not(.dropdown) .ui-cell-data,
    td:not(.dropdown) > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 98%;
        // height: 1.3em;
        display:block;
    }
}
.ui-datatable-header p-header {
    position: absolute;
    left: 6px;
    top: .3rem;
    font-size: 1.34rem;
}
.ui-expanded-row-content .scrollGrid td.dropdown .ui-cell-data, 
.ui-expanded-row-content .ui-datatable td.dropdown .ui-cell-data,
.ui-expanded-row-content .ui-table td.dropdown .ui-cell-data {
    overflow: visible;
}

.ui-expanded-row-content {
    .scrollGrid, .ui-datatable, .ui-table{
        td.dropdown .ui-cell-data {
            overflow: visible;
        }
        .ui-datatable-thead > tr > th .ui-column-title,
        .ui-table-thead > tr > th .ui-column-title {
            font-weight: normal;
        }
        tbody > tr.ui-widget-content.ui-datatable-odd,
        tbody > tr.ui-widget-content.ui-table-odd {
            background-color: #fff;
        }
    } 
}
.ui-row-toggler{
    font-size: 1.5rem;
    width: 20px;
    &.fa-chevron-circle-down:before {
    content: "\f0d7";
    color: #e5991c;
    }
    &.fa-chevron-circle-right:before{
        content: "\f0da";
        color: #94acbc;;
    }
}
.ui-table tr.ui-expanded-row-content .ui-table .ui-state-default, 
.ui-datatable tr.ui-expanded-row-content .ui-datatable .ui-state-default, 
.scrollGrid tr.ui-expanded-row-content .ui-datatable .ui-state-default {
    background-color: #ebebeb;
    color: #555;
}

.ui-widget-content {
    border:none;
}
.ui-paginator .ui-paginator-page{
    padding: .2rem .7rem;
    margin-left: .1rem;
    margin-right: .1rem;
}
.ui-datatable-header {
    min-height: 30px;
}
.ui-widget-header {
    background: #6e9de1;
    border: none;
    text-align: left;
    color: #fff;
    &.ui-paginator {
        font-size: 1rem;
        text-align: right;
        padding: .25em;
        .ui-paginator-element span.fa:before {
            font-size: 1.15rem;
        }
        .ui-paginator-page.ui-state-active {
            background: #184987;
            color: #ffffff;
            
        }
        .ui-corner-all {
            border-radius: 0px;
        }
        .ui-state-default{
            border: none;
        }
        .ui-paginator-first{
            background: none;
            color:#fff;
            
        }
        .ui-paginator-prev{
            background: none;
            color:#fff;
            .fa-backward::before{
                content: "\f060";
            }
        }
        .ui-paginator-next{
            background: none;
            color:#fff;
            .fa-forward::before{
                content: "\f061";
            }
        }
        .ui-paginator-last{
            background: none;
            color:#fff;
            
        }
        &.ui-paginator-top {
            top: 0;
            position: absolute;
            right: 0;
        }
    }
}
.recordsDisplayed{
    position: absolute;
    left: 40%;
    padding-top: .6rem;
    font-size: .9rem;
    z-index: 1;
}
.ui-table-header .btn-plain,
.ui-datatable-header .btn-plain { 
    color: #FFF; 
}
span.ui-cell-data img { 
margin-right: 10px; 
}
.scrollGrid .ui-table-thead > tr > th .gridFilterIcon.activeFilter::before,
.scrollGrid .ui-datatable-thead > tr > th .gridFilterIcon.activeFilter::before,
.ui-datatable .ui-datatable-thead > tr > th .gridFilterIcon.activeFilter::before,
.ui-table .ui-table-thead > tr > th .gridFilterIcon.activeFilter::before { 
    color: #e5991c; 
}
.ui-widget-header.ui-paginator .ui-dropdown-trigger.ui-state-default {
    border-left: 1px solid #999;
}
.ui-paginator .ui-dropdown .ui-dropdown-label {
    padding-right: 28px;
}
.ui-table .ui-table-tbody > tr {
    border-top: 1px solid #D5D5D5;
    &.ui-expanded-row-content{
        border: none;
    }
}
.ui-table .ui-table-tbody > tr.ui-state-highlight {
    border-bottom: 1px solid black;
}
.ui-table .ui-table-tbody > tr.ui-state-highlight {
    background: inherit;
    color: inherit;
}
.ui-table .ui-table-tbody>tr:nth-child(even){
    background-color: #fff;
    &.ui-state-highlight {
        background-color: inherit;
        color: inherit;
    }
    + tr.ui-expanded-row-content {
        background: #fff;
    }
}
.ui-table .ui-table-tbody>tr:nth-child(odd){
    background-color: #edf7ff;
    &.ui-state-highlight {
        background-color: inherit;
        color: inherit;
    }
    + tr.ui-expanded-row-content {
        background: #edf7ff;
    }
}
.ui-state-highlight a { 
    color: #0275d8;
}