<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Allocation Unit</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Select2 Bootstrap Theme -->
  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Select2 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <!-- Select2 Bootstrap Theme CSS -->
  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.1.1/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Select2 JS -->
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>




  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- UNICOS -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">

  <!-- Google Fonts -->
  <link href="https://fonts.gstatic.com" rel="preconnect">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/quill/quill.snow.css" rel="stylesheet">
  <link href="assets/vendor/quill/quill.bubble.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/simple-datatables/style.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">





  
  <style>
    thead th {
      border: 1px solid rgb(230, 230, 230) !important;
      /* Custom border for table header */
    }

    table {
      overflow-y: auto;
      overflow-x: auto !important;
      min-height: 60px;

    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
		.table-secondary {
			background-color: #F4F4F4 !important; /* Warna latar yang kamu inginkan */
			border: 1px solid #dee2e6 !important; /* Menambahkan border */
		}

		.table-bordered th, .table-bordered td {
			border: 1px solid #dee2e6 !important; /* Border untuk semua sel dalam tabel */
		}
    .tooltip-inner {
      background-color: #6c757d !important; /* Bootstrap secondary color */
      color: #fff; /* Text color for better contrast */
    }
    .tooltip-arrow::before {
      border-top-color: #6c757d !important; /* Change arrow color to match the tooltip background */
    }

    .fixed-width-name {
    width: 250px; /* Ganti dengan lebar yang Anda inginkan */
    min-width: 250px; /* Menetapkan lebar minimum */
    max-width: 250px; /* Menetapkan lebar maksimum */
    }

    .fixed-width-no {
    width: 30px; /* Ganti dengan lebar yang Anda inginkan */
    min-width: 30px; /* Menetapkan lebar minimum */
    max-width: 30px; /* Menetapkan lebar maksimum */
    }

    .fixed-width-button {
    width: 50px; /* Ganti dengan lebar yang Anda inginkan */
    min-width: 50px; /* Menetapkan lebar minimum */
    max-width: 50px; /* Menetapkan lebar maksimum */
    }


    .fixed-width-name-history2 {
    width: 250px; /* Ganti dengan lebar yang Anda inginkan */
    min-width: 250px; /* Menetapkan lebar minimum */
    max-width: 250px; /* Menetapkan lebar maksimum */
    height: 200px; /* Ganti dengan lebar yang Anda inginkan */
    min-height: 200px; /* Menetapkan lebar minimum */
    max-height: 200px; /* Menetapkan lebar maksimum */
    }

    .fixed-width-no-history2 {
    width: 30px; /* Ganti dengan lebar yang Anda inginkan */
    min-width: 30px; /* Menetapkan lebar minimum */
    max-width: 30px; /* Menetapkan lebar maksimum */
    height: 200px; /* Ganti dengan lebar yang Anda inginkan */
    min-height: 200px; /* Menetapkan lebar minimum */
    max-height: 200px; /* Menetapkan lebar maksimum */
    }

    .fixed-width-button-history2 {
    width: 50px; /* Ganti dengan lebar yang Anda inginkan */
    min-width: 50px; /* Menetapkan lebar minimum */
    max-width: 50px; /* Menetapkan lebar maksimum */
    height: 200px; /* Ganti dengan lebar yang Anda inginkan */
    min-height: 200px; /* Menetapkan lebar minimum */
    max-height: 200px; /* Menetapkan lebar maksimum */
    }


    /* Untuk membekukan baris DEALER */
    .sticky-row {
      position: sticky;
      top: 80px; /* Sesuaikan nilai top agar sesuai dengan tinggi thead */
      background-color: white;
      z-index: 14;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    .sticky-row-detail2 {
      position: sticky;
      top: 200px; /* Sesuaikan nilai top agar sesuai dengan tinggi thead */
      background-color: white;
      z-index: 14;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    .sticky-row-two {
      position: sticky;
      top: 110px; /* Sesuaikan nilai top agar sesuai dengan tinggi thead */
      background-color: white;
      z-index: 15;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    .sticky-row-head {
      position: sticky;
      top: 0px; /* Sesuaikan nilai top agar sesuai dengan tinggi thead */
      background-color: white;
      z-index: 13;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }

    
    /* Membuat kolom pertama (No) sticky saat scroll ke kanan */
    #myTable th:first-child,
    #myTable td:first-child {
      position: sticky;
      left: 0;
      background-color: white;
      z-index: 12; /* Pastikan di atas elemen lainnya */
      box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.4); /* Menambahkan bayangan */
    }

    /* Membuat kolom kedua (Tanggal) sticky saat scroll ke kanan */
    #myTable th:nth-child(2),
    #myTable td:nth-child(2) {
      position: sticky;
      left: 30px; /* Sesuaikan dengan lebar kolom pertama (No) */
      background-color: white;
      z-index: 11; /* Pastikan tetap di atas elemen lainnya */
      box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.4);
    }

    
    /* Membuat kolom pertama (No) sticky saat scroll ke kanan */
    #myTableButton th:first-child,
    #myTableButton td:first-child {
      position: sticky;
      left: 0;
      background-color: white;
      z-index: 12; /* Pastikan di atas elemen lainnya */
      box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.4); /* Menambahkan bayangan */
    }

    /* Membuat kolom kedua (Tanggal) sticky saat scroll ke kanan */
    #myTableButton th:nth-child(2),
    #myTableButton td:nth-child(2) {
      position: sticky;
      left: 30px; /* Sesuaikan dengan lebar kolom pertama (No) */
      background-color: white;
      z-index: 11; /* Pastikan tetap di atas elemen lainnya */
      box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.4);
    }

    /* Membuat kolom kedua (Tanggal) sticky saat scroll ke kanan */
    #myTableButton th:nth-child(3),
    #myTableButton td:nth-child(3) {
      position: sticky;
      left: 80px; /* Sesuaikan dengan lebar kolom pertama (No) */
      background-color: white;
      z-index: 10; /* Pastikan tetap di atas elemen lainnya */
      box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.4);
    }

    .logo-img {
      width: 80px;  /* Set your desired width */
      height: 80px; /* Set your desired height (ignores aspect ratio) */
      object-fit: fill; /* Forces the image to fill the space */
    }

  </style>
</head>