:root {
  --font-xs: 0.72rem;   /* Very small labels */
  --font-sm: 0.78rem;   /* Small text */
  --font-md: 0.84rem;   /* Normal UI content */
  --font-base: 0.875rem;/* Base font size (14px) */
  --font-lg: 1rem;      /* Large text, headings */
  --font-xl: 1.25rem;   /* Extra large, titles */
}
/* 
.font-xs { font-size: var(--font-xs); }
.font-sm { font-size: var(--font-sm); }
.font-md { font-size: var(--font-md); }
.font-lg { font-size: var(--font-lg); }
.font-xl { font-size: var(--font-xl); } */

/* Font sizing based on your system */
.font-xs { font-size: var(--font-xs); }
.font-sm { font-size: var(--font-sm); }
.font-md { font-size: var(--font-md); }
.font-base { font-size: var(--font-base); }
.font-lg { font-size: var(--font-lg); }
.font-xl { font-size: var(--font-xl); }

/* Compact line height */
.lh-tight { line-height: 1.25; }

/* Text appearance helpers */
.text-soft { color: #666; } /* Between default and muted */
.ui-label { font-size: var(--font-sm); color: var(--bs-gray-600); }

/* Optional spacing tweaks */
.mt-05 { margin-top: 0.25rem; }
.mb-05 { margin-bottom: 0.25rem; }

.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
  font-size: unset !important;
}

.text-soft {
  color: rgba(0, 0, 0, 0.65); /* adjust alpha as needed */
}
body.dark-mode .text-soft {
  color: rgba(255, 255, 255, 0.7);
}

a, .pointer {
  cursor: pointer;
}

/* --- 

 ____   ___   ___ _____ ____ _____ ____      _    ____  
| __ ) / _ \ / _ \_   _/ ___|_   _|  _ \    / \  |  _ \ 
|  _ \| | | | | | || | \___ \ | | | |_) |  / _ \ | |_) |
| |_) | |_| | |_| || |  ___) || | |  _ <  / ___ \|  __/ 
|____/ \___/ \___/ |_| |____/ |_| |_| \_\/_/   \_\_|    

--- */

:root {
  --primary-color: #3A5874;
  --light-color: #f3f3f3;
  --light-red: #ffe2e1;
  --dark-mode-primary: #121212;
  --dark-mode-secondary: rgb(36, 36, 36);
  --dark-mode-text: #ffffff;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.nav-arrow {
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}
.nav-arrow:hover {
    opacity: 1;
    color: #0d6efd; /* or your link color */
}

.nav-item {
  margin-left: 10px;
  font-size: var(--font-sm);
  display: inline-block;
}

.nav-item:hover {
  text-decoration: underline;
  cursor: pointer;
}

.nav-item input[type=submit] {
  border: none;
  background-color: transparent;
  padding: 0;
}

.nav-link input[type=submit] {
  color: white;
  cursor: pointer
}

.nav-link input[type=submit]:hover {
  text-decoration: underline;
}

.form-group label {
  font-size: 90%;
  padding-left: 5px;
  margin-bottom: 1px;
}

.modal-table {
  font-size: 10.5pt;
  table-layout: fixed;       /* Honor the %-width columns; stops long
                                unbreakable content from blowing out the table */
  width: 100%;
}

/* Ensure every cell in the fixed-layout email table can break long
   unbroken tokens (base64 image blobs, [cid:...] refs) instead of stretching */
.modal-table td,
.modal-table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

btn {
  z-index: 1;
}

html.dark-mode, body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
  min-height: 100vh; /* make sure body covers full viewport */
}

html.dark-mode article,
html.dark-mode main,
html.dark-mode .container,
html.dark-mode .content-area {
  background-color: transparent;
}

html.dark-mode .static-header-table,
html.dark-mode .table-search-area,
html.dark-mode main {
  background-color: #121212; /* Or your preferred dark surface color */
}


/* --- 

 _____ ___  _   _ _____ ____  
|  ___/ _ \| \ | |_   _/ ___| 
| |_ | | | |  \| | | | \___ \ 
|  _|| |_| | |\  | | |  ___) |
|_|   \___/|_| \_| |_| |____/ 

--- */
@font-face {
  font-family: manrope;
  src: url("Fonts/Manrope/Manrope-VariableFont_wght.ttf");
}


/* --- 

 _   _ _   _ _____     _______ ____  ____    _    _     
| | | | \ | |_ _\ \   / / ____|  _ \/ ___|  / \  | |    
| | | |  \| || | \ \ / /|  _| | |_) \___ \ / _ \ | |    
| |_| | |\  || |  \ V / | |___|  _ < ___) / ___ \| |___ 
 \___/|_| \_|___|  \_/  |_____|_| \_\____/_/   \_\_____|

--- */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.hidden {
  visibility: hidden;
}

.hide-scroll::-webkit-scrollbar {
  visibility: hidden;
}

.hide-scroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 1.1s linear infinite;
  position: fixed;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  z-index: 100000000;
}

.bold {
  font-weight: bold;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

html,
body {
  height: 100%;
}

body {
  font-family: manrope;
  overflow-x: hidden;
}

article {
  display: flex;
  min-height: 100%;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}

main {
  flex-grow: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  vertical-align: top;
  padding: 5px;
}

.header-buffer {
  width: 100%;
  height: 58px;
}

.header-buffer,
main,
footer {
  flex-shrink: 0;
  z-index: 2;
}

#content::after {
  content: "";
  display: block;
}

.static-top {
  width: 100%;
  position: fixed;
  background-color: white;
  z-index: 2;
  left: 0;
  right: 0;
}

.static-top-content {
  padding: 10px;
}


.full-table-header {}

.full-table-header th {
  background-color: var(--primary-color);
  color: white;
}

.full-table-header th input[type=submit] {
  color: white;
  font-weight: bold;
  padding: 0px;
  background-color: transparent;
  border: none;
}

/* .full-table .main-row:nth-child(4n + 1) {
    background-color: var(--light-color);
} */

.full-table .main-row td {
  border-bottom: 1px solid rgb(223, 216, 216);
}

.inner-client-table th {
  background-color: var(--light-color);
}

.inner-client-table td {
  border-bottom: 1px solid var(--light-color);
}

.text-divider {
  --text-divider-gap: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
}


.mini-alert {
  position: fixed;
  bottom: 60px;
  right: 30px;
  border-radius: 12px;
  background: #fff;
  padding: 20px 35px 20px 25px;
  overflow: hidden;
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
  z-index: 10000;
}

.mini-alert.active {
  transform: translateX(0%);
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.6);
}

.mini-alert .mini-alert-content {
  display: flex;
  align-items: center;
}

.mini-alert-content .check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: #4070f4;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.mini-alert-content .message {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.message .text {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}

.message .text.text-1 {
  font-weight: 600;
  color: #333;
}

.mini-alert .close {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
}

.mini-alert .close:hover {
  opacity: 1;
}

.mini-alert .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

}

.mini-alert .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #4070f4;
}

.progress.active:before {
  animation: progress 5s linear forwards;
}

.inherit-icon {
  height: 18px;
  margin-left: 3px;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

@media (min-width: 992px){
	.dropdown-menu .dropdown-toggle:after{
		border-top: .3em solid transparent;
	    border-right: 0;
	    border-bottom: .3em solid transparent;
	    border-left: .3em solid;
	}
	.dropdown-menu .dropdown-menu{
		margin-left:0; margin-right: 0;
	}
	.dropdown-menu li{
		position: relative;
	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}

span.circle {
  background: #e3e3e3;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #6e6e6e;
  display: inline-block;
  font-weight: bold;
  line-height: 35px;
  margin-right: 5px;
  text-align: center;
  width: 35px;
}
.exp-sched-hours {
  flex: 0 0 154px;
}

.exp-notes-arrow-top,
.exp-notes-arrow {
  width: 18px;
  cursor: pointer;
}

.call-notes-div {
  height: 23px;
  overflow-y: hidden;
  word-wrap: break-word;
  overflow-wrap: anywhere;   /* Break long unbroken strings (base64, cid:) */
  word-break: break-word;    /* Fallback for older WebKit */
  width: 100%;            /* Fills the full cell */
  max-width: none;        /* Remove restriction */
  display: block;         /* Makes width 100% work reliably */
}


.exp-func-icon {
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: -3px;
}

.exp-favorites-list {
  display: inline-block;
}

.exp-tabs-table {
  table-layout: fixed;
  margin: 8px 4px 0 8px;
}

.exp-tabs-table td {
  text-align: center;
  vertical-align: middle;
  font-size: 10pt;
  cursor: pointer;
  padding: 3px;
  background-color: #282828;
  color: white;
  border: 1px solid white;
  border-top: 1px solid #282828;
  position: relative;
}

#exp-record-types-table-expanded {
  margin-top: 15px;
  font-size: 10.5pt;
}

#exp-record-types-table-expanded td {
  vertical-align: top;
}

.font-weight-semibold {
  font-weight: 600;
}

.no-inner-borders,
.no-inner-borders td,
.no-inner-borders th,
.no-inner-borders tr {
  border: none !important;
}

.italic {
  font-style: italic;
}

.hover-bg:hover {
  background-color: #f8f9fa;
}

.autocomplete-dropdown div.active {
  background-color: #007bff;
  color: white;
}

.truncate {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

td.min-padding {
  padding: 3px !important;
}

.truncate-block {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* or inline-block */
  width: 100%;
}

.truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em; /* roughly 2 lines depending on line-height */
  line-height: 1.5em;
}

.truncate-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* roughly 2 lines depending on line-height */
  line-height: 1.5em;
}

.truncate-2-lines-td {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* This is key */
  line-height: 1.5em;
  max-height: 4em; /* 2 lines * line-height */
  white-space: normal; /* allow wrapping */
}


.exp-tabs-table td:hover {
  opacity: 0.65;
  transition: all 0.4s;
}

.exp-tabs-table .active-tab {
  font-weight: bold;
  color: black;
  background-color: white;
  border-left: 1px solid #282828;
  border-right: 1px solid #282828;
}

.exp-tabs-table .inactive-tab {
  
}

