#wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    /* Adjust 150px to the minimum column size you want */
    gap: 10px;
    /* Space between items */
    width: 100%;
    /* Full width of the container */
    box-sizing: border-box;
    /* Include padding in the width */
    align-items: top;
}

.panel-title {
    font-weight: bold;
    align-items: center;
    padding: 7px, 12px;
}

/* Editable Styling */
.editable {
    border: 1px dashed #007bff;
    /* Dashed border to indicate editability */
    background-color: #f9f9f9;
    /* Light background */
    padding: 5px;
    /* Add padding for better spacing */
    cursor: text;
    /* Change cursor to text indicator */
    margin-block: 5px;
}

.editable:focus {
    outline: 2px solid #007bff;
    /* Highlight the field when focused */
}

/* Disable Styling in Edit Mode */
.edit-mode .side-by-side .list-item {
    padding: 5px;
    /* Remove padding */
    border: 1px dashed #007bff;;
    /* Remove borders */
}

.edit-mode .side-by-side .list-item:last-child {
    border-bottom: 1px dashed #007bff;
    /* Ensure no border on last child */

}

/* Flexbox Container for Side-by-Side Layout */
.side-by-side {
    display: flex;
    /* Create a flex container */
    justify-content: space-between;
    /* Center the lists horizontally */
    gap: 14px;
    /* Add spacing between People and Reports lists */
    margin-block: 5px;
}

/* Individual List Containers */
.side-by-side .list-container {
    flex: 1;
    /* Ensures equal space for both lists */
    text-align: center;
}

/* Title Styling */
.side-by-side .list-title {
    font-weight: bold;
    font-size: 1.2em;
}

/* Box Styling for Lists */
.side-by-side .list-box {
    border: 1px solid #ddd;
    /* Light gray border */
    border-radius: 5px;
    /* Rounded corners */
    padding: 10px;
    /* Add inner spacing */
    background-color: #f9f9f9;
    /* Light background for contrast */
    overflow-y: auto;
    /* Enable scrolling for long lists */
    text-align: left;
}

/* List Item Styling */
.side-by-side .list-item {
    padding: 5px;
    border-top: 1px solid #eee;
    /* Divider between items */
}

.side-by-side .list-item:first-child {
    border-top: none;
    /* Remove bottom border for the last item */
}

.barcode-table {
  margin: 0 auto;
  border-collapse: collapse;
  border-style: hidden;
  width: 6in; height: 4in;
  page-break-after: always;
}
.barcode-table td {
  padding: 1rem;
  border: 5px solid black;
}

.error {
	border: 1px solid red;
  }
  
.btn {
	font-weight: bold;
}

.select2-search__field{
    min-width: 200px !important;
    /*background-color: white  !important;*/
}
.select2-search.select2-search--dropdown > .select2-search__field{
    max-width: 95% !important;
}

.select2-search.select2-search--dropdown::before{
    font-family: "Glyphicons Halflings";
    content: "  \e003  ";
}

.asset-checker-description {
  min-width: 200px;
}

/*----- Side Filters -----*/
#filter-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
}
#filter-sidebar > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.filter-checkboxes {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
}
.filter-checkboxes .filter-item {
    display: block;
    padding: 4px 0;
}

/*----- Tabs -----*/
.tabs {
    width: 100%;
    display: inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
	display: block;
	clear: both;
	content: '';
}

.tab-links li {
	margin: 0px 5px;
	float: left;
	list-style: none;
}

.tab-links a {
	padding: 9px 15px;
	display: inline-block;
	border-radius: 3px 3px 0px 0px;
	background: #7FB5DA;
	font-size: 16px;
	font-weight: 600;
	color: #4c4c4c;
	transition: all linear 0.15s;
}

.tab-links a:hover {
	background: #a7cce5;
	text-decoration: none;
}

li.active a, li.active a:hover {
	background: #fff;
	color: #4c4c4c;
}

/*----- Content of Tabs -----*/

#admin_chart_form {
    margin: 30px 0;
}

.nav {
	padding: 15px;
	border-radius: 3px;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
	background: #fff;
}

/* --- end Tabs Stuff */

.mac-column {
	min-width: 14rem;
}

.condition-column {
	max-width: 12rem;	
}

.col-order-update {
	width: 10%;
	float: left;
}

.col-order-update  input{
	width: 100%;
}

.update-cell {
	padding: 5px;
}

.copy-down-btn {
	width: 3rem;
	padding-left: 6px;
}

.show-list-button {
	margin-top: 10px;
}


.m0  { margin:        0 }
.mt0 { margin-top:    0 }
.mr0 { margin-right:  0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left:   0 }

