@include('layouts.header');

<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>


<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- sweet alert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('jquery.dataTables.min') }}" /> -->

<!-- <script type="text/javascript" src="DataTables/datatables.min.js"></script> -->
<style>
    #order_items {
        font-size: 10px;
    }

    .container {
        font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
        background-color: #fff;
    }


    .close_all {
        float: right;
        margin-top: -51px;
    }

    .label-warning {
        color: red;
    }

    #home-tab {
        background-color: #BA434D;
        color: #fff;
    }

    .custome_model_close {
        display: none;
    }

    .img_alert {
        width: 125px;
        margin-left: 172px !important;
        margin-top: -30px;
    }

    .toggle-sidebar-btn {
        display: none;
    }

    .alert_msg {
        float: right;
        padding-right: 100px !important;
    }

    .alert_order_id {
        padding: 122px;
    }

    .alert_msg_order_id {
        padding: 136px;
    }

    .cam-adjust {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn-adjust {
        margin-top: 2%;
    }

    .card-title-h {
        /* padding: 10px 0 5px 0; */
        margin-top: 10px;
        font-size: 20px;
        font-weight: 500;
        color: #000;
        font-family: "Poppins", sans-serif;
    }

    a {
        color: #000 !important;
    }


    .first-head {
        background-color: #fab000;
        padding: 5px;
        color: #481f00;
        border-right: #000 1px solid;
    }


    .first-head-last {
        background-color: #fab000;
        padding: 5px;
        color: #481f00;
    }

    .second-head {
        background-color: #ccc;
        border-right: #000 1px solid;
        padding: 5px;
    }

    .second-head-last {
        background-color: #ccc;
        padding: 5px;
    }

    .third-head {
        border-bottom: #ccc 1px solid;
        padding: 5px;
    }

    .row-adjust {
        margin-top: 2%;

    }

    .green-camera {
        color: #18db18;
        font-size: 20px;
        float: right;
    }

    .red-camera {
        color: red;
        font-size: 20px;
        float: right;
    }

    .info-right {
        font-size: 20px;
        float: right;
        padding: 1px;
    }

    .btn1 {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0 0;
        font-size: 1rem;
        border-radius: 0.25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .btn-black {
        background-color: #000;
        display: inline-block;
        font-weight: bold;
        line-height: 1;
        color: white;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.2rem 0.8rem;
        font-size: 12px;
        border-radius: 1.25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }


    .card-scroll {
        overflow-x: auto;
        max-height: 250px;
    }

    .third-head-item {
        border-bottom: #ccc 1px solid;
        padding: 5px;
    }

    .btn-info {
        color: #000;
        background-color: #000;
        border-color: #000;
    }

    .btn-live {
        background-color: #BA434D;
        border-color: #BA434D;
    }

    .btn-past {
        background-color: #BA434D;
        border-color: #BA434D;
    }

    .btn-past1 {
        float: right;
    }

    .live_data {
        font-family: initial;
        color: #fab000;
        font-size: 18px;
        font-weight: bold;
    }

    .past_data {
        font-family: initial;
        color: #fab000;
        font-size: 18px;
        font-weight: bold;
    }

    .modal-xl {
        max-width: 90%;
    }

    .form-floating>.form-select {
        background-color: white !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .cust-select {
        color: #BA434D;
        margin-top: 4%;
        height: calc(2.5rem + 2px) !important;
        border: 2px solid #BA434D !important;
    }

    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

    .desired-red {
        width: 450px;
        height: 370px;
    }

    .desired-info {
        width: 450px;
        height: 370px;
    }

    .cap-info {
        width: 450px;
        height: 370px;
    }

    .desired-green {
        width: 400px;
        height: 350px;
    }

    .cap-green {
        width: 400px;
        height: 350px;
    }

    .check-media {
        display: none;
        width: 0;
    }

    #my_camera_red {
        margin-top: 2%;
        overflow: inherit !important;
    }

    @media only screen and (max-width: 767px) {
        .row-adjust {
            padding-right: calc(var(--bs-gutter-x) * .0) !important;
        }

        .card-scroll {
            max-height: 425px;
        }

        .first-head {
            background-color: #fab000;
            padding: 5px;
            color: #481f00;
            border-bottom: #000 1px solid;
            border-right: none;
        }

        .second-head {
            background-color: #ccc;
            border-bottom: #000 1px solid;
            padding: 5px;
            border-right: none;
        }

        .third-head-item {
            border-bottom: none;
            padding: 0px;
        }

        .toggle-sidebar-btn {
            display: block;
        }

        #pageloader img {
            left: 50%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 50%;
            height: 150px;
            border: black;
            border-style: double;
            background-color: antiquewhite;
            border-radius: 20px;
        }

        .modal-xl {
            max-width: 100%;
        }

        .desired-red {
            width: 300px;
            height: 240px;
        }

        .desired-info {
            width: 300px;
            height: 240px;
        }

        .cap-info {
            width: 300px;
            height: 240px;
        }

        .desired-green {
            width: 300px;
            height: 240px;
        }

        .cap-green {
            width: 300px;
            height: 240px;
        }

        .check-media {
            display: none;
            width: 767px;
        }

    }


    .third-head>b {
        font-size: 15px;
    }
</style>
<aside id="sidebar" class="sidebar">
    <ul class="sidebar-nav" id="sidebar-nav">