@font-face {
  font-family: 'Lufga-Light';
  src: url('../fonts/Lufga-Light.woff2') format('woff2'), /* Modern Browsers */
       url('../fonts/Lufga-Light.woff') format('woff'); /* Legacy Browsers */
}

@font-face {
  font-family: 'Lufga-Medium';
  src: url('../fonts/Lufga-Medium.woff2') format('woff2'), /* Modern Browsers */
       url('../fonts/Lufga-Medium.woff') format('woff'); /* Legacy Browsers */
}

img.logo {
  height:40px;
  margin-bottom:10px;
}

body {
  font-family: 'Lufga-Light', Arial, sans-serif;
  font-size: 16px;
}

/* Update footer styling */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333; /* Maintains existing background color */
    color: #fff;
    padding: 5px 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footer-left, .footer-right {
    display: flex;
    align-items: center;
}

.footer-left img {
    height: 30px; /* Adjust this value based on your actual logo size */
    margin-right: 10px; /* Adds some space between the logo and the text */
}

.footer-right p {
    margin: 0; /* Ensures no extra space is added around the paragraph */
}


.order-quantity-input {
    background-color: lightgrey;
}

.table-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    max-width: 100%; /* Ensure the table container doesn't overflow horizontally */
    padding: 0 10px; /* Add padding to prevent the table from sticking to the edges */
	margin-bottom: 50px;
}


.filter {
    padding: 12px 20px;
    margin: 8px 10px; 
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Additional style for select elements to match the input style */
/*
select {
    padding: 12px 20px;
    margin: 8px 10px; 
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: white;
    color: #666;
}
*/

/* Template 2 style */
.sidenav {
	/*display: flex;
	justify-content: space-between;
	align-items: top;*/
	height: 500px;
	overflow-x: hidden;
	padding-top: 20px;
	background-image: url('../../images/zoska_square_bottom_1500_2.jpg');
	background-color: #000; /*Default bg, similar to the background's base color*/
	background-position: left bottom; /*Positioning*/
	background-repeat: no-repeat;
	background-size: cover;
	bottom:100px;
}

.main {
	padding: 0px 10px;
}

/* Table formatting */
table {
  width: 100%;
  border-collapse: collapse;
}

#myTable {
    width: auto; /* Let the table adjust its width based on content */
    table-layout: fixed; /* Set the table layout to fixed */
	font-size: 15px;
}

#myTable th,
#myTable td {
    padding: 6px; /* Add padding to table cells */
    border: 1px solid #ddd; /* Add borders to table cells */
    text-align: left; /* Align text to the left in table cells */
    /*white-space: nowrap; /* Prevent text wrapping within table cells */
    overflow: hidden; /* Hide content that exceeds cell width */
}

th, td {
  border: 1px solid #ddd;
  padding: 4px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

/* Search field */
#myInput {
  padding: 5px;
  margin-top: 48px;
  margin-bottom: 8px;
  margin-left: 8px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
width: calc(100% - 16px);
}

/* Template 2 media queries */
@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}
}

@media screen and (max-width: 450px) {
	.login-form {
		margin-top: 10%;
	}
	.signup-form {
		margin-top: 10%;
	}
}

@media screen and (max-width: 924px) {
	.login {
		width: 145px !important;
	}
}

@media screen and (min-width: 768px) {
	.main {
		margin-left: 40%;
	}
	.sidenav {
		height: 100%;
		width: 46%;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
	}
	.login-form {
		margin-top: 80%;
	}
	.signup-form {
		margin-top: 50px;
	}
}


.order-summary {
    padding: 10px 20px;
    /*border-bottom: 1px solid #ccc;*/
}

/* Submit Order button styling */

.submitOrderBtn-container {
    display: flex;
    justify-content: flex-start; 
	align-items: center;
	position: relative;
    padding-right: 20px; 
    margin-bottom: 20px; 
	margin-left: 20px;
}


.submitOrderBtn {
    border: none;
    color: #fff; /* White color */
    background-color: #666; 
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    /*margin-top: 20px;*/
    cursor: pointer;
    border-radius: 4px;
    transition-duration: 0.4s;
	left:20px;
    /*position: absolute;*/
}

/* Hover effect for Submit Order button */
.submitOrderBtn:hover {
    background-color: #ff6666; /* Reddish color */
}

#reviewOrderSidebar .sidebar-content {
    margin: 20px;
}

#reviewOrderSidebar {
	height: calc(100% - 82px);
    width: 0;
    position: fixed;
    z-index: 1;
    top: 42px; /* Adjusted top position to place it below the top navbar */
    right: 0;
    background-color: #f2f2f2; /* Light grey background color */
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 40px;
}

#reviewOrderSidebar.active {
	width: 40%
}

.close-btn {
    background-color: transparent;
    border: none;
    color: #666; /* Dark grey color */
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
    border-radius: 50%; /* Rounded shape */
    transition-duration: 0.4s;
}

.exceeds_stock_text {
	margin-top:10px;
}

/* Hover effect for close button */
.close-btn:hover {
    color: #333; /* Slightly darker grey color on hover */
}

/* Review Order button styling */
#reviewOrderBtn {
    background-color: #f2f2f2; /* Light grey background color */
    border: none;
    color: #666; /* Less intense color */
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*margin-top: 8px;*/
    margin-bottom: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition-duration: 0.4s;
	margin-left: 10px;
}

/* Hover effect for Review Order button */
#reviewOrderBtn:hover {
    background-color: #666; /* Light grey background color on hover */
	color: white;
}

/* Submit Order Loader Animation Styles */
*/
.loader {
	border: 5px solid lightgrey;
border-top: 7px solid #666;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}

/* Animation for the loader */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}