.m1  { margin: .5rem }
.mt1 { margin-top: .5rem }
.mr1 { margin-right: .5rem }
.mb1 { margin-bottom: .5rem }
.ml1 { margin-left: .5rem }

.m2  { margin: 1rem }
.mt2 { margin-top: 1rem }
.mr2 { margin-right: 1rem }
.mb2 { margin-bottom: 1rem }
.ml2 { margin-left: 1rem }

.m3  { margin: 2rem }
.mt3 { margin-top: 2rem }
.mr3 { margin-right: 2rem }
.mb3 { margin-bottom: 2rem }
.ml3 { margin-left: 2rem }

.m4  { margin: 4rem }
.mt4 { margin-top: 4rem }
.mr4 { margin-right: 4rem }
.mb4 { margin-bottom: 4rem }
.ml4 { margin-left: 4rem }

.mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
.mxn2 { margin-left: -1rem; margin-right: -1rem; }
.mxn3 { margin-left: -2rem; margin-right: -2rem; }
.mxn4 { margin-left: -4rem; margin-right: -4rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.p1  { padding: .5rem }
.py1 { padding-top: .5rem; padding-bottom: .5rem }
.px1 { padding-left: .5rem; padding-right: .5rem }

.p2  { padding: 1rem }
.py2 { padding-top: 1rem; padding-bottom: 1rem }
.px2 { padding-left: 1rem; padding-right: 1rem }

.p3  { padding: 2rem }
.py3 { padding-top: 2rem; padding-bottom: 2rem }
.px3 { padding-left: 2rem; padding-right: 2rem }

.p4  { padding: 4rem }
.py4 { padding-top: 4rem; padding-bottom: 4rem }
.px4 { padding-left: 4rem; padding-right: 4rem }


/* Sales Order - green */
.soDocumentColor {
	background-color: #21ba45;
	color: white;
}

/* Sales Quote - olive */
.sqDocumentColor {
	background-color: #b5cc18;
	color: white;
}

/* Trade-In Order - blue */
.toDocumentColor {
	background-color: #2185d0;
	color: white;
}

/* Trade-In Quote - teal */
.tqDocumentColor {
	background-color: #00b5ad;
	color: white;
}

/* Purchase Order - purple */
.poDocumentColor {
	background-color: #a333c8;
	color: white;
}

/* Purchase Quote - violet */
.pqDocumentColor {
	background-color: #6435c9;
	color: white;
}

/* Invoice - grey */
.invDocumentColor {
	background-color: #767676;
	color: white;
}

/* Credit Memo / RMA - black */
.creditMemoDocumentColor {
	background-color: #1b1c1d;
	color: white;
}


.flex-container {
    display: flex;
    justify-content: space-between; 
    align-items: center; /* To vertically center the line */
    margin-bottom: 8px; 
}

.flex-container:nth-child(odd) {
    background-color: #f2f2f2;  /* This will be the color for odd rows/items */
}

.flex-container:nth-child(even) {
    background-color: #e6e6e6;  /* This will be the color for even rows/items */
}

.mac-address, .serial-number {
    border: 1px solid #ccc;  /* Adjust the color as needed */
    padding: 2px 5px;  /* Some padding for better visual presentation */
}

.mac-address::after {
    content: ""; /* This creates the pseudo-element */
    display: inline-block;
    height: 100%; 
    width: 1px; /* Width of the line */
    background-color: #000; /* Color of the line */
    margin: 0 8px; /* Spacing around the line */
    vertical-align: middle;
}

.display-flex {
    display: flex;      /* enable flexbox layout */
    align-items: center; /* vertically align items in the center */
    flex-wrap: nowrap;  /* prevent items from wrapping */	
}

.shipping-label-fixed-width {
    width: 150px;  
    display: inline-block;  
}


.color-box {
    width: 40px; /* Adjusted width */
    height: 15px; /* Adjusted height */
    border: 2px solid darkgray; /* Dark gray border */
    border-radius: 10px; /* Rounded corners */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* Font size for the number */
}


.save {
    background-color: green; /* Green background */
    color: white; /* White text for better contrast */
    padding: 5px; /* Padding for better spacing */
    border-radius: 5px; /* Optional: Rounded corners */
    font-weight: bold; /* Optional: Bold text */
    text-align: center; /* Optional: Center-aligned text */
}

.dirty {
    background-color: orange; /* Orange background */
    color: black; /* Black or dark text for better contrast */
    padding: 5px; /* Padding for better spacing */
    border-radius: 5px; /* Optional: Rounded corners */
    font-weight: bold; /* Optional: Bold text */
    text-align: center; /* Optional: Center-aligned text */
}

.invalid-mac {
    color: red; /* or any other styling to indicate an invalid MAC address */
}

/* align stacked elements to the left */
.stack-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns items to the left */
}

