body {
    padding: 0;
}

#car-data {
    max-height: 100vh;
    height: 100vh;
    overflow: hidden;
    padding: 1rem;
    /* display: block; */
    /* display: grid; */
    /* border: 1px solid var(--color-text-muted); */
}

/* TODO - Move this to DT dedicated file...figure out how to organize libs CSS */
.dt-container {
    clip-path: content-box;
    display: grid;
    align-content: baseline;

    & .dt-table-scroll-wrapper {
        display: block;
        overflow-y: auto;
        height: 100%;

        & table.dt-table {
            /* text-overflow: ellipsis; */

            max-height: 100%;
            /* height: 100%; */
            /* overflow-y: auto; */
            border-collapse: separate;
            border-spacing: 0;

            & thead {

                /* background: var(--color-bg); */
                & tr {
                    & th {
                        cursor: pointer;
                        user-select: none;
                        -webkit-user-select: none;
                        position: sticky;
                        top: 0;
                        /* Don't forget this, required for the stickiness */
                        border: 1px solid var(--color-text-muted);
                        background: var(--color-bg);
                        padding: 0.5rem;
                    }
                }
            }
        }
    }

    & .dt-search-and-paginate {
        &>div {
            margin-right: 0.5rem;
            height: 2rem;
        }

        &>div:last-child {
            margin-right: 0;
        }

        @media (max-width: 630px) {
            flex-direction: column;

            /* margin-bottom: 0.5rem; */
            &>div {
                margin-right: 0;
                margin-bottom: 0.5rem;
                overflow-x: auto;
            }

            & div:last-child {
                margin-bottom: 0rem;
            }
        }

        & .dt-search-box {
            width: 100%;
            min-width: 6rem;

            & input {
                width: 100%;
                margin-bottom: 0;
            }
        }

        & .dt-pagination {
            & select {
                display: inline-block;
                height: 1.3rem;
                padding: 0.1rem;
                margin-bottom: 0;
                width: auto;
                border: initial;
                border-radius: 0;
            }

            & a {
                text-decoration: none;
            }

            & div {
                display: inline-block;
            }

            width: 100%;
            border: 1px solid var(--color-bg-offset);
            min-height: 100%;
            padding: 0rem 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .dt-search-matches-count {
            border: 1px solid var(--color-bg-offset);
            min-height: 100%;
            display: flex;
            align-items: center;
            padding: 0.2rem 0.5rem;
            justify-content: center;
        }

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        /* margin-bottom: 1rem; */
        margin-bottom: 0.5rem;
        white-space: nowrap;
        overflow-x: auto;
        height: min-content;
    }
}

/* This level of nesting does not work in Safari as of 2024-05-15 */
/* .dt-container .dt-search-and-paginate .dt-pagination select {
    display: inline-block;
    height: 1.3rem;
    padding: 0.1rem;
    margin-bottom: 0;
    width: auto;
    border: initial;
    border-radius: 0;
}

.dt-container .dt-search-and-paginate .dt-pagination a {
    text-decoration: none;
}

.dt-container .dt-search-and-paginate .dt-pagination div {
    display: inline-block;
} */