.w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
    padding-left: 4px;
}

#download-csv
{
    margin-top: -32px;
    float: right;   
}

.start-date-bar
{
    position: absolute;
    margin-left: -200px;
    margin-top: -20px;
}

.num-column, .net-col, .total-net-col, .count-col, .total-count-col, #grand-total-count, #grand-total-net
{
    text-align: right !important;   
}

.end-date-bar
{
    position: absolute;
    margin-left: -195px;
    margin-top: 20px;
}

.user-table
{   
    margin-top: 32px;
}

.user-table td, .user-table table td
{   
    margin-top: 32px;
    padding: 8px 4px;
}

#loginform 
{
    width: 50%; 
    margin: auto; 
    margin-top: 125px
}

#login-img 
{
    width: 300px;
    display: block;
    margin: auto;
}

.user-name
{
    margin-top: 55px;
    margin-left: -200px ;
    float: left;
}

.data-panel 
{
    height: 83vh;
}

.header 
{
    margin: 16px;   
    width: auto;
}

.sort-col
{
    cursor: pointer;
}

.logo 
{
    float: left;
    width: 12%;
    margin: 8px;   
}

.trans-table table {
    display: flex;
    flex-flow: column;
    height: 90%;
    width: 100%;
}
.trans-table table thead {
    /*
        we have to subtract some pixels frm the width to make up for the scroll bar
    */
    flex: 0 0 auto;
    width: calc(100% - 1.7em);
    display: table;
    table-layout: fixed;
}
.trans-table table tbody {
    /* 
        on pc, the width of the table is 100%
       on mobile, the width should match whatever thead is using (as mobile scrollbar does not displace)
    */
    width: 100%;
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}

.cancelled 
{
    background-color: #ff9696 !important;
}

.trans-table table tbody tr {
    width: 100%;
}

.trans-table table tbody tr {
    display: table;
     width: 100%;
    table-layout: fixed;
}

.trans-table table tbody td, .trans-table table thead th
{
    border-right: solid 1px #ccc;
    border-left: solid 1px #ccc;
    padding: 4px;
    overflow: hidden;
}

.summary-table table {
    height: 90%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-flow: column;
}
.summary-table table thead {
    display: table;
    width: 100%;
    table-layout: fixed; 
    
}
.summary-table table tbody {
    /* body takes all the remaining available space */
  
}
.summary-table table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;  
}

.summary-table table td, .summary-table table th
{
    padding: 3px 8px !important;
}

.check-col 
{
    width: 10%;   
}

.status 
{
    position: relative;
    left: 45%;
    top: 40%;
    transform: translateY(-50%);
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #0159f4; /* Blue */
    border-bottom: 16px solid #84c26c;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}