/* align stacked elements to the center */
.stack-center {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers items horizontally */
}

/* align stacked elements to the right */
.stack-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns items to the right */
}

/* inline elements align left */
.inline-left {
    display: flex;
    justify-content: flex-start; /* Aligns items to the left */
    align-items: flex-start; /* Centers items vertically within the container */
}

/* inline elements align center */
.inline-center {
    display: flex;
    justify-content: center; /* Centers items horizontally */
    align-items: flex-start; /* Centers items vertically within the container */
}

/* inline elements align right */
.inline-right {
    display: flex;
    justify-content: flex-end; /* Aligns items to the right */
    align-items: flex-start; /* Centers items vertically within the container */
}


/* General invalid input styling */
.invalid {
    border: 2px solid #e74c3c; /* Bright red border to indicate error */
    background-color: #fce4e4; /* Light red background for emphasis */
    color: #e74c3c; /* Red text color */
}

/* Optional: Add an icon before the input field to indicate error */
.invalid::before {
    content: "⚠"; /* Warning icon */
    color: #e74c3c;
    margin-right: 5px;
}

/* Optional: Tooltip on hover to provide more information */
.invalid:hover::after {
    content: "Invalid input. Please check this field.";
    color: #e74c3c;
    background-color: #f9f9f9;
    border: 1px solid #e74c3c;
    padding: 5px;
    position: absolute;
    top: -30px;
    left: 0;
    width: 200px;
    z-index: 1000;
    white-space: nowrap;
}

/* For inputs with a darker theme */
.invalid-dark {
    border: 2px solid #c0392b;
    background-color: #e74c3c;
    color: #ffffff;
}

/* Adjusting focus styles for better accessibility */
.invalid:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.8);
}


/* Panel Styles */
.partlist-panel {
    /* Add any specific styles for the panel here */
}

.partlist-heading {
    cursor: pointer;
    /* Other styles for panel heading */
}

.partlist-panel-body {
    /* Styles for the collapsible panel body */
}

/* Items Container */
.partlist-items-container {
    display: flex;
    flex-wrap: wrap;
}

/* Item Container */
.partlist-item-container {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    margin-bottom: 15px;
    max-width: 250px;
}

/* Description Container */
.partlist-description-container {
    display: flex;
    align-items: center;
}

/* Description Text */
.partlist-description {
    color: #777;
    font-weight: bold;
}

/* Info Glyph */
.partlist-info-glyph {
    cursor: pointer;
    margin-left: 5px;
    color: #5bc0de; /* Optional: give it a distinct color like Bootstrap's info color */
}


/* MPN Row */
.partlist-mpn-row {
    display: flex;
    align-items: center;
}

/* OEM */
.partlist-oem {
    font-weight: bold;
    margin-right: 5px;
}

/* MPN */
.partlist-mpn {
    font-weight: bold;
}

/* Quantity Badge */
.partlist-quantity {
    margin-left: 5px;
}

/* Copy Glyph */
.partlist-copy-glyph {
    cursor: pointer;
    margin-left: 5px;
}

/* Badge Success (Green) */
.badge-success {
    background-color: #5cb85c;
}

/* Badge Warning (Yellow) */
.badge-warning {
    background-color: #f0ad4e;
}

.scrollable-container {
    max-height: 200px; /* Adjust the height as needed */
    overflow-y: auto;
    padding: 10px; /* Optional: for better readability */
    border: 1px solid #ddd; /* Optional: to visually separate the content */
}


/* Highlight input fields with errors */
.input-error {
    border: 2px solid red !important;
    background-color: #ffe6e6;
}

/* Style error messages */
.error-message {
    color: red;
    font-size: 12px;
    margin-top: 3px;
}

.checkbox-group-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.checkbox-group {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
}

