/*******************************************************
# General
*******************************************************/
:root {
  scroll-behavior: smooth;
  /* declare standard colors */
  /* Fonts */
  --font-default: 'Open Sans', sans-serif;
  --font-primary: 'Nunito', sans-serif;
  --font-secondary: 'Poppins', sans-serif;

  /* Colors */
  --default: #444444;  /*dark gray*/
  --primary: #756244;  /*bronze*/
  --secondary: #6c757d; /*light gray*/
  --tertiary: #2c384e; /*bluegray*/

  /* General Colors */
  --red: #dc3545;
  --green: #28a745;
  --blue: #0063A8;
  --bluegray: #2c384e;
  --bronze: #756244;
  --lightbronze: #9A783E;
  --lightblue: #a5c5fe;
  --darkblue: #012970;
  --royalblue: #012970;
  --yellow: #ffc107;
  --orange: #fd7e14;
  --brown: #7b4f2c;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --white: #f6f9ff;
  --gray: #6c757d;
  --lightgray: #aab7cf;
  --darkgray: #444444;
  --black: #343a40;
  --teal: #20c997;
  --cyan: #17a2b8;
}

body {
  font-family: "Open Sans", sans-serif;
  background: var(--white);
  color: var(--primary);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--lightblue);
  text-decoration: none;
}

i:hover {
  cursor: pointer;
}

.btn i {
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
}

li {
  cursor: pointer !important;
  color: var(--tertiary) !important;
}

input::placeholder {
  font-size: 12px;
}

/* Smaller font size specifically for inline edit inputs */
#tblQuoteLines input.form-control.except {
  font-size: 0.8rem;
  padding: 0.15rem 0.25rem;
  height: auto;
  text-align: right;
}

/* Inline edit inputs in suggested lines */
#tblQuoteSuggested input.form-control.except {
  font-size: 0.8rem;
  padding: 0.15rem 0.25rem;
  height: auto;
  text-align: right;
}

#tblQuoteLines tbody td,
#tblQuoteLines tfoot th {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* style the badge; keep id the same so existing JS still works */
.status-quote-badge {
  font-size: .9rem;
  padding: .35rem .6rem;
}

/* OPTIONAL: keep it visible when scrolling */
.pagetitle.sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/*******************************************************
# Main
*******************************************************/
#mainContainer {
  margin-top: 60px;
  min-width: 0;
  transition: margin-left .2s ease, margin-right .2s ease, width .2s ease;
}

#main {
  margin-top: 25px;
  padding: 10px 30px;
  min-width: 0;
  transition: all 0.2s;
}

@media (max-width: 1199px) {
  #main {
    padding: 20px;
  }
}

/*******************************************************
# modal - white out background (legacy custom modals)
*******************************************************/

/* Kept commented legacy .modal override for reference
.modal {
  display: none;
  position: fixed;
  z-index: 950;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(255, 255, 255,.75);
  background-color: rgba(255,255,255,.75);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid var(--primary);
  width: 400px;
  height: 350px;
}

.modal-content img {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  max-width: 65%;
  height: auto;
}
*/

/*******************************************************
	# Global Status Panel (Solid / Non-Transparent)
*******************************************************/
.status-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  max-width: min(520px, calc(100vw - 32px));
  min-width: 260px;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 18px rgba(1, 41, 112, 0.18);

  /* SOLID BASE */
  background: #ffffff;
  border: 1px solid #012970;
  border-top: 0;

  color: var(--secondary);
  z-index: 896;

  transform: translateY(calc(-100% - 60px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.status-panel.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.status-panel-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

/* =========================
   Status Variants (SOLID)
   ========================= */

.status-panel.status-success {
  background: #e6f4ea;
  border-color: #28a745;
  color: #1f6f34;
}

.status-panel.status-danger {
  background: #f8d7da;
  border-color: #dc3545;
  color: #842029;
}

.status-panel.status-warning {
  background: #fff3cd;
  border-color: #ffc107;
  color: #7a5a00;
}

.status-panel.status-info,
.status-panel.status-primary,
.status-panel.status-secondary {
  background: #e7f1ff;
  border-color: #0063a8;
  color: var(--primary);
}

/*******************************************************
	# Page Title
*******************************************************/
.pagetitle {
  margin-bottom: 10px;
}

.pagetitle h1 {
  font-size: 20px;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--secondary);
}

/*******************************************************
# Help
*******************************************************/
.help p {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 5;
  font-weight: 100;
  color: var(--primary);
}

.helpicon {
  font-size: 16px;
  font-weight: 100;
  color: var(--primary);
}

/*******************************************************
# Back to top button
*******************************************************/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 1000;
  background: var(--blue);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: var(--white);
  line-height: 0;
}

