body {
      background-color: #f0f2f5;
      font-family: 'Segoe UI', sans-serif;
    }

    .app-header {
      background-color: #1e88e5;
      color: white;
      padding: 15px 20px;
      font-size: 22px;
      font-weight: 600;
      text-align: center;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .order-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 16px;
      margin-bottom: 20px;
      transition: 0.2s ease;
    }

    .order-card:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }




    .order-id {
      font-weight: 600;
      font-size: 16px;
      color: #1e88e5;
    }

    .customer-name {
      font-weight: 500;
      margin-top: 8px;
    }

    .info-label {
      color: #555;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .info-value {
      color: #111;
      font-size: 15px;
      margin-bottom: 8px;
    }

    .deliver-btn {
      background-color: #28a745;
      color: white;
      font-weight: bold;
      border-radius: 8px;
      width: 100%;
      padding: 10px;
      transition: 0.2s ease;
    }

    .deliver-btn:hover {
      background-color: #218838;
    }

    .status-badge {
      background: #ffc107;
      color: #000;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 20px;
    }

    .top-spacing {
      margin-top: 20px;
    }












    body, html {
      height: 100%;
      margin: 0;
      background-color: #000; /* Black background */
      font-family: 'Segoe UI', sans-serif;
/*      display: flex;*/
      justify-content: center;
      align-items: center;
    }

    .center-box {
      background-color: #fff; /* White container */
      max-width: 400px;
      width: 100%;
 
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1);
      margin: auto;
      min-height: 100vh;
    }

    .login-card {
      background-color: #fff;
      padding: 30px 25px;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      width: 100%;
      max-width: 400px;
    }

    .login-card h2 {
      text-align: center;
      margin-bottom: 20px;
      font-weight: 700;
      color: #1e88e5;
    }

    .form-label {
      font-weight: 500;
      color: #555;
    }

    .form-control {
      border-radius: 10px;
      padding: 10px 15px;
    }

    .btn-login {
      background-color: #1e88e5;
      color: white;
      font-weight: 600;
      border-radius: 10px;
      padding: 10px;
      width: 100%;
      transition: 0.2s ease;
    }

    .btn-login:hover {
      background-color: #1565c0;
    }

    .login-footer {
      margin-top: 15px;
      text-align: center;
      font-size: 14px;
    }

    .logo {
      text-align: center;
      margin-bottom: 25px;
    }

    .logo img {
      max-width: 60px;
    }

    .delivery-title {
      font-size: 18px;
      font-weight: 500;
      color: #888;
      text-align: center;
      margin-bottom: 10px;
    }





/* Gradient background for the navbar */
.navbar-custom {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* Example gradient */
}

/* Offcanvas custom gradient background */
.offcanvas {
  background: linear-gradient(to bottom right, #ff7e5f, #feb47b); /* Gradient background for the offcanvas */
  color: white; /* Set text color to white for contrast */
}

/* Styling the offcanvas body */
.offcanvas-body {
  padding-top: 30px;
}

/* Offcanvas header border styling */
.offcanvas-header {
  border-bottom: 1px solid #ddd;
}

/* Styling navbar links */
.navbar-nav a {
  font-size: 18px;
  color: #fff; /* Initial color */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
  padding: 10px 15px; /* Padding for better clickability */
}

/* Hover effect for navbar links */
.navbar-nav a:hover {
  color: #ff7e5f; /* Change text color on hover */
  background-color: #fff; /* White background on hover */
  border-radius: 5px; /* Rounded corners */
}

/* Offcanvas link hover effect */
.offcanvas-body .nav-item a:hover {
  color: #ff7e5f; /* Highlight color for offcanvas menu items */
  background-color: rgba(255, 255, 255, 0.3); /* Slight background shade */
}

/* Navbar toggler icon styling */
.navbar-toggler-icon {
  background-color: #fff;
}













/* Styling for order card */
.order-card {
  background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Gradient background */
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.order-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.order-cardActive {
/*  background: linear-gradient(135deg, #ff7e5f, #feb47b); */
      background: linear-gradient(135deg, #1200ff, #1a1a1a);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.order-cardActive:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
 

.order-cardCompleted { 
      background: linear-gradient(135deg, #006704, #359d00);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.order-cardCompleted:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
/* Order header section */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.order-header h5 {
  font-size: 18px;
  font-weight: bold;
  color: white; /* White color for text on gradient */
}

.status-badge {
  background-color: #28a745;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
}

/* Order details section */
.order-details .detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-label {
  font-weight: bold;
  color: #fff; /* Light color for labels */
}

.detail-value {
  color: #fff; /* White text for values */
  font-size: 16px;
}

/* Button styling */
.btn.deliver-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn.deliver-btn:hover {
  background-color: #218838;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
  .order-card {
    padding: 15px;
  }

  .order-header h5 {
    font-size: 16px;
  }

  .detail-label {
    font-size: 14px;
  }

  .detail-value {
    font-size: 14px;
  }

  .btn.deliver-btn {
    font-size: 14px;
    padding: 12px;
  }
}