html, body {
  font-size: 12px;
  font-family: Arial, sans-serif;
}

/* 1. Color of the arrowhead when the child row is CLOSED */
table.dataTable td.dt-control::before,
table.dataTable th.dt-control::before {
    /* Change the color here (SportUni-lila 50% läpinäkyvyydellä)  */
    border-left-color: #4e008e80 !important;
}

/* 2. Color of the arrowhead when the child row is OPEN (pointing down) */
table.dataTable tr.dt-hasChild td.dt-control::before,
table.dataTable tr.dt-hasChild th.dt-control::before {
    /* Change the color here */
    border-top-color: #4e008e80 !important;

    /* Zero out the previous left border if needed so it spins cleanly */
    border-left-color: transparent !important;
}

/* Target the table cells inside your custom child table */
.child-info-table {
    border-collapse: collapse !important; /* Ensures borders join cleanly without gaps */
    width: 100%;
}

/* Apply faint separator lines between rows */
.child-info-table tr:not(:last-child) td {
    border-bottom: 1px solid #e2e8f0 !important; /* Soft, modern slate gray line */
}

/* Get rid of the border inherited from DataTables and fix double padding on the bottom */
.child-info-table tr:last-child td {
    border-bottom: none !important;
	padding-bottom: 0px !important;
}