.back-to-top:hover {
  background: var(--primary);
  color: var(--white);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*******************************************************
# Override some default Bootstrap stylings
*******************************************************/
/* buttons */
.btn.btn-rounded {
  border-radius: 25px;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0px 0px 0px 0px;
  text-decoration: none;
  width: 100px;
}

.btn.btn-rounded150 {
  border-radius: 25px;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0px 0px 0px 0px;
  text-decoration: none;
  width: 150px;
}

.btn.btn-rounded,
.btn.btn-rounded150 {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.btn.btn-rounded:hover,
.btn.btn-rounded150:hover {
  transform: translateY(-1px);
}

.btn.btn-rounded:active,
.btn.btn-rounded150:active {
  transform: translateY(1px);
}

/* Customer / Contact readout cards — vertical alignment helpers ==========
   Two side-by-side cards on quotedetail.html (#custaddressreadout /
   #custcontactreadout). The name row on each must land at the same Y
   across both cards. Font-size on both name rows unified via
   .lw-readout-name; the "Acct#" spacer row is unified via
   .lw-readout-acctline, which reserves a full line of height even when
   the Acct# is empty (so the customer's name doesn't rise one line
   higher than the contact's name). */
.lw-readout-name {
  font-size: 0.95rem;
  line-height: 1.35;
}
.lw-readout-acctline {
  min-height: 1.2em; /* one line of `small` text */
}
.lw-readout-acctline:empty::after {
  content: "\a0"; /* nbsp so the row reserves space when unpopulated */
}

/* Quill editor overrides ==================================================
   The app's `body { color: var(--primary) }` sets the default text color
   to bronze (#756244). Inside a Quill editor that reads as "the theme
   color leaked into my email body," and — worse — Quill's color-picker
   top-left swatch is "Reset color" (not black), so clicking it strips
   the inline color and the text falls back to bronze via that body
   rule instead of turning black. Force the editor's base text color to
   real black so both the default state and the "reset" swatch behave
   the way users expect.

   Also: the app's `li { color: var(--tertiary) !important }` (~line 77)
   forces list-item text to the tertiary color. Reset it inside
   `.ql-editor` so bullet/numbered lists in the editor inherit the
   editor's black instead. Menus, breadcrumbs, and every other <li>
   on the page are unaffected. */
.ql-editor {
  color: #000 !important;
}
.ql-editor li {
  color: inherit !important;
}

.form-group {
  margin-top: -8px !important;
  margin-bottom: -8px !important;
  padding-top: -8px !important;
  padding-bottom: -8px !important;
}

/*******************************************************
  # Modern Button
*******************************************************/
.btn-modern {
  --btn-bg: #007bff;
  --btn-hover-bg: #0056b3;
  --btn-color: #fff;
  --btn-hover-color: #fff;

  background-color: var(--btn-bg);
  color: var(--btn-color);
  border: none;
  border-radius: 0.375rem;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, background-color 0.2s, box-shadow 0.2s;
}

.btn-modern:hover,
.btn-modern:focus {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-modern:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/*******************************************************
# Dropdown menus
*******************************************************/
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  animation-name: dropdown-animate;
  animation-duration: .2s;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: left;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: var(--primary);
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: var(--lightblue);
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--white);
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--white);
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid var(--white);
    border-left: 1px solid var(--white);
  }
}

@keyframes dropdown-animate {
  0% { opacity: 0; }
  100% { opacity: 1; }
  0% { opacity: 0; }
}

.tooltip-inner {
  background-color: var(--primary);
  box-shadow: 0px 0px 4px black;
  opacity: 1 !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--primary)!important;
}
.tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--primary) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--primary) !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--primary) !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow {
  border-right-color: var(--primary)!important;
}

/* Light Backgrounds */
.bg-primary-light,
.bg-secondary-light,
.bg-success-light,
.bg-danger-light,
.bg-warning-light,
.bg-info-light,
.bg-dark-light {
  background-color: var(--white);
  border-color: var(--white);
}

/* Card */
.card {
  margin-bottom: 30px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.card-header,
.card-footer {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--primary);
  padding: 5px;
}

.card-title {
  padding: 0px 0 0px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--secondary);
  font-family: "Poppins", sans-serif;
}

.card-title span {
  color: var(--lightblue);
  font-size: 14px;
  font-weight: 400;
}

.card-body {
  padding: 20px 20px 20px 20px;
}

.card-img-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Upfit Cards */
.upfit-card-mfg {
  color: var(--darkgray);
  font-size: 11px;
  font-weight: 500;
}

.upfit-card-part-desc {
  color: var(--darkgray);
  font-size: 12px;
  font-weight: 100;
}

.upfit-card-part {
  color: var(--primary);
  font-size: 12px;
  font-weight: 100;
}

.upfit-card-partno {
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
}

.upfit-card-image {
  max-width: 250px;
  max-height: 180px;
  height: auto;
  width: auto;
  vertical-align: middle;
}

/* Alerts */
.alert-heading {
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
}

/* Close Button */
.btn-close {
  background-size: 25%;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

/* Accordion */
.accordion-item {
  border: 1px solid var(--white);
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--secondary);
  background-color: var(--white);
}

.accordion-flush .accordion-button {
  padding: 15px 0;
  background: none;
  border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: var(--blue);
}

.accordion-flush .accordion-body {
  padding: 0 0 15px 0;
  color: #3e4f6f;
  font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  color: #899bbd;
  font-weight: 600;
}

.breadcrumb .breadcrumb-item::before {
  color: var(--lightblue);
}

.breadcrumb .active {
  color: var(--darkblue);
  font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid var(--white);
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -2px;
  border: none;
  color: var(--darkblue);
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: var(--blue);
}

.nav-tabs-bordered .nav-link.active {
  background-color: var(--white);
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
}

/*******************************************************
# Override DataTables default css
*******************************************************/
.dt-container,
.dt-container label,
.dt-container .dt-input,
.dt-container .dt-length select,
.dt-container .dt-search input,
.dt-container .dt-info,
.dt-container .dt-paging .dt-paging-button,
.dt-container table.dataTable th,
.dt-container table.dataTable td {
  font-size: 0.75rem !important;
}

.datatable-table > tbody > tr > td,
.datatable-table > tbody > tr > th,
.datatable-table > tfoot > tr > td,
.datatable-table > tfoot > tr > th,
.datatable-table > thead > tr > td,
.datatable-table > thead > tr > th {
  vertical-align: top;
  padding: 0px 0px;
}

th { font-size: 14px; }
td { font-size: 14px; }

table.dataTable tfoot th {
  text-align: right;
}

table.dataTable tbody {
  cursor: pointer;
}

.page-item.active .page-link {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-color: #000 !important;
}

.page-link {
  color: var(--secondary) !important;
  background-color: #fff !important;
  border: 1px solid #dee2e6 !important;
}

.page-link:hover {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-color: #000 !important;
}

table.dataTable thead th {
  background: transparent !important;
  white-space: nowrap;
}

table.dataTable thead .searchcrit,
table.dataTable thead select.searchcrit,
table.dataTable thead input.searchcrit {
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
}

table.dataTable thead select.searchcrit {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}

table.dataTable thead select.searchcrit::-ms-expand {
  display: none;
}

table.dataTable thead .searchcrit {
  width: 100%;
  box-sizing: border-box;
}

