/* --- Overall Table Responsiveness (keep these rules) --- */

.forminator-custom-form-557.forminator-ui,
.forminator-custom-form-557 .forminator-table {
    max-width: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    box-sizing: border-box;
}

.forminator-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    word-wrap: break-word;
}

.forminator-table th,
.forminator-table td {
    padding: 6px 4px !important;
    white-space: normal !important;
    vertical-align: top;
}

/* ABSOLUTE OVERRIDE: Centering for DataTables header cells with dt-center class */
/* This rule uses the table ID and a very specific selector to ensure it wins */
#forminator-table-557.dataTable thead th.dt-center {
    text-align: center !important;
}

/* Also ensure the data cells are centered too (though your JS render might handle this for Start/Finish Times) */
.dataTables_wrapper table.dataTable tbody td.dt-center {
    text-align: center !important;
}

/* Ensure the toggle column header and data are centered and tight */
.dataTables_wrapper table.dataTable th:nth-child(1), /* Target the first header cell (toggle) */
.dataTables_wrapper table.dataTable td:nth-child(1) { /* Target the first data cells (toggle) */
    text-align: center !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    width: 3% !important; /* Set width explicitly if not done in JS */
}

@media screen and (max-width: 768px) {
    .forminator-table {
        font-size: 0.85em;
    }
    .forminator-table th,
    .forminator-table td {
        padding: 4px 2px !important;
    }
    /* If you want to hide the toggle on mobile, uncomment the rule below: */
    /* .forminator-table .expand-toggle {
        font-size: 1em;
        line-height: 1;
        visibility: hidden;
    } */
}

/* --- Detail Row Specific Formatting --- */
.forminator-table .dt-detail-row-attached td {
    box-sizing: border-box;
    padding: 0px !important;
    white-space: normal !important;
}

/* --- Custom Spacing for Accordion Items within Detail Row --- */

tbody div p {
    margin-bottom: 0px !important; /* Use !important to override inline styles and other high-specificity rules */
}
tbody h3 {
	Margin-bottom:-5px!important;

/* These rules still apply to the content *inside* the colspan'd TD,
   ensuring the accordion content wraps within the now wider detail row. */
html body .forminator-table .dt-detail-row-attached .accordion {
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
}

html body .forminator-table .dt-detail-row-attached .accordion h3 + div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block !important;
    min-width: 0 !important;
}

html body .forminator-table .dt-detail-row-attached .accordion h3 + div p,
html body .forminator-table .dt-detail-row-attached .accordion h3 + div span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
}

/* Ensure the hidden DataTables column is truly hidden */
.dt-hidden-col, /* For the header */
#forminator-table-557 th.dt-column-8, /* Target by DataTables internal column class */
#forminator-table-557 td.dt-column-8 { /* Target by DataTables internal column class */
    display: none !important;
    visibility: hidden !important; /* Redundant if display:none, but good for safety */
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}