table.dataTable {
    width: 100% !important; /* Ensure the table width is fluid */
}

.select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    display: flex;
    align-items: center;
}

.accordion-toggle {
    cursor: pointer;
}
.collapse td {
    background-color: #f9f9f9;
    padding: 10px;
}

/* Change dropdown item hover color to primary */
.dropdown-item:hover {
    background-color: #007bff !important; /* Primary background color */
    color: #fff !important; /* White text */
}


/* background color */
.content-wrapper {
    background-color: #f4f4f4 !important; /* Base background color */
    background-image: radial-gradient(#ccc 0.5px, transparent 0.5px) !important;
    background-size: 8px 8px !important; /* Spacing between dots */
}
/* background color ends here */


/* Top navbar background color */
.main-header.navbar {
    background-color: #56d5c6 !important; /* Background color */
    color: #ffffff !important; /* Default text color */
    border-bottom: none; /* Remove border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow */
}

.main-header.navbar a,
.main-header.navbar a.nav-link,
.main-header.navbar .nav-link,
.main-header.navbar .navbar-brand,
.main-header.navbar .dropdown-item {
    color: #ffffff !important; /* Ensure all links and items are white */
}

.main-header.navbar .nav-link:hover,
.main-header.navbar .dropdown-item:hover {
    color: #f0f0f0 !important; /* Optional: Slightly lighter on hover */
}
/* Top navbar background color ends here */


.main-footer {
    background-color: #56d5c6 !important; /* Match the header background color */
    color: #ffffff !important; /* Default text color */
    border-top: none; /* Remove top border */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Add shadow at the top */
    padding: 10px 15px; /* Adjust padding for a clean look */
}

.main-footer a {
    color: #ffffff !important; /* Ensure footer links are white */
    text-decoration: none; /* Remove underline from links */
}

.main-footer a:hover {
    color: #f0f0f0 !important; /* Lighter color on hover for links */
}

.main-footer .float-right {
    color: #ffffff !important; /* Ensure version text is white */
}



/* table head background color begins here */
table thead {
    background-color: #51cdae; /* Replace with your desired background color */
    color: #ffffff; /* Makes the text white for better contrast */
}

table thead th {
    text-align: center; /* Optional: Center align the text in the table head */
    padding: 10px; /* Optional: Add padding for better spacing */
}
/* table head background color ends here */

/* buttons start css here */
.btn-custom-save {
    background-color: #1d7ed9 !important; /* Custom pink color */
    color: #ffffff !important; /* White text */
    border-radius: 6px; /* Rounded edges */
    padding: 15px 10px; /* Adjust size */
    font-size: 15px; /* Larger text */
    border: none; /* Remove border */
    width: 150px; /* Set a fixed width for consistency */
}

.btn-custom-close {
    background-color: hsl(0, 0%, 80%) !important; /* Light gray color */
    color: #000000 !important; /* Black text */
    border-radius: 6px; /* Rounded edges */
    padding: 15px 30px; /* Adjust size */
    font-size: 15px; /* Larger text */
    border: none; /* Remove border */
    width: 150px; /* Set a fixed width for consistency */
}

.btn-custom-save:hover,
.btn-custom-close:hover {
    opacity: 0.9; /* Add slight transparency effect on hover */
    transform: scale(1.02); /* Slight zoom on hover */
}
/* buttons ends css here */


.dt-buttons button {
    background-color: #007bff !important; /* Set a blue background color */
    color: #ffffff !important; /* Ensure the text is white */
    border: none !important; /* Remove button border */
    padding: 10px 15px; /* Adjust padding */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Show a pointer on hover */
}

.dt-buttons button:hover {
    background-color: #0056b3 !important; /* Slightly darker blue on hover */
    color: #ffffff !important; /* Maintain white text on hover */
}

.dt-buttons .buttons-colvis {
    background-color: #0056b3 !important; /* Green background for column visibility button */
    color: #ffffff !important;
}

.dt-buttons .buttons-colvis:hover {
    background-color: #0056b3 !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
}

/* custom card border top begins here */
.border-top-custom {
    border-top: 3px solid #007bff; /* Blue border at the top */
}
/* custom card border top ends here */

/* card without border section begins here */
.card-without-border {
    border: none !important; /* Remove border */
    box-shadow: none !important; /* Remove shadow */
    outline: none !important; /* Remove outline */
}
/* card without border section ends here */

/* dropdown toggle button in the item list view css begins here */
.dropdown-menu {
    min-width: 150px;
    text-align: left;
    margin-top: 10px;
}

.dropdown-item i {
    margin-right: 5px;
}

.btn-reo {
    background-color: #8eb8bd;
    color: #fff;
    border-radius: 4px;
    padding: 8px 15px;
}

.btn-reo:hover {
    background-color: #33dfe4;
    color: #fff;
}
/* dropdown toggle button in the item list view css ends here */


/* custom modal width begins here */
.custom-modal-width {
    max-width: 50%; /* Adjust width as needed, e.g., 60%, 90%, etc. */
}
/* custom modal width ends here */

/* custom input number css to remove arrows starts here */
.custom-number-input::-webkit-inner-spin-button, 
.custom-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Removes the spinner */
    margin: 0;
}

/* For non-WebKit browsers like Firefox */
.custom-number-input {
    -moz-appearance: textfield; /* Hides number input spinner */
}
/* custom input number css to remove arrows ends here */


/* Green shade for category on the pos interface buttons starts here  */
.category-btn {
    background-color: #28a745; /* Bootstrap's success green */
    color: white;
    border: 1px solid #28a745;
    transition: background-color 0.3s, border 0.3s;
}

.category-btn:hover {
    background-color: #218838; /* Darker green on hover */
    border: 1px solid #218838;
}
/* Green shade for category on the pos interface buttons ends here */


.qty-input {
    width: 60px;
    text-align: center;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
}

.input-group button {
    width: 35px;
}


/* Modal colors starts here */
/* Custom class for modal header and footer */
.custom-modal-header, .custom-modal-footer {
    background-color: rgba(86, 213, 198, 0.9);  /* Using a soft opacity for a subtle background */
    color: #fff;  /* White text for contrast */
}

.custom-modal-header .modal-title {
    font-weight: bold;  /* Bold title for emphasis */
}
/* Modal colors ends here */


/* Sidebar custom icon color begins here */
/* Custom class for icons */
.custom-icon {
    color: rgba(86, 213, 198, 1);  /* Matching the teal/turquoise color */
}

.custom-icon:hover {
    color: rgba(86, 213, 198, 0.8);  /* Slightly muted color on hover for effect */
}

.nav-link .custom-icon {
    margin-right: 8px;  /* Space between icon and text */
}
/* Sidebar custom icon color ends here */


.custom-width {
    width: 100px; /* Reduce width of the input field */
    text-align: center; /* Horizontally center the value */
    padding: 0.375rem 0.75rem; /* Adjust padding to center text vertically */
    height: 38px; /* Set a specific height to align vertically */
}

/* Ensure the middle section remains stable */
.pos-items-container {
    position: sticky;
    top: 0;
    z-index: 10; /* Keeps filters on top */
    background: white; /* Avoids transparency issues */
    padding: 10px;
}

/* Prevent items from shifting */
.middle-items-section {
    min-height: 500px;  /* Ensures space remains when filtering */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center; /* Keeps items centered */
}