/* Fix tab link text color - force dark blue instead of green - MAXIMUM SPECIFICITY */
/* Override ALL possible green colors on tab links */
html body .form-nav.nav-tabs .nav-link,
html body .form-nav.nav-tabs .nav-link.active,
html body .form-nav.nav-tabs .nav-item .nav-link,
html body .form-nav.nav-tabs .nav-item .nav-link.active,
html body .nav-tabs .nav-link,
html body .nav-tabs .nav-link.active,
html body .form-nav .nav-link,
html body .form-nav .nav-link.active,
html body a.nav-link[data-bs-toggle="tab"],
html body a.nav-link.active[data-bs-toggle="tab"],
html body ul.form-nav.nav-tabs .nav-link,
html body ul.form-nav.nav-tabs .nav-link.active,
html body ul.form-nav.nav-tabs li.nav-item .nav-link,
html body ul.form-nav.nav-tabs li.nav-item .nav-link.active,
html body ul.form-nav.nav-tabs li.nav-item[role="presentation"] .nav-link,
html body ul.form-nav.nav-tabs li.nav-item[role="presentation"] .nav-link.active {
  color: #364a63 !important;
  color: rgb(54, 74, 99) !important;
}

/* Fix tab link border-bottom color - force dark blue instead of green - ONLY for active tabs */
html body .form-nav.nav-tabs .nav-link.active,
html body .form-nav.nav-tabs .nav-item .nav-link.active,
html body .nav-tabs .nav-link.active,
html body a.nav-link.active[data-bs-toggle="tab"],
html body ul.form-nav.nav-tabs .nav-link.active,
html body ul.form-nav.nav-tabs li.nav-item .nav-link.active,
html body ul.form-nav.nav-tabs li.nav-item[role="presentation"] .nav-link.active {
  border-bottom: 3px solid #364a63 !important;
  border-bottom: 3px solid rgb(54, 74, 99) !important;
  border-bottom-color: #364a63 !important;
  border-bottom-color: rgb(54, 74, 99) !important;
  border-color: #364a63 !important;
  border-color: rgb(54, 74, 99) !important;
}

/* Kitchendisplay / KDS open button: center the icon in the button */
a.btn[href*="kitchendisplay"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
a.btn[href*="kitchendisplay"] i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure non-active tabs have NO visible border */
html body .form-nav.nav-tabs .nav-link:not(.active),
html body .form-nav.nav-tabs .nav-item .nav-link:not(.active),
html body .nav-tabs .nav-link:not(.active),
html body a.nav-link:not(.active)[data-bs-toggle="tab"],
html body ul.form-nav.nav-tabs .nav-link:not(.active),
html body ul.form-nav.nav-tabs li.nav-item .nav-link:not(.active),
html body ul.form-nav.nav-tabs li.nav-item[role="presentation"] .nav-link:not(.active) {
  border-bottom: 3px solid transparent !important;
  border-bottom-color: transparent !important;
  border-color: transparent !important;
}

/* Also target by role attribute */
html body a.nav-link[role="tab"],
html body a.nav-link.active[role="tab"] {
  color: #364a63 !important;
  color: rgb(54, 74, 99) !important;
}

html body a.nav-link.active[role="tab"] {
  border-bottom-color: #364a63 !important;
  border-bottom-color: rgb(54, 74, 99) !important;
  border-color: #364a63 !important;
  border-color: rgb(54, 74, 99) !important;
}

/* Override .text-primary class if applied to tab links */
html body .form-nav.nav-tabs .nav-link.text-primary,
html body .form-nav.nav-tabs .nav-link.active.text-primary,
html body a.nav-link.text-primary[data-bs-toggle="tab"],
html body a.nav-link.active.text-primary[data-bs-toggle="tab"] {
  color: #364a63 !important;
  color: rgb(54, 74, 99) !important;
}

/* Fix icon centering for filter and setup buttons in list headers */
/* These buttons should use flexbox to properly center their icons */
.list-setup .btn,
[data-toggle="list-filter"],
button[data-bs-toggle="modal"][data-bs-target*="setup-modal"],
.btn-outline-default.btn-sm.border-none {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.list-setup .btn i,
[data-toggle="list-filter"] i,
button[data-bs-toggle="modal"][data-bs-target*="setup-modal"] i,
.btn-outline-default.btn-sm.border-none i {
  margin: 0 !important;
  display: inline-block;
}

/* =====================================================
   PROGRESS INDICATOR BUTTONS - SINGLE CANONICAL SIZE
   Prevents size flash on load: one rule set, no competing CSS/JS.
   High specificity so it wins over .toolbar-action .btn and other later CSS.
   ===================================================== */
.toolbar-action .progress-indicator-container .btn,
.toolbar-action .progress-indicator-container .btn-outline-secondary,
.toolbar-action .progress-indicator-container .btn-primary,
.toolbar-action .progress-indicator-container a.btn,
.toolbar-action .progress-indicator-container button.btn,
.progress-indicator-container .btn,
.progress-indicator-container .btn-outline-secondary,
.progress-indicator-container .btn-primary,
.progress-indicator-container a.btn,
.progress-indicator-container button.btn,
.progress-indicator-container [data-request="onSave"],
.progress-indicator-container .btn-primary[data-request="onSave"],
.progress-indicator-container .btn-group .btn,
.progress-indicator-container .btn-group [data-request="onSave"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: auto !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0.55rem 1.75rem !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Back button only: square (icon-only), white icon from first paint to avoid flash */
.toolbar-action .progress-indicator-container > .btn-outline-secondary,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary,
.progress-indicator-container > .btn-outline-secondary,
.progress-indicator-container > a.btn-outline-secondary {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1f2b3a 0%, #364a63 100%) !important;
  border: 1px solid #364a63 !important;
  box-shadow: 0 4px 15px rgba(31, 43, 58, 0.3) !important;
}
.progress-indicator-container > .btn-outline-secondary i,
.progress-indicator-container > a.btn-outline-secondary i,
.toolbar-action .progress-indicator-container > .btn-outline-secondary i,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary i {
  color: #ffffff !important;
}
/* Back button: same hover/focus/active effect as Save (primary) button */
.toolbar-action .progress-indicator-container > .btn-outline-secondary:hover,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary:hover,
.progress-indicator-container > .btn-outline-secondary:hover,
.progress-indicator-container > a.btn-outline-secondary:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #364a63 0%, #526484 100%) !important;
  background-color: #526484 !important;
  border: 1px solid #526484 !important;
  border-color: #526484 !important;
  box-shadow: 0 6px 16px rgba(31, 43, 58, 0.4) !important;
}
.toolbar-action .progress-indicator-container > .btn-outline-secondary:focus,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary:focus,
.progress-indicator-container > .btn-outline-secondary:focus,
.progress-indicator-container > a.btn-outline-secondary:focus {
  color: #ffffff !important;
  background: linear-gradient(135deg, #364a63 0%, #526484 100%) !important;
  background-color: #364a63 !important;
  border: 1px solid #526484 !important;
  border-color: #526484 !important;
  box-shadow: 0 6px 16px rgba(31, 43, 58, 0.4), 0 0 0 0.25rem rgba(54, 74, 99, 0.25) !important;
}
.toolbar-action .progress-indicator-container > .btn-outline-secondary:active,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary:active,
.progress-indicator-container > .btn-outline-secondary:active,
.progress-indicator-container > a.btn-outline-secondary:active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2a3a4e 0%, #364a63 100%) !important;
  background-color: #364a63 !important;
  border: 1px solid #364a63 !important;
  border-color: #364a63 !important;
  box-shadow: 0 4px 15px rgba(31, 43, 58, 0.35) !important;
}
.progress-indicator-container > .btn-outline-secondary:hover i,
.progress-indicator-container > .btn-outline-secondary:focus i,
.progress-indicator-container > .btn-outline-secondary:active i,
.progress-indicator-container > a.btn-outline-secondary:hover i,
.progress-indicator-container > a.btn-outline-secondary:focus i,
.progress-indicator-container > a.btn-outline-secondary:active i,
.toolbar-action .progress-indicator-container > .btn-outline-secondary:hover i,
.toolbar-action .progress-indicator-container > .btn-outline-secondary:focus i,
.toolbar-action .progress-indicator-container > .btn-outline-secondary:active i,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary:hover i,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary:focus i,
.toolbar-action .progress-indicator-container > a.btn-outline-secondary:active i {
  color: #ffffff !important;
}

/* Toolbar Delete button: ice/white button like others, ONLY the icon is red. Exclude languages edit. */
.progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *),
.toolbar-action .progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *) {
  background: #f1f4fb !important;
  background-color: #f1f4fb !important;
  border: 2px solid #c9d2e3 !important;
  color: #202938 !important;
  box-shadow: none !important;
}
.progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *):hover,
.toolbar-action .progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *):hover,
.progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *):focus,
.toolbar-action .progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *):focus {
  background: #e8ecf5 !important;
  background-color: #e8ecf5 !important;
  border-color: #c9d2e3 !important;
  color: #202938 !important;
}
/* Only the trash icon is red */
.progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *) i,
.toolbar-action .progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *) i {
  color: #dc3545 !important;
}
.progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *):hover i,
.progress-indicator-container [data-request="onDelete"]:not(.toolbar-languages-edit-right *):focus i {
  color: #dc3545 !important;
}