.exp-right-content {
  overflow-y: auto;
}

.exp-worksheet-table-sm {
  font-size: 11pt;
}

.exp-worksheet-table-sm th {}

.exp-worksheet-table-sm-2 {
  font-size: 11pt;
}

.exp-worksheet-table-sm-2 th {
  border-bottom: 1px solid gray;
}

.exp-worksheet-table-sm-2 td {
  border-bottom: 1px dotted #e3e3e3;
}

.exp-worksheet-dynamic {
  display: block;
  height: 430px;
  overflow-y: auto;
}

/* .nicEdit-main {
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  background: #fff;
} */



.exp-overview-section .input-group {
  margin-top: -3px !important;
}

.exp-overview-section .input-group-text,
.exp-overview-section input[type=text],
.exp-overview-section input[type=date],
.exp-overview-section select {
  border-radius: 0px !important;
  height: 30px !important;
}

/* LPS-10302: value cell for a switch inside an exp-overview-section row (the Canceled toggle). The rule
   above pins sibling value cells to 30px, but it only matches input/select -- a div.form-control wrapping
   a Bootstrap switch escapes it, and Bootstrap gives .custom-control a 1.5rem min-height, which rendered
   the Canceled row at 34px and left its value cell overhanging its own 30px label cell. This pins the cell
   to the same 30px the siblings use and neutralizes those metrics HERE ONLY (scoped to this class inside
   this section), so every other custom-switch in the app is left exactly as it was. */
.exp-overview-section .exp-overview-toggle {
  border-radius: 0px !important;
  height: 30px !important;
  padding: 0 8px;
  display: flex;
  align-items: center;
}

.exp-overview-section .exp-overview-toggle .custom-control {
  min-height: 0;
  margin-bottom: 0;
}

.exp-overview-section textarea {
  border-radius: 0px !important;
  height: 60px;
}

.exp-overview-section .input-group-text:first-of-type {
  border-top-left-radius: 3px !important;
}

.exp-overview-section .exp-overview-filler {
  margin: 2px;
  background-color: #e9ecef;
  width: 100%;
  border: 1px solid #ced4da;
  border-top: none;
  margin-top: -2px;
}


.smaller-fonts {
  font-size: 10.5pt;
}

.smaller-fonts button {
  font-size: 10pt;
  padding-top: 2px;
  padding-bottom: 2px;
}

.smaller-fonts input,
.smaller-fonts select {
  font-size: 9pt !important;
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 1;
  height: 27px;
  color: black;
}

/* ORDER PAGE */

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-darken:hover {
  transition: 0.5s;
  opacity: 0.8;
  cursor: pointer;
}

.order-form-area {
  width: 700px;
  margin-left: calc(50% - 350px);
  margin-top: 30px;
  background-color: rgb(248, 248, 248);
  border: 1px solid gray;
  padding: 20px;
  border-radius: 20px;
}

.order-form-divider {
  margin-bottom: 8px;
  font-weight: bold;
}

.order-party-check-table {
  border-top: 1px solid rgb(202, 202, 202);
  border-bottom: 1px solid rgb(202, 202, 202);
  margin: 5px 0;
}

.order-party-check-table tr:first-child td:nth-child(1) {
  width: 150px;
}

.order-party-check-table tr:first-child td:nth-child(2) {
  width: 80px;
}

.order-party-roles-table tr:first-child td:nth-child(1) {
  width: 133px;
}

.order-party-roles-table tr:first-child td:nth-child(2) {
  width: 65px;
}

.order-party-check-table td {
  padding: 3px;
}

.party-view-icon {
  width: 40px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.order-center-container {
  width: 600px;
  margin-left: calc(50% - 300px);
}

.report-setup-prepend {
  width: 165px;
}

.order-field-prepend {
  width: 200px;
}

.client-foca-prepend {
  width: 165px;
}

.settings-field-prepend {
  width: 200px;
}

.record-types-table {
  table-layout: fixed;
}

.hide {
  display: none;
}

/* ZR-10199: collapse for the OE Send To location rows. Kept separate from .hide on purpose -- the Send To
   checkbox already owns .hide on those same rows, so the two toggles must not share a class. */
.oe-send-collapsed {
  display: none;
}

.oe-send-collapse-chevron {
  width: 11px;
  margin-right: 5px;
  vertical-align: middle;
}

.light-gray {
  background: #f1f1f1;
}

.hover-effect {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.hover-effect:hover {
  opacity: 0.90;
  cursor: pointer;
}

tr.collapsing,
tr.expanding {
  transition: all 0.3s ease;
  overflow: hidden;
}

tr.collapsing {
  height: 0;
  opacity: 0;
}

tr.expanding {
  height: auto;
  opacity: 1;
}

.modal-scrolling-body {
  height: 400px;
  overflow: auto;
}

.modal-scrolling-body-lg {
  height: 550px;
  overflow: auto;
}

.dropzone-find {
}
/* Base box */
.manual-dropzone {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 80px;
  min-height: 80px;
  padding: 8px 12px;
  border: 2px dashed #c7c7c7;
  border-radius: 8px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Drag hover feedback */
.manual-dropzone.dz-drag-hover {
  background: #f5f3ff;
  border-color: #7c3aed;
}

/* Message text */
.manual-dropzone .dz-message {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Hide label while uploading */
.manual-dropzone.dz-started .dz-message {
  display: none;
}

/* Preview layout */
.manual-dropzone .dz-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 8px;
}

/* Thumbnail size */
.manual-dropzone .dz-image {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
}

/* Details: filename + size */
.manual-dropzone .dz-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.manual-dropzone .dz-filename {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual-dropzone .dz-size {
  font-size: 12px;
  color: #555;
}

/* Progress bar */
.manual-dropzone .dz-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.manual-dropzone .dz-upload {
  background: #4f46e5;
  height: 100%;
  transition: width 0.2s ease;
}

/* Hide giant success/error marks */
.manual-dropzone .dz-success-mark,
.manual-dropzone .dz-error-mark {
  display: none !important;
}


.dz-button {
  border: none;
  background-color: transparent;
}

.review-order-table-container {
  width: 600px;
  margin-left: calc(50% - 300px);
  margin-top: 20px;
  margin-bottom: 20px;
}

.review-order-table {
  width: 100%;
  border: 1px solid rgb(196, 196, 196);
  margin: 20px 0;
  font-size: 90%;

}

.review-order-table th {
  background-color: aliceblue;
  text-align: center;
  border-bottom: 1px solid rgb(233, 233, 233);
  font-size: 110%;
}

.review-order-table td {
  border-bottom: 1px solid rgb(233, 233, 233);
  width: 50%;
}

.review-order-table tr td:first-of-type {
  font-weight: bold;
}

.review-order-table .loc-mini-header {
  background-color: rgb(243, 243, 243);
  text-align: center;
}

.acct-field-readonly {
  border: none;
  padding: 0;
}

.acct-field {
  width: 100%;
}

.accounts-page {
  width: 100%;
}

.accounts-page-left {
  width: 350px;
  padding: 20px;
  position: absolute;
  left: 0;
  top: 70px;
  height: 760px;
}

.accounts-list {
  position: absolute;
  top: 120px;
  max-height: 660px;
  overflow-y: auto;
  width: 310px;
}

.accounts-page-right {
  position: absolute;
  width: calc(100% - 350px);
  padding: 20px;
  top: 70px;
  left: 350px;
}

.account-card {
  height: 760px;
}

.account-card label {
  font-weight: normal;
}

.container {
  min-width: 100%;
}

.account-settings-fields-1 {
  width: 480px;
  border-right: 1px solid #e3e3e3;
  padding-right: 30px;
  position: absolute;
  top: 30px;
  left: 30px;
}

.account-settings-fields-2 {
  position: absolute;
  top: 0px;
  left: 540px;
  width: calc(100% - 580px);
}

.accounts-list-badge img {
  width: 21px;
}

.help-icon {
  width: 18px;
  cursor: help;
  margin-left: 5px;
}

.remove-x {
  width: 18px;
  cursor: pointer;
}



.bubble-btn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
}

.btn-xs {
  padding: 6px !important;
  line-height: 1.0 !important;
}

.billing-session-input {
  width: 95%;
}

.billing-session-input[readonly] {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-control[readonly] {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-control[readonly] {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-control[disabled] {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.scrubber {
  cursor: ns-resize;
  background-color: white;
  width: 40px;
}

.table-cell-form-group {
  margin-bottom: 2px !important;
}

.account-info-prepend {
  width: 185px;
}

.billing-main-info-prepend {
  width: 155px;
}

.billing-info-right td {
  padding-top: 3px;
  padding-bottom: 2px;
  line-height: 1.1;
}

.billing-info-right table tr:nth-child(odd) {
  background-color: aliceblue;
}

.home-calendar {
  table-layout: fixed;
}

.home-calendar th {
  text-align: center;
  border: 1px solid rgb(197, 197, 197);
}

.home-calendar td {
  height: 100px;
  border: 1px solid rgb(197, 197, 197);
  position: relative;

}

.home-calendar td:hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  transition: 0.75s;
}

.calendar-day-number {
  position: absolute;
  border-bottom: 1px solid rgb(197, 197, 197);
  border-right: 1px solid rgb(197, 197, 197);
  top: 0;
  left: 0;
  width: 40px;
  text-align: center;
  background-color: white;
}

.current-calendar-day {
  background: #e8f4ea;
}

.cursor-pointer {
  cursor: pointer;
}

.invisible {
  visibility: hidden;
}

.calendar-month-header {
  text-align: center;
  font-size: 120%;
}

.calendar-month-header a {
  margin: 0 15px;
  cursor: pointer;
}

.file-manager-dir {
  width: calc(100% - 80px);
  margin-left: 40px;
  margin-top: 8px;
  margin-bottom: -20px;
}

.file-manager-table {
  width: calc(100% - 80px);
  border: 1px solid rgb(197, 197, 197);
  margin: 0 40px;
  margin-top: -5px;
}

.file-manager-table th {
  padding: 6px 8px;
}

.file-manager-table td {
  padding: 6px 8px;
}

.file-manager-table th input[type=submit] {
  padding: 0;
  background-color: transparent;
  font-weight: bold;
  border: none;
}

.file-manager-folder {
  width: 18px;
}

.file-manager-dir-row:hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  transition: 0.5s;
}

.add-event-prepend {
  width: 100px;
}

.inline-table {
  table-layout: fixed;
  border-collapse: collapse;
}

.inline-table td {
  padding: 0;
}

.inline-table input[type=checkbox] {
  vertical-align: -2px;
}

.loc-field-prepend {
  width: 140px;
}

.ledger-transaction-prepend {
  width: 150px;
}

.w-120 {
  width: 120px;
}

.widths-row {
  padding: 0;
  border-bottom: none !important;
}

.link {
  color: #007bff !important;
  text-decoration: none;
  background-color: transparent;
}

.link:hover {
  cursor: pointer;
  opacity: 0.8;
}

.full-table-sm {
  font-size: 90%;
}

.full-table-xsm {
  font-size: 85%;
}

.xs-input {
  font-size: 10pt !important;
}

input[type=text].xs-input {
  padding: 3px;
  height: 28px;
}

input[type=number].xs-input {
  padding: 3px;
  height: 28px;
}

select.xs-input {
  padding: 3px;
  height: 28px;
}

.unstyled-select {
  background: transparent;
  border: none;
  font-size: 12px;
  color: #333;
  padding: 0;
  text-align: center;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Bigger, darker arrow */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23000' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 18px 18px;

  padding-right: 28px; /* leave room for big arrow */
  cursor: pointer;
}



.unstyled-select:focus {
  outline: none;
  border-bottom: 1px dashed #999;
}

/* Apply font-size to the entire group */
.input-group.xs-input {
  font-size: 10pt !important;
}

/* Adjust the padding/height of the text input */
.input-group.xs-input .form-control {
  padding: 3px !important;
  height: 28px !important;
  font-size: inherit;
}

/* Adjust the prepend text */
.input-group.xs-input .input-group-text {
  padding: 3px 6px !important;
  height: 28px !important;
  font-size: inherit;
}


.static-header-table .xs-input-td {
  padding: 5px;
}


.exp-tab {
  border: 1px solid gray;
}

.exp-tab-active {
  border-right: none;
  border: 1px solid gray;
  border-right: none !important;
  border-top: 1px solid gray !important;
  border-bottom: 1px solid gray !important;
  border-left: 1px solid gray !important;
  font-weight: bold;
}

.exp-tab-inactive {
  border: 1px solid rgba(0,0,0,.125);
}

#exp-panel-showing {
  width: 100%;
  height: calc(100vh - 560px);
  min-height: 385px;
  margin-top: 9px;
  padding: 2px 10px;
  overflow-y: hidden;
}

.exp-commands-table tr {
  border: 1px solid rgb(192, 192, 192);
}

#available-commands-area,
#exp-codes-area-right {
  height: 400px;
  overflow-y: auto;
}

.temp-highlighted-row {
  background-color: rgb(255, 255, 214);
}

.highlighted-row {
  background-color: rgb(255, 255, 214);
}

.prod-tank-static-top {
  padding: 40px 40px 0 40px;
}

.prod-tank-static-top table {
  table-layout: fixed;
}

.prod-tank-static-top table th {
  border-top: 2px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0;
}

.prod-tank-table-bottom {
  padding: 0 40px;
}

.prod-tank-table-bottom table {
  table-layout: fixed;
}

.prod-tank-table-bottom table input[type=checkbox] {
  transform: scale(1.2);
}

.prod-tank-mini-table th {
 background-color: #e3e3e3;
 border-top: 1px solid gray;
 border-bottom: 1px solid gray;
 padding: 8px 0;
}

.prod-tank-mini-table tr td {
  padding: 4px 0;
  border-bottom: 1px dashed #e3e3e3;
}

.prod-tank-mini-table tr:first-of-type td {
  padding: 0;
}

.prod-tank-table-bottom table:first-of-type tr:first-of-type th {
  border-top: none;
}

.billing-session-field {
  margin-bottom: 2px;
}

.pending-web-orders-table th,
.pending-web-orders-table td {
  vertical-align: middle;
}

.loc-serve-methods-table {
  font-size: 10pt;
}

#loc-serve-methods-table {
  font-size: 90%;
}

#loc-serve-methods-table th {
  font-weight: bold;
  text-align: center;
}

#loc-serve-methods-table td {
  font-weight: bold;
  text-align: center;
}

