﻿.nestedTableHeader {
    background: var(--primary);
    color: var(--light_gray);
    font-size: 14px;
    padding: 0.5rem;
    border: 1px solid var(--primary);
}

    .nestedTableHeader.first {
        border-radius: 10px 0 0 0;
    }

    .nestedTableHeader.last {
        border-radius: 0 10px 0 0;
    }

.nestedTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    overflow: auto;
}

    .nestedTable th {
        background: var(--primary);
        color: var(--light_gray);
        font-size: 16px;
        padding: 1rem;
        position: sticky;
        z-index: 100;
        top: 0;
    }

        .nestedTable th:first-child {
            border-radius: 10px 0 0 0;
        }

        .nestedTable th:last-child {
            border-radius: 0 10px 0 0;
        }

        .nestedTable th td {
            text-align: left;
        }

    .nestedTable td {
        width: auto;
    }

    .nestedTable tr:hover {
        background-color: var(--light_gray);
    }

.borderLeftRight {
    border-left: 1px solid var(--primary) !important;
    border-right: 1px solid var(--primary) !important;
}

.borderButtom {
    border-bottom: 1px solid var(--primary) !important;
}

@media (max-width: 1000px) {
    .nestedTableHeader {
        display: none;
    }

    .nestedTable td {
        border: none;
        position: relative;
        padding: 0.25rem 0.25rem 0.25rem 50%;
        margin-top: 1rem;
    }

        .nestedTable td:before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            width: 45%;
            white-space: break-spaces;
        }

        .nestedTable td[data-full-width] {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

            .nestedTable td[data-full-width]:before {
                content: none;
            }

    .nestedTable tr {
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--button_gray);
    }

    .nestedTable table, thead, tbody, th, td, tr {
        display: block;
    }

    .nestedTable thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
}
