
<!DOCTYPE html>

<html lang="en">
    <head>
        <base href="" />
        <title>Dashboard</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
        <link href="<?=URLROOT?>/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
        <link href="<?=URLROOT?>/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
         <script src="https://kit.fontawesome.com/95dba81cc9.js" crossorigin="anonymous"></script>
        <script>
            var urlroot = "<?=URLROOT?>";
            var stop = 0;
              var page_offset = 0;
              var ding = new Audio(urlroot+'/panel-alert.mp3');
              var is_admin = "<?=$_SESSION['is_admin']?>";
        </script>


        <script>
          var audio = new Audio('<?= URLROOT ?>/panel-alert.mp3');
          audio.loop = true;
      </script>

        <style>
        .tr_row {
          background: linear-gradient(
            45deg,
            #302f2e,
            #730907,
            #730907,
            #300908,
            #302f2e
          );
          background-size: 600% 100%;
          animation: gradient 2s linear infinite;
          animation-direction: alternate;
        }
        @keyframes gradient {
          0% {
            background-position: 0%;
          }
          100% {
            background-position: 100%;
          }
        }
        .entry-action-input{
              display: block;
              width: 100%;
              padding: 0.75rem 1rem;
              font-size: 1.1rem;
              font-weight: 500;
              line-height: 1.5;
              color: #181c32;
              background-color: #1E1E2D;
              background-clip: padding-box;
              border: 1px solid #e4e6ef;
              appearance: none;
              border-radius: 0.65rem;
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
              transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
    </style>

     <style type="text/css">
            .title_alert {
                  margin: 0 auto;
                  color: white;
                  font-family: "Lato", sans-serif;
                  font-size: 2rem;
                  padding: 10px;
                }
            .container_alert {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              text-align: center;
              animation: changeBackgroundColor 2s infinite;
            }

            .container_alert1 {
            
              animation: changeBackgroundColor 2s infinite;
            }


            @keyframes changeBackgroundColor {
              0% {
                background-color: #8b0000;
              }
              50% {
                background-color: #8b0000;
              }
              100% {
                background-color: black;
              }
            }

            .container_alert_1 {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              text-align: center;
              animation: changeBackgroundColor2 2s infinite;
            }

            @keyframes changeBackgroundColor2 {
              0% {
                background-color: green;
              }
              50% {
                background-color: green;
              }
              100% {
                background-color: black;
              }
            }


             .container_loging {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              text-align: center;
              animation: changeBackgroundColorlogin 2s infinite;
            }

            @keyframes changeBackgroundColorlogin {
              0% {
                background-color: red;
              }
              50% {
                background-color: red;
              }
              100% {
                background-color: black;
              }
            }

           
    </style>

    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">

    </head>

    <body id="kt_body" class="sidebar-enabled">
      