table.dataTable thead input.searchcrit {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 0.5rem !important;
}

table.dataTable thead input.searchcrit::-webkit-search-decoration,
table.dataTable thead input.searchcrit::-webkit-search-cancel-button,
table.dataTable thead input.searchcrit::-webkit-search-results-button,
table.dataTable thead input.searchcrit::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

table.dataTable thead select.searchcrit {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  padding-right: 0.5rem !important;
}

table.dataTable thead select.searchcrit::-ms-expand {
  display: none;
}

/* =========================================
   DataTables filter row (true 2nd header row)
========================================= */
table.dataTable thead tr.dt-filter-row th {
  padding: 4px 6px;
  vertical-align: middle;
  background: #f8f9fa !important;
  white-space: nowrap;
  line-height: 1;
}

table.dataTable thead tr.dt-filter-row .searchcrit,
table.dataTable thead tr.dt-filter-row input.searchcrit,
table.dataTable thead tr.dt-filter-row select.searchcrit,
table.dataTable thead tr.dt-filter-row select.searchcrit-select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--secondary) !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 6px !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

table.dataTable thead tr.dt-filter-row input.searchcrit::placeholder {
  font-family: "Open Sans", sans-serif !important;
  font-size: 12px !important;
  color: #6c757d !important;
  opacity: 1;
}

table.dataTable thead tr.dt-filter-row input.searchcrit[type="search"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 0.5rem !important;
}

table.dataTable thead tr.dt-filter-row input.searchcrit[type="search"]::-webkit-search-decoration,
table.dataTable thead tr.dt-filter-row input.searchcrit[type="search"]::-webkit-search-cancel-button,
table.dataTable thead tr.dt-filter-row input.searchcrit[type="search"]::-webkit-search-results-button,
table.dataTable thead tr.dt-filter-row input.searchcrit[type="search"]::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

table.dataTable thead tr.dt-filter-row select.searchcrit,
table.dataTable thead tr.dt-filter-row select.searchcrit-select,
table.dataTable thead tr.dt-filter-row select.no-chevron {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  padding-right: 6px !important;
}

table.dataTable thead tr.dt-filter-row select.searchcrit::-ms-expand,
table.dataTable thead tr.dt-filter-row select.searchcrit-select::-ms-expand,
table.dataTable thead tr.dt-filter-row select.no-chevron::-ms-expand {
  display: none;
}

/*******************************************************
# Header
*******************************************************/
.header .company {
  line-height: 1;
}

@media (min-width: 1200px) {
  .header .company {
    width: 300px;
    padding-left: 15px;
  }
  .logo {
    width: 250px;
    padding-left: 0px;
    pointer-events: none;
  }
}

.header .company {
  font-size: 20px;
  color: var(--secondary);
  font-family: "Nunito", sans-serif;
}

.logo {
  line-height: 1;
}

.logo img {
  max-height: 26px;
  margin-top: -3px;
  margin-right: 0px;
  padding-left: 20px;
}

.logo span {
  font-size: 26px;
  font-weight: 700;
  color: var(--secondary);
  font-family: "Nunito", sans-serif;
}

.header {
  transition: all 0.3s;
  z-index: 1000;
  height: 60px;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  background-color: var(--white);
  padding-left: 5px;
}

.header .toggle-sidebar-btn {
  font-size: 36px;
  padding-left: 10px;
  cursor: pointer;
  color: var(--secondary);
}

.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
    background: white;
    z-index: 1000;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.header .search-form {
  width: 100%;
}

.header .search-form input {
  border: 0;
  font-size: 14px;
  color: var(--secondary);
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: var(--secondary);
}

/*******************************************************
# Header Nav
*******************************************************/
.header-nav ul {
  list-style: none;
}

.header-nav > ul {
  margin: 0;
  padding: 0;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: var(--secondary);
  margin-right: 25px;
  position: relative;
}

.header-nav .nav-profile {
  color: var(--secondary);
}

.header-nav .nav-profile img {
  max-height: 36px;
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .badge-number {
  position: absolute;
  inset: -2px -5px auto auto;
  font-weight: normal;
  font-size: 12px;
  padding: 3px 6px;
}

.header-nav .notifications {
  inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .notifications .notification-item i {
  margin: 0 20px 0 10px;
  font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--lightgray);
}

.header-nav .notifications .notification-item:hover {
  background-color: var(--white);
}

.header-nav .messages {
  inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .messages .message-item a {
  display: flex;
}

.header-nav .messages .message-item img {
  margin: 0 20px 0 10px;
  max-height: 40px;
}

.header-nav .messages .message-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--primary);
}

.header-nav .messages .message-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--lightgray);
}

.header-nav .messages .message-item:hover {
  background-color: var(--white);
}

.header-nav .company {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .company .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--primary);
}

.header-nav .company .dropdown-header span {
  font-size: 14px;
}

.header-nav .company .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .company .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .company .dropdown-item:hover {
  background-color: var(--white);
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--primary);
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: var(--white);
}

/*******************************************************
# Sidebar Left
*******************************************************/
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 55px;
  z-index: 955;
  transition: all 0.2s;
  padding: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lightgray) transparent;
  box-shadow: 2px 0 4px rgba(0,0,0,0.15);
  background-color: var(--white);
}

@media (max-width: 1199px) {
  .sidebar {
    left: 0;
  }

  .toggle-sidebar .sidebar {
    left: -210px;
  }
}

.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--white);
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--lightgray);
}

@media (min-width: 1200px) {
  #mainContainer,
  #footer {
    margin-left: 210px;
    margin-right: var(--lw-rightbar-width, 0px);
  }

  .toggle-sidebar #mainContainer,
  .toggle-sidebar #footer {
    margin-left: 155px;
  }

  .toggle-sidebar.toggle-sidebarb #mainContainer,
  .toggle-sidebar.toggle-sidebarb #footer,
  .toggle-sidebarb #mainContainer,
  .toggle-sidebarb #footer {
    margin-left: 55px;
  }

  .toggle-sidebar .sidebar {
    left: -210px;
  }
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
  cursor: pointer;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--tertiary);
  font-weight: 400;
  margin: 10px 0px 0px 15px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  color: var(--primary);
  transition: 0.2s;
  background: var(--white);
  padding: 10px 8px;
  border-radius: 4px;
}

