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

    #hideONMobileview {
        display: none !important;
    }
    .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 th input[type="checkbox"] {
        /* margin: 5px 20px !important;*/
        margin: 5px 7px !important;
    }

    .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:not(:has(input))::before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
            width: 65%;
            text-align: left;
        }

        .table-wrapper table td:has(input) {
            text-align: right !important;
        }

        .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: #f5f5f5 !important;
    }

    table.dataTable tr.DTTT_selected.odd {
        /*        background: var(--table-odd) !important;*/
        background: #f5f5f5 !important;
    }


        table.dataTable tr.DTTT_selected.odd td.sorting_1 {
            background: #f5f5f5 !important;
        }

    .table-wrapper table th::before {
        margin-left: 10px !important;
    }

    .table > thead > tr > th {
        padding: 10px 0px !important;
    }
}



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

    .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: var(--table-th) !important;
        border: none !important;
        font-size: 14px !important;
        text-align: left !important;
        width: 100% !important;
    }

    .table-striped th input[type="checkbox"] {
        /*        margin: 5px 20px !important;*/
        margin: 5px 7px !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:not(:has(input))::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;
    }

    .table-striped table td:has(input) {
        text-align: right !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-grouping-header{
        display:none !important;
    }

    .k-pager-numbers .k-link.k-state-selected{
        color:#000000 !important;
    }
    .k-grid .k-grid-content-locked table td:has(input),
    .k-grid .k-grid-content table td:has(input) {
        text-align: right !important;
    }


    .k-grid-header .k-grid-header-wrap thead th:has(input) input[type="checkbox"] {
        /*margin: 5px 20px !important;*/
        margin: 5px 7px !important;
    }

    .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: 3px solid white;
    }

    .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;
        }
}

}