.exp-worksheet-right-fields {
  padding-top: 8px !important;
}

.exp-worksheet-right-fields .input-group {
  margin: -1px !important;
}

.exp-worksheet-right-fields button {
  height: 29.5px;
}

.exp-worksheet-right-fields .billing-main-info-prepend {
  height: 29.5px;
  border-radius: 0 !important;
}

.exp-worksheet-right-fields .custom-select {
  height: 29.5px;
  border-radius: 0 !important;
}

.exp-worksheet-right-fields input[type=date] {
  height: 29.5px;
  border-radius: 0 !important;
}

.exp-worksheet-right-fields input[type=text] {
  height: 29.5px;
  border-radius: 0 !important;
}

.oe-top-info {
  width: 100%;
  background-color: white;
  position: fixed;
  left: 20px;
  top: 55px;
  z-index: 3;
  /* height: 70px; */
}

.oe-top-info .info-div {
  width: calc(100% - 40px);
  border: 1px solid gray;
  background-color: white;
  padding: 10px 5px 10px 30px;
  position: fixed;
  left: 20px;
  top: 65px;
  border-radius: 5px;
  z-index: 3000000000 !important;
  height: auto;
}

.oe-top-info table {
  table-layout: fixed;
  font-weight: bold;
}

.oe-top-info table td {
  padding: 0;
}

.oe-top-orders {
  border-top: 1px solid #e3e3e3;
  margin-top: 10px;
}

.oe-top-orders table {
  margin-top: 10px;
  font-weight: normal;
}

.oe-top-orders table th,
.oe-top-orders table td {
  padding: 3px;
}

.oe-top-orders table td {
  border-bottom: 1px dashed #e3e3e3;
}

.oe-top-orders-series {
  border-top: 1px solid #e3e3e3;
  margin-top: 10px;
}

.oe-top-orders-series table {
  margin-top: 10px;
  font-weight: normal;
}

.oe-top-orders-series table th,
.oe-top-orders-series table td {
  padding: 3px;
}

.oe-top-orders-series table td {
  border-bottom: 1px dashed #e3e3e3;
}

.declaration-preview {
  margin: 15px;
  width: 680px;
  height: auto;
  border: 1px solid gray;
  padding: 15px 15px 0 15px;
  box-shadow: 10px 10px 5px lightblue;
  font-family:'Times New Roman', Times, serif;
  font-size: 9pt;
  line-height: 1.15;
}

.declaration-fields {
  width: calc(100% - 750px);
  position: absolute;
  top: 75px;
  right: 15px;
}

.no-overflow {
  overflow-y: hidden;
  width: 100%;
}

.data-box {
  display: inline-block;
  vertical-align: -2px;
  overflow-y: hidden;
  overflow-x: hidden;
  border-bottom: 1px solid black;
}

.signature-box {
  border-top: 1px solid black;
  text-align: center;
  margin-top: 30px;
  display: inline-block;
}

.tooltip-inner {
  text-align: left;
}

.single-order-only-var-warning {
  font-size: 80%;
  color: red;
  font-weight: bold;
}

.access-rights-table {
  table-layout: fixed;
  margin-top: 10px;
}

.access-rights-table .list-group-item {
  padding: 7px 7px 7px 14px;
  font-size: 10.5pt;
}

.access-rights-table label {
  margin-bottom: 0;
}

.access-rights-table .badge {
  padding: 4px 6px !important;
  font-size: 10.5pt !important;
}

.active-stepper {
  background-color: #007bff !important;
}

#ordering-page-content {
  width: 100%;
  position: absolute;
  top: 200px;
  height: calc(100% - 200px);
  overflow-y: auto;
  padding: 5px 20px 60px 20px;
}

/* Standard syntax */
::placeholder {
  color: #e3e3e3;
}

/* WebKit browsers */
::-webkit-input-placeholder {
  color: #e3e3e3;
}

/* Mozilla Firefox 19+ */
::-moz-placeholder {
  color: #e3e3e3;
}

/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
  color: #e3e3e3;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
  color: #e3e3e3;
}

.sticky-table .table-container {
  width: 100%;
  max-width: 600px;
  height: 300px; /* Adjust the height as needed */
  overflow-y: auto;
  border: 1px solid #ccc;
}

.sticky-table table {
  width: 100%;
  border-collapse: collapse;
}

.sticky-table thead {
  background-color: white;
  color: black;
  position: sticky;
  top: 0;
  z-index: 10;
}

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

.sticky-table th {
  border-bottom: 1px solid black;
}

.sticky-table-hoever tbody tr:hover {
  background-color: #f1f1f1;
}


.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

.dark-mode a {
  color: #bb86fc;
}

/* Override Bootstrap elements */
.dark-mode .navbar {
  background-color: #1e1e1e;
}

.dark-mode .card {
  background-color: #232323 !important;
  color: #ffffff;
}

.dark-mode .calendar-day-number {
  background-color: gray;
}

.dark-mode .static-top {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

/* Flexbox container */
.flex-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30px;
  background-color: #f0f0f0; /* Background color for the container */
}

/* Left element */
.left-element {
  background-color: lightblue;
  padding: 5px;
}

/* Right element */
.right-element {
  background-color: lightcoral;
  padding: 5px;
}

.table-search-area {
  padding: 5px;
  width: 100%;
  height: 40px;
}

.new-profile-btn {
  float: left;
}

.search-field-btn {
  float: right;
}

.static-header-table {
  position: absolute;
  top: 100px; /* Adjust based on fixed elements */
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  width: 100%;
}
.static-header-table table {
  width: 100%;
  font-size: var(--font-sm);
}
.static-header-table thead {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  background-color: var(--primary-color) !important;
  color: white;
}

.static-header-table tbody {
  z-index: 0;
}

