/* Optional: Add some basic styling */
html {
	height:100%;
}
body {
	font-family: Arial, sans-serif;
	height: 100%;
	display: grid;
	grid-template-rows: min-content auto min-content;
	margin: 0px;
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
.thin {
	width: 300px;
}
th, td {
	border: 1px solid #dddddd;
	padding: 8px;
	text-align: left;
}
th {
	background-color: #f2f2f2;
}
tr:nth-child(even) {
	background-color: #f9f9f9;
}
#top-div {
	margin-left: 5px;
	margin-right: 5px
}
#maindiv {
}
#orderNo {
	height: 100%;
}
#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 label {
	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 select {
	float: left; /* Float the links to create a horizontal layout */
	display: block; /* Make the links block-level to occupy full width */
	text-align: center; /* Center-align text */
	margin-top: 12px;
	text-decoration: none; /* Remove underline from links */
}
.navbar input {
	float: left; /* Float the links to create a horizontal layout */
	width: 100px;
	display: block; /* Make the links block-level to occupy full width */
	text-align: center; /* Center-align text */
	margin-top: 12px;
	text-decoration: none; /* Remove underline from links */
}

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

.disabled {
	pointer-events: none;
	cursor: default;
}

.barcode {
	font-family: "Libre Barcode 39 Text", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
}
.code-128-barcode {
	font-family: "Libre Barcode 128", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size: 40pt;
	padding: 0px 10px 0px 10px;
	max-height: 35px;
	text-align: center;
}
.code-128-text {
	text-align: center;
}

.hidden {
	display: none;
}

.loader-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.8); /* Optional: semi-transparent background */
}

.loader {
	border: 8px solid rgba(0, 0, 0, 0.1);
	border-left: 8px solid #3498db; /* Color of the spinner */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.scrolly {
	overflow-y: scroll;
}
.three-grid {
	display: grid;
	grid-template-columns: 300px 300px 300px;
	grid-column-gap: 40px;
	height: max-content;
}
.index-a {
    text-decoration: none;
    color: #fff;
    background: #8BC34A;
    padding: 10px 16px;
    display: inline-block;
    border-radius: 3px;
    transition: 0.3s;
    margin-left: 10px;
    margin-right: 10px;
}
.fabric-barcodes-filter {
	display: grid;
	grid-template-columns: auto auto;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	min-width: 160px;
	border: 1px solid #ccc;
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
	display: grid;
	grid-template-columns: auto auto;
	width: 400px;
	padding: 4pt;
}

.arrow {
	display: inline-block;
	margin-left: 5px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
	vertical-align: middle;
}
.dropdown-menu {
	border: 2pt solid;
	padding: 4pt;
	border-radius: 6px;
	margin: 2pt;
	width: 400px;
}
.wide {
	width: 800px;
}
.hori-form {
	display: grid;
	grid-template-columns: auto auto auto;
	width: fit-content;
}