.custom-table {
    width: 100%;
    border-collapse: collapse;
}

    .custom-table th, .custom-table td {
        border: 1px solid #ddd;
        padding: 10px;
    }

    .custom-table th {
        background: #333;
        color: white;
    }

    .custom-table tr:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .custom-table tr:hover {
        background-color: rgba(0, 0, 0, 0.1);
        outline: 2px solid rgba(0, 0, 0, 0.1);
    }

    .custom-table tr.disabled-row {
        opacity: 0.3;
        background-color: transparent;
        box-shadow: rgba(108, 117, 125, 0.1) 0px 1px 2px 0px, rgba(108, 117, 125, 0.05) 0px 2px 6px 2px;
    }

    .custom-table tr.checked-row {
        background-color: rgba(25, 135, 84, 0.2);
        box-shadow: #198754 0px 1px 2px 0px, #198754 0px 2px 6px 2px;
    }

    .custom-table tr.disabled-row td {
        position: relative;
    }

        .custom-table tr.disabled-row td::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            /*                height: 0.7px;*/
            background: #dc3545;
        }

    .custom-table .d-small {
        display: none;
    }

@media (min-width: 992px) {
    .custom-table .head-visibility {
        display: contents;
    }
    .custom-table tr.checked-row {
        box-shadow: unset;
    }

        .custom-table tr.checked-row td,
        .custom-table tr.checked-row th {
            outline: 1px solid #198754;
        }
}

@media (max-width: 991.9px) {
    * {
        box-sizing: border-box;
    }
    .custom-table .head-visibility {
        display: none;
    }
    .custom-table {
        padding: 1.5rem;
    }

        .custom-table,
        .custom-table thead,
        .custom-table tbody,
        .custom-table th,
        .custom-table td,
        .custom-table tr {
            display: block;
            width: 100%;
        }

            .custom-table thead th:not([active]) {
                display: none;
            }

            .custom-table thead tr {
                background: #333;
                color: white;
            }

            .custom-table thead th {
                padding: 0.5rem 0;
                border: unset;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .custom-table .d-small {
                display: inline;
            }

            .custom-table tr {
                background: #f9f9f9;
                margin-bottom: 1.5rem;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                width: 100%;
                box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
            }

            .custom-table td {
                border: none;
                padding: 8px 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: end !important;
                gap: 10px;
                width: 100%;
            }

                .custom-table td[data-label]::before {
                    content: attr(data-label) ": ";
                    font-weight: bold;
                    color: #333;
                    flex-shrink: 0;
                }

                .custom-table td:not([data-label]) {
                    display: block;
                    width: 100%;
                    text-align: left;
                }
}