/* A certain developer made a shit job of coding this design with a lot of CSS tied to server side IDs - meaning you couldn't have two datagrids on one page with the same style.
   But rather than changing everything, instead this new "tableLayout" class does the basics generically..                                                           
*/

.tableLayout.ALIGN-CENTER {margin-left: auto; margin-right: auto;}
.tableLayout.NO_LEFT_RIGHT_MARGIN {margin-left: 0; margin-right: 0;}
.tableLayout.FULL_WIDTH {width: 100%;}

.tableLayout { width: auto; margin: 20px 0 20px 20px; border: 0; border-bottom: 1px solid #D6D6D6; }
.tableLayout tr:first-child td { border: 0; padding: 10px; box-sizing: border-box; font-weight: 700; text-transform: uppercase; color: #16355F; font-size: 1.05em }
.tableLayout .tableRow td, .tableLayout .alternateRow td { border: 0; border-top: 1px solid #D6D6D6; padding: 5px 10px; box-sizing: border-box; }  
.tableLayout .alternateRow { background: #fff }
.tableLayout .tableRow { background: #E6F4F4; }
.tableLayout select {padding: 5px;}

.tableLayout td.EmptyDatagridMessage { border: none; border-top: 1px solid #D6D6D6; background: #E6F4F4; padding: 12.5px 10px; font-size: 14px; font-weight: 400; color: #16355F;}

@media (max-width: 850px) {
  .tableLayout {width: 100%; margin-left: 0;}
  .tableLayout > tbody td,
  .tableLayout > tbody th { display: block; }
  .tableLayout tr:nth-of-type(1) { display: none; }
  .tableLayout tr.tableRow { border-top: 1px solid #D6D6D6; }
  .tableLayout tr.tableRow td { border-top: 0; }
  .tableLayout tr.alternateRow { border-top: 1px solid #D6D6D6; }
  .tableLayout tr.alternateRow td { border-top: 0; }
  .tableLayout > tbody td { display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px; }
  .tableLayout td:nth-of-type(1):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
  .tableLayout td:nth-of-type(2):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
  .tableLayout td:nth-of-type(3):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
  .tableLayout td:nth-of-type(4):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
  .tableLayout td:nth-of-type(5):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
  .tableLayout td:nth-of-type(6):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
  .tableLayout td:nth-of-type(7):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
  .tableLayout td:nth-of-type(8):before { min-width: 120px; font-weight: 600; max-width: 25%; text-align: right;}
}