.sidebar-nav .nav-link i {
  font-size: 20px;
  color: var(--secondary);
}

.sidebar-nav .nav-link.collapsed {
  color: var(--secondary);
  background: var(--white);
}

.sidebar-nav .nav-link.collapsed i {
  color: var(--secondary);
}

.sidebar-nav .nav-link:hover {
  color: var(--light);
  background: var(--primary);
}

.sidebar-nav .nav-link:hover i {
  color: var(--white);
}

.sidebar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary);
  transition: 0.2s;
  padding: 10px 0 10px 10px;
}

.sidebar-nav .nav-content a i {
  font-size: 6px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: var(--primary);
}

.sidebar-nav .nav-content a.active i {
  background-color: var(--blue);
}

#sidebardiv .sidebar .sidebar-nav li > a.nav-link.active,
#sidebardiv .sidebar .sidebar-nav li > a.nav-link.active:hover {
  background: #eef2ff;
  border-radius: 8px;
  color: var(--primary);
  background-color: var(--light);
}

#sidebardiv .sidebar .sidebar-nav li > a.nav-link.active i,
#sidebardiv .sidebar .sidebar-nav li > a.nav-link.active:hover i {
  color: var(--primary);
  transform: scale(1.25);
  text-shadow: 0 0 1px var(--primary);
}

#sidebardiv .sidebar .sidebar-nav li > a.nav-link {
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}

#sidebar .nav-item {
  position: relative;
}

#sidebar .nav-item.active-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background-color: var(--primary);
  border-radius: 0 0px 0px 0;
}

/*******************************************************
# SidebarB (Secondary Menu left)
*******************************************************/
.sidebarb {
  position: fixed;
  top: 60px;
  left: 55px;
  bottom: 0;
  width: 155px;
  z-index: 950;
  transition: all 0.2s;
  padding: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lightgray) transparent;
  box-shadow: 2px 0 4px rgba(0,0,0,0.15);
  background-color: var(--white);
}

.sidebarb::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--white);
}

.sidebarb::-webkit-scrollbar-thumb {
  background-color: var(--lightgray);
}

@media (min-width: 1200px) {
  .toggle-sidebarb .sidebarb {
    left: -180px;
  }
}

@media (max-width: 1199px) {
  .sidebarb {
    left: 55px;
  }

  .toggle-sidebarb .sidebarb {
    left: -210px;
  }
}

.sidebarb-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebarb-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
  cursor: pointer;
}

.sidebarb-nav .nav-item {
  margin-bottom: 5px;
}

.sidebarb-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--lightgray);
  font-weight: 400;
  margin: 10px 0px 5px 0px;
}

.sidebarb-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--secondary);
  transition: 0.2s;
  background: var(--white);
  padding: 0 10px;
  border-radius: 4px;
}

.sidebarb-nav .nav-link.active {
  font-weight: bold;
  color: var(--primary);
}

.sidebarb-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--blue);
}

.sidebarb-nav .nav-link.collapsed {
  color: var(--secondary);
  background: var(--white);
}

.sidebarb-nav .nav-link.collapsed i {
  color: var(--lightblue);
}

.sidebarb-nav .nav-link:hover {
  color: var(--white);
  background: var(--primary);
}

.sidebarb-nav .nav-link:hover i {
  color: var(--white);
  background: var(--primary);
}

.sidebarb-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebarb-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebarb-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebarb-nav .nav-content a {
  display: flex;
  align-items: center;
  /* Items render SMALLER than the section header (12px) so the visual
     hierarchy is header → items, not the other way around. */
  font-size: 11px;
  font-weight: 400;
  color: var(--secondary);
  transition: 0.2s;
  padding: 5px 10px 10px 30px;
}

.sidebarb-nav .nav-content a i {
  font-size: 5px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebarb-nav .nav-content a.active i {
  color: var(--light);
  background-color: var(--primary);
}

#sidebarbdiv .sidebarb .sidebarb-nav li > a.nav-link.active,
#sidebarbdiv .sidebarb .sidebarb-nav li > a.nav-link.active:hover {
  background: #eef2ff;
  border-radius: 8px;
  color: var(--primary);
  background-color: var(--light);
}

#sidebarbdiv .sidebarb .sidebarb-nav li > a.nav-link.active i,
#sidebarbdiv .sidebarb .sidebarb-nav li > a.nav-link.active:hover i {
  color: var(--primary);
  transform: scale(1.25);
}

#sidebarbdiv .sidebarb .sidebarb-nav li > a.nav-link {
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}

#sidebarbdiv #filtermenu .nav-content {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none;
}

#sidebarbdiv #filtermenu .nav-content > li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Filter-item link: flex row with label on left, count on right.
   Earlier this file had THREE overlapping rules for this selector — one
   set display:flex, the next set display:block, and the block one (being
   last) won the cascade. That killed flex layout and made `ms-auto` /
   `flex-grow` on inner spans no-op. Consolidated into one explicit rule. */
#sidebarbdiv #filtermenu .nav-content > li > a {
  display: flex !important;
  align-items: center;
  /* Equal left/right padding — items don't get a 30px indent. */
  padding: 6px 10px !important;
}

#sidebarbdiv #filtermenu .nav-link {
  padding-left: 0 !important;
}

/* Applied-filter chips at the top of the upfitter sidebar
   (vehicle info from Add_Build_Filter + mfg/cat/subcat from Add_Filter).
   They use plain <li><div class="row"><small>…</small></div></li> markup,
   which doesn't match the .nav-content a selector that sizes the items
   below — so by default they inherit the body font and render noticeably
   larger than every other entry in the sidebar. Pin to 11px to match
   the filter items beneath (.sidebarb-nav .nav-content a). */
