@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600&display=swap);
@import url(https://rsms.me/inter/inter.css);
/**
 * NMI Collect.js hosts + Dejavoo (Freedom to Design) native card fields — §7 parity app-wide.
 * Imported from src/index.css (do not duplicate in page-specific style.css).
 */

/* NMI Collect.js host divs only (.payment-field + id). Bare #ccnumber/#ccexpiry break Dejavoo inputs that reuse ids. */
.payment-field#ccnumber,
.payment-field#ccexp,
.payment-field#cvv,
#plan-nmi-ccnumber.payment-field,
#plan-nmi-ccexp.payment-field,
#plan-nmi-cvv.payment-field {
  display: block !important;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0;
  line-height: 0;
  /* No inset/outer ring here — Collect.js iframe draws its own field border; a second ring looked like “double border”. */
  background-color: #f7f8fa !important;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: none;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.payment-field#ccnumber iframe,
.payment-field#ccexp iframe,
.payment-field#cvv iframe,
#plan-nmi-ccnumber.payment-field iframe,
#plan-nmi-ccexp.payment-field iframe,
#plan-nmi-cvv.payment-field iframe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border: none;
  border-radius: 7px;
  vertical-align: top;
  box-sizing: border-box;
}

.payment-field#ccnumber:has(iframe:focus),
.payment-field#ccexp:has(iframe:focus),
.payment-field#cvv:has(iframe:focus),
#plan-nmi-ccnumber.payment-field:has(iframe:focus),
#plan-nmi-ccexp.payment-field:has(iframe:focus),
#plan-nmi-cvv.payment-field:has(iframe:focus) {
  background-color: #ffffff !important;
  /* Focus ring comes from Collect.js focusCss — no second ring on host. */
  box-shadow: none;
}

.payment-field#ccnumber iframe:focus,
.payment-field#ccexp iframe:focus,
.payment-field#cvv iframe:focus,
#plan-nmi-ccnumber.payment-field iframe:focus,
#plan-nmi-ccexp.payment-field iframe:focus,
#plan-nmi-cvv.payment-field iframe:focus {
  outline: none;
}

.payment-field#ccnumber input,
.payment-field#ccexp input,
.payment-field#cvv input,
#plan-nmi-ccnumber.payment-field input,
#plan-nmi-ccexp.payment-field input,
#plan-nmi-cvv.payment-field input {
  background-color: #f7f8fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px;
  font-size: 15px;
  color: #4b5563;
  box-sizing: border-box;
  padding: 10px 14px;
}

/* NMI Collect.js ACH — same outer shell as card hosts (iframe cannot use app InputText CSS) */
.payment-field#checkname,
.payment-field#checkaba,
.payment-field#checkaccount {
  display: block !important;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0;
  line-height: 0;
  background-color: #f7f8fa !important;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: none;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.payment-field#checkname iframe,
.payment-field#checkaba iframe,
.payment-field#checkaccount iframe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border: none;
  border-radius: 7px;
  vertical-align: top;
  box-sizing: border-box;
}

.payment-field#checkname:has(iframe:focus),
.payment-field#checkaba:has(iframe:focus),
.payment-field#checkaccount:has(iframe:focus) {
  background-color: #ffffff !important;
  box-shadow: none;
}

.payment-field#checkname iframe:focus,
.payment-field#checkaba iframe:focus,
.payment-field#checkaccount iframe:focus {
  outline: none;
}

.payment-field#checkname input,
.payment-field#checkaba input,
.payment-field#checkaccount input {
  background-color: #f7f8fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px;
  font-size: 15px;
  color: #4b5563;
  box-sizing: border-box;
  padding: 10px 14px;
}

/* Dejavoo native InputText (FTD postData) — match §7 / NMI */
.dejavoo-native-card-fields .MuiGrid-item,
.pos-dejavoo-card-fields .MuiGrid-item {
  min-width: 0;
}
.dejavoo-native-card-fields .cs-form-field,
.pos-dejavoo-card-fields .cs-form-field {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dejavoo-native-card-fields .cs-input-shell,
.pos-dejavoo-card-fields .cs-input-shell {
  position: relative;
  isolation: isolate;
  background-color: #f7f8fa !important;
  border-color: #e5e7eb !important;
  border-radius: 8px !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Match card # / MMYY / CVV row — same height as app InputText (44px) */
.dejavoo-native-card-fields .cs-input-shell:not(.cs-input-shell--multiline),
.pos-dejavoo-card-fields .cs-input-shell:not(.cs-input-shell--multiline) {
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
}
.dejavoo-native-card-fields .cs-input-shell:not(.cs-input-shell--multiline) .cs-input,
.pos-dejavoo-card-fields .cs-input-shell:not(.cs-input-shell--multiline) .cs-input {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 !important;
  align-self: stretch !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
/* Full white fill on focus (keep — user expects click → white field). */
.dejavoo-native-card-fields .cs-input-shell:not(.cs-input-shell--disabled):focus-within::before,
.pos-dejavoo-card-fields .cs-input-shell:not(.cs-input-shell--disabled):focus-within::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #ffffff;
  z-index: 0;
  pointer-events: none;
}
.dejavoo-native-card-fields .cs-input-shell:not(.cs-input-shell--disabled):focus-within,
.pos-dejavoo-card-fields .cs-input-shell:not(.cs-input-shell--disabled):focus-within {
  background-color: #ffffff !important;
}
.dejavoo-native-card-fields .cs-input-shell:focus-within .cs-input:-webkit-autofill,
.dejavoo-native-card-fields .cs-input-shell:focus-within .cs-input:-webkit-autofill:focus,
.pos-dejavoo-card-fields .cs-input-shell:focus-within .cs-input:-webkit-autofill,
.pos-dejavoo-card-fields .cs-input-shell:focus-within .cs-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}
.dejavoo-native-card-fields .cs-input-shell.cs-input-shell--error,
.pos-dejavoo-card-fields .cs-input-shell.cs-input-shell--error {
  border-color: #dc3545 !important;
}
.dejavoo-native-card-fields .cs-input-shell:hover:not(.cs-input-shell--disabled):not(.cs-input-shell--error),
.pos-dejavoo-card-fields .cs-input-shell:hover:not(.cs-input-shell--disabled):not(.cs-input-shell--error) {
  border-color: #d1d5db !important;
}
.dejavoo-native-card-fields .cs-input-shell:focus-within:not(.cs-input-shell--disabled):not(.cs-input-shell--error),
.pos-dejavoo-card-fields .cs-input-shell:focus-within:not(.cs-input-shell--disabled):not(.cs-input-shell--error) {
  border-color: #2563eb !important;
  /* Single stroke only — drop extra focus ring here (border + glow read as “double border”). */
  box-shadow: none !important;
}
.dejavoo-native-card-fields .cs-input-shell.cs-input-shell--error:focus-within:not(.cs-input-shell--disabled),
.pos-dejavoo-card-fields .cs-input-shell.cs-input-shell--error:focus-within:not(.cs-input-shell--disabled) {
  border-color: #dc3545 !important;
  box-shadow: none !important;
}
.dejavoo-native-card-fields .cs-input,
.pos-dejavoo-card-fields .cs-input {
  color: #4b5563 !important;
}
.dejavoo-native-card-fields .cs-input.cs-input--error-text,
.pos-dejavoo-card-fields .cs-input.cs-input--error-text {
  color: #dc3545 !important;
}
.dejavoo-native-card-fields .cs-input.cs-input--error-text::placeholder,
.pos-dejavoo-card-fields .cs-input.cs-input--error-text::placeholder {
  color: rgba(220, 53, 69, 0.75) !important;
}

/* Force light mode - disable dark mode */
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  color: #1f2937;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f7f8fa;
  background-color: var(--app-page-background);
}

#root {
  min-height: 100vh;
  background-color: #f7f8fa;
  background-color: var(--app-page-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-family: var(--font-heading);
  color: #1f2937;
  color: var(--text-primary);
}

/* Style guide — status pill (non-MUI); prefer <StatusBadge /> or MUI Chip size="small" */
.cj-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 9999px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  font-family: "Inter", sans-serif;
  font-family: var(--font-body);
  box-sizing: border-box;
}

/* List / data table surface — wraps JobberTableV2 root Grid (scroll stays on inner content) */
.cj-data-table-shell {
  border-radius: 0;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  background: #ffffff;
  background: var(--bg-card);
  overflow: visible;
}

.cj-status-badge--success {
  background: #d1fae5;
  background: var(--green-light);
  color: #065f46;
}
.cj-status-badge--error {
  background: #fee2e2;
  background: var(--red-light);
  color: #991b1b;
}
.cj-status-badge--warning {
  background: #fef9c3;
  background: var(--yellow-light);
  color: #92400e;
}
.cj-status-badge--info {
  background: #dbeafe;
  background: var(--blue-light);
  color: #1e40af;
}
.cj-status-badge--neutral {
  background: #f7f8fa;
  background: var(--bg-main);
  color: #6b7280;
  color: var(--text-secondary);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border);
}

/* Force light mode - override any dark mode styles */
body.dark {
  --body-color: #e4e9f7 !important;
  --sidebar-color: #fff !important;
  --primary-color: #f4f2f2 !important;
  --primary-color-light: #f4f2f2 !important;
  --toggle-color: #ddd !important;
  --text-color: #ffffff !important;
  --dark-color: #000 !important;
}

/* Disable browser dark mode preference */
@media (prefers-color-scheme: dark) {
  body {
    color-scheme: light !important;
  }
}

/* Hide reCAPTCHA v3/v2 floating badge - disclosure text is shown on Login/Forgot Password/Sign Up pages */
.grecaptcha-badge {
  visibility: hidden !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

:root {
  /* Cloud Job Manager — UI/UX Style Guide (palette — match design spec) */
  /* Primary */
  --navy-deep: #0f2b46; /* Sidebar, headings */
  --navy-mid: #1a3f5c; /* Hover states */
  --blue-primary: #2563eb; /* Links, CTAs, focus accents */
  --blue-light: #dbeafe; /* Selections */
  --blue-50: #eff6ff; /* Row hover */
  /* Accent */
  --amber: #d4943a;
  --amber-light: #fef3e2;
  --green: #059669;
  --green-light: #d1fae5;
  --red: #dc2626;
  --red-light: #fee2e2;
  --yellow: #d97706;
  --yellow-light: #fef9c3;
  /* Neutrals */
  --bg-main: #f7f8fa; /* BG Main — page canvas */
  --white: #ffffff;
  --bg-card: #ffffff; /* Cards / panels on BG Main */
  --border: #e5e7eb;
  --border-dark: #d1d5db;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af; /* Muted — lighter than secondary (style guide) */
  --btn-primary-hover-bg: var(--navy-mid);
  --btn-primary-hover-border: var(--navy-mid);
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.1);
  /* Layered / inset (compose with var(--shadow-sm) via comma where needed) */
  --shadow-soft-float: 0 4px 24px rgba(15, 23, 42, 0.06);
  --shadow-up-soft: 0 -8px 24px rgba(15, 23, 42, 0.06);
  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  /* Focus / outline rings (not elevation — use with shadows via comma) */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.1);
  --focus-ring-blue-alt: 0 0 0 3px rgba(59, 130, 246, 0.1);
  --focus-ring-navy-2: 0 0 0 2px rgba(6, 49, 100, 0.2);
  --focus-ring-navy-soft: 0 0 0 2px rgba(6, 49, 100, 0.1);
  --focus-ring-error: 0 0 0 3px rgba(220, 53, 69, 0.12);
  --focus-ring-amber: 0 0 0 3px rgba(212, 148, 58, 0.1);
  --focus-ring-donor: 0 0 0 4px rgba(104, 178, 203, 0.1);
  --focus-ring-teal: 0 0 0 3px rgba(91, 181, 201, 0.1);
  --focus-ring-white-soft: 0 0 0 2px rgba(255, 255, 255, 0.35);
  /* Status pills / toggles (superadmin company active–inactive) */
  --shadow-glow-status-success: 0 2px 8px rgba(37, 173, 34, 0.3);
  --shadow-glow-status-danger: 0 2px 8px rgba(209, 41, 19, 0.3);
  /* filter: drop-shadow(...) — argument only */
  --drop-shadow-navy-icon: 0 0 8px rgba(6, 49, 100, 0.3);
  /* Toasts (react-hot-toast / react-toastify inline styles) */
  --toast-dark-bg: #363636;
  /* Navy overlay (schedule dialogs, icon hover) */
  --navy-alpha-10: rgba(6, 49, 100, 0.1);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* App shell */
  --app-page-background: var(--bg-main);
  /* Primary navy — sidebar, solid buttons (.bg-blue-color), not the Blue Primary link blue */
  --bg-blue-color: var(--navy-deep);
  --text-white-color: #ffffff;
  --bg-white-color: #ffffff;
  --text-blue-color: var(--navy-deep); /* Heading / navy text (was #0f2b46; spec = Navy Deep) */
  --text-orange-color: var(--amber);
  --text-otange-color: var(--amber); /* legacy typo alias */
  --bg-orange-color: var(--amber);
  --border-orange-color: var(--amber);
  --border-blue-color: var(--navy-deep);
  --border-white-color: #ffffff;
  --bg-green-color: var(--green);
  --border-green-color: var(--green);
  --bg-donor-color: #68b2cb;
  --donor-hover-bg: #5bb5c9;
  --bg-white-donor-color: #e9f8fc;
  --border-donor-color: #29b3e2;
  --bg-red-color: var(--red);
  --bg-grey-color: var(--bg-main);
  --border-grey-color: var(--border);
}
.bg-blue-color {
  background-color: #0f2b46 !important;
  background-color: var(--bg-blue-color) !important;
}
.bg-white-donor-color{
  background-color: #e9f8fc !important;
  background-color: var(--bg-white-donor-color) !important;
}
.bg-green-color {
  background-color: #059669 !important;
  background-color: var(--bg-green-color) !important;
}
.text-green-color {
  color: #059669 !important;
  color: var(--bg-green-color) !important;
}
.bg-donor-color {
  background-color: #68b2cb !important;
  background-color: var(--bg-donor-color) !important;
}
.text-donor-color {
  color: #68b2cb !important;
  color: var(--bg-donor-color) !important;
}
.border-donor-color {
  border-color: #29b3e2 !important;
  border-color: var(--border-donor-color) !important;
}
.border-green-color {
  border-color: #059669 !important;
  border-color: var(--border-green-color) !important;
}
.bg-grey-color {
  background-color: #f7f8fa !important;
  background-color: var(--bg-grey-color) !important;
}
.border-grey-color {
  border-color: #e5e7eb !important;
  border-color: var(--border-grey-color) !important;
}
.bg-white-color {
  background-color: #ffffff !important;
  background-color: var(--bg-white-color) !important;
}

.bg-orange-color {
  background-color: #d4943a !important;
  background-color: var(--bg-orange-color) !important;
}

.border-blue-color {
  border-color: #0f2b46 !important;
  border-color: var(--border-blue-color) !important;
}

.bg-button-blue-color {
  background-color: #0f2b46 !important;
  background-color: var(--bg-blue-color) !important;
}

.outline-button-blue-color {
  border-color: #0f2b46 !important;
  border-color: var(--border-blue-color) !important;
}

.border-orange-color {
  border-color: #d4943a !important;
  border-color: var(--border-orange-color) !important;
}

.text-blue-color {
  color: #0f2b46 !important;
  color: var(--text-blue-color) !important;
}

.text-white-color {
  color: #ffffff !important;
  color: var(--text-white-color) !important;
}

.text-orange-color {
  color: #d4943a !important;
  color: var(--text-orange-color) !important;
}

.outline:hover {
  color: #0f2b46 !important;
  color: var(--navy-deep) !important;
  background: transparent !important;
}

.border-rgba-blue {
  border-color: rgba(15, 43, 70, 0.5);
}

.job .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  border: none !important;
}

.css-1jy569b-MuiFormLabel-root-MuiInputLabel-root.Mui-focused {
  color: #0f2b46 !important;
  color: var(--navy-deep) !important;
}

.rbc-event,
.rbc-day-slot .rbc-background-event {
  background-color: #faecea !important;
}

.text-blue-color .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: #0f2b46 !important;
  border-color: var(--navy-deep) !important;
  border-radius: 4px !important;
}

.text-blue-color .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #0f2b46 !important;
  border-color: var(--navy-deep) !important;
  border-radius: 4px !important;
}

.text-blue-color .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0f2b46 !important;
  border-color: var(--navy-deep) !important;
  border-radius: 4px !important;
}

/* Navy text for inputs; radius on MUI inner inputs only. Do not round .cs-input — border
   radius lives on .cs-input-shell; a smaller radius on the inner input + fill/autofill
   caused visible gaps at the corners (often mistaken for an empty MUI label notch). */
.text-blue-color input {
  color: #0f2b46 !important;
  color: var(--navy-deep) !important;
  border-radius: 4px !important;
}

.text-blue-color .cs-input-shell .cs-input {
  border-radius: 0 !important;
}

.MuiInputLabel-root {
  color: #0f2b46 !important;
  color: var(--navy-deep) !important;
}

.select__placeholder {
  color: #0f2b46 !important;
  color: var(--navy-deep) !important;
}

.bold-text {
  font-weight: bold !important;
}

.heading-one {
  font-size: 40px !important;
}

.heading-two {
  font-size: 30px !important;
}

.heading-three {
  font-size: 25px !important;
}

.heading-four {
  font-size: 22px !important;
}

.heading-five {
  font-size: 20px !important;
}

.heading-six {
  font-size: 16px !important;
}

.underline-u {
  text-decoration: underline !important;
}

.bold-text {
  font-weight: bold !important;
}

.custom-input::-webkit-outer-spin-button,
.custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-input[type='number'] {
  appearance: textfield;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  background-color:transparent !important;
}

/* Preserve background color for donor and jobber buttons when active/focused */
.btn.bg-donor-color:active,
.btn.bg-donor-color.active,
.btn.bg-donor-color:focus,
.btn.bg-donor-color:focus-visible {
  background-color: #68b2cb !important;
  background-color: var(--bg-donor-color) !important;
}

.btn.bg-button-blue-color:active,
.btn.bg-button-blue-color.active,
.btn.bg-button-blue-color:focus,
.btn.bg-button-blue-color:focus-visible {
  background-color: #0f2b46 !important;
  background-color: var(--bg-blue-color) !important;
}

/* Primary navy buttons — Navy Mid on hover (contractor only) */
.btn.bg-blue-color:hover:not(:disabled):not(.disabled):not(.bg-donor-color),
.btn.bg-button-blue-color:hover:not(:disabled):not(.disabled) {
  background-color: #1a3f5c !important;
  background-color: var(--navy-mid) !important;
  border-color: #1a3f5c !important;
  border-color: var(--navy-mid) !important;
}

/* Donor mode — teal palette (not navy) */
.btn.bg-donor-color:hover:not(:disabled):not(.disabled),
.btn.bg-donor-color:focus-visible:not(:disabled) {
  background-color: #5bb5c9 !important;
  background-color: var(--donor-hover-bg) !important;
  border-color: #29b3e2 !important;
  border-color: var(--border-donor-color) !important;
}

/* Dropdown toggle — hover uses Navy Mid when closed; open state stays Navy Deep */
.dropdown-toggle.bg-blue-color:hover:not(:disabled):not(.disabled):not(.show):not([aria-expanded="true"]) {
  background-color: #1a3f5c !important;
  background-color: var(--navy-mid) !important;
  background: #1a3f5c !important;
  background: var(--navy-mid) !important;
  color: #fff !important;
  border-color: #1a3f5c !important;
  border-color: var(--navy-mid) !important;
}

/* Preserve background color for dropdown toggle with bg-blue-color */
.dropdown-toggle.bg-blue-color:active,
.dropdown-toggle.bg-blue-color.active,
.dropdown-toggle.bg-blue-color:focus,
.dropdown-toggle.bg-blue-color:focus-visible,
.dropdown-toggle.bg-blue-color.show,
.dropdown-toggle.bg-blue-color[aria-expanded="true"] {
  background-color: #0f2b46 !important;
  background-color: var(--bg-blue-color) !important;
  background: #0f2b46 !important;
  background: var(--bg-blue-color) !important;
  color: #fff !important;
  border-color: #0f2b46 !important;
  border-color: var(--bg-blue-color) !important;
}

/* Preserve background color for dropdown toggle with bg-donor-color */
.dropdown-toggle.bg-donor-color:active,
.dropdown-toggle.bg-donor-color.active,
.dropdown-toggle.bg-donor-color:focus,
.dropdown-toggle.bg-donor-color:focus-visible,
.dropdown-toggle.bg-donor-color.show,
.dropdown-toggle.bg-donor-color[aria-expanded="true"] {
  background-color: #68b2cb !important;
  background-color: var(--bg-donor-color) !important;
  background: #68b2cb !important;
  background: var(--bg-donor-color) !important;
  color: #fff !important;
  border-color: #68b2cb !important;
  border-color: var(--bg-donor-color) !important;
}

/* Custom Checkbox Styles */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #0f2b46;
  border: 1px solid var(--navy-deep);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  background-color: white;
}

.custom-checkbox:checked {
  background-color: #0f2b46;
  background-color: var(--navy-deep);
}

.custom-checkbox:checked::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  top: 2px;
  left: 6px;
  transform: rotate(45deg);
}

.custom-checkbox:disabled {
  background-color: #e0e0e0;
  border-color: #a0a0a0;
  cursor: not-allowed;
}

.custom-checkbox:disabled:checked::before {
  border-color: #a0a0a0;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.bg-red-color {
  background-color: #dc2626 !important;
  background-color: var(--bg-red-color) !important;
}

.text-red-color {
  color: #dc2626 !important;
  color: var(--bg-red-color) !important;
}



.css-16s9uyk-MuiFormHelperText-root {
  margin-left: 0 !important;
}
/**
 * Report top bar: back + title + Export As (reactstrap CardHeader ignores MUI `sx`).
 * CSS Grid keeps title + export on ONE row; title truncates instead of wrapping export below.
 */

.report-ressponsive {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  grid-column-gap: 10px !important;
  column-gap: 10px !important;
  grid-row-gap: 0 !important;
  row-gap: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Left block: back + title */
.report-ressponsive > *:first-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.report-ressponsive > *:first-child > .MuiButton-root,
.report-ressponsive > *:first-child > button {
  flex-shrink: 0 !important;
}

.report-ressponsive > *:first-child .MuiTypography-root {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Export control: never steal full width or drop to next row */
.report-ressponsive > *:last-child {
  justify-self: end !important;
  flex-shrink: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

.report-ressponsive > *:last-child .export-dropdown-toggle {
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  .report-ressponsive {
    column-gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .report-ressponsive .export-dropdown-toggle {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.8125rem !important;
    min-height: 36px !important;
  }

  .report-ressponsive > *:first-child > .MuiButton-root,
  .report-ressponsive > *:first-child > button {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
  }

  .report-ressponsive > *:first-child .MuiTypography-root {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 380px) {
  .report-ressponsive > *:first-child .MuiTypography-root {
    font-size: 0.875rem !important;
  }

  .report-ressponsive .export-dropdown-toggle {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.75rem !important;
  }
}

.login {
  min-height: 100vh;
  height: 100%;
  width: 100vw;
  background-color: #fff;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.login .px-3 {
  padding: 56px !important;
}

.login .flex-direction-column {
  flex-direction: column;
}

.login .justify-content-center {
  justify-content: center;
}

.login .align-items-center {
  align-items: center;
}

.login .app-logo img {
  height: 65px;
  margin-left: 95px;
}

.login .img img {
  height: 95%;
  width: 95%;
}

.login .text {
  font-family: "Poppins";
  font-weight: 600;
  font-size: 40px;
  line-height: 60px;
}

/* Role Selection Card Styles */
.role-selection-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: var(--shadow-md);
}

.role-selection-card:hover {
  border-color: #2563eb;
  background-color: #f8f9fa;
  box-shadow: var(--shadow-md);
}

.role-selection-card.selected {
  border: 2px solid #2563eb;
  background-color: #f3f8ff;
  box-shadow: var(--shadow-md);
}

/* Compact Role Selection Card Styles */
.role-selection-card-compact {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  margin-bottom: 6px;
  box-shadow: var(--shadow-sm);
}

.role-selection-card-compact:hover {
  border-color: #2563eb;
  background-color: #f8f9fa;
  box-shadow: var(--shadow-md);
}

.role-selection-card-compact.selected {
  border: 2px solid #2563eb;
  background-color: #f3f8ff;
  box-shadow: var(--shadow-md);
}

/* Custom Scrollbar Styles */
.role-selection-scroll::-webkit-scrollbar {
  width: 6px;
}

.role-selection-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.role-selection-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.role-selection-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Firefox scrollbar */
.role-selection-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Desktop: 2 accounts visible; Responsive: 4 accounts */
@media (min-width: 769px) {
  .role-selection-scroll {
    max-height: 200px !important;
    height: auto !important;
    min-height: auto !important;
  }
}

/* Responsive Styles for Role Selection - 4 accounts */
@media (max-width: 768px) {
  .role-selection-card-compact {
    padding: 8px;
    margin-bottom: 4px;
  }

  .role-selection-scroll {
    height: 300px !important;
    max-height: 300px !important;
    min-height: 260px !important;
    padding: 8px !important;
  }
}

@media (max-width: 480px) {
  .role-selection-card-compact {
    padding: 6px;
    margin-bottom: 3px;
  }

  .role-selection-scroll {
    height: 280px !important;
    max-height: 280px !important;
    min-height: 240px !important;
    padding: 6px !important;
  }

  .role-selection-card-compact .MuiFormControlLabel-label {
    font-size: 13px !important;
  }

  .role-selection-card-compact .MuiTypography-root {
    font-size: 12px !important;
  }
}

.login .text2 {
  font-family: "Poppins";
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.step-1 h3 {
  color: rgba(127, 17, 224, 60%);
}

.steps {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .steps {
    width: 100%;
  }


  .phonenumber-signup {
    margin-bottom: 0 !important;
  }

  .Drop {
    margin-top: 0 !important;
  }

  .cs-rs__control {
    margin-top: -8px !important;
  }

  .secondstrpMarginTOP {
    margin-top: 20px !important;
  }
}

.steps .my-steps {
  max-width: 75%;
  width: 100%;
  /* padding: auto; */
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: start; */
}

.steps .btn-circle {
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-size: 24px;
  line-height: 30px;
  background-color: rgba(51, 53, 71, 1);
  border: none;
  background-color: var(--amber) !important;
}

.steps .btn-circle.bg-donor-color {
  background-color: #68b2cb !important;
}

.fullnemae label#ownerName-label {
  margin-top: 0 !important;
}

.fullnemae label#phoneNumber-label {
  margin-top: 0 !important;
}

.cs-rs__control {
  border-radius: 8px !important;
}

.cs-rs__single-value {
  color: #0f2b46 !important;
}

.steps .btn-square {
  width: 86px;
  height: 56px;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  background-color: rgba(51, 53, 71, 1);
  border: none;
  font-family: "Poppins";
  letter-spacing: 4%;
  font-weight: 600;
}

.steps .btn-circle::after {
  background-color: rgba(51, 53, 71, 1);
  color: #fff;
}

.steps .btn-square::after {
  background-color: rgba(51, 53, 71, 1);
  color: #fff;
}

.steps .btn-circle:active {
  background-color: rgba(51, 53, 71, 1);
  color: #fff;
}

.steps .btn-square:active {
  background-color: rgba(51, 53, 71, 1);
  color: #fff;
}

.steps #multi-step-form {
  overflow-x: visible !important;
  width: 100%;
}

.steps .progress-bar {
  background-color: rgba(51, 53, 71, 1);
}

.steps .app-logo {
  margin: 15px 0;
}

.steps .app-logo img {
  width: 208px;
  height: 63px;
}

.steps .form-control:focus {
  border: 1px solid rgba(121, 116, 126, 1) !important;
  outline: none !important;
  box-shadow: none !important;
}

.steps .form-control {
  outline: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.steps .form-control:hover {
  border: 1px solid rgba(121, 116, 126, 1) !important;
  outline: none !important;
  box-shadow: none !important;
}

.loginn {
  min-height: 100vh;
  height: 100%;
  width: 100vw;
  background-color: #fff;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.loginn .px-3 {
  padding: 56px !important;
}

.loginn .flex-direction-column {
  flex-direction: column;
}

.loginn .justify-content-center {
  justify-content: center;
}

.loginn .align-items-center {
  align-items: center;
}

.loginn .app-logo img {
  width: 125px;
  height: 50px;
}

.signup .app-logo {
  width: 80%;
  display: flex;
  justify-content: end;
}

.loginn .img img {
  height: 85%;
  width: auto;
}

.loginn .text {
  font-family: "Poppins";
  font-weight: 600;
  font-size: 40px;
  line-height: 60px;
}

.loginn .text2 {
  font-family: "Poppins";
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.loginnn {
  min-height: 100vh;
  height: 100%;
  width: 100vw;
  background-color: #fff;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.login .text2 {
  color: rgba(6, 49, 100, 60%);
}

.loginnn .flex-direction-column {
  flex-direction: column;
}

.loginnn .justify-content-center {
  justify-content: center;
}

.loginnn .align-items-center {
  align-items: center;
}

.loginnn .app-logo img {
  width: 125px;
  height: 50px;
}

.signup .app-logo {
  width: 80%;
  display: flex;
  justify-content: end;
}

.loginnn .img img {
  height: 85%;
  width: auto;
}

.loginnn .text {
  font-family: "Poppins";
  font-weight: 600;
  font-size: 40px;
  line-height: 60px;
}

.loginnn .text2 {
  font-family: "Poppins";
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.login .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root {
  border-radius: 10px !important;
}

/* Login password uses InputText (.cs-input-shell); eye lives in flex .cs-input-adorn--end — not MUI absolute adornment */
.login .login-password-field .cs-input-shell {
  max-width: 100%;
}
.login .login-password-field .cs-input-adorn--end {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

/* Login selected company - clear (x) icon: absolute center in box */
.login .login-selected-company-box {
  position: relative;
  align-items: center;
}
.login .login-selected-company-box .login-selected-company-clear-btn {
  position: absolute !important;
  right: 8px;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login .login-selected-company-box .login-selected-company-clear-btn svg {
  display: block;
}
/* Add right padding to left content so text doesn't go under the absolute button */
.login .login-selected-company-box > div:first-child {
  padding-right: 40px;
}

.fullnemae label#companyName-label {
  margin-top: 0 !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {
  /* .app-logos {
    margin-top: 60px;
  } */

  .app-logos img {
    width: 250px;
  }
}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {
  .inout-contener {
    padding-left: 30px !important;
  }

  .textboxes {
    margin-top: 0;
  }
}

/* 768 */
@media (max-width: 991px) {
  .signupinfo {
    order: 1 !important;
  }

  .signuplogo {
    order: 2 !important;
  }

  .fullname-step {
    margin-bottom: 0 !important;
  }

  .login .img img {
    width: 85% !important;
  }

  .inout-contener {
    padding: 0 25px !important;
  }

  .login .px-3 {
    padding: 0 !important;
  }

  .fullnemae {
    margin-bottom: 13px !important;
  }

  .basic-single {
    margin-bottom: 39px;
  }

  .formmm {
    width: 100% !important;
  }

  .signup .app-logo img {
    margin-left: 13px !important;
  }

  .forgotpassWordImageSet {
    display: contents !important;
  }

  .forgotpassWordImageSet img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-bottom: 15px !important;
  }

  .forgatePasswordNoneHe {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start !important;
    padding-top: 20px !important;
  }
}

/* 576 */
@media (max-width: 767px) {
  .inout-contener {
    padding: 0 30px !important;
  }

  .formmm {
    width: 100% !important;
  }

  .signup .app-logo {
    justify-content: left !important;
  }

  .login .app-logo img {
    margin-left: 0 !important;
  }

  .login .text {
    font-size: 22px;
  }

  .login .text2 {
    font-size: 12px;
  }

  .forgotpassWordImageSet img {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-bottom: 15px !important;
  }

  .main-imageeee {
    display: none !important;
  }

  .signupwith {
    width: 30%;
    margin-left: 35px !important;
  }

  .google-buttom-main {
    border: none !important;
  }

  .google-buttom-main img {
    border: 2px solid rgba(212, 148, 58, 50%);
    padding: 13px;
    border-radius: 50%;
  }
}

/* 525 */
@media (max-width: 575px) {
  .signupwith {
    width: 40%;
    margin-left: 35px !important;
  }

  .forgoFormSubmitClass {
    width: 77% !important;
  }

  .forgotHeadText {
    font-size: 20px !important;
    white-space: nowrap;
  }

  .new-password-form {
    height: auto !important;
    min-height: auto !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .app-logo img {
    margin-left: 10px !important;
  }

  .signupwith {
    width: 40%;
    margin-left: 17px !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .loginformcontent {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .login .app-logo {
    padding: 0 !important;
    padding-top: 20px !important;
  }

  .resetPassword-logo {
    margin-left: 86px !important;
  }

  .loginformcontent {
    padding: 0 !important;
  }

  .loginform {
    width: 100% !important;
    padding: 25px;
  }

  .login .app-logo img {
    margin-left: 0 !important;
  }

  .login .text {
    font-size: 22px;
  }

  .signupwith {
    width: 50%;
    margin-left: 17px !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  .signupwith {
    width: 60%;
    margin-left: 17px !important;
  }

  .login .app-logo img {
    height: 54px !important;
  }

  .basic-single {
    margin-bottom: 20px;
  }

  .forgotTopGive {
    margin-top: 20px !important;
  }

  .forgotpassWordImageSet img {
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* 320 */
@media (max-width: 374px) {
  .inout-contener {
    padding: 30px !important;
  }

  .formmm {
    width: 100% !important;
  }

  .signup .app-logo {
    justify-content: left !important;
  }

  .login .app-logo img {
    margin-left: 0 !important;
  }

  .login .text {
    font-size: 22px;
  }

  .login .text2 {
    font-size: 12px;
  }

  .signupwith {
    width: 70%;
    margin-left: 12px !important;
  }
}

/* 280 */
@media (max-width: 319px) {
  .inout-contener {
    padding: 30px !important;
  }

  .formmm {
    width: 100% !important;
  }

  .signup .app-logo {
    justify-content: left !important;
  }

  .login .app-logo img {
    margin-left: 0 !important;
  }

  .login .text {
    font-size: 22px;
  }

  .login .text2 {
    font-size: 12px;
  }

  .signupwith {
    width: 100%;
    margin-left: 12px !important;
  }
}

@media (max-width: 899px) {
  .login .img img {
    height: auto;
    width: 85%;
  }

  .maon-forget-password {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .new-password-form {
    height: auto !important;
    min-height: auto !important;
  }

  .forgoFormSubmitClass {
    height: auto !important;
    min-height: auto !important;
  }

  .forgatePasswordNoneHe {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start !important;
    padding-top: 20px !important;
  }

  .reset-image {
    display: none !important;
  }

  .main-imageeee {
    display: none !important;
  }

  .steps {
    padding: 30px;
  }

  .steps .my-steps {
    max-width: 100% !important;
  }

  .content {
    font-size: 22px !important;
  }

  .fullnemae {
    margin-bottom: 50px;
  }

  .login .app-logo {
    padding: 0 !important;
    padding-top: 20px !important;
  }

  .loginformcontent {
    padding: 0 !important;
  }

  .loginform {
    width: 100% !important;
    padding: 25px;
    margin-left: 0px !important;
  }

  .login .app-logo img {
    margin-left: 0 !important;
  }

  .login .text {
    font-size: 22px;
  }

  .forgotImg_cdn {
    display: none !important;
  }

  .login-image {
    display: none !important;
    height: 0 !important;
  }

  .imageHeightRemove {
    height: 0 !important;
  }

  .signup-image {
    display: none;
  }

  .signup-image-col {
    display: none !important;
  }

  .leftsidebvo {
    display: none !important;
  }

  .signup .app-logo img {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
  }

  .signup .app-logo {
    justify-content: left;
  }

  .formmm {
    width: 100% !important;
  }

  .signup .app-logo img {
    margin-left: 13px !important;
  }

  .loginFormFirst {
    margin-left: 0% !important;
  }

  .firgitPasswordImg {
    display: none;
  }

  .decreaseSizeHei {
    height: 0px !important;
    display: none !important;
  }

  .setImg_cdn {
    display: none !important;
  }

  .forgotPasswordMainImg {
    width: 170px !important;
  }

  .signUpPageForm {
    flex-direction: column !important;
  }

  .formColRawWidth {
    width: 100% !important;
  }

  .freetrialHeadFont {
    font-size: 17px !important;
  }
}

.google-login-button {
  border: none !important;
}

.google-login {
  background-color: rgb(255, 255, 255);
  display: inline-flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.54);
  box-shadow: none !important;
  padding: 0px;
  border-radius: 4px !important;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body), "Segoe UI", sans-serif;
  justify-content: center !important;
  border: 2px solid rgba(212, 148, 58, 50%) !important;
}

.google-login {
  font-size: 0 !important;
}

.google-login .google-button-text {
  display: none !important;
}

.google-login .google-icon {
  display: inline-block !important;
}


.signup-image,
.signup-image-donor {
  max-width: 100%;
  max-height: 100%;
  /* width: auto;
  height: auto; */
  /* object-fit: contain;
  object-position: center; */
  display: block;
}

.signup-image.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #dcdcdc 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.signup-image.loaded {
  background: none;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.login-image {
  position: relative;
  border-radius: 30px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* overflow: hidden; */
}

@media (max-width: 1024px) {
  .login-image {
    background-attachment: scroll;
    background-attachment: initial;
  }
}

.leftsidebvo {
  height: 100%;
  overflow: visible;
  width: fit-content;
  width: 100%;
  max-width: 50%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background-container {
  /* position: relative;
  height: 100vh;
  width: 100%; */
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: cover;
  /* border-bottom-left-radius: 30px !important; */
  /* display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: background-image 0.5s ease-in-out; */
}

.trial_img {
  width: 100%;
  height: 100vh;
  background-image: url(/static/media/Step-one.55aa53b7daf6d5037e90.png);
}

.trial_img_donor {
  width: 100%;
  height: 100vh;
  background-image: url(/static/media/Signup-Step-1.63d5873bd3fd2ad59362.png);
}

.trial_second {
  width: 100%;
  height: 100vh;
  background-image: url(/static/media/sign_up2.5f508b4f447c83ecd07a.jpg);
}

.trial_img_donor_second {
  width: 100%;
  height: 100vh;
  background-image: url(/static/media/signup-step-2-donor.212a6440102dc4451b48.png);
}

/* .background-container.loading {
  background: linear-gradient(90deg,
      rgba(224, 224, 224, 0.8) 25%,
      rgba(224, 224, 224, 0.4) 50%,
      rgba(224, 224, 224, 0.8) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
} */

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.forgotImg_cdn {
  position: relative;
  width: 100%;
  height: 100vh;
  min-width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(/static/media/forget.1daf3b8983bc28a7de67.png);
  margin: 0;
  padding: 0;
}
.resetImg_cdn {
  position: relative;
  width: 100%;
  height: 100vh;
  min-width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(/static/media/reset.b4a768d3a8293119d76b.png);
  margin: 0;
  padding: 0;
}
.setImg_cdn {
  position: relative;
  width: 100%;
  height: 100vh;
  min-width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/static/media/set%20pass.4dc742653d7864e2004d.png");
  margin: 0;
  padding: 0;
}

.forgotImg_cdn.loading {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.8) 25%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.8) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.forgotImg_cdn.loaded {
  background-image: url(/static/media/Forget-password-one.0485f2e085253977c749.png);
  border-radius: 20px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.widthSetHere {
  width: 100% !important;
}

/* .signup-logo img {
  margin-top: 31px !important;
  margin-left: 90px !important;
} */

/* Signup Progress Bar Styles */
.signup-progress-bar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 24px;
  padding: 0;
  position: relative;
  gap: 0;
  margin-top: 40px;
}

.progress-bar-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  position: relative;
  gap: 0;
  padding: 0 20px;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  min-width: fit-content;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  flex-shrink: 0;
}

/* Completed step - filled orange with white border and checkmark */
.step-circle.completed {
  background-color: rgba(212, 148, 58, 1);
  border: 2px solid rgba(255, 255, 255, 1);
}

/* Active step (Step 1 when active) - filled orange with white border and number */
.step-circle.active {
  background-color: rgba(212, 148, 58, 1);
  border: 2px solid rgba(255, 255, 255, 1);
}

.step-circle.active .step-number {
  color: rgba(255, 255, 255, 1);
}

/* Current step (Step 2 or 3 when active) - white background with orange border and orange number */
.step-circle.current {
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(212, 148, 58, 1);
}

/* Inactive step - white background with light gray border and gray number */
.step-circle.inactive {
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(212, 148, 58, 0.2);
}

.step-number {
  font-size: 16px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  transition: color 0.3s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Number color for current step - orange */
.step-circle.current .step-number {
  color: rgba(212, 148, 58, 1);
}

/* Number color for inactive step - light gray */
.step-circle.inactive .step-number {
  color: rgba(212, 148, 58, 0.3);
}

/* Checkmark for completed steps */
.step-checkmark {
  color: rgba(255, 255, 255, 1) !important;
  font-size: 20px !important;
  font-weight: bold;
}

.step-label {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  transition: color 0.3s ease;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 0;
}

/* Active/Current label - orange */
.step-label.active {
  color: rgba(212, 148, 58, 1);
  font-weight: 500;
}

/* Inactive label - gray */
.step-label:not(.active) {
  color: rgba(153, 153, 153, 1);
}

.progress-line-background {
  position: absolute;
  left: 20px; /* Start from left edge of first step circle (padding) */
  top: 20px;
  height: 2px;
  width: calc(100% - 80px); /* Total width minus left padding (20px) and right padding+circle (60px) */
  background-color: rgba(212, 148, 58, 0.2);
  z-index: 0;
}

.progress-line-fill {
  position: absolute;
  left: 20px; /* Start from left edge of first step circle */
  top: 20px;
  height: 2px;
  background-color: rgba(212, 148, 58, 1);
  transition: width 0.4s ease;
  z-index: 1;
}

/* Donation Mode Styles for Progress Bar */
/* Completed step - filled blue with white border */
.step-circle.donor-color.completed {
  background-color: rgba(104, 178, 203, 1) !important;
  border: 2px solid rgba(255, 255, 255, 1) !important;
}

/* Active step (Step 1 when active) - filled blue with white border */
.step-circle.donor-color.active {
  background-color: rgba(104, 178, 203, 1) !important;
  border: 2px solid rgba(255, 255, 255, 1) !important;
}

.step-circle.donor-color.active .step-number.donor-color {
  color: rgba(255, 255, 255, 1) !important;
}

/* Current step - white background with blue border */
.step-circle.donor-color.current {
  background-color: rgba(255, 255, 255, 1) !important;
  border: 2px solid rgba(104, 178, 203, 1) !important;
}

/* Inactive step - white background with light blue border */
.step-circle.donor-color.inactive {
  background-color: rgba(255, 255, 255, 1) !important;
  border: 2px solid rgba(104, 178, 203, 0.2) !important;
}

/* Number color for current step - blue */
.step-circle.donor-color.current .step-number.donor-color {
  color: rgba(104, 178, 203, 1) !important;
}

/* Number color for inactive step - light blue */
.step-circle.donor-color.inactive .step-number.donor-color {
  color: rgba(104, 178, 203, 0.3) !important;
}

/* Checkmark for completed steps */
.step-circle.donor-color.completed .step-checkmark {
  color: rgba(255, 255, 255, 1) !important;
}

.step-label.donor-color.active {
  color: rgba(104, 178, 203, 1) !important;
  font-weight: 500;
}

.step-label.donor-color:not(.active) {
  color: rgba(153, 153, 153, 1) !important;
}

.progress-line-background.donor-color {
  background-color: rgba(104, 178, 203, 0.2) !important;
}

.progress-line-fill.donor-color {
  background-color: rgba(104, 178, 203, 1) !important;
}

/* Responsive styles for progress bar */
@media (max-width: 1023px) {
  .signup-progress-bar {
    margin-top: 30px;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .signup-progress-bar {
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 0 10px;
  }

  .step-circle {
    width: 36px;
    height: 36px;
  }

  .step-number {
    font-size: 14px;
  }

  .step-label {
    font-size: 12px;
    margin-top: 8px;
  }

  .progress-bar-container {
    padding: 0 15px;
  }

  .progress-line-background {
    left: 15px; /* Start from left edge of first step circle */
    top: 18px;
    /* width: calc(100% - 66px); Total width minus left padding (15px) and right padding+circle (51px) */
  }

  .progress-line-fill {
    left: 15px; /* Start from left edge of first step circle */
    top: 18px;
  }
}

@media (max-width: 575px) {
  .signup-progress-bar {
    margin-top: 15px;
    margin-bottom: 16px;
    padding: 0 5px;
  }
}

@media (max-width: 479px) {
  .step-label {
    font-size: 11px;
    white-space: normal;
    line-height: 1.1;
    margin-top: 6px;
  }

  .step-circle {
    width: 32px;
    height: 32px;
  }

  .step-number {
    font-size: 13px;
  }

  .progress-bar-container {
    padding: 0 10px;
  }

  .progress-line-background {
    left: 10px; /* Start from left edge of first step circle */
    top: 16px;
    width: calc(100% - 52px); /* Total width minus left padding (10px) and right padding+circle (42px) */
  }

  .progress-line-fill {
    left: 10px; /* Start from left edge of first step circle */
    top: 16px;
  }

  .signup-progress-bar {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 0 3px;
  }
}

@media (max-width: 374px) {
  .signup-progress-bar {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 2px;
  }

  .step-circle {
    width: 28px;
    height: 28px;
  }

  .step-number {
    font-size: 12px;
  }

  .step-label {
    font-size: 10px;
  }

  .progress-bar-container {
    padding: 0 8px;
  }

  .progress-line-background {
    left: 8px; /* Start from left edge of first step circle */
    top: 14px;
    /* width: calc(100% - 44px); Total width minus left padding (8px) and right padding+circle (36px) */
  }

  .progress-line-fill {
    left: 8px; /* Start from left edge of first step circle */
    top: 14px;
  }
}

/* ===== RESPONSIVE STYLES FOR STEPS COMPONENT ===== */

/* Logo Responsive Styles */
.signup-logo-img {
  width: 330px;
  height: auto;
  max-width: 100%;
  transition: width 0.3s ease;
}

/* Step Heading Styles */
.step-heading {
  font-size: 25px;
  color: rgba(51, 53, 71, 1);
  line-height: 60px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  padding: 20px 0 0 0;
  transition: all 0.3s ease;
}

/* Step Subheading Styles */
.step-subheading {
  font-size: 16px;
  color: rgba(51, 53, 71, 1);
  line-height: 24px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin-bottom: 40px;
  transition: all 0.3s ease;
}

.step-2-subheading {
  margin-bottom: 15px;
}

/* Form Label Styles */
.form-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 10px;
  display: block;
  transition: all 0.3s ease;
}

.form-label-step2 {
  margin-top: 20px;
}

/* Step Buttons Container */
.step-buttons-container {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

/* .step-button {
  flex: 1;
  min-width: 120px;
} */

/* Side Image Styles */
.signup-side-image {
  /* display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; */
  width: 100%;
}

.signup-side-image-img {
  width: 100%;
  /* height: 100vh; */
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
}

/* Steps Container */
.steps-container {
  /* min-height: 100vh; */
  padding: 0;
  margin: 0;
}

.steps-form-container {
  /* padding: 20px; */
}

.signup-form-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.cs-rs__control {
  margin-top: 0 !important;
}
/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Large Desktop (1440px and above) */
@media (min-width: 1440px) {
  .signup-logo-img {
    width: 330px;
  }

  .step-heading {
    font-size: 28px;
    line-height: 65px;
  }

  .steps-form-container {
    padding: 30px 40px;
  }
}

/* Desktop (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .signup-logo-img {
    width: 300px;
  }

  .step-heading {
    font-size: 26px;
    line-height: 62px;
  }
}

/* Tablet Landscape (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .signup-logo-img {
    width: 280px;
  }

  .step-heading {
    font-size: 24px;
    line-height: 58px;
    padding: 15px 0 0 0;
  }

  .step-subheading {
    font-size: 15px;
    margin-bottom: 35px;
  }

  .form-label {
    font-size: 17px;
  }

  .steps-form-container {
    padding: 20px 30px;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .signup-logo-img {
    width: 250px;
  }

  .step-heading {
    font-size: 22px;
    line-height: 50px;
    padding: 15px 0 0 0;
  }

  .step-subheading {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 30px;
  }

  .step-2-subheading {
    margin-bottom: 12px;
  }

  .form-label {
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 8px;
  }

  .form-label-step2 {
    margin-top: 18px;
  }

  .step-buttons-container {
    gap: 12px;
    margin-top: 18px;
  }

  .steps-form-container {
    padding: 20px 25px;
  }

  .steps .my-steps {
    max-width: 85%;
  }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) {
  .signup-logo-img {
    width: 220px;
  }

  .step-heading {
    font-size: 20px;
    line-height: 40px;
    padding: 15px 0 0 0;
  }

  .step-subheading {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 25px;
  }

  .step-2-subheading {
    margin-bottom: 10px;
  }

  .form-label {
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 8px;
  }

  .form-label-step2 {
    margin-top: 15px;
  }

  .step-buttons-container {
    gap: 10px;
    margin-top: 15px;
    flex-direction: column;
  }

  .step-button {
    width: 100%;
    min-width: 100%;
  }

  .steps-form-container {
    padding: 15px 20px;
  }

  .steps .my-steps {
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 20px 0;
  }

  .signup-side-image {
    display: none !important;
  }

  .signup-side-image-img {
    display: none !important;
  }

  .steps-container {
    padding: 0;
  }

  .app-logos {
    margin-bottom: 20px !important;
  }
}

/* Mobile Medium (425px - 575px) */
@media (max-width: 575px) {
  .signup-logo-img {
    width: 200px;
    max-width: 90%;
  }

  .step-heading {
    font-size: 18px;
    line-height: 35px;
    padding: 12px 0 0 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .step-subheading {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 20px;
    word-wrap: break-word;
  }

  .step-2-subheading {
    margin-bottom: 8px;
  }

  .form-label {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 6px;
    word-wrap: break-word;
  }

  .form-label-step2 {
    margin-top: 12px;
  }

  .step-buttons-container {
    gap: 8px;
    margin-top: 12px;
    flex-direction: column;
    width: 100%;
  }

  .step-button {
    width: 100% !important;
    min-width: 100% !important;
  }

  .steps-form-container {
    padding: 12px 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .steps .my-steps {
    padding: 15px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .steps {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .app-logos {
    margin-bottom: 15px !important;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .signup-progress-bar {
    margin-top: 20px;
    margin-bottom: 16px;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
  }

  .fullnemae {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .Drop {
    width: 100%;
    /* margin-top: 0 !important; */
  }

  #multi-step-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .step {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Specific fix for 525px and below */
@media (max-width: 525px) {
  .signup-logo-img {
    width: 180px;
    max-width: 85%;
  }

  .step-heading {
    font-size: 17px;
    line-height: 32px;
    padding: 10px 0 0 0;
  }

  .step-subheading {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 18px;
  }

  .form-label {
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 5px;
  }

  .steps-form-container {
    padding: 10px 12px;
  }

  .steps .my-steps {
    padding: 12px 0;
  }

  .app-logos {
    padding: 0 8px;
  }

  .signup-progress-bar {
    padding: 0 3px;
  }

  .step-buttons-container {
    gap: 6px;
    margin-top: 10px;
  }
}

/* Mobile Small (375px - 424px) */
@media (max-width: 424px) {
  .signup-logo-img {
    width: 170px;
    max-width: 80%;
  }

  .step-heading {
    font-size: 16px;
    line-height: 28px;
    padding: 10px 0 0 0;
    word-wrap: break-word;
  }

  .step-subheading {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 18px;
    word-wrap: break-word;
  }

  .step-2-subheading {
    margin-bottom: 6px;
  }

  .form-label {
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 5px;
    word-wrap: break-word;
  }

  .form-label-step2 {
    margin-top: 10px;
  }

  .step-buttons-container {
    gap: 6px;
    margin-top: 10px;
    flex-direction: column;
    width: 100%;
  }

  .step-button {
    width: 100% !important;
    min-width: 100% !important;
  }

  .steps-form-container {
    padding: 10px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .steps .my-steps {
    padding: 12px 0;
    width: 100%;
    max-width: 100%;
  }

  .app-logos {
    margin-bottom: 12px !important;
    padding: 0 5px;
  }

  .signup-progress-bar {
    margin-top: 15px;
    margin-bottom: 12px;
    padding: 0 2px;
  }

  .freetrialHeadFont {
    font-size: 16px !important;
    line-height: 28px !important;
    word-wrap: break-word;
  }

  .fullnemae {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .steps {
    width: 100%;
    padding: 0;
  }
}

/* Mobile Extra Small (320px - 374px) */
@media (max-width: 374px) {
  .signup-logo-img {
    width: 150px;
    max-width: 75%;
  }

  .step-heading {
    font-size: 15px;
    line-height: 26px;
    padding: 8px 0 0 0;
    word-wrap: break-word;
  }

  .step-subheading {
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 15px;
    word-wrap: break-word;
  }

  .step-2-subheading {
    margin-bottom: 5px;
  }

  .form-label {
    font-size: 13px;
    margin-top: 6px;
    margin-bottom: 4px;
    word-wrap: break-word;
  }

  .form-label-step2 {
    margin-top: 8px;
  }

  .step-buttons-container {
    gap: 5px;
    margin-top: 8px;
    flex-direction: column;
    width: 100%;
  }

  .step-button {
    width: 100% !important;
    min-width: 100% !important;
  }

  .steps-form-container {
    padding: 8px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .steps .my-steps {
    padding: 10px 0;
    width: 100%;
    max-width: 100%;
  }

  .app-logos {
    margin-bottom: 10px !important;
    padding: 0 5px;
  }

  .signup-progress-bar {
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 0 2px;
  }

  .freetrialHeadFont {
    font-size: 15px !important;
    line-height: 26px !important;
    word-wrap: break-word;
  }

  .fullnemae {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .steps {
    width: 100%;
    padding: 0;
  }
}

/* SignUp Component Responsive Styles */
.signup-container {
  width: 100%;
  min-height: 100vh;
}

.signup-form-col {
  padding: 20px;
}

.signup-form-wrapper {
  width: 100%;
  max-width: 100%;
}

.signup-logo-wrapper {
  margin-bottom: 20px;
}

.signup-logo-img {
  width: 330px;
  max-width: 100%;
  height: auto;
  transition: width 0.3s ease;
}

.signup-form-inner {
  width: 100%;
}

.signup-form {
  width: 100%;
  max-width: 100%;
}

.signup-heading {
  font-size: 40px;
  line-height: 60px;
  transition: all 0.3s ease;
}

/* .signup-form-label {
  font-size: 18px;
  transition: all 0.3s ease;
} */

/* .signup-image-col {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
} */

/* Tablet Landscape (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .signup-logo-img {
    width: 280px;
  }

  .signup-heading {
    font-size: 36px;
    line-height: 54px;
  }

  .signup-form-inner {
    padding-left: 60px !important;
  }

  .signup-form {
    width: 90% !important;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .signup-logo-img {
    width: 250px;
  }

  .signup-heading {
    font-size: 32px;
    line-height: 48px;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* .signup-form-label {
    font-size: 16px;
    margin-bottom: 15px !important;
  } */

  .signup-form-inner {
    padding-left: 40px !important;
  }

  .signup-form {
    width: 95% !important;
  }

  .signup-image-col {
    display: none !important;
  }

  .signup-form-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) {
  .signup-logo-img {
    width: 220px;
    max-width: 90%;
  }

  .signup-heading {
    font-size: 28px;
    line-height: 42px;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* .signup-form-label {
    font-size: 16px;
    margin-bottom: 15px !important;
  } */

  .signup-form-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }

  .signup-form {
    width: 100% !important;
    padding: 0 20px;
  }

  .signup-form-col {
    padding: 15px;
  }

  .signup-image-col {
    display: none !important;
  }

  .signup-form-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .signup-container {
    flex-direction: column;
  }
}

/* Mobile Medium (425px - 575px) */
@media (max-width: 575px) {
  .signup-logo-img {
    width: 200px;
    max-width: 85%;
  }

  .signup-heading {
    font-size: 24px;
    line-height: 36px;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  /* .signup-form-label {
    font-size: 15px;
    margin-bottom: 12px !important;
  } */

  .signup-form {
    padding: 0 15px;
  }

  .signup-form-col {
    padding: 10px;
  }
}

/* Mobile Small (375px - 424px) */
@media (max-width: 424px) {
  .signup-logo-img {
    width: 170px;
    max-width: 80%;
  }

  .signup-heading {
    font-size: 22px;
    line-height: 32px;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  /* .signup-form-label {
    font-size: 14px;
    margin-bottom: 10px !important;
  } */

  .signup-form {
    padding: 0 12px;
  }

  .signup-form-col {
    padding: 8px;
  }
}

/* Mobile Extra Small (320px - 374px) */
@media (max-width: 374px) {
  .signup-logo-img {
    width: 150px;
    max-width: 75%;
  }

  .signup-heading {
    font-size: 20px;
    line-height: 28px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  /* .signup-form-label {
    font-size: 13px;
    margin-bottom: 8px !important;
  } */

  .signup-form {
    padding: 0 10px;
  }
}

/* Very Small Screens (below 320px) */
@media (max-width: 319px) {
  .signup-logo-img {
    width: 130px;
    max-width: 70%;
  }

  .signup-heading {
    font-size: 18px;
    line-height: 26px;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* .signup-form-label {
    font-size: 12px;
    margin-bottom: 6px !important;
  } */

  .signup-form {
    padding: 0 8px;
  }
}

/* Sign Up primary CTA — same height as Log In "Continue" (48px, 4px radius) */
.signup-form .signup-primary-submit.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color,
.signup-form .signup-primary-submit.backgroundBlurBtn.bg-donor-color {
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

/* Additional responsive styles for SignUp form elements */
@media (max-width: 767px) {
  .signup-form .text-blue-color input {
    font-size: 14px !important;
  }

  .signup-form .signup-primary-submit {
    font-size: 14px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
  }

  .signup-form .MuiTypography-root {
    font-size: 13px !important;
  }
}

@media (max-width: 575px) {
  .signup-form .text-blue-color input {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }

  .signup-form .signup-primary-submit {
    font-size: 13px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
  }

  .signup-form .MuiTypography-root {
    font-size: 12px !important;
  }
}

@media (max-width: 424px) {
  .signup-form .text-blue-color input {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  .signup-form .signup-primary-submit {
    font-size: 12px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
  }

  .signup-form .MuiTypography-root {
    font-size: 11px !important;
  }
}

/* Very Small Screens (below 320px) - Steps component */
@media (max-width: 319px) {
  .step-heading {
    font-size: 14px;
    line-height: 24px;
    padding: 6px 0 0 0;
    word-wrap: break-word;
  }

  .step-subheading {
    font-size: 10px;
    line-height: 14px;
    margin-bottom: 12px;
    word-wrap: break-word;
  }

  .form-label {
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 3px;
    word-wrap: break-word;
  }

  .step-buttons-container {
    gap: 4px;
    margin-top: 6px;
    flex-direction: column;
    width: 100%;
  }

  .step-button {
    width: 100% !important;
    min-width: 100% !important;
  }

  .steps-form-container {
    padding: 6px 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .steps .my-steps {
    padding: 8px 0;
    width: 100%;
    max-width: 100%;
  }

  .app-logos {
    padding: 0 3px;
  }

  .signup-progress-bar {
    padding: 0 1px;
  }

  .freetrialHeadFont {
    font-size: 14px !important;
    line-height: 24px !important;
    word-wrap: break-word;
  }

  .fullnemae {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .steps {
    width: 100%;
    padding: 0;
  }
}

/* Input Field Height Responsive */
@media (max-width: 767px) {
  .trialPhoneNumberInput input,
  .text-blue-color input {
    font-size: 14px !important;
  }
}

@media (max-width: 525px) {
  .trialPhoneNumberInput input,
  .text-blue-color input {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
}

@media (max-width: 424px) {
  .trialPhoneNumberInput input,
  .text-blue-color input {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
}

/* Select Dropdown Responsive */
@media (max-width: 767px) {
  .basic-single .cs-rs__control {
    height: 48px !important;
    font-size: 14px !important;
  }

  .basic-single .cs-rs__control .cs-rs__single-value {
    font-size: 14px !important;
  }
}

@media (max-width: 525px) {
  .basic-single .cs-rs__control {
    height: 46px !important;
    font-size: 13px !important;
    margin-top: 10px !important;
  }

  .basic-single .cs-rs__control .cs-rs__single-value {
    font-size: 13px !important;
  }
}

@media (max-width: 424px) {
  .basic-single .cs-rs__control {
    height: 44px !important;
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  .basic-single .cs-rs__control .cs-rs__single-value {
    font-size: 12px !important;
  }
}

/* Autocomplete Responsive */
@media (max-width: 767px) {
  .MuiAutocomplete-root .MuiInputBase-root {
    font-size: 14px !important;
  }
}

@media (max-width: 525px) {
  .MuiAutocomplete-root .MuiInputBase-root {
    font-size: 13px !important;
  }

  .MuiAutocomplete-root .MuiInputBase-input {
    padding: 12px 14px !important;
  }
}

@media (max-width: 424px) {
  .MuiAutocomplete-root .MuiInputBase-root {
    font-size: 12px !important;
  }

  .MuiAutocomplete-root .MuiInputBase-input {
    padding: 10px 12px !important;
  }
}

/* Additional fixes for small screens */
@media (max-width: 525px) {
  .steps-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .steps-form-container {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .steps {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .steps .my-steps {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .step {
    width: 100%;
    max-width: 100%;
  }

  .step-1 {
    width: 100%;
    max-width: 100%;
  }

  #multi-step-form {
    width: 100%;
    max-width: 100%;
  }

  .fullnemae,
  .fullname-step,
  .phonenumber-signup {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .Drop {
    width: 100%;
    max-width: 100%;
  }

  .app-logos {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Ensure no horizontal scroll */
  body {
    overflow-x: hidden;
  }

  .steps-container * {
    box-sizing: border-box;
  }
}
/* ContractorSoft form fields — design spec §7 (flat label + soft gray shell)
   Payment gateway (NMI + Dejavoo): PaymentGatewayFields.css — imported in index.css */

:root {
  --cs-input-bg: #f7f8fa;
  --cs-input-bg-focus: #ffffff;
  --cs-input-border-default: #e5e7eb;
  --cs-input-border-hover: #d1d5db;
  --cs-input-border-focus: #2563eb;
  --cs-input-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cs-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.cs-form-field--full {
  width: 100%;
  max-width: 100%;
}

.cs-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.3;
  font-family: inherit;
  margin: 0;
  padding: 0;
}

.cs-field-label--error {
  color: #dc3545;
}

.cs-field-label-required {
  color: #dc3545;
  font-weight: 700;
  margin-left: 2px;
}

/* Parent .text-blue-color / theme utilities must not paint the star navy */
.cs-field-label .cs-field-label-required,
.cs-rs__label .cs-field-label-required,
.cs-currency-label .cs-field-label-required,
.text-blue-color .cs-field-label .cs-field-label-required,
.text-blue-color .cs-rs__label .cs-field-label-required {
  color: #dc3545 !important;
}

.cs-input-shell {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: #f7f8fa;
  background-color: var(--cs-input-bg);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-input-border-default);
  border-radius: 8px;
  /* Clip inner fill/autofill to the shell curve so corners stay flush with the border */
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.cs-input-shell:hover:not(.cs-input-shell--disabled) {
  border-color: #d1d5db;
  border-color: var(--cs-input-border-hover);
}

.cs-input-shell:focus-within:not(.cs-input-shell--disabled) {
  background-color: #ffffff;
  background-color: var(--cs-input-bg-focus);
  border-color: #2563eb;
  border-color: var(--cs-input-border-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  box-shadow: var(--cs-input-focus-ring);
}

.cs-input-shell--error {
  border-color: #dc3545 !important;
}

.cs-input-shell--error:focus-within {
  box-shadow: var(--focus-ring-error);
}

.cs-input-shell--multiline {
  height: auto !important;
  min-height: 80px;
  align-items: flex-start;
  overflow: visible;
}

.cs-input-shell--disabled {
  opacity: 0.72;
  cursor: not-allowed;
  background-color: #e2e8f0;
}

.cs-input {
  flex: 1 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  line-height: 1.4;
  color: #4b5563;
  padding: 10px 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.cs-input-shell:not(.cs-input-shell--multiline) .cs-input {
  height: 100%;
}

.cs-input-shell--multiline .cs-input {
  min-height: 72px;
  padding: 10px 14px;
  resize: vertical;
}

/*
 * Chrome autofill: override yellow fill with inset box-shadow.
 * Important: when blurred, :-webkit-autofill still matches — if we always use white,
 * the field stays white after leave while empty fields show shell grey. Idle must
 * use --cs-input-bg; only :focus-within uses --cs-input-bg-focus (white).
 */
.cs-input-shell:not(.cs-input-shell--multiline) .cs-input:-webkit-autofill,
.cs-input-shell:not(.cs-input-shell--multiline) .cs-input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #f7f8fa inset;
  -webkit-box-shadow: 0 0 0 1000px var(--cs-input-bg) inset;
  -webkit-text-fill-color: #4b5563;
  -webkit-transition: background-color 99999s ease-out 0s;
  transition: background-color 99999s ease-out 0s;
}

.cs-input-shell:focus-within:not(.cs-input-shell--multiline) .cs-input:-webkit-autofill,
.cs-input-shell:focus-within:not(.cs-input-shell--multiline) .cs-input:-webkit-autofill:hover,
.cs-input-shell:focus-within:not(.cs-input-shell--multiline) .cs-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-box-shadow: 0 0 0 1000px var(--cs-input-bg-focus) inset;
  -webkit-text-fill-color: #4b5563;
}

.cs-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.cs-input--right {
  text-align: right;
}

.cs-input--error-text {
  color: #dc3545 !important;
}

.cs-input--error-text::placeholder {
  color: #dc3545 !important;
}

select.cs-input {
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%234b5563%27 stroke-width=%272%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

/*
 * Date & Time Format settings: timezone = MUI Autocomplete → plain .cs-input (inherits body = Inter).
 * Date / time = MUI TextField select → theme typography = Poppins (see index.js createTheme).
 * Force Poppins here so the timezone value matches the two selects next to it.
 */
.cs-form-field.datetime-format-autocomplete--contractor .cs-input,
.cs-form-field.datetime-format-autocomplete--donor .cs-input {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4375;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.87);
  -webkit-font-smoothing: antialiased;
}

.cs-form-field.datetime-format-autocomplete--contractor .cs-input:-webkit-autofill,
.cs-form-field.datetime-format-autocomplete--donor .cs-input:-webkit-autofill {
  -webkit-text-fill-color: rgba(0, 0, 0, 0.87);
  font-family: "Poppins", sans-serif !important;
}

.cs-input-adorn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #64748b;
}

.cs-input-adorn--start {
  padding-left: 12px;
}

.cs-input-adorn--end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
  padding-left: 4px;
}

.cs-field-helper {
  font-size: 12px;
  color: #64748b;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.cs-field-helper--error {
  color: #d32f2f;
}

/* Google Places clear (×) */
.cs-gpa-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cs-gpa-clear:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}

/* react-select wrapper (InputDropdown) — match .cs-form-field label + control rhythm */
.cs-rs__wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* Dropdown panel — scroll list (menu is portaled; classPrefix cs-rs) */
.cs-rs__menu-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
}

.cs-rs__menu-list::-webkit-scrollbar {
  width: 8px;
}

.cs-rs__menu-list::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.9);
  border-radius: 8px;
}

.cs-rs__menu-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.75);
  border-radius: 8px;
}

.cs-rs__menu-list::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.85);
}

/* Open menu must stack above MUI Dialog/modals (react-select menuPortal) */
.cs-rs__menu-portal {
  z-index: 20000 !important;
}

.cs-rs__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  line-height: 1.3;
  font-family: inherit;
}

/* Error label must win over base .cs-rs__label color (same specificity, order) */
.cs-rs__label.cs-field-label--error {
  color: #dc3545;
}

/* react-select v5: single row — never wrap clear + chevron under the value (Profile / Address, etc.) */
.cs-rs__wrapper .cs-rs__control {
  flex-wrap: nowrap !important;
}
.cs-rs__wrapper .cs-rs__value-container {
  align-items: center !important;
  flex: 1 1 !important;
  min-width: 0 !important;
}
.cs-rs__wrapper .cs-rs__indicatorsContainer {
  flex-shrink: 0 !important;
}

.cs-rs__wrapper .cs-rs__placeholder,
.cs-rs__wrapper .cs-rs__single-value {
  margin: 0;
}

/* QuickDateFilter — same tokens as §7 form inputs */
.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__control {
  background-color: #f7f8fa !important;
  background-color: var(--cs-input-bg) !important;
  border-color: #e5e7eb !important;
  border-color: var(--cs-input-border-default) !important;
  box-shadow: none !important;
}

.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__control:hover {
  border-color: #d1d5db !important;
  border-color: var(--cs-input-border-hover) !important;
}

.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__control--is-focused {
  background-color: #ffffff !important;
  background-color: var(--cs-input-bg-focus) !important;
  border-color: #2563eb !important;
  border-color: var(--cs-input-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  box-shadow: var(--cs-input-focus-ring) !important;
}

.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__single-value {
  color: #374151 !important;
  font-weight: 500 !important;
}

.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__placeholder {
  color: #6b7280 !important;
}

.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__dropdown-indicator {
  color: #6b7280 !important;
}

.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__input-container,
.cs-rs__wrapper.quick-date-filter--like-quotes .cs-rs__input {
  color: #374151 !important;
}

/* Currency / amount — single soft bar (AMOUNT reference: one fill, grey border, $ left / value right) */
.cs-currency-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* Label — match .cs-field-label (sentence case; same as Frequency / account fields) */
.cs-currency-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: #64748b;
}

.cs-currency-label--error {
  color: #dc3545;
}

.cs-currency-label--disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.cs-currency-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background: #f7f8fa;
  background: var(--cs-input-bg);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-input-border-default);
  border-radius: 8px;
  position: relative;
  isolation: isolate;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.cs-currency-group:hover:not(.cs-currency-group--disabled):not(.cs-currency-group--error) {
  border-color: #d1d5db;
  border-color: var(--cs-input-border-hover);
}

/* Legacy wrappers often add .border-blue-color — keep neutral bar, not blue bottom/split look */
.cs-currency-field.border-blue-color .cs-currency-group {
  border-color: #e5e7eb !important;
  border-color: var(--cs-input-border-default) !important;
}

.cs-currency-symbol {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 600;
  color: #475569;
  -webkit-user-select: none;
          user-select: none;
  line-height: 1;
}

.cs-currency-input {
  flex: 1 1;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: #111827;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: inherit;
  text-align: right;
  transition: color 0.15s ease;
  /* Keep huge -webkit autofill inset from compositing with parent border + focus ring */
  contain: paint;
}

/* Chrome autofill: inset fill clipped to input only (contain: paint). Match group idle fill. */
.cs-currency-input:-webkit-autofill,
.cs-currency-input:-webkit-autofill:hover,
.cs-currency-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f7f8fa inset;
  -webkit-box-shadow: 0 0 0 1000px var(--cs-input-bg) inset;
  -webkit-text-fill-color: #111827;
  -webkit-transition: background-color 99999s ease-out 0s;
  transition: background-color 99999s ease-out 0s;
}

.cs-currency-group:focus-within:not(.cs-currency-group--disabled) .cs-currency-input:-webkit-autofill,
.cs-currency-group:focus-within:not(.cs-currency-group--disabled) .cs-currency-input:-webkit-autofill:hover,
.cs-currency-group:focus-within:not(.cs-currency-group--disabled) .cs-currency-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-box-shadow: 0 0 0 1000px var(--cs-input-bg-focus) inset;
  -webkit-text-fill-color: #111827;
}

.cs-currency-group--error:focus-within:not(.cs-currency-group--disabled) .cs-currency-input:-webkit-autofill,
.cs-currency-group--error:focus-within:not(.cs-currency-group--disabled) .cs-currency-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f7f8fa inset;
  -webkit-box-shadow: 0 0 0 1000px var(--cs-input-bg) inset;
  -webkit-text-fill-color: #111827;
}

/* Explicit left only when Doller isRight={false} */
.cs-currency-input.cs-currency-input--align-left {
  text-align: left;
}

.cs-currency-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.cs-currency-input:read-only {
  cursor: default;
  color: #334155;
}

.cs-currency-input--error-text {
  color: #dc3545 !important;
}

.cs-currency-input--error-text::placeholder {
  color: #f87171 !important;
}

/* Focus — :focus-within so $ + input behave like §7 (no React focus class).
   Avoid outer box-shadow ring here: it gets clipped by scroll/overflow ancestors and looks like
   “broken” corners. Border + fill match InputText; ring is optional elsewhere. */
.cs-currency-group:focus-within:not(.cs-currency-group--disabled):not(.cs-currency-group--error) {
  background-color: #ffffff;
  background-color: var(--cs-input-bg-focus);
  border-color: #2563eb;
  border-color: var(--cs-input-border-focus);
  box-shadow: none;
}

.cs-currency-group--error {
  border-color: #dc3545;
  background: #f7f8fa;
  background: var(--cs-input-bg);
}

.cs-currency-group--error:focus-within {
  border-color: #dc3545;
  box-shadow: none;
}

.cs-currency-end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cs-currency-group--disabled {
  opacity: 0.72;
  cursor: not-allowed;
  background: #e2e8f0;
}

.cs-currency-group--disabled .cs-currency-input {
  cursor: not-allowed;
  color: #64748b;
}

.cs-currency-group--disabled .cs-currency-symbol {
  color: #94a3b8;
}

/* Mobile Landscape (max-width: 767px) */
@media (max-width: 767px) {
  .cs-input-shell:not(.cs-input-shell--multiline) {
    min-height: 44px !important;
    height: 44px !important;
  }

  .cs-input:not(textarea) {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .cs-input-shell--multiline .cs-input {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .cs-input::placeholder {
    font-size: 14px !important;
  }

  .cs-field-label {
    font-size: 12px !important;
  }

  .cs-field-helper {
    font-size: 11px !important;
  }

  .cs-form-field,
  .cs-rs__wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Small Mobile (max-width: 575px) */
@media (max-width: 575px) {
  .cs-input-shell:not(.cs-input-shell--multiline) {
    min-height: 44px !important;
    height: 44px !important;
  }

  .cs-input:not(textarea) {
    font-size: 13px !important;
    padding: 10px 11px !important;
  }

  .cs-input-shell--multiline .cs-input {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  .cs-input::placeholder {
    font-size: 13px !important;
  }

  .cs-field-label {
    font-size: 12px !important;
  }

  .cs-field-helper {
    font-size: 10px !important;
  }
}

/* Extra Small Mobile (max-width: 424px) */
@media (max-width: 424px) {
  .cs-input-shell:not(.cs-input-shell--multiline) {
    min-height: 44px !important;
    height: 44px !important;
  }

  .cs-input:not(textarea) {
    font-size: 12px !important;
    padding: 10px !important;
  }

  .cs-input-shell--multiline .cs-input {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  .cs-input::placeholder {
    font-size: 12px !important;
  }

  .cs-field-label {
    font-size: 12px !important;
  }

  .cs-field-helper {
    font-size: 10px !important;
  }
}

/* Materials line item — Hourly qty: row height matches selects + $ fields on all breakpoints */
.getproduct .gl-line-item-field.hour_squre_unit .cs-input-shell:not(.cs-input-shell--multiline) {
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: 320px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1 1;
}
.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: #e74c3c;
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: #e74c3c;
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.edit-Icon {
  background-repeat: no-repeat;
  border: none !important;
  margin: 3px !important;
  width: 17px !important;
  height: 17px !important;
}

/* Responsive styles for ProductItem component */
.items-contract {
  width: 100%;
}

/* Desktop styles */
@media (min-width: 768px) {
  .productAndServiceScroll {
    min-width: 800px !important;
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
  .ScrollDiv {
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
}

/* Large Desktop styles */
@media (min-width: 1280px) and (max-width: 1919px) {
  .productAndServiceScroll {
    min-width: 800px !important;
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
  .ScrollDiv {
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
}

/* Tablet styles */
@media (max-width: 1279px) and (min-width: 768px) {
  .productAndServiceScroll {
    min-width: 800px !important;
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
  .ScrollDiv {
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
  .productServiceHead {
    font-size: 15px !important;
  }
  
  /* Better spacing for tablet */
  .items-contract .d-none.d-md-flex {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Mobile styles */
@media (max-width: 767px) {
  .totalOfQuoteDes {
    margin-top: 5px !important;
  }
  .productServiceHead {
    font-size: 14px !important;
  }
  
  /* Mobile card styles */
  .items-contract .d-block.d-md-none {
    padding: 0 8px;
  }
  
  /* Ensure proper spacing on mobile */
  .items-contract .d-block.d-md-none .MuiBox-root {
    margin-bottom: 12px;
  }
}

/* Small mobile styles */
@media (max-width: 575px) {
  .productServiceHead {
    font-size: 13px !important;
  }
  
  /* Adjust mobile card padding */
  .items-contract .d-block.d-md-none .MuiBox-root {
    padding: 12px !important;
  }
}

/* Extra small mobile styles */
@media (max-width: 424px) {
  .productServiceHead {
    font-size: 12px !important;
  }
  
  /* Further reduce padding for very small screens */
  .items-contract .d-block.d-md-none .MuiBox-root {
    padding: 8px !important;
  }
}

/* Ultra small mobile styles */
@media (max-width: 374px) {
  .productServiceHead {
    font-size: 11px !important;
  }
}

/* Legacy breakpoints for backward compatibility */
@media (max-width: 1700px) {
}

@media (max-width: 1680px) {
}

@media (max-width: 1449px) {
}

@media (max-width: 1439px) {}

@media (max-width: 1279px) {
  .productAndServiceScroll {
    min-width: 800px !important;
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
  .ScrollDiv {
    overflow-x: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
  .totalOfQuoteDes {
    margin-top: 5px !important;
  }
  .productServiceHead {
    font-size: 14px !important;
  }
}

@media (max-width: 575px) {
}

@media (max-width: 524px) {
}

@media (max-width: 479px) {
}

@media (max-width: 424px) {
}

@media (max-width: 374px) {
}

@media (max-width: 319px) {
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
    .backgroundBlurBtn{
        width: 100% !important;
     }
     .backgroundWhiteBtn{
        width: 100% !important;
     }
}

/* 280 */
@media (max-width: 319px) {}

/* Legacy blue blur buttons (not contractor BlueButton CTA) */
.backgroundBlurBtn.bg-blue-color:active:not(.blue-button--contractor),
.backgroundBlurBtn.bg-blue-color.active:not(.blue-button--contractor),
.backgroundBlurBtn.bg-blue-color.show:not(.blue-button--contractor) {
  background-color: var(--bg-blue-color) !important;
}

/* Contractor BlueButton — Navy Deep; flat (no hover/active color shift) */
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color:hover:not(:disabled):not(.disabled),
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color:focus,
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color:focus-visible,
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color:active,
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color.active,
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color.show {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color:disabled,
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Donor BlueButton — teal palette; flat (no hover/active color shift) */
.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color:hover:not(:disabled):not(.disabled),
.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color:focus,
.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color:focus-visible,
.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color:active,
.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color.active,
.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color.show {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color:disabled,
.btn.blue-button.blue-button--donor.backgroundBlurBtn.bg-donor-color.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.backgroundBlurBtn.bg-donor-color:active,
.backgroundBlurBtn.bg-donor-color.active,
.backgroundBlurBtn.bg-donor-color.show {
  background-color: var(--bg-donor-color) !important;
}

.backgroundBlurBtn.bg-orange-color:active,
.backgroundBlurBtn.bg-orange-color.active,
.backgroundBlurBtn.bg-orange-color.show {
  background-color: var(--bg-orange-color) !important;
}

.backgroundBlurBtn.bg-grey-color:active,
.backgroundBlurBtn.bg-grey-color.active,
.backgroundBlurBtn.bg-grey-color.show {
  background-color: var(--bg-grey-color) !important;
}

/* Secondary outline (Cancel / neutral actions) — light gray border, charcoal text; does not change global .outline-button-blue-color */
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* Same look on hover/focus/active — no color shift; overrides .footer-buttons:hover navy text */
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn:hover:not(:disabled):not(.disabled),
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn:focus,
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn:focus-visible,
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn:active,
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn.active,
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn.show {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
  box-shadow: none !important;
}

.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn:disabled,
.btn.white-button--secondary.footer-buttons.backgroundWhiteBtn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.backgroundWhiteBtn:active:not(.white-button--secondary),
.backgroundWhiteBtn.active:not(.white-button--secondary),
.backgroundWhiteBtn.show:not(.white-button--secondary) {
  background-color: transparent !important;
}

/* Same as Customer Details back — navy (flat hover/active, matches primary BlueButton) */
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.customer-details-back-btn,
.btn.blue-button.blue-button--contractor.customer-details-back-btn {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  border-color: var(--border-blue-color) !important;
  color: #ffffff !important;
  --bs-btn-bg: var(--bg-blue-color) !important;
  --bs-btn-color: #ffffff !important;
  --bs-btn-border-color: var(--border-blue-color) !important;
  --bs-btn-hover-bg: var(--bg-blue-color) !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-active-bg: var(--bg-blue-color) !important;
}

.btn.blue-button.blue-button--contractor.customer-details-back-btn:hover:not(:disabled):not(.disabled),
.btn.blue-button.blue-button--contractor.customer-details-back-btn:focus,
.btn.blue-button.blue-button--contractor.customer-details-back-btn:focus-visible,
.btn.blue-button.blue-button--contractor.customer-details-back-btn:active,
.btn.blue-button.blue-button--contractor.customer-details-back-btn.active {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  border-color: var(--border-blue-color) !important;
  color: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.btn.blue-button.blue-button--donor.backgroundBlurBtn.customer-details-back-btn,
.btn.blue-button.blue-button--donor.customer-details-back-btn {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}

.btn.blue-button.blue-button--donor.customer-details-back-btn:hover:not(:disabled):not(.disabled),
.btn.blue-button.blue-button--donor.customer-details-back-btn:focus,
.btn.blue-button.blue-button--donor.customer-details-back-btn:active,
.btn.blue-button.blue-button--donor.customer-details-back-btn.active {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}
/*
 * react-circular-progressbar styles
 * All of the styles in this file are configurable!
 */

.CircularProgressbar {
  /*
   * This fixes an issue where the CircularProgressbar svg has
   * 0 width inside a "display: flex" container, and thus not visible.
   */
  width: 100%;
  /*
   * This fixes a centering issue with CircularProgressbarWithChildren:
   * https://github.com/kevinsqi/react-circular-progressbar/issues/94
   */
  vertical-align: middle;
}

.CircularProgressbar .CircularProgressbar-path {
  stroke: #3e98c7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar .CircularProgressbar-trail {
  stroke: #d6d6d6;
  /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
  stroke-linecap: round;
}

.CircularProgressbar .CircularProgressbar-text {
  fill: #3e98c7;
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-background {
  fill: #d6d6d6;
}

/*
 * Sample background styles. Use these with e.g.:
 *
 *   <CircularProgressbar
 *     className="CircularProgressbar-inverted"
 *     background
 *     percentage={50}
 *   />
 */
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
  fill: #3e98c7;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
  fill: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
  stroke: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
  stroke: transparent;
}


   .chartContainer  path {
    fill: transparent !important;
    stroke: none !important;
  }

/* Outlined year filter — keep white fill + accent border (overrides solid navy below) */
.superadmin-graph-dropdown--outline,
.superadmin-graph-dropdown--outline:active,
.superadmin-graph-dropdown--outline.active,
.superadmin-graph-dropdown--outline:focus,
.superadmin-graph-dropdown--outline.show,
.superadmin-graph-dropdown--outline[aria-expanded="true"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Fix for SuperadminGraphs dropdown toggle - vertical alignment of text and arrow */
.superadmin-graph-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  padding: 8px 16px !important;
  line-height: 1.2 !important;
}

.superadmin-graph-dropdown i {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 0 !important;
  line-height: 1 !important;
}
/* Fix for SuperadminGraphs dropdown toggle - prevent white background on click */
.superadmin-graph-dropdown:active,
.superadmin-graph-dropdown.active,
.superadmin-graph-dropdown:focus,
.superadmin-graph-dropdown:focus-visible,
.superadmin-graph-dropdown.show,
.superadmin-graph-dropdown[aria-expanded="true"],
.superadmin-graph-dropdown:hover,
.superadmin-graph-dropdown:first-child:active {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  color: #fff !important;
  border-color: var(--bg-blue-color) !important;
}

.superadmin-graph-dropdown.bg-donor-color:active,
.superadmin-graph-dropdown.bg-donor-color.active,
.superadmin-graph-dropdown.bg-donor-color:focus,
.superadmin-graph-dropdown.bg-donor-color:focus-visible,
.superadmin-graph-dropdown.bg-donor-color.show,
.superadmin-graph-dropdown.bg-donor-color[aria-expanded="true"],
.superadmin-graph-dropdown.bg-donor-color:hover,
.superadmin-graph-dropdown.bg-donor-color:first-child:active {
  background-color: var(--bg-donor-color) !important;
  background: var(--bg-donor-color) !important;
  color: #fff !important;
  border-color: var(--bg-donor-color) !important;
}

/* Fix for graph-year-dropdown (Admin/Customer/Worker graphs) - prevent white background on click */
.graph-year-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  padding: 8px 16px !important;
  line-height: 1.2 !important;
}

.graph-year-dropdown i {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 0 !important;
  line-height: 1 !important;
}

.graph-year-dropdown:active,
.graph-year-dropdown.active,
.graph-year-dropdown:focus,
.graph-year-dropdown:focus-visible,
.graph-year-dropdown.show,
.graph-year-dropdown[aria-expanded="true"],
.graph-year-dropdown:first-child:active {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  color: #fff !important;
  border-color: var(--bg-blue-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* SUPERADMIN DASHBOARD RESPONSIVE STYLES */

/* Base responsive container */
.superAdminCompany {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Graph cards responsive */
.superadmin-graph-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.superadmin-graphs-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}

.superadmin-graph-col {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Chart container responsive */
.chartContainer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 992 */
@media (max-width: 1279px) {
    .active_deactive {
        width: 100% !important;
        max-width: 100% !important;
    }
    .plan_company,
    .planBoxSuperaAdmin {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 991px) {
    .plan-company-graph {
        flex-direction: column !important;
    }
    .staffmemberTopMargin {
        margin-top: 10px !important;
    }
    .superadmin-graphs-row {
        flex-direction: column;
    }
    .superadmin-graph-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 789px) {
    .active_box {
        margin-right: 0px !important;
    }
}

/* 768 - Tablet */
@media (max-width: 767px) {
    .plan-company-graph {
        margin-left: 0.5% !important;
    }
    .superAdminCompany {
        flex-direction: column !important;
    }
    .planBoxSuperaAdmin,
    .plan_company,
    .active_deactive {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-width: initial !important;
        flex: 1 1 100% !important;
    }
    .appointmentSearchInput {
        margin-left: auto !important;
    }
    .graphRemovePadding {
        padding-right: 0px !important;
        padding-left: 1rem !important;
    }
    .superadmin-graph-dropdown {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    .superadmin-graphs-row {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
    .superadmin-graph-col {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* 576 - Mobile landscape */
@media (max-width: 575px) {
    .plan-company,
    .active_deactive-graph {
        flex-direction: column;
    }
    .inactive-para {
        margin-left: 3% !important;
    }
    .superAdminCompany {
        padding: 0 4px;
    }
    .graph-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .superadmin-graph-dropdown {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* 480 */
@media (max-width: 524px) {
    .superAdminCompany {
        gap: 10px !important;
    }
    .planBoxSuperaAdmin,
    .active_deactive {
        padding: 10px !important;
    }
}

/* 425 - Mobile */
@media (max-width: 479px) {
    .superadmin-graph-dropdown {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
    .superadmin-graph-card {
        border-radius: 8px !important;
    }
}

/* 375 - Small mobile */
@media (max-width: 424px) {
    .superAdminCompany {
        gap: 8px !important;
    }
    .planBoxSuperaAdmin,
    .active_deactive {
        padding: 8px !important;
        border-radius: 8px !important;
    }
}

/* 320 */
@media (max-width: 374px) {
    .superadmin-graph-dropdown {
        font-size: 9px !important;
        padding: 3px 5px !important;
    }
}

/* 280 - Extra small */
@media (max-width: 319px) {
    .inactive-para {
        font-size: 13px !important;
        white-space: nowrap;
    }
    .active-graph {
        font-size: 13px !important;
        white-space: nowrap;
    }
    .planBoxSuperaAdmin,
    .active_deactive {
        padding: 6px !important;
    }
}

.admin .grid-container {
  display: grid;
  grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
  padding: 5px;
  grid-gap: 20px;
  gap: 20px;
}

.admin .grid-item {
  position: relative;
  height: 140px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-sm);
}

.countNumberAdmin {
  color: white;
  font-size: 20px !important;
  font-weight: 500 !important;
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;
  padding: 6px 3px 3px 10px !important;

}

.admin .content {
  width: 100%;
  min-height: 140px;
  height: 140px;
  padding: 20px;
  color: #fff;
  cursor: pointer;
}

.admin .content .title {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: start;
  align-items: center;
}

.admin .content .logo {
  width: 55px;
  height: 55px;
  box-shadow: var(--shadow-md);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin .content .name {
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 24px;
  font-family: "Poppins";
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
}

.admin .content .desc {
  height: 50%;
  display: flex;
  justify-content: start;
  align-items: start;
  padding-top: 10px;
  font-family: "Poppins";
  font-weight: 400;
  font-size: 14px;
  /* line-height: 23.8px; */
  line-height: 16.8px;
}

.admin .options {
  height: 33px;
  width: 100%;
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 4px 4px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.admin .options span {
  font-family: "Poppins";
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;

}

.admin .circle {
  position: absolute;
  min-width: 100%;
  height: 55px;
  display: flex;
  text-align: end;
  justify-content: end;
  bottom: calc(100%+55px);
}

.admin .circle span {
  width: 55px;
  height: 55px;
  border-radius: 0 20px 0 100px;
}

.appointment {
  margin-top: 41px;
  border: solid 1px #0f2b46;
  padding: 13px;
  border-radius: 10px;
  width: 100%;
}

.appointment-title {
  font-weight: 600;
  margin-bottom: 18px;
  font-size: 24px;
  margin-left: 7px;
}

.appointment-flex {
  display: flex;
  flex-wrap: wrap;
}

.appointment-item {
  display: flex;
  gap: 8px;
  margin-left: 7px;
  align-items: center;
}

.appointment-count {
  color: white;
  padding: 2px 15px;
  border-radius: 2px;
}

.appointment-info {
  font-size: 10px;
  font-weight: 700;
}

.appointment-divider {
  font-size: 34px;
  margin-top: 0px;
  font-weight: 200;
}

@media (max-width: 768px) {
  .appointment {
    width: 100%;
    margin-top: 70px;
    margin-bottom: 15px;
  }

  .appointment-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .appointment-flex {
    flex-direction: column;
  }

  .appointment-item {
    margin-bottom: 12px;
  }

  .appointment-divider {
    display: none;
  }

  .main-customer .card {
    margin-bottom: 15px !important;
  }
}

@media (max-width: 480px) {}

@media (min-width: 320px) and (max-width: 480px) {

  .appointment-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
    gap: 12px;
  }

  .appointment-item:nth-child(1),
  .appointment-item:nth-child(2) {
    grid-column: span 1;
  }

  .appointment-item:nth-child(3),
  .appointment-item:nth-child(4) {
    grid-column: span 1;
  }

  .appointment {
    margin-top: 0px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .appointment-flex {
    flex-direction: row;
  }

  .appointment {
    margin-top: 0px;
  }

  .appointment-divider {
    display: inline-block;
    margin-left: 15px;
  }

}

@media (min-width: 280px) and (max-width:319px) {
  .appointment {
    margin-top: 0px;
  }


}

@media (min-width: 782px) and (max-width: 1330px) {
  .appointment-divider {
    margin-left: 15px;
  }
}

@media (max-width: 292px) {
  .appointment-title {
    font-size: 18px;
    margin-bottom: 22px;
  }
}

.admin .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

@media (min-width: 1601px) {
  .admin .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 776px) {
  .graph-header {
    flex-direction: column !important;
  }
}

@media (min-width: 576px) {
  .graph-header {
    flex-direction: column !important;
  }

}

@media (min-width: 425px) {
  .graph-header {
    flex-direction: column !important;
  }

}

@media (min-width: 375px) {
  .graph-header {
    flex-direction: column !important;
  }
}

@media (min-width: 320px) {
  .graph-header {
    flex-direction: column !important;
  }
}

@media (min-width: 280px) {
  .graph-header {
    flex-direction: column !important;
  }
}

@media (min-width: 1400px) and (max-width: 1600px) {
  .admin .grid-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .admin .content .desc {
    font-size: 12px;
  }

  .admin .content .name {
    font-size: 21px;
  }

  .admin .content .logo {
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 1216px) and (max-width: 1399px) {
  .admin .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .admin .content .desc {
    font-size: 11px;
  }

  .admin .options span {
    font-size: 15px;
  }

  .admin .content .name {
    font-size: 18px;
  }

  .admin .circle span {
    width: 52px;
    height: 52px;
  }

  .admin .content .logo {
    width: 47px;
    height: 47px;
  }
}

@media (min-width: 1134px) and (max-width: 1215px) {
  .admin .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .admin .grid-item {
    margin-bottom: 43px;
  }

  .admin .content .desc {
    font-size: 13px;
  }

  .admin .content .name {
    font-size: 20px;
  }

  .admin .content .logo {
    width: 44px;
    height: 44px;
  }

  .admin .options span {
    font-size: 16px;
  }
}

@media (min-width: 993px) and (max-width: 1134px) {
  .admin .grid-item {
    margin-bottom: 43px;
  }

  .admin .content .desc {
    font-size: 12px;
  }

  .admin .content .name {
    font-size: 19px;
  }

  .admin .content .logo {
    width: 43px;
    height: 43px;
  }

  .admin .options span {
    font-size: 15px;
  }
}

@media (min-width: 860px) and (max-width: 992px) {
  .admin .grid-item {
    margin-bottom: 43px;
  }

  .admin .content .desc {
    font-size: 12px;
  }

  .admin .content .name {
    font-size: 20px;
  }

  .admin .content .logo {
    width: 47px;
    height: 47px;
  }

  .admin .options span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 860px) {
  .admin .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .admin .grid-item {
    margin-bottom: 43px;
  }

  .admin .content .desc {
    font-size: 11px;
  }

  .admin .content .name {
    font-size: 18px;
  }

  .admin .content .logo {
    width: 42px;
    height: 42px;
  }

  .admin .options span {
    font-size: 14px;
  }

}

@media (min-width: 569px) and (max-width: 768px) {
  .admin .grid-item {
    margin-bottom: 43px;
  }

  .admin .content .desc {
    font-size: 11px;
  }

  .admin .content .name {
    font-size: 18px;
  }

  .admin .content .logo {
    width: 42px;
    height: 42px;
  }

  .admin .options span {
    font-size: 14px;
  }

}

@media (min-width: 320px) and (max-width: 568px) {
  .admin .grid-item {
    margin-bottom: 43px;
  }

  .admin .content .desc {
    font-size: 13px;
  }

  .admin .content .name {
    font-size: 20px;
  }

  .admin .content .logo {
    width: 44px;
    height: 44px;
  }

  .admin .options span {
    font-size: 16px;
  }
}

@media (min-width: 280px) and (max-width: 320px) {
  .admin .grid-item {
    margin-bottom: 43px;
  }

  .admin .content .desc {
    font-size: 13px;
  }

  .admin .content .name {
    font-size: 20px;
  }

  .admin .content .logo {
    width: 44px;
    height: 44px;
  }

  .admin .options span {
    font-size: 16px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .appointment-flex {
    flex-direction: row;
  }

}

.main-customer .card .card-header {
  height: 50px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.main-customer .card .card-footer {
  height: 50px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.main-customer .card {
  border-radius: 16px;
  border: none;
}

.first-card-client {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 22px;
  box-shadow: var(--shadow-md);
}

.first-card-clientt {
  height: 50px !important;
  width: 50px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background-color: rgba(255, 255, 255, 10%);
}

.client-footer .card-footer {
  font-size: 23px;
}

.worker-footer {
  font-size: 28px;
}

.first-card-client img {
  height: 25px;
  width: 25px;
}

@media (max-width: 575px) {
  .welcom_message_admin {
    font-size: 19px !important;
  }

  .staffmemberHeadHere {
    font-size: 20px !important;
  }

  .aerrowofRight {
    font-size: 35px !important;
  }

  .first-card-clientt {
    height: 44px;
    width: 44px;
  }

  .staffmemberLOgo {
    height: 24px !important;
  }

  .donor-stats-container .MuiGrid-item {
    padding-right: 5px !important;
  }
}

@media (max-width: 991px) {
  .welcomeMessage_staffMember {
    font-size: 25px !important;
  }
}
/* Notification Bar Animations */
@keyframes slideInNotification {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Notification Backdrop */
.notification-backdrop {
  animation: fadeIn 0.3s ease-out;
  display: none; /* Hidden on desktop by default */
}

/* Company portal top bar (CJ theme — navy / white shell) */
.main-nav-cj-theme {
  background-color: var(--bg-card) !important;
  color: var(--navy-deep) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.main-nav-cj-theme .breadcrumb-cj-nav .breadcrumb-item,
.main-nav-cj-theme .breadcrumb-cj-nav .breadcrumb-item a {
  color: inherit;
}

/* Compact navbar search: SearchInput (InputText) inside pill — text + placeholder */
.main-nav-search-pill .main-nav-search-field.cs-form-field {
  flex: 1 1;
  min-width: 0;
  margin-bottom: 0;
}
.main-nav-search-pill .main-nav-search-field .cs-input-shell {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 26px;
}
.main-nav-search-pill .main-nav-search-field input.cs-input {
  color: #0f2b46 !important;
  -webkit-text-fill-color: #0f2b46 !important;
}
.main-nav-search-pill .main-nav-search-field input.cs-input::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
.main-nav-search-pill .main-nav-search-field input.cs-input::-webkit-input-placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
.main-nav-search-pill .main-nav-search-field input.cs-input::-moz-placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* .css-1ex1afd-MuiTableCell-root {
  font-family: var(--font-body), "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: none !important;
  text-align: left;
  padding: 16px;
  color: rgba(0, 0, 0, 0.87);
}

.css-1ygcj2i-MuiTableCell-root {
  font-family: var(--font-body), "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.01071em;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: none !important;
  text-align: left;
  padding: 16px;
  color: rgba(0, 0, 0, 0.87);
}

.dropdown-item-hover:hover {
  background-color: #0f2b46 !important;
  color: white !important;
}

.dropdown-item-hover {
  transition: background-color 0.3s ease, color 0.3s ease;
}


.breadcrumb {
  margin-bottom: 0 !important;
}

.notification-bar {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 1000;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  scrollbar-width: thin;
  animation: slideInNotification 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.notification-bar .drawer-content {
  padding: 10px;
  margin-top: -10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-bar .notification-item {
  padding: 10px;
  font-weight: 400;
  font-size: 18px;
}

.notification-bar .text {
  color: rgb(42, 79, 97);
}

.notification-bar .notification-p {
  padding: 13px;
  color: rgb(42, 79, 97);
 
  margin-top: 0;
  margin-bottom: -1rem;
}

.notification-bar .solid {
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(42, 79, 97);
  border-bottom: 1px solid rgb(42, 79, 97);
}

.notification-bar .notication-back {
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
  color: #0f2b46;
  font-size: 19px;
  margin-left: 7px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.notification-bar .notification-contant {
  border-top: 1px solid rgb(42, 79, 97);
}

.notification-bar .timesheetsborder {
  border-bottom: 1px solid rgb(42, 79, 97);
}

@media (max-width: 1700px) {
  .notification-bar .text {
    margin-top: -10%;
  }
}

@media (max-width: 1279px) {
  .notification-bar .text {
    margin-top: -16%;
  }

  .notification-bar .icon-border {
    height: 30px !important;
    width: 30px !important;
  }

  .notification-bar .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .notification-bar .solid {
    padding: 4px 0px 6px 6px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 14px !important;
  }
}

@media (max-width: 991px) {
  .notification-bar {
    width: 270px !important;
  }

  .notification-bar .close-icon {
    font-size: 30px !important;
  }

  .notification-bar .text {
    margin-top: -39px !important;
    font-size: 24px;
    margin-bottom: 23px;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px;
    font-size: 18px !important;
    margin-left: 10px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 32px !important;
    width: 32px !important;
  }

  .notification-bar .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 16px !important;
  }

  .main-nav-responsive-section {
    gap: 10px !important;
  }
}

@media (max-width: 789px) {
  .notification-bar {
    width: 250px !important;
  }

  .notification-bar .close-icon {
    font-size: 30px !important;
  }


  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px !important;
    font-size: 16px !important;
    margin-left: 10px;
  }

  .notification-bar .text {
    margin-top: -35px !important;
    font-size: 18px !important;
    margin-bottom: 23px;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: -9px;
    font-size: 8px;
    margin-left: 10px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 28px !important;
    width: 28px !important;
  }

  .notification-bar .icon {
    height: 18px !important;
    width: 18px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  .notification-set {
    display: none !important;
  }

  .main-nav-cj-theme .notification-set {
    display: flex !important;
    align-items: center !important;
  }

  .setting-notification {
    display: none !important;
    display: flex !important;
  }

  .setting-notification {
    margin-top: 5px !important;
  }


}

@media (max-width: 767px) {
  .main-nav-responsive-section {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .navigator-bar {
    flex-direction: column !important;
    display: flex !important;
    justify-content: left !important;
    margin-left: 35px !important;
    align-items: start !important;
  }

  .settingNotificationIcon {
    margin-left: 0 !important;
  }

  .navigatorBarUrl {
    margin-right: auto !important;
  }

  .settingNotificationIcon {
    margin-right: auto !important;  
  }
}

@media (max-width: 479px) {
  .notification-bar {
    width: 240px !important;
  }

  .main-nav-responsive-section {
    flex-direction: column;
    align-items: start !important;
  }


  .setting-notification {
    margin-top: 10px !important;
    margin-left: 10px !important;
  }

  .notification-bar .close-icon {
    font-size: 30px !important;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px !important;
    font-size: 16px !important;
    margin-left: 10px;
  }

  .notification-bar .text {
    margin-top: -14% !important;
    font-size: 18px !important;
    margin-bottom: 23px;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: -9px;
    font-size: 8px;
    margin-left: 10px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 28px !important;
    width: 28px !important;
  }

  .notification-bar .icon {
    height: 18px !important;
    width: 18px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 14px !important;
  }
  
  .navigator-bar {
    flex-direction: column !important;
    display: flex !important;
    justify-content: left !important;
    margin-left: 20px !important;
    align-items: start !important;
  }

  .settingNotificationIcon {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

}

@media (max-width: 323px) {
  .notification-bar .close-icon {
    font-size: 30px !important;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px !important;
    font-size: 16px !important;
    margin-left: 10px;
  }

  .notification-bar .text {
    margin-top: -17% !important;
    font-size: 18px;
    margin-bottom: 23px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 25px !important;
    width: 25px !important;
  }

  .notification-bar .icon {
    height: 15px !important;
    width: 15px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 12px !important;
  }
}

@media (max-width: 374px) {
  .input-search {
    font-size: 12px !important;
  }
}

@media (max-width: 319px) {
  .input-search {
    font-size: 12px !important;
  }

  .setting-notification {
    margin-left: 0 !important;
  }

  .setting-notification .dropdown-menu-arrow.dropdown-menu.show {
    width: 180px !important;
  }

  .e-mail {
    font-size: 9px !important;
  }

  .main-nav-responsive-section {
    flex-direction: column;
    align-items: start !important;
  }

  .Navigator {
    margin-bottom: 10px !important;
  }

  .breadcrumb {
    margin-left: 15px !important;
    padding: 0 !important;
  }

  .setting-notification {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .setting-notification {
    margin-top: -50px;
  }

  .setting-notificatio-menu {
    margin-right: -50px;
  }

  .Navigator {
    margin-left: 3% !important;
  }
}

.setting-notification .dropdown-menu-arrow.dropdown-menu.show {
  background-color: #d4943a !important;
  width: 212px;
  border-radius: 15px;
}

.dropdown-menu-arrow.dropdown-menu.show {
  background-color: #d4943a !important;
  width: 212px;
  border-radius: 15px;
}

/* CJ layout: same amber as Sidebar "+ Create New" / avatars — Sidebar/index.jsx #D4943A */
.setting-notification
  .dropdown-menu-arrow.dropdown-menu.show.cj-nav-settings-menu--sidebar-amber,
.dropdown-menu-arrow.dropdown-menu.show.cj-nav-settings-menu--sidebar-amber {
  background-color: #d4943a !important;
}

/* Donor: teal menu (longer selector beats .cj-nav / base orange rules) */
.setting-notification
  .dropdown-menu-arrow.dropdown-menu.show.bg-donor-color,
.dropdown-menu-arrow.dropdown-menu.show.bg-donor-color {
  background-color: var(--bg-donor-color) !important;
}

.cj-nav-settings-menu-initials {
  color: #d4943a !important;
}

.setting-notification .dropdown-item:focus,
.dropdown-item:hover {
  color: var(--bs-dropdown-link-hover-color);
  background-color: none !important;
}

.dropdown-item:hover {
  background: none !important;
}

.dropdown-item:active {
  background-color: #0f2b46;
}

/* Mobile responsive table styles */
@media (max-width: 775px) {
  .mobile-table-collapse {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: 8px 0;
    overflow: hidden;
  }
  
  .mobile-table-collapse .mobile-collapse-content {
    padding: 16px;
    background: white;
    border-radius: 8px;
    margin: 8px;
    box-shadow: var(--shadow-md);
  }
  
  .mobile-table-collapse .mobile-data-row {
    /* display: flex;
    justify-content: space-between; */
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
  }
  
  .mobile-table-collapse .mobile-data-row:last-child {
    border-bottom: none;
  }
  
  .mobile-table-collapse .mobile-data-label {
    font-weight: 600;
    color: #0f2b46;
    font-size: 14px;
  }
  
  .mobile-table-collapse .mobile-data-value {
    color: #495057;
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
  }
  
  .mobile-table-collapse .mobile-view-button {
    width: 100%;
    margin-top: 16px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
  }
  
  .mobile-table-collapse .mobile-view-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
  }
  
  /* Action buttons styling in mobile */
  .mobile-table-collapse .mobile-data-value .cursor-pointer {
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .mobile-table-collapse .mobile-data-value .cursor-pointer:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
  
  .mobile-table-collapse .mobile-data-value svg {
    width: 20px;
    height: 20px;
  }
  
  .mobile-table-collapse .mobile-data-value img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .mobile-table-collapse .mobile-data-value img:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
  
  /* Prevent horizontal scroll in mobile table */
  .mobile-table-collapse {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
  }
  
  .mobile-table-collapse .mobile-collapse-content {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .mobile-table-collapse .mobile-data-row {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  .mobile-table-collapse .mobile-data-value {
    max-width: 50%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Reason column in mobile collapse - full width */
  .mobile-table-collapse .mobile-data-row[data-reason="true"] .mobile-data-value {
    max-width: 100% !important;
    width: 100% !important;
    display: block;
    margin-top: 4px;
  }
  
  .mobile-table-collapse .mobile-data-row[data-reason="true"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Ensure table doesn't cause horizontal scroll */
  .MuiTable-root {
    max-width: 100%;
    overflow-x: auto;
  }
  
  .MuiTableCell-root {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
  
*/

.css-1ex1afd-MuiTableCell-root {
  font-family: var(--font-body), "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: none !important;
  text-align: left;
  padding: 16px;
  color: rgba(0, 0, 0, 0.87);
}

.css-1ygcj2i-MuiTableCell-root {
  font-family: var(--font-body), "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.01071em;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: none !important;
  text-align: left;
  padding: 16px;
  color: rgba(0, 0, 0, 0.87);
}

.dropdown-item-hover:hover {
  background-color: #0f2b46 !important;
  color: white !important;
}

.dropdown-item-hover {
  transition: background-color 0.3s ease, color 0.3s ease;
}


.breadcrumb {
  margin-bottom: 0 !important;
}

.notification-bar {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 1000;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  scrollbar-width: thin;
  animation: slideInNotification 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.notification-bar .drawer-content {
  padding: 10px;
  margin-top: -10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-bar .notification-item {
  padding: 10px;
  font-weight: 400;
  font-size: 18px;
}

.notification-bar .text {
  color: rgb(42, 79, 97);
}

.notification-bar .notification-p {
  padding: 13px;
  color: rgb(42, 79, 97);

  margin-top: 0;
  margin-bottom: -1rem;
}

.notification-bar .solid {
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(42, 79, 97);
  border-bottom: 1px solid rgb(42, 79, 97);
}

.notification-bar .notication-back {
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
  color: #0f2b46;
  font-size: 19px;
  margin-left: 7px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.notification-bar .notification-contant {
  border-top: 1px solid rgb(42, 79, 97);
}

.notification-bar .timesheetsborder {
  border-bottom: 1px solid rgb(42, 79, 97);
}

@media (max-width: 1700px) {
  .notification-bar .text {
    margin-top: -10%;
  }
}

@media (max-width: 1279px) {
  .notification-bar .text {
    margin-top: -16%;
  }

  .notification-bar .icon-border {
    height: 30px !important;
    width: 30px !important;
  }

  .notification-bar .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .notification-bar .solid {
    padding: 4px 0px 6px 6px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 14px !important;
  }
}

@media (max-width: 991px) {
  .notification-bar {
    width: 270px !important;
  }

  .notification-bar .close-icon {
    font-size: 30px !important;
  }

  .notification-bar .text {
    margin-top: -39px !important;
    font-size: 24px;
    margin-bottom: 23px;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px;
    font-size: 18px !important;
    margin-left: 10px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 32px !important;
    width: 32px !important;
  }

  .notification-bar .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 16px !important;
  }

  .main-nav-responsive-section {
    gap: 10px !important;
  }
}

@media (max-width: 789px) {
  .notification-bar {
    width: 250px !important;
  }

  .notification-bar .close-icon {
    font-size: 30px !important;
  }


  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px !important;
    font-size: 16px !important;
    margin-left: 10px;
  }

  .notification-bar .text {
    margin-top: -35px !important;
    font-size: 18px !important;
    margin-bottom: 23px;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: -9px;
    font-size: 8px;
    margin-left: 10px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 28px !important;
    width: 28px !important;
  }

  .notification-bar .icon {
    height: 18px !important;
    width: 18px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  .notification-set {
    display: none !important;
  }

  .main-nav-cj-theme .notification-set {
    display: flex !important;
    align-items: center !important;
  }

  .setting-notification {
    display: none !important;
    display: flex !important;
  }

  .setting-notification {
    margin-top: 5px !important;
  }


}

@media (max-width: 767px) {
  .main-nav-responsive-section {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .navigator-bar {
    flex-direction: column !important;
    display: flex !important;
    justify-content: left !important;
    margin-left: 35px !important;
    align-items: start !important;
  }

  .settingNotificationIcon {
    margin-left: 0 !important;
  }

  .navigatorBarUrl {
    margin-right: auto !important;
  }

  .settingNotificationIcon {
    margin-right: auto !important;
  }
}

@media (max-width: 479px) {
  .notification-bar {
    width: 240px !important;
  }

  .main-nav-responsive-section {
    flex-direction: column;
    align-items: start !important;
  }


  .setting-notification {
    margin-top: 10px !important;
    margin-left: 10px !important;
  }

  .notification-bar .close-icon {
    font-size: 30px !important;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px !important;
    font-size: 16px !important;
    margin-left: 10px;
  }

  .notification-bar .text {
    margin-top: -14% !important;
    font-size: 18px !important;
    margin-bottom: 23px;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: -9px;
    font-size: 8px;
    margin-left: 10px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 28px !important;
    width: 28px !important;
  }

  .notification-bar .icon {
    height: 18px !important;
    width: 18px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  .navigator-bar {
    flex-direction: column !important;
    display: flex !important;
    justify-content: left !important;
    margin-left: 20px !important;
    align-items: start !important;
  }

  .settingNotificationIcon {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

}

@media (max-width: 323px) {
  .notification-bar .close-icon {
    font-size: 30px !important;
  }

  .notification-bar .notification-p {
    padding: 1px;
    margin-bottom: 1px !important;
    font-size: 16px !important;
    margin-left: 10px;
  }

  .notification-bar .text {
    margin-top: -17% !important;
    font-size: 18px;
    margin-bottom: 23px;
  }

  .notification-bar .solid {
    padding: 0px 6px 0px 15px !important;
  }

  .notification-bar .icon-border {
    height: 25px !important;
    width: 25px !important;
  }

  .notification-bar .icon {
    height: 15px !important;
    width: 15px !important;
  }

  .notification-bar .notification-item {
    font-weight: 500 !important;
    font-size: 12px !important;
  }
}

@media (max-width: 374px) {
  .input-search {
    font-size: 12px !important;
  }
}

@media (max-width: 319px) {
  .input-search {
    font-size: 12px !important;
  }

  .setting-notification {
    margin-left: 0 !important;
  }

  .setting-notification .dropdown-menu-arrow.dropdown-menu.show {
    width: 180px !important;
  }

  .e-mail {
    font-size: 9px !important;
  }

  .main-nav-responsive-section {
    flex-direction: column;
    align-items: start !important;
  }

  .Navigator {
    margin-bottom: 10px !important;
  }

  .breadcrumb {
    margin-left: 15px !important;
    padding: 0 !important;
  }

  .setting-notification {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .setting-notification {
    margin-top: -50px;
  }

  .setting-notificatio-menu {
    margin-right: -50px;
  }

  .Navigator {
    margin-left: 3% !important;
  }
}

/* Mobile responsive table styles */
@media (max-width: 775px) {
  .mobile-table-collapse {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: 8px 0;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .mobile-table-collapse .mobile-collapse-content {
    padding: 16px;
    background: white;
    border-radius: 8px;
    margin: 8px;
    box-shadow: var(--shadow-md);
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .mobile-table-collapse .mobile-data-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-height: auto;
  }
  
  .mobile-table-collapse .mobile-data-row:last-child {
    border-bottom: none;
  }
  
  .mobile-table-collapse .mobile-data-label {
    font-weight: 600;
    color: #0f2b46;
    font-size: 15px;
    flex: 0 0 auto;
    min-width: 0;
    line-height: 1.4;
  }
  
  .mobile-table-collapse .mobile-data-value {
    color: #495057;
    font-size: 14px;
    text-align: right;
    flex: 1 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    overflow: visible;
    line-height: 1.5;
    min-height: auto;
  }
  
  .mobile-table-collapse .mobile-action-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-height: auto;
  }
  
  .mobile-table-collapse .mobile-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
  }
  
  .mobile-table-collapse .mobile-view-button {
    width: 100%;
    margin-top: 16px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    box-sizing: border-box;
  }
  
  .mobile-table-collapse .mobile-view-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
  }
  
  /* Action buttons styling in mobile */
  .mobile-table-collapse .mobile-data-value .cursor-pointer {
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
  }
  
  .mobile-table-collapse .mobile-data-value .cursor-pointer:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
  
  .mobile-table-collapse .mobile-data-value svg {
    width: 20px;
    height: 20px;
    display: inline-block;
  }
  
  .mobile-table-collapse .mobile-data-value img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
  }
  
  .mobile-table-collapse .mobile-data-value img:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
  
  /* Special styling for action column in mobile */
  .mobile-table-collapse .mobile-action-row {
    border-top: 2px solid #0f2b46;
    margin-top: 16px;
    padding-top: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 16px;
  }
  
  .mobile-table-collapse .mobile-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 8px 0;
  }
  
  .mobile-table-collapse .mobile-action-buttons > div {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .mobile-table-collapse .mobile-action-buttons button,
  .mobile-table-collapse .mobile-action-buttons .MuiButton-root,
  .mobile-table-collapse .mobile-action-buttons .MuiIconButton-root {
    margin: 4px;
    min-width: auto;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    min-height: 36px;
  }
  
  .mobile-table-collapse .mobile-action-buttons svg,
  .mobile-table-collapse .mobile-action-buttons img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    flex-shrink: 0;
  }
  
  .mobile-table-collapse .mobile-action-buttons > div > svg,
  .mobile-table-collapse .mobile-action-buttons > div > img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
  }
  
  /* Ensure action buttons don't get cut off */
  .mobile-table-collapse .mobile-action-buttons * {
    max-width: none;
    overflow: visible;
  }
  
  /* Ensure all content is visible */
  .mobile-table-collapse * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Special handling for long text content */
  .mobile-table-collapse .mobile-data-value p,
  .mobile-table-collapse .mobile-data-value span,
  .mobile-table-collapse .mobile-data-value div {
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
    max-width: 100%;
  }
  
  /* Mobile collapse component styling */
  .mobile-table-collapse .mobile-collapse-component {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    margin-top: 15px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component > * {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .permission-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
  }
  
  /* Activity collapse wrapper specific styles */
  .mobile-table-collapse .mobile-collapse-component {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .activity-collapse-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .activity-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .activity-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .activity-collapse-container {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    box-sizing: border-box !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .activity-details-box,
  .mobile-table-collapse .mobile-collapse-component .activity-reason-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .mobile-table-collapse .mobile-collapse-component .activity-text {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  
  /* Handle images and media */
  .mobile-table-collapse .mobile-data-value img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Handle form elements */
  .mobile-table-collapse .mobile-data-value input,
  .mobile-table-collapse .mobile-data-value select,
  .mobile-table-collapse .mobile-data-value textarea {
    max-width: 100%;
    width: 100%;
  }
  
  /* Mobile-specific table cell improvements */
  @media (max-width: 775px) {
    .MuiTableCell-root {
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    
    /* Reason column specific mobile styling */
    .mobile-table-collapse .mobile-data-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      margin-bottom: 8px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .mobile-table-collapse .mobile-data-label {
      font-weight: 600;
      min-width: 80px;
      flex-shrink: 0;
      margin-right: 8px;
    }
    
    .mobile-table-collapse .mobile-data-value {
      flex: 1 1;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      line-height: 1.5;
      min-width: 0;
    }
    
    /* Special handling for Reason column in mobile */
    .mobile-table-collapse .mobile-data-row:has(.mobile-data-label:contains("Reason")) .mobile-data-value,
    .mobile-table-collapse .mobile-data-row[data-reason="true"] .mobile-data-value {
      width: 100% !important;
      max-width: 100% !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      white-space: normal !important;
      line-height: 1.6 !important;
      padding: 4px 0 !important;
      text-align: justify !important;
      text-justify: inter-word !important;
    }
  }
  
  /* Ensure table doesn't cause horizontal scroll */
  .MuiTable-root {
    max-width: 100%;
    overflow-x: auto;
  }
  
  .MuiTableCell-root {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Additional responsive improvements */
  @media (max-width: 480px) {
    .mobile-table-collapse .mobile-collapse-content {
      padding: 12px;
      margin: 4px;
      width: calc(100% - 8px);
      max-width: calc(100% - 8px);
    }
    
    .mobile-table-collapse .mobile-data-row {
      padding: 8px 0;
      gap: 6px;
    }
    
    .mobile-table-collapse .mobile-data-label {
      font-size: 13px;
    }
    
    .mobile-table-collapse .mobile-data-value {
      font-size: 13px;
    }
    
    .mobile-table-collapse .mobile-view-button {
      padding: 10px 20px;
      font-size: 14px;
    }
  }
}

/* RESPONSIVE STYLES FOR ACTIVITY FEED PANEL */

/* Large Desktop (1400px and above) */
@media (min-width: 1400px) {
  .notification-bar {
    width: 450px !important;
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .notification-bar {
    width: 400px !important;
  }
}

/* Tablet Landscape (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .notification-bar {
    width: 380px !important;
  }
}

/* Tablet Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .notification-bar {
    width: 380px !important;
  }
  
  .notification-backdrop {
    display: block !important;
  }
  
  .notification-bar .notification-p {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
  
  .notification-bar .text {
    font-size: 20px !important;
  }
}

/* Mobile Landscape (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .notification-bar {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  
  .notification-backdrop {
    display: block !important;
  }
  
  .notification-bar .notification-p {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  
  .notification-bar .text {
    font-size: 18px !important;
    margin-top: -35px !important;
  }
  
  .notification-bar .icon-border {
    height: 28px !important;
    width: 28px !important;
  }
  
  .notification-bar .icon {
    height: 18px !important;
    width: 18px !important;
  }
  
  .notification-bar .notification-item {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
  .notification-bar {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  
  .notification-backdrop {
    display: block !important;
  }
  
  .notification-bar .notification-p {
    padding: 12px 16px !important;
    font-size: 13px !important;
    margin-left: 0 !important;
  }
  
  .notification-bar .text {
    font-size: 16px !important;
    margin-top: -35px !important;
  }
  
  .notification-bar .icon-border {
    height: 24px !important;
    width: 24px !important;
  }
  
  .notification-bar .icon {
    height: 16px !important;
    width: 16px !important;
  }
  
  .notification-bar .notification-item {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  
  .notification-bar .solid {
    padding: 0px 6px 0px 12px !important;
  }
  
  /* Adjust header padding on mobile */
  .notification-bar .notification-header {
    padding: 16px 20px !important;
  }
  
  .notification-bar .notification-header .text-white {
    font-size: 16px !important;
  }
  
  .notification-bar .notification-header button {
    padding: 6px 10px !important;
    min-width: auto !important;
  }
  
  .notification-bar .notification-header button svg {
    font-size: 16px !important;
  }
}

/* Tablet adjustments for header */
@media (min-width: 768px) and (max-width: 991px) {
  .notification-bar .notification-header {
    padding: 18px 22px !important;
  }
}

/* Modern Pagination Styles for Notifications */
.notification-bar .MuiButton-root {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-bar .MuiButton-root:not(.Mui-disabled):hover {
  transform: translateY(-1px);
}

.notification-bar .MuiButton-root:not(.Mui-disabled):active {
  transform: translateY(0);
}

/* Pagination Container */
.notification-pagination-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  border-top: 2px solid #e5e7eb;
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  box-shadow: var(--shadow-sm);
}

/* Page Info Badge */
.notification-page-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(6, 49, 100, 0.08) 0%, rgba(6, 49, 100, 0.12) 100%);
  padding: 6px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(6, 49, 100, 0.2);
  box-shadow: var(--shadow-md);
}

/* Pagination Buttons */
.notification-pagination-button {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.notification-pagination-button:not(.Mui-disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.notification-pagination-button.active {
  box-shadow: var(--shadow-md) !important;
  font-weight: 700 !important;
}

/* Responsive Pagination */
@media (max-width: 767px) {
  .notification-pagination-container {
    padding: 16px 20px;
    gap: 12px;
  }
  
  .notification-pagination-button {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  
  .notification-page-info {
    padding: 4px 10px;
    font-size: 12px;
  }
}

@media (max-width: 479px) {
  .notification-pagination-container {
    padding: 12px 16px;
    gap: 10px;
  }
  
  .notification-pagination-button {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  
  /* Hide some page numbers on very small screens */
  .notification-pagination-button:not(.active):not(:first-of-type):not(:last-of-type):not(:nth-of-type(2)):not(:nth-last-of-type(2)) {
    display: none;
  }
}

/* Responsive only: prevent header icons (e.g. notification) from being cut off – do NOT change desktop/non-responsive layout */
@media (max-width: 900px) {
  .my-nav {
    overflow: visible !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .main-nav-responsive-section {
    overflow: visible !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }
  .need-help-section {
    max-width: 160px !important;
    min-width: 0 !important;
  }
  .setting-notification {
    flex-shrink: 0 !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
  .setting-notification > div {
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
}

/* Minimal navbar mobile fixes – single row: Hamburger | Company (left), Icon group fixed on right */
@media (max-width: 767px) {
  .my-nav {
    padding: 10px 14px !important;
    gap: 0 !important;
    position: relative !important;
    min-height: 56px !important;
  }
  .mobile-header-row-ref {
    flex-wrap: nowrap !important;
  }
  .main-nav-responsive-section {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }
  .main-nav-responsive-section > *:not(.setting-notification) {
    display: none !important;
  }
  .main-nav-responsive-section .setting-notification {
    pointer-events: auto !important;
    margin: 0 !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex-shrink: 0 !important;
  }
  .main-nav-responsive-section .setting-notification > div {
    padding: 0 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .main-nav-responsive-section .setting-notification .notification-set,
  .main-nav-responsive-section .setting-notification > div > div {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .main-nav-responsive-section .setting-notification .MuiDivider-root {
    /* height: 18px !important; */
    margin: 0 2px !important;
  }
  .main-nav-cj-theme .mobile-header-row-ref {
    position: relative !important;
    z-index: 1 !important;
    max-width: calc(100% - 120px) !important;
    min-width: 0 !important;
  }
  .main-nav-cj-theme .main-nav-responsive-section .setting-notification {
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .main-nav-cj-theme .setting-notification {
    margin-top: 0 !important;
  }
  .main-nav-cj-theme .setting-notification .mx-3 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .navigator-bar {
    display: none !important;
  }
  .need-help-section.d-md-none {
    display: none !important;
  }
}

/* Fix spacing issue below 319px - remove unwanted margins without reducing sizes */
@media (max-width: 319px) {
  .setting-notification {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .setting-notification .mx-2,
  .setting-notification .mx-3 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  .main-nav-responsive-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* Reason column styling for proper word wrapping without breaking UI */
/* Ensure Reason column wraps properly with justified text */
table .MuiTableCell-root:has-text("Reason"),
table .MuiTableCell-root[data-column="reason"] {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 300px !important;
  min-width: 200px !important;
  line-height: 1.5 !important;
  vertical-align: top !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* Reason column in mobile collapse - justified text */
.mobile-table-collapse .mobile-data-row[data-reason="true"] .mobile-data-value {
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* —— Jobber data table (style guide §2–§6, §12) — design tokens —— */
.jobber-table-v2 {
  /* Spacing & radius (§4) */
  --jobber-space-xs: 4px;
  --jobber-space-sm: 8px;
  --jobber-space-md: 12px;
  --jobber-space-base: 16px;
  --jobber-radius-md: 8px;
  --jobber-radius-lg: 12px;
  --jobber-radius-pill: 9999px;
  /* Colors (§2) */
  --jobber-border: #e5e7eb;
  --jobber-bg-main: #f7f8fa;
  /* Row striping: #FFF / #FAFBFC; hover #EFF6FF */
  --jobber-row-base: #ffffff;
  --jobber-row-zebra: #fafbfc;
  --jobber-row-hover: #eff6ff;
  --jobber-row-selected: #dbeafe;
  --jobber-row-selected-hover: #bfdbfe;
  --jobber-text-body: #374151;
  --jobber-text-muted: #6b7280;
  /* Match contractor BlueButton (Button/style.css — navy-deep / navy-mid) */
  --jobber-blue-primary: var(--navy-deep);
  --jobber-blue-primary-hover: var(--navy-mid);
  --jobber-mono-id: var(--navy-deep);
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.jobber-table-v2 .MuiTableCell-root {
  border-bottom: 1px solid var(--jobber-border);
}

.jobber-table-v2 .MuiTableHead-root .MuiTableCell-root,
.jobber-table-v2__th {
  background: #fafbfc !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 16px !important;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
  line-height: 1.25 !important;
  border-bottom: 1px solid var(--jobber-border) !important;
}

.jobber-table-v2__th-label {
  display: inline;
  vertical-align: middle;
}

.jobber-table-v2__sort-icon {
  color: #9ca3af !important;
  vertical-align: middle !important;
  margin-left: 2px !important;
}

.jobber-table-v2__sort-icon--active {
  color: var(--jobber-blue-primary) !important;
}

.jobber-table-v2__td {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--jobber-text-body) !important;
  padding: var(--jobber-space-base) !important;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
  vertical-align: middle !important;
  line-height: 1.43 !important;
  border-bottom: 1px solid var(--jobber-border) !important;
  background-color: var(--jobber-row-base) !important;
}

/* Zebra rows + hover; per-cell backgrounds (MUI TableCell) — direct child avoids nested table bleed */
.jobber-table-v2 tbody tr.jobber-table-v2__row > td.jobber-table-v2__td {
  background-color: var(--jobber-row-base) !important;
  transition: background-color 0.12s ease;
}

.jobber-table-v2 tbody tr.jobber-table-v2__row--alt > td.jobber-table-v2__td {
  background-color: var(--jobber-row-zebra) !important;
}

.jobber-table-v2 tbody tr.jobber-table-v2__row:hover:not(.jobber-table-v2__row--expanded) > td.jobber-table-v2__td {
  background-color: var(--jobber-row-hover) !important;
}

.jobber-table-v2 tbody tr.jobber-table-v2__row--expanded > td.jobber-table-v2__td {
  background-color: var(--jobber-row-selected) !important;
}

.jobber-table-v2 tbody tr.jobber-table-v2__row--expanded:hover > td.jobber-table-v2__td {
  background-color: var(--jobber-row-selected-hover) !important;
}

.jobber-table-v2 tbody tr.jobber-table-v2__row--clickable {
  cursor: pointer;
}

.jobber-table-v2 tbody tr.jobber-table-v2__row--clickable:focus-visible {
  outline: 2px solid var(--jobber-blue-primary);
  outline-offset: -2px;
}

.jobber-table-v2 tbody tr.jobber-table-v2__row-nested .MuiTableCell-root {
  background-color: var(--jobber-bg-main) !important;
}

.jobber-table-v2__td .jobber-table-v2__mono,
.jobber-table-v2__mono {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace !important;
  font-size: 13px !important;
  color: var(--jobber-mono-id) !important;
}

.jobber-table-v2__td--empty {
  padding: 24px !important;
}

/* Quote # / Contract # / Invoice # cell — stay inside column (no bleed into Property, etc.) */
.jobber-table-v2__td .jobber-doc-ref-title-cell {
  max-width: 100%;
  min-width: 0;
}

/* row hover handled per-cell above for zebra compatibility */

.jobber-table-v2__td a,
.jobber-table-v2__td .text-blue-color {
  color: var(--jobber-blue-primary) !important;
}

.jobber-table-v2__collapse-icon {
  color: var(--jobber-blue-primary) !important;
}

/* Match JobberListCard toolbar gutters — cards were edge-to-edge inside the white shell */
.jobber-table-mobile-cards-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 575px) {
  .jobber-table-mobile-cards-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* —— JobberTable mobile card rows (collapsible list / reference layout) —— */
.jobber-table-v2--mobile-cards {
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

.jobber-table-v2--mobile-cards .MuiTableHead-root {
  display: none !important;
}

.jobber-table-v2--mobile-cards tbody .jobber-mobile-card-td {
  border-bottom: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.jobber-mobile-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--jobber-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.jobber-mobile-card--expanded {
  box-shadow: var(--shadow-md);
  border-color: #c7d2fe;
}

/*
 * Summary: CSS grid — title block gets a dedicated column so long names wrap; status + chevron
 * sit in a narrow right column (top-aligned), matching small-screen lists where line 1 sits beside the badge.
 */
.jobber-mobile-card__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  grid-column-gap: 10px;
  column-gap: 10px;
  grid-row-gap: 0;
  row-gap: 0;
  padding: 14px 12px 14px 14px;
  cursor: pointer;
  outline: none;
}

.jobber-mobile-card__summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--navy-deep);
  box-shadow: inset 0 0 0 2px var(--jobber-blue-primary, var(--navy-deep));
}

.jobber-mobile-card__summary-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}

.jobber-mobile-card__primary {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--navy-deep);
  color: var(--jobber-blue-primary, var(--navy-deep));
  min-width: 0;
  max-width: 100%;
}

.jobber-mobile-card__primary .jobber-avatar-inline__name,
.jobber-mobile-card__primary .customer-table-name-block__name {
  color: inherit;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Customer / Quotes lists: avatar | (name [+ email on customers]) */
.customer-table-name-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.customer-table-name-block__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1;
}

.customer-table-name-block__email {
  display: none !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  margin-top: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.jobber-mobile-card__primary .customer-table-name-block__email {
  display: block !important;
}

.jobber-mobile-card__subtitle {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  color: var(--jobber-text-muted, #6b7280);
  line-height: 1.4;
}

.jobber-mobile-card__subtitle-label {
  font-weight: 500;
  margin-right: 4px;
}

.jobber-mobile-card__summary-end {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: none;
  width: auto;
  max-width: none;
  min-width: 0;
}

.jobber-mobile-card__status {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

.jobber-mobile-card__status .jobber-status-pill {
  display: inline-flex;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

.jobber-mobile-card__chevron {
  flex-shrink: 0;
  margin-top: 0 !important;
  background: #f3f4f6 !important;
  border-radius: 50% !important;
  padding: 4px !important;
}

.jobber-mobile-card__chevron:hover {
  background: #e5e7eb !important;
}

/*
 * Mobile card summary: smaller padding / controls on narrow phones.
 */
@media (max-width: 575px) {
  .jobber-mobile-card__summary {
    padding: 11px 10px 11px 12px;
    column-gap: 8px;
  }

  .jobber-mobile-card__subtitle {
    margin-top: 4px;
  }

  .jobber-mobile-card__summary-end {
    gap: 6px;
  }

  .jobber-mobile-card__status .jobber-status-pill {
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  .jobber-mobile-card__chevron.MuiIconButton-root {
    padding: 2px !important;
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .jobber-mobile-card__chevron .jobber-table-v2__collapse-icon {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 380px) {
  .jobber-mobile-card__summary-end {
    gap: 6px;
  }

  .jobber-mobile-card__status .jobber-status-pill {
    padding: 2px 6px;
    font-size: 10px;
  }

  .jobber-mobile-card__chevron.MuiIconButton-root {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .jobber-mobile-card__chevron .jobber-table-v2__collapse-icon {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
  }
}

.jobber-mobile-card__expanded {
  background: #fafbfc;
}

.jobber-mobile-card__collapse-inner.mobile-table-collapse {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Full-bleed content: beat legacy .mobile-table-collapse .mobile-collapse-content { width: calc(100% - 16px); margin: 8px } */
.jobber-mobile-card__collapse-inner.mobile-table-collapse .mobile-collapse-content {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  padding: 12px 16px 16px !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Actions footer — 2×2 grid, readable text (fixes letter-stacking bug from flex+min-width:0) */
.jobber-mobile-card__actions.mobile-action-row {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-top: 1px solid #e5e7eb !important;
  border-top: 1px solid var(--jobber-border, #e5e7eb) !important;
  border-radius: 0 !important;
  background: #f4f6f8 !important;
  box-sizing: border-box !important;
}

.jobber-mobile-card__actions .mobile-data-label {
  display: none !important;
}

/*
 * .mobile-action-buttons wraps: [desktop ⋮ Box] + [customer-list-actions-mobile Box with 4 btns] + [Menu].
 * Grid must be on .customer-list-actions-mobile only — grid on the outer wrapper laid out
 * wrapper boxes instead of the four buttons and caused overlap.
 */
.jobber-mobile-card__actions .mobile-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 14px 14px 16px !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}

.jobber-mobile-card__actions .mobile-action-buttons .MuiButton-root {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: initial !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: none !important;
          hyphens: none !important;
  text-align: center !important;
  line-height: 1.25 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/*
 * Customer actions: View, Edit, Deactivate, 2FA, Delete (Delete may be hidden by permission).
 * auto-fit wraps 4–5 buttons; very narrow: 2 columns.
 */
.jobber-mobile-card__collapse-inner .customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.jobber-mobile-card__collapse-inner .customer-list-actions-mobile .MuiButton-root {
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  font-size: 0.7rem !important;
  padding: 6px 4px !important;
  min-height: 36px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
  .jobber-mobile-card__collapse-inner .customer-list-actions-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .jobber-mobile-card__collapse-inner .customer-list-actions-mobile .MuiButton-root {
    font-size: 0.8125rem !important;
    padding: 10px 8px !important;
    min-height: 44px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }
}

/*
 * Kill overlap: legacy .mobile-table-collapse rules give .mobile-data-value { flex:1 }
 * and .mobile-action-buttons { display:flex } + buttons { flex-shrink:0 }.
 */
.jobber-mobile-card__collapse-inner .jobber-mobile-card__actions.mobile-action-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.jobber-mobile-card__collapse-inner .jobber-mobile-card__actions .mobile-data-value.mobile-action-buttons {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Undo legacy “max-width: none on everything” for button subtree */
.jobber-mobile-card__collapse-inner .jobber-mobile-card__actions .mobile-action-buttons * {
  max-width: 100% !important;
}

/* Customer list: desktop ⋮ vs mobile action grid (775px matches JobberTable) */
.customer-list-actions-desktop {
  display: none;
  justify-content: center;
  align-items: center;
}

.customer-list-actions-mobile {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
  align-items: stretch;
}

/* Full-width navy CTA under action grid */
.jobber-mobile-card__collapse-inner .mobile-view-button {
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  border-radius: 0 0 12px 12px !important;
  padding: 14px 16px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-transform: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 776px) {
  .customer-list-actions-desktop {
    display: inline-flex !important;
  }

  .customer-list-actions-mobile {
    display: none !important;
  }
}

@media (max-width: 775px) {
  .customer-list-actions-desktop {
    display: none !important;
  }

  .customer-list-actions-mobile {
    display: grid !important;
  }
}

/*
 * Stacked label above value — full width (legacy @media rules use row + space-between
 * and label flex:0 / value flex:1 which looked ~half-empty next to long labels).
 */
.jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 12px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  align-self: stretch !important;
  text-align: left !important;
}

.jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value {
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  align-self: stretch !important;
  color: #0f2b46 !important;
  color: var(--navy-deep, #0f2b46) !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
}

/* Plain text + any inner wrappers (e.g. address div) use full column width */
.jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) {
  border-bottom: 1px solid #e5e7eb !important;
}

.jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row):has(+ .mobile-action-row) {
  border-bottom: none !important;
}

.jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) + .mobile-action-row {
  margin-top: 0 !important;
}

.jobber-search-v2-wrap {
  min-width: 200px;
  max-width: 480px;
  flex: 1 1 auto;
}

/* InputText shell (replaces old Paper + InputBase) */
.jobber-search-v2.cs-form-field {
  width: 100%;
}

.jobber-search-v2 .cs-input-shell {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  border-radius: 9999px !important;
  box-shadow: var(--shadow-sm);
}

.jobber-search-v2__icon {
  color: #9ca3af !important;
}

.jobber-search-v2:focus-within .cs-input-shell,
.jobber-search-v2 .cs-input-shell:focus-within {
  border-color: #2563eb !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-sm), var(--focus-ring) !important;
}

/* Typed search text must stay visible (override parent color / autofill) */
.jobber-search-v2 .MuiInputBase-root,
.jobber-search-v2 .jobber-search-v2__input-root {
  color: #1f2937 !important;
}

.jobber-search-v2 .MuiInputBase-input,
.jobber-search-v2 input.jobber-search-v2__input,
.jobber-search-v2 input.cs-input,
.jobber-search-v2 input[type="text"] {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  caret-color: #1f2937 !important;
}

.jobber-search-v2 .MuiInputBase-input::placeholder,
.jobber-search-v2 input::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  opacity: 1 !important;
}

/* Toolbar: dropdown + search + CTA share one height */
.jobber-list-card__toolbar .jobber-toolbar-dropdown .dropdown-toggle,
.jobber-toolbar-dropdown__toggle {
  max-height: 40px !important;
}

.jobber-toolbar-dropdown--light .jobber-toolbar-dropdown__toggle--light {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

.jobber-pagination-v2 {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.jobber-pagination-v2__rows-toggle {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

.jobber-pagination-v2__rows-item {
  color: #1f2937 !important;
  font-size: 0.875rem !important;
}

.jobber-pagination-v2__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease, border-color 150ms ease;
}

.jobber-pagination-v2__arrow:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #d1d5db;
}

.jobber-pagination-v2__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.jobber-pagination-v2__page {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  line-height: 1;
}

.jobber-pagination-v2__page:hover {
  background: #f9fafb;
}

.jobber-pagination-v2__page--active {
  background: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #fff !important;
}

/* Donor app — pagination active page uses teal, not contractor navy */
.jobber-pagination-v2--donor .jobber-pagination-v2__page--active {
  background: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #fff !important;
}

/* §6 Status badges */
.jobber-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body), "Segoe UI", system-ui, sans-serif;
  line-height: 1.25;
  box-sizing: border-box;
}

.jobber-status-pill--active,
.jobber-status-pill--approved,
.jobber-status-pill--paid {
  background: var(--green-light);
  color: #065f46;
}

.jobber-status-pill--scheduled {
  background: var(--blue-light);
  color: #1e40af;
}

.jobber-status-pill--draft,
.jobber-status-pill--inactive {
  background: var(--bg-main);
  color: var(--text-secondary);
}

.jobber-status-pill--unpaid,
.jobber-status-pill--overdue {
  background: var(--red-light);
  color: #991b1b;
}

.jobber-status-pill--unscheduled {
  background: var(--yellow-light);
  color: #92400e;
}

.jobber-status-pill--neutral {
  background: var(--bg-main);
  color: var(--text-secondary);
}

.jobber-status-pill--change {
  background: var(--amber-light);
  color: #9a3412;
}

.jobber-status-pill--converted {
  background: #ede9fe;
  color: #5b21b6;
}

/* Avatar + name (data table identity) */
.jobber-avatar-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.jobber-avatar-inline--circle-only {
  gap: 0;
}

.jobber-avatar-inline__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.jobber-avatar-inline__name {
  color: #374151;
  font-size: 14px;
  font-weight: 400;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Shell fills content area — avoids off-center / extra inset vs title (appointments, quotes, etc.) */
.jobber-list-card-wrap.MuiGrid-root {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.jobber-list-card-wrap .jobber-list-card.card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Square corners + flush thead: outer card is the only frame; strip inner shell chrome */
.jobber-list-card.card {
  border-radius: 0 !important;
}
.jobber-list-card .card-header.jobber-list-card__header {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.jobber-list-card .card-footer.jobber-list-card__footer {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.jobber-list-card .cj-data-table-shell {
  border-radius: 0 !important;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* H3 / Card toolbar: bold title + muted "n total" (All Quotes 10 total) */
.jobber-list-card__title {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  line-height: 1.3 !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
}

.jobber-list-card__title-main {
  font-family: "Poppins", "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: #1f2937 !important;
}

.jobber-list-card__title-count {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  letter-spacing: 0.02em;
}

/* JobberListCard — CTA last (right); aligns with contractor BlueButton (--navy-deep / --navy-mid) */
.jobber-list-card__toolbar {
  flex: 1 1 auto;
  min-width: 0;
}

/* JobberListCard header — mobile: stack title / search / CTA, full-width fields (routes without Client/Views/style.css e.g. superadmin Industry) */
@media (max-width: 575px) {
  .jobber-list-card__header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .jobber-list-card__header .jobber-list-card__title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Overrides JobberListCard inline marginLeft:auto / justifyContent on narrow screens */
  .jobber-list-card__header .jobber-list-card__toolbar {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .jobber-list-card__header .jobber-search-v2-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .jobber-list-card__header .jobber-list-card__cta {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* §12 — clean white footer strip for pagination */
.jobber-list-card__footer {
  background-color: #ffffff !important;
}

/* General Ledger (admin + customer): global `.customersAddCustomers .searchBarOfTable { margin-left: auto }`
   also hits the nested search wrapper and splits date/export left vs search right — keep one right-aligned group */
.customersAddCustomers .billing-history-ledger-toolbar .searchBarOfTable,
.customersAddCustomers .customer-ledger-jobber-toolbar .searchBarOfTable {
  margin-left: 0 !important;
}

.jobber-list-card__cta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.jobber-list-card__cta-plus {
  font-size: 18px !important;
  flex-shrink: 0;
  opacity: 0.95;
}

.jobber-list-card__cta.text-white-color,
.jobber-list-card__cta.bg-blue-color,
.jobber-list-card__cta.border-blue-color,
.jobber-list-card__cta {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.jobber-list-card__cta:hover,
.jobber-list-card__cta:focus,
.jobber-list-card__cta:active {
  background-color: var(--navy-mid) !important;
  border-color: var(--navy-mid) !important;
  color: #ffffff !important;
}

.jobber-list-card__cta.jobber-list-card__cta--donor,
.jobber-list-card__cta.jobber-list-card__cta--donor.text-white-color {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}

.jobber-list-card__cta.jobber-list-card__cta--donor:hover,
.jobber-list-card__cta.jobber-list-card__cta--donor:focus,
.jobber-list-card__cta.jobber-list-card__cta--donor:active {
  background-color: var(--donor-hover-bg) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}

/* §4 Buttons — shared variants (primary aligns with list-card CTA; use with native <button> or MUI) */
.jobber-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  border-style: solid !important;
  border-width: 1px !important;
  box-shadow: none !important;
  outline: none !important;
}

.jobber-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.jobber-btn .MuiSvgIcon-root,
.jobber-btn svg {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.jobber-btn--sm {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.jobber-btn--sm .MuiSvgIcon-root,
.jobber-btn--sm svg {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

.jobber-btn--md {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 16px !important;
}

.jobber-btn--lg {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
}

.jobber-btn--primary {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
}

.jobber-btn--primary:hover:not(:disabled),
.jobber-btn--primary:focus-visible:not(:disabled) {
  background-color: var(--navy-mid) !important;
  border-color: var(--navy-mid) !important;
  color: #ffffff !important;
}

.jobber-btn--donor-primary {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}

.jobber-btn--donor-primary:hover:not(:disabled),
.jobber-btn--donor-primary:focus-visible:not(:disabled) {
  background-color: var(--donor-hover-bg) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}

.jobber-btn--secondary {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

.jobber-btn--secondary:hover:not(:disabled),
.jobber-btn--secondary:focus-visible:not(:disabled) {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

.jobber-btn--ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--navy-deep) !important;
}

.jobber-btn--ghost:hover:not(:disabled),
.jobber-btn--ghost:focus-visible:not(:disabled) {
  background-color: #eff6ff !important;
  color: var(--navy-mid) !important;
}

.jobber-btn--danger {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.jobber-btn--danger:hover:not(:disabled),
.jobber-btn--danger:focus-visible:not(:disabled) {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

/* Bootstrap dropdown-toggle + Jobber ghost (reactstrap) */
.btn.dropdown-toggle.jobber-btn--ghost,
.dropdown-toggle.jobber-btn.jobber-btn--ghost {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--navy-deep) !important;
  box-shadow: none !important;
}

.btn.dropdown-toggle.jobber-btn--ghost:hover:not(:disabled),
.dropdown-toggle.jobber-btn.jobber-btn--ghost:hover:not(:disabled),
.btn.dropdown-toggle.jobber-btn--ghost.show {
  background-color: #eff6ff !important;
  color: var(--navy-mid) !important;
}

/* CJ mobile header: one flex row — hamburger | company (desktop-style type) | settings + notification */
@media (max-width: 767px) {
  .main-nav-cj-theme.my-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .main-nav-cj-theme .mobile-header-row-ref {
    flex: 1 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    padding-right: 4px !important;
  }
  .main-nav-cj-theme .main-nav-responsive-section {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    pointer-events: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }
  .main-nav-cj-theme .main-nav-responsive-section .setting-notification {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  .main-nav-cj-theme .main-nav-responsive-section .setting-notification > div {
    max-height: none !important;
    height: auto !important;
    min-height: 36px !important;
  }
  /* Icons live inside .navigator-bar; legacy rule hid the whole bar on mobile */
  .main-nav-cj-theme .navigator-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .main-nav-cj-theme .navigator-bar .logo-box-in-nav,
  .main-nav-cj-theme .navigator-bar .breadcrumb {
    display: none !important;
  }
  .main-nav-cj-theme .navigator-bar .cj-nav-search-placeholder {
    display: none !important;
  }
}
/* Base card styles */
.notification-card {
	display: flex;
	gap: 12px;
	padding: 16px;
	background: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	min-width: 400px;
}

@keyframes slideInNotification {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.notification-card:hover {
	background: #f8fafc;
}

.notification-card.unread {
	background: #f8fafc;
}

.notification-icon {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	background: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	padding: 6px !important;
	border-radius: 6px !important;
}

.notification-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.notification-content {
	flex: 1 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.notification-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.notification-text {
	font-size: 0.875rem !important;
	color: #475569 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	padding-right: 8px;
}

.creator-name {
	font-weight: 600;
	color: #1e293b;
}

.document-type {
	color: #1e293b;
}

.amount {
	color: #047857;
	font-weight: 500;
}

.notification-time {
	font-size: 0.75rem !important;
	color: #94a3b8 !important;
	white-space: nowrap;
}

.notification-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.document-title {
	font-size: 0.813rem !important;
	color: #64748b !important;
	margin: 0 !important;
}

.customer-name {
	font-size: 0.813rem !important;
	color: #94a3b8 !important;
	margin: 0 !important;
}

/* Info Boxes Section */
.info-boxes-section {
	margin-left: 52px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 12px;
	gap: 12px;
	align-items: stretch;
}

/* Document Details Box */
.document-details-box {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Payment Details Box */
.payment-details-box {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 200px;
}

/* Search and Filter Styles */
.notification-search-section {
	background: #fafbfc;
	border-bottom: 1px solid #f0f2f5;
	padding: 16px 24px;
}

.notification-search-input {
	background: white;
	border-radius: 8px;
	margin-bottom: 16px;
}

.notification-filter-controls {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.notification-filter-button {
	border-radius: 6px;
	text-transform: none;
	font-weight: 500;
	transition: all 0.2s ease;
}

.notification-filter-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
}

.notification-filter-panel {
	background: white;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	padding: 16px;
	margin-top: 16px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	box-shadow: var(--shadow-sm);
}

.notification-date-input {
	min-width: 150px;
}

.notification-type-select {
	min-width: 150px;
}

.notification-results-count {
	color: #6b7280;
	font-size: 12px;
	margin-left: auto;
	font-weight: 500;
}

.notification-clear-filters {
	color: #ef4444;
	text-transform: none;
	font-weight: 500;
	transition: all 0.2s ease;
}

.notification-clear-filters:hover {
	background: rgba(239, 68, 68, 0.1);
}

/* Empty State Styles */
.notification-empty-state {
	padding: 40px 24px;
	text-align: center;
}

.notification-empty-state h6 {
	margin-bottom: 8px;
	font-weight: 600;
}

.notification-empty-state p {
	color: #6b7280;
	font-size: 14px;
	margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
	.notification-filter-panel {
		flex-direction: column;
		align-items: stretch;
	}
	
	.notification-date-input,
	.notification-type-select {
		min-width: 100%;
	}
	
	.notification-filter-controls {
		flex-direction: column;
		align-items: stretch;
	}
	
	.notification-results-count {
		margin-left: 0;
		text-align: center;
	}
}

/* Animation for filter panel */
.notification-filter-panel {
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Focus states for better accessibility */
.notification-search-input:focus-within {
	box-shadow: var(--focus-ring-blue-alt);
}

.notification-filter-button:focus {
	box-shadow: var(--focus-ring-blue-alt);
}

/* Hover effects for interactive elements */
.notification-search-input:hover {
	box-shadow: var(--shadow-sm);
}

.notification-filter-button:hover {
	background: rgba(59, 130, 246, 0.1);
}

.blue {
	color: var(--navy-deep);
}

.blue-bg {
	background-color: var(--navy-deep);
}

.light-blue {
	color: #3b82f6;
}

.light-blue-bg {
	background-color: #eff6ff;
}

.lighter-blue-bg {
	background-color: #dbeafe;
}

.white {
	color: #ffffff;
}

.white-bg {
	background-color: #ffffff;
}

.gray {
	color: #64748b;
}

.gray-bg {
	background-color: #e5e7eb;
}

.light-gray {
	color: #94a3b8;
}

.light-gray-bg {
	background-color: #f8fafc;
}

.dark {
	color: #1e293b;
}

.text-gray {
	color: #334155;
}

.success {
	color: #047857;
}

.success-bg {
	background-color: #ecfdf5;
}

.success-border {
	border-color: #6ee7b7;
}

.success-light {
	color: #059669;
}

.error {
	color: #dc2626;
}

.border-gray {
	border-color: #e2e8f0;
}

/* DatePicker Component Styles */

.date-picker-component {
  width: 100%;
}

/* Match InputText / InputFields — soft gray border, blue on focus */
.date-picker-component .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: #e5e7eb !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.date-picker-component .MuiOutlinedInput-root:hover:not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline {
  border-color: #d1d5db !important;
}

.date-picker-component .MuiOutlinedInput-root.Mui-focused:not(.Mui-error) .MuiOutlinedInput-notchedOutline {
  border-color: #2563eb !important;
}

.date-picker-component .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: #dc3545 !important;
}

/* Hide year selector dropdown in calendar header */
.date-picker-component .MuiPickersCalendarHeader-switchViewButton {
  display: none !important;
}

.date-picker-component .MuiPickersCalendarHeader-labelContainer button {
  display: none !important;
  pointer-events: none !important;
}

.date-picker-error {
  color: #d32f2f;
  margin-left: 10px;
  font-size: 13px;
}

/* Responsive Design - Following project pattern */

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
  .date-picker-component {
    min-width: 100% !important;
  }
}

/* 280 */
@media (max-width: 319px) {}

/* Mobile Calendar Dialog - Display Selected Date in Toolbar */
@media (max-width: 767px) {
  /* Ensure toolbar is visible and displays the selected date */
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-root {
    display: flex !important;
    padding: 16px !important;
    min-height: 60px !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }

  /* Toolbar content container */
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Toolbar text - display the selected date - Target all possible selectors */
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-text,
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-root .MuiTypography-root,
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-root .MuiTypography-h4,
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-content .MuiTypography-root,
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-content .MuiTypography-h4 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #0f2b46 !important;
    text-align: center !important;
    min-height: 24px !important;
  }

  /* Display selected date value */
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-text[data-value] {
    display: block !important;
  }

  /* Hide placeholder when date is selected */
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-text:not([data-value=""]) {
    display: block !important;
  }

  /* Ensure the toolbar displays the formatted date */
  .MuiPickersMobileWrapper-root .MuiPickersToolbar-root .MuiPickersToolbar-text {
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* §7 drop zone — beats global .file-upload (e.g. Client/style.css) when combined */
.file-upload.file-upload--s7 {
  border: 1px dashed #e5e7eb !important;
  background-color: #f7f8fa !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Hover: same as §7 inputs — white fill, blue dashed border + focus ring */
.file-upload.file-upload--s7:hover {
  background-color: #ffffff !important;
  border: 1px dashed #2563eb !important;
  box-shadow: var(--focus-ring) !important;
}

@media (max-width: 355px) {

    .uploadfileslable{
        display: grid !important;
    }
}
@media (max-width: 767px){
    .fileUpload{
        margin-top: 6px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure file upload inside responsive container has proper padding */
    .responsive-file-upload .fileUpload {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding: 16px !important;
    }
}
@media (max-width: 319px){
    .fileUpload{
        margin-top: 37px  !important;
    }
}
/* 576 */
@media (max-width: 767px) {
     .productDragFole{
        margin-top: 37px !important;
     }
  }

/* 1680 */
@media (max-width: 1700px) {
    .rbc-btn-group {
      display: ruby !important;
      white-space: break-spaces !important;
    }
  }
  
  /* 1500 */
  @media (max-width: 1680px) {
  }
  
  /* 1440 */
  @media (max-width: 1449px) {
  }
  
  /* 1280 */
  @media (max-width: 1439px) {
  }
  
  /* 992 */
  @media (max-width: 1279px) {
    .display-file-main{
        overflow-x: scroll;
    }
  }
  
  /* 768 */
  @media (max-width: 991px) {}
  
  /* 576 */
  @media (max-width: 767px) {}
  
  /* 525 */
  @media (max-width: 575px) {}
  
  /* 480 */
  @media (max-width: 524px) {
  }
  
  /* 425 */
  @media (max-width: 479px) {}
  
  /* 375 */
  @media (max-width: 424px) {
    .addQUoteFileSelect{
        flex-direction: column !important;
        display: flex !important;
    }
    .drag-image-file{
        height: 30px !important;
    }
  }
  
  /* 320 */
  @media (max-width: 374px) {
    .drag-image-file{
        height: 30px !important;
    }
  }
  
  /* 280 */
  @media (max-width: 319px) {
    .drag-image-file{
        height: 30px !important;
    }
  }
  
.visit-schedule,
.user-assignment {
  width: 48%;
}

.boxShadowNone {
  box-shadow: none !important;
}

.shceduleVistFormI .MuiOutlinedInput-root {
  border-radius: 10px !important;
}

.shceduleVistFormI.MuiFormControl-root.MuiTextField-root.Note-details.text-blue-color.my-2.shceduleVistFormI.shceduleVisitItemNameInoutsss.css-10bpx9s-MuiFormControl-root-MuiTextField-root {
  width: 82% !important;
}

.visitTitleTag.MuiFormControl-root.MuiTextField-root.text-blue-color.mb-2.mx-0.shceduleVisitItemNameInout.css-odsttg-MuiFormControl-root-MuiTextField-root {
  width: 82% !important;
}

.shceduleAssignForm.shceduleAssignForm.card {
  min-height: 100px !important;
  overflow-y: auto !important;
}

/* Duration row: avoid overflow; native/unit select lives in InputText shell */
.recurring-duration-row {
  box-sizing: border-box;
}
.recurring-duration-row .cs-form-field,
.recurring-duration-row .cs-input-shell {
  max-width: 100%;
}

.timeentryremoveWIdth.MuiFormControl-root.MuiTextField-root.timeentryremoveWIdth.css-1qphyur-MuiFormControl-root-MuiTextField-root {
  /* width: 70%; */
}

.ContrcatWidthDateFormat.MuiFormControl-root.MuiTextField-root.timeentryremoveWIdth.css-1qphyur-MuiFormControl-root-MuiTextField-root {
  width: 70%;
}

.MuiFormControl-root.MuiTextField-root.ContrcatWidthDateFormat.secondPartContrcatHere.css-1qphyur-MuiFormControl-root-MuiTextField-root.secondPartContrcatHere {
  width: 100% !important;
}

h2 {
  font-size: 1.2rem;
  color: #243a73;
  margin-bottom: 20px;
}

.date-time-group {
  margin-bottom: 15px;
}

.date-time-group label {
  display: block;
  font-size: 0.9rem;
  color: #243a73;
  margin-bottom: 5px;
}

.date-time-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d0d4da;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #333;
}

.checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.checkbox-group input {
  margin-right: 10px;
}

.checkbox-group label {
  font-size: 0.9rem;
  color: #243a73;
}

.user-assignment p {
  color: #9da2a7;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.assign-button {
  display: inline-block;
  background-color: #243a73;
  color: #ffffff;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

.assign-button:hover {
  background-color: #1a2d54;
}

.file-upload-label {
  cursor: pointer;
  color: #0f2b46;
  border: 0.5px solid #0f2b46;
  padding: 4px 5px 4px 5px;
  font-weight: 600;
  border-radius: 5px;
  width: 38%;
  margin-left: 60px !important;
}

.jobs .css-1yk1gt9-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root {
  border-radius: 9px !important;
  margin-bottom: 10px;
  border-color: red !important;
}

.jobs .css-dmmspl-MuiFormGroup-root {
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
}

.nozindex .css-zw3mfo-MuiModal-root-MuiDialog-root {
  z-index: 0 !important;
}

.recurring .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root {
  padding-right: 1px !important;
  border-radius: 12px;
  height: 43px !important;
}

.recurring .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
  width: 9% !important;
}

.recurring .css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input {
  padding: 13px !important;
}

.recurring .css-1yk1gt9-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root {
  font-weight: 400;
  font-size: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {
  .startTimeFirst {
    width: 50% !important;
  }

  .startEnd_contractTable {
    flex-direction: column;
  }

  .contractEnd_time {
    margin-top: 10px !important;
  }

  .calenderHeight {
    margin-top: 0px !important;
  }

  .startEndDateCol {
    width: 100% !important;
  }

  .statDateFormat.MuiFormControl-root.MuiTextField-root.ContrcatWidthDateFormat.css-1qphyur-MuiFormControl-root-MuiTextField-root {
    width: 100% !important;
  }

  .EndadateFormat {
    width: 100% !important;
  }
}

@media (max-width: 1289px) {
  .calenderHead_HideBtn {
    flex-direction: column !important;
  }

  .recurringScheTitle {
    margin-right: auto !important;
  }

  .btnhideFor {
    margin-left: auto !important;
    margin-bottom: 10px !important;
  }

  .btngotoright {
    /* margin-left: auto !important; */
  }
}

/* 768 */
@media (max-width: 991px) {
  .calender_head {
    font-size: 20px !important;
  }

  .internal-notes {
    margin-bottom: 18px !important;
  }

  .internal-notes {
    margin-bottom: 18px !important;
  }
}

/* 576 */
@media (max-width: 767px) {
  .totalCost_timeEntry {
    margin-top: 8% !important;
  }

  .shceduleVisitAddress {
    flex-direction: column !important;
  }

  .internal-notes {
    margin-bottom: 18px !important;
  }

  .shceduleVisitItemNameInout {
    width: 100% !important;
  }

  .visit_itemNoteDetail {
    width: 100% !important;
  }

  .shceduleVistFormI.MuiFormControl-root.MuiTextField-root.Note-details.text-blue-color.my-2.shceduleVistFormI.shceduleVisitItemNameInoutsss.css-10bpx9s-MuiFormControl-root-MuiTextField-root {
    width: 100% !important;
  }

  .startDate_visitSchedulePart {
    flex-direction: column !important;
  }

  .scheduleLineItem {
    display: none !important;
  }

  .user_visitSchedule {
    margin-left: 0px !important;
  }

  .totalCostTimeEntry {
    margin-top: 20px !important;
  }

  .addUserFullName {
    margin-top: 30px !important;
  }

  .user_visitSchedule {
    width: 100% !important;
  }

  .visitScheduleBtn {
    flex-direction: column !important;
  }

  .assignBtnDropDown {
    justify-content: start !important;
    flex-direction: column !important;
  }

  .assigndrop {
    margin-top: 11px !important;
  }

  .assignBtnWidth {
    width: 70% !important;
    white-space: nowrap !important;
  }

  .internal-notes {
    margin-bottom: 18px !important;
  }
}

/* 525 */
@media (max-width: 575px) {
  .startTime_endTime {
    flex-direction: column;
  }

  .internal-notes {
    margin-bottom: 18px !important;
  }

  .hours_minutes {
    flex-direction: column;
  }

  .hoursInput,
  .minutesInput {
    width: 100% !important;
  }

  .employeeInput,
  .labourCostInput {
    width: 100% !important;
  }

  .labourCostInput {
    margin-top: 5% !important;
  }

  .vistSheduled_visit,
  .itemNote_contractDetail,
  .startDate_visitSchedulePart {
    flex-direction: column !important;
  }

  .visit_itemNoteDetail,
  .contract_visitDetail {
    width: 100% !important;
  }

  .user_visitSchedule {
    margin-left: 0px !important;
    width: 100% !important;
  }

  .timeEntryEndAndStartDateFormat {
    flex-direction: column !important;
  }

  .shceduleVisitItemNameInout.MuiFormControl-root.MuiTextField-root.text-blue-color.mb-2.mx-0.shceduleVisitItemNameInout.css-1u3bzj6-MuiFormControl-root-MuiTextField-root {
    width: 100% !important;
  }

  .shceduleVisitItemNameInoutsss.MuiFormControl-root.MuiTextField-root.Note-details.text-blue-color.my-2.shceduleVistFormI.shceduleVisitItemNameInoutsss.css-10bpx9s-MuiFormControl-root-MuiTextField-root {
    width: 100% !important;
  }

  .visitScheduleBtn {
    flex-direction: column !important;
  }

  .visitScheduleMOdelBottom {
    margin-bottom: 0px !important;
    font-size: 22px !important;
  }

  .startAndEndTimeSchedule {
    flex-direction: column !important;
  }

  .timeentryremoveWIdth.MuiFormControl-root.MuiTextField-root.timeentryremoveWIdth.css-1qphyur-MuiFormControl-root-MuiTextField-root {
    width: 100%;
  }

  .timeEntryNewTiew {
    flex-direction: column !important;
  }

  .startTImeINput {
    width: 100% !important;
  }

  .MuiFormControl-root.MuiTextField-root.css-1qphyur-MuiFormControl-root-MuiTextField-root {
    width: 100% !important;
  }

  .gapInputStartAnd {
    gap: 10px !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .calenderHead_HideBtn {
    flex-direction: column;
    align-items: baseline !important;
  }

  .internal-notes {
    margin-bottom: 18px !important;
  }

  .calender_head {
    margin-right: auto;
    margin-right: 0px !important;
    font-size: 13px !important;
  }

  .hide-calendar {
    margin-left: auto;
  }

  .newTimeEntryStartEndTimeEn {
    flex-direction: column !important;
  }

  .startTimeTimeEntryWidth {
    width: 100% !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .internal-notes {
    margin-bottom: 18px !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  .labourCostInput {
    margin-top: 10% !important;
  }

  .slectShowNameModel {
    width: 161px !important;
    justify-content: space-between !important;
  }

  .internal-notes {
    margin-bottom: 18px !important;
  }

  .WIdthDecrese {
    width: 1% !important;
  }
}

/* 320 */
@media (max-width: 374px) {
  .timeEntryForm {
    flex-direction: column !important;
  }

  .durationFIrstBox {
    width: 100% !important;
    margin-right: 0px !important;
  }

  .durationSecondBox {
    margin-top: 10px !important;
  }

  .newTimeEntryAddContract {
    font-size: 19px !important;
  }

  .gapBtn {
    gap: 10px !important;
  }

  .timeEntryBtn.css-knqc4i-MuiDialogActions-root> :not(style)~ :not(style) {
    margin-left: 0px !important;
  }

  .css-knqc4i-MuiDialogActions-root> :not(style)~ :not(style) {
    margin-left: 0px !important;
  }

  .selectTeamModel {
    width: 170px !important;
  }
}

/* 280 */
@media (max-width: 319px) {
  .labourCostInput {
    margin-top: 30px !important;
  }

  .totalCost_timeEntry {
    margin-top: 16% !important;
  }

  .fileUploadDeshNo {
    margin-top: 40px !important;
  }

  .timeExpensesBoxBtn {
    flex-direction: column;
  }

  .startEndTimeFormatTime {
    min-width: 0px !important;
  }

  .timeentryremoveWIdth.MuiFormControl-root.MuiTextField-root.css-1qphyur-MuiFormControl-root-MuiTextField-root {
    min-width: 0px !important;
  }

  .totalCostTimeEntry {
    margin-top: 30px !important;
  }
}

label#\:r6\:-label {
  margin-top: 0 !important;
}

label#\:r6\:-label {
  margin-top: 0 !important;
}

/* 768 */
@media (max-width: 1980px) {
  .navbar-setting {
    display: none !important;
  }
}

/* 1680 */
@media (max-width: 1700px) {
  .navbar-setting {
    display: none !important;
  }
}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 992 */
@media (max-width: 1228px) {
  .sidebar {}

  .product-service-table {
    columns: 1;
  }

  .product-service-table {
    width: 85%;
  }
}

/* 5150 start  */
/* 768 */
@media (max-width: 991px) {
  .selectTeamModel {
    right: 0 !important;
  }

  .selectTeamModel {
    width: 258px !important;
  }
}

@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {}

.reccuringStartDate {
  width: 100% !important;
}


.glass-dialog {
  border-radius: 24px !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid #fff !important;
  overflow: hidden;
}

.glass-dialog-title {
  position: relative;
  overflow: hidden;
  line-height: 1.6;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  padding: 36px 0px 20px 26px !important;

}

.glass-dialog-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

}

.glass-dialog-title h2 {
  font-size: 78px !important;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  letter-spacing: 0.5px;
}

.glass-dialog-content {
  padding: 32px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.glass-input {
  width: 100%;
  margin-bottom: 20px;
}

.glass-input .MuiInputBase-root {
  border-radius: 12px;
  height: 58px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  /* border: 1px solid rgba(43, 88, 118, 0.1); */
}

.glass-input .MuiInputBase-root.Mui-focused {
  background: white;
}

.glass-input .MuiInputLabel-root {
  color: #2b5876;
  font-weight: 500;
  font-size: 15px;
}

.glass-button {
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.3px;
}

.glass-button-primary {
  color: white;
  box-shadow: var(--shadow-md);
  border: none;
}

.glass-button-secondary {
  background: white;
  color: #2b5876;
  border: 2px solid #2b5876;
  box-shadow: var(--shadow-md);
}

.glass-divider {
  margin: 0 32px;
  border-color: rgba(43, 88, 118, 0.1);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(43, 88, 118, 0.1), transparent);
}

.glass-team-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  border: 1px solid rgba(43, 88, 118, 0.1);
  margin-top: 20px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  position: relative;
  z-index: 1;
}

.glass-team-card-body {
  overflow-y: auto;
  overflow-x: hidden;
}

.glass-team-card-body::-webkit-scrollbar {
  width: 8px;
}

.glass-team-card-body::-webkit-scrollbar-track {
  background: rgba(43, 88, 118, 0.05);
  border-radius: 4px;
}

.glass-team-card-body::-webkit-scrollbar-thumb {
  background: rgba(43, 88, 118, 0.2);
  border-radius: 4px;
}

.glass-team-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(43, 88, 118, 0.3);
}

.glass-team-member {
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(43, 88, 118, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
  max-width: 100%;
}

.glass-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 10000;
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  animation: slideUp 0.3s ease-out;
  max-height: 370px;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-dropdown-header {
  color: white;
  padding: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.glass-dropdown-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

.glass-dropdown-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  max-height: calc(370px - 60px);
}

.glass-dropdown-container {
  position: relative;
}


.team-assignment-section {
  position: relative;
}

.glass-dropdown-body::-webkit-scrollbar {
  width: 8px;
}

.glass-dropdown-body::-webkit-scrollbar-track {
  background: rgba(43, 88, 118, 0.05);
  border-radius: 4px;
}

.glass-dropdown-body::-webkit-scrollbar-thumb {
  background: rgba(43, 88, 118, 0.2);
  border-radius: 4px;
}

.glass-checkbox {
  width: 20px;
  height: 20px;
  accent-color: #2b5876;
  cursor: pointer;
}

.glass-checkbox-label {
  color: #2b5876;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.glass-title {
  color: #2b5876;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 12px;
}

.glass-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #2b5876, #4e4376);
  border-radius: 2px;
}

.glass-subtitle {
  color: #4e4376;
  font-size: 15px;
  font-weight: 500;
}

.glass-text {
  color: #2b5876;
  font-size: 15px;
  font-weight: 500;
}

.glass-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.glass-table-cell {
  padding: 16px;
  border-bottom: 1px solid rgba(43, 88, 118, 0.1);
}

.glass-table-cell-label {
  color: #4e4376;
  font-weight: 600;
  font-size: 14px;
}

.glass-table-cell-value {
  color: #2b5876;
  font-weight: 500;
  font-size: 15px;
}

.glass-form-group {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(43, 88, 118, 0.1);
  margin-bottom: 8px;
  overflow: hidden;
}

.glass-form-group .MuiGrid-root {
  min-width: 0;
  overflow: hidden;
}

.glass-form-group .glass-text,
.glass-form-group .glass-subtitle {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.fade-scale {
  animation: fadeScale 0.3s ease-out;
}

@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-dialog ::-webkit-scrollbar {
  width: 8px;
}

.glass-dialog ::-webkit-scrollbar-track {
  background: rgba(43, 88, 118, 0.05);
  border-radius: 4px;
}

.glass-dialog ::-webkit-scrollbar-thumb {
  background: rgba(43, 88, 118, 0.2);
  border-radius: 4px;
}

.glass-dialog ::-webkit-scrollbar-thumb:hover {
  background: rgba(43, 88, 118, 0.3);
}

.glass-datepicker .MuiInputBase-root,
.glass-timepicker .MuiInputBase-root {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  border: 1px solid rgba(43, 88, 118, 0.1);
}

.glass-datepicker .MuiInputBase-root.Mui-focused,
.glass-timepicker .MuiInputBase-root.Mui-focused {
  background: white;
}

.glass-remove-button {
  background: none;
  border: none;
  color: #4e4376;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 18px;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: 8px;
}

.glass-textarea {
  width: 100%;
  min-height: 80px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(43, 88, 118, 0.1);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  font-size: 15px;
  color: #2b5876;
  resize: vertical;
  transition: all 0.3s ease;
  font-family: inherit;
  line-height: 1.5;
}

.glass-textarea:focus {
  outline: none;
  background: white;
}

.glass-textarea::placeholder {
  color: rgba(43, 88, 118, 0.5);
}

.glass-textarea-label {
  display: block;
  color: #2b5876;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 8px;
}

.modern-calendar-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0f2b46 0%, #0a4a8a 50%, #1e40af 100%);
  border-radius: 20px 20px 0 0;
}

.modern-calendar-wrapper {
  border: 1px solid #0f2b46;
  border: 1px solid var(--border-blue-color, #0f2b46);
  border-radius: 4px;
  height: 605px !important;
  background-color: #ffffff;
  background-color: var(--bg-white-color, #ffffff);
}

.modern-fullcalendar .fc-toolbar {
  background-color: #ffffff;
  background-color: var(--bg-white-color, #ffffff);
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(6, 49, 100, 0.1);
  color: #0f2b46;
  color: var(--text-blue-color, #0f2b46);
}

.modern-fullcalendar .fc-toolbar-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #0f2b46 !important;
  color: var(--text-blue-color, #0f2b46) !important;
}

.modern-fullcalendar .fc-button-primary {
  background-color: #ffffff !important;
  background-color: var(--bg-white-color, #ffffff) !important;
  border: 1px solid #0f2b46 !important;
  border: 1px solid var(--border-blue-color, #0f2b46) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  color: #0f2b46 !important;
  color: var(--text-blue-color, #0f2b46) !important;
  text-transform: capitalize !important;
  font-size: 13px !important;
}

.modern-fullcalendar .fc-button-primary:active,
.modern-fullcalendar .fc-button-primary:focus {
  background-color: #ffffff !important;
  background-color: var(--bg-white-color, #ffffff) !important;
  color: #0f2b46 !important;
  color: var(--text-blue-color, #0f2b46) !important;
}

.modern-fullcalendar .fc-button-group .fc-button {
  margin: 0 2px !important;
}

.modern-fullcalendar .fc-scrollgrid {
  border: none !important;
  border-radius: 0;
  overflow: hidden;
}

.modern-fullcalendar .fc-col-header {
  background-color: transparent;
  border-bottom: none;
}

.modern-fullcalendar .fc-col-header-cell {
  padding: 12px 8px !important;
  border: none !important;
  background-color: transparent !important;
  color: #0f2b46 !important;
  color: var(--text-blue-color, #0f2b46) !important;
}

.modern-fullcalendar .fc-col-header-cell-cushion {
  color: #0f2b46 !important;
  color: var(--text-blue-color, #0f2b46) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 4px !important;
}

.modern-fullcalendar .fc-daygrid-day {
  border: none !important;
  border-right: 1px solid rgba(6, 49, 100, 0.08) !important;
  border-bottom: 1px solid rgba(6, 49, 100, 0.08) !important;
  background-color: #ffffff;
  background-color: var(--bg-white-color, #ffffff);
  position: relative;
  min-height: 100px;
  padding: 8px;
}

.modern-fullcalendar .fc-daygrid-body tr:first-child .fc-daygrid-day {
  border-top: 1px solid rgba(6, 49, 100, 0.08) !important;
}

.modern-fullcalendar .fc-daygrid-body tr .fc-daygrid-day:first-child {
  border-left: 1px solid rgba(6, 49, 100, 0.08) !important;
}

.modern-fullcalendar .fc-daygrid-body tr .fc-daygrid-day:last-child {
  border-right: none !important;
}

.modern-fullcalendar .fc-daygrid-day-frame {
  padding: 6px !important;
  height: 100%;
}

.modern-fullcalendar .fc-day-today {
  background-color: rgba(6, 49, 100, 0.04) !important;
}

.modern-fullcalendar .fc-day-today .fc-daygrid-day-frame {
  border: none !important;
}

.modern-fullcalendar .fc-day-today::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #0f2b46;
  background-color: var(--border-blue-color, #0f2b46);
  z-index: 2;
}

.modern-fullcalendar .fc-day-today .fc-daygrid-day-top a {
  background-color: #0f2b46 !important;
  background-color: var(--bg-blue-color, #0f2b46) !important;
  color: #ffffff !important;
  color: var(--text-white-color, #ffffff) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
}

.modern-fullcalendar .fc-daygrid-day-top {
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
}

.modern-fullcalendar .fc-daygrid-day-top a {
  color: #0f2b46 !important;
  color: var(--text-blue-color, #0f2b46) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  padding: 2px 6px !important;
  min-width: 24px;
  text-align: center;
}

.modern-fullcalendar .fc-event {
  background-color: #0f2b46 !important;
  background-color: var(--bg-blue-color, #0f2b46) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 4px 6px !important;
  margin: 2px 0 !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s ease;
  opacity: 0.9;
}

.modern-fullcalendar .fc-daygrid-day:hover .fc-event {
  opacity: 1;
}

.modern-fullcalendar .fc-event:hover {
  opacity: 1 !important;
}

.modern-fullcalendar .fc-event::before {
  display: none;
}

.modern-fullcalendar .fc-event::after {
  display: none;
}

.modern-fullcalendar .fc-event-title {
  color: #ffffff !important;
  color: var(--text-white-color, #ffffff) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  position: relative;
  z-index: 2;
}

.modern-fullcalendar .fc-event-time {
  color: #ffffff !important;
  color: var(--text-white-color, #ffffff) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
  opacity: 0.9;
}

.modern-event-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2px;
  position: relative;
  z-index: 2;
}

.event-icon {
  width: 14px;
  height: 14px;
  margin-bottom: 2px;
  opacity: 0.9;
}

.event-text {
  text-align: center;
  width: 100%;
}

.event-title {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  color: #0f2b46 !important;
  color: var(--text-blue-color, #0f2b46) !important;
}

.modern-fullcalendar .fc-event:focus {
  outline: 1px solid #0f2b46;
  outline: 1px solid var(--border-blue-color, #0f2b46);
  outline-offset: 1px;
}

.fc-event-main, .fc-h-event {
  background: transparent !important;
  border: none !important;
}

@media (max-width: 768px) {
  .modern-fullcalendar .fc-event {
    padding: 4px 6px !important;
    margin: 1px 0 !important;
    border-radius: 3px !important;
  }
}

@media (max-width: 576px) {
  .modern-fullcalendar .fc-event {
    padding: 3px 5px !important;
    margin: 1px 0 !important;
    border-radius: 3px !important;
  }
}
.css-1y44ade-MuiFormControl-root-MuiTextField-root .MuiOutlinedInput-root{
  border: none !important;
}
.glass-datepicker .MuiInputBase-root, .glass-timepicker .MuiInputBase-root{
  border: none !important;
}

/* Mobile Responsive Styles for Very Small Screens (280px and below) */
@media (max-width: 480px) {
  .glass-dialog {
    margin: 4px !important;
    max-width: calc(100% - 8px) !important;
  }

  .glass-dialog .MuiDialog-paper {
    margin: 4px !important;
    max-width: calc(100% - 8px) !important;
    max-height: calc(100vh - 8px) !important;
  }

  .glass-dialog-title {
    padding: 12px 10px 10px 10px !important;
  }

  .glass-dialog-title .glass-title {
    font-size: 16px !important;
  }

  .glass-dialog-content {
    padding: 10px 8px !important;
    overflow-x: hidden;
  }

  .glass-card {
    padding: 10px !important;
    margin-bottom: 10px;
  }

  .glass-input {
    margin-bottom: 12px;
  }

  .glass-input .MuiInputBase-root {
    height: 48px;
    font-size: 13px;
  }

  .glass-textarea {
    padding: 10px;
    font-size: 13px;
    min-height: 60px;
  }

  .glass-textarea-label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .glass-table-cell {
    padding: 8px 2px !important;
    font-size: 11px !important;
  }

  .glass-table-cell-label {
    font-size: 11px !important;
    width: 35% !important;
  }

  .glass-table-cell-value {
    font-size: 11px !important;
    width: 65% !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .glass-dropdown {
    max-height: 250px;
    border-radius: 16px;
  }

  .glass-dropdown-body {
    padding: 10px 8px;
    max-height: calc(250px - 60px);
  }

  .glass-dropdown-header {
    padding: 12px 10px;
  }

  .glass-dropdown-header .glass-text {
    font-size: 14px;
  }

  .glass-form-group {
    padding: 10px 8px !important;
    margin-bottom: 4px;
    overflow: hidden;
  }

  .glass-form-group .MuiGrid-root {
    min-width: 0;
    flex: 1 1;
  }

  .glass-form-group .glass-text,
  .glass-form-group .glass-subtitle {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    display: block;
    font-size: 12px !important;
    line-height: 1.4;
  }

  .glass-form-group .glass-subtitle {
    font-size: 11px !important;
    margin-top: 2px;
  }

  .glass-team-card {
    margin-top: 10px;
  }

  .glass-team-card-body {
    padding: 10px 8px !important;
    max-height: 100px !important;
  }

  .glass-team-member {
    padding: 8px 10px;
    font-size: 12px;
  }

  .glass-team-member .glass-text {
    font-size: 12px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .glass-button {
    padding: 8px 16px;
    font-size: 13px;
  }

  .glass-checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
}

/* Extra Small Screens (280px and below) */
@media (max-width: 320px) {
  .glass-dialog {
    margin: 2px !important;
    max-width: calc(100% - 4px) !important;
  }

  .glass-dialog .MuiDialog-paper {
    margin: 2px !important;
    max-width: calc(100% - 4px) !important;
  }

  .glass-dialog-title {
    padding: 10px 8px 8px 8px !important;
  }

  .glass-dialog-title .glass-title {
    font-size: 14px !important;
  }

  .glass-dialog-content {
    padding: 8px 6px !important;
  }

  .glass-card {
    padding: 8px !important;
    margin-bottom: 8px;
  }

  .glass-input .MuiInputBase-root {
    height: 46px;
    font-size: 12px;
  }

  .glass-textarea {
    padding: 8px;
    font-size: 12px;
    min-height: 55px;
  }

  .glass-table-cell {
    padding: 6px 2px !important;
    font-size: 10px !important;
  }

  .glass-table-cell-label {
    font-size: 10px !important;
    width: 40% !important;
  }

  .glass-table-cell-value {
    font-size: 10px !important;
    width: 60% !important;
  }

  .glass-dropdown {
    max-height: 220px;
  }

  .glass-dropdown-body {
    padding: 8px 6px;
    max-height: calc(220px - 60px);
  }

  .glass-dropdown-header {
    padding: 10px 8px;
  }

  .glass-dropdown-header .glass-text {
    font-size: 13px;
  }

  .glass-form-group {
    padding: 8px 6px !important;
    margin-bottom: 3px;
  }

  .glass-form-group .glass-text {
    font-size: 11px !important;
  }

  .glass-form-group .glass-subtitle {
    font-size: 10px !important;
  }

  .glass-team-card-body {
    padding: 8px 6px !important;
    max-height: 90px !important;
  }

  .glass-team-member {
    padding: 6px 8px;
    font-size: 11px;
  }

  .glass-team-member .glass-text {
    font-size: 11px;
  }

  .glass-button {
    padding: 6px 12px;
    font-size: 12px;
  }

  .glass-checkbox {
    width: 16px;
    height: 16px;
  }
}

/* TimeEntry Dialog Mobile Responsive Styles - Only affects TimeEmpty form */
/* Mobile screens (767px and below) */
@media (max-width: 767px) {
  .timeEntryDialog.MuiDialog-root {
    margin: 8px !important;
  }

  .timeEntryDialog.MuiDialog-root .MuiDialog-paper {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    width: calc(100% - 16px) !important;
  }

  .timeEntryDialog .MuiDialogContent-root {
    padding: 12px 8px 12px 8px !important;
    padding-top: 16px !important;
  }

  .timeEntryDialog .MuiDialogContent-root .MuiGrid-container > .MuiGrid-item:first-child {
    margin-top: 4px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root {
    padding: 12px 8px 8px 8px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root .heading-four {
    font-size: 16px !important;
    margin: 0 8px !important;
    height: auto !important;
  }

  .timeEntryDialog .MuiDialogActions-root {
    padding: 8px !important;
    margin: 0 !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .timeEntryDialog .MuiDialogActions-root > * {
    width: 100% !important;
    margin: 0 !important;
  }

  .timeEntryDialog .MuiDialogActions-root .MuiButton-root {
    width: 100% !important;
    margin: 0 !important;
  }

  .timeEntryDialog .MuiGrid-container {
    margin: 0 !important;
    width: 100% !important;
  }

  .timeEntryDialog .MuiGrid-container > .MuiGrid-item {
    padding: 4px 8px !important;
    margin-bottom: 8px !important;
  }

  .timeEntryDialog .MuiFormControl-root {
    margin-bottom: 0 !important;
  }

  .timeEntryDialog .totalCostTimeEntry {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
  }
}

/* Small mobile screens (575px and below) */
@media (max-width: 575px) {
  .timeEntryDialog.MuiDialog-root {
    margin: 6px !important;
  }

  .timeEntryDialog.MuiDialog-root .MuiDialog-paper {
    margin: 6px !important;
    max-width: calc(100% - 12px) !important;
    max-height: calc(100vh - 12px) !important;
    width: calc(100% - 12px) !important;
  }

  .timeEntryDialog .MuiDialogContent-root {
    padding: 10px 6px 10px 6px !important;
    padding-top: 14px !important;
  }

  .timeEntryDialog .MuiDialogContent-root .MuiGrid-container > .MuiGrid-item:first-child {
    margin-top: 4px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root {
    padding: 10px 6px 6px 6px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root .heading-four {
    font-size: 15px !important;
    margin: 0 6px !important;
  }

  .timeEntryDialog .MuiDialogActions-root {
    padding: 6px !important;
    gap: 6px !important;
  }

  .timeEntryDialog .MuiGrid-container > .MuiGrid-item {
    padding: 3px 6px !important;
    margin-bottom: 6px !important;
  }

  .timeEntryDialog .MuiInputBase-root {
    font-size: 14px !important;
  }

  .timeEntryDialog .MuiInputLabel-root {
    font-size: 13px !important;
  }

  .timeEntryDialog .totalCostTimeEntry {
    font-size: 12px !important;
  }
}

/* Extra small mobile screens (424px and below) */
@media (max-width: 424px) {
  .timeEntryDialog.MuiDialog-root {
    margin: 4px !important;
  }

  .timeEntryDialog.MuiDialog-root .MuiDialog-paper {
    margin: 4px !important;
    max-width: calc(100% - 8px) !important;
    max-height: calc(100vh - 8px) !important;
    width: calc(100% - 8px) !important;
  }

  .timeEntryDialog .MuiDialogContent-root {
    padding: 8px 4px 8px 4px !important;
    padding-top: 12px !important;
  }

  .timeEntryDialog .MuiDialogContent-root .MuiGrid-container > .MuiGrid-item:first-child {
    margin-top: 4px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root {
    padding: 8px 4px 4px 4px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root .heading-four {
    font-size: 14px !important;
    margin: 0 4px !important;
  }

  .timeEntryDialog .MuiDialogActions-root {
    padding: 4px !important;
    gap: 4px !important;
  }

  .timeEntryDialog .MuiGrid-container > .MuiGrid-item {
    padding: 2px 4px !important;
    margin-bottom: 4px !important;
  }

  .timeEntryDialog .MuiInputBase-root {
    font-size: 13px !important;
    height: 48px !important;
  }

  .timeEntryDialog .MuiInputLabel-root {
    font-size: 12px !important;
  }

  .timeEntryDialog .MuiFormHelperText-root {
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  .timeEntryDialog .totalCostTimeEntry {
    font-size: 11px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}

/* Very small mobile screens (374px and below) */
@media (max-width: 374px) {
  .timeEntryDialog.MuiDialog-root {
    margin: 3px !important;
  }

  .timeEntryDialog.MuiDialog-root .MuiDialog-paper {
    margin: 3px !important;
    max-width: calc(100% - 6px) !important;
    max-height: calc(100vh - 6px) !important;
    width: calc(100% - 6px) !important;
  }

  .timeEntryDialog .MuiDialogContent-root {
    padding: 6px 3px 6px 3px !important;
    padding-top: 10px !important;
  }

  .timeEntryDialog .MuiDialogContent-root .MuiGrid-container > .MuiGrid-item:first-child {
    margin-top: 4px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root {
    padding: 6px 3px 3px 3px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root .heading-four {
    font-size: 13px !important;
    margin: 0 3px !important;
  }

  .timeEntryDialog .MuiDialogActions-root {
    padding: 3px !important;
    gap: 3px !important;
  }

  .timeEntryDialog .MuiGrid-container > .MuiGrid-item {
    padding: 2px 3px !important;
    margin-bottom: 3px !important;
  }

  .timeEntryDialog .MuiInputBase-root {
    font-size: 12px !important;
    height: 46px !important;
    padding: 8px 10px !important;
  }

  .timeEntryDialog .MuiInputLabel-root {
    font-size: 11px !important;
  }

  .timeEntryDialog .MuiFormHelperText-root {
    font-size: 10px !important;
    margin-top: 1px !important;
  }

  .timeEntryDialog .totalCostTimeEntry {
    font-size: 10px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  }
}

/* Ultra small mobile screens (280px and below) */
@media (max-width: 319px) {
  .timeEntryDialog.MuiDialog-root {
    margin: 2px !important;
  }

  .timeEntryDialog.MuiDialog-root .MuiDialog-paper {
    margin: 2px !important;
    max-width: calc(100% - 4px) !important;
    max-height: calc(100vh - 4px) !important;
    width: calc(100% - 4px) !important;
  }

  .timeEntryDialog .MuiDialogContent-root {
    padding: 4px 2px 4px 2px !important;
    padding-top: 8px !important;
  }

  .timeEntryDialog .MuiDialogContent-root .MuiGrid-container > .MuiGrid-item:first-child {
    margin-top: 4px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root {
    padding: 4px 2px 2px 2px !important;
  }

  .timeEntryDialog .MuiDialogTitle-root .heading-four {
    font-size: 12px !important;
    margin: 0 2px !important;
  }

  .timeEntryDialog .MuiDialogActions-root {
    padding: 2px !important;
    gap: 2px !important;
  }

  .timeEntryDialog .MuiGrid-container > .MuiGrid-item {
    padding: 1px 2px !important;
    margin-bottom: 2px !important;
  }

  .timeEntryDialog .MuiInputBase-root {
    font-size: 11px !important;
    height: 44px !important;
    padding: 6px 8px !important;
  }

  .timeEntryDialog .MuiInputLabel-root {
    font-size: 10px !important;
  }

  .timeEntryDialog .MuiFormHelperText-root {
    font-size: 9px !important;
    margin-top: 1px !important;
  }

  .timeEntryDialog .totalCostTimeEntry {
    font-size: 9px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  .timeEntryDialog .MuiDialogActions-root .MuiButton-root {
    font-size: 11px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    width: 100% !important;
  }

  /* Input fields on ultra small screens */
  .timeEntryDialog .MuiTextField-root,
  .timeEntryDialog .MuiFormControl-root {
    margin-bottom: 4px !important;
  }

  .timeEntryDialog input[type="number"],
  .timeEntryDialog input[type="text"] {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }

  /* Ensure all form inputs are properly sized */
  .timeEntryDialog .MuiInputBase-input {
    font-size: 11px !important;
  }
}

/* Additional mobile optimizations for TimeEntry form - Autocomplete */
@media (max-width: 480px) {
  .timeEntryDialog .MuiAutocomplete-root .MuiInputBase-root {
    font-size: 13px !important;
    height: 48px !important;
  }

  .timeEntryDialog .MuiAutocomplete-input {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
}

@media (max-width: 374px) {
  .timeEntryDialog .MuiAutocomplete-root .MuiInputBase-root {
    font-size: 12px !important;
    height: 46px !important;
  }

  .timeEntryDialog .MuiAutocomplete-input {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 319px) {
  .timeEntryDialog .MuiAutocomplete-root .MuiInputBase-root {
    font-size: 11px !important;
    height: 44px !important;
  }

  .timeEntryDialog .MuiAutocomplete-input {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
}

/* TimePicker specific adjustments for mobile */
@media (max-width: 767px) {
  .timeEntryDialog .MuiTimePicker-root .MuiInputBase-root {
    height: 48px !important;
  }

  .timeEntryDialog .MuiTimePicker-root .MuiInputBase-input {
    font-size: 13px !important;
  }

  .timeEntryDialog .MuiTimePicker-root .MuiInputLabel-root {
    font-size: 13px !important;
  }
}

@media (max-width: 424px) {
  .timeEntryDialog .MuiTimePicker-root .MuiInputBase-root {
    height: 46px !important;
  }

  .timeEntryDialog .MuiTimePicker-root .MuiInputBase-input {
    font-size: 12px !important;
  }

  .timeEntryDialog .MuiTimePicker-root .MuiInputLabel-root {
    font-size: 12px !important;
  }
}

@media (max-width: 319px) {
  .timeEntryDialog .MuiTimePicker-root .MuiInputBase-root {
    height: 44px !important;
  }

  .timeEntryDialog .MuiTimePicker-root .MuiInputBase-input {
    font-size: 11px !important;
  }

  .timeEntryDialog .MuiTimePicker-root .MuiInputLabel-root {
    font-size: 11px !important;
  }
}

/* Worker Hours: SettingsLayout pulls content up (marginTop: -30px) under overflow — pad so “Worker Hours” isn’t clipped */
.settings-layout-container .addProductServiceSideLine .employee-hours-page {
  padding-top: 48px !important;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .settings-layout-container .addProductServiceSideLine .employee-hours-page {
    padding-top: 20px !important;
  }
}

.employee-hours-page .employee-hours-page__title {
  line-height: 1.35 !important;
  overflow: visible !important;
  display: block !important;
}
/**
 * Shared FullCalendar "today" styling — admin, staff/worker, customer, contract schedules.
 * Month: navy dot top-left. Week/Day: header dot + tint. List: row dot. Mobile strip: dot under letter.
 */

/* Current day — week/day column header + blue dot under weekday label */
.fc-day-today .fc-col-header-cell-cushion {
  background-color: rgba(212, 148, 58, 0.15) !important;
  border: 2px solid var(--amber) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 8px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0f2b46 !important;
  font-weight: 600 !important;
}

.fc-day-today .fc-col-header-cell-cushion::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #0f2b46;
  box-shadow: var(--focus-ring-navy-2);
  flex-shrink: 0;
}

/* Today column / cell background */
.fc-day-today,
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background-color: rgba(212, 148, 58, 0.08) !important;
}

/* Month view — today marker top-left of cell */
.fc-dayGridMonth-view .fc-daygrid-day.fc-day-today {
  position: relative !important;
}

.fc-dayGridMonth-view .fc-daygrid-day.fc-day-today::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #0f2b46;
  box-shadow: var(--focus-ring-navy-2);
  z-index: 4;
  pointer-events: none;
}

.fc-dayGridMonth-view .fc-daygrid-day.fc-day-today .fc-daygrid-day-number::after {
  content: none !important;
  display: none !important;
}

.fc-dayGridMonth-view .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  display: inline !important;
  flex-direction: initial !important;
  align-items: initial !important;
  line-height: inherit !important;
}

/* List view — today row */
.fc .fc-list-day.fc-day-today .fc-list-day-cushion {
  position: relative;
}

.fc .fc-list-day.fc-day-today .fc-list-day-cushion::before {
  content: "";
  float: left;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #0f2b46;
  box-shadow: var(--focus-ring-navy-2);
  margin: 5px 12px 0 2px;
  flex-shrink: 0;
}

/* Mobile week strip — today (class is-today on button) */
.mobile-day-dot.is-today {
  position: relative;
}

.mobile-day-dot.is-today:not(.selected)::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0f2b46;
  box-shadow: var(--focus-ring-navy-2);
}

.mobile-day-dot.is-today.selected::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: var(--focus-ring-white-soft);
}

/* Shared section shell: Line Items row, Internal Notes, etc. — navy border, rounded, white fill */

.cs-form-section {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  border: 1px solid #0f2b46;
  border-radius: 10px;
  padding: 16px 18px;
}

/* Quote page — Line Items section: border only, no panel fill (padding from .cs-form-section) */
.cs-form-section--quote-line-items {
  border-color: #d1d5db;
  background: transparent;
  box-shadow: none;
}

.cs-form-section--quote-line-items .cs-form-section__title {
  color: #1e293b;
  font-size: 1.0625rem;
}

.cs-form-section--quote-line-items .cs-form-section__head {
  margin-bottom: 8px;
}

.cs-form-section--no-border {
  border: none;
  padding: 0;
  background: transparent;
}

/* Line-item block: consistent inset with section shell */
.cs-form-section--line-item {
  padding: 0 16px 14px 16px;
}

.cs-form-section__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

/* Materials column: same label→field rhythm as .cs-form-field / .cs-currency-field (6px) */
.cs-form-section--line-item .cs-form-section__head {
  margin-bottom: 6px;
  margin-top: 0;
  padding-top: 0;
}

.cs-form-section__icon {
  display: flex;
  align-items: center;
  color: #0f2b46;
  flex-shrink: 0;
}

.cs-form-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0f2b46;
  font-family: inherit;
}

.cs-form-section__subtitle {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: #0f2b46;
  font-family: inherit;
}

/* Line item materials block — label above field (neutral, not heavy navy) */
.cs-form-section--line-item .cs-form-section__subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
}

.cs-form-section__body {
  width: 100%;
}

.cs-form-section__body > * + * {
  margin-top: 12px;
}

/* Line items: materials select → description */
.cs-form-section--line-item .cs-form-section__body > * + * {
  margin-top: 8px;
}

/* Notes block: space between textarea and file drop */
.cs-form-section .cs-form-section__body .cs-form-field {
  margin-bottom: 4px;
}

:root {
  --job-primary: #0f2b46;
  --job-secondary: var(--amber);
  
  --donor-sidebar: #5BB5C9;
  --donor-header: #82D1A7;
  --donor-button: #5BB5C9;
  --donor-text: #0A2540;
}

.chat-trigger {
  position: fixed;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--amber);
  background-color: var(--job-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.chat-trigger::before {
  content: "⇄ Drag me";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.chat-trigger:hover::before {
  opacity: 1;
}

.chat-trigger:hover {
  transform: scale(1.05);
  animation: wiggle 1s ease;
}

@keyframes wiggle {
  0%, 100% { transform: scale(1.05) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-3deg); }
  75% { transform: scale(1.05) rotate(3deg); }
}

.chat-trigger.position-left {
  left: 100px;
  right: auto;
}

.chat-trigger.position-right {
  right: 100px;
  left: auto;
}

@keyframes slidePosition {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.chat-trigger.animating {
  animation: slidePosition 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 450px !important;
  height: 100vh !important;
  background: #ffffff;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

.chat-container.closing {
  animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .chat-container {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
    max-height: 100vh;
    max-height: 100dvh;
    box-shadow: none;
    animation: slideInMobile 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chat-container.closing {
    animation: slideOutMobile 0.3s ease forwards;
  }

  @keyframes slideInMobile {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideOutMobile {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(30px);
    }
  }
}

.chat-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  background-color: #0f2b46;
  background-color: var(--job-primary);
}

@media (max-width: 768px) {
  .chat-header {
    padding: 12px 16px;
    min-height: 56px;
  }
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  flex: 1 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .chat-header-title {
    font-size: 16px;
    gap: 8px;
  }

  .chat-header-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.chat-header-title svg {
  width: 32px;
  height: 32px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.donor-mode .chat-header,
.donor-mode .chat-trigger,
.donor-mode .welcome-message h3 {

  color: white;
}

.donor-mode .welcome-message svg rect {
  fill: #5BB5C9;
  fill: var(--donor-sidebar);
}

.donor-mode .chat-input:focus {
  border-color: #5BB5C9;
  border-color: var(--donor-sidebar);
  box-shadow: var(--focus-ring-teal);
}

.beta-tag {
  font-size: 12px;
  padding: 2px 6px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-weight: normal;
}

.close-button {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.2s;
  position: relative;
  transform-origin: center center;
  line-height: 1;
  vertical-align: middle;
}

.close-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: rotate(90deg);
}

/* Mobile styles for close button */
@media (max-width: 768px) {
  .close-button {
    width: 40px;
    height: 40px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .close-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: none;
  }
}

.messages-container {
  flex: 1 1;
  overflow-y: auto;
  padding: 24px;
  background-color: #f8f9fc;
}

/* Mobile styles for messages container */
@media (max-width: 768px) {
  .messages-container {
    padding: 16px;
    padding-bottom: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.welcome-message {
  text-align: center;
  padding: 30px 24px;
  margin: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.welcome-message svg {
  width: 48px;
  height: 48px;
}

.welcome-message h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #0f2b46;
  color: var(--job-primary);
}

.welcome-message p {
  margin: 0;
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  max-width: 300px;
}

.suggested-questions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.questions-title {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin: 0;
  text-align: left;
  margin-bottom: 8px;
}

.question-button {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  color: #0f2b46;
  color: var(--job-primary);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}

.question-button:hover {
  background: #0f2b46;
  background: var(--job-primary);
  color: white;
  border-color: #0f2b46;
  border-color: var(--job-primary);
}

.question-button.text-blue-color:hover {
  background: #0f2b46 !important;
  background: var(--job-primary) !important;
  color: white !important;
  border-color: #0f2b46 !important;
  border-color: var(--job-primary) !important;
}

.question-button.text-donor-color:hover {
  background: #5BB5C9 !important;
  background: var(--donor-sidebar) !important;
  color: white !important;
  border-color: #5BB5C9 !important;
  border-color: var(--donor-sidebar) !important;
}

.donor-mode .question-button {
  color: #5BB5C9;
  color: var(--donor-sidebar);
  border-color: #5BB5C9;
  border-color: var(--donor-sidebar);
}

.donor-mode .question-button:hover {
  background: #5BB5C9;
  background: var(--donor-sidebar);
  color: white;
  border-color: #5BB5C9;
  border-color: var(--donor-sidebar);
}

.donor-mode .welcome-message h3 {
  color: #0A2540;
  color: var(--donor-text);
}

.message {
  margin-bottom: 16px;
  animation: messageIn 0.3s ease;
  display: flex;
  width: 100%;
}
  
@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-message {
  justify-content: flex-end;
}

.user-message .message-content {
  max-width: 80%;
}

.ai-message {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 10px;
}

.ai-message .message-content {
  max-width: 75%;
}

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0;
  box-shadow: var(--shadow-md);
}

.message-avatar-inner {
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 2px;
}

.message-content {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: var(--shadow-md);
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.message-content h1 {
  font-size: 1.4em;
  font-weight: 600;
  margin: 0.8em 0 0.4em 0;
  line-height: 1.4;
}

.message-content h2 {
  font-size: 1.2em;
  font-weight: 600;
  margin: 0.8em 0 0.4em 0;
  line-height: 1.4;
}

.message-content h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0.8em 0 0.4em 0;
  line-height: 1.4;
}

.message-content h4 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.6em 0 0.3em 0;
  line-height: 1.4;
}

.message-content h5 {
  font-size: 0.95em;
  font-weight: 600;
  margin: 0.6em 0 0.3em 0;
  line-height: 1.4;
}

.message-content ul,
.message-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.message-content li {
  margin: 0.2em 0;
  line-height: 1.5;
}

.message-content blockquote {
  border-left: 3px solid #ddd;
  margin: 0.5em 0;
  padding-left: 1em;
  font-style: italic;
  color: #666;
}

.ai-message .message-content blockquote {
  border-left-color: #ccc;
}

.user-message .message-content blockquote {
  border-left-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.message-content code {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.user-message .message-content code {
  background: rgba(255, 255, 255, 0.2);
}

.message-content hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1em 0;
}

.user-message .message-content hr {
  border-top-color: rgba(255, 255, 255, 0.3);
}

.message-content p {
  margin: 0.4em 0;
  line-height: 1.6;
}

.message-content strong {
  font-weight: 600;
}

.message-content em {
  font-style: italic;
}

.message-content br {
  line-height: 1.6;
}

.user-message .message-content {
  background-color: var(--amber);
  background-color: var(--job-secondary);
  color: white;
  border-radius: 18px 18px 4px 18px;
}

.ai-message .message-content {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 18px 18px 18px 4px;
}

.donor-mode .user-message .message-content {
  background-color: #5BB5C9;
  background-color: var(--donor-button);
  color: white;
  border-radius: 18px 18px 4px 18px;
}

.donor-mode .ai-message .message-content {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 18px 18px 18px 4px;
}

.input-container {
  padding: 20px;
  background-color: white;
  border-top: 1px solid #e1e4e8;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 10;
}

/* Mobile styles for input container */
@media (max-width: 768px) {
  .input-container {
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    z-index: 100;
  }
}

.chat-input {
  flex: 1 1;
  border: 2px solid #e1e4e8;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  min-height: 56px;
  outline: none;
  transition: all 0.2s;
  color: #0f2b46;
}

.chat-input:focus {
  border-color: var(--amber);
  border-color: var(--job-secondary);
  box-shadow: var(--focus-ring-amber);
}

.chat-input::placeholder {
  color: #a0aec0;
}

/* Mobile styles for chat input */
@media (max-width: 768px) {
  .chat-input {
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 48px;
    max-height: 120px;
    appearance: none;
  }
}

.send-arrow {
  cursor: pointer;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: all 0.2s;
  background: transparent;
  border: none;
  box-shadow: none;
}

.send-arrow img {
  width: 24px;
  height: 24px;
}

.send-arrow:hover {
  transform: scale(1.05);
}

.send-arrow:disabled {
  background-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.5;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #666;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
  opacity: 0.6;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 
  40% { 
    transform: scale(1);
  }
}

.messages-container::-webkit-scrollbar {
  width: 6px;
}

.messages-container::-webkit-scrollbar-track {
  background: #f8f9fc;
}

.messages-container::-webkit-scrollbar-thumb {
  background: var(--amber);
  border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
  background: #0f2b46;
}

.chat-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delete-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.2s;
}

.delete-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
} 

.ai-chat-button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Color utility classes */
.bg-blue-color { background-color: #0f2b46; background-color: var(--job-primary); }
.bg-orange-color { background-color: var(--amber); background-color: var(--job-secondary); }
.bg-donor-color { background-color: #5BB5C9; background-color: var(--donor-sidebar); }
.bg-green-color { background-color: #5BB5C9; background-color: var(--donor-button); }
.color-blue-color { color: #0f2b46; color: var(--job-primary); }
.color-donor-color { color: #5BB5C9; color: var(--donor-sidebar); }
.text-blue-color { color: #0f2b46; color: var(--job-primary); }
.text-donor-color { color: #5BB5C9; color: var(--donor-sidebar); }
.border-orange-color { border-color: var(--amber); border-color: var(--job-secondary); }
.border-donor-color { border-color: #5BB5C9; border-color: var(--donor-sidebar); }
.border-green-color { border-color: #5BB5C9; border-color: var(--donor-button); }

/* Hide back button on desktop, show on mobile */
.back-button-mobile {
  display: none;
}

@media (max-width: 768px) {
  .back-button-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    margin-right: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .back-button-mobile:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .back-button-mobile:active {
    background-color: rgba(255, 255, 255, 0.3);
  }

  .back-button-mobile svg {
    width: 24px;
    height: 24px;
  }
}
.custom-swal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.4s ease-out;
}

.custom-swal-modal {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  box-shadow: var(--shadow-xl);
  padding: 36px;
  max-width: 520px;
  width: 90%;
  position: relative;
  animation: slideIn 0.4s ease-out;
  border: 2px solid rgba(6, 49, 100, 0.1);
  box-shadow:
    0 25px 80px rgba(6, 49, 100, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.custom-swal-header {
  text-align: center;
  margin-bottom: 28px;
}

.custom-swal-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}

.custom-swal-icon.warning-icon {
  /* background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); */
  color: var(--amber);
  /* box-shadow: 
    0 12px 32px rgba(212, 148, 58, 0.25),
    0 0 0 1px rgba(212, 148, 58, 0.1) inset; */
  position: relative;
}

.custom-swal-icon.warning-icon::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  /* background: linear-gradient(135deg, var(--amber), #f39c12); */
  border-radius: 50%;
  z-index: -1;
  opacity: 0.3;
}

.custom-swal-title {
  font-size: 28px;
  font-weight: 700;
  color: #0f2b46;
  margin: 0 0 12px 0;
  font-family: "Poppins", sans-serif;
  letter-spacing: -0.5px;
}

.custom-swal-text {
  font-size: 16px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.custom-swal-content {
  margin-bottom: 28px;
}

.custom-swal-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  font-size: 16px;
  background: #ffffff;
  color: #0f2b46;
  transition: all 0.3s ease;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.custom-swal-input:focus {
  outline: none;
  border-color: #0f2b46;
  box-shadow:
    0 0 0 4px rgba(6, 49, 100, 0.1),
    0 4px 16px rgba(6, 49, 100, 0.1);
  background: #ffffff;
  transform: translateY(-1px);
}

.custom-swal-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.custom-swal-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.custom-swal-button {
  padding: 14px 28px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Poppins", sans-serif;
  min-width: 120px;
  position: relative;
  overflow: hidden;
}

.custom-swal-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.custom-swal-button:hover::before {
  left: 100%;
}

.custom-swal-button.cancel-button {
  /* background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); */
  color: #64748b;
  box-shadow: var(--shadow-md);
  border: 1px solid #e2e8f0;
}

.custom-swal-button.cancel-button:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  color: #475569;
}

.custom-swal-button.confirm-button {
  /* background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); */
  color: white;
  box-shadow: var(--shadow-lg);
  /* border: 1px solid #dc2626; */
}

.custom-swal-button.confirm-button:hover:not(:disabled) {
  /* background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%); */
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.custom-swal-button.confirm-button:disabled {
  /* background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); */
  color: #fecaca;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: #fca5a5;
}

.custom-swal-button.confirm-button.donor-mode {
  background: #68b2cb;
  box-shadow: var(--shadow-lg);
  border-color: #68b2cb;
}

.custom-swal-button.confirm-button.donor-mode:hover:not(:disabled) {
  background: #68b2cb;
  box-shadow: var(--shadow-xl);
}

.custom-swal-button.confirm-button.orange-mode {
  /* background: linear-gradient(135deg, var(--amber) 0%, #d97706 100%); */
  box-shadow: var(--shadow-lg);
  border-color: var(--amber);
}


.custom-swal-button.confirm-button.orange-mode:hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: var(--shadow-xl);
}

/* Enhanced Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
}

/* Closing animations */
.custom-swal-overlay.closing {
  animation: fadeOut 0.2s ease-in forwards;
}

.custom-swal-modal.closing {
  animation: slideOut 0.2s ease-in forwards;
}

/* Pulse animation for warning icon */
.custom-swal-icon.warning-icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow:
      0 12px 32px rgba(212, 148, 58, 0.25),
      0 0 0 1px rgba(212, 148, 58, 0.1) inset;
  }

  50% {
    box-shadow:
      0 12px 32px rgba(212, 148, 58, 0.35),
      0 0 0 1px rgba(212, 148, 58, 0.2) inset;
  }

  100% {
    box-shadow:
      0 12px 32px rgba(212, 148, 58, 0.25),
      0 0 0 1px rgba(212, 148, 58, 0.1) inset;
  }
}

/* Ensure modal is always fully visible */
.custom-swal-modal {
  position: relative !important;
  z-index: 100000 !important;
  transform: none !important;
}

/* Responsive design */
@media (max-width: 480px) {
  .custom-swal-modal {
    padding: 28px;
    margin: 16px;
    border-radius: 20px;
  }

  .custom-swal-title {
    font-size: 24px;
  }

  .custom-swal-text {
    font-size: 15px;
  }

  .custom-swal-actions {
    flex-direction: column;
    gap: 12px;
  }

  .custom-swal-button {
    width: 100%;
    padding: 16px 24px;
  }

  .custom-swal-icon {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }
}

/* Dark mode support - DISABLED */
/*
@media (prefers-color-scheme: dark) {
  .custom-swal-modal {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: rgba(6, 49, 100, 0.3);
  }

  .custom-swal-title {
    color: #f1f5f9;
  }

  .custom-swal-text {
    color: #cbd5e1;
  }

  .custom-swal-input {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
  }

  .custom-swal-input:focus {
    border-color: #68b2cb;
    box-shadow: var(--focus-ring-donor);
  }

  .custom-swal-button.cancel-button {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #cbd5e1;
    border-color: #475569;
  }
}
*/
.modal .modal-dialog {
  display: flex;
  align-items: center;
}

.nmiKeyDetailPage {
  width: 100% !important;
}

.active_inactive-model.modelbox.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation24.MuiDialog-paper.MuiDialog-paperScrollPaper.MuiDialog-paperWidthSm.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
  width: 100px;
  height: 47px;
  gap: 0px;
  border-radius: 4px 0px 0px 0px;
  opacity: 0px;
  background: #25ad22;
}

.active_inactive-model
  .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation24.MuiDialog-paper.MuiDialog-paperScrollPaper.MuiDialog-paperWidthSm.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
  max-width: 420px;
}

.inputBorder {
  border: 2px solid red;
}
.active_acc {
  width: 100%;
  max-width: none;
  height: 35px;
  border-radius: 4px;
  border: 1px solid #0f2b4680;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 8px;
  outline: none;
  opacity: 1;
  box-sizing: border-box;
}

.active_acc:focus {
  border-color: #0f2b46;
  box-shadow: var(--shadow-sm);
}

.submit_btn {
  width: 100%;
  height: 47px;
  gap: 0px;
  border-radius: 4px 0px 0px 0px;
  opacity: 0px;
  background: #0f2b46;
  color: white;
  border: none;
}

.dis_box {
  display: flex;
  gap: 3%;
}

.div_btn {
  margin-top: 6%;
}

.true_sign_btn {
  margin-left: 74%;
  margin-top: -44%;
}

.active-btn_inacttive {
  width: 185px;
  height: 47px;
  border-radius: 4px;
  background: white;
  color: #25ad22;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border: 1px solid #25ad22;
}

.incttive-btn_inac_sec {
  width: 185px;
  height: 47px;
  gap: 0px;
  border-radius: 4px 0px 0px 0px;
  border: 1px 0px 0px 0px;
  opacity: 0px;
  border: 1px solid #d12913;
  background: #d12913;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  justify-content: center;
  display: flex;
  align-items: center;
  color: white;
}

.cancel_icon {
  justify-content: end;
  display: flex;
  margin-bottom: 4%;
}

.line-height {
  width: 100%;
}

@media (max-width: 3000px) {
  .comanydetailcompanytable {
    width: 35% !important;
  }
}

/* / 1680 / */
@media (max-width: 1700px) {
}

/* / 1500 / */
@media (max-width: 1680px) {
}

/* / 1440 / */
@media (max-width: 1449px) {
}

/* / 1280 / */
@media (max-width: 1439px) {
}

/* / 992 / */
@media (max-width: 1279px) {
  .company-table-head {
    white-space: nowrap;
  }

  .d-flex.gap-4.companyDetailNmiKeysDetail {
    flex-direction: column !important;
    width: 100% !important;
  }

  .nmiKeyDetailPage {
    width: 100% !important;
  }
}

@media (max-width: 1181px) {
  .comanydetailcompanytable {
    width: 50% !important;
  }

  .nmiKeyDetailPage {
    width: 79% !important;
  }
}

/* / 768 / */
@media (max-width: 991px) {
  .activebtnfont {
    font-size: 14px !important;
  }

  .head-text {
    font-size: 16px !important;
  }

  .active_inactive-model.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation24.MuiDialog-paper.MuiDialog-paperScrollPaper.MuiDialog-paperWidthSm.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
    width: 100% !important;
  }

  .active_inactive-model
    .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation24.MuiDialog-paper.MuiDialog-paperScrollPaper.MuiDialog-paperWidthSm.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
    width: 100% !important;
  }

  .superadmin-company {
    margin-bottom: 12px;
  }

  .superadmin-company .MuiGrid-root.MuiGrid-item.mb-3.css-13i4rnv-MuiGrid-root {
    margin-bottom: 12px;
  }
}

/* / 576 / */
@media (max-width: 767px) {
  .head-text {
    font-size: 18px !important;
  }

  .host_port_mial_head {
    overflow-x: auto !important;
  }

  .mailConfigModelOpen {
    overflow-x: auto !important;
    min-width: 600px !important;
  }

  .mailPostPort {
    overflow-x: auto !important;
  }

  .scrollFortheReposnsive {
    overflow-x: auto !important;
    min-width: 600px !important;
  }

  .closeMailCOnfigurationModel {
    margin-top: -11px !important;
  }

  .superadmin-company .MuiGrid-root.MuiGrid-item.mb-3.css-13i4rnv-MuiGrid-root {
    margin-bottom: 12px !important;
  }
}

/* / 525 / */
@media (max-width: 575px) {
  .header-text {
    font-size: 8px !important;
  }

  .head-text {
    font-size: 17px !important;
  }

  .title_search-bar {
    flex-direction: column;
  }

  .company-title {
    margin-right: auto;
  }

  .search-company {
    margin-left: auto;
    width: 65%;
  }
  .companyPlanSearch {
    width: 100% !important;
  }
  .tableNameHead {
    margin-bottom: 10px !important;
  }
}

/* / 480 / */
@media (max-width: 524px) {
  .header-text {
    font-size: 8px !important;
  }

  .Active-inactive-button {
    flex-direction: column !important;
  }
  .companyPlanSearch {
    width: 100% !important;
  }
}

/* / 425 / */
@media (max-width: 479px) {
  .header-text {
    font-size: 8px !important;
  }

  .Active-inactive-button {
    flex-direction: column !important;
  }

  .active_both {
    flex-direction: column;
    width: 67% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .active-btn {
    width: 100% !important;
  }

  .inactive-btn {
    width: 100% !important;
    margin-top: 6% !important;
  }

  .true_sign_btn {
    display: none !important;
  }

  .dis_box {
    margin-top: 10px !important;
  }
  .companyPlanSearch {
    width: 100% !important;
  }
}

/* / 375 / */
@media (max-width: 424px) {
  .industry.activebtnfont {
    height: 40px !important;
  }
  .css-mhc70k-MuiGrid-root > .MuiGrid-item {
    padding-top: 0 !important;
  }

  .companysearch {
    margin-left: 20px !important;
  }
  .submit_btn{
    margin-top: 10px !important;
  }
  .companyPlanSearch {
    width: 100% !important;
  }
}

/* / 320 / */
@media (max-width: 374px) {
  .industry.activebtnfont {
    font-size: 14px !important;
  }

  .industry.placeholder-text {
    font-size: 10px !important;
  }

  .companysearch {
    margin-left: 20px !important;
  }

  .save-mail-btn {
    font-size: 15px !important;
  }

  .radio-input {
    width: 15px !important;
    height: 15px !important;
  }

  .addCustomerBtn {
    font-size: 15px !important;
  }

  .hostPortRadioBtn {
    flex-direction: column !important;
  }

  .mailPostPort {
    width: 100% !important;
  }

  .companyPlanSearch {
    width: 100% !important;
  }
}

.addCustomerBtn {
  background-color: white !important;
}

/* / 280 / */
@media (max-width: 319px) {
  .compn {
    font-size: 18px;
    margin-top: 5px;
  }

  .companysearch {
    margin-left: 20px !important;
  }

  .zip {
    margin-top: 0px !important;
  }

  .fontSizeSmallSuperadminlabel {
    font-size: 13px !important;
  }
}

.cancel-btn {
  background-color: #f0f0f0;
  margin-right: 10px;
}

.save-btn {
  background-color: rgba(6, 49, 100, 1);
  color: white;
}

/* 5150 start  */

/* 5150 end  */
@media (max-width: 575px) {
  .your-row-class {
    font-size: 0.85rem;
    padding: 0.3rem;
  }


  .host-back {
    padding: 11px;
    font-size: 11px !important;
  }
}

.nmiKeyDetailPage {
  flex-direction: column !important;
  width: 80% !important;
}

.companyDetailNmiKeysDetail {
  width: 70%;
}

label#ownerName-label {
  margin-top: 5px;
}

label#phoneNumber-label {
  margin-top: 5px;
}

label#EmailAddress-label {
  margin-top: 1px;
}

label#CompanyUrl-label {
  margin-top: 5px;
}

/* Email Limit Modal Styles */
.email-limit-modal .MuiDialog-paper {
  border-radius: 10px;
}

.email-limit-modal .MuiDialogTitle-root {
  border-bottom: 2px solid rgba(6, 49, 100, 0.2);
  padding: 16px 24px;
}

.email-limit-modal .MuiDialogContent-root {
  padding: 20px 24px;
}

.email-limit-input .MuiOutlinedInput-root {
  border-radius: 4px;
}

.email-limit-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0f2b46;
}

.email-limit-input .MuiOutlinedInput-root.Mui-disabled {
  background-color: #f5f5f5;
}

.email-limit-modal .MuiSwitch-switchBase.Mui-checked {
  color: #0f2b46;
}

.email-limit-modal .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: #0f2b46;
}

.text-muted {
  color: #6c757d;
}

/* Scrollbar styles for company detail sidebar - vertical only */
.company-detail-sidebar {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.company-detail-sidebar::-webkit-scrollbar {
  width: 6px;
}

.company-detail-sidebar::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}

.company-detail-sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.company-detail-sidebar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.company-detail-sidebar::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.company-detail-content {
  overflow: visible !important;
}

/* Update Status Modal Responsive Styles */
@media (max-width: 768px) {
  .active-inactive-buttons-container {
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  .active-inactive-buttons-container button {
    width: 100% !important;
    min-width: 0 !important;
    min-width: initial !important;
    max-width: 100% !important;
    flex: none !important;
  }
  
  .update-status-buttons-container {
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  .update-status-buttons-container button,
  .update-status-buttons-container .MuiButton-root,
  .update-status-buttons-container button[class*="WhiteButton"],
  .update-status-buttons-container button[class*="BlueButton"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-width: initial !important;
  }
}

@media (max-width: 480px) {
  .active-inactive-buttons-container button {
    font-size: 14px !important;
    height: 45px !important;
    padding: 8px 16px !important;
  }
  
  .update-status-buttons-container button,
  .update-status-buttons-container .MuiButton-root {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* Email Configuration Modal Responsive Styles */
@media (max-width: 768px) {
  .email-config-buttons-container {
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  .email-config-buttons-container button,
  .email-config-buttons-container .MuiButton-root,
  .email-config-buttons-container button[class*="WhiteButton"],
  .email-config-buttons-container button[class*="BlueButton"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-width: initial !important;
  }
}

@media (max-width: 480px) {
  .email-config-buttons-container button,
  .email-config-buttons-container .MuiButton-root {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* Resend Invitation Modal Responsive Styles */
@media (max-width: 768px) {
  .resend-invitation-buttons-container {
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  .resend-invitation-buttons-container button,
  .resend-invitation-buttons-container .MuiButton-root,
  .resend-invitation-buttons-container button[class*="WhiteButton"],
  .resend-invitation-buttons-container button[class*="BlueButton"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-width: initial !important;
  }
}

@media (max-width: 480px) {
  .resend-invitation-buttons-container button,
  .resend-invitation-buttons-container .MuiButton-root {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* Resend Invitation Email Field Responsive */
.resend-email-field {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .resend-email-field {
    font-size: 16px !important;
    padding: 10px 12px !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 480px) {
  .resend-email-field {
    font-size: 14px !important;
    padding: 8px 10px !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
}
/* Company list mobile expanded rows only (Jobber cards @ 775px) */
@media (max-width: 775px) {
  /* Detail rows: keep stacked label/value left-aligned (do not right-align values) */
  .company-table-head .jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /*
   * Pastel actions — same idea as Admin › Customers `.customer-list-actions-mobile`
   * (MuiTable/style.css): auto-fit packs many buttons per row; no tall full-width stack.
   */
  .company-table-head .jobber-mobile-card__collapse-inner .company-superadmin-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    align-content: start !important;
  }

  .company-table-head .jobber-mobile-card__collapse-inner .company-superadmin-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.65rem !important;
    padding: 4px 4px !important;
    min-height: 30px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Actions strip: stretch full width */
  .company-table-head .jobber-mobile-card__collapse-inner .mobile-action-row .mobile-data-value,
  .company-table-head .jobber-mobile-card__collapse-inner .mobile-action-buttons {
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Beat MuiTable’s `.customer-list-actions-mobile` @400px “large touch” rule — keep Company compact */
@media (max-width: 400px) {
  .company-table-head .jobber-mobile-card__collapse-inner .company-superadmin-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .company-table-head .jobber-mobile-card__collapse-inner .company-superadmin-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Company Detail Fields - Base Styles */
.company-detail-field-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
  box-sizing: border-box;
}

.company-detail-field-label {
  font-weight: 500;
  min-width: 140px;
  flex-shrink: 0;
  padding-top: 0.6rem;
  box-sizing: border-box;
}

.company-detail-field-value {
  background-color: #e3f2fd;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #0f2b46;
  border: 1px solid #b3d9ff;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
  flex: 1 1;
  min-width: 0;
  text-align: left;
  line-height: 1.5;
  box-sizing: border-box;
}

/* When sidebar is visible (lg breakpoint and above), make fields stack vertically like mobile */
/* Medium-large screens (1200px-1361px) - Optimized layout with sidebar */
@media (min-width: 1200px) and (max-width: 1361px) {
  /* Two column grid layout - optimized for this range */
  .company-detail-content .company-detail-card-body .MuiGrid-item {
    flex-basis: 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  
  /* Horizontal field layout - optimized spacing */
  .company-detail-content .company-detail-field-container {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  
  /* Optimized label width for this range */
  .company-detail-content .company-detail-field-label {
    min-width: 130px !important;
    max-width: 130px !important;
    flex-shrink: 0 !important;
    padding-top: 0.6rem !important;
    font-size: 14px !important;
  }
  
  /* Optimized value styling */
  .company-detail-content .company-detail-field-value {
    flex: 1 1 !important;
    min-width: 0 !important;
    padding: 0.5rem 1rem !important;
    font-size: 14px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
  }
  
  /* Optimized heading */
  .company-detail-content .company-detail-heading {
    font-size: 26px !important;
    margin-bottom: 18px !important;
    word-break: keep-all !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
  }
  
  /* Optimized padding */
  .company-detail-content {
    padding: 18px !important;
  }
  
  .company-detail-card-body {
    padding: 20px !important;
  }
}

/* Large screens (1362px+) - Original two-column layout */
@media (min-width: 1362px) {
  /* Two column grid layout - original design */
  .company-detail-content .company-detail-card-body .MuiGrid-item {
    flex-basis: 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  
  /* Horizontal field layout - original design */
  .company-detail-content .company-detail-field-container {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  
  /* Original label styling */
  .company-detail-content .company-detail-field-label {
    min-width: 140px !important;
    flex-shrink: 0 !important;
    padding-top: 0.6rem !important;
    font-size: 15px !important;
  }
  
  /* Original value styling */
  .company-detail-content .company-detail-field-value {
    flex: 1 1 !important;
    min-width: 0 !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 15px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Original heading styling */
  .company-detail-content .company-detail-heading {
    font-size: 28px !important;
    margin-bottom: 16px !important;
    word-break: keep-all !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
  }
  
  /* Original padding */
  .company-detail-content {
    padding: 20px !important;
  }
  
  .company-detail-card-body {
    padding: 24px !important;
  }
}

/* Medium screens (900px-1100px) - Stack vertically like mobile for perfect layout */
@media (min-width: 900px) and (max-width: 1100px) {
  /* Force single column - stack all fields vertically */
  .company-detail-content .company-detail-card-body .MuiGrid-item {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Stack field containers vertically like mobile */
  .company-detail-content .company-detail-field-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }
  
  /* Full width labels */
  .company-detail-content .company-detail-field-label {
    min-width: 0 !important;
    min-width: initial !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
  }
  
  /* Full width values */
  .company-detail-content .company-detail-field-value {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    font-size: 14px !important;
    padding: 0.5rem 1rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }
  
  /* Perfect heading - prevent awkward breaks */
  .company-detail-content .company-detail-heading {
    font-size: 24px !important;
    margin-bottom: 20px !important;
    word-break: keep-all !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    display: block !important;
  }
  
  /* Optimized padding */
  .company-detail-content {
    padding: 16px !important;
  }
  
  .company-detail-card-body {
    padding: 20px !important;
  }
  
  /* Ensure sidebar is hidden */
  .company-detail-sidebar {
    display: none !important;
  }
}

/* Medium-large screens (1100px-1199px) - Transitional layout */
@media (min-width: 1101px) and (max-width: 1199px) {
  .company-detail-content .company-detail-card-body .MuiGrid-item {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
  
  .company-detail-content .company-detail-field-container {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .company-detail-content .company-detail-field-label {
    min-width: 120px !important;
    flex-shrink: 0 !important;
  }
  
  .company-detail-content .company-detail-field-value {
    flex: 1 1 !important;
    min-width: 0 !important;
  }
}

/* Mobile and Small Screens - Stack vertically */
@media (max-width: 767px) {
  .company-detail-field-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .company-detail-field-label {
    min-width: 0 !important;
    min-width: initial !important;
    width: 100% !important;
    font-size: 14px !important;
  }

  .company-detail-field-value {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  .company-detail-card-body {
    padding: 16px !important;
  }

  .company-detail-heading {
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
}

/* Very Small Mobile Screens */
@media (max-width: 480px) {
  .company-detail-field-container {
    margin-bottom: 14px !important;
    gap: 6px !important;
  }

  .company-detail-field-label {
    font-size: 13px !important;
  }

  .company-detail-field-value {
    padding: 0.45rem 0.9rem !important;
    font-size: 13px !important;
  }

  .company-detail-card-body {
    padding: 12px !important;
  }

  .company-detail-heading {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
}

/* Extra Small Mobile Screens */
@media (max-width: 375px) {
  .company-detail-field-container {
    margin-bottom: 12px !important;
    gap: 5px !important;
  }

  .company-detail-field-label {
    font-size: 12px !important;
  }

  .company-detail-field-value {
    padding: 0.4rem 0.8rem !important;
    font-size: 12px !important;
  }

  .company-detail-card-body {
    padding: 10px !important;
  }

  .company-detail-heading {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
}

/* Fix dropdown label overlap with border */
.form-wrap .MuiInputLabel-outlined,
.form-wrap .MuiInputLabel-shrink,
.form-wrap .MuiAutocomplete-root .MuiFormLabel-root {
  background-color: white;
  padding: 0 5px;
}
.css-1ex1afd-MuiTableCell-root {
  font-family: var(--font-body), "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
  text-align: left;
  padding: 16px;
  color: rgba(0, 0, 0, 0.87);
}
.css-yz9k0d-MuiInputBase-input {
  color: white !important;
}

/* 425 */
@media (max-width: 991px) {
  .nmiKeysinnerTable.card-body.w-100.nmiKeysinnerTable{
    width: 500px !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  .plansearch {
    margin-left: 20px !important;
  }
}
/* 320 */
@media (max-width: 374px) {
  .plansearch {
    margin-left: 20px !important;
  }
}
/* 280 */
@media (max-width: 319px) {
  .plan {
    font-size: 19px;
    margin-top: 9px;
  }
  .plansearch {
    margin-left: 20px !important;
  }
  .nmiFormBtn{
    
  }
}

/* Responsive button container */
.gateway-button-container {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid #e3f2fd;
}

@media (max-width: 600px) {
  .gateway-button-container {
    flex-direction: column;
  }
  
  .gateway-button-container button,
  .gateway-button-loader {
    width: 100% !important;
    min-width: 100% !important;
  }
}
/* Plan Purchase – full page checkout (no card wrapper) */
.plan-purchase-full-page {
  min-height: 100%;
  width: 100%;
}

.plan-purchase-full-page .palnCheckoutSub {
  max-width: 100%;
}

@media (min-width: 992px) {
  .plan-purchase-form-col {
    border-right: 1px solid var(--border-grey-color);
  }
}

.plan-checkout-billing-title {
  margin-top: 15px !important;
  margin-bottom: 10px !important;
}
/* Modern Pricing Container */
.plan-modern-pricing-container {
  /* background-color: #f8fafc; */
  padding: 16px 24px 24px;
  /* dynamic header height to align prices across cards */
  --plan-header-height: auto;
}

/* Header Section */
.plan-header-section {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.plan-logout-button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  border: none !important;
  text-transform: none !important;
}

.plan-logout-button:hover {
  opacity: 0.9;
}

/* Pricing Content */
.plan-pricing-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Header Section */
.plan-pricing-header {
  text-align: center;
  margin-bottom: 24px;
  padding-top: 8px;
}

.plan-main-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em;
}

.plan-main-subtitle {
  font-size: 15px !important;
  color: #4b5563 !important;
  /* max-width: 600px; */
  margin: 0 auto 12px auto !important;
  line-height: 1.5;
}

/* Promotional Banner */
.plan-promo-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 0;
}

.plan-promo-text {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Plans Grid */
.plan-plans-grid {
  width: 100%;
}

.plan-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.plan-plans-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin: 0 auto;
  align-items: stretch; /* make all items equal height per row */
  grid-auto-rows: 1fr; /* normalize row heights */
}

/* Plan Cards */
.plan-card-wrapper {
  position: relative;
  height: 100%;
}

.plan-modern-card {
  position: relative;
  background: #ffffff;
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  border-radius: 24px !important;
  height: 100%;
  overflow: hidden;
  padding: 24px !important;
  display: flex;
  flex-direction: column;
}

.plan-modern-card:hover { box-shadow: none; }

.plan-popular-card.plan-modern-card {
  box-shadow: var(--shadow-xl) !important;
}

.plan-popular-card.plan-modern-card:hover {
  box-shadow: var(--shadow-xl) !important;
}

/* Popular Card Styling */
.plan-popular-card {
  position: relative;
  overflow: visible !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Badges */
.plan-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  color: white;
}

/* Card Header */
.plan-modern-card-header {
  text-align: left;
  padding: 24px !important;
  background: none !important;
  border: none !important;
  /* Equalize header height across cards using computed CSS var */
  min-height: var(--plan-header-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* minimal spacing; body padding handles separation */
  margin-bottom: 0 !important;
}

.plan-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  text-align: center;
}

.plan-description {
  font-size: 14px !important;
  color: #6b7280 !important;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 24px !important;
  /* clamp */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow-wrap: anywhere;
  word-break: break-word;
  position: relative;
}

.plan-description-wrap { position: relative; display: inline-block; max-width: 60ch; margin-bottom: 8px; }
.plan-description-measurer { white-space: normal; }

/* Make the native line-clamp ellipsis reveal a hover area at the end of the last visible line */
/* Absolutely position Read more at the end of the last clamped line */
.plan-inline-readmore { color: inherit; font-weight: 600; cursor: pointer; }
.plan-inline-readmore:hover { color: #374151; text-decoration: underline; }
.plan-inline-readmore:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

.plan-tooltip-content {
  display: block;
  max-width: 420px;
  white-space: normal;
  line-height: 1.5;
}

/* Card Body */
.plan-modern-card-body {
  padding: 16px 24px 24px !important; /* top padding to avoid header/price collision */
  display: grid;
  grid-template-rows: 1fr auto; /* price area then button at bottom */
  grid-row-gap: 16px;
  row-gap: 16px;
  height: 100%;
}

/* Pricing Section */
.plan-pricing-section {
  margin: 0; /* spacing handled by grid row-gap */
  text-align: left;
  align-self: center; /* center price vertically in available space */
}

.plan-price-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.plan-price-amount {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan-price-period {
  font-size: 16px;
  color: #6b7280;
}

.plan-monthly-price {
  font-size: 14px !important;
  color: #6b7280 !important;
  margin-top: 4px !important;
}

/* Select Plan Button */
.plan-select-button {
  width: 100%;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
  border: none !important;
  text-transform: none !important;
  color: white !important;
  margin-top: 0 !important; /* grid layout controls button position */
}

.plan-select-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Bottom CTA */
.plan-bottom-cta {
  text-align: center;
  margin-top: 64px;
  padding: 32px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

.plan-cta-text {
  font-size: 18px !important;
  margin-bottom: 16px !important;
}

.plan-cta-link {
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.plan-cta-link:hover {
  border-bottom-color: currentColor;
}

.plan-guarantee-text {
  font-size: 14px !important;
  color: #6b7280 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .plan-modern-pricing-container {
    padding: 12px 16px 24px;
  }
  .plan-modern-card-header { min-height: 0; }
  
  .plan-main-title {
    font-size: 26px !important;
  }
  
  .plan-main-subtitle {
    font-size: 14px !important;
    padding: 0;
  }
  
  .plan-pricing-header {
    margin-bottom: 16px;
    padding-top: 4px;
  }
  
  .plan-plans-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 8px;
  }
  
  .plan-price-amount {
    font-size: 32px;
  }
  
  .plan-bottom-cta {
    margin: 40px 16px 0;
    padding: 24px 16px;
  }
  
  .plan-header-section {
    margin-bottom: 12px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .plan-plans-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1025px) {
  .plan-plans-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
/* Street address “Custom” — sits in the input row (end adornment), aligned with the field */
.cs-address-custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0 12px;
    min-height: 36px;
    border: 1px solid #1a3f5c;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-address-custom-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.cs-address-custom-btn:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 1px;
}

/* Full-address textarea — close (×) inside the field row (not overlapping the border) */
.cs-address-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid #1a3f5c;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cs-address-close-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.cs-address-close-btn:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 1px;
}

/* Align × with first line of textarea padding */
.userInfoAddress .cs-input-shell--multiline .cs-input-adorn--end {
    align-self: flex-start;
    padding-top: 10px;
    padding-right: 8px;
}

/* City/State and ZIP/Country rows: same vertical start; dropdown + text field same width */
.address-field-pair-row {
    align-items: flex-start !important;
}
.address-field-pair-row > [class*="col"] {
    display: flex;
    flex-direction: column;
}
.address-field-pair-row > [class*="col"] .cs-form-field,
.address-field-pair-row > [class*="col"] .cs-rs__wrapper {
    width: 100%;
    min-width: 0;
}

/* Same label → field spacing as InputText (gap 6px); labels share one line box */
.address-field-pair-row .cs-field-label,
.address-field-pair-row .cs-rs__label {
    margin: 0 !important;
    padding: 0 !important;
}

/* Row spacing comes from MUI sx gap on .cs-address-form-root — keep col tops flush */
.cs-address-form-root .address-field-pair-row > [class*="col"] {
    margin-top: 0 !important;
}


/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {
    .userInfoAddress{
        margin-top: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .userInfoAddress .MuiFormControl-root,
    .userInfoAddress .MuiTextField-root {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Fix multiline input (Custom Address) display - ensure proper padding and alignment */
    .userInfoAddress .MuiTextField-root .MuiOutlinedInput-root.MuiInputBase-multiline {
        min-height: 80px !important;
        padding: 0 !important;
        align-items: flex-start !important;
        overflow: visible !important;
        position: relative !important;
        height: auto !important;
    }

    /* Fix textarea text positioning - ensure text stays inside field */
    .userInfoAddress .MuiTextField-root .MuiInputBase-inputMultiline,
    .userInfoAddress .MuiTextField-root textarea.MuiOutlinedInput-input,
    .userInfoAddress .MuiTextField-root textarea {
        padding-top: 24px !important;
        padding-bottom: 16.5px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
        line-height: 1.5em !important;
        resize: vertical !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: relative !important;
        display: block !important;
    }
    
    /* Ensure the textarea wrapper doesn't clip content */
    .userInfoAddress .MuiTextField-root .MuiOutlinedInput-root.MuiInputBase-multiline .MuiInputBase-input {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Fix label positioning for multiline - ensure it doesn't overlap text */
    .userInfoAddress .MuiTextField-root .MuiInputLabel-root {
        z-index: 1 !important;
        background-color: white !important;
        padding: 0 4px !important;
    }
    
    /* Ensure parent container allows overflow */
    .userInfoAddress .MuiTextField-root {
        overflow: visible !important;
    }

    .cityitem {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Increase gap between Street Address and first Row (City/State) on mobile */
    /* Target the div containing Street Address to add bottom margin */
    .MuiGrid-root.d-flex.flex-column > div.position-relative:first-of-type {
        margin-bottom: 20px !important;
    }

    /* Ensure address fields stack in column on small screens */
    .row.m-0.p-0 > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Remove left padding on small screens for State and Country columns */
    .row.m-0.p-0 > [class*="col-"].ps-lg-2 {
        padding-left: 0 !important;
    }

    /* Override Bootstrap margin classes on mobile for consistent spacing */
    .row.m-0.p-0 > [class*="col-"].mt-4 {
        margin-top: 0 !important;
    }

    /* Ensure FormControl and input fields take full width */
    .row.m-0.p-0 [class*="col-"] .MuiFormControl-root,
    .row.m-0.p-0 [class*="col-"] .MuiTextField-root,
    .row.m-0.p-0 [class*="col-"] .MuiAutocomplete-root {
        width: 100% !important;
        max-width: 100% !important;
    }

    .userInfoAddress .cs-address-custom-btn {
        padding: 0 8px !important;
        min-height: 32px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }

    .userInfoAddress .cs-address-custom-btn svg {
        font-size: 15px !important;
    }

    .userInfoAddress .cs-address-close-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .userInfoAddress .cs-address-close-btn svg {
        font-size: 16px !important;
    }
}
/* 525 */
@media (max-width: 575px) {
    /* Increase gap between Street Address and first Row (City/State) on extra small screens */
    .MuiGrid-root.d-flex.flex-column > div.position-relative:first-of-type {
        margin-bottom: 18px !important;
    }

    /* Ensure address fields stack in column on extra small screens */
    .row.m-0.p-0 > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Override Bootstrap margin classes on extra small screens */
    .row.m-0.p-0 > [class*="col-"].mt-4 {
        margin-top: 0 !important;
    }

    /* Ensure FormControl and input fields take full width */
    .row.m-0.p-0 [class*="col-"] .MuiFormControl-root,
    .row.m-0.p-0 [class*="col-"] .MuiTextField-root,
    .row.m-0.p-0 [class*="col-"] .MuiAutocomplete-root {
        width: 100% !important;
        max-width: 100% !important;
    }

    .userInfoAddress .cs-address-custom-btn {
        padding: 0 6px !important;
        min-height: 30px !important;
        font-size: 10px !important;
        gap: 3px !important;
    }

    .userInfoAddress .cs-address-custom-btn svg {
        font-size: 14px !important;
    }

    .userInfoAddress .cs-address-close-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }

    .userInfoAddress .cs-address-close-btn svg {
        font-size: 15px !important;
    }
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}


.css-1f0x1ke-MuiFormControl-root-MuiTextField-root .MuiFormHelperText-root{
    font-size: 12px !important;
    margin-left: 0px !important;
    padding-left: 0px !important;
    font-weight: 400 !important;
}

.css-fzem9i-MuiAutocomplete-root .MuiAutocomplete-inputRoot {
height: 50px !important;

}
/* Ensure Col components don't clip labels */
.row.m-0.p-0 > [class*="col-"] {
  overflow: visible !important;
  padding-top: 0 !important;
}

.MuiAutocomplete-root .MuiInputLabel-shrink {
  transform: translate(14px, -9px) scale(0.75) !important;
  background-color: white !important;
  padding: 0 4px !important;
  overflow: visible !important;
}
/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {
    /* Property Details - Location Section - Convert table to card layout */
    .address table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .address thead {
        display: none !important;
    }

    .address tbody {
        display: block !important;
        width: 100% !important;
    }

    .address tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .address tbody td,
    .address tbody .MuiTableCell-root {
        display: block !important;
        width: 100% !important;
        padding: 8px 15px !important;
        border: none !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .address tbody td:last-child,
    .address tbody .MuiTableCell-root:last-child {
        border-bottom: none !important;
    }

    /* Address cell with icon - Use CSS Grid for precise spacing - Maximize text width */
    .address tbody td:first-child,
    .address tbody .MuiTableCell-root:first-child {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        display: grid !important;
        grid-template-columns: 18px 1fr !important;
        grid-gap: 4px !important;
        gap: 4px !important;
        align-items: flex-start !important;
        font-weight: 500 !important;
    }

    /* Override inline styles */
    .address tbody td:first-child[style*="display"],
    .address tbody .MuiTableCell-root:first-child[style*="display"] {
        display: grid !important;
    }

    .address tbody td:first-child[style*="paddingLeft"],
    .address tbody td:first-child[style*="padding-left"],
    .address tbody .MuiTableCell-root:first-child[style*="paddingLeft"],
    .address tbody .MuiTableCell-root:first-child[style*="padding-left"] {
        padding-left: 15px !important;
    }

    /* Icon - Minimize space, use transform to compensate for inline marginRight */
    .address tbody td:first-child .MuiSvgIcon-root,
    .address tbody td:first-child svg,
    .address tbody .MuiTableCell-root:first-child .MuiSvgIcon-root,
    .address tbody .MuiTableCell-root:first-child svg {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        display: block !important;
        box-sizing: border-box !important;
        grid-column: 1 !important;
        /* Transform moves icon visually left to fully compensate for inline marginRight: 15px */
        transform: translateX(-15px) !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }

    /* Target icons with inline marginRight - More aggressive transform */
    .address tbody td:first-child .MuiSvgIcon-root[style*="marginRight"],
    .address tbody td:first-child .MuiSvgIcon-root[style*="margin-right"],
    .address tbody td:first-child svg[style*="marginRight"],
    .address tbody td:first-child svg[style*="margin-right"],
    .address tbody .MuiTableCell-root:first-child .MuiSvgIcon-root[style*="marginRight"],
    .address tbody .MuiTableCell-root:first-child .MuiSvgIcon-root[style*="margin-right"],
    .address tbody .MuiTableCell-root:first-child svg[style*="marginRight"],
    .address tbody .MuiTableCell-root:first-child svg[style*="margin-right"] {
        transform: translateX(-15px) !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
        grid-column: 1 !important;
    }

    /* Tooltip wrapper (from TruncatedText) - Grid layout column 2 - Maximize width */
    .address tbody td:first-child .MuiTooltip-root,
    .address tbody .MuiTableCell-root:first-child .MuiTooltip-root {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 !important;
    }

    /* Address text - Utilize full width, prevent unnecessary breaks */
    .address tbody td:first-child .text-blue-color,
    .address tbody td:first-child span,
    .address tbody td:first-child div,
    .address tbody td:first-child .MuiTypography-root,
    .address tbody .MuiTableCell-root:first-child .text-blue-color,
    .address tbody .MuiTableCell-root:first-child span,
    .address tbody .MuiTableCell-root:first-child div,
    .address tbody .MuiTableCell-root:first-child .MuiTypography-root {
        min-width: 0 !important;
        flex: 1 1 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.5 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-overflow: initial !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Override TruncatedText component to show FULL address */
    .address tbody td:first-child .MuiTypography-root,
    .address tbody .MuiTableCell-root:first-child .MuiTypography-root {
        text-overflow: clip !important;
        overflow: visible !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* Remove ellipsis from TruncatedText */
    .address tbody td:first-child .MuiTypography-root::after,
    .address tbody .MuiTableCell-root:first-child .MuiTypography-root::after {
        content: none !important;
    }

    /* Add labels for other cells using pseudo-elements */
    .address tbody td:nth-child(2):before,
    .address tbody .MuiTableCell-root:nth-child(2):before {
        content: "City: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        margin-right: 8px !important;
        color: inherit !important;
    }

    .address tbody td:nth-child(3):before,
    .address tbody .MuiTableCell-root:nth-child(3):before {
        content: "State: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        margin-right: 8px !important;
        color: inherit !important;
    }

    .address tbody td:nth-child(4):before,
    .address tbody .MuiTableCell-root:nth-child(4):before {
        content: "Zip: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        margin-right: 8px !important;
        color: inherit !important;
    }
}

/* 576-767px - SPECIFIC FIX FOR TABLET PORTRAIT */
@media (min-width: 576px) and (max-width: 767px) {
    /* Ensure consistent behavior for tablet portrait */
    .address tbody td:first-child,
    .address tbody .MuiTableCell-root:first-child {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-gap: 0 !important;
        gap: 0 !important;
    }

    .address tbody td:first-child .MuiSvgIcon-root,
    .address tbody td:first-child svg,
    .address tbody .MuiTableCell-root:first-child .MuiSvgIcon-root,
    .address tbody .MuiTableCell-root:first-child svg {
        transform: translateX(-15px) !important;
    }
}

/* 576 */
@media (max-width: 767px) {
    /* Property Details - Location Section - Mobile optimizations */
    .address {
        padding-right: 10px !important;
    }

    .address .CardHeader {
        padding: 10px !important;
    }

    .address .CardBody {
        padding: 5px 0px !important;
    }

    .address tbody td,
    .address tbody .MuiTableCell-root {
        padding: 6px 15px !important;
        font-size: 12px !important;
    }

    .address tbody td:first-child,
    .address tbody .MuiTableCell-root:first-child {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Fix Custom Address Multiline Textarea Label in Dialog - PERFECT POSITIONING */
    /* Override all global styles with maximum specificity */
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiInputLabel-root,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiInputLabel-root {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        transform: translate(14px, -6px) scale(0.75) !important;
        transform-origin: top left !important;
        z-index: 3 !important;
        background-color: white !important;
        padding: 0 4px !important;
        pointer-events: none !important;
        max-width: calc(100% - 32px) !important;
        transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms !important;
        color: #0f2b46 !important;
        font-size: 15px !important;
        margin-top: 2px !important;
    }

    /* Label when empty - still at top for multiline */
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiInputLabel-root:not(.Mui-focused):not(.MuiFormLabel-filled):not(.MuiInputLabel-shrink),
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiInputLabel-root:not(.Mui-focused):not(.MuiFormLabel-filled):not(.MuiInputLabel-shrink) {
        transform: translate(14px, -6px) scale(0.75) !important;
        top: 0 !important;
        margin-top: 2px !important;
    }

    /* Label when focused or filled */
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiInputLabel-root.Mui-focused,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiInputLabel-root.MuiFormLabel-filled,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiInputLabel-root.MuiInputLabel-shrink,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiInputLabel-root.Mui-focused,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiInputLabel-root.MuiFormLabel-filled,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiInputLabel-root.MuiInputLabel-shrink {
        transform: translate(14px, -6px) scale(0.75) !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 3 !important;
        background-color: white !important;
        padding: 0 4px !important;
        max-width: calc(100% - 32px) !important;
        margin-top: 2px !important;
    }

    /* Fix multiline textarea input - ensure text appears inside */
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiOutlinedInput-root.MuiInputBase-multiline,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiOutlinedInput-root.MuiInputBase-multiline {
        position: relative !important;
        padding: 0 !important;
        align-items: flex-start !important;
        overflow: visible !important;
    }

    /* Fix textarea text positioning */
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiInputBase-inputMultiline,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root textarea.MuiOutlinedInput-input,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiInputBase-inputMultiline,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress textarea.MuiOutlinedInput-input {
        position: relative !important;
        padding-top: 20px !important;
        padding-bottom: 16.5px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
        line-height: 1.4375em !important;
        margin: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 80px !important;
        resize: vertical !important;
        z-index: 1 !important;
    }

    /* Ensure TextField container has proper positioning */
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress {
        position: relative !important;
        overflow: visible !important;
    }

    /* Fix fieldset border */
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress.MuiTextField-root .MuiOutlinedInput-notchedOutline,
    .MuiDialog-root .MuiDialogContent-root .userInfoAddress .MuiOutlinedInput-notchedOutline {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 0 !important;
    }
}

/* 525 */
@media (max-width: 575px) {
    .newPropertyForUser {
        flex-direction: column !important;
    }

    .propertyForUserNameHere {
        margin-right: auto !important;
    }
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {
    .cancelProperty.button.footer-buttons.outline-button-blue-color.backgroundWhiteBtn.btn.btn-secondary {
        width: 100% !important;
    }
}

/* 320 */
@media (max-width: 374px) {
    .cancelPropertyModel {
        gap: 5px !important;
    }
}

/* 280 */
@media (max-width: 319px) {}
.overviewTableHeadFOnt {
    font-size: 15px !important;
}

.overviewDataHere {
    font-size: 14px !important;
}

.boxScrollHEre {
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

/* Sticky header for Properties table */
.propertyTableAndItScroll thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

.dataCollapsHere {
    background-color: #fff !important;
}

.dataCollapsHere th,
.dataCollapsHere td {
    background-color: #fff !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Page header - Add Customer button: smaller, keep on right */
.mb-2.customersAddCustomers {
  justify-content: space-between;
}
.mb-2.customersAddCustomers .searchBarOfTable {
  margin-left: auto;
  flex-shrink: 0;
}
.mb-2.customersAddCustomers .searchBarOfTable .backgroundBlurBtn,
.mb-2.customersAddCustomers .searchBarOfTable button {
  padding: 6px 14px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* GLOBAL OVERRIDE - Remove ALL spacing around location icon in Properties section */
@media (max-width: 991px) {
    /* Target the icon with inline marginRight style - MAXIMUM SPECIFICITY */
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="margin-right"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="margin-right"],
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root[style*="margin-right"],
    .propertyTableAndItScroll tbody td:first-child svg[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child svg[style*="margin-right"] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Override paddingLeft on the cell */
    .propertyTableAndItScroll tbody td:first-child[style*="paddingLeft"],
    .propertyTableAndItScroll tbody td:first-child[style*="padding-left"] {
        padding-left: 0 !important;
    }
}



/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {
    .flexForDetail {
        flex-direction: column !important;
    }
}

/* 768 */
@media (max-width: 991px) {
    .costomerUserName {
        font-size: 20px !important;
    }

    .customerSevenFlex {
        width: 100% !important;
    }

    /* Properties Section - Convert Table to Card Layout on Tablet */
    .propertyTableAndItScroll {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .propertyTableAndItScroll thead {
        display: none !important;
    }

    .propertyTableAndItScroll tbody {
        display: block !important;
        width: 100% !important;
    }

    .propertyTableAndItScroll tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        background-color: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        box-shadow: var(--shadow-sm) !important;
        cursor: pointer !important;
        transition: box-shadow 0.2s ease !important;
        box-sizing: border-box !important;
    }

    .propertyTableAndItScroll tbody tr:hover {
        box-shadow: var(--shadow-lg) !important;
    }

    .propertyTableAndItScroll tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    .propertyTableAndItScroll tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        border: none !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        -webkit-hyphens: auto !important;
                hyphens: auto !important;
    }

    .propertyTableAndItScroll tbody td:last-child {
        border-bottom: none !important;
        border-top: 1px solid #e0e0e0 !important;
        padding-top: 6px !important;
        margin-top: 4px !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Address cell with icon - perfect alignment - NO EXTRA SPACE */
    .propertyTableAndItScroll tbody td:first-child {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 6px !important;
        font-weight: 500 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* ULTRA AGGRESSIVE - Target direct child icon with inline styles */
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="margin-right"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="margin-right"] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Override ALL inline styles from component - AGGRESSIVE */
    .propertyTableAndItScroll tbody td:first-child[style] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .propertyTableAndItScroll tbody td:first-child[style*="display"] {
        display: flex !important;
    }

    /* Icon - REMOVE ALL SPACING */
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root,
    .propertyTableAndItScroll tbody td:first-child svg {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    }

    /* Override inline marginRight from component - AGGRESSIVE - Target ANY style attribute */
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root[style*="margin"],
    .propertyTableAndItScroll tbody td:first-child svg[style*="margin"],
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root[style],
    .propertyTableAndItScroll tbody td:first-child svg[style] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Even more specific - target the exact inline style */
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="margin-right"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="margin-right"] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Override any Material-UI default spacing */
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root::before,
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root::after {
        content: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Address text - perfect wrapping - SHOW FULL ADDRESS */
    .propertyTableAndItScroll tbody td:first-child .text-blue-color,
    .propertyTableAndItScroll tbody td:first-child span,
    .propertyTableAndItScroll tbody td:first-child div,
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        flex: 1 1 !important;
        min-width: 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.5 !important;
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        text-overflow: initial !important;
        overflow: visible !important;
    }

    /* Override TruncatedText component - show FULL address text */
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        text-overflow: clip !important;
        overflow: visible !important;
    }

    /* Override inline styles - remove paddingLeft */
    .propertyTableAndItScroll tbody td:first-child[style*="paddingLeft"],
    .propertyTableAndItScroll tbody td:first-child[style*="padding-left"] {
        padding-left: 0 !important;
    }

    .propertyTableAndItScroll tbody td:first-child[style*="display"] {
        display: flex !important;
    }

    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root {
        margin-right: 0 !important;
    }

    /* Add labels using pseudo-elements - perfect alignment */
    .propertyTableAndItScroll tbody td.text-blue-color:nth-child(2):before,
    .propertyTableAndItScroll tbody td.text-blue-color:nth-child(3):before,
    .propertyTableAndItScroll tbody td.text-blue-color:nth-child(4):before {
        color: inherit !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(2),
    .propertyTableAndItScroll tbody td:nth-child(3),
    .propertyTableAndItScroll tbody td:nth-child(4) {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(2):before {
        content: "City: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(3):before {
        content: "State: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(4):before {
        content: "Zip: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
    }

    .propertyTableAndItScroll tbody td:last-child:before {
        content: "" !important;
        display: none !important;
    }

    /* Text content - perfect wrapping */
    .propertyTableAndItScroll tbody td .text-blue-color {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        color: inherit !important;
        flex: 1 1 !important;
        min-width: 0 !important;
    }

    /* Actions icons - perfect alignment */
    .propertyTableAndItScroll tbody td:last-child svg {
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    /* Card body adjustments - NO EXTRA SPACE */
    .boxScrollHEre {
        padding: 8px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .propertyAddBoxScroll {
        padding: 8px !important;
        overflow: visible !important;
    }

    /* Header adjustments */
    .property_addNew {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .plusNewPropertyToAddPPro {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    /*
     * Customer Details → Summary → Properties: keep title + “+ New Property” on one row.
     * Generic .property_addNew above stacks any flex header; this card header is an exception.
     */
    .customer-details-summary
        .customer-summary-properties-card
        .customer-summary-card-header.property_addNew {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .customer-details-summary
        .customer-summary-properties-card
        .customer-summary-card-header
        .customer-summary-card-title {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .customer-details-summary
        .customer-summary-properties-card
        .customer-summary-card-header
        .plusNewPropertyToAddPPro {
        width: auto !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        justify-content: flex-end !important;
    }
}

/* Tablet and small desktop with sidebar open (768px - 1025px) - Stack cards vertically */
@media (min-width: 768px) and (max-width: 1025px) {
    /* Only target Overview component to avoid affecting other pages */
    .client .customerScrollHorizontal {
        min-width: 0 !important;
        min-width: initial !important;
        overflow-x: visible !important;
        width: 100% !important;
    }

    /* Force columns to stack vertically like mobile */
    .client .customerScrollHorizontal [class*="col-"][class*="md-3"],
    .client .customerScrollHorizontal [class*="col-"][class*="lg-3"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Add spacing between stacked columns */
    .client .customerScrollHorizontal [class*="col-"] {
        margin-bottom: 8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Ensure proper alignment when stacked */
    .client .customerScrollHorizontal [class*="col-"] {
        text-align: left !important;
    }

    /* Navigation tabs adjustments */
    .client .customerOverviewNav {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .client .customerOverviewNav .nav-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Card row adjustments */
    .client .customerScrollHorizontal .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove last column margin */
    .client .customerScrollHorizontal [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
}

/* 576-767px - SPECIFIC FIX FOR TABLET PORTRAIT */
@media (min-width: 576px) and (max-width: 767px) {
    /* Properties Section - Address cell with icon - Use CSS Grid for precise spacing */
    .propertyTableAndItScroll tbody td:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-gap: 0 !important;
        gap: 0 !important;
    }

    /* Override Material-UI TableCell padding */
    .propertyTableAndItScroll tbody td:first-child.MuiTableCell-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Icon - Use transform to visually move left, compensating for inline marginRight: 15px */
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root,
    .propertyTableAndItScroll tbody td:first-child > svg {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        display: block !important;
        box-sizing: border-box !important;
        grid-column: 1 !important;
        /* Transform moves icon visually left to compensate for inline marginRight: 15px */
        transform: translateX(-15px) !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Target icons with inline marginRight - Use transform to compensate */
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="margin-right"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="margin-right"] {
        /* Transform moves icon visually left to compensate for inline marginRight: 15px */
        transform: translateX(-15px) !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        grid-column: 1 !important;
    }

    /* Remove any spacing from container */
    .propertyTableAndItScroll tbody td:first-child[style*="paddingLeft"],
    .propertyTableAndItScroll tbody td:first-child[style*="padding-left"] {
        padding-left: 0 !important;
    }

    /* Tooltip wrapper (from TruncatedText) - Grid layout column 2 */
    .propertyTableAndItScroll tbody td:first-child .MuiTooltip-root {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Address text - Grid layout */
    .propertyTableAndItScroll tbody td:first-child .text-blue-color,
    .propertyTableAndItScroll tbody td:first-child span,
    .propertyTableAndItScroll tbody td:first-child div,
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        margin: 0 !important;
    }
}

/* 576 */
@media (max-width: 767px) {
    .customerSevenFlex {
        flex-direction: column !important;
        width: 100% !important;
    }

    .CustomerRightRemove {
        padding-right: 0px !important;
    }

    .widthReccuringBtn {
        width: 100% !important;
    }

    /* Customer Actions Container - Responsive Button Layout */
    .customer-actions-container {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    .customer-right-actions {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
    }

    .customer-header {
        flex-direction: column !important;
        align-items: start !important;
    }

    .customer-detail-sec {
        margin-left: 8px !important;
        margin-top: 10px;
    }

/* Customer Details submenu: vertical list on mobile (like screenshot) */
    .main-tab {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
        gap: 0 !important;
        border-bottom: none !important;
    }

    .main-tab .nav-item {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }

    .main-tab .nav-item:last-child {
        border-bottom: none !important;
    }

    .main-tab .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 12px 10px !important;
        font-size: 14px !important;
        text-align: left !important;
        white-space: normal !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .main-tab .nav-link.active {
        background-color: #0f2b46 !important;
        color: #fff !important;
        border-bottom: 2px solid #0f2b46 !important;
    }

    .main-tab .nav-link:not(.active) {
        background: #fff !important;
        color: #0f2b46 !important;
    }

    /* Properties Section - Mobile Card Layout - PERFECT STACKING */
    .propertyTableAndItScroll {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .propertyTableAndItScroll thead {
        display: none !important;
    }

    .propertyTableAndItScroll tbody {
        display: block !important;
        width: 100% !important;
    }

    .propertyTableAndItScroll tbody tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        background-color: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        box-shadow: var(--shadow-sm) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .propertyTableAndItScroll tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    .propertyTableAndItScroll tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        border: none !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        -webkit-hyphens: auto !important;
                hyphens: auto !important;
        line-height: 1.4 !important;
    }

    .propertyTableAndItScroll tbody td:last-child {
        border-bottom: none !important;
        border-top: 1px solid #e0e0e0 !important;
        padding-top: 6px !important;
        margin-top: 4px !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Address cell with icon - Use CSS Grid for precise spacing control */
    .propertyTableAndItScroll tbody td:first-child {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 6px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-gap: 0 !important;
        gap: 0 !important;
        align-items: flex-start !important;
        font-weight: 500 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* Override Material-UI TableCell default padding */
    .propertyTableAndItScroll tbody td:first-child.MuiTableCell-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }

    /* Override ALL inline styles from component - ULTRA AGGRESSIVE */
    .propertyTableAndItScroll tbody td:first-child[style] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .propertyTableAndItScroll tbody td:first-child[style*="paddingLeft"],
    .propertyTableAndItScroll tbody td:first-child[style*="padding-left"] {
        padding-left: 0 !important;
    }

    .propertyTableAndItScroll tbody td:first-child[style*="display"] {
        display: grid !important;
    }

    /* Icon - Use negative margin to counteract inline marginRight: 15px */
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root,
    .propertyTableAndItScroll tbody td:first-child > svg {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        display: block !important;
        box-sizing: border-box !important;
        grid-column: 1 !important;
        /* Use negative margin-right to counteract inline marginRight: 15px */
        margin-right: -15px !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Target icons with inline marginRight - Use negative margin to counteract */
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root[style*="margin-right"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="marginRight"],
    .propertyTableAndItScroll tbody td:first-child > svg[style*="margin-right"] {
        /* Negative margin-right counteracts the inline marginRight: 15px */
        margin-right: -15px !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        grid-column: 1 !important;
    }

    /* Override any pseudo-elements that might add spacing */
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root::before,
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root::after,
    .propertyTableAndItScroll tbody td:first-child svg::before,
    .propertyTableAndItScroll tbody td:first-child svg::after,
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root::before,
    .propertyTableAndItScroll tbody td:first-child > .MuiSvgIcon-root::after {
        content: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
    }

    /* Remove spacing from any wrapper around icon */
    .propertyTableAndItScroll tbody td:first-child > *:first-child {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Tooltip wrapper (from TruncatedText) - Grid layout column 2 */
    .propertyTableAndItScroll tbody td:first-child .MuiTooltip-root {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Address text - Grid layout - PERFECT wrapping - SHOW FULL ADDRESS */
    .propertyTableAndItScroll tbody td:first-child .text-blue-color,
    .propertyTableAndItScroll tbody td:first-child span,
    .propertyTableAndItScroll tbody td:first-child div,
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        min-width: 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.5 !important;
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        text-overflow: initial !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    /* Override TruncatedText component to show FULL address on mobile/tablet */
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        text-overflow: clip !important;
        overflow: visible !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* Show full text content - remove any ellipsis */
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root::after {
        content: none !important;
    }

    /* Ensure tooltip shows full text on hover, but display full text in card */
    .propertyTableAndItScroll tbody td:first-child .MuiTooltip-root {
        display: block !important;
        width: 100% !important;
    }

    /* Make the Typography component show full width */
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Labels for mobile - PERFECT alignment */
    .propertyTableAndItScroll tbody td.text-blue-color:nth-child(2):before,
    .propertyTableAndItScroll tbody td.text-blue-color:nth-child(3):before,
    .propertyTableAndItScroll tbody td.text-blue-color:nth-child(4):before {
        color: inherit !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(2),
    .propertyTableAndItScroll tbody td:nth-child(3),
    .propertyTableAndItScroll tbody td:nth-child(4) {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(2):before {
        content: "City: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(3):before {
        content: "State: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(4):before {
        content: "Zip: " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
    }

    /* Text content - PERFECT wrapping - no overflow ever */
    .propertyTableAndItScroll tbody td .text-blue-color,
    .propertyTableAndItScroll tbody td span,
    .propertyTableAndItScroll tbody td div {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        color: inherit !important;
        flex: 1 1 !important;
        min-width: 0 !important;
        display: inline !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Address text specifically - SHOW FULL ADDRESS */
    .propertyTableAndItScroll tbody td:first-child .text-blue-color,
    .propertyTableAndItScroll tbody td:first-child span,
    .propertyTableAndItScroll tbody td:first-child div,
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        display: block !important;
        text-overflow: initial !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Override TruncatedText - show full address text */
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root {
        text-overflow: clip !important;
        overflow: visible !important;
    }

    /* Ensure the text content inside Typography shows fully */
    .propertyTableAndItScroll tbody td:first-child .MuiTypography-root > * {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Actions icons - PERFECT alignment */
    .propertyTableAndItScroll tbody td:last-child svg {
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    .boxScrollHEre {
        padding: 8px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .propertyAddBoxScroll {
        padding: 8px !important;
        overflow: visible !important;
    }
}

/* 525-575px - Fix overlap issue in header */
@media (min-width: 525px) and (max-width: 575px) {
    .customerList_searchbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .customerList_head {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 140px) !important;
        margin-right: 8px !important;
    }

    .customer_searchBar {
        flex: 0 0 auto !important;
        min-width: 120px !important;
        max-width: 140px !important;
    }

    .customersAddCustomers {
        gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .tableNameHead {
        max-width: calc(100% - 140px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .searchBarOfTable {
        min-width: 120px !important;
        max-width: 140px !important;
        flex-shrink: 0 !important;
    }
}

/* 525 */
@media (max-width: 575px) {

    .scrollForOverview {
        overflow-x: auto !important;
    }

    /* Parent Grid container - ensure no overflow */
    .justify-content-center.mb-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .customersAddCustomers {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .customerList_searchbar {
        gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .customerList_head {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 140px) !important;
        margin-right: 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .customer_searchBar {
        flex: 0 0 auto !important;
        min-width: 120px !important;
        max-width: 140px !important;
    }

    .tableNameHead {
        margin-right: 8px !important;
        flex-shrink: 1 !important;
        white-space: nowrap !important;
        font-size: 16px !important;
        min-width: 0 !important;
        max-width: calc(100% - 140px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .searchBarOfTable {
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        min-width: 120px !important;
        max-width: 140px !important;
    }

    /* Page header: keep Add Customer button on the right in responsive */
    .mb-2.customersAddCustomers .searchBarOfTable {
        margin-left: auto !important;
    }
    .mb-2.customersAddCustomers {
        justify-content: space-between !important;
    }

    .searchBarOfTable button {
        font-size: 11px !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        min-width: fit-content !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ensure button doesn't get cropped */
    .searchBarOfTable {
        overflow: visible !important;
    }

    .saveBrnGap {
        gap: 6px !important;
    }

    /* Properties Section - Small Mobile Card Layout - PERFECT */
    .propertyTableAndItScroll tbody tr {
        padding: 12px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    .propertyTableAndItScroll tbody td {
        padding: 6px 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 12px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .propertyTableAndItScroll tbody td:first-child {
        padding-top: 0 !important;
        padding-bottom: 6px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        gap: 6px !important;
    }

    /* Override ALL inline styles */
    .propertyTableAndItScroll tbody td:first-child[style] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        margin: 0 !important;
    }

    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root,
    .propertyTableAndItScroll tbody td:first-child svg {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }

    /* AGGRESSIVE override for inline styles */
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root[style],
    .propertyTableAndItScroll tbody td:first-child svg[style] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .propertyTableAndItScroll tbody td:last-child {
        padding-top: 8px !important;
        gap: 6px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(2):before,
    .propertyTableAndItScroll tbody td:nth-child(3):before,
    .propertyTableAndItScroll tbody td:nth-child(4):before {
        font-size: 11px !important;
    }

    .boxScrollHEre {
        padding: 8px !important;
        overflow: visible !important;
    }

    .propertyAddBoxScroll {
        padding: 8px !important;
        overflow: visible !important;
    }

    .heading-five {
        font-size: 14px !important;
    }

    .plusNewPropertyToAddPPro button {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* 480 */
@media (max-width: 524px) {
    /* ============================================
       CASE 1: SEARCH BAR (Inside CardHeader)
       Target: .customerList_searchbar .customer_searchBar.searchBarOfTable
       ============================================ */
    .customerList_searchbar {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        align-items: stretch !important;
    }

    .customerList_head {
        margin-right: auto !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    /* Search bar container - make it full width */
    .customerList_searchbar .customer_searchBar.searchBarOfTable {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 auto !important;
    }

    /* FormGroup wrapper inside search bar */
    .customerList_searchbar .customer_searchBar.searchBarOfTable .MuiFormGroup-root {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
    }

    /* Paper component inside search bar */
    .customerList_searchbar .customer_searchBar.searchBarOfTable .MuiPaper-root {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        pointer-events: auto !important;
    }

    /* Grid when Paper uses component="Grid" */
    .customerList_searchbar .customer_searchBar.searchBarOfTable .MuiGrid-root.MuiPaper-root {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    /* InputBase inside search bar */
    .customerList_searchbar .customer_searchBar.searchBarOfTable .MuiInputBase-root {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        pointer-events: auto !important;
    }

    /* Input element inside search bar */
    .customerList_searchbar .customer_searchBar.searchBarOfTable .MuiInputBase-input,
    .customerList_searchbar .customer_searchBar.searchBarOfTable .input-search {
        width: 100% !important;
        min-width: 0 !important;
        pointer-events: auto !important;
        cursor: text !important;
    }

    /* Search icon button inside search bar */
    .customerList_searchbar .customer_searchBar.searchBarOfTable .MuiIconButton-root,
    .customerList_searchbar .customer_searchBar.searchBarOfTable button[aria-label="search"] {
        font-size: 10px !important;
        padding: 5px 8px !important;
        flex-shrink: 0 !important;
    }

    /* ============================================
       CASE 2: ADD CUSTOMER BUTTON (Outside CardHeader)
       Target: .customersAddCustomers .searchBarOfTable
       Keep original styling - DO NOT CHANGE
       ============================================ */
    .customersAddCustomers {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 4px !important;
    }

    /* Add Customer button container - keep on right in responsive */
    .customersAddCustomers .searchBarOfTable {
        /* Keep original max-width for button container */
        max-width: none !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    .mb-2.customersAddCustomers .searchBarOfTable {
        margin-left: auto !important;
    }
    .mb-2.customersAddCustomers {
        justify-content: space-between !important;
    }

    /* Add Customer button - smaller, stay on right (page header only) */
    .mb-2.customersAddCustomers .searchBarOfTable button,
    .mb-2.customersAddCustomers .searchBarOfTable .BlueButton {
        font-size: 12px !important;
        padding: 5px 12px !important;
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        flex: none !important;
    }
    .customersAddCustomers .searchBarOfTable button,
    .customersAddCustomers .searchBarOfTable .BlueButton {
        /* Card header / other buttons */
        font-size: inherit !important;
        padding: inherit !important;
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        flex: none !important;
    }

    /* ============================================
       OTHER STYLES
       ============================================ */
    .tableNameHead {
        font-size: 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .edit_customer_function {
        font-size: 20px !important;
    }

    .nevigate_before {
        width: 39px;
        height: 30px;
    }
}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {
    .property_tag {
        margin-right: auto;
    }

    .new_pro {
        margin-left: auto;
        width: 66% !important;

    }

    .billing_history {
        font-size: 20px;
    }

    .customer_navbar {
        flex-direction: column;
    }

    .customerOverviewNav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .customerOverviewNav .nav-item {
        flex: 0 0 auto !important;
    }

    .customerOverviewNav .nav-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .customerScrollHorizontal {
        width: 100% !important;
        min-width: 0 !important;
        min-width: initial !important;
        overflow-x: visible !important;
    }

    .btnBtnToDivProperty {
        padding: 3px 10px;
        font-size: 14px;
        margin-left: auto;
        justify-content: end;
        display: flex;
        white-space: nowrap;
        width: 100% !important;
    }

    .main-tab {
        gap: 2px !important;
        flex-wrap: nowrap !important;
    }

    .main-tab .nav-link {
        padding: 6px 8px !important;
        font-size: 12px !important;
        min-width: fit-content !important;
        white-space: nowrap !important;
    }

    .main-tab .nav-item {
        margin-bottom: 0 !important;
    }

    .updateSaveCustomerBtm {
        width: 100% !important;
    }

    .mailConfigurationBox {
        min-width: 353px !important;
    }

    .justify-contentRemove {
        justify-content: start !important;
    }

    /* Improve button spacing for very small screens */
    .customer-actions-container {
        gap: 4px !important;
    }

    .customer-right-actions {
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        gap: 3px !important;
    }

    /* Make Edit Customer button fit better */
    .customer-right-actions button {
        font-size: 11px !important;
        padding: 5px 8px !important;
        white-space: nowrap !important;
    }

    /* Hide text on small screens, keep only icon */
    .edit-customer-btn-mobile .text-blue-color {
        display: none !important;
    }

    .edit-customer-btn-mobile .MuiSvgIcon-root {
        margin: 0 !important;
    }

    /* Properties Section - Extra Small Mobile - PERFECT */
    .propertyTableAndItScroll tbody tr {
        padding: 10px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }

    .propertyTableAndItScroll tbody td {
        padding: 5px 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 11px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }

    .propertyTableAndItScroll tbody td:first-child {
        padding-top: 0 !important;
        padding-bottom: 5px !important;
        gap: 6px !important;
    }

    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root,
    .propertyTableAndItScroll tbody td:first-child svg {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }

    /* AGGRESSIVE override for inline styles */
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root[style*="margin"],
    .propertyTableAndItScroll tbody td:first-child svg[style*="margin"],
    .propertyTableAndItScroll tbody td:first-child .MuiSvgIcon-root[style],
    .propertyTableAndItScroll tbody td:first-child svg[style] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .propertyTableAndItScroll tbody td:last-child {
        padding-top: 6px !important;
        gap: 6px !important;
    }

    .propertyTableAndItScroll tbody td:nth-child(2):before,
    .propertyTableAndItScroll tbody td:nth-child(3):before,
    .propertyTableAndItScroll tbody td:nth-child(4):before {
        font-size: 10px !important;
    }

    .boxScrollHEre {
        padding: 6px !important;
        overflow: visible !important;
    }

    .propertyAddBoxScroll {
        padding: 6px !important;
        overflow: visible !important;
    }

    .heading-five {
        font-size: 13px !important;
    }
}

/* Responsive improvements for Overview cards + Customer Details submenu vertical on tablet/mobile */
@media (max-width: 991px) {
    .customerScrollHorizontal {
        min-width: 0 !important;
        min-width: initial !important;
        overflow-x: visible !important;
    }

    .customerOverviewNav {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .customerOverviewNav .nav-item {
        flex: 0 0 auto !important;
    }

    .customerOverviewNav .nav-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* Customer Details submenu: vertical list (same as mobile) */
    .main-tab {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
        gap: 0 !important;
        border-bottom: none !important;
    }

    .main-tab .nav-item {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }

    .main-tab .nav-item:last-child {
        border-bottom: none !important;
    }

    .main-tab .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 12px 10px !important;
        font-size: 14px !important;
        text-align: left !important;
        white-space: normal !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .main-tab .nav-link.active {
        background-color: #0f2b46 !important;
        color: #fff !important;
        border-bottom: 2px solid #0f2b46 !important;
    }

    .main-tab .nav-link:not(.active) {
        background: #fff !important;
        color: #0f2b46 !important;
    }
}

@media (max-width: 767px) {
    .customerScrollHorizontal {
        min-width: 0 !important;
        min-width: initial !important;
        overflow-x: visible !important;
    }

    .customerOverviewNav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: flex-start !important;
    }

    .customerOverviewNav .nav-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 575px) {
    .customerScrollHorizontal {
        min-width: 0 !important;
        min-width: initial !important;
        overflow-x: visible !important;
    }

    /* Ensure cards have proper spacing on mobile */
    .customerScrollHorizontal .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .customerScrollHorizontal .col,
    .customerScrollHorizontal [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        text-align: left !important;
    }

    /* Ensure consistent left alignment for all card content on mobile */
    .customerScrollHorizontal .col [class*="text-"],
    .customerScrollHorizontal [class*="col-"] [class*="text-"] {
        text-align: left !important;
    }

    /* Ensure Typography components are left-aligned on mobile */
    .customerScrollHorizontal .col .MuiTypography-root,
    .customerScrollHorizontal [class*="col-"] .MuiTypography-root {
        text-align: left !important;
    }
}

/* 320 */
@media (max-width: 374px) {
    .customerAdd_btn {
        padding: 10px !important;
        width: 49% !important;
    }

    .nevigate_before {
        width: 40px;
        height: 33px;
    }

    /* Button section for extra small screens */
    .customer-actions-container {
        gap: 2px !important;
        align-items: center !important;
    }

    .customer-right-actions {
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .customer-right-actions > div {
        flex-shrink: 1 !important;
    }

    .customer-right-actions button {
        font-size: 10px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
    }

    /* Back button on small screens - keep same size */
    .customer-actions-container > button {
        margin: 0 !important;
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 36px !important;
    }

    /* Hide Edit Customer text on smallest screens */
    .edit-customer-btn-mobile .text-blue-color {
        display: none !important;
    }

    .edit_customer_function {
        font-size: 26px;
    }

    .cancel_updateCustomer {
        width: 62% !important;
        height: 34px !important;
    }

    .add_new_property_card {
        width: 100% !important;
    }

    .contact_info_histort {
        width: 100% !important;
    }

    .mailSendConfiguration {
        flex-direction: column !important;
    }

    .mailSendYesComonent {
        margin-top: 10px !important;
        margin-left: 0px !important;
        width: 100% !important;
    }

    .updateSaveCustomerBtm {
        width: 100% !important;
        font-size: 15px !important;
    }

    .add_new_pxroperty_card {
        width: 100% !important;
    }

    .BlueAndWhiteBtmFlex {
        flex-direction: column !important;
    }

    .widthBtnForCustomer {
        width: 100px !important;
    }

    .nevigate_before.button.text-capitalize.bg-blue-color.text-white-color.backgroundBlurBtn.btn.btn-secondary {
        width: 20% !important;
    }

    .chargeModelBt {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .recurringPaymentBtn {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .configureReccuringBtnRight {
        margin-right: 0px !important;
        font-size: 14px !important;
    }

    .main-tab {
        gap: 2px !important;
    }

    .main-tab .nav-link {
        padding: 5px 6px !important;
        font-size: 11px !important;
        min-width: fit-content !important;
        white-space: nowrap !important;
    }

    .main-tab .nav-item {
        margin-bottom: 2px !important;
    }
}

/* 280 */
@media (max-width: 319px) {
    .customer_addCustomer_div {
        flex-direction: column;
    }

    .customer_para {
        margin-right: auto;
    }

    .customerAdd_btn {
        padding: 5px !important;
        width: 60% !important;
        margin-left: auto;
    }
}

.nav-link {
    background: transparent !important;
}

.nav-link.active {
    border-bottom: 2px solid red !important;
    color: blue !important;
}

/* Main tab navigation responsive styling */
.main-tab {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow-x: hidden !important;
}

.main-tab .nav-item {
    flex: 0 0 auto !important;
    min-width: fit-content !important;
}

.main-tab .nav-link {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    text-align: center !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Customer details back: same navy as header name (.text-blue-color / --bg-blue-color), not Jobber CTA #2563EB */
.btn.blue-button.blue-button--contractor.backgroundBlurBtn.customer-details-back-btn,
.btn.blue-button.blue-button--contractor.customer-details-back-btn {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  border-color: var(--border-blue-color) !important;
  color: #ffffff !important;
  --bs-btn-bg: var(--bg-blue-color) !important;
  --bs-btn-color: #ffffff !important;
  --bs-btn-border-color: var(--border-blue-color) !important;
  --bs-btn-hover-bg: var(--bg-blue-color) !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-active-bg: var(--bg-blue-color) !important;
}

.btn.blue-button.blue-button--contractor.customer-details-back-btn:hover:not(:disabled):not(.disabled),
.btn.blue-button.blue-button--contractor.customer-details-back-btn:focus,
.btn.blue-button.blue-button--contractor.customer-details-back-btn:focus-visible,
.btn.blue-button.blue-button--contractor.customer-details-back-btn:active,
.btn.blue-button.blue-button--contractor.customer-details-back-btn.active {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  border-color: var(--border-blue-color) !important;
  color: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn.blue-button.blue-button--donor.backgroundBlurBtn.customer-details-back-btn,
.btn.blue-button.blue-button--donor.customer-details-back-btn {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}

.btn.blue-button.blue-button--donor.customer-details-back-btn:hover:not(:disabled):not(.disabled),
.btn.blue-button.blue-button--donor.customer-details-back-btn:focus,
.btn.blue-button.blue-button--donor.customer-details-back-btn:active,
.btn.blue-button.blue-button--donor.customer-details-back-btn.active {
  background-color: var(--bg-donor-color) !important;
  border-color: var(--border-donor-color) !important;
  color: #ffffff !important;
}

/* ——— Customer Details: Summary tab (scoped; does not affect Property Details or other routes) ——— */
.customer-details-summary {
  --summary-card-radius: 12px;
  --summary-border: rgba(6, 49, 100, 0.12);
  --summary-shadow: 0 1px 2px rgba(6, 49, 100, 0.06), 0 6px 16px rgba(15, 23, 42, 0.06);
}

.customer-details-summary .customer-summary-detail-stack {
  gap: 20px !important;
}

.customer-details-summary .customer-summary-properties-card,
.customer-details-summary .customer-summary-overview-card {
  background: #fff !important;
  border-radius: var(--summary-card-radius) !important;
  border: 1px solid var(--summary-border) !important;
  box-shadow: var(--summary-shadow) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.customer-details-summary .customer-summary-card-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid #eceff3 !important;
  background: #fafbfc !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.customer-details-summary .customer-summary-card-title {
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
}

.customer-details-summary .customer-summary-card-body {
  padding: 8px 12px 16px !important;
}

.customer-details-summary .customer-summary-property-table thead .dataCollapsHere {
  background: #f4f6f9 !important;
}

.customer-details-summary .customer-summary-property-table thead .MuiTableCell-root,
.customer-details-summary .customer-summary-property-table thead th {
  background: #f4f6f9 !important;
  border-bottom: 1px solid #e2e6ec !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.customer-details-summary .customer-summary-property-table tbody .MuiTableRow-root {
  transition: background-color 0.15s ease !important;
}

.customer-details-summary .customer-summary-property-table tbody .MuiTableRow-root:hover {
  background-color: rgba(6, 49, 100, 0.04) !important;
}

.customer-details-summary .customer-summary-property-table tbody .MuiTableCell-root {
  border-bottom: 1px solid #eef1f5 !important;
  vertical-align: middle !important;
}

.customer-details-summary .customer-summary-property-table tbody tr:last-child .MuiTableCell-root {
  border-bottom: none !important;
}

.customer-details-summary .summary-new-property-btn {
  white-space: nowrap !important;
}

/* Overview card + segmented filter (replaces full-width orange bar on Summary only) */
.customer-details-summary .customer-details-summary-overview {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.customer-details-summary .customer-summary-overview-card-body {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.customer-details-summary .customer-summary-overview-nav {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(6, 49, 100, 0.08) !important;
}

.customer-details-summary .customer-summary-overview-nav .nav-item {
  margin: 0 !important;
}

.customer-details-summary .customer-summary-overview-nav .nav-link {
  color: rgba(6, 49, 100, 0.75) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  margin: 0 !important;
}

.customer-details-summary .customer-summary-overview-nav .nav-link:hover:not(.active) {
  color: var(--bg-blue-color) !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

.customer-details-summary .customer-summary-overview-nav .nav-link.active {
  color: #fff !important;
  background: var(--bg-blue-color) !important;
  box-shadow: var(--shadow-md) !important;
  border-bottom: none !important;
}

/* Overview list rows — calmer shell, clearer hover (logic unchanged) */
.customer-details-summary .customerScrollHorizontal {
  border-radius: 10px !important;
  border: 1px solid rgba(6, 49, 100, 0.14) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #fff !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.customer-details-summary .customerScrollHorizontal:hover {
  border-color: rgba(6, 49, 100, 0.28) !important;
  box-shadow: var(--shadow-lg) !important;
}

.customer-details-summary .customer-details-summary-overview .mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* Overview list rows: status pills under ID */
.customer-details-summary .customerScrollHorizontal .jobber-status-pill {
  margin-top: 6px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

@media (max-width: 575px) {
  .customer-details-summary .customer-summary-card-header {
    padding: 14px 16px !important;
  }

  .customer-details-summary .customer-summary-overview-nav .nav-link {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}
/* Compact Jobber-style menu: hug content, row icon+label (block layout was stacking Box above text) */
.all-dropdown-menu-compact.dropdown-menu {
  min-width: 0 !important;
}

.all-dropdown-item.dropdown-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.all-dropdown-item.dropdown-item:hover:not(:disabled) {
  background-color: rgba(6, 49, 100, 0.06);
}

.all-dropdown-item.dropdown-item:focus:not(:disabled) {
  background-color: rgba(6, 49, 100, 0.08);
}

.all-dropdown-item .MuiBox-root {
  flex-shrink: 0;
}

.all-dropdown-item .icones-dropdown {
  color: #0f2b46;
  flex-shrink: 0;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {
    .moreactionQuoteDetail{
        width: 100% !important;
    }
}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {
    .date-picker-grid {
        flex-direction: column !important;
    }

    .date-picker-grid-date {
        width: 100% !important;
    }

    .css-hag5rx-MuiFormControl-root-MuiTextField-root .MuiInputBase-root {
        width: 100% !important;
    }
}

/* 525 */
@media (max-width: 575px) {
    .general-ledger-table {
        overflow-x: auto !important;

    }

    .general-ledger-tableData {
        min-width: 500px !important;
        overflow-x: auto !important;
    }

    .preffered-format {
        flex-direction: column !important;
    }
    .ledger-button {
        width: 100% !important;
    }
}


/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

/* Charge Field Wrapper - Perfect Error Message Spacing */
.charge-field-wrapper {
  display: block;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
}

/* Remove ALL margin-bottom from inputs when error message follows */
.charge-field-wrapper .mb-3:has(+ .charge-error-text) {
  margin-bottom: 0 !important;
}

.charge-field-wrapper .MuiFormControl-root:has(+ .charge-error-text) {
  margin-bottom: 0 !important;
}

/* Override DollerInput FormControl inline style (has marginBottom: 13px) */
.charge-field-wrapper .MuiFormControl-root[style*="marginBottom"]:has(+ .charge-error-text) {
  margin-bottom: 0 !important;
}

.charge-field-wrapper .MuiFormControl-root[style*="marginBottom"] + .charge-error-text {
  margin-top: 0 !important;
}

.charge-field-wrapper .MuiTextField-root:has(+ .charge-error-text) {
  margin-bottom: 0 !important;
}

.charge-field-wrapper .dropdown:has(+ .charge-error-text) {
  margin-bottom: 0 !important;
}

/* Error message - ZERO top margin and padding for perfect alignment */
.charge-field-wrapper .charge-error-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 10px !important;
  display: block !important;
  line-height: 1.4 !important;
  position: relative;
  top: 0;
}

/* Fallback using adjacent sibling selector (better browser support) */
.charge-field-wrapper .mb-3 + .charge-error-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.charge-field-wrapper .MuiFormControl-root + .charge-error-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.charge-field-wrapper .MuiTextField-root + .charge-error-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.charge-field-wrapper .dropdown + .charge-error-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove any line-height spacing */
.charge-field-wrapper .charge-error-text {
  line-height: 1.4 !important;
}

/* Ensure inputs maintain spacing when NO error */
.charge-field-wrapper:not(:has(.charge-error-text)) {
  margin-bottom: 1rem;
}

/* Fix for ledger-button Export As dropdown - prevent active state white background */
.ledger-button.dropdown-toggle:active,
.ledger-button.dropdown-toggle:focus,
.ledger-button.dropdown-toggle.show,
.ledger-button.dropdown-toggle[aria-expanded="true"],
.btn.ledger-button:active,
.btn.ledger-button:focus,
.btn.ledger-button.show,
.btn-secondary.ledger-button:active,
.btn-secondary.ledger-button:focus,
.btn-secondary.ledger-button:not(:disabled):not(.disabled):active {
  box-shadow: none !important;
  outline: none !important;
}

.ledger-button.bg-blue-color:active,
.ledger-button.bg-blue-color:focus,
.ledger-button.bg-blue-color.show,
.btn.ledger-button.bg-blue-color:active,
.btn.ledger-button.bg-blue-color:focus,
.btn.ledger-button.bg-blue-color.show {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  border-color: var(--bg-blue-color) !important;
  color: white !important;
}

.ledger-button.bg-donor-color:active,
.ledger-button.bg-donor-color:focus,
.ledger-button.bg-donor-color.show,
.btn.ledger-button.bg-donor-color:active,
.btn.ledger-button.bg-donor-color:focus,
.btn.ledger-button.bg-donor-color.show {
  background-color: var(--bg-donor-color) !important;
  background: var(--bg-donor-color) !important;
  border-color: var(--bg-donor-color) !important;
  color: white !important;
}

/* General Ledger Description Column - Allow wrapping for long reason text */
/* Scoped to BillingHistory component only to avoid affecting other pages */

/* Make Description column cells wrap properly in General Ledger table */
.billing-history-description-cell {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* Ensure reason text wraps properly */
.billing-history-reason-text {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: inline-block !important;
  max-width: 100% !important;
  line-height: 1.5 !important;
}

/* Target Description column by position (4th column) in General Ledger table */
/* Only apply to tables within the BillingHistory/General Ledger context */
.contact_info_histort .MuiTableRow-root .MuiTableCell-root:nth-child(4) {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 500px !important;
  min-width: 200px !important;
  vertical-align: top !important;
}

/* More specific targeting for General Ledger table cells containing description */
.contact_info_histort .MuiTableCell-root:has(.billing-history-description-cell) {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 500px !important;
  min-width: 200px !important;
  vertical-align: top !important;
}

/* Override table-level nowrap for Description column in General Ledger */
.contact_info_histort .MuiTableRow-root .MuiTableCell-root:nth-child(4) * {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/*
 * General Ledger — Export As: white background, Blue Primary #2563EB label/icon.
 * reactstrap DropdownToggle defaults to .btn-secondary (grey); override BS5 vars + bg.
 */
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle,
.btn.dropdown-toggle.billing-ledger-export-toggle {
  --bs-btn-bg: #ffffff !important;
  --bs-btn-color: var(--navy-deep) !important;
  --bs-btn-border-color: transparent !important;
  --bs-btn-hover-bg: #ffffff !important;
  --bs-btn-hover-color: var(--navy-deep) !important;
  --bs-btn-hover-border-color: transparent !important;
  --bs-btn-active-bg: #ffffff !important;
  --bs-btn-active-color: var(--navy-deep) !important;
  --bs-btn-active-border-color: transparent !important;
  --bs-btn-focus-shadow-rgb: transparent !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--navy-deep) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  max-height: 40px !important;
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  transition: none !important;
  filter: none !important;
}

button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus-visible,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:active,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.active,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.show,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"],
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus-visible,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:active,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.active,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.show,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"],
.btn.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
.btn.dropdown-toggle.billing-ledger-export-toggle:focus,
.btn.dropdown-toggle.billing-ledger-export-toggle:focus-visible,
.btn.dropdown-toggle.billing-ledger-export-toggle:active,
.btn.dropdown-toggle.billing-ledger-export-toggle.active,
.btn.dropdown-toggle.billing-ledger-export-toggle.show,
.btn.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--navy-deep) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn.dropdown-toggle.billing-ledger-export-toggle.dropdown-toggle::after {
  border-top-color: var(--navy-deep) !important;
}

.btn.dropdown-toggle.billing-ledger-export-toggle:disabled,
.btn.dropdown-toggle.billing-ledger-export-toggle.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background-color: #ffffff !important;
  color: var(--navy-deep) !important;
}

/* Donor: white bg, donor accent text — no hover shift */
.billing-ledger-export-toggle--donor.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle,
.billing-ledger-export-toggle--donor.btn.dropdown-toggle.billing-ledger-export-toggle {
  --bs-btn-color: var(--border-donor-color) !important;
  --bs-btn-hover-color: var(--border-donor-color) !important;
  --bs-btn-active-color: var(--border-donor-color) !important;
  color: var(--border-donor-color) !important;
}

.billing-ledger-export-toggle--donor.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
.billing-ledger-export-toggle--donor.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus,
.billing-ledger-export-toggle--donor.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.show,
.billing-ledger-export-toggle--donor.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"],
.billing-ledger-export-toggle--donor.btn.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
.billing-ledger-export-toggle--donor.btn.dropdown-toggle.billing-ledger-export-toggle:focus,
.billing-ledger-export-toggle--donor.btn.dropdown-toggle.billing-ledger-export-toggle.show,
.billing-ledger-export-toggle--donor.btn.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--border-donor-color) !important;
}

.billing-ledger-export-toggle--donor.btn.dropdown-toggle.billing-ledger-export-toggle.dropdown-toggle::after {
  border-top-color: var(--border-donor-color) !important;
}

/* General Ledger toolbar: same 40px control height as JobberSearch */
.billing-history-ledger-toolbar .jobber-search-v2 {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
}

/* General Ledger: date filter + CTAs + search live in JobberListCard header — let toolbar use remaining width */
.jobber-list-card__toolbar:has(.billing-history-ledger-toolbar) {
  flex: 1 1 320px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Admin General Ledger: keep search + Make Payment + Add Charge + Export on one row (toolbar wraps only on xs) */
.billing-history-ledger-toolbar.jobber-ledger-toolbar {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

@media (min-width: 576px) {
  .billing-history-ledger-toolbar.jobber-ledger-toolbar .billing-ledger-export-toggle {
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 575px) {
  .jobber-list-card__toolbar:has(.billing-history-ledger-toolbar) {
    flex-wrap: wrap !important;
  }

  .billing-history-ledger-toolbar.jobber-ledger-toolbar {
    flex-wrap: wrap !important;
  }
}

/* BillingHistory — Make Payment modal footer: content-width buttons, right-aligned (not 50/50 full row) */
.make-payment-dialog-actions {
  box-sizing: border-box;
}
.make-payment-dialog-actions .cancelinvoiceGrid,
.make-payment-dialog-actions .saveEmail_savePay {
  width: auto !important;
  max-width: 100%;
}
.make-payment-dialog-actions button.footer-buttons.backgroundWhiteBtn,
.make-payment-dialog-actions button.blue-button.blue-button--contractor,
.make-payment-dialog-actions button.blue-button.blue-button--donor {
  width: auto !important;
  max-width: 100%;
}
/* NMI Collect.js inline ACH — hosts that are not §7 .payment-field (e.g. plan ACHInfo) */
.ach-collect-inline-host:not(.payment-field) {
  display: block;
  position: relative;
  line-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  box-sizing: border-box;
  overflow: hidden;
}
.ach-collect-inline-host:not(.payment-field) iframe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

/* Theme-aligned checkout/summary */
.summary-divider {
  height: 1px;
  border: 0;
  background: var(--border-blue-color);
  color: var(--border-blue-color);
  margin: 0.25rem 0;
}

.summary-muted {
  opacity: 0.6;
}

.summary-box {
  box-shadow: var(--shadow-md);
}

.abcd {
  display: flex;
  gap: 20px;
}

/* 1680 */
@media (max-width: 1700px) {
}

/* 1500 */
@media (max-width: 1680px) {
}

/* 1440 */
@media (max-width: 1449px) {
}

/* 1280 */
@media (max-width: 1439px) {
  .side h4 {
    font-size: 17px !important;
  }
  .mn {
    font-size: 10px !important;
  }
  .bill{
    font-size: 12px !important;
  }

}

/* 992 */
@media (max-width: 1279px) {
  .side h4 {
    font-size: 13px !important;
    flex-direction: column !important;
  }
  .test {
    margin-top: 20px !important;
    gap: 5px !important;
    display: flex !important;
    align-items: center !important;
  }
  .mn {
    font-size: 12px !important;
  }

  .bill h4 {
    font-size: 14px !important;
  }
  .first-section-payment {
    flex-direction: column !important;
  }
  .first-section-payment .form {
    width: 100% !important;
  }
  .cvv {
    flex-direction: column !important;
  }
  .date {
    flex-direction: column !important;
    width: 100% !important;
  }
  .abcd {
    width: 100% !important;
  }
}
/* 768 */
@media (max-width: 991px) {
  .side h4 {
    font-size: 20px !important;
  }
  .second-card {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* 576 */
@media (max-width: 767px) {

  .side h4 {
    font-size: 17px !important;
  }
  .bill h4 {
    font-size: 20px !important;
  }  
  .second-card {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .mx-5{
    margin-top: 20px;
  }
  .selectTypeBoxInputAcc{
    flex-direction: column !important;
  }
  .paymentInformationDateSelect{
    margin-bottom: 0px !important;
  }
}

/* 525 */
@media (max-width: 575px) {
 .side h4 {
    font-size: 25px !important ;
  }
  .second-card {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .bill h4 {
    font-size: 15px !important;
  }  
  .second-card {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .side h4 {
    font-size: 20px !important ;
  }
  .second-card {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .mn {
    font-size: 12px !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  .mn {
    font-size: 12px !important;
  }
  .summaryPlanNamePayment{
    flex-direction: column !important;
  }
}

/* 320 */
@media (max-width: 374px) {
  .mn {
    font-size: 10px !important;
  }
}

@media (max-width: 319px) {
  .space {
    align-items: center !important;
  }
  .first-section-payment {
    flex-direction: column !important;
  }
  .first-section-payment .form {
    width: 100% !important;
  }
  .cvv {
    flex-direction: column !important;
  }
  .date {
    flex-direction: column !important;
    width: 100% !important;
  }
  .abcd {
    width: 100% !important;
  }
  .test {
    flex-direction: column !important;
    margin-top: 30px !important;
    gap: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .word-break {
    word-break: break-word; 
  }
  .flex h4 {
    flex-direction: column !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .mn {
    font-size: 13px !important;
  }
  .side h4 {
    font-size: 17px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .bill h4 {
    font-size: 14px !important;
    flex-direction: column !important;
  }
  .bill {
    flex-direction: column !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .second-card {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .note h4 {
    font-size: 9px !important;
  }
  .mx-5{
    margin-top: 30px;
  }
  .selectTypeUnderDropdownSe{
    margin-bottom: 13px !important;
  }
}
/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}
@media (max-width: 599px) {
    .cardInfoPayment{
        font-size: 19px !important;
        margin-top: 30px !important;
    }
}
/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {
    .userLarName{
        margin-top: 15px !important;
    }
}

/* 320 */
@media (max-width: 374px) {
    .monthCvvCardInpu.MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2.monthCvvCardInput.css-mhc70k-MuiGrid-root{
        flex-direction: column;
    }
    .MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2.monthCvvCardInput.css-mhc70k-MuiGrid-root {
        flex-direction: column;
    }
    .monthCardDetailInput{
        width: 262px !important;
    }
    .canceluserAdd{
        width: 100% !important;
    }
}

/* 280 */
@media (max-width: 319px) {}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {
    .cardInformationDetail.cardInformationDetail.h5.MuiTypography-root.MuiTypography-h5.text-lg.cardInformationDetail.css-ag7rrr-MuiTypography-root.MuiTypography-root.MuiTypography-h5.text-lg.cardInformationDetail.css-ag7rrr-MuiTypography-root {
        font-size: 16px !important;
    }

    h5.MuiTypography-root.MuiTypography-h5.text-lg.cardInformationDetail.css-ag7rrr-MuiTypography-root {
        font-size: 16px;
    }
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}
/* Payment Cards Container - Redesigned */
.payment-cards-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  margin-top: 4px;
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.payment-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 480px) {
  .payment-card-row {
    align-items: flex-start;
    padding: 14px 0;
  }
  .payment-card-row .card-details-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(100% - 140px);
    min-width: 0;
  }
  .payment-card-row .card-delete-container {
    margin-left: auto;
  }
}

.payment-card-row:last-child {
  border-bottom: none;
}

.payment-card-row.selected {
  background: rgba(6, 49, 100, 0.04);
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
}

/* No card state - single row, icon + text left, Add Card button right */
.payment-card-no-card {
  margin-bottom: 16px;
}

.payment-card-no-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
}

.payment-card-no-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.payment-card-no-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #F0F0F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.payment-card-no-card-icon img,
.payment-card-no-card-icon svg {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.payment-card-no-card-text {
  color: #0f2b46 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.card-radio-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-card-radio {
  width: 20px;
  height: 20px;
  accent-color: #0f2b46;
  cursor: pointer;
}

.card-logo-container {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.card-logo-container img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.card-details-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
}

.card-number-text {
  font-size: 16px;
  font-weight: 500;
  color: #0f2b46;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.card-expiry-text {
  font-size: 14px;
  color: rgba(6, 49, 100, 0.7);
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.card-delete-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-card-btn {
  width: 36px;
  height: 36px;
  background: #FFEBE3;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.delete-card-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(0.9) contrast(1.2);
}

/* Add Card button - Respect isDonationMode condition */
/* When isDonationMode=false: Dark navy blue (#0f2b46) to match "Make Payment" button */
.add-card-btn.bg-blue-color,
.add-card-btn {
  background: #0f2b46 !important;
  background-color: #0f2b46 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  min-height: 44px !important;
}

/* When isDonationMode=true: Use donor color (#68b2cb) to match "Accept Donation" button */
.add-card-btn.bg-donor-color,
.add-card-btn.bg-donor-color.backgroundBlurBtn,
button.add-card-btn.bg-donor-color.backgroundBlurBtn {
  background: var(--bg-donor-color) !important;
  background-color: var(--bg-donor-color) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  min-height: 44px !important;
}

/* Hover states removed - no hover effect for add card buttons */

/* Active/focused states - respect isDonationMode */
.add-card-btn.bg-blue-color:active,
.add-card-btn.bg-blue-color.active,
.add-card-btn.bg-blue-color:focus,
.add-card-btn.bg-blue-color:focus-visible {
  background: #0f2b46 !important;
  background-color: #0f2b46 !important;
  border-color: #0f2b46 !important;
}

.add-card-btn.bg-donor-color:active,
.add-card-btn.bg-donor-color.active,
.add-card-btn.bg-donor-color:focus,
.add-card-btn.bg-donor-color:focus-visible,
.add-card-btn.bg-donor-color.backgroundBlurBtn:active,
.add-card-btn.bg-donor-color.backgroundBlurBtn.active,
.add-card-btn.bg-donor-color.backgroundBlurBtn:focus,
.add-card-btn.bg-donor-color.backgroundBlurBtn:focus-visible,
button.add-card-btn.bg-donor-color.backgroundBlurBtn:active,
button.add-card-btn.bg-donor-color.backgroundBlurBtn.active,
button.add-card-btn.bg-donor-color.backgroundBlurBtn:focus,
button.add-card-btn.bg-donor-color.backgroundBlurBtn:focus-visible {
  background: var(--bg-donor-color) !important;
  background-color: var(--bg-donor-color) !important;
  border-color: var(--bg-donor-color) !important;
}

.add-card-btn svg {
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
}

.add-card-btn svg path {
  stroke: white !important;
  stroke-width: 2 !important;
}

/* "+ Add Card" button - Respect isDonationMode condition */
/* When isDonationMode=false: Dark navy blue (#0f2b46) to match "Make Payment" button */
.add-card-btn-light.bg-blue-color,
.add-card-btn-light {
  background: #0f2b46 !important;
  background-color: #0f2b46 !important;
  border: none !important;
  color: white !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* When isDonationMode=true: Use donor color (#68b2cb) to match "Accept Donation" button */
.add-card-btn-light.bg-donor-color,
.add-card-btn-light.bg-donor-color.backgroundBlurBtn,
button.add-card-btn-light.bg-donor-color.backgroundBlurBtn {
  background: var(--bg-donor-color) !important;
  background-color: var(--bg-donor-color) !important;
  border: none !important;
  color: white !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.add-card-btn-single-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* Hover states removed - no hover effect for add card buttons */

/* Active/focused states - respect isDonationMode */
.add-card-btn-light.bg-blue-color:active,
.add-card-btn-light.bg-blue-color.active,
.add-card-btn-light.bg-blue-color:focus,
.add-card-btn-light.bg-blue-color:focus-visible {
  background: #0f2b46 !important;
  background-color: #0f2b46 !important;
  border-color: #0f2b46 !important;
}

.add-card-btn-light.bg-donor-color:active,
.add-card-btn-light.bg-donor-color.active,
.add-card-btn-light.bg-donor-color:focus,
.add-card-btn-light.bg-donor-color:focus-visible,
.add-card-btn-light.bg-donor-color.backgroundBlurBtn:active,
.add-card-btn-light.bg-donor-color.backgroundBlurBtn.active,
.add-card-btn-light.bg-donor-color.backgroundBlurBtn:focus,
.add-card-btn-light.bg-donor-color.backgroundBlurBtn:focus-visible,
button.add-card-btn-light.bg-donor-color.backgroundBlurBtn:active,
button.add-card-btn-light.bg-donor-color.backgroundBlurBtn.active,
button.add-card-btn-light.bg-donor-color.backgroundBlurBtn:focus,
button.add-card-btn-light.bg-donor-color.backgroundBlurBtn:focus-visible {
  background: var(--bg-donor-color) !important;
  background-color: var(--bg-donor-color) !important;
  border-color: var(--bg-donor-color) !important;
}

.add-card-btn-light .add-card-btn-label {
  color: white !important;
}

.payment-card-no-card-row .add-card-btn-light {
  flex-shrink: 0 !important;
}

.add-card-btn-light svg path {
  stroke: white !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {
    .cardWhichTypeToSelect{
        margin-top: 29px !important;
        height: 130px !important;
    }
    .invoiceNumberStart{
        margin-right: auto !important;
    }
    .invoiceChangeBtn{
        margin-right: auto !important;
    }
    .invoiceSubject_part{
        padding: 0px !important;
    }
}

/* 525 */
@media (max-width: 575px) {
    .AchBankAccountAndAddBtnToAdd{
        flex-direction: column !important;
    }
    .AddNewAccountToAddCardSave{
        width: 100% !important;
    }
}

/* 480 */
@media (max-width: 524px) {
    .AddCardButtonBoxPayment{
        float: inline-start !important;
        margin-top: 20px !important;
    }
}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {
    .cardWhichTypeToSelect{
        margin-top: 60px  !important;
    }
    .creditCardBoxSelectDate{
        margin-top: 60px !important;
    }
}

/* ACH Payment Component Styles - Simple and Sober */
.account-item {
  transition: border-color 0.2s ease;
}

.account-item:hover {
  border-color: #2563eb !important;
}

/* Simple radio button styling */
.account-item input[type="radio"] {
  cursor: pointer;
}

/* Simple delete button hover */
.account-item .MuiIconButton-root:hover {
  background: #ffebee !important;
  border-color: var(--red) !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .account-item {
    margin-bottom: 16px;
  }
  
  .account-item .d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .account-item .MuiIconButton-root {
    align-self: flex-end !important;
    margin-top: 12px !important;
  }
  
  .account-item .card-details {
    width: 100% !important;
    margin-top: 12px !important;
  }
  
  .account-item .card-icon {
    margin-bottom: 12px !important;
    margin-right: 0 !important;
  }
  
  .account-item .radio-container {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .account-item {
    padding: 16px !important;
  }
  
  .account-item .card-number {
    font-size: 14px !important;
  }
  
  .account-item .card-info {
    font-size: 12px !important;
  }
  
  .account-item .delete-button {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Container responsiveness */
.payment-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .payment-container {
    padding: 16px !important;
  }
  
  .payment-header {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .payment-header h6 {
    font-size: 16px !important;
  }
  
  .payment-header p {
    font-size: 13px !important;
  }
}

/* Button responsiveness */
@media (max-width: 768px) {
  .add-button-container {
    justify-content: center !important;
    margin-top: 20px !important;
  }
  
  .add-button {
    width: 100% !important;
    max-width: 200px !important;
  }
}

/* Empty state responsiveness */
@media (max-width: 768px) {
  .empty-state {
    padding: 20px 16px !important;
  }
  
  .empty-state-icon {
    width: 50px !important;
    height: 50px !important;
    padding: 12px !important;
  }
  
  .empty-state h6 {
    font-size: 15px !important;
  }
  
  .empty-state p {
    font-size: 13px !important;
  }

  .payment-cards-container {
    padding: 12px;
    margin-bottom: 12px;
  }

  .payment-card-row {
    gap: 8px;
    padding: 10px 0;
    flex-wrap: wrap;
  }

  .payment-card-row.selected {
    padding-left: 8px;
    padding-right: 8px;
  }

  .card-radio-container {
    flex-shrink: 0;
  }

  .payment-card-radio {
    width: 18px;
    height: 18px;
  }

  .card-logo-container {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .card-details-container {
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
  }

  .card-number-text {
    font-size: 14px;
  }

  .card-expiry-text {
    font-size: 12px;
  }

  .delete-card-btn {
    width: 32px;
    height: 32px;
  }

  .delete-card-btn img {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .payment-cards-container {
    padding: 10px;
    border-radius: 8px;
  }

  .payment-card-row {
    gap: 6px;
    padding: 8px 0;
  }

  .card-logo-container {
    width: 36px;
    height: 36px;
  }

  .card-number-text {
    font-size: 13px;
  }

  .card-expiry-text {
    font-size: 11px;
  }

  .payment-card-radio {
    width: 16px;
    height: 16px;
  }

  .delete-card-btn {
    width: 28px;
    height: 28px;
  }

  .delete-card-btn img {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 375px) {
  .payment-cards-container {
    padding: 8px;
  }

  .payment-card-row {
    gap: 4px;
    padding: 6px 0;
  }

  .card-logo-container {
    width: 32px;
    height: 32px;
  }

  .card-number-text {
    font-size: 12px;
  }

  .card-expiry-text {
    font-size: 10px;
  }
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {
    .modelWidthFive{
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .flexColumnWidth{
        flex-direction: column !important;
        gap: 0px !important;
    }
    .recurrinPaymentAmmounts{
        flex-direction: column !important;
    }
    .amountTotalMOedel{
        padding-left: 0 !important;
    }
    .bottomLeaveup{
        margin-bottom: 0 !important;
    }
    .amountMargin{
        margin-top: 0px !important;
    }
    .paymnet-width{
        width: 100% !important;
    }
    .frequrncy-monthWeek{
        flex-direction:  column !important;
    }
    .remove-left{
        margin-left: 0px !important;
    }
    .padding-leftremove{
        padding-left: 0px !important;
    }
    .textalign-start{
        text-align: start !important;
    }
    .width-with-reponsive{
        width: 100% !important;
    }
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {
    .foterAmountBtm{
        flex-direction: column !important;
        margin-right: auto !important;
        align-items: start !important;
    }
}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
    .BtnGropupFooter{
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
    }
}

/* 280 */
@media (max-width: 319px) {}

.css-5ona3t-MuiFormControl-root-MuiTextField-root .MuiInputBase-input{
    text-align: left !important;
}
.custom-tooltip {
  position: relative;
}

.custom-tooltip:hover::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  top: 100%;
  background: white;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  max-width: 200px;
  width: 200px;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
  transform: translateX(-50%) translateY(5px);
  max-height: 150px;
  overflow-y: auto;
  animation: tooltipFadeIn 0.2s ease-in-out;
}

/* Ensure tooltip stays within viewport */
.custom-tooltip:hover::after {
  max-height: 150px;
  overflow-y: auto;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 200px;
}

/* Handle tooltip position when near table edges */
.custom-tooltip:hover::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Add fade in animation */
.custom-tooltip:hover::after {
  animation: tooltipFadeIn 0.2s ease-in-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(5px);
  }
} 
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.truncated-text-tooltip {
  animation: tooltipFadeIn 0.3s ease-in-out;
}

.MuiTooltip-popper {
  z-index: 9999 !important;
}

.tooltip-scrollable-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  pointer-events: auto;
}

.tooltip-scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.tooltip-scrollable-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.tooltip-scrollable-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.tooltip-scrollable-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.MuiTooltip-tooltip {
  pointer-events: auto !important;
}
  
.MuiTooltip-popper[data-popper-placement*="top"] .MuiTooltip-tooltip {
  margin-bottom: 8px;
}

.MuiTooltip-popper[data-popper-placement*="bottom"] .MuiTooltip-tooltip {
  margin-top: 8px;
} 
.custom-tooltip {
  background-color: #0f2b46 !important;
  color: #fff !important;
  box-shadow: var(--shadow-md) !important;
  padding: 10px !important;
  font-size: 14px !important;
  max-width: 300px !important;
  word-break: break-word !important;
  border-radius: 4px !important;
}

.custom-tooltip::after {
  display: none !important;
}

.custom-arrow {
  display: none !important;
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  display: inline-block;
} 
.table-col {
  border: 1px solid rgba(42, 79, 97, 30%);
  border-top-left-radius: 8px;
}

.table-sec {
  border: 1px solid rgba(42, 79, 97, 30%);
  border-left: none;
}

.sec-section {
  border: 1px solid rgba(42, 79, 97, 30%);
  padding: 6px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top: none;
}

.client .form-control {
  border: none !important;
}

.client .form-control:focus {
  box-shadow: none !important;
}

.client .form-select {
  border: none !important;
}

.table-sec input::placeholder {
  color: rgba(42, 79, 97, 70%);
}

.form-select:focus {
  box-shadow: none !important;
}

.phone-input-container {
  display: flex;
  align-items: center;
  border: 1px solid rgba(42, 79, 97, 30%);
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  width: 100%;
}

.country-dropdown {
  border: none;
  background-color: transparent;
  padding: 10px;
  font-size: 16px;
  outline: none;
  cursor: pointer;
}

.phone-input {
  border: none;
  padding: 10px;
  font-size: 16px;
  outline: none;
  flex: 1 1;
}

.phone-button {
  padding: 4px 12px !important;
  background-color: rgba(42, 79, 97);
  font-size: 14px;
}

.phone-button:hover {
  background-color: #fff !important;
  color: rgba(42, 79, 97);
}

.notification-drop {
  border-bottom: 1px solid rgba(42, 79, 97, 80%) !important;
  border-radius: 0;
}

.footer-buttons {
  background: transparent;
  color: #0f2b46;
}

.footer-buttons:hover {
  background: transparent;
  color: #0f2b46;
}

.save-client-button {
  color: #fff;
}

.save-client-button:hover {
  color: #fff;
  background-color: #0f2b46;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
  width: 100%;
  text-align: center;
  border: none;
}

.client .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  border-color: #fff !important;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
}

.client .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background: none !important;
  border: none !important;
  font-weight: 600;
}

.nav-link {
  color: rgba(255, 255, 255, 60%);
}

.detail-card {
  display: flex !important;
}

.note-container {
  width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
}

.note-details {
  width: 100%;
  height: 100px;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.file-upload {
  border: 1px dashed #0f2b46;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  color: #718096;
  font-size: 14px;
  cursor: pointer;
}

.file-upload:hover {
  border-color: #0f2b46;
}

.file-upload input {
  display: none;
}

.file-upload label {
  cursor: pointer;
  color: #0f2b46;
}

.file-upload label span {
  cursor: pointer;
  color: #0f2b46;
  border: 0.5px solid #0f2b46;
  padding: 4px 10px 4px 10px;
  font-weight: 600;
  border-radius: 5px;
}

.icones-dropdown {
  margin-right: 8px;
}

.moreactions.btn:hover {
  color: #0f2b46;
}

.moreactionscd {
  z-index: 9999999 !important;
}

.tabledata-contactinfo {
  padding-left: 10px !important;
}

.nogoback:hover {
  color: #0f2b46;
}

.quote-table {
  color: #0f2b46;
}

.bolt {
  font-weight: 800;
}

.text-bolt {
  font-weight: 500;
}


/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {
  .detail-card {
    flex-direction: column;
  }
  .send-mail{
    flex-direction: column !important;
  }
  .third-input-mail{
    padding-right: 0 !important;
  }
  .send-mail-input{
    width: 100% !important;
  }

  .first-card {
    width: 100%;
  }

  .shuvan {
    font-size: 23px;
  }
}

/* 768 */
@media (max-width: 991px) {
  /* Ensure Edit Customer header button maintains size on tablet */
  .new-customer-button {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .new-customer-button button {
    flex-shrink: 0 !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }
}

/* 576 */
@media (max-width: 767px) {
  .client-main {
    flex-direction: column;
  }

  .Property-details {
    margin-top: 35px !important;
  }

  .createBotton {
    margin-bottom: 9px !important;
  }

  .m-b {
    margin-bottom: 9px !important;
  }

  .d-select {
    margin-bottom: 10px !important;
  }

  .city_state_bottom {
    margin-bottom: 20px !important;
  }

  .city-state {
    margin-bottom: 24px !important;
  }
  .customerEditImgToEdit
  {
    margin-left: 0px !important;
  }
}

/* 525 */
@media (max-width: 575px) {
  .button-responsive {
    flex-direction: column;
  }

  .sec-button-section {
    margin-top: 10px;
  }

}

/* 480 */
@media (max-width: 524px) {
  .username {
    font-size: 25px !important;
  }

  .Property-details {
    padding-left: 0 !important;
    padding-right: 19px !important;
  }

  .moreactions {
    font-size: 12px !important;
  }

  .d-select {
    flex-direction: column !important;
  }

  .city_state_bottom {
    width: 100% !important;
  }

  .cbtn {
    margin-bottom: 30px !important;
  }

  /* Fix Edit Customer header responsive issues */
  .new-customer-button {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .new-customer-button button {
    flex-shrink: 0 !important;
    min-width: 50px !important;
    max-width: 50px !important;
    width: 50px !important;
  }

  .edit_customer_function {
    font-size: 20px !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .address {
    overflow: auto;
  }

  .username-action {
    display: block !important;
  }

  .moreactions {
    margin-top: 10px !important;
  }

  .text-property {
    font-size: 19px !important;
  }

  .m-b {
    margin-bottom: 9px !important;
  }

  .usrName {
    margin-bottom: 10px !important;
  }

  .company-detail-btn {
    width: 40% !important;
    height: 47px !important;
    padding: 0px 10px !important;
  }

}

/* 375 */
@media (max-width: 424px) {
  .custe {
    font-size: 19px;
    margin-top: 9px;
  }

  .customer {
    margin-left: 20px !important;
  }

  .text-property {
    font-size: 17px !important;
  }

  .m-b {
    margin-bottom: 9px !important;
  }
  .text-property {
    flex-direction: column !important;
  }

  .city-state {
    flex-direction: column;
  }

  .city-state .col-6 {
    width: 100% !important;
  }

  .citybtm {
    margin-bottom: 24px !important;
  }

  .quote-card {
    font-size: 14px;
  }
}

/* 320 */
@media (max-width: 374px) {
  .sec-button-section {
    flex-direction: column;
  }

  .prpertydetailscontent {
    display: flex !important;
    justify-content: center !important;

    .custe {
      font-size: 19px;
      margin-top: 9px;
    }

    .customer {
      margin-left: 20px !important;
    }
  }

  /* Ensure Edit Customer header button doesn't stretch on small screens */
  .new-customer-button {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .new-customer-button button {
    flex-shrink: 0 !important;
    min-width: 50px !important;
    max-width: 50px !important;
    width: 50px !important;
  }
  .detail-card {
    align-items: center;
  }

  .justify-content-start {
    justify-content: center;
  }

  .text-property {
    font-size: 14px !important;
  }

  .m-b {
    margin-bottom: 9px !important;
  }

  .cancelButton {
    height: 37px !important;
  }

  .mb-left {
    margin-left: 16px !important;
    margin-top: 10px !important;
  }

  .createBotton {
    height: 37px !important;
  }

  .quote-table {
    margin: -19px !important;
  }

  .quote-card {
    font-size: 10px;
  }

  .quote-table td {
    padding: 2px;
  }
}

/* 280 */
@media (max-width: 319px) {
  .custe {
    font-size: 19px;
    margin-top: 9px;
  }

  .customer {
    margin-left: 20px !important;

  }

  .icon-section {
    height: 40px !important;
    width: 48px !important;
  }

  .lastnametxt {
  }

  .lastnamemb {
    margin-bottom: 40px !important;
  }

  .phonei {
    margin-bottom: 2.5rem !important;
  }

  .card-title {
    font-size: 16px !important;
  }

  .text-property {
    font-size: 14px !important;
  }

  .m-b {
    margin-bottom: 9px !important;
  }

  .cancelButton {
    margin-bottom: 9px !important;
    height: 35px !important;
  }

  .mb-left {
    margin-left: 16px !important;
  }

  .createBotton {
    height: 35px !important;
  }

  .cbtn {
    margin-bottom: 30px !important;
  }

  .citybtm {
    margin-bottom: 30px !important;
  }

  .citybtm2 {
    margin-bottom: 10px !important;
  }

  .ctntop {
    margin-top: -22px !important;
  }

  .quote-card {
    font-size: 12px;
  }

  .quote-table td {
    padding: 2px;
  }


}

label[data-shrink="false"]+.MuiInputBase-formControl .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
  border: 1px solid #0f2b46;
  border-radius: 5px;
}

.client .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-fullWidth.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd.MuiAutocomplete-inputRoot.css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root {
  height: 50px;
  border-radius: 10px;
}

.client label#\:r9\:-label {
  margin-top: 5px !important;
  font-size: 16px !important;
}

.client .css-1pysi21-MuiFormLabel-root-MuiInputLabel-root {
  color: black !important;
}

.client label#\:rc\:-label {
  margin-top: 5px !important;
}


.MuiInputBase-formControl .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
  border-radius: 10px !important;
  border-color: red;
}

.css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root {
  border-radius: 9px !important;
}

.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
  padding: 13.5px 12px !important;
}

.client .nav-link:focus,
.nav-link:hover {
  color: #fff !important;
}

.client-details .table> :not(caption)>*>* {
  padding: 0.5rem 0.5rem; 
}

.quote-table {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: var(--shadow-md);
  border-radius: 8px;
  border: 0.5px solid rgba(6, 49, 100, 0.8);
}

.quote-card {
  width: 100%;
  border-collapse: collapse;
  background-color: #f9f9f9;
  padding: 10px;
}

.quote-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.quote-row td {
  padding: 10px;
}

.quote-number,
.quote-details,
.quote,
.quote-address {
  font-size: 12px;
}

.quote-number {
  font-weight: bold;
  font-size: 14px;
}

.awaiting-response {
  background-color: #f1c40f;
  padding: 2px 8px;
  border-radius: 10px;
  color: white;
  font-size: 12px;
}

.quote-details p,
.quote p,
.quote-address p {
  margin: 2px 0;
}

.d-flex {
  display: flex;
}

.d-flex p {
  margin-right: 5px;
}




.clientt .css-1ky57x-MuiFormControl-root-MuiTextField-root .MuiOutlinedInput-root {
  border-radius: 10px !important;
  height: 70%;
  padding-top: 40px;
}


.table>:not(caption)>*>* {
  color: #0f2b46;
}

.blur-background {
  filter: blur(5px) !important;
  pointer-events: none;
}

.css-ka7ti6-MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-input {
  padding: 1.5px 4px 7.5px 5px !important;
}

.email_quote_name.text-donor-color {
  font-size: 18px !important;
  font-weight: bold !important;
}
/* Add Quote ? "Save And ..." split dropdown (Navy Deep ? matches sidebar) */
.add-quote-save-and-dropdown.dropdown-toggle,
.add-quote-save-and-dropdown.btn {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
}
.add-quote-save-and-dropdown.dropdown-toggle:hover:not(:disabled):not(.disabled),
.add-quote-save-and-dropdown.btn:hover:not(:disabled):not(.disabled),
.add-quote-save-and-dropdown.dropdown-toggle:focus,
.add-quote-save-and-dropdown.btn:focus,
.add-quote-save-and-dropdown.dropdown-toggle:active,
.add-quote-save-and-dropdown.btn:active {
  background-color: var(--navy-mid) !important;
  border-color: var(--navy-mid) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.add-quote-save-and-dropdown--donor.dropdown-toggle,
.add-quote-save-and-dropdown--donor.btn {
  background-color: #29b3e2 !important;
  border-color: #29b3e2 !important;
  color: #ffffff !important;
}
.add-quote-save-and-dropdown--donor.dropdown-toggle:hover:not(:disabled):not(.disabled),
.add-quote-save-and-dropdown--donor.btn:hover:not(:disabled):not(.disabled),
.add-quote-save-and-dropdown--donor.dropdown-toggle:focus,
.add-quote-save-and-dropdown--donor.btn:focus,
.add-quote-save-and-dropdown--donor.dropdown-toggle:active,
.add-quote-save-and-dropdown--donor.btn:active {
  background-color: #29b3e2 !important;
  border-color: #29b3e2 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 1680 */
@media (max-width: 1700px) {
}

/* 1500 */
@media (max-width: 1680px) {
}

/* 1440 */
@media (max-width: 1449px) {
}

/* 1280 - Desktop view remains unchanged, only minor adjustments */
@media (max-width: 1439px) {
  /* Keep desktop view as is - no major changes */
}

/* 992 - Tablet and below - Start responsive changes */
@media (max-width: 1279px) {
  .Quote-details {
    padding: 15px !important;
  }

  .buttonGroupthree {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  .quoteActionBtn {
    flex: 1 1 auto;
    min-width: 150px;
  }

  .address_quoteDetail {
    flex-direction: column !important;
  }

  .quoteDetailsRightCol {
    padding-left: 0 !important;
    margin-top: 20px !important;
    width: 100% !important;
  }

  .property_address {
    padding-right: 0 !important;
  }
}

/* 768 - Tablet and below - Responsive changes start here */
@media (max-width: 991px) {
  .Quote-details {
    padding: 10px !important;
  }

  /* Button group responsive */
  .quoteButtonGroupDesktop {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .quoteBackButtonWrapper {
    width: 100%;
    margin-bottom: 10px;
  }

  .quoteActionButtonsDesktop {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  .quoteActionBtn {
    flex: 1 1 auto;
    min-width: 140px;
  }

  /* Header section responsive */
  .quoteHeaderDesktop {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }

  .quoteHeaderLeft {
    width: 100%;
  }

  .responseBoxDesktop {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    margin: 0 !important;
  }

  .quoteNumberInQuote {
    margin: 0 !important;
    width: 100%;
    text-align: left;
    margin-top: 8px !important;
  }

  /* Address section responsive */
  .addressQuoteDesktop {
    flex-direction: column !important;
  }

  .quoteDetailsRightCol {
    padding-left: 0 !important;
    margin-top: 20px !important;
    width: 100% !important;
  }

  .property_address {
    padding-right: 0 !important;
    width: 100% !important;
  }

  .quoteTimelineWrapper {
    padding-left: 20px !important;
  }

  .quoteTimelineLine {
    left: 11px !important;
  }
}

/* 576 */
@media (max-width: 767px) {
  .Quote-details {
    padding: 10px !important;
  }

  .cost_input.MuiFormControl-root.MuiTextField-root.mb-0.border-blue-color.totalNumber.css-odsttg-MuiFormControl-root-MuiTextField-root {
    width: 100% !important;
  }

  .internotesAttachments {
    margin-bottom: 20px !important;
  }

  .price_padding_re {
    padding: 0px !important;
  }
  .quoteJobTitle_number {
    margin-bottom: 0px !important;
  }

  .QUoteCHangeIcon {
    margin-left: 0px !important;
  }

  .address_quoteDetail .col-md-6:last-child {
    padding-left: 0 !important;
    margin-top: 20px !important;
  }

  .createDateQUoteDetail {
    padding-top: 0 !important;
  }
  .quoteCustomerSelect {
    font-size: 20px !important;
  }

  .products-colum {
    flex-direction: column !important;
  }

  .products-colum .contc {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .products-colum .col-8,
  .products-colum .col-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Button groups stack on mobile */
  .quoteButtonGroupDesktop {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .quoteActionButtonsDesktop {
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .quoteActionBtn {
    width: 100% !important;
    min-width: 100% !important;
  }

  .quoteActionIcon {
    margin-right: 6px !important;
  }

  .quoteResponse_quoteNumber {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  .quotePersonName {
    font-size: 20px !important;
    word-break: break-word;
  }

  .quoteTitleText {
    font-size: 13px !important;
  }

  .responseBoxQuote {
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    width: fit-content !important;
    font-size: 12px !important;
    padding: 5px 15px 5px !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  .quoteNumberInQuote {
    font-size: 13px !important;
    margin-top: 8px;
    width: 100%;
    text-align: left !important;
  }

  /* Address section responsive */
  .addressQuoteDesktop {
    flex-direction: column !important;
  }

  .quoteDetailsRightCol {
    padding-left: 0 !important;
    margin-top: 20px !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .createDateQUoteDetail {
    text-align: left !important;
    margin-top: 10px !important;
  }

  .property_address {
    padding-right: 0 !important;
  }

  .quoteCustomerMessageBox {
    padding: 12px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  .quoteCustomerMessage {
    font-size: 13px !important;
  }

  .quoteCustomerDisclaimer {
    font-size: 13px !important;
    width: 100% !important;
  }

  /* Address section on mobile */
  .addressQuoteDesktop {
    flex-direction: column !important;
  }

  .quoteTimelineWrapper {
    padding-left: 15px !important;
  }

  .quotePDFDialog .MuiDialog-paper {
    margin: 5px !important;
    max-height: calc(100% - 10px) !important;
  }

  .quotePDFIframe {
    min-height: 300px !important;
    height: auto !important;
  }
}

/* 525 */
@media (max-width: 575px) {
  .Quote-details {
    padding: 8px !important;
  }

  .quote_cancel_btn {
    width: 50% !important;
  }

  .internotesAttachments {
    margin-bottom: 20px !important;
  }

  .quoteProperty_detail {
    flex-direction: column !important;
  }

  .addlineItemProduct {
    margin-top: 10px !important;
  }

  .productTotalSub {
    margin-top: 17px !important;
  }
  .quoteUseName{
    font-size: 18px !important  ;
  }

  .quoteButtonGroupDesktop {
    gap: 8px !important;
  }

  .quoteActionButtonsDesktop {
    gap: 8px !important;
  }

  .quoteActionBtn {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  .quotePersonName {
    font-size: 18px !important;
  }

  .quoteTitleText {
    font-size: 12px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    font-size: 11px !important;
    padding: 4px 12px 4px !important;
  }

  .quoteNumberInQuote {
    font-size: 12px !important;
  }

  .quoteCopyLink {
    width: 16px !important;
    height: 16px !important;
  }

  .quoteCustomerMessageBox {
    padding: 10px !important;
  }

  .quoteCustomerMessage {
    font-size: 12px !important;
  }

  .quoteCustomerDisclaimer {
    font-size: 12px !important;
  }

  .quoteTimelineWrapper {
    padding-left: 12px !important;
  }

  .quoteTimelineLine {
    left: 8px !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .Quote-details {
    padding: 5px !important;
  }

  .moreactionQUoteBtnWidth {
    width: 100% !important;
  }

  .quoteButtonGroupDesktop {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .quoteActionButtonsDesktop {
    gap: 8px !important;
  }

  .quoteActionBtn {
    width: 100% !important;
    font-size: 12px !important;
  }

  .quotePersonName {
    font-size: 16px !important;
  }

  .quoteTitleText {
    font-size: 11px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    font-size: 10px !important;
    padding: 4px 10px 4px !important;
  }

  .quoteNumberInQuote {
    font-size: 11px !important;
  }

  .quoteCopyLink {
    width: 14px !important;
    height: 14px !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .Quote-details {
    padding: 5px !important;
  }

  .quoteButtonGroupDesktop {
    gap: 6px !important;
  }

  .quoteActionButtonsDesktop {
    gap: 6px !important;
  }

  .quoteActionBtn {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .quoteActionIcon {
    margin-right: 4px !important;
    font-size: 16px !important;
  }

  .quotePersonName {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .quoteTitleText {
    font-size: 11px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    font-size: 10px !important;
    padding: 3px 8px 3px !important;
  }

  .quoteNumberInQuote {
    font-size: 10px !important;
  }

  .quoteCopyLink {
    width: 12px !important;
    height: 12px !important;
  }

  .quoteCustomerMessageBox {
    padding: 8px !important;
  }

  .quoteCustomerMessage {
    font-size: 11px !important;
  }

  .quoteCustomerDisclaimer {
    font-size: 11px !important;
  }

  .quoteTimelineWrapper {
    padding-left: 10px !important;
  }

  .quoteTimelineLine {
    left: 6px !important;
  }

  .quotePDFIframe {
    min-height: 250px !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  .Quote-details {
    padding: 5px !important;
  }

  .quote_cancel_btn {
    width: 100% !important;
  }

  .quoteUpdateCancelBtnSave {
    flex-direction: column !important;
  }

  .updateQUote_dropdown {
    width: 100% !important;
  }

  .addQUuoteDiscount {
    flex-direction: column !important;
  }

  .addDiscountText {
    margin-left: auto !important;
  }
  .btnFlexQuote {
    flex-direction: column !important;
  }
  .cancelQuoteBtn {
    width: 100% !important;
  }

  .quoteButtonGroupDesktop {
    gap: 5px !important;
  }

  .quoteActionButtonsDesktop {
    gap: 5px !important;
  }

  .quoteActionBtn {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  .quotePersonName {
    font-size: 14px !important;
  }

  .quoteTitleText {
    font-size: 10px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    font-size: 9px !important;
    padding: 3px 6px 3px !important;
  }

  .quoteNumberInQuote {
    font-size: 9px !important;
  }

  .quoteCopyLink {
    width: 10px !important;
    height: 10px !important;
  }

  .quoteCustomerMessageBox {
    padding: 6px !important;
  }

  .quoteCustomerMessage {
    font-size: 10px !important;
  }

  .quoteCustomerDisclaimer {
    font-size: 10px !important;
  }
}

/* 320 */
@media (max-width: 374px) {
  .Quote-details {
    padding: 3px !important;
  }

  .quoteFor_customerName {
    flex-direction: column;
    align-items: start !important;
  }

  .quoteProperty_detail {
    flex-direction: column;
  }

  .quoteDetauils,
  .updateQUote_dropdown {
    width: 100% !important;
  }

  .QuoteForCustomerName {
    font-size: 20px !important;
    padding-left: 0px !important;
  }

  .quoteNumberDoneBtn {
    flex-direction: column !important;
  }

  .QUoteCHangeIcon {
    width: 100% !important;
    margin-bottom: 0px !important;
  }

  .quoteNUmberTOp {
    margin-top: 0.9rem !important;
    margin-bottom: 0px !important;
  }

  .quoteNumberInQuote {
    margin-left: auto !important;
  }

  .totalQuoteSection {
    gap: 10px !important;
  }

  .quoteButtonGroupDesktop {
    gap: 4px !important;
  }

  .quoteActionButtonsDesktop {
    gap: 4px !important;
  }

  .quoteActionBtn {
    font-size: 9px !important;
    padding: 4px 6px !important;
  }

  .quotePersonName {
    font-size: 13px !important;
  }

  .quoteTitleText {
    font-size: 9px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    font-size: 8px !important;
    padding: 2px 5px 2px !important;
  }

  .quoteNumberInQuote {
    font-size: 8px !important;
  }

  .quoteCopyLink {
    width: 8px !important;
    height: 8px !important;
  }

  .quoteCustomerMessageBox {
    padding: 5px !important;
  }

  .quoteCustomerMessage {
    font-size: 9px !important;
  }

  .quoteCustomerDisclaimer {
    font-size: 9px !important;
  }

  .quoteTimelineWrapper {
    padding-left: 8px !important;
  }

  .quoteTimelineLine {
    left: 4px !important;
  }
}

/* Responsive styles for quoteResponse_quoteNumber section */
.quoteResponse_quoteNumber {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.responseBoxQuote {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}

.quoteBadgesWrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.quoteResponseImage {
  width: auto;
  height: auto;
  /* max-width: 100%; */
  flex-shrink: 0;
}

.quoteStatusBadge,
.quoteRoleBadge {
  flex-shrink: 0;
  white-space: nowrap;
  width: fit-content;
  margin: 0 !important;
}

.statusIndicator {
  flex-shrink: 0;
}

.quoteNumberInQuote {
  white-space: nowrap;
}

/* Medium screens (992px - 1279px) */
@media (max-width: 1279px) and (min-width: 992px) {
  .quoteResponse_quoteNumber {
    gap: 12px;
  }

  .responseBoxQuote {
    flex-wrap: wrap;
  }
}

/* Tablet and below (991px) */
@media (max-width: 991px) {
  .quoteResponse_quoteNumber {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 15px;
  }

  .quoteNumberInQuote {
    margin-top: 10px;
    width: 100%;
    text-align: left;
  }

  .responseBoxQuote {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Mobile (767px) */
@media (max-width: 767px) {
  .quoteResponse_quoteNumber {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  .responseBoxQuote {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .quoteResponseImage {
    width: 24px;
    height: 24px;
  }

  .quoteNumberInQuote {
    font-size: 13px !important;
    margin-top: 8px;
    width: 100%;
    text-align: left !important;
  }

  .responseBoxDesktop {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .quoteBadgesWrapper {
    width: 100%;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    width: fit-content !important;
    font-size: 12px !important;
    padding: 5px 15px 5px !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  .quoteStatusBadge > .MuiTypography-root,
  .statusIndicator {
    padding: 5px !important;
    margin-right: 8px !important;
  }

  .quoteNumberInQuote {
    margin-top: 0 !important;
    width: 100%;
    text-align: left !important;
  }
}

/* Small Mobile (575px) */
@media (max-width: 575px) {
  .quoteResponse_quoteNumber {
    gap: 10px;
  }

  .responseBoxDesktop {
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    margin: 0 !important;
  }

  .quoteNumberInQuote {
    margin: 0 !important;
    width: 100%;
    text-align: left !important;
    margin-top: 8px !important;
  }

  .quoteResponseImage {
    width: 20px;
    height: 20px;
    margin-bottom: 0;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    width: fit-content;
    font-size: 12px !important;
    padding: 6px 12px 6px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start;
    white-space: nowrap;
  }

  .quoteNumberInQuote {
    font-size: 12px !important;
    margin-top: 10px;
    width: 100%;
    text-align: left !important;
  }
}

/* Extra Small Mobile (479px) */
@media (max-width: 479px) {
  .quoteResponse_quoteNumber {
    gap: 8px;
  }

  .responseBoxQuote {
    gap: 6px;
  }

  .quoteResponseImage {
    width: 18px;
    height: 18px;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    width: fit-content !important;
    font-size: 11px !important;
    padding: 5px 10px 5px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap;
  }

  .quoteStatusBadge > .MuiTypography-root,
  .statusIndicator {
    padding: 4px !important;
    margin-right: 6px !important;
  }

  .quoteNumberInQuote {
    font-size: 11px !important;
    text-align: left !important;
  }
}

/* Tiny Mobile (374px) */
@media (max-width: 374px) {
  .quoteResponse_quoteNumber {
    gap: 6px;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    width: fit-content !important;
    font-size: 10px !important;
    padding: 4px 8px 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap;
  }

  .quoteNumberInQuote {
    font-size: 10px !important;
    text-align: left !important;
  }
}

/* 280 */
@media (max-width: 319px) {
  .Quote-details {
    padding: 2px !important;
  }

  .addlineItemProduct {
    margin-top: 20px !important;
  }

  .productTotalSub {
    margin-top: 25px !important;
  }

  .quoteButtonGroupDesktop {
    gap: 3px !important;
  }

  .quoteActionButtonsDesktop {
    gap: 3px !important;
  }

  .quoteActionBtn {
    font-size: 8px !important;
    padding: 3px 5px !important;
  }

  .quotePersonName {
    font-size: 12px !important;
  }

  .quoteTitleText {
    font-size: 8px !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    font-size: 7px !important;
    padding: 2px 4px 2px !important;
  }

  .quoteNumberInQuote {
    font-size: 7px !important;
  }

  .quoteCopyLink {
    width: 6px !important;
    height: 6px !important;
  }

  .quoteCustomerMessageBox {
    padding: 4px !important;
  }

  .quoteCustomerMessage {
    font-size: 8px !important;
  }

  .quoteCustomerDisclaimer {
    font-size: 8px !important;
  }
}

/* Additional responsive utilities */
@media (max-width: 991px) {
  .quotePDFDialog .MuiDialog-paper {
    margin: 10px !important;
    max-height: calc(100% - 20px) !important;
  }

  .quotePDFDialogContent {
    padding: 10px !important;
  }

  .quotePDFDialogActions {
    padding: 10px !important;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .quotePDFDialog .MuiDialog-paper {
    margin: 5px !important;
    max-height: calc(100% - 10px) !important;
  }

  .quotePDFIframe {
    min-height: 300px !important;
    height: auto !important;
  }
}

/* Card responsive styles */
@media (max-width: 575px) {
  .Card {
    margin: 10px 0 !important;
    padding: 15px !important;
  }

  .CardHeader {
    padding: 10px 0 !important;
    font-size: 14px !important;
  }

  .CardContent {
    padding: 10px 0 !important;
  }
}

/* Ensure proper spacing on all devices */
.Quote-details {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Desktop view (1440px and above) - Keep original styles unchanged */
@media (min-width: 1440px) {
  .quoteButtonGroupDesktop {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .quoteActionButtonsDesktop {
    flex-direction: row !important;
    width: auto !important;
  }

  .quoteHeaderDesktop {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .responseBoxDesktop {
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
  }

  .quoteStatusBadge,
  .quoteRoleBadge {
    margin: 0 8px 0 0 !important;
  }

  .quoteNumberInQuote {
    margin: 0 !important;
    margin-left: 8px !important;
  }

  .addressQuoteDesktop {
    flex-direction: row !important;
  }

  .property_address {
    padding-right: 40px !important;
  }

  .quoteDetailsRightCol {
    padding-left: 40px !important;
    margin-top: 0 !important;
  }

  .createDateQUoteDetail {
    text-align: right !important;
    margin-top: 25px !important;
  }

  .quoteCustomerDisclaimer {
    width: 70% !important;
  }
}

/* Fix for timeline on mobile */
@media (max-width: 767px) {
  .quoteTimelineWrapper > div {
    margin-bottom: 15px !important;
  }
}

/* Add quote ? title row + quote number (use default Bootstrap row gutters; do not zero margins or grid misaligns vs Line Items) */
.quote-header-job-row {
  color: rgba(6, 49, 100, 1);
}

.quote-number-aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.quote-number-aside__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #64748b;
  margin: 0;
  padding: 0;
}

.quote-number-aside__panel {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px 12px;
  /* Match InputText / cs-input-shell single-line height (44px) */
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  background: #f7f8fa;
  border: 1px solid #1a3f5c;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.quote-number-aside__value {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f2b46;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quote-number-aside__change {
  margin: 0;
  padding: 0 4px 0 8px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #0f2b46;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.quote-number-aside__change:hover {
  color: #0a4d8c;
}

.quote-number-aside__change:focus-visible {
  outline: 2px solid rgba(6, 49, 100, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}

.quote-number-aside__edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-number-aside__done {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 991px) {
  .quote-number-aside-col {
    margin-top: 0 !important;
  }

  .quote-header-job-row .jobinput {
    margin-top: 1rem !important;
  }
}

/* =============================================================================
   Quote detail ? Atlas layout (moved from quoteDetailCjm.css)
   ============================================================================= */

.quote-detail-cjm.qdj-atlas {
  --ink: #0c1222;
  --navy: #0f2b46;
  --navy-soft: #1a3f5c;
  --amber: #d4943a;
  --amber-dim: rgba(212, 148, 58, 0.08);
  --mist: #eef1f5;
  --paper: #fafbfc;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --line: #e2e8f0;
  --line-faint: rgba(15, 23, 42, 0.08);
  --muted: #64748b;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --display: "Inter", system-ui, sans-serif;

  font-family: var(--sans);
  color: var(--ink);
  /* Match app shell so no ?white strip? beside tinted content */
  background-color: #f5f6f8;
  background-color: var(--app-page-background, #f5f6f8);
  background-image: none;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

/* One cohesive ?document? on the page background ? reads professional, not scattered cards */
.quote-detail-cjm.qdj-atlas .qdj-pro-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(20px, 2.5vw, 32px) clamp(18px, 2.2vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm), var(--shadow-soft-float);
  box-sizing: border-box;
}

/* Beat Bootstrap p-0 + responsive Quote-details padding from style.css */
.quote-detail-cjm.qdj-atlas.Quote-details.p-0 {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 16px !important;
  padding-bottom: 40px !important;
}

@media (max-width: 767px) {
  .quote-detail-cjm.qdj-atlas.Quote-details.p-0 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.quote-detail-cjm.qdj-atlas.MuiGrid-root {
  width: 100% !important;
  max-width: 100% !important;
}

/*
 * Quote Detail (Atlas): previously we "bled" the page wider than its parent to
 * compensate for Admin's `customerDetail_paid { width: 98% }` wrapper.
 *
 * That rule also affected Staff Member pages (different layout wrapper), causing
 * left/right gutters to look mismatched. Scope the bleed to Admin only by
 * anchoring it under `.customerDetail_paid`.
 */
.main-content:not(.invoicePaidSlip) .customerDetail_paid .quote-detail-cjm.qdj-atlas.MuiGrid-root {
  width: 105.2631578947% !important;
  max-width: none !important;
  margin-left: -2.63157894735% !important;
  box-sizing: border-box !important;
}

.main-content.invoicePaidSlip .customerDetail_paid .quote-detail-cjm.qdj-atlas.MuiGrid-root {
  width: 102.0408163265% !important;
  max-width: none !important;
  margin-left: -1.02040816325% !important;
  box-sizing: border-box !important;
}

.quote-detail-cjm.qdj-atlas .text-blue-color {
  color: var(--ink) !important;
}

/* ?? Masthead: corporate toolbar + single title row + inline meta ?? */
.quote-detail-cjm.qdj-atlas .qdj-masthead {
  width: 100%;
  max-width: none;
  margin: 0 0 24px 0;
  padding: 0;
  border: none;
}

.quote-detail-cjm.qdj-atlas .qdj-header-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-bottom: 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-faint);
}

.quote-detail-cjm.qdj-atlas .qdj-header-toolbar-left,
.quote-detail-cjm.qdj-atlas .qdj-header-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-detail-cjm.qdj-atlas .qdj-header-kicker {
  margin: 18px 0 4px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.quote-detail-cjm.qdj-atlas .qdj-header-title-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.quote-detail-cjm.qdj-atlas .qdj-header-title-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}

.quote-detail-cjm.qdj-atlas .qdj-header-title-left .quotePersonName {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.quote-detail-cjm.qdj-atlas .quotePersonName.heading-three,
.quote-detail-cjm.qdj-atlas .quotePersonName {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-size: clamp(1.25rem, 2.1vw, 1.65rem) !important;
  color: var(--navy) !important;
  margin-top: 0 !important;
}

.quote-detail-cjm.qdj-atlas .qdj-header-copy {
  vertical-align: middle;
  opacity: 0.75;
}

.quote-detail-cjm.qdj-atlas .qdj-header-copy:hover {
  opacity: 1;
}

/* Meta row under title ? labeled facts (not ?Draft Company Quote? mashup) */
.quote-detail-cjm.qdj-atlas .qdj-header-meta-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  row-gap: 8px;
  margin: 14px 0 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  background: var(--surface-muted);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.quote-detail-cjm.qdj-atlas .qdj-meta-pair {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-right: 4px;
}

.quote-detail-cjm.qdj-atlas .qdj-meta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.quote-detail-cjm.qdj-atlas .qdj-meta-value {
  font-weight: 600;
  color: var(--navy);
  text-transform: capitalize;
}

.quote-detail-cjm.qdj-atlas .qdj-meta-value-mono {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--navy-soft);
  text-transform: none;
}

.quote-detail-cjm.qdj-atlas .qdj-meta-sep {
  color: var(--line);
  font-weight: 400;
  -webkit-user-select: none;
          user-select: none;
  margin: 0 10px;
  opacity: 0.85;
}

@media (max-width: 600px) {
  .quote-detail-cjm.qdj-atlas .qdj-meta-sep {
    display: none;
  }

  .quote-detail-cjm.qdj-atlas .qdj-meta-pair {
    width: 100%;
    margin-right: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-faint);
  }

  .quote-detail-cjm.qdj-atlas .qdj-meta-pair:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* Job / quote title under meta row ? any detail page using qdj-atlas (quote, contract, etc.) */
.quote-detail-cjm.qdj-atlas .qdj-header-subtitle {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  max-width: 72ch;
  margin-top: 10px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  font-weight: 400 !important;
  opacity: 0.9;
}

.quote-detail-cjm.qdj-atlas .qdj-header-desc-label {
  display: block;
  margin: 14px 0 0 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.quote-detail-cjm.qdj-atlas .qdj-contract-validity {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-muted) !important;
  font-size: 14px;
  line-height: 1.55;
  color: var(--navy-soft);
}

.quote-detail-cjm.qdj-atlas .qdj-contract-validity .MuiTypography-root {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Property block: less dead space between columns */
@media (min-width: 768px) {
  .quote-detail-cjm.qdj-atlas .property_address {
    padding-right: 24px !important;
  }

  .quote-detail-cjm.qdj-atlas .quoteDetailsRightCol {
    padding-left: 24px !important;
  }
}

/* ?? Body stream: full width of main column ?? */
.quote-detail-cjm.qdj-atlas .qdj-stream {
  width: 100%;
  max-width: none;
  margin: 0;
}

.quote-detail-cjm.qdj-atlas .qdj-block.card,
.quote-detail-cjm.qdj-atlas .card.qdj-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.quote-detail-cjm.qdj-atlas .qdj-stream > .qdj-block + .qdj-block {
  margin-top: 0;
  padding-top: 28px !important;
  border-top: 1px solid var(--line-faint);
  position: relative;
}

.quote-detail-cjm.qdj-atlas .qdj-stream > .qdj-block:first-of-type {
  padding-top: 0 !important;
}

/* Section titles: simple (no gold bar / no heavy caps) */
.quote-detail-cjm.qdj-atlas .qdj-section-head.card-header,
.quote-detail-cjm.qdj-atlas .qdj-block .card-header {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 8px 0 !important;
  margin: 0 0 4px 0;
  font-family: var(--sans);
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--navy) !important;
  border-left: none !important;
  position: relative;
}

.quote-detail-cjm.qdj-atlas .qdj-block .card-header::after {
  content: none !important;
  display: none !important;
}

.quote-detail-cjm.qdj-atlas .qdj-block .MuiCardContent-root {
  padding: 4px 0 12px !important;
}

.quote-detail-cjm.qdj-atlas .qdj-block .card-body {
  padding: 0 !important;
}

.quote-detail-cjm.qdj-atlas .Sub-title.text-blue-color {
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* Line items: one wrapper per ProductItem (.qdj-pi-atlas) */
.quote-detail-cjm.qdj-atlas .qdj-line-items > .qdj-pi-atlas {
  border-bottom: 1px solid var(--line-faint);
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.quote-detail-cjm.qdj-atlas .qdj-line-items > .qdj-pi-atlas:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.quote-detail-cjm.qdj-atlas .qdj-line-items > .qdj-pi-atlas:first-of-type > .mb-3:first-of-type {
  background: var(--surface-muted) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 8px 8px 0 0;
  /* Match data row: no horizontal padding on this shell — cells use the same gutter as body rows */
  padding: 12px 0 !important;
}

.quote-detail-cjm.qdj-atlas .qdj-line-items .productServiceHead {
  color: var(--navy) !important;
}

/* Image + Measurement body cells (.unit): left-align with column headers on redesign quote/contract */
.quote-detail-cjm.qdj-atlas .qdj-line-items > .qdj-pi-atlas .text-data.unit {
  text-align: left !important;
}

/* Notes */
.quote-detail-cjm.qdj-atlas .qdj-prose {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface-muted) !important;
  padding: 14px 16px !important;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
}

/* Footnote */
.quote-detail-cjm.qdj-atlas .qdj-footnote {
  border-top: 1px dashed var(--line) !important;
  padding-top: 24px !important;
  margin-top: 28px !important;
}

.quote-detail-cjm.qdj-atlas .qdj-footnote-title {
  margin: 0 0 8px 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-soft) !important;
  line-height: 1.3;
}

.quote-detail-cjm.qdj-atlas .qdj-footnote-title + .qdj-footnote-title {
  margin-top: 20px;
}

.quote-detail-cjm.qdj-atlas .qdj-footnote-body {
  color: var(--ink) !important;
  line-height: 1.6;
}

.quote-detail-cjm.qdj-atlas .qdj-footnote .quoteCustomerMessage,
.quote-detail-cjm.qdj-atlas .qdj-footnote .quoteCustomerDisclaimer {
  color: var(--ink) !important;
}

.quote-detail-cjm.qdj-atlas .qdj-footnote-attachments {
  margin-top: 0;
}

.quote-detail-cjm.qdj-atlas hr {
  border: none;
  border-top: 1px dashed var(--line);
}

.quote-detail-cjm.qdj-atlas .productTotalSub {
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quote-detail-cjm.qdj-atlas .qdj-request-row {
  border-left: 3px solid var(--amber) !important;
  padding-left: 14px !important;
  color: var(--ink) !important;
  background: var(--surface-muted);
  border-radius: 0 6px 6px 0;
}

.quote-detail-cjm.qdj-atlas .quoteTimelineLine {
  background: repeating-linear-gradient(
    180deg,
    var(--line),
    var(--line) 4px,
    transparent 4px,
    transparent 8px
  ) !important;
  width: 2px !important;
}

/* Add quote ? title row + quote number (use default Bootstrap row gutters; do not zero margins or grid misaligns vs Line Items) */
.quote-header-job-row {
  color: rgba(6, 49, 100, 1);
}

.quote-number-aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.quote-number-aside__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #64748b;
  margin: 0;
  padding: 0;
}

.quote-number-aside__panel {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px 12px;
  /* Match InputText / cs-input-shell single-line height (44px) */
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  background: #f7f8fa;
  border: 1px solid #1a3f5c;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.quote-number-aside__value {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f2b46;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quote-number-aside__change {
  margin: 0;
  padding: 0 4px 0 8px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #0f2b46;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.quote-number-aside__change:hover {
  color: #0a4d8c;
}

.quote-number-aside__change:focus-visible {
  outline: 2px solid rgba(6, 49, 100, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}

.quote-number-aside__edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-number-aside__done {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 991px) {
  .quote-number-aside-col {
    margin-top: 0 !important;
  }

  .quote-header-job-row .jobinput {
    margin-top: 1rem !important;
  }
}
/* Quote detail ? Cloud Job Manager style guide (navy #0f2b46) two-column layout */
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign.Quote-details {
  background-color: #f4f7fa !important;
  padding-top: 16px !important;
  padding-bottom: 32px !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-page-masthead {
  width: 100%;
  margin-bottom: 0;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-two-col {
  width: 100%;
  margin: 0 !important;
  align-items: flex-start;
}

/* Contract detail: main + sidebar must stay one row on md+ (full-width rows above break MUI flow without this) */
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-detail-two-col-row.MuiGrid-container {
  display: flex !important;
}
@media (min-width: 900px) {
  .quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-detail-two-col-row.MuiGrid-container {
    flex-wrap: nowrap !important;
  }
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-qd-card .card-header,
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-card-header-plain {
  background: transparent !important;
  border: none !important;
  padding-bottom: 0 !important;
  font-weight: 700 !important;
  color: #0f2b46 !important;
  color: var(--navy-deep, #0f2b46) !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-message-client-card {
  background: linear-gradient(180deg, #f0f7ff 0%, #eef4ff 100%) !important;
  border: 1px solid rgba(15, 43, 70, 0.18) !important;
  box-shadow: var(--shadow-md) !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-internal-note-box {
  background: #fffbeb;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-attachments-wrap .MuiGrid-container,
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-attachments-wrap {
  width: 100%;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-activity-timeline-line {
  background-color: #cbd5e1 !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-col-side .my-3,
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-side .my-3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-col-main .my-3:first-of-type {
  margin-top: 0 !important;
}

/* Quote detail redesign ? match Contract Detail: use default main-content gutters (no extra horizontal padding) */
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-main .card,
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-side .card {
  box-sizing: border-box !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-total-hero .MuiTypography-h6,
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-total-hero .MuiTypography-root + .MuiTypography-root {
  display: block;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-attachments-wrap .border-blue-color {
  overflow: visible !important;
  max-width: 100% !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-attachments-wrap .display-file-main {
  width: 100% !important;
  max-width: 100% !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-header-contract-parity {
  align-items: center !important;
}

/* Contract detail masthead: avoid column + space-between gap (badges stuck to bottom of a tall flex area) */
@media (max-width: 899.95px) {
  .quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-page-masthead.qdj-quote-header-contract-parity {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-attachments-wrap .display-file-main .MuiBox-root {
  min-width: 0 !important;
}

@media (max-width: 599px) {
  .quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-masthead-badges {
    width: 100%;
    justify-content: flex-start !important;
  }
}

/* Contract detail: Time Entries + Visits full width below the quote-style two-column row */
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-tables-full-width {
  flex-basis: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

/* Match full-width row left gutter to main column (nested Grid md=8 has double spacing vs this item) */
@media (min-width: 900px) {
  .quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-tables-full-width.MuiGrid-item {
    padding-left: 16px !important;
  }
}

/* One consistent inner padding for contract/quote detail cards (MUI CardContent default fights Bootstrap px-2) */
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign.Quote-details .qdj-qd-card .MuiCardContent-root {
  padding: 8px 16px 16px !important;
  box-sizing: border-box !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign.Quote-details .qdj-qd-card .MuiCardContent-root:last-child {
  padding-bottom: 16px !important;
}

/* Contract Time Entries + Visits: mobile list full card width (toolbar row keeps px in JSX; shared flush class) */
@media (max-width: 899.95px) {
  .quote-detail-cjm.qdj-atlas.qdj-quote-redesign.Quote-details
    .qdj-contract-tables-full-width
    .qdj-qd-card.contract-details-time-entries-mobile-flush
    > .MuiCardContent-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Contract / quote detail: tighter vertical gaps between stacked cards (sidebar + main + tables) */
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-side > .card.qdj-qd-card,
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-side > .card.my-4 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-side > .card:last-child {
  margin-bottom: 0 !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-main > .card.qdj-qd-card {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-quote-col-main > .card.qdj-qd-card:last-child {
  margin-bottom: 0 !important;
}

/* Less empty space between the two-column row and Time Entries / Visits */
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-tables-full-width.MuiGrid-item {
  padding-top: 8px !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-tables-full-width > .card.qdj-qd-card,
.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-tables-full-width > .card.my-4 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.quote-detail-cjm.qdj-atlas.qdj-quote-redesign .qdj-contract-tables-full-width > .card:last-child {
  margin-bottom: 0 !important;
}

.file-uploader {
  width: 100%;
  height: 69px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 .colorBlue{
  color: #0f2b46;
  font-size: 18px !important;
  font-weight: bold !important;
 }
.customerModelSearch.css-12o0ghv-MuiFormControl-root-MuiTextField-root .MuiOutlinedInput-root {
  height: 40px;
}
.overflow-auto {
  overflow-x: auto; 
  white-space: nowrap;  
}
.product_service_img{
  margin-top: 14px !important;
}
 
.file-uploader input[type="file"] {
  display: none;
}

.file-uploader label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.file-uploader label span:first-child {
  font-size: 24px;
  margin-right: 10px;
}

.file-uploader label span:last-child {
  font-size: 16px;
}

.last-row {
  border-bottom-width: none !important;
}

.accordion-button:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

textarea {
  border: none;
}
.inputHoverBoxes.css-odsttg-MuiFormControl-root-MuiTextField-root .MuiOutlinedInput-root {
  height: 40px !important;
  align-items: center !important;
}


/* --------------------------------quote details --------------------------------*/

/* / 1680 / */
@media (max-width: 3000px) {
  .totalinput {
    margin-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* / 1680 / */
@media (max-width: 1700px) {
  .totalinput {
    margin-left: 20px !important;
  }
}

/* / 1500 / */
@media (max-width: 1680px) {
}

/* / 1440 / */
@media (max-width: 1449px) {
}

/* / 1280 / */
@media (max-width: 1439px) {
}

/* / 992 / */
@media (max-width: 1279px) {
}

/* / 768 / */
@media (max-width: 991px) {
  .client-message {
    display: block !important;
  }
  .totalinput {
    width: 100%;
  }
  .messageinput {
    width: 100%;
  }
  .jobinput {
    width: 100%;
  }
  .changesinput {
    width: 100%;
  }
  .job-title {
    display: block !important;
  }
  .file-upload label {
    font-size: 10px;
    line-height: 24px;
  }
  .file-upload span {
    font-size: 10px;
  }
  .quantity-price-total {
    width: 100% !important;
  }
  .totalinput {
    margin-left: 0px !important;
    padding-right: 0px !important;
  }
  .Sub-heading {
    font-size: 15px !important;
  }
 
}

@media (max-width: 819px) {
  .Sub-heading {
    font-size: 14px !important;
  }
}
@media (max-width: 789px) {
  .Sub-heading {
    font-size: 13px !important;
  }
  .top-button{
    margin-top: 31px !important;
  }
  
}

/* / 576 / */
@media (max-width: 767px) {
  .subName {
    margin-top: 20px !important;
  }
  .unitQty {
    margin-top: 24px !important;
  }
  .unitPrice {
    margin-top: 24px !important;
  }
  .total-number {
    margin-top: 23px !important;
  }
  .Sub-title {
    margin-top: 30px !important;
  }
 
  .products img {
    margin-top: 30px !important;
  }
  .unit {
    margin-top: 30px !important;
  }
  .per-unit {
    margin-top: 30px !important;
  }
  .total-pro {
    margin-top: 30px !important;
  }
  .totalInput {
    margin-top: 30px !important;
  }
  .contractDis {
    margin-bottom: 52px !important;
  }
  .clientSerach_createNew{
    flex-direction: column;
  }
  .searchClients{
    width: 100% !important;
    margin-left: 0px !important;
  }
  .selectCustomerOr{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .createNewCutomer{
    margin-bottom: 17px !important;
  }
  .email_sendModel.css-74pg1f-MuiModal-root-MuiDialog-root .MuiDialog-paper{
     width: 100% !important;
  }
  .email_quote_name{
    font-size: 17px !important;
  }
  .address_quoteDetail{
    flex-direction: column;
  }
  .property_address{
    width: 100% !important;
  }
  .quoteDetail_create{
    margin-left: 0px !important;
    white-space: nowrap;
  }
  .selectCustomerMOdel{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .leadSelectCustomer{
    display: contents !important;
  }
  .customerModelSearch {
    width: 100% !important;
  }
}

/* / 525 / */
@media (max-width: 575px) {
  .sign-first {
    width: 80%;
  }
  .selectclientaddquote {
    margin-top: "20px" !important;
  }
  .Sub-heading {
    font-size: 14px !important;
  }
  .secondPropertyOpen{
    flex-direction: column !important;
  }
  .imageOfProperty{
    margin-right: auto !important;
  }
}

/* / 480 / */
@media (max-width: 524px) {
  .btn-secondary {
    font-size: 16px !important;
  }
  .btn-outline-secondary {
    font-size: 12px;
  }
  .total-number {
    margin-top: 23px !important;
  }
  .Sub-heading {
    font-size: 13px !important;
  }
  .emailEditAction_btn{
    flex-direction: column;
    margin-top: 10px;
    
  }
  .nevigator_btn{   
     width: 40px !important;
    height: 40px !important;
  }
  .sendMail_ediBtn{
    width: 100% !important;
  }

}

/* / 425 / */
@media (max-width: 479px) {
  .Sub-heading {
    font-size: 14px !important;
  }
  
  .Sub-title {
    font-size: 12px !important;
  }
  .text-data {
    font-size: 12px !important;
  }
  .cardtitle {
    font-size: 18px !important;
  }
  .file-upload .label {
    display: block !important;
  }
  .selectcreatebtns {
    justify-content: center !important;
    display: block !important;
  }
  .quot {
    font-size: 20px;
    margin-top: 10px;
  }
  .total-number {
    margin-top: 23px !important;
  }
  .Sub-heading {
    font-size: 11px !important;
  }
  .product-service {
    width: 100% !important;
  }
  .sub-totl {
    width: 100% !important;
  }
  .QUoteSendCancelBtn{
    flex-direction: column !important;
    gap: 10px !important;
  }
  .yesSnedmailQuote{
    margin-left: 0px !important;
  }
  .QUoteBackbtn{
    width: 100% !important;
  }
}

/* / 375 / */
@media (max-width: 424px) {
  .buttonGroup {
    display: block !important;
  }
  .buttonGroupthree {
    display: flex !important;
    margin-top: 10px !important;
    justify-content: space-between !important;
    gap: 2px !important;
  }
  .price_padding_re {
    margin: 0 !important;
  }
  .propertydetailsmodal {
    flex-wrap: wrap !important;
  }
  .quot {
    font-size: 15px;
    margin-top: 10px;
  }
  .quotesearch {
    margin-left: 20px;
  }
  .total-number {
    margin-top: 23px !important;
  }
  .Sub-heading {
    font-size: 10px !important;
  }
  .product-service {
    width: 100% !important;
  }
  .sub-totl {
    width: 100% !important;
  }
  .SelectCutomerHead{
    font-size: 16px !important;
  }
  .SelectCutomerLike.css-d3wcwz-MuiTypography-rootp.MuiTypography-root.MuiTypography-body1.MuiTypography-gutterBottom.px-3.pt-3.text-blue-color.SelectCutomerLike.css-d3wcwz-MuiTypography-root{
    font-size: 12px !important;
    padding-left: 0px !important;
  }
.quotePersonName{
  font-size: 17px;
}
.customerMOdelUserName{
  flex-direction: column !important;
}
.customerDetailAddress{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.customerModelUserIcon .jobber-avatar-inline__circle {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
  margin-bottom: 10px !important;
}
}
.searchclientmodal.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-formControl.css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root{
  height: 10px !important;
}
/* / 320 // */
@media (max-width: 374px) {
  .cardtitle {
    font-size: 16px !important;
  }
  .searchclientmodal {
    font-size: 10px !important;
    width: 80% !important;
  }
  .modelOfClicentSearch{
    width: 100% !important;
  }
  .cratenclientmodal {
    font-size: 10px !important;
  }
  .selectcreatebtns {
    font-size: 10px !important;
  }
  .quot {
    font-size: 15px;
    margin-top: 10px;
  }
  .quotesearch {
    margin-left: 20px;
  }
  .total-number {
    margin-top: 23px !important;
  }
  .product-service {
    width: 100% !important;
  }
  .sub-totl {
    width: 100% !important;
  }
  .contc {
    width: 100% !important;
  }
  .contc {
    width: 100% !important;
  }
  .products-colum {
    flex-direction: column !important;
  }
  .selectCustomer_box.MuiDialogContent-root.css-ypiqx9-MuiDialogContent-root{
    padding: 0px 0px !important ;
  }

  .cancelBtnQuotes{
    width: 100% !important;
  }
  .sendEmailQuoteSend{
    margin-left: 0px !important;
    margin-top: 5px !important;
    width: 100% !important;
  }
  .emailScrollImg{
    min-width: 500px !important;
  }
}

/* / 280 / */
@media (max-width: 319px) {
  .signature-main {
    flex-direction: column;
    width: 100%;
  }
  .quot {
    font-size: 15px;
    margin-top: 10px;
  }
  .quotesearch {
    margin-left: 20px;
  }
  .unitQty {
    margin-top: 34px !important;
  }
  .unitPrice {
    margin-top: 34px !important;
  }
  .total-number {
    margin-top: 34px !important;
  }
  .Sub-heading {
    font-size: 11px !important ;
  }
  .subName {
    margin-top: 33px !important;
  }
  .product-service {
    width: 100% !important;
  }
  .sub-totl {
    width: 100% !important;
  }
  .contc {
    width: 100% !important;
  }
  .products-colum {
    flex-direction: column;
  }
  .totalInput {
    margin-top: 30px !important;
  }
  .contractDis {
    margin-top: 55px !important;
    margin-bottom: 52px !important;
  }
  .changeText {
    font-size: 12px !important;
  }
  .changesinput{
    margin-top: 20px !important;
  }
.createNewCutomer{
  margin-bottom: 30px !important;
}
 
}
      
.SelectCutomerHead {
  padding: 20px !important;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid var(--amber) !important;
}

.SelectCutomerLike {
  font-size: 14px !important;
  margin-top: 5px !important;
}

.selectCustomer_box {
  padding: 12px !important;
  min-height: 400px;
  max-height: 80vh;
}

.customerModelSearch {
  width: 100% !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 2px solid #e0e7ff !important;
  transition: all 0.3s ease;
  width: 100% !important;
  
}

.customerModelSearch:focus {
  border-color: #1e3c72 !important;
  box-shadow: var(--focus-ring-navy-soft);
}

.selectCustomerOr {
  background: #f3f4f6;
  padding: 8px 28px !important;
  border-radius: 20px;
  font-size: 14px !important;
  margin: 0 !important;
  align-self: center;
  min-width: fit-content;
}

.createNewCutomer { 
  border-radius: 8px !important;
  padding: 8px 20px !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-md) !important;
}

.createNewCutomer:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg) !important;
}

.customerMOdelUserName {
  padding: 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
  background: white;
  border: 1px solid #e0e7ff;
  margin-bottom: 10px !important;
}

.customerMOdelUserName:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Select customer modal: JobberAvatar circle — matches list scale (was generic person img) */
.customerModelUserIcon .jobber-avatar-inline__circle {
  width: 40px;
  height: 40px;
  font-size: 13px;
}

.customerDetailAddress {
  line-height: 1.5;
}

.customerDetailAddress Typography {
  font-weight: 600;
  color: #1e3c72;
}

.leadSelectCustomer {
  position: relative;
  display: inline-block;
  padding-left: 15px !important;
}

.leadSelectCustomer::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #07CF10;
  border-radius: 50%;
  transform: translateY(-50%);
}

.secondPropertyOpen {
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.secondPropertyOpen:hover {
  cursor: pointer;
}

.imageOfProperty {
  color: #1e3c72;
}

.MuiDialog-paper {
  border-radius: 12px !important;
  box-shadow: var(--shadow-xl) !important;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background: #f8fafc;
  border-radius: 8px;
}

/* Enhanced Mobile and Tablet Responsive Styles */
@media (max-width: 900px) {
  .selectCustomer_box.MuiDialogContent-root {
    padding: 12px 8px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }

  .SelectCutomerHead {
    padding: 16px 12px !important;
    font-size: 16px !important;
  }

  .SelectCutomerHead .edit_customer_function {
    font-size: 14px !important;
    margin-top: 6px !important;
  }

  .clientSerach_createNew {
    gap: 12px !important;
  }

  .customerModelSearch {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .createNewCutomer {
    font-size: 14px !important;
    padding: 10px 16px !important;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .selectcreatebtns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .searchClients {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }
  
  .selectCustomerMOdel {
    display: none !important;
  }

  .selectCustomer_box.MuiDialogContent-root {
    padding: 12px 6px !important;
  }

  .SelectCutomerHead {
    padding: 14px 10px !important;
    font-size: 15px !important;
  }

  .SelectCutomerHead .edit_customer_function {
    font-size: 13px !important;
    margin-top: 4px !important;
  }

  .customerModelSearch {
    font-size: 13px !important;
    padding: 8px 10px !important;
    height: 38px !important;
  }

  .createNewCutomer {
    font-size: 13px !important;
    padding: 8px 14px !important;
    height: 38px !important;
    width: 100% !important;
  }

  .customerMOdelUserName {
    padding: 12px 8px !important;
    margin-top: 12px !important;
  }

  .customerModelUserIcon .jobber-avatar-inline__circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .customerDetailAddress {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .leadSelectCustomer {
    padding-left: 20px !important;
    font-size: 13px !important;
  }

  .secondPropertyOpen {
    padding: 12px 8px !important;
  }

  .imageOfProperty {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 480px) {
  .selectCustomer_box.MuiDialogContent-root {
    padding: 10px 4px !important;
  }

  .SelectCutomerHead {
    padding: 12px 8px !important;
    font-size: 14px !important;
  }

  .SelectCutomerHead .edit_customer_function {
    font-size: 12px !important;
  }

  .customerModelSearch {
    font-size: 12px !important;
    padding: 6px 8px !important;
    height: 36px !important;
  }

  .createNewCutomer {
    font-size: 12px !important;
    padding: 6px 12px !important;
    height: 36px !important;
  }

  .customerMOdelUserName {
    padding: 10px 6px !important;
    margin-top: 10px !important;
  }

  .customerModelUserIcon .jobber-avatar-inline__circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  .leadSelectCustomer {
    padding-left: 16px !important;
    font-size: 12px !important;
  }

  .secondPropertyOpen {
    padding: 10px 6px !important;
  }
}

@media (max-width: 375px) {
  .SelectCutomerHead {
    padding: 10px 6px !important;
    font-size: 13px !important;
  }

  .SelectCutomerHead .edit_customer_function {
    font-size: 11px !important;
  }

  .customerModelSearch {
    font-size: 11px !important;
    padding: 5px 6px !important;
    height: 34px !important;
  }

  .createNewCutomer {
    font-size: 11px !important;
    padding: 5px 10px !important;
    height: 34px !important;
  }

  .customerMOdelUserName {
    padding: 8px 4px !important;
  }

  .customerModelUserIcon .jobber-avatar-inline__circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }
}

/* Responsive styles for Create Customer Form */
@media (max-width: 900px) {
  .MuiDialog-paper {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }
}

@media (max-width: 600px) {
  /* Form container responsive */
  .MuiDialog-paper {
    margin: 4px !important;
    max-width: calc(100% - 8px) !important;
    max-height: calc(100vh - 8px) !important;
  }

  /* Form buttons stack on mobile */
  .MuiBox-root .MuiButton-root {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Address input buttons responsive */
  .MuiGrid-item button[type="button"] {
    right: 8px !important;
    top: 8px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
  }

  .MuiGrid-item button[type="button"] svg {
    font-size: 12px !important;
  }

  /* Minimal gap increase between text fields on small screens */
  .MuiGrid-container .MuiGrid-item {
    margin-bottom: 6px !important;
  }

  .MuiGrid-container .MuiGrid-item:last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 480px) {
  .MuiDialog-paper {
    margin: 2px !important;
    max-width: calc(100% - 4px) !important;
    max-height: calc(100vh - 4px) !important;
  }

  /* Minimal gap increase between text fields on very small screens */
  .MuiGrid-container .MuiGrid-item {
    margin-bottom: 8px !important;
  }

  .MuiGrid-container .MuiGrid-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* Timeline Circle Styling - For filled circles */
.timeline-circle-filled {
  position: relative !important;
}

.timeline-circle-filled::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  background-color: white !important;
  border-radius: 50% !important;
  z-index: 3 !important;
  display: block !important;
}

/* Send-mail confirm modal — match outline + primary button height (same as Contract mail) */
.contract-mail-actions {
  align-items: stretch !important;
}

.contract-mail-actions .btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color,
.contract-mail-actions .btn.footer-buttons.backgroundWhiteBtn.outline-button-blue-color {
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}
/* Line item row — top-align columns so dropdowns line up with Price / Total */
.getproduct.row {
  align-items: flex-start !important;
}

/* Single height for the whole first row — overrides InputFields mobile !important on .cs-input-shell */
.getproduct {
  --gl-line-control-h: 60px;
}

/* Same label band height so all four controls start on the same baseline */
.getproduct .cs-form-section--line-item .cs-form-section__head {
  margin-bottom: 6px !important;
  min-height: 24px;
}

.getproduct .cs-form-section--line-item .cs-form-section__head > div {
  min-height: 24px;
  display: flex;
  align-items: flex-end;
}

.getproduct .gl-line-item-field:not(.textarea-description) .cs-field-label {
  min-height: 24px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}

.getproduct .gl-line-item-currency .cs-currency-label {
  min-height: 24px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}

.getproduct .gl-line-item-select.msl-select-root .mslabor__control,
.getproduct .gl-line-item-field.hour_squre_unit .cs-input-shell:not(.cs-input-shell--multiline),
.getproduct .gl-line-item-currency .cs-currency-group {
  min-height: var(--gl-line-control-h) !important;
  height: var(--gl-line-control-h) !important;
  max-height: var(--gl-line-control-h) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.getproduct .gl-line-item-select.msl-select-root .mslabor__control {
  overflow: hidden !important;
}

.getproduct .cost_input {
  margin-bottom: 0 !important;
}

/* Line item attachment — §7 dashed drop zone (matches form inputs) */
.getproduct .gl-line-item-file-drop {
  border: 1px dashed #e5e7eb !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Empty: `background` beats stray `background:` from global .file-upload rules */
.getproduct .gl-line-item-file-drop:not(.has-file) {
  background: #f7f8fa !important;
}

.getproduct .gl-line-item-file-drop:not(.has-file):hover {
  /* §7: white on hover like .cs-input-shell:focus-within */
  background-color: #ffffff !important;
  border: 1px dashed #2563eb !important;
  box-shadow: var(--focus-ring) !important;
}

.getproduct .gl-line-item-file-drop.has-file {
  background-color: #ffffff !important;
  border: 1px dashed #e5e7eb !important;
}

/* Aligned with line-item body gap — Hourly → Attachment */
.getproduct .gl-line-item-file-wrap {
  margin-top: 8px;
}

.getproduct .gl-line-item-qty-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Price / Total — §7 tokens (height set in unified row rule above) */
.getproduct .gl-line-item-currency .cs-currency-group {
  background: #f7f8fa;
  background: var(--cs-input-bg, #f7f8fa);
  border-color: #e5e7eb;
  border-color: var(--cs-input-border-default, #e5e7eb);
  padding: 0 14px;
  align-items: center;
}

/* $ — flex-centered in the row (no transform drift) */
.getproduct .gl-line-item-currency .cs-currency-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #475569;
  transform: none;
}

.getproduct .gl-line-item-currency .cs-currency-input {
  line-height: 1.4;
  padding: 0;
  margin: 0;
  align-self: center;
}

/* Delete control — same column as Total, right-aligned, tight to fields */
.getproduct .dustbinIconDelere {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.getproduct .gl-line-item-currency .cs-currency-group--disabled {
  background: #e2e8f0;
}

.getproduct .gl-line-item-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 0 4px;
  margin: 0;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  line-height: 0;
}

.getproduct .gl-line-item-chevron-btn:hover {
  color: #334155;
  background: rgba(15, 23, 42, 0.06);
}

.getproduct .gl-line-item-field .cs-field-label {
  color: #475569;
}

.getproduct .gl-line-item-select-wrap {
  margin-bottom: 0;
}

.getproduct .gl-line-item-file-field {
  width: 100%;
}

.getproduct .gl-line-item-file-field .cs-field-label {
  color: #475569;
}

/* Line-item Description — taller textarea (matches attachment row rhythm) */
.getproduct .textarea-description.gl-line-item-field .cs-input-shell--multiline {
  min-height: 100px !important;
}
.getproduct .textarea-description.gl-line-item-field .cs-input-shell--multiline textarea.cs-input {
  min-height: 76px !important;
}

.hour_squre_unitboxx.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-adornedEnd.css-1enov63-MuiInputBase-root-MuiOutlinedInput-root {
  height: 44px !important;
}
.qty .css-1rtugfm-MuiFormControl-root-MuiTextField-root .MuiOutlinedInput-root {
  height: 44px !important;
}

/* Ensure consistent label styling between TextField and DollerInput */
.getproduct .MuiFormControl-root .MuiInputLabel-root {
  font-size: 15px !important;
  color: #0f2b46 !important;
}

.getproduct .MuiFormControl-root.Mui-error .MuiInputLabel-root {
  color: #dc3545 !important;
}

/* Ensure consistent input height for all fields */
.getproduct .MuiOutlinedInput-root:not(.MuiInputBase-multiline) {
  height: 44px !important;
}

.getproduct .cost_input .MuiOutlinedInput-root {
  height: 44px !important;
}

.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input {
  padding: 6px !important;
  font-size: 15px;
}

/* / 1680 / */
@media (max-width: 1920px) {
  .file-upload-total {
    display: none !important;
  }
}

/* / 1680 / */
@media (max-width: 1700px) {
  .file-upload-total {
    display: none !important;
  }
}

/* / 1500 / */
@media (max-width: 1680px) {}

/* / 1440 / */
@media (max-width: 1449px) {}

/* / 1280 / */
@media (max-width: 1439px) {}

/* / 992 / */
@media (max-width: 1279px) {
  /* Tablet adjustments */
  .getproduct {
    padding-left: 20px !important;
  }
}

/* / 768 / */
@media (max-width: 991px) {
  /* Tablet landscape adjustments */
  .getproduct {
    padding-left: 18px !important;
  }

  .getproduct .col-md-6 {
    margin-bottom: 12px !important;
  }
}


/* / 576 / */
@media (max-width: 767px) {
  .product-item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  .getproduct {
    padding-left: 15px !important;
    padding-right: 5px !important;
  }

  .getproduct .drag-handle {
    left: -5px !important;
  }

  .costInPutDetailHereToWrite {
    margin-left: 0px !important;
    width: 100% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .hourQuoteBoxes {
    width: 100% !important;
    margin-bottom: 0rem !important;
  }

  .textarea-description {
    margin-top: 0px !important;
    margin-bottom: 16px !important;
  }
  .react-select-container {
    margin-bottom: 16px !important;
  }

  .cost_input {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .totalPaddin{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .descriptionItem {
    margin-top: 50px !important;
  }

  .totalNumber {
    margin-top: 0px !important;
  }

  .dustbinIconDelere {
    margin-top: 10px !important;
  }

  .hour_squre_unit {
    width: 100% !important;
    margin-left: 0px !important;
  }

  /* Better spacing for mobile columns */
  .getproduct .col-sm-12,
  .getproduct .col-12 {
    margin-bottom: 12px !important;
  }

  .getproduct .col-sm-6 {
    margin-bottom: 12px !important;
  }

  /* Ensure Price and Total fields are properly aligned */
  .getproduct .price_padding_re {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .getproduct .qty {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  /* Ensure consistent label styling for Price and Total fields */
  .getproduct .MuiFormControl-root .MuiInputLabel-root {
    font-size: 15px !important;
    color: #0f2b46 !important;
  }

  /* Ensure consistent input height */
  .getproduct .MuiOutlinedInput-root {
    height: 44px !important;
  }

  .getproduct .cost_input .MuiOutlinedInput-root {
    height: 44px !important;
  }
}

/* / 525 / */
@media (max-width: 575px) {
  .product-item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  .getproduct {
    padding-left: 12px !important;
    padding-right: 5px !important;
  }

  .getproduct .drag-handle {
    left: -8px !important;
  }

  .dustbinIconDelere {
    margin-top: 16px !important;
    display: flex;
    justify-content: center;
  }

  /* Ensure Price and Total stack properly on small screens */
  .getproduct .col-sm-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }
}

/* / 480 / */
@media (max-width: 524px) {
  .product-item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

}

/* / 425 / */
@media (max-width: 479px) {
  .product-item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

}

/* / 375 / */
@media (max-width: 424px) {
  .product-item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  .getproduct {
    padding-left: 10px !important;
    padding-right: 5px !important;
  }

  .getproduct .drag-handle {
    left: -10px !important;
  }

  .qty {
    padding: 0 3px !important;
    margin-bottom: 0 !important;
  }

  /* Consistent label and input styling */
  .getproduct .MuiFormControl-root .MuiInputLabel-root {
    font-size: 14px !important;
  }

  .getproduct .MuiOutlinedInput-root {
    height: 50px !important;
  }

  .getproduct .cost_input .MuiOutlinedInput-root {
    height: 50px !important;
  }
}

/* / 320 // */
@media (max-width: 374px) {
  .total {
    width: 100% !important;
    margin-top: 0px !important;
    gap: 4px !important;
  }

  .unitprice {
    width: 100% !important;
    margin-top: 18px !important;
  }

  .quantity {
    width: 100% !important;
  }

  .file-upload-quantity {
    display: none !important;
  }

  .file-upload-total {
    display: block !important;
  }

  .product-item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }


  .file-upload label {
    font-size: 14px !important;
  }
}


/* / 280 / */
@media (max-width: 319px) {
  .product-item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
  
  .file-upload label {
    font-size: 7px !important;
  }

  .descriptionItem {
    margin-top: 50px !important;
  }

  .totalNumber {
    margin-top: 30px !important;
  }

  .dustbinIconDelere {
    margin-top: 40px !important;
  }
}

div#\:ra\: {
  padding: 14px;
}

div#\:rc\: {
  padding: 14px;
}

/* Materials & labor select — menu scrollbar + option layout (portaled menu uses same prefix) */

/* Portal must paint above the next form row / line-item fields (State/Country pattern) */
.mslabor__menu-portal {
  z-index: 13000 !important;
}

/* react-select v5: center placeholder/value like InputText / DollerInput */
.msl-select-root .mslabor__value-container {
  align-items: center !important;
}

.mslabor__menu-list {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.mslabor__menu-list::-webkit-scrollbar {
  width: 8px;
  height: 0;
}

.mslabor__menu-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.mslabor__menu-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.mslabor__menu-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.msl-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 12px;
  border-radius: 8px;
  text-align: left;
  max-width: 100%;
  box-sizing: border-box;
}

.msl-option--focused {
  background-color: transparent;
}

.msl-option--selected {
  background-color: transparent;
}

.msl-option__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-weight: 700;
  color: #1e293b;
  font-size: 14px;
  line-height: 1.3;
}

.msl-option__name {
  word-break: break-word;
}

.msl-option__tax {
  font-weight: 600;
  font-size: 13px;
  color: #0f2b46;
}

.msl-option__tax--nontax {
  color: #16a34a;
}

.msl-option__detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

.msl-option__desc {
  flex: 1 1;
  min-width: 0;
  word-break: break-word;
}

.msl-option__price {
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {
    .discountTableBox{
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .discountInputBox{
        margin-left: auto !important;
        width: 100px !important;
    }
    .MuiTable-root {
        width: 100% !important;
    }
    .MuiTableCell-root {
        padding: 8px 4px !important;
        font-size: 14px !important;
        word-break: break-word !important;
    }
}

/* 480 */
@media (max-width: 524px) {
    .MuiTableCell-root {
        padding: 6px 2px !important;
        font-size: 13px !important;
    }
    .discountInputBox {
        width: 90px !important;
    }
}

/* 425 */
@media (max-width: 479px) {
    .MuiTableCell-root {
        padding: 6px 2px !important;
        font-size: 12px !important;
    }
    .discountInputBox {
        width: 85px !important;
    }
}

/* 375 */
@media (max-width: 424px) {
    .MuiTableCell-root {
        padding: 5px 2px !important;
        font-size: 12px !important;
    }
    .discountInputBox {
        width: 80px !important;
    }
}

/* 320 */
@media (max-width: 374px) {
    .MuiTableCell-root {
        padding: 4px 1px !important;
        font-size: 11px !important;
    }
    .discountInputBox {
        width: 75px !important;
    }
}

/* 280 */
@media (max-width: 319px) {
    .MuiTableCell-root {
        padding: 4px 1px !important;
        font-size: 10px !important;
    }
    .discountInputBox {
        width: 70px !important;
    }
}

.setting-sidebar-main {
  transition: all 0.3s ease;
  background: #fff;
  /* box-shadow: var(--shadow-md); */
  overflow-x: hidden;
  /* Only the inner .sidebar-list scrolls — avoid nested scrollbars + empty gap below items */
  overflow-y: hidden;
  width: 100% !important;
  min-width: 280px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box !important;
}

.setting-sidebar-main .sidebar-list {
  padding: 8px 0;
  width: 100% !important;
  min-width: 280px !important;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box !important;
}

.setting-sidebar-main .sidebar-item {
  padding: 12px 16px;
  margin: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.setting-sidebar-main .sidebar-item.active {
  background-color: rgba(6, 49, 100, 0.08);
  border-left: 4px solid #0f2b46;
  box-shadow: var(--shadow-md);
}

.setting-sidebar-main .sidebar-item.active-donor {
  background-color: rgba(41, 179, 226, 0.15);
  border-left: 4px solid #29B3E2;
  box-shadow: var(--shadow-md);
}

.mobile-menu-button{
  margin-left: -25px !important;
  margin-bottom: 10px !important;
}
.setting-sidebar-main .sidebar-item:hover {
  transform: translateX(4px);
}

.setting-sidebar-main .MuiListItemIcon-root {
  min-width: 40px !important;
  color: #0f2b46;
  transition: all 0.2s ease;
}

.setting-sidebar-main .sidebar-item:hover .MuiListItemIcon-root {
  /* color: #2d5a1f; */
  transform: scale(1.1);
}

.setting-sidebar-main .MuiListItemText-primary {
  font-size: 14px;
  font-weight: 500;
  /* color: #2c3e50; */
  transition: all 0.2s ease;
}

.setting-sidebar-main .sidebar-item:hover .MuiListItemText-primary {
  /* color: #1e293b; */
  font-weight: 600;
}

.setting-sidebar-main .sidebar-header {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 60px;
}

.setting-sidebar-main .sidebar-header.collapsed {
  justify-content: center !important;
  padding: 16px 8px !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.setting-sidebar-main .sidebar-header.collapsed .collapse-button {
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  background: #f0f8f0 !important;
  border: 1px solid #0f2b46 !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-md) !important;
  color: #0f2b46 !important;
  position: relative !important;
  cursor: pointer !important;
  font-size: 18px !important;
  font-weight: bold !important;
  outline: none !important;
}

.setting-sidebar-main .sidebar-title {
  font-weight: 600;
  /* color: #1e293b; */
  font-size: 18px;
  flex: 1 1;
}

.setting-sidebar-main .collapse-button {
  padding: 8px !important;
  color: #0f2b46 !important;
  background: #f0f8f0 !important;
  border: 1px solid #0f2b46 !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  z-index: 15 !important;
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 auto !important;
  box-shadow: var(--shadow-md) !important;
  cursor: pointer !important;
  font-size: 18px !important;
  font-weight: bold !important;
  outline: none !important;
}

.setting-sidebar-main .collapse-button:hover {
  background: rgba(6, 49, 100, 0.08) !important;
  transform: scale(1.1) !important;
  border: 1px solid rgba(79, 150, 59, 0.2) !important;
}

.setting-sidebar-main .collapse-button svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f2b46 !important;
  fill: #0f2b46 !important;
}

.setting-sidebar-main .collapse-button .MuiSvgIcon-root {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f2b46 !important;
  fill: #0f2b46 !important;
}

.setting-sidebar-main .collapse-button:hover {
  background: rgba(6, 49, 100, 0.08);
  transform: scale(1.1);
  border: 1px solid rgba(79, 150, 59, 0.2);
}

.setting-sidebar-main:not(.expanded) .sidebar-header {
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

.setting-sidebar-main:not(.expanded) .sidebar-header .collapse-button {
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.setting-sidebar-main:not(.expanded) .sidebar-item {
  justify-content: center;
  padding: 12px 8px;
}

.setting-sidebar-main:not(.expanded) .MuiListItemIcon-root {
  margin: 0 auto;
}

/* Expanded state styles - ensure full text is visible */
.setting-sidebar-main.expanded {
  width: 100% !important;
  min-width: 280px !important;
}

.setting-sidebar-main.expanded .sidebar-header {
  justify-content: flex-start !important;
  padding: 16px !important;
}

.setting-sidebar-main.expanded .sidebar-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

.setting-sidebar-main.expanded .sidebar-item {
  justify-content: flex-start !important;
  padding: 12px 16px !important;
  flex-direction: row !important;
}

.setting-sidebar-main.expanded .MuiListItemIcon-root {
  margin-right: 12px !important;
  margin-left: 0 !important;
  min-width: 40px !important;
  margin: 0 12px 0 0 !important;
}

.setting-sidebar-main.expanded .MuiListItemText-root {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 !important;
}

.setting-sidebar-main.expanded .MuiListItemText-primary {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

.setting-sidebar-main .collapse-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f2b46 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.setting-sidebar-main .collapse-button .MuiSvgIcon-root {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f2b46 !important;
  fill: #0f2b46 !important;
  font-size: 20px !important;
}

.setting-sidebar-main .sidebar-header.collapsed .collapse-button .MuiSvgIcon-root {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f2b46 !important;
  fill: #0f2b46 !important;
  font-size: 20px !important;
}

.setting-sidebar-main .sidebar-header.collapsed .collapse-button .MuiSvgIcon-root,
.setting-sidebar-main .collapse-button .MuiSvgIcon-root {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f2b46 !important;
  fill: #0f2b46 !important;
  font-size: 20px !important;
  transform: none !important;
}

.mobile-menu-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1200;
  /* background: #0f2b46 !important; */
  color: white !important;
  box-shadow: var(--shadow-lg);
}

.mobile-menu-button:hover {
  /* background: #0f2b46 !important; */
  transform: scale(1.05);
}

.mobile-drawer .MuiDrawer-paper {
  width: 280px;
  max-width: 85vw;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.mobile-drawer .setting-sidebar-main {
  margin-top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-drawer .MuiDrawer-paper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.desktop-sidebar-container {
  position: relative;
  height: 100vh;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Settings Layout Container */
.settings-layout-container {
  min-height: 100vh;
  position: relative;
}

.settings-layout-container .hiren {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Scrollbar styles for Webkit browsers (Chrome, Safari, Edge) */
.setting-sidebar-main::-webkit-scrollbar,
.setting-sidebar-main .sidebar-list::-webkit-scrollbar {
  width: 8px;
}

.setting-sidebar-main::-webkit-scrollbar-track,
.setting-sidebar-main .sidebar-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.setting-sidebar-main::-webkit-scrollbar-thumb,
.setting-sidebar-main .sidebar-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.setting-sidebar-main::-webkit-scrollbar-thumb:hover,
.setting-sidebar-main .sidebar-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Scrollbar styles for Firefox */
.setting-sidebar-main,
.setting-sidebar-main .sidebar-list {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Responsive Breakpoints */

@media (min-width: 1680px) {
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 320px !important;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 16px 20px;
    margin: 6px 12px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 16px;
  }
}

@media (max-width: 1679px) and (min-width: 1440px) {
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 280px !important;
  }
}

@media (max-width: 1439px) and (min-width: 1280px) {
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 260px !important;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 10px 14px;
    margin: 3px 6px;
  }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 240px !important;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 8px 12px;
    margin: 2px 4px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 13px;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 220px !important;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 8px 10px;
    margin: 2px 4px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 12px;
  }
  
  .setting-sidebar-main .sidebar-title {
    font-size: 16px;
  }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  .mobile-drawer .MuiDrawer-paper {
    width: 260px;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 12px 16px;
    margin: 4px 8px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 14px;
  }
}

@media (max-width: 575px) and (min-width: 425px) {
  .mobile-drawer .MuiDrawer-paper {
    width: 240px;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 10px 14px;
    margin: 3px 6px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 13px;
  }
  
  .setting-sidebar-main .sidebar-title {
    font-size: 16px;
  }
}

@media (max-width: 424px) and (min-width: 375px) {
  .mobile-drawer .MuiDrawer-paper {
    width: 220px;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 8px 12px;
    margin: 2px 4px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 12px;
  }
  
  .setting-sidebar-main .sidebar-title {
    font-size: 15px;
  }
  
  .mobile-menu-button {
    top: 15px;
    left: 15px;
  }

  .mobile-drawer .setting-sidebar-main,
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .setting-sidebar-main .sidebar-list {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 374px) and (min-width: 320px) {
  .mobile-drawer .MuiDrawer-paper {
    width: 200px;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 8px 10px;
    margin: 2px 4px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 11px;
  }
  
  .setting-sidebar-main .sidebar-title {
    font-size: 14px;
  }
  
  .mobile-menu-button {
    top: 10px;
    left: 10px;
  }

  .mobile-drawer .setting-sidebar-main,
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .setting-sidebar-main .sidebar-list {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Mobile Tiny (below 320px) */
@media (max-width: 319px) {
  .mobile-drawer .MuiDrawer-paper {
    width: 180px;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 6px 8px;
    margin: 1px 2px;
  }
  
  .setting-sidebar-main .MuiListItemText-primary {
    font-size: 10px;
  }
  
  .setting-sidebar-main .sidebar-title {
    font-size: 13px;
  }
  
  .mobile-menu-button {
    top: 8px;
    left: 8px;
  }

  .mobile-drawer .setting-sidebar-main,
  .setting-sidebar-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .setting-sidebar-main .sidebar-list {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Landscape orientation adjustments for mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .setting-sidebar-main {
    height: 100%;
    overflow-y: hidden;
  }
  
  .setting-sidebar-main .sidebar-item {
    padding: 6px 12px;
    margin: 2px 4px;
  }
  
  .setting-sidebar-main .sidebar-header {
    padding: 12px 16px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .setting-sidebar-main {
    box-shadow: var(--shadow-md);
  }
  
  .mobile-menu-button {
    box-shadow: var(--shadow-lg);
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .setting-sidebar-main,
  .setting-sidebar-main .sidebar-item,
  .setting-sidebar-main .collapse-button,
  .setting-sidebar-main .MuiListItemIcon-root,
  .setting-sidebar-main .MuiListItemText-primary {
    transition: none;
  }
  
  .setting-sidebar-main .sidebar-item:hover {
    transform: none;
  }
  
  .setting-sidebar-main .sidebar-item:hover .MuiListItemIcon-root {
    transform: none;
  }
  
  .setting-sidebar-main .collapse-button:hover {
    transform: none;
  }
  
  .mobile-menu-button:hover {
    transform: none;
  }
}

/* Mobile specific collapsed styles */
@media (max-width: 1023px) {
  .setting-sidebar-main .sidebar-header.collapsed {
    padding: 12px 6px;
  }
  
  .setting-sidebar-main .collapse-button {
    padding: 6px;
  }
}

/* Smooth transitions for responsive breakpoints */
.settings-layout-container {
  transition: all 0.3s ease;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.addProductServiceSideLine {
  transition: all 0.3s ease;
}

/* Perfect layout alignment - comprehensive responsive */
.settings-layout-container {
  display: flex !important;
  width: 100% !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
}

.settings-layout-container .col-2,
.settings-layout-container .col-1 {
  flex-shrink: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: visible !important;
}

.settings-layout-container .col-10,
.settings-layout-container .col-11,
.settings-layout-container .col-12 {
  flex: 1 1 !important;
  min-width: 0 !important;
  /* Lets the flex item shrink so overflow-y only appears when content actually overflows */
  min-height: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin-left: 0 !important;
  max-width: 100% !important;
}

.addProductServiceSideLine {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .settings-layout-container {
    width: 100% !important;
    display: flex !important;
  }
  
  .addProductServiceSideLine {
    width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
  }
  
  .settings-layout-container .col-10,
  .settings-layout-container .col-11 {
    flex: 1 1 !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1024px) {
  .settings-layout-container {
    display: flex !important;
    width: 100% !important;
  }
  
  .settings-layout-container .col-2,
  .settings-layout-container .col-1 {
    flex-shrink: 0 !important;
  }
  
  .settings-layout-container .col-10,
  .settings-layout-container .col-11 {
    flex: 1 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 767px) {
  .settings-layout-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .addProductServiceSideLine {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: auto !important;
  }
  
  .addProductServiceSideLine::before {
    content: '';
    /* display: block; */
    height: 80px;
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .addProductServiceSideLine {
    overflow-x: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1400px) {
  .settings-layout-container .col-10,
  .settings-layout-container .col-11 {
    overflow-x: auto !important;
    min-width: 0 !important;
  }
}

/* ---------------------------------------------------------------------------------- */
.service-input::placeholder {
    color: red !important;
}

.container-fluid {
    padding: 0 !important;
}
.addProdyuctBtn{
    height: 40px;
    min-height: 40px;
    margin-top: 0;
}

/* Modal footer — Cancel outline matches Add (40px); avoid flex stretch making Cancel look huge */
.productBtnNavigate {
    align-items: center !important;
}

.productBtnNavigate .materials-labor-modal-cancel {
    min-height: 40px !important;
    max-height: 40px !important;
    height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}
/* 768 */
@media (max-width: 1980px) {
    .navbar-setting {
        display: none !important;
    }
}

/* 1680 */
@media (max-width: 1700px) {
    .navbar-setting {
        display: none !important;
    }

}


/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 992 */
@media (max-width: 1228px) {

    .sidebar {}

    .product-service-table {
        columns: 1;
    }

    .product-service-table {
        width: 85%;
    }

}

/* 5150 start  */
/* 768 */
@media (max-width: 991px) {
    .navbar-setting {
        display: block !important;
    }

    .navbar-setting.dropdown-menu {
        width: 105% !important;
        margin-left: -12px;
        margin-top: 10px;
    }

    .product-service-table {
        width: 100%;
    }

    .divider-productsandservices {
        display: none !important;
    }

    .back-color {
        background-color: rgb(6, 49, 100) !important;
    }

    .backgroundColor {
        background-color: black;
    }

    .productServiceBar {
        flex-direction: column;
    }

    .settingProductService {
        margin-right: auto;
    }

    .settingSearch {
        margin-left: auto;
    }

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

/* 576 */
@media (max-width: 767px) {
    .productFormName {
        margin-top: 4px !important;
    }

    .settingProductService {
        flex-direction: column !important;
    }

    .settingProductServiceGaps {
        margin-bottom: -7px !important;
        width: 89% !important;
    }

    .settingProfileSetting {
        z-index: 9 !important;
    }

    .settingsidebardrop {
        z-index: 999 !important;
    }

    .setting-dropdown {
        z-index: 9 !important;
    }

    .backgroundBlurBtn {
        white-space: nowrap !important;
    }
}

/* 525 */
@media (max-width: 575px) {
    .productServiceHeadFont {
        font-size: 23px !important;
    }

    .productDetaillTable {
        margin-bottom: 30px !important;
    }

}

/* 480 */
@media (max-width: 524px) {
}

/* 425 */
@media (max-width: 479px) {
    .cost-input {
        flex-direction: column;
        gap: 10px;
    }

    .cost-input .col-4 {
        width: 100% !important;
    }

    .cost-input .col-3 {
        width: 100% !important;
    }
}

/* 375 */
@media (max-width: 424px) {
    .text-size {
        font-size: 19px !important;
    }
    .productFormName {
        margin-top: 4px !important;
    }
}

/* 320 */
@media (max-width: 374px) {
    .text-size {
        font-size: 17px !important;
    }

    .settingSettingAddproSer {
        flex-direction: column !important;
    }

    .adminSettingAddProServicebutton.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeMedium.MuiButton-textSizeMedium.MuiButton-colorPrimary.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeMedium.MuiButton-textSizeMedium.MuiButton-colorPrimary.text-capitalize.bg-blue-color.adminSettingAddProService.css-1e6y48t-MuiButtonBase-root-MuiButton-root {
        width: 100% !important;
        padding: 10px !important;
    }

    .addproduCtBtnHere {}

    .gapFormBtn {
        gap: 10px !important;
    }

    .addproduCtBtnHere {
        margin-right: auto !important;
    }

    .settingProductServiceGaps {
        width: 100% !important;
    }
    .productFormName {
        margin-top: 4px !important;
    }
    .qty{
        margin-bottom: 0 !important;
    }
    .productBtnNavigate{
        flex-direction: column !important;
    }
}

/* 280 */
@media (max-width: 319px) {
    .text-size {
        font-size: 15px !important;
    }
    .productFormName {
        margin-top: 37px !important;
    }
    .file-upload{
        margin-top: 40px !important;
    }

    .productDetaillTable {
        margin-bottom: 40px !important;
    }
}


@media only screen and (max-width: 991px) {
    .settingsidebardrop {
        display: block !important;
        background-color: rgb(6, 49, 100);
        color: white;
        border: none;
        border-radius: 10px;
        margin: 0 !important;
    }
}

@media only screen and (min-width: 992px) {
    .settingsidebardrop {
        display: none !important;
    }
}

.css-1jhmj8p-MuiFormControl-root-MuiTextField-root {
    line-height: 14px !important;
}

/*
 * Materials & labor header — two regimes:
 * - 900–1279px: content area is often too narrow (sidebar + devtools) for one row; title must NOT
 *   shrink (that caused "Materials & lab" truncation). Stack: row1 = title + count, row2 = filters + Add.
 * - 1280px+: enough width for a single header row with nowrap.
 */
@media (min-width: 900px) and (max-width: 1279px) {
    .materials-labor-page .jobber-list-card__header {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        row-gap: 12px !important;
        column-gap: 12px !important;
    }

    .materials-labor-page .jobber-list-card__header .jobber-list-card__title {
        flex: 0 1 auto !important;
        flex-shrink: 0 !important;
        min-width: min-content !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .materials-labor-page .jobber-list-card__header .jobber-list-card__toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        gap: 10px !important;
    }

    .materials-labor-page .jobber-list-card__header .jobber-list-card__cta,
    .materials-labor-page .jobber-list-card__header .jobber-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

}

@media (min-width: 1280px) {
    .materials-labor-page .jobber-list-card__header {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .materials-labor-page .jobber-list-card__header .jobber-list-card__title {
        flex: 0 0 auto !important;
        min-width: min-content !important;
        overflow: visible !important;
    }

    .materials-labor-page .jobber-list-card__header .jobber-list-card__toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 10px !important;
        margin-left: auto !important;
    }

    .materials-labor-page .jobber-list-card__header .jobber-list-card__cta,
    .materials-labor-page .jobber-list-card__header .jobber-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

}

/*
 * Materials & labor — filters + search:
 * Only stack vertically below MUI md (899px) to fix phone overflow.
 * Card header title/toolbar row: global JobberListCard rules at 575px in MuiTable/style.css handle small phones.
 */
@media (max-width: 899px) {
    .materials-labor-page .jobber-list-card {
        max-width: 100% !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    .materials-labor-page .jobber-list-card__toolbar .customer_searchBar.searchBarOfTable {
        flex-wrap: wrap !important;
        margin-left: 0 !important;
    }

    .materials-labor-page .jobber-list-card__toolbar .customer_searchBar.searchBarOfTable .jobber-toolbar-dropdown,
    .materials-labor-page .jobber-list-card__toolbar .customer_searchBar.searchBarOfTable .jobber-search-v2-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .materials-labor-page .jobber-list-card__toolbar .customer_searchBar.searchBarOfTable .dropdown,
    .materials-labor-page .jobber-list-card__toolbar .customer_searchBar.searchBarOfTable .jobber-toolbar-dropdown {
        width: 100% !important;
        max-width: 100% !important;
    }

    .materials-labor-page .jobber-list-card__toolbar .customer_searchBar.searchBarOfTable .jobber-toolbar-dropdown__toggle {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
    }
}

/* Narrow phones: full-width Add button (JobberListCard global 575px already stacks header) */
@media (max-width: 575px) {
    .materials-labor-page .jobber-list-card__header .jobber-list-card__cta {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 5150 end  */
/* Line items total wrapper - prevents overflow */
.line-items-total {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  width: 100%;
}

.line-items-total > * {
  flex-shrink: 0;
}

/* Ensure Total Price amount stays within bounds */
.line-items-total .text-blue-color {
  word-break: break-word;
  max-width: 100%;
}

@media (max-width: 767px) {
  .line-items-total {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 4px;
  }
}

.job .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  border-color: #0f2b46 !important;
  color: red !important;
}

.job .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background: #0f2b46 !important;
  color: #0f2b46 !important;
}

.main-tab .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background: transparent !important;
  color: #0f2b46 !important;
  border-bottom: 3px solid #0f2b46 !important;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  text-decoration: none !important;
}


.job .nav-tabs {
  border-bottom: 1px solid #0f2b46 !important;
}

.nav-tabs {
  --bs-nav-tabs-border-width: none !important;
}

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

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

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

.time-input-container {
  position: relative;
  display: inline-block;
}

.time-input-container .placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #0f2b46;
  font-size: 14px;
  pointer-events: none;
  transition: 0.2s;
}

.client .nav-link:focus,
.nav-link:hover {
  color: #0f2b46 !important;
}

.time-input-container input:focus+.placeholder,
.time-input-container input:not(:placeholder-shown)+.placeholder {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-30px);
}

.tag {
  display: inline-flex;
  align-items: center;
  background-color: #e9eef3;
  border-radius: 20px;
  padding: 5px 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #3a4a58;
}

.tag-text {
  margin-right: 10px;
}

.tag-close {
  background-color: #0f2b46;
  border: none;
  border-radius: 50%;
  color: white;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.tag-close:hover {
  background-color: #4d6582;
}

.contract-sub {
  margin-left: 90px !important;
}

.rbc-btn-group>button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  display: none !important;
}

/* 1680 */
@media (max-width: 1700px) {
  .rbc-btn-group {
    display: ruby !important;
    white-space: break-spaces !important;
  }
}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {
  .quotes-add-sec {
    display: block !important;
  }

  .firstt-tab-cal {
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 1500px !important;
    overflow-x: auto !important;
  }

  .quotes-add-sec-two {
    width: 100% !important;
  }

  .quotes-add-sec-one {
    width: 80% !important;
  }

  .name-cotract {
    width: auto !important;
  }

  .contract {
    font-size: 12px;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .time-section {
    width: 50%;
  }


  .first-tab {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  .team-main {
    width: 100%;
  }

  .start-end-date {
    flex-direction: column !important;
  }
}

/* 768 */
@media (max-width: 991px) {
  .calander-main {
    flex-direction: column;
  }

  .first-tab {
    width: 100%;
  }

  .firstt-tab {
    width: 100%;
  }

  .team-main {
    flex-direction: column;
  }

  .team-card {
    width: 100%;
  }

  .assignbtn {
    display: flex;
    justify-content: end;
  }

  .assigndrop {
    margin-top: 50px !important;
  }

  .rbc-calendar {
    margin-top: 10px !important;
  }

  .rbc-calendar {
    display: flex !important;
    justify-content: space-between !important;
    flex-direction: row;
  }
}

/* 576 */
@media (max-width: 767px) {
  .client-main {
    flex-direction: column;
  }

  .date {
    margin-bottom: 25px !important;
  }

  .team-main {
    width: 100%;
  }

  .toggle-button {
    width: 100% !important;
  }

  .oneOffContrctForHide {
    width: 50% !important;
  }

  .recuringForHideCalDn {
    width: 50% !important;
  }
}

/* 525 */
@media (max-width: 575px) {
  .button-responsive {
    flex-direction: column;
  }

  .mailHeaderToSet {
    font-size: 15px !important;
  }

  .sec-button-section {
    margin-top: 10px;
  }

  .quotes-add-sec-two {
    width: 100%;
    flex-direction: column;
  }

  .Qty {
    width: 100% !important;
    margin-top: 25px !important;
  }

  .qty-first {
    margin-top: 0 !important;
    width: 100% !important;
  }

  .quotes-add-sec-one {
    width: 100% !important;
  }

  .totals {
    margin-top: 0 !important;
  }

  .line-items-total {
    font-size: 14px;
    margin-top: 8px;
  }

  .newlineitem {
    margin-top: 18px !important;
    margin-left: -9px !important;
  }
}

@media (max-width: 480px) {
  .ButtomWithN {
    width: 100% !important;
  }

  .yesSnedmailQuote {
    width: 100% !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .username {
    font-size: 25px !important;
  }

  .contract-for {
    font-size: 16px !important;
  }

  .line-items-total {
    font-size: 14px;
    margin-top: 8px;
  }

  .newlineitem {
    margin-top: 28px !important;
  }

  .contract-main-first {
    flex-direction: column;
  }

  .contract-main-first .col-lg-9 .col-8 {
    width: 100% !important;
  }

  .contract-main-first .col-lg-3 {
    width: 100% !important;
  }
}

/* Desktop view - override mobile styles for contract-main-first */
@media (min-width: 992px) {
  .contract-main-first {
    flex-direction: row !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .address {
    overflow: auto;
  }

  .addnewline {
    order: 2 !important;
  }

  .newlineitem {
    display: block !important;
  }

  .contrac {
    font-size: 15px;
    margin-top: 10px;
  }

  .line-items-total {
    font-size: 14px;
    margin-top: 8px;
  }

  .newlineitem {
    margin-top: 28px !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  .AddCustomField {
    font-size: 12px !important;
  }

  .on-off-contract {
    font-size: 12px !important;
    height: 100% !important;
  }

  .recurring {
    font-size: 12px !important;
  }

  .toggle-button-nav {
    width: 285px !important;
  }

  .contrac {
    font-size: 15px;
    margin-top: 10px;
  }

  .contractsearch {
    margin-left: 20px;
  }

  .line-items-total {
    font-size: 14px;
    margin-top: 8px;
  }

  .newlineitem {
    margin-top: 28px !important;
  }
}

/* 320 */
@media (max-width: 374px) {
  .sec-button-section {
    flex-direction: column;
  }

  .AddCustomField {
    font-size: 10px !important;
  }

  .hide-calendar {
    font-size: 8px !important;
  }

  .quotes-add-sec-two {
    display: block !important;
    width: 300% !important;
    columns: 1;
  }

  .Qty {
    width: 30% !important;
  }

  .assigndrop {
    width: 200px !important;
  }

  .contrac {
    font-size: 15px;
    margin-top: 10px;
  }

  .contractsearch {
    margin-left: 20px;
  }

  .line-items-total {
    font-size: 14px;
    margin-top: 8px;
  }

  .newlineitem {
    margin-top: 28px !important;
  }

  .Contract-details {
    margin-top: 60px !important;
  }

  .change-content {
    margin-top: 60px !important;
  }

  .back-button {
    padding: 6px !important;
  }

  .start-end-date {
    flex-direction: column;
    margin-bottom: 15px !important;
  }

  .start-date {
    width: 100% !important;
  }

  .end-date {
    width: 100% !important;
    margin-top: 11px !important;
  }

  .contract {
    font-size: 12px;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .quoteResponse_quoteNumber {
    flex-direction: column !important;
  }

  .responseBoxQuote {
    margin-right: auto !important;
  }

  .quoteCopyLink {
    width: 18px !important;
  }

  .quotePersonName {
    font-size: 13px !important;
  }

  .oneOffContrctForHide {
    width: 100% !important;
    border-top-right-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
  }

  .recuringForHideCalDn {
    width: 100% !important;
  }

  .quoteNumberInQuote {
    margin-right: 0px !important;
  }
}

/* 280 */
@media (max-width: 319px) {
  .on-off-contract {
    font-size: 8px !important;
    height: 100% !important;
  }

  .recurring {
    font-size: 8px !important;
  }

  .toggle-button-nav {
    width: 220px !important;
  }

  .assigndrop {
    width: 200px !important;
  }

  .contrac {
    font-size: 15px;
    margin-top: 10px;
  }

  .contractsearch {
    margin-left: 20px;
  }

  .line-items-total {
    font-size: 14px;
    margin-top: 8px;
  }

  .newlineitem {
    margin-top: 28px !important;
  }

  .Contract-details {
    margin-top: 60px !important;
  }

  .change-content {
    margin-top: 60px !important;
  }

  .back-button {
    padding: 6px !important;
  }

  .start-end-date {
    flex-direction: column;
    margin-bottom: 20px !important;
  }

  .start-date {
    width: 100% !important;
  }

  .end-date {
    width: 100% !important;
    margin-top: 40px !important;
  }
}

.file-upload {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.file-upload span {
  font-size: 10px !important;
}

.description .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
  font: inherit;
  letter-spacing: inherit;
  color: currentColor;
  padding: 4px 0 5px;
  border: 0;
  box-sizing: content-box;
  background: none;
  height: 1.4375em;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  display: block;
  min-width: 0;
  width: 100%;
  animation-name: mui-auto-fill-cancel;
  animation-duration: 10ms;
  padding: 6.5px 14px !important;
  padding-top: 0 !important;
}

.MuiInputBase-formControl .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
  border: none !important;
  border-radius: 5px;
}

.rbc-event,
.rbc-day-slot .rbc-background-event {
  border: none;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.job-description .css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root {
  z-index: 0 !important;
}

.Contract-table-detail {
  width: 100%;
  table-layout: auto;
}

.Contract-table-detail tr {
  display: table-row;
}

.Contract-table-detail tr td {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  vertical-align: top;
  display: table-cell;
  border: none;
}

.Contract-table-detail tr td:first-child {
  padding-right: 16px;
  white-space: nowrap;
  width: auto;
  min-width: fit-content;
}

.Contract-table-detail tr td:last-child {
  white-space: normal;
  word-break: break-word;
  width: auto;
}

.visit tr td label {
  font-weight: 600;
  font-size: 12px;
}

.visit tr td {
  font-weight: 500;
  font-size: 14px;
}

.time-compo .css-10o2lyd-MuiStack-root>.MuiTextField-root,
.css-10o2lyd-MuiStack-root>.MuiPickersTextField-root {
  min-width: 100%;
}

/* Responsive Styles for Contract Details */

/* Contract Details Header */
.contract-details-header {
  /* flex-wrap: wrap; */
  gap: 15px;
}

.contract-action-buttons {
  flex-wrap: wrap;
  gap: 10px;
}

.contract-action-buttons .button-text {
  display: inline;
}

/* Contract Status Section */
.contract-status-section {
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}

.contract-title-section {
  flex: 1 1;
  min-width: 200px;
}

.contract-badges-section {
  flex-wrap: wrap;
  gap: 10px;
}

.contract-customer-name {
  font-size: 24px;
  word-break: break-word;
}

.contract-title-text {
  word-break: break-word;
}

.contract-status-badge,
.contract-role-badge {
  margin: 5px 0;
  white-space: nowrap;
}

.contract-number-text {
  word-break: break-word;
  margin: 5px 0;
}

/* Contract Details Grid */
.contract-details-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.contract-address-col {
  flex: 1 1;
  min-width: 300px;
  margin-bottom: 0;
}

.contract-details-col {
  flex: 1 1;
  min-width: 300px;
  margin-top: 0;
}

.contract-table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.contract-address-text {
  word-break: break-word;
}

/* Desktop view - ensure side by side layout */
@media (min-width: 992px) {
  .contract-details-grid {
    flex-wrap: nowrap;
    gap: 30px;
  }

  .contract-address-col {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    margin-bottom: 0;
  }

  .contract-details-col {
    flex: 0 0 41.666667%;
    max-width: 39.666667%;
    margin-top: 0;
  }
}

/* Labor Section */
.labor-action-buttons {
  /* width: 100%; */
  /* margin-top: 10px; */
}

.select-all-labor,
.delete-selected-labor,
.new-time-entry-btn {
  margin: 5px 0;
}

.labor-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.labor-table-wrapper {
  overflow-x: auto;
}

.labor-table-inner {
  overflow-x: auto;
}

/* Expense Section */
/* .expense-action-buttons {
  width: 100%;
  margin-top: 10px;
} */

.select-all-expense,
.delete-selected-expense,
.new-expense-btn {
  margin: 5px 0;
}

.expense-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.expense-table-wrapper {
  overflow-x: auto;
}

.expense-table-inner {
  overflow-x: auto;
}

/* Visits Section */
.visits-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.visits-table-wrapper {
  overflow-x: auto;
}

.visits-table-inner {
  overflow-x: auto;
}

/* Responsive Breakpoints */

/* Tablet and below (991px) */
@media (max-width: 991px) {
  .contract-details-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .contract-action-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .contract-status-section {
    flex-direction: column;
    align-items: flex-start;
    /* Was combined with Bootstrap justify-content-between → vertical space-between → huge gap before badges */
    justify-content: flex-start !important;
  }

  .contract-badges-section {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .contract-status-badge,
  .contract-role-badge,
  .contract-number-text {
    margin: 5px 0;
    width: 100%;
  }

  .contract-details-grid {
    flex-direction: column;
    gap: 20px;
  }

  .contract-address-col,
  .contract-details-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0;
  }

  .contract-address-col {
    margin-bottom: 0;
  }

  .labor-action-buttons,
  .expense-action-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .select-all-labor,
  .delete-selected-labor,
  .new-time-entry-btn,
  .select-all-expense,
  .delete-selected-expense,
  .new-expense-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile (767px) */
@media (max-width: 767px) {
  .contract-customer-name {
    font-size: 20px;
  }

  .contract-title-text {
    font-size: 12px;
  }

  .contract-status-badge,
  .contract-role-badge {
    font-size: 12px;
    padding: 5px 15px;
  }

  .contract-number-text {
    font-size: 12px;
  }

  .contract-action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .contract-action-buttons .button-text {
    display: inline;
  }

  .contract-action-buttons .contractEditBtn {
    width: 100% !important;
  }

  .contract-action-buttons .contractEditBtn .d-flex {
    justify-content: center !important;
  }

  .labor-table,
  .expense-table,
  .visits-table {
    font-size: 12px;
  }

  .labor-table th,
  .labor-table td,
  .expense-table th,
  .expense-table td,
  .visits-table th,
  .visits-table td {
    padding: 8px 4px;
    font-size: 12px;
  }

  .Contract-table-detail tr td {
    font-size: 11px;
    padding: 4px 6px;
  }
}

/* Small Mobile (575px) */
@media (max-width: 575px) {
  .contract-customer-name {
    font-size: 18px;
  }

  .copy-icon {
    width: 16px;
    height: 16px;
  }

  .contract-status-badge,
  .contract-role-badge {
    font-size: 11px;
    padding: 4px 12px;
  }

  .contract-number-text {
    font-size: 11px;
  }

  .labor-table th,
  .labor-table td,
  .expense-table th,
  .expense-table td,
  .visits-table th,
  .visits-table td {
    padding: 6px 2px;
    font-size: 11px;
  }

  .select-all-labor label,
  .select-all-expense label {
    font-size: 12px;
  }
}

/* Extra Small Mobile (480px) */
@media (max-width: 480px) {
  .contract-customer-name {
    font-size: 16px;
  }

  .contract-title-text {
    font-size: 11px;
  }

  .contract-status-badge,
  .contract-role-badge {
    font-size: 10px;
    padding: 3px 10px;
  }

  .contract-number-text {
    font-size: 10px;
  }

  .labor-table th,
  .labor-table td,
  .expense-table th,
  .expense-table td,
  .visits-table th,
  .visits-table td {
    padding: 4px 1px;
    font-size: 10px;
  }

  .Contract-table-detail tr td {
    font-size: 10px;
    padding: 3px 4px;
  }
}

/* Very Small Mobile (375px) */
@media (max-width: 375px) {
  .contract-customer-name {
    font-size: 14px;
  }

  .contract-title-text {
    font-size: 10px;
  }

  .contract-status-badge,
  .contract-role-badge {
    font-size: 9px;
    padding: 2px 8px;
  }

  .contract-number-text {
    font-size: 9px;
  }

  .labor-table th,
  .labor-table td,
  .expense-table th,
  .expense-table td,
  .visits-table th,
  .visits-table td {
    padding: 3px 1px;
    font-size: 9px;
  }
}

/* Contract mail confirm — match outline + primary button height (same box model) */
.contract-mail-actions {
  align-items: stretch !important;
}

.contract-mail-actions .btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color,
.contract-mail-actions .btn.footer-buttons.backgroundWhiteBtn.outline-button-blue-color {
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}
@charset "UTF-8";
.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rbc-m-b-negative-3 {
  margin-bottom: -3px;
}

.rbc-h-full {
  height: 100%;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  flex: 1 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.rbc-header + .rbc-header {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-button-link {
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-user-select: text;
          user-select: text;
}

.rbc-row-content {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.rbc-toolbar .rbc-toolbar-label {
  flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}
.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:hover {
  color: #373a3c;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}
.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.rbc-btn-group button + button {
  margin-left: -1px;
}
.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}
.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .rbc-toolbar {
    flex-direction: column;
  }
}
.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}
.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}
.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: flex;
  flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}
.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
  color: #3174ad;
}
.rbc-show-more:hover, .rbc-show-more:focus {
  color: #265985;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  flex: 1 0;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: flex;
  flex-direction: row;
}

.rbc-month-row {
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 1 0;
  flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}
.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #ddd;
}

.rbc-date-cell {
  flex: 1 1;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}
.rbc-date-cell.rbc-now {
  font-weight: bold;
}
.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: flex;
  flex-direction: row;
  flex: 1 0;
  overflow: hidden;
  right: 1px;
}

.rbc-day-bg {
  flex: 1 0;
}
.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: flex;
  flex-direction: column;
  flex: 1 0;
  overflow: auto;
}
.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}
.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " »";
}
.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "« ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.rbc-time-column .rbc-timeslot-group {
  flex: 1 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  display: flex;
  flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}
.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}
.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  flex-flow: column wrap;
  align-items: flex-start;
  overflow: hidden;
  position: absolute;
}
.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}
.rbc-day-slot .rbc-event-label {
  flex: none;
  padding-right: 5px;
  width: auto;
}
.rbc-day-slot .rbc-event-content {
  width: 100%;
  flex: 1 1;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}
.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #ddd;
  z-index: 10;
  margin-right: -1px;
}
.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}
.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  flex: 1 0;
  flex-basis: 0px;
}
.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}
.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}
.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  flex: 1 1;
  flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  flex: 1 0;
}
.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  border: 1px solid #ddd;
  min-height: 0;
}
.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
  text-align: right;
}
.rbc-time-view .rbc-allday-cell {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #ddd;
}
.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}
.rbc-time-view .rbc-row {
  box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
}
.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #ddd;
}
.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #ddd;
}
.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  flex: 1 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}

.rbc-time-content {
  display: flex;
  flex: 1 0;
  align-items: flex-start;
  width: 100%;
  border-top: 2px solid #ddd;
  overflow-y: auto;
  position: relative;
}
.rbc-time-content > .rbc-time-gutter {
  flex: none;
}
.rbc-time-content > * + * > * {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-content > .rbc-day-slot {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}

.rbc-resource-grouping.rbc-time-header-content {
  display: flex;
  flex-direction: column;
}
.rbc-resource-grouping .rbc-row .rbc-header {
  width: 141px;
}


/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}

/* Add Contract — "Save & Send" dropdown (Navy Deep — matches sidebar) */
.add-contract-save-send-dropdown.dropdown-toggle,
.add-contract-save-send-dropdown.btn {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
}
.add-contract-save-send-dropdown.dropdown-toggle:hover:not(:disabled):not(.disabled),
.add-contract-save-send-dropdown.btn:hover:not(:disabled):not(.disabled),
.add-contract-save-send-dropdown.dropdown-toggle:focus,
.add-contract-save-send-dropdown.btn:focus,
.add-contract-save-send-dropdown.dropdown-toggle:active,
.add-contract-save-send-dropdown.btn:active {
  background-color: var(--navy-mid) !important;
  border-color: var(--navy-mid) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.add-contract-save-send-dropdown--donor.dropdown-toggle,
.add-contract-save-send-dropdown--donor.btn {
  background-color: #29b3e2 !important;
  border-color: #29b3e2 !important;
  color: #ffffff !important;
}
.add-contract-save-send-dropdown--donor.dropdown-toggle:hover:not(:disabled):not(.disabled),
.add-contract-save-send-dropdown--donor.btn:hover:not(:disabled):not(.disabled),
.add-contract-save-send-dropdown--donor.dropdown-toggle:focus,
.add-contract-save-send-dropdown--donor.btn:focus,
.add-contract-save-send-dropdown--donor.dropdown-toggle:active,
.add-contract-save-send-dropdown--donor.btn:active {
  background-color: #29b3e2 !important;
  border-color: #29b3e2 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.addContractCancelBtn{
 color: #0f2b46 !important;   
}
.tableCOlor{
    font-size: 16px  !important; 
    font-weight: 600 !important;

}
.itemNameContractTable{
    white-space: break-space;
    padding-left: 1%;
}

/* Fix text cut-off issue in Property Address and Contact Details section */
.quoteProperty_detail {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.quoteDetauils {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.quoteDetauils .text-blue-color {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Ensure Contract Title wraps properly */
.QuoteForCustomerName,
.contract-for {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.ContractName,
.contrcatName {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* Prevent horizontal overflow on Card and containers */
.quotes.job {
    max-width: 100% !important;
    width: 100% !important;
}

.quotes.job .card {
    max-width: 100% !important;
    width: 100% !important;
}

.contractNUmber_doneBtn {
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

.contractNameINputToWriteHere {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
}

/* Medium desktop screens (1280px - 1440px) */
@media (max-width: 1440px) {
    .contractNUmber_doneBtn {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .contractNameINputToWriteHere {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .quoteNUmberTOp {
        width: auto !important;
        margin-top: 0 !important;
    }
}

/* Total Price visibility for responsive layout */
.total-price-desktop {
    display: block;
}

.total-price-mobile {
    display: none !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {
    .contractEditDeleteTable{
        padding-left: 5% !important;
    }
    .labourDetails{
        overflow-x: auto !important;
    }
    
    /* Fix overflow on smaller desktop screens */
    .contractNUmber_doneBtn {
        flex-wrap: wrap !important;
    }
    
    .contractNameINputToWriteHere {
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}
.tabInfoTabSecond
{
    padding: 0px !important;
    margin-top: -26px !important;
}
/* 992 */
@media (max-width: 1279px) {
    .teamPadding{
        margin-top: 0% !important;
    }
    .teamAndAssign{
        margin-top: 3% !important;
    }
    .teamAssignBox{
        width: 100%  !important;
    }
    .scrollClip{
        overflow-x: auto !important;
    }
    .schedule-section-main {
        margin-bottom: 20px !important;
    }
    
    /* Ensure Property Address and Contact Details stack on medium screens */
    .quoteProperty_detail {
        flex-direction: column !important;
    }
}

/* 768 */
@media (max-width: 991px) {
    .contract-first-tax{
        flex-direction: column !important;
        gap: 20px !important;
        align-items: start !important;
        justify-content: start !important;
    }
    .contract-first-tax-right{
        width: 100% !important;
    }
    
    .quoteProperty_detail {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Discount table responsive styles */
    .subTotal_totalBox {
        justify-content: flex-start !important;
    }

    .subTotal_totalBoxColBox {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Toggle Total Price visibility for mobile */
    .total-price-desktop {
        display: none !important;
    }

    .total-price-mobile {
        display: flex !important;
    }
}

/* 576 */
@media (max-width: 767px) {
    .quotes.job {
        padding: 0 10px !important;
    }
    
    .quotes.job .card {
        padding: 15px 10px !important;
        margin: 10px 0 !important;
    }
    
    .quotes.job .card .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .quotes.job .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .quotes.job .row .col {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .mailEditAction_contract {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    .mailEditAction_contract .contractEditBtn {
        width: 100% !important;
    }
    
    .mailEditAction_contract .contractEditBtn .d-flex {
        justify-content: center !important;
    }
    
    .mailEditAction_contract .moreactionQuoteDetail {
        width: 100% !important;
    }
    
    .totalPrice_contract{
        margin-bottom: 0px !important;
    }
    .visitHeadData{
        font-size: 14px !important;
    }
    .visitTableData{
        font-size: 14px !important;
    }
    .editDelate{
        height: 14px !important;
    }
    .itemDesAssingAction,.dataItemDesAssignAction{
        padding-left: 5% !important;
    }
    .visitDescription{
        padding-left: 11% !important;
    }
    .desriptionDataVisit{
        padding-left: 11% !important;
    }
    .aasignVisitData{
        padding-left: 15% !important;
    }
    .actionVisitHead{
        padding-left: 20% !important;
    }
    .contractVisitHead{
        font-size: 14px !important;
    }
    .contractDataTableSub{
        font-size: 13px !important;
    }
    .contractEditDeleteImg{
        height: 15px !important;
    }
    .typeContractAddSpacing{
        margin-top: 0px !important;
    }
    .AdduserModelBoxes{
        margin-top: 6% !important;
    }
    .AdduserModelBox{
        margin-top: 6% !important;
    }
    .oneoffsetBtnHereTonav{
        width: 50% !important;
    }   
    .opv1{
        width: 100% !important;
    }
    .contractNameH{
        font-size: 1px !important;
    }
    .schedule-section-main {
        gap: 20px !important;
    }
    .teamAssignBox {
        margin-top: 20px !important;
    }
    .QuoteForCustomerName {
        font-size: 20px !important;
    }

    /* Discount table responsive styles */
    .subTotal_totalBox {
        justify-content: flex-start !important;
        flex-direction: column !important;
    }

    .subTotal_totalBoxColBox {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .subTotal_totalBoxColBox table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .subTotal_totalBoxColBox .MuiTableCell-root {
        padding: 8px 4px !important;
        font-size: 14px !important;
        word-break: break-word !important;
    }
}

/* 525 */
@media (max-width: 575px) {
    .selectContract{
        width: 100%  !important;
    }
    .subTotal_totalBoxColBox{
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .subTotal_totalBoxColBox .MuiTableCell-root {
        padding: 6px 2px !important;
        font-size: 13px !important;
    }
    .nevigateContract_mail{
        flex-direction: column;
    }
    
    .more-action{
        width: 100% !important;
    }
   
    .saveContractToget{
        width: 100% !important;
    }
    .addignTeamOvefFlowWidth{
        overflow-y: auto !important;
    }
    .assignPersonNameHereTo{
        margin-top: 10px !important;
    }
    .contractAllBtnToNaviGate{
        flex-direction: column !important;
    }
    .contractNameINputToWriteHere{
        margin-top: 6px !important;
    }
    .selectCustomerTOAddcustomet{
        width: 100% !important;
    }
    .contrcatName{
        font-size: 18px !important;
    }
    .schedule-section-left {
        margin-bottom: 20px !important;
    }
    .quoteProperty_detail {
        gap: 15px !important;
        flex-direction: column !important;
    }
    .newlineitem {
        gap: 15px !important;
    }
    .getproduct-mamin {
        overflow-x: auto !important;
    }
}

/* 480 */
@media (max-width: 524px) {
    .quotes.job {
        padding: 0 5px !important;
    }
    
    .quotes.job .card {
        padding: 10px 8px !important;
        margin: 8px 0 !important;
    }
    
    .quotes.job .row .col {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .contract_AddContract_div{
        flex-direction: column;
       }
       .contract-first-status{
        flex-direction: column !important;
        justify-content: start !important;
        gap: 20px !important;
        align-items: start !important;
       }
       .contract_para{
        margin-right: auto;
       }
       .contarct_add{
        margin-left: auto;
       }
      .emailEditAction_btn{
        gap: 6px !important;
      }
      .contractDetailContractPersonName{
        flex-direction: column !important;
      }
      .moreActionBtnContract{
        width: 100% !important;
      }
      .buttonfromresponsive{
        flex-direction: column  !important;
      }
      .adduserModelTop {
        flex-direction: column !important;
      }
   
}

/* 425 */
@media (max-width: 479px) {
   .subTotal_totalBox{
    justify-content: start !important;
   } 
   .recurringSchedule_hideCalender{
    flex-direction: column !important;
   }
   .calender_head{
    font-size: 13px !important;
    margin-right: auto !important;
   }
   .hideCalenderOptionBtn{
    width: 76% !important;
    margin-left: auto;
    font-size: 13px !important;
   }
   .AdduserModelBoxes{
    margin-top: 30px !important;
   }
.cancelInvoiceBtn{
    width: 100% !important;
}
   .QuoteForCustomerName {
    font-size: 18px !important;
   }
   .contractTitleDescriptionTitle {
    gap: 15px !important;
   }
   .contractNUmber_doneBtn {
    gap: 10px !important;
   }
}

/* 375 */
@media (max-width: 424px) {
    .mailEditAction_contract{
        flex-direction: column;
        width: 100% !important;
    }
    
    .mailEditAction_contract .contractEditBtn {
        width: 100% !important;
    }
    
    .mailEditAction_contract .contractEditBtn .d-flex {
        justify-content: center !important;
    }
    
    .mailEditAction_contract .moreactionQuoteDetail {
        width: 100% !important;
    }
    .moreAction_contract{
        width: 100% !important;
    }
    .contract_AddContract_div{
        width: 180px !important;
        }
        .contractEditBtnSendMail{
            margin-top: 10px !important;
        }
      .contractTitleDescriptionTitle{
        flex-direction: column !important;
      }
      .contractaddressDetailss{
        flex-direction: column !important;
      }
      .widthOfdetailFull{
        width: 100% !important;
      }
    }
/* 320 */
@media (max-width: 374px) {
    .quotes.job {
        padding: 0 !important;
    }
    
    .quotes.job .card {
        padding: 8px 5px !important;
        margin: 5px 0 !important;
        border-radius: 10px !important;
    }
    
    .quotes.job .row .col {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    
    .title_descriptionInput{
        flex-direction: column;
    }
    .contractNUmber_doneBtn,.oneOffContarct_btn{
        flex-direction: column;
    }
    .quoteChange_btn{
        margin-top: 0px !important;
    }
    .recurring_nav{
        border-top-left-radius: 11px !important;
        border-bottom-left-radius: 11px  !important;

    }
 .saveMailContract{
    width: 100% !important;
 }
 .contractAllBtnToNaviGate{
    flex-direction: column !important;
}
.contractNameINputToWriteHere{
    width: 100% !important;
}
.quoteChange_btn{
    margin-top: -5% !important;
}
.contractNameINputToWriteHere {
    margin-top: -15px !important;
}
.oneoffsetBtnHereTonav{
    width: 100% !important;
}   
.contractDetailType{
    gap: 10px !important;
}
.contractInvoicePerVisit{
    flex-direction: column !important;
    gap: 0px !important;
}
.automaticalliyPayCheckBoxHere{
    margin-top: 0px !important;
}
.noPaymentMethodAndPara{
    width: 100% !important;
}
.ContractName{
    font-size: 17px !important;
    padding-left: 0px !important;
}
.svaeUserModelWidth{
    width: 100% !important;
}
.updateSaveBtnNaviGate{
    flex-direction: column !important;
    gap: 5px !important;
}
}

/* 280 */
@media (max-width: 319px) {
    .AdduserModelBox{
        margin-top: 14% !important;
    }
    .AdduserModelBoxes{
        margin-top: 40px !important;
    }
    .adduserModelTop{
        margin-top: 10px !important;
    }
    .QuoteForCustomerName {
        font-size: 16px !important;
    }
    .heading-five {
        font-size: 16px !important;
    }
    .contractTitleDescriptionTitle {
        gap: 10px !important;
    }
}

/* Contract add — header row: contract title | contract # (50/50 on lg+) */
.contract-header-job-row {
    color: rgba(6, 49, 100, 1);
}

.quote-number-aside {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.quote-number-aside__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #64748b;
    margin: 0;
    padding: 0;
}

.quote-number-aside__panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px 12px;
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    background: #f7f8fa;
    border: 1px solid #1a3f5c;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.quote-number-aside__value {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f2b46;
    letter-spacing: 0.02em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.quote-number-aside__change {
    margin: 0;
    padding: 0 4px 0 8px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #0f2b46;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
}

.quote-number-aside__change:hover {
    color: #0a4d8c;
}

.quote-number-aside__change:focus-visible {
    outline: 2px solid rgba(6, 49, 100, 0.35);
    outline-offset: 2px;
    border-radius: 4px;
}

.quote-number-aside__edit {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-number-aside__done {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .contract-number-aside-col {
        margin-top: 0 !important;
    }

    .contract-header-job-row .order-1 {
        margin-top: 1rem !important;
    }
}

/* Select Team popover — same JobberSearch as contract tables + consistent panel */
.add-contract-select-team-popover {
    min-width: min(100vw - 32px, 360px);
    max-width: 420px;
}

.add-contract-select-team-popover .add-contract-select-team-card.card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.add-contract-select-team-search {
    margin-left: 0 !important;
}

.add-contract-select-team-search .jobber-search-v2-wrap {
    width: 100%;
}

.add-contract-select-team-card__footer.card-footer {
    border-top: 1px solid #e5e7eb !important;
    padding: 12px 16px !important;
}

/* Select Team — list row typography */
.add-contract-select-team-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    margin: 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: default;
}

.add-contract-select-team-row:last-of-type {
    border-bottom: none;
}

.add-contract-select-team-row__checkbox {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: #0f2b46;
    cursor: pointer;
}

.add-contract-select-team-row__label {
    flex: 1 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    font-weight: inherit;
}

.add-contract-select-team-row__line1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1.35;
}

.add-contract-select-team-row__name {
    font-size: 15px;
    font-weight: 600;
    color: #0f2b46;
    letter-spacing: -0.01em;
}

.add-contract-select-team-row__badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.4;
}

.add-contract-select-team-row__email {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.4;
    word-break: break-word;
}


.add-contract-page .calenderHeight {
    height: auto;
    min-height: 460px !important;
    max-height: 720px !important;
    position: relative;
    margin: 8px 0;
}

.add-contract-page .calenderHeight >div {
    height: 460px !important;
}

@media screen and (max-width: 1200px) {
    .add-contract-page .calenderHeight {
        min-height: 410px !important;
    }
}

@media screen and (max-width: 992px) {
    .add-contract-page .calenderHeight {
        height: calc(100vh - 380px);
        min-height: 350px;
    }
}

@media screen and (max-width: 768px) {
    .add-contract-page .calenderHeight {
        min-height: 365px !important;
    }
}

@media screen and (max-width: 576px) {
    .add-contract-page .calenderHeight {
        height: calc(100vh - 320px);
        min-height: 350px;
    }
}

.add-contract-page .fc {
    background-color: #ffffff;
    background-color: var(--bg-white-color, #ffffff);
    border-radius: 4px;
    padding: 0;
    height: 100% !important;
    border: 1px solid #0f2b46;
    border: 1px solid var(--border-blue-color, #0f2b46);
    display: flex;
    flex-direction: column;
    max-width: 100% !important;
    position: relative;
    overflow: hidden;
}

.add-contract-page .fc .fc-toolbar {
    position: relative;
    background-color: #0f2b46;
    background-color: var(--bg-blue-color, #0f2b46);
    margin-bottom: 0 !important;
    padding: 16px 20px;
    border: none !important;
    border-radius: 4px 4px 0 0;
}

.add-contract-page .fc .fc-toolbar-title {
    font-size: 1.25rem !important;
    font-weight: 600;
    color: #ffffff;
    color: var(--text-white-color, #ffffff);
    letter-spacing: 0;
    text-transform: capitalize;
}
.add-contract-page .fc .fc-button-primary {
    background-color: #ffffff !important;
    background-color: var(--bg-white-color, #ffffff) !important;
    border: 1px solid #ffffff !important;
    border: 1px solid var(--border-white-color, #ffffff) !important;
    font-size: 0.9rem !important;
    padding: 6px 12px !important;
    height: 32px !important;
    border-radius: 4px !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #0f2b46 !important;
    color: var(--text-blue-color, #0f2b46) !important;
}

.add-contract-page .fc .fc-button-primary:active,
.add-contract-page .fc .fc-button-primary:focus {
    background-color: #ffffff !important;
    background-color: var(--bg-white-color, #ffffff) !important;
    color: #0f2b46 !important;
    color: var(--text-blue-color, #0f2b46) !important;
}

.add-contract-page .fc .fc-button-primary:active,
.add-contract-page .fc .fc-button-primary:focus {
    background-color: var(--bg-blue-color) !important;
    color: #ffffff !important;
    color: var(--text-white-color, #ffffff) !important;
}
.add-contract-page .fc-view-harness {
    height: calc(100% - 50px) !important;
    min-height: 300px;
}

.add-contract-page .fc .fc-view {
    height: 100% !important;
    overflow: hidden;
}

.add-contract-page .fc .fc-scroller {
    height: 100% !important;
    overflow: hidden auto !important;
}

.add-contract-page .fc-daygrid-body {
    width: 100% !important;
}

.add-contract-page .fc .fc-scrollgrid {
    border: 1px solid #0f2b46 !important;
    border: 1px solid var(--border-blue-color, #0f2b46) !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
}

.add-contract-page .fc .fc-scrollgrid-section > td {
    border: none !important;
    height: 100%;
}

.add-contract-page .fc .fc-daygrid-body {
    width: 100% !important;
    height: auto !important;
}

.add-contract-page .fc-scrollgrid-section-header {
    height: auto !important;
}

.add-contract-page .fc-scrollgrid-section-body {
    height: 100% !important;
}

.add-contract-page .fc-daygrid-body tr {
    height: auto !important;
}

.add-contract-page .fc .fc-daygrid-day {
    position: relative;
    min-height: 80px !important;
    height: auto !important;
    background-color: #ffffff;
    background-color: var(--bg-white-color, #ffffff);
    border: none !important;
    border-right: 1px solid rgba(6, 49, 100, 0.08) !important;
    border-bottom: 1px solid rgba(6, 49, 100, 0.08) !important;
    padding: 8px;
    z-index: 1;
}

.add-contract-page .fc .fc-daygrid-body tr:first-child .fc-daygrid-day {
    border-top: 1px solid rgba(6, 49, 100, 0.08) !important;
}

.add-contract-page .fc .fc-daygrid-body tr .fc-daygrid-day:first-child {
    border-left: 1px solid rgba(6, 49, 100, 0.08) !important;
}

.add-contract-page .fc .fc-daygrid-day[data-date$="6"],
.add-contract-page .fc .fc-daygrid-day[data-date$="7"] {
    border-right: none !important;
}

.add-contract-page .fc .fc-daygrid-day-frame {
    position: relative;
    height: 100%;
    min-height: 100%;
}

.add-contract-page .fc-event {
    background-color: #0f2b46;
    background-color: var(--bg-blue-color, #0f2b46);
    border: none;
    border-radius: 2px;
    margin: 2px 0;
    padding: 4px 6px;
    cursor: pointer;
    position: relative;
    z-index: 5;
    color: #ffffff;
    color: var(--text-white-color, #ffffff);
    font-size: 0.8rem;
    line-height: 1.3;
    transition: opacity 0.2s ease;
    opacity: 0.9;
}

.add-contract-page .fc .fc-daygrid-day:hover .fc-event {
    opacity: 1;
}

.add-contract-page .fc-event:hover {
    opacity: 1 !important;
}

.add-contract-page .fc-daygrid-more-link {
    color: var(--text-blue-color);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 4px;
    margin: 2px 0;
    cursor: pointer;
    position: relative;
    z-index: 102;
    background: transparent;
    border-radius: 3px;
    text-decoration: none;
}

.add-contract-page .fc-popover {
    z-index: 1000;
    border: 1px solid #0f2b46;
    border: 1px solid var(--border-blue-color, #0f2b46);
    border-radius: 4px;
    background: #ffffff;
    background: var(--bg-white-color, #ffffff);
}

.add-contract-page .fc-popover .fc-popover-header {
    background: var(--bg-blue-color);
    color: white;
    padding: 8px 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.add-contract-page .fc-popover .fc-popover-body {
    padding: 8px;
}


.add-contract-page .fc-view-harness {
    z-index: 1;
    position: relative;
}

.add-contract-page .fc-view {
    z-index: 2;
    position: relative;
}

.add-contract-page .fc-daygrid-day-events {
    min-height: 0;
    margin-bottom: 1px;
}

.add-contract-page .fc-daygrid-event-harness {
    margin: 1px 0;
}

.add-contract-page .fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(6, 49, 100, 0.02) !important;
    position: relative;
}

.add-contract-page .fc .fc-daygrid-day.fc-day-today::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* background-color: var(--border-blue-color); */
}
.add-contract-page .fc .fc-day-sat,
.add-contract-page .fc .fc-day-sun {
    background-color: rgba(6, 49, 100, 0.01) !important;
}

.add-contract-page .fc .fc-day-other {
    background-color: rgba(6, 49, 100, 0.02) !important;
}
.add-contract-page .fc .fc-scrollgrid-section-body > td {
    height: 100% !important;
}

.add-contract-page .fc .fc-scrollgrid-section table {
    width: 475px !important;
    height: 100% !important;
}

.add-contract-page .fc-dayGridMonth-view .fc-daygrid-body {
    height: auto !important;
}

.add-contract-page .fc-dayGridMonth-view .fc-scrollgrid-sync-table {
    height: auto !important;
}
.add-contract-page .fc th {
    padding: 12px 8px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    color: #0f2b46 !important;
    color: var(--text-blue-color, #0f2b46) !important;
    background-color: transparent !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-contract-page .fc .fc-daygrid-day-frame {
    padding: 6px !important;
    min-height: 80px !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.add-contract-page .fc .fc-daygrid-day-events {
    margin: 0 !important;
    padding: 2px !important;
    flex: 1 1;
    min-height: 0 !important;
    overflow: hidden;
}

.add-contract-page .fc .fc-daygrid-body-balanced .fc-daygrid-day-events {
    position: relative !important;
    overflow: hidden !important;
    min-height: auto !important;
}

.add-contract-page .fc .fc-daygrid-day-bottom {
    margin: 0 !important;
    padding: 1px !important;
}

.add-contract-page .fc .fc-daygrid-day-top {
    padding: 4px 2px !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    color: #0f2b46;
    color: var(--text-blue-color, #0f2b46);
    height: 28px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.add-contract-page .fc .fc-daygrid-day-top a {
    text-decoration: none !important;
    color: inherit;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 500;
}
.add-contract-page .fc .fc-day-today .fc-daygrid-day-top a {
    background-color: var(--bg-blue-color);
    color: #ffffff;
    color: var(--text-white-color, #ffffff);
    font-weight: 600;
}

.add-contract-page .fc .fc-day-other .fc-daygrid-day-top {
    opacity: 0.5;
    font-weight: 400;
}
.add-contract-page .fc .fc-day-sat .fc-daygrid-day-top,
.add-contract-page .fc .fc-day-sun .fc-daygrid-day-top {
    color: var(--text-blue-color);
    opacity: 0.75;
    font-weight: 500;
}

.add-contract-page .fc-event {
    margin: 2px 0 !important;
    padding: 4px 6px !important;
    font-size: 0.8rem !important;
    border-radius: 2px !important;
    background-color: #0f2b46 !important;
    background-color: var(--bg-blue-color, #0f2b46) !important;
    border: none !important;
    color: #ffffff !important;
    color: var(--text-white-color, #ffffff) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

.add-contract-page .fc .fc-day-today {
    background-color: rgba(6, 49, 100, 0.03) !important;
}

.add-contract-page .fc .fc-day-today:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* background-color: var(--border-blue-color); */
}

.add-contract-page .fc .fc-button-group {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    gap: 0.2rem;
}

.add-contract-page .fc-scroller::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.add-contract-page .fc-scroller::-webkit-scrollbar-track {
    background: transparent;
}

.add-contract-page .fc-scroller::-webkit-scrollbar-thumb {
    background-color: rgba(6, 49, 100, 0.2);
    border-radius: 3px;
}
@media screen and (max-width: 1200px) {
    .add-contract-page .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .add-contract-page .fc .fc-toolbar-title {
        font-size: 0.9rem !important;
        text-align: center;
    }

    .add-contract-page .fc .fc-button {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    .add-contract-page .fc .fc-daygrid-day {
        min-height: 60px !important;
    }

    .add-contract-page .fc .fc-daygrid-day-frame {
        min-height: 60px !important;
    }

    .add-contract-page .fc-event {
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
    }
}

@media screen and (max-width: 768px) {
    .add-contract-page .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .add-contract-page .fc .fc-toolbar-title {
        font-size: 0.98rem !important;
        text-align: center;
    }

    .add-contract-page .fc .fc-button {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    .add-contract-page .fc .fc-daygrid-day {
        min-height: 55px !important;
    }

    .add-contract-page .fc .fc-daygrid-day-frame {
        min-height: 55px !important;
        padding: 2px !important;
    }

    .add-contract-page .fc .fc-daygrid-day-top {
        font-size: 0.8rem !important;
        height: 20px;
    }

    .add-contract-page .fc-event {
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
    }
}

@media screen and (max-width: 576px) {
    .add-contract-page .fc .fc-daygrid-day {
        min-height: 50px !important;
    }
    
    .add-contract-page .fc .fc-daygrid-day-frame {
        min-height: 50px !important;
        padding: 1px !important;
    }
    
    .add-contract-page .fc .fc-daygrid-day-top {
        font-size: 0.75rem !important;
        height: 18px;
    }
}

.add-contract-page .fc-dayGridMonth-view .fc-daygrid-body {
    width: 100% !important;
}

.add-contract-page .fc-dayGridMonth-view .fc-scrollgrid-sync-table {
    width: 100% !important;
    min-width: 100% !important;
}

.add-contract-page .fc-dayGridMonth-view .fc-daygrid-body-balanced {
    width: 100% !important;
}

.add-contract-page .fc .fc-scrollgrid-section:last-child > td {
    border-bottom: none !important;
}

.add-contract-page .fc-theme-standard td {
    border: none !important;
}

.add-contract-page .fc-theme-standard th {
    border: none !important;
}

.add-contract-page .fc-theme-standard .fc-scrollgrid {
    border: none !important;
}

.add-contract-page .fc-event-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.83rem !important;
    line-height: 1.18 !important;
    padding: 1px 0 !important;
    font-weight: 500;
}

.add-contract-page .fc-event-time {
    font-size: 0.78rem !important;
    opacity: 0.9;
    font-weight: 400;
    letter-spacing: 0.01em;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.add-contract-page .fc .fc-daygrid-day-events {
    padding: 1px 0 !important;
    margin: 0 !important;
    position: relative;
    min-height: auto !important;
}

.add-contract-page .fc-daygrid-event-harness {
    margin: 1px 0 !important;
    overflow: hidden;
    min-height: auto !important;
}
.add-contract-page .fc .fc-scrollgrid-section > td,
.add-contract-page .fc .fc-scrollgrid-section > th {
    /* border-left: none !important;
    border-top: none !important; */
    border-top: 1px solid #0f2b46 !important ;
    border-bottom:0px solid #0f2b46 !important ;
}

.add-contract-page .fc-scrollgrid-sync-table {
    width: 100% !important;
    min-width: 100% !important;
}

.add-contract-page .fc .fc-scrollgrid-section table {
    width: 100% !important;
    table-layout: fixed !important;
}

.add-contract-page .fc .fc-col-header {
    width: 100% !important;
}

.add-contract-page .fc .fc-col-header-cell {
    width: calc(100% / 7) !important;
}

@media screen and (max-width: 768px) {
    .add-contract-page .fc th {
        font-size: 0.7rem !important;
        padding: 8px 2px !important;
    }
}

@media screen and (max-width: 576px) {
    .add-contract-page .fc th {
        font-size: 0.65rem !important;
        padding: 8px 1px !important;
        letter-spacing: 0;
    }
}
.add-contract-page .fc-timeGridWeek-view .fc-daygrid-day-events {
    position: relative !important;
    overflow: visible !important;
}

.add-contract-page .fc-timeGridWeek-view .fc-daygrid-event-harness {
    position: relative !important;
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-event {
    overflow: visible !important;
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-event .fc-event-main {
    padding: 2px 4px !important;
}
.add-contract-page .fc-timeGridWeek-view .fc-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-contract-page .fc-timeGridWeek-view {
    position: relative;
    overflow: hidden;
}


/* Week View Specific Styles */
.add-contract-page .fc-timeGridWeek-view .fc-timegrid-event {
    margin: 1px 2px;
    border-radius: 3px;
    padding: 2px;
    cursor: pointer;
    background-color: #0f2b46;
    background-color: var(--bg-blue-color, #0f2b46);
    border: none !important;
    color: #ffffff;
    color: var(--text-white-color, #ffffff);
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-event .fc-event-main {
    padding: 4px;
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-event .fc-event-title {
    font-weight: 500;
    font-size: 0.85rem;
    white-space: normal;
    overflow: visible;
    line-height: 1.4;
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-event .fc-event-time {
    font-size: 0.8rem;
    opacity: 0.9;
    padding-bottom: 2px;
}

/* Week View Grid Styling */
.add-contract-page .fc-timeGridWeek-view .fc-timegrid-slot {
    height: 40px !important;
    border-bottom: none !important;
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-col {
    border-left: none !important;
}

/* Week View Header */
.add-contract-page .fc-timeGridWeek-view .fc-col-header-cell {
    padding: 8px 4px;
    background-color: rgba(6, 49, 100, 0.02);
    border-bottom: none !important;
}

/* More Events Link in Week View */
.add-contract-page .fc-timeGridWeek-view .fc-daygrid-more-link {
    color: var(--text-blue-color);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 4px;
    margin: 2px;
    cursor: pointer;
    background: transparent;
    border-radius: 3px;
    display: inline-block;
    text-decoration: none;
}

/* Remove borders from Day View (uses same timegrid classes) */
.add-contract-page .fc-timeGridDay-view .fc-timegrid-event {
    border: none !important;
}

.add-contract-page .fc-timeGridDay-view .fc-timegrid-slot {
    border-bottom: none !important;
}

.add-contract-page .fc-timeGridDay-view .fc-timegrid-col {
    border-left: none !important;
}

.add-contract-page .fc-timeGridDay-view .fc-col-header-cell {
    border-bottom: none !important;
}
                
.add-contract-page .fc-timeGridWeek-view .fc-popover {
    border: 1px solid #0f2b46;
    border: 1px solid var(--border-blue-color, #0f2b46);
    border-radius: 4px;
    background: #ffffff;
    background: var(--bg-white-color, #ffffff);
    z-index: 1000;
}

.add-contract-page .fc-timeGridWeek-view .fc-popover .fc-popover-header {
    background: var(--bg-blue-color);
    color: white;
    padding: 8px 12px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 500;
}

.add-contract-page .fc-timeGridWeek-view .fc-popover .fc-popover-body {
    padding: 8px;
}

.add-contract-page .fc-timeGridWeek-view .fc-daygrid-day-events {
    margin: 0;
    padding: 4px 2px;
    position: relative;
}

.add-contract-page .fc-timeGridWeek-view .fc-daygrid-event-harness {
    margin: 2px 0;
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-now-indicator-line {
    border-color: var(--bg-blue-color);
}

.add-contract-page .fc-timeGridWeek-view .fc-timegrid-now-indicator-arrow {
    border-color: var(--bg-blue-color);
    background-color: var(--bg-blue-color);
}

.add-contract-page .fc-timeGridWeek-view .fc-event {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 1px 0;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: pointer;
    background-color: #0f2b46;
    background-color: var(--bg-blue-color, #0f2b46);
    color: #ffffff;
    color: var(--text-white-color, #ffffff);
    border: 1px solid #0f2b46;
    border: 1px solid var(--border-blue-color, #0f2b46);
}

.add-contract-page .fc-timeGridWeek-view .fc-daygrid-body {
    border-bottom: 2px solid rgba(6, 49, 100, 0.1);
}

.add-contract-page .fc-timeGridWeek-view .fc-daygrid-body .fc-daygrid-day-events {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 4px 2px;
}


.add-contract-page .fc-timeGridWeek-view .fc-daygrid-day {
    position: relative;
}

.add-contract-page .fc-dayGridWeek-view .fc-daygrid-day-events {
    min-height: 0;
    margin: 0;
    padding: 2px;
    position: relative;
}

.add-contract-page .fc-dayGridWeek-view .fc-daygrid-event-harness {
    margin: 1px 0;
}

.add-contract-page .fc-dayGridWeek-view .fc-event {
    margin: 1px 2px;
    padding: 2px 4px;
    border-radius: 3px;
    background-color: #0f2b46;
    background-color: var(--bg-blue-color, #0f2b46);
    border: 1px solid #0f2b46;
    border: 1px solid var(--border-blue-color, #0f2b46);
    cursor: pointer;
    color: #ffffff;
    color: var(--text-white-color, #ffffff);
}

.add-contract-page .fc-dayGridWeek-view .fc-event-title {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-contract-page .fc-dayGridWeek-view .fc-daygrid-more-link {
    color: var(--text-blue-color);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 4px;
    margin: 2px;
    cursor: pointer;
    background: transparent;
    border-radius: 3px;
    z-index: 4;
    text-decoration: none;
}

.add-contract-page .fc-dayGridWeek-view .fc-popover {
    border: 1px solid #0f2b46;
    border: 1px solid var(--border-blue-color, #0f2b46);
    border-radius: 4px;
    background: #ffffff;
    background: var(--bg-white-color, #ffffff);
    z-index: 1000;
}

.add-contract-page .fc-dayGridWeek-view .fc-popover .fc-popover-header {
    background: var(--bg-blue-color);
    color: white;
    padding: 8px 12px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 500;
}

.add-contract-page .fc-dayGridWeek-view .fc-popover .fc-popover-body {
    padding: 8px;
}

.add-contract-page .fc-dayGridWeek-view .fc-scrollgrid {
    border: 1px solid rgba(6, 49, 100, 0.12);
}

.add-contract-page .fc-dayGridWeek-view .fc-col-header-cell {
    background-color: rgba(6, 49, 100, 0.02);
    border-bottom: 2px solid rgba(6, 49, 100, 0.1);
    padding: 8px 4px;
}

.add-contract-page .fc-dayGridWeek-view .fc-daygrid-day.fc-day-today {
    background-color: rgba(6, 49, 100, 0.05);
}

.add-contract-page .fc-dayGridWeek-view .fc-daygrid-day-bottom {
    padding: 2px;
    min-height: 0;
    position: relative;
    z-index: 4;
}

.add-contract-page .fc-dayGridWeek-view .fc-view-harness {
    z-index: 1;
}

.add-contract-page .fc-dayGridWeek-view .fc-view {
    z-index: 2;
}

.add-contract-page .fc-dayGridWeek-view .fc-daygrid-body {
    z-index: 3;
}

/* ========== Add Contract calendar – responsive only (same as Admin schedule) ========== */
.add-contract-page .calendar-wrapper.add-contract-calendar {
    font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    width: 100%;
}
.add-contract-page .calendar-wrapper.add-contract-calendar.desktop-view { display: block; }
.add-contract-page .calendar-wrapper.add-contract-calendar.mobile-view { display: none; }

.add-contract-page .add-contract-calendar.mobile-view .mobile-schedule-inner {
    padding: 0 12px 24px;
    min-height: 100%;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-calendar-header {
    padding: 16px 0 12px;
    margin-bottom: 12px;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-date-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-bottom: 14px;
    border-radius: 8px;
    transition: background 0.2s;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-date-picker-trigger:hover {
    background: rgba(6, 49, 100, 0.06);
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-date-one-line {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f2b46;
    line-height: 1.3;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-date-picker-icon {
    color: #0f2b46;
    font-size: 1.4rem !important;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-day-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-day-dot {
    flex: 1 1;
    max-width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-day-dot.selected {
    background: #0f2b46;
    color: #fff;
    border-color: #0f2b46;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-event-list {
    padding: 0 0 16px;
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile:hover {
    box-shadow: var(--shadow-xl);
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile-time {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile-time .event-time-all-day {
    color: #0f2b46;
    font-weight: 700;
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile-time .event-time-range {
    color: #64748b;
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile-line {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.4;
}
.add-contract-page .add-contract-calendar.mobile-view .event-card-mobile .view-details-btn {
    align-self: flex-start;
    margin-top: 4px;
    background: #0f2b46;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}
.add-contract-page .add-contract-calendar.mobile-view .mobile-no-events {
    text-align: center;
    color: #666;
    padding: 24px 16px;
    margin: 0;
    font-size: 1rem;
}
.add-contract-page .mobile-date-picker-dialog.add-contract-date-picker-dialog .MuiDialogContent-root {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .add-contract-page .calendar-wrapper.add-contract-calendar.desktop-view {
        display: none !important;
    }
    .add-contract-page .calendar-wrapper.add-contract-calendar.mobile-view {
        display: block !important;
    }
    .add-contract-page .calenderHeight {
        min-height: 0 !important;
        height: auto !important;
    }
    .add-contract-page .calenderHeight > div {
        height: auto !important;
    }
}

@media screen and (min-width: 769px) {
    .add-contract-page .calendar-wrapper.add-contract-calendar.mobile-view {
        display: none !important;
    }
    .add-contract-page .calendar-wrapper.add-contract-calendar.desktop-view {
        display: block !important;
    }
}


.error-helper-text{
    font-size: 17px !important;
    margin-right: auto !important;
    display: contents !important;
}

/* 1680 */
@media (max-width: 1700px) {
}

/* 1500 */
@media (max-width: 1680px) {
}

/* 1440 */
@media (max-width: 1449px) {
}

/* 1280 */
@media (max-width: 1439px) {
}

/* 992 */
@media (max-width: 1279px) {
}
/* 992 */
@media (max-width: 1228px) {
 
}

/* 768 */
@media (max-width: 991px) {
  .hiren{
    display: none !important;
  }
  .navbar-setting{
    display: block !important;
}
.navbar-setting.dropdown-menu {
    width: 105% !important;
    margin-left: -12px;
    margin-top: 10px;
}
.product-service-table{
    width: 100%;
}
.settingsidebar-super{
    display: none !important;
}
.product-services-content{
    width: 100% !important;
}
.addproductbutton{
    width: 200px !important;
}
.add_product-service{
    white-space: nowrap;
}

}

/* 576 */
@media (max-width: 767px) {
   
}

/* 525 */
@media (max-width: 575px) {
    .product-service-p{
        flex-direction: column !important;
        gap: 10px !important;
    }
    .prodeuct_table{
        margin-right: auto !important;
    }
    .search_box{
        margin-left: auto;
        width: 68%;
    }
    .permission-search {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .permission-search > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    .prodeuct_table{
        margin-bottom: 10px !important;
    }
}

/* 480 */
@media (max-width: 524px) {
    .produc{
        font-size: 16px;
        margin-top: 5px;
    }
    .productservicesearch{
        margin-left: 0 !important;
    }
    .permission-search {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .permission-search > div {
        width: 100% !important;
    }
}

/* 425 */
@media (max-width: 479px) {
    .produc{
        font-size: 14px;
        margin-top: 5px;
    }
    .productservicesearch{
        margin-left: 0 !important;
    }
    .permission-search {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* 375 */
@media (max-width: 424px) {
    .produc{
        font-size: 14px;
        margin-top: 5px;
    }
}

/* 320 */
@media (max-width: 374px) {
    .produc{
        font-size: 14px;
        margin-top: 5px;
    }
    .productservicesearch{
        margin-left: 0 !important;
    }
    .add_product-service{
        font-size: 13px !important;
    }
  .cancel-service{
    padding: 10px;
  }
  .create-service{
    width: 100% !important;
    padding: 10px;
  }
  .add-product-service{
    font-size: 15px !important;
  }
  .dd_product-service{
    width: 60% !important;
  }
  .permission-search {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* 280 */
@media (max-width: 319px) {
    .produc{
        font-size: 14px;
        margin-top: 5px;
    }
    .productservicesearch{
        margin-left: 0 !important;
    }
    .permission-search {
        flex-direction: column !important;
        gap: 6px !important;
    }
}

.superadmin-companyy .CostPerUnit{
    height: 20px !important;
}
.superadmin-companyy .CostPerUnit{
height: 20px !important;
}

/* Materials & Labor — mobile expanded card (JobberTable ≤775px), matches Plan / Super Admin */
@media (max-width: 775px) {
  .materials-labor-jobber-table .jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .materials-labor-jobber-table .jobber-mobile-card__collapse-inner .jobber-mobile-card__actions .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

.materials-labor-jobber-table .jobber-mobile-card__collapse-inner .materials-labor-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.materials-labor-jobber-table .jobber-mobile-card__collapse-inner .materials-labor-mobile-actions.customer-list-actions-mobile .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
  .materials-labor-jobber-table .jobber-mobile-card__collapse-inner .materials-labor-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .materials-labor-jobber-table .jobber-mobile-card__collapse-inner .materials-labor-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

/* Taxable / Non-Taxable in card header (next to chevron) — compact pastel badge, aligned with action tiles */
.materials-labor-jobber-table .jobber-mobile-card__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.materials-labor-jobber-table .jobber-mobile-card__status .jobber-status-pill {
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid transparent !important;
}

.materials-labor-jobber-table .jobber-mobile-card__status .jobber-status-pill--active {
  border-color: rgba(5, 150, 105, 0.25) !important;
}

.materials-labor-jobber-table .jobber-mobile-card__status .jobber-status-pill--scheduled {
  border-color: rgba(30, 64, 175, 0.2) !important;
}

@media (max-width: 380px) {
  .materials-labor-jobber-table .jobber-mobile-card__status .jobber-status-pill {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

:root{--puck-color-rose-01: #4a001c;--puck-color-rose-02: #670833;--puck-color-rose-03: #87114c;--puck-color-rose-04: #a81a66;--puck-color-rose-05: #bc5089;--puck-color-rose-06: #cc7ca5;--puck-color-rose-07: #d89aba;--puck-color-rose-08: #e3b8cf;--puck-color-rose-09: #efd6e3;--puck-color-rose-10: #f6eaf1;--puck-color-rose-11: #faf4f8;--puck-color-rose-12: #fef8fc;--puck-color-azure-01: #00175d;--puck-color-azure-02: #002c77;--puck-color-azure-03: #014292;--puck-color-azure-04: #0158ad;--puck-color-azure-05: #3479be;--puck-color-azure-06: #6499cf;--puck-color-azure-07: #88b0da;--puck-color-azure-08: #abc7e5;--puck-color-azure-09: #cfdff0;--puck-color-azure-10: #e7eef7;--puck-color-azure-11: #f3f6fb;--puck-color-azure-12: #f7faff;--puck-color-green-01: #002000;--puck-color-green-02: #043604;--puck-color-green-03: #084e08;--puck-color-green-04: #0c680c;--puck-color-green-05: #1d882f;--puck-color-green-06: #2faa53;--puck-color-green-07: #56c16f;--puck-color-green-08: #7dd78b;--puck-color-green-09: #b8e8bf;--puck-color-green-10: #ddf3e0;--puck-color-green-11: #eff8f0;--puck-color-green-12: #f3fcf4;--puck-color-yellow-01: #211000;--puck-color-yellow-02: #362700;--puck-color-yellow-03: #4c4000;--puck-color-yellow-04: #645a00;--puck-color-yellow-05: #877614;--puck-color-yellow-06: #ab9429;--puck-color-yellow-07: #bfac4e;--puck-color-yellow-08: #d4c474;--puck-color-yellow-09: #e6deb1;--puck-color-yellow-10: #f3efd9;--puck-color-yellow-11: #f9f7ed;--puck-color-yellow-12: #fcfaf0;--puck-color-red-01: #4c0000;--puck-color-red-02: #6a0a10;--puck-color-red-03: #8a1422;--puck-color-red-04: #ac1f35;--puck-color-red-05: #bf5366;--puck-color-red-06: #ce7e8e;--puck-color-red-07: #d99ca8;--puck-color-red-08: #e4b9c2;--puck-color-red-09: #efd7db;--puck-color-red-10: #f6eaec;--puck-color-red-11: #faf4f5;--puck-color-red-12: #fff9fa;--puck-color-grey-01: #181818;--puck-color-grey-02: #292929;--puck-color-grey-03: #404040;--puck-color-grey-04: #5a5a5a;--puck-color-grey-05: #767676;--puck-color-grey-06: #949494;--puck-color-grey-07: #ababab;--puck-color-grey-08: #c3c3c3;--puck-color-grey-09: #dcdcdc;--puck-color-grey-10: #efefef;--puck-color-grey-11: #f5f5f5;--puck-color-grey-12: #fafafa;--puck-color-black: #000000;--puck-color-white: #ffffff}:root{--puck-font-size-scale-base-unitless: 12;--puck-font-size-xxxs-unitless: 12;--puck-font-size-xxs-unitless: 14;--puck-font-size-xs-unitless: 16;--puck-font-size-s-unitless: 18;--puck-font-size-m-unitless: 21;--puck-font-size-l-unitless: 24;--puck-font-size-xl-unitless: 28;--puck-font-size-xxl-unitless: 36;--puck-font-size-xxxl-unitless: 48;--puck-font-size-xxxxl-unitless: 56;--puck-font-size-xxxs: calc(1rem * var(--puck-font-size-xxxs-unitless) / 16);--puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);--puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);--puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);--puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);--puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);--puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);--puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);--puck-font-size-xxxl: calc(1rem * var(--puck-font-size-xxxl-unitless) / 16);--puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );--puck-font-size-base: var(--puck-font-size-xs);--line-height-reset: 1;--line-height-xs: calc( var(--space-m-unitless) / var(--puck-font-size-m-unitless) );--line-height-s: calc( var(--space-m-unitless) / var(--puck-font-size-s-unitless) );--line-height-m: calc( var(--space-m-unitless) / var(--puck-font-size-xs-unitless) );--line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );--line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );--line-height-base: var(--line-height-m);--fallback-font-stack: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;--puck-font-family: Inter, var(--fallback-font-stack);--puck-font-family-monospaced: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace}@supports (font-variation-settings: normal){:root{--puck-font-family: InterVariable, var(--fallback-font-stack)}}#frame-root{height:1px;min-height:100vh}[data-puck-entry]{position:relative;z-index:0}._ActionBar_1nmyk_1{align-items:center;cursor:default;display:flex;width:auto;padding:4px;padding-inline-start:0;padding-inline-end:0;border-radius:8px;background:#181818;background:var(--puck-color-grey-01);color:#ffffff;color:var(--puck-color-white);font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-family:var(--puck-font-family);min-height:26px}._ActionBar-label_1nmyk_18{color:#c3c3c3;color:var(--puck-color-grey-08);font-size:calc(1rem * 12 / 16);font-size:var(--puck-font-size-xxxs);font-weight:500;padding-inline-start:8px;padding-inline-end:8px;margin-inline-start:4px;margin-inline-end:4px;text-overflow:ellipsis;white-space:nowrap}._ActionBarAction_1nmyk_30+._ActionBar-label_1nmyk_18{padding-inline-start:0}._ActionBar-label_1nmyk_18+._ActionBarAction_1nmyk_30{margin-inline-start:-4px}._ActionBar-group_1nmyk_38{align-items:center;border-inline-start:.5px solid #767676;border-inline-start:.5px solid var(--puck-color-grey-05);display:flex;height:100%;padding-inline-start:4px;padding-inline-end:4px}._ActionBar-group_1nmyk_38:first-of-type{border-inline-start:0}._ActionBar-group_1nmyk_38:empty{display:none}._ActionBarAction_1nmyk_30{background:transparent;border:none;color:#c3c3c3;color:var(--puck-color-grey-08);cursor:pointer;padding:6px;margin-inline-start:4px;margin-inline-end:4px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:color 50ms ease-in}._ActionBarAction--disabled_1nmyk_71{cursor:auto;color:#949494;color:var(--puck-color-grey-06)}._ActionBarAction_1nmyk_30 svg{max-width:none!important}._ActionBarAction_1nmyk_30:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:-2px}@media(hover:hover)and (pointer:fine){._ActionBarAction_1nmyk_30:hover:not(._ActionBarAction--disabled_1nmyk_71){color:#6499cf;color:var(--puck-color-azure-06);transition:none}}._ActionBarAction_1nmyk_30:active:not(._ActionBarAction--disabled_1nmyk_71),._ActionBarAction--active_1nmyk_93{color:#88b0da;color:var(--puck-color-azure-07);transition:none}._ActionBar-group_1nmyk_38 *{margin:0}._ActionBar-separator_1nmyk_102{background:#767676;background:var(--puck-color-grey-05);margin-inline:4px;width:.5px;height:100%}._InputWrapper_bsxfo_1+._InputWrapper_bsxfo_1{margin-top:12px}._Input-label_bsxfo_5{align-items:center;color:#5a5a5a;color:var(--puck-color-grey-04);display:flex;padding-bottom:12px;font-size:calc(1rem * 14 / 16);font-size:var(--puck-font-size-xxs);font-weight:600}._Input-labelIcon_bsxfo_14{color:#ababab;color:var(--puck-color-grey-07);display:flex;margin-inline-end:4px;padding-inline-start:4px}._Input-disabledIcon_bsxfo_21{color:#767676;color:var(--puck-color-grey-05);margin-inline-start:auto}._Input-input_bsxfo_26{background:#ffffff;background:var(--puck-color-white);border-width:1px;border-style:solid;border-color:#dcdcdc;border-color:var(--puck-color-grey-09);border-radius:4px;box-sizing:border-box;font-family:inherit;font-size:16px;padding:12px 15px;transition:border-color 50ms ease-in;width:100%;max-width:100%}@media(min-width:458px){._Input-input_bsxfo_26{font-size:14px}}select._Input-input_bsxfo_26{appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27 fill=%27%23c3c3c3%27><polygon points=%270,0 100,0 50,50%27/></svg>") no-repeat;background-size:12px;background-position:calc(100% - 12px) calc(50% + 3px);background-repeat:no-repeat;background-color:#ffffff;background-color:var(--puck-color-white);cursor:pointer}select._Input-input_bsxfo_26:dir(rtl){background-position:12px calc(50% + 3px)}@media(hover:hover)and (pointer:fine){._Input_bsxfo_1:has(>input):hover ._Input-input_bsxfo_26:not([readonly]),._Input_bsxfo_1:has(>textarea):hover ._Input-input_bsxfo_26:not([readonly]){border-color:#767676;border-color:var(--puck-color-grey-05);transition:none}._Input_bsxfo_1:has(>select):hover ._Input-input_bsxfo_26:not([disabled]){background-color:#f7faff;background-color:var(--puck-color-azure-12);background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27 fill=%27%235a5a5a%27><polygon points=%270,0 100,0 50,50%27/></svg>");border-color:#767676;border-color:var(--puck-color-grey-05);transition:none}}._Input-input_bsxfo_26:focus{border-color:#767676;border-color:var(--puck-color-grey-05);outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);transition:none}._Input--readOnly_bsxfo_82>._Input-input_bsxfo_26,._Input--readOnly_bsxfo_82>select._Input-input_bsxfo_26{background-color:#f5f5f5;background-color:var(--puck-color-grey-11);border-color:#dcdcdc;border-color:var(--puck-color-grey-09);color:#5a5a5a;color:var(--puck-color-grey-04);cursor:default;opacity:1;outline:0;transition:none}._Input-radioGroupItems_bsxfo_93{display:flex;border:1px solid #dcdcdc;border:1px solid var(--puck-color-grey-09);border-radius:4px;flex-wrap:wrap}._Input-radio_bsxfo_93{border-inline-end:1px solid #dcdcdc;border-inline-end:1px solid var(--puck-color-grey-09);flex-grow:1}._Input-radio_bsxfo_93:first-of-type{border-bottom-left-radius:4px;border-top-left-radius:4px}._Input-radio_bsxfo_93:first-of-type ._Input-radioInner_bsxfo_110{border-bottom-left-radius:3px;border-top-left-radius:3px}._Input-radio_bsxfo_93:last-of-type{border-bottom-right-radius:4px;border-inline-end:0;border-top-right-radius:4px}._Input-radio_bsxfo_93:last-of-type ._Input-radioInner_bsxfo_110{border-bottom-right-radius:3px;border-top-right-radius:3px}._Input-radioInner_bsxfo_110{background-color:#ffffff;background-color:var(--puck-color-white);color:#5a5a5a;color:var(--puck-color-grey-04);cursor:pointer;font-size:calc(1rem * 12 / 16);font-size:var(--puck-font-size-xxxs);padding:8px 12px;text-align:center;transition:background-color 50ms ease-in}._Input-radio_bsxfo_93:has(:focus-visible){outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px;position:relative}@media(hover:hover)and (pointer:fine){._Input-radioInner_bsxfo_110:hover{background-color:#f7faff;background-color:var(--puck-color-azure-12);transition:none}}._Input--readOnly_bsxfo_82 ._Input-radioInner_bsxfo_110{background-color:#ffffff;background-color:var(--puck-color-white);color:#5a5a5a;color:var(--puck-color-grey-04);cursor:default}._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155:checked~._Input-radioInner_bsxfo_110{background-color:#f3f6fb;background-color:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04);font-weight:500}._Input--readOnly_bsxfo_82 ._Input-radioInput_bsxfo_155:checked~._Input-radioInner_bsxfo_110{background-color:#f5f5f5;background-color:var(--puck-color-grey-11);color:#5a5a5a;color:var(--puck-color-grey-04)}._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}textarea._Input-input_bsxfo_26{margin-bottom:-4px}._ArrayField_1vaho_5{display:flex;flex-direction:column;background:#f3f6fb;background:var(--puck-color-azure-11);border:1px solid #dcdcdc;border:1px solid var(--puck-color-grey-09);border-radius:4px}._ArrayField--isDraggingFrom_1vaho_13{background-color:#f3f6fb;background-color:var(--puck-color-azure-11);overflow:hidden}._ArrayField-addButton_1vaho_18{background-color:#ffffff;background-color:var(--puck-color-white);border:none;border-radius:3px;display:flex;color:#3479be;color:var(--puck-color-azure-05);justify-content:center;cursor:pointer;width:100%;margin:0;padding:14px;text-align:left;transition:background-color 50ms ease-in}._ArrayField--hasItems_1vaho_33>._ArrayField-addButton_1vaho_18{border-top:1px solid #dcdcdc;border-top:1px solid var(--puck-color-grey-09);border-top-left-radius:0;border-top-right-radius:0}._ArrayField-addButton_1vaho_18:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px;position:relative}@media(hover:hover)and (pointer:fine){._ArrayField_1vaho_5:not(._ArrayField--isDraggingFrom_1vaho_13)>._ArrayField-addButton_1vaho_18:hover{background:#f7faff;background:var(--puck-color-azure-12);color:#0158ad;color:var(--puck-color-azure-04);transition:none}}._ArrayField_1vaho_5:not(._ArrayField--isDraggingFrom_1vaho_13)>._ArrayField-addButton_1vaho_18:active{background:#f3f6fb;background:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04);transition:none}._ArrayField-inner_1vaho_59{margin-top:-1px}._ArrayFieldItem_1vaho_67{border-top-left-radius:3px;border-top-right-radius:3px;display:block;position:relative}._ArrayFieldItem_1vaho_67{border-top:1px solid #dcdcdc;border-top:1px solid var(--puck-color-grey-09)}._ArrayFieldItem--isDragging_1vaho_78{border-top:transparent}._ArrayFieldItem--isExpanded_1vaho_82:before{display:none}._ArrayFieldItem--isExpanded_1vaho_82{border-bottom:0;outline-offset:0px!important;outline:1px solid #88b0da!important;outline:1px solid var(--puck-color-azure-07)!important;z-index:2}._ArrayFieldItem--isDragging_1vaho_78{outline:2px #cfdff0 solid!important;outline:2px var(--puck-color-azure-09) solid!important}._ArrayFieldItem--isDragging_1vaho_78 ._ArrayFieldItem-summary_1vaho_97:active{background-color:#ffffff;background-color:var(--puck-color-white)}._ArrayFieldItem_1vaho_67+._ArrayFieldItem_1vaho_67{border-top-left-radius:0;border-top-right-radius:0}._ArrayFieldItem-summary_1vaho_97{background:#ffffff;background:var(--puck-color-white);color:#5a5a5a;color:var(--puck-color-grey-04);cursor:pointer;display:flex;align-items:center;gap:2px;justify-content:space-between;font-size:calc(1rem * 14 / 16);font-size:var(--puck-font-size-xxs);list-style:none;padding:12px 15px;position:relative;overflow:hidden;transition:background-color 50ms ease-in}._ArrayFieldItem--noFields_1vaho_122>._ArrayFieldItem-summary_1vaho_97{cursor:grab}._ArrayFieldItem_1vaho_67:first-of-type>._ArrayFieldItem-summary_1vaho_97{border-top-left-radius:3px;border-top-right-radius:3px}._ArrayField--addDisabled_1vaho_131>._ArrayField-inner_1vaho_59>._ArrayFieldItem_1vaho_67:last-of-type:not(._ArrayFieldItem--isExpanded_1vaho_82)>._ArrayFieldItem-summary_1vaho_97{border-bottom-left-radius:3px;border-bottom-right-radius:3px}._ArrayField--addDisabled_1vaho_131>._ArrayField-inner_1vaho_59>._ArrayFieldItem--isExpanded_1vaho_82:last-of-type{border-bottom-left-radius:3px;border-bottom-right-radius:3px}._ArrayFieldItem-summary_1vaho_97:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px}@media(hover:hover)and (pointer:fine){._ArrayFieldItem-summary_1vaho_97:hover{background-color:#f7faff;background-color:var(--puck-color-azure-12);transition:none}}._ArrayFieldItem-summary_1vaho_97:active{background-color:#f3f6fb;background-color:var(--puck-color-azure-11);transition:none}._ArrayFieldItem--isExpanded_1vaho_82>._ArrayFieldItem-summary_1vaho_97{background:#f3f6fb;background:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04);font-weight:600;transition:none}._ArrayFieldItem-body_1vaho_170{background:#ffffff;background:var(--puck-color-white);display:none}._ArrayFieldItem--isExpanded_1vaho_82>._ArrayFieldItem-body_1vaho_170{display:block}._ArrayFieldItem-fieldset_1vaho_179{border:none;border-top:1px solid #dcdcdc;border-top:1px solid var(--puck-color-grey-09);margin:0;min-width:0;padding:16px 15px}._ArrayFieldItem-rhs_1vaho_187{display:flex;gap:4px;align-items:center}._ArrayFieldItem-actions_1vaho_193{color:#5a5a5a;color:var(--puck-color-grey-04);display:flex;gap:4px;opacity:0}._ArrayFieldItem-summary_1vaho_97:focus-within>._ArrayFieldItem-rhs_1vaho_187>._ArrayFieldItem-actions_1vaho_193,._ArrayFieldItem-summary_1vaho_97:hover>._ArrayFieldItem-rhs_1vaho_187>._ArrayFieldItem-actions_1vaho_193{opacity:1}._IconButton_ffob9_1{align-items:center;background:transparent;border:none;border-radius:4px;color:currentColor;display:flex;font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-family:var(--puck-font-family);justify-content:center;padding:4px;transition:background-color 50ms ease-in,color 50ms ease-in}._IconButton--active_ffob9_14{color:#0158ad;color:var(--puck-color-azure-04)}._IconButton_ffob9_1:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:-2px}@media(hover:hover)and (pointer:fine){._IconButton_ffob9_1:hover:not(._IconButton--disabled_ffob9_24){background:#efefef;background:var(--puck-color-grey-10);color:#0158ad;color:var(--puck-color-azure-04);cursor:pointer;transition:none}}._IconButton_ffob9_1:active{background:#f3f6fb;background:var(--puck-color-azure-11);transition:none}._IconButton-title_ffob9_37{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}._IconButton--disabled_ffob9_24{color:#ababab;color:var(--puck-color-grey-07)}@keyframes _loader-animation_nacdm_1{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.8)}to{transform:rotate(360deg) scale(1)}}._Loader_nacdm_13{background:transparent;border-radius:100%;border:2px solid currentColor;border-bottom-color:transparent;display:inline-block;animation:_loader-animation_nacdm_1 1s 0s infinite linear;animation-fill-mode:both}._DragIcon_17p8x_1{color:#767676;color:var(--puck-color-grey-05);cursor:grab;padding:4px;border-radius:4px}._DragIcon--disabled_17p8x_8{cursor:no-drop}@media(hover:hover)and (pointer:fine){._DragIcon_17p8x_1:not(._DragIcon--disabled_17p8x_8):hover{color:#3479be;color:var(--puck-color-azure-05);background-color:#f7faff;background-color:var(--puck-color-azure-12)}}[data-dnd-placeholder] *{opacity:0!important}[data-dnd-placeholder]{background:#cfdff0!important;background:var(--puck-color-azure-09)!important;border:none!important;color:#0000!important;opacity:.3!important;outline:none!important;transition:none!important}._ExternalInput-actions_91ls0_1{display:flex}._ExternalInput-button_91ls0_5{display:flex;gap:8px;align-items:center;justify-content:center;background-color:#ffffff;background-color:var(--puck-color-white);border:1px solid #dcdcdc;border:1px solid var(--puck-color-grey-09);border-radius:4px;color:#0158ad;color:var(--puck-color-azure-04);padding:12px 16px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;transition:background-color 50ms ease-in;position:relative;overflow:hidden;flex-grow:1}._ExternalInput--dataSelected_91ls0_24 ._ExternalInput-button_91ls0_5{color:#404040;color:var(--puck-color-grey-03);display:block;border-top-right-radius:0;border-bottom-right-radius:0}._ExternalInput--readOnly_91ls0_31 ._ExternalInput-button_91ls0_5{background-color:#f5f5f5;background-color:var(--puck-color-grey-11)}._ExternalInput-detachButton_91ls0_35{border:1px solid #dcdcdc;border:1px solid var(--puck-color-grey-09);border-top-right-radius:4px;border-bottom-right-radius:4px;background-color:#fafafa;background-color:var(--puck-color-grey-12);color:#767676;color:var(--puck-color-grey-05);display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 12px;position:relative;transition:background-color 50ms ease-in,color 50ms ease-in;margin-inline-start:-1px}._ExternalInput-button_91ls0_5:focus-visible,._ExternalInput-detachButton_91ls0_35:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px;z-index:1}@media(hover:hover)and (pointer:fine){._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:hover,._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover{background:#f7faff;background:var(--puck-color-azure-12);transition:none}._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover{color:#0158ad;color:var(--puck-color-azure-04)}}._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:active,._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:active{background:#f3f6fb;background:var(--puck-color-azure-11);transition:none}._ExternalInputModal_91ls0_79{color:#000000;color:var(--puck-color-black);display:grid;grid-template-rows:min-content minmax(128px,100%) min-content;grid-template-columns:100%;position:relative;min-height:50dvh;max-height:90dvh}._ExternalInputModal-grid_91ls0_89{display:flex;flex-direction:column}@media(min-width:458px){._ExternalInputModal-grid_91ls0_89{display:grid;grid-template-columns:100%}._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-grid_91ls0_89{grid-template-columns:25% 75%}}._ExternalInputModal-filters_91ls0_105{border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09)}._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105{display:none}@media(min-width:458px){._ExternalInputModal-filters_91ls0_105{border-inline-end:1px solid #dcdcdc;border-inline-end:1px solid var(--puck-color-grey-09);display:none}._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105{display:block}}._ExternalInputModal-masthead_91ls0_124{background-color:#fafafa;background-color:var(--puck-color-grey-12);border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09);display:flex;flex-wrap:wrap;gap:24px;padding:24px}._ExternalInputModal-tableWrapper_91ls0_133{position:relative;overflow-x:auto;overflow-y:auto;flex-grow:1}._ExternalInputModal-table_91ls0_133{border-collapse:inherit;border-spacing:0px;color:#292929;color:var(--puck-color-grey-02);position:relative;z-index:0;min-width:100%}._ExternalInputModal-thead_91ls0_149{background-color:#ffffff;background-color:var(--puck-color-white);position:sticky;top:0;z-index:1}._ExternalInputModal-th_91ls0_149{border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09);color:#5a5a5a;color:var(--puck-color-grey-04);font-weight:500;font-size:14px;padding:16px 24px}._ExternalInputModal-td_91ls0_164{border-bottom:1px solid #efefef;border-bottom:1px solid var(--puck-color-grey-10);padding:16px 24px}._ExternalInputModal-tr_91ls0_169 ._ExternalInputModal-td_91ls0_164:first-of-type{font-weight:500;width:1%;white-space:nowrap}@media(hover:hover)and (pointer:fine){._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover{background:#f7faff;background:var(--puck-color-azure-12);color:#0158ad;color:var(--puck-color-azure-04);cursor:pointer;position:relative;margin-inline-start:-5px}._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover ._ExternalInputModal-td_91ls0_164:first-of-type{border-inline-start:4px solid #0158ad;border-inline-start:4px solid var(--puck-color-azure-04);padding-inline-start:20px}}._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:last-of-type ._ExternalInputModal-td_91ls0_164{border-bottom:none}._ExternalInputModal-tableWrapper_91ls0_133{display:none}._ExternalInputModal--hasData_91ls0_202 ._ExternalInputModal-tableWrapper_91ls0_133{display:block}._ExternalInputModal-loadingBanner_91ls0_206{display:none;background-color:color-mix(in srgb,#ffffff 90%,transparent);background-color:color-mix(in srgb,var(--puck-color-white) 90%,transparent);padding:64px;align-items:center;justify-content:center;position:absolute;inset:0}._ExternalInputModal--isLoading_91ls0_223 ._ExternalInputModal-loadingBanner_91ls0_206{display:flex}._ExternalInputModal-searchForm_91ls0_227{display:flex;flex-wrap:wrap;gap:12px;flex-grow:1}@media(min-width:458px){._ExternalInputModal-searchForm_91ls0_227{flex-wrap:nowrap}}._ExternalInputModal-search_91ls0_227{display:flex;background:#ffffff;background:var(--puck-color-white);border-width:1px;border-style:solid;border-color:#dcdcdc;border-color:var(--puck-color-grey-09);border-radius:4px;flex-grow:1;transition:border-color 50ms ease-in}._ExternalInputModal-search_91ls0_227:focus-within{border-color:#767676;border-color:var(--puck-color-grey-05);outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);transition:none}@media(hover:hover)and (pointer:fine){._ExternalInputModal-search_91ls0_227:hover{border-color:#767676;border-color:var(--puck-color-grey-05);transition:none}}._ExternalInputModal-searchIcon_91ls0_264{align-items:center;background:#fafafa;background:var(--puck-color-grey-12);border-bottom-left-radius:4px;border-top-left-radius:4px;border-inline-end:1px solid #dcdcdc;border-inline-end:1px solid var(--puck-color-grey-09);color:#ababab;color:var(--puck-color-grey-07);display:flex;justify-content:center;padding:12px 15px;transition:color 50ms ease-in}._ExternalInputModal-search_91ls0_227:focus-within ._ExternalInputModal-searchIcon_91ls0_264{color:#5a5a5a;color:var(--puck-color-grey-04);transition:none}@media(hover:hover)and (pointer:fine){._ExternalInputModal-search_91ls0_227:hover ._ExternalInputModal-searchIcon_91ls0_264{color:#5a5a5a;color:var(--puck-color-grey-04);transition:none}}._ExternalInputModal-searchIconText_91ls0_289{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}._ExternalInputModal-searchInput_91ls0_299{border:none;border-radius:4px;background:#ffffff;background:var(--puck-color-white);font-family:inherit;font-size:14px;padding:12px 15px;width:100%}._ExternalInputModal-searchInput_91ls0_299:focus{outline:0}._ExternalInputModal-searchActions_91ls0_313{display:flex;gap:8px;height:44px;width:100%}@media(min-width:458px){._ExternalInputModal-searchActions_91ls0_313{width:auto}}._ExternalInputModal-searchActionIcon_91ls0_326{align-self:center}._ExternalInputModal-footerContainer_91ls0_330{background-color:#fafafa;background-color:var(--puck-color-grey-12);border-top:1px solid #dcdcdc;border-top:1px solid var(--puck-color-grey-09);color:#5a5a5a;color:var(--puck-color-grey-04);padding:16px}._ExternalInputModal-footer_91ls0_330{font-weight:500;font-size:14px;text-align:right}._ExternalInputModal-field_91ls0_343{color:#5a5a5a;color:var(--puck-color-grey-04);margin:16px 16px 12px;display:block}._Modal_ikbaj_1{background:color-mix(in srgb,#000000 75%,transparent);background:color-mix(in srgb,var(--puck-color-black) 75%,transparent);display:none;justify-content:center;align-items:center;position:fixed;inset:0;z-index:1;padding:32px}._Modal--isOpen_ikbaj_15{display:flex}._Modal-inner_ikbaj_19{width:100%;max-width:1024px;border-radius:8px;overflow:hidden;background:#ffffff;background:var(--puck-color-white);display:flex;flex-direction:column;max-height:90dvh}._Heading_qxrry_1{display:block;color:#000000;color:var(--puck-color-black);font-weight:700;margin:0}._Heading_qxrry_1 b{font-weight:700}._Heading--xxxxl_qxrry_12{font-size:calc( 1rem * 56 / 16 );font-size:var(--puck-font-size-xxxxl);letter-spacing:.08ch;font-weight:800}._Heading--xxxl_qxrry_18{font-size:calc(1rem * 48 / 16);font-size:var(--puck-font-size-xxxl)}._Heading--xxl_qxrry_22{font-size:calc(1rem * 36 / 16);font-size:var(--puck-font-size-xxl)}._Heading--xl_qxrry_26{font-size:calc(1rem * 28 / 16);font-size:var(--puck-font-size-xl)}._Heading--l_qxrry_30{font-size:calc(1rem * 24 / 16);font-size:var(--puck-font-size-l)}._Heading--m_qxrry_34{font-size:calc(1rem * 21 / 16);font-size:var(--puck-font-size-m)}._Heading--s_qxrry_38{font-size:calc(1rem * 18 / 16);font-size:var(--puck-font-size-s)}._Heading--xs_qxrry_42{font-size:calc(1rem * 16 / 16);font-size:var(--puck-font-size-xs)}._Button_10byl_1{appearance:none;background:none;border:1px solid transparent;border-radius:4px;color:#ffffff;color:var(--puck-color-white);display:inline-flex;align-items:center;gap:8px;letter-spacing:.05ch;font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-family:var(--puck-font-family);font-size:14px;font-weight:400;box-sizing:border-box;line-height:1;text-align:center;text-decoration:none;transition:background-color 50ms ease-in;cursor:pointer;white-space:nowrap;margin:0}._Button_10byl_1:hover,._Button_10byl_1:active{transition:none}._Button--medium_10byl_29{min-height:34px;padding-bottom:7px;padding-inline-start:19px;padding-inline-end:19px;padding-top:7px}._Button--large_10byl_37{padding-bottom:11px;padding-inline-start:19px;padding-inline-end:19px;padding-top:11px}._Button-icon_10byl_44{margin-top:2px}._Button--primary_10byl_48{background:#0158ad;background:var(--puck-color-azure-04)}._Button_10byl_1:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px}@media(hover:hover)and (pointer:fine){._Button--primary_10byl_48:hover{background-color:#014292;background-color:var(--puck-color-azure-03)}}._Button--primary_10byl_48:active{background-color:#002c77;background-color:var(--puck-color-azure-02)}._Button--secondary_10byl_67{border:1px solid currentColor;color:currentColor}@media(hover:hover)and (pointer:fine){._Button--secondary_10byl_67:hover{background-color:#f7faff;background-color:var(--puck-color-azure-12);color:#000000;color:var(--puck-color-black)}}._Button--secondary_10byl_67:active{background-color:#f3f6fb;background-color:var(--puck-color-azure-11);color:#000000;color:var(--puck-color-black)}._Button--flush_10byl_84{border-radius:0}._Button--disabled_10byl_88,._Button--disabled_10byl_88:hover{background-color:#ababab;background-color:var(--puck-color-grey-07);color:#404040;color:var(--puck-color-grey-03);cursor:not-allowed}._Button--fullWidth_10byl_95{justify-content:center;width:100%}._Button-spinner_10byl_100{padding-inline-start:8px}._RichTextMenu_k97eh_1{display:flex;flex-direction:row;flex-wrap:nowrap}._RichTextMenu--form_k97eh_7{border-top-left-radius:4px;border-top-right-radius:4px;padding:6px;background-color:#fafafa;background-color:var(--puck-color-grey-12);position:relative;scrollbar-width:none;overflow-x:auto}._RichTextMenu-group_k97eh_17{display:flex;align-items:space-between;flex-direction:row;flex-wrap:nowrap;padding-inline:6px;gap:2px;position:relative}._RichTextMenu-group_k97eh_17:first-of-type{padding-left:0}._RichTextMenu-group_k97eh_17:last-of-type{padding-right:0}._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17{color:#c3c3c3;color:var(--puck-color-grey-08);gap:0px;flex-wrap:nowrap}._RichTextMenu-group_k97eh_17+._RichTextMenu-group_k97eh_17{border-left:1px solid #efefef;border-left:1px solid var(--puck-color-grey-10)}._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17+._RichTextMenu-group_k97eh_17{border-left:.5px solid #767676;border-left:.5px solid var(--puck-color-grey-05)}._Control_1aveu_1 .lucide{height:18px;width:18px}._Control--inline_1aveu_6 .lucide{height:16px;width:16px}._Select_xjbef_1{position:relative;z-index:1}._Select-button_xjbef_6{align-items:center;background:transparent;border:none;border-radius:4px;display:flex;justify-content:center;gap:0px;height:100%;padding:4px 2px 4px 4px}._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6{color:currentColor}._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6{cursor:pointer}._Select-buttonIcon_xjbef_27{align-items:center;display:flex;justify-content:center}._Select--standalone_xjbef_33 ._Select-buttonIcon_xjbef_27 .lucide{height:18px;width:18px}._Select--actionBar_xjbef_38 ._Select-buttonIcon_xjbef_27 .lucide{height:16px;width:16px}._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6:hover,._Select--hasValue_xjbef_44 ._Select-button_xjbef_6{background:#efefef;background:var(--puck-color-grey-10);color:#0158ad;color:var(--puck-color-azure-04)}._Select--disabled_xjbef_23 ._Select-button_xjbef_6{color:#ababab;color:var(--puck-color-grey-07)}._Select--actionBar_xjbef_38._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6:hover,._Select--actionBar_xjbef_38._Select--hasValue_xjbef_44 ._Select-button_xjbef_6{background:none;color:#88b0da;color:var(--puck-color-azure-07)}._Select-items_xjbef_61{background:#fff;border:1px solid #dcdcdc;border:1px solid var(--puck-color-grey-09);border-radius:8px;margin:10px 8px 10px 0;padding:4px;z-index:2;list-style:none}._SelectItem_xjbef_72{background:transparent;border-radius:4px;border:none;color:#5a5a5a;color:var(--puck-color-grey-04);cursor:pointer;display:flex;gap:8px;align-items:center;font-size:calc(1rem * 14 / 16);font-size:var(--puck-font-size-xxs);margin:0;padding:8px 12px;width:100%}._SelectItem--isSelected_xjbef_87{background:#f3f6fb;background:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04);font-weight:500}._SelectItem--isSelected_xjbef_87 ._SelectItem-icon_xjbef_93{color:#0158ad;color:var(--puck-color-azure-04)}._SelectItem_xjbef_72:hover{background:#f3f6fb;background:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04)}._RichTextEditor_z25h4_1 .ProseMirror{white-space:pre-wrap;word-wrap:break-word;cursor:text;outline:none;position:relative}._RichTextEditor_z25h4_1 .rich-text *{white-space:pre-wrap;user-select:auto;-webkit-user-select:auto}._RichTextEditor_z25h4_1 .rich-text blockquote{margin:1em 0;padding:0 1em;border-left:4px solid #dcdcdc;border-left:4px solid var(--puck-color-grey-09)}._RichTextEditor_z25h4_1 .rich-text code{background-color:#f5f5f5;background-color:var(--puck-color-grey-11);padding:4px 8px;border-radius:4px}._RichTextEditor_z25h4_1 .rich-text p:empty:before{content:" "}._RichTextEditor_z25h4_1 .rich-text pre code{display:block;padding:8px 12px}._RichTextEditor_z25h4_1 .rich-text>*:first-child,._RichTextEditor_z25h4_1 .ProseMirror>*:first-child,._RichTextEditor_z25h4_1 .rich-text * p:first-of-type{margin-top:0}._RichTextEditor_z25h4_1 .rich-text>*:last-child,._RichTextEditor_z25h4_1 .ProseMirror>*:last-child,._RichTextEditor_z25h4_1 .rich-text * p:last-of-type{margin-bottom:0}._RichTextEditor--editor_z25h4_50{background:#ffffff;background:var(--puck-color-white);border-width:1px;border-style:solid;border-color:#dcdcdc;border-color:var(--puck-color-grey-09);border-radius:4px;box-sizing:border-box;display:flex;flex-direction:column;font-family:inherit;font-size:calc(1rem * 14 / 16);font-size:var(--puck-font-size-xxs);resize:vertical;text-align:left;text-align:initial;transition:border-color 50ms ease-in;width:100%;max-width:100%;min-height:128px}._RichTextEditor--editor_z25h4_50 .rich-text{flex-grow:1}._RichTextEditor--editor_z25h4_50 .rich-text:not(:has(.ProseMirror)),._RichTextEditor--editor_z25h4_50 .rich-text .ProseMirror{height:100%;padding:12px 15px}._RichTextEditor--editor_z25h4_50 .rich-text ul,._RichTextEditor--editor_z25h4_50 .rich-text ol{padding-left:24px}._RichTextEditor--editor_z25h4_50 .rich-text li{line-height:1.5}._RichTextEditor--editor_z25h4_50 .rich-text p{margin-block:12px}._RichTextEditor--editor_z25h4_50 .rich-text ul{list-style:disc}._RichTextEditor--editor_z25h4_50 .rich-text ol{list-style:decimal}._RichTextEditor--editor_z25h4_50:focus-within{border-color:#767676;border-color:var(--puck-color-grey-05);outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);transition:none}._RichTextEditor--editor_z25h4_50._RichTextEditor--disabled_z25h4_107{background:#f5f5f5;background:var(--puck-color-grey-11)}._RichTextEditor_z25h4_1:not(:focus-within):not(._RichTextEditor--isActive_z25h4_111) .ProseMirror ::selection{background-color:transparent}._RichTextEditor-menu_z25h4_117{border-bottom:1px solid #efefef;border-bottom:1px solid var(--puck-color-grey-10);position:sticky;top:0;z-index:1}._RichTextEditor--disabled_z25h4_107 ._RichTextEditor-menu_z25h4_117{border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09)}._ObjectField_1ua3y_5{display:flex;flex-direction:column;background-color:#ffffff;background-color:var(--puck-color-white);border:1px solid #dcdcdc;border:1px solid var(--puck-color-grey-09);border-radius:4px}._ObjectField-fieldset_1ua3y_13{border:none;margin:0;min-width:0;padding:16px 15px}._Drawer_pl7z0_1{display:flex;flex-direction:column;font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-family:var(--puck-font-family);gap:12px}._Drawer-draggable_pl7z0_8{position:relative}._Drawer-draggableBg_pl7z0_12{position:absolute;inset:0;pointer-events:none;z-index:-1}._DrawerItem-draggable_pl7z0_22{background:#ffffff;background:var(--puck-color-white);cursor:grab;padding:12px;display:flex;border:1px #dcdcdc solid;border:1px var(--puck-color-grey-09) solid;border-radius:4px;font-size:calc(1rem * 14 / 16);font-size:var(--puck-font-size-xxs);justify-content:space-between;align-items:center;transition:background-color 50ms ease-in,color 50ms ease-in}._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22{background:#f5f5f5;background:var(--puck-color-grey-11);color:#767676;color:var(--puck-color-grey-05);cursor:not-allowed}._DrawerItem_pl7z0_22:focus-visible{outline:0}._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22{border-radius:4px;outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px}@media(hover:hover)and (pointer:fine){._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover{background-color:#f7faff;background-color:var(--puck-color-azure-12);color:#0158ad;color:var(--puck-color-azure-04);transition:none}}._DrawerItem-name_pl7z0_63{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}._DraggableComponent_1vaqy_1{position:absolute;pointer-events:none;--overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent )}._DraggableComponent-overlayWrapper_1vaqy_12{height:100%;width:100%;top:0;position:absolute;pointer-events:none;box-sizing:border-box;z-index:1}._DraggableComponent-overlay_1vaqy_12{cursor:pointer;height:100%;outline:2px #cfdff0 solid;outline:2px var(--puck-color-azure-09) solid;outline-offset:-2px;width:100%}._DraggableComponent_1vaqy_1:focus-visible>._DraggableComponent-overlayWrapper_1vaqy_12{outline:1px solid #3479be;outline:1px solid var(--puck-color-azure-05)}._DraggableComponent-loadingOverlay_1vaqy_34{background:#ffffff;background:var(--puck-color-white);color:#404040;color:var(--puck-color-grey-03);border-radius:4px;display:flex;padding:8px;top:8px;right:8px;position:absolute;pointer-events:all;box-sizing:border-box;opacity:.8;z-index:1}._DraggableComponent--hover_1vaqy_50>._DraggableComponent-overlayWrapper_1vaqy_12>._DraggableComponent-overlay_1vaqy_12{background:var(--overlay-background);outline:2px #cfdff0 solid;outline:2px var(--puck-color-azure-09) solid}._DraggableComponent--isSelected_1vaqy_57>._DraggableComponent-overlayWrapper_1vaqy_12>._DraggableComponent-overlay_1vaqy_12{outline-color:#88b0da;outline-color:var(--puck-color-azure-07)}._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50>._DraggableComponent-overlayWrapper_1vaqy_12)>._DraggableComponent-overlayWrapper_1vaqy_12{display:none}._DraggableComponent-actionsOverlay_1vaqy_71{position:sticky;opacity:0;pointer-events:none;z-index:2}._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71{opacity:1;pointer-events:auto}._DraggableComponent-actions_1vaqy_71{position:absolute;width:auto;cursor:grab;display:flex;box-sizing:border-box;transform-origin:right top;min-height:36px}[data-puck-component] *{pointer-events:none;user-select:none;-webkit-user-select:none}[data-puck-component]{cursor:grab;pointer-events:auto!important;user-select:none;-webkit-user-select:none}[data-puck-dropzone]{pointer-events:auto!important}[data-puck-disabled]{cursor:pointer}[data-dnd-placeholder]{background:#6499cf!important;background:var(--puck-color-azure-06)!important;border:none!important;color:#0000!important;opacity:.3!important;outline:none!important;transition:none!important}[data-dnd-placeholder] *,[data-dnd-placeholder]:after,[data-dnd-placeholder]:before{opacity:0!important}[data-dnd-dragging][data-puck-component]{pointer-events:none!important;outline:2px #cfdff0 solid!important;outline:2px var(--puck-color-azure-09) solid!important;outline-offset:-2px!important}._DropZone_1i2sv_1{--resize-animation-ms: .15s;position:relative;height:100%;min-height:var(--min-empty-height);outline-offset:-2px;width:100%}._DropZone--hasChildren_1i2sv_11{min-height:0}._DropZone_1i2sv_1:empty{min-height:var(--min-empty-height)}[data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1{transition:min-height var(--resize-animation-ms) ease-in}._DropZone--isAreaSelected_1i2sv_24,._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25){background:color-mix(in srgb,#cfdff0 30%,transparent);background:color-mix(in srgb,var(--puck-color-azure-09) 30%,transparent);outline:2px dashed #abc7e5;outline:2px dashed var(--puck-color-azure-08)}._DropZone_1i2sv_1:empty{background:color-mix(in srgb,#cfdff0 30%,transparent);background:color-mix(in srgb,var(--puck-color-azure-09) 30%,transparent);outline:2px dashed #abc7e5;outline:2px dashed var(--puck-color-azure-08)}._DropZone--isDestination_1i2sv_35{outline:2px dashed #0158ad!important;outline:2px dashed var(--puck-color-azure-04)!important}._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25){background:color-mix(in srgb,#cfdff0 30%,transparent)!important;background:color-mix(in srgb,var(--puck-color-azure-09) 30%,transparent)!important}._DropZone-item_1i2sv_47{position:relative}._DropZone-hitbox_1i2sv_51{position:absolute;bottom:-12px;height:24px;width:100%;z-index:1}[data-puck-dragging] ._DropZone--isEnabled_1i2sv_59{outline:2px dashed #6499cf;outline:2px dashed var(--puck-color-azure-06)}._DropZone_1i2sv_1>*:not([data-puck-component]){opacity:0}body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay]{opacity:0!important}[data-puck-overlay-portal],[data-puck-overlay-portal] *{pointer-events:auto!important}[data-puck-overlay-portal]:hover{outline:2px #cfdff0 dashed;outline:2px var(--puck-color-azure-09) dashed;outline-offset:2px}[data-puck-overlay-portal]:focus-within{outline:2px #88b0da dashed;outline:2px var(--puck-color-azure-07) dashed;outline-offset:2px}._InlineTextField_104qp_1{cursor:text;display:inline-block;white-space:pre-wrap;text-decoration:inherit}[data-dnd-dragging] ._InlineTextField_104qp_1{cursor:none;caret-color:transparent}[data-dnd-dragging] ._InlineTextField_104qp_1::selection{display:none}._PuckFields_10bh7_1{position:relative;font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-family:var(--puck-font-family)}._PuckFields--isLoading_10bh7_6{min-height:48px}._PuckFields-loadingOverlay_10bh7_10{background:#ffffff;background:var(--puck-color-white);display:flex;justify-content:flex-end;align-items:flex-start;height:100%;width:100%;top:0;position:absolute;z-index:1;pointer-events:all;box-sizing:border-box;opacity:.8}._PuckFields-loadingOverlayInner_10bh7_25{display:flex;padding:16px;position:sticky;top:0}._PuckFields-field_10bh7_32 *{box-sizing:border-box}._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32{color:#5a5a5a;color:var(--puck-color-grey-04);padding:16px 16px 12px;display:block}._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32+._PuckFields-field_10bh7_32{border-top:1px solid #dcdcdc;border-top:1px solid var(--puck-color-grey-09);margin-top:8px}._ComponentList_1rrlt_1{max-width:100%}._ComponentList--isExpanded_1rrlt_5+._ComponentList_1rrlt_1{margin-top:12px}._ComponentList-content_1rrlt_9{display:none}._ComponentList--isExpanded_1rrlt_5>._ComponentList-content_1rrlt_9{display:block}._ComponentList-title_1rrlt_17{background-color:transparent;border:0;color:#767676;color:var(--puck-color-grey-05);cursor:pointer;display:flex;font:inherit;font-size:calc(1rem * 12 / 16);font-size:var(--puck-font-size-xxxs);list-style:none;margin-bottom:6px;padding:8px;text-transform:uppercase;transition:background-color 50ms ease-in,color 50ms ease-in;gap:4px;border-radius:4px;width:100%}._ComponentList-title_1rrlt_17:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px}@media(hover:hover)and (pointer:fine){._ComponentList-title_1rrlt_17:hover{background-color:#f3f6fb;background-color:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04);transition:none}}._ComponentList-title_1rrlt_17:active{background-color:#e7eef7;background-color:var(--puck-color-azure-10);transition:none}._ComponentList-titleIcon_1rrlt_53{margin-inline-start:auto}._PuckPreview_z2rgu_1{position:relative;height:100%}._PuckPreview-frame_z2rgu_6{border:none;height:100%;width:100%}._LayerTree_7rx04_1{color:#404040;color:var(--puck-color-grey-03);font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-family:var(--puck-font-family);font-size:calc(1rem * 14 / 16);font-size:var(--puck-font-size-xxs);margin:0;position:relative;list-style:none;padding:0}._LayerTree-zoneTitle_7rx04_11{color:#767676;color:var(--puck-color-grey-05);font-size:calc(1rem * 12 / 16);font-size:var(--puck-font-size-xxxs);text-transform:uppercase}._LayerTree-helper_7rx04_17{text-align:center;color:#ababab;color:var(--puck-color-grey-07);margin:8px 4px}._Layer_7rx04_1{position:relative;border:1px solid transparent;border-radius:4px}._Layer-inner_7rx04_29{border:1px solid transparent;border-radius:4px;transition:color 50ms ease-in}._Layer--containsZone_7rx04_35>._Layer-inner_7rx04_29{padding-inline-start:0}._Layer-clickable_7rx04_39{align-items:center;background:none;border:0;border-radius:4px;color:inherit;cursor:pointer;display:flex;font:inherit;padding-inline-start:12px;padding-inline-end:4px;width:100%}._Layer-clickable_7rx04_39:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px;position:relative;z-index:1}@media(hover:hover)and (pointer:fine){._Layer_7rx04_1:not(._Layer--isSelected_7rx04_61)>._Layer-inner_7rx04_29:hover{border-color:#e7eef7;border-color:var(--puck-color-azure-10);background:#f3f6fb;background:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04);transition:none}}._Layer--isSelected_7rx04_61{border-color:#abc7e5;border-color:var(--puck-color-azure-08)}._Layer--isSelected_7rx04_61>._Layer-inner_7rx04_29{background:#e7eef7;background:var(--puck-color-azure-10)}._Layer--isSelected_7rx04_61>._Layer-inner_7rx04_29>._Layer-clickable_7rx04_39>._Layer-chevron_7rx04_77,._Layer--childIsSelected_7rx04_78>._Layer-inner_7rx04_29>._Layer-clickable_7rx04_39>._Layer-chevron_7rx04_77{transform:scaleY(-1)}._Layer-zones_7rx04_82{display:none;margin-inline-start:12px}._Layer--isSelected_7rx04_61>._Layer-zones_7rx04_82,._Layer--childIsSelected_7rx04_78>._Layer-zones_7rx04_82{display:block}._Layer-zones_7rx04_82>._LayerTree_7rx04_1{margin-inline-start:12px}._Layer-title_7rx04_96,._LayerTree-zoneTitle_7rx04_11{display:flex;gap:8px;align-items:center;margin:8px 4px;overflow-x:hidden}._Layer-name_7rx04_105{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}._Layer-icon_7rx04_111{color:#d89aba;color:var(--puck-color-rose-07);margin-top:4px}._Layer-zoneIcon_7rx04_116{color:#c3c3c3;color:var(--puck-color-grey-08);margin-top:4px}._Puck_1dd16_19{--puck-space-px: 16px;font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;font-family:var(--puck-font-family);overflow-x:hidden}@media(min-width:766px){._Puck_1dd16_19{overflow-x:auto}}._Puck-portal_1dd16_31{position:relative;z-index:2}._PuckLayout_1dd16_36{height:100dvh}._PuckLayout-inner_1dd16_40{--puck-frame-width: auto;--puck-side-nav-width: min-content;--puck-side-bar-width: 0px;--puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );--puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );background-color:#fafafa;background-color:var(--puck-color-grey-12);display:grid;grid-template-areas:"header" "editor" "left" "right" "sidenav";grid-template-columns:var(--puck-frame-width);grid-template-rows:min-content auto 0 0 var(--puck-side-nav-width);height:100%;position:relative;transition:grid-template-rows .15s ease-in;z-index:0;overflow:hidden}@media(min-width:638px){._PuckLayout-inner_1dd16_40{--puck-side-nav-width: 68px;grid-template-areas:"header header header header" "sidenav left editor right";grid-template-columns:var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;grid-template-rows:min-content auto}._Puck--hidePlugins_1dd16_72 ._PuckLayout-inner_1dd16_40{--puck-side-nav-width: 0}}._PuckLayout--mounted_1dd16_77 ._PuckLayout-inner_1dd16_40{--puck-side-bar-width: 186px}._PuckLayout--mobilePanelHeightToggle_1dd16_81._PuckLayout--leftSideBarVisible_1dd16_81 ._PuckLayout-inner_1dd16_40{grid-template-rows:0 auto 30% 0 var(--puck-side-nav-width)}._PuckLayout--mobilePanelHeightToggle_1dd16_81._PuckLayout--leftSideBarVisible_1dd16_81._PuckLayout--isExpanded_1dd16_87 ._PuckLayout-inner_1dd16_40{grid-template-rows:0 auto 55% 0 var(--puck-side-nav-width)}@media(min-width:638px){._PuckLayout--mobilePanelHeightToggle_1dd16_81._PuckLayout--leftSideBarVisible_1dd16_81 ._PuckLayout-inner_1dd16_40{grid-template-columns:var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;grid-template-rows:min-content auto}}._PuckLayout--mobilePanelHeightMinContent_1dd16_105._PuckLayout--leftSideBarVisible_1dd16_81 ._PuckLayout-inner_1dd16_40,._PuckLayout--mobilePanelHeightMinContent_1dd16_105._PuckLayout--leftSideBarVisible_1dd16_81._PuckLayout--isExpanded_1dd16_87 ._PuckLayout-inner_1dd16_40{grid-template-rows:0 auto min-content 0 var(--puck-side-nav-width)}@media(min-width:638px){._PuckLayout--mobilePanelHeightToggle_1dd16_81._PuckLayout--leftSideBarVisible_1dd16_81 ._PuckLayout-inner_1dd16_40,._PuckLayout--mobilePanelHeightToggle_1dd16_81._PuckLayout--leftSideBarVisible_1dd16_81._PuckLayout--isExpanded_1dd16_87 ._PuckLayout-inner_1dd16_40,._PuckLayout--mobilePanelHeightMinContent_1dd16_105._PuckLayout--leftSideBarVisible_1dd16_81 ._PuckLayout-inner_1dd16_40,._PuckLayout--mobilePanelHeightMinContent_1dd16_105._PuckLayout--leftSideBarVisible_1dd16_81._PuckLayout--isExpanded_1dd16_87 ._PuckLayout-inner_1dd16_40{grid-template-columns:var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;grid-template-rows:min-content auto}}@media(min-width:638px){._PuckLayout--rightSideBarVisible_1dd16_132 ._PuckLayout-inner_1dd16_40{grid-template-columns:var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-right-side-bar-width)}}@media(min-width:638px){._PuckLayout--leftSideBarVisible_1dd16_81._PuckLayout--rightSideBarVisible_1dd16_132 ._PuckLayout-inner_1dd16_40{grid-template-columns:var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width)}}@media(min-width:458px){._PuckLayout-mounted_1dd16_151 ._PuckLayout-inner_1dd16_40{--puck-frame-width: minmax(266px, auto)}}@media(min-width:638px){._PuckLayout_1dd16_36 ._PuckLayout-inner_1dd16_40{--puck-side-bar-width: minmax(186px, 250px)}}@media(min-width:766px){._PuckLayout_1dd16_36 ._PuckLayout-inner_1dd16_40{--puck-frame-width: auto}}@media(min-width:990px){._PuckLayout_1dd16_36 ._PuckLayout-inner_1dd16_40{--puck-side-bar-width: 256px}}@media(min-width:1198px){._PuckLayout_1dd16_36 ._PuckLayout-inner_1dd16_40{--puck-side-bar-width: 274px}}@media(min-width:1398px){._PuckLayout_1dd16_36 ._PuckLayout-inner_1dd16_40{--puck-side-bar-width: 290px}}@media(min-width:1598px){._PuckLayout_1dd16_36 ._PuckLayout-inner_1dd16_40{--puck-side-bar-width: 320px}}._PuckLayout-nav_1dd16_192{border-top:1px solid #dcdcdc;border-top:1px solid var(--puck-color-grey-09);background-color:#fafafa;background-color:var(--puck-color-grey-12);grid-area:sidenav;overflow:hidden;width:100%}@media(min-width:638px){._PuckLayout-nav_1dd16_192{border-top:0;border-right:1px solid #dcdcdc;border-right:1px solid var(--puck-color-grey-09);box-sizing:border-box}}._PuckLayout-header_1dd16_208{grid-area:header}._PuckLayout--leftSideBarVisible_1dd16_81 ._PuckLayout-header_1dd16_208{overflow:hidden}@media(min-width:638px){._PuckLayout--leftSideBarVisible_1dd16_81 ._PuckLayout-header_1dd16_208{overflow:auto}}._PuckPluginTab_1dd16_222{display:none;flex-grow:1;max-height:100%}._PuckPluginTab--visible_1dd16_228{display:flex;flex-direction:column}._PuckPluginTab-body_1dd16_233{flex-grow:1;max-height:100%}._MenuBar_8pf8c_1{background-color:#ffffff;background-color:var(--puck-color-white);border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09);display:none;left:0;margin-top:1px;padding:8px 16px;position:absolute;right:0;top:100%;z-index:2}._MenuBar--menuOpen_8pf8c_14{display:block}@media(min-width:638px){._MenuBar_8pf8c_1{border:none;display:block;margin-top:0;overflow-y:visible;padding:0;position:static}}._MenuBar-inner_8pf8c_29{align-items:center;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:flex-end}@media(min-width:638px){._MenuBar-inner_8pf8c_29{display:flex;flex-direction:row;flex-wrap:nowrap}}._MenuBar-history_8pf8c_45{display:flex}._PuckHeader_63pti_1{background:#ffffff;background:var(--puck-color-white);border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09);color:#000000;color:var(--puck-color-black);grid-area:header;position:relative;max-width:100vw}@media(min-width:638px){._PuckHeader_63pti_1{padding-left:67px}._PuckHeader--hidePlugins_63pti_15{padding-left:0}}._PuckHeader-inner_63pti_20{align-items:end;display:grid;grid-gap:var(--puck-space-px);gap:var(--puck-space-px);grid-template-areas:"left middle right";grid-template-columns:1fr auto 1fr;grid-template-rows:auto;padding:var(--puck-space-px)}@media(min-width:638px){._PuckHeader-inner_63pti_20{border-left:1px solid #dcdcdc;border-left:1px solid var(--puck-color-grey-09)}._PuckHeader--hidePlugins_63pti_15 ._PuckHeader-inner_63pti_20{border-left:none}}._PuckHeader-toggle_63pti_40{color:#767676;color:var(--puck-color-grey-05);display:flex;margin-inline-start:-4px;padding-top:2px}._PuckHeader--rightSideBarVisible_63pti_47 ._PuckHeader-rightSideBarToggle_63pti_47,._PuckHeader--leftSideBarVisible_63pti_48 ._PuckHeader-leftSideBarToggle_63pti_48{color:#000000;color:var(--puck-color-black)}._PuckHeader-rightSideBarToggle_63pti_47,._PuckHeader-leftSideBarToggle_63pti_48{display:none}@media(min-width:638px){._PuckHeader-rightSideBarToggle_63pti_47,._PuckHeader-leftSideBarToggle_63pti_48{display:block}}._PuckHeader-title_63pti_64{align-self:center}._PuckHeader-path_63pti_68{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-family:var(--puck-font-family-monospaced);font-size:calc(1rem * 14 / 16);font-size:var(--puck-font-size-xxs);font-weight:400;word-break:break-all}._PuckHeader-tools_63pti_75{display:flex;gap:16px;justify-content:flex-end}._PuckHeader-menuButton_63pti_81{color:#767676;color:var(--puck-color-grey-05);margin-inline-start:-4px}._PuckHeader--menuOpen_63pti_86 ._PuckHeader-menuButton_63pti_81{color:#000000;color:var(--puck-color-black)}@media(min-width:638px){._PuckHeader-menuButton_63pti_81{display:none}}._SidebarSection_5otpt_1{display:flex;position:relative;flex-direction:column;color:#000000;color:var(--puck-color-black)}._SidebarSection_5otpt_1:last-of-type{flex-grow:1}._SidebarSection-title_5otpt_12{background:#ffffff;background:var(--puck-color-white);padding:16px;border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09);border-top:1px solid #dcdcdc;border-top:1px solid var(--puck-color-grey-09);overflow-x:auto}._SidebarSection--noBorderTop_5otpt_20>._SidebarSection-title_5otpt_12{border-top:0px}._SidebarSection-content_5otpt_24:last-child{padding-bottom:4px}._SidebarSection_5otpt_1:last-of-type ._SidebarSection-content_5otpt_24{border-bottom:none;flex-grow:1}._SidebarSection-breadcrumbLabel_5otpt_33{background:none;border:0;border-radius:2px;color:#0158ad;color:var(--puck-color-azure-04);cursor:pointer;font:inherit;flex-shrink:0;padding:0;transition:color 50ms ease-in}._SidebarSection-breadcrumbLabel_5otpt_33:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px}@media(hover:hover)and (pointer:fine){._SidebarSection-breadcrumbLabel_5otpt_33:hover{color:#014292;color:var(--puck-color-azure-03);transition:none}}._SidebarSection-breadcrumbLabel_5otpt_33:active{color:#002c77;color:var(--puck-color-azure-02);transition:none}._SidebarSection-breadcrumbs_5otpt_62,._SidebarSection-breadcrumb_5otpt_33{align-items:center;display:flex;gap:4px}._SidebarSection-heading_5otpt_74{padding-inline-end:16px}._SidebarSection-loadingOverlay_5otpt_78{background:#ffffff;background:var(--puck-color-white);display:flex;justify-content:center;align-items:center;height:100%;width:100%;top:0;position:absolute;z-index:1;pointer-events:all;box-sizing:border-box;opacity:.8}._Breadcrumbs_1c9yh_1{align-items:center;display:flex;gap:4px}._Breadcrumbs-breadcrumbLabel_1c9yh_7{background:none;border:0;border-radius:2px;color:#0158ad;color:var(--puck-color-azure-04);cursor:pointer;font:inherit;flex-shrink:0;padding:0;transition:color 50ms ease-in}._Breadcrumbs-breadcrumbLabel_1c9yh_7:focus-visible{outline:2px solid #3479be;outline:2px solid var(--puck-color-azure-05);outline-offset:2px}@media(hover:hover)and (pointer:fine){._Breadcrumbs-breadcrumbLabel_1c9yh_7:hover{color:#014292;color:var(--puck-color-azure-03);transition:none}}._Breadcrumbs-breadcrumbLabel_1c9yh_7:active{color:#002c77;color:var(--puck-color-azure-02);transition:none}._Breadcrumbs-breadcrumb_1c9yh_7{align-items:center;display:flex;gap:4px}._ViewportControls_e3unb_1{position:relative}._ViewportControls--fullScreen_e3unb_5{border-radius:32px;display:flex;position:absolute;bottom:12px;right:12px;overflow:hidden}._ViewportControls-toggleButton_e3unb_14{display:none}._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14{align-items:center;background-color:#292929;background-color:var(--puck-color-grey-02);border:1px solid #5a5a5a;border:1px solid var(--puck-color-grey-04);border-radius:30px;cursor:pointer;color:#f5f5f5;color:var(--puck-color-grey-11);display:flex;justify-content:center;width:42px;height:42px;z-index:1}._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14:hover{background-color:#292929;background-color:var(--puck-color-grey-02);border:1px solid #0158ad;border:1px solid var(--puck-color-azure-04);color:#88b0da;color:var(--puck-color-azure-07)}._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-toggleButton_e3unb_14{background-color:#404040;background-color:var(--puck-color-grey-03)}._ViewportControls-actions_e3unb_42{display:flex}._ViewportControls-actionsInner_e3unb_46{display:flex;box-sizing:border-box;justify-content:center;margin-left:auto;margin-right:auto;z-index:0;overflow:hidden}._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46{background:#f5f5f5;background:var(--puck-color-grey-11);border:1px solid #dcdcdc;border:1px solid var(--puck-color-grey-09);border-radius:30px;margin-left:none;margin-right:none;padding-right:42px}._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46{transform:translate(100%);transition:transform .15s ease-in-out}._ViewportControls--fullScreen_e3unb_5._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-actionsInner_e3unb_46{transform:translate(42px)}._ViewportControls-divider_e3unb_75{border-inline-end:1px solid #dcdcdc;border-inline-end:1px solid var(--puck-color-grey-09);margin-bottom:8px;margin-top:8px}._ViewportControls-zoomSelect_e3unb_81{appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27 fill=%27%23c3c3c3%27><polygon points=%270,0 100,0 50,50%27/></svg>") no-repeat;background-size:10px;background-position:calc(100% - 12px) calc(50% + 3px);background-repeat:no-repeat;border:0;font-size:calc(1rem * 12 / 16);font-size:var(--puck-font-size-xxxs);padding:0 0 0 8px;width:96px}._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81{display:none}@media(min-width:638px){._ViewportControls-zoom_e3unb_81,._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81{display:flex;justify-content:center}}._ViewportControls-zoomSelect_e3unb_81:dir(rtl){background-position:12px calc(50% + 3px)}._ViewportButton-inner_e3unb_111{align-items:center;display:flex;justify-content:center;height:32px;width:32px}._ViewportButton--isActive_e3unb_119 ._ViewportButton-inner_e3unb_111{color:#0158ad;color:var(--puck-color-azure-04)}._PuckCanvas_t6s9b_1{background:#f5f5f5;background:var(--puck-color-grey-11);display:flex;grid-area:editor;flex-direction:column;padding:var(--puck-space-px);position:relative;overflow:auto}@media(min-width:1198px){._PuckCanvas_t6s9b_1{padding:calc(var(--puck-space-px) * 1.5);padding-top:calc(var(--puck-space-px) * .5)}._PuckCanvas_t6s9b_1:not(._PuckCanvas_t6s9b_1:has(._PuckCanvas-controls_t6s9b_17)){padding-top:calc(var(--puck-space-px) * 1.5)}}._PuckCanvas--fullScreen_t6s9b_22{padding:0;overflow:hidden}@media(min-width:1198px){._PuckCanvas--fullScreen_t6s9b_22{padding:0}}._PuckCanvas-inner_t6s9b_33{display:flex;height:100%;justify-content:center;min-width:288px;position:relative;width:100%}._PuckCanvas-root_t6s9b_42{background:#fff;outline:1px solid #dcdcdc;outline:1px solid var(--puck-color-grey-09);box-sizing:content-box;min-width:321px;position:absolute;pointer-events:none;transform-origin:top;top:0;bottom:0;opacity:0}@media(min-width:1198px){._PuckCanvas-root_t6s9b_42{min-width:0;min-width:initial}}@media(prefers-reduced-motion:reduce){._PuckCanvas-root_t6s9b_42{transition:none!important}}._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-root_t6s9b_42{pointer-events:inherit;opacity:1}._PuckCanvas-loader_t6s9b_72{align-items:center;color:#949494;color:var(--puck-color-grey-06);display:flex;height:100%;justify-content:center;transition:opacity .25s ease-out;opacity:0}._PuckCanvas--showLoader_t6s9b_82 ._PuckCanvas-loader_t6s9b_72{opacity:1}._PuckCanvas--showLoader_t6s9b_82._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-loader_t6s9b_72{opacity:0;height:0;transition:none}._PuckCanvas-controls_t6s9b_17{padding-bottom:calc(var(--puck-space-px) * .5)}._PuckCanvas--fullScreen_t6s9b_22 ._PuckCanvas-controls_t6s9b_17{padding-bottom:0;z-index:1}@media(min-width:766px){._ResizeHandle_144bf_2{position:absolute;width:5px;height:100%;cursor:col-resize;z-index:10;background:transparent;top:0}._ResizeHandle_144bf_2:hover{background:#0000001a}._ResizeHandle--left_144bf_16{right:-3px}._ResizeHandle--right_144bf_20{left:-3px}}[data-resize-overlay]{position:fixed;inset:0;z-index:9999;cursor:col-resize}._Sidebar_o396p_1{border-block-start:1px solid #dcdcdc;border-block-start:1px solid var(--puck-color-grey-09);position:relative;display:none;flex-direction:column;overflow-y:auto}._Sidebar--isVisible_o396p_9{display:flex}._Sidebar--left_o396p_13{background:#fafafa;background:var(--puck-color-grey-12);grid-area:left}@media(min-width:766px){._Sidebar--left_o396p_13{border-block-start:0;border-inline-end:1px solid #dcdcdc;border-inline-end:1px solid var(--puck-color-grey-09)}}._Sidebar--right_o396p_25{background:#ffffff;background:var(--puck-color-white);grid-area:right}@media(min-width:766px){._Sidebar--right_o396p_25{border-block-start:0;border-inline-start:1px solid #dcdcdc;border-inline-start:1px solid var(--puck-color-grey-09)}}._Sidebar-resizeHandle_o396p_37{position:absolute;height:100%}._Sidebar--left_o396p_13+._Sidebar-resizeHandle_o396p_37{grid-area:left;justify-self:end}._Sidebar--right_o396p_25+._Sidebar-resizeHandle_o396p_37{grid-area:right;justify-self:start}._Nav_1tvxq_1{display:flex}._Nav-list_1tvxq_5{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;gap:8px}@media(min-width:638px){._Nav-list_1tvxq_5{padding-top:32px;flex-direction:column;gap:16px;width:100%}}._Nav-mobileActions_1tvxq_23{align-items:center;display:flex;justify-content:center;margin-inline-start:auto;padding:4px 16px;border-inline-start:1px solid #dcdcdc;border-inline-start:1px solid var(--puck-color-grey-09)}@media(min-width:638px){._Nav-mobileActions_1tvxq_23{display:none}}._NavItem-link_1tvxq_38{text-align:center;align-items:center;color:#404040;color:var(--puck-color-grey-03);display:flex;gap:8px;text-decoration:none;cursor:pointer;border-radius:4px;padding:8px 4px;width:64px;box-sizing:border-box}@media(min-width:638px){._NavItem-link_1tvxq_38{width:auto}}._NavItem_1tvxq_38:first-of-type{padding-left:16px}._NavItem_1tvxq_38:last-of-type{padding-right:16px}@media(min-width:638px){._NavItem_1tvxq_38:first-of-type,._NavItem_1tvxq_38:last-of-type{padding:0}}._NavItem-link_1tvxq_38{border-top:4px solid transparent;border-bottom:4px solid transparent;border-radius:0;flex-direction:column;font-size:calc(1rem * 12 / 16);font-size:var(--puck-font-size-xxxs)}@media(min-width:638px){._NavItem-link_1tvxq_38{border:0;border-left:4px solid transparent;border-right:4px solid transparent}}._NavItem-linkIcon_1tvxq_89{height:24px;width:24px}._NavItem--active_1tvxq_94>._NavItem-link_1tvxq_38{background-color:#e7eef7;background-color:var(--puck-color-azure-10);color:#0158ad;color:var(--puck-color-azure-04);font-weight:600}._NavItem--active_1tvxq_94>._NavItem-link_1tvxq_38{background-color:transparent;border-top-color:#0158ad;border-top-color:var(--puck-color-azure-04);border-top-right-radius:0;border-bottom-right-radius:0;font-weight:600}@media(min-width:638px){._NavItem--active_1tvxq_94>._NavItem-link_1tvxq_38{border-top-color:transparent;border-right-color:#0158ad;border-right-color:var(--puck-color-azure-04)}}._NavItem_1tvxq_38:not(._NavItem--active_1tvxq_94)>._NavItem-link_1tvxq_38:hover{background-color:#f3f6fb;background-color:var(--puck-color-azure-11);color:#0158ad;color:var(--puck-color-azure-04)}@media(min-width:638px){._NavItem--mobileOnly_1tvxq_121{display:none}}._NavItem--desktopOnly_1tvxq_126{display:none}@media(min-width:638px){._NavItem--desktopOnly_1tvxq_126{display:block}}._BlocksPlugin_1ey1i_1,._OutlinePlugin_q92j6_1{padding:16px;height:100%;overflow-y:auto;box-sizing:border-box}._FieldsPlugin_nd930_1{background:#fff;height:100%;overflow-y:auto}._FieldsPlugin-header_nd930_7{border-bottom:1px solid #dcdcdc;border-bottom:1px solid var(--puck-color-grey-09);font-weight:600;padding:8px 16px}@media(min-width:638px){._FieldsPlugin-header_nd930_7{padding:16px}}

.editor-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.template-editor-label-row {
  margin-bottom: 8px;
}

#editor-toolbar {
  background-color: var(--bg-card);
  border: 0px solid var(--navy-deep);
  border-bottom: 0;
}

.editor-toolbar-wrapper {
  background-color: var(--bg-card);
  border: 0px solid var(--navy-deep);
  border-bottom: 0;
}

.editor-container {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  max-height: 400px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 1px;
}

.template-editor-error #editor-toolbar,
.template-editor-error .editor-toolbar-wrapper {
  border: 1px solid var(--red) !important;
  border-bottom: 0 !important;
}

.template-editor-error .rich-text-editor-content {
  border: 1px solid var(--red) !important;
  border-top: 0 !important;
  border-bottom: 0px solid var(--red) !important;
  outline: none !important;
}

.template-editor-error .rich-text-editor-content:focus {
  border: 1px solid var(--red) !important;
  border-top: 0 !important;
  border-bottom: 0px solid var(--red) !important;
  outline: none !important;
}

.template-editor-error .editor-toolbar-wrapper,
.template-editor-error #editor-toolbar {
  border: 0px solid var(--red) !important;
  border-bottom: 0 !important;
}

.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.css-fsslew-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root {
  height: 48px !important;
  border-color: red !important;
}
.rich-text-editor-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  max-height: 500px;
  overflow: visible;
  margin-bottom: 0;
  border: none;
  border-bottom: none;
  padding-bottom: 0;
}

.rich-text-editor-wrapper::after,
.rich-text-editor-wrapper::before {
  display: none;
  content: none;
  border: none;
}

.rich-text-editor-content {
  min-height: 200px;
  max-height: 500px;
  padding: 12px;
  padding-top: 13px;
  padding-bottom: 32px;
  border: 1px solid #0f2b46;
  border-top: 1px solid #0f2b46;
  border-bottom: 1px solid #0f2b46;
  border-left: 1px solid #0f2b46;
  border-right: 1px solid #0f2b46;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  outline: none;
  background-color: white;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  word-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  position: relative;
  /* Ensure bottom border is always visible */
  scroll-padding-bottom: 1px;
}


/* Ensure bottom border is always visible when scrolling */
.rich-text-editor-content:focus {
  border: 1px solid #0f2b46;
  border-top: 0;
  border-bottom: 1px solid #0f2b46;
  border-left: 1px solid #0f2b46;
  border-right: 1px solid #0f2b46;
  outline: none;
}

/* ProseMirror specific styles */
.rich-text-editor-content .ProseMirror {
  height: 100%;
  display: block;
  position: relative;
  padding-bottom: 20px;
  min-height: 150px;
  outline: none;
}

.rich-text-editor-content .ProseMirror:focus {
  outline: none;
}

/* Paragraph styles */
.rich-text-editor-content .ProseMirror p {
  margin: 0 0 12px 0;
  line-height: 1.6;
}

.rich-text-editor-content .ProseMirror p:last-child {
  margin-bottom: 0;
}

/* Heading styles */
.rich-text-editor-content .ProseMirror h1,
.rich-text-editor-content .ProseMirror h2,
.rich-text-editor-content .ProseMirror h3,
.rich-text-editor-content .ProseMirror h4,
.rich-text-editor-content .ProseMirror h5,
.rich-text-editor-content .ProseMirror h6 {
  margin: 16px 0 8px 0;
  font-weight: 600;
  line-height: 1.4;
}

.rich-text-editor-content .ProseMirror h1 {
  font-size: 2em;
}

.rich-text-editor-content .ProseMirror h2 {
  font-size: 1.75em;
}

.rich-text-editor-content .ProseMirror h3 {
  font-size: 1.5em;
}

.rich-text-editor-content .ProseMirror h4 {
  font-size: 1.25em;
}

.rich-text-editor-content .ProseMirror h5 {
  font-size: 1.1em;
}

.rich-text-editor-content .ProseMirror h6 {
  font-size: 1em;
}

/* List styles */
.rich-text-editor-content .ProseMirror ul,
.rich-text-editor-content .ProseMirror ol {
  margin: 12px 0;
  padding-left: 24px;
}

.rich-text-editor-content .ProseMirror ul {
  list-style-type: disc;
}

.rich-text-editor-content .ProseMirror ol {
  list-style-type: decimal;
}

.rich-text-editor-content .ProseMirror li {
  margin: 4px 0;
  line-height: 1.6;
}

/* Bullet list styles */
.rich-text-editor-content .ProseMirror ul[type="circle"] {
  list-style-type: circle !important;
}

.rich-text-editor-content .ProseMirror ul[type="square"] {
  list-style-type: square !important;
}

/* Ordered list styles - using type attribute */
.rich-text-editor-content .ProseMirror ol[type="lower-alpha"],
.rich-text-editor-content .ProseMirror ol[type="a"] {
  list-style-type: lower-alpha !important;
}

.rich-text-editor-content .ProseMirror ol[type="upper-alpha"],
.rich-text-editor-content .ProseMirror ol[type="A"] {
  list-style-type: upper-alpha !important;
}

.rich-text-editor-content .ProseMirror ol[type="lower-roman"],
.rich-text-editor-content .ProseMirror ol[type="i"] {
  list-style-type: lower-roman !important;
}

.rich-text-editor-content .ProseMirror ol[type="upper-roman"],
.rich-text-editor-content .ProseMirror ol[type="I"] {
  list-style-type: upper-roman !important;
}

.rich-text-editor-content .ProseMirror ol[type="decimal-leading-zero"],
.rich-text-editor-content .ProseMirror ol[type="decimal"] {
  list-style-type: decimal-leading-zero !important;
}

/* Ordered list styles - using style attribute (fallback) */
.rich-text-editor-content .ProseMirror ol[style*="list-style-type: lower-alpha"] {
  list-style-type: lower-alpha !important;
}

.rich-text-editor-content .ProseMirror ol[style*="list-style-type: upper-alpha"] {
  list-style-type: upper-alpha !important;
}

.rich-text-editor-content .ProseMirror ol[style*="list-style-type: lower-roman"] {
  list-style-type: lower-roman !important;
}

.rich-text-editor-content .ProseMirror ol[style*="list-style-type: upper-roman"] {
  list-style-type: upper-roman !important;
}

.rich-text-editor-content .ProseMirror ol[style*="list-style-type: decimal-leading-zero"] {
  list-style-type: decimal-leading-zero !important;
}

/* Blockquote styles */
.rich-text-editor-content .ProseMirror blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 3px solid #ccc;
  background-color: #f5f5f5;
  font-style: italic;
  color: #555;
}

/* Link styles */
.rich-text-editor-content a {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

.rich-text-editor-content a:hover {
  color: #0052a3;
}

/* Image styles */
.rich-text-editor-content .ProseMirror img {
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border-radius: 4px;
}

/* Table styles */
.rich-text-editor-content .ProseMirror table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  border: 1px solid #ddd;
}

.rich-text-editor-content .ProseMirror table td,
.rich-text-editor-content .ProseMirror table th {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.rich-text-editor-content .ProseMirror table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #0f2b46;
}

.rich-text-editor-content .ProseMirror table tr:nth-child(even) {
  background-color: #fafafa;
}

/* Code styles */
.rich-text-editor-content .ProseMirror code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}

.rich-text-editor-content .ProseMirror pre {
  background-color: #f4f4f4;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 12px 0;
}

.rich-text-editor-content .ProseMirror pre code {
  background-color: transparent;
  padding: 0;
}

/* Placeholder styles */
.rich-text-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  content: "Start typing...";
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
  font-style: italic;
  font-size: 14px;
}

.rich-text-editor-content .ProseMirror p.is-editor-empty:first-child {
  color: #adb5bd;
}

.rich-text-editor-content .ProseMirror > * {
  margin-top: 0;
  margin-bottom: 12px;
}

.rich-text-editor-content .ProseMirror > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none !important;
}

/* Remove any HR or line from ProseMirror last child */
.rich-text-editor-content .ProseMirror > *:last-child::after,
.rich-text-editor-content .ProseMirror > *:last-child::before {
  display: none !important;
  content: none !important;
  border: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* Ensure content doesn't get cut off at bottom */
.rich-text-editor-content .ProseMirror p:last-child,
.rich-text-editor-content .ProseMirror ul:last-child,
.rich-text-editor-content .ProseMirror ol:last-child,
.rich-text-editor-content .ProseMirror h1:last-child,
.rich-text-editor-content .ProseMirror h2:last-child,
.rich-text-editor-content .ProseMirror h3:last-child,
.rich-text-editor-content .ProseMirror h4:last-child,
.rich-text-editor-content .ProseMirror h5:last-child,
.rich-text-editor-content .ProseMirror h6:last-child,
.rich-text-editor-content .ProseMirror blockquote:last-child,
.rich-text-editor-content .ProseMirror table:last-child {
  margin-bottom: 0;
}

/* Hide horizontal rule (HR) elements */
.rich-text-editor-content hr,
.rich-text-editor-wrapper hr,
.rich-text-editor-content .ProseMirror hr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}


/* Remove any line from parent containers */
.rich-text-editor-wrapper + hr,
.rich-text-editor-content + hr,
.rich-text-editor-wrapper + * hr,
.rich-text-editor-content + * hr,
.rich-text-editor-wrapper ~ hr,
.rich-text-editor-content ~ hr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Remove any border from elements immediately after editor */
.rich-text-editor-wrapper + *,
.rich-text-editor-content + * {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.rich-text-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 8px;
  padding-bottom: 5px;
  background-color: #ffffff;
  border: 1px solid #0f2b46;
  border-bottom: 1px solid #0f2b46;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  flex-wrap: wrap;
  min-height: 40px;
}

.rich-text-toolbar .MuiButton-root {
  min-width: 32px;
  padding: 4px 8px;
  border: none !important;
  box-shadow: none !important;
}

.rich-text-toolbar .MuiButton-root:not(:last-child) {
  border-right: none !important;
}

.rich-text-toolbar .MuiButton-root:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.rich-text-toolbar .MuiButton-root.Mui-disabled {
  opacity: 0.4;
}

.rich-text-toolbar .MuiSelect-root {
  height: 32px;
  font-size: 14px;
}

.rich-text-toolbar .MuiDivider-root {
  margin: 4px 4px;
  height: 28px;
  border-color: #0f2b46;
  border-width: 1px;
  opacity: 0.3;
  align-self: center;
}

/* Make vertical dividers more visible and properly styled */
.rich-text-toolbar .MuiDivider-vertical {
  border-left: 1px solid #0f2b46 !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  height: 28px !important;
  margin: 4px 4px !important;
  opacity: 0.5 !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
}

/* Ensure dividers are visible between groups */
.rich-text-toolbar .MuiDivider-root.MuiDivider-vertical {
  display: flex !important;
  visibility: visible !important;
}

.rich-text-toolbar .MuiTooltip-root {
  display: inline-flex;
}

/* Active button styles */
.rich-text-toolbar .MuiButton-root[aria-pressed="true"],
.rich-text-toolbar .MuiButton-root.active {
  background-color: rgba(6, 49, 100, 0.1);
  color: #0f2b46;
}

/* Menu styles */
.rich-text-toolbar .MuiMenu-paper {
  margin-top: 4px;
  box-shadow: var(--shadow-lg);
}

.rich-text-toolbar .MuiMenuItem-root {
  font-size: 14px;
  padding: 8px 16px;
}

.rich-text-toolbar .MuiMenuItem-root:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Popover styles for table size selector */
.rich-text-toolbar .MuiPopover-paper {
  padding: 16px;
  min-width: 200px;
}

.rich-text-toolbar .MuiTextField-root {
  margin-bottom: 12px;
}

.rich-text-toolbar .MuiTextField-root:last-child {
  margin-bottom: 0;
}

/* Ordered list menu styles */
.rich-text-toolbar .ordered-list-menu {
  padding: 16px;
  min-width: 280px;
}

.rich-text-toolbar .ordered-list-menu .MuiTextField-root {
  width: 100%;
  margin-bottom: 16px;
}

.rich-text-toolbar .ordered-list-menu .MuiFormControlLabel-root {
  width: 100%;
  margin: 0;
}

/* Table size selector styles */
.rich-text-toolbar .table-size-selector {
  padding: 16px;
  min-width: 200px;
}

.rich-text-toolbar .table-size-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 4px;
  gap: 4px;
  margin-top: 8px;
}

.rich-text-toolbar .table-size-cell {
  width: 24px;
  height: 24px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background-color: #ffffff;
}

.rich-text-toolbar .table-size-cell:hover {
  background-color: #f5f5f5;
  border-color: #0f2b46;
}

.rich-text-toolbar .table-size-cell.selected {
  background-color: #0f2b46;
  color: #ffffff;
  border-color: #0f2b46;
}

/* Loading spinner for image upload */
.rich-text-toolbar .MuiCircularProgress-root {
  margin: 0 8px;
}

/* Responsive styles */
@media (max-width: 768px) {
  .rich-text-toolbar {
    flex-wrap: wrap;
    padding: 4px;
  }

  .rich-text-toolbar .MuiButton-root {
    min-width: 28px;
    padding: 4px;
  }

  .rich-text-toolbar .MuiSelect-root {
    min-width: 100px;
    font-size: 12px;
  }
}

.quoteStatusCustomker {
  background-color: #0f2b46 !important;
  color: white !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {
  .client-cliend-details {
    flex-direction: column;
  }

  .product-service-customer {
    overflow-x: auto !important;

  }

  .client-cliend-details {
    flex-direction: column !important;
  }

  .client-cliend-details .col-9 {
    width: 100%;
  }

  .client-cliend-details .col-3 {
    width: 100%;
    margin-left: 0 !important;
  }

  .download-sec {
    width: 100% !important;
  }

  .customerQuoteCost {
    width: 100% !important;
  }
}

/* 768 */
@media (max-width: 991px) {
  .first-address-section {
    border-radius: 9px !important;
    margin-bottom: 6px;
  }

  .Sec-address-section {
    border-radius: 9px !important;
    border-left: 1px solid !important;
  }

  /* Customer Quotes: vertical tabs on responsive (like Customer Detail) */
  .customer-quotes-tabs-wrapper .MuiTabs-flexContainer {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
  .customer-quotes-tabs-wrapper .MuiTab-root {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  .customer-quotes-tabs-wrapper .MuiTab-root:last-of-type {
    border-bottom: none !important;
  }
  .customer-quotes-tabs-wrapper .MuiTabs-indicator {
    display: none !important;
  }
  .customer-quotes-tabs-wrapper .MuiTab-root.Mui-selected {
    border-bottom: 2px solid var(--amber) !important;
    background-color: rgba(212, 148, 58, 0.06) !important;
  }
}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {
  .button-responsive {
    flex-direction: column;
  }

  .sec-button-section {
    margin-top: 10px;
  }

  .invoice-status-header {
    margin-bottom: 18px !important;
  }

  .sec-sec {
    flex-direction: column !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .sec-sec {
    flex-direction: column;
  }

  .sec-sec .col-8 {
    width: 100%;
    border-radius: 10px;
  }

  .sec-sec .col-4 {
    width: 100%;
    border-radius: 10px;
    border-left: 1px solid #0f2b46 !important;
    margin-top: 10px;
  }
}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {
  .invoice-status-header {
    width: 100% !important;
  }
}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {
  .quoteTotalQuote {
    font-size: 18px !important;
  }
}

/* ===== QUOTE DETAIL RESPONSIVE STYLES ===== */

/* Quote Detail Container */
.quote-detail-container {
  background: #f8fafc;
  min-height: 100vh;
  padding: 2rem 0;
}

/* Navigation Bar */
.quote-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.quote-navigation-left {
  display: flex;
  align-items: center;
}

.quote-navigation-right {
  display: flex;                            
  align-items: center;
}

.customer-info-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #e1e5e9;
}

.customer-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.customer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-orange-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
}

.customer-details {
  flex: 1 1;
}

.customer-contact {
  display: flex;
  flex-wrap: wrap;
}

.customer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
}

/* Product Table */
.product-table-container {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #e1e5e9;
}

.product-table-header {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--text-blue-color);
}

.product-table-row {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  padding: 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: white;
  transition: all 0.3s ease;
}

.product-table-row:hover {
  background: #f8f9fa;
  border-color: var(--text-orange-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.product-card {
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.product-card:hover {
  background: #f8f9fa;
  border-color: var(--text-orange-color);
}

.product-card-header {
  margin-bottom: 1rem;
}

.product-card-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.product-card-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e1e5e9;
  padding-top: 1rem;
  margin-top: 1rem;
}

.quote-sidebar {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid #e1e5e9;
  position: sticky;
  top: 20px;
}

.quote-summary {
  text-align: center;
  margin-bottom: 2rem;
}

.quote-summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.quote-summary-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e1e5e9;
  padding-top: 1rem;
  margin-top: 1rem;
  font-weight: 600;
}

.quote-actions {
  display: flex;
  flex-direction: column;
}

.notes-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #e1e5e9;
}

.notes-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid #e1e5e9;
  margin-bottom: 1rem;
}

.signature-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #e1e5e9;
}

.signature-content {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.signature-image {
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  height: 120px;
  width: 120px;
  object-fit: contain;
  background: #f8f9fa;
}

.signature-date {
  width: 120px;
  height: 120px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: var(--text-blue-color);
  font-weight: 600;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */

@media (min-width: 1400px) {
  .quote-detail-container {
    max-width: 1400px;
    margin: 0 auto;
  }

  .quote-navigation {
    padding: 1.5rem 3rem;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 3rem;
  }

  .quote-sidebar {
    padding: 3rem;
    width: 400px;
  }
}

@media (max-width: 1399px) and (min-width: 1200px) {
  .quote-navigation {
    padding: 1.25rem 2.5rem;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 2.5rem;
  }

  .quote-sidebar {
    padding: 2.5rem;
    width: 350px;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .quote-detail-container {
    max-width: 100%;
    padding: 1.5rem;
  }

  .quote-navigation {
    padding: 1rem 2rem;
    flex-direction: row;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 2rem;
  }

  .quote-sidebar {
    padding: 2rem;
    width: 320px;
    position: static;
  }

  .customer-contact {
    gap: 1.5rem;
  }

  .product-table-header,
  .product-table-row {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  }
}

/* 768 */
@media (max-width: 991px) and (min-width: 768px) {
  .quote-detail-container {
    padding: 1rem;
  }

  .quote-navigation {
    padding: 1rem 1.5rem;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .quote-navigation-left {
    justify-content: center;
  }

  .quote-navigation-right {
    justify-content: center;
    flex-wrap: wrap;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 1.5rem;
  }

  .quote-sidebar {
    padding: 1.5rem;
    position: static;
    width: 100%;
    margin-top: 2rem;
  }

  .customer-info-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .customer-contact {
    justify-content: center;
    gap: 1rem;
  }

  .product-table-header {
    display: none;
  }

  .product-table-row {
    display: none;
  }

  .product-card {
    display: block;
  }

  .signature-content {
    flex-direction: column;
    text-align: center;
  }

  .quote-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  .quote-detail-container {
    padding: 0.5rem;
  }

  .quote-navigation {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .quote-navigation-left {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .quote-navigation-right {
    flex-direction: column;
    width: 100%;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 1rem;
  }

  .quote-sidebar {
    padding: 1rem;
    position: static;
    width: 100%;
    margin-top: 1rem;
  }

  .customer-info-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .customer-avatar {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .customer-contact {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .product-table-header,
  .product-table-row {
    display: none;
  }

  .product-card {
    display: block;
    padding: 1rem;
  }

  .product-card-details {
    flex-direction: column;
    gap: 0.5rem;
  }

  .signature-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .signature-image,
  .signature-date {
    width: 100px;
    height: 100px;
  }

  .quote-actions {
    flex-direction: column;
  }
}

/* Mobile Small (375px - 575px) */
@media (max-width: 575px) and (min-width: 375px) {
  .quote-detail-container {
    padding: 0.25rem;
  }

  .quote-navigation {
    padding: 0.75rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .quote-navigation-left {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .quote-navigation-right {
    flex-direction: column;
    width: 100%;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 0.75rem;
  }

  .quote-sidebar {
    padding: 0.75rem;
    position: static;
    width: 100%;
    margin-top: 1rem;
  }

  .customer-info-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .customer-avatar {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .customer-contact {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .customer-contact-item {
    font-size: 0.875rem;
  }

  .product-table-header,
  .product-table-row {
    display: none;
  }

  .product-card {
    display: block;
    padding: 0.75rem;
  }

  .product-card-header h6 {
    font-size: 1rem;
  }

  .product-card-header p {
    font-size: 0.8rem;
  }

  .product-card-details {
    flex-direction: column;
    gap: 0.5rem;
  }

  .product-card-details span {
    font-size: 0.75rem;
  }

  .product-card-details p {
    font-size: 0.875rem;
  }

  .signature-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .signature-image,
  .signature-date {
    width: 80px;
    height: 80px;
  }

  .quote-actions {
    flex-direction: column;
  }

  .quote-summary h6 {
    font-size: 1rem;
  }

  .quote-summary-item p {
    font-size: 0.875rem;
  }

  .quote-summary-total h6 {
    font-size: 1.1rem;
  }

  .quote-summary-total h5 {
    font-size: 1.25rem;
  }
}

/* Mobile Extra Small (320px - 374px) */
@media (max-width: 374px) {
  .quote-detail-container {
    padding: 0.25rem;
  }

  .quote-navigation {
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }

  .quote-navigation-left {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .quote-navigation-right {
    flex-direction: column;
    width: 100%;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 0.5rem;
  }

  .quote-sidebar {
    padding: 0.5rem;
    position: static;
    width: 100%;
    margin-top: 0.75rem;
  }

  .customer-info-header {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .customer-avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .customer-contact {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .customer-contact-item {
    font-size: 0.8rem;
  }

  .product-table-header,
  .product-table-row {
    display: none;
  }

  .product-card {
    display: block;
    padding: 0.5rem;
  }

  .product-card-header h6 {
    font-size: 0.9rem;
  }

  .product-card-header p {
    font-size: 0.75rem;
  }

  .product-card-details {
    flex-direction: column;
    gap: 0.5rem;
  }

  .product-card-details span {
    font-size: 0.7rem;
  }

  .product-card-details p {
    font-size: 0.8rem;
  }

  .signature-content {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .signature-image,
  .signature-date {
    width: 70px;
    height: 70px;
  }

  .quote-actions {
    flex-direction: column;
  }

  .quote-summary h6 {
    font-size: 0.85rem;
  }

  .quote-summary-item p {
    font-size: 0.75rem;
  }

  .quote-summary-total h6 {
    font-size: 1rem;
  }

  .quote-summary-total h5 {
    font-size: 1.1rem;
  }
}

/* Mobile Tiny (280px - 319px) */
@media (max-width: 319px) {
  .quote-detail-container {
    padding: 0.25rem;
  }

  .quote-navigation {
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }

  .quote-navigation-left {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .quote-navigation-right {
    flex-direction: column;
    width: 100%;
  }

  .customer-info-card,
  .product-table-container,
  .notes-section,
  .signature-section {
    padding: 0.5rem;
  }

  .quote-sidebar {
    padding: 0.5rem;
    position: static;
    width: 100%;
    margin-top: 0.75rem;
  }

  .customer-info-header {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .customer-avatar {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .customer-contact {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .customer-contact-item {
    font-size: 0.75rem;
  }

  .product-table-header,
  .product-table-row {
    display: none;
  }

  .product-card {
    display: block;
    padding: 0.5rem;
  }

  .product-card-header h6 {
    font-size: 0.85rem;
  }

  .product-card-header p {
    font-size: 0.7rem;
  }

  .product-card-details {
    flex-direction: column;
    gap: 0.5rem;
  }

  .product-card-details span {
    font-size: 0.65rem;
  }

  .product-card-details p {
    font-size: 0.75rem;
  }

  .signature-content {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .signature-image,
  .signature-date {
    width: 60px;
    height: 60px;
  }

  .quote-actions {
    flex-direction: column;
  }

  .quote-summary h6 {
    font-size: 0.85rem;
  }

  .quote-summary-item p {
    font-size: 0.75rem;
  }

  .quote-summary-total h6 {
    font-size: 0.9rem;
  }

  .quote-summary-total h5 {
    font-size: 1rem;
  }
}

.quote-modal .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  /* border-color: red !important; */
  /* color: #fff !important; */
}

.quote-modal .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background: red;
  /* border: none !important; */
  /* color: #0f2b46; */
  /* font-weight: 600; */
}

.nav-link:focus,
.nav-link:hover {
  color: #0f2b46;
  border: none !important;
}

.quote-modal .nav-tabs {
  border-bottom: 1px solid #0f2b46 !important;
}

.nav-tabs {
  --bs-nav-tabs-border-width: none !important;
}

.invoice-grid {
  /* display: grid; */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* Responsive grid with minimum width of 300px */
  gap: 20px;
  /* Space between the grid items */
}

.invoice-status-section {
  /* background-color: #f9f9f9; */
  padding: 15px;
  border-radius: 8px;
}

.invoice-status-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.invoice-status-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.no-data-found {
  grid-column: span 2;
  /* Spans across the grid if no data is found */
  text-align: center;
  color: #777;
}

/* Modern Quote Detail Styles */
.quote-header {
  background-color: var(--bg-blue-color);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  transition: all 0.3s ease;
  color: var(--text-white-color);
}

.quote-header:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.quote-card {
  background: var(--bg-white-color);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-blue-color);
  transition: all 0.3s ease;
  overflow: hidden;
  max-width: 100%;
}

.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Quote cards responsive - prevent overflow and fix layout on small screens */
@media (max-width: 991px) {
  .quote-card {
    border-radius: 12px;
  }
  .quote-card-header {
    padding: 1rem 1rem !important;
  }
  .quote-card-body {
    padding: 1rem 1rem !important;
  }
}

@media (max-width: 575px) {
  .quote-card-header {
    padding: 0.75rem 1rem !important;
  }
  .quote-card-body {
    padding: 0.75rem 1rem !important;
  }
}

.status-chip {
  border-radius: 20px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: var(--shadow-md);
}

.status-approved {
  background-color: #51cf66;
  color: white;
}

.status-pending {
  background-color: var(--bg-orange-color);
  color: var(--text-white-color);
}

.status-requested {
  background-color: #ff6b6b;
  color: white;
}

.product-grid {
  /* display: grid; */
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
}

.product-header {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1rem;
  font-weight: 600;
  color: var(--text-blue-color);
  border: 1px solid var(--border-blue-color);
}

.product-row {
  background: var(--bg-white-color);
  border: 1px solid var(--border-blue-color);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.product-row:hover {
  background: #f8f9fa;
  border-color: var(--text-orange-color);
  transform: translateX(4px);
}

.product-image {
  border-radius: 8px;
  border: 2px solid var(--border-blue-color);
  transition: all 0.3s ease;
}

.product-image:hover {
  border-color: var(--text-orange-color);
  transform: scale(1.05);
}

.quote-total {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-button {
  border-radius: 12px;
  font-weight: 600;
  padding: 12px 24px;
  transition: all 0.3s ease;
  text-transform: none;
  font-size: 1rem;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.approve-button {
  background-color: var(--bg-orange-color);
  color: var(--text-white-color);
}

.approve-button:hover {
  background-color: #d67a3a;
}

.request-button {
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--text-white-color);
  background: transparent;
}

.request-button:hover {
  border-color: var(--text-white-color);
  background: rgba(255, 255, 255, 0.1);
}

.modern-dialog {
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
}

.dialog-header {
  background-color: var(--bg-blue-color);
  border-radius: 16px 16px 0 0;
  color: var(--text-white-color);
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

.slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--bg-blue-color);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #052a4f;
}

/* Loading Animation */
.loading-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* Hover Effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Text Colors */
.gradient-text {
  color: var(--text-blue-color);
  font-weight: 700;
}

/* Icon Styles */
.icon-glow {
  filter: drop-shadow(var(--drop-shadow-navy-icon));
}

/* Card Shadows */
.card-shadow-light {
  box-shadow: var(--shadow-sm);
}

.card-shadow-medium {
  box-shadow: var(--shadow-lg);
}

.card-shadow-heavy {
  box-shadow: var(--shadow-xl);
}



@media (max-width: 1200px) {
  .css-1pdvcoi {
    gap: 32px;
    flex-direction: column !important;
  }
}

/* Customer quote detail: admin quote CSS bleeds the root grid (~105% width + negative margin)
   inside .main-content; with .Quote-details { overflow-x: hidden } the left/right get clipped.
   Reset bleed for this page only (client + staff layouts use .main-content without invoicePaidSlip). */
.main-content:not(.invoicePaidSlip)
  .customer-quote-detail-page.quote-detail-cjm.qdj-atlas.MuiGrid-root {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.customer-quote-detail-page.Quote-details {
  overflow-x: visible !important;
  min-width: 0;
}

.main-content:not(.invoicePaidSlip) .customer-quote-detail-page .qdj-quote-shell.MuiGrid-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
/**
 * Customer Quotes — mobile Jobber card: pastel View in collapse Actions row only.
 * Actions column is hidden on desktop (≥776px); default navy "View Details" bar is off.
 */
.customer-quotes-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-quotes-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.customer-quotes-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-quotes-mobile-actions.customer-list-actions-mobile
  .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 775px) {
  .customer-quotes-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .jobber-mobile-card__actions
    .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

@media (max-width: 400px) {
  .customer-quotes-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-quotes-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .customer-quotes-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-quotes-mobile-actions.customer-list-actions-mobile
    .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

@media (min-width: 776px) {
  .customer-quotes-jobber-wrap .jobber-table-v2 thead tr th:last-child,
  .customer-quotes-jobber-wrap .jobber-table-v2 tbody tr.jobber-table-v2__row > td:last-child {
    display: none !important;
  }
}

.TempleteMOdel{
    background-color: #243a73 !important;
    color: white !important;
    font-weight: 700 !important;
}

.templeteName{
    color: #243a73 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* Templates list — template name only (no user avatar); mobile card + desktop first column */
.template-list-primary-title {
  min-width: 0;
  max-width: 100%;
  display: block;
}
.template-list-primary-title .customer-table-name-block__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Page header row - button on right, smaller size */
.customersAddCustomers {
  flex-wrap: wrap;
  min-width: 0;
  box-sizing: border-box;
  justify-content: space-between;
}
.customersAddCustomers .tableNameHead {
  min-width: 0;
}
.customersAddCustomers .searchBarOfTable {
  flex-shrink: 0;
  margin-left: auto;
}
/* Smaller Add Template button, keep on right */
.customersAddCustomers .searchBarOfTable .backgroundBlurBtn,
.customersAddCustomers .searchBarOfTable button {
  padding: 6px 14px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 - Page header & Add Template button responsive */
@media (max-width: 991px) {
  /* Prevent header row from overflowing - allow wrap so Add Template button is visible */
  .customersAddCustomers {
    flex-wrap: wrap !important;
    gap: 12px !important;
    row-gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    justify-content: space-between !important;
  }
  .customersAddCustomers .tableNameHead {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .customersAddCustomers .searchBarOfTable {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  .customersAddCustomers .searchBarOfTable button,
  .customersAddCustomers .searchBarOfTable .BlueButton {
    white-space: nowrap !important;
  }
  /* Card header - All Templates + search */
  .customerList_searchbar.customersAddCustomers {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .customerList_searchbar .customerList_head {
    min-width: 0 !important;
  }
  .customerList_searchbar .customer_searchBar.searchBarOfTable {
    min-width: 0 !important;
  }
}

/* 576 */
@media (max-width: 767px) {
    .templeNameHere{
        flex-direction: column !important;
    }
  /* Keep Add Template on right, smaller button */
  .customersAddCustomers .searchBarOfTable .backgroundBlurBtn,
  .customersAddCustomers .searchBarOfTable button {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}

/* 525 */
@media (max-width: 575px) {
    .tepleteFiveDis{
        width: 100% !important;
    }
  .customersAddCustomers .searchBarOfTable .backgroundBlurBtn,
  .customersAddCustomers .searchBarOfTable button {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .customersAddCustomers {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

/* Template Dialog Body Preview Styles */
.template-body-preview img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
  border-radius: 4px;
}

.template-body-preview {
  word-wrap: break-word;
  line-height: 1.5;
}

.template-body-preview p {
  margin: 8px 0;
}

.template-body-preview ul,
.template-body-preview ol {
  margin: 8px 0;
  padding-left: 24px;
}

/* Table styles for template preview */
.template-body-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  border: 1px solid #ddd;
  font-size: 14px;
}

.template-body-preview table th,
.template-body-preview table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.template-body-preview table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #0f2b46;
}

.template-body-preview table tr:nth-child(even) {
  background-color: #fafafa;
}

.template-body-preview table tr:hover {
  background-color: #f0f0f0;
}

.service-input::placeholder {
    color: red !important;
}

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

/* 768 */
@media (max-width: 1980px) {
    .navbar-setting {
        display: none !important;
    }
}

/* 1680 */


/* 1500 */
@media (max-width: 1680px) {
    .navbar-setting {
        display: none !important;
    }
}

@media (max-width: 3000px) {
    .navbar-setting {
        display: none !important;
    }
.setting-dropdown{
    display: none;
}
}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 992 */
@media (max-width: 1228px) {
    .product-service-table {
        columns: 1;
    }

    .product-service-table {
        width: 85%;
    }

}

/* 768 */
@media (max-width: 991px) {
    .navbar-setting {
        display: block !important;
    }

    .navbar-setting.dropdown-menu {
        width: 105% !important;
        margin-left: -12px;
        margin-top: 10px;
    }

    .product-service-table {
        width: 100%;
    }

    .manage-team{
        display: block !important;
    }

    .divider-profile {
        display: none;
    }
    .superAdminProfile{
        flex-direction: column-reverse !important;
    }
}

/* 576 */
@media (max-width: 767px) {
    .manage-team {
        margin-left: 2%;
        width: 95%;
    }

    .textfield_bottom {
        margin-bottom: 5px !important;
    }

    .btn-bottm {
        margin-top: 45px !important;
    }

    .cityitem {
        margin-bottom: 15px !important;
        margin-top: 10px !important;
    }
    .settingUserInfo{
        font-size: 18px !important;
        margin-top: 10px !important;
    }
    .profileWidthLeft{
        padding-left: 0px !important;
        width: 100% !important;
    }

    /* Personal Information Page Responsive Styles - Mobile Only */
    .profile-card {
        padding: 20px 15px !important;
    }

    .profile-form-col {
        padding: 0 5px !important;
    }

    .profile-info-col {
        padding: 20px 5px !important;
    }

    .profile-radio-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .profile-button-group {
        flex-direction: column !important;
    }

    .profile-button-group button,
    .profile-button-group .MuiButton-root {
        width: 100% !important;
        min-width: 100% !important;
    }

    .profile-save-button-container {
        width: 100% !important;
    }

    .profile-save-button {
        width: 100% !important;
    }

    .profile-form-container {
        overflow-x: hidden !important;
    }
        
}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {
    .cityitem {
        display: flex;
        flex-direction: column !important;
        width: 100% !important;
    }

    .widt {
        width: 100% !important;

    }

    .city-gap {
        margin-bottom: 0px !important;
    }

    .zipp {
        margin-bottom: 0px !important;
        width: 100% !important;
    }

    .country_top {
        width: 100% !important;
    }



}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
    .personlInfoDp{
        width: 70px !important;
        height: 70px !important;
    }
    .userOpinion{
        font-size: 15px !important;
    }
    .indexProfileBtn{
        width: 100% !important;
    }
}

/* 280 */
@media (max-width: 319px) {

    .btn-bottm {
        margin-top: 80px !important;
    } 


}

.prfile-text .css-6dl4gh-MuiFormControl-root-MuiTextField-root .MuiOutlinedInput-root {
    width: 97% !important;
}

.stat-input {
    width: 96.8% !important;
}

/* ============================================
   PROFILE PAGE RESPONSIVE STYLES
   ============================================ */

/* Properties Table - vertical scroll only; no forced horizontal scroll on mobile */
.properties-table-container {
    max-height: 160px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Smooth scrolling for properties table */
.properties-table-container table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Fit viewport on all breakpoints — avoids 600px min-width horizontal scroll */
.properties-locations-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.properties-locations-table .MuiTableCell-root {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

.properties-locations-table .MuiTableCell-root:last-child {
    white-space: nowrap !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    box-sizing: border-box !important;
}

.properties-locations-table .MuiTableCell-root:last-child .MuiBox-root {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    justify-content: center !important;
}

.properties-locations-table .MuiTableCell-root:last-child .MuiIconButton-root {
    padding: 4px !important;
}

/* Mobile: property rows as readable cards (not a crushed 5-column table) */
.properties-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 16px;
    max-height: min(55vh, 380px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.properties-mobile-card {
    border: 1px solid #e4e8ec;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.properties-mobile-card--donor {
    border-color: rgba(104, 178, 203, 0.35);
}

/* Full address lines — never ellipsis / single-line cut (worker + customer profile) */
.properties-mobile-card {
    overflow: visible !important;
}

.properties-mobile-text-wrap {
    overflow: visible !important;
    max-width: 100% !important;
}

.properties-mobile-card .properties-mobile-address,
.properties-mobile-card .properties-mobile-meta,
.profile-main-card .properties-mobile-card .MuiTypography-root.properties-mobile-address,
.profile-main-card .properties-mobile-card .MuiTypography-root.properties-mobile-meta {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    display: block !important;
}

/* Manage Properties header — comfortable on narrow screens */
@media (max-width: 991px) {
    .properties-manage-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        align-content: stretch !important;
        gap: 12px !important;
    }

    .properties-manage-card-header .properties-manage-new-btn,
    .properties-manage-card-header a.properties-manage-new-btn,
    .properties-manage-card-header button {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 575px) {
    .properties-mobile-list {
        padding: 10px 10px 14px;
        max-height: min(58vh, 420px);
    }
    .properties-mobile-card {
        padding: 12px 12px;
    }
}

/* Prevent row negative margins from causing form fields to be cut off */
.profile-main-card .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Form columns: at lg+ keep Bootstrap 50/50; width:100% here was forcing a single-column stack */
@media (min-width: 992px) {
    .profile-main-card .col-lg-6.order-1.order-lg-1,
    .profile-main-card .col-lg-6.order-2.order-lg-2,
    .profile-main-card .order-1.order-lg-1,
    .profile-main-card .order-2.order-lg-2 {
        min-width: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root,
    .profile-main-card .col-lg-6.order-2.order-lg-2 > .MuiGrid-root,
    .profile-main-card .order-1.order-lg-1 > .MuiGrid-root,
    .profile-main-card .order-2.order-lg-2 > .MuiGrid-root {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 991px) {
    .profile-main-card .col-lg-6.order-1.order-lg-1,
    .profile-main-card .order-1.order-lg-1 {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root,
    .profile-main-card .order-1.order-lg-1 > .MuiGrid-root {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
}

/* Personal Information inputs - full width, never cut off */
.profile-main-card .MuiTextField-root,
.profile-main-card .MuiFormControl-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* Slightly more air between label and input inside each field */
.profile-main-card .cs-form-field,
.profile-main-card .cs-rs__wrapper {
    gap: 8px;
}

/* Stacked personal fields (index.jsx): Grid wrappers around each InputText */
.profile-main-card .profile-personal-info-field {
    margin-bottom: 24px !important;
}

/* Donor / Customer / Staff: Email + Mobile are direct .cs-form-field children of the left column Grid (not MUI TextField — prior rules skipped them) */
.profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .cs-form-field {
    margin-bottom: 24px !important;
}

/* First + Last name row: space below the pair */
.profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .name-fields-row {
    margin-bottom: 24px !important;
}

/* Superadmin profile column */
.superAdminProfile .cs-form-field.mb-3 {
    margin-bottom: 24px !important;
}

/* PERFECT FIX: Consistent error message gap for ALL fields - MINIMAL GAP */
/* This ensures State/Country (FormControl) match City/ZIP (TextField) */
/* Target ALL FormHelperText elements with maximum specificity */
.profile-main-card .MuiFormHelperText-root,
.profile-main-card .MuiTextField-root .MuiFormHelperText-root,
.profile-main-card .MuiFormControl-root .MuiFormHelperText-root,
.profile-main-card .MuiAutocomplete-root .MuiFormHelperText-root,
.profile-main-card .MuiFormControl-root .MuiAutocomplete-root .MuiFormHelperText-root,
.profile-main-card .MuiFormControl-root .MuiAutocomplete-root .MuiTextField-root .MuiFormHelperText-root,
.profile-main-card .MuiFormControl-root .MuiAutocomplete-root .MuiTextField-root .MuiFormControl-root .MuiFormHelperText-root {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    top: 0px !important;
}

/* Remove any spacing from FormControl that wraps Autocomplete */
.profile-main-card .MuiFormControl-root {
    padding-bottom: 0px !important;
    margin-bottom: 16px !important;
}

/* Remove spacing from Autocomplete component itself */
.profile-main-card .MuiAutocomplete-root {
    margin-bottom: 0px !important;
}

/* Remove spacing from TextField inside Autocomplete */
.profile-main-card .MuiAutocomplete-root .MuiTextField-root {
    margin-bottom: 0px !important;
}

/* Name fields row - Consistent gap between First and Last name */
.name-fields-row {
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.name-fields-row > *,
.name-fields-row .MuiTextField-root,
.name-fields-row .MuiFormControl-root {
    margin-bottom: 0 !important;
}

/* Override Bootstrap margin classes for text fields */
.profile-main-card .mb-3,
.profile-main-card .my-2,
.profile-main-card .textfield_bottom {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

.name-fields-row .mb-3,
.name-fields-row .my-2,
.name-fields-row .textfield_bottom {
    margin-bottom: 0 !important;
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    /* Card padding */
    .profile-main-card {
        padding: 24px 20px !important;
    }

    /* Form section */
    .col-lg-6.order-1.order-lg-1 {
        padding-right: 0 !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Right section */
    .col-lg-6.order-2.order-lg-2 {
        padding: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Heading */
    .heading-three .bold-text.fs-3 {
        font-size: 24px !important;
    }

    /* Company box */
    .profile-company-info-box {
        padding: 15px !important;
    }

    /* 2FA section */
    .profile-2fa-toggle-label {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Buttons */
    .profile-button-group-container {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }

    .indexProfileBtn {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Custom Breakpoint for 685px and below */
@media (max-width: 685px) {
    /* Fix parent container */
    .col-12.profileWidthLeft,
    .col-12.col-lg-12.col-md-12.profileWidthLeft {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 0 !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Header container - Perfect display */
    .profile-header-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Heading wrapper */
    .heading-three {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Customer name text - Perfect styling */
    .heading-three .bold-text.fs-3 {
        font-size: 22px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 12px !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        position: relative !important;
        text-align: left !important;
        letter-spacing: -0.3px !important;
    }

    /* Ensure Grid container visibility */
    .profileWidthLeft > .MuiGrid-root:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Ensure Typography is visible */
    .profile-header-container .MuiTypography-root,
    .profile-header-container .heading-three .MuiTypography-root {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
    /* Container optimization - Proper side spacing */
    .col-12.col-lg-12.col-md-12.profileWidthLeft {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }

    /* Parent Grid container */
    .col-12.col-lg-12.col-md-12.profileWidthLeft > .MuiGrid-root {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Card padding - Proper side spacing */
    .profile-main-card {
        padding: 16px 12px !important;
        margin-top: 8px !important;
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Row container - Remove negative margins on mobile */
    .profile-main-card .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Left and Right columns - Full width on mobile */
    .col-lg-6.order-1.order-lg-1,
    .col-lg-6.order-2.order-lg-2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Ensure proper spacing between columns on mobile */
    .col-lg-6.order-1.order-lg-1 {
        margin-bottom: 20px !important;
        padding: 0 !important;
    }

    .col-lg-6.order-2.order-lg-2 {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* Profile Picture Section - Stack on mobile */
    .profile-picture-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center !important;
    }

    /* Keep avatar wrapper shrink-wrapped so delete icon stays on the circle (same as desktop) */
    .profile-picture-container > .MuiBox-root:first-child {
        width: auto !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        position: relative !important;
    }

    .profile-picture-container > .MuiBox-root:last-child {
        width: 100% !important;
        text-align: center !important;
    }

    .profile-main-card .personlInfoDp {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto !important;
    }

    /* Delete icon: keep on avatar (first child stays shrink-wrapped). Allow overflow so icon isn't clipped. */
    .profile-picture-container > .MuiBox-root:first-child {
        overflow: visible !important;
    }

    /* Profile Picture Card - Better mobile padding */
    .profile-main-card .MuiCard-root {
        padding: 12px !important;
        margin-bottom: 16px !important;
    }

    /* Input fields - Full width on mobile */
    .profile-main-card .MuiTextField-root,
    .profile-main-card .MuiFormControl-root {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Name fields row - Stack on mobile */
    .name-fields-row,
    .profile-main-card .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .name-fields-row > *,
    .profile-main-card .d-flex.gap-2 > * {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Properties Table - Better mobile handling */
    .profile-main-card table {
        font-size: 11px !important;
        width: 100% !important;
    }

    .profile-main-card .MuiTableCell-root {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    /* Table container - Horizontal scroll on mobile */
    .profile-main-card .MuiBox-root[style*="overflowX"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Properties table — no horizontal scroll */
    .properties-table-container {
        max-height: 140px !important;
        overflow-x: hidden !important;
    }

    /* 2FA Section - Better mobile spacing */
    .profile-main-card .MuiBox-root[style*="padding: 16px"] {
        padding: 12px 10px !important;
    }

    /* Section Headers - Better mobile spacing */
    .profile-main-card .MuiTypography-root[style*="fontSize: 18px"] {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Buttons - Full width on mobile */
    .profile-main-card button,
    .profile-main-card .MuiButton-root {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Action buttons container */
    .profile-button-group-container {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .profile-button-group-container > * {
        width: 100% !important;
    }

    /* Properties header buttons */
    .profile-main-card .MuiCardHeader-root {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }

    .profile-main-card .MuiCardHeader-root > * {
        width: 100% !important;
    }

    /* Header spacing on mobile */
    .profile-header-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    .heading-three {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
    }

    .heading-three .bold-text.fs-3 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Table responsive wrapper - Better scrolling */
    .profile-main-card .MuiBox-root[style*="overflowX"] {
        margin: 0 -12px !important;
        padding: 0 12px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* All section boxes - Consistent spacing */
    .profile-main-card .MuiBox-root[style*="marginBottom"] {
        margin-bottom: 16px !important;
    }

    /* 2FA toggle - Better mobile display */
    .profile-main-card .MuiFormControlLabel-root {
        flex-wrap: wrap !important;
    }

    .profile-main-card .MuiSwitch-root {
        margin-right: 8px !important;
    }

    /* Heading - Reduced spacing */
    .profile-header-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    .heading-three {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
    }

    .heading-three .bold-text.fs-3 {
        font-size: 20px !important;
        text-align: left !important;
        margin-top: 1% !important;
        margin-bottom: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Form section - Proper side spacing */
    .col-lg-6.order-1.order-lg-1 {
        padding: 0 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }

    .col-lg-6.order-1.order-lg-1 > .MuiGrid-root {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Right section - Proper padding */
    .col-lg-6.order-2.order-lg-2 {
        padding: 0 4px !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Personal Information title - Reduced spacing */
    .col-lg-4.order-1.order-lg-2 .settingUserInfo {
        font-size: 22px !important;
        margin-bottom: 15px !important;
        margin-top: 0 !important;
    }

    /* Profile image - Reduced spacing */
    .personlInfoDp {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 15px !important;
    }

    /* Company Information box - Reduced padding */
    .profile-company-info-box {
        padding: 12px 8px !important;
        margin-top: 15px !important;
        border-radius: 8px !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
    }

    /* Company Information title - Reduced spacing */
    .profile-company-info-box .MuiTypography-root:first-child {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        margin-top: 0 !important;
    }

    /* Timezone Select */
    .profile-timezone-select {
        width: 100% !important;
    }

    .profile-timezone-select .MuiSelect-select {
        font-size: 14px !important;
        padding: 12px 32px 12px 14px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    .profile-timezone-select .MuiOutlinedInput-root {
        overflow: hidden !important;
    }

    /* 2FA Container - Reduced spacing */
    .profile-2fa-container {
        margin-left: 0 !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    /* 2FA Toggle Label */
    .profile-2fa-toggle-label {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .profile-2fa-title {
        font-size: 13px !important;
        margin-left: 8px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 2FA Description */
    .profile-2fa-description-text {
        font-size: 11px !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        padding-right: 10px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* 2FA Method Section - Reduced spacing */
    .profile-2fa-method-container {
        margin-left: 0 !important;
        margin-top: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2FA Radio Group */
    .profile-2fa-radio-group {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .profile-2fa-radio-group .MuiFormControlLabel-root {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .profile-2fa-radio-group .MuiTypography-root {
        font-size: 12px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 2FA Verification Box - Reduced padding */
    .profile-2fa-verification-box {
        padding: 12px 8px !important;
        margin-left: 0 !important;
        margin-top: 12px !important;
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-2fa-verification-box .MuiTypography-root:first-child {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        word-wrap: break-word !important;
    }

    /* 2FA Button Groups */
    .profile-2fa-button-group {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .profile-2fa-button-group .MuiButton-root,
    .profile-2fa-button-group button {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Change Password & Save Button - Reduced spacing */
    .profile-button-group-container {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        margin-top: 15px !important;
    }

    .profile-button-group-container > .MuiGrid-root:first-child {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    .profile-button-group-container .indexProfileBtn {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 5px !important;
    }

    /* Error Message */
    .mt-2.mb-2 .MuiTypography-root {
        font-size: 12px !important;
        text-align: center !important;
    }

    /* User Opinion Text */
    .userOpinion {
        font-size: 14px !important;
        padding: 0 10px !important;
        word-wrap: break-word !important;
    }

    /* Form Inputs - Full width with proper padding */
    .MuiTextField-root,
    .MuiFormControl-root {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Input fields padding optimization */
    .MuiTextField-root .MuiOutlinedInput-root,
    .MuiFormControl-root .MuiOutlinedInput-root {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Row optimization */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Bootstrap Row class */
    .profile-main-card .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Col optimization */
    .profile-main-card .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Profile Picture Upload Button - Full width on mobile */
    .profile-picture-container button,
    .profile-picture-container .MuiButton-root {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Section spacing on mobile */
    .profile-main-card .MuiBox-root[style*="marginBottom: 20px"] {
        margin-bottom: 16px !important;
    }

    /* Profile picture text - Better mobile */
    .profile-picture-container .MuiTypography-root {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Name fields row - Consistent gap on mobile */
    .name-fields-row {
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .name-fields-row > * {
        margin-bottom: 0 !important;
    }

    .name-fields-row .MuiTextField-root,
    .name-fields-row .MuiFormControl-root {
        margin-bottom: 0 !important;
    }

    /* Properties table header - Better mobile */
    .profile-main-card .MuiCardHeader-root .MuiTypography-root {
        font-size: 14px !important;
    }

    /* 2FA Radio buttons - Stack on mobile */
    .profile-main-card .MuiRadioGroup-root {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .profile-main-card .MuiFormControlLabel-root {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Ensure no horizontal overflow - but allow form inputs to use full width */
    .profile-main-card {
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    .profile-main-card * {
        box-sizing: border-box !important;
    }
    /* Don't constrain form inputs - they need full width of their column */
    .profile-main-card .col-lg-6.order-1 .MuiTextField-root .MuiOutlinedInput-root,
    .profile-main-card .col-lg-6.order-1 .MuiFormControl-root .MuiOutlinedInput-root {
        max-width: none !important;
    }

    /* Fix table cell text wrapping */
    .profile-main-card .MuiTableCell-root {
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Stacked profile fields — keep vertical rhythm (was 12px; too tight vs label/input) */
    .profile-main-card .mb-3,
    .profile-main-card .my-2,
    .profile-main-card .textfield_bottom {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Target MUI TextField directly for consistent spacing */
    .profile-main-card .MuiTextField-root,
    .profile-main-card .MuiFormControl-root {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .profile-main-card .profile-personal-info-field,
    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .cs-form-field,
    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .name-fields-row {
        margin-bottom: 18px !important;
    }

    /* Name fields row - Reduce gap between First and Last name */
    .name-fields-row {
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .name-fields-row > * {
        margin-bottom: 0 !important;
    }

    .name-fields-row .MuiTextField-root,
    .name-fields-row .MuiFormControl-root {
        margin-bottom: 0 !important;
    }

    /* Settings Layout Container - Mobile proper spacing */
    .settings-layout-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .addProductServiceSideLine {
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Reduce spacing between form fields */
    .col-lg-8.order-2.order-lg-1 .MuiTextField-root,
    .col-lg-8.order-2.order-lg-1 .MuiFormControl-root {
        margin-bottom: 10px !important;
    }

    /* Reduce spacing in action buttons container */
    .profile-action-buttons-container {
        margin-top: 15px !important;
    }

    /* Reduce spacing in 2FA sections */
    .profile-2fa-container .MuiFormControlLabel-root {
        margin-bottom: 5px !important;
    }

    .profile-2fa-description-text {
        margin-top: 2px !important;
        margin-left: 0 !important;
    }

    /* Reduce spacing in backup codes section */
    .profile-2fa-method-container .MuiBox-root {
        margin-top: 12px !important;
    }

    /* Reduce spacing in button groups */
    .profile-2fa-button-group {
        margin-top: 10px !important;
    }
}

/* Small Mobile (480px - 575px) */
@media (max-width: 575px) {
    .profile-main-card {
        padding: 14px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 6px !important;
    }

    .col-12.col-lg-12.col-md-12.profileWidthLeft {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    .heading-three .bold-text.fs-3 {
        font-size: 18px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .col-lg-4.order-1.order-lg-2 .settingUserInfo {
        font-size: 20px !important;
    }

    .properties-table-container {
        max-height: 120px !important;
        overflow-x: hidden !important;
    }

    .col-lg-8.order-2.order-lg-1 {
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    .profile-company-info-box {
        padding: 12px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 12px !important;
    }

    .profile-company-info-box .MuiTypography-root:first-child {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .profile-2fa-verification-box {
        padding: 8px 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 10px !important;
    }

    .profile-2fa-verification-box .MuiTypography-root:first-child {
        font-size: 13px !important;
    }

    .profile-timezone-select .MuiSelect-select {
        font-size: 13px !important;
        padding: 10px 30px 10px 10px !important;
    }

    .userOpinion {
        font-size: 13px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Backup Codes Grid */
    .profile-backup-codes-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Input fields - maximize width */
    .MuiTextField-root,
    .MuiFormControl-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Extra Small Mobile (425px - 479px) */
@media (max-width: 479px) {
    .profile-main-card {
        padding: 12px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 5px !important;
    }

    .col-12.col-lg-12.col-md-12.profileWidthLeft {
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    .heading-three .bold-text.fs-3 {
        font-size: 16px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .col-lg-4.order-1.order-lg-2 .settingUserInfo {
        font-size: 18px !important;
    }

    .col-lg-8.order-2.order-lg-1 {
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    .profile-company-info-box {
        padding: 10px 8px !important;
        margin-top: 10px !important;
    }

    .profile-company-info-box .MuiTypography-root:first-child {
        margin-bottom: 8px !important;
    }

    .profile-timezone-select .MuiSelect-select {
        font-size: 12px !important;
        padding: 8px 28px 8px 8px !important;
    }

    /* Maximize input field width */
    .MuiTextField-root .MuiInputBase-root,
    .MuiFormControl-root .MuiInputBase-root {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Tiny Mobile (375px - 424px) */
@media (max-width: 424px) {
    .profile-main-card {
        padding: 12px 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 4px !important;
    }

    .col-12.col-lg-12.col-md-12.profileWidthLeft {
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    .heading-three .bold-text.fs-3 {
        font-size: 15px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .col-lg-4.order-1.order-lg-2 .settingUserInfo {
        font-size: 17px !important;
    }

    .col-lg-8.order-2.order-lg-1 {
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    .personlInfoDp {
        width: 60px !important;
        height: 60px !important;
    }

    .profile-company-info-box {
        padding: 10px 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 10px !important;
    }

    .profile-2fa-verification-box {
        padding: 10px 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 8px !important;
    }

    .profile-timezone-select .MuiSelect-select {
        font-size: 11px !important;
        padding: 6px 26px 6px 6px !important;
    }

    /* Input fields - minimal padding */
    .MuiTextField-root .MuiInputBase-root,
    .MuiFormControl-root .MuiInputBase-root {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Extra Tiny Mobile (320px - 374px) */
@media (max-width: 374px) {
    .profile-main-card {
        padding: 10px 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 3px !important;
    }

    .col-12.col-lg-12.col-md-12.profileWidthLeft {
        padding-left: 6px !important;
        padding-right: 6px !important;
        box-sizing: border-box !important;
    }

    /* Header Section - Ensure name is visible */
    .profile-header-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .heading-three {
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .heading-three .bold-text.fs-3 {
        font-size: 14px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Header container - Full width */
    .profileWidthLeft > .MuiGrid-root:first-child {
        width: 100% !important;
        padding: 0 4px !important;
        margin-top: 2% !important;
        margin-bottom: 16px !important;
    }

    .col-lg-4.order-1.order-lg-2 .settingUserInfo {
        font-size: 16px !important;
    }

    .col-lg-8.order-2.order-lg-1 {
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    .personlInfoDp {
        width: 55px !important;
        height: 55px !important;
    }

    .profile-company-info-box {
        padding: 10px 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 8px !important;
    }

    .profile-company-info-box .MuiTypography-root:first-child {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .profile-2fa-verification-box {
        padding: 10px 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 6px !important;
    }

    /* Reduce all margins further - Target InputText fields specifically */
    .profile-main-card .mb-3,
    .profile-main-card .my-2,
    .profile-main-card .textfield_bottom {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Target MUI TextField directly */
    .profile-main-card .MuiTextField-root,
    .profile-main-card .MuiFormControl-root {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Name fields row - Consistent spacing */
    .name-fields-row {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .name-fields-row > * {
        margin-bottom: 0 !important;
    }

    .name-fields-row .MuiTextField-root,
    .name-fields-row .MuiFormControl-root {
        margin-bottom: 0 !important;
    }

    .profile-timezone-select .MuiSelect-select {
        font-size: 10px !important;
        padding: 5px 24px 5px 5px !important;
    }

    .userOpinion {
        font-size: 12px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* Input fields - minimal padding for very small screens */
    .MuiTextField-root .MuiInputBase-root,
    .MuiFormControl-root .MuiInputBase-root {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Labels optimization */
    .MuiInputLabel-root {
        font-size: 13px !important;
        padding-left: 4px !important;
    }
}

/* Ultra Small Mobile (280px - 319px) */
@media (max-width: 319px) {
    .col-12.col-lg-12.col-md-12.profileWidthLeft {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Header Section - Critical for 280px */
    .profile-header-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 2px !important;
        margin-top: 2% !important;
        margin-bottom: 12px !important;
        display: block !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .heading-three {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .heading-three .bold-text.fs-3 {
        font-size: 13px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Header container - Ensure visibility */
    .profileWidthLeft > .MuiGrid-root:first-child {
        width: 100% !important;
        padding: 0 2px !important;
        margin-top: 1% !important;
        margin-bottom: 12px !important;
        display: block !important;
    }

    .profileWidthLeft > .MuiGrid-root:first-child .heading-three {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .profile-main-card {
        padding: 8px 6px !important;
        margin-top: 2px !important;
    }

    /* Profile picture - Smaller */
    .profile-main-card .personlInfoDp {
        width: 50px !important;
        height: 50px !important;
    }

    /* All text smaller */
    .profile-main-card .MuiTypography-root[style*="fontSize: 18px"] {
        font-size: 14px !important;
    }

    .profile-main-card .MuiTypography-root[style*="fontSize: 16px"] {
        font-size: 13px !important;
    }

    /* Input fields - Minimal padding */
    .profile-main-card .MuiTextField-root {
        margin-bottom: 8px !important;
    }

    /* Buttons - Smaller text */
    .profile-main-card button {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Table - Even smaller */
    .profile-main-card table {
        font-size: 9px !important;
    }

    .profile-main-card .MuiTableCell-root {
        padding: 4px 6px !important;
        font-size: 9px !important;
    }
}

/* Dialog Modals Responsive */
@media (max-width: 767px) {
    .MuiDialog-paper {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
    }

    .MuiDialogContent-root {
        padding: 15px 10px !important;
    }

    .MuiDialogTitle-root {
        padding: 15px 10px !important;
    }

    .managebuttonModel {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .managebuttonModel .MuiButton-root,
    .managebuttonModel button {
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 575px) {
    .MuiDialog-paper {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
        width: calc(100% - 16px) !important;
    }

    .MuiDialogContent-root {
        padding: 12px 8px !important;
    }

    .MuiDialogTitle-root {
        padding: 12px 8px !important;
    }
}

/* Fix for Address Component */
@media (max-width: 767px) {
    .cityitem {
        display: flex;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
    }

    .widt {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .city-gap {
        margin-bottom: 0px !important;
    }

    .zipp {
        margin-bottom: 0px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .country_top {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Address Component - Force Column Layout on Mobile */
    /* Target Bootstrap Row components within the form section */
    .col-lg-8.order-2.order-lg-1 .row,
    .col-lg-8.order-2.order-lg-1 .Row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 2px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Address fields - City, State, ZIP, Country - Force full width with proper spacing */
    .col-lg-8.order-2.order-lg-1 .row > [class*="col-"],
    .col-lg-8.order-2.order-lg-1 .Row > [class*="col-"],
    .col-lg-8.order-2.order-lg-1 .row > div,
    .col-lg-8.order-2.order-lg-1 .Row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Remove left padding from State and Country fields on mobile */
    .col-lg-8.order-2.order-lg-1 .ps-lg-2,
    .col-lg-8.order-2.order-lg-1 [class*="ps-lg"],
    .col-lg-8.order-2.order-lg-1 [class*="ps-md"],
    .col-lg-8.order-2.order-lg-1 [class*="ps-sm"] {
        padding-left: 0 !important;
    }

    /* Ensure Address component rows stack vertically */
    .col-lg-8.order-2.order-lg-1 .m-0.p-0 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Address input fields full width */
    .col-lg-8.order-2.order-lg-1 .MuiTextField-root,
    .col-lg-8.order-2.order-lg-1 .MuiFormControl-root {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Override Bootstrap column classes for mobile */
    .col-lg-8.order-2.order-lg-1 [class*="col-lg-6"],
    .col-lg-8.order-2.order-lg-1 [class*="col-md-12"],
    .col-lg-8.order-2.order-lg-1 [class*="col-sm-12"],
    .col-lg-8.order-2.order-lg-1 [class*="col-xs-12"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }
}

/* Extra Small Mobile - Address Fields */
@media (max-width: 575px) {
    .col-lg-8.order-2.order-lg-1 .row > [class*="col-"],
    .col-lg-8.order-2.order-lg-1 .Row > [class*="col-"],
    .col-lg-8.order-2.order-lg-1 .row > div,
    .col-lg-8.order-2.order-lg-1 .Row > div {
        margin-bottom: 8px !important;
    }

    /* InputText / cs-form-field — slightly tighter than tablet but not flush */
    .profile-main-card .mb-3,
    .profile-main-card .my-2,
    .profile-main-card .textfield_bottom {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    /* Target MUI TextField directly */
    .profile-main-card .MuiTextField-root,
    .profile-main-card .MuiFormControl-root {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    .profile-main-card .profile-personal-info-field,
    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .cs-form-field,
    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .name-fields-row {
        margin-bottom: 14px !important;
    }

    /* Name fields row - Consistent spacing */
    .name-fields-row {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .name-fields-row > * {
        margin-bottom: 0 !important;
    }

    .name-fields-row .MuiTextField-root,
    .name-fields-row .MuiFormControl-root {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 479px) {
    .col-lg-8.order-2.order-lg-1 .row > [class*="col-"],
    .col-lg-8.order-2.order-lg-1 .Row > [class*="col-"],
    .col-lg-8.order-2.order-lg-1 .row > div,
    .col-lg-8.order-2.order-lg-1 .Row > div {
        margin-bottom: 6px !important;
    }

    /* Ultra small screens - keep minimum vertical rhythm */
    .profile-main-card .mb-3,
    .profile-main-card .my-2,
    .profile-main-card .textfield_bottom {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Target MUI TextField directly */
    .profile-main-card .MuiTextField-root,
    .profile-main-card .MuiFormControl-root {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    .profile-main-card .profile-personal-info-field,
    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .cs-form-field,
    .profile-main-card .col-lg-6.order-1.order-lg-1 > .MuiGrid-root > .name-fields-row {
        margin-bottom: 12px !important;
    }

    /* Name fields row - Consistent spacing */
    .name-fields-row {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .name-fields-row > * {
        margin-bottom: 0 !important;
    }

    .name-fields-row .MuiTextField-root,
    .name-fields-row .MuiFormControl-root {
        margin-bottom: 0 !important;
    }
}
/*
 * Super Admin Management — mobile collapse (≤775px), aligned with Plan.jsx / Customers grid.
 */

@media (max-width: 775px) {
  .superadmin-management-table .jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Gray actions strip: let Plan-style grid + buttons fill width */
  .superadmin-management-table .jobber-mobile-card__collapse-inner .jobber-mobile-card__actions .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

/* Same grid + button density as `Plan/style.css` `.plan-superadmin-mobile-actions.customer-list-actions-mobile` */
.superadmin-management-table .jobber-mobile-card__collapse-inner .superadmin-management-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.superadmin-management-table .jobber-mobile-card__collapse-inner .superadmin-management-mobile-actions.customer-list-actions-mobile .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
  .superadmin-management-table .jobber-mobile-card__collapse-inner .superadmin-management-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .superadmin-management-table .jobber-mobile-card__collapse-inner .superadmin-management-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

.css-1ex1afd-MuiTableCell-root {
  font-family: var(--font-body), "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
  text-align: left;
  padding: 16px;
  color: rgba(0, 0, 0, 0.87);
}
.css-yz9k0d-MuiInputBase-input {
  color: white !important;
}
.planCancelBtn{
  height: 41px !important;
}

/* Plan modal: MUI Stack spacing={2} — single column, no nested Grid spacing clashes */
.plan-form-modal-stack {
  width: 100%;
}
.plan-form-modal-stack .plan-form-footer {
  align-items: center;
}
.plan-form-modal-stack .plan-form-switch-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* 425 */
@media (max-width: 479px) {
  .tableNameHead {
    margin-bottom: 10px !important;
  }
}



/* / 525 / */
@media (max-width: 575px) {
  .searchBarOfTable {
    width: 100% !important;
  }
  .tableNameHead {
    margin-bottom: 10px !important;
  }
}
@media (max-width: 767px) {
  .custom-swal{
    width: 90%; 
    max-width: 300px; 
  }
}
/* 375 */
@media (max-width: 424px) {
  .plansearch {
    margin-left: 20px !important;
  }
}
/* 320 */
@media (max-width: 374px) {
  
    .plansearch {
      margin-left: 20px !important;
    }
    .add-plan-super{
      padding: 10px !important;
      width: 35% !important;
      white-space: nowrap;
    }
    .planFormBrn{
      gap: 10px !important;
    }
    .flexPlanButn{
      flex-direction: column !important;
    }
}
/* 280 */

/* Removed margin-top for proper label alignment */
.pla-company .css-1pysi21-MuiFormLabel-root-MuiInputLabel-root {
  margin-top: 0 !important;
}

/* Ensure all pla-company shrink labels are properly aligned on border */
.pla-company .MuiInputLabel-shrink {
  transform: translate(14px, -9px) scale(0.75) !important;
  background-color: white;
  padding: 0 4px;
}
 @media (max-width: 767px) {
  .planFormSwitchDown {
    margin-top: 0 !important;
  }
  .pla-company {
    margin-top: 0.10rem !important;
  }
  .plan-form-modal-stack .pla-company {
    margin-top: 0 !important;
  }
}
@media (max-width: 319px) {
  .form-switch{
    margin-top: 30px !important;
  }
  .plan {
    font-size: 19px;
    margin-top: 9px;
  }
  .plansearch {
    margin-left: 20px !important;
  }
  .form-update-btn{
    padding: 5px !important;
    font-size: 15px !important;
  }
}
/* Fix shrink label vertical alignment on top border */
label#PlanName-label,
label#PlanDetail-label {
  margin-top: 0 !important;
}

label#PlanName-label.MuiInputLabel-shrink,
label#PlanDetail-label.MuiInputLabel-shrink {
  transform: translate(14px, -9px) scale(0.75) !important;
  background-color: white;
  padding: 0 4px;
}

/* Fix dropdown label overlap with border and vertical alignment */
.plan_billing .MuiInputLabel-outlined,
.chargeBOXINPUT .MuiInputLabel-outlined {
  background-color: white;
  padding: 0 5px;
}

.plan_billing .MuiInputLabel-shrink,
.chargeBOXINPUT .MuiInputLabel-shrink {
  background-color: white;
  padding: 0 5px;
  transform: translate(14px, -9px) scale(0.75) !important;
}

.plan_billing .MuiAutocomplete-root .MuiFormLabel-root,
.chargeBOXINPUT .MuiAutocomplete-root .MuiFormLabel-root {
  background-color: white;
  padding: 0 5px;
}

.plan_billing .MuiAutocomplete-root .MuiFormLabel-root.MuiInputLabel-shrink,
.chargeBOXINPUT .MuiAutocomplete-root .MuiFormLabel-root.MuiInputLabel-shrink {
  transform: translate(14px, -9px) scale(0.75) !important;
}

/* Mobile expanded row — auto-fit grid (same as Customers / Superadmin Company list) */
.jobber-mobile-card__collapse-inner .plan-superadmin-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.jobber-mobile-card__collapse-inner .plan-superadmin-mobile-actions.customer-list-actions-mobile .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
  .jobber-mobile-card__collapse-inner .plan-superadmin-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .jobber-mobile-card__collapse-inner .plan-superadmin-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}
/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
    .createDateFooter{
        flex-direction: column !important;
    }
}

/* 280 */
@media (max-width: 319px) {}

.worker-detail-container {
  padding: 20px;
  max-width: 100%;
  /* background-color: #f5f7fa; */
  min-height: 100vh;
}

/* Tab rail: plain segment buttons (no native dropdown caret / extra glyphs) */
.worker-detail-redesign .wdj-tab-rail .wdj-tab-rail-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
}
.worker-detail-redesign .wdj-tab-rail .wdj-tab-rail-btn::before,
.worker-detail-redesign .wdj-tab-rail .wdj-tab-rail-btn::after {
  content: none !important;
  display: none !important;
}

/* Edit Profile — same EditIcon as Manage Team row menu; undo global .edit-Icon 17×17 clip */
.worker-detail-redesign .wdj-edit-profile-btn .edit-Icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
}

/* Manage Team page header - button on right, smaller size */
.customer_addCustomer_div.customersAddCustomers,
.customer_addCustomer_div.customersAddCustomers .searchBarOfTable {
  flex-wrap: wrap;
  min-width: 0;
  box-sizing: border-box;
}
.customer_addCustomer_div.customersAddCustomers .tableNameHead {
  min-width: 0;
}
.customer_addCustomer_div.customersAddCustomers .searchBarOfTable {
  flex-shrink: 0;
  margin-left: auto;
}
/* Smaller Add Team Member button, keep on right */
.customer_addCustomer_div.customersAddCustomers .searchBarOfTable .backgroundBlurBtn,
.customer_addCustomer_div.customersAddCustomers .searchBarOfTable button {
  padding: 6px 14px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* Workers List card header - prevent filters/search from being cut off */
.t-head .customerList_searchbar.customersAddCustomers {
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.t-head .customerList_searchbar .customerList_head {
  min-width: 0;
}
.t-head .customerList_searchbar .d-flex.gap-2 {
  flex-wrap: wrap;
  min-width: 0;
}

/* Ensure page content doesn't overflow on small screens */
.mb-3.row.mt-3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}
.activeusers,
.t-head {
  max-width: 100%;
  min-width: 0;
}
.t-head .card {
  max-width: 100%;
  overflow: hidden;
}

.worker-detail-container .MuiCard-root {
  box-shadow: var(--shadow-md);
}

.worker-detail-container .MuiTable-root {
  width: 100%;
}

.worker-detail-container .MuiTableCell-root {
  padding: 12px 16px;
}

/* Worker Detail Card */
.worker-detail-card {
  margin-bottom: 20px;
}

.worker-detail-header {
  padding: 15px 20px !important;
}

.worker-avatar {
  flex-shrink: 0;
}

/* Header avatar: same palette/hash as Workers List (`JobberAvatar` + `UserId`), larger circle than table rows */
.worker-detail-redesign .wdj-worker-detail-avatar-wrap .jobber-avatar-inline__circle {
  width: 56px;
  height: 56px;
  font-size: 18px;
  font-weight: 800;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 600px) {
  .worker-detail-redesign .wdj-worker-detail-avatar-wrap .jobber-avatar-inline__circle {
    width: 64px;
    height: 64px;
    font-size: 22px;
  }
}

.worker-name {
  word-break: break-word;
}

.worker-detail-body {
  padding: 20px !important;
}

.worker-detail-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.worker-detail-col {
  padding-right: 40px;
  padding-left: 0;
  margin-bottom: 20px;
}

.worker-info-label {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.worker-info-value {
  word-break: break-word;
  white-space: normal;
}

/* Visits Section */
.visits-card {
  margin-bottom: 20px;
}

.visits-header {
  padding: 15px 20px !important;
}

.visits-title {
  word-break: break-word;
}

.visits-tabs {
  padding: 15px 20px 0px 20px !important;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
  overflow-x: auto;
  display: flex;
  -webkit-overflow-scrolling: touch;
}

.visits-tabs::-webkit-scrollbar {
  height: 4px;
}

.visits-tabs::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.visits-tabs::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.visits-tabs::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.visits-tab-item {
  flex-shrink: 0;
}

.visits-tab-link {
  white-space: nowrap;
  cursor: pointer;
  padding-bottom: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  font-size: 14px;
}

.visits-content {
  padding: 20px;
}

/* Worker detail: scroll only when list is long (class toggled in WorkerDetail.jsx) */
.wdj-visits-content--scroll {
  overflow-y: auto;
  max-height: min(70vh, 960px);
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .wdj-visits-content--scroll {
    max-height: min(65vh, 720px);
  }
}

@media (max-width: 576px) {
  .wdj-visits-content--scroll {
    max-height: min(60vh, 560px);
  }
}

@media (max-width: 480px) {
  .wdj-visits-content--scroll {
    max-height: min(55vh, 480px);
  }
}

@media (min-width: 1200px) {
  .wdj-visits-content--scroll {
    max-height: min(72vh, 1100px);
  }
}

.visits-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.visit-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
}

.visit-card-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.visit-card-col {
  padding: 0;
}

.visit-field-label {
  margin-bottom: 4px;
}

.visit-field-value {
  word-break: break-word;
  white-space: normal;
}

.visit-time-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

/* Responsive Styles */

/* Tablet and below (992px) - Manage Team page header & Workers List */
@media (max-width: 991px) {
  .customer_addCustomer_div.customersAddCustomers {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
  }
  .customer_addCustomer_div.customersAddCustomers .searchBarOfTable {
    margin-left: auto !important;
  }
  .customer_addCustomer_div.customersAddCustomers .searchBarOfTable button,
  .customer_addCustomer_div.customersAddCustomers .searchBarOfTable .BlueButton {
    white-space: nowrap !important;
  }
  .t-head .customerList_searchbar.customersAddCustomers {
    flex-wrap: wrap !important;
    padding: 12px !important;
  }
  .t-head .customerList_searchbar .d-flex.gap-2 {
    flex-wrap: wrap !important;
  }
}

/* Tablet and below (768px) */
@media (max-width: 768px) {
  .worker-detail-container {
    padding: 10px;
  }
  .customer_addCustomer_div.customersAddCustomers .searchBarOfTable {
    margin-left: auto !important;
  }
  .customer_addCustomer_div.customersAddCustomers {
    justify-content: space-between !important;
  }
  /* Keep Add Team Member on right, smaller button */
  .customer_addCustomer_div.customersAddCustomers .searchBarOfTable .backgroundBlurBtn,
  .customer_addCustomer_div.customersAddCustomers .searchBarOfTable button {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
  /* Workers List card header - stack title and filters */
  .t-head .customerList_searchbar.customersAddCustomers {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .t-head .customerList_searchbar .d-flex.gap-2 {
    width: 100% !important;
  }
  
  .worker-detail-container .MuiCard-root {
    margin-bottom: 15px;
  }

  .worker-detail-header {
    padding: 12px 15px !important;
  }

  .worker-detail-body {
    padding: 15px !important;
  }

  .worker-detail-col {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 20px;
  }

  .visits-header {
    padding: 12px 15px !important;
  }

  .visits-tabs {
    padding: 12px 15px 0px 15px !important;
  }

  .visits-tab-link {
    font-size: 13px;
    margin-right: 15px;
    padding-bottom: 8px;
  }

  .visit-card {
    padding: 12px;
  }

  .visit-time-grid {
    flex-direction: column;
    gap: 15px;
  }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
  .worker-detail-container {
    padding: 8px;
  }

  .worker-detail-header {
    padding: 10px 12px !important;
  }

  .worker-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    margin-right: 10px !important;
  }

  .worker-detail-body {
    padding: 12px !important;
  }

  .worker-detail-col {
    margin-bottom: 15px;
  }

  .visits-header {
    padding: 10px 12px !important;
  }

  .visits-tabs {
    padding: 10px 12px 0px 12px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .visits-tab-link {
    font-size: 12px;
    margin-right: 12px;
    padding-bottom: 6px;
  }

  .visits-content {
    padding: 12px;
    max-height: 450px;
  }

  .visit-card {
    padding: 10px;
  }

  .visit-card-content {
    gap: 15px;
  }
}

/* Extra Small Mobile (480px and below) */
@media (max-width: 480px) {
  .worker-detail-container {
    padding: 5px;
  }

  .worker-detail-header {
    padding: 8px 10px !important;
  }

  .worker-detail-body {
    padding: 10px !important;
  }

  .visits-header {
    padding: 8px 10px !important;
  }

  .visits-tabs {
    padding: 8px 10px 0px 10px !important;
  }

  .visit-card {
    padding: 8px;
  }
}

/* Large screens (1200px and above) */
@media (min-width: 1200px) {
  .worker-detail-container {
    padding: 24px;
  }
}

/* Form Field Alignment Fix - Ensures all fields align on right edge */
.add-user-form-container {
  width: 100%;
  box-sizing: border-box;
}

.add-user-form-container * {
  box-sizing: border-box;
}

/* Two-column layout constraint */
.add-user-form-container .form-two-column {
  display: flex;
  gap: 15px;
}

.add-user-form-container .form-two-column > * {
  flex: 1 1;
  min-width: 0;
}

/* Full-width field constraint - matches right column edge */
.add-user-form-container .form-full-width-field {
  width: 100%;
  max-width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
}

.add-user-form-container .form-full-width-field input,
.add-user-form-container .form-full-width-field .MuiTextField-root,
.add-user-form-container .form-full-width-field .MuiAutocomplete-root {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure right column alignment */
.add-user-form-container .form-right-column {
  padding-right: 20px;
  box-sizing: border-box;
}

/* Ensure all form fields in right column take full width and align properly */
.add-user-form-container .form-right-column .MuiFormControl-root,
.add-user-form-container .form-right-column .MuiTextField-root,
.add-user-form-container .form-right-column .MuiAutocomplete-root,
.add-user-form-container .form-right-column FormControl,
.add-user-form-container .form-right-column input,
.add-user-form-container .form-right-column .MuiInputBase-root {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure Col elements inside form-right-column take full width */
.add-user-form-container .form-right-column > .col-lg-6,
.add-user-form-container .form-right-column > .col-md-6 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 20px !important;
}

/* Ensure all form fields in two-column layout take proper width */
.add-user-form-container .form-two-column .MuiFormControl-root,
.add-user-form-container .form-two-column .MuiTextField-root,
.add-user-form-container .form-two-column .MuiAutocomplete-root,
.add-user-form-container .form-two-column FormControl {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure Row elements in form-two-column have proper width constraints */
.add-user-form-container .form-two-column > .row,
.add-user-form-container .form-two-column > Row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Tablet responsive - Stack form fields full width (768px to 900px) */
@media (min-width: 768px) and (max-width: 900px) {
  /* Make two-column layout stack vertically */
  .add-user-form-container .form-two-column {
    flex-direction: column !important;
    gap: 0px !important;
  }
  
  .add-user-form-container .form-two-column > * {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 16px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  
  /* Ensure all form fields take full width when stacked */
  .add-user-form-container .form-two-column .MuiFormControl-root,
  .add-user-form-container .form-two-column .MuiTextField-root,
  .add-user-form-container .form-two-column .MuiAutocomplete-root,
  .add-user-form-container .form-two-column FormControl,
  .add-user-form-container .form-two-column input,
  .add-user-form-container .form-two-column .MuiInputBase-root {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Full-width field styling */
  .add-user-form-container .form-full-width-field[style*="padding-right"],
  .add-user-form-container .form-full-width-field {
    padding-right: 0px !important;
    padding-left: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  
  /* Target inner elements of form-full-width-field */
  .add-user-form-container .form-full-width-field > div,
  .add-user-form-container .form-full-width-field > .MuiGrid-root {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 100% !important;
  }
  
  /* Target inputs inside form-full-width-field */
  .add-user-form-container .form-full-width-field .MuiTextField-root,
  .add-user-form-container .form-full-width-field .MuiAutocomplete-root,
  .add-user-form-container .form-full-width-field .userInfoAddress,
  .add-user-form-container .form-full-width-field .personalLaborInput {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  
  /* Remove right padding from form-right-column when stacked */
  .add-user-form-container .form-right-column {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
}

/* Mobile responsive - ONLY for Street Address and Labor Cost fields */
@media (max-width: 768px) {
  /* Make two-column layout stack vertically */
  .add-user-form-container .form-two-column {
    flex-direction: column !important;
    gap: 0px !important;
  }
  
  .add-user-form-container .form-two-column > * {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 16px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  
  /* Ensure all form fields take full width when stacked */
  .add-user-form-container .form-two-column .MuiFormControl-root,
  .add-user-form-container .form-two-column .MuiTextField-root,
  .add-user-form-container .form-two-column .MuiAutocomplete-root,
  .add-user-form-container .form-two-column FormControl,
  .add-user-form-container .form-two-column input,
  .add-user-form-container .form-two-column .MuiInputBase-root {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Remove right padding from form-right-column when stacked */
  .add-user-form-container .form-right-column {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  
  /* ONLY target form-full-width-field (Street Address and Labor Cost) - override inline padding */
  .add-user-form-container .form-full-width-field[style*="padding-right"],
  .add-user-form-container .form-full-width-field {
    padding-right: 0px !important;
    padding-left: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  
  /* ONLY target inner elements of form-full-width-field */
  .add-user-form-container .form-full-width-field > div,
  .add-user-form-container .form-full-width-field > .MuiGrid-root {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 100% !important;
  }
  
  /* ONLY target inputs inside form-full-width-field */
  .add-user-form-container .form-full-width-field .MuiTextField-root,
  .add-user-form-container .form-full-width-field .MuiAutocomplete-root,
  .add-user-form-container .form-full-width-field .userInfoAddress,
  .add-user-form-container .form-full-width-field .personalLaborInput {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}
/* ============================================
   Email template settings — list redesign
   Single panel, dividers, no nested row boxes
   ============================================ */

.template-settings-container--redesign {
    animation: fadeIn 0.35s ease-out;
}

.template-settings-list {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    overflow: hidden;
    box-shadow: var(--shadow-inset-highlight);
}

.template-settings-list--contractor {
    --template-accent: #0f2b46;
    --template-accent-soft: rgba(6, 49, 100, 0.08);
}

.template-settings-list--donor {
    --template-accent: #2a9db8;
    --template-accent-soft: rgba(104, 178, 203, 0.15);
}

.template-settings-row {
    background: #ffffff;
    border-bottom: 1px solid #eef2f7;
    padding: 18px 20px;
    transition: background-color 0.18s ease;
    border-left: 3px solid transparent;
    box-sizing: border-box;
}

.template-settings-row:last-child {
    border-bottom: none;
}

.template-settings-row:hover {
    background: #fafcff;
}

.template-settings-list--donor .template-settings-row:hover {
    background: #f9feff;
}

.template-settings-row--enabled {
    border-left-color: #0f2b46;
    border-left-color: var(--template-accent, #0f2b46);
}

.template-settings-row--off .template-label {
    color: #64748b !important;
}

.template-settings-row__toggle .template-toggle-wrapper {
    box-shadow: var(--shadow-sm);
}

/* Fixed-width label column: long titles wrap as one block (tight line-height, no “split” look) */
.template-settings-row__label {
    box-sizing: border-box;
}

.template-settings-label-text.template-label,
.template-settings-label-text.MuiTypography-root {
    font-size: 0.9375rem !important;
    line-height: 1.45 !important;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
}

@media (min-width: 600px) {
    .template-settings-row__label {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
}

@media (max-width: 599.95px) {
    .template-settings-row {
        padding: 16px 14px;
    }
}

/* Main Container */
.template-settings-container {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Header Section */
.template-header-section {
    margin-bottom: 32px;
}

.template-title-wrapper {
    margin-top: 20px;
}

.template-page-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 38px !important;
    margin-bottom: 0 !important;
    letter-spacing: -0.8px;
    font-family: var(--font-body), "Segoe UI", sans-serif !important;
}

.template-page-subtitle {
    color: #6b7280 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    margin-top: 10px !important;
    font-family: var(--font-body), "Segoe UI", sans-serif !important;
}

/* Content Wrapper */
.template-content-wrapper {
    width: 100%;
    padding: 0;
}

/* Cards Container */
.template-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-bottom: 32px;
}

/* Template Card - Clean Design, No Shadows, No Hover */
.template-card {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 24px;
    position: relative;
}

.template-card-disabled {
    background: #ffffff;
    border-color: #e5e7eb;
    opacity: 1;
}

.template-card-disabled .template-label {
    color: #9ca3af !important;
}

/* Card Header */
.template-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

.template-label {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    cursor: pointer;
    flex: 1 1;
    line-height: 1.5;
    -webkit-user-select: none;
            user-select: none;
    font-family: var(--font-body), "Segoe UI", sans-serif !important;
}

/* Toggle Switch Wrapper - Clean Design */
.template-toggle-wrapper {
    position: relative;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    cursor: pointer;
    flex-shrink: 0;
    background-color: #d1d5db;
}

.template-toggle-wrapper.toggle-enabled {
    background-color: #0f2b46;
}

.template-toggle-wrapper.toggle-disabled {
    background-color: #d1d5db;
}

/* Donor Mode Toggle */
.text-donor-color ~ .template-toggle-wrapper.toggle-enabled {
    background-color: #01C863;
}

/* Flex layout: label and toggle are no longer adjacent siblings — use explicit class */
.template-toggle-wrapper.toggle-enabled.template-toggle-donor {
    background-color: #01C863 !important;
}

/* Toggle Switch - No Shadow */
.template-toggle-switch {
    position: absolute;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    border: none;
}

.template-toggle-switch.toggle-switch-on {
    left: 26px;
    background-color: #ffffff !important;
}

.template-toggle-switch.toggle-switch-off {
    left: 2px;
    background-color: #ffffff !important;
}

/* Dropdown Wrapper — use full flex space next to fixed label */
.template-dropdown-wrapper {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

.template-settings-row__field {
    flex: 1 1 !important;
    min-width: 0 !important;
}

/* Dropdown Select - Clean Design, No Hover Effects */
.template-dropdown-select {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    background-color: #ffffff !important;
    font-family: var(--font-body), "Segoe UI", sans-serif !important;
}

.template-dropdown-select .MuiOutlinedInput-root {
    align-items: flex-start !important;
    overflow: visible !important;
}

.template-dropdown-select .MuiSelect-select {
    padding: 12px 40px 12px 16px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #111827 !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
}

.template-dropdown-select .MuiOutlinedInput-notchedOutline {
    border-color: #e5e7eb !important;
    border-width: 1.5px !important;
}

.template-dropdown-select.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #0f2b46 !important;
    border-width: 2px !important;
}

.template-dropdown-select.Mui-disabled {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

.template-dropdown-select.Mui-disabled .template-select-text {
    color: #9ca3af !important;
}

/* Override Material-UI disabled text color */
.template-dropdown-select.Mui-disabled .MuiSelect-select {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
}

.template-dropdown-select.Mui-disabled .MuiOutlinedInput-notchedOutline {
    border-color: #e5e7eb !important;
}

.template-dropdown-select .MuiSelect-icon {
    right: 14px !important;
    color: #0f2b46 !important;
    top: 14px !important;
    transform: none !important;
}

/* Donor Mode Dropdown */
.template-dropdown-donor .MuiOutlinedInput-notchedOutline {
    border-color: #d1d5db !important;
}

.template-dropdown-donor.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #01C863 !important;
    border-width: 2px !important;
}

.template-dropdown-donor .MuiSelect-icon {
    color: #01C863 !important;
}

/* Select Text — multi-line placeholder / value (no ellipsis) */
.template-select-text {
    overflow: visible;
    text-overflow: initial;
    white-space: normal;
    display: block;
    width: 100%;
    color: #111827;
    font-weight: 400 !important;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.template-card-disabled .template-select-text {
    color: #9ca3af !important;
}

/* Dropdown Menu Paper - Remove Box Shadow, Clean Design */
.template-dropdown-menu {
    box-shadow: none !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    max-height: 300px !important;
    background-color: #ffffff !important;
    padding: 4px 0 !important;
}

.template-dropdown-menu-blue {
    border-color: #e5e7eb !important;
}

.template-dropdown-menu-donor {
    border-color: #e5e7eb !important;
}

/* Menu Item - Clean Design, No Hover */
.template-menu-item {
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-family: var(--font-body), "Segoe UI", sans-serif !important;
    border-bottom: 1px solid #f9fafb !important;
    min-height: 44px !important;
    background-color: #ffffff !important;
}

.template-menu-item:last-child {
    border-bottom: none !important;
}

.template-menu-item .MuiListItemText-primary {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #111827 !important;
    margin: 0 !important;
}

/* Selected Menu Item - Blue Theme */
.template-dropdown-menu-blue .template-menu-item.Mui-selected {
    background-color: #eff6ff !important;
    color: #0f2b46 !important;
}

.template-dropdown-menu-blue .template-menu-item.Mui-selected .MuiListItemText-primary {
    color: #0f2b46 !important;
    font-weight: 500 !important;
}

/* Selected Menu Item - Donor Theme */
.template-dropdown-menu-donor .template-menu-item.Mui-selected {
    background-color: #f0fdf4 !important;
    color: #01C863 !important;
}

.template-dropdown-menu-donor .template-menu-item.Mui-selected .MuiListItemText-primary {
    color: #01C863 !important;
    font-weight: 500 !important;
}

/* Save Button Wrapper */
.template-save-button-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1.5px solid #e5e7eb;
}

.template-save-button {
    min-width: 150px !important;
    height: 46px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-transform: none !important;
    padding: 0 28px !important;
    font-family: var(--font-body), "Segoe UI", sans-serif !important;
}

/* Empty State */
.template-empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
    background: #f9fafb;
    border-radius: 10px;
    border: 1.5px dashed #d1d5db;
}

/* Legacy Styles (kept for compatibility) */
.manage-template {
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}

.settings-menu {
    justify-content: center !important;
}

.preview-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1199px) {
    .manage-account-bottom {
            margin-bottom: 0px !important;
        }
    
    .template-dropdown-select {
        width: 100% !important;
    }
    
    .template-cards-container {
        gap: 16px;
    }
    
    .template-card {
        padding: 20px;
    }
}

@media (max-width: 991px) {
    .template-page-title {
        font-size: 24px !important;
    }
    
    .template-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .template-toggle-wrapper {
        align-self: flex-end;
    }
    
    .template-save-button-wrapper {
        justify-content: flex-end;
    }
    
    .template-save-button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 767px) {
    .template-settings-container {
        padding: 10px !important;
    }
    
    .template-card {
        padding: 16px;
    }
    
    .template-card-header {
        margin-bottom: 16px;
    }
    
    .template-label {
        font-size: 15px !important;
    }
    
    .template-page-title {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    
    .template-page-subtitle {
        font-size: 13px !important;
    }
    
    .template-cards-container {
        gap: 14px;
    }
    
    .template-save-button {
        height: 40px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .template-card {
        padding: 14px;
    }
    
    .template-label {
        font-size: 14px !important;
    }
    
    .template-toggle-wrapper {
        width: 48px;
        height: 26px;
    }
    
    .template-toggle-switch {
        width: 22px;
        height: 22px;
    }
    
    .template-toggle-switch.toggle-switch-on {
        left: 22px;
    }
}

@media (max-width: 479px) {
    .template-page-title {
        font-size: 20px !important;
    }
    
    .template-card-header {
        margin-bottom: 14px;
    }
    
    .template-dropdown-select .MuiSelect-select {
        padding: 10px 36px 10px 14px !important;
        font-size: 13px !important;
    }
}

.email-settings-container {
  padding: 20px;
}

.email-config-card {
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}

.section-title {
  color: #003366;
  font-weight: 700;
  margin-bottom: 15px;
}

.form-section {
  margin-bottom: 20px;
}

.test-button {
  margin-right: 10px;
}

.email-template-link {
  color: #003366;
  text-decoration: none;
  padding: 10px 15px;
  border: 1px solid #003366;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.email-template-link:hover {
  background-color: #003366;
  color: white;
  text-decoration: none;
}

.config-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-text {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.form-row {
  margin-bottom: 15px;
}

.switch-container {
  margin: 15px 0;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.test-email-dialog {
  min-width: 400px;
}

.dialog-content {
  padding: 20px;
}

.email-logs-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
  margin-top: 20px;
}

/* Mail Footer Button Styles */
.mail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.mail-footer button {
  min-width: 120px;
}

/* Email Settings Button Styles */
.email-settings-btn {
  min-width: 120px;
  width: 100%;
  min-height: 42px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .email-settings-container {
    padding: 10px;
  }
  
  .button-group {
    flex-direction: column;
    gap: 10px;
  }
  
  .button-group button {
    width: 100%;
  }

  .mail-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .mail-footer > div {
    width: 100% !important;
  }

  .mail-footer button,
  .mail-footer .MuiButton-root,
  .mail-footer .backgroundBlurBtn,
  .mail-footer .backgroundWhiteBtn,
  .mail-footer .footer-buttons,
  .mail-footer .email-settings-btn,
  .email-settings-btn {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  .mail-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .mail-footer > div {
    width: 100% !important;
  }

  .mail-footer button,
  .mail-footer .MuiButton-root,
  .mail-footer .backgroundBlurBtn,
  .mail-footer .backgroundWhiteBtn,
  .mail-footer .footer-buttons,
  .mail-footer .email-settings-btn,
  .email-settings-btn {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {
    .adminPemissionList{
        flex-direction: column !important;
        grid-template-columns: none !important;
    }
}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

.email-campaign-container {
  padding: 20px;
}

.email-campaign-card {
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}

.preview-dialog-content {
  max-height: 70vh;
  overflow-y: auto;
}

.preview-email-content {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 16px;
  background-color: #f9f9f9;
  min-height: 300px;
}

/* List — subject line for mobile card title (ellipsis); desktop unchanged */
.email-campaign-primary-title {
  min-width: 0;
  max-width: 100%;
  display: block;
}
.email-campaign-primary-title .customer-table-name-block__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Email Campaign Responsive Styles */

/* 768px - Tablet */
@media (max-width: 991px) {
  .email-campaign-heading {
    font-size: 22px !important;
  }
}

/* 576px - Mobile landscape */
@media (max-width: 767px) {
  .email-campaign-heading {
    font-size: 20px !important;
  }
}

/* 525px - Mobile */
@media (max-width: 575px) {
  .email-campaign-heading {
    font-size: 20px !important;
  }
}

/* 480px - Small mobile */
@media (max-width: 524px) {
  .email-campaign-heading {
    font-size: 18px !important;
  }
}

/* 425px - Extra small mobile */
@media (max-width: 479px) {
  .email-campaign-heading {
    font-size: 18px !important;
  }
}

/* 375px - iPhone SE and similar */
@media (max-width: 424px) {
  .email-campaign-heading {
    font-size: 18px !important;
  }
}

/* 320px - Very small devices */
@media (max-width: 374px) {
  .email-campaign-heading {
    font-size: 16px !important;
  }
}

/* 280px - Minimum width */
@media (max-width: 319px) {
  .email-campaign-heading {
    font-size: 16px !important;
  }
}

.email-campaign-buttons-container {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 24px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.email-campaign-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive styles for Add/Edit Email Campaign buttons */
@media (max-width: 767px) {
  .email-campaign-buttons-container {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .email-campaign-cancel-btn {
    width: 100% !important;
    margin-top: 0 !important;
  }

  .email-campaign-action-buttons {
    width: 100%;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .email-campaign-action-buttons button {
    width: 100% !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 575px) {
  .email-campaign-buttons-container {
    margin-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 479px) {
  .email-campaign-action-buttons button {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
}


body{
    background-color: #fff !important;
}



/* 768 */
@media (max-width: 1980px) {
    .navbar-setting{
        display: none !important;
    }
}
/* 1680 */
@media (max-width: 1700px) {
    .navbar-setting{
        display: none !important;
    }
    
}


/* 1500 */
@media (max-width: 1680px) {
    
}

/* 1440 */
@media (max-width: 1449px) {
    
}

/* 1280 */
@media (max-width: 1439px) {

}

/* 992 */
@media (max-width: 1279px) {
   
    .first-section{
        width: 100% !important;
    }
    .new-image{
        display: none;
    }
}
/* 992 */
@media (max-width: 1228px) {}

/* 768 */
@media (max-width: 991px) {
    .text-boxes{
        margin-bottom: 17px;
    }
    .image-sectionn{
        margin-bottom: 50px;
    }
}
/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {
}

/* 480 */
@media (max-width: 524px) {
}

/* 425 */
@media (max-width: 479px) {
}

/* 375 */
@media (max-width: 424px) {
}

/* 320 */
@media (max-width: 374px) {
    .text-boxes{
        margin-bottom: 35px !important;
    }
    .image-sectionn{
        margin-bottom: 50px;
    }
}

/* 280 */
@media (max-width: 319px) {
    .text-boxes{
        margin-bottom: 35px !important;
    }
    .image-sectionn{
        margin-bottom: 50px;
    }
}

/**
 * Worker time entry — mobile Jobber card collapse actions only (≤775px).
 * Desktop table is unchanged; scoped to `.worker-time-entry-jobber-wrap`.
 */
.worker-time-entry-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .worker-time-entry-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.worker-time-entry-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .worker-time-entry-mobile-actions.customer-list-actions-mobile
  .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 775px) {
  .worker-time-entry-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .jobber-mobile-card__actions
    .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

@media (max-width: 400px) {
  .worker-time-entry-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .worker-time-entry-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .worker-time-entry-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .worker-time-entry-mobile-actions.customer-list-actions-mobile
    .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

/* Account list — name as primary title (mobile card + desktop); ellipsis */
.account-list-primary-title {
  min-width: 0;
  max-width: 100%;
  display: block;
}
.account-list-primary-title .customer-table-name-block__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.borerBommoModel{
    border-bottom: 2px solid var(--amber) !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {
    .productRemove{
        padding: 0px !important;
    }
}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
    .managebuttonModel{
        flex-direction: column !important;
    }
}

/* 280 */
@media (max-width: 319px) {}

.visit-section {
  margin-bottom: 20px;
}

.visit-card-container {
  display: flex;
  flex-direction: column; 
  gap: 10px; 
}

.invoice-card {
  box-shadow: var(--shadow-lg);
}
.appointment-status-section {
  display: flex;
  flex-direction: column;
}

.appointment-status-header {
  text-align: center;
  color: #0f2b46;
  font-weight: bold;
  font-size: inherit;
  background-color: #F8D5B9;
  border: 1px solid #0f2b46;
  border-radius: 5px;
  padding: 2px;
  margin-bottom: 10px;
  width: 30%;
}
.map-icon{
  margin-bottom: auto;
  
}



/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {
  .AppointmentNavigateBefore,.appointmentConfirmedBoxs{
    width: 100% !important;
  }
}

/* 576 */
@media (max-width: 767px) {
  .appointmentPhoneNUmber{
    margin-top: 20px !important;
  }
  
}

/* 525 */
@media (max-width: 575px) {
  .appointmentDateAndCall{
    margin-left: 20px !important;
  }
  .appointmentWIdthFlex{
    flex-direction: column !important;
  }
.appointmnetWorkerDetail{
  width: 100% !important;
}
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {
  .appointmentPhoneNUmber{
    margin-top: 40px !important;
  }
}

/* Appointments list: wrap contract title / visit — no single-line ellipsis */
.appointments-jobber-table-wrap .jobber-table-v2__td {
  vertical-align: top;
}
.appointments-jobber-table-wrap .jobber-table-v2__td .MuiTypography-root {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/**
 * Worker appointments (`/staff-member/worker-appointments`) — Jobber mobile collapse only.
 * Scoped to `.worker-appt-list-company-style` so other pages using `.appointments-jobber-table-wrap` are unchanged.
 */

/* ≥776px: hide synthetic Actions column so the data table matches the original 6 columns; row click still navigates. */
@media (min-width: 776px) {
    .appointments-jobber-table-wrap.worker-appt-list-company-style
      .jobber-table-v2:not(.jobber-table-v2--mobile-cards)
      thead
      tr
      th.jobber-table-v2__th:last-child,
    .appointments-jobber-table-wrap.worker-appt-list-company-style
      .jobber-table-v2:not(.jobber-table-v2--mobile-cards)
      tbody
      tr.jobber-table-v2__row
      > td.jobber-table-v2__td:last-child {
      display: none !important;
    }
  }
  
  /* ≤775px: pastel View in expanded card (Company pattern) */
  .appointments-jobber-table-wrap.worker-appt-list-company-style
    .jobber-mobile-card__collapse-inner
    .worker-appt-mobile-actions.customer-list-actions-mobile {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
    grid-gap: 6px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-content: start !important;
  }
  
  .appointments-jobber-table-wrap.worker-appt-list-company-style
    .jobber-mobile-card__collapse-inner
    .worker-appt-mobile-actions.customer-list-actions-mobile
    .MuiButton-root {
    font-size: 0.65rem !important;
    padding: 4px 4px !important;
    min-height: 30px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  @media (max-width: 775px) {
    .appointments-jobber-table-wrap.worker-appt-list-company-style
      .jobber-mobile-card__collapse-inner
      .jobber-mobile-card__actions
      .mobile-action-buttons {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 12px 12px 14px !important;
      box-sizing: border-box !important;
      gap: 0 !important;
    }
  }
  
  @media (max-width: 400px) {
    .appointments-jobber-table-wrap.worker-appt-list-company-style
      .jobber-mobile-card__collapse-inner
      .worker-appt-mobile-actions.customer-list-actions-mobile {
      grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
      gap: 5px !important;
    }
  
    .appointments-jobber-table-wrap.worker-appt-list-company-style
      .jobber-mobile-card__collapse-inner
      .worker-appt-mobile-actions.customer-list-actions-mobile
      .MuiButton-root {
      font-size: 0.6rem !important;
      padding: 3px 2px !important;
      min-height: 28px !important;
    }
  }
  
.event-container {
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
  background-color: #fff;
  background-color: var(--event-bg-color, #fff);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px !important;
  margin-left: 8px !important;
  position: relative;
  color: #000000 !important;
  border-color: transparent;
  border-color: var(--event-border-color, transparent);
  border: 2px solid transparent;
  border: 2px solid var(--event-border-color, transparent);
}

/* Force black text for maximum contrast - override any white text */
.event-container,
.event-container *,
.event-container .event-header,
.event-container .event-details,
.event-container .event-header-text,
.event-container .event-details-text,
.event-container .visit-label,
.event-container .event-icon,
.event-container .event-message-meta,
.event-container span,
.event-container div,
.event-container p,
.event-header-text,
.visit-label,
.event-details-text {
  color: #000000 !important;
}

/* Force black text for maximum contrast */
.fc-event-title,
.fc-event-time,
.fc-event-title-container,
.fc-event-main,
.fc-event-segment,
.fc-event-title-container *,
.fc-event-main * {
  color: #000000 !important;
}

/* Remove any left border indicators from FullCalendar wrapper elements */
.fc-event,
.fc-daygrid-event,
.fc-timegrid-event,
.fc-event-main-frame,
.fc-event-bg,
.fc-event-main,
.fc-event-segment {
  border-left: none !important;
}

.event-container:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.event-header,
.event-details {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  color: #000000 !important;
}

.fc-theme-standard .fc-popover {
  z-index: 9 !important;
  border-radius: 10px !important;
}

.event-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: bold;
  width: 100%;
  max-width: 100%;
  color: #000000 !important;
}

.event-icon {
  margin-right: 4px;
  font-size: 16px;
  color: #000000 !important;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Remove icon filter to allow icons to use black color */
.event-container .icon-style-schedule,
.event-container img.icon-style-schedule,
.event-icon .icon-style-schedule,
.event-icon img.icon-style-schedule {
  filter: none !important;
  opacity: 1 !important;
}

.visit-label {
  font-size: 11px;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000 !important;
}

.event-details {
  font-size: 11px;
  color: #000000 !important;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-header-text {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: #000000 !important;
}

.event-details-text {
  color: #000000 !important;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure child elements don't override parent background colors */
.fc-event .fc-event-main {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-main {
  background-color: transparent !important;
}

.fc-daygrid-event.fc-event {
  background-color: transparent !important;
}

.fc-daygrid-event.fc-event-segment {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-segment {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-resizer {
  background-color: transparent !important;
}

.fc-daygrid-event {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-title-container {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-title {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event {
  background-color: transparent !important;
}

.fc-daygrid-event.fc-event {
  background-color: transparent !important;
}

.fc-daygrid-day {
  background-color: transparent !important;
}

.fc-daygrid-day-frame {
  background-color: transparent !important;
}

.fc-daygrid-day-bg {
  background-color: transparent !important;
}

.fc-daygrid-day-top {
  background-color: transparent !important;
}

.fc-daygrid-day-number {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-main {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-main-frame {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-title-container {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-title {
  background-color: transparent !important;
}

.fc-timegrid-event {
  background-color: transparent !important;
}

.fc-event.visit-event {
  background-color: transparent !important;
  border: none !important;
}

.fc-event-main-frame {
  background-color: transparent !important;
}

.fc-event-bg {
  background-color: transparent !important;
}

.fc-event-segment {
  background-color: transparent !important;
}

.fc-event-main {
  background-color: transparent !important;
}

.fc-event-title-container {
  background-color: transparent !important;
}

.fc-event-title {
  background-color: transparent !important;
}

/* Current day highlight - header styling */
.fc-day-today .fc-col-header-cell-cushion {
  background-color: rgba(212, 148, 58, 0.15) !important;
  border: 2px solid var(--amber) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0f2b46 !important;
  font-weight: 600 !important;
}

/* Today column background - consistent styling for all views */
.fc-day-today,
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background-color: rgba(212, 148, 58, 0.08) !important;
}

.fc-daygrid-dot-event:hover {
  background-color: none !important;
}

.fc .fc-more-popover .fc-popover-body {
  height: 250px !important;
  width: 250px !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: var(--shadow-md);
  padding: 10px;
}

.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar {
  width: 8px;
}

.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.fc .fc-more-popover .fc-popover-body {
  scroll-behavior: smooth;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child),
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
  background-color: #0f2b46;
  color: white;
  border: 1px solid #0f2b46;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  margin-right: 5px;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start :hover {
  background-color: none !important;
}

.fc-scroller.fc-scroller-liquid-absolute {
  overflow: hidden !important;
}

.dialog-content,
.dialog-actions {
  padding: 16px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
}

.css-1mmpgk2 {
  border: none !important;
}

.fc-button-group .fc-button {
  text-transform: capitalize !important;
}

.fc-button-group .fc-button:first-letter {
  text-transform: uppercase !important;
}

@media (max-width: 767px) {
  .calender-main {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding: 5px !important;
  }

  .fc {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fc-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .fc-toolbar-title {
    font-size: 1.2em !important;
    margin: 10px 0 !important;
  }

  .fc-button-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .fc-button {
    font-size: 0.75em !important;
    padding: 4px 8px !important;
  }

  .event-container {
    max-width: 100% !important;
    width: auto !important;
    padding: 6px !important;
    font-size: 11px !important;
  }

  .event-header,
  .event-details {
    font-size: 10px !important;
  }

  .fc-daygrid-day {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .fc-daygrid-day-frame {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .fc-col-header-cell {
    font-size: 0.75em !important;
    padding: 4px 2px !important;
    min-width: 0 !important;
  }

  .fc-daygrid-day-number {
    font-size: 0.85em !important;
    padding: 4px !important;
  }

  .fc-scroller {
    overflow-x: hidden !important;
  }

  .fc-scroller-liquid-absolute {
    overflow-x: hidden !important;
  }

  .fc-event {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .fc-daygrid-event {
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  .calender-main {
    padding: 3px !important;
  }

  .fc-toolbar-title {
    font-size: 1em !important;
  }

  .fc-button {
    font-size: 0.7em !important;
    padding: 3px 6px !important;
  }

  .event-container {
    padding: 4px !important;
    font-size: 10px !important;
  }

  .fc-col-header-cell {
    font-size: 0.7em !important;
    padding: 2px 1px !important;
  }

  .fc-daygrid-day-number {
    font-size: 0.8em !important;
    padding: 2px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .calender-main {
    padding: 8px !important;
  }

  .fc-toolbar {
    flex-wrap: wrap !important;
  }

  .fc-button {
    font-size: 0.85em !important;
  }
}

.icon-style-schedule {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.text-blue-color {
  color: #0f2b46;
}

/* Multi-day event continuity styles */
.fc-daygrid-event.fc-event-start.fc-event-end {
  border-radius: 0 !important;
}

.fc-daygrid-event.fc-event-start:not(.fc-event-end) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}

.fc-daygrid-event.fc-event-end:not(.fc-event-start) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-left: 0 !important;
}

.fc-daygrid-event:not(.fc-event-start):not(.fc-event-end) {
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.fc-daygrid-event-segment {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.fc-timegrid-event {
  border-radius: 0 !important;
}

.fc-timegrid-event .fc-event-main {
  border-radius: 0 !important;
}

/* CRITICAL: Force black text on ALL event container elements - highest priority */
.event-container,
.event-container *,
.event-container *::before,
.event-container *::after,
.event-container .event-header,
.event-container .event-details,
.event-container .event-header-text,
.event-container .event-details-text,
.event-container .visit-label,
.event-container .event-icon,
.event-container .event-message-meta,
.event-container span,
.event-container div,
.event-container p,
.event-container strong,
.event-container em,
.event-header-text,
.visit-label,
.event-details-text,
.event-header,
.event-details,
.event-icon {
  color: #000000 !important;
}

/* ========== RESPONSIVE: Desktop vs Mobile Schedule (same as Admin) ========== */
.calendar-wrapper { font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; width: 100%; }
.calendar-wrapper.mobile-view { display: none; }
.calendar-wrapper.desktop-view { display: block; }
.mobile-schedule-inner { padding: 0 12px 24px; min-height: 100%; }
.mobile-calendar-header { padding: 16px 0 12px; margin-bottom: 12px; }
.mobile-date-picker-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: transparent; border: none; cursor: pointer; padding: 8px; margin-bottom: 14px; border-radius: 8px; transition: background 0.2s; }
.mobile-date-picker-trigger:hover { background: rgba(6, 49, 100, 0.06); }
.mobile-date-one-line { font-size: 1.15rem; font-weight: 600; color: #0f2b46; line-height: 1.3; }
.mobile-date-picker-icon { color: #0f2b46; font-size: 1.4rem !important; }
.mobile-day-strip { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.mobile-day-dot { flex: 1 1; max-width: 40px; aspect-ratio: 1; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; font-size: 0.85rem; font-weight: 600; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.mobile-day-dot.selected { background: #0f2b46; color: #fff; border-color: #0f2b46; }
.mobile-event-list { padding: 0 0 16px; }
.event-card-mobile { background: white; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 16px; margin-bottom: 12px; cursor: pointer; border: 1px solid #eee; display: flex; flex-direction: column; gap: 10px; }
.event-card-mobile:hover { box-shadow: var(--shadow-xl); }
.event-card-mobile-time { font-size: 0.95rem; font-weight: 600; color: #334155; }
.event-card-mobile-time .event-time-all-day { color: #0f2b46; font-weight: 700; }
.event-card-mobile-time .event-time-range { color: #64748b; }
.event-card-mobile-lines { display: flex; flex-direction: column; gap: 4px; }
.event-card-mobile-line { font-size: 0.9rem; color: #475569; line-height: 1.4; }
.event-card-mobile .view-details-btn { align-self: flex-start; margin-top: 4px; background: #0f2b46; color: white; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; }
.mobile-no-events { text-align: center; color: #666; padding: 24px 16px; margin: 0; font-size: 1rem; }
.mobile-date-picker-dialog .MuiDialogContent-root { display: flex; justify-content: center; }
@media screen and (max-width: 768px) { .calendar-wrapper.desktop-view { display: none !important; } .calendar-wrapper.mobile-view { display: block !important; } }
@media screen and (min-width: 769px) { .calendar-wrapper.mobile-view { display: none !important; } .calendar-wrapper.desktop-view { display: block !important; } }

/* Event detail dialog — match Admin company schedule modal */
.schedule-event-detail-dialog .schedule-event-detail-card .schedule-event-detail-fields > .MuiGrid-item {
  padding: 12px 18px !important;
  margin: 0 !important;
}
.schedule-event-detail-dialog
  .schedule-event-detail-fields
  .MuiGrid-item:not(.schedule-event-visit-status-row)
  > div:first-of-type {
  color: #063164 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.02em;
}
.schedule-event-detail-dialog
  .schedule-event-detail-fields
  .MuiGrid-item:not(.schedule-event-visit-status-row)
  > div:last-of-type:not(.schedule-event-status-value) {
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
  font-weight: 500 !important;
}
.schedule-event-detail-dialog .schedule-event-dialog-actions .MuiButton-root,
.schedule-event-detail-dialog .schedule-event-dialog-actions button {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}
.schedule-event-detail-dialog
  .MuiDialogTitle-root
  + .MuiDialogContent-root.schedule-event-detail-dialog-content {
  padding-top: 24px !important;
}

/* Schedule event detail modal – responsive (mobile): smaller height, compact content, proper buttons */
@media screen and (max-width: 600px) {
  .schedule-event-detail-dialog .MuiDialog-paper {
    max-width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 12px !important;
  }
  .schedule-event-detail-dialog .MuiDialogTitle-root.schedule-event-dialog-title,
  .schedule-event-detail-dialog .schedule-event-dialog-title {
    flex-shrink: 0;
    padding: 10px 6px 10px 14px !important;
  }
  .schedule-event-detail-dialog .schedule-event-dialog-title-text {
    font-size: 1rem !important;
  }
  .schedule-event-detail-dialog .schedule-event-detail-dialog-content,
  .schedule-event-detail-dialog .MuiDialogContent-root {
    padding: 18px 14px 12px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .schedule-event-detail-dialog
    .MuiDialogTitle-root
    + .MuiDialogContent-root.schedule-event-detail-dialog-content {
    padding-top: 18px !important;
  }
  .schedule-event-detail-dialog .MuiDialogContent-root > .MuiBox-root:first-of-type {
    margin-bottom: 12px !important;
  }
  .schedule-event-detail-dialog .schedule-event-location-block {
    word-break: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0 !important;
  }
  .schedule-event-detail-dialog .MuiGrid-container {
    margin-bottom: -8px !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions {
    flex-shrink: 0;
    padding: 10px 16px 14px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-item {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-item > div {
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions button {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* Add Invoice — "Save & Send" dropdown (Navy Deep — matches sidebar) */
.add-invoice-save-send-dropdown.dropdown-toggle,
.add-invoice-save-send-dropdown.btn {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
}
.add-invoice-save-send-dropdown.dropdown-toggle:hover:not(:disabled):not(.disabled),
.add-invoice-save-send-dropdown.btn:hover:not(:disabled):not(.disabled),
.add-invoice-save-send-dropdown.dropdown-toggle:focus,
.add-invoice-save-send-dropdown.btn:focus,
.add-invoice-save-send-dropdown.dropdown-toggle:active,
.add-invoice-save-send-dropdown.btn:active {
  background-color: var(--navy-mid) !important;
  border-color: var(--navy-mid) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.add-invoice-save-send-dropdown--donor.dropdown-toggle,
.add-invoice-save-send-dropdown--donor.btn {
  background-color: #29b3e2 !important;
  border-color: #29b3e2 !important;
  color: #ffffff !important;
}
.add-invoice-save-send-dropdown--donor.dropdown-toggle:hover:not(:disabled):not(.disabled),
.add-invoice-save-send-dropdown--donor.btn:hover:not(:disabled):not(.disabled),
.add-invoice-save-send-dropdown--donor.dropdown-toggle:focus,
.add-invoice-save-send-dropdown--donor.btn:focus,
.add-invoice-save-send-dropdown--donor.dropdown-toggle:active,
.add-invoice-save-send-dropdown--donor.btn:active {
  background-color: #29b3e2 !important;
  border-color: #29b3e2 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.backgroundColor-table{
  background-color: #D4943A !important;
}
.invoiceTable-heade{
  color: white !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.accordingHeaderPadd.button.accordion-button.collapsed {
  padding: 0px !important;
}

.marginFOrTHe{
  width: 100% !important;
}

button.accordion-button.collapsed {
  padding: 0px !important;
}

.accordion-body {
  padding: 0px !important;
}

.label-paid {
  display: none;
}

.cancelBtnButtonColor {
  border: 2px solid #0f2b46;
}

.bg-label-paid {
  position: relative;
  background-color: transparent !important;
  z-index: 1;
}

.bg-label-paid .label-paid {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: -1;
  color: #83f7bfb4;
  font-size: 120px;
  font-weight: 600;
  transform: rotate(-40deg);
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* Ensure Invoice details section doesn't overflow on medium screens */
/* Ensure overflow visible on all screens */
.invoiceAllDetails {
  overflow: visible !important;
}

.second-section-invoice {
  overflow: visible !important;
}

/* Medium-wide screens: keep two columns until Bootstrap lg (992px) */
@media (max-width: 1099px) {
  .invoice-first {
    flex-direction: column;
  }

  .invoice-first .col-2.p-0 {
    display: none !important;
  }
  
  .invoice-divider-vertical {
    display: none !important;
  }
  
  /* Ensure Invoice details section is visible (legacy layouts only) */
  .second-section-invoice:not(.invoice-header-col-right) {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 20px;
    overflow: visible !important;
  }

  .invoice-header-two-col .invoice-header-col-right.second-section-invoice {
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  .invoiceInvoiceNumber {
    margin: 0 !important;
    padding: 15px 0 !important;
  }
  
  .incoiceNumber_auto {
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }
  
.Payment-main{
  flex-direction: column !important;
}
.payment-section{
  width: 100%;
}
  .second-section-invoice h4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hr-invoice {
    display: none;
  }

  .first-invoice {
    padding: 5px;
  }

  .invoice-name {
    font-size: 20px;
  }

  .customer_detailPaid {
    width: 100% !important;
  }
}

/* 768 */
@media (max-width: 991px) {
  .hiren {
    display: none !important;
  }

  .titleAdress {
    margin-top: 20px !important;
  }
  
  /* Ensure Invoice details section layout on tablets */
  .invoiceAllDetails {
    flex-wrap: wrap !important;
  }
  
  .invoiceSubject_part {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .invoiceNumber_detailDate {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    padding-left: 0 !important;
  }
  
  .issuedDate_dueDate_paymentDue {
    flex-wrap: wrap !important;
  }
  
  .issueDateFlex {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  .issueDateFlex label {
    min-width: 100px !important;
  }
}

/* 576 */
@media (max-width: 767px) {
  .subject-invoice {
    margin-top: 30px !important;
  }
  .payment-section-last{
    display: none !important;
  }

  .invoice-form-group {
    margin-top: 6px;
  }

  .paymentApplied_amout.MuiFormControl-root.MuiTextField-root.text-blue-color.w-100.m-0.mb-3.paymentApplied_amout.css-odsttg-MuiFormControl-root-MuiTextField-root {
    margin-top: 40px !important;
  }

  .invoiceCancelSave_Btn {
    margin-bottom: 35px !important;
  }

  .mailSendToBtn {
    width: 72% !important;
  }

  .cancel_emailReceipt_save {
    margin-top: 50px !important;
  }

  .invoiceChoiceImg.invoice-header.invoiceChoiceImg.card-header {
    font-size: 767 !important;
  }

  /* Invoice Header Responsive */
  .invoice-header-container {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .invoice-header-left {
    flex: 1 1 !important;
    min-width: 0 !important;
  }

  .invoice-header-button {
    flex-shrink: 0 !important;
  }

  .invoiceFontSize {
    font-size: 22px !important;
  }
  
  /* Ensure Invoice details section is visible on mobile */
  .second-section-invoice {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    width: 100% !important;
    padding: 15px 0 !important;
  }
  
  .invoiceInputBoxes {
    margin: 0 !important;
    padding: 10px 0 !important;
  }
  
  .invoice-head.head {
    margin-top: 15px !important;
    margin-bottom: 10px !important;
  }
  
  .incoiceNumber_auto {
    flex-wrap: wrap !important;
    padding-right: 0 !important;
    gap: 10px !important;
  }
  
  .invoiceNumberStart {
    text-align: left !important;
  }
  
  .invoiceChangeBtn {
    width: auto !important;
    text-align: left !important;
  }
  
  .issueDateFlex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .issueDate_select {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .issuedateReponsiveDate {
    width: 100% !important;
  }
  
  .payDueRange {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .payDueRange2 {
    margin-left: 0 !important;
  }
}

/* 525 */
@media (max-width: 575px) {
  .final-payment-button{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: normal !important;
  }
  .final-payment-button-inner{
    flex-direction: column !important;
  }

  /* Invoice Header Mobile */
  .invoice-header-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }

  .invoice-header-left {
    width: 100% !important;
  }

  .invoice-header-button {
    width: 100% !important;
  }

  .invoiceFontSize {
    font-size: 20px !important;
  }

  .invoiceAddIcon {
    width: 45px !important;
    height: 45px !important;
  }
  
  /* Invoice details section on small mobile */
  .invoiceNumber_detailDate {
    padding: 0 10px !important;
  }
  
  .col-left {
    padding: 0 !important;
  }
  
  .invoice-detail-address {
    flex-direction: column !important;
  }
  
  .invoice-detail-address .col {
    width: 100% !important;
    margin-bottom: 15px !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  .payment-header{
    flex-direction: column !important;
  }
  .payment-header-sub{
    width: 100% !important;
    align-items: start !important;
    text-align: left !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .cancel_emailReceipt_save {
    flex-direction: column !important;
    justify-content: left !important;
  }
  .payment-third{
    width: 100% !important;
  }
  .payment-fourth{
    width: 100% !important;

  }

  button.footer-buttons.outline-button-blue-color.backgroundWhiteBtn.cancelBtnInVoicce.eui.btn.btn-secondary {
    width: 100% !important;
}
.saveEmail_savePay {
  width: 100% !important;
}
.cancelinvoiceGrid{
  width: 100% !important;
}
.svaeBtnInVoicce{
  margin-top: 18px !important;
}
  .saveEmail_savePay {
    flex-direction: column !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  .first-button {
    flex-direction: column;
  }

  .first-button button {
    width: 8% !important;
  }

  .second-content-section {
    flex-direction: column;
    gap: 0 !important;
  }

  .second-content-section .col-4 {
    width: 100%;
  }

  .second-content-section .col-4 input {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .second-content-section .col-4 button {
    font-size: 12px !important;
    height: 33px !important;
  }

  .second-content-section .col-2 {
    width: 100%;
    font-size: 12px !important;
    margin-bottom: 0 !important;
    margin-top: 1rem !important;
  }

  .invoice-date {
    flex-direction: column;
  }

  .invoice-date .mx-4 {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .Payment {
    margin-left: 0 !important;
    flex-direction: column;
  }

  .paymentDue {
    margin-right: 20px !important;
  }

  .cancel_emailReceipt_save,
  .saveEmail_savePay {
    flex-direction: column;
  }

  .saveEmail_savePay {
  }
}

/* 320 */
@media (max-width: 374px) {
  .cancelPayment {
    margin-top: 11px;
  }

  .invoiceBtnGap {
    gap: 10px !important;
  }
}

/* 280 */
@media (max-width: 319px) {
  .invoiceChoiceImg {
    font-size: 15px !important;
  }
}

.invoice-header {
  color: "rgba(6, 49, 100, 1)";
  font-size: 30px !important;
  font-weight: 800;
  color: #0f2b46 !important;
}

.row {
  display: flex;
  justify-content: space-between;
}

/* Bootstrap grid on Add Invoice / quote-style headers: do not space columns apart */
.invoice-add-shell .row,
.invoiceAllDetails > .row,
.invoiceAllDetails .invoice-detail-address.row,
.first-invoice .invoice-header-two-col.row {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}

.row.main {
  display: flex;
  justify-content: start;
}

.col-left {
  flex: 3 1;
  text-align: left;
}

.col-right {
  flex: 1 1;
  text-align: right;
  margin-top: 10px;
}

.invoice h3 {
  color: #1a2b5b;
  font-weight: 700;
}

.form-group {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f2b46;
  margin-bottom: 5px;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

input#issuedDate {
  width: auto;
}

input[type="text"],
select {
  padding: 13px;
  border-radius: 5px;
  margin-right: 10px;
  flex: 1 1;
}

.btn-cancel {
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #0f2b46;
  border-radius: 5px;
  color: #0f2b46;
  cursor: pointer;
}

.btn-cancel:hover {
  background-color: #f0f0f0;
}

hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #ccc;
}

.btn-custom-field {
  padding: 10px 20px;
  background-color: #0f2b46;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-custom-field:hover {
  background-color: #003366;
}

a {
  color: #0f2b46;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.InputDate {
  width: 80px !important;
  margin-left: 30px !important;
  border: 1px solid #0f2b46 !important;
}

.paymentDue {
  border: 1px solid #0f2b46;
}

.sales {
  margin-left: 27px !important;
  width: 50px !important;
  padding: 5px 0px;
  background-color: #fff;
  border: 1px solid #0f2b46;
  border-radius: 5px;
  color: #0f2b46;
  cursor: pointer;
}

.titleAdress {
  font-size: 15px !important;
}

.subAddress {
  font-size: 15px !important;
}

.invoice-table td {
  font-weight: 600;
  color: #0f2b46;
}

/* Contract Grid Responsive Styles */
.contract-grid-container {
  overflow-x: hidden !important;
}

.contract-table {
  width: 100%;
  table-layout: auto;
}

.contract-table-row {
  white-space: normal !important;
}

.contract-table-checkbox,
.contract-table-contract,
.contract-table-status,
.contract-table-address,
.contract-table-amount {
  font-size: 16px;
  padding: 15px;
}

.contract-table-contract {
  white-space: normal !important;
  word-wrap: break-word;
  word-break: break-word;
}

.contract-table-address {
  display: table-cell !important;
  width: auto !important;
  min-width: auto !important;
}

.contract-address-text {
  font-size: 16px;
  width: 100% !important;
  max-width: 100%;
}

/* Mobile Responsive Styles - Keep Table Structure */
@media (max-width: 767px) {
  .contract-grid-container {
    overflow-x: hidden !important;
    width: 100%;
  }

  .contract-table {
    width: 100% !important;
    table-layout: fixed !important;
    display: table !important;
  }

  .contract-table thead {
    display: table-header-group !important;
  }

  .contract-table tbody {
    display: table-row-group !important;
  }

  .contract-table-row,
  .contract-table tbody tr {
    display: table-row !important;
    white-space: normal !important;
  }

  .contract-table-checkbox,
  .contract-table-contract,
  .contract-table-status,
  .contract-table-address,
  .contract-table-amount,
  .contract-table thead th,
  .contract-table tbody td,
  .contract-table tbody th {
    display: table-cell !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    vertical-align: middle !important;
  }

  .contract-table-expand {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 4px !important;
  }

  .contract-table-expand .MuiIconButton-root {
    padding: 4px !important;
  }

  .contract-table-expand svg {
    font-size: 20px !important;
  }

  .contract-table-checkbox {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    padding: 4px !important;
  }

  .contract-table-checkbox input[type="checkbox"] {
    margin-left: 0 !important;
    margin: 0 !important;
  }

  .contract-table-contract {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 !important;
  }

  .contract-table-status {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 100px !important;
  }

  .contract-table-address {
    width: 35% !important;
    min-width: 150px !important;
    display: table-cell !important;
  }

  .contract-table-amount {
    width: 15% !important;
    min-width: 80px !important;
    text-align: right !important;
  }

  .contract-address-text {
    font-size: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .invoiceTable-heade {
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
}

/* Small Mobile Devices - Keep Table Structure */
@media (max-width: 575px) {
  .contract-table-checkbox,
  .contract-table-contract,
  .contract-table-status,
  .contract-table-address,
  .contract-table-amount,
  .contract-table thead th,
  .contract-table tbody td {
    font-size: 13px !important;
    padding: 8px 6px !important;
  }

  .contract-address-text {
    font-size: 13px !important;
  }

  .invoiceTable-heade {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  .contract-table-expand {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 3px !important;
  }

  .contract-table-checkbox {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 3px !important;
  }

  .contract-table-contract {
    flex: 1 1 !important;
  }

  .contract-table-status {
    flex: 0 0 90px !important;
  }
}

/* Extra Small Mobile Devices - Keep Table Structure */
@media (max-width: 424px) {
  .contract-table-checkbox,
  .contract-table-contract,
  .contract-table-status,
  .contract-table-address,
  .contract-table-amount,
  .contract-table thead th,
  .contract-table tbody td {
    font-size: 12px !important;
    padding: 6px 4px !important;
  }

  .contract-address-text {
    font-size: 12px !important;
  }

  .invoiceTable-heade {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  .contract-table-expand {
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    padding: 2px !important;
  }

  .contract-table-checkbox {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 2px !important;
  }

  .contract-table-contract {
    flex: 1 1 !important;
  }

  .contract-table-status {
    flex: 0 0 80px !important;
  }
}

/* Mobile Table Collapse Styles - Same as MuiTable */
@media (max-width: 767px) {
  .mobile-table-collapse {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: 8px 0;
    overflow: visible;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  .mobile-table-collapse .mobile-collapse-content {
    padding: 16px;
    background: white;
    border-radius: 8px;
    margin: 0 !important;
    box-shadow: var(--shadow-md);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .contract-collapse-cell {
    padding: 8px !important;
    width: 100% !important;
  }

  .contract-collapse-cell .mobile-table-collapse {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .contract-collapse-cell .mobile-collapse-content {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Visits Table Responsive Styles */
  .visits-grid-container {
    overflow-x: hidden !important;
    width: 100%;
  }

  .visits-table {
    width: 100% !important;
    table-layout: fixed !important;
    display: table !important;
  }

  .visits-table-expand {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 4px !important;
  }

  .visits-table-expand .MuiIconButton-root {
    padding: 4px !important;
  }

  .visits-table-expand svg {
    font-size: 20px !important;
  }

  .visits-table-checkbox {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    padding: 4px !important;
  }

  .visits-table-checkbox input[type="checkbox"] {
    margin-left: 0 !important;
    margin: 0 !important;
  }

  .visits-table-contract,
  .visits-table-status {
    width: auto !important;
    min-width: 0 !important;
  }

  .visits-collapse-cell {
    padding: 8px !important;
    width: 100% !important;
  }

  .visits-collapse-cell .mobile-table-collapse {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .visits-collapse-cell .mobile-collapse-content {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .mobile-table-collapse .mobile-data-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-height: auto;
  }
  
  .mobile-table-collapse .mobile-data-row:last-child {
    border-bottom: none;
  }
  
  .mobile-table-collapse .mobile-data-label {
    font-weight: 600;
    color: #0f2b46;
    font-size: 15px;
    flex: 0 0 auto;
    min-width: 0;
    line-height: 1.4;
  }
  
  .mobile-table-collapse .mobile-data-value {
    color: #495057;
    font-size: 14px;
    text-align: right;
    flex: 1 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    overflow: visible;
    line-height: 1.5;
    min-height: auto;
  }
}

/* Hide vertical divider on responsive screens */
@media (max-width: 1279px) {
  .invoice-divider-vertical {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
  }
}

.head {
  font-size: 16px;
  font-weight: 600;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {
  .paymentAppliedSlip {
    margin-left: -18px !important;
  }

  .leftSideMargin {
    margin-left: 0.5rem !important;
  }
}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {
  .emailDragFileCopy {
    flex-direction: column !important;
    gap: 10px !important;

  }

  .fileUploadInmaimBox {
    height: 80px !important;
  }

  .drafFileBoxMail {
    margin-top: 11px !important;
  }

  .updateSaveBtnNaviGate {
    flex-direction: column !important;
  }

  button.footer-buttons.outline-button-blue-color.backgroundWhiteBtn.btn.btn-secondary {
  }

  .MuiFormControl-root.MuiTextField-root.mb-0.border-blue-color.totalNumber.cost_input.css-12o0ghv-MuiFormControl-root-MuiTextField-root {
    width: 100%;
  }
}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {
  .checkNumberInputPayment {
    margin-top: 40px !important;
  }

  .paymentDateBottmSetHera {
    margin-bottom: -10px !important;
  }

  .invoiceFontSize {
    font-size: 22px !important;
  }
}

@media (max-width: 287px) {}

.payment-page-container {
  position: relative;
  min-height: 400px;
}

.payment-processing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.payment-animation-container {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 400px;
}

.payment-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.bank-icon, .phone-icon {
  width: 64px;
  height: 64px;
  background: #0f2b46;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-md);
}

.bank-icon.donor-color, 
.phone-icon.donor-color {
  background: #29B3E2;
}

.connecting-line {
  position: relative;
  width: 160px;
  height: 4px;
  background: #E5E9F2;
  border-radius: 2px;
}

.moving-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #0f2b46;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  animation: moveDot 1.5s infinite;
}

.moving-dot.donor-color {
  background: #29B3E2;
}

@keyframes moveDot {
  0% { left: 0; }
  50% { left: calc(100% - 12px); }
  100% { left: 0; }
}

.payment-text {
  color: #0f2b46;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.payment-text.donor-color {
  color: #29B3E2;
}

.content-disabled {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.content-disabled::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 5;
}

@keyframes paidPulse {
  0% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(-45deg) scale(1.05); }
  100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
}

/* Add / Edit invoice — two columns: left (subject + address + contact), right (# + dates) */
.invoice-header-job-row,
.invoice-header-two-col.row,
.invoice-header-top-row.row,
.invoice-header-bottom-row.row {
  color: rgba(6, 49, 100, 1);
  justify-content: flex-start !important;
}

.invoice-header-two-col.invoice-header-job-row {
  align-items: flex-start !important;
}

/* Prevent flex children from overflowing narrow columns (Bootstrap + flex) */
.invoice-header-two-col > [class*="col"] {
  min-width: 0;
}

@media (min-width: 992px) {
  .invoice-header-col-right .invoice-detail-field-row .invoice-detail-label {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }
}

.invoice-header-col-left .invoiceSubject_input,
.invoice-header-col-left .cs-form-field,
.invoice-add-shell .invoiceSubject_input {
  width: 100% !important;
  max-width: 100% !important;
}

/* Override Views/style.css margins that break alignment */
.invoice-header-two-col .invoice-header-col-right.invoiceNumber_detailDate {
  margin-left: 0 !important;
}

/* Match quote/contract: nested address row */
.invoice-header-two-col .invoice-detail-address.quoteProperty_detail {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.cs-form-section--invoice-line-items .cs-form-section__body.getproduct-mamin {
  padding-top: 10px;
}

.invoice-header-col-left .invoice-client-block:last-child {
  margin-bottom: 0;
}

.quote-number-aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: auto;
  justify-content: flex-start;
}

.quote-number-aside__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #64748b;
  margin: 0;
  padding: 0;
}

.quote-number-aside__panel {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  background: #f7f8fa;
  border: 1px solid #1a3f5c;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.quote-number-aside__value {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f2b46;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quote-number-aside__change {
  margin: 0;
  padding: 0 4px 0 8px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #0f2b46;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.quote-number-aside__change:hover {
  color: #0a4d8c;
}

.quote-number-aside__change:focus-visible {
  outline: 2px solid rgba(6, 49, 100, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}

.quote-number-aside__edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-number-aside__done {
  display: flex;
  justify-content: flex-end;
}

/* Invoice header: icon + title vertically centered */
.invoice-header-cardhead.invoice-header {
  gap: 12px;
  padding-bottom: 4px;
}

.invoice-header-icon-circle.invoiceNameHolder_icon {
  box-sizing: border-box;
}

.invoice-header-cardhead .invoiceInerImg {
  display: block;
  margin: 0 auto;
}

.invoice-header-title-wrap.invoice-name {
  display: flex;
  align-items: center;
  flex: 1 1;
  min-width: 0;
}

/* Legacy single-row header (if used elsewhere) */
.invoice-header-top-row.invoice-header-job-row {
  align-items: flex-start !important;
}

.invoice-detail-field-row.form-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 14px;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 5px 0px;
}

.invoice-detail-field-row.form-group + .invoice-detail-field-row.form-group {
  padding-top: 0;
}

.invoice-detail-field-row .invoice-detail-label {
  flex: 0 0 118px;
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  margin-bottom: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #64748b;
  box-sizing: border-box;
}

.invoice-detail-field-row .invoice-detail-field-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.invoice-detail-field-row .invoice-detail-field-control .issueDate_select {
  width: 100% !important;
  max-width: 280px !important;
}

.invoice-detail-field-row .invoice-payment-due-select {
  max-width: 280px !important;
}

.invoice-detail-field-row .invoice-payment-due-select select,
.invoice-detail-field-row .invoice-payment-due-select .cs-form-field {
  width: 100% !important;
  max-width: 280px !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Right column: use full width for number + date controls */
.invoice-header-col-right .invoice-detail-field-row .invoice-detail-field-control .issueDate_select {
  max-width: 100% !important;
}

.invoice-header-col-right .invoice-detail-field-row .invoice-payment-due-select {
  max-width: 100% !important;
}

.invoice-header-col-right .invoice-detail-field-row .invoice-payment-due-select select,
.invoice-header-col-right .invoice-detail-field-row .invoice-payment-due-select .cs-form-field {
  max-width: 100% !important;
}

/* Payment Due (MUI select) + custom days: no outline border — matches flatter date controls */
.invoice-detail-field-row .invoice-payment-due-select .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border: none !important;
}

.invoice-detail-field-row .invoice-payment-due-select .MuiOutlinedInput-root:hover:not(.Mui-disabled):not(.Mui-error)
  .MuiOutlinedInput-notchedOutline,
.invoice-detail-field-row .invoice-payment-due-select .MuiOutlinedInput-root.Mui-focused:not(.Mui-error)
  .MuiOutlinedInput-notchedOutline {
  border: none !important;
}

.invoice-detail-field-row .invoice-payment-due-select .MuiOutlinedInput-root.Mui-focused:not(.Mui-error) {
  box-shadow: none !important;
}

.invoice-detail-field-row .invoice-payment-due-custom-days .cs-input-shell {
  border: none !important;
}

.invoice-detail-field-row .invoice-payment-due-custom-days .cs-input-shell:hover:not(.cs-input-shell--disabled) {
  border: none !important;
}

.invoice-detail-field-row .invoice-payment-due-custom-days .cs-input-shell:focus-within:not(.cs-input-shell--disabled) {
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 479px) {
  .invoice-header-cardhead .invoiceNameHolder_icon.invoice-header-icon-circle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
  }

  .invoice-detail-field-row.form-group.issuedDate_dueDate_paymentDue {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }

  .invoice-detail-field-row .invoice-detail-label {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 6px;
  }

  .invoice-detail-field-row .invoice-detail-field-control {
    width: 100%;
  }

  .invoice-detail-field-row .issueDate_select {
    max-width: 100% !important;
  }
}

/* Send-mail confirm modal — match outline + primary button height (same as Contract mail) */
.contract-mail-actions {
  align-items: stretch !important;
}

.contract-mail-actions .btn.blue-button.blue-button--contractor.backgroundBlurBtn.bg-blue-color,
.contract-mail-actions .btn.footer-buttons.backgroundWhiteBtn.outline-button-blue-color {
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}
.text-blue-color.red-border:focus {
    border-color: #0f2b46;
}
.all-permission {
  margin-bottom: 6px;
}

th.MuiTableCell-root.MuiTableCell-head.MuiTableCell-sizeMedium.bg-orange-color.text-white-color.css-1ygcj2i-MuiTableCell-root {
  white-space: nowrap;
}
.text-justify{
  width: 95%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.permission-row{
  border-right: 1px solid rgba(6, 49, 100, 30%);
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {
  .permission-row{
    border-right: none !important;
    
  }
  .contrcctInvoiceFlex{
    flex-direction: column !important;
  }
  .whiteSpaceRap{
    white-space: nowrap !important;
  }
}

/* 768 */
@media (max-width: 991px) {
  .client-check {
    flex-direction: column !important;
    margin-top: 12PX;
  }

  .main-chek {
    width: 100% !important;
  }

  .text-box {
    padding-right: 0 !important;
    white-space: nowrap;
  }
  .presetPermissionLevel{
    flex-direction: column !important;
  }
  .permissionTitleInput {
    margin-bottom: 0;
  }
  .presetLevelDesc{
    margin: 0 !important;
  }
  .flexColumnForScheduleAll{
    flex-direction: column !important;
  }
  .expenseSecondLine{
    margin-left: 0px !important;
  }
  .removeMarginTOp{
   margin-top: 2px !important;
  }
  .giveMarginTop{
    margin-top: 10px !important;
  }
}
.tr.MuiTableRow-root.MuiTableRow-head.css-1q1u3t4-MuiTableRow-root{
  white-space: nowrap;
}

/* 576 */
@media (max-width: 767px) {
  .notes {
    flex-direction: column;
  }

  .schedule {
    flex-direction: column;
  }

  .Expenses {
    flex-direction: column;
  }

  .sec-check {
    margin-left: 0 !important;
  }

  .permission-box {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .permissionTitleInput {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .presetPermissionLevel {
    flex-direction: column !important;
    margin-bottom: 0;
    width: 100% !important;
  }
  
  .mobile-collapse-component {
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  .mobile-collapse-component .permission-box {
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .mobile-collapse-component .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .mobile-collapse-component [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
  }

  /* Fix text wrapping and prevent cropping on mobile */
  .permission-box .text-justify {
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  .permission-box .MuiTypography-root {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
  }

  .permission-box .MuiTypography-root.text-justify {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .permission-box .MuiTypography-root span {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: calc(100% - 25px) !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .permission-box .removeMarginTOp {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .permission-box .bold-text {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Ensure icons are visible and not cut off */
  .permission-box .MuiSvgIcon-root {
    flex-shrink: 0 !important;
    margin-left: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
}

/* 525 */
@media (max-width: 575px) {
  .permission-search {
    margin-left: auto !important;
  }

  .shcedulePermission {
    font-size: 12px !important;
  }
  .presetLevelDesc{
    margin-top: 5px !important;
  }

  /* Ensure text doesn't get cropped on smaller screens */
  .permission-box .text-justify {
    width: 100% !important;
    max-width: 100% !important;
  }

  .permission-box .MuiTypography-root span {
    max-width: calc(100% - 22px) !important;
  }
}

/* 480 */
@media (max-width: 524px) {
  /* Additional padding adjustments for very small screens */
  .permission-box {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .permission-box .text-justify {
    width: 100% !important;
    max-width: 100% !important;
  }

  .permission-box .MuiTypography-root span {
    max-width: calc(100% - 20px) !important;
  }
}

/* 425 */
@media (max-width: 479px) {
  .request-check {
    flex-direction: column;
  }

  /* Text wrapping fixes for small mobile screens */
  .permission-box .text-justify {
    width: 100% !important;
    max-width: 100% !important;
  }

  .permission-box .MuiTypography-root span {
    max-width: calc(100% - 18px) !important;
  }
}

/* 375 */
@media (max-width: 424px) {
  /* Text overflow fixes for extra small screens */
  .permission-box {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .permission-box .text-justify {
    width: 100% !important;
    max-width: 100% !important;
  }

  .permission-box .MuiTypography-root span {
    max-width: calc(100% - 15px) !important;
  }
}

/* 320 */
@media (max-width: 374px) {
  .save-client-button {
    width: 62% !important;
    font-size: 12px !important;
  }

  .addproductbutton {
    height: 35px !important;
    width: 150px !important;
  }

  .customerSaveCancelBtn {
    width: 100% !important;
  }

  .permissionCancelBtnSet {
    width: 100% !important;
  }
  .navigatePresetLevel{
    width: 60px !important;
  }
  .permissionbtnHere{
    gap: 10px !important;
  }

  /* Text overflow fixes for smallest mobile screens */
  .permission-box {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .permission-box .text-justify {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
  }

  .permission-box .MuiTypography-root span {
    max-width: calc(100% - 12px) !important;
  }
}

/* 280 */
@media (max-width: 319px) {
  .presetLevelDesc{
    margin-top: 0px !important;
  }

  /* Text overflow fixes for very small screens */
  .permission-box .text-justify {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    font-size: 13px !important;
  }

  .permission-box .MuiTypography-root span {
    max-width: calc(100% - 10px) !important;
    font-size: 13px !important;
  }
}
/* Override text transformation for permission labels */
.FormGroup Label[for] {
  text-transform: none !important;
}

.FormGroup Label.check {
  text-transform: none !important;
}

/* Specific override for permission form labels */
.main-chek .FormGroup Label,
.main-chek .FormGroup label {
  text-transform: none !important;
}

/* Prevent text transformation for permission text display */
.permission-box .MuiTypography-root,
.permission-box .text-blue-color,
.permission-box .text-red-color {
  text-transform: none !important;
}

/* Specific override for TruncatedText component in permissions */
.permission-box .MuiTypography-root span,
.permission-box .MuiTypography-root {
  text-transform: none !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
}

/* Permission list — mobile Jobber cards (≤775px): Plan-style Edit/Delete grid */
@media (max-width: 775px) {
  .permission-jobber-table .jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .permission-jobber-table .jobber-mobile-card__collapse-inner .jobber-mobile-card__actions .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

.permission-jobber-table .jobber-mobile-card__collapse-inner .permission-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.permission-jobber-table .jobber-mobile-card__collapse-inner .permission-mobile-actions.customer-list-actions-mobile .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
  .permission-jobber-table .jobber-mobile-card__collapse-inner .permission-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .permission-jobber-table .jobber-mobile-card__collapse-inner .permission-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

.event-container {
  align-items: flex-start;
  justify-content: center;
  padding: 6px 8px;
  min-height: 44px;
  min-width: 80px;
  background-color: #fff;
  background-color: var(--event-bg-color, #fff);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 4px !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
  position: relative;
  color: #000000 !important;
  border-color: transparent;
  border-color: var(--event-border-color, transparent);
  border: 2px solid transparent;
  border: 2px solid var(--event-border-color, transparent);
}

/* Prevent drag for non-customer events (quotes, contracts, invoices, visits) */
.fc-event.quote-event,
.fc-event.contract-event,
.fc-event.invoice-event,
.fc-event.visit-event,
.fc-daygrid-event.quote-event,
.fc-daygrid-event.contract-event,
.fc-daygrid-event.invoice-event,
.fc-daygrid-event.visit-event,
.fc-timegrid-event.quote-event,
.fc-timegrid-event.contract-event,
.fc-timegrid-event.invoice-event,
.fc-timegrid-event.visit-event {
  cursor: pointer !important;
  -webkit-user-select: none !important;
          user-select: none !important;
  -webkit-user-drag: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  pointer-events: auto !important;
}

/* Make sure non-customer events don't show drag cursor and can't be dragged */
.fc-event.quote-event .event-container,
.fc-event.contract-event .event-container,
.fc-event.invoice-event .event-container,
.fc-event.visit-event .event-container,
.fc-daygrid-event.quote-event .event-container,
.fc-daygrid-event.contract-event .event-container,
.fc-daygrid-event.invoice-event .event-container,
.fc-daygrid-event.visit-event .event-container {
  cursor: pointer !important;
  -webkit-user-select: none !important;
          user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Prevent drag for events with no-drag class */
.event-container.no-drag,
.fc-event .event-container.no-drag,
.fc-daygrid-event .event-container.no-drag,
.fc-timegrid-event .event-container.no-drag {
  cursor: pointer !important;
  -webkit-user-select: none !important;
          user-select: none !important;
  -webkit-user-drag: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

/* Prevent FullCalendar from making non-draggable events draggable */
.fc-event.quote-event,
.fc-event.contract-event,
.fc-event.invoice-event,
.fc-event.visit-event {
  pointer-events: auto !important;
}

.fc-event.quote-event .fc-event-main,
.fc-event.contract-event .fc-event-main,
.fc-event.invoice-event .fc-event-main,
.fc-event.visit-event .fc-event-main {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Only customer events (with EventId) should be draggable - they will be handled by eventStartEditable function */
/* The eventStartEditable function in the JS file controls which events can be dragged */

/* Force black text for maximum contrast - override any white text */
.event-container,
.event-container *,
.event-container .event-header,
.event-container .event-details,
.event-container .event-header-text,
.event-container .event-details-text,
.event-container .visit-label,
.event-container .customer-message-label,
.event-container .event-icon,
.event-container .event-message-meta,
.event-container span,
.event-container div,
.event-container p,
.event-header-text,
.visit-label,
.customer-message-label,
.event-details-text {
  color: #000000 !important;
}

/* Explicitly force black for all text content including Contract, Invoice, Visit labels */
.event-container .event-header-text *,
.event-container .event-header-text,
.event-container .visit-label,
.event-container .customer-message-label {
  color: #000000 !important;
}

/* Ensure icons inside event containers are also dark/black */
.event-container svg,
.event-container .event-icon svg,
.event-container img {
  filter: none !important;
  opacity: 1 !important;
}

/* Force black text for maximum contrast - override any white text */
.fc-event-title,
.fc-event-time,
.fc-event-title-container,
.fc-event-main,
.fc-event-segment,
.fc-event-title-container *,
.fc-event-main * {
  color: #000000 !important;
}

/* Remove any left border indicators from FullCalendar wrapper elements */
.fc-event,
.fc-daygrid-event,
.fc-timegrid-event,
.fc-event-main-frame,
.fc-event-bg,
.fc-event-main,
.fc-event-segment {
  border-left: none !important;
}

.event-container:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.event-header,
.event-details {
  width: 100%;
  max-width: 100%;
  color: #000000 !important;
  overflow: hidden;
}
.fc-theme-standard .fc-popover {
  z-index: 9 !important;
  border-radius: 10px !important;
}
.event-header {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: bold;
  width: 100%;
  max-width: 100%;
  color: #000000 !important;
  line-height: 1.3;
}
.event-icon {
  margin-right: 0;
  font-size: 14px;
  color: #000000 !important;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Remove icon filter to allow icons to use the text color from CSS variable */
.event-container .icon-style-schedule,
.event-container img.icon-style-schedule,
.event-icon .icon-style-schedule,
.event-icon img.icon-style-schedule {
  filter: none !important;
  opacity: 1 !important;
}
.visit-label {
  font-size: 10px;
  margin-left: 0;
  color: #000000 !important;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.event-details {
  font-size: 10px;
  color: #000000 !important;
  width: 100%;
  max-width: 100%;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.event-header-text {
  flex: 1 1;
  min-width: 0;
  color: #000000 !important;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.event-details-text {
  width: 100%;
  color: #000000 !important;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
/* Ensure child elements don't override parent background colors */
.fc-event .fc-event-main {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-main {
  background-color: transparent !important;
}

/* Remove background from FullCalendar wrapper elements - only .event-container card should have background */
.fc-daygrid-event.fc-event {
  background-color: transparent !important;
}

.fc-daygrid-event.fc-event-segment {
  background-color: transparent !important;
}

/* Make sure all wrapper elements are transparent - card (.event-container) will have the color */
.fc-daygrid-event .fc-event-segment {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-resizer {
  background-color: transparent !important;
}

/* Remove background colors from FullCalendar wrapper elements - only .event-container should have background */
.fc-daygrid-event {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-title-container {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-title {
  background-color: transparent !important;
}

/* Remove background from FullCalendar event wrapper - card (.event-container) will have the color */
.fc-daygrid-event .fc-event {
  background-color: transparent !important;
}

.fc-daygrid-event.fc-event {
  background-color: transparent !important;
}

/* Ensure calendar day cells don't have extra background colors - only event cards should have colors */
.fc-daygrid-day {
  background-color: transparent !important;
}

.fc-daygrid-day-frame {
  background-color: transparent !important;
}

.fc-daygrid-day-bg {
  background-color: transparent !important;
}

.fc-daygrid-day-top {
  background-color: transparent !important;
}

.fc-daygrid-day-number {
  background-color: transparent !important;
  color: #000000 !important;
  font-weight: 500 !important;
}

.fc-timegrid-event .fc-event-main {
  background-color: transparent !important;
}

/* fc-day-today styling is consolidated in the "Current day highlight" section below */
.fc-daygrid-dot-event:hover {
  background-color: none !important;
}
.fc .fc-more-popover .fc-popover-body {
  height: 250px !important;
  width: 250px !important; 
  overflow-y: auto !important;
  scrollbar-width: thin;
  border-radius: 8px; 
  background-color: #fff; 
  box-shadow: var(--shadow-md); 
  padding: 10px; 
}


.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar {
  width: 8px; 
}

.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-thumb {
  background-color: #888; 
  border-radius: 4px;
}

.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-track {
    background-color: #f1f1f1; 
}

.fc .fc-more-popover .fc-popover-body {
  scroll-behavior: smooth;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child),
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
  background-color: #0f2b46;
  color: white;
  border: 1px solid #0f2b46;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  margin-right: 5px;
}.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start :hover {
  background-color: none !important;
}
.fc-scroller.fc-scroller-liquid-absolute {
  overflow: hidden !important;
}
.dialog-content,
.dialog-actions {
  padding: 16px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
}
.css-1mmpgk2{
  border: none !important;
}
/* / media  / */

/* / 1680 / */
@media (max-width: 1700px) {
}

/* / 1500 / */
@media (max-width: 1680px) {
}

/* / 1440 / */
@media (max-width: 1449px) {
}

/* / 1280 / */
@media (max-width: 1439px) {
}

/* / 992 / */
@media (max-width: 1279px) {
}

/* / 768 / */
@media (max-width: 991px) {
}

/* / 576 / */
@media (max-width: 767px) {
  .calender-main {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding: 5px !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Make calendar responsive */
  .fc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  .fc-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  .fc-toolbar-title {
    font-size: 1.2em !important;
    margin: 10px 0 !important;
  }
  
  .fc-button-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .fc-button {
    font-size: 0.75em !important;
    padding: 4px 8px !important;
  }
  
  /* Contain events inside day cells - prevent bleed into next column */
  .fc-daygrid-day {
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .fc-daygrid-day-frame {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  .fc-daygrid-day-events {
    overflow: hidden !important;
    position: relative !important;
    min-height: 0 !important;
  }
  
  .fc-daygrid-event-harness {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Event cards: full width of cell, min height so 2-line text fits */
  .event-container {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 6px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .event-header,
  .event-details {
    font-size: 10px !important;
  }
  .event-header-text,
  .event-details-text {
    -webkit-line-clamp: 2;
  }
  
  .fc-col-header-cell {
    font-size: 0.75em !important;
    padding: 4px 2px !important;
    min-width: 0 !important;
  }
  
  .fc-daygrid-day-number {
    font-size: 0.85em !important;
    padding: 4px !important;
  }
  
  /* Allow horizontal scroll of grid on very small screens so day columns stay readable */
  .fc-scroller {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .fc-scroller-liquid-absolute {
    overflow-x: auto !important;
  }
  
  /* Wider grid so day columns fit 2-line event text (calendar scrolls horizontally on small screens) */
  .fc-daygrid-body {
    min-width: 420px !important;
  }
  .fc-daygrid-day {
    min-width: 55px !important;
  }
  
  .fc-event {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  .fc-daygrid-event {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  /* +more link stay in cell */
  .fc-daygrid-more-link {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* / 525 / - iPhone SE and small phones */
@media (max-width: 575px) {
  .calender-main {
    padding: 3px !important;
  }
  
  .fc-toolbar-title {
    font-size: 1em !important;
  }
  
  .fc-button {
    font-size: 0.7em !important;
    padding: 3px 6px !important;
  }
  
  .event-container {
    padding: 4px !important;
    font-size: 10px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }
  
  .fc-col-header-cell {
    font-size: 0.7em !important;
    padding: 2px 1px !important;
  }
  
  .fc-daygrid-day-number {
    font-size: 0.8em !important;
    padding: 2px !important;
  }
  
  .fc-daygrid-day-events {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/*  */
/* / 480 / */
@media (max-width: 524px) {
  .fc-view-harness {
    min-width: 0 !important;
  }
  .fc-daygrid-body {
    min-width: 0 !important;
  }
}

/* / 425 / */
@media (max-width: 479px) {
  .event-container .event-header-text,
  .event-container .event-details-text {
    font-size: 9px !important;
    -webkit-line-clamp: 2;
  }
}

/* / 375 / - iPhone SE width */
@media (max-width: 424px) {
  .fc-toolbar-title {
    font-size: 0.9em !important;
  }
  .fc-button {
    font-size: 0.65em !important;
    padding: 2px 4px !important;
  }
  .fc .fc-toolbar {
    gap: 6px !important;
  }
}

/* / 320 / */
@media (max-width: 374px) {
}

/* / 280 / */
@media (max-width: 319px) {
}

/* Capitalize first letter of calendar view buttons */
.fc-button-group .fc-button {
  text-transform: capitalize !important;
}

.fc-button-group .fc-button:first-letter {
  text-transform: uppercase !important;
}

/* TimeGrid Week View Styling - Matching Image Design */
.fc-theme-standard .fc-scrollgrid {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: #e5e7eb !important;
}

/* Header styling */
.fc-col-header-cell {
  background-color: #f9fafb !important;
  padding: 12px 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #374151 !important;
  border-bottom: 2px solid #e5e7eb !important;
}

.fc-col-header-cell-cushion {
  padding: 8px !important;
  text-decoration: none !important;
  color: #374151 !important;
}

/* List view day header styling - match week view color */
.fc-list-day,
.fc-list-day-text,
.fc-list-day-side,
.fc-list-day-cushion {
  color: #0f2b46 !important;
}

.fc-list-day-text,
.fc-list-day-side {
  color: #0f2b46 !important;
  font-weight: 600 !important;
}

/* Ensure all text in list day headers uses the correct color */
.fc-list-day *,
.fc-list-day-text *,
.fc-list-day-side * {
  color: #0f2b46 !important;
}

/* List view slot labels - fix all-day text color */
.fc-list-event-time,
.fc-list-event-time *,
.fc-list-event .fc-list-event-time,
.fc-list-event-title .fc-list-event-time {
  color: #0f2b46 !important;
}

/* Target the all-day label specifically in list view */
.fc-list-view .fc-list-event-time,
.fc-list-view .fc-list-event-time *,
.fc-list-view .fc-slot-label,
.fc-list-view .fc-slot-label * {
  color: #0f2b46 !important;
}

/* More specific targeting for all-day text */
.fc-list-view .fc-list-event[data-event-all-day="true"] .fc-list-event-time,
.fc-list-view .fc-list-event-time:contains("all-day"),
.fc-list-view td.fc-list-event-time {
  color: #0f2b46 !important;
}

/* Today column / header / month dot / list dot / mobile strip: fullCalendarTodayIndicator.css */

/* Time slot styling */
.fc-timegrid-slot {
  border-color: #f3f4f6 !important;
  height: 60px !important;
}

.fc-timegrid-slot-label {
  border-color: #e5e7eb !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  background-color: #ffffff !important;
}

.fc-timegrid-slot-minor {
  border-color: #f9fafb !important;
}

/* All-day events row */
.fc-timegrid-col-events {
  margin: 0 !important;
}

.fc-timegrid-event {
  border-radius: 4px !important;
  margin: 2px 4px !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* Ensure event-container displays properly in timeGrid views (Week/Day) */
.fc-timegrid-event .event-container {
  margin: 0 !important;
  padding: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.fc-timegrid-event .event-header,
.fc-timegrid-event .event-details {
  width: 100% !important;
}


.fc-timegrid-event-harness {
  margin: 2px 0 !important;
}

/* Ensure all-day events display as continuous horizontal bars */
.fc-timegrid-allday .fc-timegrid-col-events {
  margin: 0 !important;
  padding: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-event-harness {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Remove gaps between event segments in all-day row */
.fc-timegrid-allday .fc-timegrid-col {
  padding: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-col-frame {
  padding: 0 !important;
}

/* All-day slot */
.fc-timegrid-allday {
  background-color: #f9fafb !important;
  border-bottom: 2px solid #e5e7eb !important;
}

.fc-timegrid-allday-cell {
  border-color: #e5e7eb !important;
}

.fc-timegrid-allday .fc-timegrid-event {
  border-radius: 4px !important;
  margin: 2px 0 !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
}

/* Ensure all-day events display as continuous bars */
.fc-timegrid-allday .fc-timegrid-event-harness {
  margin: 2px 0 !important;
}

.fc-timegrid-allday .fc-timegrid-event-harness + .fc-timegrid-event-harness {
  margin-top: 4px !important;
}

/* Ensure child elements don't override parent background colors for specific event types */
.fc-event.quote-event .fc-event-main,
.fc-event.contract-event .fc-event-main,
.fc-event.invoice-event .fc-event-main,
.fc-event.visit-event .fc-event-main {
  background-color: transparent !important;
}

.fc-daygrid-event.quote-event .fc-event-main,
.fc-daygrid-event.contract-event .fc-event-main,
.fc-daygrid-event.invoice-event .fc-event-main,
.fc-daygrid-event.visit-event .fc-event-main {
  background-color: transparent !important;
}

.fc-timegrid-event.quote-event .fc-event-main,
.fc-timegrid-event.contract-event .fc-event-main,
.fc-timegrid-event.invoice-event .fc-event-main,
.fc-timegrid-event.visit-event .fc-event-main {
  background-color: transparent !important;
}

/* Remove background from FullCalendar .fc-event wrapper - only .event-container card should have background */
.fc-event.quote-event,
.fc-event.contract-event,
.fc-event.invoice-event,
.fc-event.visit-event {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

.fc-daygrid-event.quote-event,
.fc-daygrid-event.contract-event,
.fc-daygrid-event.invoice-event,
.fc-daygrid-event.visit-event {
  border: none !important;
  box-shadow: none !important;
  /* Remove background from FullCalendar wrapper - only .event-container card should have background */
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Remove background from all FullCalendar wrapper elements - card (.event-container) will have the color */
.fc-daygrid-event.quote-event .fc-event,
.fc-daygrid-event.contract-event .fc-event,
.fc-daygrid-event.invoice-event .fc-event,
.fc-daygrid-event.visit-event .fc-event,
.fc-daygrid-event.quote-event.fc-event,
.fc-daygrid-event.contract-event.fc-event,
.fc-daygrid-event.invoice-event.fc-event,
.fc-daygrid-event.visit-event.fc-event {
  background-color: transparent !important;
}

/* Remove background from event segments - only .event-container card should have background */
.fc-daygrid-event .fc-event-segment {
  background-color: transparent !important;
}

.fc-daygrid-event.quote-event .fc-event-segment,
.fc-daygrid-event.contract-event .fc-event-segment,
.fc-daygrid-event.invoice-event .fc-event-segment,
.fc-daygrid-event.visit-event .fc-event-segment {
  background-color: transparent !important;
}

.fc-timegrid-event.quote-event,
.fc-timegrid-event.contract-event,
.fc-timegrid-event.invoice-event,
.fc-timegrid-event.visit-event {
  border: none !important;
  box-shadow: none !important;
  /* Remove background from FullCalendar wrapper - only .event-container card should have background */
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Event colors - Quotes (Status-based) - Remove background from wrapper, keep only in .event-container */
.fc-event.quote-event {
  color: #ffffff !important;
  background-color: transparent !important;
}
/* Quote: Approved - Green */
.fc-event.quote-event[style*="rgb(16, 185, 129)"],
.fc-event.quote-event[style*="rgb(5, 150, 105)"],
.fc-daygrid-event.quote-event[style*="rgb(16, 185, 129)"],
.fc-daygrid-event.quote-event[style*="rgb(5, 150, 105)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Quote: Awaiting Response - Orange */
.fc-event.quote-event[style*="rgb(249, 115, 22)"],
.fc-event.quote-event[style*="rgb(234, 88, 12)"],
.fc-daygrid-event.quote-event[style*="rgb(249, 115, 22)"],
.fc-daygrid-event.quote-event[style*="rgb(234, 88, 12)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Quote: Default - Blue */
.fc-event.quote-event[style*="rgb(59, 130, 246)"],
.fc-daygrid-event.quote-event[style*="rgb(59, 130, 246)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Event colors - Contracts (Status-based) - Remove background from wrapper, keep only in .event-container */
.fc-event.contract-event {
  color: #ffffff !important;
  background-color: transparent !important;
}
/* Contract: Converted - Purple */
.fc-event.contract-event[style*="rgb(139, 92, 246)"],
.fc-event.contract-event[style*="rgb(124, 58, 237)"],
.fc-daygrid-event.contract-event[style*="rgb(139, 92, 246)"],
.fc-daygrid-event.contract-event[style*="rgb(124, 58, 237)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Contract: Upcoming/Today - Bright Green */
.fc-event.contract-event[style*="rgb(16, 185, 129)"],
.fc-event.contract-event[style*="rgb(5, 150, 105)"],
.fc-daygrid-event.contract-event[style*="rgb(16, 185, 129)"],
.fc-daygrid-event.contract-event[style*="rgb(5, 150, 105)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Contract: Scheduled - Yellow/Gold */
.fc-event.contract-event[style*="rgb(251, 191, 36)"],
.fc-event.contract-event[style*="rgb(245, 158, 11)"],
.fc-daygrid-event.contract-event[style*="rgb(251, 191, 36)"],
.fc-daygrid-event.contract-event[style*="rgb(245, 158, 11)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Contract: Unscheduled - Red */
.fc-event.contract-event[style*="rgb(239, 68, 68)"],
.fc-event.contract-event[style*="rgb(220, 38, 38)"],
.fc-daygrid-event.contract-event[style*="rgb(239, 68, 68)"],
.fc-daygrid-event.contract-event[style*="rgb(220, 38, 38)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Event colors - Invoices (Status-based) - Remove background from wrapper, keep only in .event-container */
.fc-event.invoice-event {
  color: #ffffff !important;
  background-color: transparent !important;
}
/* Invoice: Paid - Green */
.fc-event.invoice-event[style*="rgb(16, 185, 129)"],
.fc-event.invoice-event[style*="rgb(5, 150, 105)"],
.fc-daygrid-event.invoice-event[style*="rgb(16, 185, 129)"],
.fc-daygrid-event.invoice-event[style*="rgb(5, 150, 105)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Invoice: Unpaid - Red */
.fc-event.invoice-event[style*="rgb(239, 68, 68)"],
.fc-event.invoice-event[style*="rgb(220, 38, 38)"],
.fc-daygrid-event.invoice-event[style*="rgb(239, 68, 68)"],
.fc-daygrid-event.invoice-event[style*="rgb(220, 38, 38)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Event colors - Visits (Status-based) - Remove background from wrapper, keep only in .event-container */
.fc-event.visit-event {
  color: #ffffff !important;
  background-color: transparent !important;
}
/* Visit: Complete/Completed - Green */
.fc-event.visit-event[style*="rgb(16, 185, 129)"],
.fc-event.visit-event[style*="rgb(5, 150, 105)"],
.fc-daygrid-event.visit-event[style*="rgb(16, 185, 129)"],
.fc-daygrid-event.visit-event[style*="rgb(5, 150, 105)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Visit: Confirmed - Blue */
.fc-event.visit-event[style*="rgb(59, 130, 246)"],
.fc-event.visit-event[style*="rgb(37, 99, 235)"],
.fc-daygrid-event.visit-event[style*="rgb(59, 130, 246)"],
.fc-daygrid-event.visit-event[style*="rgb(37, 99, 235)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Visit: Late - Red */
.fc-event.visit-event[style*="rgb(239, 68, 68)"],
.fc-event.visit-event[style*="rgb(220, 38, 38)"],
.fc-daygrid-event.visit-event[style*="rgb(239, 68, 68)"],
.fc-daygrid-event.visit-event[style*="rgb(220, 38, 38)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Visit: Today - Yellow/Gold */
.fc-event.visit-event[style*="rgb(251, 191, 36)"],
.fc-event.visit-event[style*="rgb(245, 158, 11)"],
.fc-daygrid-event.visit-event[style*="rgb(251, 191, 36)"],
.fc-daygrid-event.visit-event[style*="rgb(245, 158, 11)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Visit: Upcoming - Orange */
.fc-event.visit-event[style*="rgb(249, 115, 22)"],
.fc-event.visit-event[style*="rgb(234, 88, 12)"],
.fc-daygrid-event.visit-event[style*="rgb(249, 115, 22)"],
.fc-daygrid-event.visit-event[style*="rgb(234, 88, 12)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* Visit: Pending - Gray */
.fc-event.visit-event[style*="rgb(107, 114, 128)"],
.fc-event.visit-event[style*="rgb(75, 85, 99)"],
.fc-daygrid-event.visit-event[style*="rgb(107, 114, 128)"],
.fc-daygrid-event.visit-event[style*="rgb(75, 85, 99)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Multi-day contract events - solid line/bar for ongoing jobs */
.fc-event.contract-event {
  display: block !important;
  position: relative !important;
}

/* Ensure multi-day events span continuously in dayGrid view (month/week views) */
.fc-daygrid-event.contract-event {
  border-radius: 0 !important;
  margin: 0 !important;
  border-top: 2px solid !important;
  border-top-color: inherit !important;
  border-bottom: 2px solid !important;
  border-bottom-color: inherit !important;
  /* Remove background from FullCalendar wrapper - only .event-container card should have background */
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Middle segments - no side borders for seamless connection */
.fc-daygrid-event.contract-event:not(.fc-event-start):not(.fc-event-end) {
  border-left: none !important;
  border-right: none !important;
}

.fc-daygrid-event.contract-event.fc-event-start {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-left: 2px solid !important;
  border-left-color: inherit !important;
  border-right: none !important;
}

.fc-daygrid-event.contract-event.fc-event-end {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-right: 2px solid !important;
  border-right-color: inherit !important;
  border-left: none !important;
}

.fc-daygrid-event.contract-event.fc-event-start.fc-event-end {
  border-radius: 4px !important;
  border-left: 2px solid !important;
  border-left-color: inherit !important;
  border-right: 2px solid !important;
  border-right-color: inherit !important;
  border-top: 2px solid !important;
  border-top-color: inherit !important;
  border-bottom: 2px solid !important;
  border-bottom-color: inherit !important;
}

/* For timeGrid all-day view - ensure continuous horizontal bar */
.fc-timegrid-allday .fc-timegrid-event.contract-event {
  border-radius: 0 !important;
  margin: 0 !important;
  height: 24px !important;
  border-top: 2px solid !important;
  border-top-color: inherit !important;
  border-bottom: 2px solid !important;
  border-bottom-color: inherit !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  /* Remove background from FullCalendar wrapper - only .event-container card should have background */
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Middle segments of multi-day contract events - no side borders for seamless connection */
.fc-timegrid-allday .fc-timegrid-event.contract-event:not(.fc-event-start):not(.fc-event-end) {
  border-left: none !important;
  border-right: none !important;
}

/* Start of multi-day contract bar - use border color from event */
.fc-timegrid-allday .fc-timegrid-event.contract-event.fc-event-start {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-left: 2px solid !important;
  border-left-color: inherit !important;
  border-right: none !important;
}

/* End of multi-day contract bar - use border color from event */
.fc-timegrid-allday .fc-timegrid-event.contract-event.fc-event-end {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-right: 2px solid !important;
  border-right-color: inherit !important;
  border-left: none !important;
}

/* Single-day contract event - full border */
.fc-timegrid-allday .fc-timegrid-event.contract-event.fc-event-start.fc-event-end {
  border-radius: 4px !important;
  border-left: 2px solid !important;
  border-left-color: inherit !important;
  border-right: 2px solid !important;
  border-right-color: inherit !important;
  border-top: 2px solid !important;
  border-top-color: inherit !important;
  border-bottom: 2px solid !important;
  border-bottom-color: inherit !important;
}

/* Ensure no gaps between multi-day event segments */
.fc-timegrid-allday .fc-timegrid-col-events {
  margin: 0 !important;
  padding: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-event-harness {
  margin: 0 !important;
  padding: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-event-harness + .fc-timegrid-event-harness {
  margin-top: 4px !important;
}

/* Ensure continuous bars - remove any spacing between days */
.fc-timegrid-allday .fc-timegrid-col {
  border-left: none !important;
  border-right: none !important;
  padding: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-col:first-child {
  border-left: 1px solid #e5e7eb !important;
}

.fc-timegrid-allday .fc-timegrid-col:last-child {
  border-right: 1px solid #e5e7eb !important;
}

/* Critical: Remove gaps between multi-day event segments */
.fc-timegrid-allday .fc-timegrid-col-frame {
  padding: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-col-events {
  padding: 0 !important;
}

/* Ensure contract events connect seamlessly - remove gaps between segments */
.fc-timegrid-allday .fc-timegrid-event.contract-event:not(.fc-event-start):not(.fc-event-end),
.fc-timegrid-allday .fc-timegrid-event.event-type-contract:not(.fc-event-start):not(.fc-event-end) {
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Remove any spacing that might create gaps */
.fc-timegrid-allday .fc-timegrid-col-frame {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure event segments connect seamlessly */
.fc-timegrid-allday .fc-timegrid-event.contract-event.fc-event-start {
  margin-right: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-event.contract-event.fc-event-end {
  margin-left: 0 !important;
}

.fc-timegrid-allday .fc-timegrid-event.contract-event:not(.fc-event-start):not(.fc-event-end) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Critical: Remove borders between columns for seamless connection */
.fc-timegrid-allday .fc-timegrid-col {
  border-left: none !important;
  border-right: none !important;
}

.fc-timegrid-allday .fc-timegrid-col:first-child {
  border-left: 1px solid #e5e7eb !important;
}

.fc-timegrid-allday .fc-timegrid-col:last-child {
  border-right: 1px solid #e5e7eb !important;
}

/* Ensure the event bar spans continuously across all columns */
.fc-timegrid-allday .fc-timegrid-event.contract-event {
  position: relative !important;
  z-index: 1 !important;
}

/* Make sure middle segments have no visual breaks */
.fc-timegrid-allday .fc-timegrid-event.contract-event:not(.fc-event-start):not(.fc-event-end) {
  border-left: none !important;
  border-right: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Make sure contract bars are solid and continuous */
.fc-timegrid-allday .fc-timegrid-event.contract-event .fc-event-main {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
}

/* Ensure bars span continuously without visual breaks */
.fc-timegrid-allday .fc-timegrid-event.contract-event::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background-color: inherit !important;
  z-index: -1 !important;
}

/* Force continuous bars for contract events - override any default spacing */
.fc-timegrid-allday .fc-timegrid-event.contract-event,
.fc-timegrid-allday .fc-timegrid-event.event-type-contract {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

.fc-timegrid-allday .fc-timegrid-event.contract-event.fc-event-start,
.fc-timegrid-allday .fc-timegrid-event.event-type-contract.fc-event-start {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-left: 2px solid #7c3aed !important;
}

.fc-timegrid-allday .fc-timegrid-event.contract-event.fc-event-end,
.fc-timegrid-allday .fc-timegrid-event.event-type-contract.fc-event-end {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-right: 2px solid #7c3aed !important;
}

/* Event colors - Visits (Green) */
.fc-event[data-event-type="visit"],
.fc-event[style*="rgb(16, 185, 129)"] {
  background-color: #10b981 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

/* Event colors - Messages (Gray) - Remove background/border from wrapper, keep only in .event-container */
.fc-event[data-event-type="message"],
.fc-event[style*="rgb(107, 114, 128)"] {
  background-color: transparent !important;
  border-color: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

/* Toolbar styling */
.fc-toolbar {
  padding: 16px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 0 !important;
}

.fc-toolbar-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.fc-button {
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: 1px solid #e5e7eb !important;
  background-color: #ffffff !important;
  color: #374151 !important;
}


.fc-button:active {
  background-color: #e5e7eb !important;
}

.fc-button-active {
  background-color: #0f2b46 !important;
  border-color: #0f2b46 !important;
  color: #ffffff !important;
}


.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active {
  background-color: #0f2b46 !important;
  border-color: #0f2b46 !important;
  color: #ffffff !important;
}

/* Today button */
.fc-today-button {
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: 1px solid #e5e7eb !important;
  background-color: #ffffff !important;
  color: #374151 !important;
}


/* Navigation buttons */
.fc-prev-button,
.fc-next-button {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  min-width: 40px !important;
}

/* Day cells */
.fc-timegrid-col {
  border-color: #e5e7eb !important;
}

.fc-timegrid-col-frame {
  border-color: #e5e7eb !important;
}

/* Event content styling */
.fc-event-title {
  font-weight: 500 !important;
  padding: 2px 0 !important;
}

.fc-event-time {
  font-weight: 600 !important;
  margin-right: 4px !important;
}

/* Scrollbar styling */
.fc-scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.fc-scroller::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.fc-scroller::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}


/* Responsive adjustments for timeGrid */
@media (max-width: 767px) {
  .fc-toolbar {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .fc-toolbar-title {
    font-size: 16px !important;
    text-align: center !important;
  }

  .fc-button {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .fc-timegrid-slot-label {
    font-size: 10px !important;
    padding: 2px 4px !important;
  }

  .fc-col-header-cell {
    font-size: 12px !important;
    padding: 8px 4px !important;
  }

  .fc-timegrid-event {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
}

/* CRITICAL: Force black text on ALL event container elements - highest priority */
.event-container,
.event-container *,
.event-container *::before,
.event-container *::after,
.event-container .event-header,
.event-container .event-details,
.event-container .event-header-text,
.event-container .event-details-text,
.event-container .visit-label,
.event-container .customer-message-label,
.event-container .event-icon,
.event-container .event-message-meta,
.event-container span,
.event-container div,
.event-container p,
.event-container strong,
.event-container em,
.event-header-text,
.visit-label,
.customer-message-label,
.event-details-text,
.event-header,
.event-details,
.event-icon {
  color: #000000 !important;
}

/* ========== RESPONSIVE: Desktop vs Mobile Calendar View ========== */
.calendar-wrapper {
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
  width: 100%;
}

/* Mobile view: hidden by default */
.calendar-wrapper.mobile-view {
  display: none;
}

/* Desktop view: visible by default */
.calendar-wrapper.desktop-view {
  display: block;
}

/* Mobile inner wrapper (for padding + FAB space) */
.mobile-schedule-inner {
  padding: 0 12px 80px;
  min-height: 100%;
}

/* Mobile header: single-line date + day strip */
.mobile-calendar-header {
  padding: 16px 0 12px;
  margin-bottom: 12px;
}

.mobile-date-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-bottom: 14px;
  border-radius: 8px;
  transition: background 0.2s;
}

.mobile-date-picker-trigger:hover {
  background: rgba(6, 49, 100, 0.06);
}

.mobile-date-picker-trigger:active {
  background: rgba(6, 49, 100, 0.1);
}

.mobile-date-one-line {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0f2b46;
  text-align: center;
  line-height: 1.3;
}

.mobile-date-picker-icon {
  color: #0f2b46;
  font-size: 1.4rem !important;
}

.mobile-day-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.mobile-day-dot {
  flex: 1 1;
  max-width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mobile-day-dot.selected {
  background: #0f2b46;
  color: #fff;
  border-color: #0f2b46;
}

/* Mobile today dot: fullCalendarTodayIndicator.css */

.mobile-event-list {
  padding: 0 0 16px;
}

/* Mobile event card - vertical layout like reference */
.event-card-mobile {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  border: 1px solid #eee;
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-card-mobile:hover {
  box-shadow: var(--shadow-xl);
}

.event-card-mobile-time {
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
}

.event-card-mobile-time .event-time-all-day {
  color: #0f2b46;
  font-weight: 700;
}

.event-card-mobile-time .event-time-range {
  color: #64748b;
}

.event-card-mobile-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-card-mobile-line {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.4;
}

.event-card-mobile .view-details-btn {
  align-self: flex-start;
  margin-top: 4px;
  background: #0f2b46;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
}

.event-card-mobile .view-details-btn.action-sign {
  background: var(--amber);
  color: #fff;
}

.event-card-mobile .view-details-btn.action-paid {
  background: #10b981;
  color: #fff;
}

/* Legacy .event-card kept for any other use */
.event-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: 1px solid #eee;
}

.event-card .event-time { font-weight: bold; min-width: 80px; color: #0f2b46; }
.event-card .event-details { flex-grow: 1; min-width: 0; }
.event-card .event-title { margin: 0 0 4px 0; font-size: 1.05rem; color: #333; }
.event-card .event-desc { margin: 0; color: #666; font-size: 0.9rem; }
.event-card .view-details-btn {
  background: #0f2b46; color: white; padding: 8px 14px; border-radius: 8px;
  font-weight: 600; font-size: 0.85rem; border: none; cursor: pointer;
}
.event-card .view-details-btn.action-sign { background: var(--amber); color: #fff; }
.event-card .view-details-btn.action-paid { background: #10b981; color: #fff; }

.mobile-no-events {
  text-align: center;
  color: #666;
  padding: 24px 16px;
  margin: 0;
  font-size: 1rem;
}

/* Floating action button (FAB) - Create task on mobile */
.mobile-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0f2b46;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mobile-fab:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}

.mobile-fab-icon {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

/* Mobile date picker dialog */
.mobile-date-picker-dialog .MuiDialogContent-root {
  display: flex;
  justify-content: center;
}

.mobile-date-picker-dialog .MuiPickersCalendarHeader-root {
  padding: 0 8px;
}

/* Only show FAB when mobile view is visible */
@media screen and (min-width: 769px) {
  .mobile-fab {
    display: none !important;
  }
}

/* On screens smaller than 768px: show mobile view, hide desktop calendar */
@media screen and (max-width: 768px) {
  .calendar-wrapper.desktop-view {
    display: none !important;
  }

  .calendar-wrapper.mobile-view {
    display: block !important;
  }
}

/* On screens 769px and larger: show desktop calendar, hide mobile view */
@media screen and (min-width: 769px) {
  .calendar-wrapper.mobile-view {
    display: none !important;
  }

  .calendar-wrapper.desktop-view {
    display: block !important;
  }
}

/* Schedule event detail — card body: comfortable padding (no per-row borders: avoids 2-col layout glitches) */
.schedule-event-detail-dialog .schedule-event-detail-card .schedule-event-detail-fields > .MuiGrid-item {
  padding: 12px 18px !important;
  margin: 0 !important;
}

/* Field label / value (stacked rows) — skip chip row */
.schedule-event-detail-dialog
  .schedule-event-detail-fields
  .MuiGrid-item:not(.schedule-event-visit-status-row)
  > div:first-of-type {
  color: #063164 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.02em;
}

.schedule-event-detail-dialog
  .schedule-event-detail-fields
  .MuiGrid-item:not(.schedule-event-visit-status-row)
  > div:last-of-type:not(.schedule-event-status-value) {
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
  font-weight: 500 !important;
}

.schedule-event-detail-dialog .schedule-event-dialog-actions .MuiButton-root,
.schedule-event-detail-dialog .schedule-event-dialog-actions button {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

/*
 * MUI DialogContent zeroes top padding when it follows DialogTitle:
 * `.MuiDialogTitle-root + .MuiDialogContent-root { padding-top: 0 }`
 * That beats a normal `sx` padding shorthand — force the gap under the header.
 */
.schedule-event-detail-dialog
  .MuiDialogTitle-root
  + .MuiDialogContent-root.schedule-event-detail-dialog-content {
  padding-top: 24px !important;
}

/* Schedule event detail modal – responsive (mobile): smaller height, compact content, proper buttons */
@media screen and (max-width: 600px) {
  .schedule-event-detail-dialog .MuiDialog-paper {
    max-width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 12px !important;
  }
  .schedule-event-detail-dialog .MuiDialogTitle-root.schedule-event-dialog-title,
  .schedule-event-detail-dialog .schedule-event-dialog-title {
    flex-shrink: 0;
    padding: 10px 6px 10px 14px !important;
  }
  .schedule-event-detail-dialog .schedule-event-dialog-title-text {
    font-size: 1rem !important;
  }
  .schedule-event-detail-dialog .schedule-event-detail-dialog-content,
  .schedule-event-detail-dialog .MuiDialogContent-root {
    padding: 18px 14px 12px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .schedule-event-detail-dialog
    .MuiDialogTitle-root
    + .MuiDialogContent-root.schedule-event-detail-dialog-content {
    padding-top: 18px !important;
  }
  .schedule-event-detail-dialog .MuiDialogContent-root > .MuiBox-root:first-of-type {
    margin-bottom: 12px !important;
  }
  .schedule-event-detail-dialog .schedule-event-location-block {
    word-break: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0 !important;
  }
  .schedule-event-detail-dialog .MuiGrid-container {
    margin-bottom: -8px !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions {
    flex-shrink: 0;
    padding: 10px 16px 14px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-item {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-item > div {
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions button {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

.whiteEditBtn {
    background-color: #ffffff;
    color: #007bff;
    border: 1px solid #007bff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.whiteEditBtn:disabled,
.whiteEditBtn.disabled {
    background-color: #f5f5f5;
    color: #b0b0b0;
    border: 1px solid #dcdcdc;
    cursor: not-allowed;
    pointer-events: none;
}

.button.footer-buttons.outline-button-blue-color.backgroundWhiteBtn.btn.btn-secondary.disabled {
    background: transparent !important;
}
.datPicherInvoice.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-adornedEnd.css-1enov63-MuiInputBase-root-MuiOutlinedInput-root {
    height: 34px !important;
}
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    background-color: transparent;
}

.disabledText {
    color: #b0b0b0;
    opacity: 0.5;
    pointer-events: none;
}

.editImagePayment {
    margin-right: 8px;
}

.whiteEditBtn:disabled .editImagePayment,
.whiteEditBtn.disabled .editImagePayment {
    opacity: 0.5;
}


/* Total Price visibility for responsive layout */
.total-price-desktop {
    display: block;
}

.total-price-mobile {
    display: none !important;
}

.invoiceSubject_input {
    width: 90% !important;
}

.incoiceNumber_auto {
    margin-left: 7% !important;
}

.invoiceNumber_detailDate {
    margin-left: 3% !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {
    .nevigate_collect_cancel_invoice {
        flex-direction: column;
        gap: 15px;
    }

    .buttonGroupthree {
        width: 100%;
        flex-wrap: wrap;
    }

    .incoiceNumber_auto {
        margin-top: 0px !important;
        margin-left: 0% !important;
    }

    .invoiceSubject_part {
        margin-bottom: 0px !important;
    }

    .invoiceNumber_detailDate {
        margin-left: 0% !important;
    }

    .customerIncvoiceDetailFlex {
        flex-direction: column !important;
    }

    .invoiceDetailLeft {
        margin-left: -7px !important;
        margin-top: 20px;
        width: 100%;
    }

    .propertyAddressSpacing {
        width: 100% !important;
    }

    .invoicrNUmberAndImg {
        flex-wrap: wrap;
        gap: 15px;
    }
}

/* 992 */
@media (max-width: 1279px) {
    .nevigate_collect_cancel_invoice {
        flex-direction: column;
        gap: 15px;
    }

    .buttonGroupthree {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }

    .customerIncvoiceDetailFlex {
        flex-direction: column !important;
    }

    .invoiceDetailLeft {
        margin-left: 0 !important;
        margin-top: 20px;
        width: 100%;
    }

    .propertyAddressSpacing {
        width: 100% !important;
    }

    .peoprttyAddressQIdthScreenFive {
        flex-wrap: wrap;
    }

    .columnWidthSet {
        margin-bottom: 20px;
    }

    .invoicrNUmberAndImg {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }

    .contractDetailType {
        margin-top: 10px !important;
    }
}

/* 768 */
@media (max-width: 991px) {
    .nevigate_collect_cancel_invoice {
        flex-direction: column;
        gap: 15px;
    }

    .buttonGroupthree {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn {
        width: 100%;
        flex-wrap: wrap;
    }

    .cancelInvoice_collectPayment_mail_btn > * {
        flex: 1 1 auto;
        min-width: 150px;
    }

    .editButton {
        width: 100%;
    }

    .invoiceEditBtn {
        width: 100%;
    }

    .invoicrNUmberAndImg {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .customerIncvoiceDetailFlex {
        flex-direction: column !important;
    }

    .peoprttyAddressQIdthScreenFive {
        flex-direction: column !important;
    }

    .columnWidthSet {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .invoiceDetailLeft {
        margin-left: 0 !important;
        margin-top: 20px;
        width: 100%;
    }

    /* Fix responsive layout for client message and discount table */
    .client-message {
        display: block !important;
        flex-direction: column !important;
    }

    .totalinput {
        width: 100% !important;
        margin-left: 0px !important;
        padding-right: 0px !important;
    }

    .messageinput {
        width: 100% !important;
    }

    .newlineitem {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px;
    }

    .line-items-total {
        margin-right: 0px !important;
    }

    /* Toggle Total Price visibility for mobile */
    .total-price-desktop {
        display: none !important;
    }

    .total-price-mobile {
        display: flex !important;
    }
}

/* 576 */
@media (max-width: 767px) {
    .invoiceAllDetails {
        flex-direction: column !important;
    }

    .invoiceInvoiceNumber {
        margin-left: 0px !important;
    }

    .incoiceNumber_auto {
        margin-top: 10px !important;
    }

    .internal-notes {
        margin-bottom: 18px !important;
    }

    .invoiceDetailLeft {
        margin-left: 0 !important;
    }

    .nevigate_collect_cancel_invoice {
        flex-direction: column;
        gap: 10px;
    }

    .buttonGroupthree {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn > * {
        width: 100% !important;
    }

    .editButton {
        width: 100%;
    }

    .invoiceEditBtn {
        width: 100% !important;
    }

    .invoicrNUmberAndImg {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }

    .invoicePaidGap {
        margin: 10px 0 !important;
    }

    .contractDetailType {
        margin: 10px 0 !important;
    }

    .peoprttyAddressQIdthScreenFive {
        flex-direction: column !important;
    }

    .columnWidthSet {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .subTitleRemoveTop {
        margin-top: 15px !important;
    }

    /* Discount table responsive styles */
    .client-message {
        flex-direction: column !important;
    }

    .totalinput {
        width: 100% !important;
        margin-left: 0px !important;
        padding: 0 !important;
        overflow-x: auto !important;
    }

    .messageinput {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .totalinput table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .totalinput .MuiTableCell-root {
        padding: 8px 4px !important;
        font-size: 14px !important;
        word-break: break-word !important;
    }
}

/* 525 */
@media (max-width: 575px) {
    .customer_addCustomer_div {
        flex-direction: column !important;
    }

    .customer_para {
        margin-right: auto;
    }

    .customerAdd_btn {
        margin-left: auto;
    }

    .nevigate_collect_cancel_invoice,
    .paymentDetail_box,
    .internalNotes_attachment {
        margin-top: 2% !important;
        margin-left: 0% !important;
    }

    .buttonGroup {
        width: 100%;
    }

    .buttonGroupthree {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn {
        flex-direction: column;
        margin-top: 2% !important;
        width: 100%;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn > * {
        width: 100% !important;
    }

    .cancelInvoice_btn {
        justify-content: center !important;
        align-items: center !important;
        display: flex;
        width: 100% !important;
    }

    .moreAction_payment {
        width: 100% !important;
    }

    .nevigatePayment {
        padding: 6px !important;
    }

    .editButton {
        width: 100%;
    }

    .invoiceEditBtn {
        width: 100% !important;
    }

    .editInvoiceDetailPage {
        font-weight: 500;
        font-size: 18px !important;
    }

    .editImagePayment {
        height: 19px !important;
    }

    .invoiceInvoiceNumber {
        margin-top: 0px !important;
    }

    .invoicrNUmberAndImg {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }

    .heading-three {
        font-size: 20px !important;
        word-break: break-word;
    }

    .peoprttyAddressQIdthScreenFive {
        flex-direction: column !important;
    }

    .columnWidthSet {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .subTitleRemoveTop {
        margin-top: 15px !important;
    }

    .invoiceCancelBtn {
        width: 100% !important;
        flex-direction: column !important;
    }

    .saveBtnInvoiceChange {
        width: 100% !important;
    }

    .invoiceHolderName {
        font-size: 20px !important;
    }

    .invoice-detail-address {
        flex-direction: column !important;
        margin-top: 0px !important;
    }

    .invoicePaidGap {
        margin: 10px 0 !important;
        padding: 5px 10px !important;
        font-size: 14px !important;
    }

    .contractDetailType {
        margin: 10px 0 !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    .customerIncvoiceDetailFlex {
        flex-direction: column !important;
    }

    .invoiceDetailLeft {
        margin-left: 0 !important;
        margin-top: 20px;
        width: 100%;
    }

    .propertyAddressSpacing {
        width: 100% !important;
    }

    .Quote-details {
        padding: 10px !important;
    }

    /* Discount table responsive styles for small screens */
    .client-message {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .totalinput {
        width: 100% !important;
        margin-left: 0px !important;
        padding: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .messageinput {
        width: 100% !important;
        order: 2 !important;
    }

    .totalinput table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .totalinput .MuiTableCell-root {
        padding: 8px 2px !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }

    .totalinput .MuiTable-root {
        width: 100% !important;
    }

    .discountTableBox {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .discountInputBox {
        margin-left: auto !important;
        width: 100px !important;
    }

    .newlineitem {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .line-items-total {
        margin-right: 0px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* 480 */
@media (max-width: 524px) {
    .invoiceEditBtn {
        width: 100% !important;
    }

    .buttonGroupthree {
        flex-direction: column;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn > * {
        width: 100% !important;
    }

    .heading-three {
        font-size: 18px !important;
    }

    .invoicePaidGap {
        font-size: 13px !important;
        padding: 5px 8px !important;
    }

    .contractDetailType {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* 425 */
@media (max-width: 479px) {
    .invoiceProduct_servicePart {
        min-width: 100% !important;
        overflow-x: auto;
    }

    .issuedDate_dueDate_paymentDue {
        flex-direction: column;
    }

    .issueDateFlex {
        flex-direction: column !important;
    }

    .issueDate_select {
        margin-top: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .dueDate_invoice {
        margin-left: 0px !important;
    }

    .paymentDue_invoice {
        margin-left: 0px !important;
    }

    .invoiceNameHolder_icon {
        padding: 0px 11px 0px 11px !important;
        height: 40px !important;
    }

    .invoiceHolder_person {
        font-size: 17px !important;
    }

    .form-group {
        align-items: start !important;
    }

    .payDueRange {
        margin-left: 0px !important;
        width: 100% !important;
    }

    .payDueRange2 {
        justify-content: space-between !important;
        width: 100% !important;
    }

    .issuedateReponsiveDate {
        width: 100% !important;
    }

    .invoiceInerImg {
        padding: 10px 1px 1px 5px !important;
    }

    .invoiceInputBoxes {
        width: 100% !important;
    }

    .nevigate_collect_cancel_invoice {
        flex-direction: column;
        gap: 10px;
    }

    .buttonGroupthree {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cancelInvoice_collectPayment_mail_btn > * {
        width: 100% !important;
    }

    .invoicrNUmberAndImg {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    .heading-three {
        font-size: 18px !important;
        line-height: 1.4;
    }

    .invoicePaidGap {
        font-size: 12px !important;
        padding: 4px 8px !important;
        margin: 5px 0 !important;
    }

    .contractDetailType {
        font-size: 11px !important;
        padding: 4px 8px !important;
        margin: 5px 0 !important;
    }

    .Quote-details {
        padding: 5px !important;
    }

    .peoprttyAddressQIdthScreenFive {
        flex-direction: column !important;
    }

    .columnWidthSet {
        width: 100% !important;
        margin-bottom: 15px;
    }

    .subTitleRemoveTop {
        margin-top: 10px !important;
    }
}

/* 375 */
@media (max-width: 424px) {
    .cancelInvoice_collectPayment_mail_btn {
        gap: 8px !important;
        flex-direction: column;
    }

    .buttonGroupthree {
        gap: 8px;
    }

    .heading-three {
        font-size: 16px !important;
    }

    .invoicePaidGap {
        font-size: 11px !important;
        padding: 4px 6px !important;
    }

    .contractDetailType {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    .Quote-details {
        padding: 5px !important;
    }
}

/* 320 */
@media (max-width: 374px) {
    .incoiceNumber_auto {
        gap: 10px !important;
        flex-direction: column !important;
    }

    .invoicePaidGap {
        gap: 5px !important;
        margin: 5px 0 !important;
        font-size: 11px !important;
        padding: 4px 6px !important;
    }

    .invoicrNUmberAndImg {
        flex-direction: column !important;
        margin-right: auto !important;
        gap: 10px;
    }

    .heading-three {
        font-size: 16px !important;
    }

    .contractDetailType {
        font-size: 10px !important;
        padding: 3px 6px !important;
        margin: 5px 0 !important;
    }

    .buttonGroupthree {
        gap: 8px;
    }

    .cancelInvoice_collectPayment_mail_btn {
        gap: 8px !important;
    }

    .nevigatePayment {
        width: 40px !important;
        height: 35px !important;
        padding: 4px !important;
    }
}

/* 280 */
@media (max-width: 319px) {
    .invoiceMainSubjectNav {
        margin-bottom: 0px !important;
    }

    .heading-three {
        font-size: 14px !important;
    }

    .invoicePaidGap {
        font-size: 10px !important;
        padding: 3px 5px !important;
    }

    .contractDetailType {
        font-size: 9px !important;
        padding: 3px 5px !important;
    }

    .buttonGroupthree {
        gap: 6px;
    }

    .cancelInvoice_collectPayment_mail_btn {
        gap: 6px !important;
    }

    .nevigatePayment {
        width: 35px !important;
        height: 30px !important;
        padding: 3px !important;
    }
}

/* Additional responsive styles for dialog and other elements */
@media (max-width: 991px) {
    .MuiDialog-paper {
        margin: 10px !important;
        max-height: calc(100% - 20px) !important;
    }

    .MuiDialogContent-root {
        padding: 10px !important;
    }

    .MuiDialogActions-root {
        padding: 10px !important;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .MuiDialog-paper {
        margin: 5px !important;
        max-height: calc(100% - 10px) !important;
    }

    iframe {
        min-height: 300px !important;
        height: auto !important;
    }
}

/* Responsive styles for cost summary */
@media (max-width: 575px) {
    .contc {
        padding: 10px !important;
    }

    .bold-text {
        font-size: 16px !important;
    }
}

@media (max-width: 479px) {
    .contc {
        padding: 8px !important;
    }

    .bold-text {
        font-size: 14px !important;
    }
}

/* Responsive styles for signature requests */
@media (max-width: 767px) {
    .signature-request-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .signature-request-actions {
        width: 100% !important;
        margin-top: 10px;
    }
}

/* Responsive styles for cards */
@media (max-width: 575px) {
    .Card {
        margin: 10px 0 !important;
        padding: 15px !important;
    }

    .CardHeader {
        padding: 10px 0 !important;
        font-size: 14px !important;
    }

    .CardContent {
        padding: 10px 0 !important;
    }
}

/* Responsive styles for tables */
@media (max-width: 767px) {
    .invoiceDetailLeft {
        font-size: 13px !important;
    }

    .invoiceDetailLeft .MuiTableCell-root {
        padding: 8px 4px !important;
        font-size: 13px !important;
    }
}

/* Responsive styles for internal notes */
@media (max-width: 575px) {
    .internal-notes {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* Responsive styles for activity timeline */
@media (max-width: 767px) {
    .activity-timeline {
        padding: 10px !important;
    }
}
.account-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

.account-container.donor-mode {
  --bg-blue-color: var(--donor-sidebar);
  --bg-orange-color: var(--donor-header);
}

.account-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--bg-blue-color) !important;
  margin-bottom: 8px !important;
  font-family: var(--font-body), "Segoe UI", sans-serif;
}

.account-subtitle {
  font-size: 14px;
  color: var(--bg-blue-color);
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 0;
}

.account-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.account-top-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.account-bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.account-overview-card,
.billing-details-card,
.payment-history-card,
.cancel-account-card {
  background: var(--bg-white-color);
  border: 1px solid rgba(6, 49, 100, 0.15);
  border-radius: 8px;
  padding: 30px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

.card-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 15px;
}

.card-title-section {
  flex: 1 1;
}

.card-title-modern {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--bg-blue-color) !important;
  margin-bottom: 4px !important;
}

.card-subtitle {
  font-size: 13px;
  color: var(--bg-blue-color);
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 0;
}

.modern-action-btn {
  background: var(--bg-blue-color) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: white !important;
}

.overview-data-section {
  background: var(--bg-white-color);
  border-radius: 6px;
  border: 1px solid rgba(6, 49, 100, 0.1);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.plan-table-container {
  overflow-x: auto;
  border-radius: 6px;
  background: var(--bg-white-color);
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.plan-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--bg-white-color);
  table-layout: auto;
}

.plan-details-table thead {
  background: var(--bg-blue-color);
  color: white;
}

.plan-details-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

.plan-details-table tbody tr {
  border-bottom: 1px solid rgba(6, 49, 100, 0.1);
}

.plan-details-table tbody tr:last-child {
  border-bottom: none;
}

.plan-details-table td {
  padding: 12px 16px;
  vertical-align: middle;
  border: none;
}

.plan-date {
  font-size: 14px;
  color: var(--bg-blue-color);
  font-weight: 500;
}

.plan-status-cell {
  text-align: start;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.status-badge.active {
  background: var(--bg-green-color);
  color: white;
}

.status-badge.inactive {
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
}

.plan-name {
  font-size: 14px;
  color: var(--bg-blue-color);
  font-weight: 500;
  text-align: start;
}

.no-data-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--bg-blue-color);
  opacity: 0.6;
}

.no-data-icon {
  margin-bottom: 12px;
}

.no-data-icon svg {
  width: 48px;
  height: 48px;
  color: var(--bg-blue-color);
  opacity: 0.3;
}

.no-data-text {
  font-size: 14px;
  font-weight: 500;
}

.billing-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.payment-cards-container {
  background: var(--bg-white-color);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(6, 49, 100, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.payment-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(6, 49, 100, 0.1);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.payment-card-row:last-child {
  border-bottom: none;
}

.payment-card-row.selected {
  background: rgba(6, 49, 100, 0.05);
  border-radius: 6px;
  padding: 12px;
  border: 1px solid var(--bg-blue-color);
}

.card-radio-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-card-radio {
  width: 20px;
  height: 20px;
  accent-color: var(--bg-blue-color);
  cursor: pointer;
}

.card-logo-container {
  width: 48px;
  height: 48px;
  background: var(--bg-white-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(6, 49, 100, 0.1);
}

.card-logo-container img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.card-details-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.card-number-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--bg-blue-color);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-expiry-text {
  font-size: 14px;
  color: var(--bg-blue-color);
  opacity: 0.7;
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-delete-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-card-btn {
  width: 36px;
  height: 36px;
  background: #FFEBE3;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(212, 148, 58, 0.2);
}

.delete-card-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(2000%) hue-rotate(350deg) brightness(0.9) contrast(1.2);
}

.no-card-state {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--bg-white-color);
  border: 1px dashed rgba(6, 49, 100, 0.2);
  border-radius: 6px;
  text-align: left;
}

.no-card-icon {
  width: 64px;
  height: 64px;
  background: rgba(6, 49, 100, 0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(6, 49, 100, 0.1);
}

.no-card-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  opacity: 0.6;
}

.no-card-content {
  flex: 1 1;
}

.no-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--bg-blue-color);
  margin-bottom: 4px;
}

.no-card-subtitle {
  font-size: 13px;
  color: var(--bg-blue-color);
  opacity: 0.7;
  line-height: 1.4;
}

.billing-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(6, 49, 100, 0.1);
}

.choose-plan-btn,
.add-card-btn {
  flex: 1 1;
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
}

.add-card-btn {
  background: var(--bg-blue-color) !important;
  color: white !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.add-card-btn svg {
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
}

.add-card-btn svg path {
  stroke: white !important;
  stroke-width: 2 !important;
}

.add-card-btn:hover {
  background: var(--bg-blue-color) !important;
  opacity: 0.9 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Donor mode hover styles - preserve donor color */
.account-container.donor-mode .add-card-btn.bg-donor-color:hover {
  background: var(--bg-donor-color) !important;
  opacity: 0.9 !important;
  border-color: var(--bg-donor-color) !important;
  transform: none !important;
  box-shadow: none !important;
}

.account-container.donor-mode .add-card-btn.bg-donor-color {
  background: var(--bg-donor-color) !important;
  border-color: var(--bg-donor-color) !important;
}

.account-container.donor-mode .add-card-btn.bg-donor-color:focus,
.account-container.donor-mode .add-card-btn.bg-donor-color:active,
.account-container.donor-mode .add-card-btn.bg-donor-color:focus-visible {
  background: var(--bg-donor-color) !important;
  border-color: var(--bg-donor-color) !important;
  opacity: 0.9 !important;
  transform: none !important;
  box-shadow: none !important;
}

.trial-state {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--bg-white-color);
  border-radius: 6px;
  margin-top: 10px;
  border: 1px solid rgba(6, 49, 100, 0.1);
}

.trial-icon {
  width: 64px;
  height: 64px;
  background: var(--bg-blue-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trial-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.trial-content {
  flex: 1 1;
}

.trial-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--bg-blue-color);
  margin-bottom: 4px;
}

.trial-subtitle {
  font-size: 13px;
  color: var(--bg-blue-color);
  opacity: 0.7;
  line-height: 1.5;
}

.payment-details {
  margin-top: 10px;
}

.payment-item {
  background: var(--bg-white-color);
  border-radius: 6px;
  padding: 16px;
  border: 1px solid rgba(6, 49, 100, 0.1);
}

.payment-details {
  width: 100%;
  overflow-x: hidden;
  min-width: 0;
}

.payment-header {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(6, 49, 100, 0.15);
  min-width: 0;
}

.header-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--bg-blue-color);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.header-label:nth-child(1) {
  text-align: left;
  padding-left: 4px;
}

.header-label:nth-child(2) {
  text-align: left;
}

.header-label:nth-child(3) {
  text-align: right;
  padding-right: 4px;
}

.payment-info {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(6, 49, 100, 0.08);
  transition: background-color 0.2s ease;
  min-width: 0;
}

.payment-info:last-child {
  border-bottom: none;
}

.payment-info:hover {
  background-color: rgba(6, 49, 100, 0.02);
  border-radius: 4px;
  margin: 0 -8px;
  padding: 14px 8px;
}

.transaction-id,
.plan-name,
.plan-amount {
  font-size: 14px;
  color: var(--bg-blue-color);
  font-weight: 500;
  line-height: 1.5;
}

.transaction-id {
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--bg-blue-color);
  opacity: 0.9;
  padding-left: 4px;
  min-width: 0;
  overflow: hidden;
}

.plan-name {
  text-align: left;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.plan-name .text-blue-color {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.plan-amount {
  text-align: right;
  color: #10b981;
  font-weight: 600;
  font-size: 15px;
  padding-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.trial-cancel-info {
  padding: 16px;
  font-size: 13px;
  color: var(--bg-blue-color);
  opacity: 0.7;
  text-align: center;
  background: var(--bg-white-color);
  border-radius: 6px;
  margin-top: 10px;
  border: 1px solid rgba(6, 49, 100, 0.1);
}

.account-details {
  margin-top: 10px;
}

.account-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-white-color);
  border-radius: 6px;
  border: 1px solid rgba(6, 49, 100, 0.1);
}

.info-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--bg-blue-color);
  opacity: 0.7;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-blue-color);
}

@media (max-width: 1200px) {
  .account-top-section,
  .account-bottom-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .account-container {
    padding: 15px;
    overflow-x: hidden;
  }
  
  .account-title {
    font-size: 24px !important;
  }
  
  .account-overview-card,
  .billing-details-card,
  .payment-history-card,
  .cancel-account-card {
    padding: 20px;
    overflow: hidden;
  }
  
  .card-header-modern {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .plan-table-container {
    overflow-x: auto;
    margin: 0 -10px;
    padding: 0 10px;
  }

  .payment-details {
    overflow-x: hidden;
  }

  .payment-header,
  .payment-info {
    grid-template-columns: 1.8fr 2fr 1fr;
    gap: 12px;
    min-width: 0;
  }

  .payment-info {
    padding: 12px 0;
  }

  .transaction-id {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .plan-name {
    font-size: 13px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
  }

  .plan-amount {
    font-size: 14px;
    white-space: nowrap;
  }
  
  .plan-details-table {
    min-width: 300px;
  }
  
  .plan-details-table th,
  .plan-details-table td {
    padding: 10px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  
  .payment-header,
  .payment-info {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr;
    grid-gap: 12px;
    gap: 12px;
  }

  .payment-header {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  .payment-info {
    padding: 12px 0;
  }

  .header-label {
    font-size: 11px;
    letter-spacing: 0.5px;
  }

  .transaction-id {
    font-size: 12px;
    word-break: break-word;
  }

  .plan-name {
    font-size: 13px;
    word-break: break-word;
  }

  .plan-amount {
    font-size: 13px;
    word-break: break-word;
  }
  
  .billing-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .no-card-state,
  .trial-state {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .payment-cards-container {
    padding: 12px;
    margin: 0;
    width: 100%;
  }
  
  .payment-card-row {
    flex-wrap: nowrap;
    gap: 10px;
  }
  
  .card-details-container {
    min-width: 0;
    flex: 1 1;
  }
  
  .card-number-text,
  .card-expiry-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .account-container {
    padding: 10px;
  }
  
  .account-title {
    font-size: 20px !important;
  }
  
  .account-subtitle {
    font-size: 13px;
  }
  
  .card-title-modern {
    font-size: 16px !important;
  }
  
  .card-subtitle {
    font-size: 12px;
  }
  
  .account-overview-card,
  .billing-details-card,
  .payment-history-card,
  .cancel-account-card {
    padding: 15px;
  }
  
  .plan-table-container {
    margin: 0 -5px;
    padding: 0 5px;
  }
  
  .plan-details-table th,
  .plan-details-table td {
    padding: 8px 10px;
    font-size: 11px;
  }
  
  .status-badge {
    padding: 4px 8px;
    font-size: 10px;
  }
  
  .payment-cards-container {
    padding: 10px;
  }
  
  .payment-card-row {
    gap: 8px;
    padding: 10px 0;
  }
  
  .card-radio-container {
    flex-shrink: 0;
  }
  
  .payment-card-radio {
    width: 16px;
    height: 16px;
  }
  
  .card-logo-container {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  
  .card-number-text {
    font-size: 13px;
  }
  
  .card-expiry-text {
    font-size: 11px;
  }
  
  .delete-card-btn {
    width: 30px;
    height: 30px;
  }
  
  .delete-card-btn img {
    width: 14px;
    height: 14px;
  }
  
  .billing-actions {
    margin-top: 10px;
    padding-top: 10px;
  }
  
  .choose-plan-btn,
  .add-card-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  .add-card-btn {
    width: 100% !important;
  }
  
  .modern-action-btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  
  .no-card-icon {
    width: 50px;
    height: 50px;
  }
  
  .no-card-title {
    font-size: 14px;
  }
  
  .no-card-subtitle {
    font-size: 12px;
  }
  
  .trial-icon {
    width: 50px;
    height: 50px;
  }
  
  .trial-title {
    font-size: 14px !important;
  }
  
  .trial-subtitle {
    font-size: 12px !important;
  }
  
  .payment-item {
    padding: 10px;
    overflow-x: auto;
  }
  
  .payment-header,
  .payment-info {
    grid-template-columns: 2fr 1.2fr 1fr;
    gap: 6px;
  }
  
  .header-label {
    font-size: 10px;
    padding: 6px 2px;
    letter-spacing: 0.3px;
  }
  
  .transaction-id,
  .plan-name,
  .plan-amount {
    font-size: 11px;
    padding: 2px;
  }
  
  .info-item {
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-label {
    font-size: 12px;
  }
  
  .info-value {
    font-size: 13px;
  }
}

/* Legacy styles for compatibility */
.cardViewPlan {
  border: none;
}

.full-sentence {
  overflow: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.paymentHistoryWidthSet {
  width: 50% !important;
}

.cancelAccountWidth {
  width: 49% !important;
}

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

@media (min-width: 768px) {
  .text-md-right {
    text-align: right;
  }
}

.accounts input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--bg-blue-color);
}

.accounts input[type="radio"]:checked {
  background-color: var(--bg-blue-color);
  border-color: var(--bg-blue-color);
}

@media (max-width: 1449px) {
  .billingAndDetail {
    flex-direction: column;
  }
  
  .accountBillingCardDetail {
    width: 100% !important;
  }
  
  .billingDetailCardc {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 1439px) {
  .widthNoneReponse {
    width: 100% !important;
  }
}

@media (max-width: 991px) {
  .paymentHistoryOverflow {
    overflow-x: hidden !important;
  }
}

@media (max-width: 767px) {
  .cancelBtnAccout {
    margin-top: 20px !important;
  }
}

@media (max-width: 424px) {
  .cardOverviewViewplan {
    flex-direction: column !important;
  }
  
  .cardViewPlan {
    padding: 7px;
    margin-left: auto;
    width: 50%;
  }
  
  .accountOverviewHead {
    font-size: 17px !important;
  }
  
  .buttonResponsiveHere {
    gap: 10px !important;
  }
  
  .CancelAccInFO {
    flex-direction: column !important;
  }
}

@media (max-width: 374px) {
  .accountInformationBtn {
    width: 100% !important;
  }
}

/* Extra small devices (very small phones) */
@media (max-width: 320px) {
  .account-container {
    padding: 8px;
  }
  
  .account-title {
    font-size: 18px !important;
  }
  
  .card-title-modern {
    font-size: 14px !important;
  }
  
  .account-overview-card,
  .billing-details-card,
  .payment-history-card,
  .cancel-account-card {
    padding: 10px;
  }
  
  .plan-details-table th,
  .plan-details-table td {
    padding: 6px 8px;
    font-size: 10px;
  }
  
  .payment-item {
    padding: 8px;
  }
  
  .payment-details {
    overflow-x: hidden;
  }

  .payment-header,
  .payment-info {
    grid-template-columns: 1.5fr 1.5fr 1fr;
    gap: 8px;
    min-width: 0;
  }

  .payment-header {
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  .payment-info {
    padding: 10px 0;
  }

  .header-label {
    font-size: 10px;
    letter-spacing: 0.3px;
  }

  .transaction-id {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .plan-name {
    font-size: 11px;
    overflow: hidden;
  }

  .plan-name .text-blue-color {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .plan-amount {
    font-size: 11px;
    white-space: nowrap;
  }

  .payment-info:hover {
    margin: 0 -4px;
    padding: 10px 4px;
  }
  
  .payment-card-row {
    gap: 6px;
  }
  
  .card-logo-container {
    width: 32px;
    height: 32px;
  }
  
  .card-number-text {
    font-size: 12px;
  }
  
  .card-expiry-text {
    font-size: 10px;
  }
  
  .delete-card-btn {
    width: 28px;
    height: 28px;
  }
  
  .modern-action-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* Dialog paper: stable class from index.jsx (avoid emotion hash selectors) */
.new_confi.MuiDialog-paper {
    width: 100% !important;
    max-width: 1200px !important;
}
.host-mail-port {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35rem;
    row-gap: 0.15rem;
    margin-bottom: 10px;
}

.host-mail-port:last-child {
    margin-bottom: 0;
}

/* Same baseline / line box as label; strip margins that shift values down */
.host-mail-port .card-title,
.host-mail-port .MuiTypography-root {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.45;
    font-size: 14px;
}

/* Mail Dialog Form Styles */
.mail-form-group {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.mail-form-label {
    font-size: 16px;
    font-weight: 600;
    color: #0f2b46;
    margin-bottom: 8px;
    display: block;
    line-height: 1.2;
    height: 19.2px;
}

.mail-modal-main {
    width: 100%;
}

.mail-modal-main .MuiGrid-item {
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Ensure all input fields have EXACT same size and alignment */
.mail-form-group .MuiTextField-root {
    width: 100% !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.mail-form-group .MuiAutocomplete-root {
    width: 100% !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.mail-form-group .MuiAutocomplete-root .MuiTextField-root {
    width: 100% !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Remove ALL margins from dropdown input */
.mail-form-group .MuiAutocomplete-root .MuiTextField-root.mb-3,
.mail-form-group .mb-3,
.mail-form-group .MuiAutocomplete-root .mb-3,
.mail-form-group .m-0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.mail-dropdown-input {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.mail-dropdown-input.mb-3 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Ensure consistent spacing for helper text */
.mail-form-group .MuiFormHelperText-root {
    margin-top: 4px;
    margin-left: 0;
    margin-right: 0;
    min-height: 20px;
}

/* EXACT height for all input fields - must be identical */
.mail-form-group .MuiOutlinedInput-root {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    box-sizing: border-box !important;
}

.mail-form-group .MuiInputBase-root {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    box-sizing: border-box !important;
}

.mail-form-group .MuiAutocomplete-root .MuiOutlinedInput-root {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    box-sizing: border-box !important;
}

.mail-form-group .MuiAutocomplete-root .MuiInputBase-root {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    box-sizing: border-box !important;
}

/* Ensure TextField root has exact height */
.mail-form-group .MuiTextField-root .MuiOutlinedInput-root {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
}

.mail-form-group .MuiTextField-root .MuiInputBase-root {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
}

/* Ensure input padding is consistent */
.mail-form-group .MuiInputBase-input {
    padding: 16.5px 14px !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.mail-form-group .MuiAutocomplete-input {
    padding: 16.5px 14px !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.mail-form-group .MuiInputBase-inputAdornedEnd {
    padding-right: 14px !important;
}

/* Ensure all fields have same border and styling */
.mail-form-group .MuiOutlinedInput-root fieldset {
    border-width: 1px !important;
}

/* Ensure labels and inputs align at the top */
.mail-form-group {
    align-items: flex-start;
}

/* Perfect alignment for form groups in the same row */
.mail-modal-main .MuiGrid-item {
    align-items: flex-start;
}

.mail-modal-main .MuiGrid-item:first-child .mail-form-group,
.mail-modal-main .MuiGrid-item:last-child .mail-form-group {
    margin-top: 0;
}

/* Ensure Grid container aligns items at the top */
.mail-modal-main.MuiGrid-container {
    align-items: flex-start;
}

/* Make sure form groups have identical structure */
.mail-form-group > * {
    width: 100%;
}

/* Ensure consistent spacing between label and input */
.mail-form-group .mail-form-label + * {
    margin-top: 0;
}
/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1127px) {
    .configuration-box{
        flex-direction: column !important;
    }
}

/* 992 */
@media (max-width: 1279px) {
    .mail-card {
        width: 100% !important;
    }

    .mail-modal-main {
        flex-direction: column;
    }

    .mail-modal-main .MuiGrid-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .mail-form-group {
        width: 100%;
    }
}

/* 768 */
@media (max-width: 991px) {
    .mail-section {
        margin-bottom: 20px !important;
    }

    .formgroups {
        margin-bottom: 18px !important;
    }
    .new_confi.MuiDialog-paper {
        width: 100% !important;
    }
}

/* 576 */
@media (max-width: 767px) {
    .mail-form-group {
        margin-bottom: 16px;
    }
    
    .mail-form-label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .mail-card {
        width: 100% !important;
    }
    
    .mail-modal-main .MuiGrid-item {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* 525 */
@media (max-width: 575px) {
    .configuration-box{
        padding-left: 13px !important;
        padding-right: 0px !important;
    }
    .mail-card {
        width: 97% !important;
    }

}

/* 480 */
@media (max-width: 524px) {
    .mail-header {
        flex-direction: column;
        align-items: start;
    }

    .mail-header p {
        margin-bottom: 10px !important;
    }
}

/* 425 */
@media (max-width: 479px) {
    .cancel-email-btn{
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 12px;
        padding: 12px 16px !important;
    }
    .calcel-email{
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }
    .email-blue-button{
        width: 100% !important;
    }
    .email-blue{
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .email-blue > div{
        width: 100% !important;
    }
    .email-blue .email-blue-button{
        width: 100% !important;
    }
    .configurationAddMail{
        width: 100%  !important;
    }
    
    .mail-form-group {
        margin-bottom: 20px;
    }
}

/* 320 */
@media (max-width: 374px) {
    .config-head{
        font-size: 14px;
    }
    .edit-icon{
        height: 13px !important;
    }
    
    .mail-form-label {
        font-size: 13px;
    }
    
    .mail-form-group {
        margin-bottom: 16px;
    }
    
    .mail-modal-main .MuiGrid-item {
        padding-left: 4px;
        padding-right: 4px;
    }
    
    .cancel-email-btn{
        flex-direction: column;
        padding: 8px 12px !important;
    }
    .calcel-email{
        margin-top: 10px !important;
        width: 100%;
    }
    
    .email-blue-button{
        font-size: 14px;
        padding: 8px 16px;
        width: 100% !important;
    }
    .email-blue .email-blue-button{
        width: 100% !important;
    }
}

/* 280 */
@media (max-width: 319px) {

}



.password-input-container {
    position: relative;
    width: 100%;
}

.password-toggle-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    color: #007bff;
    font-size: 18px;
}

.password-input-container input[type="password"] {
    padding-right: 40px;
}



/* Support Settings Styles */
.support-settings-container {
  padding: 24px;
}

/* Responsive padding for container */
.support-settings-wrapper {
  padding: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .support-settings-wrapper {
    padding: 16px;
  }
}

@media (min-width: 960px) {
  .support-settings-wrapper {
    padding: 24px;
  }
}

/* Responsive header padding */
.support-settings-header {
  padding: 12px 16px !important;
}

@media (min-width: 600px) {
  .support-settings-header {
    padding: 16px 20px !important;
  }
}

@media (min-width: 960px) {
  .support-settings-header {
    padding: 20px 24px !important;
  }
}

/* Responsive body padding */
.support-settings-body {
  padding: 16px !important;
}

@media (min-width: 600px) {
  .support-settings-body {
    padding: 20px !important;
  }
}

@media (min-width: 960px) {
  .support-settings-body {
    padding: 24px !important;
  }
}

/* Responsive button container */
.support-settings-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

@media (min-width: 600px) {
  .support-settings-buttons {
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
  }
}

/* Responsive button width */
.support-settings-button {
  width: 100%;
}

@media (min-width: 600px) {
  .support-settings-button {
    width: auto;
  }
}

/* Responsive title font size */
.support-settings-title {
  font-size: 16px;
}

@media (min-width: 600px) {
  .support-settings-title {
    font-size: 18px;
  }
}

@media (min-width: 960px) {
  .support-settings-title {
    font-size: 20px;
  }
}


/* Mobile summary: type badge aligns with primary text (not centered) */
.server-logs-jobber-table .jobber-mobile-card__status {
  justify-content: flex-start;
  align-items: flex-start;
}

.server-logs-jobber-table .jobber-mobile-card__status .server-logs-type-cell {
  justify-content: flex-start !important;
}

.server-logs-jobber-table .jobber-mobile-card__primary .server-logs-mobile-card-primary {
  min-width: 0;
  width: 100%;
  font-weight: 400;
}

/* Expanded detail rows + action grid (≤775px Jobber cards) */
@media (max-width: 775px) {
  .server-logs-jobber-table .jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .server-logs-jobber-table .jobber-mobile-card__collapse-inner .jobber-mobile-card__actions .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

.server-logs-jobber-table .jobber-mobile-card__collapse-inner .server-logs-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.server-logs-jobber-table .jobber-mobile-card__collapse-inner .server-logs-mobile-actions.customer-list-actions-mobile .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
  .server-logs-jobber-table .jobber-mobile-card__collapse-inner .server-logs-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .server-logs-jobber-table .jobber-mobile-card__collapse-inner .server-logs-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

/**
 * Customer Contracts — mobile Jobber card: pastel View in collapse Actions row only.
 * Actions column hidden on desktop (≥776px); default navy "View Details" bar is off.
 */
.customer-contract-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-contract-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.customer-contract-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-contract-mobile-actions.customer-list-actions-mobile
  .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 775px) {
  .customer-contract-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .jobber-mobile-card__actions
    .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

@media (max-width: 400px) {
  .customer-contract-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-contract-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .customer-contract-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-contract-mobile-actions.customer-list-actions-mobile
    .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

@media (min-width: 776px) {
  .customer-contract-jobber-wrap .jobber-table-v2 thead tr th:last-child,
  .customer-contract-jobber-wrap .jobber-table-v2 tbody tr.jobber-table-v2__row > td:last-child {
    display: none !important;
  }
}

/* 1680 */
@media (max-width: 1700px) {}

.MinwidthPersantage {
    min-width: 100% !important;
}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {
    .scrollDetailHere {
        min-width: 600px !important;
    }

    .overflowWidth {
        overflow-x: auto !important;
    }
}

.statusHead {
    background-color: #0f2b46 !important;
    color: white !important;
}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 - vertical tabs on responsive (like Customer Detail) */
@media (max-width: 991px) {
  .customer-contract-tabs-wrapper .MuiTabs-flexContainer {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
  .customer-contract-tabs-wrapper .MuiTab-root {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  .customer-contract-tabs-wrapper .MuiTab-root:last-of-type {
    border-bottom: none !important;
  }
  .customer-contract-tabs-wrapper .MuiTabs-indicator {
    display: none !important;
  }
  .customer-contract-tabs-wrapper .MuiTab-root.Mui-selected {
    border-bottom: 2px solid var(--amber) !important;
    background-color: rgba(212, 148, 58, 0.06) !important;
  }
  .customer-contract-tabs-wrapper .MuiTabs-scrollButtons {
    display: none !important;
  }
}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
    .customerContractDetail {
        flex-direction: column;
    }

    .customerContractNumber {
        margin-right: auto;
    }

    .download-sec {
        flex-direction: column;
        gap: 6px !important;

    }
}
.MuiTabs-flexContainer{
    justify-content: center !important;
}
/* 280 */
@media (max-width: 319px) {}

.MuiTabs-scrollable {
    overflow-x: auto !important;
    scrollbar-width: none;
    /* hide scrollbar for Firefox */
}

.MuiTabs-scrollable::-webkit-scrollbar {
    display: none;
    /* hide scrollbar for Chrome/Safari */
}
.invoice-header {
    color: #0f2b46;
    font-weight: 700;
    font-size: 30px;
  }
  .invoiceCustomerPayment{
    margin-top: 20px !important;
    background-color: #0f2b46 !important;
    color: white !important;
  }
  .invoice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
  }
  .widthGivenHere{
    width: 100% !important;
  }
  .invoice-status-section {
    display: flex;
    flex-direction: column;
  }
  
  .invoice-status-header {
    text-align: center;
    color: #0f2b46;
    font-weight: bold;
    background-color: #F8D5B9;
    border: 1px solid #0f2b46;
    border-radius: 5px;
    padding: 2px;
    margin-bottom: 10px;
    width: 30%;
  }
  .invoice-status-header-app {
    text-align: center;
    color: #0f2b46;
    font-weight: bold;
    background-color: #F8D5B9;
    border: 1px solid #0f2b46;
    border-radius: 5px;
    padding: 2px;
    margin-bottom: 10px;
    width: 15%;
  }
  
  .invoice-status-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .invoice-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .invoice-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  
  .invoice-card-header {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .invoice-card-text {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #0f2b46;
  }
  
  .invoice-icon {
    margin-right: 12px;
    color: #0f2b46;
  }
  
  .invoice-card-footer {
    display: flex;
    justify-content: end;
    border-top: 1px solid #0f2b46;
    gap: 30px;
  }
.invoice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.invoice-status-header {
  width: 30%;
}

.invoice-status-cards {
  display: flex;
  flex-direction: column;
}

/* Quote-style cards on Invoice list - responsive */
.quote-card {
  max-width: 100%;
}
@media (max-width: 991px) {
  .quote-card { border-radius: 12px; }
  .quote-card-header { padding: 1rem 1rem !important; }
  .quote-card-body { padding: 1rem 1rem !important; }
}
@media (max-width: 575px) {
  .quote-card-header { padding: 0.75rem 1rem !important; }
  .quote-card-body { padding: 0.75rem 1rem !important; }
}

/* Vertical tabs on responsive (like Customer Detail) */
@media (max-width: 991px) {
  .customer-invoice-tabs-wrapper .MuiTabs-flexContainer {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
  .customer-invoice-tabs-wrapper .MuiTab-root {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  .customer-invoice-tabs-wrapper .MuiTab-root:last-of-type {
    border-bottom: none !important;
  }
  .customer-invoice-tabs-wrapper .MuiTabs-indicator {
    display: none !important;
  }
  .customer-invoice-tabs-wrapper .MuiTab-root.Mui-selected {
    border-bottom: 2px solid var(--amber) !important;
    background-color: rgba(212, 148, 58, 0.06) !important;
  }
}

@media (max-width: 768px) {
  .invoice-grid {
    grid-template-columns: 1fr;
  }
  
  .invoice-status-header {
    width: 100%;
  }

  .invoice-card {
    margin: 10px;
  }

  .invoice-card-header {
    font-size: 18px;
    padding: 12px;
  }

  .invoice-card-text {
    font-size: 14px;
  }
}
  
/* Customer invoice pay page — full-width sections, no horizontal clip */
.payment-page-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.materials-labor-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.contc {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Invoice details: back + Download PDF — stack on narrow screens, full-width download */
.customer-invoice-actions-row .customer-invoice-download-btn {
  white-space: normal;
  word-break: break-word;
}
@media (min-width: 576px) {
  .customer-invoice-actions-row .customer-invoice-download-btn {
    white-space: nowrap;
    width: auto !important;
    max-width: 100%;
  }
  .customer-invoice-actions-row > div:last-child {
    width: auto !important;
    flex: 0 1 auto !important;
    max-width: none !important;
  }
}

@media (max-width: 480px) {
  .invoice-header {
    font-size: 24px;
  }
  
  .invoice-status-header {
    font-size: 16px;
    padding: 5px;
  }
  
  .invoice-card-header {
    font-size: 16px;
    padding: 10px;
  }
  
  .invoice-card-text {
    font-size: 13px;
  }
  
  .invoice-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/**
 * Customer Invoices — mobile Jobber card: pastel View in collapse Actions row only.
 * Actions column hidden on desktop (≥776px); default navy "View Details" bar is off.
 */
.customer-invoice-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-invoice-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.customer-invoice-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-invoice-mobile-actions.customer-list-actions-mobile
  .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 775px) {
  .customer-invoice-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .jobber-mobile-card__actions
    .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

@media (max-width: 400px) {
  .customer-invoice-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-invoice-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .customer-invoice-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-invoice-mobile-actions.customer-list-actions-mobile
    .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

@media (min-width: 776px) {
  .customer-invoice-jobber-wrap .jobber-table-v2 thead tr th:last-child,
  .customer-invoice-jobber-wrap .jobber-table-v2 tbody tr.jobber-table-v2__row > td:last-child {
    display: none !important;
  }
}



.visit-section {
  margin-bottom: 20px;
}

.visit-card-container {
  display: flex;
  flex-direction: column; 
  gap: 10px; 
}

.invoice-card {
  box-shadow: var(--shadow-lg);
}
.appointment-status-section {
  display: flex;
  flex-direction: column;
}

.appointment-status-header {
  text-align: center;
  color: #0f2b46;
  font-weight: bold;
  font-size: inherit;
  background-color: #F8D5B9;
  border: 1px solid #0f2b46;
  border-radius: 5px;
  padding: 2px;
  margin-bottom: 10px;
  width: 30%;
}
.map-icon{
  margin-bottom: auto;
  
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* Quote-style cards on Appointment list - responsive */
.quote-card {
  max-width: 100%;
}
@media (max-width: 991px) {
  .quote-card { border-radius: 12px; }
  .quote-card-header { padding: 1rem 1rem !important; }
  .quote-card-body { padding: 1rem 1rem !important; }
}
@media (max-width: 575px) {
  .quote-card-header { padding: 0.75rem 1rem !important; }
  .quote-card-body { padding: 0.75rem 1rem !important; }
}

/* Vertical tabs on responsive (like Customer Detail) */
@media (max-width: 991px) {
  .customer-appointment-tabs-wrapper .MuiTabs-flexContainer {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
  .customer-appointment-tabs-wrapper .MuiTab-root {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  .customer-appointment-tabs-wrapper .MuiTab-root:last-of-type {
    border-bottom: none !important;
  }
  .customer-appointment-tabs-wrapper .MuiTabs-indicator {
    display: none !important;
  }
  .customer-appointment-tabs-wrapper .MuiTab-root.Mui-selected {
    border-bottom: 2px solid var(--amber) !important;
    background-color: rgba(212, 148, 58, 0.06) !important;
  }
}

/* 768 */
@media (max-width: 991px) {
  .customerAppointmentAppo,.customerAppointmentupco,.customerConfirmAppointment{
    width: 100% !important;
  }
  .customerAppointmentTable{
    font-size: 17px !important;
  }
}

/* 576 */
@media (max-width: 767px) {
  .appoitmentListUpPast{
    flex-direction: column !important;
  }
  .appointment-status-header{
    margin-bottom: 12px !important;
  }
}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {
  .customerAppointmnerConfirmTable{
    font-size: 14px !important;
  }
  .appoinment-on{
    flex-direction: column !important;
  }
  .appoinment-on-date{
    margin-right: auto !important;
  }
  .day-appoinment{
    margin-left: 13% !important;

    margin-right: auto !important;
  }
}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

.appointment-card {
  border: none !important;
  box-shadow: none !important;
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.appointment-card-header {
  border-bottom: none !important;
}

/* Override quote-card hover effects for appointment cards */
.quote-card {
  transition: none !important;
}

.quote-card:hover {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--amber);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d67b33;
}

@media (max-width: 768px) {
  .appointment-card {
    margin: 0.5rem !important;
  }
  
  .MuiTab-root {
    min-width: 100px !important;
    padding: 6px 12px !important;
  }
}

/* Appointments list: wrap contract title / visit — no single-line ellipsis */
.appointments-jobber-table-wrap .jobber-table-v2__td {
  vertical-align: top;
}
.appointments-jobber-table-wrap .jobber-table-v2__td .MuiTypography-root {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/**
 * Customer Appointments — mobile Jobber card: pastel View in collapse Actions row only.
 * Actions column hidden on desktop (≥776px); default navy "View Details" bar is off.
 */
.customer-appointments-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-appt-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.customer-appointments-jobber-wrap
  .jobber-mobile-card__collapse-inner
  .customer-appt-mobile-actions.customer-list-actions-mobile
  .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 775px) {
  .customer-appointments-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .jobber-mobile-card__actions
    .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

@media (max-width: 400px) {
  .customer-appointments-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-appt-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .customer-appointments-jobber-wrap
    .jobber-mobile-card__collapse-inner
    .customer-appt-mobile-actions.customer-list-actions-mobile
    .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

@media (min-width: 776px) {
  .customer-appointments-jobber-wrap .jobber-table-v2 thead tr th:last-child,
  .customer-appointments-jobber-wrap .jobber-table-v2 tbody tr.jobber-table-v2__row > td:last-child {
    display: none !important;
  }
}

/**
 * Today’s Appointments — customer/worker: Actions column is for mobile collapse View only;
 * hidden on wide screens. Pastel View row matches Company mobile actions.
 */
.appointments-jobber-table-wrap.todays-appt-appointments-company-style.todays-appt-hide-actions-col-desktop
  .jobber-mobile-card__collapse-inner
  .todays-appt-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.appointments-jobber-table-wrap.todays-appt-appointments-company-style.todays-appt-hide-actions-col-desktop
  .jobber-mobile-card__collapse-inner
  .todays-appt-mobile-actions.customer-list-actions-mobile
  .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 775px) {
  .appointments-jobber-table-wrap.todays-appt-appointments-company-style.todays-appt-hide-actions-col-desktop
    .jobber-mobile-card__collapse-inner
    .jobber-mobile-card__actions
    .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

@media (max-width: 400px) {
  .appointments-jobber-table-wrap.todays-appt-appointments-company-style.todays-appt-hide-actions-col-desktop
    .jobber-mobile-card__collapse-inner
    .todays-appt-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .appointments-jobber-table-wrap.todays-appt-appointments-company-style.todays-appt-hide-actions-col-desktop
    .jobber-mobile-card__collapse-inner
    .todays-appt-mobile-actions.customer-list-actions-mobile
    .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}

/* Desktop: no Actions column in the table (collapse still has pastel View via JobberTable) */
@media (min-width: 776px) {
  .appointments-jobber-table-wrap.todays-appt-appointments-company-style.todays-appt-hide-actions-col-desktop
    .jobber-table-v2
    thead
    tr
    th:last-child,
  .appointments-jobber-table-wrap.todays-appt-appointments-company-style.todays-appt-hide-actions-col-desktop
    .jobber-table-v2
    tbody
    tr.jobber-table-v2__row
    > td:last-child {
    display: none !important;
  }
}

/* Company admin Today's Appointments: Contract (# · title) column — limit width so Visit isn't pushed across a wide gap */
.appointments-jobber-table-wrap.todays-appt-appointments-company-style:not(
    .todays-appt-hide-actions-col-desktop
  )
  .jobber-table-v2
  thead
  tr
  th:nth-child(2),
.appointments-jobber-table-wrap.todays-appt-appointments-company-style:not(
    .todays-appt-hide-actions-col-desktop
  )
  .jobber-table-v2
  tbody
  tr.jobber-table-v2__row
  > td:nth-child(2) {
  width: 1%;
  max-width: 420px;
  vertical-align: middle;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {
    .modelWidthFive{
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .flexColumnWidth{
        flex-direction: column !important;
        gap: 0px !important;
    }
    .recurrinPaymentAmmounts{
        flex-direction: column !important;
    }
    .amountTotalMOedel{
        padding-left: 0 !important;
    }
    .bottomLeaveup{
        margin-bottom: 0 !important;
    }
    .amountMargin{
        margin-top: 0px !important;
    }
    .paymnet-width{
        width: 100% !important;
    }
    .frequrncy-monthWeek{
        flex-direction:  column !important;
    }
    .remove-left{
        margin-left: 0px !important;
    }
    .padding-leftremove{
        padding-left: 0px !important;
    }
    .textalign-start{
        text-align: start !important;
    }
    .width-with-reponsive{
        width: 100% !important;
    }
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {
    .foterAmountBtm{
        flex-direction: column !important;
        margin-right: auto !important;
        align-items: start !important;
    }
}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {
    .BtnGropupFooter{
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
    }
}

/* 280 */
@media (max-width: 319px) {}

.css-5ona3t-MuiFormControl-root-MuiTextField-root .MuiInputBase-input{
    text-align: left !important;
}

.donation-summary-report .MuiTableCell-root {
  padding: 8px !important;
  font-size: 0.875rem !important;
}

.donation-summary-report .MuiTableCell-head {
  padding: 8px !important;
}

.donation-summary-report .MuiTable-root {
  min-width: 0 !important;
  min-width: initial !important;
  width: 100% !important;
  table-layout: auto !important;
}

.donation-summary-report .MuiTableCell-root[align="right"] {
  text-align: right;
}

.donation-summary-report .campaign-table .MuiTableCell-root {
  white-space: normal;
  min-width: 120px;
}

.donation-summary-report .campaign-table .MuiTableCell-root:nth-child(1) {
  width: 25%;
  min-width: 180px;
}

.donation-summary-report .campaign-table .MuiTableCell-root:nth-child(2) {
  width: 15%;
  min-width: 100px;
}

.donation-summary-report .campaign-table .MuiTableCell-root:nth-child(3) {
  width: 20%;
  min-width: 120px;
}

.donation-summary-report .campaign-table .MuiTableCell-root:nth-child(4) {
  width: 40%;
  min-width: 200px;
}

.donation-summary-report .MuiTableRow-root:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.donation-summary-report .MuiTableCell-alignRight {
  text-align: right;
  padding-right: 16px !important;
}

.donation-summary-report .MuiTableContainer-root {
  overflow-x: auto !important;
  margin: 0;
  padding: 0;
}

/* Mobile responsive styles for Donor Retention Report */
@media (max-width: 768px) {
  .donation-summary-report .MuiTableCell-root {
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
  }

  .donation-summary-report .MuiTableCell-head {
    padding: 12px 8px !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Do not restyle top export bar (.report-ressponsive — uses global grid in reportPageHeaders.css) */
  .donation-summary-report .table-header:not(.report-ressponsive) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  .donation-summary-report .table-header:not(.report-ressponsive) .d-flex {
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .donation-summary-report .table-header:not(.report-ressponsive) .text-white-color {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* Better card spacing on mobile */
  /* .donation-summary-report .border-donor-color {
    margin-bottom: 16px !important;
  } */

  /* Add gap between header card and first report card */
  .donation-summary-report > div:first-child {
    margin-bottom: 20px !important;
  }

  /* Improve table container on mobile */
  .donation-summary-report .MuiTableContainer-root {
    border-radius: 0 0 8px 8px;
  }

  /* Better alignment for right-aligned cells */
  .donation-summary-report .MuiTableCell-root[style*="text-align: right"] {
    text-align: right !important;
    padding-left: 4px !important;
  }

  /* First column better spacing */
  .donation-summary-report .MuiTableCell-root:first-child {
    padding-right: 8px !important;
    font-weight: 500;
  }

  /* Export button on inner section headers only (not top Back + Title + Export row) */
  .donation-summary-report .table-header:not(.report-ressponsive) .dropdown button {
    width: 100%;
    justify-content: center;
    font-size: 0.875rem !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 480px) {
  .donation-summary-report .MuiTableCell-root {
    padding: 8px 6px !important;
    font-size: 0.75rem !important;
  }

  .donation-summary-report .MuiTableCell-head {
    padding: 10px 6px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;  
  }

  .donation-summary-report .table-header:not(.report-ressponsive) {
    padding: 12px !important;
  }

  .donation-summary-report .table-header:not(.report-ressponsive) .text-white-color {
    font-size: 0.9rem !important;
  }

  /* Date picker mobile optimization */
  .donation-summary-report .MuiFormControl-root {
    width: 100% !important;
  }

  .donation-summary-report .MuiStack-root {
    width: 100% !important;
    padding-top: 0 !important;
  }

  /* Date picker labels styling for mobile */
  .donation-summary-report .MuiInputLabel-root {
    color: #0f2b46 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    background-color: transparent !important;
    padding: 0 !important;
  }

  /* When label is shrunk (always on mobile with filled values) */
  .donation-summary-report .MuiInputLabel-shrink {
    color: #0f2b46 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transform: translate(14px, -9px) scale(0.85) !important;
    background-color: white !important;
    padding: 0 6px !important;
  }

  /* Ensure DemoContainer has proper spacing */
  .donation-summary-report .MuiStack-root.MuiDemoContainer-root {
    padding-top: 0 !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
  }

  /* TextField styling */
  .donation-summary-report .MuiTextField-root {
    margin-top: 0 !important;
  }

  /* Input field styling for mobile */
  .donation-summary-report .MuiOutlinedInput-root {
    border-radius: 8px !important;
  }

  .donation-summary-report .MuiOutlinedInput-notchedOutline {
    border-color: #ddd !important;
    border-width: 1.5px !important;
  }

  .donation-summary-report .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: #0f2b46 !important;
  }

  .donation-summary-report .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #0f2b46 !important;
    border-width: 2px !important;
  }

  /* Legend (notch) styling */
  .donation-summary-report .MuiOutlinedInput-notchedOutline legend {
    font-size: 0.85em !important;
  }
}

/* —— Donor portal transaction reports: Jobber v2 data card + white pagination bar (navy active chip) —— */
.donor-report-jobber-data-card.card {
  overflow: hidden;
}

.donor-report-jobber-table-footer.jobber-list-card__footer,
.donor-report-jobber-table-footer {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
}

.donor-report-jobber-table-footer .jobber-pagination-v2__page--active {
  background: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
}

.donor-report-jobber-table-footer .jobber-pagination-v2__summary {
  color: #6b7280 !important;
}

.donor-transaction-report-dropdown {
    background-color: #6bb4ca !important;
    border: none !important;
    color: white !important;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.donor-transaction-report-dropdown:hover,
.donor-transaction-report-dropdown:focus,
.donor-transaction-report-dropdown:active {
    background-color: #7ad0ea !important;
    border: none !important;
    box-shadow: none !important;
}

.donor-transaction-report-dropdown:disabled {
    background-color: #ffc4a3 !important;
    border: none !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.status-success {
    color: #2e7d32;
    background-color: #e8f5e9;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    display: inline-block;
    font-size: 0.875rem;
    text-align: center;
    min-width: 80px;
}

.status-failed {
    color: #d32f2f;
    background-color: #ffebee;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    display: inline-block;
    font-size: 0.875rem;
    text-align: center;
    min-width: 80px;
}

.failed-row {
    background-color: #ffebee !important;
}

.failed-row:hover {
    background-color: #ffcdd2 !important;
}

/* Export dropdown toggle - prevent active state background change */
.export-dropdown-toggle,
.export-dropdown-toggle:active,
.export-dropdown-toggle.active,
.export-dropdown-toggle:focus,
.export-dropdown-toggle:focus-visible,
.export-dropdown-toggle.show,
.export-dropdown-toggle[aria-expanded="true"],
.btn.export-dropdown-toggle:active,
.btn.export-dropdown-toggle:focus,
.btn.export-dropdown-toggle.show,
.btn-secondary.export-dropdown-toggle:active,
.btn-secondary.export-dropdown-toggle:not(:disabled):not(.disabled):active,
.dropdown-toggle.export-dropdown-toggle:active,
.dropdown-toggle.export-dropdown-toggle:focus,
.dropdown-toggle.export-dropdown-toggle.show {
    background-color: white !important;
    background: white !important;
    color: #68B2CB !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    outline: none !important;
}
/* Reports hub: sidebar amber on icon + title + card border only (not description) */
.job-reports-hub .report-icon.bg-orange-color {
  background-color: #d4943a !important;
}

.job-reports-hub .text-orange-color.heading-six {
  color: #d4943a !important;
}

.job-reports-hub .border-orange-color {
  border-color: #d4943a !important;
}

.payment-row {
  background-color: #e8f5e9 !important;
}

.payment-row:hover {
  background-color: #c8e6c9 !important;
}

.charge-row {
  background-color: #ffebee !important;
}

.charge-row:hover {
  background-color: #ffcdd2 !important;
}

.status-success {
  color: #2e7d32;
  background-color: #e8f5e9;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 11px;
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

.status-failed {
  color: #d32f2f;
  background-color: #ffebee;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 11px;
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

/* Export dropdown toggle - prevent active state background change */
.export-dropdown-toggle,
.export-dropdown-toggle:active,
.export-dropdown-toggle.active,
.export-dropdown-toggle:focus,
.export-dropdown-toggle:focus-visible,
.export-dropdown-toggle.show,
.export-dropdown-toggle[aria-expanded="true"],
button.export-dropdown-toggle:active,
button.export-dropdown-toggle:focus,
.btn.export-dropdown-toggle:active,
.btn.export-dropdown-toggle:focus,
.btn.export-dropdown-toggle.show,
.btn-secondary.export-dropdown-toggle:active,
.btn-secondary.export-dropdown-toggle:focus,
.btn-secondary.export-dropdown-toggle:not(:disabled):not(.disabled):active,
.dropdown-toggle.export-dropdown-toggle:active,
.dropdown-toggle.export-dropdown-toggle:focus,
.dropdown-toggle.export-dropdown-toggle.show {
  background-color: white !important;
  background: white !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.export-dropdown-toggle:disabled,
.btn.export-dropdown-toggle:disabled {
  background-color: #f5f5f5 !important;
  color: rgba(37, 99, 235, 0.5) !important;
}

/* General Ledger Export As — same rules as src/Views/Admin/Client/Transaction/style.css (Labor Hours uses these classes only on this page) */
.ledger-button.dropdown-toggle:active,
.ledger-button.dropdown-toggle:focus,
.ledger-button.dropdown-toggle.show,
.ledger-button.dropdown-toggle[aria-expanded="true"],
.btn.ledger-button:active,
.btn.ledger-button:focus,
.btn.ledger-button.show,
.btn-secondary.ledger-button:active,
.btn-secondary.ledger-button:focus,
.btn-secondary.ledger-button:not(:disabled):not(.disabled):active {
  box-shadow: none !important;
  outline: none !important;
}

button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle,
.btn.dropdown-toggle.billing-ledger-export-toggle {
  --bs-btn-bg: transparent !important;
  --bs-btn-color: var(--navy-deep) !important;
  --bs-btn-border-color: transparent !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-hover-color: var(--navy-deep) !important;
  --bs-btn-hover-border-color: transparent !important;
  --bs-btn-active-bg: transparent !important;
  --bs-btn-active-color: var(--navy-deep) !important;
  --bs-btn-active-border-color: transparent !important;
  --bs-btn-focus-shadow-rgb: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--navy-deep) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  max-height: 40px !important;
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  transition: none !important;
  filter: none !important;
}

button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus-visible,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:active,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.active,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.show,
button.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"],
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:focus-visible,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle:active,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.active,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle.show,
.btn.btn-secondary.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"],
.btn.dropdown-toggle.billing-ledger-export-toggle:hover:not(:disabled):not(.disabled),
.btn.dropdown-toggle.billing-ledger-export-toggle:focus,
.btn.dropdown-toggle.billing-ledger-export-toggle:focus-visible,
.btn.dropdown-toggle.billing-ledger-export-toggle:active,
.btn.dropdown-toggle.billing-ledger-export-toggle.active,
.btn.dropdown-toggle.billing-ledger-export-toggle.show,
.btn.dropdown-toggle.billing-ledger-export-toggle[aria-expanded="true"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--navy-deep) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn.dropdown-toggle.billing-ledger-export-toggle.dropdown-toggle::after {
  border-top-color: #2563eb !important;
}

.btn.dropdown-toggle.billing-ledger-export-toggle:disabled,
.btn.dropdown-toggle.billing-ledger-export-toggle.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background-color: transparent !important;
  background: transparent !important;
  color: var(--navy-deep) !important;
}

@media (max-width: 575px) {
  .company-report-detail-page .ledger-button {
    width: 100% !important;
  }
}

/* 575 */
@media (max-width: 575px) {
  .report-ressponsive-date {
    width: 100% !important;
  }
  .report-card {
    margin-bottom: 20px !important;
  }
}
/* 479 */
@media (max-width: 479px) {
  .report-card {
    margin-bottom: 20px !important;
  }
}
/* 375 */
@media (max-width: 374px) {
  .report-card {
    margin-bottom: 30px !important;
  }
}
/* 320 */
@media (max-width: 319px) {
  .report-card {
    margin-bottom: 40px !important;
  }
}

/* Labor Hours — status dropdown: hug trigger width (beats global .searchBarOfTable .dropdown { width:100% }) */
.company-report-detail-page .labor-hours-report-card-toolbar .labor-hours-time-entries-header .dropdown {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.company-report-detail-page .labor-hours-report-card-toolbar .labor-hours-time-entries-header .dropdown-toggle {
  width: auto !important;
  max-width: 100% !important;
}

/* Labor Hours Report — card toolbar (filters + status + export): align on narrow widths */
@media (max-width: 524px) {
  .labor-hours-report-card-toolbar {
    justify-content: flex-end !important;
  }
}

/* Labor Hours Report - responsive table wrapper */
@media (max-width: 775px) {
  /* Mobile: ensure table and cells use full width and auto layout */
  .labor-hours-report-table-wrapper,
  .labor-hours-report-table-wrapper > div,
  .labor-hours-report-table-wrapper > div > div,
  .labor-hours-report-table-wrapper table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }
  
  .labor-hours-report-table-wrapper .MuiTableCell-root {
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 8px 6px !important;
    font-size: 0.75rem !important;
  }
  
  /* Ensure collapse icon column doesn't take extra space */
  .labor-hours-report-table-wrapper .MuiTableCell-root:first-child {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 8px !important;
  }
}
.payment-container {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.payment-form {
  flex-direction: column;
  gap: 15px;
}

.form-group {
  width: 100%;
}

.payment-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  color: #0f2b46;
  background: white;
  transition: all 0.3s ease;
}

.payment-input:focus {
  border-color: #0f2b46;
  outline: none;
  box-shadow: var(--focus-ring-navy-soft);
}

.pay-button {
  width: 100%;
  padding: 12px;
  background-color: #0f2b46;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pay-button:hover {
  background-color: #052548;
}

.error-message {
  color: #B40E3E;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #FFE5E5;
  border-radius: 4px;
  font-size: 14px;
}

/* NMI + Dejavoo field chrome: see components/InputFields/PaymentGatewayFields.css (imported via InputFields.css) */

/* §7 — payment dialog “Search items” (pill + max-width like global search) */
.pos-payment-materials-search {
  max-width: 480px;
  width: 100%;
}
.pos-payment-materials-search .cs-input-shell {
  border-radius: 9999px !important;
}

.css-17y2eah-MuiFormControl-root-MuiTextField-root .MuiInputBase-root{
  border: none !important;
}

/* Export dropdown — legacy white style (skip when using Jobber ghost) */
.export-dropdown-toggle:not(.jobber-btn),
.export-dropdown-toggle:not(.jobber-btn):active,
.export-dropdown-toggle:not(.jobber-btn).active,
.export-dropdown-toggle:not(.jobber-btn):focus,
.export-dropdown-toggle:not(.jobber-btn):focus-visible,
.export-dropdown-toggle:not(.jobber-btn).show,
.export-dropdown-toggle:not(.jobber-btn)[aria-expanded="true"],
.btn.export-dropdown-toggle:not(.jobber-btn):active,
.btn.export-dropdown-toggle:not(.jobber-btn):focus,
.btn.export-dropdown-toggle:not(.jobber-btn).show,
.btn-secondary.export-dropdown-toggle:not(.jobber-btn):active,
.btn-secondary.export-dropdown-toggle:not(.jobber-btn):not(:disabled):not(.disabled):active,
.dropdown-toggle.export-dropdown-toggle:not(.jobber-btn):active,
.dropdown-toggle.export-dropdown-toggle:not(.jobber-btn):focus,
.dropdown-toggle.export-dropdown-toggle:not(.jobber-btn).show {
  background-color: white !important;
  background: white !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.export-dropdown-toggle:not(.jobber-btn):disabled,
.btn.export-dropdown-toggle:not(.jobber-btn):disabled {
  background-color: #e0e0e0 !important;
  color: var(--text-muted) !important;
}

/* Refresh button spin animation */
@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Align dropdown with date pickers */
.customer_searchBar.searchBarOfTable .dropdown .dropdown-toggle {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
}

/*
 * All Transactions — Export As: primary blue #2563eb (overrides jobber-btn--ghost / MuiTable navy-deep !important)
 */
.customer_searchBar.searchBarOfTable .dropdown .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost,
.customer_searchBar.searchBarOfTable .dropdown .export-dropdown-toggle.pos-export-as-primary.dropdown-toggle.jobber-btn.jobber-btn--ghost {
  color: #2563eb !important;
  --bs-btn-color: #2563eb !important;
}
/* No hover/focus/open visual change — same as default */
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost:hover:not(:disabled),
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost:focus:not(:disabled),
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost:focus-visible:not(:disabled),
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost:active:not(:disabled),
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost.show:not(:disabled) {
  color: #2563eb !important;
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  --bs-btn-hover-color: #2563eb !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-active-bg: transparent !important;
  --bs-btn-active-color: #2563eb !important;
}
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary:hover:not(:disabled)
  svg,
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary:focus:not(:disabled)
  svg,
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.show:not(:disabled)
  svg,
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary:hover:not(:disabled)
  .MuiSvgIcon-root,
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary:focus:not(:disabled)
  .MuiSvgIcon-root,
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.show:not(:disabled)
  .MuiSvgIcon-root {
  color: #2563eb !important;
  fill: currentColor !important;
}
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost:disabled,
.customer_searchBar.searchBarOfTable
  .dropdown
  .export-dropdown-toggle.pos-export-as-primary.btn.jobber-btn.jobber-btn--ghost.disabled {
  color: #2563eb !important;
  opacity: 0.55 !important;
}
.customer_searchBar.searchBarOfTable .dropdown .export-dropdown-toggle.pos-export-as-primary svg,
.customer_searchBar.searchBarOfTable .dropdown .export-dropdown-toggle.pos-export-as-primary .MuiSvgIcon-root {
  color: #2563eb !important;
  fill: currentColor !important;
}

/*
 * Admin layout (`Admin.jsx`) nests page content in a 98%-wide inner Grid (`.customerDetail_paid`),
 * which leaves visible side gutters on mobile. Expand the POS shell to the full width of the
 * padded main area without changing other routes.
 */
@media (max-width: 767px) {
  .main-content.invoicePaidSlip .customerDetail_paid .pos-container.MuiGrid-root {
    width: calc(100% / 0.98) !important;
    max-width: calc(100% / 0.98) !important;
    margin-left: calc((100% - 100% / 0.98) / 2) !important;
    margin-right: calc((100% - 100% / 0.98) / 2) !important;
    box-sizing: border-box !important;
  }
}

/* Responsive styles for POS header filters */
@media (max-width: 768px) {
  .customer_searchBar.searchBarOfTable {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* Dropdown full width */
  .customer_searchBar.searchBarOfTable .dropdown {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  .customer_searchBar.searchBarOfTable .dropdown .dropdown-toggle {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  /* Date pickers full width */
  .customer_searchBar.searchBarOfTable .MuiDatePicker-root {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  .customer_searchBar.searchBarOfTable .MuiDatePicker-root .MuiInputBase-root {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  /* Buttons container stays in row */
  .customer_searchBar.searchBarOfTable > .d-flex.gap-2 {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  
  .customer_searchBar.searchBarOfTable .MuiButton-root {
    flex: 0 0 auto !important;
  }
  
  .customer_searchBar.searchBarOfTable .dropdown:last-child {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 480px) {
  .customer_searchBar.searchBarOfTable {
    flex-direction: column !important;
  }
  
  /* All elements full width on mobile */
  .customer_searchBar.searchBarOfTable > * {
    width: 100% !important;
    margin-top: 8px !important;
  }
  
  /* Buttons container also full width */
  .customer_searchBar.searchBarOfTable > .d-flex.gap-2 {
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
  }
  
  .customer_searchBar.searchBarOfTable > .d-flex.gap-2 > * {
    flex: 1 1 auto !important;
    margin-top: 0 !important;
  }
  
  .customer_searchBar.searchBarOfTable .dropdown {
    width: 100% !important;
  }
  
  .customer_searchBar.searchBarOfTable .MuiButton-root {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* Accept Donation — Jobber v2 table cards (match MuiTable / JobberListCard shell) */
.accept-donation-jobber-table-card.card {
  overflow: hidden;
}

/*
 * Pagination on Accept Donation: Jobber navy active chip + gray summary (same as contractor lists).
 * `donorManagerShell={false}` avoids `jobber-pagination-v2--donor`; this block wins if any rule order leaks teal.
 */
.accept-donation-table-pagination .jobber-pagination-v2__page--active {
  background: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: #ffffff !important;
}

.accept-donation-table-pagination .jobber-pagination-v2__summary {
  color: #6b7280 !important;
}
/* Export As button - remove active/focus white background (customers + donors) */
.general-ledger-export-btn:active,
.general-ledger-export-btn:focus,
.general-ledger-export-btn.show,
.general-ledger-export-btn[aria-expanded="true"],
.general-ledger-controls .dropdown-toggle:active,
.general-ledger-controls .dropdown-toggle:focus,
.general-ledger-controls .dropdown-toggle.show,
.general-ledger-controls .dropdown-toggle[aria-expanded="true"],
.general-ledger-controls .btn.dropdown-toggle:active,
.general-ledger-controls .btn.dropdown-toggle:focus,
.general-ledger-controls .btn.dropdown-toggle.show {
  box-shadow: none !important;
  outline: none !important;
}

/* Blue theme - override any .btn.active/.btn.show white/transparent from global CSS */
.general-ledger-export-btn.bg-blue-color:active,
.general-ledger-export-btn.bg-blue-color:focus,
.general-ledger-export-btn.bg-blue-color.focus,
.general-ledger-export-btn.bg-blue-color.show,
.general-ledger-export-btn.bg-blue-color.active,
.general-ledger-export-btn.bg-blue-color[aria-expanded="true"],
.general-ledger-controls .dropdown-toggle.bg-blue-color:active,
.general-ledger-controls .dropdown-toggle.bg-blue-color:focus,
.general-ledger-controls .dropdown-toggle.bg-blue-color.show,
.general-ledger-controls .dropdown-toggle.bg-blue-color[aria-expanded="true"],
.general-ledger-controls .btn.dropdown-toggle.bg-blue-color:active,
.general-ledger-controls .btn.dropdown-toggle.bg-blue-color:focus,
.general-ledger-controls .btn.dropdown-toggle.bg-blue-color.show {
  background-color: var(--bg-blue-color) !important;
  background: var(--bg-blue-color) !important;
  border-color: var(--bg-blue-color) !important;
  color: #fff !important;
}

/* Donor theme */
.general-ledger-export-btn.bg-donor-color:active,
.general-ledger-export-btn.bg-donor-color:focus,
.general-ledger-export-btn.bg-donor-color.focus,
.general-ledger-export-btn.bg-donor-color.show,
.general-ledger-export-btn.bg-donor-color.active,
.general-ledger-export-btn.bg-donor-color[aria-expanded="true"],
.general-ledger-controls .dropdown-toggle.bg-donor-color:active,
.general-ledger-controls .dropdown-toggle.bg-donor-color:focus,
.general-ledger-controls .dropdown-toggle.bg-donor-color.show,
.general-ledger-controls .dropdown-toggle.bg-donor-color[aria-expanded="true"],
.general-ledger-controls .btn.dropdown-toggle.bg-donor-color:active,
.general-ledger-controls .btn.dropdown-toggle.bg-donor-color:focus,
.general-ledger-controls .btn.dropdown-toggle.bg-donor-color.show {
  background-color: var(--bg-donor-color) !important;
  background: var(--bg-donor-color) !important;
  border-color: var(--bg-donor-color) !important;
  color: #fff !important;
}

/* General alignment rules for transactions toolbar controls */
.general-ledger-controls {
    display: flex !important;
    align-items: flex-end !important;
    gap: 0.5rem !important;
}

.general-ledger-controls > * {
    display: flex !important;
    align-items: flex-end !important;
}

.general-ledger-controls .dropdown {
    display: flex !important;
    align-items: flex-end !important;
}

.general-ledger-controls .dropdown-toggle {
    height: 49px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {
    /* Tablet view - allow wrapping but maintain some horizontal layout */
    .general-ledger-controls {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        align-items: flex-end !important;
    }

    /* Adjust widths for tablet */
    .general-ledger-controls .css-1t8l2tu-MuiInputBase-root-MuiOutlinedInput-root {
        min-width: 150px !important;
    }

    /* Ensure dropdown aligns properly */
    .general-ledger-controls .dropdown {
        display: flex !important;
        align-items: flex-end !important;
    }
}

/* 576 */
@media (max-width: 767px) {
    /* Make button container wrap on mobile */
    .general-ledger-controls {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    /* Ensure date pickers and buttons fit properly */
    .general-ledger-controls .MuiGrid-root {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Make date picker containers full width on mobile */
    .general-ledger-controls .css-1t8l2tu-MuiInputBase-root-MuiOutlinedInput-root {
        width: 100% !important;
    }

    /* Ensure dropdown aligns properly on mobile */
    .general-ledger-controls .dropdown {
        width: 100% !important;
    }
}

@media (max-width: 575px) {
    .general-ledger-table{
        overflow-x: auto !important;
        
    }
    .general-ledger-tableData{
        min-width: 500px !important;
        overflow-x: auto !important;
    }

    /* Ensure buttons are fully visible and stacked on small mobile */
    .general-ledger-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Make buttons full width on very small screens */
    .general-ledger-controls > div {
        width: 100% !important;
    }

    .general-ledger-controls .MuiFormControl-root {
        width: 100% !important;
    }

    .general-ledger-controls .dropdown,
    .general-ledger-controls button {
        width: 100% !important;
    }

    /* Ensure dropdown toggle button is full width */
    .general-ledger-controls .dropdown-toggle {
        width: 100% !important;
        display: block !important;
    }

    /* Adjust LocalizationProvider containers */
    .general-ledger-controls .css-o8hwua-MuiStack-root {
        width: 100% !important;
        padding-top: 0 !important;
    }

    /* Date picker input fields */
    .general-ledger-controls .MuiInputBase-root {
        width: 100% !important;
    }

    /* Remove top margin on mobile when stacked */
    .general-ledger-controls .dropdown {
        margin-top: 0 !important;
    }

    /* Adjust button container in Grid */
    .general-ledger-controls > div button {
        margin-top: 0 !important;
    }
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

label#\:ra\:-label {
margin-top: -2px !important;
}
.client label#\:rc\:-label {
margin-top: -2px !important;
}

/* Donor General Ledger toolbar: one row on sm+ */
.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

@media (min-width: 576px) {
  .billing-history-ledger-toolbar.customer-ledger-jobber-toolbar .dropdown.w-100 {
    width: auto !important;
  }

  .billing-history-ledger-toolbar.customer-ledger-jobber-toolbar
    .customer-ledger-export-toggle {
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 575px) {
  .billing-history-ledger-toolbar.customer-ledger-jobber-toolbar {
    flex-wrap: wrap !important;
  }
}

/*
 * Donor General Ledger (DonorGeneralLedger.jsx Jobber toolbar) — Export As: no gray/donor frame
 * (inline style removes border; BS5 .btn can still draw one without !important overrides)
 */
.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar .customer-ledger-export-toggle.btn,
.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar
  button.customer-ledger-export-toggle.dropdown-toggle {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  --bs-btn-border-width: 0 !important;
  --bs-border-width: 0 !important;
}

.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar
  .customer-ledger-export-toggle.btn:hover:not(:disabled),
.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar
  .customer-ledger-export-toggle.btn:focus,
.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar
  .customer-ledger-export-toggle.btn:focus-visible,
.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar
  .customer-ledger-export-toggle.btn:active,
.billing-history-ledger-toolbar.customer-ledger-jobber-toolbar
  .customer-ledger-export-toggle.btn.show {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.client label#\:r9\:-label {
margin-top: -2px !important;
}

.client label#\:rc\:-label {
margin-top: -2px !important;
}
.event-container {
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
  background-color: #fff;
  background-color: var(--event-bg-color, #fff);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px !important;
  margin-left: 8px !important;
  position: relative;
  color: #000000 !important;
  border-color: transparent;
  border-color: var(--event-border-color, transparent);
  border: 2px solid transparent;
  border: 2px solid var(--event-border-color, transparent);
}

/* Force black text for maximum contrast - override any white text */
.event-container,
.event-container *,
.event-container .event-header,
.event-container .event-details,
.event-container .event-header-text,
.event-container .event-details-text,
.event-container .visit-label,
.event-container .customer-message-label,
.event-container .event-icon,
.event-container .event-message-meta,
.event-container span,
.event-container div,
.event-container p,
.event-header-text,
.visit-label,
.customer-message-label,
.event-details-text {
  color: #000000 !important;
}

/* Force black text for maximum contrast */
.fc-event-title,
.fc-event-time,
.fc-event-title-container,
.fc-event-main,
.fc-event-segment,
.fc-event-title-container *,
.fc-event-main * {
  color: #000000 !important;
}

/* Remove any left border indicators from FullCalendar wrapper elements */
.fc-event,
.fc-daygrid-event,
.fc-timegrid-event,
.fc-event-main-frame,
.fc-event-bg,
.fc-event-main,
.fc-event-segment {
  border-left: none !important;
}

.event-container:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.event-header,
.event-details {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  color: #000000 !important;
}

.fc-theme-standard .fc-popover {
  z-index: 9 !important;
  border-radius: 10px !important;
}

.event-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: bold;
  width: 100%;
  max-width: 100%;
  color: #000000 !important;
}

.event-icon {
  margin-right: 4px;
  font-size: 16px;
  color: #000000 !important;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Remove icon filter to allow icons to use black color */
.event-container .icon-style-schedule,
.event-container img.icon-style-schedule,
.event-icon .icon-style-schedule,
.event-icon img.icon-style-schedule {
  filter: none !important;
  opacity: 1 !important;
}

.visit-label {
  font-size: 11px;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000 !important;
}

.event-details {
  font-size: 11px;
  color: #000000 !important;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-header-text {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: #000000 !important;
}

.event-details-text {
  width: 100%;
  color: #000000 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure child elements don't override parent background colors */
.fc-event .fc-event-main {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-main {
  background-color: transparent !important;
}

/* Remove background from FullCalendar wrapper elements - only .event-container card should have background */
.fc-daygrid-event.fc-event {
  background-color: transparent !important;
}

.fc-daygrid-event.fc-event-segment {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-segment {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-resizer {
  background-color: transparent !important;
}

.fc-daygrid-event {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-title-container {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event-title {
  background-color: transparent !important;
}

.fc-daygrid-event .fc-event {
  background-color: transparent !important;
}

.fc-daygrid-event.fc-event {
  background-color: transparent !important;
}

.fc-daygrid-day {
  background-color: transparent !important;
}

.fc-daygrid-day-frame {
  background-color: transparent !important;
}

.fc-daygrid-day-bg {
  background-color: transparent !important;
}

.fc-daygrid-day-top {
  background-color: transparent !important;
}

.fc-daygrid-day-number {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-main {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-main-frame {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-title-container {
  background-color: transparent !important;
}

.fc-timegrid-event .fc-event-title {
  background-color: transparent !important;
}

.fc-timegrid-event {
  background-color: transparent !important;
}

.fc-event.quote-event {
  background-color: transparent !important;
  border: none !important;
}

.fc-event.contract-event {
  background-color: transparent !important;
  border: none !important;
}

.fc-event.invoice-event {
  background-color: transparent !important;
  border: none !important;
}

.fc-event.visit-event {
  background-color: transparent !important;
  border: none !important;
}

.fc-event-main-frame {
  background-color: transparent !important;
}

.fc-event-bg {
  background-color: transparent !important;
}

.fc-event-segment {
  background-color: transparent !important;
}

.fc-event-main {
  background-color: transparent !important;
}

.fc-event-title-container {
  background-color: transparent !important;
}

.fc-event-title {
  background-color: transparent !important;
}

/* Current day highlight - header styling */
.fc-day-today .fc-col-header-cell-cushion {
  background-color: rgba(212, 148, 58, 0.15) !important;
  border: 2px solid var(--amber) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0f2b46 !important;
  font-weight: 600 !important;
}

/* Today column background - consistent styling for all views */
.fc-day-today,
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background-color: rgba(212, 148, 58, 0.08) !important;
}

.fc-daygrid-dot-event:hover {
  background-color: none !important;
}

.fc .fc-more-popover .fc-popover-body {
  height: 250px !important;
  width: 250px !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: var(--shadow-md);
  padding: 10px;
}


.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar {
  width: 8px;
}

.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.fc .fc-more-popover .fc-popover-body {
  scroll-behavior: smooth;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child),
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
  background-color: #0f2b46;
  color: white;
  border: 1px solid #0f2b46;
}


.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  margin-right: 5px;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start :hover {
  background-color: none !important;
}

.fc-scroller.fc-scroller-liquid-absolute {
  overflow: hidden !important;
}

.dialog-content,
.dialog-actions {
  padding: 16px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
}

.css-1mmpgk2 {
  border: none !important;
}

.fc-button-group .fc-button {
  text-transform: capitalize !important;
}

.fc-button-group .fc-button:first-letter {
  text-transform: uppercase !important;
}

@media (max-width: 767px) {
  .calender-main {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding: 5px !important;
  }

  .fc {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fc-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .fc-toolbar-title {
    font-size: 1.2em !important;
    margin: 10px 0 !important;
  }

  .fc-button-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .fc-button {
    font-size: 0.75em !important;
    padding: 4px 8px !important;
  }

  .event-container {
    max-width: 100% !important;
    width: auto !important;
    padding: 6px !important;
    font-size: 11px !important;
  }

  .event-header,
  .event-details {
    font-size: 10px !important;
  }

  .fc-daygrid-day {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .fc-daygrid-day-frame {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .fc-col-header-cell {
    font-size: 0.75em !important;
    padding: 4px 2px !important;
    min-width: 0 !important;
  }

  .fc-daygrid-day-number {
    font-size: 0.85em !important;
    padding: 4px !important;
  }

  .fc-scroller {
    overflow-x: hidden !important;
  }

  .fc-scroller-liquid-absolute {
    overflow-x: hidden !important;
  }

  .fc-event {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .fc-daygrid-event {
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  .calender-main {
    padding: 3px !important;
  }

  .fc-toolbar-title {
    font-size: 1em !important;
  }

  .fc-button {
    font-size: 0.7em !important;
    padding: 3px 6px !important;
  }

  .event-container {
    padding: 4px !important;
    font-size: 10px !important;
  }

  .fc-col-header-cell {
    font-size: 0.7em !important;
    padding: 2px 1px !important;
  }

  .fc-daygrid-day-number {
    font-size: 0.8em !important;
    padding: 2px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .calender-main {
    padding: 8px !important;
  }

  .fc-toolbar {
    flex-wrap: wrap !important;
  }

  .fc-button {
    font-size: 0.85em !important;
  }
}

.icon-style-schedule {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.text-blue-color {
  color: #0f2b46;
}

/* Multi-day event continuity styles */
.fc-daygrid-event.fc-event-start.fc-event-end {
  border-radius: 0 !important;
}

.fc-daygrid-event.fc-event-start:not(.fc-event-end) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}

.fc-daygrid-event.fc-event-end:not(.fc-event-start) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-left: 0 !important;
}

.fc-daygrid-event:not(.fc-event-start):not(.fc-event-end) {
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove gaps between multi-day event segments */
.fc-daygrid-event-segment {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Time grid event styles */
.fc-timegrid-event {
  border-radius: 0 !important;
}

.fc-timegrid-event .fc-event-main {
  border-radius: 0 !important;
}

/* CRITICAL: Force black text on ALL event container elements - highest priority */
.event-container,
.event-container *,
.event-container *::before,
.event-container *::after,
.event-container .event-header,
.event-container .event-details,
.event-container .event-header-text,
.event-container .event-details-text,
.event-container .visit-label,
.event-container .customer-message-label,
.event-container .event-icon,
.event-container .event-message-meta,
.event-container span,
.event-container div,
.event-container p,
.event-container strong,
.event-container em,
.event-header-text,
.visit-label,
.customer-message-label,
.event-details-text,
.event-header,
.event-details,
.event-icon {
  color: #000000 !important;
}

/* ========== RESPONSIVE: Desktop vs Mobile Schedule (same as Admin) ========== */
.calendar-wrapper { font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; width: 100%; }
.calendar-wrapper.mobile-view { display: none; }
.calendar-wrapper.desktop-view { display: block; }
.mobile-schedule-inner { padding: 0 12px 24px; min-height: 100%; }
.mobile-calendar-header { padding: 16px 0 12px; margin-bottom: 12px; }
.mobile-date-picker-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: transparent; border: none; cursor: pointer; padding: 8px; margin-bottom: 14px; border-radius: 8px; transition: background 0.2s; }
.mobile-date-picker-trigger:hover { background: rgba(6, 49, 100, 0.06); }
.mobile-date-one-line { font-size: 1.15rem; font-weight: 600; color: #0f2b46; line-height: 1.3; }
.mobile-date-picker-icon { color: #0f2b46; font-size: 1.4rem !important; }
.mobile-day-strip { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.mobile-day-dot { flex: 1 1; max-width: 40px; aspect-ratio: 1; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; font-size: 0.85rem; font-weight: 600; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.mobile-day-dot.selected { background: #0f2b46; color: #fff; border-color: #0f2b46; }
.mobile-event-list { padding: 0 0 16px; }
.event-card-mobile { background: white; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 16px; margin-bottom: 12px; cursor: pointer; border: 1px solid #eee; display: flex; flex-direction: column; gap: 10px; }
.event-card-mobile:hover { box-shadow: var(--shadow-xl); }
.event-card-mobile-time { font-size: 0.95rem; font-weight: 600; color: #334155; }
.event-card-mobile-time .event-time-all-day { color: #0f2b46; font-weight: 700; }
.event-card-mobile-time .event-time-range { color: #64748b; }
.event-card-mobile-lines { display: flex; flex-direction: column; gap: 4px; }
.event-card-mobile-line { font-size: 0.9rem; color: #475569; line-height: 1.4; }
.event-card-mobile .view-details-btn { align-self: flex-start; margin-top: 4px; background: #0f2b46; color: white; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; }
.event-card-mobile .view-details-btn.action-sign { background: var(--amber); color: #fff; }
.event-card-mobile .view-details-btn.action-paid { background: #10b981; color: #fff; }
.mobile-no-events { text-align: center; color: #666; padding: 24px 16px; margin: 0; font-size: 1rem; }
.mobile-date-picker-dialog .MuiDialogContent-root { display: flex; justify-content: center; }
@media screen and (max-width: 768px) { .calendar-wrapper.desktop-view { display: none !important; } .calendar-wrapper.mobile-view { display: block !important; } }
@media screen and (min-width: 769px) { .calendar-wrapper.mobile-view { display: none !important; } .calendar-wrapper.desktop-view { display: block !important; } }

/* Event detail dialog — match Admin company schedule modal */
.schedule-event-detail-dialog .schedule-event-detail-card .schedule-event-detail-fields > .MuiGrid-item {
  padding: 12px 18px !important;
  margin: 0 !important;
}
.schedule-event-detail-dialog
  .schedule-event-detail-fields
  .MuiGrid-item:not(.schedule-event-visit-status-row)
  > div:first-of-type {
  color: #063164 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.02em;
}
.schedule-event-detail-dialog
  .schedule-event-detail-fields
  .MuiGrid-item:not(.schedule-event-visit-status-row)
  > div:last-of-type:not(.schedule-event-status-value) {
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
  font-weight: 500 !important;
}
.schedule-event-detail-dialog .schedule-event-dialog-actions .MuiButton-root,
.schedule-event-detail-dialog .schedule-event-dialog-actions button {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}
.schedule-event-detail-dialog
  .MuiDialogTitle-root
  + .MuiDialogContent-root.schedule-event-detail-dialog-content {
  padding-top: 24px !important;
}

/* Schedule event detail modal – responsive (mobile): smaller height, compact content, proper buttons */
@media screen and (max-width: 600px) {
  .schedule-event-detail-dialog .MuiDialog-paper {
    max-width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 12px !important;
  }
  .schedule-event-detail-dialog .MuiDialogTitle-root.schedule-event-dialog-title,
  .schedule-event-detail-dialog .schedule-event-dialog-title {
    flex-shrink: 0;
    padding: 10px 6px 10px 14px !important;
  }
  .schedule-event-detail-dialog .schedule-event-dialog-title-text {
    font-size: 1rem !important;
  }
  .schedule-event-detail-dialog .schedule-event-detail-dialog-content,
  .schedule-event-detail-dialog .MuiDialogContent-root {
    padding: 18px 14px 12px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .schedule-event-detail-dialog
    .MuiDialogTitle-root
    + .MuiDialogContent-root.schedule-event-detail-dialog-content {
    padding-top: 18px !important;
  }
  .schedule-event-detail-dialog .MuiDialogContent-root > .MuiBox-root:first-of-type {
    margin-bottom: 12px !important;
  }
  .schedule-event-detail-dialog .schedule-event-location-block {
    word-break: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0 !important;
  }
  .schedule-event-detail-dialog .MuiGrid-container {
    margin-bottom: -8px !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions {
    flex-shrink: 0;
    padding: 10px 16px 14px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-item {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions .MuiGrid-item > div {
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .schedule-event-detail-dialog .MuiDialogActions-root.schedule-event-dialog-actions button {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {}

/* General styles for activity collapse */
.activity-collapse-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.activity-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.activity-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.activity-collapse-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
}

.activity-details-box,
.activity-reason-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.activity-label {
    flex-shrink: 0;
    white-space: nowrap;
}

.activity-text {
    flex: 1 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* 576 */
@media (max-width: 767px) {
    .settingProductServicecess{
        flex-direction: column !important;
    }
    .searchBarOfTable{
        flex-direction: column !important;  
        margin-left: 0 !important;
    }
    .searchBarOfTable .dropdown {
        width: 100% !important;
        position: relative !important;
    }
    .searchBarOfTable .dropdown-toggle {
        width: 100% !important;
        text-align: left !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .searchBarOfTable .dropdown-menu {
        position: absolute !important;
        top: 10% !important;
        left: 0 !important;
        z-index: 1050 !important;
        width: 100% !important;
        margin-top: 2px !important;
        max-height: 250px !important;
        overflow-y: auto !important;
    }
    .searchBarOfTable .dropdown-menu.show {
        display: block !important;
    }
    .searchBarOfTable .dropdown-item {
        padding: 10px 15px !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }
    .searchBarOfTable .dropdown-item:first-child {
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }
    .customerList_searchbar{
        align-items: start !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Ensure Card doesn't clip dropdown */
    .customerList_searchbar.customersAddCustomers {
        overflow: visible !important;
    }
    
    /* Fix for activity log details and reason text wrapping */
    .activity-collapse-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .activity-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .activity-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .activity-collapse-container {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        box-sizing: border-box !important;
    }
    
    .activity-details-box,
    .activity-reason-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 12px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .activity-label {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .activity-text {
        flex: 1 1 !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
}

/* 525 */
@media (max-width: 575px) {}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

.ser .nav-tabs .nav-link.active {
    border-radius: 5px !important;
}
/* Payment Terminal Management Styles */

/*
 * Full-width content on small viewports: cancels stacked gutters from SettingsLayout
 * (12px), addProductServiceSideLine (15px ≤767px), and the former inner Grid (20px).
 * Scoped to payment-terminals only — does not change other settings routes.
 */
@media (max-width: 900px) {
  .payment-terminals-page--bleed.payment-terminals-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
    max-width: none;
    box-sizing: border-box;
  }

  .payment-terminals-page-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 901px) {
  .payment-terminals-page-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Mobile card + desktop: terminal name ellipsis */
.payment-terminal-list-primary-title {
  min-width: 0;
  max-width: 100%;
  display: block;
}
.payment-terminal-list-primary-title .customer-table-name-block__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-terminal-table {
  margin-top: 16px;
}

.payment-terminal-table .MuiTableCell-head {
  font-weight: 600;
  background-color: #f5f5f5;
}

.payment-terminal-table .MuiTableRow-root:hover {
  background-color: #f8f9fa;
}

.terminal-status-chip {
  font-size: 0.75rem;
  font-weight: 500;
}

.terminal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.terminal-dialog .MuiDialogContent-root {
  padding: 24px;
}

.terminal-dialog .MuiDialogActions-root {
  padding: 16px 24px;
}

.terminal-form-grid {
  margin-top: 16px;
}

.terminal-settings-section {
  margin-top: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.terminal-settings-section h6 {
  margin-bottom: 16px;
  color: #333;
  font-weight: 600;
}

.terminal-switches {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.terminal-connection-info {
  font-family: monospace;
  font-size: 0.875rem;
  color: #666;
}

.terminal-description {
  font-size: 0.75rem;
  color: #666;
  margin-top: 4px;
}

.terminal-transaction-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terminal-transaction-stats .success-count {
  color: var(--green);
  font-weight: 500;
}

.terminal-test-button {
  min-width: 32px;
  height: 32px;
}

.terminal-test-button .MuiCircularProgress-root {
  width: 16px !important;
  height: 16px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .terminal-actions {
    flex-direction: column;
    gap: 4px;
  }
  
  .terminal-switches {
    flex-direction: column;
    gap: 8px;
  }
  
  .terminal-dialog .MuiDialogContent-root {
    padding: 16px;
  }
}

/* Tax list — primary name column (desktop + Jobber mobile card header); ellipsis */
.tax-list-primary-title {
  min-width: 0;
  max-width: 100%;
  display: block;
}
.tax-list-primary-title .customer-table-name-block__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taxes-container {
  padding: 20px;
}

.taxes-header {
  margin-bottom: 20px;
}

.taxes-table {
  background-color: white;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.taxes-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.taxes-form-field {
  width: 100%;
}

.taxes-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.taxes-dialog {
  padding: 20px;
}

.taxes-dialog-title {
  color: #0f2b46;
  font-weight: 600;
}

.taxes-dialog-content {
  padding-top: 20px;
}

.taxes-dialog-actions {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.css-1ex1afd-MuiTableCell-root {
  font-family: var(--font-body), "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
  text-align: left;
  padding: 16px;
  color: rgba(0, 0, 0, 0.87);
}

.industry .css-xg6i6p-MuiPaper-root {
  /* border: 1px solid #fff !important; */
  color: #fff !important;
}

.css-yz9k0d-MuiInputBase-input::placeholder {
  color: #fff !important;
  opacity: 10 !important;
}

.css-yz9k0d-MuiInputBase-input {
  color: white !important;
}

.css-1ygcj2i-MuiTableCell-root {
  padding: 6px 6px 6px 30px !important;
}
.css-1ex1afd-MuiTableCell-root {
  padding: 10px 0px 0px 31px !important;
}


@media (max-width: 479px) {
}

/* Align with JobberListCard mobile header — avoid extra horizontal inset / overflow */
@media (max-width: 575px) {
  .industry .industrysearch {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 424px) {
  .industry .industrysearch {
    margin-left: 0 !important;
  }
}

@media (max-width: 374px) {
  .industry .industrysearch {
    margin-left: 0 !important;
  }
}

@media (max-width: 319px) {
  .industr {
    font-size: 19px;
    margin-top: 9px;
  }
  .industry .industrysearch {
    margin-left: 0 !important;
  }
}

/* Jobber mobile cards (≤775px): primary title + Created On subtitle; pastel Edit/Delete grid */
.industry-jobber-table .jobber-mobile-card__primary .industry-mobile-card-primary {
  min-width: 0;
  width: 100%;
  font-weight: 400;
}

@media (max-width: 775px) {
  .industry-jobber-table .jobber-mobile-card__collapse-inner .mobile-data-row:not(.mobile-action-row) .mobile-data-value {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .industry-jobber-table .jobber-mobile-card__collapse-inner .jobber-mobile-card__actions .mobile-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
}

.industry-jobber-table .jobber-mobile-card__collapse-inner .industry-mobile-actions.customer-list-actions-mobile {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  grid-gap: 6px !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

.industry-jobber-table .jobber-mobile-card__collapse-inner .industry-mobile-actions.customer-list-actions-mobile .MuiButton-root {
  font-size: 0.65rem !important;
  padding: 4px 4px !important;
  min-height: 30px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
  .industry-jobber-table .jobber-mobile-card__collapse-inner .industry-mobile-actions.customer-list-actions-mobile {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    gap: 5px !important;
  }

  .industry-jobber-table .jobber-mobile-card__collapse-inner .industry-mobile-actions.customer-list-actions-mobile .MuiButton-root {
    font-size: 0.6rem !important;
    padding: 3px 2px !important;
    min-height: 28px !important;
  }
}
/* Poppins + Inter are loaded in public/index.html — do not re-import or override app :root from index.css */

.sidebar,
.sidebar * {
  box-sizing: border-box;
}

.sidebar {
  font-family: var(--font-body), "Segoe UI", sans-serif;
}

/* Legacy sidebar variables only (do not redefine global tokens — use index.css :root) */
:root {
  --sidebar-color: #fff;
  --primary-color: #f4f2f2;
  --primary-color-light: #f4f2f2;
  --toggle-color: #ddd;
  --text-color: #ffffff;
  --dark-color: #000;

  --trans-02: var(--transition-base, all 0.2s ease);
  --trans-03: all 0.3s ease;
  --trans-04: all 0.5s ease;
  /* Accent / semantic — align with style guide (amber + green); donor teal from index */
  --text-orange-color: var(--amber);
  --bg-orange-color: var(--amber);
  --border-orange-color: var(--amber);
  --bg-green-color: var(--green);
  --border-green-color: var(--green);
}

body.dark {
  --body-color: #181914;
  --sidebar-color: #242526;
  --primary-color: #34383c;
  --primary-color-light: #383a3c;
  --toggle-color: #fff;
  --text-color: #ccc;
  --dark-color: #fff;
}

.sidebar .text {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  color: var(--text-color);
  white-space: inherit;
  opacity: x 1;
}

.sidebar .image {
  min-width: 60px;
  display: flex;
  align-items: center;
}

.SidebarSmallloos {
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  object-fit: contain;
  max-height: 60px;
  width: auto;
  max-width: 100%;
}

.SidebarBigLogos {
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  object-fit: contain;
  max-height: 60px;
  width: auto;
  max-width: 98% !important;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0px;
  height: 100%;
  width: 240px;
  padding: 31px 0 31px 0;
  transition: all 0.2s ease;
  transition: var(--trans-02);
  z-index: 999;
}

/*
 * Cloud Job Manager — UI/UX Style Guide tokens:
 * Navy Deep #0F2B46 (sidebar), Navy Mid #1A3F5C (hover),
 * Active row: lighter desaturated navy (rectangular, full-bleed), Amber #D4943A (left bar / CTAs),
 * Text Muted #6B7280 (section labels), Red #DC2626 (alerts / invoice badge)
 */
.sidebar.sidebar--cj-redesign {
  --cj-navy-deep: #0f2b46;
  --cj-navy-mid: #1a3f5c;
  --cj-active-row-bg: #263e56;
  --cj-amber: #d4943a;
  background: var(--cj-navy-deep) !important;
  padding-top: 16px;
  padding-bottom: 12px;
  box-sizing: border-box;
}

/* Wider logo strip — mockup uses most of sidebar width (drops extra side inset). */
.sidebar.sidebar--cj-redesign:not(.close) .my-logo.sidebar-cj-logo-wrap {
  width: 100% !important;
  max-width: 100%;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box;
  justify-content: center;
}

.sidebar.sidebar--cj-redesign:not(.close)
  .my-logo.sidebar-cj-logo-wrap
  .SidebarBigLogos {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 96% !important;
  width: 96% !important;
  max-height: 72px;
  object-fit: contain;
}

/* Create New: no background shift on hover/focus (user + Bootstrap .btn-secondary). */
.sidebar.sidebar--cj-redesign button.create-button.mb-2:hover,
.sidebar.sidebar--cj-redesign button.create-button.mb-2:focus,
.sidebar.sidebar--cj-redesign button.create-button.mb-2:focus-visible,
.sidebar.sidebar--cj-redesign button.create-button.mb-2:active {
  background-color: var(--cj-amber) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Collapse control: white pill with chevron / close icon */
.sidebar.sidebar--cj-redesign header .toggle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  border-color: rgba(15, 43, 70, 0.2) !important;
  box-shadow: var(--shadow-sm);
}

.sidebar.sidebar--cj-redesign header .toggle svg {
  font-size: 18px !important;
}

.sidebar.sidebar--cj-redesign .menu-bar {
  height: auto !important;
  min-height: 0;
}

/* Nav list: breathing room like mockup (items ~12px apart; section headers set in JSX) */
.sidebar.sidebar--cj-redesign .menu.pt-1 {
  padding: 10px 0 20px !important;
  cursor: default;
}

.sidebar.sidebar--cj-redesign li.mb-3 {
  margin-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  list-style: none;
}

/* Beat global `.sidebar li { height: 50px; margin-top: 10px }` */
.sidebar.sidebar--cj-redesign:not(.close) li.mb-3 {
  height: auto !important;
  min-height: 44px;
}

/* Outline icons — consistent size / alignment (matches mockup column) */
.sidebar.sidebar--cj-redesign li.mb-3 img {
  max-height: 22px;
  max-width: 22px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* MUI mockup-style filled icons on standard nav rows */
.sidebar.sidebar--cj-redesign li.mb-3 .MuiSvgIcon-root {
  font-size: 22px !important;
  color: #fff !important;
  display: block;
}

.sidebar.sidebar--cj-redesign.close li.mb-3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 10px !important;
}

.sidebar.sidebar--cj-redesign .Right-arrowww {
  display: none !important;
}

.sidebar.sidebar--cj-redesign li.mb-3:hover:not(.cj-sidebar-nav-item--active) {
  background-color: var(--cj-navy-mid) !important;
  border-radius: 0;
}

.sidebar.sidebar--cj-redesign .cj-sidebar-nav-item--active {
  background-color: var(--cj-active-row-bg) !important;
  border-radius: 0 !important;
}

.sidebar.sidebar--cj-redesign .cj-sidebar-nav-item--active:hover {
  background-color: var(--cj-active-row-bg) !important;
}

/*
 * Email (TOOLS): same horizontal inset as other nav rows (li uses margin 8px + padding).
 * Do NOT zero out margin-left — that pulled Email left of Reports.
 */
.sidebar.sidebar--cj-redesign .cj-email-flat.sidebar-email-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

.sidebar.sidebar--cj-redesign .cj-email-flat .sideBarEmailLeft {
  margin-left: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.sidebar.sidebar--cj-redesign .cj-email-flat .sidebar-email-icon-wrap img {
  max-height: 22px;
  max-width: 22px;
}

/* MUI outlined icon (Email) — same optical size as other nav icons */
.sidebar.sidebar--cj-redesign .cj-email-flat .sidebar-email-icon-wrap .MuiSvgIcon-root {
  font-size: 22px !important;
  width: 1em !important;
  height: 1em !important;
  color: #fff !important;
  display: block;
}

.sidebar.sidebar--cj-redesign .cj-email-flat .sidebar-email-toggle,
.sidebar.sidebar--cj-redesign .cj-email-flat .sidebar-email-toggle.dropdown-toggle {
  width: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Active Email row — same as other nav items (amber bar + active row bg) */
.sidebar.sidebar--cj-redesign .cj-email-flat .sidebar-email-toggle.cj-sidebar-email-toggle--active,
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.cj-sidebar-email-toggle--active.dropdown-toggle {
  border-left: 3px solid var(--cj-amber) !important;
  background-color: var(--cj-active-row-bg) !important;
}

.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.dropdown-toggle:not(.cj-sidebar-email-toggle--active):focus,
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.dropdown-toggle:not(.cj-sidebar-email-toggle--active):focus-visible,
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.dropdown-toggle:not(.cj-sidebar-email-toggle--active):active,
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.dropdown-toggle:not(.cj-sidebar-email-toggle--active).show {
  border: none !important;
  border-left: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.cj-sidebar-email-toggle--active.dropdown-toggle:focus,
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.cj-sidebar-email-toggle--active.dropdown-toggle:focus-visible,
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.cj-sidebar-email-toggle--active.dropdown-toggle:active,
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .sidebar-email-toggle.cj-sidebar-email-toggle--active.dropdown-toggle.show {
  border-left: 3px solid var(--cj-amber) !important;
  outline: none !important;
  box-shadow: none !important;
}

.sidebar.sidebar--cj-redesign .cj-email-flat .btn:not(.cj-sidebar-email-toggle--active),
.sidebar.sidebar--cj-redesign .cj-email-flat .btn.dropdown-toggle:not(.cj-sidebar-email-toggle--active) {
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Bootstrap 5 focus ring — keep amber bar when Email row is active */
.sidebar.sidebar--cj-redesign .cj-email-flat .btn:focus-visible:not(.cj-sidebar-email-toggle--active),
.sidebar.sidebar--cj-redesign
  .cj-email-flat
  .dropdown-toggle:focus-visible:not(.cj-sidebar-email-toggle--active) {
  box-shadow: none !important;
  outline: none !important;
  border-left: none !important;
}

.sidebar.sidebar--cj-redesign .cj-email-flat .dropdown {
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* Email: Schedule-style expand below (inline subnav, not flyout) */
.sidebar.sidebar--cj-redesign .cj-email-inline-nav button.sidebar-email-toggle {
  font-family: inherit;
  font-size: inherit;
}

.sidebar.sidebar--cj-redesign .cj-email-inline-subnav {
  margin-left: 20px;
  padding-left: 0;
  border-left: none;
}

.sidebar header {
  position: relative;
}

.sidebar .image-text img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.sidebar header .image-text {
  display: flex;
  align-items: center;
}

.header .image-text .header-text {
  display: flex;
  flex-direction: column;
}

.header-text .main {
  font-weight: 600;
}

.header-text .sub {
  margin-top: -2px;
}

.sidebar header .toggle {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%) rotate(180deg);
  height: 22px;
  width: 22px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #000;
  font-size: 18px;
  border: 1px solid black;
}

.sidebar li {
  height: 50px;
  margin-top: 10px;
  list-style: none;
  display: flex;
  align-items: center;
}

.sidebar li .icons {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  font-size: 20px;
}

.sidebar li .icons,
.sidebar li .text {
  color: #ffffff;
  color: var(--text-color);
  transition: all 0.3s ease;
  transition: var(--trans-03);
}

.sidebar .search-bar input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  border-radius: 6px;
  background-color: #f4f2f2;
  background-color: var(--primary-color-light);
}

.sidebar .search-bar {
  background-color: #f4f2f2;
  background-color: var(--primary-color-light);
}

.sidebar li a {
  height: 100%;
  width: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding-right: 50px;
  border-radius: 6px;
  transition: all 0.5s ease;
  transition: var(--trans-04);
  text-align: left;
}

.sidebar li a:active {
  background: #000 !important;
}

.sidebar .menu-bar {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.menu-bar .mode {
  position: relative;
  border-radius: 6px;
  background: #f4f2f2;
  background: var(--primary-color-light);
}

.sidebar .my-logo {
  width: 95% !important;
  padding: auto 10px !important;
  display: flex;
  justify-content: start;
  padding-left: 17px;
  cursor: pointer;
}

/* Nav list shell: not a single hit target (avoid pointer on gaps + section labels) */
.sidebar .menu.pt-1 {
  cursor: default;
}

/* Clickable row = icon + label + badge (li handles navigation) */
.sidebar li.mb-3 {
  cursor: pointer;
}

.sidebar .cj-sidebar-section-label {
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}

.menu-bar .mode .moon-sun {
  height: 50px;
  width: 60px;
  display: flex;
  align-items: center;
}

.menu-bar .mode i {
  position: absolute;
  transition: all 0.3s ease;
  transition: var(--trans-03);
}

.menu-bar .mode i.sun {
  opacity: 0;
}

body.dark .menu-bar .mode i.sun {
  opacity: 1;
}

body.dark .menu-bar .mode i.moon {
  opacity: 0;
}

.menu-bar .mode .toggle-switch {
  position: absolute;
  right: -10px;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  background: #f4f2f2;
  background: var(--primary-color-light);
  cursor: pointer;
}

.toggle-switch .switch {
  position: relative;
  height: 22px;
  width: 44px;
  background-color: #ddd;
  background-color: var(--toggle-color);
  border-radius: 25px;
}

.switch::before {
  content: "";
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background-color: #fff;
  background-color: var(--sidebar-color);
}

body.dark .switch::before {
  left: 25px;
}

body.dark .sidebar .image img {
  background-color: #fff;
}

.sidebar.close {
  width: 85px;
}

.sidebar.close .text {
  opacity: 0;
}

.sidebar.close .search-bar {
  background-color: #fff;
  background-color: var(--sidebar-color);
}

body.dark .search-bar input {
  color: white;
}

.sidebar.close .toggle {
  transform: translateY(-50%);
}

.my-collapse {
  display: block;
}
@media (max-width: 1564px) 

{
.sideBarEmailLeft {
  margin-left: 0 !important;
}
.sidebar-email-row {
  width: 100%;
  max-width: 100%;
}

/* Email collapse row: center icon, label, and caret like Invoice */
.sidebar-collapse-toggle.dropdown-toggle {
  align-items: center !important;
}
.sidebar-collapse-toggle.dropdown-toggle::after {
  margin-top: 0 !important;
  margin-left: 4px !important;
  align-self: center;
  vertical-align: middle;
}

/* Email menu: no dropdown triangle */
.sideBarEmailLeft .dropdown-toggle::after,
.sideBarEmailLeft .dropdown-toggle::before {
  display: none !important;
  content: none !important;
  border: none !important;
  margin: 0 !important;
}
.sidebar-email-icon-wrap img {
  vertical-align: middle;
  object-fit: contain;
}
}
/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

@media (max-width: 767px) {
  .my-collapse {
    display: none;
  }

  .sidebar {
    transform: translateX(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .sidebar.my-collapse {
    transform: translateX(-100%);
    display: block;
    opacity: 0;
    pointer-events: none;
  }

  .xreate-button {
    margin-bottom: 0px !important;
  }

  .open-close {
    display: none !important;
  }

  .Right-arrowww {
    margin-top: -6px !important;
  }

  .dropdownBottom {
    margin-top: 25px !important;
  }

  .dropdownBotton {
    margin-bottom: 0px !important;
  }
}

/* 280 */
@media (max-width: 319px) {
  .xreate-button {
    margin-bottom: 0px !important;
  }

  .sidebar li {
    margin-top: 43px !important;
  }

  .Right-arrowww {
    position: relative;
    top: 38px;
    margin-top: 0px !important;
  }

  .drop-down-btn {
    margin-bottom: -65px;
  }
}

.xreate-button {
  background: transparent !important;
  border: none !important;
  margin-bottom: 0;
  position: relative;
  top: 15px;
}

.popover {
  --bs-popover-max-width: 385px !important;
  border: 1px solid var(--amber) !important;
  border: 1px solid var(--border-orange-color) !important;
  --bs-popover-border-color: var(--border-orange-color) !important;
  background-color: rgb(243, 229, 217);
  --bs-popover-bg: rgb(243, 229, 217) !important;
}

.donor-mode .popover {
  border: 1px solid var(--border-donor-color) !important;
  --bs-popover-border-color: var(--border-donor-color) !important;
  background-color: rgb(243, 244, 246);
  --bs-popover-bg: rgb(243, 244, 246) !important;
}

.regular-mode .popover {
  border: 1px solid var(--amber) !important;
  border: 1px solid var(--border-orange-color) !important;
  --bs-popover-border-color: var(--border-orange-color) !important;
  background-color: rgb(243, 229, 217);
  --bs-popover-bg: rgb(243, 229, 217) !important;
}

/* Caret color for donor mode - blue */
.donor-caret.dropdown-toggle::after {
  border-top-color: #0f2b46 !important;
}
.donor-caret.dropdown-toggle::before {
  border-top-color: #0f2b46 !important;
}

/* Caret color for blue mode - white when not active */
.white-caret.dropdown-toggle::after {
  border-top-color: #fff !important;
}
.white-caret.dropdown-toggle::before {
  border-top-color: #fff !important;
}

/* CJ "+ Create New": solid amber button, no Bootstrap caret */
.sidebar-cj-create-dropdown .cj-create-toggle.dropdown-toggle::after,
.sidebar-cj-create-dropdown .cj-create-toggle::after {
  display: none !important;
}
/* 1680 */
@media (max-width: 1700px) {}

/* 1500 */
@media (max-width: 1680px) {}

/* 1440 */
@media (max-width: 1449px) {}

/* 1280 */
@media (max-width: 1439px) {}

/* 992 */
@media (max-width: 1279px) {}

/* 768 */
@media (max-width: 991px) {
    .customerDetail_paid{
            width: 98% !important;
    }
}

/* 576 */
@media (max-width: 767px) {}

/* 525 */
@media (max-width: 575px) {
    .saideBar_topaid{
        margin-left: -11px !important;
    }
    .invoicePaidSlip{
        margin-bottom: 20px  !important;
    }
    
}

/* 480 */
@media (max-width: 524px) {}

/* 425 */
@media (max-width: 479px) {}

/* 375 */
@media (max-width: 424px) {}

/* 320 */
@media (max-width: 374px) {}

/* 280 */
@media (max-width: 319px) {}

/* Mobile / narrow: sit below sticky MainNav (customer, worker, company ~52–68px + safe area) */
@media (max-width: 767px) {
  .Toastify__toast-container.Toastify__toast-container--top-center {
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* Let toasts use available width without hugging the wrong edge */
  .Toastify__toast.responsive-toast,
  .Toastify__toast-theme--light {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* react-hot-toast: same offset when using top-center (see index.js containerClassName) */
@media (max-width: 767px) {
  .rht-toaster-root {
    top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
  }
}

.Toastify__toast-theme--light {
  width: auto !important;
  min-width: min(300px, 100%) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
}

/*# sourceMappingURL=main.dc62d98f.css.map*/