/* Optional: Add some basic styling */
body {
	font-family: Arial, sans-serif;
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
th, td {
	border: 1px solid #dddddd;
	padding: 8px;
	text-align: left;
}
th {
	background-color: #f2f2f2;
}
tr:nth-child(even) {
	background-color: #f9f9f9;
}
#status-bar {
	background-color: #333; /* Background color of the status bar */
	color: #fff; /* Text color */
	position: fixed; /* Fixed position at the bottom */
	bottom: 0; /* Stick to the bottom of the viewport */
	width: 100%; /* Full width */
	padding: 10px; /* Padding for content inside the status bar */
	text-align: center; /* Center-align text */
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); /* Optional: Adds a shadow below the status bar */
}
#status-bar span {
	margin: 0 10px; /* Add some space between elements */
}

.navbar {
    background-color: #333;
    overflow: hidden; /* Clear floats */
    margin-bottom: 10px;
}

.navbar a {
    float: left; /* Float the links to create a horizontal layout */
    display: block; /* Make the links block-level to occupy full width */
    color: #fff;
    text-align: center; /* Center-align text */
    padding: 14px 20px; /* Padding inside each link */
    text-decoration: none; /* Remove underline from links */
}

.navbar a:hover {
    background-color: #ddd; /* Background color on hover */
    color: #333; /* Text color on hover */
}

.barcode {
	 font-family: "Libre Barcode 39", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 60px;
}
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }

  .app-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .app-card h4 {
    margin: 0 0 10px 0;
    color: #0059b2;
    border-bottom: 2px solid #e5eaf0;
    padding-bottom: 5px;
  }

  /* Scoped list styles */
  .app-card ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
  }

  .app-card li {
    background: #eef3f9;
    margin: 4px 0;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    transition: background 0.2s ease;
  }

  .app-card li:hover {
    background: #dce9f8;
  }

  .app-card li em {
    color: #777;
    font-style: italic;
  }
.bgform-main-div {
	      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;

}
    .bgform-container {
      background-color: #fff;
      padding: 30px 40px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 400px;
      box-sizing: border-box;
    }

    .bgform-title {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .bgform-label {
      display: block;
      margin-bottom: 5px;
      color: #555;
    }

    .bgform-input {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .bgform-button {
      width: 100%;
      padding: 10px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }

    .bgform-footer {
      text-align: center;
      margin-top: 15px;
      font-size: 14px;
      color: #777;
    }

    .bgform-footer a {
      color: #007bff;
      text-decoration: none;
    }

    .bgform-footer a:hover {
      text-decoration: underline;
    }