.checkbox-group legend {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.row-changed {
    background-color: #fff3cd !important; /* Bootstrap warning bg */
    transition: background-color 0.3s ease;
}

/* Field highlighting for active selection */
.field-active {
    background-color: #e3f2fd !important; /* Light blue background */
    border: 2px solid #1976d2 !important; /* Blue border */
    box-shadow: 0 0 8px rgba(25, 118, 210, 0.3) !important; /* Blue glow */
    transition: all 0.3s ease;
}

.field-active:focus {
    outline: none; /* Remove default focus outline since we have custom styling */
}

/* Part Search Sidebar Styles */
#nv-part-sidebar { position:fixed; inset:0; z-index:2000; pointer-events:none; display:none; }
#nv-part-sidebar .nv-part-sidebar-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.35); pointer-events:auto; }
#nv-part-sidebar .nv-part-sidebar-panel { 
    position: absolute; 
    right:0; 
    top:0; 
    bottom:0; 
    width:420px; 
    background:#fff; 
    box-shadow:-6px 0 24px rgba(0,0,0,0.2); 
    pointer-events:auto;
    display:flex;
    flex-direction:column;
}
#nv-part-sidebar .nv-part-sidebar-header { 
    position:sticky;
    top:0;
    background:#f8f9fa;
    z-index:10;
    display:flex; 
    flex-direction:column;
    gap:8px; 
    padding:12px; 
    border-bottom:1px solid #dee2e6;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    pointer-events:auto; 
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-header-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-header-row #nv-part-search-input {
    flex: 1;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-header-row .nv-part-header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-header-row .nv-part-header-icons button {
    background: none;
    border: none;
    color: #6c757d;
    padding: 4px;
    min-width: 28px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 16px;
    box-shadow: none;
    outline: none;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-header-row .nv-part-header-icons button:hover {
    background: rgba(108, 117, 125, 0.1);
    color: #495057;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-header-row .nv-part-header-icons button:focus {
    box-shadow: none;
    outline: none;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-header-row .nv-part-header-icons button.active {
    background: rgba(108, 117, 125, 0.2);
    color: #343a40;
    transform: scale(1.05);
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-settings-row {
    margin-top: 8px;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-settings-row label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    margin: 0;
}
#nv-part-sidebar .nv-part-sidebar-header .nv-part-settings-row input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}
#nv-part-sidebar .nv-part-sidebar-content { 
    flex:1; 
    overflow:auto; 
    padding:12px;
    background:#fff;
}
#nv-part-sidebar .nv-part-sidebar-footer { 
    position:sticky;
    bottom:0;
    background:#f8f9fa;
    border-top:1px solid #dee2e6;
    box-shadow:0 -2px 4px rgba(0,0,0,0.1);
    padding:12px;
    text-align:center;
    color:#6c757d;
    font-size:14px;
}
#nv-part-sidebar .nv-part-sidebar-footer a {
    color:#007cba;
    text-decoration:none;
    font-weight:600;
}
#nv-part-sidebar .nv-part-sidebar-footer a:hover {
    text-decoration:underline;
}
#nv-part-sidebar input { pointer-events:auto !important; }
.nv-part-results .nv-part-row { 
    padding:12px; 
    border-bottom:1px solid #eee; 
    cursor:pointer; 
    display:flex; 
    gap:12px; 
    align-items:center; 
    transition:background-color 0.2s ease;
}
.nv-part-results .nv-part-row:hover { 
    background-color:#f8f9fa; 
    border-left:3px solid #007cba;
    padding-left:9px;
}
.nv-part-results .nv-part-thumb { 
    width:48px; 
    height:48px; 
    background:#f6f6f6; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border-radius:4px;
    flex-shrink:0;
}
.nv-part-results .nv-part-meta { flex:1; }
.nv-part-results .nv-part-title { 
    font-weight:700; 
    font-size:16px; 
    color:#212529; 
    margin-bottom:4px; 
}
.nv-part-results .nv-part-desc { 
    font-size:11px; 
    color:#6c757d; 
    line-height:1.3;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.nv-part-results .nv-part-actions {
    display:flex;
    flex-direction:column;
    gap:4px;
    flex-shrink:0;
    margin-left:8px;
}
.nv-part-results .nv-part-vote-btn {
    background:#f8f9fa;
    border:1px solid #dee2e6;
    border-radius:4px;
    width:32px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
    font-size:14px;
}
.nv-part-results .nv-part-thumbs-up:hover {
    background:#d4edda;
    border-color:#28a745;
    color:#28a745;
}
.nv-part-results .nv-part-thumbs-down:hover {
    background:#f8d7da;
    border-color:#dc3545;
    color:#dc3545;
}
.nv-part-results .nv-part-vote-btn:active {
    transform:scale(0.95);
}
.nv-part-results .nv-part-vote-btn.voted {
    transform:scale(1.1);
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.nv-part-results .nv-part-thumbs-up.voted {
    background:#28a745 !important;
    border-color:#28a745 !important;
    color:#fff !important;
}
.nv-part-results .nv-part-thumbs-down.voted {
    background:#dc3545 !important;
    border-color:#dc3545 !important;
    color:#fff !important;
}
/* END Part Search Sidebar Styles */