#sidebarbdiv #filterlist li {
  font-size: 11px;
  font-weight: 400;
  color: var(--secondary);
  padding: 4px 10px;
  margin: 0;
  list-style: none;
}

#sidebarbdiv #filterlist small {
  font-size: inherit;
}

#sidebarbdiv #filterlist .bi-trash {
  cursor: pointer;
  font-size: 12px;
}

/*******************************************************
# Sidebar Right
*******************************************************/
.sidebarR {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  width: 0;
  z-index: 950;
  background-color: var(--white);
  overflow: hidden;
  transition: width 0.3s ease;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  display: flex;
  flex-direction: column;
}

.sidebarR a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 14px;
  color: var(--blue);
  display: block;
  transition: 0.3s;
}

.sidebarR a:hover {
  color: var(--lightblue);
}

.sidebarR-hdr {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 600;
  color: var(--secondary);
  margin: 0;
  padding: 15px 15px 10px 15px;
}

.sidebarR-msg {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 12px;
  color: var(--tertiary);
  font-weight: 400;
  margin: 0;
  padding: 0 15px 15px 15px;
}

.sidebarR-input {
  font-size: 11px;
  color: var(--tertiary);
  font-weight: 400;
  margin: 10px 15px 0px 15px;
}

.sidebarR button {
  margin: 10px 15px 0px 15px;
}

.sidebarR .closebtn {
  position: absolute;
  top: 2px;
  right: 15px;
  font-size: 36px;
  margin: 0;
  z-index: 950;
}

.option-title {
  font-size: 18px;
  font-weight: 550;
  color: var(--secondary);
  margin: 12px 0 0 0;
}

.option-body {
  font-size: 12px;
  color: var(--tertiary);
  font-weight: 400;
  margin: 10px 0 0 0;
}

.sidebarR-msg::-webkit-scrollbar {
  width: 8px;
}

.sidebarR-msg::-webkit-scrollbar-thumb {
  background-color: var(--lightgray);
  border-radius: 8px;
}

@media screen and (max-height: 450px) {
  .sidebarR a { font-size: 18px; }
}

/* Prevent back-to-top button from covering cart bottom */
.sidebarR-msg {
  padding-bottom: 80px; /* adjust if needed */
}

/*******************************************************
# Dashboard
*******************************************************/
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: var(--lightgray);
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.2s;
  font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: var(--blue);
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--lightgray);
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

.dashboard .filter.lw-filter-inline,
.dashboard .lw-card-titlebar .filter,
.dashboard .card-body > .d-flex > .filter,
.dashboard .card-body > .doc-upload-toolbar > .filter,
.dashboard .lw-action-bar .filter {
  position: static;
  top: auto;
  right: auto;
  margin-left: auto;
}

.dashboard .lw-card-titlebar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.dashboard .lw-card-titlebar .card-title {
  margin-bottom: 0;
}

.dashboard .filter.lw-filter-corner {
  position: absolute;
  top: 15px;
  right: 0;
}

.dashboard .filter.lw-filter-inline .icon,
.dashboard .lw-card-titlebar .filter .icon,
.dashboard .card-body > .d-flex > .filter .icon,
.dashboard .card-body > .doc-upload-toolbar > .filter .icon,
.dashboard .lw-action-bar .filter .icon {
  padding-right: 0;
}

@media (max-width: 576px) {
  .info-card .card-body .d-flex.align-items-center {
    flex-wrap: nowrap;
  }

  .info-card .card-body .card-icon {
    margin-bottom: 0;
  }
}

.info-card .card-body .d-flex.align-items-center {
  flex-wrap: nowrap;
}

.dashboard .info-card {
  min-height: 100px;
  height: auto;
}

.info-card .card-body {
  padding: 10px 20px 10px 20px;
}

.dashboard .info-card .card-title {
  padding: 0px 0px 0px 0px;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  font-family: "Poppins", sans-serif;
}

.dashboard .card-icon {
  font-size: 24px;
  line-height: 0;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  flex-grow: 0;
}

.dashboard .sales-card .card-icon {
  color: var(--blue);
  background: #D5EEFF;
}

.dashboard .revenue-card .card-icon {
  color: #2eca6a;
  background: #E5F6EC;
}

.dashboard .customers-card .card-icon {
  color: #ff771d;
  background: #FFF2E9;
}

.dashboard .activity {
  font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
  color: var(--gray);
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid var(--white);
  flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

.dashboard .news .post-item + .post-item {
  margin-top: 15px;
}

.dashboard .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.dashboard .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dashboard .news h4 a {
  color: var(--royalblue);
  transition: 0.2s;
}

.dashboard .news h4 a:hover {
  color: var(--blue);
}

.dashboard .news p {
  font-size: 14px;
  color: var(--darkgray);
  margin-left: 95px;
}

.dashboard .recent-sales {
  font-size: 14px;
}

.dashboard .recent-sales .table thead {
  background: var(--white);
}

.dashboard .recent-sales .table thead th {
  border: 0;
}

.dashboard .recent-sales .dataTable-top {
  padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
  padding: 10px 0 0 0;
}

.dashboard .top-selling {
  font-size: 14px;
}

.dashboard .top-selling .table thead {
  background: var(--white);
}

.dashboard .top-selling .table thead th {
  border: 0;
}

.dashboard .top-selling .table tbody td {
  vertical-align: middle;
}

.dashboard .top-selling img {
  border-radius: 5px;
  max-width: 60px;
}

/*******************************************************
# Table Icons
*******************************************************/
.primaryicon {
  font-size: 16px;
  font-weight: 200;
  color: var(--primary);
}

/*******************************************************
# Icons list page
*******************************************************/
.iconslist {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  padding-top: 15px;
}

.iconslist .icon {
  background-color: var(--white);
  border-radius: 0.25rem;
  text-align: center;
  color: var(--royalblue);
  padding: 15px 0;
}

.iconslist i {
  margin: 0.25rem;
  font-size: 2.5rem;
}

.iconslist .label {
  font-family: var(--bs-font-monospace);
  display: inline-block;
  width: 100%;
  overflow: hidden;
  padding: 0.25rem;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
}

/*******************************************************
# Profie Page
*******************************************************/
.profile .profile-card img {
  max-width: 120px;
}

.profile .profile-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--darkblue);
  margin: 10px 0 0 0;
}