.static-header-table th, .static-header-table td {
  padding: 0.6rem;
}

.static-header-table .static-table-btn {
  /* padding: 0.6em 0.3em 0.6em 0.3em; */
  padding: 0.2em;
  text-align: center;
}

.input-group-sm .input-group-text {
  height: auto;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem; /* matches .form-control-sm */
}


.static-header-table tfoot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: #fff;
  background-color: white;
  font-weight: bold;
  border-top: 1px solid black;
}

.static-header-table tfoot td {
  padding: 0.6rem;
  border-top: 2px solid #ccc;
}

.non-static-header-table {
  position: absolute;
  top: 0px; /* Adjust based on fixed elements */
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  width: 100%;
}
.non-static-header-table table {
  width: 100%;
  font-size: var(--font-sm);
}
.non-static-header-table thead {
  background-color: var(--primary-color) !important;
  color: white;
}
.non-static-header-table tbody {
  z-index: 0;
}
.non-static-header-table th, .non-static-header-table td {
  padding: 0.6rem;
}
.non-static-header-table .static-table-btn {
  padding: 0.6em 0.3em 0.6em 0.3em;
  text-align: center;
}

.non-static-header-table .mini-header td {
  text-align: center;
  font-weight: bold;
  color: black;
  background-color: #fcfcfc;
  padding-top: 30px;
}

.non-static-header-table .empty-header {
  height: 80px;
  background-color: white;
  border: none;
}


.static-table-btn button {
  width: 90%;
  margin-left: 5%;
  font-size: 0.9em;
  padding: .2rem;
}

.static-table-btn img {
  padding: .2rem;
  width: 30px;
  display: inline-block;
  cursor: pointer;
}

.disabled-img {
  opacity: 0.5;
}

.static-header-table .active-check {
  margin-top: 4px;
}

.static-header-table th input[type=submit] {
  color: white;
  border: none;
  background-color: transparent;
  font-weight: bold;
  padding: 0;
}

.static-header-table tbody .more-records-row {
  background-color: white;
  text-align: center;
  font-weight: bold;
}

.dark-mode .static-header-table tbody {
  color: var(--dark-mode-text);
}

.dark-mode .static-header-table tbody tr:nth-child(odd) {
  background-color: var(--dark-mode-secondary);
}

.dark-mode .static-header-table tbody .more-records-row {
  background-color: var(--dark-mode-primary);
}

.dark-mode .static-header-table tbody tr:nth-child(even) {
  background-color: var(--dark-mode-primary); /* or use var(--dark-mode-primary) if preferred */
}

.dark-mode input[type=text],
.dark-mode input[type=email],
.dark-mode .custom-file-label,
.dark-mode textarea,
.dark-mode .form-control,
.dark-mode select,
.dark-mode select:disabled {
  background-color: var(--dark-mode-primary);
  color: white;
  border: 1px solid #6c757d;
}

.dark-mode input[type="radio"]:checked:disabled {
  background-color: #ffffff !important; /* White background for visibility */
  border: 2px solid #cccccc !important; /* Light gray border */
}

.dark-mode input[type="radio"]:checked:disabled::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #000; /* Black dot */
  border-radius: 50%;
  position: relative;
  top: 3px;
  left: 3px;
}

.dark-mode .modal-content {
  background-color: var(--dark-mode-primary);
  border: 1px solid #dee2e6
}

.dark-mode .input-group-prepend .input-group-text,
.dark-mode .custom-file-label::after {
  background-color: var(--dark-mode-secondary);
  color: white;
  border: 1px solid #6c757d;
}

.dark-mode .modal-header button {
  color: white;
}

.dark-mode .inherit-class .input-group-text {
  background-color: var(--dark-mode-secondary);
  border: 1px solid #6c757d;
}

.dark-mode .nav-tabs .active {
  background-color: var(--dark-mode-secondary);
  color: white;
}

