.data-grid-frame
{
  border: 1px solid gray;
}

.data-grid-container 
{
    position: relative;
    overflow: auto;
    background-color: #F0F0F0;
}

.data-grid 
{
    display: inline-grid;
    grid-template-rows: auto;
    grid-auto-columns:minmax(100px, auto);
    grid-auto-rows: minmax(30px, auto);
    position: relative;
    background-color: #F0F0F0;
    width: 100%;
}

.data-grid-footer
{
 background-color: #D8EBFC;
 padding: 2px;
 text-align: center; 
}

.data-grid .top-sticky 
{
    position: sticky;
    top: 0;
    z-index: 2;
}

.data-grid .left-sticky
{
    position: sticky;
    left: 0;
    z-index: 1;
}

.data-grid .corner  
{
    z-index: 3; /* Higher z-index for intersection */
}



.data-grid .header 
{
    background-color: #9eaecd; 
    color: White;
    padding: 3px 3px 3px 3px;
    border: 1px solid #F0F0F0;
    text-align: center;
    background-clip: padding-box;
    font-weight: bold;
}

.data-grid .header a
{
  color: White;
  font-weight: bold;
}

.data-grid .header .header-title
{
  white-space: nowrap;
  text-wrap: nowrap;
  margin-bottom: 2px;
}

.data-grid .cell 
{
  background-color: #D8EBFC; 
  padding: 3px 3px 3px 3px;
  border: 1px solid #F0F0F0;
  background-clip: padding-box;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}