.profile .profile-card h3 {
  font-size: 18px;
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.2s;
}

.profile .profile-card .social-links a:hover {
  color: var(--royalblue);
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: var(--royalblue);
}

.profile .profile-overview .label {
  font-weight: 400;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
  font-weight: 400;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
  max-width: 120px;
}

/*******************************************************
# F.A.Q Page
*******************************************************/
.faq .basic h6 {
  font-size: 18px;
  font-weight: 400;
  color: var(--blue);
}

.faq .basic p {
  color: #6980aa;
}

/*******************************************************
# Error 404
*******************************************************/
.error-404 {
  padding: 30px;
}

.error-404 h1 {
  font-size: 180px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0;
  line-height: 150px;
}

.error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--royalblue);
  margin-bottom: 30px;
}

.error-404 .btn {
  background: var(--darkblue);
  color: var(--white);
  padding: 8px 30px;
}

.error-404 .btn:hover {
  background: var(--darkblue);
}

@media (min-width: 992px) {
  .error-404 img {
    max-width: 50%;
  }
}

/*******************************************************
# Footer
*******************************************************/
.footer {
  bottom: 0;
  padding: 20px 0;
  font-size: 14px;
  transition: all 0.2s;
  border-top: 1px solid var(--lightblue);
}

.footer .copyright {
  text-align: center;
  color: var(--royalblue);
}

.footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: var(--royalblue);
}

/*******************************************************
# Alert
*******************************************************/
.alertButtons {
  position: relative;
  bottom: 0px;
  justify-content: space-between;
}

.alertHeader {
  text-align: left;
  font-size: 20px;
  color: var(--secondary);
  margin-bottom: 10px;
}

.alertMessage {
  text-align: left;
  font-size: 13px;
  color: var(--black);
  /* No fixed height — the message div sizes to its content so a
     one-line alert doesn't blow up into a 200px block. Long messages
     still wrap naturally and the modal grows. */
  max-height: 60vh;
  overflow-y: auto;
}

/*******************************************************
# Unified modal theming (Bootstrap-based)
*******************************************************/
.lw-modal .modal-content {
  border-radius: 0.5rem;
  border: 1px solid var(--primary);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

.lw-modal-sm .modal-dialog {
  max-width: 420px;
}

.lw-modal-md .modal-dialog {
  max-width: 800px;
}

.modal-dialog-image {
  max-width: 600px;
  width: auto !important;
  margin: 1.75rem auto;
}

#imageModal .modal-content {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
}

#popupimage {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.lw-modal-close {
  font-size: 1.5rem;
  cursor: pointer;
}

/*******************************************************
# Email Modal (custom overlay type)
*******************************************************/
.email-modal {
  display: none;
  position: fixed;
  z-index: 950;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255,255,255,.75);
}

.email-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid var(--primary);
  width: 800px;
  height: 670px;
}

/*******************************************************
# Input Modal (custom overlay type)
*******************************************************/
.input-modal {
  display: none;
  position: fixed;
  z-index: 897;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(108,207,247,.5);
}

.input-modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid var(--primary);
  width: 400px;
  height: 350px;
}

.input-modal-content img {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.inputmodalButtons {
  position: relative;
  bottom: 0px;
  justify-content: space-between;
}

.inputHeader {
  text-align: left;
  font-size: 20px;
  color: var(--primary);
}

.inputMessage {
  text-align: left;
  font-size: 13px;
  color: var(--black);
  height: 200px;
}

/*******************************************************
# Image styles
*******************************************************/
.vehimage {
  object-fit: contain;
}

.left-aligned {
  text-align: left;
}

.right-aligned {
  text-align: right;
}

.center-aligned {
  text-align: center;
}

.image-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,.5);
  overflow: auto;
}

.image-modal-content {
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 6px;
  box-sizing: border-box;
  padding: 20px;
  width: 50vw;
  min-height: 50vw;
  max-height: 75vh;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal-content img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;
}

/*******************************************************
# Floating Labels (compact + aligned + clean chip)
*******************************************************/
.form-floating.form-floating-sm > .form-control,
.form-floating.form-floating-sm > .form-select,
.form-floating.form-floating-sm > textarea.form-control {
  height: 2.4rem !important;
  min-height: 2.4rem !important;
  padding: 0.35rem 0.65rem !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
}

.form-floating.form-floating-sm > textarea.form-control {
  min-height: 5rem !important;
  height: auto !important;
  padding-top: 0.85rem !important;
}

.form-floating.form-floating-sm > label {
  position: absolute;
  left: 0.5rem;
  top: 0.45rem;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.65rem 0 !important;
  margin-bottom: 0 !important;
  background-color: #fff !important;
  transition: all 0.12s ease-in-out;
  pointer-events: none;
  z-index: 5;
}