/* Fix Save button width - prevent stretching in btn-group (like system_logs page buttons) */
/* Toolbar primary buttons (Save, New, etc.): same size as modal footer - 110px min-width, 0.55rem 1.75rem */
.btn-group [data-request="onSave"],
.btn-group .btn-primary[data-request="onSave"],
.btn-group .btn[data-request="onSave"],
.progress-indicator-container [data-request="onSave"],
.progress-indicator-container .btn-primary[data-request="onSave"],
.progress-indicator-container .btn-group [data-request="onSave"],
.progress-indicator-container .btn-group button[data-request="onSave"],
.progress-indicator-container > .btn-primary,
.progress-indicator-container > a.btn-primary,
.toolbar-action .progress-indicator-container > .btn-primary,
.toolbar-action .progress-indicator-container > a.btn-primary {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
  min-width: 110px !important;
  padding: 0.55rem 1.75rem !important;
  height: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-width: 2px !important;
  text-align: center !important;
}

/* Fix btn-group to be inline inside progress-indicator-container - prevents new line */
/* This makes Save button appear on same line as Back button */
/* Use very specific selector with !important to override Bootstrap and inline styles */
div.progress-indicator-container > div.btn-group,
div.progress-indicator-container div.btn-group,
.progress-indicator-container > .btn-group,
.progress-indicator-container .btn-group {
  display: inline-flex !important;
  vertical-align: middle !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 10px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Save loading: no gray overlay on toolbar - keep background transparent so only spinner shows */
.toolbar-action .progress-indicator-container.in-progress .progress-indicator,
.progress-indicator-container.in-progress .progress-indicator {
  background: transparent !important;
  box-shadow: none !important;
}
.toolbar-action .progress-indicator-container.in-progress .progress-indicator.is-opaque,
.progress-indicator-container.in-progress .progress-indicator.is-opaque {
  background: transparent !important;
}

/* Remove white left-to-right shine on hover from toolbar primary buttons */
.progress-indicator-container .btn-primary::before,
.toolbar-action .progress-indicator-container .btn-primary::before {
  display: none !important;
  content: none !important;
}

/* Force NO green on toolbar / progress-indicator primary - solid blue only, 2px border */
html body .toolbar-action .btn-primary,
html body .toolbar-action .progress-indicator-container .btn-primary,
html body .progress-indicator-container .btn-primary,
.toolbar-action .btn-primary,
.toolbar-action .progress-indicator-container .btn-primary,
.progress-indicator-container .btn-primary,
.toolbar-action .btn-primary[data-request="onSave"],
.progress-indicator-container .btn-primary[data-request="onSave"] {
  --bs-primary-rgb: 54, 74, 99 !important;
  --bs-btn-focus-shadow-rgb: 54, 74, 99 !important;
  background: linear-gradient(135deg, #1f2b3a 0%, #364a63 100%) !important;
  background-color: #364a63 !important;
  border: 2px solid #364a63 !important;
  border-color: #364a63 !important;
  box-shadow: 0 4px 15px rgba(31, 43, 58, 0.35) !important;
  color: #ffffff !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
html body .toolbar-action .btn-primary:hover,
html body .toolbar-action .progress-indicator-container .btn-primary:hover,
html body .progress-indicator-container .btn-primary:hover,
.toolbar-action .btn-primary:hover,
.toolbar-action .progress-indicator-container .btn-primary:hover,
.progress-indicator-container .btn-primary:hover,
.toolbar-action .btn-primary[data-request="onSave"]:hover,
.progress-indicator-container .btn-primary[data-request="onSave"]:hover {
  background: linear-gradient(135deg, #364a63 0%, #526484 100%) !important;
  background-color: #526484 !important;
  border-color: #526484 !important;
  box-shadow: 0 6px 16px rgba(31, 43, 58, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
html body .toolbar-action .btn-primary:focus,
html body .toolbar-action .progress-indicator-container .btn-primary:focus,
.toolbar-action .btn-primary:focus,
.toolbar-action .progress-indicator-container .btn-primary:focus,
.progress-indicator-container .btn-primary:focus,
.toolbar-action .btn-primary[data-request="onSave"]:focus,
.progress-indicator-container .btn-primary[data-request="onSave"]:focus {
  background: linear-gradient(135deg, #364a63 0%, #526484 100%) !important;
  background-color: #364a63 !important;
  border-color: #526484 !important;
  box-shadow: 0 6px 16px rgba(31, 43, 58, 0.4), 0 0 0 0.25rem rgba(54, 74, 99, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
html body .toolbar-action .btn-primary:active,
html body .toolbar-action .progress-indicator-container .btn-primary:active,
.toolbar-action .btn-primary:active,
.toolbar-action .progress-indicator-container .btn-primary:active,
.progress-indicator-container .btn-primary:active,
.toolbar-action .btn-primary[data-request="onSave"]:active,
.progress-indicator-container .btn-primary[data-request="onSave"]:active {
  background: linear-gradient(135deg, #2a3a4e 0%, #364a63 100%) !important;
  background-color: #364a63 !important;
  border-color: #364a63 !important;
  box-shadow: 0 4px 15px rgba(31, 43, 58, 0.35) !important;
  color: #ffffff !important;
  transform: translateY(0) !important;
}

/* Toolbar default/ice buttons (Combo, POS Devices List, etc.): same size as primary (110px), same hover effect */
.progress-indicator-container .btn-default,
.progress-indicator-container > a.btn-default,
.progress-indicator-container .btn-group .btn-default,
.toolbar-action .progress-indicator-container .btn-default,
.toolbar-action .progress-indicator-container .btn-group .btn-default {
  min-width: 110px !important;
  padding: 0.55rem 1.75rem !important;
  height: 40px !important;
  min-height: 40px !important;
  border-width: 2px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.progress-indicator-container .btn-default:hover,
.progress-indicator-container > a.btn-default:hover,
.progress-indicator-container .btn-group .btn-default:hover,
.toolbar-action .progress-indicator-container .btn-default:hover {
  background: #e9ecf3 !important;
  background-color: #e9ecf3 !important;
  border-color: #c9d2e3 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}
.progress-indicator-container .btn-default:focus,
.progress-indicator-container > a.btn-default:focus,
.toolbar-action .progress-indicator-container .btn-default:focus {
  background: #e9ecf3 !important;
  background-color: #e9ecf3 !important;
  border-color: #c9d2e3 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 0.2rem rgba(201, 210, 227, 0.35) !important;
  transform: translateY(-1px) !important;
}
.progress-indicator-container .btn-default:active,
.progress-indicator-container > a.btn-default:active,
.toolbar-action .progress-indicator-container .btn-default:active {
  background: #e0e4ed !important;
  background-color: #e0e4ed !important;
  border-color: #c9d2e3 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(0) !important;
}

/* btn-add-widget, btn-close-modal - same size as toolbar (110px) */
.btn-add-widget,
.btn-close-modal {
  min-width: 110px !important;
  padding: 0.55rem 1.75rem !important;
}

/* Mail Templates Page - One button left (New), two buttons right (Layouts, Partials) */
/* When layout class is set by JS, use flex-start so first link's margin-right:auto pushes the rest right */
.toolbar-mail-templates-layout.progress-indicator-container,
.toolbar-action .toolbar-mail-templates-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbar-action .progress-indicator-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Mail templates: left side (New button only) */
.toolbar-mail-templates-layout > a[href*="mail_templates/create"] {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* Mail templates: right-side group (Layouts + Partials) - JS wraps these in .toolbar-mail-templates-right */
.toolbar-mail-templates-layout .toolbar-mail-templates-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* Mail templates edit page - Delete button on the right (JS wraps in .toolbar-mail-templates-edit-right) */
.toolbar-mail-templates-edit-layout.progress-indicator-container,
.toolbar-action .toolbar-mail-templates-edit-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbar-mail-templates-edit-layout .toolbar-mail-templates-edit-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* System Logs Page - Refresh on left, Empty Logs + Request Logs grouped on the right (JS wraps in .toolbar-system-logs-right) */
.toolbar-system-logs-layout.progress-indicator-container,
.toolbar-action .toolbar-system-logs-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Keep Refresh (first child) pinned to the left - no auto margins so it never centers */
.toolbar-system-logs-layout > a[href*="system_logs"]:first-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Right group must stick to the end */
.toolbar-system-logs-layout .toolbar-system-logs-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Menus page - New button on the left, Combo in .toolbar-menus-right on the right */
.toolbar-menus-layout.progress-indicator-container,
.toolbar-action .toolbar-menus-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbar-menus-layout .toolbar-menus-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* Staffs Page - One button left (New), Groups + Roles grouped on the right (JS wraps in .toolbar-staffs-right) */
.toolbar-staffs-layout.progress-indicator-container,
.toolbar-action .toolbar-staffs-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbar-staffs-layout .toolbar-staffs-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* POS configs edit page - Back + Save on left, all other buttons on the right (JS wraps in .toolbar-pos-configs-edit-right) */
.toolbar-pos-configs-edit-layout.progress-indicator-container,
.toolbar-action .toolbar-pos-configs-edit-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbar-pos-configs-edit-layout .toolbar-pos-configs-edit-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-wrap: wrap !important;
}

/* Staffs edit page - Delete (and Impersonate) on the right (JS wraps in .toolbar-staffs-edit-right) */
.toolbar-staffs-edit-layout.progress-indicator-container,
.toolbar-action .toolbar-staffs-edit-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbar-staffs-edit-layout .toolbar-staffs-edit-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* Languages edit page - Check for updates + Delete on the right, both ice/white (JS wraps in .toolbar-languages-edit-right) */
.toolbar-languages-edit-layout.progress-indicator-container,
.toolbar-action .toolbar-languages-edit-layout.progress-indicator-container {
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbar-languages-edit-layout .toolbar-languages-edit-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* Keep Check for updates and Delete in ice/white on languages edit - no color change on hover/focus/active */
.toolbar-languages-edit-right .btn,
.toolbar-languages-edit-right button,
.toolbar-languages-edit-right a.btn {
  background: #f1f4fb !important;
  background-color: #f1f4fb !important;
  border: 2px solid #c9d2e3 !important;
  color: #202938 !important;
  box-shadow: none !important;
  transform: none !important;
}
.toolbar-languages-edit-right .btn:hover,
.toolbar-languages-edit-right .btn:focus,
.toolbar-languages-edit-right .btn:active,
.toolbar-languages-edit-right button:hover,
.toolbar-languages-edit-right button:focus,
.toolbar-languages-edit-right button:active,
.toolbar-languages-edit-right a.btn:hover,
.toolbar-languages-edit-right a.btn:focus,
.toolbar-languages-edit-right a.btn:active {
  background: #f1f4fb !important;
  background-color: #f1f4fb !important;
  border: 2px solid #c9d2e3 !important;
  color: #202938 !important;
  box-shadow: none !important;
  transform: none !important;
}
.toolbar-languages-edit-right .btn i,
.toolbar-languages-edit-right button i,
.toolbar-languages-edit-right a.btn i {
  color: #202938 !important;
}
.toolbar-languages-edit-right .btn:hover i,
.toolbar-languages-edit-right .btn:focus i,
.toolbar-languages-edit-right .btn:active i,
.toolbar-languages-edit-right button:hover i,
.toolbar-languages-edit-right a.btn:hover i {
  color: #202938 !important;
}

/* =====================================================
   MEDIA MANAGER - COMPREHENSIVE FIX
   Fix all button sizes, spacing, and hover effects
   ===================================================== */

/* Reset all media manager buttons to consistent size - ICE WHITE */
/* EXCLUDE Choose button - it should be normal size */
.media-toolbar .btn:not([data-control="media-choose"]):not(.btn-primary[data-control="media-choose"]),
.media-toolbar button:not([data-control="media-choose"]):not(.btn-primary[data-control="media-choose"]),
.media-toolbar a.btn:not([data-control="media-choose"]),
.media-toolbar .btn-group .btn:not([data-control="media-choose"]),
.media-toolbar .input-group .btn:not([data-control="media-choose"]),
.media-toolbar .dropdown-toggle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid rgb(201, 210, 227) !important;
  background: rgb(241, 244, 251) !important;
  background-color: rgb(241, 244, 251) !important;
  color: rgb(32, 41, 56) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  transform: none !important;
}

/* Choose button should be normal size - override any 42x42px rules */
.media-toolbar button[data-control="media-choose"],
.media-toolbar .btn-primary[data-control="media-choose"],
.media-sidebar button[data-control="media-choose"],
.media-sidebar .btn-primary[data-control="media-choose"],
button[data-control="media-choose"],
.btn-primary[data-control="media-choose"],
.btn[data-control="media-choose"],
.btn-block[data-control="media-choose"] {
  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 12px 24px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgb(31, 43, 58) 0%, rgb(54, 74, 99) 100%) !important;
  background-color: rgb(31, 43, 58) !important;
  background-image: linear-gradient(135deg, rgb(31, 43, 58) 0%, rgb(54, 74, 99) 100%) !important;
  border: 2px solid rgb(54, 74, 99) !important;
  border-color: rgb(54, 74, 99) !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: rgba(31, 43, 58, 0.3) 0px 4px 15px !important;
  font-weight: 600 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  z-index: 10 !important;
  position: relative !important;
}

/* Choose button hover state */
button[data-control="media-choose"]:hover,
.btn-primary[data-control="media-choose"]:hover,
.btn[data-control="media-choose"]:hover {
  background: linear-gradient(135deg, rgb(54, 74, 99) 0%, rgb(82, 100, 132) 100%) !important;
  background-color: rgb(54, 74, 99) !important;
  border-color: rgb(82, 100, 132) !important;
  transform: translateY(-1px) !important;
  box-shadow: rgba(31, 43, 58, 0.4) 0px 6px 20px !important;
}

/* Choose button icon should be white */
button[data-control="media-choose"] i,
button[data-control="media-choose"] .fa,
.btn-primary[data-control="media-choose"] i,
.btn-primary[data-control="media-choose"] .fa,
.btn[data-control="media-choose"] i,
.btn[data-control="media-choose"] .fa {
  color: rgb(255, 255, 255) !important;
  margin-right: 8px !important;
}

/* Proper spacing between buttons - 10px gap */
.media-toolbar .btn-group > .btn:not(:last-child),
.media-toolbar .btn-group > button:not(:last-child),
.media-toolbar .btn-group > a.btn:not(:last-child) {
  margin-right: 10px !important;
}

.media-toolbar .btn-group {
  margin-right: 10px !important;
}

.media-toolbar .dropdown {
  margin-right: 10px !important;
}

.media-toolbar .input-group {
  margin-right: 10px !important;
}

/* Hover effects - smooth and consistent - ICE WHITE */
.media-toolbar .btn:hover,
.media-toolbar button:hover,
.media-toolbar a.btn:hover,
.media-toolbar .btn-group .btn:hover,
.media-toolbar .input-group .btn:hover,
.media-toolbar .dropdown-toggle:hover {
  background: rgb(233, 236, 243) !important;
  background-color: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Active state */
.media-toolbar .btn:active,
.media-toolbar button:active,
.media-toolbar a.btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Override any inline styles from JavaScript - ICE WHITE */
.media-toolbar .btn[style],
.media-toolbar button[style],
.media-toolbar a.btn[style] {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgb(241, 244, 251) !important;
  background-color: rgb(241, 244, 251) !important;
  border: 1px solid rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Override hover inline styles - ICE WHITE */
.media-toolbar .btn:hover[style],
.media-toolbar button:hover[style],
.media-toolbar a.btn:hover[style] {
  background: rgb(233, 236, 243) !important;
  background-color: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Ensure icons are visible and properly sized - ICE WHITE theme */
.media-toolbar .btn i,
.media-toolbar button i,
.media-toolbar a.btn i {
  font-size: 16px !important;
  color: rgb(32, 41, 56) !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix toolbar item spacing */
.media-toolbar .toolbar-item {
  margin-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Ensure btn-group doesn't break layout */
.media-toolbar .btn-group {
  display: inline-flex !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix input-group buttons */
.media-toolbar .input-group {
  display: inline-flex !important;
  vertical-align: middle !important;
}

.media-toolbar .input-group .btn {
  border-radius: 10px !important;
  margin: 0 !important;
}

.media-toolbar .input-group > .btn:not(:last-child) {
  margin-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.media-toolbar .input-group > .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -2px !important;
}

/* Cash Drawers Toolbar - Back and Save on left, others on right */
/* Left side: Back button */
.toolbar-grouped .progress-indicator-container > a[href*="cash_drawers"]:not([data-request]) {
  margin-right: 10px !important;
  margin-left: 0 !important;
}

/* Left side: Save button group */
.toolbar-grouped .progress-indicator-container > .btn-group {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* Right side: Test Connection button */
.toolbar-grouped .progress-indicator-container > a[data-request="onTestConnection"] {
  margin-left: auto !important;
  margin-right: 10px !important;
}

/* Right side: Open Drawer button - Same as Test Connection (ice white) */
.toolbar-grouped .progress-indicator-container > a[data-request="onOpenDrawer"],
.toolbar-grouped .progress-indicator-container > a.btn-success[data-request="onOpenDrawer"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
  background: rgb(241, 244, 251) !important;
  color: rgb(32, 41, 56) !important;
  border: 1px solid rgb(201, 210, 227) !important;
  box-shadow: none !important;
}

.toolbar-grouped .progress-indicator-container > a[data-request="onOpenDrawer"]:hover,
.toolbar-grouped .progress-indicator-container > a.btn-success[data-request="onOpenDrawer"]:hover {
  background: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
}

/* Right side: Delete button */
.toolbar-grouped .progress-indicator-container > a[data-request="onDelete"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* POS Configs Toolbar - Back and Save on left, others on right */
/* Left side: Back button */
.toolbar-grouped .progress-indicator-container > a[href*="pos_configs"]:not([data-request]) {
  margin-right: 10px !important;
  margin-left: 0 !important;
}

/* Right side: Delete button for POS configs - first right-side button after save button group */
.toolbar-grouped .progress-indicator-container > .btn-group ~ a[data-request="onDelete"] {
  margin-left: auto !important;
  margin-right: 10px !important;
  background: rgb(241, 244, 251) !important;
  color: rgb(32, 41, 56) !important;
  border: 1px solid rgb(201, 210, 227) !important;
  box-shadow: none !important;
}

.toolbar-grouped .progress-indicator-container > .btn-group ~ a[data-request="onDelete"]:hover {
  background: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
}

/* Right side: Test Integration button */
.toolbar-grouped .progress-indicator-container > .btn-group ~ button[id*="test-integration"],
.toolbar-grouped .progress-indicator-container > .btn-group ~ button[data-request="onTestIntegration"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
  background: rgb(241, 244, 251) !important;
  color: rgb(32, 41, 56) !important;
  border: 1px solid rgb(201, 210, 227) !important;
  box-shadow: none !important;
}

.toolbar-grouped .progress-indicator-container > button[id*="test-integration"]:hover,
.toolbar-grouped .progress-indicator-container > button[data-request="onTestIntegration"]:hover {
  background: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
}

/* Right side: Sync Menu button */
.toolbar-grouped .progress-indicator-container > .btn-group ~ button[data-request="onSyncMenu"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
  background: rgb(241, 244, 251) !important;
  color: rgb(32, 41, 56) !important;
  border: 1px solid rgb(201, 210, 227) !important;
  box-shadow: none !important;
}

.toolbar-grouped .progress-indicator-container > button[data-request="onSyncMenu"]:hover {
  background: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
}

/* Right side: Register Webhook button */
.toolbar-grouped .progress-indicator-container > .btn-group ~ button[id*="register-webhook"],
.toolbar-grouped .progress-indicator-container > .btn-group ~ button[data-request="onRegisterWebhook"],
.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
  background: rgb(241, 244, 251) !important;
  background-color: rgb(241, 244, 251) !important;
  color: rgb(32, 41, 56) !important;
  border: 1px solid rgb(201, 210, 227) !important;
  box-shadow: none !important;
}

.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"]:hover,
.toolbar-grouped .progress-indicator-container > button[data-request="onRegisterWebhook"]:hover {
  background: rgb(233, 236, 243) !important;
  background-color: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
}

/* Override inline styles for Register Webhook button - must override all inline styles */
.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"],
.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"][style],
.toolbar-grouped .progress-indicator-container > button#btn-register-webhook,
.toolbar-grouped .progress-indicator-container > button#btn-register-webhook[style] {
  background: rgb(241, 244, 251) !important;
  background-color: rgb(241, 244, 251) !important;
  background-image: none !important;
  color: rgb(32, 41, 56) !important;
  border: 1px solid rgb(201, 210, 227) !important;
  border-color: rgb(201, 210, 227) !important;
  box-shadow: none !important;
  transform: translateY(0) !important;
}

.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"]:hover,
.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"][style]:hover,
.toolbar-grouped .progress-indicator-container > button#btn-register-webhook:hover,
.toolbar-grouped .progress-indicator-container > button#btn-register-webhook[style]:hover {
  background: rgb(233, 236, 243) !important;
  background-color: rgb(233, 236, 243) !important;
  background-image: none !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
  transform: translateY(-1px) !important;
}

/* Override icon color in Register Webhook button */
.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"] i.fa,
.toolbar-grouped .progress-indicator-container > button[id*="register-webhook"] i.fa[style],
.toolbar-grouped .progress-indicator-container > button#btn-register-webhook i.fa,
.toolbar-grouped .progress-indicator-container > button#btn-register-webhook i.fa[style] {
  color: rgb(32, 41, 56) !important;
}

/* Add spacing between icons and text in POS configs toolbar buttons */
.toolbar-grouped .progress-indicator-container button i.fa,
.toolbar-grouped .progress-indicator-container a[data-request="onDelete"] i.fa {
  margin-right: 8px !important;
}

/* Exception: Back button icon should not have margin (icon only) */
.toolbar-grouped .progress-indicator-container > a[href*="pos_configs"]:not([data-request]) i.fa {
  margin-right: 0 !important;
}

/* =====================================================
   btn-group-toggle radio buttons - GLOBAL (modals, settings, forms)
   Ensure clickable, visible, same style as geocoder/ Nominatim
   ===================================================== */

/* Ensure ALL btn-group-toggle labels are clickable, visible, round (like settings page) */
html body .btn-group-toggle label.btn,
html body .btn-group-toggle .btn,
.btn-group-toggle label.btn,
.btn-group-toggle .btn {
  pointer-events: auto !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  border-radius: 12px !important;
  padding: 0.4rem 1rem !important;
}
.btn-group-toggle .btn-check:checked + .btn,
.btn-group-toggle .btn-check:checked + label.btn {
  color: rgb(255, 255, 255) !important;
}

/* Active/Checked state for toggle button groups - INSTANT color change (no delay) */
/* Override ALL possible transitions - maximum specificity */
html body .btn-group-toggle .btn-check:checked + .btn-light,
html body .btn-group-toggle .btn-check:checked + .btn,
html body .btn-group-toggle input[type="radio"]:checked + .btn-light,
html body .btn-group-toggle input[type="radio"]:checked + .btn,
.btn-group-toggle .btn-check:checked + .btn-light,
.btn-group-toggle .btn-check:checked + .btn,
.btn-group-toggle input[type="radio"]:checked + .btn-light,
.btn-group-toggle input[type="radio"]:checked + .btn {
  background: linear-gradient(135deg, rgb(31, 43, 58) 0%, rgb(54, 74, 99) 100%) !important;
  background-color: rgb(31, 43, 58) !important;
  border-color: rgb(54, 74, 99) !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: rgba(31, 43, 58, 0.3) 0px 4px 15px !important;
  z-index: 2 !important;
  border-radius: 12px !important;
  /* COMPLETELY REMOVE ALL TRANSITIONS - instant change */
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  transition-timing-function: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

/* Ensure all child elements (text, icons) also change color instantly - NO TRANSITIONS */
html body .btn-group-toggle .btn-check:checked + .btn-light *,
html body .btn-group-toggle .btn-check:checked + .btn *,
html body .btn-group-toggle input[type="radio"]:checked + .btn-light *,
html body .btn-group-toggle input[type="radio"]:checked + .btn *,
.btn-group-toggle .btn-check:checked + .btn-light *,
.btn-group-toggle .btn-check:checked + .btn *,
.btn-group-toggle input[type="radio"]:checked + .btn-light *,
.btn-group-toggle input[type="radio"]:checked + .btn * {
  color: rgb(255, 255, 255) !important;
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  transition-timing-function: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

/* Hover state for unchecked buttons in toggle groups */
.btn-group-toggle .btn-check:not(:checked) + .btn-light:hover,
.btn-group-toggle .btn-check:not(:checked) + .btn:hover,
.btn-group-toggle input[type="radio"]:not(:checked) + .btn-light:hover,
.btn-group-toggle input[type="radio"]:not(:checked) + .btn:hover {
  background: rgb(233, 236, 243) !important;
  background-color: rgb(233, 236, 243) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
}

/* Default state for unchecked buttons in toggle groups */
.btn-group-toggle .btn-light,
.btn-group-toggle .btn-check:not(:checked) + .btn-light,
.btn-group-toggle input[type="radio"]:not(:checked) + .btn-light {
  background: rgb(241, 244, 251) !important;
  background-color: rgb(241, 244, 251) !important;
  border-color: rgb(201, 210, 227) !important;
  color: rgb(32, 41, 56) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  /* Keep transitions for unchecked buttons (hover effects) */
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

/* =====================================================
   MEDIA MANAGER MODAL - Fix blurry display
   Ensure modal content is not blurred at ALL screen sizes
   ===================================================== */

/* Remove all blur filters from media manager modal - works at all screen sizes */
.media-modal,
.media-modal .modal-content,
.media-modal .modal-body,
.media-modal .modal-header,
.media-modal .modal-footer,
.media-modal .modal-dialog,
#media-manager,
#media-manager .modal-content,
#media-manager .modal-body,
#media-manager .modal-header,
#media-manager .modal-footer,
#media-manager .modal-dialog {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: relative !important;
  z-index: 1055 !important;
}

/* Ensure modal backdrop doesn't blur the modal content */
.modal-backdrop,
.modal-backdrop.show {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: auto !important;
}

/* Ensure media modal content is interactive - not frozen */
.media-modal .modal-content,
.media-modal .modal-body,
.media-modal .media-list,
.media-modal .media-item,
.media-modal .media-thumb,
.media-modal img,
#media-manager .modal-content,
#media-manager .modal-body,
#media-manager .media-list,
#media-manager .media-item,
#media-manager .media-thumb,
#media-manager img {
  pointer-events: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
}

/* Ensure modal is visible and not blurred when shown - ALL screen sizes */
.modal.show,
.modal.show .modal-content,
.modal.show .modal-dialog,
.media-modal.show,
.media-modal.show .modal-content,
.media-modal.show .modal-dialog,
#media-manager.show,
#media-manager.show .modal-content,
#media-manager.show .modal-dialog {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Force modal to be on top and visible - override any z-index issues */
.media-modal.modal,
#media-manager.modal {
  z-index: 1055 !important;
}

.media-modal.modal.show,
#media-manager.modal.show {
  z-index: 1055 !important;
  display: block !important;
}

/* Prevent media modal from being fullscreen - set reasonable size */
.media-modal .modal-dialog,
#media-manager .modal-dialog,
.media-modal.modal-fullscreen .modal-dialog,
.media-modal.modal-fullscreen-sm-down .modal-dialog,
.media-modal.modal-fullscreen-md-down .modal-dialog,
.media-modal.modal-fullscreen-lg-down .modal-dialog,
.media-modal.modal-fullscreen-xl-down .modal-dialog,
.media-modal.modal-fullscreen-xxl-down .modal-dialog {
  max-width: 90% !important;
  width: 1200px !important;
  max-height: 90vh !important;
  margin: 1.75rem auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
}

/* Prevent modal content from being fullscreen height */
.media-modal .modal-content,
#media-manager .modal-content,
.media-modal.modal-fullscreen .modal-content,
.media-modal.modal-fullscreen-sm-down .modal-content,
.media-modal.modal-fullscreen-md-down .modal-content,
.media-modal.modal-fullscreen-lg-down .modal-content,
.media-modal.modal-fullscreen-xl-down .modal-content,
.media-modal.modal-fullscreen-xxl-down .modal-content {
  max-height: 90vh !important;
  height: auto !important;
  border-radius: 16px !important;
  border: 2px solid #e5e9f2 !important;
}

/* Responsive sizing for smaller screens */
@media (max-width: 1200px) {
  .media-modal .modal-dialog,
  #media-manager .modal-dialog {
    width: 95% !important;
    max-width: 95% !important;
  }
}

@media (max-width: 768px) {
  .media-modal .modal-dialog,
  #media-manager .modal-dialog {
    width: 98% !important;
    max-width: 98% !important;
    margin: 0.5rem auto !important;
  }
}

/* Media queries to ensure fixes work at all breakpoints */
@media (max-width: 576px) {
  .media-modal,
  .media-modal .modal-content,
  #media-manager,
  #media-manager .modal-content {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .media-modal,
  .media-modal .modal-content,
  #media-manager,
  #media-manager .modal-content {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .media-modal,
  .media-modal .modal-content,
  #media-manager,
  #media-manager .modal-content {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (min-width: 993px) {
  .media-modal,
  .media-modal .modal-content,
  #media-manager,
  #media-manager .modal-content {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Override Bootstrap's global .btn transition for checked toggle buttons */
/* Bootstrap has: transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
/* We need to completely remove this for instant color changes */
html body .btn-group-toggle .btn-check:checked + .btn.btn-light,
html body .btn-group-toggle .btn-check:checked + .btn,
html body .btn-group-toggle input[type="radio"]:checked + .btn.btn-light,
html body .btn-group-toggle input[type="radio"]:checked + .btn,
html body .btn-group-toggle .btn-check:checked + label.btn-light,
html body .btn-group-toggle .btn-check:checked + label.btn,
html body .btn-group-toggle input[type="radio"]:checked + label.btn-light,
html body .btn-group-toggle input[type="radio"]:checked + label.btn {
  /* Override Bootstrap's transition completely - instant change */
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  transition-timing-function: none !important;
  -webkit-transition: none !important;
  -webkit-transition-property: none !important;
  -webkit-transition-duration: 0s !important;
  -webkit-transition-delay: 0s !important;
  -moz-transition: none !important;
  -moz-transition-property: none !important;
  -moz-transition-duration: 0s !important;
  -moz-transition-delay: 0s !important;
  -o-transition: none !important;
  -o-transition-property: none !important;
  -o-transition-duration: 0s !important;
  -o-transition-delay: 0s !important;
}


/* =====================================================
   SETTINGS PAGE - Fix Save button position
   Ensure Save button appears next to Back button on left
   ===================================================== */

/* Settings page: Ensure progress-indicator-container uses flexbox */
.progress-indicator-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Settings page: Back button on left */
.progress-indicator-container > a[href*="settings"]:not([data-request]) {
  margin-right: 10px !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
}

/* Settings page: Save button immediately after Back button (no margin-left auto to push it right) */
.progress-indicator-container > a[href*="settings"]:not([data-request]) + a[data-request="onSave"],
.progress-indicator-container > a[data-request="onSave"]:not([href*="settings"]) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* =====================================================
   ALL PAGES - Toolbar order: LEFT 1 Back, 2 New, 3 Save. RIGHT all other buttons.
   ===================================================== */

.progress-indicator-container,
.toolbar-action .progress-indicator-container {
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* 1) Back - first on left */
.progress-indicator-container > .btn-outline-secondary,
.progress-indicator-container > a.btn-outline-secondary {
  margin-right: 0 !important;
  margin-left: 0 !important;
  order: 1 !important;
  flex-shrink: 0 !important;
}

/* 2) New (primary create link) - second on left */
.progress-indicator-container > a.btn-primary[href*="create"] {
  order: 2 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* btn-group that contains New (create link) - second on left */
.progress-indicator-container > .btn-group:has(a.btn-primary[href*="create"]) {
  order: 2 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

/* 3) Save - third on left */
.progress-indicator-container > [data-request="onSave"]:not(.btn-group),
.progress-indicator-container > button[data-request="onSave"]:not(.btn-group) {
  order: 3 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* btn-group that contains Save (and no create link) - third on left */
.progress-indicator-container > .btn-group:has([data-request="onSave"]):not(:has(a.btn-primary[href*="create"])) {
  order: 3 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

.progress-indicator-container > .btn-group [data-request="onSave"],
.progress-indicator-container > .btn-group button[data-request="onSave"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Right side: bulk container + all other buttons */
#toolbar-bulk-container {
  order: 10 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.progress-indicator-container > .btn-group:not(:has([data-request="onSave"])):not(:has(a.btn-primary[href*="create"])),
.progress-indicator-container > .btn-default,
.progress-indicator-container > a.btn-default,
.progress-indicator-container > .btn-danger,
.progress-indicator-container > a.btn-danger,
.progress-indicator-container > button.btn-danger {
  order: 10 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* Other direct children - right side */
.progress-indicator-container > *:not(.btn-outline-secondary):not(a.btn-outline-secondary):not(.btn-group):not([data-request="onSave"]):not(button[data-request="onSave"]):not(a.btn-primary[href*="create"]):not(.btn-danger):not(button.btn-danger):not(input):not(#toolbar-bulk-container) {
  order: 10 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.progress-indicator-container > input[type="hidden"] {
  display: none !important;
  order: 999 !important;
}


/* =====================================================
   SETTINGS PAGE - Fix broken card layout
   ===================================================== */

/* Force settings card links to stay block display - override ALL inline styles */
.settings-card-link,
a.settings-card-link,
a[class*="settings-card-link"],
a.settings-card-link[style],
a[role="button"].settings-card-link,
a[role="button"][href*="/admin/settings/edit/"],
a[role="button"][href*="/admin/settings"][class*="text-reset"] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure cards maintain proper layout */
.settings-card-link .card,
a.settings-card-link .card {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Fix card body layout */
.settings-card-link .card-body,
a.settings-card-link .card-body {
  display: flex !important;
  align-items: center !important;
}

/* Ensure row layout works correctly */
.container-fluid .row .col-lg-4 .settings-card-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* =====================================================
   SETTINGS PAGE - Fix About card and card heights
   ===================================================== */

/* Fix About card - make it white like other cards, only icon dark blue */
.settings-card-link--about .settings-card--about,
.settings-card-link--about .card.settings-card--about {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  color: #364a63 !important;
}

.settings-card-link--about .settings-card--about .card-body,
.settings-card-link--about .card.settings-card--about .card-body {
  background-color: transparent !important;
  color: #364a63 !important;
  min-height: 140px !important;
  height: 140px !important;
}

.settings-card-link--about .settings-card--about h5,
.settings-card-link--about .card.settings-card--about h5 {
  color: #364a63 !important;
}

.settings-card-link--about .settings-card--about .text-muted,
.settings-card-link--about .card.settings-card--about .text-muted,
.settings-card-link--about .settings-card--about p.text-muted,
.settings-card-link--about .card.settings-card--about p.text-muted {
  color: #6b7280 !important;
}

/* About card icon - dark blue background, white icon */
.settings-card-link--about .settings-card--about .about-card__icon,
.settings-card-link--about .card.settings-card--about .about-card__icon {
  background-color: #364a63 !important;
  background: #364a63 !important;
  border: 1px solid #364a63 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
}

.settings-card-link--about .settings-card--about .about-card__icon i,
.settings-card-link--about .card.settings-card--about .about-card__icon i {
  color: #ffffff !important;
}

/* Ensure ALL cards have same height - fix last row issue */
.settings-card-link .card,
.settings-card-link .card.bg-light,
.settings-card-link--about .settings-card--about,
.settings-card-link--about .card.settings-card--about {
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
}

/* Ensure card body fills the card */
.settings-card-link .card .card-body,
.settings-card-link--about .settings-card--about .card-body {
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Remove ALL hover effects from settings cards - card and icon stay static */
.settings-card-link:hover,
.settings-card-link:focus,
.settings-card-link:hover .card,
.settings-card-link:focus .card,
.settings-card-link:hover .card.bg-light,
.settings-card-link:focus .card.bg-light,
.settings-card-link--about:hover .settings-card--about,
.settings-card-link--about:focus .settings-card--about,
.settings-card-link:hover .about-card__icon,
.settings-card-link:focus .about-card__icon,
.settings-card-link:hover .card.bg-light .about-card__icon,
.settings-card-link:focus .card.bg-light .about-card__icon,
.settings-card-link:hover .card.settings-card--about .about-card__icon,
.settings-card-link:focus .card.settings-card--about .about-card__icon {
  transform: none !important;
  scale: 1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Repeater remove buttons - ONLY size effect on hover, no color/background changes */
html body .repeater-item-remove .btn-outline-danger,
html body .repeater-item-remove a.btn-outline-danger,
html body .repeater-item-remove .btn[data-control="remove-item"],
html body a.btn-outline-danger[data-control="remove-item"],
html body .btn-outline-danger.border-none[data-control="remove-item"],
html body .repeater-item .btn-outline-danger[data-control="remove-item"],
html body .repeater-item a.btn-outline-danger[data-control="remove-item"] {
  transition: transform 0.2s ease !important;
  /* Override Bootstrap CSS variables to prevent hover color changes */
  --bs-btn-hover-color: var(--bs-btn-color) !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-hover-border-color: var(--bs-btn-border-color) !important;
}

html body .repeater-item-remove .btn-outline-danger:hover,
html body .repeater-item-remove a.btn-outline-danger:hover,
html body .repeater-item-remove .btn[data-control="remove-item"]:hover,
html body a.btn-outline-danger[data-control="remove-item"]:hover,
html body .btn-outline-danger.border-none[data-control="remove-item"]:hover,
html body .repeater-item .btn-outline-danger[data-control="remove-item"]:hover,
html body .repeater-item a.btn-outline-danger[data-control="remove-item"]:hover {
  transform: scale(1.1) !important;
  /* NO color/background changes - ONLY size effect */
  /* Force preserve original colors by not setting them (let them stay as-is) */
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .repeater-item-remove .btn-outline-danger:hover i,
html body .repeater-item-remove a.btn-outline-danger:hover i,
html body .repeater-item-remove .btn[data-control="remove-item"]:hover i,
html body a.btn-outline-danger[data-control="remove-item"]:hover i,
html body .btn-outline-danger.border-none[data-control="remove-item"]:hover i,
html body .repeater-item .btn-outline-danger[data-control="remove-item"]:hover i,
html body .repeater-item a.btn-outline-danger[data-control="remove-item"]:hover i {
  /* Icon should not transform separately - button handles the scale */
  transform: none !important;
}

/* Remove ALL green focus colors from form fields - MAXIMUM SPECIFICITY - NO TRANSITION DELAY */
html body .form-control:focus,
html body input:focus,
html body textarea:focus,
html body select:focus,
html body .form-select:focus,
html body .form-control:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible,
html body select:focus-visible,
html body .form-control:active,
html body input:active,
html body textarea:active,
html body select:active,
html body .input-group:focus-within,
html body .input-group:focus-within .form-control {
  border-color: #364a63 !important;
  border-color: rgb(54, 74, 99) !important;
  outline: none !important;
  outline-color: #364a63 !important;
  /* Remove any green colors from box-shadow - use dark blue */
  box-shadow: 0 0 0 4px rgba(54, 74, 99, 0.1) !important;
  -webkit-box-shadow: 0 0 0 4px rgba(54, 74, 99, 0.1) !important;
  -moz-box-shadow: 0 0 0 4px rgba(54, 74, 99, 0.1) !important;
  /* Remove transition delay - instant change */
  transition: none !important;
}

/* Remove focus styles when NOT focused - prevent dark blue from staying */
html body .form-control:not(:focus):not(:focus-visible),
html body input:not(:focus):not(:focus-visible),
html body textarea:not(:focus):not(:focus-visible),
html body select:not(:focus):not(:focus-visible),
html body .form-select:not(:focus):not(:focus-visible) {
  border-color: #e5e9f2 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Override Bootstrap focus ring if it uses green */
html body .form-control:focus:not(:focus-visible),
html body input:focus:not(:focus-visible),
html body select:focus:not(:focus-visible) {
  border-color: #364a63 !important;
  box-shadow: 0 0 0 4px rgba(54, 74, 99, 0.1) !important;
  transition: none !important;
}

/* =====================================================
   FORM INPUT FIELDS - Ensure all borders are visible
   Fix missing bottom and left edges
   ===================================================== */

/* Ensure all form controls have visible borders on ALL sides with rounded corners */
html body .form-control,
html body input[type="text"],
html body input[type="email"],
html body input[type="number"],
html body input[type="password"],
html body input[type="search"],
html body input[type="url"],
html body input[type="tel"],
html body input[type="time"],
html body input[type="datetime-local"],
html body textarea,
html body select,
html body .form-select {
  border: 1px solid #e5e9f2 !important;
  border-top: 1px solid #e5e9f2 !important;
  border-right: 1px solid #e5e9f2 !important;
  border-bottom: 1px solid #e5e9f2 !important;
  border-left: 1px solid #e5e9f2 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* Ensure borders are not clipped */
}

/* Ensure borders are visible on focus with rounded corners */
html body .form-control:focus,
html body input:focus,
html body textarea:focus,
html body select:focus,
html body .form-select:focus {
  border: 1px solid #364a63 !important;
  border-top: 1px solid #364a63 !important;
  border-right: 1px solid #364a63 !important;
  border-bottom: 1px solid #364a63 !important;
  border-left: 1px solid #364a63 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
}

/* Ensure parent containers don't clip borders */
html body .form-group,
html body .input-group,
html body .field-group,
html body .control-group {
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Fix inputs inside input-group - ensure ALL borders are visible including left border with rounded corners */
html body .input-group .form-control,
html body .input-group input,
html body .input-group textarea,
html body .input-group select {
  border: 1px solid #e5e9f2 !important;
  border-top: 1px solid #e5e9f2 !important;
  border-right: 1px solid #e5e9f2 !important;
  border-bottom: 1px solid #e5e9f2 !important;
  border-left: 1px solid #e5e9f2 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
}

/* Fix inputs inside input-group on focus - ensure ALL borders are visible with rounded corners */
html body .input-group .form-control:focus,
html body .input-group input:focus,
html body .input-group textarea:focus,
html body .input-group select:focus {
  border: 1px solid #364a63 !important;
  border-top: 1px solid #364a63 !important;
  border-right: 1px solid #364a63 !important;
  border-bottom: 1px solid #364a63 !important;
  border-left: 1px solid #364a63 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
}

/* Fix height overflow - ensure inputs match parent container height */
html body .input-group {
  height: auto !important;
  min-height: 40px !important;
  align-items: stretch !important;
}

html body .input-group .form-control,
html body .input-group input[type="text"],
html body .input-group input[type="time"],
html body .input-group input[type="datetime-local"] {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 1.5 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

html body .input-group .input-group-text {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e5e9f2 !important;
  border-left: none !important; /* Remove left border when connected to input */
  border-radius: 0 12px 12px 0 !important; /* Rounded on right side only */
  -webkit-border-radius: 0 12px 12px 0 !important;
  -moz-border-radius: 0 12px 12px 0 !important;
}

/* When input-group-text is on the left, round left side */
html body .input-group > .input-group-text:first-child {
  border-left: 1px solid #e5e9f2 !important;
  border-right: none !important;
  border-radius: 12px 0 0 12px !important; /* Rounded on left side only */
  -webkit-border-radius: 12px 0 0 12px !important;
  -moz-border-radius: 12px 0 0 12px !important;
}

/* When focused, show focus frame on left edge (input-group-text) - Slug/permalink fields */
html body .input-group:focus-within > .input-group-text:first-child {
  border-left: 1px solid #364a63 !important;
}

/* When input is after input-group-text, remove left border-radius */
html body .input-group > .input-group-text + .form-control,
html body .input-group > .input-group-text + input {
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important; /* Rounded on right side only */
  -webkit-border-radius: 0 12px 12px 0 !important;
  -moz-border-radius: 0 12px 12px 0 !important;
}

/* When input is before input-group-text, remove right border-radius */
html body .input-group > .form-control + .input-group-text,
html body .input-group > input + .input-group-text {
  border-left: none !important;
}

/* Override input-group focus-within green shadow */
html body .input-group:focus-within {
  box-shadow: 0 0 0 4px rgba(54, 74, 99, 0.1) !important;
  transition: none !important;
}

html body .input-group:not(:focus-within) {
  box-shadow: none !important;
}

/* Repeater handle buttons (drag handles) - ONLY size effect on hover, no color/background changes */
html body .repeater-item-handle .btn,
html body .repeater-item-handle .btn[class*="handle"],
html body .btn[class*="repeater"][class*="handle"],
html body .btn.repeater-formnotesuggestionsentences-items-note-suggestion-sentences-handle,
html body .repeater-item-handle button,
html body .repeater-item-handle div.btn {
  transition: transform 0.2s ease !important;
}

html body .repeater-item-handle .btn:hover,
html body .repeater-item-handle .btn[class*="handle"]:hover,
html body .btn[class*="repeater"][class*="handle"]:hover,
html body .btn.repeater-formnotesuggestionsentences-items-note-suggestion-sentences-handle:hover,
html body .repeater-item-handle button:hover,
html body .repeater-item-handle div.btn:hover {
  transform: scale(1.1) !important;
  /* NO color/background changes - ONLY size effect */
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  border-color: inherit !important;
}

html body .repeater-item-handle .btn:hover i,
html body .repeater-item-handle .btn[class*="handle"]:hover i,
html body .btn[class*="repeater"][class*="handle"]:hover i,
html body .btn.repeater-formnotesuggestionsentences-items-note-suggestion-sentences-handle:hover i,
html body .repeater-item-handle button:hover i,
html body .repeater-item-handle div.btn:hover i {
  /* Icon should not transform separately - button handles the scale */
  transform: none !important;
  color: inherit !important;
}

/* ===== List table: bulk-actions row gap and black edge fix ===== */
/* When a row checkbox is selected, the bulk-actions row appears; this keeps it
   compact (no 65px gap) and removes the harsh black line above the data rows. */
.list-table .bulk-actions td.bulk-actions-cell,
.list-table .bulk-actions td.w-100.pb-0 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.list-table .table > tbody {
  border-top: 1px solid transparent !important;
}

/* Completely hide bulk-actions row in list tables (override .bulk-actions:not(.hide) ) */
html body .list-table .table .bulk-actions,
html body .list-table .bulk-actions.hide,
html body .list-table .bulk-actions:not(.hide) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Rich editor toolbar - override admin.css .btn 40px and .btn-lg 48px to 38px, same rounded corners */
html body .note-editor .note-toolbar .btn,
html body .note-editor .note-toolbar .note-btn,
html body .note-editor .note-toolbar button,
html body .note-editor .note-toolbar .btn-lg,
html body .note-editor .note-toolbar .dropdown-toggle {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 10px !important;
}

/* =====================================================
   DROPDOWN FIELDS (.ss-main) – same size as .form-control
   Match height, width, padding and font to text inputs
   ===================================================== */
:root {
  --ss-main-height: 40px !important;
}
/* Wrapper so dropdown container is full width like input container */
html body .control-selectlist,
html body .form-group .control-selectlist {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}
html body .ss-main {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 8px 12px !important;
  line-height: 22px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
html body .ss-main .ss-values {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
}
html body .ss-main .ss-values .ss-single,
html body .ss-main .ss-values .ss-placeholder {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 22px !important;
  font-size: 15px !important;
  align-items: center !important;
  width: 100% !important;
}
/* Ensure dropdown takes full width in any form wrapper */
html body .form-group .ss-main,
html body .control-group .ss-main,
html body .field-group .ss-main,
html body .control-selectlist .ss-main {
  width: 100% !important;
  max-width: 100% !important;
}