@media screen and (max-width: 600px) {

    .table-wrapper table {
        border: 0;
    }


        .table-wrapper table caption {
            font-size: 1.3em;
        }

       /* .table-wrapper table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }
*/
            .table-wrapper table thead th {
                border-bottom: 1px solid #ddd;
                display: flex !important;
                font-size: .8em;
                text-align: right !important;
                justify-content: space-between !important;
            }

        .table-wrapper table th::before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
            width: 65%;
            text-align: left;
            color: black !important
        }

        .table-wrapper table th:not(:has(input)) {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .table-wrapper table tr {
            border-bottom: 3px solid #ddd;
            display: block;
            /*margin-bottom: .625em;*/
        }

        .table-wrapper table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
        }

            .table-wrapper table td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                width: 65%;
                text-align: left;
            }

            .table-wrapper table td:last-child {
                border-bottom: 0;
            }

    .table-wrapper .table-bordered > tbody > tr > td {
        font-size: 11px !important;
    }
    table.dataTable tbody tr.selected, table.dataTable tr.DTTT_selected.even td.sorting_1 {
        background-color: #ffffff !important;
    }
    table.dataTable tr.DTTT_selected.odd {
        /*        background: var(--table-odd) !important;*/
        background: #ffffff !important;
    }
}



@media screen and (max-width: 600px) {

    .table-striped {
        border: 0 !important;
    }

        .table-striped tr:nth-child(odd) {
            /*background: var(--table-odd) !important;*/
        }

        .table-striped caption {
            font-size: 1.3em !important;
        }
        .table-striped thead th:not(:has(input)) {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

    .table > thead:first-child > tr:first-child > th {
        color: var(--table-th-color) !important;
        background: rgba(255, 255, 255, .15) !important;
        border: none !important;
        font-size: 14px !important;
        text-align: left !important;
        width: 100% !important;
    }
        .table-striped tr {
            border-bottom: 3px solid #ddd !important;
            display: block !important;
            /*margin-bottom: .625em;*/
        }

        .table-striped tbody tr td {
            border-bottom: 1px solid #ddd !important;
            display: block !important;
            font-size: .8em !important;
            text-align: right !important;
        }

        .table-striped  td::before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
            width: 65%;
            text-align: left;
        }
    .table-striped thead th {
        border-bottom: 1px solid #ddd;
        display: flex !important;
        font-size: .8em;
        text-align: right !important;
        justify-content: space-between !important;
    }
    .table-striped th::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        width: 65%;
        text-align: left;
        color: black !important
    }



        .table-striped td:last-child {
            border-bottom: 0 !important;
        }

        .table-striped .table-bordered > tbody > tr > td {
            font-size: 11px !important;
        }
   
}

@media (max-width: 1024px) {


    .k-grid-header .k-grid-header-wrap thead th {
        border-bottom: 1px solid #ddd;
        display: flex !important;
        font-size: .8em;
        text-align: right !important;
        justify-content: space-between !important;
    }

        .k-grid-header .k-grid-header-wrap thead th::before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
            width: 65%;
            text-align: left;
            color: black !important
        }

        .k-grid-header .k-grid-header-wrap thead th:not(:has(input)) {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }



    .k-grid-content table,
    .k-grid-content-locked table {
        table-layout: auto !important;
        width: 100% !important;
    }

        .k-grid-content table tr,
        .k-grid-content-locked table tr {
            display: block;
            border-bottom: 4px double #3333;
        }
    .k-grid-content tr:last-child > td {
        border-bottom-width: 1px !important;
    }
        .k-grid-content table td,
        .k-grid-content-locked table td {
            border-bottom: 1px solid #ddd;
            display: flex !important;
            font-size: .8em;
            text-align: right !important;
            justify-content: space-between !important;
            width: 100% !important;
        }

    .k-grid .k-grid-content table td::before,
    .k-grid .k-grid-content-locked table td::before {
        content: attr(data-title) ": ";
        width: 60% !important;
        font-weight: bold;
        display: inline-block;
        margin-right: 10px;
        text-align: left;
    }

  /*  .k-grid-footer .k-grid-footer-wrap table, tr, td {
        width: 100% !important;
    }*/
/*
    .k-grid-header .k-grid-header-wrap thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }*/

    .k-grid table tr {
        display: block;
    }

    .k-grid table td {
        border-bottom: 1px solid #ddd;
        display: flex !important;
        font-size: .8em;
        text-align: right !important;
        justify-content: space-between !important;
    }

    .k-grid .k-grid-content table td::before {
        content: attr(data-title) ": ";
        width: 60% !important;
        font-weight: bold;
        display: inline-block;
        margin-right: 10px;
        text-align: left;
    }

    .k-grid table td:last-child {
        border-bottom: 0;
    }

    .k-grid-footer .k-grid-footer-wrap table div {
        margin-top: -8px !important;
    }

    .k-grid-footer .k-grid-footer-wrap table td {
        padding: 20px 8px;
    }


        .k-grid-footer .k-grid-footer-wrap table td div::before {
            content: attr(data-title) " ";
            font-weight: bold;
            display: inline-block;
            margin-right: 5px;
        }

        .k-grid-footer .k-grid-footer-wrap table td:not(:has(div)) {
            display: none !important;
        }

    .k-grid colgroup {
        width: 100% !important;
    }

        .k-grid colgroup col:nth-child(n+2) {
            display: none;
        }

    .k-grid-header .k-grid-header-locked thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}

@media (max-width: 320px) {

    .k-grid table td {
        justify-content: normal !important;
    }
}


@media (max-width: 768px) {

    @media (max-width: 1024px) {
        .datepicker table tr td, .datepicker table tr th {
            width: 12px !important;
        }
}

}