﻿pdq-grid { overflow:hidden; }
.clickable { cursor: pointer; }
/*table*/
table.gridTable { 
    border-collapse: collapse; 
    table-layout: fixed; 
    position: relative;
}
.gridTable-overlay {
    background-color: rgba(0,0,0,.2);
    position: sticky;
    display: inline-flex;
    align-items:flex-end;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    margin-top: -100%;
}
.gridTable-head div.col { 
    padding: 0px 2px 0px 2px; 
    text-overflow: ellipsis; 
    white-space: wrap; 
    Zheight:40px; 
    display: table-cell; 
    border-right-width:1.25px; 
    border-right-style:solid; 
} 
.gridTable-head div.col.colh{
    display:inline-flex;
}
.gridTable tbody tr td { 
    border-top-width:0.25px; 
    border-top-style:solid;    
    border-right-width:0.25px; 
    border-right-style:solid;    
    padding: 0px 2px 0px 2px;
    vertical-align:top !important;
    
}

.gridTable tbody tr td input,
.gridTable tbody tr td select, 
.gridTable tbody tr td md-autocomplete,
.gridTable tbody tr td md-datepicker{
    border:none !important;
    background-color:transparent !important;
    width: 100% !important;
}
.gridTable-body { overflow:auto; height:100%;}

.table-button{
    border-radius: 25px 25px 0px 0px;
    line-height: 0;
    width: 160px;
    margin: 0;
}
.pdqgr-cell-text { text-align: left; }
.pdqgr-cell-number { text-align: right; }
.pdqgr-cell-date { text-align: right; }
.pdqgr-cell-neutral { text-align: center; }

.gridTable-foot {
    min-height: 32px;
}
.gridTable-foot div {
    height: 32px;
    color:#ffffff;
}
.gridTable-foot ul { 
    padding-top: 9px; 
}
.gridTable-foot ul, .gridTable-foot ul li { display: inline-block; }
.gridTable-foot ul li {
    padding: 0 10px 0 10px;
    width: 20px;
    text-align: center;
}
.gridTable-foot li.current {
    color: #5B7E20;
    background-color: #FFFFEA;
    border-radius: 15px;
}
.gridTable-foot .md-button, .gridTable-foot md-select {
    height: 30px;
    top:-6px;
    margin: 0;
    padding: 0;
    min-width: 30px;
}
.gridTable-foot div.footer_show {    
    padding: 7px 10px 0 10px;
    text-align:right;
}
.gridTable-head{
    display: flex;
}
/*sorting*/
.gridTable-head div {
  display:inline-flex;
  flex-wrap: nowrap;
}
.gridTable-head div span:first-of-type{
  flex-grow: 1;
}
.gridTable-head div.sort-asc span.arrow{
  width: 0;
  height: 0;
  margin: 1px;
  border-style: solid;
  border-width: 0px 8px 16px 8px;
  border-color: transparent transparent #FFFFEA transparent;
  z-index:2;
}
.gridTable-head div.sort-desc span.arrow{
  width: 0;
  height: 0;
  margin: 1px;
  border-style: solid;
  border-width: 16px 8px 0 8px;
  border-color: #FFFFEA transparent transparent transparent;
  position:relative; 
  z-index:2;
}
.gridTable-head div.sort-asc span.arrow::after{
  float:right;
  color: black;
  font-size: 10px;
  top:4px;
  left:3px;
  position:relative; 
  z-index:3;
}
.gridTable-head div.sort-desc span.arrow::after{
  float:right;
  color: black;
  font-size: 10px;
  top:-16px;
  left: 3px;
  position:relative; 
  z-index:3;
}
.gridTable-head div.sort-asc.sort-1 span.arrow::after,
.gridTable-head div.sort-desc.sort-1 span.arrow::after{
  content: "1";
}
.gridTable-head div.sort-asc.sort-2 span.arrow::after,
.gridTable-head div.sort-desc.sort-2 span.arrow::after{
  content: "2";
}
.gridTable-head div.sort-asc.sort-3 span.arrow::after,
.gridTable-head div.sort-desc.sort-3 span.arrow::after{
  content: "3";
}
/*filtering*/
.filter-existing {
    height: 45px;
    padding: 10px 0 10px 10px;
    background-color: #F9E0C0;
    border: 2px solid #F9D09D;
    border-radius: 10px 10px;
    margin-bottom: 5px;
}
.filter-existing div { width: 470px; }
.filter-existing button { margin: -8px 0 0 18px; }
.pdqg-filter md-dialog-content {
    margin-bottom: 0;
    padding-bottom: 0;
}
.filter-new {
    border: 2px solid #F9D09D;
    border-radius: 10px 10px;
}
.filter-new md-select {
    width: 140px;
    padding: 0 10px;
    margin: 0;
    margin-bottom: 4px;
}
.filter-new input {
    height: 20px;
    color: #7b7b7b;
    margin-top: 10px;
}

/*resizable*/
.gridTable-head div.resizable::after {
    content:"";
    display: inline-block;
    width: 2px;
    height: 29px;
    cursor:ew-resize;
}