div.fcGridContainer {

    display:flex;

    flex-direction:column;

    height:100%;

}





div.fcGrid {

overflow:auto;

display:block;

background:#eee;

flex:1;

}



div.fcGrid-header {

position:fixed;

top:0;

overflow:hidden;

}



div.fcGrid-header>table {

position:relative;

left:0;

}





.fcGrid * {

box-sizing:border-box;

font-size:10pt;

font-family:Calibri, Verdana, Arial !important

}



.fcGrid table {

    border: none;

    border-collapse: collapse;

    

}



.fcGrid th {

    padding: 0;

    font-weight: normal;

    background-color: #ededed;

    position: sticky;

    top: 0px;

    user-select:none;

}



.fcGrid th > div {

    border-right: solid 1px #aaa;

    border-bottom: solid 1px #aaa;

    border-top: solid 1px #fff;

    border-left: solid 1px #fff;

    padding: 0;

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    min-width:50px;

    overflow:hidden;

    text-overflow:ellipsis;

}



#fcGridColumnSplitter {

position:fixed;

width:2px;

border-right:solid 1px #aaa  ;

display:none;

cursor:col-resize;

}



.fcGrid th > div.filter {

    flex-direction:column;

    padding:2px 3px;

}



.fcGrid th > div > span {

    padding: 3px 0px 3px 4px;

    flex:1;

    overflow:hidden;

    text-overflow:ellipsis;

}



.fcGrid th > div.filter > span {

    font-size: 8pt;

    line-height: 1;

    display: block;

    padding:0;

}



.fcGrid th i {

    width:4px;

    display:block;

    cursor:col-resize;

}



.fcGrid th i:hover {

    background:#aaa;

}



.fcGrid th input {

    font-size: 8pt;

    line-height: 1;

    width: 100%;

    border-top: solid 1px #bbb;

    border-right: solid 1px #fff;

    border-left: solid 1px #bbb;

    border-bottom: solid 1px #fff;

    border-radius: 3px;

}



.fcGrid th[sort] {

cursor: pointer;

}



.fcGrid tr {

background-color:#fff;

}



.fcGrid tr:hover td {

background-color: #0592;

}



.fcGrid td {

    border: solid 1px #eee;

    padding: 1px 6px;

    white-space: nowrap;

    max-width: 500px;

    overflow: hidden;

    text-overflow: ellipsis;

    user-select: text;

}



.fcGrid td[n]{

    color:#aaa;

}





.fcGrid td[current]{



}



.fcGrid input[data] {

position: fixed;

display: none;

outline: none;

border: 1px solid #ddd;

padding: 2px 4px;

}



 



.fcGrid input[data]:read-only {

    background-color: transparent;

}



.fcGrid tr.f {

display:none

}



.fcGrid tr.f th {

padding:1px;

position:sticky;

top:24px;

}



.fcGrid tr.f input {

    width: 100%;

    border: none;

    font-size: 0.9em;

    border-radius: 2px;

    background: #eee;

    outline: none;

    line-height: 1;

    padding: 0 4px;

    border: solid 1px #ddd;

}



.fcGrid tr.f input:focus {

    background: #fff;

}



.fcGrid tr.sel {

background:#0595;



}



.fcGrid th[sort='asc'] {

    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAQUlEQVRIie3OwQ0AEBBE0S+KdhSlOaiLBgQb9iLzkr3OXxCR/yWgby57Rq7HV5Fn47PI8Xg0BBoQgAoU02si4msAGIcZ0HxmaJAAAAAASUVORK5CYII=');

    background-position:center -9px;

    background-repeat:no-repeat;

}



.fcGrid th[sort='desc'] {

    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAANElEQVRIiWNgGAWjYBQMOtDAwMDQQUvD/0Mx1S1BNpzqlmAznGqW4DOcZsE1CkbBKBhsAAAjORkVvVOzKAAAAABJRU5ErkJggg==');

    background-position:center -9px;

    background-repeat:no-repeat;

}





.fcGrid th>div {

}



div.fcGrid-pager {

    display: flex;

    border: solid 1px #aaa;

    border-top: none;

    margin: 0;

    padding: 1px;

    overflow: auto;

    background: #ddd;

    align-items: center;

}



div.fcGrid-pager-container {

    display: flex;

    align-items: center;

    justify-content: flex-end;

}



table.fcPager {

    border-collapse: collapse;

    border-right:solid 1px #aaa;

    height:100%;

}



.fcPager td {

font-family: monospace;

font-size:8pt;

padding: 6px 10px;

border-left: solid 1px #aaa;

border-radius: 2px;

background-color:#eee;

text-align:center;

user-select: none;

min-width:24px;

vertical-align:middle;

line-height:1;

white-space:nowrap;

}



.fcPager td i {

    font-size:16px;

}



.fcPager td[p] {

    font-weight: bold;

    background: linear-gradient(#eee, #d4d4d4);

    cursor: pointer;

}



.fcPager td[p]:hover {

font-weight: bold;

background:linear-gradient(#fff, #eee);

cursor:pointer;

}



.fcPager td[info] {

width:100px;

padding:0;

text-align:left;

vertical-align:top;

cursor:pointer;

}



.fcPager td > div {

    position: absolute;

    background: #488dc555;

    margin: 0;

    z-index: 0;

    height: 34px;

}



.fcPager td>span {

position:absolute;

z-index:1;

width:100px;

text-align:center;

padding:10px 0;

}



table.fcSearch{

float:left;

border-collapse:separate;

border:solid 1px #aaa;

background:#fff;

margin:2px 5px;

border-radius:3px;

}



table.fcSearch td{

padding:0;

}



table.fcSearch input{

border-right:none;

border:none;

background:#fff;

padding:1px 6px;

font-size:10pt;

outline:none;

width:150px;

}



.fcGrid-search {

background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWElEQVQ4T6XTv0tXYRQG8I9KkA5BCqFr1ibYVlNCiJAgIQrZklFTUxD6Twii0NIWKqiLQkODBNFmRotUWzW1hzkYmhhHzpXXS19FvNN7z3PO85yfTc75NdXiWzGOe7iKPWxiDm9xUNcrCXqxgu4GSb3GQ/wu8Yog1D7hMvaxig1cxBBuZtB79KfPoakieINBbOEu1guV8JnAVNqe4mWFBxjq39PwAMsNSgj7fXxFT0kQdUWTttGOvw0IBrCWWPj9qkp4hll8w/UTphqqnxOPRv+oCMawhD+ZwU4DkuFsbsCXMuPDJnbiJ1rwHDP/IWjGO/TldG6VPYj3KzzK+p9goViaNrzA4wwazX05NsYOfMC1dIpaPyI2M+Z+pchqGpOVQLmJXZjPgHoVMZkvuJHAEUn9FuL/dnELu3kLi9mnaPZISVInOO02L+TEKpLRsxKEQJDE4sXK3/kHbAZBlgTbix4AAAAASUVORK5CYII=');

background-position:center center;

background-repeat:no-repeat;

width:24px;

border:none;

}



.fcGrid-filter.fcShow {

background-color:#eee;

}