// .table > :not(:first-child) {
//     border-top: none !important;
// }

// .table thead tr th {
//     --tw-bg-opacity: 1;
//     // background-color: rgb(243 244 246 / var(--tw-bg-opacity));

//     font-size: 12px;
//     text-transform: uppercase;
//     letter-spacing: 0.1rem;
// }

// .table {
//     // --tw-ring-offset-shadow: 0 0 #0000;
//     // --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
//     // --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
//     // box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
//     border-radius: 0.5rem;
// }

// .data-container {
//     background-color: #efefef;
//     padding: 20px;
//     border-radius: 4px;
//     margin-bottom: 20px;

//     .table thead {
//         display: table-header-group;
//         vertical-align: middle;
//         border-color: inherit;
//     }

//     .table tbody td {
//         background-color: #fff !important;
//         color: #777;
//         font-weight: 400;
//         padding-bottom: 10px;
//         padding-top: 10px;
//         font-weight: 300;
//     }
//     .table tbody tr {
//         padding-bottom: 20px;
//     }
//     .table tbody tr th:first-child,
//     .table tbody tr td:first-child {
//         border-top-left-radius: 7px;
//         border-bottom-left-radius: 7px;
//     }

//     .table tbody tr th:last-child,
//     .table tbody tr td:last-child {
//         border-top-right-radius: 7px;
//         border-bottom-right-radius: 7px;
//     }
// }

// /* Responsive */
// @media screen and (max-width: 600px) {
//     table {
//         border: 0;
//     }

    

//     table thead {
//         border: none;
//         clip: rect(0 0 0 0);
//         height: 1px;
//         margin: -1px;
//         overflow: hidden;
//         padding: 0;
//         position: absolute;
//         width: 1px;
//     }

//     table tr {
//         border-bottom: 3px solid #ddd;
//         display: block;
//         margin-bottom: 0.625em;
//     }

//     table td {
//         border-bottom: 1px solid #ddd;
//         display: block;
//         // font-size: 0.8em;
//         text-align: right;
//     }

//     table td::before {
//         /*
//     * aria-label has no advantage, it won't be read inside a table
//     content: attr(aria-label);
//     */
//         content: attr(data-label);
//         float: left;
//         font-weight: bold;
//         text-transform: uppercase;
//     }

//     table td:last-child {
//         border-bottom: 0;
//     }
// }


// // /*
// // 	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
// // 	*/
// // 	@media
// // 	  only screen 
// //     and (max-width: 760px), (min-device-width: 768px) 
// //     and (max-device-width: 1024px)  {

// // 		/* Force table to not be like tables anymore */
// // 		table, thead, tbody, th, td, tr {
// // 			display: block;
// // 		}

// // 		/* Hide table headers (but not display: none;, for accessibility) */
// // 		thead tr {
// // 			position: absolute;
// // 			top: -9999px;
// // 			left: -9999px;
// // 		}

// //     tr {
// //       margin: 0 0 1rem 0;
// //     }
      
// //     tr:nth-child(odd) {
// //       background: #ccc;
// //     }
    
// // 		td {
// // 			/* Behave  like a "row" */
// // 			border: none;
// // 			border-bottom: 1px solid #eee;
// // 			position: relative;
// // 			padding-left: 50%;
// // 		}

// // 		td:before {
// // 			/* Now like a table header */
// // 			position: absolute;
// // 			/* Top/left values mimic padding */
// // 			top: 0;
// // 			left: 6px;
// // 			width: 45%;
// // 			padding-right: 10px;
// // 			white-space: nowrap;
// // 		}


// // }