/* Tooltip Image Styling */
.image-preview {
  position: absolute;
  display: none;
  width: 250px; /* Adjust as needed */
  height: auto;
  border: 2px solid #333;
  background: #fff;
  padding: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.error-code {
  color: red;
  font-weight: bold;
  font-size: 90%;
}

.search-bubble {
  margin-right: 4px;
}

.table-search-area form {
  float: right;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.nav-tabs .nav-link:hover {
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .nav-link:focus {
  outline: none;
  box-shadow: none;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1050;
	display: none;
	overflow-y: visible; /* <-- Fix: visible instead of auto */
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}


.addon-card .custom-dropdown,
.custom-dropdown {
  position: absolute;
  left: 0;
  width: 100%; /* Matches the width of the parent `.form-group` */
  z-index: 1100; /* Ensures it overlays other elements */
  max-height: 250px; /* Optional: Prevents excessively long dropdowns */
  overflow-y: auto;
  overflow-x: none;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for visibility */
  background-color: white;
  border: 1px solid #ced4da;
  display: none;
}

.custom-dropdown-item.active {
  background-color: #e9ecef;
  color: #212529;
}


.addon-card .custom-dropdown .dropdown-item {
  font-size: 85%;
  cursor: pointer;
}

.loc-add-on-info {
  width: 20px;
  height: 20px;
  margin-left: 7px;
}

.password-warning {
  width: 20px;
  margin-left: 10px;
  vertical-align: -6px;
  display: inline-block;
}

/*
.table-bordered td, .table-bordered th {
  border-left: 2px solid #dee2e6;
  border-right: 2px solid #dee2e6;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}
*/

.custom-set-modal .input-group-text {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-color: #ced4da;
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-right: 0;
  height: calc(1.5em + 0.5rem + 2px);
  line-height: 1;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.custom-set-modal .form-control-sm {
  border-color: #ced4da;
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  height: calc(1.5em + 0.5rem + 2px);
  box-sizing: border-box;
}

.custom-set-modal .input-group-sm > .form-control:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.custom-set-modal .input-group-sm > .btn {
  border-radius: 0 0.25rem 0.25rem 0;
  border-left: 0;
  border-width: 1px;
  height: calc(1.5em + 0.5rem + 2px);
  border-color: #ced4da;
  box-sizing: border-box;
}

.custom-set-modal .btn-secondary.btn-sm {
  background-color: #6c757d;
  border-color: #ced4da;
  padding: 0.25rem 0.75rem;
}

.dark-mode .custom-set-modal .input-group-text {
  background-color: #2b2b2b;
  border-color: #555;
  color: #f1f1f1;
}

.dark-mode .custom-set-modal .form-control-sm {
  background-color: #1f1f1f;
  border-color: #555;
  color: #e0e0e0;
}

.dark-mode .custom-set-modal .form-control-sm:focus {
  background-color: #252525;
  color: #fff;
  border-color: #888;
}

.dark-mode .custom-set-modal .btn-secondary.btn-sm {
  background-color: #444;
  border-color: #666;
  color: #f1f1f1;
}

.dark-mode .custom-set-modal .btn-secondary.btn-sm:hover {
  background-color: #555;
  border-color: #777;
}

.dark-mode .custom-set-modal .table-responsive {
  border-color: #555;
}

.dark-mode .custom-set-modal table.table-striped tbody tr:nth-of-type(odd) {
  background-color: #2a2a2a;
}

.dark-mode .custom-set-modal table.table-striped tbody tr:nth-of-type(even) {
  background-color: #1f1f1f;
}

.dark-mode .custom-set-modal table.table-striped tbody tr:hover {
  background-color: #333;
}

.dark-mode .custom-set-modal table thead th {
  background-color: #3a3a3a;
  color: #f1f1f1;
  border-color: #555;
}

.dark-mode .custom-set-modal table td, 
.dark-mode .custom-set-modal table th {
  border-color: #555;
  color: #e0e0e0;
}

/* --- MODAL STRUCTURE --- */
.modal-dialog {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.modal-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  max-height: 93vh;
  border-radius: 0.75rem; /* Smooth rounded corners */
}

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* padding: 0; Reduce excess space */
}

/* --- MODAL TABLE --- */
.modal-data-table {
  width: 95%;
  margin: 20px auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-sm);
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Sticky header */
.modal-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f8f9fc;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-xs);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Table content */
.modal-data-table th,
.modal-data-table td {
  padding: 0.55rem 0.75rem;
  vertical-align: middle;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  line-height: 1.35;
}

/* Zebra striping */
.modal-data-table tbody tr:nth-child(odd) {
  background-color: #fcfcfc;
}

.modal-data-table tbody tr:nth-child(even) {
  background-color: #f7f9fc;
}

/* Hover effect */
.modal-data-table tbody tr:hover {
  background-color: #e9f1fb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dark-mode .modal-data-table tbody tr:hover {
  background-color: #e9f1fb;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--dark-mode-text);
}

/* Icon tweaks */
.modal-data-table img {
  transition: transform 0.2s;
  width: 17px;
  vertical-align: middle;
}

.modal-data-table tr:hover img {
  transform: scale(1.1);
}

/* Optional: darker modal body border */
.modal-body {
  padding: 1rem;
  border-radius: 0.75rem;
  overflow: auto;
}

/* Optional: better scroll visual if table itself scrolls */
.table-scroll-wrapper {
  max-height: 65vh;
  overflow: auto;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- DARK MODE OVERRIDES --- */
html.dark-mode .modal-data-table {
  color: #eaeaea;
}

html.dark-mode .modal-data-table thead th {
  background-color: #20242c;
  color: #ccc;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .modal-data-table tbody tr:nth-child(odd) {
  background-color: #1a1d23;
}

html.dark-mode .modal-data-table tbody tr:nth-child(even) {
  background-color: #22262d;
}

html.dark-mode .modal-data-table tbody tr:hover {
  background-color: #2d3541;
}

/* -- OE DARK MODE -- */

.dark-mode .bs-stepper-header {
  background-color: var(--dark-mode-primary) !important;
}

.dark-mode .oe-top-info {
  background-color: var(--dark-mode-primary);
}

.dark-mode .oe-top-info .info-div {
  background-color: var(--dark-mode-secondary);
}

.dark-mode .input-group-append .input-group-text {
  background-color: var(--dark-mode-secondary);
  border: 1px solid #6c757d;
}

.dark-mode .dropzone {
  background-color: var(--dark-mode-secondary);
}

.dark-mode .dropzone .dz-button {
  background-color: var(--dark-mode-secondary);
  color: var(--dark-mode-text);
}

.dark-mode #ordering-page-content .modal-table {
  background-color: var(--dark-mode-primary);
  color: var(--dark-mode-text);
}

.dark-mode .modal-title {
  color: var(--dark-mode-text);
}

.dark-mode .oe-helper-1 {
  background-color: var(--dark-mode-primary) !important;
  border-bottom: 1px solid white;
}

.dark-mode .oe-helper-2 {
  background-color: var(--dark-mode-secondary) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .oe-helper-3 {
  color: var(--dark-mode-text);
}

.dark-mode .modal-scrolling-body {
  color: var(--dark-mode-text);
}

.dark-mode .modal p,
.dark-mode .modal p small,
.dark-mode .modal p strong {
  color: var(--dark-mode-text) !important;
}

.dark-mode .modal-scrolling-body th span,
.dark-mode .modal-scrolling-body td {
  color: var(--dark-mode-text);
}

.topbar-text {
  font-size: 0.9rem;
  line-height: 1.2;
}

.topbar-spacer {
  display: inline-block;
  width: 1rem; /* slightly narrower spacer for tighter layout */
}

.topbar-section {
  margin-bottom: 0;
}

.topbar-btn {
  padding: 0.2rem 0.5rem;
  /* border-radius: 999px; */
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.2;
  transition: background-color 0.2s;
}

.topbar-btn:hover {
  background-color: #e2e6ea;
  color: gray;
}

.topbar-section span {
  max-width: 220px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.oe-top-info {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 0.4rem 0.6rem;
  position: fixed !important;
  top: 56px;
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  z-index: 1035;
}

.bs-stepper-header {
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 1030;
  border-bottom: 1px solid #ddd;
  padding: 0.3rem 0.6rem;
}

#start-order-stepper .bs-stepper-header {
  position: absolute;
  top: 0;
}

#ordering-page-content {
  position: fixed;
  top: 170px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 1rem;
}

.oe-top-orders-series table,
.oe-top-orders table {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.oe-top-orders-series th,
.oe-top-orders th {
  white-space: nowrap;
  background-color: #f1f1f1;
  padding: 0.4rem 0.55rem;
  font-weight: 600;
  font-size: var(--font-md);
  border-bottom: 1px solid #dee2e6;
}

.oe-top-orders-series td,
.oe-top-orders td {
  padding: 0.32rem 0.55rem;
  font-size: var(--font-md);
  border-bottom: 1px solid #f0f0f0;
}

.oe-top-orders-series tr:last-child td,
.oe-top-orders tr:last-child td {
  border-bottom: none;
}

.container, .container-fluid {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Compact stepper styling with enhancements */

.compact-stepper-header {
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.15rem 0.35rem;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 1030;
  border-bottom: 1px solid #ddd;
  top: calc(56px + var(--topbar-height, 0px));
}

.compact-step {
  display: inline-flex;
  align-items: center;
  margin-right: 0.4rem;
}

.compact-step-trigger {
  background: none;
  border: none;
  padding: 0.12rem 0.3rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s;
}

.compact-step-trigger:hover .compact-step-label {
  text-decoration: underline;
}

.compact-step-circle {
  width: 22px;
  height: 22px;
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #6c757d;
  color: #fff;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.compact-step-circle.active-stepper {
  background-color: #007bff;
}

.compact-step-label {
  font-size: var(--font-sm);
  white-space: nowrap;
  color: #333;
}

.compact-step-circle.active-stepper + .compact-step-label {
  color: #007bff;
  font-weight: 600;
}

.compact-line {
  height: 1px;
  width: 10px;
  background-color: #ccc;
  margin: 0 0.15rem;
  align-self: center;
}

#ordering-page-content {
  position: fixed;
  top: calc(56px + var(--topbar-height, 0px) + 75px);
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 1rem;
}

@media (max-width: 576px) {
  .compact-step-label {
    display: none !important;
  }

  .compact-line {
    display: none !important;
  }

  .compact-step-circle {
    margin-right: 0 !important;
  }

  :root {
    --topbar-height: 80px;
  }
}

:root {
  --topbar-height: 60px;
}

/* Notifications Section Layout */

#notifications-section .card,
#notifications-section td {
  font-size: 90%;
}

.table-scroll-container {
  max-height: 500px; /* or whatever you want */
  overflow-y: auto;
  border-radius: 0.5rem;
}

/* Sticky header setup */
.table-scroll-container thead.sticky-header th {
  position: sticky;
  top: 0; /* or some offset if needed */
  background-color: #fff; /* or dark mode equivalent */
  z-index: 2;
}

/* Optional: full-width fix for sticky th */
.table-scroll-container th {
  background-clip: padding-box;
}

.oe-send-records-loc-row {
  background-color: rgb(241, 241, 241);
}

.dark-mode .oe-send-records-loc-row {
  background-color: var(--dark-mode-primary) !important;
}

.oe-send-records-loc-row .mini-header-cell {
  text-decoration: underline;
  font-size: 90%;
  font-weight: bold;
}

.date-stepper .step-complete {
  background-color: #d4edda;
  color: #155724;
}
.date-stepper .step-pending {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Compact stepper base styles (already present) */
.date-stepper .step-complete {
  background-color: #d4edda;
  color: #155724;
}
.date-stepper .step-pending {
  background-color: #f8f9fa;
  color: #6c757d;
}

.date-stepper .step {
  padding: 2px 4px;
}
.date-stepper {
  gap: 6px; /* or even 4px for ultra-compact */
}


/* DARK MODE overrides */
.dark-mode .date-stepper .step-complete {
  background-color: #2f5030;
  color: #b7f5b7;
}
.dark-mode .date-stepper .step-pending {
  background-color: #3a3a3a;
  color: #aaa;
}

/* Optional: user-selected font size modes */





/* Base input styles */
/* input,
select,
textarea,
button {
  font-size: var(--font-base);
  padding: 0.375rem 0.5rem;
  line-height: 1.4;
  box-sizing: border-box;
} */



/* Small font mode adjustments */
body.ui-font-small input,
body.ui-font-small select,
body.ui-font-small textarea,
body.ui-font-small button {
  font-size: var(--font-sm);
  padding: 0.3rem 0.45rem;
}

/* Large font mode adjustments */
body.ui-font-large input,
body.ui-font-large select,
body.ui-font-large textarea,
body.ui-font-large button {
  font-size: var(--font-lg);
  padding: 0.5rem 0.625rem;
}

/* ============================================================
   Font Scaling via html { font-size } (Future-proof method)
   ============================================================ */

:root {
  --font-xs: 0.72rem;
  --font-sm: 0.78rem;
  --font-md: 0.84rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
}

/* Base scaling — default is 100% = 16px = 1rem */
html {
  font-size: 100%;
}

/* Optional body presets */
html.scale-sm {
  font-size: 87.5%; /* ~14px base */
}
html.scale-lg {
  font-size: 112.5%; /* ~18px base */
}

@media (min-width: 1200px) and (max-width: 1850px) {
  .custom-break-1850 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

.oe-notif-card .form-check-label {
  line-height: 1.0;
  vertical-align: 2px;
}

.input-group .form-control-sm {
  padding: 0.25rem 0.5rem;  /* Bootstrap 4.5's default for sm */
  font-size: 0.875rem;      /* Also Bootstrap's default */
  height: calc(1.8125rem + 2px); /* Sm height with borders */
}

#ordering-page-content .row .card:hover {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.15s ease;
}

.bs-stepper-header .cursor-pointer:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
}

.btn-table-fit {
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.75rem;
}

.oe-loc-list-date {
  padding: 0.15rem !important;
  height: 25px !important;
}

.oe-loc-list-date.btn {
  font-size: 0.75rem;
  width: 25px;
}

#oe-top-info-container.showing-locations .topbar-btn:nth-child(2),
#oe-top-info-container.showing-series .topbar-btn:nth-child(1) {
  background-color: var(--primary);
  color: white;
}

#oe-top-info-container.showing-locations .oe-top-orders {
  display: block;
}
#oe-top-info-container.showing-series .oe-top-orders-series {
  display: block;
}

.oe-top-orders,
.oe-top-orders-series {
  display: none;
  transition: all 0.2s ease;
}