.form-floating.form-floating-sm > input.form-control ~ label,
.form-floating.form-floating-sm > .form-select ~ label {
  top: 0.25rem !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

.form-floating.form-floating-sm > textarea.form-control ~ label {
  top: 0.3rem !important;
  padding-top: 0.1rem !important;
  line-height: 1.1 !important;
}

.form-floating.form-floating-sm > .form-control:focus ~ label,
.form-floating.form-floating-sm > .form-control:not(:placeholder-shown) ~ label,
.form-floating.form-floating-sm > textarea.form-control:focus ~ label,
.form-floating.form-floating-sm > textarea.form-control:not(:placeholder-shown) ~ label,
.form-floating.form-floating-sm > .form-select:focus ~ label,
.form-floating.form-floating-sm > .form-select:valid ~ label {
  font-size: 0.7rem !important;
  background-color: #fff !important;
  height: auto !important;
  padding: 0 0.4rem !important;
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
  border-radius: 0.25rem;
  transform: scale(0.95) translateY(-0.6rem) translateX(0.15rem) !important;
  opacity: 0.95;
}

.form-floating.form-floating-sm > .form-select ~ label {
  top: 0.22rem !important;
  padding-top: 0.06rem !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

.form-floating.form-floating-sm > .form-select:focus ~ label,
.form-floating.form-floating-sm > .form-select:valid ~ label {
  transform: scale(0.95) translateY(-0.5rem) translateX(0.15rem) !important;
  padding: 0 0.4rem !important;
  line-height: 1 !important;
}

.form-floating.form-floating-sm > .form-select {
  padding-right: 2rem !important;
}

.form-floating.form-floating-sm > .form-control:placeholder-shown:not(:focus) ~ label,
.form-floating.form-floating-sm > textarea.form-control:placeholder-shown:not(:focus) ~ label {
  background: transparent !important;
  padding-bottom: 0 !important;
  height: 1rem !important;
  line-height: 1 !important;
  opacity: 0.9;
}

.form-floating.form-floating-sm > .form-control:focus ~ label,
.form-floating.form-floating-sm > textarea.form-control:focus ~ label,
.form-floating.form-floating-sm > .form-select:focus ~ label {
  background-color: #fff !important;
  padding: 0 0.4rem !important;
  border-radius: 0.25rem;
  opacity: 1 !important;
}

.form-floating.form-floating-sm {
  overflow: visible;
}

.custom-floating {
  position: relative;
}

.custom-floating label {
  position: absolute;
  top: -0.6rem;
  left: 0.75rem;
  font-size: 0.85rem;
  color: #6c757d;
  background: white;
  padding: 0 4px;
}

.form-floating .input-locked,
.input-locked {
  pointer-events: none;
  background-color: #fff !important;
  color: #6c757d !important;
  border-color: #d0d7dd !important;
  cursor: default !important;
}

.form-floating .input-locked:focus,
.input-locked:focus {
  outline: none !important;
  box-shadow: none !important;
}

.form-floating .input-locked:placeholder-shown + label {
  transform: none !important;
  background: transparent !important;
  padding: 0.35rem 0.65rem 0 !important;
  opacity: 0.9 !important;
}

.form-floating .input-locked:not(:placeholder-shown) + label {
  background-color: #fff !important;
  opacity: .65 !important;
  padding: 0 .35rem !important;
  transform: scale(.85) translateY(-0.7rem) translateX(.15rem) !important;
}

.form-floating.form-floating-sm > .form-select:focus ~ label,
.form-floating.form-floating-sm > .form-select:valid ~ label {
  transform: scale(0.95) translateY(-0.75rem) translateX(0.15rem) !important;
}

.form-floating textarea.input-locked {
  resize: none;
  min-height: calc(3.5rem + 2px);
}

.readonly-ui {
  pointer-events: none;
  opacity: 0.7;
  color: #6c757d !important;
}

table tbody tr.row-deleted td {
  color: #6c757d !important;
  opacity: 0.75;
  text-decoration: line-through;
}

#tblQuoteLines input {
  border: none;
  background: transparent;
  padding: 0;
  text-align: right;
}

.th-clickable {
  cursor: pointer;
}

.th-clickable:hover {
  background-color: rgba(13,110,253,0.08);
  color: #0d6efd;
}

.searchcrit-select {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  height: calc(1.5em + 0.5rem + 2px);
  border-radius: 0.375rem;
}

.searchcrit-select.no-chevron {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-right: 0.5rem !important;
}

/*******************************************************
# Mobile action bars
*******************************************************/
.lw-action-bar {
  width: 100%;
  overflow: hidden;
  min-width: 0;
}

.lw-action-bar.flex-nowrap {
  flex-wrap: nowrap !important;
}

.lw-action-bar > .btn,
.lw-action-bar > a.btn,
.lw-action-bar > input.btn,
.doc-upload-toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.lw-action-bar > .btn i,
.lw-action-bar > a.btn i,
.lw-action-bar > input.btn i,
.doc-upload-toolbar .btn i {
  line-height: 1;
}

.lw-action-bar .filter {
  flex: 0 0 auto;
  margin-left: auto;
}

.lw-action-bar .filter .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.lw-overflow-wrap .dropdown-menu {
  min-width: 13rem;
}

.doc-upload-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.doc-upload-toolbar .form-control,
.doc-upload-toolbar .btn {
  height: calc(1.5em + .5rem + 2px);
}

.doc-upload-toolbar .form-control {
  min-width: 15rem;
}

.lw-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.lw-table-scroll table {
  min-width: 100%;
}

#tblQuoteLines td.package,
#tblQuoteLines th.package {
  min-width: 32px;
}

/*******************************************************
# Global DataTables horizontal scrolling inside cards
*******************************************************/
.card .dt-container,
.card .dataTables_wrapper,
.card .dataTables_scroll,
.card .dataTables_scrollHead,
.card .dataTables_scrollBody,
.card .dataTables_scrollFoot,
.lw-table-scroll {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.card .dataTables_scrollBody,
.lw-table-scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

.card .dt-container,
.card .dataTables_wrapper,
.card .dataTables_scroll,
.card .dataTables_scrollHead,
.card .dataTables_scrollFoot {
  overflow: hidden !important;
}

.card .dataTables_scrollHead table.dataTable,
.card .dataTables_scrollBody table.dataTable,
.card .dataTables_scrollFoot table.dataTable {
  width: max-content !important;
  min-width: 100% !important;
  margin: 0 !important;
}

.card .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.card .table-responsive > .table,
.card .table-responsive > table {
  width: max-content;
  min-width: 100%;
  margin-bottom: 0;
}

.card table.dataTable th,
.card table.dataTable td,
.card .table th,
.card .table td {
  white-space: nowrap;
}

.card table.dataTable th.text-wrap,
.card table.dataTable td.text-wrap,
.card .table th.text-wrap,
.card .table td.text-wrap {
  white-space: normal !important;
}

.card,
.card-body,
.tab-content,
.tab-pane,
.row > [class*="col-"] {
  min-width: 0;
}

/*******************************************************
# Responsive layout tweaks
*******************************************************/
@media (max-width: 1199.98px) {
  .lw-action-bar {
    row-gap: .5rem;
  }

  .doc-upload-toolbar {
    width: 100%;
  }

  .doc-upload-toolbar .form-control {
    min-width: 0;
    width: 100%;
  }

  #header {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  #header .header-left {
    min-width: 0;
    flex: 1 1 auto;
    gap: .35rem;
  }

  #header .logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  #hdrlogo.hdr-logo {
    display: block !important;
    max-height: 32px !important;
    max-width: 96px !important;
  }

  #companyname {
    display: inline-block !important;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
  }

  .header-nav .nav-profile {
    min-width: 2rem;
  }
}

