body {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          background: #f9fafb;
        }

        #light-skycolor {
          background-color: #f4f7fb;
          /* background-color: #e6e6e6; */

        }

        .bg-blue {
          background-color: rgb(12, 52, 91);
        }

    .bg-green {
          background-color:#183D3D;
        }
        #reportTable tbody tr,
        #reportTable thead th {
          background-color: #DFEFF0;
        }

        .text-blue {
          color: rgb(9, 40, 71);
        }

        .text-maroon {
          color:  rgb(147, 28, 28);
        }
        
         .text-green {
          color: #183D3D;
        }
        .bg-maroon {
          background-color: rgb(96, 18, 18);
        }

        .bg-sky {
          background-color: rgb(14, 108, 130);
        }

        input[readonly] {
          background-color: #d7d7d7;
          pointer-events: none;
        }

        input[readonly1] {
          background-color: #d6f9ff;
          pointer-events: none;
        }

        .ig {
          border-top-left-radius: var(--bs-border-radius-sm) !important;
          border-bottom-left-radius: var(--bs-border-radius-sm) !important;
          border-top-right-radius: 0 !important;
          border-bottom-right-radius: 0 !important;
        }

        .content {
          flex: 1;
        }

        /* ===== Navbar ===== */
        .navbar-clean {
          background: #ffffff;
          border-bottom: 1px solid #e5e7eb;
          /* padding:.6rem 1.2rem; */
        }

        /* Brand */
        .brand {
          font-weight: 600;
          font-size: 1.1rem;
          color: #111827;
        }

        /* Nav links */
        .nav-link {
          color: #000;
          font-weight: 500;
          padding: .5rem .9rem;
          display: flex;
          align-items: center;
        }

        .nav-link:hover {
          color: #990000;
        }

        /* Remove bootstrap caret */
        .dropdown-toggle::after {
          display: none;
        }

        /* Custom chevron */
        .chevron {
          font-size: .7rem;
          margin-left: 6px;
          color: #000;
        }

        /* Dropdown menu (FIXED) */
        .dropdown-menu {
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          /* padding: .4rem; */
          box-shadow: none;
          opacity: 0;
          transform: translateY(6px);
          transition: opacity .15s ease, transform .15s ease;
        }

        /* When Bootstrap adds .show */
        .dropdown-menu.show {
          opacity: 1;
          transform: translateY(0);
        }

        /* Dropdown item */
        .dropdown-item {
          font-weight: 500;
          border-radius: 6px;
          padding: .45rem .75rem;
        }

        .dropdown-item:hover {
          background: #f3f4f6;
          color: #000;
        }

        /* Logout */
        .logout-link {
          color: #dc2626;
          font-weight: 500;
          text-decoration: none;
          padding: .45rem .75rem;
          border-radius: 6px;
        }

        .logout-link:hover {
          background: #fee2e2;
          color: #b91c1c;
        }

        /* Remove border in dropdown menu for small screens */
        @media (max-width: 991.98px) {

          /* Bootstrap lg breakpoint */
          .navbar-nav .dropdown-menu {
            border: none;
            box-shadow: none;
            /* optional: remove shadow */
          }
        }

        #loader-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ffffff;
          /* display: none; */
           display: flex; /* show by default */
          justify-content: center;
          align-items: center;
          z-index: 999999;
        }

        .spinner {
          width: 60px;
          height: 60px;
          border: 6px solid #ccc;
          border-top-color: #007bff;
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          100% {
            transform: rotate(360deg);
          }
        }

        body.loading {
          overflow: hidden;
        }

        .bi bi-search text-dark {
          color: black;
        }

        @media print {
          table {
            border-collapse: collapse !important;
          }

          table,
          th,
          td {
            border: 1px solid #000 !important;
          }

          @page {
            margin: 15mm;
          }

          body::after {
            content: "Page " counter(page) " of " counter(pages);
            position: fixed;
            bottom: 10px;
            right: 20px;
            font-size: 9px;
            color: #000;
          }
        }

        .swal-flex {
          display: flex;
          align-items: center;
          gap: 12px;
          text-align: left;
        }

        .swal-icon i {
          font-size: 28px;
        }

        .swal-title-small {
          font-size: 16px;
          font-weight: 600;
        }

        .swal-text-small {
          font-size: 14px;
          color: #555;
        }

        .swal-flex {
          display: flex;
          align-items: center;
          gap: 12px;
          text-align: left;
        }

        .swal-icon i {
          font-size: 26px;
        }

        .swal-title-small {
          font-size: 16px;
          font-weight: 600;
        }

        .swal-text-small {
          font-size: 14px;
          color: #555;
        }

        .swal-btn-small {
          background: #3085d6;
          color: #fff;
          font-size: 18px;
          padding: 4px 14px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }

        footer {
          font-size: 0.875rem;
          color: #6b7280;
          /* gray text */
        }

        /* Simple Internet-off Icon */
        .icon-internet {
          width: 80px;
          margin-bottom: 20px;
          opacity: 0.9;
        }

        .body-internet {

          margin: 0;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-family: "Segoe UI", Arial, sans-serif;
          /* background: #f4f7fb; */
          color: #333;
          text-align: center;

        }

        .btn-internet {
          padding: 10px 24px;
          background: #0A2742;
          color: #fff;
          border-radius: 8px;
          text-decoration: none;
          font-size: 15px;
          transition: 0.3s;
        }

        .btn-internet:hover {
          background: #093357;
          color: white;
        }

        .p-internet {
          font-size: 16px;
          color: #555;
          margin-bottom: 25px;
          max-width: 320px;
          line-height: 1.5;
        }

        .h2-internet {
          font-size: 30px;
          color: #0A2742;
          margin-bottom: 10px;
          font-weight: 600;
        }

        .text-dark-blue {
          color: #0A2742;
        }
        /* Cancel button */
.swal-cancel-btn{
    background:#0d6efd;
    color:white;
    border:none;
    padding:5px 14px;
    font-size:13px;
    border-radius:4px;
}

/* Cancel hover */
.swal-cancel-btn:hover{
    background:#0b5ed7;
}

/* Delete button */
.swal-delete-btn{
    background:#dc3545;
    color:white;
    border:none;
    padding:5px 14px;
    font-size:13px;
    border-radius:4px;
    margin-right:8px;
}

/* Delete hover */
.swal-delete-btn:hover{
    background:#bb2d3b;
}

/* space between buttons */
.swal2-actions{
    gap:8px;
}

   /* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-color: #ccc #0000;
  animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}
.loader::before {
  border-color: #f03355 #0000;
  animation: inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.loader::after {
  margin: 8px;
}
@keyframes l16 { 
  100%{transform: rotate(1turn)}
}
  #reportTable td {
    font-weight: 400;
}