.topbar-section {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-btn.active-btn {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}


.truncate-1-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.rotate-chevron {
  transition: transform 0.3s ease;
}

.rotate-chevron.up {
  transform: rotate(180deg);
}

table {
  border-collapse: collapse;
}

/* Global cell borders */
table.table-bordered td,
table.table-bordered th {
  border: 1px solid #dee2e6;
}

/* Deliveries tab "Posted Records" banner row: no cell borders (left separator kept inline). */
table.table-bordered th.exp-deliveries-banner-th {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none;
}
/* Remove the top seam on the column-header row directly under the banner. */
table.table-bordered thead tr:first-child.exp-deliveries-banner-row + tr th {
  border-top: none !important;
}
/* Drop the table's own outer frame so the light banner row has no top/side border line. */
table.exp-deliveries-table.table-bordered {
  border: none !important;
}

/* Sticky rows */
.firm-row td {
  position: sticky;
  top: 37px;
  background-color: white;
  z-index: 10;
  border-bottom: 1px solid #dee2e6;
  height: 39px;
  line-height: 39px;
  padding: 0 8px;
  vertical-align: middle;
}

.office-row td {
  position: sticky;
  top: 75px; /* right below firm */
  background-color: white;
  z-index: 9;
  border-bottom: 1px solid #dee2e6;
  height: 39px;
  line-height: 39px;
  padding: 0 8px;
  vertical-align: middle;
}

/* Optional: subtle divider illusion */
.firm-row td,
.office-row td {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.firm-row td i.fa-chevron-down,
.firm-row td i.fa-chevron-up,
.office-row td i.fa-chevron-down,
.office-row td i.fa-chevron-up {
  position: relative;
  z-index: 20; /* higher than the td */
  cursor: pointer;
}

#preview {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 9999;
  max-width: 300px;
  max-height: 200px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.dark-mode #preview {
  background: #222;
  border-color: #444;
}

@keyframes highlightFlash {
  0%   { background-color: #d1f3ff; }  /* soft blue */
  50%  { background-color: #8bdfff; }  /* brighter */
  100% { background-color: inherit; }
}

.highlight-me {
  animation: highlightFlash 7s ease-in-out;
}

.foca-inactive {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.foca-inactive input[type="checkbox"] {
  cursor: not-allowed;
}

tr.inactive {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.ql-editor img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}


.nic-flat-button {
  background: none !important;
  font-size: 14px;
  color: #333;
  border-radius: 4px;
  transition: background 0.2s;
}

.nic-flat-button:hover {
  background: #eaeaea !important;
  color: #111;
}
.nic-flat-button i {
  pointer-events: none;
}

.nicEdit-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* Adds consistent spacing between all items */
  padding: 4px 6px;
}

.nic-flat-button {
  margin: 2px 0;
  padding: 4px 6px;
  font-size: 14px;
  background: none !important;
  border: none !important;
  border-radius: 4px;
  cursor: pointer;
}

.nic-flat-button:hover {
  background: #e0e0e0 !important;
}

.nicEdit-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}


.nicEdit-selectTxt {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  padding: 4px;
}

.nic-native-select {
  font-size: 13px;
  height: 28px;
  padding: 4px 8px;
  margin-left: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
}

.nicEdit-pane {
  padding: 8px !important;
}

.nicEdit-pane > div[style*="width: 270px"] {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}

.nicEdit-pane > div[style*="width: 270px"] div[style*="background-color"] {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: outline 0.2s;
}

.nicEdit-pane > div[style*="width: 270px"] div[style*="background-color"]:hover {
  outline: 2px solid #000;
}

.nicEdit-pane input[type="text"] {
  user-select: text !important;
  pointer-events: auto !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  padding: 0.25rem;
  min-height: calc(1.8125rem + 2px); /* matches .form-control-sm */
  font-size: 0.875rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #007bff;
  border: none;
  color: #fff;
  padding: 0 6px;
  border-radius: 0.2rem;
  font-size: 0.8rem;
  margin-top: 2px;
}

.select2-container--default .select2-selection--multiple {
  min-height: calc(1.8125rem + 2px); /* match .form-control-sm height */
  box-sizing: border-box;
}

/* Tag pill container */
.select2-selection__choice {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  background-color: #6c757d !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  margin: 2px 4px 2px 0 !important;
  padding: 0.25em 0.6em 0.25em 0.75em !important;
  font-size: 0.80rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* The white "×" (remove button) */
.select2-selection__choice__remove {
  position: static !important;
  all: unset;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  margin-left: 0.35em !important;
  line-height: 1 !important;
}

/* Label inside the pill */
.select2-selection__choice__display {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  margin-left: 5px !important;
}

input[type="checkbox"].is-invalid {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
}

.exp-tabs-wrapper {
  border-bottom: 1px solid #ccc;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 2px;
}

.exp-tab {
  position: relative;
  padding: 0.5rem 1rem;
  font-size: var(--font-sm, 0.875rem);
  cursor: pointer;
  border-right: 1px solid #ccc;
  white-space: nowrap;
  background: var(--tab-bg, #f8f9fa);
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exp-tab:hover {
  background-color: #eaeaea;
}

.exp-tab.active-tab {
  font-weight: bold;
  background: var(--tab-active-bg, #ffffff);
  border-bottom: 3px solid var(--tab-accent, #007bff);
}

.exp-tab.inactive-tab {
  color: #555;
}

.exp-tab button.tab-plus {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  padding: 3px;
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 0.7;
  z-index: 2;
}

/* Optional Dark Mode Support */
body.dark-mode .exp-tab {
  background: #2a2e35;
  border-color: #444;
  color: #ccc;
}

body.dark-mode .exp-tab.active-tab {
  background-color: #1f2227;
  border-bottom-color: #0d6efd;
  color: #fff;
}

.exp-tabs-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

.exp-tab {
  flex: 1 1 0; /* 👈 This is key: force equal-width tabs */
  text-align: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-bottom: none;
  position: relative;
  background: #f8f9fa;
  cursor: pointer;
  border-radius: 0.25rem 0.25rem 0 0;
}

.exp-tab span {
  pointer-events: none; /* allow full tab area to be clickable without interference */
}

.exp-tab.active-tab {
  background: #fff;
  font-weight: bold;
  border-bottom: 3px solid #007bff;
}

/* + button styling */
.exp-tab .tab-plus {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  padding: 3px;
  font-size: 0.75rem;
  line-height: 0.7;
}

.tab-plus {
  background-color: #d1f3e1;
  color: #198754;
  font-size: 0.85rem;
  border-radius: 50%;
  border: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.tab-plus:hover {
  background-color: #c1e7d4;
  color: #146c43;
}

.exp-tabs-wrapper {
  margin: 6px 0;
}

/* Visually merge the chevron and content columns */
.no-right-border {
  border-right: none !important;
}

.no-left-border {
  border-left: none !important;
}

.no-top-border {
  border-top: none !important;
}

.no-bottom-border {
  border-bottom: none !important;
}

.call-notes-div {
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  line-height: 1.4;
}

.collapsed-note {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-height: 1.4em;
  text-overflow: ellipsis;
  white-space: normal;
}

.call-notes-div.collapsed-note {
  height: 23px;
  overflow-y: hidden;
  white-space: normal;
}

.exp-notes-arrow {
  transition: transform 0.3s ease;
}

.rotated-chevron {
  transform: rotate(180deg);
}

.sortable-ghost {
  opacity: 0.6;
  background-color: #f0f0f0;
}

.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

.billing-worksheet-flex-top {
  display: flex;
  width: 100%;
}

.billing-worksheet-flex-top .item {
  flex: 1; /* Each item gets equal width */
  padding: 5px;
  /* border: 1px solid #ccc; */
  text-align: center;
}

.billing-worksheet-flex-top .input-group {
  margin: -1px;
}

.billing-worksheet-flex-top .input-group-text {
  width: 150px;
}

.bw-page-wrapper {
  display: flex;
  margin-top: 70px;
  height: calc(100% - 70px);
  width: 100%;
  overflow: hidden;
}

.bw-left-panel {
  width: 50%;
  padding: 10px;
  padding-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
  border-right: 1px solid #ccc;
}

.bw-item {
  width: calc(33.33% - 10px);
  margin: 5px;
  /* background: #f2f2f2; */
  padding: 0px;
  box-sizing: border-box;
  border-radius: 4px;
}

/* 2 items per row */
.bw-item-2 {
  width: calc(50% - 10px);
}

/* 3 items per row (explicit, optional override) */
.bw-item-3 {
  width: calc(100% - 10px);
}

/* 3 items per row (explicit, optional override) */
.bw-item-67 {
  width: calc(66.66% - 10px);
}

.bw-item-80 {
  width: calc(80% - 10px);
}

.bw-item-60 {
  width: calc(60% - 10px);
}

.bw-item-40 {
  width: calc(40% - 10px);
}

.bw-item-20 {
  width: calc(20% - 10px);
}

.bw-right-panel {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.bw-sticky-table-wrapper {
  flex: 1;
  overflow: auto;
}

.bw-table {
  width: 100%;
  border-collapse: collapse;
}

.bw-table th {
  position: sticky;
  top: 0;
  background: #333;
  color: #fff;
  z-index: 1;
}

.bw-table td,
.bw-table th {
  padding: 8px;
  border: 1px solid #ccc;
}

.stamp-red {
  color: red;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
  border: 2px solid red;
  padding: 2px 6px;
  display: inline-block;
  border-radius: 4px;
  opacity: 0.85;
}

/* Inactive-order worksheet wash — faint amber tint over the whole sheet so it's obvious
   at a glance that the current order is inactive (no DateSubmitted). Pairs with the
   amber INACTIVE stamp. Applied to the worksheet body wrapper, re-rendered per order. */
.inactive-worksheet {
  background-color: rgba(217, 119, 6, 0.06);
  min-height: 100vh;   /* fill empty space below the content so the tint reaches the bottom of the page */
}

/* Keep form fields solid white on the amber wash so they stay legible/consistent (some inputs are
   transparent and would otherwise show the tint, others are already white — this makes them uniform). */
.inactive-worksheet .form-control,
.inactive-worksheet select,
.inactive-worksheet textarea,
.inactive-worksheet input[type="text"],
.inactive-worksheet input[type="number"],
.inactive-worksheet input[type="date"] {
  background-color: #fff;
}

/* Inactive-order stamp (worksheet topbar) — amber, same shape as the red RUSH stamp.
   Shown when the order has no DateSubmitted (the definition of "inactive"). */
.stamp-amber {
  color: #b45309;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
  border: 2px solid #d97706;
  padding: 2px 6px;
  display: inline-block;
  border-radius: 4px;
  opacity: 0.9;
}

/* Canceled-order stamp (worksheet topbars) — same shape as the RUSH and INACTIVE stamps, deliberately
   slate rather than a third warning colour so all three can sit side by side without every one of them
   reading as an alarm. Shown when Workflow::Canceled is non-empty; the stored value is a sentence
   ("Cancelled by X on 7/31/2026 at 3:04 PM") and is shown on hover via the house popover. (LPS-10302)
   Canceled is a stamp only: it does not change the order status or suppress any behaviour. */
.stamp-slate {
  color: #374151;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
  border: 2px solid #6b7280;
  padding: 2px 6px;
  display: inline-block;
  border-radius: 4px;
  opacity: 0.9;
}


/* Only apply when embedded */
.static-header-table.embedded-table {
  position: relative !important;
  top: unset !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
  height: 100%;
  overflow-y: auto;
  width: 100%;
}

.bw-topbar-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 0;
  /* padding: 0.5rem 1rem; */
  background-color: #f8f9fa; /* optional */
  gap: 1rem;
  font-size: 0.9em;
}

.bw-topbar-left {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.bw-topbar-center {
  justify-self: center;
  white-space: nowrap;
  text-align: center;
}

.bw-topbar-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bw-topbar-center .topbar-section {
  display: inline-block;
}

.bw-info-top input,
.bw-info-top textarea,
.bw-info-top .input-group-text {
  border-radius: 0 !important;
}

/* Restore border-radius for outer corners */
.bw-info-top > div:first-child .input-group:first-child .input-group-text {
  border-top-left-radius: 0.25rem !important;
}
.bw-info-top > div:last-child .input-group:first-child input,
.bw-info-top > div:last-child .input-group:first-child textarea {
  border-top-right-radius: 0.25rem !important;
}

.bw-info-top > div:first-child .input-group:last-child .input-group-text {
  border-bottom-left-radius: 0.25rem !important;
}
.bw-info-top > div:last-child .input-group:last-child input,
.bw-info-top > div:last-child .input-group:last-child textarea {
  border-bottom-right-radius: 0.25rem !important;
}

.dropdown-menu .submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.1rem;
  z-index: 1001;
}

.dropdown-menu > div:hover > .submenu {
  display: block;
}

.custom-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.8rem;
}

.custom-dropdown-item:hover,
.custom-dropdown-item:focus {
    background-color: #f8f9fa;
    color: #16181b;
    text-decoration: none;
}


/* Left-side nested dropdowns */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%; /* left-facing */
  right: auto;
  z-index: 1050; /* higher than most navs */
  margin-top: -1px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* Remove default caret for all toggles */
.dropdown-toggle::after {
  display: none !important;
}


.billing-struct-static-bottom {
  background-color: white;
  z-index: 2;
  height: 240px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 10px;
  border-top: 2px solid #e3e3e3;
}

.billing-struct-bottom-table {
  width: 100%;
  font-size: 80%;
}

.billing-struct-bottom-table td {
  padding: 2px;
  border: 1px solid #e3e3e3;
  vertical-align: middle;
}

label {
  margin-bottom: 0;
}

.small-table-input {
  height: 15px;
}

.custom-popover {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    padding: 10px;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    max-width: 300px;
    z-index: 9999;
    text-align: left;

    word-wrap: break-word;     
    overflow-wrap: break-word; 
    white-space: normal; 
}

.custom-popover::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Right placement (arrow on left) */
[data-placement="right"] + .custom-popover::after {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border-width: 6px 6px 6px 0;
    border-color: transparent #fff transparent transparent;
}

/* Left placement (arrow on right) */
[data-placement="left"] + .custom-popover::after {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #fff;
}

/* Top placement (arrow on bottom) */
[data-placement="top"] + .custom-popover::after {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-width: 6px 6px 0 6px;
    border-color: #fff transparent transparent transparent;
}

/* Bottom placement (arrow on top) */
[data-placement="bottom"] + .custom-popover::after {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #fff transparent;
}


.welcome-panel {
  flex: 1;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #4a90e2;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 1.0em;
}

.welcome-panel-header {
  height: 35px;
  background-color: #4a90e2; /* Light blue header */
  color: white;
  font-weight: bold;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ccc;
  width: 100%;
  justify-content: space-between;
}

.welcome-panel-header i {
  /* cursor: pointer; */
  
}

.welcome-panel-body {
  flex: 1;
  padding: 0;
  background-color: #f9f9f9;
  overflow-y: auto;
  color: #333;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

#bulletin-post {
  flex: 1;
  overflow-y: auto;
  color: #333;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 5px 10px;
}

#quick-tip {
  flex: 1;
  overflow-y: auto;
  color: #333;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 5px 10px;
}

.light-scrollbar {
  scrollbar-width: thin;               /* Firefox: thin scrollbar */
  scrollbar-color: #ccc #f2f2f2;       /* Firefox: thumb color track color */
}

.light-scrollbar::-webkit-scrollbar {
  width: 8px;                          /* Chrome/Edge/Safari */
}

.light-scrollbar::-webkit-scrollbar-thumb {
  background: #ccc;                    /* Scroll thumb */
  border-radius: 4px;
}

.light-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #aaa;                    /* Hover effect */
}

.light-scrollbar::-webkit-scrollbar-track {
  background: #f2f2f2;                 /* Scroll track */
}

.small-nested-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 0.8rem; /* compact font */
  background: transparent;
}

.small-nested-table th,
.small-nested-table td {
  background: transparent;
  padding: 2px 6px;
  vertical-align: middle;

  /* strip out inherited borders */
  border: none !important;
}

/* Data cells */
.small-nested-table td {
  border-bottom: 1px solid #ddd !important; /* only bottom line */
}

/* Header cells */
.small-nested-table th {
  font-weight: 700;
  background: #f5f5f5;              /* subtle light gray */
  border-bottom: 1px solid #bbb !important; /* stronger bottom */
  text-align: left;
}

/* Remove last row border */
.small-nested-table tbody tr:last-child td {
  border-bottom: none !important;
}

.mini-th td {
  font-weight: bold;
  font-size: 90%;
}

.no-alternating-rows tr:nth-child(even),
.no-alternating-rows tr:nth-child(odd) {
  background-color: transparent !important;
}

.firm-row td {
  /* border-bottom: 3px solid #dee2e6 !important; */
}

.report-details > summary {
    cursor: pointer;
    list-style: none;
}

.report-details > summary::-webkit-details-marker {
    display: none;
}

.report-details[open] > summary {
    background: rgba(0,0,0,0.03);
}

.nested-report {
    padding-left: 1.25rem;
    border-left: 2px solid #ddd;
}




/* ===== OE Notifications – Scrollable Table ===== */
.oe-notif-table {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* ===== Table Base (HARD OVERRIDES) ===== */
.oe-notif-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;          /* smaller, predictable */
    line-height: 1.25 !important;
}

/* ===== Sticky Header ===== */
.oe-notif-table thead th {
    position: sticky !important;
    top: 0;
    z-index: 5;                           /* beat other stickies */
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 6px 8px !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: nowrap;
}

/* ===== Body Cells (HARD OVERRIDES) ===== */
.oe-notif-table tbody td {
    border: 1px solid #ddd !important;
    padding: 6px 8px;
    vertical-align: top !important;       /* key change */
    font-size: 12px !important;
    line-height: 1.25 !important;
}



.oe-notif-table tbody select {
  font-size: 8.5pt;
  padding: 3px;
  height: 25px;
}

.roles-table-oe {
  font-size: 0.7em !important;
}

.roles-table-oe tr {
  background-color: transparent !important;
}

.roles-table-oe tr td {
  border: none !important;
  background-color: transparent !important;
  font-size: 8pt !important;
  padding: 2px;
}

.roles-table-oe tr td label input {
  vertical-align: -2px;
  margin-right: 2px;
}

.rotate-chevron {
    display: inline-block;
    transition: transform .2s ease;
}

.rotate-chevron.up {
    transform: rotate(0deg);
}

.rotate-chevron.down {
    transform: rotate(180deg);
}

.custom-popover-v2 {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    position: fixed;
    font-size: 10pt;
}

.custom-popover-v2::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
}

/* RIGHT */
.custom-popover-v2[data-arrow-placement="right"]::after {
    left: -6px;
    top: var(--caret-y, 50%);
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #ccc;
}

/* LEFT */
.custom-popover-v2[data-arrow-placement="left"]::after {
    right: -6px;
    top: var(--caret-y, 50%);
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #ccc;
}

/* TOP */
.custom-popover-v2[data-arrow-placement="top"]::after {
    bottom: -6px;
    left: var(--caret-x, 50%);
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ccc;
}

/* BOTTOM */
.custom-popover-v2[data-arrow-placement="bottom"]::after {
    top: -6px;
    left: var(--caret-x, 50%);
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ccc;
}

.copy-icon {
    margin-left: 6px;
    font-size: 13px;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease;
}

.copy-icon:hover {
    opacity: 1;
}

.copy-icon.fa-check {
    color: #28a745;
}

.rotate-chevron {
    transition: transform 0.2s ease;
}

.rotate-chevron.up {
    transform: rotate(180deg);
}

.nicEdit-main img {
    max-width: 100%;
    height: auto;
}

.popover-wide {
    max-width:650px;
}

.variable-group { display:none; }
.variable-group.active { display:block; }

.tutorial-edit-format {
  font-size: 0.8rem;
  line-height: 1.1;
}

.nicEdit-main {
    padding: 10px !important;
    box-sizing: border-box;
}

/*
 * Scoped drag-to-resize for the two nicEdit fields in the order page's
 * 3 - Location / Witness section (main location "Specify Records" + location
 * add-on record types). The wrapper carries .nic-resizable; nicEdit inserts its
 * generated .nicEdit-main contentEditable div inside that same wrapper.
 * nicEdit sets overflow:hidden inline on .nicEdit-main, so !important is needed
 * for the resize handle to appear (CSS resize is ignored when overflow:visible/hidden).
 */
.nic-resizable .nicEdit-main {
    resize: vertical;
    overflow: auto !important;
    min-height: 80px;
}

/* .nicEdit-main p {
  margin-bottom: 0 !important;
} */

.custom-dropdown-item {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.custom-dropdown-item:hover {
    background-color: rgba(0, 123, 255, 0.08);
}

.custom-dropdown-item.active {
    background-color: rgba(0, 123, 255, 0.12);
}

.loc-portal-table {
  font-size: 90%;
}

.loc-portal-table th {
  padding: 5px;
}

.loc-portal-table td {
  padding: 5px;
}

/* ---- Collections worksheet ---- */

/* Top-bar icon buttons. The sizing lives here (not inline) because popover() emits its own
   style="cursor:pointer;" attribute and a second inline style on the same tag would collide. */
.cw-topbar-btn {
  font-size: 9.5pt;
  width: 33px;
  text-align: center;
  margin-right: 5px;
}

/* The case you're currently viewing, in the Associated Cases modal. Deliberately quiet — a left marker
   rather than a filled row, so it reads as "you are here" without competing with the table's hover state. */
.cw-assoc-current td:first-child {
  box-shadow: inset 3px 0 0 #17a2b8;
}

/* Status-log table (Collections). Its own layout + render path — intentionally separate from the
   expediting / order-entry status logs. */
.table-sticky-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #f8f9fa;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  z-index: 2;
}

.collections-worksheet-status-log-table td {
  vertical-align: top;
}

/* "& 3 more" in the Invoice Numbers cell — hover reveals the rest via the house popover. */
.condensed-list-more {
  text-decoration: underline dotted;
}

/* Favorite-function star in the invoice action bar. Width lives here, not inline, because popover()
   emits its own style attribute and a second inline style on the tag would collide. */
.cw-star {
  width: 17px;
}

/* Store For Printing confirm table. .modal-data-table is width:95% + auto margins, which insets it from the
   modal body text; flush it left so the table and the prose line up. */
.cw-confirm-table {
  width: 100%;
  margin: 10px 0 0;
}

/* Info icon on an already-queued row — its popover carries the prior queue details. Sized here rather than
   inline because popover() emits its own style attribute and the two would collide. */
.cw-queued-info {
  width: 15px;
  vertical-align: -2px;
}

/* A checked invoice that won't be acted on (e.g. no balance due, so nothing to record a payment against).
   Muted rather than alarming — being skipped is normal, not a fault. */
.cw-skipped-row td {
  color: #adb5bd;
}

/* The worksheet fills the page: the top panels take what they need, and the invoice list + status log split
   the rest (see .cw-right-panel). height:calc(100% - 70px) used to be wrong — 100% resolves against <main>,
   which ALSO contains the 58px .header-buffer, so the wrapper ran ~70px past the viewport and the page
   scrolled. Growing into the space <main> actually has left is exact and needs no magic number. The page-level
   margin-top comes from the inline style on the element (45px). (ZR-10184) */
.cw-page-wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Make the collections worksheet fill the viewport instead of overflowing it, so the invoice list + status
   log have a real height to split. ALL of this is scoped to .cw-worksheet-page (set on <main> by
   collections-worksheet.php) — <main>, .header-buffer and #collections-worksheet-body are shared by every
   page in the app, so none of these rules may leak. (ZR-10184)
     - <main> is flex-grow:1 in the flex-column <article>, but is a plain block AND flex-shrink:0 (from the
       shared .header-buffer/main/footer rule), so it grew past the viewport. Column + allow-shrink fixes it.
     - #collections-worksheet-body is a plain block with min-height:auto, so it wouldn't pass height down. */
main.cw-worksheet-page {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  min-height: 0;
  overflow: hidden;
}

main.cw-worksheet-page > #collections-worksheet-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* The top panels take exactly the height they need and NEVER shrink — .cw-right-panel below is flex:1 and
   would otherwise squeeze them (Base's panels are ~214px each, so they'd get clipped mid-content; Payer's are
   short enough that it didn't show). flex-shrink:0 keeps them whole; the invoice/status-log split then divides
   whatever is genuinely left. (ZR-10184) */
.cw-left-panel {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
  border-right: 1px solid #ccc;
  flex: 0 0 auto;
}

/* The invoice list + status log share whatever vertical space is left under the top panels, divided by a
   draggable handle (see .cw-split-handle / cwInitSplit in scripts.js). Before this, both sections had fixed
   pixel max-heights, so they never reacted to the viewport: dead space below on short lists, cramped on long
   ones. flex:1 makes this panel GROW to fill .cw-page-wrapper (it previously sized to its content and left
   the remainder empty); min-height:0 lets the flex children actually shrink so their inner scroll engages.
   (ZR-10184) */
.cw-right-panel {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* The split itself. --cw-split is the invoice list's share (%), set by cwInitSplit()/the drag and persisted
   per View-By in localStorage; the status log takes the rest. These live on the two containers that AJAX
   only ever replaces the INNER html of, so a filter change or status-log refresh can't disturb the split. */
#cw-invoices-table-container {
  flex: 0 0 var(--cw-split, 50%);
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#cw-status-logs-table-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Each container holds one .table-scroll-wrapper; it must fill the container so the table scrolls internally
   rather than the whole section growing. The shared .table-scroll-wrapper (max-height:65vh) and
   .table-scroll-container (max-height:500px) caps must be lifted HERE ONLY — otherwise they'd clamp the two
   sections on a tall monitor and re-introduce the dead space this split exists to remove. Scoped by the two
   container ids so no other table in the app is affected. */
#cw-invoices-table-container > .table-scroll-wrapper,
#cw-status-logs-table-container > .table-scroll-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
}

#cw-invoices-table-container .table-scroll-container,
#cw-status-logs-table-container .table-scroll-container {
  max-height: none;
}

/* Text input with an inline clear "x". The x sits INSIDE the field's right edge and is hidden until there's
   a value (cwToggleClear adds .has-value on keyup / at init). Padding-right keeps typed text from running
   under it. (ZR-10184) */
.cw-clearable-input {
  position: relative;
  display: inline-block;
}

.cw-clearable-input input {
  padding-right: 22px;
}

.cw-input-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: none;
  color: #868e96;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.cw-clearable-input.has-value .cw-input-clear {
  display: block;
}

.cw-input-clear:hover {
  color: #dc3545;
}

.cw-split-handle {
  flex: 0 0 7px;
  margin: 3px 0;
  border-radius: 3px;
  background: #e3e6ea;
  border: 1px solid #ced4da;
  cursor: row-resize;
  position: relative;
}

.cw-split-handle:hover,
.cw-split-handle.cw-split-dragging {
  background: #17a2b8;
  border-color: #17a2b8;
}

/* Grip dots, so it reads as a grab bar rather than a divider line. */
.cw-split-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-top: 1px dotted #8a9199;
  border-bottom: 1px dotted #8a9199;
}

.cw-split-handle:hover::after,
.cw-split-handle.cw-split-dragging::after {
  border-color: #fff;
}

/* Kill text selection while dragging. */
body.cw-split-active {
  user-select: none;
  cursor: row-resize;
}

.collections-worksheet-invoice-table th,
.collections-worksheet-invoice-table td {
  padding: 5px !important;
}

/* --- Add P&I window (ZR-10192) --- */

/* .modal-data-table is globally width:95% + margin:20px auto, which leaves a visible gutter either side.
   This table has 9 columns and needs the room, so it overrides to full width. Scoped to .cw-pi-table so no
   other modal's table shifts. */
.cw-pi-table {
  width: 100%;
  margin: 12px 0 0;
}

/* The clear control sits to the LEFT of the amount so the digits stay in a clean right-aligned column —
   with it on the right, clearing a charge shifted every figure in that column. inline-flex keeps the two
   on one baseline (a floated or plain-inline icon rode high against the right-aligned figure). */
.cw-pi-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.cw-pi-cell {
  white-space: nowrap;
}

/* Headers never wrap — "Invoice #" was dropping its # onto a second line and making the header row two rows
   tall. Location is the flexible column, so it absorbs the width instead. */
.cw-pi-table thead th {
  white-space: nowrap;
}

/* Grow the list into the space the modal already has. .table-scroll-container is capped at 340px globally,
   which left ~478px of unused viewport at 1080p (the dialog is a fixed 574px tall) — so a 75-invoice run
   scrolled far more than it needed to.
   Sized against the viewport rather than a bigger fixed number so it still fits on short screens: the
   subtracted 235px covers the modal header + footer + intro + trailing note + the dialog's own margins. */
#bootstrap-modal .cw-pi-scroll {
  max-height: calc(100vh - 235px);
}