@media (max-width: 1199px) {
  #mainContainer,
  #footer {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 767.98px) {
  #main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .card .card-body {
    min-width: 0;
  }

  #tblQuoteLines tbody td,
  #tblQuoteLines tfoot th,
  .card table.dataTable td,
  .card table.dataTable th {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  /* Hide the useless responsive arrow globally on mobile */
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    display: none !important;
    content: none !important;
  }

  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    padding-left: 0.5rem !important;
  }

  /* =========================================
     Store selector mobile sizing
  ========================================= */
  #storesel {
    min-width: 280px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #storesel.dropdown-menu .dropdown-item {
    padding: 12px 14px !important;
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }

  #storesel .d-flex.align-items-center.w-100 {
    min-height: 48px;
  }

  #storesel .image-container {
    width: 56px !important;
    min-width: 56px !important;
    margin-right: 12px !important;
  }

  #storesel .image-container img {
    max-height: 36px !important;
    width: 100% !important;
    object-fit: contain;
  }

  #storesel .ms-2 {
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.2;
  }
}

.lw-btn-mode-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.lw-btn-mode-slot > .btn,
.lw-btn-mode-slot > button,
.lw-btn-mode-slot > a.btn {
  flex: 0 0 auto;
}

body.sidebar-right-open #mainContainer,
body.sidebar-right-open #footer {
  margin-right: var(--lw-rightbar-width, 0px);
}

.lw-dt-export-menu {
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
}

.lw-dt-export-toggle {
  line-height: 1;
}

.lw-dt-export-actions {
  display: none !important;
}

.lw-dt-export-menu .dt-button-collection,
.lw-dt-export-menu .dropdown-menu {
  min-width: 13rem;
}

.lw-dt-export-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lightgray) !important;
  text-decoration: none !important;
}

.lw-dt-export-toggle:hover,
.lw-dt-export-toggle:focus,
.lw-dt-export-toggle.active,
.lw-dt-export-toggle.show {
  color: var(--blue) !important;
}

.lw-click-icon-trigger {
  transition: color .2s ease, opacity .2s ease;
}

.lw-click-icon-trigger i.bi,
.lw-click-icon-trigger.bi,
.lw-click-icon-trigger.copy-title {
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.lw-click-icon-trigger:hover i.bi,
.lw-click-icon-trigger:focus i.bi,
.lw-click-icon-trigger.is-hover i.bi,
.lw-click-icon-trigger:hover.bi,
.lw-click-icon-trigger:focus.bi,
.lw-click-icon-trigger.is-hover.bi,
.lw-click-icon-trigger:hover.copy-title,
.lw-click-icon-trigger:focus.copy-title,
.lw-click-icon-trigger.is-hover.copy-title {
  color: var(--blue);
  opacity: 1;
}

button.lw-click-icon-trigger,
a.lw-click-icon-trigger,
.copy-title.lw-click-icon-trigger {
  cursor: pointer;
}

#tblPartId.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
#tblPartId.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
#tblPackageId.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
#tblPackageId.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  display: none !important;
  content: none !important;
}

#tblPartId {
	table-layout: fixed;
}

#tblPartId td:nth-child(3),
#tblPartId th:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tblPartId td:nth-child(8),
#tblPartId th:nth-child(8) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#prtimage {
  /* Cap height so portrait shots don't stretch the top row taller than
     the part-info card next to it. Landscape was already width-limited
     by the parent card, so this cap mostly affects portrait images. */
  max-height: 220px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.searchcrit-select {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  height: calc(1.5em + 0.5rem + 2px);
  border-radius: 0.375rem;
}

.searchcrit-select.no-chevron {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-right: 0.5rem !important;
}

/*******************************************************
# Fog Overlay
*******************************************************/
.module-fog {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(3px);
  z-index: 500;
  display: block;
  pointer-events: all;
}

.module-fog .fog-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: 420px;
  background: #fff;
  border-radius: 10px;
  padding: 20px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.module-fog .spinner-border {
  width: 2rem;
  height: 2rem;
  margin: 0 auto 2px auto;
  flex: 0 0 auto;
}

.fog-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fog-title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  color: var(--secondary);
}

.fog-subtitle {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  color: var(--primary);
}
/* Personal-info inputs are switched to type="search" in
   disableBrowserAutofill() to defeat Edge's address-autofill classifier.
   Suppress the search clear-X button and the iOS-style appearance so the
   field renders visually identical to the original type="text" input. */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Part Detail — 5-slot image thumb strip below the hero image.
   Empty slots show a "+" placeholder; click to upload a new image
   for that slot. Populated slots show a thumbnail; click to make
   it the hero. The active hero gets a primary-color accent. */
#prtthumbs .prtthumb {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8f9fa;
  transition: border-color .15s ease, transform .1s ease;
  min-width: 0;
}
#prtthumbs .prtthumb:hover {
  border-color: #adb5bd;
}
#prtthumbs .prtthumb-active {
  border-color: #0d6efd;
  border-width: 2px;
}
#prtthumbs .prtthumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#prtthumbs .prtthumb-empty {
  color: #adb5bd;
  font-size: 1.1rem;
}
#prtthumbs .prtthumb-empty:hover {
  color: #6c757d;
  background: #ffffff;
}