<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<meta name="csrf-token" content="{{ csrf_token() }}">-->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Cleaneo') }}</title>
<script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="{{asset('CSS/style.css')}}">
    <!-- <link rel="stylesheet" href="{{asset('CSS/style.css')}}"> -->
    <link rel="stylesheet" href="{{asset('CSS/bootstrap.css')}}">
    <link rel="stylesheet" href="{{asset('CSS/font-awesome.css')}}">

    <!-- google font  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="{{asset('CSS/font-family.css')}}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

    <!-- this is the jQUERY cdn link -->
    <link href="{{asset('CSS/data-table.css')}}" rel="stylesheet">

    <link rel="stylesheet" href="{{asset('CSS/databootstrap.css')}}">
    <link rel="stylesheet" href="{{asset('CSS/datatable.css')}}">
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.5/css/dataTables.dataTables.css" />
    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@latest/dist/turbo.es2017-esm.min.js"></script>-->

    <style>
        .user_container 
        {
            padding-bottom:200px !important;
        }
        
        @media(max-width:1400px)
        {
            .Dashboard_header 
            {
                left:60px;
               width: calc(95vw - 60px) !important;
            }
            .Dashboard_header header 
            {
               width: calc(95vw - 65px);
               padding:0;

            }
            .Dashboard .SideBar ul.navigation 
            {
                padding:0px 5px 200px 5px !important;
            }
            .Dashboard_header .user_container
            {
                padding:0 10px;
            }
            .Dashboard .SideBar ul li button
            {
                width:50px;
                justify-content:center;
            }
            
            .Dashboard .SideBar ul li button svg 
            {
                margin:0 !important;
            }
        }
    </style>
</head>

<body>

    <div class="Dashboard">
        <div class="container-fluid container-xl px-0">
            <x-sidemenu />
            <div class="Dashboard_header mx-3">
                {{ $slot }}
            </div>
        </div>
    </div>



    @livewireScripts


    <script src="{{asset('JS/bootstrap.js')}}"></script>
    <script src="{{asset('JS/font-awesome.js')}}"></script>
    <script src="{{asset('JS/main.js')}}"></script>

    <!--<script src="{{asset('JS/jquery.js')}}"></script>-->
    <script src="{{asset('JS/datatable.js')}}"></script>
    <script src="{{asset('JS/databootstrap.js')}}"></script>
<script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>

    <script>
    new DataTable('#example');
    </script>

</body>

</html>