.il-formatted ila-datatable,
il-call-to-action ila-datatable,
il-clickable-card ila-datatable,
il-statistic ila-datatable {
box-sizing: border-box;                        
width: 100%;
overflow: auto;
}

ila-datatable table > thead th[aria-sort="ascending"] span::after {
content: "\25BC";
color: currentColor;
font-size: 100%;
top: 0;
}

ila-datatable table > thead th[aria-sort="descending"] span::after {
content: "\25B2";
color: currentColor;
font-size: 100%;
top: 0;
}
                
body {
margin: 0;
border: 0;
padding: 0;
height: 100%;
max-height:100%; 
}

h1 {
margin-top: 30px;
margin-bottom: 30px;
}

div.table-container {
position: relative;
width: 100%;
max-width: 1000px;
max-height: 1000px;
margin: 0 auto;
}

thead {
position: sticky;
top: 0;
z-index: 10; ;  /* keeps the head visible above the rest of the table when you scroll vertically */
}

.il-formatted thead th, thead tr > th:first-child {
background-color: var(--il-industrial-blue); !important;
color: #fff;
position: relative;
border-right: 2px solid #fff !important;
}

thead tr > th:first-child {
position: sticky;
left: 0;
z-index: 11; /* keeps the first column in the head visible above the rest of the column heads when you scroll horizontally */
box-shadow: 4px 0 0 0 #fff; /* Creates the thick right border effect */
}

tbody tr > th:first-child {
background-color: #dedede;
color: #000;
position: sticky;
left: 0;
box-shadow: 4px 0 0 0 #000; /* Creates the thick right border effect */
}

tbody tr th, tbody tr td {
border-right: 2px solid #999 !important;
border-bottom: 2px solid #999 !important;
min-width: 120px;
min-height: 90px;
vertical-align: middle !important;
}

.table-container {
overflow-x: scroll;
overflow-y: scroll;
scroll-snap-type: both mandatory;
scroll-padding-left: 154px; /* will vary depending on width of first column */
scroll-padding-top: 145px; /* will vary depending on height of first row */
}
        
td, th {
scroll-snap-align: start;
}

.il-formatted .vertical-center td {
vertical-align: middle !important;
}