/* Deliberately subtle: a light glyph that firms up on hover, rather than a hard red X competing with the
   amount for attention. The row's red-X (remove invoice) is a destructive action; this one just drops a
   proposed charge, so it should not read as equally loud. */
.cw-pi-clear {
  cursor: pointer;
  color: #c3c9d0;
  font-size: 15px;
  line-height: 1;
  padding: 0 1px;
  transition: color 0.12s ease;
}

.cw-pi-clear:hover {
  color: #dc3545;
}

/* Occupies the cleared glyph's slot so the amount does not slide left. Width matches .cw-pi-clear's
   rendered box (15px glyph + 2px padding). Retained for cells that render with no charge at all. */
.cw-pi-clear-spacer {
  display: inline-block;
  width: 11px;
}

/* The clear control becomes this once a charge is cleared. Blue rather than grey so it reads as an available
   action next to the greyed-out dash, instead of looking disabled along with it. */
.cw-pi-restore {
  cursor: pointer;
  color: #6ea8d8;
  font-size: 14px;
  line-height: 1;
  padding: 0 1px;
  transition: color 0.12s ease;
}

.cw-pi-restore:hover {
  color: #17a2b8;
}

/* Signals the amount carries an explanation on hover. (popover() sets its own inline cursor:pointer, so
   only the underline is ours to set here.) */
