
<!-- Datatables.net CSS-->
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/DataTables-1.11.2/css/dataTables.bootstrap5.css")}}">
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/Buttons-2.0.0/css/buttons.bootstrap5.css")}}">
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/Select-1.3.3/css/select.bootstrap5.css")}}">

{{--<link rel="stylesheet" type="text/css" href="{{url("plugins/datatables/Editor-2.0.5/css/editor.dataTables.min.css")}}">--}}
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/Editor-2.0.5/css/editor.bootstrap5.min.css")}}">

{{--<link rel="stylesheet" type="text/css" href="{{url("plugins/datatables/RowGroup-1.1.3/css/rowGroup.dataTables.min.css")}}">--}}
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/RowGroup-1.1.3/css/rowGroup.bootstrap5.min.css")}}">

<!-- Datatables.net Select 2 CSS-->
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/Select-1.3.3/css/select.dataTables.min.css")}}">
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/Select-1.3.3/css/select.bootstrap5.min.css")}}">

<!-- Datatables.net Datetime CSS-->
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/DateTime-1.1.1/css/dataTables.dateTime.min.css")}}">

<!-- Datatables.net Search-Pane CSS-->
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/SearchPanes-1.4.0/css/searchPanes.dataTables.min.css")}}">
<link rel="stylesheet" type="text/css" href="{{url("vendor/datatables/SearchPanes-1.4.0/css/searchPanes.bootstrap5.min.css")}}">

<script type="text/javascript" charset="utf8" src="{{url('vendor/moment-js/moment.min.js')}}"></script>

<style>
    /*div.DTE_Bubble {*/
    /*    position: relative;*/
    /*    z-index: 2000;*/
    /*    margin-top: -6px;*/
    /*    opacity: 0;*/
    /*}*/

    /*div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {*/
    /*    position: relative;*/
    /*    top: -11px;*/
    /*    right: -11px;*/
    /*    width: 22px;*/
    /*    height: 22px;*/
    /*    border: 2px solid white;*/
    /*    background-color: black;*/
    /*    text-align: center;*/
    /*    border-radius: 15px;*/
    /*    cursor: pointer;*/
    /*    !*z-index: 200;*!*/
    /*    box-shadow: 2px 2px 6px #111;*/
    /*}*/

    /*div.DTE_Bubble_Background {*/
    /*    position: fixed;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    background: rgba(0, 0, 0, 0.7);*/
    /*    !* Fallback *!*/
    /*    background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);*/
    /*    !* IE10 Consumer Preview *!*/
    /*    background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);*/
    /*    !* Firefox *!*/
    /*    background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);*/
    /*    !* Opera *!*/
    /*    background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));*/
    /*    !* Webkit (Safari/Chrome 10) *!*/
    /*    background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);*/
    /*    !* Webkit (Chrome 11+) *!*/
    /*    background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);*/
    /*    !* W3C Markup, IE10 Release Preview *!*/
    /*    !*z-index: 10;*!*/
    /*}*/

    /*div.DTE_Bubble_Background {*/
    /*    position: fixed;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    bottom: 0;*/
    /*    !*z-index: 2002;*!*/
    /*    background-color: rgba(0, 0, 0, 0.05);*/
    /*}*/

    /*div.editor-datetime {*/
    /*    position: absolute;*/
    /*    background-color: white;*/
    /*    !*z-index: 2050;*!*/
    /*    border: 1px solid #ccc;*/
    /*    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);*/
    /*    padding-bottom: 5px;*/
    /*}*/
</style>

<style>
    table.dataTable tbody > tr.selected,
    table.dataTable tbody > tr > .selected,
    table.dataTable tbody tr.odd.selected,
    .datatable-selected-row{
        background: var(--success) !important;
        color: var(--white) !important;
        font-weight: 600 !important;
    }


    .dataTables_paginate .pagination .page-item:hover > .page-link {
        background: var(--app-green) !important;
        color: var(--white) !important;
        cursor: pointer !important;
    }
    .dataTables_paginate .pagination .page-item > .page-link {
        background: transparent !important;
        border:1px solid #eee;
        color: #222 !important;
        cursor: pointer !important;
        font-size: 13px !important;
    }

    .dataTables_wrapper .dataTable .selected th, .dataTables_wrapper .dataTable .selected td,
    table.dataTable.table-striped tr.odd{
        background-color: inherit !important;
        color: inherit !important;
    }
    .dataTables_wrapper .dataTable  tr th, .dataTables_wrapper .dataTable tr td,
    .table tr td,.dt-buttons .btn, .dataTables_filter label , .dataTables_filter label>input,
    .dt-buttons .btn-group .dropdown-menu {
        font-size: 13px !important;
    }

    .dataTables_paginate .pagination .page-item.active > .page-link {
        background: var(--app-green) !important;
        color: var(--white) !important;
        cursor: pointer !important;
    }
    body .DTE_Form_Info{
        margin-bottom: 10px !important;
    }

    body tfoot{
        /*display:  unset !important;*/
    }

    .dataTables_length, .dataTables_info,.dataTables_length select.form-select{
        font-size: 12px !important;
    }

    .dataTables_paginate .paging_simple_numbers{
        font-size: 13px !important;
    }

    .btn-transparent{
        background: transparent !important;
        border: 1px solid #eee !important;
    }

    .DTE_Field label , .DTE_Field{
        font-size: 14px !important;
    }
</style>

@include('shared.datatable-js-init')