.cw-pi-table .cw-pi-amount[data-popover-v2] {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
}

/* Non-qualifying rows recede — they are context, not choices. */
.cw-pi-ineligible td {
  opacity: 0.75;
}

/* Invoice number opens a freshly generated copy of that invoice. Underlined on hover rather than always, so a
   column of these does not read as a wall of links.
   Deliberately a DARK teal, not the lighter #17a2b8 used for buttons: this is body text in a dense table that
   has to stay comfortably readable, and the lighter tone was thin against white for anyone with less contrast
   sensitivity. This passes WCAG AA on the table's white/near-white rows. */
.cw-invoice-link {
  cursor: pointer;
  color: #0f6674;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.cw-invoice-link:hover {
  color: #17a2b8;
  border-bottom-color: currentColor;
}

/* Totals pin to the bottom of the scroll box, mirroring the sticky header, so the amount about to be applied
   stays visible while scrolling a long selection (75 invoices is a realistic list). Sticky goes on the CELLS,
   not the tfoot — a <tfoot> is not a positionable box in most engines. */
.cw-pi-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background-color: #f8f9fc;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
  /* The row is opaque, so zebra striping cannot show through from beneath it. */
  background-clip: padding-box;
}

.filter-bar input,
.filter-bar label {
  line-height: 1;
  margin-bottom: 0;
}
.filter-bar .form-control-sm {
  height: 24px;
  padding: 0 6px;
}