:root {
  --blue: var(--primary-color);
  --green: #38D99E;
  --fivex-bg: #f8f9fa;
  --fivex-card-bg: #ffffff;
  --fivex-white: #ffffff;
  --fivex-border: #dee2e6;
  --fivex-text: #252525;
  --fivex-text-secondary: #6c757d;
  --fivex-blue: #0077ff;
  --fivex-green: #28a745;
  --fivex-yellow: #ffeb63;
  --fivex-lightgreen: #1cde9f;
  --fivex-lightblue: #06f4f2;
  --fivex-red: #f32e1e;
  --fivex-gray: #eaedf0;
  --fivex-light-gray: #f5f6f8;
  --bg-color: #fbfaf8;
  --text-color: #6f6f6f;
  --primary-color: #0077FF;
  --primary-darker-color: var(--primary-color);
  --app-zoom: 0.85;
  --fivex-card-shadow: 0 0 20px rgba(15, 23, 42, 0.03);
  --fivex-card-shadow-hover: 0 4px 16px rgba(15, 23, 42, 0.08);
  
}

@font-face {
  font-family: 'Heebo';
  src: url('../fonts/Heebo/Heebo-Black.ttf');
  font-weight: 800;
}

@font-face {
  font-family: 'Heebo';
  src: url('../fonts/Heebo/Heebo-ExtraBold.ttf');
  font-weight: 700;
}
@font-face {
  font-family: 'Heebo';
  src: url('../fonts/Heebo/Heebo-Bold.ttf');
  font-weight: 600;
}
@font-face {
  font-family: 'Heebo';
  font-weight: 500;
  src: url('../fonts/Heebo/Heebo-Medium.ttf');
}
@font-face {
  font-family: 'Heebo';
    font-weight: 400;
  src: url('../fonts/Heebo/Heebo-Regular.ttf');
}
@font-face {
  font-family: 'Heebo';
  font-weight: 300;
  src: url('../fonts/Heebo/Heebo-Regular.ttf');
}
@font-face {
  font-family: 'Heebo';
  font-weight: 200;
  src: url('../fonts/Heebo/Heebo-Thin.ttf');
}

body, .table {
  color: rgb(0, 0, 0);
  font-weight: 400;
  font-family: 'Plus Jakarta Sans', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial,sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", serif;
}

/* width */
::-webkit-scrollbar {
  width: 7.5px;
  height: 5px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(125, 125, 125, 0.05);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(125, 125, 125, 0.25);
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 125, 125, 0.75);
}

body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control {
  padding-top: 2px;
}

.select-info {
  position: relative;
  padding-left: 10px;
}

.widget-table {
    width: 100%;
    margin-bottom: 1rem;
    color: white;
}


.dt-buttons {
  position: relative;
  display: inline-block;
}
.dataTables_paginate {
  margin-top: 10px !important;
}
.dataTables_length {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
}
.dataTables_info {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}
.dataTables_wrapper {
  position: relative;
}

div.dataTables_wrapper div.dataTables_processing {
  border-radius: 10px;
  color: #000;
}

div.dataTables_wrapper div.dataTables_paginate {
  width: 100%;
  text-align: center;
}
div.dataTables_wrapper div.dataTables_filter {
  position: relative;
  float: right;
  display: inline-block;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  justify-content: center;
}

div.dataTables_wrapper div.dataTables_paginate .page-item.active .page-link,
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.current:hover {
  color: #fff;
}
div.dt-button-collection .dt-button-active:after {
  display: none !important;
}
.dataTables_processing {
  z-index: 999;
  position: fixed !important;
}
.dataTables_processing h4 {
  color: #000;
}
.spinner-border {
  color: var(--primary-color, #0077ff);
}

.dataTables_processing .spinner-border {
  position: relative;
  margin-top: 40px;
}

/* DataTables BS5 appends a dot-loader after custom processing HTML — hide duplicate */
.dataTables_processing:has(.spinner-border) > div:last-child {
  display: none !important;
}

.dataTables_scrollHead {
  z-index: 0 !important;
}

@media screen and (max-width: 768px) {
  .dt-buttons, .dataTables_length, div.dataTables_wrapper div.dataTables_filter, .niceProductsButtonsWrapper {
    display: block;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    float: none;
  }
}





.header-selected-flag {
  width: 35px;
  height: auto;
}

.random_search_term {
  display: none;
}

.random_search_term td {
  animation: .5s slide-right;
  font-weight: 600;
}

@keyframes slide-right {
  0% {
    padding-left: 0;
    opacity: 0;
    color: rgb(0, 0, 0);
  }
  50% {
    padding-left: 0;
    opacity: 0;
    color: red;
  }
  100% {
    padding-left: 25px;
    opacity: 1;
    color: rgb(0, 0, 0);
  }
}

.ui-datepicker a.ui-state-default {
  border: 1px solid rgb(240,240,240);
  background: #fff;
  color: rgb(10,10,10);
}
.ui-datepicker a.ui-state-default:hover {
  border: 1px solid rgb(245,245,245);
  background: rgb(245,245,245);
  color: rgb(15,15,15);
}
.ui-datepicker a.ui-state-active {
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: white;
}

.ui-autocomplete-category {
  background: #e9edf3;
  padding: 2.5px 10px;
  font-size: 12px;
  text-align: center;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  font-size: 14px;
  border-radius: 0px;
  margin-top: 0px;
  border: solid 1px #e9edf3;
  font-weight: 500;
  color: #202020;
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front .ui-menu-item-wrapper {
  border-radius: 0px;
}

#wrapper #content-wrapper,
.wrapper .main {
  background-color: rgb(255, 255, 255);
}

/* Dark mode support for iPhone/iPad */
/* @media screen and (max-width: 1024px) and (prefers-color-scheme: dark) {
  #wrapper #content-wrapper {
    background-color: rgb(18, 18, 18) !important;
}
  
  body {
    background-color: rgb(18, 18, 18) !important;
  }
} Pas als darkmode erin zit aan zetten

@media screen and (max-width: 1024px) and (prefers-color-scheme: dark) {
  #wrapper #content-wrapper {
    background-color: rgb(18, 18, 18) !important;
  }
}
*/


.btn-icon-split .text {
  border: solid 1px #e8e8e8;
}

.selected-items-actions .btn-icon-split .text {
  border: solid 0 #e8e8e8;
}


form.user .form-control-user, form.user .btn-user {
  border-radius: 0 !important;
}
form.user select.form-control-user {
  height: 50px;
}


.home-dashboard-tile, .home-dashboard-tile-white {
  padding-left: 5px;
  padding-right: 5px;
}
.home-tile-title {
  color: rgb(0, 0, 0) !important;
  font-weight: 450 !important;
}

footer.sticky-footer,
footer {
  background: rgb(240, 240, 240) !important;
}


#search_products_autocomplete {
  font-size: 16px !important;
  background: #fff !important;
  float: right;
  border: solid 1px #e8e8e8 !important;
}


/* Remove px-5 horizontal padding on mobile for full-width content */
@media (max-width: 767.98px) {
  .container-fluid.px-5 {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }
}
#content-wrapper .container, #content-wrapper .container-fluid,
.main .container, .main .container-fluid {
  min-height: 100vh;
}

.container-fluid {
    padding-top: 35px;
}

/* Start main page header part */

.page-header {
  position: relative;
  margin-bottom: 1.5rem;
  margin-left: 5px;
  margin-right: 5px;
}
.main-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
}
.main-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.main-buttons {
  position: absolute;
  right: 0;
  top: 7.5px;
  margin-bottom: 5px;
}
.main-buttons .btn {
  position: relative;
  margin-left: 5px;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .main-buttons {
    position: relative;
    right: auto;
    top: 0px;
  }

  .main-buttons .btn {
    position: relative;
    margin-left: 0px;
    margin-right: 5px;
  }

}

/* End main page header part */

.topbar, .navbar-bg {
  height: 65px;
  margin-bottom: 10px !important;
}

.topbar-mobile-logo {
  width: auto;
  height: 39px;
  justify-content: center;
  border-radius: 9px;
  text-decoration: none;
  padding: 0 4px;
}

.topbar-mobile-logo:hover,
.topbar-mobile-logo:focus {
  text-decoration: none;
}

.topbar-mobile-logo img {
  width: auto;
  height: 31px;
  max-width: 116px;
  object-fit: contain;
  display: block;
}

/* Responsive sidebar toggle — modern flat button */
.navbar-bg #sidebarToggleTop,
.topbar #sidebarToggleTop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px !important;
  height: 39px;
  min-width: 39px;
  padding: 0;
  margin-left: 0.5rem;
  border: 1px solid #dfe4ee;
  border-radius: 9px;
  background: #f7f8fb;
  color: var(--primary-color);
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.navbar-bg #sidebarToggleTop:hover,
.topbar #sidebarToggleTop:hover,
.navbar-bg #sidebarToggleTop:focus,
.topbar #sidebarToggleTop:focus {
  background: #eef3ff;
  border-color: #cfd9ee;
  color: var(--primary-color);
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

.navbar-bg #sidebarToggleTop:active,
.topbar #sidebarToggleTop:active {
  background: #e5ecfb;
  border-color: #c2cde3;
}

.navbar-bg #sidebarToggleTop .sidebar-button-icon,
.topbar #sidebarToggleTop .sidebar-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 17px;
  line-height: 1;
  color: currentColor;
  margin: 0;
}

.navbar-bg #sidebarToggleTop .fa-bars,
.topbar #sidebarToggleTop .fa-bars {
  font-size: 18px;
}

.navbar-bg #sidebarToggleTop .fa-times,
.topbar #sidebarToggleTop .fa-times {
  font-size: 16px;
}

@media (min-width: 1200px) {
  .topbar #sidebarToggleTop {
    display: none !important;
  }
}

@media (min-width: 1201px) {
  /* Prevent initial page-load flash: the sidebar is rendered with .toggled before JS normalizes it. */
  .sidebar.toggled {
    overflow: visible;
    width: 14rem !important;
  }

  .sidebar.toggled .nav-item .nav-link,
  .sidebar.toggled .sidebar-item .sidebar-link {
    display: block;
    width: 14rem;
    text-align: left;
    padding: 1rem;
  }

  .sidebar.toggled .nav-item .nav-link span,
  .sidebar.toggled .sidebar-item .sidebar-link span {
    display: inline;
    font-size: 0.85rem;
  }

  .sidebar.toggled .nav-item .nav-link i,
  .sidebar.toggled .sidebar-item .sidebar-link i {
    margin-right: 0.25rem;
  }

  .sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after,
  .sidebar.toggled .nav-item .nav-link[data-bs-toggle="collapse"]::after,
  .sidebar.toggled .sidebar-item .sidebar-link[data-bs-toggle="collapse"]::after {
    display: inline-block;
  }

  .sidebar.toggled .sidebar-brand .sidebar-brand-text {
    display: inline;
  }

  .sidebar.toggled .sidebar-heading,
  .sidebar.toggled .sidebar-header {
    text-align: left;
  }
}

/* Topbar search — modern flat controls */
.navbar-bg .topbar-search.input-group,
.topbar .topbar-search.input-group {
  position: relative;
  width: 320px;
  height: 40px;
  max-width: calc(100% - 10px);
  flex-wrap: nowrap;
  align-items: stretch;
  border: 1.5px solid #e2e6f0;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.navbar-bg .topbar-search:focus-within,
.topbar .topbar-search:focus-within {
  border-color: var(--primary-color);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.12);
}

.navbar-bg .topbar-search .topbar-search-input.form-control,
.topbar .topbar-search .topbar-search-input.form-control {
  height: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #3a3b45;
  background: transparent;
  border: none;
  border-radius: 0;
  padding-left: 18px;
  padding-right: 10px;
  box-shadow: none;
  align-self: stretch;
}

.navbar-bg .topbar-search .topbar-search-input::placeholder,
.topbar .topbar-search .topbar-search-input::placeholder {
  color: #aab0be;
  font-weight: 400;
}

.navbar-bg .topbar-search .topbar-search-input:focus,
.topbar .topbar-search .topbar-search-input:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #2b2c35;
}

.navbar-bg .topbar-search .input-group-append,
.topbar .topbar-search .input-group-append {
  margin: 0;
}

.navbar-bg .topbar-search .topbar-search-btn.btn,
.topbar .topbar-search .topbar-search-btn.btn {
  height: 100%;
  min-width: 44px;
  padding: 0 15px;
  border: none;
  border-radius: 0 50px 50px 0;
  border-left: none !important;
  margin-left: -1px;
  font-weight: 600;
  box-shadow: none !important;
  transition: background-color 0.16s ease;
  flex-shrink: 0;
  align-self: stretch;
}

.navbar-bg .topbar-search .topbar-search-btn:hover,
.topbar .topbar-search .topbar-search-btn:hover,
.navbar-bg .topbar-search .topbar-search-btn:focus,
.topbar .topbar-search .topbar-search-btn:focus {
  filter: none;
  box-shadow: none;
  background-color: #006be6;
}

.navbar-bg .topbar-search .topbar-search-btn__icon,
.topbar .topbar-search .topbar-search-btn__icon {
  font-size: 13px;
  vertical-align: middle;
}

/* Topbar: Help + language + account (modern flat controls) */
.topbar-utilities {
  padding: 0;
  margin-left: auto;
  margin-right: 0.2rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.topbar-utilities .nav-item .nav-link.topbar-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1875rem 1rem 0.1875rem 0.1875rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #344054;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.topbar-utilities .nav-item .nav-link.topbar-user-trigger:hover,
.topbar-utilities .nav-item .nav-link.topbar-user-trigger:focus-visible,
.topbar-utilities .topbar-user-trigger:hover,
.topbar-utilities .topbar-user-trigger:focus-visible {
  background: #f9fafb;
  border-color: #eaecf0;
  color: #101828;
}

.topbar-utilities .nav-item .nav-link.topbar-user-trigger.show,
.topbar-utilities .nav-item .nav-link.topbar-user-trigger[aria-expanded="true"],
.topbar-utilities .topbar-user-trigger.show,
.topbar-utilities .topbar-user-trigger[aria-expanded="true"] {
  background: #f2f4f7;
  border-color: #d0d5dd;
  color: #101828;
}

.topbar-utilities .nav-item .nav-link.topbar-user-trigger.dropdown-toggle::after,
.topbar-utilities .topbar-user-trigger.dropdown-toggle::after {
  display: none;
}

.topbar-utilities .nav-item .nav-link.topbar-user-trigger--compact,
.topbar-utilities .topbar-user-trigger--compact {
  padding: 0.1875rem;
}

.topbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #f2f4f7 100%);
  border: 1px solid #e4e7ec;
  color: var(--primary-color, #0077ff);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.topbar-user-avatar .far,
.topbar-user-avatar .fas {
  font-size: 0.875rem;
  font-weight: 400;
  color: #667085;
}

.topbar-user-name {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user-chevron {
  flex-shrink: 0;
  font-size: 0.625rem;
  color: #98a2b3;
  transition: transform 0.2s ease, color 0.15s ease;
}

.topbar-utilities .topbar-user-trigger.show .topbar-user-chevron,
.topbar-utilities .topbar-user-trigger[aria-expanded="true"] .topbar-user-chevron {
  transform: rotate(180deg);
  color: #667085;
}

/* Topbar trial-pill: onboarding-hook ("Rond je setup af") of actieve-trial-teller ("Nog X dagen").
   Zelfde card-taal als de chat-widgets (bv. .msg-assistant-stock-locations in chat.php): lichte
   tint-achtergrond + zachte rand voor de shell, en een rond icoon-"dot" met een eigen, sterkere
   tint-achtergrond + donkerdere/verzadigde icoonkleur — geen platte of gradient-vulling. */
.topbar-trial-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.topbar-trial-pill:hover,
.topbar-trial-pill:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
}

.topbar-trial-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.6875rem;
}

.topbar-trial-pill--hook {
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.topbar-trial-pill--hook:hover {
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.4);
}

.topbar-trial-pill--hook .topbar-trial-pill__icon {
  background: rgba(245, 158, 11, 0.22);
  color: #b45309;
}

.topbar-trial-pill--counter {
  background: color-mix(in srgb, var(--primary-color, #0077ff) 8%, transparent);
  color: var(--primary-darker-color, var(--primary-color, #0077ff));
  border: 1px solid color-mix(in srgb, var(--primary-color, #0077ff) 28%, transparent);
}

.topbar-trial-pill--counter:hover {
  background: color-mix(in srgb, var(--primary-color, #0077ff) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary-color, #0077ff) 42%, transparent);
}

.topbar-trial-pill--counter .topbar-trial-pill__icon {
  background: color-mix(in srgb, var(--primary-color, #0077ff) 24%, transparent);
  color: var(--primary-darker-color, var(--primary-color, #0077ff));
}

.topbar-trial-pill--counter.is-urgent {
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.25);
}

.topbar-trial-pill--counter.is-urgent:hover {
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.4);
}

.topbar-trial-pill--counter.is-urgent .topbar-trial-pill__icon {
  background: rgba(245, 158, 11, 0.22);
  color: #b45309;
}

.topbar-trial-item {
  margin-right: 0.375rem;
}

.topbar-utilities .navbar-align {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.topbar-utilities .nav-icon,
.topbar-utilities .nav-flag {
  font-size: 1rem;
  padding: 0 0.5rem;
  line-height: 1;
}

.topbar-utilities .nav-icon:hover,
.topbar-utilities .nav-icon:focus,
.topbar-utilities .nav-flag:hover,
.topbar-utilities .nav-flag:focus {
  text-decoration: none;
}

.topbar-utilities .nav-flag img {
  width: 18px;
  height: 18px;
}

/* CRM / Agency topbar utilities (Help + language + theme + account) */
.topbar-navbar .topbar-utilities {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.topbar-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 2.4375rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: #344054;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 0.5625rem;
  box-shadow: none;
  white-space: nowrap;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.topbar-help-btn:hover,
.topbar-help-btn:focus {
  text-decoration: none;
  color: #101828;
  background: #f9fafb;
  border-color: #d0d5dd;
}

.topbar-help-btn__icon {
  font-size: 0.9375rem;
  opacity: 0.88;
}

.topbar-utilities-divider {
  width: 1px;
  height: 1.375rem;
  align-self: center;
  margin: 0;
  background: #e4e7ec;
  flex-shrink: 0;
}

.topbar-lang-wrap {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 2.4375rem;
  min-width: 0;
  border-radius: 0.5625rem;
  border: 1px solid #e4e7ec;
  background: #fff;
  overflow: visible;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.topbar-lang-globe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  padding: 0;
  font-size: 0.8125rem;
  color: #98a2b3;
  background: #f9fafb;
  border-right: 1px solid #e4e7ec;
  border-radius: 0.5rem 0 0 0.5rem;
  line-height: 1;
}

.topbar-lang-wrap > select.topbar-lang-select {
  display: none !important;
}

.topbar-lang-wrap > .nice-select,
.navbar-bg .topbar-lang-wrap > .nice-select,
.topbar .topbar-lang-wrap > .nice-select {
  float: none !important;
  clear: none !important;
  display: flex !important;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 3.25rem;
  max-width: 4.5rem;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 1.625rem 0 0.5rem !important;
  border: none !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: #344054 !important;
  line-height: 2.375rem !important;
}

.topbar-lang-wrap > .nice-select::after,
.navbar-bg .topbar-lang-wrap > .nice-select::after,
.topbar .topbar-lang-wrap > .nice-select::after {
  right: 0.625rem;
  margin-top: -0.125rem;
  border-bottom-color: #98a2b3;
  border-right-color: #98a2b3;
}

.topbar-lang-wrap > .nice-select .current {
  line-height: 2.375rem !important;
  color: #344054 !important;
}

.topbar-lang-wrap:hover {
  border-color: #d0d5dd;
  background: #f9fafb;
}

.topbar-lang-wrap:hover .topbar-lang-globe {
  color: #667085;
  background: #f2f4f7;
}

.topbar-lang-wrap:has(.nice-select.open) {
  border-color: var(--primary-color, #0077ff);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.1);
}

.topbar-utilities > ul.navbar-nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.topbar-utilities > ul.navbar-nav.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.topbar-utilities .nav-item {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.topbar-utilities .fivex-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4375rem;
  height: 2.4375rem;
  border-radius: 0.5625rem;
  background: #fff;
  border: 1px solid #e4e7ec;
  color: #667085;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.2s ease;
}

.topbar-utilities .fivex-theme-toggle:hover,
.topbar-utilities .fivex-theme-toggle:focus {
  background: #f9fafb;
  border-color: var(--primary-color, #0077ff);
  color: #101828;
  text-decoration: none;
}

.topbar-utilities .fivex-theme-toggle:active {
  transform: scale(0.94);
}

.topbar-utilities .fivex-theme-toggle.is-selected {
  border-color: var(--primary-color, #0077ff);
  color: var(--primary-color, #0077ff);
  background: rgba(0, 119, 255, 0.08);
}

.topbar-impersonate-wrap {
  margin-right: 0.125rem;
}

.topbar-impersonate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex-shrink: 0;
  height: 2.4375rem;
  padding: 0 0.75rem;
  border: 1px solid #e4e7ec;
  border-radius: 0.5625rem;
  background: #fff;
  color: #344054;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.2s ease;
}

.topbar-impersonate-btn__dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

.topbar-impersonate-btn__icon {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #667085;
}

.topbar-impersonate-btn__text {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}

.topbar-impersonate-btn__action {
  color: #344054;
  font-weight: 500;
}

.topbar-impersonate-btn__sep {
  width: 1px;
  height: 0.875rem;
  background: #eaecf0;
}

.topbar-impersonate-btn__name {
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #101828;
  font-weight: 600;
}

.topbar-impersonate-btn:hover,
.topbar-impersonate-btn:focus-visible {
  background: #f9fafb;
  border-color: var(--primary-color, #0077ff);
  color: #101828;
  outline: none;
}

.topbar-impersonate-btn:hover .topbar-impersonate-btn__icon,
.topbar-impersonate-btn:focus-visible .topbar-impersonate-btn__icon {
  color: #101828;
}

.topbar-impersonate-btn:active {
  transform: scale(0.96);
}

.topbar-impersonate-btn--fixed {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1050;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.topbar-utilities .nav-item .nav-link:not(.topbar-user-trigger) {
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
}

[data-bs-theme="dark"] .topbar-help-btn {
  color: #e0e0e0;
  background: #2d2d2d;
  border-color: #3f3f3f;
}

[data-bs-theme="dark"] .topbar-help-btn:hover,
[data-bs-theme="dark"] .topbar-help-btn:focus {
  color: #fff;
  background: #383838;
  border-color: #505050;
}

[data-bs-theme="dark"] .topbar-utilities-divider {
  background: #4a4a4a;
}

[data-bs-theme="dark"] .topbar-lang-wrap {
  background: #2d2d2d;
  border-color: #3f3f3f;
}

[data-bs-theme="dark"] .topbar-lang-globe {
  color: #a0a0a0;
  background: #262626;
  border-right-color: #3f3f3f;
}

[data-bs-theme="dark"] .topbar-lang-wrap > .nice-select {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .topbar-lang-wrap > .nice-select .current {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .topbar-lang-wrap:hover {
  border-color: #505050;
  background: #383838;
}

[data-bs-theme="dark"] .topbar-lang-wrap:has(.nice-select.open) {
  border-color: var(--primary-color, #0077ff);
  background: #303030;
  box-shadow: none;
}

[data-bs-theme="dark"] .topbar-utilities .fivex-theme-toggle {
  background: #272727;
  border-color: #3a3a3a;
  color: #a0a0a0;
}

.topbar-utilities .topbar-partnerline {
  position: relative;
}

.topbar-utilities .topbar-partnerline__badge {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid #fff;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 0.875rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: content-box;
}

.topbar-utilities .topbar-partnerline__badge[hidden] {
  display: none;
}

[data-bs-theme="dark"] .topbar-utilities .topbar-partnerline__badge {
  border-color: #1e1e1e;
}

/* Debug panel in the topbar (staff, login-as): header.php #bugClipDropdown */
.topbar-utilities .dropdown-menu.topbar-debug {
  width: 23.5rem;
  max-width: calc(100vw - 1.5rem);
  margin-top: 0.5rem !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid #eaecf0 !important;
  border-radius: 1rem !important;
  background: #fff;
  box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.22), 0 8px 16px -6px rgba(16, 24, 40, 0.1), 0 0 0 1px rgba(16, 24, 40, 0.02) !important;
}

.topbar-debug__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.875rem;
  background: linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  border-bottom: 1px solid #f2f4f7;
}

.topbar-debug__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: #fee4e2;
  color: #d92d20;
  font-size: 0.9375rem;
}

.topbar-debug__who {
  min-width: 0;
  flex: 1;
}

.topbar-debug__eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #98a2b3;
  line-height: 1.2;
}

.topbar-debug__name {
  margin-top: 0.1rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #101828;
  overflow-wrap: anywhere;
}

.topbar-debug__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.topbar-debug__tags:empty {
  display: none;
}

.topbar-debug__tag {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #ecfdf3;
  color: #067647;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.topbar-debug__tag--plan {
  background: #eff8ff;
  color: #175cd3;
}

.topbar-debug__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem 1rem;
  max-height: min(68vh, 34rem);
  overflow-y: auto;
}

.topbar-debug__facts {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0.75rem;
  background: #f9fafb;
  overflow: hidden;
}

.topbar-debug__fact {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid #f2f4f7;
}

.topbar-debug__fact:last-child {
  border-bottom: 0;
}

.topbar-debug__fact dt {
  margin: 0;
  padding: 0.45rem 0 0.45rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #667085;
}

.topbar-debug__fact dd {
  margin: 0;
  min-width: 0;
}

.topbar-debug__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: transparent;
  color: #101828;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: copy;
  transition: background-color 0.12s ease;
}

.topbar-debug__copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-debug__copy i {
  flex: none;
  color: #98a2b3;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.topbar-debug__copy:hover,
.topbar-debug__copy:focus-visible {
  background: #f2f4f7;
}

.topbar-debug__copy:hover i,
.topbar-debug__copy:focus-visible i,
.topbar-debug__copy.is-copied i {
  opacity: 1;
}

.topbar-debug__copy:hover i {
  color: var(--primary-color, #0077ff);
}

.topbar-debug__copy.is-copied i::before {
  content: "\f00c";
  font-weight: 900;
}

.topbar-debug__copy.is-copied i {
  color: #12b76a;
}

.topbar-debug__field .form-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #344054;
}

.topbar-debug .topbar-debug__field .form-control,
.topbar-debug .topbar-debug__field .form-select {
  width: 100% !important;
  max-width: none;
  min-height: 2.25rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
}

.topbar-debug .topbar-debug__field textarea.form-control {
  min-height: 4rem;
  resize: vertical;
}

.topbar-debug__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
  margin: 0;
  padding-left: 0;
  font-size: 0.8125rem;
  color: #344054;
  cursor: pointer;
}

.topbar-debug__check .form-check-input {
  float: none;
  flex: none;
  margin: 0;
}

.topbar-debug__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.125rem;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}

.topbar-debug__preview {
  border-radius: 0.625rem;
  background: #f9fafb;
}

.topbar-debug__preview summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475467;
  cursor: pointer;
}

.topbar-debug__preview summary::-webkit-details-marker {
  display: none;
}

.topbar-debug__preview summary::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.topbar-debug__preview[open] summary::before {
  transform: rotate(45deg);
}

.topbar-debug__preview pre {
  margin: 0;
  padding: 0 0.75rem 0.625rem;
  max-height: 10rem;
  overflow: auto;
  background: transparent;
  color: #344054;
  font-size: 0.6875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.topbar-debug__foot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.875rem 1.125rem 1rem;
  border-top: 1px solid #f2f4f7;
  background: #fff;
}

.topbar-debug__foot .btn {
  min-height: 2.5rem;
  border-radius: 0.625rem;
  font-weight: 600;
}

.topbar-debug__foot .btn.is-copied {
  background: #12b76a;
  border-color: #12b76a;
}

.topbar-debug__hint {
  text-align: center;
  font-size: 0.6875rem;
  color: #98a2b3;
}

.topbar-debug__hint kbd {
  padding: 0.05rem 0.3rem;
  margin-right: 0.1rem;
  border: 1px solid #eaecf0;
  border-radius: 0.3rem;
  background: #fff;
  color: #475467;
  font-size: 0.625rem;
  box-shadow: none;
}

[data-bs-theme="dark"] .topbar-utilities .dropdown-menu.topbar-debug {
  border-color: #333 !important;
  background: #1e1e1e;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -6px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .topbar-debug__head {
  background: linear-gradient(180deg, rgba(217, 45, 32, 0.12) 0%, #1e1e1e 100%);
}

[data-bs-theme="dark"] .topbar-debug__head,
[data-bs-theme="dark"] .topbar-debug__fact,
[data-bs-theme="dark"] .topbar-debug__foot {
  border-color: #2e2e2e;
}

[data-bs-theme="dark"] .topbar-debug__icon {
  background: rgba(217, 45, 32, 0.2);
  color: #fda29b;
}

[data-bs-theme="dark"] .topbar-debug__name,
[data-bs-theme="dark"] .topbar-debug__copy {
  color: #f2f2f2;
}

[data-bs-theme="dark"] .topbar-debug__facts,
[data-bs-theme="dark"] .topbar-debug__preview {
  background: #262626;
}

[data-bs-theme="dark"] .topbar-debug__copy:hover,
[data-bs-theme="dark"] .topbar-debug__copy:focus-visible {
  background: #303030;
}

[data-bs-theme="dark"] .topbar-debug__foot {
  background: #1e1e1e;
}

[data-bs-theme="dark"] .topbar-debug__tag {
  background: rgba(18, 183, 106, 0.15);
  color: #6ce9a6;
}

[data-bs-theme="dark"] .topbar-debug__tag--plan {
  background: rgba(46, 144, 250, 0.15);
  color: #84caff;
}

[data-bs-theme="dark"] .topbar-debug__count,
[data-bs-theme="dark"] .topbar-debug__hint kbd {
  border-color: #3a3a3a;
  background: #303030;
  color: #c7c7c7;
}

[data-bs-theme="dark"] .topbar-debug__check,
[data-bs-theme="dark"] .topbar-debug__field .form-label,
[data-bs-theme="dark"] .topbar-debug__preview summary,
[data-bs-theme="dark"] .topbar-debug__preview pre {
  color: #c7c7c7;
}

[data-bs-theme="dark"] .topbar-utilities .fivex-theme-toggle.is-selected {
  border-color: #3b82f6;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.16);
}

[data-bs-theme="dark"] .topbar-utilities .fivex-theme-toggle:hover,
[data-bs-theme="dark"] .topbar-utilities .fivex-theme-toggle:focus {
  background: #303030;
  border-color: var(--primary-color, #0077ff);
  color: #fff;
}

[data-bs-theme="dark"] .topbar-impersonate-btn {
  background: #272727;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

[data-bs-theme="dark"] .topbar-impersonate-btn__icon {
  color: #a0a0a0;
}

[data-bs-theme="dark"] .topbar-impersonate-btn__action {
  color: #e0e0e0;
}

[data-bs-theme="dark"] .topbar-impersonate-btn__sep {
  background: #3f3f3f;
}

[data-bs-theme="dark"] .topbar-impersonate-btn__name {
  color: #fff;
}

[data-bs-theme="dark"] .topbar-impersonate-btn:hover,
[data-bs-theme="dark"] .topbar-impersonate-btn:focus-visible {
  background: #303030;
  border-color: var(--primary-color, #0077ff);
  color: #fff;
}

[data-bs-theme="dark"] .topbar-impersonate-btn:hover .topbar-impersonate-btn__icon,
[data-bs-theme="dark"] .topbar-impersonate-btn:focus-visible .topbar-impersonate-btn__icon {
  color: #fff;
}

[data-bs-theme="dark"] .topbar-utilities .topbar-user-avatar {
  background: #2d2d2d;
  border-color: #3f3f3f;
  color: #a0a0a0;
}

/* Account dropdown — modern flat menu */
.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"],
.topbar .dropdown-menu[aria-labelledby="userDropdown"] {
  min-width: 290px;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #e3e6f0 !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] > .px-2,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] > .px-2 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item {
  width: 100%;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  background: transparent;
  color: #5a5c69;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item:hover,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item:hover,
.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item:focus,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item:focus {
  background: #f4f6fb;
  color: #224abe;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item > .d-flex > .d-flex:first-child,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item > .d-flex > .d-flex:first-child {
  width: 36px !important;
  height: 36px !important;
  margin-right: 12px !important;
  border-radius: 9px;
  background: #f0f3f8;
  color: #6e7380;
  flex-shrink: 0;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item:hover > .d-flex > .d-flex:first-child,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item:hover > .d-flex > .d-flex:first-child {
  background: #e8eefc;
  color: #224abe;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item i,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item i {
  color: currentColor !important;
  font-size: 1rem !important;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item .text-dark,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item .text-dark,
.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item span,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item span {
  color: inherit !important;
  font-weight: 500 !important;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item small,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item small {
  color: #858796 !important;
  font-size: 0.78rem !important;
  font-weight: 500;
}

.navbar-bg .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-divider,
.topbar .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-divider {
  margin: 8px 2px !important;
  border-top: 1px solid #e3e6f0;
}

.float-info-menu-footer {
  position: relative;
  top: -25px;
  padding-top: 25px;
  width: 100%;
  border-top: solid 1px rgb(50,50,50);
  display: none;
}

.inventory-progress {
  background: #fafafa;
  height: 30px;
  border-radius: 0;
}
.span-in-progress-bar {
  position: absolute;
  right: 0;
  font-weight: 700;
  font-size: 14px;
  top: 3.5px;
  width: 25%;
  text-align: center;
}
.inventory-dropdown {
  background: #1a1a1a !important;
  border: none;
  border-radius: 12px;
  margin-top: 12px;
  width: 500px !important;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0;
  overflow: visible;
}
.inventory-dropdown.show {
  animation: inventory-dropdown-fade 0.2s ease-out;
}
@keyframes inventory-dropdown-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.inventory-dropdown-wrapper:before {
  content: '';
  position: absolute;
  top: -8px;
  right: 24px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #1a1a1a;
}
.inventory-dropdown-wrapper {
  padding: 16px 20px 20px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  font-size: 14px;
}
.inventory-dropdown-wrapper h5 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 0;
  font-size: 1rem;
  text-align: center;
}
.inventory-dropdown-wrapper hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 12px 0;
}
.inventory-dropdown-wrapper input[type="checkbox"] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.inventory-dropdown-wrapper label {
  cursor: pointer;
  vertical-align: middle;
  margin-bottom: 0;
}
.inventory-status-modal-icon {
  font-size: 38px;
  padding-top: 5px;
}

.nice-select, .multiselect.custom-select {
  position: relative;
}
.nice-select .current {
  width: 100%;
  overflow: hidden;
  display: block;
}

.nice-select .list {
  z-index: 9990;
  position: absolute;
}

.small-img-preview-mail {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  margin-top: 15px;
}
.small-img-preview-mail img {
  display: block;
  position: relative;
  width: 100%;
  max-width: 35px;
  max-height: 35px;
}

#price-package-ex {
  display: block;
  width: 200px;
  text-align: right;
}

#progression-view {
  position: absolute;
  padding: 15px;
  bottom: 0;
  width: 100%;
  display: none;
}

.progression-relative {
  position: relative;
  background: rgb(41,41,41);
  width: 100%;
  border-radius: 5px;
  padding: 10px 20px;
  color: white;
  z-index: 999;
}

.progression-relative h2 {
  font-size: 18px;
  font-weight: 600;
}

.progression-relative span {
  font-size: 14px;
  font-weight: 500;
  width: 40px;
  display:inline-block;
  float: right;
  text-align: center;
  margin-top: -2px;
}


.sidebar-dark hr.sidebar-divider {
  border-top: 0 solid rgba(255, 255, 255, .15);
}

.product-dark-panel {
  color: rgb(0, 0, 0);
}
.bg-gradient-primary {
  background-image: none;
  background: var(--bg-color);
}
.btn-primary, .calc-new {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.text-primary {
  color: var(--primary-color);
}



#content-wrapper,
.main {
  max-height: 100vh;
  overflow: auto;
}

.form-check-label {
  padding-left: 5px;
}

.niche-table-header {
  background-color: #f8f9fc !important;
}

.ui-slider-horizontal {
  height: 5px;
  border: 0 !important;
  background: #e9e9e9;
}

.ui-slider .ui-widget-header {
  background: var(--primary-color);
}

.ui-slider .ui-state-default, .ui-slider .ui-widget-content .ui-state-default, .ui-slider .ui-widget-header .ui-state-default, .ui-slider .ui-button {
  border: 3px solid var(--primary-color);
  background: #fff;
  font-weight: normal;
  border-radius: 50%;
  top: -6px;
}

.ui-slider .ui-state-hover, .ui-slider .ui-widget-content .ui-state-hover, .ui-slider .ui-widget-header .ui-state-hover, .ui-slider .ui-state-focus, .ui-slider .ui-widget-content .ui-state-focus, .ui-slider .ui-widget-header .ui-state-focus, .ui-slider .ui-button:hover, .ui-button:focus {
  border: 2px solid var(--primary-color);
  background: var(--primary-color);
  font-weight: normal;
  color: rgb(0, 0, 0);
  border-radius: 50%;
  top: -6px;
}

.zoom-hover-img img {
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  cursor: pointer;
}
.zoom-hover-img:hover img {
  transform: scale(1.02);
}
.zoom-hover-img {
  overflow: hidden;
}

.scroll-to-top {
  display: none !important;
}
.nice-pills-menu li a {
  padding: 6px 20px;
  margin-right: 5px;
  background: #ddd;
  position: relative;
  border-radius: 0;
  display: inline-block;
  color: #858796;
  text-decoration: none;
  margin-bottom: 15px;
  margin-top: -10px;
  font-weight: 500;
}
.nice-pills-menu li a.active {
  background: var(--primary-color);
  color: #fff;
}

.prev_time_var {
  font-size: 14px;
  margin: 15px;
}

.attributes-select-wrapper {
  width: 100%;
  position: relative;
  list-style: none;
  min-height: 200px;
  border-radius: 3px;
  background: rgb(230,230,230);
  padding: 5px 10px;
}

.template-tile .card {
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
.template-tile .card {
  border: solid 2px transparent;
}
.template-tile:hover .card {
  border: solid 2px var(--primary-color);
}

.email-template-image {
  position: relative;
  width: 0px;
  height: 0px;
  background: url('#') no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 60% 50%;
}

.attributes-select-wrapper li {
  padding: 7.5px 12px;
  border-radius: 3px;
  font-size: 14px;
  margin: 5px 0 5px 0;
  cursor: move;
  background: white;
}

.hover-inventory-home {
  cursor: pointer;
}
.hover-inventory-home:hover {
  background-color: #f8f9fc;
}

#OrderList, #OrderList tr {
  width: 100%;
}
#ProductsList, #ProductsList tr {
  width: 100%;
}
#EmailsList, #EmailsList tr {
  width: 100%;
}
#InventoryList, #InventoryList tr {
  width: 100%;
}
#OrderList {
  max-height: calc(100vh - 100px);
}
#ProductsList {
  max-height: calc(100vh - 100px);
}
#EmailsList {
  max-height: calc(100vh - 100px);
}
#InventoryList {
  max-height: calc(100vh - 100px);
}

#ProductsList_length select, #AdProductsList_length select {
  font-size: 14px;
}

#link_hits_table_filter .form-control {
  width: 125px;
}
#EmailsList tr td, #channels_table tr td {
  vertical-align: middle;
}
.ean-col {
  display: none;
}


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

input[type=text] {
  -webkit-appearance: none;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #1cc875;
}

input:focus + .slider {
  box-shadow: 0 0 1px #1cc875;
}

input:checked + .slider:before {
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.day-list {
  list-style: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 100%;
}

.day-list .sudo-company-item {
  width: 100%;
  border-radius: 3px;
  padding: 10px;
  margin: 5px 0;
  background: white;
  position: relative;
}

.scroll-wrapper-sudo {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 20px 0;
}

.col-xs-1-10,
.col-md-1-10,
.col-md-1-20,
.col-sm-1-5 {
  position: relative;
  min-height: 1px;
  padding-right: .75rem;
  padding-left: .75rem;
}

.col-xs-1-10 {
  width: 10%;
  float: left;
}

.sidebar .nav-item .collapse .collapse-inner,
.sidebar-item .collapse .sidebar-dropdown {
  border-radius: 0;
}

.sidebar .nav-item,
.sidebar-item {
  border-left: solid 3px transparent;
}

.sidebar .nav-item.active, .sidebar .nav-item:hover,
.sidebar-item.active, .sidebar-item:hover {
  border-left: solid 3px var(--primary-color);
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-dark .nav-item.active .nav-link i, .sidebar-dark .nav-item:hover .nav-link i,
.sidebar-dark .nav-item.active .nav-link, .sidebar-dark .nav-item:hover .nav-link,
.sidebar .nav-item .nav-link[aria-expanded="true"] i, .sidebar .nav-item .nav-link[aria-expanded="true"],
.sidebar-item.active .sidebar-link i, .sidebar-item:hover .sidebar-link i,
.sidebar-item.active .sidebar-link, .sidebar-item:hover .sidebar-link,
.sidebar-item .sidebar-link[aria-expanded="true"] i, .sidebar-item .sidebar-link[aria-expanded="true"] {
  color: var(--primary-color);
}

.sidebar .nav-item:has(> .nav-link[aria-expanded="true"]),
.sidebar-item:has(> .sidebar-link[aria-expanded="true"]) {
  border-left: solid 3px var(--primary-color);
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item,
.sidebar-item .collapse .sidebar-dropdown .sidebar-link, .sidebar-item .collapsing .sidebar-dropdown .sidebar-link {
  margin: 2.5px 8.5px;
  color: var(--text-color) !important;
  font-weight: 450;
}

.sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner,
.sidebar-item .collapse .sidebar-dropdown, .sidebar-item .collapsing .sidebar-dropdown {
  margin: 0 0 0 0;
}

.collapse-item:active,
.sidebar-link:active {
  background-color: transparent !important;
}



@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .col-md-1-20 {
    width: 5%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-10 {
    width: 10%;
    float: left;
  }
  #sidebarToggleTop {
    display: none;
  }
}

@media (min-width: 768px) {
  .sidebar-dark .nav-item .nav-link {
    font-size: 14px;
  }

  .sidebar .nav-item .nav-link span {
    font-size: 14px;
    display: inline;
    position: relative;
    font-weight: 500;
  }
}

@media (max-width: 768px) {
  .sidebar .nav-item .nav-link span {
    font-size: 12px;
    display: block;
    top: 0;
    position: relative;
  }
  .sidebar .nav-item .collapse {
    position: relative;
    width: 90%;
    left: 5%;
    overflow: hidden;
  }
  .sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    padding: 5px 10px;
    margin: 0;
    display: block;
    color: #3a3b45;
    text-decoration: none;
    border-radius: 0 !important;
    white-space: nowrap;
    font-size: 11px;
  }
  .sidebar .nav-item .nav-link {
    padding: 12.5px 0 !important;
  }

}

.sidebar-scrollable-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-x: visible;
  overflow-y: scroll;
  font-weight: 300;
}

.sidebar .nav-item .nav-link i {
  font-size: 14px;
  margin-right: 7.5px;
  width: 20px;
  text-align: center;
  transform: scale(1.1);
}

.sidebar-dark .nav-item .nav-link {
  color: var(--text-color);
  -webkit-transition: color .1s ease-in;
  -moz-transition: color .1s ease-in;
  -o-transition: color .1s ease-in;
  transition: color .1s ease-in;
}
.sidebar-dark .nav-item .nav-link i {
  color: var(--text-color);
  -webkit-transition: color .1s ease-in;
  -moz-transition: color .1s ease-in;
  -o-transition: color .1s ease-in;
  transition: color .1s ease-in;
}

.sidebar .nav-item .nav-link {
  padding: 12.5px 20px;
}


#voorraadAlertTable tr, #orderHomeTable tr {
  border-top: solid 1px #e3e6f0;
}

#email_header_status {
  bottom: -3.5px;
  right: 15px;
  position: relative;
  float: right;
}
#email_header_status .btn {
  bottom: 7px;
  position: relative;
}
#email_header_switch_wrapper {
  bottom: 0;
  position: relative;
  float: right;
  width: 250px;
  margin-top: -10px;
}
.small-product-img-email {
  width: 45px;
  height: auto;
  max-height: 45px;
  margin-top: -10px;
  margin-bottom: -10px;
}

.email-product-table {
  margin-bottom: 0;
}
.email-product-table td {
  vertical-align: middle;
  border-left: 0 solid white;
  border-right: 0 solid white;
}
.email-product-table td:first-child, .email-product-table td:nth-child(2) {
  text-align: center;
}
.email-product-table td:nth-child(2) {
  padding: 5px;
}
.email-product-table td:nth-child(4) {
  text-align: right;
}

.product_email_main_table_tr ul {
  font-size: 11px;
  margin-bottom: 0;
}
.product_email_main_table_tr small {
  font-size: 11px;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* #OrderList_wrapper{
  padding: 20px;
} */
#Orders-table > #OrderList_wrapper > #OrderList_length > label{
  color: white;
}
#Orders-table > #OrderList_wrapper > #OrderList_filter > label{
  color: white;
}
#Orders-table > #OrderList_wrapper > #OrderList_info{
  color: white;
}
#Orders-table {
  width: 100%;
  overflow-x: visible;
  overflow-y: visible;
}

#Products-table > #ProductsList_wrapper > #ProductsList_length > label{
  color: white;
}
#Products-table > #ProductsList_wrapper > #ProductsList_filter > label{
  color: white;
}
#Products-table > #ProductsList_wrapper > #ProductsList_info{
  color: white;
}
#Products-table {
  width: 100%;
  overflow-x: visible;
  overflow-y: visible;
  padding-top: 5px;
}

#Products-table > #PNLList_wrapper > #PNLList_length > label{
  color: white;
}
#Products-table > #PNLList_wrapper > #PNLList_filter > label{
  color: white;
}
#Products-table > #PNLList_wrapper > #PNLList_info{
  color: white;
}
#Products-table {
  width: 100%;
  overflow-x: visible;
  overflow-y: visible;
  padding-top: 5px;
}

#Sellers-table > #SellersList_wrapper > #SellersList_length > label{
  color: white;
}
#Sellers-table > #SellersList_wrapper > #SellersList_filter > label{
  color: white;
}
#Sellers-table > #SellersList_wrapper > #SellersList_info{
  color: white;
}
#Sellers-table {
  width: 100%;
  overflow-x: visible;
  overflow-y: visible;
  padding-top: 5px;
}

#Sellers-table > #PNLList_wrapper > #PNLList_length > label{
  color: white;
}
#Sellers-table > #PNLList_wrapper > #PNLList_filter > label{
  color: white;
}
#Sellers-table > #PNLList_wrapper > #PNLList_info{
  color: white;
}
#Sellers-table {
  width: 100%;
  overflow-x: visible;
  overflow-y: visible;
  padding-top: 5px;
}

#niceInventoryButtonsWrapper input {
  margin-bottom: 5px;
}
#EmailsList_length > label{
  color: white
}
#EmailsList_filter > label{
  color: white;
}
#EmailsList_info {
  color: white;
}

.center {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Loading css animation */
.rect-auto,.c100.p51 .slice,.c100.p52 .slice,.c100.p53 .slice,.c100.p54 .slice,.c100.p55 .slice,.c100.p56 .slice,.c100.p57 .slice,.c100.p58 .slice,.c100.p59 .slice,.c100.p60 .slice,.c100.p61 .slice,.c100.p62 .slice,.c100.p63 .slice,.c100.p64 .slice,.c100.p65 .slice,.c100.p66 .slice,.c100.p67 .slice,.c100.p68 .slice,.c100.p69 .slice,.c100.p70 .slice,.c100.p71 .slice,.c100.p72 .slice,.c100.p73 .slice,.c100.p74 .slice,.c100.p75 .slice,.c100.p76 .slice,.c100.p77 .slice,.c100.p78 .slice,.c100.p79 .slice,.c100.p80 .slice,.c100.p81 .slice,.c100.p82 .slice,.c100.p83 .slice,.c100.p84 .slice,.c100.p85 .slice,.c100.p86 .slice,.c100.p87 .slice,.c100.p88 .slice,.c100.p89 .slice,.c100.p90 .slice,.c100.p91 .slice,.c100.p92 .slice,.c100.p93 .slice,.c100.p94 .slice,.c100.p95 .slice,.c100.p96 .slice,.c100.p97 .slice,.c100.p98 .slice,.c100.p99 .slice,.c100.p100 .slice{clip:rect(auto, auto, auto, auto)}.pie,.c100 .bar,.c100.p51 .fill,.c100.p52 .fill,.c100.p53 .fill,.c100.p54 .fill,.c100.p55 .fill,.c100.p56 .fill,.c100.p57 .fill,.c100.p58 .fill,.c100.p59 .fill,.c100.p60 .fill,.c100.p61 .fill,.c100.p62 .fill,.c100.p63 .fill,.c100.p64 .fill,.c100.p65 .fill,.c100.p66 .fill,.c100.p67 .fill,.c100.p68 .fill,.c100.p69 .fill,.c100.p70 .fill,.c100.p71 .fill,.c100.p72 .fill,.c100.p73 .fill,.c100.p74 .fill,.c100.p75 .fill,.c100.p76 .fill,.c100.p77 .fill,.c100.p78 .fill,.c100.p79 .fill,.c100.p80 .fill,.c100.p81 .fill,.c100.p82 .fill,.c100.p83 .fill,.c100.p84 .fill,.c100.p85 .fill,.c100.p86 .fill,.c100.p87 .fill,.c100.p88 .fill,.c100.p89 .fill,.c100.p90 .fill,.c100.p91 .fill,.c100.p92 .fill,.c100.p93 .fill,.c100.p94 .fill,.c100.p95 .fill,.c100.p96 .fill,.c100.p97 .fill,.c100.p98 .fill,.c100.p99 .fill,.c100.p100 .fill{position:absolute;border:0.08em solid var(--primary-color);width:0.84em;height:0.84em;clip:rect(0em, 0.5em, 1em, 0em);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}.pie-fill,.c100.p51 .bar:after,.c100.p51 .fill,.c100.p52 .bar:after,.c100.p52 .fill,.c100.p53 .bar:after,.c100.p53 .fill,.c100.p54 .bar:after,.c100.p54 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p56 .bar:after,.c100.p56 .fill,.c100.p57 .bar:after,.c100.p57 .fill,.c100.p58 .bar:after,.c100.p58 .fill,.c100.p59 .bar:after,.c100.p59 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p61 .bar:after,.c100.p61 .fill,.c100.p62 .bar:after,.c100.p62 .fill,.c100.p63 .bar:after,.c100.p63 .fill,.c100.p64 .bar:after,.c100.p64 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p66 .bar:after,.c100.p66 .fill,.c100.p67 .bar:after,.c100.p67 .fill,.c100.p68 .bar:after,.c100.p68 .fill,.c100.p69 .bar:after,.c100.p69 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p71 .bar:after,.c100.p71 .fill,.c100.p72 .bar:after,.c100.p72 .fill,.c100.p73 .bar:after,.c100.p73 .fill,.c100.p74 .bar:after,.c100.p74 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p76 .bar:after,.c100.p76 .fill,.c100.p77 .bar:after,.c100.p77 .fill,.c100.p78 .bar:after,.c100.p78 .fill,.c100.p79 .bar:after,.c100.p79 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p81 .bar:after,.c100.p81 .fill,.c100.p82 .bar:after,.c100.p82 .fill,.c100.p83 .bar:after,.c100.p83 .fill,.c100.p84 .bar:after,.c100.p84 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p86 .bar:after,.c100.p86 .fill,.c100.p87 .bar:after,.c100.p87 .fill,.c100.p88 .bar:after,.c100.p88 .fill,.c100.p89 .bar:after,.c100.p89 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p91 .bar:after,.c100.p91 .fill,.c100.p92 .bar:after,.c100.p92 .fill,.c100.p93 .bar:after,.c100.p93 .fill,.c100.p94 .bar:after,.c100.p94 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.c100.p96 .bar:after,.c100.p96 .fill,.c100.p97 .bar:after,.c100.p97 .fill,.c100.p98 .bar:after,.c100.p98 .fill,.c100.p99 .bar:after,.c100.p99 .fill,.c100.p100 .bar:after,.c100.p100 .fill{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100{position:relative;font-size:120px;width:1em;height:1em;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;float:left;margin:0 0.1em 0.1em 0;background-color:rgb(0, 0, 0)}.c100 *,.c100 *:before,.c100 *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.c100.center{float:none;margin:0 auto}.c100.big{font-size:240px}.c100.small{font-size:80px}.c100 > span{position:absolute;width:100%;z-index:1;left:0;top:0;width:5em;line-height:5em;font-size:0.2em;color:var(--primary-color);display:block;text-align:center;white-space:nowrap;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.c100:after{position: absolute;top: 0.075em;left: 0.075em;display: block;content: " ";-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;background-color: whitesmoke;width: 0.85em;height: 0.85em;-webkit-transition-property: all;-moz-transition-property: all;-o-transition-property: all;transition-property: all;-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;-webkit-transition-timing-function: ease-in;-moz-transition-timing-function: ease-in;-o-transition-timing-function: ease-in;transition-timing-function: ease-in;}.c100 .slice{position:absolute;width:1em;height:1em;clip:rect(0em, 1em, 1em, 0.5em)}.c100.p1 .bar{-webkit-transform:rotate(3.6deg);-moz-transform:rotate(3.6deg);-ms-transform:rotate(3.6deg);-o-transform:rotate(3.6deg);transform:rotate(3.6deg)}.c100.p2 .bar{-webkit-transform:rotate(7.2deg);-moz-transform:rotate(7.2deg);-ms-transform:rotate(7.2deg);-o-transform:rotate(7.2deg);transform:rotate(7.2deg)}.c100.p3 .bar{-webkit-transform:rotate(10.8deg);-moz-transform:rotate(10.8deg);-ms-transform:rotate(10.8deg);-o-transform:rotate(10.8deg);transform:rotate(10.8deg)}.c100.p4 .bar{-webkit-transform:rotate(14.4deg);-moz-transform:rotate(14.4deg);-ms-transform:rotate(14.4deg);-o-transform:rotate(14.4deg);transform:rotate(14.4deg)}.c100.p5 .bar{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-ms-transform:rotate(18deg);-o-transform:rotate(18deg);transform:rotate(18deg)}.c100.p6 .bar{-webkit-transform:rotate(21.6deg);-moz-transform:rotate(21.6deg);-ms-transform:rotate(21.6deg);-o-transform:rotate(21.6deg);transform:rotate(21.6deg)}.c100.p7 .bar{-webkit-transform:rotate(25.2deg);-moz-transform:rotate(25.2deg);-ms-transform:rotate(25.2deg);-o-transform:rotate(25.2deg);transform:rotate(25.2deg)}.c100.p8 .bar{-webkit-transform:rotate(28.8deg);-moz-transform:rotate(28.8deg);-ms-transform:rotate(28.8deg);-o-transform:rotate(28.8deg);transform:rotate(28.8deg)}.c100.p9 .bar{-webkit-transform:rotate(32.4deg);-moz-transform:rotate(32.4deg);-ms-transform:rotate(32.4deg);-o-transform:rotate(32.4deg);transform:rotate(32.4deg)}.c100.p10 .bar{-webkit-transform:rotate(36deg);-moz-transform:rotate(36deg);-ms-transform:rotate(36deg);-o-transform:rotate(36deg);transform:rotate(36deg)}.c100.p11 .bar{-webkit-transform:rotate(39.6deg);-moz-transform:rotate(39.6deg);-ms-transform:rotate(39.6deg);-o-transform:rotate(39.6deg);transform:rotate(39.6deg)}.c100.p12 .bar{-webkit-transform:rotate(43.2deg);-moz-transform:rotate(43.2deg);-ms-transform:rotate(43.2deg);-o-transform:rotate(43.2deg);transform:rotate(43.2deg)}.c100.p13 .bar{-webkit-transform:rotate(46.8deg);-moz-transform:rotate(46.8deg);-ms-transform:rotate(46.8deg);-o-transform:rotate(46.8deg);transform:rotate(46.8deg)}.c100.p14 .bar{-webkit-transform:rotate(50.4deg);-moz-transform:rotate(50.4deg);-ms-transform:rotate(50.4deg);-o-transform:rotate(50.4deg);transform:rotate(50.4deg)}.c100.p15 .bar{-webkit-transform:rotate(54deg);-moz-transform:rotate(54deg);-ms-transform:rotate(54deg);-o-transform:rotate(54deg);transform:rotate(54deg)}.c100.p16 .bar{-webkit-transform:rotate(57.6deg);-moz-transform:rotate(57.6deg);-ms-transform:rotate(57.6deg);-o-transform:rotate(57.6deg);transform:rotate(57.6deg)}.c100.p17 .bar{-webkit-transform:rotate(61.2deg);-moz-transform:rotate(61.2deg);-ms-transform:rotate(61.2deg);-o-transform:rotate(61.2deg);transform:rotate(61.2deg)}.c100.p18 .bar{-webkit-transform:rotate(64.8deg);-moz-transform:rotate(64.8deg);-ms-transform:rotate(64.8deg);-o-transform:rotate(64.8deg);transform:rotate(64.8deg)}.c100.p19 .bar{-webkit-transform:rotate(68.4deg);-moz-transform:rotate(68.4deg);-ms-transform:rotate(68.4deg);-o-transform:rotate(68.4deg);transform:rotate(68.4deg)}.c100.p20 .bar{-webkit-transform:rotate(72deg);-moz-transform:rotate(72deg);-ms-transform:rotate(72deg);-o-transform:rotate(72deg);transform:rotate(72deg)}.c100.p21 .bar{-webkit-transform:rotate(75.6deg);-moz-transform:rotate(75.6deg);-ms-transform:rotate(75.6deg);-o-transform:rotate(75.6deg);transform:rotate(75.6deg)}.c100.p22 .bar{-webkit-transform:rotate(79.2deg);-moz-transform:rotate(79.2deg);-ms-transform:rotate(79.2deg);-o-transform:rotate(79.2deg);transform:rotate(79.2deg)}.c100.p23 .bar{-webkit-transform:rotate(82.8deg);-moz-transform:rotate(82.8deg);-ms-transform:rotate(82.8deg);-o-transform:rotate(82.8deg);transform:rotate(82.8deg)}.c100.p24 .bar{-webkit-transform:rotate(86.4deg);-moz-transform:rotate(86.4deg);-ms-transform:rotate(86.4deg);-o-transform:rotate(86.4deg);transform:rotate(86.4deg)}.c100.p25 .bar{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.c100.p26 .bar{-webkit-transform:rotate(93.6deg);-moz-transform:rotate(93.6deg);-ms-transform:rotate(93.6deg);-o-transform:rotate(93.6deg);transform:rotate(93.6deg)}.c100.p27 .bar{-webkit-transform:rotate(97.2deg);-moz-transform:rotate(97.2deg);-ms-transform:rotate(97.2deg);-o-transform:rotate(97.2deg);transform:rotate(97.2deg)}.c100.p28 .bar{-webkit-transform:rotate(100.8deg);-moz-transform:rotate(100.8deg);-ms-transform:rotate(100.8deg);-o-transform:rotate(100.8deg);transform:rotate(100.8deg)}.c100.p29 .bar{-webkit-transform:rotate(104.4deg);-moz-transform:rotate(104.4deg);-ms-transform:rotate(104.4deg);-o-transform:rotate(104.4deg);transform:rotate(104.4deg)}.c100.p30 .bar{-webkit-transform:rotate(108deg);-moz-transform:rotate(108deg);-ms-transform:rotate(108deg);-o-transform:rotate(108deg);transform:rotate(108deg)}.c100.p31 .bar{-webkit-transform:rotate(111.6deg);-moz-transform:rotate(111.6deg);-ms-transform:rotate(111.6deg);-o-transform:rotate(111.6deg);transform:rotate(111.6deg)}.c100.p32 .bar{-webkit-transform:rotate(115.2deg);-moz-transform:rotate(115.2deg);-ms-transform:rotate(115.2deg);-o-transform:rotate(115.2deg);transform:rotate(115.2deg)}.c100.p33 .bar{-webkit-transform:rotate(118.8deg);-moz-transform:rotate(118.8deg);-ms-transform:rotate(118.8deg);-o-transform:rotate(118.8deg);transform:rotate(118.8deg)}.c100.p34 .bar{-webkit-transform:rotate(122.4deg);-moz-transform:rotate(122.4deg);-ms-transform:rotate(122.4deg);-o-transform:rotate(122.4deg);transform:rotate(122.4deg)}.c100.p35 .bar{-webkit-transform:rotate(126deg);-moz-transform:rotate(126deg);-ms-transform:rotate(126deg);-o-transform:rotate(126deg);transform:rotate(126deg)}.c100.p36 .bar{-webkit-transform:rotate(129.6deg);-moz-transform:rotate(129.6deg);-ms-transform:rotate(129.6deg);-o-transform:rotate(129.6deg);transform:rotate(129.6deg)}.c100.p37 .bar{-webkit-transform:rotate(133.2deg);-moz-transform:rotate(133.2deg);-ms-transform:rotate(133.2deg);-o-transform:rotate(133.2deg);transform:rotate(133.2deg)}.c100.p38 .bar{-webkit-transform:rotate(136.8deg);-moz-transform:rotate(136.8deg);-ms-transform:rotate(136.8deg);-o-transform:rotate(136.8deg);transform:rotate(136.8deg)}.c100.p39 .bar{-webkit-transform:rotate(140.4deg);-moz-transform:rotate(140.4deg);-ms-transform:rotate(140.4deg);-o-transform:rotate(140.4deg);transform:rotate(140.4deg)}.c100.p40 .bar{-webkit-transform:rotate(144deg);-moz-transform:rotate(144deg);-ms-transform:rotate(144deg);-o-transform:rotate(144deg);transform:rotate(144deg)}.c100.p41 .bar{-webkit-transform:rotate(147.6deg);-moz-transform:rotate(147.6deg);-ms-transform:rotate(147.6deg);-o-transform:rotate(147.6deg);transform:rotate(147.6deg)}.c100.p42 .bar{-webkit-transform:rotate(151.2deg);-moz-transform:rotate(151.2deg);-ms-transform:rotate(151.2deg);-o-transform:rotate(151.2deg);transform:rotate(151.2deg)}.c100.p43 .bar{-webkit-transform:rotate(154.8deg);-moz-transform:rotate(154.8deg);-ms-transform:rotate(154.8deg);-o-transform:rotate(154.8deg);transform:rotate(154.8deg)}.c100.p44 .bar{-webkit-transform:rotate(158.4deg);-moz-transform:rotate(158.4deg);-ms-transform:rotate(158.4deg);-o-transform:rotate(158.4deg);transform:rotate(158.4deg)}.c100.p45 .bar{-webkit-transform:rotate(162deg);-moz-transform:rotate(162deg);-ms-transform:rotate(162deg);-o-transform:rotate(162deg);transform:rotate(162deg)}.c100.p46 .bar{-webkit-transform:rotate(165.6deg);-moz-transform:rotate(165.6deg);-ms-transform:rotate(165.6deg);-o-transform:rotate(165.6deg);transform:rotate(165.6deg)}.c100.p47 .bar{-webkit-transform:rotate(169.2deg);-moz-transform:rotate(169.2deg);-ms-transform:rotate(169.2deg);-o-transform:rotate(169.2deg);transform:rotate(169.2deg)}.c100.p48 .bar{-webkit-transform:rotate(172.8deg);-moz-transform:rotate(172.8deg);-ms-transform:rotate(172.8deg);-o-transform:rotate(172.8deg);transform:rotate(172.8deg)}.c100.p49 .bar{-webkit-transform:rotate(176.4deg);-moz-transform:rotate(176.4deg);-ms-transform:rotate(176.4deg);-o-transform:rotate(176.4deg);transform:rotate(176.4deg)}.c100.p50 .bar{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100.p51 .bar{-webkit-transform:rotate(183.6deg);-moz-transform:rotate(183.6deg);-ms-transform:rotate(183.6deg);-o-transform:rotate(183.6deg);transform:rotate(183.6deg)}.c100.p52 .bar{-webkit-transform:rotate(187.2deg);-moz-transform:rotate(187.2deg);-ms-transform:rotate(187.2deg);-o-transform:rotate(187.2deg);transform:rotate(187.2deg)}.c100.p53 .bar{-webkit-transform:rotate(190.8deg);-moz-transform:rotate(190.8deg);-ms-transform:rotate(190.8deg);-o-transform:rotate(190.8deg);transform:rotate(190.8deg)}.c100.p54 .bar{-webkit-transform:rotate(194.4deg);-moz-transform:rotate(194.4deg);-ms-transform:rotate(194.4deg);-o-transform:rotate(194.4deg);transform:rotate(194.4deg)}.c100.p55 .bar{-webkit-transform:rotate(198deg);-moz-transform:rotate(198deg);-ms-transform:rotate(198deg);-o-transform:rotate(198deg);transform:rotate(198deg)}.c100.p56 .bar{-webkit-transform:rotate(201.6deg);-moz-transform:rotate(201.6deg);-ms-transform:rotate(201.6deg);-o-transform:rotate(201.6deg);transform:rotate(201.6deg)}.c100.p57 .bar{-webkit-transform:rotate(205.2deg);-moz-transform:rotate(205.2deg);-ms-transform:rotate(205.2deg);-o-transform:rotate(205.2deg);transform:rotate(205.2deg)}.c100.p58 .bar{-webkit-transform:rotate(208.8deg);-moz-transform:rotate(208.8deg);-ms-transform:rotate(208.8deg);-o-transform:rotate(208.8deg);transform:rotate(208.8deg)}.c100.p59 .bar{-webkit-transform:rotate(212.4deg);-moz-transform:rotate(212.4deg);-ms-transform:rotate(212.4deg);-o-transform:rotate(212.4deg);transform:rotate(212.4deg)}.c100.p60 .bar{-webkit-transform:rotate(216deg);-moz-transform:rotate(216deg);-ms-transform:rotate(216deg);-o-transform:rotate(216deg);transform:rotate(216deg)}.c100.p61 .bar{-webkit-transform:rotate(219.6deg);-moz-transform:rotate(219.6deg);-ms-transform:rotate(219.6deg);-o-transform:rotate(219.6deg);transform:rotate(219.6deg)}.c100.p62 .bar{-webkit-transform:rotate(223.2deg);-moz-transform:rotate(223.2deg);-ms-transform:rotate(223.2deg);-o-transform:rotate(223.2deg);transform:rotate(223.2deg)}.c100.p63 .bar{-webkit-transform:rotate(226.8deg);-moz-transform:rotate(226.8deg);-ms-transform:rotate(226.8deg);-o-transform:rotate(226.8deg);transform:rotate(226.8deg)}.c100.p64 .bar{-webkit-transform:rotate(230.4deg);-moz-transform:rotate(230.4deg);-ms-transform:rotate(230.4deg);-o-transform:rotate(230.4deg);transform:rotate(230.4deg)}.c100.p65 .bar{-webkit-transform:rotate(234deg);-moz-transform:rotate(234deg);-ms-transform:rotate(234deg);-o-transform:rotate(234deg);transform:rotate(234deg)}.c100.p66 .bar{-webkit-transform:rotate(237.6deg);-moz-transform:rotate(237.6deg);-ms-transform:rotate(237.6deg);-o-transform:rotate(237.6deg);transform:rotate(237.6deg)}.c100.p67 .bar{-webkit-transform:rotate(241.2deg);-moz-transform:rotate(241.2deg);-ms-transform:rotate(241.2deg);-o-transform:rotate(241.2deg);transform:rotate(241.2deg)}.c100.p68 .bar{-webkit-transform:rotate(244.8deg);-moz-transform:rotate(244.8deg);-ms-transform:rotate(244.8deg);-o-transform:rotate(244.8deg);transform:rotate(244.8deg)}.c100.p69 .bar{-webkit-transform:rotate(248.4deg);-moz-transform:rotate(248.4deg);-ms-transform:rotate(248.4deg);-o-transform:rotate(248.4deg);transform:rotate(248.4deg)}.c100.p70 .bar{-webkit-transform:rotate(252deg);-moz-transform:rotate(252deg);-ms-transform:rotate(252deg);-o-transform:rotate(252deg);transform:rotate(252deg)}.c100.p71 .bar{-webkit-transform:rotate(255.6deg);-moz-transform:rotate(255.6deg);-ms-transform:rotate(255.6deg);-o-transform:rotate(255.6deg);transform:rotate(255.6deg)}.c100.p72 .bar{-webkit-transform:rotate(259.2deg);-moz-transform:rotate(259.2deg);-ms-transform:rotate(259.2deg);-o-transform:rotate(259.2deg);transform:rotate(259.2deg)}.c100.p73 .bar{-webkit-transform:rotate(262.8deg);-moz-transform:rotate(262.8deg);-ms-transform:rotate(262.8deg);-o-transform:rotate(262.8deg);transform:rotate(262.8deg)}.c100.p74 .bar{-webkit-transform:rotate(266.4deg);-moz-transform:rotate(266.4deg);-ms-transform:rotate(266.4deg);-o-transform:rotate(266.4deg);transform:rotate(266.4deg)}.c100.p75 .bar{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.c100.p76 .bar{-webkit-transform:rotate(273.6deg);-moz-transform:rotate(273.6deg);-ms-transform:rotate(273.6deg);-o-transform:rotate(273.6deg);transform:rotate(273.6deg)}.c100.p77 .bar{-webkit-transform:rotate(277.2deg);-moz-transform:rotate(277.2deg);-ms-transform:rotate(277.2deg);-o-transform:rotate(277.2deg);transform:rotate(277.2deg)}.c100.p78 .bar{-webkit-transform:rotate(280.8deg);-moz-transform:rotate(280.8deg);-ms-transform:rotate(280.8deg);-o-transform:rotate(280.8deg);transform:rotate(280.8deg)}.c100.p79 .bar{-webkit-transform:rotate(284.4deg);-moz-transform:rotate(284.4deg);-ms-transform:rotate(284.4deg);-o-transform:rotate(284.4deg);transform:rotate(284.4deg)}.c100.p80 .bar{-webkit-transform:rotate(288deg);-moz-transform:rotate(288deg);-ms-transform:rotate(288deg);-o-transform:rotate(288deg);transform:rotate(288deg)}.c100.p81 .bar{-webkit-transform:rotate(291.6deg);-moz-transform:rotate(291.6deg);-ms-transform:rotate(291.6deg);-o-transform:rotate(291.6deg);transform:rotate(291.6deg)}.c100.p82 .bar{-webkit-transform:rotate(295.2deg);-moz-transform:rotate(295.2deg);-ms-transform:rotate(295.2deg);-o-transform:rotate(295.2deg);transform:rotate(295.2deg)}.c100.p83 .bar{-webkit-transform:rotate(298.8deg);-moz-transform:rotate(298.8deg);-ms-transform:rotate(298.8deg);-o-transform:rotate(298.8deg);transform:rotate(298.8deg)}.c100.p84 .bar{-webkit-transform:rotate(302.4deg);-moz-transform:rotate(302.4deg);-ms-transform:rotate(302.4deg);-o-transform:rotate(302.4deg);transform:rotate(302.4deg)}.c100.p85 .bar{-webkit-transform:rotate(306deg);-moz-transform:rotate(306deg);-ms-transform:rotate(306deg);-o-transform:rotate(306deg);transform:rotate(306deg)}.c100.p86 .bar{-webkit-transform:rotate(309.6deg);-moz-transform:rotate(309.6deg);-ms-transform:rotate(309.6deg);-o-transform:rotate(309.6deg);transform:rotate(309.6deg)}.c100.p87 .bar{-webkit-transform:rotate(313.2deg);-moz-transform:rotate(313.2deg);-ms-transform:rotate(313.2deg);-o-transform:rotate(313.2deg);transform:rotate(313.2deg)}.c100.p88 .bar{-webkit-transform:rotate(316.8deg);-moz-transform:rotate(316.8deg);-ms-transform:rotate(316.8deg);-o-transform:rotate(316.8deg);transform:rotate(316.8deg)}.c100.p89 .bar{-webkit-transform:rotate(320.4deg);-moz-transform:rotate(320.4deg);-ms-transform:rotate(320.4deg);-o-transform:rotate(320.4deg);transform:rotate(320.4deg)}.c100.p90 .bar{-webkit-transform:rotate(324deg);-moz-transform:rotate(324deg);-ms-transform:rotate(324deg);-o-transform:rotate(324deg);transform:rotate(324deg)}.c100.p91 .bar{-webkit-transform:rotate(327.6deg);-moz-transform:rotate(327.6deg);-ms-transform:rotate(327.6deg);-o-transform:rotate(327.6deg);transform:rotate(327.6deg)}.c100.p92 .bar{-webkit-transform:rotate(331.2deg);-moz-transform:rotate(331.2deg);-ms-transform:rotate(331.2deg);-o-transform:rotate(331.2deg);transform:rotate(331.2deg)}.c100.p93 .bar{-webkit-transform:rotate(334.8deg);-moz-transform:rotate(334.8deg);-ms-transform:rotate(334.8deg);-o-transform:rotate(334.8deg);transform:rotate(334.8deg)}.c100.p94 .bar{-webkit-transform:rotate(338.4deg);-moz-transform:rotate(338.4deg);-ms-transform:rotate(338.4deg);-o-transform:rotate(338.4deg);transform:rotate(338.4deg)}.c100.p95 .bar{-webkit-transform:rotate(342deg);-moz-transform:rotate(342deg);-ms-transform:rotate(342deg);-o-transform:rotate(342deg);transform:rotate(342deg)}.c100.p96 .bar{-webkit-transform:rotate(345.6deg);-moz-transform:rotate(345.6deg);-ms-transform:rotate(345.6deg);-o-transform:rotate(345.6deg);transform:rotate(345.6deg)}.c100.p97 .bar{-webkit-transform:rotate(349.2deg);-moz-transform:rotate(349.2deg);-ms-transform:rotate(349.2deg);-o-transform:rotate(349.2deg);transform:rotate(349.2deg)}.c100.p98 .bar{-webkit-transform:rotate(352.8deg);-moz-transform:rotate(352.8deg);-ms-transform:rotate(352.8deg);-o-transform:rotate(352.8deg);transform:rotate(352.8deg)}.c100.p99 .bar{-webkit-transform:rotate(356.4deg);-moz-transform:rotate(356.4deg);-ms-transform:rotate(356.4deg);-o-transform:rotate(356.4deg);transform:rotate(356.4deg)}.c100.p100 .bar{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}

.center {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

#email-product-table-content tr td:nth-child(2), #email-product-table-content tr td:nth-child(3) {
  font-size: 14px;
}
#email-product-table-content tr td:nth-child(1) {
  width: 75px !important;
}
#email-product-table-content tr td:nth-child(2) {
  width: 75px !important;
}

/* #email-product-table-content .btn-danger {
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
#email-product-table-content tr:hover .btn-danger {
  opacity: 1;
} */

#email-editor-dialog {
  display: none;
}
.email_preview {
  position: relative;
  width: 100%;
  height: 400px;
  border: none;
}
.new_email_content_wrapper {
  border: solid 1px #e3e6f0;
  border-radius: 0;
  padding: 5px;
  margin: 5px;
}

.ui-widget {
  font-size: 14px;
}


.fusion-date-and-formats {
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  display: block;
  float: none;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 24px;
  margin-right: 17px;
  text-align: center;
  width: 82px;
}
.referral_link {
  font-size: 14px;
  padding: 3px 5px;
  border: solid 1px;
  border-radius: 3px;
  min-width: 190px;
  display: block;
}

.fusion-date-box {
  background-color: rgb(0, 0, 164);
  border-bottom-color: rgb(0, 0, 164);
  border-bottom-left-radius: 82px;
  border-bottom-right-radius: 82px;
  border-left-color: rgb(0, 0, 164);
  border-right-color: rgb(0, 0, 164);
  border-top-color: rgb(0, 0, 164);
  border-top-left-radius: 82px;
  border-top-right-radius: 82px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 24px;
  padding-bottom: 5px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 8px;
  text-align: center;
  height: 80px;
}

.fusion-date {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  font-size: 29px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: bold;
  height: 29px;
  letter-spacing: normal;
  line-height: 29px;
  margin-top: 6px;
  text-align: center;
  width: 82px;
}

.fusion-month-year {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline;
  font-size: 12px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: normal;
  height: auto;
  letter-spacing: normal;
  line-height: 24px;
  text-align: center;
  width: auto;
}

.fusion-post-large-alternate {
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: solid 1px #e3e6f0;
}

.fusion-post-content {
  -webkit-box-flex: 1;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  display: block;
  flex-basis: 0%;
  flex-grow: 1;
  flex-shrink: 1;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 24px;
}

.blog-shortcode-post-title {
  box-sizing: border-box;
  clear: right;
  color: rgb(0, 0, 164);
  display: block;
  font-size: 20px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 25px;
  margin-bottom: 15px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
}

.fusion-post-content-container {
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  display: block;
  font-size: 14px;
}

.fusion-meta-info {
  display: none;
}

.header-date-selector-div-product {
  margin-bottom: 0px;
}
.product-dark-panel {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 0;
  padding: 30px 25px;
  background: rgb(240,240,240);
  color: #858796;
}
.product-dark-panel table {
  margin-top: 20px;
}
.product-dark-panel table td {
  padding: 5px;
}
.product-dark-panel table tr td:nth-child(2) {
  font-weight: bold;
  padding-left: 10px;
}

#modifyIntStr {
  margin-top: 6px;
  margin-bottom: 6px;
}

.header-date-selector-div-product #ui-datepicker-div {
  top: auto !important;
}
.shape{
  border-style: solid;
  border-width: 0 82px 50px 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 0;
  width: 0;
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.shape {
  border-color: rgba(255,255,255,0) #858796 rgba(255,255,255,0) rgba(255,255,255,0);
}
.ui-selected .shape {
  border-color: rgba(255,255,255,0) var(--primary-color) rgba(255,255,255,0) rgba(255,255,255,0);
}
.shape-text{
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  position: relative;
  right: -27px;
  top: 9px;
  white-space: nowrap;
  -ms-transform: rotate(34deg);
  -o-transform: rotate(34deg);
  -webkit-transform: rotate(34deg);
  transform: rotate(34deg);
  text-align: center;
  width: 60px;
}

#ProductsList tr {
  position: relative;
  cursor: pointer;
}
#ProductsList tr:hover, #all_users_table tr:hover, #all_apis_table tr:hover {
  background-color: #f8f9fc;
  cursor: pointer;
}
#ProductsList tr td:first-child, #ProductsList tr td:nth-child(2) {
  background-color: #fff !important;
}
#ProductsList tr td:first-child {
  cursor: default;
}

#ProductsList tr img, #OrderList tr img, #deleted-products-table tr img {
  max-height: 60px;
  max-width: 100px;
}

.ag-platform-logo {
  max-width: 65px;
  height: auto;
  max-height: 25px !important;
  padding: 0;
  margin-top: -7.5px;
  position: relative;
  display: inline-block;
}

tr img.platform-logo {
  width: 65px;
  height: auto;
  max-height: 65px !important;
  padding: 0;
  margin: 0px;
  position: relative;
  display: inline-block;
}

tr img.platform-logo-small {
  width: 45px;
  height: auto;
  max-height: 45px !important;
  padding-left: 0;
  margin: -5px 0px;
  position: relative;
  display: inline-block;
}

#OrderList tr td:first-child {
  text-align: center;
}

.manager-product-table-img {
  width: auto;
  max-height: 55px;
  max-width: 55px;
}

.manager-product-img-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  vertical-align: middle;
  background: #f9fafb;
  border: 1px solid #f2f4f7;
  border-radius: 0.5rem;
}

.manager-product-img-wrap .manager-product-table-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.manager-product-img-wrap__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  color: #d0d5dd;
  pointer-events: none;
}

.manager-product-img-wrap__placeholder[hidden] {
  display: none !important;
}

.manager-product-img-wrap--placeholder .manager-product-table-img {
  display: none !important;
}

.manager-product-img-wrap--placeholder .manager-product-img-wrap__placeholder {
  display: inline-flex !important;
}

html[data-bs-theme="dark"] .manager-product-img-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .manager-product-img-wrap__placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.ads-main-table tr td, .ads-main-table tr th {
  width: 10%;
}
.ads-main-table tr td:first-child {
  text-align: center;
}
.ads-main-table tr td:nth-child(3), .ads-main-table tr th:nth-child(3) {
  width: 40%;
}

/* #OrderList tr td:first-child {
  text-align: center;
} */

#InventoryList tr {
  position: relative;
  cursor: pointer;
}
#InventoryList tr:hover {
  background-color: #f8f9fc;
}
#inventory-actions-table tr:hover {
  background-color: #f8f9fc;
  cursor: pointer;
}
.form-title-purchase {
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  text-align: left;
}

.inventory-circle-indicator {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--primary-color);
  border-radius: 30px;
  color: var(--primary-color);
  font-weight: bold;
  top: 20px;
  width: 100px;
}


.sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  color: #3a3b45;
}

.tracking-pakket-item .card {
  cursor: pointer;
}
.tracking-pakket-item.ui-selected .card {
  border-color: var(--primary-color);
}

.manager-pakket-item .card, .tracking-pakket-item .card  {
  overflow: hidden;
}

.manager-pakket-item .card {
  cursor: pointer;
}
.manager-pakket-item.ui-selected .card {
  border-color: var(--primary-color);
}


.payment-interval-wrapper {
  position: absolute;
  top: -2.5px;
  right: 15px;
}
.payment-interval-wrapper .switch-selection {
  position: relative;
  font-size: 14px;
  top: 3px;
  padding: 0 10px;
  cursor: pointer;
}



.timeline {
  position: relative;
  padding: 20px 0 20px;
  list-style: none;
}
.timeline:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  width: 3px;
  margin-left: -1.5px;
  background-color: #eeeeee;
  /* deze is lijp */
  margin-bottom: 140px;
}
.timeline > li {
  position: relative;
  margin-bottom: 20px;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li > .timeline-panel {
  float: left;
  position: relative;
  width: calc(100% - 65px);
  padding: 20px;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 26px;
  right: -15px;
  border-top: 15px solid transparent;
  border-right: 0 solid #ddd;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #ddd;
}
.timeline > li > .timeline-panel:after {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 27px;
  right: -14px;
  border-top: 14px solid transparent;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  border-left: 14px solid #fff;
}
.timeline > li > .timeline-badge {
  z-index: 100;
  position: absolute;
  top: 16px;
  left: 5%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  border-radius: 50% 50% 50% 50%;
  text-align: center;
  font-size: 1.4em;
  line-height: 50px;
  color: #fff;
  background-color: #d9d7d7;
}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}
.timeline-primary {
  border-left: solid 3px var(--primary-color) !important;
}
.timeline-success {
  border-left: solid 3px #1cc875 !important;
}
.timeline-warning {
  border-left: solid 3px #FFCF00 !important;
}
.timeline-danger {
  border-left: solid 3px #e74a3b !important;
}
.timeline-info {
  border-left: solid 3px #19CAF5 !important;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
  font-size: 18px;
  margin-bottom: 0;
}
.text-muted {
  font-size: 11px;
}
.timeline-body {
  padding-top: 5px;
}

.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
  font-size: 12px;
}
.timeline-body > p + p {
  margin-top: 5px;
}

.info-hover-wolk:hover {
  color: blue;
}
#footer-div button.btn {
  width: 100%;
}

.social-icons .col-xl-6 {
  color: white;
  height: 80px;
  text-align:center;
  padding: 22px 0;
  font-size: 26px;
  position: relative;
}
.social-icons .col-xl-6 i {
  z-index: 9;
  position: relative;
}
.overlay-hover {
  z-index: 8;
  position: fixed;
  left: 0;
  top:0px;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  cursor: pointer;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}
.overlay-hover:hover {
  background: rgba(0,0,0,0.95);
}

.gjs-am-add-asset button {
  width: 35%;
}
.gjs-am-add-asset .gjs-am-add-field {
  width: 60%;
}
.gjs-am-assets {
  height: 270px;
}

.ace_editor {
  position: relative;
  width: 100%;
  height: 100%;
}

.social-icons .col-xl-6 .overlay {
  z-index: 8;
  position: absolute;
  left: 0;
  top:0px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  cursor: pointer;
}
.social-icons .col-xl-6:hover .overlay {
  background: rgba(0,0,0,0.3);
}

.video-popup-overlay {
  z-index: 99998;
  position: fixed;
  left: 0;
  top:0px;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  cursor: pointer;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}
.video-popup-overlay:hover {
  background: rgba(0,0,0,0.85);
}
.video-popup-wrapper {
  position: fixed;
  z-index: 99999;
  width: 50%;
  height: 50vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.no-bol-account-video {
  display: none;
}

.copyButtonHover:hover {
  color: blue;
  cursor: pointer;
}

.deleteProductHomeDiv {
  color: #e02d1b;
  position: relative;
  font-size: 18px;
  z-index: 99;
  left: -1.5px;
}
.deleteProductHomeDiv:hover {
  color: #000;
}

.manager-table td {
  width: 25%;
  padding-left: 15px;
}

.manager-table td p {
  margin-top: 10px;
  margin-bottom: 10px;
}

.groupTag, .newTag {
  padding: 7.5px 12.5px;
  cursor: pointer;
  margin-left: 15px;
  font-size: 14px;
}

.home-dashboard-tile-white .groupTag, .home-dashboard-tile-white .newTag {
  padding: 7.5px 12.5px;
  cursor: pointer;
  margin: 3px 4px;
  font-size: 14px;
}

.home-product-inspiratie {
  position: relative;
  top: -5px;
}
.home-product-inspiratie i {
  font-size: 22px;
  padding: 10px;
  width: 25px;
  text-align: center;
}

#userGroups .badge {
  margin-bottom: 5px;
  width: 15%;
  position: relative;
}
#costsPosts .badge {
  margin-bottom: 5px;
  position: relative;
}

.newCostPost {
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 14px;
  cursor: pointer;
  display: block;
}

#invoices_table tr {
  cursor: pointer;
}

#invoice-image-preview-canvas {
  position: relative;
  display: block;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  border: solid 1px lightgray;
}
#invoice-image-preview-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
#invoice-image-preview-file {
  width: 100%;
  height: 460px;
  max-width: 100%;
  max-height: 100%;
  display: none;
}

#invoice-files {
  width: 100%;

}

.invoice_file_tumb {
  position: relative;
  display: inline-block;
  width: 31%;
  padding: 10px;
  border-radius: 5px;
  border: solid 1px lightgray;
  font-size: 12px;
  text-align: center;
  margin-right: 2%;
  margin-bottom: 2%;
  cursor: pointer;
}

.selected-file {
  border-color: var(--primary-color);
}

img {
    image-orientation: from-image;
}

.invoice_file_tumb button {
  border-radius: 50%;
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 9;
  display: none;
  cursor: pointer;
}
.invoice_file_tumb:hover button {
  display: block;
}
.invoice_file_tumb img {
  max-width: 100%;
  max-height: 100px;
  padding-bottom: 10px;
}

.groupTagProduct, .newTagProduct {
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 7.5px;
}
.newTag:hover {
  background: #1cc875;
}
.newTagProduct:hover {
  background: var(--primary-darker-color);
}
.groupTag:hover {
  background: var(--primary-color);
}
.groupTag.active, .groupTagProduct.active {
  background: var(--primary-darker-color);
}

.groupTag i, .groupTagProduct i {
  margin-top: -20px;
  right: -10px;
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  background: #f8f9fc;
  border-radius: 100%;
  border: solid 3px #f8f9fc;
  color: #000;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
  visibility: hidden;
  opacity: 0;
}
.groupTagProduct i {
  font-size: 18px;
}
.groupTag:hover i, .groupTagProduct:hover i {
  visibility: visible;
  opacity: 1;
}
.groupTag i:hover, .groupTagProduct i:hover {
  color: #e02d1b;
}

#tracking-countdown {
  display: none;
}

.selected-items-actions {
  display: none;
  padding-bottom: 10px;
}

.product_manager {
  padding-left: 40px !important;
  overflow: hidden;
}
.product_checkbox {
  position: relative;
  z-index: 9;
}

.title-calc-top {
  position: absolute;
  top: -17px;
  color: black;
  width: 100%;
  text-align: center;
  left: 0;
  height: 16px;
  overflow: hidden;
  font-size: 12px;
}

.hide_the_icon {
  display: none;
}

.sort-buttons-right {
  display: inline-block;
  float: right;
  text-align: right;
  padding-bottom: 10px;
  padding-right: 20px;
}
.sort-buttons-left {
  display: inline-block;
  float: left;
  text-align: left;
  padding-bottom: 10px;
  padding-right: 20px;
}
.sort-buttons-block {
  display: block;
  width: 100%;
  overflow: hidden;
}

.product_manager {
  background: white;
}

#content-wrapper {
  /* height: 100vh; */
  /* overflow: auto; */
  -webkit-overflow-scrolling: touch;
}

@-webkit-keyframes rotate-logo /* Safari and Chrome */ {
  0%{
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  45% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  55% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-logo {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.fivex-logo {
  position: relative;
  display: block;
  width: 60px;
  padding: 5px;
  height: auto;
}
.fivex-logo:hover {
  -webkit-animation: rotate-logo 0.6s ease-in-out;
  -moz-animation: rotate-logo 0.6s ease-in-out;
  -ms-animation: rotate-logo 0.6s ease-in-out;
  -o-animation: rotate-logo 0.6s ease-in-out;
  animation: rotate-logo 0.6s ease-in-out;
}

.fivex-logo-text {
  position: relative;
  display: block;
  width: 100px;
  height: auto;
  left: -5px;
}
.agency-logo {
  position: relative;
    display: block;
    object-fit: contain;
    width: auto;
    height: 60px;
    left: -5px;
}

.right-triple-button {
  display: inline-block;
  float: right;
}

.hover-right-amount {
  float: right;
  margin: -5px 5px -5px 5px;
  position: relative;
  bottom: -8px;
}

.switch-toggle {
  width: 200px;
}

.switch-toggle label:not(.disabled) {
  cursor: pointer;
}

.switch-toggle.switch-candy {
  background-color: transparent;
  background: transparent;
  box-shadow: none;
  margin-top: -10px;
  margin-bottom: -10px;
  font-size: 14px;
  text-align: right;
}

.switch-toggle.switch-candy label {
  background: #ddd;
  color: #858796;
  text-shadow: none;
  padding: 0 10px;
}
.switch-candy input:checked + label {
  color: white;
  background: var(--primary-color);
}

#ui-datepicker-div {
  border: solid 1px #e8e8e8;
  border-radius: 0 !important;
  z-index: 9999 !important;
}
.ui-widget-header {
  border: 0 solid #dddddd;
  background: white;
  color: #000;
  font-weight: bold;
  border-radius: 0 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  font-weight: normal;
}

.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border-radius: 3px;
  border: solid 1px #e8e8e8;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: auto;
  line-height: 30px;
  outline: none;
  padding-left: 12.5px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
  font-weight: 500;
}


.bts_dropdown {
  width: 100%;
  position: relative;
}

.bts_dropdown .dropdown-toggle {
  background-color: #fff;
  border-radius: 3px;
  border: solid 0px #e8e8e8;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: auto;
  line-height: 30px;
  outline: none;
  padding: 0px 20px;
  text-align: left;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: auto;
  font-weight: 500;
  width: 100%;
  color: black;
}

.bts_dropdown>ul {
  max-height: calc(100vh - 300px);
  overflow-x: auto;
}

.bts_dropdown ul li label input {
  top: 11px;
  width: 22px;
  height: 22px;
  left: -7px;
}
.bts_dropdown ul li label {
  cursor: pointer;
  color: black;
  padding-top: 12px;
  width: 100%;
  font-weight: 300;
}
.bts_dropdown ul li {
  border-top: 1px dashed #eee;
  padding-left: 20px;
  border-left: 1px dashed #eee;
}

.bts_dropdown .dropdown-menu {
  max-width: 250px;
  width: 250px;
}

.multiselect.custom-select {
  -webkit-tap-highlight-color: transparent;
  border-radius: 3px;
  border: solid 1px #fff;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: auto;
  line-height: 16px;
  outline: none;
  padding-left: 12.5px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  font-weight: 500;
  color: #000;
}

/* Ensure api_select and multiselect dropdown have same height */
#api_select.multi-select {
  min-height: 38px;
  height: 38px;
}

.multiselect.dropdown-toggle-custom.custom-select {
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: center;
}

.multiselect-native-select .btn-group {
  width: 100%;
}
.group-ads .multiselect-native-select .btn-group {
  width: 100%;
  height: 40px;
}

.multiselect-container .multiselect-option:hover, .multiselect-container .multiselect-group:hover, .multiselect-container .multiselect-all:hover, .multiselect-container .multiselect-option:focus, .multiselect-container .multiselect-group:focus, .multiselect-container .multiselect-all:focus {
  background-color: #eee !important;
  color: #000;
}

.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback), .multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback), .multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback), .multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active, .multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active, .multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}


.tracking-list-table {
  position: relative;
  background: white;
  border-radius: 0 !important;
  width: 100%;
}

/* .tracking-list-table tr td:nth-child(3), .tracking-list-table tr th:nth-child(3) {
  width: 500px !important;
} */

.returns-table {
  position: relative;
  background: white;
  border-radius: 0 !important;
}

.manager-table {
  width: 100%;
}
.manager-table input {
  position: relative;
  top: -1px;
  left: 5px;
  width: 70px;
}

#TrackingList_length select, #TrackingList_filter input {
  position: relative;
  display: inline-block;
  width: 200px;
  margin: 0 0 3px 6px;
  -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}
#TrackingList_length select {
  margin: 0 6px 3px 0;
}

#TrackingList_length {
  padding-top: 20px;
}
#TrackingList_filter {
  text-align: right;
  padding-top: 20px;
}

.upload-form {
  width: 100%;
  border: 4px dashed #000;
  border-radius: 5px;
}
.upload-form:hover {
  background-color: white;
  cursor: pointer;
  border: 4px dashed var(--primary);
}
.upload-form p {
  width: 100%;
  text-align: center;
  padding: 12px 10px;
  color: #000;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.upload-form:hover p {
  color: var(--primary);
}
.upload-form input {
  cursor: pointer;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

.mail-upload-form {
  width: 100%;
  border: 3px dashed #ddd;
  border-radius: 0;
  margin: 5px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mail-upload-form:hover {
  background-color: white;
  cursor: pointer;
  border: 3px dashed #346ee0;
}
.mail-upload-form p {
  width: 100%;
  text-align: center;
  padding: 25px 10px;
  color: #ddd;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mail-upload-form:hover p {
  color: #346ee0;
}
.mail-upload-form input {
  cursor: pointer;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

.mail-upload-tiles {
  position: relative;
  width: 100%;
  display: block;
  margin: 5px;
}

.mail-file-tile {
  position: relative;
  display: inline-block;
  width: 125px;
  overflow: hidden;
  padding: 10px 5px 0px;
  padding-top: 15px;
  text-align: center;
  margin-right: 15px;
  border-radius: 5px !important;
  border: solid 1px #fff;
  background: white !important;
  box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px!important;
}
.mail-file-tile i {
  font-size: 22px;
}
.mail-file-tile p {
  font-size: 12px;
}

.delete-upload-file-button {
  position: absolute;
  margin-top: 5px;
  right: 5px;
  top: 0;
  display: none;
}
.delete-upload-file-button i {
  font-size: 12px;
}
.delete-upload-file-button a {
  font-size: 12px;
  text-decoration: none;
}
.mail-file-tile:hover .delete-upload-file-button {
  display: block;
}

.cke_dialog {
  z-index: 10055 !important;
}

.email-show-shortcodes {
  position: fixed;
  bottom: 125px;
  left: 15px;
  z-index: 10000;
  background: white;
  padding: 5px;
  width: 350px;
  font-size: 12px;
  display: none;
}

.email-hide-shortcodes {
  position: fixed;
  bottom: 175px;
  left: 15px;
  z-index: 10000;
}

.hide-shortcodes-button {
  position: absolute;
  top: -12.5px;
  right: -10px;
  font-size: 28px;
  cursor: pointer;
  background: white;
  border-radius: 100%;
  width: 37px;
  height: 37px;
  text-align: center;
}

.email-edit-exit-button {
  position: fixed;
  bottom: 125px;
  left: 15px;
  z-index: 10000;
}
.email-edit-save-button {
  position: fixed;
  bottom: 75px;
  left: 15px;
  z-index: 10000;
}

.code-edit-button-bottom {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  left: 0;
  bottom: -10px;
}

.code-edit-button-bottom .btn {
  padding: 5px 30px;
}

.gjs-cv-canvas {
  background: #ddd !important;
}

.gjs-btnt.gjs-pn-active, .gjs-color-active, .gjs-pn-btn.gjs-pn-active, .gjs-pn-btn:active, .gjs-block:hover {
  color: var(--primary-color);
}

.nice-split-input .icon {
  background: var(--primary-color);
  padding-top: 9px;
}
.nice-split-input, .nice-split-input input {
  width: 100%;
  border: solid 0;
}
.nice-split-input {
  border-radius: 0;
  margin-bottom: 10px;
}

.nav-pills-manager {
  width: 100%;
  padding: 5px 0 20px 0;
}
.nav-pills-manager li {
  width: 16.6666%;
  text-align: center;
  padding: 0 5px;
}
.nav-pills-manager li:last-child {
  padding: 0 0 0 5px;
}
.nav-pills-manager li:first-child {
  padding: 0 5px 0 0;
}
.nav-pills-manager li a {
  padding: 7px 20px;
  border: solid 1px #e8e8e8;
  background: white;
  border-radius: 5px 5px 0px 0px;
  text-decoration: none;
  width: 100%;
}
.nav-pills-manager li a.active {
  background: var(--primary-color) !important;
  color: #fff !important;
  border: solid 1px var(--primary-color);
}
.nav-pills-manager li a:hover {
  border: solid 1px #d1d1d1;
}

.api-active {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}


.nav-pills-home {
  padding: 5px 0 20px 0;
  text-align: center;
}
.nav-pills-home li {
  text-align: center;
  padding: 0 5px;
}
.nav-pills-home li:first-child {
  padding: 0 5px 0 0;
}
.nav-pills-home li:last-child {
  padding: 0 0 0 5px;
}
.nav-pills-home li a {
  padding: 7px 20px;
  border: solid 1px #e8e8e8;
  background: white;
  border-radius: 0;
  text-decoration: none;
  width: 100%;
  margin-bottom: 10px;
}
.nav-pills-home li a.active {
  background: var(--primary-color) !important;
  color: #fff !important;
  border: solid 1px var(--primary-color);
}

.custom-control {
  z-index: 0;
}

.tab-pane {
  width: 100%;
}

#ProductsList tr td {
  text-align: center;
  vertical-align: middle;
  border-left: 0;
  border-right: 0;
}

.channel-img-product-modal {
  position: absolute;
  right: 60px;
  height: 70px;
  width: 100px;
  top: 8px;
  background-color: white;
}

.loadingOverlay, .rankingLoadingOverlay, .catRankingLoadingOverlay, .noOrdersOverlay, .noDataOverlay, .loadingAdsModalOverlay {
  position: absolute;
  left: 0;
  right:0px;
  top:0px;
  bottom:0px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  z-index: 1;
  text-align: center;
  display: none;
}
.rankingLoadingOverlay i,
.catRankingLoadingOverlay i,
.loadingOverlay i,
.loadingAdsModalOverlay i,
.noOrdersOverlay i {
  color: var(--primary-color, #0077ff);
  font-size: 48px;
  position: relative;
  top: calc(50% - 34px);
}
.noDataOverlay i, .noDataOverlay a {
  color: black;
  font-size: 48px;
  position: relative;
  top: calc(50% - 34px);
}
.noDataOverlay a {
  font-size: 28px;
  font-weight: bold;
  color: white !important;
  cursor: pointer;
  padding: 10px 25px;
}
.noOrdersOverlay span {
  color: rgb(0, 0, 0);
  font-size: 28px;
  position: relative;
  top: calc(50% - 34px);
}

.nav-pill-row {
  background: var(--primary-color);
  padding: 20px;
  color: white;
  border-radius: 0;
  position: relative;
  top: -23px;
  border-radius: 0px 0px 8px 8px;
}

.blue-wrapper {
  background: var(--primary-color);
  border-radius: 5px;
  padding: 20px 15px 35px 15px;
}

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

.tracking-list-table-wrapper {
  position: relative;
}

.product-cover-img {
  position: relative;
  display: inline-block;
  width: 15%;
  height: 100px;
  -webkit-background-size: contain !important;
  -moz-background-size: contain !important;
  -o-background-size: contain !important;
  background-size: contain !important;
}

.search-result-product-img {
  position: relative;
  display: inline-block;
  width: 15%;
  height: 80px;
  -webkit-background-size: contain !important;
  -moz-background-size: contain !important;
  -o-background-size: contain !important;
  background-size: contain !important;
  margin: 0 0 0 0;
}
.search-result-product {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}
.search-result-header {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;

}

#products-list {
  display: none;
  position: relative;
  display: block;
  width: 100%;
}


.search-result-product-title {
  font-size: 14px;
  font-weight: 400;
  display: block;
}

.search-result-product-description {
  display: block;
  max-height: 50px;
  overflow: hidden;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  padding-bottom: 0;
}

.product_img_td {
  height: 100px;
  width: 150px;
  text-align: center;
  background: white;
}
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before {
  right: 20px;
}
table.dataTable thead tr {
  position: sticky;
  background: white;
  top: 0;
}
.tracking-list-tr-hover {
  cursor: pointer;
}
.orders-list-tr-hover {
  cursor: default;
}
.orders-list-tr-hover td {
  vertical-align: middle;
  border-left: 0 !important;
  border-right: 0 !important;
}

.niceOrdersButtonsWrapper{
  z-index: 2;
}
#ProductsList,  #OrderList, #InventoryList,  #ReturnsList tbody > tr > td {
  font-size: 80%;
}

.dt-button-collection::before {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 18px;
  padding-bottom: 10px;
  display: block;
  font-weight: 600;
  content: "KPI's";
}

.dt-button-background {
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0px;
  top: 0px;
  z-index: 3;
}

.dt-button-collection {
  background: white !important;
  border-radius: 5px !important;
  z-index: 9999;
  overflow-y: scroll;
  position: fixed;
  width: 100% !important;
  max-height: 75%;
  max-width: 500px !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  margin: auto !important;
  padding: 15px 20px !important;
}

.dt-button-collection a {
  text-decoration: none;
  color: #202020 !important;
  margin-left: 5px;
  display: block;
  font-size: 14px;
  font-weight: 500;
  background: white !important;
}
.dt-button.buttons-columnVisibility:before {
   font-family: "Font Awesome 5 Free";
   content: '\f0c8'!important;
   display: inline-block;
   padding-right: 10px;
   color: #202020;
   font-size: 22px;
   bottom: -2.5px;
   position: relative;
}

.dt-button.buttons-columnVisibility.active:before, .dt-button.buttons-columnVisibility.dt-button-active:before {
   content: '\f14a'!important;
   /* color: var(--primary-color); */
}

.course-download-button {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 150px;
  width: 150px;
  opacity: 0;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.card:hover .course-download-button {
  opacity: 1;
}

.product_img_div {
  height: 100px;
  width: 150px;
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-background-size: contain !important;
  -moz-background-size: contain !important;
  -o-background-size: contain !important;
  background-size: contain !important;
}
.product-right-sidebar {
  position: relative;
  display: inline-block;
  width: 84%;
  float: right;
  padding-right: 20px;
}

.shortDescription {
  display: block;
  max-height: 50px;
  overflow: hidden;
}

.product-supplier {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  margin: 0 2px 10px 8px;
  border: solid 1px #dddfeb;
  border-radius: 3px;
  font-size: 12px;
}
.product-supplier-price {
  font-size: 14px;
}
.product-supplier-name {
  font-size: 14px;
  font-weight: 700;
}

.product-search-header {
  position: relative;
  width: 100%;
  display: block;
  padding: 20px 20px 0 20px;
}

.center-title {
  position: absolute;
  display: inline-block;
  max-width: 60%;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 24px;
  font-weight: bold;
}

.right-filter-options {
    display: inline-block;
    float: right;
    position: relative;
    top: 8px;
}

.loader_wrapper {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99;
}
.loader {
  width: 20px;
  height: 20px;
  border: 5px solid #FFF;
  border-bottom-color: var(--primary-color);
  border-radius: 50%;
  box-sizing: border-box;
  display: none;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
}
}
.loader_wrapper .loader_div i {
  font-size: 100px;
}

.loader_div {
  position: relative;
  width: 200px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  top: 30vh;
}

.clickable-hand {
  cursor: pointer;
}

.next-step-link {
  color: rgba(255, 255, 255, 0.8);
}
#header-status-div:hover .next-step-link {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

/* .sidebar-brand-text {
  font-size: 14px;
  margin-left: 10px !important;
} */

.sidebar .sidebar-brand {
  font-size: 20px;
}

.sidebar-brand .sidebar-brand-icon-mini {
  display: none !important;
}

@media (min-width: 1201px) {
  .sidebar-brand-icon-mini {
    display: none !important;
  }
}

.sidebar-brand .sidebar-brand-icon i {
    font-size: 38px;
    -webkit-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
    color: white;
}

@media (min-width: 768px) {
  .sidebar .sidebar-brand .sidebar-brand-icon i {
    font-size: 38px;
    margin-right: -6px;
  }
}

.product-specs-table {
  font-size: 14px;
  font-weight: bold;
}

.product-specs-table td {
  width: 20%;
  text-align: center;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
  background: var(--primary-color);
}
.image_picker_selector img {
  border-radius: 0;
}
ul.thumbnails.image_picker_selector li .thumbnail {
  border-radius: 0;
  cursor: pointer;
}

.package_description {
  font-size: 18px;
  color: #1cc875;
  /* font-weight: bold; */
  position: relative;
  margin-top: 25px;
}
.package_description p {
  position: relative;
  margin-top: -20px;
  display: block;
}
.package_description i.fa-check-circle {
  font-size: 36px;
  color: #1cc875;
  padding-right: 10px;
  position: relative;
  bottom: -7px;
  padding-left: 25px;
  padding-bottom: 7px;
}

#total_omzet_pm {
  position: relative;
  width: 100%;
  left: 0;
  text-align: center;
  right: 0;
  margin: auto;
  font-size: 28px;
  /* font-weight: bold; */
}

.fas-star {
  font-size: 40px;
  color: #e67e22;
}
.fas-star.half {
  position: relative;
}
.fas-star.half:before {
  position: relative;
  z-index: 9;
  width: 47%;
  display: block;
  overflow: hidden;
}
.fas-star.half:after {
  content: '\e006';
  position: absolute;
  z-index: 8;
  color: #bdc3c7;
  top: 0;
  left: 0;
}

.cat_ul {
  text-decoration: none;
  list-style: none;
  margin-left: 0;
  padding-left: 20px;
  padding-bottom: 0;
  margin-bottom: 0;
}
.cat_ul li {
  cursor: pointer;
  position: relative;
  display: block;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.cat_ul li i {
  position: absolute;
  left: -10px;
  top: 3px;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.cat_ul li:hover i {
  left: -5px;
}
.cat_ul li:hover {
  color: black;
}
.selectChartDiv {
  position: relative;
  left: -5px;
}
.selectChartDiv button {
  background: none;
  padding: 5px 10px;
  margin: -7px 0 -4px 0;
  font-size: 14px;
}
.selectChartDiv button.active {
  background: var(--primary-color);
  color: white;
}
.sidebar-brand .sidebar-brand-text {
  text-transform: none;
}

.header-countdown {
  width: 110px;
  text-align: center;
  padding-left: 5px;
}
.header-countdown .flip  {
  display: inline-block;
  font-size: 18px;
  /* font-weight: bold; */
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
  /* background-color: rgb(240,240,240); */
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border-radius: 0;
}

.hover-text-counter {
  position: absolute;
  bottom: -50px;
  padding: 10px 15px;
  background: white;
  -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
  border-radius: 0;
  visibility: hidden;
  opacity: 1;
  z-index: 999;
}
.navbar-nav .btn {
  width: 130px;
}


.header-countdown:hover .hover-text-counter {
  visibility: visible;
  /* opacity: 1; */
}
.remove-product-button, .inventory-alert-button, .success-alert-button {
  text-align: center;
  height: 25px;
  border: solid 2px red;
  border-radius: 0;
  display: block;
  color: white;
  padding: 4px 10px 4px 10px;
  color: red;
  font-size: 12px;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  text-decoration: none !important;
}
.remove-product-button i, .inventory-alert-button i, .success-alert-button i {
  position: relative;
  top: 0.5px;
}
.remove-product-button:hover {
  color: white;
  background: red;
}
.inventory-alert-button {
  border: solid 2px var(--primary-color);
  color: var(--primary-color);
}
.inventory-alert-button:hover {
  color: white;
  background: var(--primary-color);
}
.success-alert-button {
  border: solid 2px #1cc875;
  color: #1cc875;
}
.success-alert-button:hover {
  color: white;
  background: #1cc875;
}
.calc_number_prefix {
  width: 20px;
  text-align: right;
  font-size: 18px;
  padding-right: 10px;
}

.cbtm-5 {
  padding-bottom: 7px;
}

.balance-table {
  width: 100%;
}
.balance-table td:first-child {
  text-align: right;
  padding-right: 1px;
  width: 60%;
}
.balance-table tr td:nth-last-child(1) {
  padding-left: 10px;
}

.calc-break-line {
  border-top: solid 1px #e3e6f0;
  padding-bottom: 5px;
}
.td-border-top {
  border-top: solid 1px #858796;
  text-align: center;
  padding-top: 5px;
  padding-right: 10px;
}

.calc-new {
  color: #fff;
  font-weight: bold;
  position: relative;
  background: #1cc875;
  padding: 3px 7px;
  border-radius: 0;
  font-size: 12px !important;
  left: 10px;
  top: -5px;
}

.manager-new-update {
  color: #fff;
  font-weight: bold;
  position: absolute;
  background: #1cc875;
  padding: 3px 7px;
  border-radius: 0;
  font-size: 12px;
  margin-left: -52px;
  margin-top: -20px;
  opacity: 0;
  animation-name: manager-new-button-animation;
  animation-duration: 6s;
  animation-delay: 2s;
  animation-timing-function: ease;
  -webkit-animation-name: manager-new-button-animation;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: ease;
}

@keyframes manager-new-button-animation {
  0%   {margin-top: -20px; opacity: 0;display: block;}
  10%  {margin-top: -30px; opacity: 1;}
  15%  {margin-top: -25px; opacity: 1;}
  20%  {margin-top: -30px; opacity: 1;}
  25%  {margin-top: -25px; opacity: 1;}
  100% {margin-top: -25px;opacity: 0; display: none;}
}

.toggled .calc-new {
  display: none !important;
}
.firstTableItem td {
  border-top: 0;
  padding-top: 0;
}
.firstTableItem {
  padding-top: 0;
}
.inputNumber input {
  position: relative;
  top: -1px;
  left: 5px;
  width: 90px;
  padding: 5px 10px;
  background: white;
  border-top: solid 1px #e8e8e8;
  border-bottom: solid 1px #e8e8e8;
  border-left: solid 1px #e8e8e8;
  border-right: solid 1px #e8e8e8;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  outline: none;
  border-radius: 3px;
  color: #000;
  font-weight: 500;
}
.status-warning {
  color: red;
}
.status-warning-yellow {
  color: #f4b619;
}
.status-success {
  color: #1cc875;
}
.image_picker_selector li {
  max-width: 18%;
}
.image_picker_image {
  max-width: 100%;
}
.les-player-img {
  padding: 0;
  width: 100%;
  position: relative;
}
.no-underline:hover .les-player-img-icon {
  color: rgba(0,0,0,.8);
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  font-size: 80px;
}
.les-player-img-icon {
  padding: 0;
  color: rgba(0,0,0,.5);
  display: block;
  position: absolute;
  left: calc(50% - 30px);
  top: calc(50% - 30px);
  font-size: 60px;
  margin: auto;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}
.no-underline:hover {
  text-decoration: none;
}
.cursus-video-short-desc, .overzicht-short-desc {
  padding: 15px;
  padding-bottom: 0;
  color: #5a5c69;
}

.course-vid-wrapper {
  position: relative;
  padding: 0 20px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 15px;
}
.video-desc-main {
  position: relative;
  left: 16.66666%;
  right: 0;
  margin: auto;
  padding: 0;
  border-radius: 0;
}
.next-prev-bttn {
  position: absolute;
  cursor: pointer;
  text-align: center;
}

.next-prev-bttn a:hover {
  text-decoration: none;
}
.next-prev-bttn i {
  font-size: 50px;
  padding-bottom: 10px;
}
.next-prev-bttn-next {
  right: 5%;
  top: 42.5%;
}
.next-prev-bttn-prev {
  left: 5%;
  top: 42.5%;
}

.overzicht-table-responsive {
  width: 100%;
  margin-bottom: 10px;
  font-size: 14px;
}

.overzicht-table-responsive li {
  list-style: none;
  padding-left: 0;
}
.overzicht-table-responsive ul {
  padding-left: 15px;
}

.header-section-rel-course {
  position: relative;
  width: 100%;
}
.playing-now:after {
  content: 'Speelt nu ...';
  color: white;
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  padding: 40% 0% 0% 0% ;
  font-style: oblique;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  background: rgba(0,0,0,.5);
  text-align: center;
}

.playing-now .les-player-img-icon {
  display: none;
}

.p_class {
  margin-top:-5px;
  padding: 10px 15px;
}
.course-price-title {
  color: green;
  float: right;
}

.list_class li {
  padding-left: 1.3em;
  margin-top:-15px;
  padding-bottom:10px;
  list-style: none;
  padding-top: 2px;
}
.list_class li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
  padding-right: 25px;
}
.list_class.link li:before {
  content: "\f0c1"; /* FontAwesome Unicode */
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c1";
}

.attachment-container {
  padding: 25px;
  width: 80%;
  position: relative;
  left: 10%;
  background: #f8f9fc;
  margin-bottom: 30px;
  border-radius: 0;
  font-size: 12px;
}

.hot-lead-icon-fixed {
  position: absolute;
  top: -25px;
  left: -13px;
  font-size: 30px;
  color: red;
  z-index: 1;
  animation: hot-lead-flicker 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 87, 34, 0.85));
}

.hot-lead-card {
  position: relative;
  animation: hot-lead-pulse 2.2s ease-in-out infinite;
}

@keyframes hot-lead-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(255, 61, 0, 0.55))
      drop-shadow(0 0 16px rgba(255, 145, 0, 0.4))
      drop-shadow(0 0 30px rgba(255, 196, 0, 0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(255, 61, 0, 0.85))
      drop-shadow(0 0 26px rgba(255, 145, 0, 0.65))
      drop-shadow(0 0 46px rgba(255, 196, 0, 0.4));
  }
}

@keyframes hot-lead-flicker {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  25% { transform: scale(1.08) rotate(2deg); }
  50% { transform: scale(0.95) rotate(-1deg); }
  75% { transform: scale(1.05) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hot-lead-card,
  .hot-lead-icon-fixed {
    animation: none;
  }
}

.hot-lead-icon-overzicht {
  position: absolute;
  top: -25px;
  right: -5px;
  font-size: 50px;
  color: orange;
}

.in-touch-icon-fixed {
  position: absolute;
  top: -25px;
  right: -13px;
  font-size: 30px;
  color: var(--primary-color);
}
.in-touch-icon-fixed .fa-check-circle {
  background-color: white;
  border-radius: 50%;
}


table.tablepluspunten {
  padding: 0;
  margin: 0;
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
}
li.tick {
  background-image: url('https://www.dutchwebs.com/images/tick.png');
  background-repeat: no-repeat;
  background-position: 0 center;
  padding-left: 100px;
  background-size: 80px;
  list-style-type: none;
  height: 70px;
  display:inline-block;
  vertical-align:middle;
}


.mega-knop {
  position: absolute;
  height: 120px;
  width: 50.1%;
  display: inline-block;
  margin: 0 0 0 0;
  cursor: pointer;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.mega-knop-links {
  left: 0;
  border-radius: .35rem 0rem 0rem .35rem;
  background: var(--primary-color);
}
.mega-knop-rechts {
  right: 0;
  border-radius: 0rem .35rem .35rem 0rem;
  background: #1cc875;
}
.mega-knop-links:hover {
  background: #4262c0;
}
.mega-knop-rechts:hover {
  background: #17a875;
}
.mega-knop-div {
  position: relative;
  width: 100%;
  display: block;
  padding: 20px 30px;
  font-size: 18px;
  color: white;
  text-align: right;
}
.mega-knop-text {
  position: relative;
  width: 100%;
  padding: 0;
  margin-top: -25px;
  text-align: center;
  display: block;
  color: white;
  font-size: 28px;
  font-weight: bold;
}
.mega-knop-text i {
  padding-right: 35px;
  font-size: 60px;
  margin-top: -25px;
  margin-bottom: -20px;
  position: relative;
  bottom: -10px;
}
.tick h2 {
  font-size: 18px;
  line-height: 18px;
}
td.pluspunten {
  padding: 10px 20px 10px 20px;
}


.footer-trial-melding {
  position: fixed !important;
  bottom: 25px;
  left: 0px;
  right: 0px;
  width: 70%;
  margin: auto;
  z-index: 9990;
  max-width: 650px;
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
}
.footer-trial-melding .close {
  top: 2px;
}

.header-trial-melding {
  display: none;
}

/* Trial activation banner — card CTA at top of main content */
.trial-activation-banner {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 1.25rem 0 1.25rem;
  padding: 1rem 1.25rem 1rem 1.375rem;
  text-decoration: none !important;
  color: inherit;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 48%, #f3f8ff 100%);
  border: 1px solid rgba(0, 119, 255, 0.12);
  border-radius: 1rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(0, 119, 255, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.trial-activation-banner__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #4da0ff 0%, #0077ff 55%, #06f4f2 100%);
  border-radius: 1rem 0 0 1rem;
}

.trial-activation-banner__glow {
  position: absolute;
  top: -40%;
  right: -5%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 119, 255, 0.12) 0%, rgba(0, 119, 255, 0) 70%);
  pointer-events: none;
}

.trial-activation-banner:hover,
.trial-activation-banner:focus-visible {
  color: inherit;
  text-decoration: none !important;
  border-color: rgba(0, 119, 255, 0.22);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 12px 32px rgba(0, 119, 255, 0.12);
  transform: translateY(-1px);
}

.trial-activation-banner:focus-visible {
  outline: 2px solid var(--fivex-blue, #0077ff);
  outline-offset: 2px;
}

.trial-activation-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: 100%;
}

.trial-activation-banner__main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.trial-activation-banner__icon {
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  color: #fff;
  background: linear-gradient(145deg, #4da0ff 0%, #0077ff 52%, #0065d9 100%);
  box-shadow:
    0 4px 12px rgba(0, 119, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.trial-activation-banner__content {
  min-width: 0;
}

.trial-activation-banner__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.trial-activation-banner__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #0065d9;
  background: rgba(0, 119, 255, 0.1);
  border: 1px solid rgba(0, 119, 255, 0.14);
  border-radius: 999px;
}

.trial-activation-banner__countdown {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #475467;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 999px;
}

.trial-activation-banner__countdown--urgent {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}

.trial-activation-banner__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fivex-text, #101828);
}

.trial-activation-banner__text {
  margin: 0.1875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fivex-text-secondary, #667085);
}

.trial-activation-banner__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.375rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, #2d8cff 0%, #0077ff 100%);
  border: 1px solid #0065d9;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, gap 0.15s ease;
}

.trial-activation-banner__cta-icon {
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.trial-activation-banner:hover .trial-activation-banner__cta,
.trial-activation-banner:focus-visible .trial-activation-banner__cta {
  background: linear-gradient(180deg, #4da0ff 0%, #0065d9 100%);
  border-color: #005fcc;
  box-shadow: 0 4px 14px rgba(0, 119, 255, 0.32);
  gap: 0.5rem;
}

.trial-activation-banner:hover .trial-activation-banner__cta-icon,
.trial-activation-banner:focus-visible .trial-activation-banner__cta-icon {
  transform: translateX(2px);
}

.trial-activation-banner--urgent {
  background: linear-gradient(135deg, #fffdf8 0%, #fff8eb 48%, #fff4e0 100%);
  border-color: rgba(217, 119, 6, 0.18);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(217, 119, 6, 0.08);
}

.trial-activation-banner--urgent .trial-activation-banner__accent {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
}

.trial-activation-banner--urgent .trial-activation-banner__glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0) 70%);
}

.trial-activation-banner--urgent:hover,
.trial-activation-banner--urgent:focus-visible {
  border-color: rgba(217, 119, 6, 0.28);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 12px 32px rgba(217, 119, 6, 0.14);
}

.trial-activation-banner--urgent .trial-activation-banner__icon {
  background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 52%, #d97706 100%);
  box-shadow:
    0 4px 12px rgba(217, 119, 6, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.trial-activation-banner--urgent .trial-activation-banner__badge {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(217, 119, 6, 0.18);
}

.trial-activation-banner--urgent .trial-activation-banner__cta {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-color: #b45309;
}

.trial-activation-banner--urgent:hover .trial-activation-banner__cta,
.trial-activation-banner--urgent:focus-visible .trial-activation-banner__cta {
  background: linear-gradient(180deg, #fbbf24 0%, #b45309 100%);
  border-color: #92400e;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.32);
}

@media (max-width: 575.98px) {
  .trial-activation-banner {
    padding: 0.875rem 1rem 0.875rem 1.125rem;
    margin: 1rem 0 1rem;
  }

  .trial-activation-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
  }

  .trial-activation-banner__cta {
    width: 100%;
  }
}

.greentransform {
  color:#5C8FFC;
  text-decoration: underline;
}
.gratisbutton {
  color: white;
  font-size: 20px;
  background-color: #3A78FC;
  border: solid 1px #336BE0;
  padding: 10px;
  border-radius: 0;
  cursor: pointer;
}
.gratisbuttongreen {
  color: white;
  font-size: 20px;
  background-color: #43AD36;
  border: solid 1px #2C7123;
  padding: 10px;
  border-radius: 0;
  position: absolute;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
}
.macbook {
  background-image: url('https://www.dutchwebs.com/images/macbook.png');
  background-repeat:no-repeat;
  background-size: contain;
  background-position: center;
  width: 600px;
  height: 400px;
  position:relative;
}
.videoinmacbook {
  position: absolute;
  border: solid 0 black;
  height: 256px;
  width: 409px;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  top:52px;
  background-color: black;
}

#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}
.product_amount_slider {
    position: relative;
    display: inline-block;
    width: 50%;
    margin-bottom: 40px;
    left: 10px;
}

.no-underline .card {
  color: #e3e6f0 !important;
}

.sidebar .nav-item > div {
  z-index: 99;
  /* border-radius: 5px; */
  overflow: hidden;
  margin-bottom: 5px !important;
}

.sidebar-header {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #adb5bd;
  padding: 1rem .875rem .25rem;
  list-style: none;
  background: transparent !important;
}

.header-manager-filters {
  padding: 10px;
}

.header-manager-filters .btn {
  cursor: pointer;
}

.header-manager-filters .btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: var(--text-color);
}

.header-manager-filters .btn-outline-primary.active:hover {
  background-color: var(--primary-color);
  color: #fff;
}


.nice-delete-button-api {
  position: relative;
  width: 100%;
  top: 7.5px;
  cursor: pointer;
}



.selected-date-span-left {
  padding-right: 30px;
}
.selected-date-span-right {
  padding-left: 30px;
}
#userTypeModal .portfolio-item {
  margin: 0 0 15px;
  right: 0;
}
#userTypeModal .portfolio-item .portfolio-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
#userTypeModal .portfolio-item .portfolio-link .portfolio-hover {
  background: rgba(254, 209, 54, 0.9);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
#userTypeModal .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;
}
#userTypeModal .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: white;
}
#userTypeModal .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
}
#userTypeModal .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#userTypeModal .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}
#userTypeModal .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  background-color: white;
  text-align: center;
  padding: 25px;
}
#userTypeModal .portfolio-item .portfolio-caption h4 {
  text-transform: none;
  margin: 0;
}
#userTypeModal .portfolio-item .portfolio-caption p {
  font-style: italic;
  font-size: 14px;
  margin: 0;
}
#userTypeModal * {
  z-index: 2;
}

.img-responsive {
  max-width: 100%;
  max-height: 100%;
}

.userTypeRow {
  position: relative;
  padding: 10px 10px 0 10px;
  width: 100%;
  left: 0;
  margin: 0 0 0 0;
}

.portfolio-item {
  padding: 10px;
  cursor: pointer;
}
.portfolio-item .inner-box {
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
  -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}
.portfolio-item:hover .inner-box {
  -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.4)!important;
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.4)!important;
}

.videoPopup {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  max-width: 750px;
  opacity: 0;
  top: 25vh;
  z-index: 9999999;
  display: none;
  -webkit-animation: fadeIn 0.5s forwards;
  animation: fadeIn 0.5s forwards;

}


.responsePopup {
  position: fixed;
  right: -100%;
  top: 9vh;
  z-index: 9999999;
  display: none;
  -webkit-animation: slideIn 0.5s forwards;
  -webkit-animation-delay: 2s;
  animation: slideIn 0.5s forwards;
}
.responsePopup .alert {
  -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.4)!important;
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.4)!important;
}

.sudo-translation-wrapper {
  font-size: 12px;
  padding: 10px 20px;
  background: #ddd;
  border-radius: 0;
  max-height: 250px;
  overflow: auto;
  margin-bottom: 20px;
}

.server-sudo-page {
  width: 14.66665%;
  display: inline-block;
  position: relative;
  border: solid 1px gray;
  border-radius: 0;
  padding: 20px;
  margin: 1%;
  text-align: center;
}
.sudo-server-icon {
  font-size: 58px;
  padding-bottom: 15px;
}
.small-check-sudo {
  position: absolute;
  top: 60px;
  left: calc(50% + 40px);
  font-size: 28px;
}

@media only screen and (max-width: 1100px) {
  .server-sudo-page {
    width: 31.33332%;
  }
}
@media only screen and (max-width: 760px) {
  .server-sudo-page {
    width: 48%;
  }
}
@media only screen and (max-width: 640px) {
  .server-sudo-page {
    width: 99%;
  }
}

@-webkit-keyframes slideIn {
    100% { right: 2%; }
}

@keyframes slideIn {
    100% { right: 2%; }
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


#export_orders .card {
  background: rgb(250, 250, 250);
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
}
#export_orders .card td {
  vertical-align: middle;
}


.home-inventory-image {
  max-height: 60px;
  max-width: 100px;
}

.home-dashboard-tile .card-body {
  background: var(--primary-color);
  color: white;
  border-radius: 5px;
  text-align: center;
}

.cursus-video-short-desc {
  display: none;
}
.header-section-rel-course .cursus-video-short-desc {
  display: block;
}

.manager-home-key-data .top, .manager-home-key-data .middle, .manager-home-key-data .bottom {
  position: relative;
  display: block;
  text-align: center;
}

.manager-home-key-data .top {
  font-size: 14px;
  color: white;
}
.manager-home-key-data .middle {
  font-size: 26px;
  color: white;
  font-weight: bold;
}
.manager-home-key-data .bottom {
  font-size: 14px;
  color: white;
}

.manager-home-graph {
  padding: 20px;
}

.orders-today-widget-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.orders-today-widget-card > .orders-today-widget-body {
  flex: 1 1 auto;
}

.orders-today-widget-body {
  position: relative;
  min-height: 280px;
  height: 100%;
  padding: 1.5rem 1.25rem 1rem;
  background: linear-gradient(135deg, #0077ff 0%, #0069e6 100%) !important;
  overflow: hidden;
}

.orders-today-widget-body::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -10%;
  width: min(300px, 55%);
  height: min(300px, 55%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.orders-today-widget-body::after {
  content: "";
  position: absolute;
  inset: auto -12% -35% auto;
  width: min(260px, 45%);
  height: min(260px, 45%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.orders-today-widget-summary {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  text-align: center;
}

.orders-today-widget-summary .top {
  display: block;
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.orders-today-widget-summary .middle {
  display: block;
  margin-top: 0.25rem;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.orders-today-widget-summary .bottom {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  color: rgba(255, 255, 255, 0.88);
}

.orders-today-widget-loader {
  align-items: center;
  justify-content: center;
  background: rgba(0, 105, 230, 0.35) !important;
  z-index: 3;
}

.orders-today-widget-loader.is-active {
  display: flex;
}

.orders-today-widget-loader .loading-wrapper-icon {
  position: static;
}

.orders-today-realtime-btn {
  margin: 16px 0 0;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
}

.orders-today-realtime-btn:hover {
  color: #0077ff;
  background: #fff;
  border-color: #fff;
}

.orders-today-graph {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 180px;
  height: auto !important;
  margin-top: 0.75rem;
  padding: 0 0.5rem 0.25rem !important;
  display: flex;
  flex-direction: column;
}

.orders-today-graph__canvas {
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
}

.orders-today-empty-state {
  flex: 1 1 auto;
  height: 100%;
  min-height: 180px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  padding: 28px;
}

.orders-today-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #0077ff;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.orders-today-empty-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.orders-today-empty-text {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.orders-today-empty-timeline {
  width: min(320px, 100%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.orders-today-empty-timeline span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.orders-today-empty-timeline span:nth-child(2) {
  height: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.orders-today-empty-timeline span:nth-child(3) {
  height: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.orders-today-empty-timeline span:nth-child(4) {
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
}

.open-orders-widget-card {
  overflow: hidden;
}

.open-orders-widget-toolbar {
  background: #fff;
  border-bottom: 1px solid #eef1f5;
  padding: 0.875rem 1rem 1rem !important;
}

.open-orders-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.open-orders-widget-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #101828;
}

.open-orders-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.625rem;
  height: 1.625rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #eff4ff;
  color: #175cd3;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.open-orders-toolbar-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.open-orders-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0.625rem;
  min-height: 2.25rem;
  border: 1px solid #e4e7ec;
  border-radius: 0.5rem;
  background: #f9fafb;
  cursor: text;
}

.open-orders-search-field:focus-within {
  border-color: #84caff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
}

.open-orders-search-field > i {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #98a2b3;
}

.open-orders-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.125rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #344054;
  background: transparent;
  box-shadow: none !important;
}

.open-orders-search-input::placeholder {
  color: #98a2b3;
  font-weight: 400;
}

.open-orders-search-input:focus {
  outline: none;
  background: transparent;
}

.open-orders-widget-body {
  min-height: 330px;
  height: 330px;
  padding: 0;
  overflow: auto;
  background: #fff;
}

.open-orders-empty-state {
  height: 100%;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 28px;
}

.open-orders-empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
}

.open-orders-empty-icon.is-success {
  color: #1cc875;
  background: rgba(28, 200, 117, 0.12);
}

.open-orders-empty-icon.is-neutral {
  color: #0077ff;
  background: rgba(0, 119, 255, 0.1);
}

.open-orders-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2933;
  margin-bottom: 6px;
}

.open-orders-empty-text {
  max-width: 430px;
  font-size: 14px;
  line-height: 1.5;
  color: #7a8290;
}

.open-orders-empty-steps {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.open-orders-empty-steps span {
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: #e9edf3;
}

.open-orders-empty-steps span:first-child {
  background: rgba(28, 200, 117, 0.35);
}

.open-orders-empty-steps span:nth-child(2) {
  background: rgba(28, 200, 117, 0.55);
}

.open-orders-empty-steps span:nth-child(3) {
  background: rgba(28, 200, 117, 0.75);
}

/* ── Open orders widget — dark mode ── */
html[data-bs-theme="dark"] .open-orders-widget-card,
body[data-theme="dark"] .open-orders-widget-card,
[data-bs-theme="dark"] .open-orders-widget-card {
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .open-orders-widget-toolbar,
body[data-theme="dark"] .open-orders-widget-toolbar,
[data-bs-theme="dark"] .open-orders-widget-toolbar {
  background: var(--bs-secondary-bg) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .open-orders-widget-title,
body[data-theme="dark"] .open-orders-widget-title,
[data-bs-theme="dark"] .open-orders-widget-title {
  color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .open-orders-count-badge,
body[data-theme="dark"] .open-orders-count-badge,
[data-bs-theme="dark"] .open-orders-count-badge {
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color);
}

html[data-bs-theme="dark"] .open-orders-search-field,
body[data-theme="dark"] .open-orders-search-field,
[data-bs-theme="dark"] .open-orders-search-field {
  background: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .open-orders-search-field:focus-within,
body[data-theme="dark"] .open-orders-search-field:focus-within,
[data-bs-theme="dark"] .open-orders-search-field:focus-within {
  border-color: var(--bs-primary) !important;
  background: var(--bs-body-bg) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

html[data-bs-theme="dark"] .open-orders-search-field > i,
body[data-theme="dark"] .open-orders-search-field > i,
[data-bs-theme="dark"] .open-orders-search-field > i {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .open-orders-search-input,
body[data-theme="dark"] .open-orders-search-input,
[data-bs-theme="dark"] .open-orders-search-input {
  color: var(--bs-body-color) !important;
  background: transparent !important;
}

html[data-bs-theme="dark"] .open-orders-search-input::placeholder,
body[data-theme="dark"] .open-orders-search-input::placeholder,
[data-bs-theme="dark"] .open-orders-search-input::placeholder {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .open-orders-widget-body,
body[data-theme="dark"] .open-orders-widget-body,
[data-bs-theme="dark"] .open-orders-widget-body {
  background: var(--bs-secondary-bg) !important;
}

html[data-bs-theme="dark"] .open-orders-empty-title,
body[data-theme="dark"] .open-orders-empty-title,
[data-bs-theme="dark"] .open-orders-empty-title {
  color: var(--bs-emphasis-color);
}

html[data-bs-theme="dark"] .open-orders-empty-text,
body[data-theme="dark"] .open-orders-empty-text,
[data-bs-theme="dark"] .open-orders-empty-text {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .open-orders-empty-icon.is-neutral,
body[data-theme="dark"] .open-orders-empty-icon.is-neutral,
[data-bs-theme="dark"] .open-orders-empty-icon.is-neutral {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .open-orders-empty-steps span,
body[data-theme="dark"] .open-orders-empty-steps span,
[data-bs-theme="dark"] .open-orders-empty-steps span {
  background: var(--bs-border-color);
}

html[data-bs-theme="dark"] .open-orders-empty-steps span:first-child,
html[data-bs-theme="dark"] .open-orders-empty-steps span:nth-child(2),
html[data-bs-theme="dark"] .open-orders-empty-steps span:nth-child(3),
body[data-theme="dark"] .open-orders-empty-steps span:first-child,
body[data-theme="dark"] .open-orders-empty-steps span:nth-child(2),
body[data-theme="dark"] .open-orders-empty-steps span:nth-child(3),
[data-bs-theme="dark"] .open-orders-empty-steps span:first-child,
[data-bs-theme="dark"] .open-orders-empty-steps span:nth-child(2),
[data-bs-theme="dark"] .open-orders-empty-steps span:nth-child(3) {
  background: rgba(var(--bs-success-rgb), 0.35);
}

/* ── Homepage tasks widget ── */
.tasks-widget-card {
  overflow: hidden;
}

.tasks-widget-toolbar {
  background: #fff;
  border-bottom: 1px solid #eef1f5;
  padding: 0.875rem 1rem 1rem !important;
}

.tasks-widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.tasks-widget-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #101828;
}

.tasks-widget-subtitle {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: #667085;
}

.tasks-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.625rem;
  height: 1.625rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #eff4ff;
  color: #175cd3;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.tasks-widget-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.tasks-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.tasks-summary-chip i {
  font-size: 0.625rem;
  opacity: 0.9;
}

.tasks-summary-chip.is-danger {
  background: #fef3f2;
  color: #d92d20;
}

.tasks-summary-chip.is-primary {
  background: #eff4ff;
  color: #175cd3;
}

.tasks-summary-chip.is-warning {
  background: #fffaeb;
  color: #b54708;
}

.tasks-widget-body {
  min-height: 220px;
  max-height: 420px;
  padding: 0;
  overflow: auto;
  background: #fff;
}

.tasks-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tasks-widget-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f2f4f7;
}

.tasks-widget-row:last-child {
  border-bottom: 0;
}

.tasks-widget-ai-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  border: 0;
  border-left: 1px solid #f2f4f7;
  background: #fff;
  color: #6941c6;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tasks-widget-ai-btn:hover,
.tasks-widget-ai-btn:focus-visible {
  background: #f9f5ff;
  color: #53389e;
  outline: none;
}

.tasks-widget-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8125rem 1rem;
  border: 0;
  border-bottom: 1px solid #f2f4f7;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tasks-widget-item:hover,
.tasks-widget-item:focus-visible {
  background: #f9fafb;
  outline: none;
}

.tasks-widget-row .tasks-widget-item {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
}

.tasks-priority-dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-top: 0.125rem;
  align-self: flex-start;
}

.tasks-priority-dot.is-low {
  background: #98a2b3;
}

.tasks-priority-dot.is-medium {
  background: #0086c9;
}

.tasks-priority-dot.is-high {
  background: #f79009;
}

.tasks-priority-dot.is-urgent {
  background: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.tasks-item-main {
  flex: 1 1 auto;
  min-width: 0;
}

.tasks-item-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-top: 0.3125rem;
}

.tasks-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
}

.tasks-status-pill.is-open {
  background: #f2f4f7;
  color: #475467;
}

.tasks-status-pill.is-progress {
  background: #eff4ff;
  color: #175cd3;
}

.tasks-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6941c6;
}

.tasks-meta-tag i {
  font-size: 0.625rem;
}

.tasks-meta-tag.is-ai {
  background: rgba(105, 65, 198, 0.08);
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
}

.tasks-meta-assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  font-size: 0.6875rem;
  color: #667085;
}

.tasks-assignee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #eaecf0;
  color: #475467;
  font-size: 0.5625rem;
  font-weight: 700;
  flex-shrink: 0;
}

.tasks-assignee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 7rem;
}

.tasks-meta-date {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: #667085;
}

.tasks-meta-date i {
  font-size: 0.625rem;
  color: #98a2b3;
}

.tasks-meta-date.is-overdue {
  color: #d92d20;
  font-weight: 600;
}

.tasks-meta-date.is-overdue i {
  color: #d92d20;
}

.tasks-item-chevron {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  color: #d0d5dd;
}

.tasks-widget-footer {
  border-top: 1px solid #eef1f5;
  background: #fafbfc;
  padding: 0.625rem 1rem;
}

.tasks-widget-footer-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #175cd3;
  text-decoration: none;
}

.tasks-widget-footer-link:hover {
  color: #1849a9;
  text-decoration: none;
}

.tasks-empty-state {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
}

.tasks-empty-icon {
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.375rem;
}

.tasks-empty-icon.is-success {
  color: #1cc875;
  background: rgba(28, 200, 117, 0.12);
}

.tasks-empty-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2933;
  margin-bottom: 0.375rem;
}

.tasks-empty-text {
  max-width: 26rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #7a8290;
  margin-bottom: 1.125rem;
}

.tasks-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .tasks-widget-item {
    padding: 0.75rem 0.875rem;
    gap: 0.625rem;
  }

  .tasks-item-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .tasks-meta-assignee {
    display: none;
  }

  .tasks-widget-body {
    max-height: none;
  }
}

.orders-api-widget {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.055) !important;
}

.orders-api-header {
  padding: 18px 20px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.orders-api-title {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.orders-api-subtitle {
  display: block;
  margin-top: 7px;
  color: #98a2b3;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.orders-api-badge {
  height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  color: #344054;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: 12px;
  font-weight: 600;
}

.orders-api-badge i {
  color: #667085;
  font-size: 12px;
}

.orders-api-body {
  min-height: 360px;
  padding: 14px 18px 18px !important;
}

.orders-api-loading {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.orders-api-grid {
  width: 100%;
  min-height: 220px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.orders-api-widget .ag-root-wrapper {
  border: 0 !important;
  border-radius: 10px;
}

.orders-api-widget .ag-header {
  border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
  background: #fbfcff !important;
}

.orders-api-widget .ag-header-cell {
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.orders-api-widget .ag-row {
  border-bottom: 1px solid rgba(17, 24, 39, 0.055) !important;
}

.orders-api-widget .ag-row-hover {
  background: #f9fbff !important;
}

.orders-api-empty {
  min-height: 280px;
  padding: 32px 20px;
  border: 1px dashed rgba(0, 119, 255, 0.24);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 119, 255, 0.055), rgba(255, 255, 255, 0));
}

.orders-api-empty.is-grid {
  min-height: 220px;
  border: 0;
  background: transparent;
}

.orders-api-empty-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0077ff;
  background: rgba(0, 119, 255, 0.1);
  font-size: 22px;
}

.orders-api-empty h6 {
  margin: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.orders-api-empty p {
  max-width: 460px;
  margin: 9px 0 0;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.orders-api-empty-bars {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.orders-api-empty-bars span {
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 119, 255, 0.16);
}

.orders-api-empty-bars span:nth-child(2) {
  background: rgba(0, 119, 255, 0.32);
}

.orders-api-empty-bars span:nth-child(3) {
  background: rgba(0, 119, 255, 0.48);
}

.realtime-no-orders-overlay {
  padding: 28px 20px !important;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 1) !important;
  z-index: 3;
}

.realtime-no-orders-card {
  width: min(420px, calc(100% - 32px));
  min-height: 190px;
  padding: 28px 24px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 1);
}

.realtime-no-orders-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.realtime-no-orders-title {
  margin: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.realtime-no-orders-text {
  max-width: 300px;
  margin: 8px 0 0;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.realtime-summary-kpi-card {
  min-height: 106px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.055) !important;
}

.realtime-summary-kpi-card .card-body {
  min-height: 106px;
  padding: 16px 18px !important;
  display: flex;
  align-items: center;
}

.realtime-summary-kpi-layout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.realtime-summary-kpi-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #667085;
  background: rgba(102, 112, 133, 0.12);
  font-size: 16px;
}

.realtime-summary-kpi-content {
  min-width: 0;
  flex: 1 1 auto;
}

.realtime-summary-kpi-card .kpi-card-title {
  margin-bottom: 7px;
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.realtime-summary-kpi-value {
  min-height: 26px;
  display: flex;
  align-items: center;
  color: #111827;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.realtime-summary-kpi-value .pulse-wrapper {
  height: 26px;
  width: 26px;
  margin: 0;
  left: 13px;
  top: 13px;
}

.realtime-summary-kpi-trend-wrap,
.realtime-summary-kpi-note {
  min-height: 24px;
  margin-top: 6px;
}

.realtime-summary-kpi-note {
  color: #667085;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.realtime-summary-kpi-trend {
  max-width: 130px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.realtime-summary-kpi-trend i {
  font-size: 10px;
}

.realtime-summary-kpi-trend.is-good {
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
}

.realtime-summary-kpi-trend.is-bad {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}

@media (max-width: 575.98px) {
  .open-orders-toolbar-search {
    grid-template-columns: 1fr;
  }

  .open-orders-widget-body,
  .open-orders-empty-state {
    min-height: 280px;
    height: 280px;
  }

  .orders-api-header {
    padding: 16px;
    flex-direction: column;
  }

  .orders-api-body {
    min-height: 320px;
    padding: 12px !important;
  }

  .orders-api-badge {
    width: 100%;
    justify-content: center;
  }
}

.home-voorraad-table {
  width: 100%;
}

.home-voorraad-table td {
  border: 0 solid black;
  vertical-align: middle;
}
.home-voorraad-table td:first-child {
  text-align: center;
}

.stock-advice-widget {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.055) !important;
}

.stock-advice-header {
  padding: 18px 20px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.stock-advice-title {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.stock-advice-subtitle {
  display: block;
  margin-top: 7px;
  color: #98a2b3;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.stock-advice-count {
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
  font-size: 12px;
  font-weight: 600;
}

.stock-advice-body {
  min-height: 320px;
  max-height: 381px;
  padding: 14px 18px 18px !important;
  overflow: auto;
}

.stock-advice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stock-advice-loading {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.stock-advice-item {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.stock-advice-item:hover {
  border-color: rgba(0, 119, 255, 0.18);
  background: #f9fbff;
  transform: translateY(-1px);
}

.stock-advice-image {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fff;
}

.stock-advice-image img {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  object-fit: contain;
}

.stock-advice-copy {
  min-width: 0;
  display: block;
}

.stock-advice-name {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-advice-meta {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-advice-stock {
  min-width: 86px;
  padding: 7px 10px;
  border-radius: 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.stock-advice-stock span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.stock-advice-stock strong {
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
}

.stock-advice-stock.is-warning {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
}

.stock-advice-stock.is-danger {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

.stock-advice-status {
  max-width: 240px;
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}

.stock-advice-status .advice-in-table {
  max-width: 240px;
}

.stock-advice-status .row {
  margin: 0;
}

.stock-advice-status .col-12 {
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.35;
}

.stock-advice-status hr {
  display: none;
}

.stock-advice-empty {
  min-height: 260px;
  padding: 28px 20px;
  border: 1px dashed rgba(16, 185, 129, 0.28);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.055), rgba(255, 255, 255, 0));
}

.stock-advice-empty-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  font-size: 20px;
}

.stock-advice-empty h6 {
  margin: 0;
  color: #101828;
  font-size: 16px;
  font-weight: 600;
}

.stock-advice-empty p {
  max-width: 430px;
  margin: 8px 0 0;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 575.98px) {
  .stock-advice-header {
    padding: 16px;
  }

  .stock-advice-body {
    padding: 12px !important;
  }

  .stock-advice-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .stock-advice-stock,
  .stock-advice-status {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
  }
}

/* Dark mode — Voorraad advies widget */
html[data-bs-theme="dark"] .stock-advice-widget,
body[data-theme="dark"] .stock-advice-widget {
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .stock-advice-header,
body[data-theme="dark"] .stock-advice-header {
  background: var(--bs-secondary-bg) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-title,
body[data-theme="dark"] .stock-advice-title {
  color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-subtitle,
body[data-theme="dark"] .stock-advice-subtitle {
  color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-body,
body[data-theme="dark"] .stock-advice-body {
  background: var(--bs-body-bg) !important;
}

html[data-bs-theme="dark"] .stock-advice-loading,
body[data-theme="dark"] .stock-advice-loading {
  color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-item,
body[data-theme="dark"] .stock-advice-item {
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-item:hover,
body[data-theme="dark"] .stock-advice-item:hover {
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-image,
body[data-theme="dark"] .stock-advice-image {
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-name,
body[data-theme="dark"] .stock-advice-name {
  color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-meta,
html[data-bs-theme="dark"] .stock-advice-status,
body[data-theme="dark"] .stock-advice-meta,
body[data-theme="dark"] .stock-advice-status {
  color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-empty,
body[data-theme="dark"] .stock-advice-empty {
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-empty h6,
body[data-theme="dark"] .stock-advice-empty h6 {
  color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .stock-advice-empty p,
body[data-theme="dark"] .stock-advice-empty p {
  color: var(--bs-secondary-color) !important;
}


.featured_products_tr td {
  vertical-align: middle;
  cursor: pointer;
}

#ProductsList.table thead th, #ProductsList.table tfoot th {
  text-align: center;
  font-size: 14px;
}


#OrderList.table th, #ReturnsList.table th {
  font-size: 14px;
}



.product-img-expander-manager {
  position: absolute !important;
  float: left;
  width: 5%;
  height: 100%;
  position: relative;
  display: block;
  z-index: 1;
  -webkit-background-size: contain !important;
  -moz-background-size: contain !important;
  -o-background-size: contain !important;
  background-size: contain !important;
  top: 0;
}

.winst-product-expander {
  margin-bottom: 10px !important;
}
.winst-product-expander {
  margin-bottom: 10px !important;
}
.manager-product-header-title {
  position: relative;
  width: 60%;
  float: left;
  padding-left: 7%;
}

.manager-product-header-title h6 {
  font-size: 14px;
}

.manager-product-table-filters {
  width: 40%;
  float: right;
}
.manager-product-table-filters td {
  width: 16.66666%;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}

.manager-product-header-table-header {
  padding-right: 50px;
  bottom: -5px;
  position: relative;
}

.manager-product-header-table {
  position: relative;
  width: 40%;
  float: right;
}
.manager-product-header-table td {
  width: 16.66666%;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}
.manager-product-header-table-header .manager-product-header-table td {
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
/* .manager-product-header-table td:last-child {
  width: 25%;
  text-align: center;
} */
.manager-product-header-table .hover-right-amount {
  float: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-weight: bold;
}
.manager-product-header-table .title-calc-top {
  float: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.winstSearchDiv {
  float: left;
  position: relative;
  bottom: -3px;
  left:15px;
}
.internal_stock_input {
  position: relative;
  width: 125px;
}
#header-button-inkoop-voorraad {
  font-size: 14px;
}

.apiVideoWrapper {
  position: fixed;
  width: 750px;
  top: 0;
  right: 0;
  max-width: 33%;
  display: none;
  z-index: 999;
}
.apiVideoWrapper .embed-responsive-item {
  width: 100%;
  opacity: .9;
  margin-bottom: -7px;
}
.apiVideoWrapper:hover .embed-responsive-item {
  opacity: 1;
}
.closeVideoIcon {
  position: absolute;
  left: -13px;
  bottom: -17px;
  font-size: 28px;
  color: black;
  z-index: 10;
}
.closeVideoIcon i {
  border-radius: 100%;
  background: white;
  border:solid 2px white;
  cursor: pointer;
}
.closeVideoIcon i:hover {
  color: red;
}

.overviewInventoryAlertSelect {
  position: relative;
  display: block;
  width: 125px;
  top: 7.5px;
}

#userLogWrapper {
  padding: 0 30px;
}

.sidebar-scrollable-wrapper::-webkit-scrollbar {
  display: none;
}
.sidebar-scrollable-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.btn-margin-left-orders {
  left: 25px;
  position: relative;
}

.btn-margin-left-crm {
  float: left;
  display: inline-block;
}

.nav-pill-row .nav-pills {
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .hide-on-toggled {
    display: none !important;
  }

  .form-control,
  .form-control:not(textarea) {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  select.form-control {
    height: 44px !important;
    line-height: 44px !important;
  }

  .input-group .form-control,
  .input-group select.form-control {
    height: 44px !important;
  }

  .input-group-append .btn,
  .input-group-prepend .btn {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media screen and (min-width: 768px) {

  #userTypeModal .portfolio-item {
    margin: 0 0 10px;
  }
}


/* .img-wrapper-td, .img-wrapper-tr {
  width: 82px !important;
} */
.img-wrapper-td > .row > p{
  margin: 0!important;
}

.search-orders {
  float: left;
  position: relative;
  margin-right: 10px;
  border: solid 1px #d1d3e2;
  color: rgb(0, 0, 0);
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 0;
}

@media only screen and (max-width: 1600px) {
  .sort-buttons-right, .sort-buttons-left {
    width: 50%;
  }
}

@media only screen and (max-width: 1200px) {
  .video-desc-main {
    left: 0%;
  }
  .next-prev-bttn {
    display: none;
  }
  .nav-pills-manager li {
    width: 33.333333%;
    text-align: center;
  }

  #buttonPrevTimeframe, #buttonNextTimeframe {
    font-size: 10px;
  }

  .navbar .d-md-inline-block {
    display: inline-block !important;
    width: calc(100% - 180px) !important;
  }


}

@media only screen and (max-width: 750px) {

  #buttonPrevTimeframe {
    float: left;
  }

  .header-manager-row #buttonPrevTimeframe {
    position: absolute;
    left: 25px;
    top: 95px;
  }

  .manager-new-update {
    color: #fff;
    font-weight: bold;
    position: absolute;
    background: #1cc875;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 80px;
    margin-top: -20px;
    opacity: 0;
    animation-name: manager-new-button-animation;
    animation-duration: 6s;
    animation-delay: 2s;
    animation-timing-function: ease;
    -webkit-animation-name: manager-new-button-animation;
    -webkit-animation-duration: 6s;
    -webkit-animation-delay: 2s;
    -webkit-animation-timing-function: ease;
  }

  .main-page-title {
    display: none;
  }

  .product-img-expander-manager {
    position: relative !important;
    float: none;
    width: 200px;
    height: 100px;
    display: block;
    -webkit-background-size: contain !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    background-size: contain !important;
    top: 7px;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: 10px;
  }
  .manager-product-header-title {
    width: 100%;
  }
  .manager-product-header-table, .manager-product-table-filters {
    position: relative;
    width: 140%;
    float: none;
    top: 10px;
    left: -10%;
  }
  .manager-product-header-table-header {
      padding-bottom: 20px;
  }
  .manager-product-header-table {
    margin-bottom: 28px;
    position: relative;
  }
  .manager-product-header-table td, .manager-product-header-table td, .manager-product-table-filters td {
    font-size: 14px;
    display: inline-block;
    width: 30% !important;
  }
  .sort-buttons-left {
    display: block;
    float: none;
    text-align: left;
    padding-bottom: 10px;
    padding-right: 20px;
    width: 95%;
  }
  .sort-buttons-left button {
    display: inline-block;
    float: none !important;
    text-align: left;
    padding-bottom: 10px;
    padding-right: 20px;
    width: 100%;
  }
  #selectAll, #refreshOrders {
    float: none;
    display: inline-block;
  }
  .winstSearchDiv {
    float: none;
    position: relative;
    bottom: 0;
    left: 0;
  }

  #tap-instellingen td {
    display: block;
    border-top: 0;
    padding-top: 0 !important;
  }

  #tap-instellingen .btn {
    margin-bottom: 6px;
    width: 100%;
  }

  .apiVideoWrapper {
    margin-bottom: 6px;
    max-width: 66%;
  }

}

@media only screen and (max-width: 660px) {

  #ProductsList tr img, #OrderList tr img, #deleted-products-table tr img {
    max-height: 60px;
    max-width: 40px;
  }

  .selected-date-span-left {
    display: block;
    padding-right: 0;
  }
  .selected-date-span-right {
    display: block;
    padding-left: 0;
  }
  .selected-date-select-center {
    display: block;
  }
  .nav-pills-manager .product-modal-tab {
    width: 100%!important;
    text-align: center;
    padding: 0!important;
  }

  .calc-new {
    position: absolute;
    left: 60px;
    font-size: 8px !important;
  }
  .center-title {
    font-size: 12px;
    top: 10px;
  }
  .add_to_trakinglist_right_button button {
    font-size: 12px;
    width: 50px;
    padding-left: 10px;
    padding-right: 0;
  }
  .add_to_trakinglist_right_button span {
    display: none;
  }

  .nav-pills-manager li a {
    overflow: hidden;
  }


  .header-manager-row #buttonNextTimeframe {
    position: absolute;
    right: 25px;
    top: 95px;
  }

  .header-manager-row {
    padding-bottom: 0;
  }

  .header-date-selector-div {
    position: relative;
    top: 40px;
    padding-bottom: 30px;
    text-align: center;
    display: block;
    left: 0;
    width: 100%;
    display: block;
  }

  .switch-toggle.switch-candy label {
    width: 80px;
    font-size: 10px;
  }

  .page-header-div {
    padding-bottom: 0;
  }

  .nav-pills-manager li a {
    padding-left: 10px;
    margin-left: 0;
    font-size: 12px;
    height: 33px;
  }

  td.pluspunten {
    display: block;
  }

  .overzicht-table-responsive td {
    width: 100%;
    display: block;
  }

  .product-cover-img, .product-right-sidebar {
    width: 100%;
    display: block;
  }
  .product-specs-table {
    width:100%;
    text-align: left;
    padding-top: 15px;
    margin-top: 10px;
    font-size: 14px;
  }
  .product-specs-table tr {
    width: 100%;
    text-align: left;
  }
  .product-specs-table td {
    width:100%;
    text-align: left;
    display: block;
  }
  .product-search-header {
    padding-bottom: 50px;
  }
  .product-search-header .btn {
    font-size: 12px;
  }
  #sort-filter {
    width: 100px;
  }
  .product-supplier {
    position: relative;
    display: inline-block;
    padding: 5px 7.5px;
    margin: 0 3px 6px 0;
    border: solid 1px #dddfeb;
    border-radius: 3px;
    font-size: 12px;
  }
  .product-right-sidebar {
    padding: 10px 0 0 0;
  }
  .product-cover-img {
    width: 100%;
    height: 30vh;
  }

  .topbar .dropdown.mx-1 {
    display: none;
  }

  .winst-product-expander h6 {
    width: 100%;
    display: block;
  }
  .winst-product-expander .collapse {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hover-right-amount {
    float: right;
    margin: 5px 2px 15px 2px;
    position: relative;
    bottom: 0;
    top: 10px;
  }

}




.gjs-pn-options, .gjs-clm-tags {
  display: none;
}
.gjs-pn-panel.gjs-pn-commands .gjs-pn-buttons {
  width: 80px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.gjs-trt-traits {
  margin-bottom: -5px;
  padding-top: 5px;
}

.editor-style-title, .editor-blocks-title {
  position: relative;
  height: 10px;
  width: 100%;
}

.editor-blocks-title::before {
  content: "Blokken";
}
.editor-style-title::before {
  content: "Style";
}



/* Secondary color for the text color */
.gjs-two-color {
  color: rgba(255, 255, 255, 1);
}
/* Tertiary color for the background */
.gjs-three-bg {
  background-color: var(--primary-color);
  color: white;
}
/* Quaternary color for the text color */
.gjs-four-color,
.gjs-four-color-h:hover {
  color: var(--primary-color);
}

.gjs-btnt.gjs-pn-active, .gjs-color-active, .gjs-pn-btn.gjs-pn-active, .gjs-pn-btn:active, .gjs-block:hover {
  color: var(--primary-color);
}

.gjs-pn-devices-c {
  padding: 3px;
}
.gjs-pn-views-container {
  height: 100vh;
}
.gjs-cv-canvas {
  height: calc(100vh - 40px);
}

.blocks-container {
  position: relative;
  width: 15%;
  display: inline-block;
  height: 100vh;
  background: green;
  margin: 0 0 0 0 !important;
  padding: 0 0 0 0 !important;
  border:none;
}
.main-editor-container {
  position: relative;
  width: 85%;
  display: inline-block;
  height: 100vh;
  background: green;
  margin: 0 0 0 0 !important;
  padding: 0 0 0 0 !important;
  border:none;
  float: right;
}
.ui-autocomplete {
   z-index: 9999999 !important;
}

.card .card-header[data-toggle=collapse]::after,
.card .card-header[data-bs-toggle=collapse]::after{
  position: absolute;
  right: 0;
  top: 10%;
  padding-right: 1.725rem;
  line-height: 51px;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  color: #bbb;
  content: '\f107';
}
.card .card-header[data-toggle=collapse].collapsed::after,
.card .card-header[data-bs-toggle=collapse].collapsed::after {
    content: '\f105';
}

#progressionAccordion .card-header {
  cursor: pointer;
  border-radius: 0;
}
#progressionAccordion .card-header h5 {
  font-size: 18px;
  font-weight: 500;
  padding: 15px;
  padding-left: 45px;
  color: rgb(0, 0, 0);
}
#progressionAccordion .progression-status-icon {
  position: absolute;
  font-size: 28px;
  margin-top: 6px;
  margin-left: 5px;
}
#stepsAccordion .card-body {
  background-color: rgb(250, 250, 250);
  border-radius: 0px 0px 10px 10px;
}
#stepsAccordion .card {
  margin-bottom: 15px;
}
.steps {
  border: 2px solid white !important;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  border-radius: 10px !important;
}
.steps:has(.collapse):hover {
  border: 2px solid var(--primary-color) !important;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 4px 10px 0px;
}
.steps:has(.collapse.show){
  border: 2px solid var(--primary-color) !important;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 4px 10px 0px;
}

.step-progression-header {
  border-radius: 0px !important;
}
#upload-logo-form input[type='file']{
  display: none;
}
.custom-file-upload{
  border: 1px solid #ddd;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
.progression-cloud {
  background-color: #e8e8e8;
  border-left: 3px solid var(--primary-color);
  width: 500px;
  height: auto;
  top: 50%;
  right: 75px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  max-width: 50%;
}
.progression-cloud p {
  margin: 15px;
  color: black;
  font-size: 0.8em;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0px;
  width: 40px;
  height: 40px;
  margin: 6px;
  border: 6px solid var(--primary-color);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--primary-color) transparent transparent transparent;
}
.lds-ring-white div {
  border: 8px solid #fff;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



.home-orders-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.home-orders-table td {
  vertical-align: middle;
}
.nice-home-order-img {
  position: relative;
  width: 100%;
  max-width: 50px;
  max-height: 50px;
}
.stacked-product-images {
  min-width: 68px;
  text-align: center;
  white-space: nowrap;
}
.stacked-product-images .stacked-image {
  position: relative;
  margin-left: -14px;
  width: 44px;
  height: 44px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: solid 3px #fff;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(20, 30, 45, 0.08);
}
.stacked-product-images .stacked-image:first-child {
  position: relative;
  left: 0;
  margin-left: 0;
}

.stacked-product-amount {
  position: absolute;
  left: -7px;
  bottom: -7px;
  background: var(--primary-color);
  color: white;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 11px;
  min-width: 21px;
  height: 21px;
  padding: 1px 5px;
  font-weight: bold;
  line-height: 15px;
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67, .2);
  box-shadow: 0 1px 4px 1px rgba(64,60,67, .2);
}

.open-orders-widget-card .open-order-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background-color: #f2f4f7;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid #eaecf0;
}

.open-orders-widget-card .open-order-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  font-size: 0.875rem;
}

.open-orders-widget-card .open-order-thumb-qty {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  border: 1.5px solid #fff;
  background: #1570ef;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 0.875rem;
  text-align: center;
}

.open-orders-widget-card .open-order-thumb-more {
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 0 0.3125rem;
  border-radius: 999px;
  border: 1.5px solid #fff;
  background: #667085;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 0.875rem;
}

.home-open-order-line {
  transition: background 0.12s ease;
}

.home-open-order-line:hover {
  background: #f9fafb;
}

.home-open-order-line > td {
  border-top: 1px solid #f2f4f7 !important;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.home-open-order-line:first-child > td {
  border-top: 0 !important;
}

.open-order-image-cell {
  width: 56px;
  padding-left: 1rem !important;
  padding-right: 0.625rem !important;
  vertical-align: middle;
}

.open-order-content-cell {
  width: auto;
  min-width: 0;
  overflow: hidden;
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
}

.open-order-action-cell {
  width: 88px;
  padding-right: 1rem !important;
  text-align: right;
  vertical-align: middle;
}

.open-order-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 0;
}

.open-order-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #344054;
  letter-spacing: 0.01em;
}

.open-order-price {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #667085;
  white-space: nowrap;
}

.open-order-products-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-width: 100%;
  overflow: hidden;
}

.open-order-product-line {
  display: flex;
  gap: 0.375rem;
  min-width: 0;
  color: #667085;
  font-size: 0.75rem;
  line-height: 1.35;
}

.open-order-product-qty {
  flex: 0 0 auto;
  font-weight: 500;
  color: #98a2b3;
}

.open-order-product-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-order-product-more {
  width: fit-content;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #98a2b3;
}

.open-orders-widget-card .open-orders-invoice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3125rem 0.5rem;
  border: 1px solid #d0d5dd;
  border-radius: 0.375rem;
  background: #fff;
  color: #344054;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.open-orders-widget-card .open-orders-invoice-btn i {
  color: #1570ef;
  font-size: 0.75rem;
}

.open-orders-widget-card .open-orders-invoice-btn:hover,
.open-orders-widget-card .open-orders-invoice-btn:focus-visible {
  background: #f0f9ff;
  border-color: #84caff;
  color: #175cd3;
  outline: none;
}

html[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb,
body[data-theme="dark"] .open-orders-widget-card .open-order-thumb,
[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb--empty,
body[data-theme="dark"] .open-orders-widget-card .open-order-thumb--empty,
[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb--empty {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb-qty,
body[data-theme="dark"] .open-orders-widget-card .open-order-thumb-qty,
[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb-qty {
  border-color: var(--bs-secondary-bg);
  background: var(--bs-primary);
  color: #fff;
}

html[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb-more,
body[data-theme="dark"] .open-orders-widget-card .open-order-thumb-more,
[data-bs-theme="dark"] .open-orders-widget-card .open-order-thumb-more {
  border-color: var(--bs-secondary-bg);
  background: var(--bs-secondary-color);
  color: var(--bs-emphasis-color);
}

html[data-bs-theme="dark"] .home-open-order-line:hover,
body[data-theme="dark"] .home-open-order-line:hover,
[data-bs-theme="dark"] .home-open-order-line:hover {
  background: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .home-open-order-line > td,
body[data-theme="dark"] .home-open-order-line > td,
[data-bs-theme="dark"] .home-open-order-line > td {
  border-top-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .open-order-id,
body[data-theme="dark"] .open-order-id,
[data-bs-theme="dark"] .open-order-id {
  color: var(--bs-emphasis-color);
}

html[data-bs-theme="dark"] .open-order-price,
html[data-bs-theme="dark"] .open-order-product-line,
body[data-theme="dark"] .open-order-price,
body[data-theme="dark"] .open-order-product-line,
[data-bs-theme="dark"] .open-order-price,
[data-bs-theme="dark"] .open-order-product-line {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .open-order-product-qty,
html[data-bs-theme="dark"] .open-order-product-more,
body[data-theme="dark"] .open-order-product-qty,
body[data-theme="dark"] .open-order-product-more,
[data-bs-theme="dark"] .open-order-product-qty,
[data-bs-theme="dark"] .open-order-product-more {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn,
body[data-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn,
[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn {
  color: var(--bs-body-color) !important;
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn i,
body[data-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn i,
[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn i {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn:hover,
html[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn:focus-visible,
body[data-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn:hover,
body[data-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn:focus-visible,
[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn:hover,
[data-bs-theme="dark"] .open-orders-widget-card .open-orders-invoice-btn:focus-visible {
  color: var(--bs-emphasis-color) !important;
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

.home-open-order-line h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.home-open-order-line table {
  font-size: 14px;
}

.list-products-table-style tr, .list-products-table-style td {
  padding: 0;
  border: solid 0 !important;
}

.list-products-table-style tr td:first-child {
  padding-right: 10px;
  text-align: center;
}

@media (max-width: 575.98px) {
  .home-open-order-line,
  .home-open-order-line > td {
    display: block;
    width: 100% !important;
  }

  .open-order-image-cell {
    padding: 18px 18px 8px !important;
    text-align: left;
  }

  .open-order-content-cell {
    padding: 0 18px 12px !important;
  }

  .open-order-action-cell {
    padding: 0 1rem 0.75rem !important;
    text-align: left;
  }

  .open-orders-widget-card .open-orders-invoice-btn {
    width: 100%;
    justify-content: center;
  }
}

.small-channel-img {
  position: relative;
  width: 100%;
  max-width: 30px;
  max-height: 30px;
}

.add-channel-img {
  position: relative;
  width: auto;
  max-width: 100px;
  max-height: 40px;
}

.invoice-export-products-table tr {
  border-top: solid 1px #fff;
}
.invoice-export-products-table tr:first-child {
  border-top: solid 0;
}
.invoice-export-products-table td:first-child {
  border-left: .25rem solid var(--primary-color);
}
.invoice-export-products-table td {
  vertical-align: middle;
}

.nice-select.wide .list {
  max-height: 300px;
  overflow: scroll;
}


.sidebar-dark .nav-item .nav-link {
  /* border-radius: 5px; */
  margin: 0% 0% 0% 4%;
  width: 92%;
}

.sidebar-dark .nav-item.active .nav-link {
  color: var(--primary-color);
  /* background: rgb(41,41,41); */
}

.nav-item:hover .nav-link:hover {
  color: var(--primary-color); /* twijfel */
}

.nav-bg {
  background-color:rgb(0, 0, 0);
}

.border-left-dark {
  border-left: .25rem solid #000;
}
.credentials_selector {
  /* color: #000; */
  background-color: white;
  border-color: #fff;
  margin-right: 1.5px;
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
  border-radius: 5px;
  color: var(--primary-color);
}
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  /* background-color: rgb(240,240,240); */
  color: var(--primary-color) !important;
}


.manager-calc-title {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #333;
}

.nav-pill-row p {
  color: #333;
}

.report-option-a {
  cursor: pointer;
  color: #000;
  text-decoration: none !important;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  padding: 20px 0;
}
.report-option-a i {
  font-size: 38px;
  padding-bottom: 15px;
}

.reportFieldsList {
  list-style: none;
  padding-left: 0;
  min-height: 100px;
}
.ui-report-field-item {
  list-style: none;
  padding: 7.5px 15px !important;
  border: solid 2px #eee;
  border-radius: 5px;
  cursor: move;
  font-weight: 600;
  margin: 5px 0;
  display: inline-block;
  background-color: #fff;
}
.activeList .ui-report-field-item {
  border-color: var(--primary-color);
  color: var(--primary-color);
  display: list-item;
}

html[data-bs-theme="dark"] .ui-report-field-item,
[data-bs-theme="dark"] .ui-report-field-item,
body[data-theme="dark"] .ui-report-field-item {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .activeList .ui-report-field-item,
[data-bs-theme="dark"] .activeList .ui-report-field-item,
body[data-theme="dark"] .activeList .ui-report-field-item {
  background-color: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-secondary-bg)) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

html[data-bs-theme="dark"] .reportFieldsList h4,
[data-bs-theme="dark"] .reportFieldsList h4,
body[data-theme="dark"] .reportFieldsList h4 {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .template-selector.bg-white,
html[data-bs-theme="dark"] .template-selector,
[data-bs-theme="dark"] .template-selector.bg-white,
[data-bs-theme="dark"] .template-selector,
body[data-theme="dark"] .template-selector.bg-white,
body[data-theme="dark"] .template-selector {
  background: var(--bs-secondary-bg) !important;
  border: 1px solid var(--bs-border-color);
}

html[data-bs-theme="dark"] .report-option-a,
[data-bs-theme="dark"] .report-option-a,
body[data-theme="dark"] .report-option-a {
  color: var(--bs-body-color);
}

/* Report export form — labels + description input */
html[data-bs-theme="dark"] label[for="file_type"],
html[data-bs-theme="dark"] label[for="title"],
html[data-bs-theme="dark"] label[for="title_rapport"],
[data-bs-theme="dark"] label[for="file_type"],
[data-bs-theme="dark"] label[for="title"],
[data-bs-theme="dark"] label[for="title_rapport"],
body[data-theme="dark"] label[for="file_type"],
body[data-theme="dark"] label[for="title"],
body[data-theme="dark"] label[for="title_rapport"] {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] #file_type.form-control,
html[data-bs-theme="dark"] #title.form-control,
html[data-bs-theme="dark"] #title_rapport.form-control,
[data-bs-theme="dark"] #file_type.form-control,
[data-bs-theme="dark"] #title.form-control,
[data-bs-theme="dark"] #title_rapport.form-control,
body[data-theme="dark"] #file_type.form-control,
body[data-theme="dark"] #title.form-control,
body[data-theme="dark"] #title_rapport.form-control {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] #title.form-control::placeholder,
html[data-bs-theme="dark"] #title_rapport.form-control::placeholder,
[data-bs-theme="dark"] #title.form-control::placeholder,
[data-bs-theme="dark"] #title_rapport.form-control::placeholder,
body[data-theme="dark"] #title.form-control::placeholder,
body[data-theme="dark"] #title_rapport.form-control::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: 1;
}


@media screen and (max-width: 995px), screen and (max-height: 850px) {
  #progression-view {
    display: none !important;
  }
}


.manager-product-groups {
  position: relative;
  display: block;
  width: 100%;
}

.manager-product-group {
  position: relative;
  display: inline-block;
  padding: 0px 0px;
  margin-right: 5px;
  border: solid 0 #eee;
  cursor: pointer;
  background-color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
  border-radius: 5px;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
.manager-product-group span {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
}

.manager-product-group:hover, .manager-product-group.active {
  background-color: var(--primary-color);
  color: #fff;
}
.manager-product-group-main {
  position: relative;
  display: inline-block;
  padding: 0px 0px;
  margin-right: 5px;
  border: solid 0 #eee;
  cursor: pointer;
  background-color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
  border-radius: 5px;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
.manager-product-group-main span {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
}

.manager-product-group-main:hover, .manager-product-group-main.active {
  background-color: var(--primary-color);
  color: #fff;
}

.manager-product-group.add-button {
  background-color: #1cc875;
  color: #fff;
}
#ReturnsList{
  min-height: auto !important;
  max-height: 50vh !important;
  width: 100% !important;
  overflow-y: auto;
}
#email-product-table > thead > tr {
  z-index: 9999;
}

.group-modify-icon {
  position: absolute;
  right: -15px;
  top: -15px;
  color: #000 !important;
  background: white;
  border-radius: 50%;
  display: block;
  font-size: 14px;
  cursor: pointer;
  padding: 7.5px;
  z-index: 999;
  transform: scale(0);
  -webkit-transition: transform .2s ease-in-out;
  -moz-transition: transform .2s ease-in-out;
  -o-transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}
.manager-product-group:hover .group-modify-icon,  .group-modify-icon:hover {
  transform: scale(1);
}

.group-modify-icon:hover {
  color: var(--primary-color) !important;
}

/* Product modal: badges (Groep/EAN/strategie) — BS5 heeft geen .mr-*; gap i.p.v. opeengeplakt */
#productUnderTitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
}

.header-group-tag {
  position: relative;
  padding: 5px;
}
.group-product-delete-icon {
  position: absolute;
  right: -5px;
  top: -5px;
  color: #000 !important;
  background: white;
  border-radius: 50%;
  display: none;
  font-size: 14px;
  cursor: pointer;
}
.header-group-tag:hover .group-product-delete-icon {
  display: block;
}
.group-product-delete-icon:hover {
  position: absolute;
  right: -5px;
  top: -5px;
  color: #e02d1b !important;
}

#tap-winst input[type=checkbox] {
  width: 20px;
  height: 20px;
}

#connectGroup {
  display: none;
}

/* Row selection visuals — canonical in fivex-minimal-ui.css (.check-box-icon) */
.select-checkbox {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

div.pulse-wrapper {
  position: relative;
  height: 40px;
  width: 40px;
  top: 40px;
  left: 40px;
  display: block;
  transform: translate3d(-50%, -50%, 0);
}

div.pulse {
  height: 7.5px;
  width: 7.5px;
  background-color: rgb(0, 119, 255, 1);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  40% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(0, 119, 255, 0.3);
    background-color: rgb(0, 119, 255, 1);
  }

  80% {
    transform: scale(1);
    box-shadow: 0 0 0 20px rgba(0, 119, 255, 0);
    background-color: rgb(0, 119, 255, 1);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 119, 255, 0);
    background-color: rgb(0, 119, 255, 0.7);
  }
}


#template_selectable .ui-selecting {
  background: #eee;
}
#template_selectable .ui-selected {
  background: var(--primary-color);
  color: white;
}
#template_selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#template_selectable li {
  margin: 0;
  padding: 0;
  padding-bottom: 10px;
  float: left;
  width: 200px;
  font-size: 14px;
  text-align: center;
  border: solid 0;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}


.report-template-selector {
  position: relative;
}

.report-template-selector img {
  width: 100%;
  padding: 10px;
}
.cursor-pointer {
  cursor: pointer;
}
.accordion-header {
  position: relative;
  padding: 10px;
  border-bottom: solid 1px #eee;
}

.template-preview-agency {
  width: 100%;
  border: solid 0;
  height: 100%;
}

#template_preview_wrapper {
  height: 800px;
}
#preview-img {
  width: 100%;
  max-width: 100px;
  max-height: 200px;
  float: left;
  margin-right: 15px;
}
.deleteTemplateButton {
  position: absolute;
  right: -10px;
  top: -10px;
  font-size: 26px;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
.report-template-selector:hover > .deleteTemplateButton {
  display: block;
  opacity: 1;
}
.gray-spots-link {
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 10px;
  font-size: 12px;
  color: gray;
}

/* .dt-button-collection {
  position: fixed;
  top: 50vh;
  height: 500px;
  width: 70%;
  max-width: 250px;
  left: 0;
  right: 0;
  margin: auto;
  background: white;
  padding: 20px;
  z-index: 9990;
  display: block;
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  overflow: scroll;
}

.dt-button-background {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 9989;
  background: rgba(0,0,0,0.3);
}

.dt-button-collection a {
  display: block;
}
.dt-button-collection a:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f111";
  padding-right: 10px;
}
.dt-button-collection a.active:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f058";
  padding-right: 10px;
} */

.niceProductsButtonsWrapper {
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 600px) {
  .niceProductsButtonsWrapper {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .niceProductsButtonsWrapper::-webkit-scrollbar {
    display: none !important;
  }
  /* Prevent buttons from shrinking */
  .niceProductsButtonsWrapper .btn,
  .niceProductsButtonsWrapper button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}


.grid-stack-item {
  text-align: center;
  cursor: move;
}

.grid-stack-item-inner {
  background: transparent;
  border: solid 0 white;
  border-radius: 3px;
  padding: 10px;
  position: relative;
  height: 100%;
}
.monitor-item-html {
  display: inline-block;
  font-size: 12px;
  margin: auto;
  overflow: hidden;
}
.monitor-item-title {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  font-size: 12px;
  margin: auto;
  overflow: hidden;
}
.monitor-item-title i {
  font-size: 18px;
}
.delete-monitor-item {
  position: absolute;
  z-index: 999;
  cursor: pointer;
  top: 5px;
  right: 7.5px;
  display: none;
  background: white;
  border-radius: 3px;
  padding: 5px;
}
.edit-monitor-item {
  position: absolute;
  z-index: 999;
  cursor: pointer;
  top: 5px;
  right: 32.5px;
  display: none;
  background: white;
  border-radius: 3px;
  padding: 5px;
}
.grid-stack-item-inner:hover > .delete-monitor-item, .grid-stack-item-inner:hover > .edit-monitor-item {
  display: block;
}

.progression-circle {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto !important;
  font-size: 140px;
  background-color: white;
}

.progression-circle span {
  /* font-size: 32px !important; */
  /* font-weight: bold; */
}

.swal2-confirm {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.swal2-confirm.btn-danger {
  background-color: #e02d1b !important;
  border-color: #d52a1a !important;
}
.swal2-confirm.btn-success {
  background-color: #1cc875 !important;
  border-color: #1cc875 !important;
}
.swal2-confirm.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

.swal-wide {
    width: 1100px !important;
    max-width: 90% !important;
}

.image-library {
  border-radius: 5px;
  transition-timing-function: 2s ease-out;
  border: 2px solid transparent;
  display: inline-block;
  width: 33%;
  display: inline-block;
  height: auto;
  cursor: pointer;
  max-height: 300px;
  padding: 5px;
}
.image-library:hover{
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  transition-timing-function: 2s ease-in;
}
/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #7F7F7F;
  border-radius: 10px;
}

.stock_delivery_time_wrapper {
  /* position: relative; */
}

#product_competitors_table_wrapper {
  width: 100%;
  overflow: scroll;
}

#product_competitors_wrapper {
  position: relative;
  width: 100%;
  overflow: scroll;
}

#product_competitors_wrapper::-webkit-scrollbar {
  display: none;
}

.competitor-tile {
  text-align: left;
  position: relative;
  display: inline-block;
  width: 180px;
  height: 135px;
  margin: 5px;
  background: white;
  overflow: hidden;
  padding: 5px;
  padding-bottom: 10px;
  border-radius: 5px;
}

.competitor-tile img {
  position: relative;
  max-width: 100%;
  max-height: 70px;
  margin-top: 5px;
}
.competitor-tile label {
  font-size: 9px;
  margin-bottom: 0px;
  font-weight: 200;
}
.competitor-tile h5 {
  font-size: 12px;
  margin-bottom: 0px;
  font-weight: 400;
}
.competitor-tile a {
  font-size: 9px;
  top: 7.5px;
  margin-bottom: 0px;
  font-weight: 400;
  line-height: unset;
  position: relative;
  display: block;
  max-height: 20px;
  max-height: 40px;
  overflow: scroll;
  color: #000;
}

.competitor-tile a::-webkit-scrollbar {
  display: none;
}


.menu-text-button {
  position: relative;
  display: inline-block;
  font-size: 18px;
}

.btn-inverted-tab-nav {
  color: #fff;
  background-color: var(--primary-darker-color);
  border-color: var(--primary-darker-color);
}
.btn-inverted-tab-nav:hover {
  color: #fff;
}

.btn-inverted-tab-nav.active {
  background-color: white;
  border-color: white;
  color: #000;
}
.btn-inverted-tab-nav.active:hover {
  color: #000;
}


@media screen and (max-width: 1200px) {

  .topbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
  }

  /* Menu fixes */

  .sidebar .sidebar-brand {
    display: none !important;
  }

  /* Legacy SB-admin sidebar only — skip AppStack nav (#sidebar.is-split / .has-context) */
  .sidebar:not(.is-split):not(.is-normal):not(.has-context):not(.is-rail-only) {
    width: 225px !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    position: fixed;
    z-index: 98;
    left: auto;
    right: 0px;
    top: 65px;
    height: calc(100vh - 65px);
    -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
    box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
    background: white !important;
  }
  .sidebar:not(.is-split):not(.is-normal):not(.has-context):not(.is-rail-only).toggled {
    overflow: hidden;
    width: 225px !important;
    right: -225px;
  }
  .sidebar-dark-overlay {
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 100vh;
    left: 0px;
    right: 0px;
    top: 65px;
    background: rgba(0,0,0,.3);
    display: block !important;
  }

  .sidebar.toggled .sidebar-dark-overlay {
    display: none !important;
  }

  .sidebar-scrollable-wrapper {
    background: white;
    z-index: 99;
    padding-top: 10px;
  }

  .sidebar-header {
    background: transparent !important;
    color: #adb5bd !important;
  }

  .nav-bg {
    background-color: transparent;
  }

  .sidebar-dark .nav-item .nav-link {
    color: #202020;
    -webkit-transition: color .1s ease-in;
    -moz-transition: color .1s ease-in;
    -o-transition: color .1s ease-in;
    transition: color .1s ease-in;
  }
  .sidebar-dark .nav-item .nav-link i {
    color: #202020;
    -webkit-transition: color .1s ease-in;
    -moz-transition: color .1s ease-in;
    -o-transition: color .1s ease-in;
    transition: color .1s ease-in;
  }

  .sidebar .nav-item .collapse .collapse-inner .collapse-item {
    color: #202020 !important;
    -webkit-transition: color .1s ease-in;
    -moz-transition: color .1s ease-in;
    -o-transition: color .1s ease-in;
    transition: color .1s ease-in;
  }

  .sidebar .nav-item:hover .nav-link span, .sidebar .nav-item:hover .nav-link i {
    color: var(--primary-color);
  }

  .sidebar .nav-item.active:hover .nav-link span, .sidebar .nav-item.active:hover .nav-link i {
    color: var(--primary-color);
  }

  .sidebar-dark .nav-item.active .nav-link i {
    margin-left: 15px;
  }

  .sidebar-dark .nav-item .nav-link[data-toggle=collapse]::after,
  .sidebar-dark .nav-item .nav-link[data-bs-toggle=collapse]::after,
  .sidebar-item .sidebar-link[data-bs-toggle=collapse]::after {
    color: rgba(0, 0, 0, .5);
  }

  .sidebar-dark .nav-item .nav-link {
    margin: 0px 0px !important;
  }

  .sidebar .nav-item,
  .sidebar-item {
    padding: 0px 20px;
  }

  .sidebar .nav-item.active,
  .sidebar-item.active {
    padding: 0px 10px;
  }

  .sidebar .nav-item .collapse {
    position: relative;
    left: 0;
    z-index: 1;
    top: 0;
    -webkit-animation: none;
    animation: none;
  }

  .sidebar .nav-item .collapse .collapse-inner,
  .sidebar-item .collapse .sidebar-dropdown {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none
  }

  .sidebar .nav-item .collapsing {
    display: block;
    -webkit-transition: height .15s ease;
    transition: height .15s ease
  }

  .sidebar .nav-item .nav-link,
  .sidebar-item .sidebar-link {
    display: block;
    /* width: 100%; */
    text-align: left;
    padding: 1rem;
    width: 100%;
  }

  .sidebar .nav-item .nav-link i,
  .sidebar-item .sidebar-link i {
    font-size: .85rem;
    margin-right: .25rem
  }

  .sidebar .nav-item .nav-link span,
  .sidebar-item .sidebar-link span {
    font-size: .85rem;
    display: inline
  }

  .sidebar .nav-item .nav-link[data-toggle=collapse]::after,
  .sidebar .nav-item .nav-link[data-bs-toggle=collapse]::after,
  .sidebar-item .sidebar-link[data-bs-toggle=collapse]::after {
    width: 1rem;
    text-align: center;
    float: right;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\f107';
    font-family: 'Font Awesome 5 Free'
  }

  .sidebar .nav-item .nav-link[data-toggle=collapse].collapsed::after,
  .sidebar .nav-item .nav-link[data-bs-toggle=collapse].collapsed::after,
  .sidebar-item .sidebar-link[data-bs-toggle=collapse].collapsed::after {
    content: '\f105'
  }

  .sidebar .sidebar-brand .sidebar-brand-icon i {
    font-size: 2rem
  }

  .sidebar .sidebar-brand .sidebar-brand-text {
    display: inline
  }

  .sidebar .sidebar-heading {
    text-align: left
  }

  .sidebar.toggled .nav-item .collapse {
    position: absolute;
    left: calc(5rem + 1.5rem / 2);
    z-index: 1;
    top: 2px;
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
    animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1)
  }

  .sidebar.toggled .nav-item .collapse .collapse-inner {
    -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
    border-radius: .35rem
  }

  .sidebar.toggled .nav-item .collapsing {
    display: none;
    -webkit-transition: none;
    transition: none
  }

  .sidebar.toggled .nav-item .collapse, .sidebar.toggled .nav-item .collapsing {
    margin: 0
  }

  .sidebar.toggled .nav-item:last-child {
    margin-bottom: 1rem
  }

  .sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
    font-size: 2rem
  }

  .sidebar.toggled .sidebar-brand .sidebar-brand-text {
    display: none
  }

  .sidebar.toggled .sidebar-heading {
    text-align: center
  }





  .progression_bar .h4 {
    font-size: 14px;
    display: block;
    position: relative;
    margin-bottom: 5px;
  }

}

.product-modal-tab {
  position: relative;
}

.competitors_loader, .search_terms_loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: var(--primary-color);
  margin-left: 50%;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
.star-rating{
  position: relative;
  display: inline-block;
  height: 1.5rem;
  vertical-align: bottom;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='rgb%28254%2C189%2C0%29'%3E%3Cpath fill-rule='evenodd' d='M4.52 11.896c-.633.281-1.199-.179-1.033-.855l.548-2.224a.443.443 0 00-.104-.343l-1.622-1.51c-.49-.455-.313-1.152.34-1.318l2.163-.549a.774.774 0 00.384-.305l1.135-2.306c.299-.606 1.03-.618 1.335 0L8.8 4.792a.791.791 0 00.385.305l2.162.55c.647.163.835.857.34 1.318l-1.621 1.51a.474.474 0 00-.105.342l.548 2.224c.168.684-.402 1.136-1.033.855l-2.217-.985a.822.822 0 00-.522 0l-2.217.985z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left 50%;
  background-size: 1rem;
}
.review-description{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
          line-clamp: 2;
  -webkit-box-orient: vertical;

}

.preset-button {
  border: 1px solid rgba(206, 212, 218, .75);
  height: 92px;
}

.preset-button .card-body {
  text-align: center;
}

.preset-active {
  border: solid 2px var(--primary-color);
  color: var(--primary-color);
}

.active-preset-icon {
  font-size: 47px;
  transform: scale(0);
  margin-right: 0px;
  float: left;
  width: 0px;
}

.preset-active .active-preset-icon {
  transform: scale(1);
  font-size: 42px;
  margin-right: 15px;
  width: auto;
  -webkit-transition: transform .2s ease-in-out;
  -moz-transition: transform .2s ease-in-out;
  -o-transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}


.table-mini-ranking {
  display: table;
  table-layout: fixed;
  width: 175px;
  max-width: 175px;
  height: 35px;
  max-height: 35px;
  padding: 0;
  margin: 0px -10px;
  border-radius: 5px;
  overflow: hidden;
}
.table-mini-ranking li {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  height: 35px;
  font-size: 12px;
  /* color: white; */
  /* border: solid 2px white; */
  /* border-radius: 7.5px; */
}



.table-mini-chart {
  display: table;
  table-layout: fixed;
  width: 100px;
  max-width: 150px;
  height: 40px;
  max-height: 40px;
  padding: 2.5px;
  margin: 0px -10px;
  border-left: dotted 2px #eee;
  border-bottom: dotted 2px #eee;
}
.table-mini-chart li {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 40px;
}
.table-mini-chart span {
  margin: 0 0.25px;
  display: block;
  background: rgba(28, 200, 138, 0.75);
  animation: draw 1s ease-in-out;
}
.table-mini-chart span:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 0px 0px 0;
  display: none;
  text-align: center;
  content: attr(title);
  word-wrap: break-word;
}

@keyframes draw {
  0% {
    height: 0;
  }
}
.dropdown-toggle-custom{
  overflow-x: hidden;
}
.dropdown-options {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    display: none;
    z-index: 99;
    /* Unified styling is applied via .manager-dropdown-panel rules below */
}

.dropdown-options-div {
  text-align: start;
}

.parent-select {
  padding: 8px;
  display: flex;
  align-items: center;
}

.dropdown-options li {
    padding: 8px;
    background-color: #fff;
    list-style-type: none;
}

.dropdown-options-div > span{
  background-color: #fff;
}

.parent-select:hover {
  background-color: #f5f5f5;
}

.checked-background {
  background-color: var(--primary-color)!important;
  color: #ffffff;
}
.child-wrapper {
  padding-left: 0px;
}

.child-wrapper > li {
  padding-left: 25px;
  display: flex;
  align-items: center;
}

li > label {
  margin: 0;
}
.dropdown-options li:hover {
    background-color: #f5f5f5;
}
.selected-option {
  display: inline-block;
  border: 1px solid #ccc;
}

/* Dropdown Button */
.dropbtn {
    color: #000000;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
.sub-group-selected.active{
  background-color: var(--primary-color);
  color: #FFFFFF;
}
.sub-group-selected{
  color: #000000;
}
.multiselect-native-select .dropdown-menu {
  padding: 0px 0px;
  margin-top: 7.5px;
  border-radius: 5px;
  overflow: hidden;
  border: solid 0px white;
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  max-height: 750px;
  overflow-y: scroll;
}

.card-text-center-bold {
  text-align: center;
  font-weight: 900;
  font-size: 34px;
  margin: 0 !important;
}

.card-text-center-medium {
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  margin: 0 !important;
}

.monitor-card-title {
  text-align: center;
  font-size: 16px;
  margin: 0 !important;
}

.card-text-center-middle {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  margin: 0 !important;
}

/* Widget header row: export button left, centred title, info icon right.
   Applied at all breakpoints — the button is in normal flow (not absolute),
   so the flex layout must be active at every screen size. */
.card-widget-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  min-height: 50px;
  position: relative;
}

.card-widget-header .card-text-center-middle {
  flex: 1;
  padding: 0 8px !important;
}

.card-widget-header .info-thing {
  position: static !important;
  flex-shrink: 0;
}

/* revenue-widget-header: match card-widget-header padding for consistent button alignment */
.revenue-widget-header {
  padding: 8px 10px;
  min-height: 50px;
}
@media (max-width: 767.98px) {
  .revenue-widget-header {
    padding: 12px 16px;
  }
}

.card-text-center-small {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin: 0 !important;
}

.card-text-center-tiny {
  text-align: center;
  color: #777;
  font-size: 11px;
}

@media (max-width: 575.98px) {
  .card-text-center-bold {
    font-size: 20px;
    white-space: nowrap;
  }
}

.stock-monitor-value-display {
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  margin: 0 !important;
}

/* Dashboard KPI cards */
.card:not(.shadow-none) {
  box-shadow: var(--fivex-card-shadow);
}

.dashboard-kpi-card {
  min-height: 132px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 119, 255, 0.035), rgba(255, 255, 255, 0) 46%),
    #fff;
  box-shadow: var(--fivex-card-shadow) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dashboard-kpi-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 119, 255, 0.12);
  box-shadow: var(--fivex-card-shadow-hover) !important;
}

.dashboard-kpi-card.is-clickable {
  cursor: pointer;
}

.dashboard-kpi-card .card-body {
  position: relative;
  min-height: 132px;
  padding: 20px 18px 18px;
}

.dashboard-kpi-layout {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.dashboard-kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  color: #667085 !important;
  background: rgba(102, 112, 133, 0.12) !important;
  font-size: 18px;
}

.dashboard-kpi-content {
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-kpi-value,
.dashboard-kpi-card .card-text-center-bold,
.dashboard-kpi-card .stock-monitor-value-display {
  text-align: left;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #111827;
  margin: 0 0 5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-kpi-card .dashboard-kpi-value,
.dashboard-kpi-card .card-text-center-bold,
.dashboard-kpi-card .stock-monitor-value-display,
.dashboard-kpi-card .text-success,
.dashboard-kpi-card .text-danger,
.dashboard-kpi-card .text-primary {
  color: #111827 !important;
}

.dashboard-kpi-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 5px;
}

.dashboard-kpi-value-row .dashboard-kpi-value {
  margin-bottom: 0 !important;
  flex: 0 1 auto;
}

.dashboard-kpi-trend {
  min-width: 0;
  max-width: 120px;
  height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-kpi-trend i {
  flex: 0 0 auto;
  font-size: 10px;
}

.dashboard-kpi-trend.is-good {
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
}

.dashboard-kpi-trend.is-bad {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}

.dashboard-kpi-trend.is-neutral {
  color: #667085;
  background: #f2f4f7;
}

.dashboard-kpi-label,
.dashboard-kpi-card .card-text-center-middle,
.dashboard-kpi-card .monitor-card-title {
  text-align: left;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: #111827;
  margin: 0 !important;
}

.dashboard-kpi-note,
.dashboard-kpi-card .card-text-center-small,
.dashboard-kpi-card .card-text-center-tiny {
  text-align: left;
  font-size: 11px;
  line-height: 1.3;
  color: #8b95a7;
  margin: 2px 0 0 !important;
}

.dashboard-kpi-info,
.profit-widget-info,
.profit-movement-info,
.difference-widget-info,
.revenue-widget-info,
.info-thing {
  display: none !important;
}

.dashboard-kpi-loader,
.dashboard-kpi-card .loadingOverlay {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  z-index: 4;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* jQuery .show() sets display:block inline; keep the overlay as a centering flex box */
.dashboard-kpi-loader[style*="display: block"],
.dashboard-kpi-card .loadingOverlay[style*="display: block"] {
  display: flex !important;
}

.dashboard-kpi-loader > .spinner-border,
.dashboard-kpi-card .loadingOverlay > .spinner-border,
.dashboard-kpi-loader > .lds-ring,
.dashboard-kpi-card .loadingOverlay > .lds-ring {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dashboard-kpi-loader .spinner-border,
.dashboard-kpi-card .spinner-border {
  color: var(--primary-color, #0077ff) !important;
}

.dashboard-kpi-loader > .loading-wrapper-icon,
.dashboard-kpi-card .loadingOverlay > .loading-wrapper-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-kpi-card .pulse-wrapper {
  margin-top: 6px;
}

html[data-bs-theme="dark"] .dashboard-kpi-card,
body[data-theme="dark"] .dashboard-kpi-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .dashboard-kpi-card:hover,
body[data-theme="dark"] .dashboard-kpi-card:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .dashboard-kpi-icon,
body[data-theme="dark"] .dashboard-kpi-icon {
  color: #aeaeb2 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .dashboard-kpi-value,
html[data-bs-theme="dark"] .dashboard-kpi-card .card-text-center-bold,
html[data-bs-theme="dark"] .dashboard-kpi-card .stock-monitor-value-display,
html[data-bs-theme="dark"] .dashboard-kpi-card .dashboard-kpi-value,
html[data-bs-theme="dark"] .dashboard-kpi-card .card-text-center-bold,
html[data-bs-theme="dark"] .dashboard-kpi-card .stock-monitor-value-display,
body[data-theme="dark"] .dashboard-kpi-value,
body[data-theme="dark"] .dashboard-kpi-card .card-text-center-bold,
body[data-theme="dark"] .dashboard-kpi-card .stock-monitor-value-display,
body[data-theme="dark"] .dashboard-kpi-card .dashboard-kpi-value,
body[data-theme="dark"] .dashboard-kpi-card .card-text-center-bold,
body[data-theme="dark"] .dashboard-kpi-card .stock-monitor-value-display {
  color: #e5e5ea !important;
}

html[data-bs-theme="dark"] .dashboard-kpi-label,
html[data-bs-theme="dark"] .dashboard-kpi-card .card-text-center-middle,
html[data-bs-theme="dark"] .dashboard-kpi-card .monitor-card-title,
body[data-theme="dark"] .dashboard-kpi-label,
body[data-theme="dark"] .dashboard-kpi-card .card-text-center-middle,
body[data-theme="dark"] .dashboard-kpi-card .monitor-card-title {
  color: #e5e5ea;
}

html[data-bs-theme="dark"] .dashboard-kpi-note,
html[data-bs-theme="dark"] .dashboard-kpi-card .card-text-center-small,
html[data-bs-theme="dark"] .dashboard-kpi-card .card-text-center-tiny,
body[data-theme="dark"] .dashboard-kpi-note,
body[data-theme="dark"] .dashboard-kpi-card .card-text-center-small,
body[data-theme="dark"] .dashboard-kpi-card .card-text-center-tiny {
  color: #8e8e93;
}

html[data-bs-theme="dark"] .dashboard-kpi-trend.is-neutral,
body[data-theme="dark"] .dashboard-kpi-trend.is-neutral {
  color: #aeaeb2;
  background: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .dashboard-kpi-trend.is-good,
body[data-theme="dark"] .dashboard-kpi-trend.is-good {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.18);
}

html[data-bs-theme="dark"] .dashboard-kpi-trend.is-bad,
body[data-theme="dark"] .dashboard-kpi-trend.is-bad {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
}

html[data-bs-theme="dark"] .inventory-donut-card .card-text-center-medium,
body[data-theme="dark"] .inventory-donut-card .card-text-center-medium {
  color: #e5e5ea !important;
}

html[data-bs-theme="dark"] .inventory-donut-card .card-text-center-small,
html[data-bs-theme="dark"] .inventory-donut-card .card-title .text-muted,
body[data-theme="dark"] .inventory-donut-card .card-text-center-small,
body[data-theme="dark"] .inventory-donut-card .card-title .text-muted {
  color: #8e8e93 !important;
}

html[data-bs-theme="dark"] .dashboard-kpi-loader,
html[data-bs-theme="dark"] .dashboard-kpi-card .loadingOverlay,
body[data-theme="dark"] .dashboard-kpi-loader,
body[data-theme="dark"] .dashboard-kpi-card .loadingOverlay {
  background: rgba(17, 24, 39, 0.88) !important;
}

/* Dashboard Top 5 product lists */
.dashboard-top-list-card {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06) !important;
}

.dashboard-top-list-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.dashboard-top-list-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.015em;
}

.dashboard-top-list-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: #8b95a7;
}

.dashboard-top-list-row {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: inherit;
  border-bottom: 1px solid rgba(17, 24, 39, 0.055);
  transition: background 0.15s ease, transform 0.15s ease;
}

.dashboard-top-list-row:last-child {
  border-bottom: 0;
}

.dashboard-top-list-row:hover {
  color: inherit;
  background: #f8fbff;
  text-decoration: none;
}

.dashboard-top-list-rank {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #667085;
  background: #f2f4f7;
  font-size: 12px;
  font-weight: 600;
}

.dashboard-top-list-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 44px;
  background: #f8f9fc;
}

.dashboard-top-list-main {
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-top-list-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: #1f2937;
}

.dashboard-top-list-meta {
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.25;
  color: #98a2b3;
}

.dashboard-top-list-value-wrap {
  min-width: 84px;
  max-width: 110px;
  flex: 0 0 auto;
  text-align: right;
}

.dashboard-top-list-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dashboard-top-list-value-danger {
  color: #dc2626;
}

.dashboard-top-list-value-meta {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #98a2b3;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
}

/* Profit movement widgets */
.profit-movement-widget {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.875rem !important;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--fivex-card-shadow, 0 1px 3px rgba(16, 24, 40, 0.06)) !important;
}

.profit-movement-header {
  min-height: 0;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: #fff;
}

.profit-movement-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profit-movement-heading-copy {
  min-width: 0;
}

.profit-movement-icon {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.profit-movement-icon.is-rise {
  color: #027a48;
  background: rgba(18, 185, 129, 0.12);
}

.profit-movement-icon.is-fall {
  color: #b42318;
  background: rgba(239, 68, 68, 0.1);
}

.profit-movement-title {
  margin: 0;
  color: #111827;
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.profit-movement-subtitle {
  margin: 0.2rem 0 0;
  color: #667085;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 500;
}

.profit-movement-heading small {
  display: block;
  margin-top: 3px;
  color: #8b95a7;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
}

.profit-movement-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.profit-movement-export {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #344054 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.profit-movement-export i {
  color: #667085;
  font-size: 11px;
}

.profit-movement-export:hover,
.profit-movement-export:focus {
  border-color: rgba(0, 119, 255, 0.24) !important;
  color: #0077ff !important;
  background: #f8fbff !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}

.profit-movement-export:hover i,
.profit-movement-export:focus i {
  color: #0077ff;
}

.profit-movement-info {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  background: #f2f4f7;
  font-size: 0.75rem;
  line-height: 1;
}

.profit-movement-info:hover {
  color: #667085;
  background: #eaecf0;
}

.profit-movement-table-wrap {
  min-height: 200px;
  background: #fff;
}

#joinedTable_wrapper,
#droppedTable_wrapper {
  width: 100%;
  overflow-x: hidden;
}

.profit-movement-table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  table-layout: fixed;
  width: 100% !important;
}

.profit-movement-table thead th {
  padding: 0.625rem 1rem !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
  color: #667085;
  background: #f9fafb;
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profit-movement-table tbody td {
  padding: 0.75rem 1rem !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.05) !important;
  vertical-align: middle !important;
  overflow: hidden;
}

.profit-movement-table tbody tr:nth-child(even) td {
  background: rgba(249, 250, 251, 0.65);
}

.profit-movement-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.profit-movement-table tbody tr:hover td {
  background: #f0f7ff;
}

.profit-movement-product-cell {
  width: auto;
  max-width: 0;
  text-align: left !important;
}

.profit-movement-margin-cell {
  width: 170px !important;
  min-width: 170px;
  max-width: 170px;
  text-align: left !important;
}

.profit-movement-values-cell {
  width: 188px !important;
  min-width: 188px;
  max-width: 188px;
  text-align: right !important;
}

.profit-movement-product {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}

.profit-movement-product:hover {
  color: inherit;
  text-decoration: none;
}

.profit-movement-img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  flex: 0 0 2.75rem;
}

.profit-movement-product-copy {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  display: block;
}

.profit-movement-product-name {
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.profit-movement-ean {
  display: block;
  margin-top: 4px;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 650;
  white-space: nowrap;
}

.profit-movement-ean:hover {
  color: #98a2b3;
  text-decoration: none;
}

.profit-movement-margin,
.profit-movement-margin-v2 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profit-movement-bar,
.profit-movement-bar-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2f7;
}

.profit-movement-bar-fill {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #98a2b3;
}

.profit-movement-bar-fill.is-good {
  background: #12b981;
}

.profit-movement-bar-fill.is-warning {
  background: #f59e0b;
}

.profit-movement-bar-fill.is-bad {
  background: #ef4444;
}

.profit-movement-margin-pct {
  flex: 0 0 auto;
  min-width: 2.75rem;
  color: #344054;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.profit-movement-margin > span {
  position: static;
  transform: none;
  flex: 0 0 auto;
  color: #344054;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
}

.profit-movement-metrics {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
}

.profit-movement-metrics-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
}

.profit-movement-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  min-width: 0;
}

.profit-movement-metric-label {
  color: #98a2b3;
  font-size: 0.625rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profit-movement-metric-value {
  color: #111827;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.profit-movement-metric.is-winst.is-positive .profit-movement-metric-value {
  color: #027a48;
}

.profit-movement-metric.is-winst.is-negative .profit-movement-metric-value {
  color: #b42318;
}

.profit-movement-metrics-prev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.25rem 0.35rem;
  color: #98a2b3;
  font-size: 0.6875rem;
  line-height: 1.25;
  font-weight: 500;
}

.profit-movement-metrics-prev-label {
  color: #98a2b3;
  font-weight: 600;
}

.profit-movement-metrics-prev-values {
  font-variant-numeric: tabular-nums;
}

.profit-movement-metrics-prev-sep {
  opacity: 0.65;
}

.profit-movement-values {
  color: #111827;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.profit-movement-values .is-positive {
  color: #059669;
}

.profit-movement-values .is-negative {
  color: #dc2626;
}

.profit-movement-previous {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 600;
}

.profit-movement-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #667085;
}

.profit-movement-empty i {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  opacity: 0.45;
}

.profit-movement-empty p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.profit-movement-widget .profit-movement-dt-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  background: #f9fafb;
}

.profit-movement-widget .dataTables_info {
  padding: 0 !important;
  margin: 0 !important;
  color: #667085;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
}

.profit-movement-widget .dataTables_paginate {
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  text-align: right !important;
}

.profit-movement-widget .pagination {
  justify-content: flex-end;
  margin: 0;
  gap: 0.25rem;
}

.profit-movement-widget .page-link {
  min-width: 2rem;
  height: 2rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem !important;
  border-color: rgba(17, 24, 39, 0.1);
  color: #667085;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.management-dashboard-page #custom-widgets-grid .card-body .font-weight-bold,
.management-dashboard-page #custom-widgets-grid .card-body strong,
.management-dashboard-page #custom-widgets-grid .card-body b {
  font-weight: 600 !important;
}

.management-dashboard-page #custom-widgets-grid .goal-tracker-title,
.management-dashboard-page #custom-widgets-grid .goal-tracker-status-pill,
.management-dashboard-page #custom-widgets-grid .goal-tracker-side-value,
.management-dashboard-page #custom-widgets-grid .goal-tracker-hero-value,
.management-dashboard-page #custom-widgets-grid .goal-tracker-value,
.management-dashboard-page #custom-widgets-grid .goal-tracker-block-title {
  font-weight: 600 !important;
}

.management-dashboard-page #custom-widgets-grid .goal-tracker-eyebrow,
.management-dashboard-page #custom-widgets-grid .goal-tracker-label,
.management-dashboard-page #custom-widgets-grid .goal-tracker-block-top small {
  font-weight: 500 !important;
}

.profit-movement-widget .page-item.active .page-link {
  border-color: #0077ff;
  background: #0077ff;
  color: #fff;
}

/* Returns by EAN widget */
.return-ean-widget {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.055) !important;
}

.return-ean-header {
  padding: 20px 22px 18px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.return-ean-title {
  margin: 0;
  color: #111827;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.return-ean-header small {
  display: block;
  margin-top: 8px;
  color: #98a2b3;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
}

.return-ean-widget .dataTables_wrapper {
  width: 100%;
  overflow: hidden;
}

.return-ean-widget .card-body {
  background: #fff;
}

.return-ean-toolbar {
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: #f8fafc;
}

.return-ean-toolbar .dataTables_length,
.return-ean-toolbar .dt-buttons,
.return-ean-toolbar .dataTables_filter {
  margin: 0;
}

.return-ean-toolbar .dataTables_length label,
.return-ean-toolbar .dataTables_filter label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.return-ean-toolbar .dataTables_length select,
.return-ean-toolbar .dataTables_filter input {
  height: 40px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 10px;
  color: #344054;
  background: #fff;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.return-ean-toolbar .dataTables_length select {
  min-width: 76px;
  padding: 6px 28px 6px 12px;
}

.return-ean-toolbar .dataTables_filter input {
  min-width: 260px;
  padding: 6px 12px;
}

.return-ean-export-btn {
  height: 38px;
  padding: 0 12px !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: #344054 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.return-ean-export-btn i {
  color: #667085;
  font-size: 12px;
}

.return-ean-export-btn:hover,
.return-ean-export-btn:focus {
  border-color: rgba(0, 119, 255, 0.24) !important;
  color: #0077ff !important;
  background: #f8fbff !important;
}

.return-ean-table {
  margin: 0 !important;
  border-collapse: collapse !important;
  table-layout: auto;
  width: 100% !important;
}

.return-ean-table thead th {
  padding: 14px 18px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
  color: #667085;
  background: #fbfcff;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.return-ean-table tbody td {
  padding: 14px 18px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.055) !important;
  vertical-align: middle !important;
  overflow: hidden;
}

.return-ean-table tbody tr {
  transition: background-color 0.16s ease;
}

.return-ean-table tbody tr:hover {
  background: #f9fbff;
}

.return-ean-product-cell {
  width: 38% !important;
  min-width: 260px;
  text-align: left !important;
}

.return-ean-platform-cell {
  width: 104px !important;
  min-width: 104px;
  max-width: 104px;
  text-align: center !important;
}

.return-ean-number-cell {
  width: 104px !important;
  min-width: 90px;
  max-width: 124px;
  text-align: right !important;
}

.return-ean-primary-metric-cell {
  width: 108px !important;
}

.return-ean-product {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.return-ean-product-image {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fff;
}

.return-ean-product img {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
}

.return-ean-product-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
}

.return-ean-product-name {
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #101828;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

.return-ean-product-meta {
  display: block;
  margin-top: 4px;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

.return-ean-platforms {
  display: flex;
  justify-content: center;
  align-items: center;
}

.return-ean-platforms .platform-img {
  width: 34px;
  height: 34px;
  margin-left: -6px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 10px !important;
  object-fit: contain;
  background: #fff;
}

.return-ean-number,
.return-ean-diff {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 20px;
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
}

.return-ean-number.is-strong {
  font-weight: 600;
}

.return-ean-return-count {
  min-width: 34px;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: #0f172a;
  background: #f1f5f9;
}

.return-ean-diff.text-danger,
.return-ean-diff.text-success {
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.return-ean-diff i {
  font-size: 10px;
}

.return-ean-diff.text-danger {
  color: #dc2626 !important;
  background: rgba(239, 68, 68, 0.1);
}

.return-ean-diff.text-success {
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.12);
}

.return-ean-widget .dataTables_info {
  padding: 18px 18px 8px !important;
  color: #667085;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.return-ean-widget .dataTables_paginate {
  padding: 8px 18px 20px !important;
  text-align: center !important;
}

.return-ean-widget .pagination {
  justify-content: center;
  margin: 0;
}

.return-ean-widget .page-link {
  min-width: 36px;
  height: 36px;
  padding: 9px 12px;
  border-color: rgba(17, 24, 39, 0.08);
  color: #667085;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.return-ean-widget .page-item.active .page-link {
  border-color: #0077ff;
  background: #0077ff;
  color: #fff;
}

html[data-bs-theme="dark"] .return-ean-table,
html[data-bs-theme="dark"] .return-ean-table.table,
html[data-bs-theme="dark"] .return-ean-widget table.dataTable,
body[data-theme="dark"] .return-ean-table,
body[data-theme="dark"] .return-ean-table.table,
body[data-theme="dark"] .return-ean-widget table.dataTable {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-hover-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .return-ean-widget,
body[data-theme="dark"] .return-ean-widget {
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .return-ean-header,
body[data-theme="dark"] .return-ean-header {
  border-bottom-color: var(--bs-border-color);
  background: transparent;
}

html[data-bs-theme="dark"] .return-ean-title,
body[data-theme="dark"] .return-ean-title {
  color: var(--bs-emphasis-color);
}

html[data-bs-theme="dark"] .return-ean-header small,
body[data-theme="dark"] .return-ean-header small {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .return-ean-widget .card-body,
body[data-theme="dark"] .return-ean-widget .card-body {
  background: transparent !important;
}

html[data-bs-theme="dark"] .return-ean-toolbar,
body[data-theme="dark"] .return-ean-toolbar {
  border-bottom-color: var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .return-ean-toolbar .dataTables_length label,
html[data-bs-theme="dark"] .return-ean-toolbar .dataTables_filter label,
body[data-theme="dark"] .return-ean-toolbar .dataTables_length label,
body[data-theme="dark"] .return-ean-toolbar .dataTables_filter label {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .return-ean-toolbar .dataTables_length select,
html[data-bs-theme="dark"] .return-ean-toolbar .dataTables_filter input,
body[data-theme="dark"] .return-ean-toolbar .dataTables_length select,
body[data-theme="dark"] .return-ean-toolbar .dataTables_filter input {
  color: var(--bs-body-color) !important;
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .return-ean-export-btn,
body[data-theme="dark"] .return-ean-export-btn {
  color: var(--bs-body-color) !important;
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none;
}

html[data-bs-theme="dark"] .return-ean-export-btn i,
body[data-theme="dark"] .return-ean-export-btn i {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .return-ean-export-btn:hover,
html[data-bs-theme="dark"] .return-ean-export-btn:focus,
body[data-theme="dark"] .return-ean-export-btn:hover,
body[data-theme="dark"] .return-ean-export-btn:focus {
  color: var(--bs-emphasis-color) !important;
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .return-ean-widget .dataTables_scrollHead,
html[data-bs-theme="dark"] .return-ean-widget .dataTables_scrollHeadInner,
body[data-theme="dark"] .return-ean-widget .dataTables_scrollHead,
body[data-theme="dark"] .return-ean-widget .dataTables_scrollHeadInner {
  background: transparent !important;
}

html[data-bs-theme="dark"] .return-ean-widget table.dataTable thead tr,
html[data-bs-theme="dark"] .return-ean-table thead tr,
html[data-bs-theme="dark"] .return-ean-widget table.dataTable thead th,
html[data-bs-theme="dark"] .return-ean-table thead th,
html[data-bs-theme="dark"] .return-ean-widget .dataTables_scrollHead table.dataTable thead tr,
html[data-bs-theme="dark"] .return-ean-widget .dataTables_scrollHead table.dataTable thead th,
body[data-theme="dark"] .return-ean-widget table.dataTable thead tr,
body[data-theme="dark"] .return-ean-table thead tr,
body[data-theme="dark"] .return-ean-widget table.dataTable thead th,
body[data-theme="dark"] .return-ean-table thead th,
body[data-theme="dark"] .return-ean-widget .dataTables_scrollHead table.dataTable thead tr,
body[data-theme="dark"] .return-ean-widget .dataTables_scrollHead table.dataTable thead th {
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-secondary-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .return-ean-table tbody td,
html[data-bs-theme="dark"] .return-ean-widget table.dataTable tbody td,
body[data-theme="dark"] .return-ean-table tbody td,
body[data-theme="dark"] .return-ean-widget table.dataTable tbody td {
  color: var(--bs-body-color) !important;
  border-bottom-color: var(--bs-border-color) !important;
  background: transparent !important;
}

html[data-bs-theme="dark"] .return-ean-table tbody tr:hover,
html[data-bs-theme="dark"] .return-ean-widget table.dataTable tbody tr:hover,
body[data-theme="dark"] .return-ean-table tbody tr:hover,
body[data-theme="dark"] .return-ean-widget table.dataTable tbody tr:hover {
  background: var(--bs-tertiary-bg) !important;
}

html[data-bs-theme="dark"] .return-ean-table tbody td.dataTables_empty,
html[data-bs-theme="dark"] .return-ean-widget table.dataTable td.dataTables_empty,
body[data-theme="dark"] .return-ean-table tbody td.dataTables_empty,
body[data-theme="dark"] .return-ean-widget table.dataTable td.dataTables_empty {
  color: var(--bs-secondary-color) !important;
  background: transparent !important;
}

html[data-bs-theme="dark"] .return-ean-product-image,
html[data-bs-theme="dark"] .return-ean-product img,
html[data-bs-theme="dark"] .return-ean-platforms .platform-img,
body[data-theme="dark"] .return-ean-product-image,
body[data-theme="dark"] .return-ean-product img,
body[data-theme="dark"] .return-ean-platforms .platform-img {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .return-ean-product-name,
body[data-theme="dark"] .return-ean-product-name {
  color: var(--bs-emphasis-color);
}

html[data-bs-theme="dark"] .return-ean-product-meta,
body[data-theme="dark"] .return-ean-product-meta {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .return-ean-number,
body[data-theme="dark"] .return-ean-number {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .return-ean-return-count,
body[data-theme="dark"] .return-ean-return-count {
  color: var(--bs-emphasis-color);
  background: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .return-ean-diff.text-danger,
body[data-theme="dark"] .return-ean-diff.text-danger {
  color: var(--bs-danger) !important;
  background: rgba(var(--bs-danger-rgb), 0.12);
}

html[data-bs-theme="dark"] .return-ean-diff.text-success,
body[data-theme="dark"] .return-ean-diff.text-success {
  color: var(--bs-success) !important;
  background: rgba(var(--bs-success-rgb), 0.12);
}

html[data-bs-theme="dark"] .return-ean-widget .dataTables_info,
body[data-theme="dark"] .return-ean-widget .dataTables_info {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .return-ean-widget .page-link,
body[data-theme="dark"] .return-ean-widget .page-link {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg);
}

html[data-bs-theme="dark"] .return-ean-widget .page-item.active .page-link,
body[data-theme="dark"] .return-ean-widget .page-item.active .page-link {
  border-color: var(--primary-color, #0077ff);
  background: var(--primary-color, #0077ff);
  color: #fff;
}

html[data-bs-theme="dark"] .return-ean-widget .page-item.disabled .page-link,
body[data-theme="dark"] .return-ean-widget .page-item.disabled .page-link {
  color: #636366;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-bs-theme="dark"] .return-ean-widget .loadingOverlay,
body[data-theme="dark"] .return-ean-widget .loadingOverlay {
  background: rgba(17, 24, 39, 0.94) !important;
}

html[data-bs-theme="dark"] .return-ean-widget .dataTables_wrapper,
body[data-theme="dark"] .return-ean-widget .dataTables_wrapper {
  background: transparent;
}

/* Revenue / profit difference widgets */
.difference-widget-card {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.055) !important;
}

.difference-widget-header {
  padding: 18px 20px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.difference-widget-heading {
  min-width: 0;
}

.difference-widget-title {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.difference-widget-subtitle {
  display: block;
  margin-top: 7px;
  color: #98a2b3;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.difference-widget-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.difference-widget-export {
  height: 36px;
  padding: 0 12px !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: #344054 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.difference-widget-export i {
  color: #667085;
  font-size: 12px;
}

.difference-widget-export:hover,
.difference-widget-export:focus {
  border-color: rgba(0, 119, 255, 0.24) !important;
  color: #0077ff !important;
  background: #f8fbff !important;
}

.difference-widget-info {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  background: #f2f4f7;
  border-radius: 999px;
  cursor: help;
}

.difference-widget-info i {
  font-size: 10px;
}

.difference-widget-body {
  padding: 14px 18px 18px;
}

.difference-widget-table-wrap {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.difference-widget-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}

.difference-widget-table thead th {
  padding: 13px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
  color: #667085;
  background: #fbfcff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.difference-widget-table tbody td {
  padding: 12px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.055) !important;
  vertical-align: middle !important;
  color: #111827;
  font-size: 13px;
  font-weight: 500;
}

.difference-widget-table tbody tr:hover {
  background: #f9fbff;
}

.difference-product {
  min-width: 230px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.difference-product-img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fff;
}

.difference-product-img img {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  object-fit: contain;
}

.difference-product-copy {
  min-width: 0;
  display: block;
}

.difference-product-title {
  display: block;
  color: #101828;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.difference-product-meta {
  display: block;
  margin-top: 4px;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.difference-product-meta:hover {
  color: #0077ff;
}

.difference-value,
.difference-warning-value,
.difference-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.difference-value {
  color: #111827;
  font-weight: 600;
}

.difference-value.is-profit {
  color: #059669;
}

.difference-warning-value {
  color: #dc2626;
}

.difference-warning-value i {
  font-size: 11px;
}

.difference-delta {
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.difference-delta.is-up {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}

.difference-delta.is-down,
.difference-delta.is-risk {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

.difference-main-loss {
  padding: 6px 10px;
  border-radius: 999px;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
  font-weight: 600;
}

.difference-widget-card .dataTables_scrollBody {
  border-bottom: 0 !important;
}

.difference-widget-card .dataTables_info {
  padding: 16px 4px 8px !important;
  color: #667085;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.difference-widget-card .dataTables_paginate {
  padding: 4px 0 0 !important;
  text-align: center !important;
}

.difference-widget-card .pagination {
  justify-content: center;
  margin: 0;
}

.difference-widget-card .page-link {
  min-width: 34px;
  height: 34px;
  padding: 8px 11px;
  border-color: rgba(17, 24, 39, 0.08);
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.difference-widget-card .page-item.active .page-link {
  border-color: #0077ff;
  background: #0077ff;
  color: #fff;
}

@media (max-width: 575.98px) {
  .difference-widget-header {
    flex-direction: column;
  }

  .difference-widget-actions {
    width: 100%;
    justify-content: space-between;
  }

  .difference-widget-body {
    padding: 12px;
  }
}

html[data-bs-theme="dark"] .difference-widget-card,
body[data-theme="dark"] .difference-widget-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .difference-widget-header,
body[data-theme="dark"] .difference-widget-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}

html[data-bs-theme="dark"] .difference-widget-title,
body[data-theme="dark"] .difference-widget-title {
  color: #e5e5ea;
}

html[data-bs-theme="dark"] .difference-widget-subtitle,
body[data-theme="dark"] .difference-widget-subtitle {
  color: #8e8e93;
}

html[data-bs-theme="dark"] .difference-widget-export,
body[data-theme="dark"] .difference-widget-export {
  color: #e5e5ea !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none;
}

html[data-bs-theme="dark"] .difference-widget-export i,
body[data-theme="dark"] .difference-widget-export i {
  color: #aeaeb2;
}

html[data-bs-theme="dark"] .difference-widget-export:hover,
html[data-bs-theme="dark"] .difference-widget-export:focus,
body[data-theme="dark"] .difference-widget-export:hover,
body[data-theme="dark"] .difference-widget-export:focus {
  color: #4d9fff !important;
  background: rgba(0, 119, 255, 0.12) !important;
  border-color: rgba(0, 119, 255, 0.35) !important;
}

html[data-bs-theme="dark"] .difference-widget-info,
body[data-theme="dark"] .difference-widget-info {
  color: #aeaeb2;
  background: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .difference-widget-table-wrap,
body[data-theme="dark"] .difference-widget-table-wrap {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

html[data-bs-theme="dark"] .difference-widget-table thead th,
html[data-bs-theme="dark"] .difference-widget-card table.dataTable thead th,
html[data-bs-theme="dark"] .difference-widget-card table.dataTable thead tr,
body[data-theme="dark"] .difference-widget-table thead th,
body[data-theme="dark"] .difference-widget-card table.dataTable thead th,
body[data-theme="dark"] .difference-widget-card table.dataTable thead tr {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #8e8e93 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .difference-widget-card .dataTables_scrollHead,
html[data-bs-theme="dark"] .difference-widget-card .dataTables_scrollHeadInner,
html[data-bs-theme="dark"] .difference-widget-card .dataTables_scrollHead table.dataTable,
body[data-theme="dark"] .difference-widget-card .dataTables_scrollHead,
body[data-theme="dark"] .difference-widget-card .dataTables_scrollHeadInner,
body[data-theme="dark"] .difference-widget-card .dataTables_scrollHead table.dataTable {
  background: transparent !important;
}

html[data-bs-theme="dark"] .difference-widget-table tbody td,
html[data-bs-theme="dark"] .difference-widget-card table.dataTable tbody td,
body[data-theme="dark"] .difference-widget-table tbody td,
body[data-theme="dark"] .difference-widget-card table.dataTable tbody td {
  color: #e5e5ea !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-bs-theme="dark"] .difference-widget-table tbody tr:hover,
html[data-bs-theme="dark"] .difference-widget-card table.dataTable tbody tr:hover,
body[data-theme="dark"] .difference-widget-table tbody tr:hover,
body[data-theme="dark"] .difference-widget-card table.dataTable tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

html[data-bs-theme="dark"] .difference-product-img,
body[data-theme="dark"] .difference-product-img {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .difference-product-title,
body[data-theme="dark"] .difference-product-title {
  color: #e5e5ea;
}

html[data-bs-theme="dark"] .difference-product-meta,
body[data-theme="dark"] .difference-product-meta {
  color: #8e8e93;
}

html[data-bs-theme="dark"] .difference-product-meta:hover,
body[data-theme="dark"] .difference-product-meta:hover {
  color: #4d9fff;
}

html[data-bs-theme="dark"] .difference-value,
body[data-theme="dark"] .difference-value {
  color: #e5e5ea;
}

html[data-bs-theme="dark"] .difference-value.is-profit,
body[data-theme="dark"] .difference-value.is-profit {
  color: #6ee7b7;
}

html[data-bs-theme="dark"] .difference-warning-value,
body[data-theme="dark"] .difference-warning-value {
  color: #fca5a5;
}

html[data-bs-theme="dark"] .difference-delta.is-up,
body[data-theme="dark"] .difference-delta.is-up {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.18);
}

html[data-bs-theme="dark"] .difference-delta.is-down,
html[data-bs-theme="dark"] .difference-delta.is-risk,
body[data-theme="dark"] .difference-delta.is-down,
body[data-theme="dark"] .difference-delta.is-risk {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
}

html[data-bs-theme="dark"] .difference-main-loss,
body[data-theme="dark"] .difference-main-loss {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
}

html[data-bs-theme="dark"] .difference-widget-card .dataTables_info,
body[data-theme="dark"] .difference-widget-card .dataTables_info {
  color: #8e8e93;
}

html[data-bs-theme="dark"] .difference-widget-card .page-link,
body[data-theme="dark"] .difference-widget-card .page-link {
  border-color: rgba(255, 255, 255, 0.12);
  color: #aeaeb2;
  background: rgba(255, 255, 255, 0.04);
}

html[data-bs-theme="dark"] .difference-widget-card .page-item.active .page-link,
body[data-theme="dark"] .difference-widget-card .page-item.active .page-link {
  border-color: #0077ff;
  background: #0077ff;
  color: #fff;
}

html[data-bs-theme="dark"] .difference-widget-card .dataTables_scrollHead,
html[data-bs-theme="dark"] .difference-widget-card .dataTables_scrollBody,
body[data-theme="dark"] .difference-widget-card .dataTables_scrollHead,
body[data-theme="dark"] .difference-widget-card .dataTables_scrollBody {
  background: transparent;
}

/* KPI per API table widget */
.kpis-table-widget {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.055) !important;
}

.kpis-table-header {
  padding: 18px 20px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.kpis-table-title {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.kpis-table-subtitle {
  display: block;
  margin-top: 7px;
  color: #98a2b3;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.kpis-table-badge {
  height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  color: #344054;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: 12px;
  font-weight: 600;
}

.kpis-table-badge i {
  color: #667085;
  font-size: 12px;
}

.kpis-table-body {
  padding: 14px 18px 18px !important;
}

.kpis-table-grid {
  width: 100%;
  min-height: 240px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.kpis-table-widget .ag-root-wrapper {
  border: 0 !important;
  border-radius: 10px;
}

.kpis-table-widget .ag-header {
  border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
  background: #fbfcff !important;
}

.kpis-table-widget .ag-header-cell {
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kpis-table-widget .ag-row {
  border-bottom: 1px solid rgba(17, 24, 39, 0.055) !important;
  cursor: pointer;
}

.kpis-table-widget .ag-row-hover {
  background: #f9fbff !important;
}

.kpis-table-widget .ag-cell {
  display: flex;
  align-items: center;
  color: #111827;
  font-size: 13px;
  font-weight: 500;
}

.kpis-table-widget .ag-cell:not(.grid-cell-left) {
  justify-content: center;
}

.kpis-table-logo-wrap {
  width: 58px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 10px;
  background: #fff;
}

.kpis-table-logo-wrap img {
  max-width: 48px;
  max-height: 32px;
  object-fit: contain;
}

.kpis-table-connection {
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpis-table-metric {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.15;
}

.kpis-table-metric-value {
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.kpis-table-metric-value.is-positive {
  color: #059669;
}

.kpis-table-metric-trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.kpis-table-metric-trend .text-success,
.kpis-table-metric-trend.text-success {
  color: #059669 !important;
}

.kpis-table-metric-trend .text-danger,
.kpis-table-metric-trend.text-danger {
  color: #dc2626 !important;
}

.kpis-table-metric-trend:has(.text-success),
.kpis-table-metric-trend.text-success {
  background: rgba(16, 185, 129, 0.1);
}

.kpis-table-metric-trend:has(.text-danger),
.kpis-table-metric-trend.text-danger {
  background: rgba(239, 68, 68, 0.1);
}

html[data-bs-theme="dark"] .kpis-table-widget,
body[data-theme="dark"] .kpis-table-widget {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .kpis-table-header,
body[data-theme="dark"] .kpis-table-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .kpis-table-title,
body[data-theme="dark"] .kpis-table-title {
  color: #e5e5ea !important;
}

html[data-bs-theme="dark"] .kpis-table-subtitle,
body[data-theme="dark"] .kpis-table-subtitle {
  color: #8e8e93 !important;
}

html[data-bs-theme="dark"] .kpis-table-badge,
body[data-theme="dark"] .kpis-table-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #aeaeb2 !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .kpis-table-badge i,
body[data-theme="dark"] .kpis-table-badge i {
  color: #8e8e93 !important;
}

html[data-bs-theme="dark"] .kpis-table-body,
body[data-theme="dark"] .kpis-table-body {
  background: transparent !important;
}

html[data-bs-theme="dark"] .kpis-table-grid,
body[data-theme="dark"] .kpis-table-grid {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .kpis-table-widget .ag-header,
body[data-theme="dark"] .kpis-table-widget .ag-header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .kpis-table-widget .ag-header-cell,
body[data-theme="dark"] .kpis-table-widget .ag-header-cell {
  color: #8e8e93 !important;
}

html[data-bs-theme="dark"] .kpis-table-widget .ag-row,
body[data-theme="dark"] .kpis-table-widget .ag-row {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-bs-theme="dark"] .kpis-table-widget .ag-row-hover,
body[data-theme="dark"] .kpis-table-widget .ag-row-hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-bs-theme="dark"] .kpis-table-widget .ag-cell,
body[data-theme="dark"] .kpis-table-widget .ag-cell {
  color: #e5e5ea !important;
}

html[data-bs-theme="dark"] .kpis-table-logo-wrap,
body[data-theme="dark"] .kpis-table-logo-wrap {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-bs-theme="dark"] .kpis-table-connection,
body[data-theme="dark"] .kpis-table-connection {
  color: #f5f5f7 !important;
}

html[data-bs-theme="dark"] .kpis-table-metric-value,
body[data-theme="dark"] .kpis-table-metric-value {
  color: #e5e5ea !important;
}

html[data-bs-theme="dark"] .kpis-table-metric-value.is-positive,
body[data-theme="dark"] .kpis-table-metric-value.is-positive {
  color: #34d399 !important;
}

html[data-bs-theme="dark"] .kpis-table-metric-trend:has(.text-success),
html[data-bs-theme="dark"] .kpis-table-metric-trend.text-success,
body[data-theme="dark"] .kpis-table-metric-trend:has(.text-success),
body[data-theme="dark"] .kpis-table-metric-trend.text-success {
  background: rgba(16, 185, 129, 0.16) !important;
}

html[data-bs-theme="dark"] .kpis-table-metric-trend:has(.text-danger),
html[data-bs-theme="dark"] .kpis-table-metric-trend.text-danger,
body[data-theme="dark"] .kpis-table-metric-trend:has(.text-danger),
body[data-theme="dark"] .kpis-table-metric-trend.text-danger {
  background: rgba(239, 68, 68, 0.16) !important;
}

@media (max-width: 768px) {
  .kpis-table-header {
    padding: 16px;
    flex-direction: column;
  }

  .kpis-table-body {
    padding: 12px !important;
  }

  .kpis-table-grid {
    overflow-x: auto;
  }

  .kpis-table-widget .ag-header-cell,
  .kpis-table-widget .ag-cell {
    font-size: 12px;
  }
}

@media (max-width: 450px) {
  .kpis-table-title {
    font-size: 16px;
  }

  .kpis-table-subtitle {
    font-size: 12px;
  }

  .kpis-table-badge {
    width: 100%;
    justify-content: center;
  }
}

/* Import product costs widget */
.product-cost-import-widget {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.055) !important;
}

.product-cost-import-header {
  padding: 18px 20px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.product-cost-import-title {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.product-cost-import-subtitle {
  display: block;
  margin-top: 7px;
  color: #98a2b3;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.product-cost-import-count {
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
  font-size: 12px;
  font-weight: 600;
}

.product-cost-import-body {
  padding: 14px 18px 18px !important;
}

.product-cost-import-grid {
  width: 100%;
  min-height: 260px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.product-cost-import-widget .ag-root-wrapper {
  border: 0 !important;
  border-radius: 10px;
}

.product-cost-import-widget .ag-header {
  border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
  background: #fbfcff !important;
}

html[data-bs-theme="dark"] .product-cost-import-widget .ag-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

html[data-bs-theme="dark"] .product-cost-import-widget .ag-header-cell {
  color: #aeb0b8;
}

.product-cost-import-widget .ag-header-cell {
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-cost-import-widget .ag-row {
  border-bottom: 1px solid rgba(17, 24, 39, 0.055) !important;
}

.product-cost-import-widget .ag-row-hover {
  background: #f9fbff !important;
}

.product-cost-import-widget .ag-cell {
  display: flex;
  align-items: center;
  color: #111827;
  font-size: 13px;
  font-weight: 500;
}

.product-cost-import-widget .ag-cell:not(.grid-cell-left) {
  justify-content: center;
}

.product-cost-import-logo {
  width: 58px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 10px;
  background: #fff;
}

.product-cost-import-logo img {
  max-width: 48px !important;
  max-height: 32px !important;
  object-fit: contain;
}

.product-cost-import-name {
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-cost-import-metric {
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
}

.product-cost-import-metric.is-active {
  color: #059669;
}

.product-cost-import-metric.is-missing {
  padding: 5px 9px;
  border-radius: 999px;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

.product-cost-import-metric.is-complete {
  color: #059669;
}

.product-cost-import-complete,
.product-cost-import-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-cost-import-action .btn,
.product-cost-import-action button,
.product-cost-import-action a {
  min-height: 32px;
  border-radius: 9px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.product-cost-import-empty {
  min-height: 220px;
  padding: 28px 20px;
  border: 1px dashed rgba(16, 185, 129, 0.28);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #667085;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.055), rgba(255, 255, 255, 0));
}

.product-cost-import-empty-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  font-size: 20px;
}

.product-cost-import-empty h6 {
  margin: 0;
  color: #101828;
  font-size: 16px;
  font-weight: 600;
}

.product-cost-import-empty p {
  max-width: 430px;
  margin: 8px 0 0;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .product-cost-import-header {
    padding: 16px;
    flex-direction: column;
  }

  .product-cost-import-body {
    padding: 12px !important;
  }

  .product-cost-import-grid {
    overflow-x: auto;
  }

  .product-cost-import-widget .ag-header-cell,
  .product-cost-import-widget .ag-cell {
    font-size: 12px;
  }
}

@media (max-width: 450px) {
  .product-cost-import-title {
    font-size: 16px;
  }

  .product-cost-import-subtitle {
    font-size: 12px;
  }
}

/* Lost returns widget */
.lost-returns-widget {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06) !important;
}

.lost-returns-header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: #fff;
}

.lost-returns-title {
  margin: 0;
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lost-returns-header small {
  display: block;
  margin-top: 4px;
  color: #8b95a7;
  font-size: 12px;
  line-height: 1.3;
}

.lost-returns-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}

.lost-returns-loader {
  min-width: 118px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #667085;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  font-size: 12px;
  font-weight: 500;
}

.lost-returns-loader .spinner-border {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.lost-returns-widget .dataTables_wrapper {
  width: 100%;
  overflow-x: hidden;
}

.lost-returns-toolbar {
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: #fbfcff;
}

.lost-returns-toolbar .dataTables_length,
.lost-returns-toolbar .dt-buttons,
.lost-returns-toolbar .dataTables_filter {
  margin: 0;
}

.lost-returns-toolbar .dataTables_length label,
.lost-returns-toolbar .dataTables_filter label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}

.lost-returns-toolbar .dataTables_length select,
.lost-returns-toolbar .dataTables_filter input {
  height: 32px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  color: #344054;
  background: #fff;
  font-size: 12px;
  box-shadow: none;
}

.lost-returns-toolbar .dataTables_length select {
  min-width: 64px;
  padding: 4px 26px 4px 10px;
}

.lost-returns-toolbar .dataTables_filter input {
  min-width: 190px;
  padding: 4px 10px;
}

.lost-returns-export-btn {
  height: 30px;
  padding: 0 10px !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: #344054 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.lost-returns-export-btn i {
  color: #667085;
  font-size: 11px;
}

.lost-returns-export-btn:hover,
.lost-returns-export-btn:focus {
  border-color: rgba(0, 119, 255, 0.24) !important;
  color: #0077ff !important;
  background: #f8fbff !important;
}

.lost-returns-table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  table-layout: fixed;
  width: 100% !important;
}

.lost-returns-table thead th {
  padding: 12px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
  color: #667085;
  background: #fff;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
}

.lost-returns-table tbody td {
  padding: 10px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.055) !important;
  vertical-align: middle !important;
  overflow: hidden;
}

.lost-returns-table tbody tr:hover {
  background: #f8fbff;
}

.lost-returns-product-cell {
  width: auto;
  max-width: 0;
  text-align: left !important;
}

.lost-returns-meta-cell {
  width: 105px !important;
  min-width: 105px;
  max-width: 105px;
  text-align: center !important;
}

.lost-returns-money-cell {
  width: 96px !important;
  min-width: 96px;
  max-width: 96px;
  text-align: right !important;
}

.lost-returns-status-cell {
  width: 128px !important;
  min-width: 128px;
  max-width: 128px;
  text-align: right !important;
}

.lost-returns-product {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lost-returns-product img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  flex: 0 0 48px;
  background: #fff;
}

.lost-returns-product-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
}

.lost-returns-product-name {
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

.lost-returns-product-meta,
.lost-returns-muted,
.lost-returns-date {
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

.lost-returns-product-meta {
  display: block;
  margin-top: 4px;
}

.lost-returns-price {
  color: #111827;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

.lost-returns-status {
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-flex;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.lost-returns-widget .dataTables_info {
  padding: 12px 14px 4px !important;
  color: #667085;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.lost-returns-widget .dataTables_paginate {
  padding: 8px 14px 14px !important;
  text-align: center !important;
}

.lost-returns-widget .pagination {
  justify-content: center;
  margin: 0;
}

.lost-returns-widget .page-link {
  min-width: 32px;
  height: 32px;
  padding: 7px 10px;
  border-color: rgba(17, 24, 39, 0.08);
  color: #667085;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.lost-returns-widget .page-item.active .page-link {
  border-color: #0077ff;
  background: #0077ff;
  color: #fff;
}

@media (max-width: 575.98px) {
  .dashboard-kpi-card .card-body {
    padding: 16px;
  }

  .dashboard-kpi-value,
  .dashboard-kpi-card .card-text-center-bold,
  .dashboard-kpi-card .stock-monitor-value-display {
    font-size: 24px;
  }
}

.revenue-widget-flex-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
  min-height: 50px;
}

.revenue-widget-flex-header .revenue-widget-title {
  flex: 1;
  text-align: center;
  margin: 0;
  min-width: 0;
}

.revenue-widget-flex-header .revenue-widget-info {
  position: static;
  flex-shrink: 0;
}

.revenue-widget-flex-header .revenue-widget-select {
  flex-shrink: 1;
  min-width: 0;
  max-width: 130px;
}

.revenue-widget-flex-header .revenue-toggle-container {
  margin: 0;
  flex-shrink: 0;
}

/* All revenue widgets: title row + button row for consistent alignment (iPhone & iPad) */
@media (max-width: 767.98px) {
  .revenue-widget-flex-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: center;
    min-height: auto;
    padding: 12px 16px;
    width: 100%;
  }
  .revenue-widget-flex-header .revenue-widget-title {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    font-size: 14px;
    margin: 0;
  }
  .revenue-widget-flex-header .revenue-widget-select {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 140px;
    font-size: 12px;
  }
  .revenue-widget-flex-header > div:last-child {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}
@media (max-width: 575.98px) {
  .revenue-widget-flex-header .revenue-widget-select {
    max-width: 110px;
    font-size: 11px;
  }
  .revenue-widget-flex-header {
    padding: 10px 12px;
  }
  .revenue-widget-flex-header .revenue-widget-title {
    font-size: 13px;
  }
  .revenue-toggle-container div {
    padding: 4px 6px;
    font-size: 10px;
  }
}

/* revenue-widget-header (rev-diff / Most revenue change table): title row + button row, iPhone only */
@media (max-width: 575.98px) {
  .revenue-widget-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: center;
    min-height: auto;
    padding: 12px 16px;
    width: 100%;
  }
  .revenue-widget-header .revenue-widget-title {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    font-size: 13px;
    margin: 0;
    flex: none !important;
  }
  .revenue-widget-header #exportRevenueDifference {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    font-size: 11px;
    padding: 5px 10px;
  }
  .revenue-widget-header .revenue-widget-info {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

/* card-widget-header (top-products, no-top-products): title row + button row */
@media (max-width: 767.98px) {
  .card-widget-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: center;
    min-height: auto;
    padding: 12px 16px;
    width: 100%;
  }
  .card-widget-header .card-text-center-middle {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    font-size: 14px;
    margin: 0;
    flex: none !important;
    padding: 0 !important;
  }
  .card-widget-header .btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    font-size: 12px;
    padding: 6px 12px;
  }
  .card-widget-header .info-thing {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}
@media (max-width: 575.98px) {
  .card-widget-header .card-text-center-middle {
    font-size: 13px;
  }
  .card-widget-header .btn {
    font-size: 11px;
    padding: 5px 10px;
  }
}

/* world-card-header: iPad/desktop = overlay on map, iPhone only = title row + button row */
.world-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.world-card-header .revenue-widget-title {
  flex: 1;
  text-align: center;
  margin: 0;
}
/* iPad & desktop: overlay on map so it doesn't extend the card */
@media (min-width: 576px) {
  .world-card-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
  }
}
/* iPhone only: title row + button row as block above map */
@media (max-width: 575.98px) {
  .world-card-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: center;
    width: 100%;
    position: relative;
  }
  .world-card-header .revenue-widget-title {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    font-size: 13px;
    margin: 0;
  }
  .world-card-header .d-flex {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .world-card-header .revenue-widget-info {
    position: static;
  }
  .world-card-header .revenue-widget-select {
    max-width: 110px;
    font-size: 11px;
  }
}

html[data-bs-theme="dark"] .revenue-widget-card:has(#regions_div),
body[data-theme="dark"] .revenue-widget-card:has(#regions_div) {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .world-card-header .rev-chart-title,
html[data-bs-theme="dark"] .world-card-header .revenue-widget-title,
body[data-theme="dark"] .world-card-header .rev-chart-title,
body[data-theme="dark"] .world-card-header .revenue-widget-title {
  color: #e5e5ea;
}

html[data-bs-theme="dark"] #regions_div,
body[data-theme="dark"] #regions_div {
  background: transparent;
}

html[data-bs-theme="dark"] .rev-chart-widget,
body[data-theme="dark"] .rev-chart-widget {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.875rem;
  overflow: hidden;
}

html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-title,
body[data-theme="dark"] .rev-chart-widget .rev-chart-title {
  color: #f5f5f7;
}

html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-header,
body[data-theme="dark"] .rev-chart-widget .rev-chart-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-loader,
body[data-theme="dark"] .rev-chart-widget .rev-chart-loader {
  background: rgba(17, 24, 39, 0.88);
}

html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-toggle,
body[data-theme="dark"] .rev-chart-widget .rev-chart-toggle {
  background: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-toggle::before,
body[data-theme="dark"] .rev-chart-widget .rev-chart-toggle::before {
  background: rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-toggle-input + .rev-chart-toggle span:first-child,
html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-toggle-input:checked + .rev-chart-toggle span:last-child,
body[data-theme="dark"] .rev-chart-widget .rev-chart-toggle-input + .rev-chart-toggle span:first-child,
body[data-theme="dark"] .rev-chart-widget .rev-chart-toggle-input:checked + .rev-chart-toggle span:last-child {
  color: #f5f5f7;
}

html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-toggle-input + .rev-chart-toggle span:last-child,
html[data-bs-theme="dark"] .rev-chart-widget .rev-chart-toggle-input:checked + .rev-chart-toggle span:first-child,
body[data-theme="dark"] .rev-chart-widget .rev-chart-toggle-input + .rev-chart-toggle span:last-child,
body[data-theme="dark"] .rev-chart-widget .rev-chart-toggle-input:checked + .rev-chart-toggle span:first-child {
  color: #9ca3af;
}

.platform-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin-left: -7px;
  border-radius: 2px;
  border: solid;
  border-color: #DEDEDE;
  border-width: 1px;
  background-color:white;
  border-radius: 7.5px !important;
}

.marketplace-images-container {
  display: flex;
  flex-direction: row;
}

.dashboard-api-logo-wrap {
  width: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  vertical-align: middle;
}

.dashboard-api-logo-fallback {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: #667085;
  background: #f2f4f7;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.table-narrow td {
  padding: 0.35rem 0.75rem;
}

.tooltip {
  font-size: 10px;
}

.tiny-card {
  height: 100px !important;
}

.canvas-donut {
  width: 50%;
  height: auto;
}

#StockoutProductsList_wrapper thead>tr,
#StockoutProductsList_wrapper thead>tr>th {
  border: none;
  background-color: #f1f1f1;
}

#StockoutProductsList_wrapper thead th:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

#StockoutProductsList_wrapper thead th:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
}

.revenue-lost-cell-text {
  white-space: nowrap;
}

.stock-out-days-cell,
.revenue-lost-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.stock-out-days-cell {
  justify-content: flex-end;
}

.revenue-lost-cell {
  justify-content: flex-start;
}

.stock-out-days-bar {
  height: 15px;
  border-radius: 3px;
  background-color: #D0E9FF;
  min-width: 4px;
  max-width: calc(100% - 2.75rem);
  flex: 0 1 auto;
}

.stock-out-days-value {
  margin: 0;
  font-size: 12px;
  flex: 0 0 auto;
}

.revenue-lost-progress-bar {
  height: 15px;
  border-radius: 3px;
  background-color: #0085FF;
  min-width: 4px;
  flex: 1 1 auto;
}

.revenue-lost-cell .revenue-lost-cell-text {
  font-size: 12px;
  min-width: 50px;
  margin: 0;
  font-weight: bold;
  flex: 0 0 auto;
}

.revenue-lost-cell__track {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

html[data-bs-theme="dark"] #StockoutProductsList_wrapper thead > tr,
html[data-bs-theme="dark"] #StockoutProductsList_wrapper thead > tr > th,
body[data-theme="dark"] #StockoutProductsList_wrapper thead > tr,
body[data-theme="dark"] #StockoutProductsList_wrapper thead > tr > th {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #8e8e93 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] #StockoutProductsList tbody td,
body[data-theme="dark"] #StockoutProductsList tbody td {
  color: #e5e5ea;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-bs-theme="dark"] #StockoutProductsList tbody tr:hover td,
body[data-theme="dark"] #StockoutProductsList tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

html[data-bs-theme="dark"] #StockoutProductsList .stock-out-days-bar,
body[data-theme="dark"] #StockoutProductsList .stock-out-days-bar {
  background-color: rgba(77, 159, 255, 0.35) !important;
}

html[data-bs-theme="dark"] #StockoutProductsList .revenue-lost-cell-text,
html[data-bs-theme="dark"] #StockoutProductsList .stock-out-days-value,
body[data-theme="dark"] #StockoutProductsList .revenue-lost-cell-text,
body[data-theme="dark"] #StockoutProductsList .stock-out-days-value {
  color: #e5e5ea !important;
}

html[data-bs-theme="dark"] #StockoutProductsList .revenue-lost-progress-bar,
body[data-theme="dark"] #StockoutProductsList .revenue-lost-progress-bar {
  background-color: #0085ff !important;
}

html[data-bs-theme="dark"] #StockoutProductsList tbody a:not(.btn),
body[data-theme="dark"] #StockoutProductsList tbody a:not(.btn) {
  color: #4d9fff;
}

html[data-bs-theme="dark"] #StockoutProductsList tbody small,
body[data-theme="dark"] #StockoutProductsList tbody small {
  color: #8e8e93;
}

html[data-bs-theme="dark"] #StockoutProductsList_wrapper .dataTables_filter input,
html[data-bs-theme="dark"] #StockoutProductsList_wrapper .dataTables_length select,
body[data-theme="dark"] #StockoutProductsList_wrapper .dataTables_filter input,
body[data-theme="dark"] #StockoutProductsList_wrapper .dataTables_length select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e5ea;
}

html[data-bs-theme="dark"] #StockoutProductsList_wrapper .dataTables_info,
body[data-theme="dark"] #StockoutProductsList_wrapper .dataTables_info {
  color: #8e8e93;
}

html[data-bs-theme="dark"] #StockoutProductsList_wrapper .page-link,
body[data-theme="dark"] #StockoutProductsList_wrapper .page-link {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: #aeaeb2;
}

html[data-bs-theme="dark"] #StockoutProductsList_wrapper .page-item.active .page-link,
body[data-theme="dark"] #StockoutProductsList_wrapper .page-item.active .page-link {
  background: #0077ff;
  border-color: #0077ff;
  color: #fff;
}

html[data-bs-theme="dark"] #stockTable .platform-img,
body[data-theme="dark"] #stockTable .platform-img {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="dark"] #stockTable .products-table-loading-overlay,
body[data-theme="dark"] #stockTable .products-table-loading-overlay {
  background: rgba(17, 24, 39, 0.88) !important;
}

/* stock-table-header: desktop = single row, iPhone = title row + button row */
.stock-table-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.stock-table-title {
  display: none;
}
.stock-table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* stock-table: iPhone - title row + button row, fix glitchy DataTable */
@media (max-width: 575.98px) {
  #stockTable {
    height: auto !important;
    min-height: 380px;
    overflow: hidden;
  }
  #stockTable .card-body {
    padding: 12px 16px !important;
    overflow: hidden;
  }
  .stock-table-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    margin-bottom: 12px;
    width: 100%;
  }
  .stock-table-title {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #1a1a2e;
  }
  .stock-table-filters {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
  }
  .stock-table-filters .mx-1 {
    margin: 0 !important;
    flex: 1;
    min-width: 0;
  }
  .stock-table-filters .nice-select {
    font-size: 11px !important;
    padding: 5px 24px 5px 8px !important;
    min-height: 32px !important;
    width: 100% !important;
    max-width: 100%;
  }
  .stock-table-filters #exportTable {
    font-size: 11px !important;
    padding: 5px 10px !important;
    min-height: 32px !important;
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  #Products-table {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
  }
  #StockoutProductsList_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
  }
  #StockoutProductsList_wrapper .dataTables_scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #StockoutProductsList_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #StockoutProductsList thead th {
    font-size: 10px !important;
    padding: 6px 4px !important;
    white-space: nowrap;
  }
  #StockoutProductsList tbody td {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }
  #StockoutProductsList .out-of-stock-button {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }
  #StockoutProductsList tbody td img {
    width: 28px !important;
    height: 28px !important;
  }
  #StockoutProductsList_wrapper .dataTables_wrapper .dataTables_paginate {
    font-size: 11px !important;
    padding: 6px 8px !important;
    -webkit-overflow-scrolling: touch;
  }
  #StockoutProductsList_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 6px !important;
    font-size: 11px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
  #StockoutProductsList_wrapper .dataTables_wrapper .dataTables_info,
  #StockoutProductsList_wrapper .dataTables_wrapper .dataTables_length {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
}

/* Medium devices (desktops) */
@media (min-width: 768px) and (max-width: 991.98px) {

  #stock-outs-calendar-chart {
    margin-left: -20px;
  }

  .out-of-stock-button {
    width: 75px;
    height: 20px;
    font-size: 10px;
  }

  .revenue-lost-progress-bar,
  .stock-out-days-bar {
    height: 10px;
  }

  .dataTables_info {
    font-size: 10px;
  }

}

/* SMALL DEVICES (TABLETS) */
@media (min-width: 576px) and (max-width: 767.98px) {

  #stock-outs-calendar-chart {
    margin-left: 10px;
  }

  #StockoutProductsList_wrapper thead>tr>th {
    font-size: 10px;
  }

  #StockoutProductsList_wrapper thead>tr>th,
  #StockoutProductsList_wrapper thead>tr>th>td {
    padding: 0;
    text-align: center;
    justify-content: center;
  }

  .revenue-missed-text {
    font-size: 12px;
  }

  .days-out-text {
    font-size: 12px;
  }

}


/* EXTRA SMALL DEVICES (PHONES ETC.) //////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 575.98px) {

  #StockoutProductsList_wrapper>thead {
    font-size: 10px;
  }

  #stock-outs-calendar-chart {
    margin-left: 10px;
  }

  .dataTables_scrollBody > table > thead {
    display:none;
  }

  .revenue-lost-progress-bar,
  .stock-out-days-bar {
    display: none;
  }

  .revenue-missed-text, .days-out-text {
    font-size: 12px;
  }
  .nav-pill-row {
    padding: 10px 0px;
    background: white;
    color: #000;
  }

  .nav-pills-manager {
    margin-top: 10px;
  }

  .nav-pills-manager li a {
    border-radius: 0px 0px 0px 0px;
    margin-bottom: 10px;
  }

  .blue-wrapper {
    background: white;
  }

  #Products-table > #ProductsList_wrapper > #ProductsList_length > label,
  #Products-table > #ProductsList_wrapper > #ProductsList_filter > label,
  #Products-table > #ProductsList_wrapper > #ProductsList_info {
    color: #000;
  }

  .table thead th {
      font-size: 10px!important;
      text-align: center!important;
  }
  .table td {
      padding: 0.5rem!important;
  }
  .table th {
      padding: 0.5rem!important;
  }
  #ProductsList thead tr {
      padding: 0px!important;
  }

}

.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 3px;
  padding: 5px;
  padding-left: 30px;
  color: var(--primary-color);
  font-weight: 600;
  margin-top: 2.5px;
  margin-bottom: 2.5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: 2px solid var(--primary-color);
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  padding: 5px 5px;
  color: #fff;
  background-color: var(--primary-color);
}
.select2-container--default .select2-selection, .select2-container--default.select2-container--focus .select2-selection--multiple {
  height: auto;
  padding: 5px;
  font-weight: 500;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-dropdown,
.select2-container--default .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #e8e8e8;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline-width: 0;
  outline: none;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary-color);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  margin-right: 10px;
}
.select2-container--default .select2-search.select2-search--inline {
  position: relative;
  top: -10px;
}

.report-template-edit {
    border-radius: 100px !important;
    position: absolute;
    right: -15px;
    top: -15px;
    border: solid #0077ff 0px;
    display: none;
}
.report-product-template {
    position: relative;
}
.report-product-template:hover .report-template-edit {
    display: block;
}

.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: #fff;
  background: var(--primary-color);
  padding: 2.5px 5px;
  border-radius: 5px;
  margin-bottom: 0px;
}

.select2-container--default .select2-search--inline .select2-search__field {
  margin-top: 20px;
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 300px;
}

.timetable .time-entry {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  height: 20px;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
}

.timetable ul.room-timeline li:first-child .time-entry {
  height: 20px;
}

.timetable ul.room-timeline li {
  height: auto;
}

.timetable .time-entry:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn .badge {
  padding-top: 4px;
}


.table-uneven-horizontal tr td:nth-child(even) {
  background-color: #f9f9f9;
}

#productTitle > a {
  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   line-clamp: 2;
   -webkit-box-orient: vertical;
   max-width: 50%;
}

@media screen and (max-width: 445px) {

  .preset-button.preset-active .card-body  > i{
    display: none;
  }
  .channel-img-product-modal{
    display: none;
  }
  .product-modal-tab > a {
    font-size: 8px
  }
  .ranking-box {
    height: 50px;
  }

}

.btn-gc-cell {
  appearance: none !important;
}


#advertisingRuleModal .table td, #advertisingRuleLogModal .table td {
  text-align: center;
}

.marketshare-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Brand Share of Voice (SoV) insight card */
.sov-metric {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}
.sov-metric-label {
  font-size: 0.75rem;
  color: #6c757d;
}
.sov-metric-value {
  font-weight: 600;
  font-size: 1rem;
}
.hideScroll::-webkit-scrollbar {
  display: none;
}
.hideScroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
@media only screen and (max-width: 1200px) {
    #marketshare-table {
      width: 100%;
      margin-bottom: 1rem;
    }
    #marketshareDonutChart {
      width: 100%;
      max-width: 100%;
    }
}

.sw-theme-dots>.nav .nav-link>.num {
  margin-top: 2.5px;
}
.sw>.tab-content {
  overflow: visible;
}

.jq-toast-wrap.top-right {
  top: 80px;
}
.jq-toast-loader {
  top: 0px;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.3) !important;
  /* height: 4px; */
}
.jq-toast-single {
  -webkit-box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
  box-shadow: 0 1px 4px 1px rgba(64,60,67,.1) !important;
}

/* SUPPORTPAGE */

.fl {
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
    height: 1em;
    margin: 0;
    border-radius: 2px;
    vertical-align: middle;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}
.fl-lg {
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
    height: 1em;
    margin: 0;
    border-radius: 2px;
    vertical-align: middle;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}
.mp {
    position: relative;
    display: inline-block;
    height: 1em;
    width: 1em;
    line-height: 1em;
    vertical-align: middle;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.mp-md {
  position: relative;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  line-height: 1em;
  vertical-align: middle;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.mp-lg {
    position: relative;
    display: inline-block;
    height: 2em;
    width: 2em;
    line-height: 1em;
    vertical-align: middle;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.mp-xl {
    position: relative;
    display: inline-block;
    height: 2.5em;
    width: 2.5em;
    line-height: 1em;
    vertical-align: middle;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.mp-xxl {
    position: relative;
    display: inline-block;
    height: 4em;
    width: 4em;
    line-height: 1em;
    vertical-align: middle;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.sp {
    position: relative;
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    line-height: 1.5em;
    vertical-align: middle;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.fl-de {
    background-image: url(/uploads/svg-flags/de.svg);
}
.fl-nl {
    background-image: url(/uploads/svg-flags/nl.svg);
}
.fl-be {
    background-image: url(/uploads/svg-flags/be.svg);
}
.fl-fr {
    background-image: url(/uploads/svg-flags/fr.svg);
}
.fl-es {
    background-image: url(/uploads/svg-flags/es.svg);
}
.fl-it {
    background-image: url(/uploads/svg-flags/it.svg);
}
.fl-uk {
    background-image: url(/uploads/svg-flags/gb-eng.svg);
}
.fl-pl {
    background-image: url(/uploads/svg-flags/pl.svg);
}
.fl-es {
    background-image: url(/uploads/svg-flags/es.svg);
}
/* MARKETPLACES */
.mp-shopify {
    background-image: url(/uploads/svg-webshops/shopify.svg)
}
.mp-woocommerce {
    background-image: url(/uploads/svg-webshops/woocommerce.svg)
}
.mp-magento {
    background-image: url(/uploads/svg-webshops/magento.svg)
}
.mp-lightspeed {
    background-image: url(/uploads/svg-webshops/lightspeed.svg)
}
.mp-presta {
    background-image: url(/uploads/svg-webshops/presta.svg)
}
.mp-amazon {
    background-image: url(/uploads/svg-marketplaces/amazon.svg)
}
.mp-kaufland {
    background-image: url(/uploads/svg-marketplaces/kaufland.svg)
}
.mp-bolcom {
    background-image: url(/uploads/svg-marketplaces/bol.svg)
}
.mp-allegro {
    background-image: url(/uploads/svg-marketplaces/allegro.svg)
}
.mp-cdiscount {
    background-image: url(/uploads/svg-marketplaces/cdiscount.svg)
}
.mp-ebay {
    background-image: url(/uploads/svg-marketplaces/ebay.svg)
}
.mp-mediamarkt {
    background-image: url(/uploads/svg-marketplaces/mediamarkt.svg)
}
.mp-blokker {
    background-image: url(/uploads/svg-marketplaces/blokker.jpeg)
}
.mp-anwb {
    background-image: url(/uploads/svg-marketplaces/anwb.svg)
}
.mp-pixmania {
    background-image: url(/uploads/svg-marketplaces/pixmania.png)
}
.mp-leenbakker {
    background-image: url(/uploads/svg-marketplaces/leenbakker.svg)
}
.mp-rueducommerce {
    background-image: url(/uploads/svg-marketplaces/rueducommerce.svg)
}
.sp-sparkle {
    background-image: url(/uploads/sparkles.svg);
}

.max-two-lines {
    max-height: 3.6em; /* 2 lines with a line height of 1.8em */
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* Message bubbles */
.message-bubble {
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  max-width: 90%;
}

.message-bubble-customer {
  background-color: white;
  border: 1px solid var(--fivex-border);
  margin-left: 0;
  margin-right: auto;
}

.message-bubble-agent {
  background-color: white;
  border: 1px solid var(--fivex-border);
  margin-left: auto;
  margin-right: 0;
}

.message-header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--fivex-border);
  background-color: rgba(0, 0, 0, 0.03);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.message-body {
  padding: 1.25rem;
}

.message-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--fivex-border);
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Customer info section */
.customer-section {
  background-color: var(--fivex-card-bg);
  border: 1px solid var(--fivex-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.customer-info-item {
  margin-bottom: 0.5rem;
}

.customer-info-label {
  color: var(--fivex-text-secondary);
  font-size: 0.875rem;
}

/* Reply area */
.thread-reply-form {
  background-color: white;
  /* border: 1px solid var(--fivex-border); */
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  padding: 1rem;
  margin-top: 0rem;
  transition: border-color 0.15s ease-in-out;
}

.thread-reply-form.border-dark {
  border-color: var(--fivex-border) !important;
}

.thread-reply-form.internal-active {
  border-left: 5px solid #ffc107 !important;
}

.new-comment {
  border-radius: 0.25rem;
  padding: 0.75rem;
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
}

.new-comment:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.new-comment:empty:before {
  content: attr(data-placeholder);
  color: var(--fivex-text-secondary);
}

.new-comment-action-bar {
  margin-top: 1rem;
}

.new-comment-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* File attachment styling */
.file-item {
  display: inline-flex;
  align-items: center;
  background-color: var(--fivex-light-gray);
  border: 1px solid var(--fivex-border);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  position: relative;
}

.remove-file {
  cursor: pointer;
  color: var(--fivex-red);
  margin-left: 0.5rem;
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

/* Top info bar */
.info-bar {
  /* display: flex; */
  background-color: var(--fivex-gray);
  border-bottom: 1px solid var(--fivex-border);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.info-bar-section {
  flex: none;
  padding: 0 1rem;
}

.info-bar-section:not(:last-child) {
  /* border-right: 1px solid var(--fivex-border); */
}

/* Custom time badge */
.time-badge {
  font-size: 0.75rem;
  color: var(--fivex-text-secondary);
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .info-bar {
    flex-direction: column;
  }

  .info-bar-section {
    padding: 1rem 0;
  }

  .info-bar-section:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--fivex-border);
  }
}

/* Internal note styling */
.internal-active {
  border-left: 3px solid #fbbf24 !important;
  box-shadow: 0 1px 0 0 rgba(80, 82, 91, 0.2) !important;
  background-color: #fffbeb !important;
  color: #783510 !important;
}

/* Avatar and templates */
.avatar-circle-left, .avatar-circle-right {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 15px;
  color: white;
  font-weight: bold;
}

/* Translation toggle */
.thread-item-translation-toggle {
  background: none;
  border: none;
  color: var(--fivex-text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s ease-in-out;
}

.thread-item-translation-toggle:hover,
.thread-item-translation-toggle.active {
  color: var(--fivex-blue);
  text-decoration: none;
}

.thread-item-translation {
  /* background-color: rgba(13, 110, 253, 0.05); */
}

/* Marketplace and flag icons */
.mp-logo, .mp-lg, .fl-lg {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.mp-logo {
  width: 100px;
  height: 30px;
}

/* Vertical divider */
.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentColor;
  opacity: 0.25;
  margin: 0 0.5rem;
}

.attachment-launcher {
  cursor: pointer;
  margin: 0 0.5rem;
  color: var(--fivex-text-secondary);
}

.attachment-launcher:hover {
  color: var(--fivex-blue);
}

.inbox-item-wrapper {
  margin-bottom: 0rem;
}

.targeting-is-auto .hide-on-auto-targeting {
  display: none !important;
}

.show-on-auto-targeting {
  display: none !important;
}

#campaign-settings-modal.targeting-is-auto:not(.campaign-api-amazon) .show-on-auto-targeting {
  display: block !important;
}

/* Custom Sweet Alert styling */
.swal2-title {
  font-size: 1.25rem !important;
}

.swal2-confirm, .swal2-cancel {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border-radius: 50rem !important;
}

.swal2-icon-success .swal2-confirm {
  color: #fff !important;
  background-color: rgb(28, 200, 117) !important;
  border-color: rgb(28, 200, 117) !important;
}

.swal2-icon-success .swal2-confirm:hover {
  background-color: rgb(28, 200, 117) !important;
  border-color: rgb(28, 200, 117) !important;
}

.swal2-icon-error .swal2-confirm {
  color: #fff !important;
  background-color: #e74a3b !important;
  border-color: #e74a3b !important;
}

.swal2-icon-error .swal2-confirm:hover {
  background-color: #e74a3b !important;
  border-color: #e74a3b !important;
}

.swal2-footer{
  color: rgb(128, 128, 128) !important;
}

.nav-pills .nav-link.active {
  background-color: transparent;
  color: #007bff;
  font-weight: 500;
  border-bottom: 2px solid #007bff;
  border-radius: 0;
}
.nav-pills .nav-link {
  color: #6c757d;
  border-radius: 0;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #007bff;
  border-color: #007bff;
}
.snippet-select {
  cursor: pointer;
  transition: all 0.2s;
}
.snippet-select:hover {
  color: #0056b3 !important;
  transform: translateX(5px);
}
[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #adb5bd;
  display: block;
}
.border-3 {
  border-width: 3px!important;
}

/* Toastr Styling in the same style of $this->error()
* De functie toastrErrorStyle(message) moet in de view ook worden gebruikt
*/

/* Clean toast-error style */
#toast-container>.toast-error {
  background-color: #ff1600 !important;
  background-image: none !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 6px;
  /* display: flex !important; */
  margin-top: 50px !important;
  align-items: center !important;
}

/* Better alignment and spacing inside toast */
#toast-container>.toast-error h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
}

/* Icon styling */
#toast-container>.toast-error i {
  font-size: 16px !important;
  margin-right: 8px !important;
  line-height: 1 !important;
}

.internal-notes-wrapper {
  position: relative;
  width: 100%;
}

.note-content {
  background-color: #f5f5f5;
  border-radius: 15px;
  padding: 10px 15px;
  display: inline-block;
  font-size: 12px;
}

.note-item small.text-muted {
  font-size: 11px !important;
}

.text-bit-dark {
  color: rgb(88, 81, 81) !important;
}

.better-bg-success {
  background-color: #e6f9ec;
  border: 2px solid #b3f0c6;
}

.better-text-success {
  color: #4a7352;
}

.better-bg-warning {
  background-color: #fff9e6;
  border: 2px solid #ffe8a1;
}

.better-text-warning {
  color: #7d6b3b;
}

.better-bg-danger {
  background-color: #fceaea;
  border: 2px solid #f7b3b3;
}
.better-bg-info {
  background-color: #e6faff;
  /* Soft aqua blue */
  border: 2px solid #b3ecf5;
  /* Muted cyan border */
}

.better-bg-primary {
  background-color: #e6f0ff;
  /* Soft light blue */
  border: 2px solid #b3d1ff;
  /* Muted light blue border */
}

.better-text-danger {
  color: #863838;
}

/* Base badge style */
.better-badge {
  display: inline-block;
  padding: 2px 5px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
}

/* Success badge */
.better-badge-success {
  background-color: #e6f9ec;
  color: #4a7352;
  border: 1px solid #b3f0c6;
}

/* Warning badge */
.better-badge-warning {
  background-color: #fff9e6;
  color: #7d6b3b;
  border: 1px solid #ffe8a1;
}

/* Danger badge */
.better-badge-danger {
  background-color: #fceaea;
  color: #863838;
  border: 1px solid #f7b3b3;
}
/* Primary badge */
.better-badge-primary {
  background-color: #e6f0ff;
  color: #3f5f99;
  border: 1px solid #b3d1ff;
}


.better-border-dark {
  border: 1px solid rgba(80, 82, 91, 0.2) !important;
  box-shadow: 0 1px 0 0 rgba(80, 82, 91, 0.2) !important;
}

.font-weight-less-bold {
  font-weight: 500 !important;
}


/* Primary */
.btn-better-primary {
  background-color: #e6f0ff;
  color: #3f5f99;
  border: 2px solid #b3d1ff;
}

/* Info */
.btn-better-info {
  background-color: #e6faff;
  color: #3a6770;
  border: 2px solid #b3ecf5;
}

/* Secondary */
.btn-better-secondary {
  background-color: #f1f3f5;
  color: #5c5f63;
  border: 2px solid #d3d6d9;
}

/* Base soft button */
.btn-better {
  font-weight: 500;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.9rem;
  border-width: 2px;
}

/* Success */
.btn-better-success {
  background-color: #e6f9ec;
  color: #4a7352;
  border: 2px solid #b3f0c6;
}

/* Success */
.btn-better-success:hover {
  background-color: #d1f2e0;
}

/* Warning */
.btn-better-warning:hover {
  background-color: #fff3c6;
}

/* Danger */
.btn-better-danger:hover {
  background-color: #f6caca;
}

/* Primary */
.btn-better-primary:hover {
  background-color: #d6e8ff;
}

/* Info */
.btn-better-info:hover {
  background-color: #d3f3f9;
}

/* Secondary */
.btn-better-secondary:hover {
  background-color: #e3e5e8;
}


.notification-bg-primary {
  background: linear-gradient(135deg, #667eea 0%, #0077FF 100%);
}

.notification-bg-primary-icon {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}


/* effects */
/* Main card entrance animation */
@keyframes slideInBounce {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }

  60% {
    opacity: 1;
    transform: translateX(-10px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Floating particles */
@keyframes particleFloat {

  0%,
  100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.3;
  }

  33% {
    transform: translateY(-10px) translateX(5px);
    opacity: 0.7;
  }

  66% {
    transform: translateY(5px) translateX(-8px);
    opacity: 0.5;
  }
}

/* Icon animations */
@keyframes iconPulse {

  0%,
  100% {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1);
  }

  50% {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.03);
  }
}

@keyframes iconBounce {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes sparkle {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.sw.sw-justified>.nav .nav-link, .sw.sw-justified>.nav>li {
  min-width: 200px;
  margin-bottom: 10px;
}
.sw-theme-dots>.nav .nav-link::after {
  background-color: var(--sw-anchor-done-primary-color);
}
.sw-theme-dots>.nav .nav-link>.num {
  color: var(--sw-anchor-done-secondary-color)!important;
}
.sw-theme-dots>.nav .nav-link {
  color: var(--sw-anchor-done-primary-color);
}

/* ==========================================================================
   Nice Filter Item - Reusable class for consistent filter styling
   Apply .nice-filter-item to any filter element for consistent styling
   ========================================================================== */

/* Base styles for nice-filter-item */
.nice-filter-item {
  height: 38px !important;
  border: none !important;
  border-radius: 0.5rem !important;
  min-height: 38px !important;
  background-color: #fff !important;
  font-size: 14px;
  box-sizing: border-box;
}

/* Form control inputs */
.nice-filter-item.form-control,
input.nice-filter-item {
  padding: 6px 12px;
  line-height: 1.5;
}

/* Nice-select dropdowns */
.nice-filter-item.nice-select {
  line-height: 36px;
  padding: 0 30px 0 12px;
  display: flex;
  align-items: center;
}

.nice-filter-item.nice-select .current {
  line-height: 36px;
}

/* Custom multiselect dropdown trigger (Groups select) */
.nice-filter-item.multiselect,
.nice-filter-item.dropdown-toggle-custom,
.multiselect.dropdown-toggle-custom.nice-filter-item {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  padding: 0 12px;
  cursor: pointer;
  position: relative;
}

/* Multi-select plugin (ms-parent) - API Select */
.nice-filter-item.ms-parent,
.ms-parent.nice-filter-item {
  width: 100% !important;
  display: inline-block;
  height: auto !important;
  min-height: auto !important;
  border: none !important;
  background: transparent !important;
}

.nice-filter-item.ms-parent > .ms-choice,
.ms-parent.nice-filter-item > .ms-choice {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px;
  border-radius: 8px !important;
  border: 1px solid #d1d3e2 !important;
  background-color: #fff !important;
  display: flex;
  align-items: center;
}

.nice-filter-item.ms-parent > .ms-choice > span,
.ms-parent.nice-filter-item > .ms-choice > span {
  line-height: 38px;
  padding-right: 20px;
}

.nice-filter-item.ms-parent > .ms-choice > div.icon-caret,
.ms-parent.nice-filter-item > .ms-choice > div.icon-caret {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  right: 12px;
}

/* Dropdown options list styling (for custom multiselect) */
.dropdown-options {
  position: absolute;
  background: #fff;
  border: 1px solid #d1d3e2;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 8px 0;
  min-width: 100%;
}

.dropdown-options li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dropdown-options li:hover {
  background-color: #f8f9fc;
}

.dropdown-options li.checked-background {
  background-color: #e8f4fd;
}

/* Hover states */
.nice-filter-item:hover {
  border-color: #bac8f3 !important;
}

.nice-filter-item.ms-parent > .ms-choice:hover,
.ms-parent.nice-filter-item > .ms-choice:hover {
  border-color: #bac8f3 !important;
}

/* Focus states */
.nice-filter-item:focus {
  border-color: #bac8f3 !important;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.15);
}

.nice-filter-item.ms-parent > .ms-choice:focus,
.ms-parent.nice-filter-item > .ms-choice:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.15);
}

/* Multi-select dropdown (ms-drop) styling */
.nice-filter-item.ms-parent > .ms-drop,
.ms-parent.nice-filter-item > .ms-drop {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  padding: 8px 0;
  overflow: hidden;
}

/* Optgroup styling */
.nice-filter-item.ms-parent .ms-optgroup,
.ms-parent.nice-filter-item .ms-optgroup {
  padding: 0;
}

.nice-filter-item.ms-parent .ms-optgroup-label,
.ms-parent.nice-filter-item .ms-optgroup-label {
  font-weight: 600;
  font-size: 13px;
  color: #5a5c69;
  padding: 8px 12px;
  background-color: #f8f9fc;
  margin-bottom: 4px;
}

/* Option items in dropdown */
.nice-filter-item.ms-parent .ms-drop ul > li,
.ms-parent.nice-filter-item .ms-drop ul > li {
  padding: 6px 12px;
  transition: background-color 0.15s ease;
}

.nice-filter-item.ms-parent .ms-drop ul > li:hover,
.ms-parent.nice-filter-item .ms-drop ul > li:hover {
  background-color: #f8f9fc;
}

.nice-filter-item.ms-parent .ms-drop ul > li.selected,
.ms-parent.nice-filter-item .ms-drop ul > li.selected {
  background-color: #e8f4fd;
}

/* Checkbox styling in dropdown */
.nice-filter-item.ms-parent .ms-drop ul > li label,
.ms-parent.nice-filter-item .ms-drop ul > li label {
  font-size: 14px;
  color: #5a5c69;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.nice-filter-item.ms-parent .ms-drop input[type="checkbox"],
.ms-parent.nice-filter-item .ms-drop input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* Select all / search box area */
.nice-filter-item.ms-parent .ms-select-all,
.ms-parent.nice-filter-item .ms-select-all {
  padding: 8px 12px;
  border-bottom: 1px solid #e3e6f0;
  margin-bottom: 4px;
}

.nice-filter-item.ms-parent .ms-search,
.ms-parent.nice-filter-item .ms-search {
  padding: 8px 12px;
}

.nice-filter-item.ms-parent .ms-search input,
.ms-parent.nice-filter-item .ms-search input {
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  width: 100%;
}

/* Hide default chevrons on multiselect buttons */
button.multiselect.nice-filter-item::after,
button.multiselect.nice-filter-item .caret,
button.multiselect.nice-filter-item .b-caret,
.nice-filter-item.multiselect::after,
.nice-filter-item.multiselect .caret,
.nice-filter-item.multiselect .b-caret {
  display: none !important;
  content: none !important;
}

/* kpiDisplayCards: even margin-bottom on all KPI cards */
#kpiDisplayCards > [class*="col"] {
  margin-bottom: 0.5rem;
}
@media (max-width: 575.98px) {
  #kpiDisplayCards {
    margin-bottom: 0.5rem !important;
  }
  #kpiDisplayCards > [class*="col"]:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}
@media (min-width: 576px) {
  #kpiDisplayCards > [class*="col"] {
    margin-bottom: 0.75rem;
  }
}
@media (min-width: 992px) {
  #kpiDisplayCards {
    margin-bottom: 1.5rem !important;
  }
  #kpiDisplayCards > [class*="col"] {
    margin-bottom: 0;
  }
}

/* lineChartCard (ad-metrics): fix glitchy overlapping text on iPhone */
@media (max-width: 575.98px) {
  #lineChartCard {
    height: auto !important;
    min-height: 450px;
    overflow: hidden;
  }
  #lineChartCard .card-body {
    padding: 12px 10px !important;
    overflow: hidden;
  }
  #lineChartCard .card-body > div:first-child {
    min-height: 90px;
  }
  /* KPI section: 2-row grid instead of 8 cramped columns */
  #kpiDisplaysLineChart {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 4px;
    width: 100% !important;
    margin-bottom: 12px !important;
    min-height: 70px;
  }
  #kpiDisplaysLineChart > div {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
  }
  #kpiDisplaysLineChart > div > div {
    min-width: 0;
  }
  #kpiDisplaysLineChart p {
    font-size: 9px !important;
    padding: 0 1px !important;
    margin-top: 4px !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #kpiDisplaysLineChart p[id] {
    font-size: 10px !important;
    font-weight: bold;
  }
  /* Slider section */
  #lineChartCard .custom-slider1,
  #lineChartCard .custom-slider2 {
    margin: 0 8px;
  }
  /* Chart legend: wrap and stack on iPhone */
  #lineChartCard .legendBox {
    flex-wrap: wrap;
    gap: 4px;
  }
  #lineChartCard .legendBox .item {
    min-width: 0;
  }
  #lineChartCard .legendBox p {
    font-size: 10px !important;
  }
  /* Date filters section */
  #lineChartCard .card-body > div:last-child {
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: flex-start;
    padding-top: 8px;
  }
  #lineChartCard .card-body > div:last-child > div {
    flex-shrink: 0;
  }
  #advertising-metrics-line-chart-from-date-select,
  #advertising-metrics-line-chart-until-date-select {
    max-width: 100px !important;
    font-size: 11px !important;
  }
}

/* advertisingStrategyMetrics & advertisingMetricsTable: title row + toggle row on iPhone */
@media (max-width: 575.98px) {
  #advertisingStrategyMetrics .card-body,
  #advertisingMetricsTable .card-body {
    display: grid !important;
    grid-template-rows: auto auto 1fr;
    gap: 8px 0;
    padding: 12px 16px !important;
  }
  #strategyTooltipDiv,
  #tooltipDiv {
    position: static !important;
    grid-row: 2;
    justify-self: end;
    margin: 0;
  }
  #advertisingStrategyMetrics .card-body > p.card-title-left,
  #advertisingMetricsTable .card-body > p.card-title-left {
    grid-row: 1;
    margin: 0 0 4px 0 !important;
    padding-right: 0 !important;
    font-size: 13px !important;
    line-height: 1.3;
  }
  #advertisingStrategyMetrics .card-body > #strategy-products-table,
  #advertisingMetricsTable .card-body > #Products-table {
    grid-row: 3;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }
  /* advertisingStrategyMetrics: contain table & search - prevent overflow on iPhone */
  #advertisingStrategyMetrics #strategy-products-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #advertisingStrategyMetrics #advertising-strategy-metrics-data-table_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
  }
  #advertisingStrategyMetrics #advertising-strategy-metrics-data-table_wrapper .dataTables_scroll,
  #advertisingStrategyMetrics #advertising-strategy-metrics-data-table_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #advertisingStrategyMetrics .dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #advertisingStrategyMetrics .dataTables_filter,
  #advertisingStrategyMetrics .dataTables_length {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  #advertisingStrategyMetrics .dataTables_filter input {
    max-width: 120px;
    font-size: 11px !important;
  }
  /* Subtitle (recommendations tab has title + subtitle, no toggle) */
  #advertisingMetricsTable .card-body > p.card-sub-title-left {
    grid-row: 2;
    margin: 0 0 8px 0 !important;
    font-size: 12px !important;
  }
}

/* P&L period-selector — only the value may grow/truncate (not label/divider/icon) */
button#main-page-date-range.period-selector {
  display: inline-flex !important;
  align-items: center;
  overflow: hidden;
  min-width: 0;
}

button#main-page-date-range.period-selector .period-selector-label,
button#main-page-date-range.period-selector .period-selector-divider,
button#main-page-date-range.period-selector .period-selector-icon {
  flex-shrink: 0;
}

button#main-page-date-range.period-selector .period-selector-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* ========================================
   Apple-style Input Item
   Apply .nice-input-item to any input element for consistent styling
   ========================================================================== */

/* Base styles for nice-input-item */
.nice-input-item {
  height: 38px !important;
  border: 1px solid #d1d3e2 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  background-color: #fff !important;
  font-size: 14px;
  box-sizing: border-box;
  padding: 6px 12px;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Form control inputs */
.nice-input-item.form-control,
input.nice-input-item,
textarea.nice-input-item {
  padding: 6px 12px;
  line-height: 1.5;
}

/* Textarea specific styling */
textarea.nice-input-item {
  min-height: 38px;
  height: auto;
  resize: vertical;
}

/* Hover states */
.nice-input-item:hover {
  border-color: #bac8f3 !important;
}

/* Focus states */
.nice-input-item:focus {
  border-color: #bac8f3 !important;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.15);
}

/* Disabled state */
.nice-input-item:disabled,
.nice-input-item[readonly] {
  background-color: #f8f9fc !important;
  border-color: #e3e6f0 !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Placeholder styling */
.nice-input-item::placeholder {
  color: #858796;
  opacity: 0.7;
}

html[data-bs-theme="dark"] .nice-input-item,
html[data-bs-theme="dark"] input.nice-input-item,
html[data-bs-theme="dark"] textarea.nice-input-item,
html[data-bs-theme="dark"] select.nice-input-item,
body[data-theme="dark"] .nice-input-item,
body[data-theme="dark"] input.nice-input-item,
body[data-theme="dark"] textarea.nice-input-item,
body[data-theme="dark"] select.nice-input-item,
[data-bs-theme="dark"] .nice-input-item,
[data-bs-theme="dark"] input.nice-input-item,
[data-bs-theme="dark"] textarea.nice-input-item,
[data-bs-theme="dark"] select.nice-input-item {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .nice-input-item:hover,
body[data-theme="dark"] .nice-input-item:hover,
[data-bs-theme="dark"] .nice-input-item:hover {
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .nice-input-item:focus,
body[data-theme="dark"] .nice-input-item:focus,
[data-bs-theme="dark"] .nice-input-item:focus {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
  color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .nice-input-item:disabled,
html[data-bs-theme="dark"] .nice-input-item[readonly],
body[data-theme="dark"] .nice-input-item:disabled,
body[data-theme="dark"] .nice-input-item[readonly],
[data-bs-theme="dark"] .nice-input-item:disabled,
[data-bs-theme="dark"] .nice-input-item[readonly] {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-secondary-color) !important;
  opacity: 1;
}

html[data-bs-theme="dark"] .nice-input-item::placeholder,
body[data-theme="dark"] .nice-input-item::placeholder,
[data-bs-theme="dark"] .nice-input-item::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: 1;
}

/* ==========================================================================
   Badge Color Auto-Matching - Automatically sets text color based on background
   Handles badges with inline background-color styles
   ========================================================================== */

/* Badge with green background (#1cc875) - shipment */
.badge[style*="background-color: #1cc875"],
.badge[style*="background-color:#1cc875"],
.badge[style*="background-color:#1cc875"],
.badge[style*="background-color: #1cc875"] {
  color: #ffffff !important;
  border: 1px solid #1cc875 !important;
}

/* Badge with blue background (#0077ff) - order */
.badge[style*="background-color: #0077ff"],
.badge[style*="background-color:#0077ff"],
.badge[style*="background-color:#0077ff"],
.badge[style*="background-color: #0077ff"] {
  color: #ffffff !important;
  border: 1px solid #0077ff !important;
}

/* Badge with red background (#e74a3b) - default/danger */
.badge[style*="background-color: #e74a3b"],
.badge[style*="background-color:#e74a3b"],
.badge[style*="background-color:#e74a3b"],
.badge[style*="background-color: #e74a3b"] {
  color: #ffffff !important;
  border: 1px solid #e74a3b !important;
}

/* Fallback: Ensure all badges with inline background-color have white text and border */
.badge[style*="background-color"] {
  color: #ffffff !important;
  border: 1px solid currentColor !important;
}

/* ========================================
   Apple-style Date Range Picker (Compact)
   ======================================== */

.daterangepicker {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  background-color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);

  padding: 0;
  font-size: 12px;
  line-height: 1.4;
}

.daterangepicker:before,
.daterangepicker:after {
  display: none;
}

/* Calendar container */
.daterangepicker .drp-calendar {
  max-width: 230px;
  padding: 10px;
}

.daterangepicker .drp-calendar.left {
  padding: 10px 4px 10px 10px;
}

.daterangepicker .drp-calendar.right {
  padding: 10px 10px 10px 4px;
}

/* Calendar table */
.daterangepicker .calendar-table {
  border: none;
  border-radius: 6px;
  background-color: #fff;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  min-width: 28px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 11px;
  font-weight: 400;
  border-radius: 50%;
  border: none;
  transition: all 0.15s ease;
}

/* Month header */
.daterangepicker .calendar-table th.month {
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
  padding-bottom: 4px;
}

/* Day of week headers */
.daterangepicker .calendar-table thead tr:nth-child(2) th {
  font-size: 9px;
  font-weight: 500;
  color: #86868b;
  text-transform: uppercase;
  padding-bottom: 2px;
}

/* Navigation arrows */
.daterangepicker .calendar-table .prev,
.daterangepicker .calendar-table .next {
  color: #007aff;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.daterangepicker .calendar-table .prev:hover,
.daterangepicker .calendar-table .next:hover {
  background-color: rgba(0, 122, 255, 0.1);
}

.daterangepicker .calendar-table .prev span,
.daterangepicker .calendar-table .next span {
  border-color: #007aff;
  border-width: 0 1.5px 1.5px 0;
  padding: 2px;
}

/* Available dates hover */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: rgba(0, 122, 255, 0.08);
  border-radius: 50%;
  color: #1d1d1f;
}

/* Off/disabled dates */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  color: #d1d1d6;
  background-color: transparent;
}

/* In-range dates */
.daterangepicker td.in-range {
  background-color: rgba(0, 122, 255, 0.12);
  color: #1d1d1f;
  border-radius: 0;
}

/* Start and end date styling */
.daterangepicker td.start-date {
  border-radius: 50% 0 0 50%;
}

.daterangepicker td.end-date {
  border-radius: 0 50% 50% 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 50%;
}

/* Active/selected dates */
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #007aff;
  color: #fff;
  font-weight: 500;
}

/* Disabled dates */
.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: #d1d1d6;
  text-decoration: none;
  opacity: 0.5;
}

/* Ranges sidebar */
.daterangepicker .ranges {
  padding: 4px 0;
  border-right: 1px solid #e5e5ea;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

.daterangepicker .ranges::-webkit-scrollbar {
  width: 5px;
}

.daterangepicker .ranges::-webkit-scrollbar-track {
  background: transparent;
}

.daterangepicker .ranges::-webkit-scrollbar-thumb {
  background: #c1c1c6;
  border-radius: 3px;
}

.daterangepicker .ranges::-webkit-scrollbar-thumb:hover {
  background: #a1a1a6;
}

.daterangepicker .ranges ul {
  width: 130px;
}

.daterangepicker .ranges li {
  font-size: 11px;
  font-weight: 400;
  padding: 6px 10px;
  color: #1d1d1f;
  border-radius: 0;
  margin: 0 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.daterangepicker .ranges li:hover {
  background-color: rgba(0, 122, 255, 0.08);
  color: #007aff;
}

.daterangepicker .ranges li.active {
  background-color: #007aff;
  color: #fff;
  font-weight: 500;
}

/* Buttons footer */
.daterangepicker .drp-buttons {
  border-top: 1px solid #e5e5ea;
  padding: 8px 10px;
  background-color: #fafafa;
  border-radius: 0 0 10px 10px;
}

.daterangepicker .drp-selected {
  font-size: 11px;
  color: #86868b;
}

.daterangepicker .drp-buttons .btn {
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  transition: all 0.15s ease;
}

.daterangepicker .drp-buttons .btn.cancelBtn {
  background-color: #e5e5ea;
  color: #1d1d1f;
}

.daterangepicker .drp-buttons .btn.cancelBtn:hover {
  background-color: #d1d1d6;
}

.daterangepicker .drp-buttons .btn.applyBtn {
  background-color: #007aff;
  color: #fff;
}

.daterangepicker .drp-buttons .btn.applyBtn:hover {
  background-color: #0056b3;
}

/* Month/Year selects */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 4px;
  border: 1px solid #e5e5ea;
  border-radius: 4px;
  background-color: #fff;
  color: #1d1d1f;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.daterangepicker select.monthselect:hover,
.daterangepicker select.yearselect:hover {
  border-color: #007aff;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}

/* Show calendar with ranges - border adjustment */
.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: none;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Responsive adjustments */
@media (min-width: 564px) {
  .daterangepicker .ranges ul {
    width: 130px;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    border-right: 1px solid #e5e5ea;
  }
}

/* ========================================
   Apple-style jQuery UI Datepicker
   ======================================== */

.ui-datepicker {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  background-color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 12px;
  width: auto;
  font-size: 13px;
  line-height: 1.4;
}

/* Header with month/year and navigation */
.ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 4px 32px 12px 32px;
  border-radius: 0;
}

.ui-datepicker-title {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.2px;
}

.ui-datepicker-title select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border: 1px solid #e5e5ea;
  border-radius: 6px;
  background-color: #fff;
  color: #1d1d1f;
  cursor: pointer;
  margin: 0 2px;
  transition: border-color 0.15s ease;
}

.ui-datepicker-title select:hover {
  border-color: #007aff;
}

.ui-datepicker-title select:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* Navigation arrows */
.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  top: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent !important;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-datepicker-prev {
  left: 4px;
}

.ui-datepicker-next {
  right: 4px;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: block !important;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  background-image: none !important;
  background: transparent !important;
  text-indent: 0 !important;
  overflow: visible !important;
  font-size: 0;
  line-height: 1;
}

.ui-datepicker-prev span::before {
  content: "\2190" !important;
  font-size: 20px !important;
  color: #007aff !important;
  font-weight: 600;
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  width: auto;
  height: auto;
}

.ui-datepicker-next span::before {
  content: "\2192" !important;
  font-size: 20px !important;
  color: #007aff !important;
  font-weight: 600;
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  width: auto;
  height: auto;
}

.ui-datepicker-prev-hover,
.ui-datepicker-next-hover,
.ui-datepicker-prev.ui-state-hover,
.ui-datepicker-next.ui-state-hover {
  background: transparent !important;
  border: none;
}

/* Calendar table */
.ui-datepicker table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
}

/* Day of week headers */
.ui-datepicker th {
  font-size: 10px;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  padding: 6px 0;
  letter-spacing: 0.3px;
  border: none;
  background: transparent;
}

/* Day cells */
.ui-datepicker td {
  padding: 0;
  border: none;
  background: transparent;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  font-weight: 400;
  color: #1d1d1f;
  border-radius: 50%;
  border: none;
  background: transparent;
  text-align: center;
  transition: all 0.15s ease;
}

.ui-datepicker td a:hover {
  background: rgba(0, 122, 255, 0.08);
  color: #1d1d1f;
}

/* Today highlight */
.ui-datepicker td.ui-datepicker-today a {
  background: transparent;
  color: #007aff;
  font-weight: 600;
}

.ui-datepicker td.ui-datepicker-today a:hover {
  background: rgba(0, 122, 255, 0.08);
}

/* Selected/Active date */
.ui-datepicker td .ui-state-active,
.ui-datepicker td a.ui-state-active {
  background: #007aff;
  color: #fff;
  font-weight: 500;
}

.ui-datepicker td .ui-state-active:hover {
  background: #0056b3;
  color: #fff;
}

/* Highlight state */
.ui-datepicker td .ui-state-highlight {
  background: transparent;
  color: #007aff;
  font-weight: 600;
}

/* Disabled dates */
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td .ui-state-disabled {
  color: #d1d1d6;
  opacity: 0.5;
}

/* Other month dates */
.ui-datepicker td.ui-datepicker-other-month .ui-state-default {
  color: #c7c7cc;
}

/* Week column */
.ui-datepicker td.ui-datepicker-week-col {
  font-size: 10px;
  color: #86868b;
  font-weight: 500;
}

/* Button pane */
.ui-datepicker .ui-datepicker-buttonpane {
  border-top: 1px solid #e5e5ea;
  margin-top: 8px;
  padding-top: 10px;
  background: transparent;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #007aff;
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin: 0 4px;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: rgba(0, 122, 255, 0.1);
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  color: #007aff;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
  color: #fff;
  background: #007aff;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover {
  background: #0056b3;
}

/* Multiple months */
.ui-datepicker-multi .ui-datepicker-group {
  padding: 0 8px;
}

.ui-datepicker-multi .ui-datepicker-group-first {
  padding-left: 0;
}

.ui-datepicker-multi .ui-datepicker-group-last {
  padding-right: 0;
}

.ui-datepicker-multi .ui-datepicker-group-middle {
  border-left: 1px solid #e5e5ea;
  border-right: 1px solid #e5e5ea;
}

/* Inline datepicker */
.ui-datepicker-inline {
  box-shadow: none;
  border: 1px solid #e5e5ea;
}

/* ========================================
   Apple-style Toggle Switch
   ======================================== */

.toggle-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  height: fit-content;
  border-radius: 8px;
  background: #f0f0f0;
  color: #343434;
  cursor: pointer;
  padding: 3px;
}

.toggle-container::before {
  content: '';
  position: absolute;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  left: 3px;
  top: 3px;
  border-radius: 6px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.toggle-container div,
.toggle-container span,
.toggle-container label {
  padding: 6px 12px;
  text-align: center;
  z-index: 1;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.3s;
  cursor: pointer;
}

/* Hidden checkbox input */
input.toggle-checkbox {
  display: none;
}

/* When checked, move the slider to the right */
input.toggle-checkbox:checked + .toggle-container::before {
  left: calc(50%);
}

/* Text colors based on state */
input.toggle-checkbox:checked + .toggle-container div:first-child,
input.toggle-checkbox:checked + .toggle-container span:first-child,
input.toggle-checkbox:checked + .toggle-container label:first-of-type {
  color: #999;
}

input.toggle-checkbox:checked + .toggle-container div:last-child,
input.toggle-checkbox:checked + .toggle-container span:last-child,
input.toggle-checkbox:checked + .toggle-container label:last-of-type {
  color: #1a1a2e;
}

input.toggle-checkbox + .toggle-container div:first-child,
input.toggle-checkbox + .toggle-container span:first-child,
input.toggle-checkbox + .toggle-container label:first-of-type {
  color: #1a1a2e;
}

input.toggle-checkbox + .toggle-container div:last-child,
input.toggle-checkbox + .toggle-container span:last-child,
input.toggle-checkbox + .toggle-container label:last-of-type {
  color: #999;
}

/* 3-option toggle variant (checkbox) */
.toggle-container.toggle-3 {
  grid-template-columns: repeat(3, 1fr);
}

.toggle-container.toggle-3::before {
  width: calc(33.333% - 2px);
}

input.toggle-checkbox.toggle-state-2:checked + .toggle-container.toggle-3::before {
  left: calc(33.333% + 1px);
}

input.toggle-checkbox.toggle-state-3:checked + .toggle-container.toggle-3::before {
  left: calc(66.666%);
}

/* ========================================
   Radio-based Toggle (for 3+ options)
   ======================================== */

.toggle-radio-container {
  position: relative;
  display: grid;
  width: fit-content;
  height: fit-content;
  border-radius: 8px;
  background: #f0f0f0;
  color: #343434;
  padding: 3px;
  gap: 0;
}

.toggle-radio-container.toggle-3 {
  grid-template-columns: repeat(3, 1fr);
}

.toggle-radio-container.toggle-2 {
  grid-template-columns: repeat(2, 1fr);
}

.toggle-radio-container.toggle-4 {
  grid-template-columns: repeat(4, 1fr);
}

.toggle-radio-container input[type="radio"] {
  display: none;
}

.toggle-radio-container label {
  padding: 6px 12px;
  text-align: center;
  z-index: 1;
  font-size: 12px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  transition: color 0.3s;
  border-radius: 6px;
  margin: 0;
  white-space: nowrap;
}

.toggle-radio-container input[type="radio"]:checked + label {
  color: #1a1a2e;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Small variant */
.toggle-radio-container.toggle-sm label {
  padding: 4px 10px;
  font-size: 11px;
}

/* Large variant */
.toggle-radio-container.toggle-lg label {
  padding: 8px 16px;
  font-size: 14px;
}

/* Small variant */
.toggle-container.toggle-sm div,
.toggle-container.toggle-sm span,
.toggle-container.toggle-sm label {
  padding: 4px 10px;
  font-size: 11px;
}

/* Large variant */
.toggle-container.toggle-lg div,
.toggle-container.toggle-lg span,
.toggle-container.toggle-lg label {
  padding: 8px 16px;
  font-size: 14px;
}

/* ========================================
   Apple-style Select Dropdown
   ======================================== */

.select-apple {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

.select-apple:hover {
  background-color: #ebebed;
}

.select-apple:focus {
  outline: none;
  border-color: #007aff;
  background-color: #fff;
}

/* Small variant */
.select-apple.select-sm {
  padding: 6px 28px 6px 10px;
  font-size: 11px;
  border-radius: 6px;
  background-position: right 8px center;
}

/* Large variant */
.select-apple.select-lg {
  padding: 10px 36px 10px 14px;
  font-size: 14px;
  border-radius: 10px;
  background-position: right 12px center;
}

/* White background variant */
.select-apple.select-white {
  background-color: #fff;
  border-color: #e5e5ea;
}

.select-apple.select-white:hover {
  border-color: #d1d1d6;
}

/* When combined with nice-select, hide the custom chevron */
.select-apple.nice-select {
  background-image: none;
  padding-right: 30px;
}

/* Override nice-select styles when select-apple is applied */
.select-apple.nice-select {
  background-color: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  height: auto;
  line-height: 1.4;
  padding: 8px 30px 8px 12px;
}

.select-apple.nice-select:hover {
  background-color: #ebebed;
  border-color: transparent;
}

.select-apple.nice-select:focus,
.select-apple.nice-select.open {
  border-color: #007aff;
  background-color: #fff;
}

.select-apple.nice-select::after {
  border-color: #666;
  border-width: 0 1.5px 1.5px 0;
  padding: 2px;
  right: 12px;
  margin-top: -4px;
}

.select-apple.nice-select .current {
  font-weight: 500;
}

/* White variant with nice-select */
.select-apple.select-white.nice-select {
  background-color: #fff;
  border-color: #e5e5ea;
}

.select-apple.select-white.nice-select:hover {
  border-color: #d1d1d6;
  background-color: #fff;
}

/* Small variant with nice-select */
.select-apple.select-sm.nice-select {
  padding: 6px 28px 6px 10px;
  font-size: 11px;
  border-radius: 6px;
}

.select-apple.select-sm.nice-select::after {
  right: 10px;
}

/* ========================================
   KPI Cards (Fixed Height)
   ======================================== */

.kpi-cards-row {
  display: flex;
  flex-wrap: wrap;
}

.kpi-cards-row > [class*="col-"] {
  display: flex;
}

.kpi-card {
  width: 100%;
  min-height: 120px;
}

.kpi-card .card-body > .row {
  flex-wrap: nowrap;
}

.kpi-card .card-body > .row > .col {
  min-width: 0;
  overflow: hidden;
}

.kpi-card .card-body > .row > .col-auto {
  flex-shrink: 0;
}

.kpi-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #858796;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5rem;
}

/* On smaller screens, allow wrapping but limit to 2 lines */
@media (max-width: 576px) {
  .kpi-card-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-height: 2.6em;
  }
  
  .chart-area-responsive {
    height: 250px !important;
  }
}

/* Campaign modal chart — fixed height; 100% + flex-grow caused Chart.js to grow without bound */
#campaign-dialog .chart-area {
  height: 343px !important;
  max-height: 343px;
  min-height: 343px;
  flex-grow: 0 !important;
}

#campaign-dialog .chart-area canvas {
  max-height: 343px !important;
}

@media (min-width: 577px) {
  .chart-area-responsive {
    height: 380px;
  }
}

/* ========================================
   Apple-style Toggle Slider
   ======================================== */

.slider-apple {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.slider-apple input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-apple .slider-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e5ea;
  border-radius: 24px;
  transition: background-color 0.3s ease;
}

.slider-apple .slider-track::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.slider-apple input:checked + .slider-track {
  background-color: #34c759;
}

.slider-apple input:checked + .slider-track::before {
  transform: translateX(20px);
}

.slider-apple input:focus + .slider-track {
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
}

.slider-apple input:disabled + .slider-track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Small variant */
.slider-apple.slider-sm {
  width: 36px;
  height: 20px;
}

.slider-apple.slider-sm .slider-track::before {
  height: 16px;
  width: 16px;
}

.slider-apple.slider-sm input:checked + .slider-track::before {
  transform: translateX(16px);
}

/* Blue variant */
.slider-apple.slider-blue input:checked + .slider-track {
  background-color: #007aff;
}

.slider-apple.slider-blue input:focus + .slider-track {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

/* With label */
.slider-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

.slider-label .slider-text {
  user-select: none;
}

/* Cost Rules Page Responsive Styles */
/* Actions dropdown styling */
.dropdown-item:not(.disabled):not(:disabled) {
  cursor: pointer;
}

.dropdown-item .switch {
  margin-left: auto;
}

.dropdown-item.d-flex {
  white-space: normal;
  padding: 0.75rem 1rem;
}

.dropdown-item.d-flex span {
  flex: 1;
  padding-right: 1rem;
}

@media (max-width: 767.98px) {
  /* Grid responsive adjustments */
  .ag-theme-quartz {
    font-size: 12px;
  }
}

/* ── iPhone AG Grid: compact headers, smaller font, narrower sidebar ────────
   Footer (.ag-paging-panel / .ag-status-bar) deliberately untouched.
   Uses AG Grid v34 CSS variables — no direct height overrides on header.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* CSS variables only — let AG Grid manage its own layout */
  .ag-theme-quartz {
    --ag-font-size: 11px;
    --ag-header-height: 36px;
    --ag-row-height: 40px;
    --ag-cell-horizontal-padding: 6px;
    font-size: 11px;
  }

  /* Header cells — smaller padding and font, no height override */
  .ag-theme-quartz .ag-header-cell,
  .ag-theme-quartz .ag-header-group-cell {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 11px !important;
    font-weight: 600;
  }

  .ag-theme-quartz .ag-header-cell-text {
    font-size: 11px !important;
  }

  /* Data cells */
  .ag-theme-quartz .ag-cell {
    font-size: 11px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Sidebar button strip — keep tappable (min 36px), just trim label */
  .ag-theme-quartz .ag-side-buttons {
    width: 28px !important;
    min-width: 28px !important;
  }

  .ag-theme-quartz .ag-side-button-button {
    min-height: 44px !important;
    width: 28px !important;
    padding: 6px 0 !important;
  }

  .ag-theme-quartz .ag-side-button-label {
    font-size: 9px !important;
  }

  /* Open sidebar panel */
  .ag-theme-quartz .ag-tool-panel-wrapper {
    width: 160px !important;
    min-width: 160px !important;
  }
}


@media (min-width: 768px) and (max-width: 991.98px) {
  /* Tablet adjustments */
  .help-overlay-content {
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    min-height: 450px;
  }

  .help-overlay-body {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }

  .help-overlay-iframe-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .help-overlay-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 992px) {
  /* Desktop help overlay */
  .help-overlay-content {
    width: 800px;
    height: 500px;
  }

  .help-overlay-body {
    position: relative;
    height: calc(500px - 57px); /* Subtract header height */
  }

  .help-overlay-iframe-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .help-overlay-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/* Groups Select — full width on iPad portrait (touch device, portrait, tablet-range width) */
@media screen and (pointer: coarse) and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .groups-select-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── iPhone tabs: iOS segmented control, unified card with grid ────────────── */
@media (max-width: 575.98px) {

  /* Top half of the card — holds the segmented control */
  .tab-header-row {
    background: #fff !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 16px 10px !important;
    margin: 0 !important;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.04), 2px 0 8px rgba(0,0,0,0.06), -2px 0 8px rgba(0,0,0,0.06) !important;
  }

  /* Bottom half of the card — holds the grid/content */
  .nav-pill-row {
    top: 0 !important;
    background: #fff !important;
    border-radius: 0 0 14px 14px !important;
    padding: 12px 16px 16px !important;
    margin: 0 !important;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.08), -2px 4px 12px rgba(0,0,0,0.06) !important;
  }

  /* Thin divider between tabs and content */
  .nav-pill-row::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(0, 0, 0, 0.07);
    margin: 0 0 12px;
  }

  /* Tab toolbar: stack buttons row + search bar vertically */
  .tab-pane .d-flex.justify-content-between {
    flex-direction: column !important;
    gap: 8px;
    margin-bottom: 10px;
  }

  /* Buttons stay side-by-side on their own row */
  .tab-pane .d-flex.justify-content-between > div:first-child {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Search bar stretches full width on its own row */
  .tab-pane .d-flex.justify-content-between .input-group {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Segmented control container */
  .nav-pills-manager {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    background: rgba(0, 0, 0, 0.07) !important;
    border-radius: 12px !important;
    gap: 0 !important;
  }

  .nav-pills-manager li {
    flex: 1 !important;
    width: auto !important;
    padding: 0 !important;
  }

  .nav-pills-manager li:first-child,
  .nav-pills-manager li:last-child {
    padding: 0 !important;
  }

  .nav-pills-manager li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #555 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-pills-manager li a.active {
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    font-weight: 600 !important;
  }
}

/* Orders: hide header filters/actions in selection mode on mobile & tablet */
@media (max-width: 1199px) {
    #orders-page .orders-page-header.has-selection .fivex-filters-panel,
    #order-lines-page .order-lines-page-header.has-selection .fivex-filters-panel {
        display: none !important;
    }
}

/* Orders search bar: full width on phone, natural width on tablet+ */
@media (max-width: 767.98px) {
    #ordersSearchContainer {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Override Bootstrap input-group width:100% so search bar stays on the same flex row on tablet+ */
@media (min-width: 768px) {
    #ordersSearchContainer {
        width: auto !important;
    }
}

/* Collapsible filters box - shared across grid pages */
.filters-collapse-box .filters-box-content .btn-group,
.filters-collapse-box .filters-box-content .multiselect {
    width: 100% !important;
    min-width: 100% !important;
}
.filters-collapse-box .filters-box-content .dropdown-menu {
    z-index: 1001;
}

/* ── product-inventory-dialog: desktop base styles ─────────────────────────── */
#product-inventory-dialog .product-inventory-dialog-modal {
    max-width: 1400px;
    width: 80%;
}
#product-inventory-dialog .product-inventory-dialog-img {
    max-height: 50px;
    width: 50px;
    margin: 0 25px;
}
#product-inventory-dialog .product-inventory-dialog-actions {
    position: absolute;
    display: inline-block;
    right: 42px;
    text-align: right;
}
#product-inventory-dialog .inventory-dropdown {
    width: 350px;
}

/* ── product-inventory-dialog: iPhone styling ───────────────────────────────── */
@media (max-width: 575.98px) {
    /* Sheet-style: anchor to bottom when modal is shown */
    #product-inventory-dialog.show {
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
    }
    #product-inventory-dialog .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
    }
    #product-inventory-dialog .product-inventory-dialog-modal {
        margin: 0;
        max-width: 100%;
        width: 100%;
        max-height: inherit;
    }
    #product-inventory-dialog .modal-content {
        border-radius: 14px 14px 0 0;
        max-height: 92vh;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        background: #f2f2f7;
        border: none;
        position: relative;
    }
    #product-inventory-dialog .modal-header {
        flex-wrap: wrap;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f2f2f7;
        border-radius: 14px 14px 0 0;
        padding: 16px 16px 12px;
        border-bottom: none;
        flex-shrink: 0;
    }
    #product-inventory-dialog .modal-header .close {
        order: 3;
        margin-left: auto;
        padding: 6px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.25rem;
        font-weight: 300;
        color: #007aff;
        opacity: 1;
        text-shadow: none;
    }
    #product-inventory-dialog .product-inventory-dialog-img {
        order: 1;
        max-height: 40px;
        width: 40px;
        margin: 0 10px 0 0;
        border-radius: 8px;
    }
    #product-inventory-dialog .modal-title {
        order: 2;
        font-size: 1rem;
        font-weight: 600;
        padding-right: 8px;
    }
    /* Header actions: compact icon buttons */
    #product-inventory-dialog .product-inventory-dialog-actions {
        position: static;
        width: 100%;
        order: 4;
        margin-top: 10px;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: flex-start;
    }
    #product-inventory-dialog .product-inventory-dialog-actions .btn,
    #product-inventory-dialog .product-inventory-dialog-actions .dropdown {
        margin: 0 !important;
        flex: 0 0 auto;
    }
    #product-inventory-dialog .product-inventory-dialog-actions .btn {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.8125rem;
        border-radius: 8px;
    }
    #product-inventory-dialog .product-inventory-dialog-actions .btn-light {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.12);
    }
    #product-inventory-dialog .product-inventory-dialog-actions .btn .mr-2 {
        margin-right: 0.25rem !important;
    }
    #product-inventory-dialog .product-inventory-dialog-actions .btn i {
        font-size: 0.875rem;
    }
    #product-inventory-dialog .inventory-dropdown {
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
    #product-inventory-dialog .modal-body {
        padding: 20px 16px 0 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #f2f2f7;
    }
    #product-inventory-dialog .modal-body .overflow-auto,
    #product-inventory-dialog .card.overflow-auto {
        -webkit-overflow-scrolling: touch;
    }
    #product-inventory-dialog .modal-body .card {
        margin-bottom: 12px;
        border-radius: 12px;
        border: none;
        box-shadow: none;
        background: #fff;
    }
    #product-inventory-dialog .modal-body .card-body {
        padding: 14px 16px;
        font-size: 0.9375rem;
    }
    #product-inventory-dialog .modal-body .card-body hr {
        border-color: rgba(0, 0, 0, 0.08);
    }
    #product-inventory-dialog .modal-body .progress {
        height: 6px;
        border-radius: 3px;
    }
    /* Log section: 2+1 grid - compact, not stacked */
    #product-inventory-dialog .col-12.col-md-8.text-left.text-md-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    #product-inventory-dialog #inventory-nieuwe-inkoop {
        grid-column: 1;
    }
    #product-inventory-dialog #inventory-voorraad-aanvullen {
        grid-column: 2;
    }
    #product-inventory-dialog #inventory-nieuwe-verkoop {
        grid-column: 1 / -1;
    }
    #product-inventory-dialog #inventory-nieuwe-inkoop,
    #product-inventory-dialog #inventory-voorraad-aanvullen,
    #product-inventory-dialog #inventory-nieuwe-verkoop {
        min-height: 40px;
        margin: 0 !important;
        padding: 10px 12px;
        font-size: 0.875rem;
        border-radius: 8px;
    }
    #product-inventory-dialog .card h4 {
        font-size: 1.0625rem;
    }
    #product-inventory-dialog .card h6 {
        font-size: 0.9375rem;
    }
    #product-inventory-dialog #channels_table,
    #product-inventory-dialog #modal-inventory-actions-table {
        font-size: 0.8125rem;
    }
    #product-inventory-dialog .badge {
        font-size: 0.75rem;
        border-radius: 4px;
    }
}

/* ── Shared collapsible filter dropdown — used across pages (emails, automation, …) ── */
.page-filters-content {
    display: flex;
    flex: 1;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .page-filters-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 6px;
        width: calc(100vw - 2.5rem);
        z-index: 1050;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
        padding: 0.75rem;
    }
    .page-filters-content.page-filters-open {
        display: block;
    }
    .page-filters-chevron {
        transition: transform 0.2s;
    }
    /* Override any inline heights/widths so inputs fit within the dropdown */
    .page-filters-content .form-control {
        min-width: 0 !important;
    }
    .page-filters-content #mainCurrentStartDate,
    .page-filters-content #mainCurrentEndDate,
    .page-filters-content #eanSearchInput {
        height: 44px !important;
    }
}

/* ── Account Profile: iPhone / mobile tweaks ───────────────────────────────── */
@media (max-width: 575.98px) {
    /* Color picker bars (Profielvoorkeuren) — compact on phone, was way too big */
    input.theme_color_changer[type="color"],
    .theme_color_changer.form-control[type="color"] {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 6px 10px !important;
    }

    /* Profile page: tighter horizontal padding on phone */
    .container-fluid.px-5 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Profile page header: slightly smaller on phone */
    .page-header .main-title {
        font-size: 1.5rem;
    }
    .page-header .main-subtitle {
        font-size: 0.9rem;
    }

    /* Floating save bar: more compact on phone (bottom controlled by JS: -100px hidden, 20px shown) */
    .floating-save-bar {
        padding: 8px 12px !important;
        left: 0.75rem;
        right: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    .floating-save-bar span {
        font-size: 0.875rem;
    }
    .floating-save-bar .btn {
        padding: 6px 16px;
        font-size: 0.9rem;
    }
}

/* ── Subscription page: Apple-like responsive design ───────────────────────
   Scoped to classes used exclusively on subscription/index.php.
   Overrides the page's own <style> block where needed (higher specificity).
   ───────────────────────────────────────────────────────────────────────── */

/* --- Base / all sizes ---------------------------------------------------- */

/* Softer, more Apple-like card elevation */
.nav-underline + div .card,
#overview-content .card,
#facturatie-content .card,
#subs-content .card {
    border-radius: 16px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Feature cards: subtle lift on hover */
body .features-card:hover,
body .hover-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Nav: tighter desktop margin (was 2rem, too loose) */
body .nav-underline .nav-item {
    margin: 0 1.25rem !important;
}

/* Nav link: Apple-style letter spacing */
body .nav-underline .nav-link {
    letter-spacing: -0.01em;
    font-size: 0.9375rem;
}

/* Alert banners: more rounded */
.alert {
    border-radius: 12px !important;
}

/* Stat circles: ensure flex-shrink safety */
.card .rounded-circle.bg-light {
    flex-shrink: 0 !important;
}

/* Subs tab: trim the excessive Bootstrap my-5/mt-5/pb-5 spacing on all sizes */
#subs-content hr.my-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}
#subs-content .row.mt-5 {
    margin-top: 2rem !important;
}
#subs-content .row.pb-5 {
    padding-bottom: 2rem !important;
}

/* Buttons: pill-style touch targets */
#overview-content .btn,
#facturatie-content .btn,
#subs-content .btn {
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* --- iPad landscape + small desktop (768px – 991px) ---------------------- */
@media (max-width: 991.98px) {
    body .nav-underline .nav-item {
        margin: 0 0.75rem !important;
    }

    body .nav-underline .nav-link {
        font-size: 0.875rem;
        padding: 0.875rem 0.25rem;
    }
}

/* --- iPad portrait (576px – 767px) --------------------------------------- */
@media (max-width: 767.98px) {
    body .nav-underline .nav-item {
        margin: 0 0.5rem !important;
    }

    body .nav-underline .nav-link {
        font-size: 0.8125rem;
        padding: 0.75rem 0.125rem;
    }

    /* Facturatie: stack the two col-6 cards to full width */
    #facturatie-content .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Feature comparison table: allow horizontal scroll */
    #subs-content .table-responsive {
        border-radius: 12px;
        overflow: hidden;
    }

    /* Card body padding: slightly tighter on tablet */
    #overview-content .card-body,
    #facturatie-content .card-body {
        padding: 1.25rem;
    }

    /* Reduce excessive section spacing in subs tab on tablet/portrait */
    #subs-content hr.my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    #subs-content .row.mt-5 {
        margin-top: 2rem !important;
    }
    #subs-content .row.pb-5 {
        padding-bottom: 2rem !important;
    }
}

/* --- iPhone / small phones (< 576px) ------------------------------------ */
@media (max-width: 575.98px) {
    /* Nav: distribute tabs evenly across full width, no individual margin */
    body .nav-underline {
        display: flex !important;
        justify-content: space-around !important;
    }

    body .nav-underline .nav-item {
        margin: 0 !important;
        flex: 1;
        text-align: center;
    }

    body .nav-underline .nav-link {
        font-size: 0.75rem;
        padding: 0.625rem 0.125rem;
        white-space: nowrap;
    }

    /* Hide nav icons on phone — text-only tabs */
    body .nav-underline .nav-link .fas {
        display: none !important;
    }

    /* Facturatie: stack col-6 to full width on phone too */
    #facturatie-content .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Stat circles: scale down from 80px to 56px */
    .card .rounded-circle.bg-light {
        width: 56px !important;
        height: 56px !important;
        font-size: 0.875rem;
    }

    /* Card body: compact on phone */
    #overview-content .card-body,
    #facturatie-content .card-body {
        padding: 1rem;
    }

    /* Feature cards: compact padding */
    .features-card,
    .hover-card {
        padding: 0.75rem !important;
    }

    /* Yearly upgrade button: full width on phone */
    #yearly_subscription .btn {
        width: 100%;
    }

    /* Upgrade + settings button row: stack on phone */
    .card-body .d-flex.justify-content-between.align-items-start {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Payments table: prevent horizontal overflow */
    #facturatie-content .card.shadow {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #payments_table_dt th,
    #payments_table_dt td {
        font-size: 0.8125rem;
        padding: 0.5rem 0.5rem !important;
        white-space: nowrap;
    }

    /* Feature comparison table rows: tighter */
    #subs-content .table td,
    #subs-content .table th {
        font-size: 0.8125rem;
        padding: 0.625rem 0.5rem;
    }

    /* Essential/Business plan start buttons: full width */
    #subs-content .col-12.d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.75rem;
    }

    #subs-content .col-12.d-flex.justify-content-between .d-flex.align-items-center {
        justify-content: flex-start;
    }

    /* Compact section dividers and spacing on phone */
    #subs-content hr.my-5 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
    #subs-content .row.mt-5 {
        margin-top: 1.25rem !important;
    }
    #subs-content .row.pb-5 {
        padding-bottom: 1.25rem !important;
    }

    /* Feature cards in subs: single column on phone, tighter grid gap */
    #subs-content .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 0.5rem !important;
    }

    /* Overview tab: reduce heavy top margin on stat sections */
    #overview-content .mt-5 {
        margin-top: 1.5rem !important;
    }

    /* ── Payments table: iPhone-optimised ───────────────────────────────── */
    /* Card wrapper: remove extra left/right padding, tighter top */
    #facturatie-content .col-12 > .card.shadow {
        padding: 0.5rem 0 0 !important;
        border-radius: 16px !important;
        overflow: hidden;
    }

    /* DataTables wrapper: make entire table area horizontally scrollable */
    #payments_table_dt_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* DataTables control row (search + pagination length): stack vertically */
    #payments_table_dt_wrapper .dataTables_filter,
    #payments_table_dt_wrapper .dataTables_length {
        float: none !important;
        text-align: left !important;
        margin-bottom: 0.5rem;
        padding: 0 0.75rem;
    }

    /* DataTables bottom info + pagination: stack */
    #payments_table_dt_wrapper .dataTables_info,
    #payments_table_dt_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Pagination buttons: touch-friendly */
    #payments_table_dt_wrapper .paginate_button {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.8125rem !important;
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Table itself: compact, readable */
    #payments_table_dt {
        font-size: 0.8125rem;
        min-width: 480px; /* prevent columns from collapsing too narrow */
    }

    #payments_table_dt th,
    #payments_table_dt td {
        padding: 0.6rem 0.75rem !important;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Header: slightly bolder, muted */
    #payments_table_dt thead th {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #6c757d;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    /* Status badges / pills: keep them tidy */
    #payments_table_dt .badge {
        font-size: 0.7rem !important;
        padding: 0.3em 0.6em !important;
        border-radius: 20px !important;
    }

    /* Invoice download link: touch target */
    #payments_table_dt a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        font-size: 0.8125rem;
    }
}


/* cost_rules.php — costRulesGrid phone (≤450px) */
@media (max-width: 450px) {
    #costRulesGrid .ag-cell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    #costRulesGrid .ag-header-cell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    #costRulesGrid .ag-cell span.cursor-pointer,
    #costRulesGrid .ag-cell a.cursor-pointer {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
    }
}

/* bullet-textarea — report PDF wizard step 1 */
.bullet-textarea {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    line-height: 1.7;
    resize: vertical;
}
.bullet-textarea:focus {
    background-color: #fff;
    border-color: #aac4e0;
    box-shadow: 0 0 0 .2rem rgba(66,133,244,.12);
}

/* report PDF wizard — step 2 inputs */
.report-pdf-input {
    background-color: #f3f6fa;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #1a202c;
}
.report-pdf-input:focus {
    background-color: #fff;
    border-color: #aac4e0;
    box-shadow: 0 0 0 .2rem rgba(66,133,244,.12);
}

/* include in report card */
.report-pdf-include-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 4px;
}

/* checkbox card rows */
.report-pdf-check-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 8px;
    cursor: pointer;
    font-weight: normal;
    width: 100%;
    transition: border-color .15s, background .15s;
    background: #fff;
}
.report-pdf-check-card:hover {
    border-color: #aac4e0;
    background: #f8fbff;
}
.report-pdf-check-card input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #4285f4;
    flex-shrink: 0;
    cursor: pointer;
}
.report-pdf-check-card input[type="checkbox"]:checked + span {
    color: #1a202c;
}

/* email draft display fields */
.report-pdf-email-field {
    background-color: #f3f6fa;
    border: 1.5px solid #c8d6e5;
    border-radius: 10px;
    color: #1a202c;
}

/* sidebar-normal base list resets (detail styles in the block below) */
.sidebar-normal-nav li {
    list-style: none;
}

/* ============================================================
   AppStack sidebar-normal: FiveX polished sidebar styles
   ============================================================ */

/* Sidebar takes full height and scrolls */
.sidebar.sidebar-normal {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.sidebar-normal-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

/* Scrollbar styling */
.sidebar-normal-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-normal-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-normal-nav::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.12);
    border-radius: 4px;
}

/* Brand/logo area */
.sidebar-normal-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: calc(4.19375rem + 2px);
    padding: 0 .875rem;
    border-bottom: 0px solid #e2e8ee;
    text-decoration: none;
    color: var(--text-color, #212529);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}
.sidebar-normal-brand:hover { color: var(--text-color, #212529); text-decoration: none; }

.sidebar-normal-logo img {
    display: block;
}

/* Section headers */
.sidebar-header {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #adb5bd;
    padding: 1rem .875rem .25rem;
    list-style: none;
}

/* Nav links */
.sidebar-normal-link {
    display: flex;
    align-items: center;
    gap: .5625rem;
    padding: 0 .875rem;
    height: 36px;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-color, #6b6b6b);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
    margin: 1px .25rem;
}

.sidebar-normal-link:hover {
    background: #eeebe8;
    color: #1f1f1f;
    text-decoration: none;
}

.sidebar-normal-link.is-selected {
    background: #f3f1ef;
    color: #1f1f1f;
    font-weight: 600;
}

/* Icons */
.sidebar-normal-link i.fas,
.sidebar-normal-link i.far,
.sidebar-normal-link i.fab,
.sidebar-normal-link i.fa,
.sidebar-normal-link i.fa-solid {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: .75;
}

.sidebar-normal-link.is-selected i,
.sidebar-normal-link:hover i {
    opacity: 1;
}

/* Dropdown submenu indent */
.sidebar-normal-nav .collapse,
.sidebar-normal-nav .collapsing {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-normal-nav .collapse .sidebar-normal-link,
.sidebar-normal-nav .collapsing .sidebar-normal-link {
    padding-left: 2.625rem;
    height: 32px;
    font-size: .75rem;
    font-weight: 400;
}

.sidebar-normal-nav .collapse .sidebar-normal-link.is-selected {
    font-weight: 600;
}

/* Dropdown arrow on collapsible links */
.sidebar-normal-link[data-bs-toggle="collapse"]::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    margin-left: auto;
    color: #adb5bd;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.sidebar-normal-link[data-bs-toggle="collapse"]:not(.collapsed)::after {
    transform: rotate(-180deg);
}

/* Dark mode */
[data-bs-theme="dark"] .sidebar-normal-brand,
[data-bs-theme="dark"] .sidebar.sidebar-normal {
    border-color: #3a3a3f !important;
    color: #e0e0e0;
}
[data-bs-theme="dark"] .sidebar-normal-brand { color: #e0e0e0; }
[data-bs-theme="dark"] .sidebar-normal-link { color: #a0a0a8; }
[data-bs-theme="dark"] .sidebar-normal-link:hover { background: #2e2e32; color: #fff; }
[data-bs-theme="dark"] .sidebar-normal-link.is-selected { background: #2e2e32; color: #fff; }
[data-bs-theme="dark"] .sidebar-header { color: #666; }
[data-bs-theme="dark"] .sidebar-normal-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* =========================================================
   Rail + Context panel sidebar (AppStack split layout)
   ========================================================= */

/* Badge on rail icon */
.sidebar-rail-link {
    position: relative;
}
.sidebar-rail-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Context panel show/hide for multi-panel PHP sidebar */
.sidebar-context {
    position: relative;
}

/* Rail logo sizing */
.sidebar-logo img {
    display: block;
    border-radius: 50%;
}

/* Context link active state color */
.sidebar-context-link.is-selected {
    background: #f3f1ef;
    color: #1f1f1f;
    font-weight: 600;
}

/* Dark mode context panel */
[data-bs-theme="dark"] .sidebar-context {
    background: #222 !important;
    border-color: #3a3a3f !important;
}
[data-bs-theme="dark"] .sidebar-context-link { color: #a0a0a8; }
[data-bs-theme="dark"] .sidebar-context-link:hover,
[data-bs-theme="dark"] .sidebar-context-link.is-selected { background: #2e2e32; color: #fff; }
[data-bs-theme="dark"] .sidebar-context-title { color: #666; }

/* Content-sidebar lock — Brand kits/Branded shelf/AI persona's until the user has an own brand
   kit (see header.php $fivexHasOwnBrandKit). Own, opt-in class rather than the global
   body.portal-locked pattern (portal-locked.css) — that one is all-or-nothing and unrelated. */
.sidebar-context-link.is-content-locked { opacity: .45; cursor: not-allowed; pointer-events: auto; position: relative; }
.sidebar-context-link.is-content-locked:hover { opacity: .58; background: transparent; }
.sidebar-context-link.is-content-locked::after {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .5625rem;
    color: #98a2b3;
    pointer-events: none;
}
[data-bs-theme="dark"] .sidebar-context-link.is-content-locked::after { color: #6b7280; }

.sidebar-context-empty {
    color: #8a8a8a;
    display: block;
    font-size: .703125rem;
    font-weight: 500;
    line-height: 1.35;
    padding: .25rem .65625rem;
}

.sidebar-dashboard-create-wrap {
    padding: 0 .65625rem .125rem;
}

.sidebar-dashboard-create-wrap--spaced {
    margin-top: .5rem;
    padding-top: .625rem;
}

.sidebar-dashboard-create-wrap--spaced::before {
    background: #f0eeeb;
    content: '';
    display: block;
    height: 1px;
    margin-bottom: .625rem;
}

.sidebar-dashboard-create {
    align-items: center;
    appearance: none;
    background: none;
    border: 0;
    color: #8a8a8a;
    cursor: pointer;
    display: flex;
    font-size: .703125rem;
    font-weight: 500;
    line-height: 1.35;
    padding: .25rem 0;
    text-align: left;
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-dashboard-create:hover,
    .sidebar-dashboard-create:focus-visible {
        color: #1f1f1f;
    }
}

.sidebar-dashboard-create:focus-visible {
    outline: 2px solid rgba(31, 31, 31, 0.15);
    outline-offset: 2px;
}

[data-bs-theme="dark"] .sidebar-context-empty {
    color: #888;
}

[data-bs-theme="dark"] .sidebar-dashboard-create-wrap--spaced::before {
    background: #3a3a3f;
}

[data-bs-theme="dark"] .sidebar-dashboard-create {
    color: #888;
}

[data-bs-theme="dark"] .sidebar-dashboard-create:hover,
[data-bs-theme="dark"] .sidebar-dashboard-create:focus-visible {
    color: #fff;
}

/* Dashboards panel: dashboards and monitors as two equal sections (header.php sidebar-hub) */
.sidebar-hub + .sidebar-hub,
.sidebar-hub--after {
    margin-top: .875rem;
    padding-top: .875rem;
    border-top: 1px solid #f0eeeb;
}

.sidebar-hub__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.sidebar-hub__head .sidebar-hub__title {
    margin: 0 !important;
}

.sidebar-hub__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: #8a8a8a;
    font-size: .6875rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar-hub__add:hover,
.sidebar-hub__add:focus-visible {
    background: #efedea;
    color: var(--primary-color, #0077ff);
}

.sidebar-hub__item {
    position: relative;
}

.sidebar-hub__link {
    justify-content: flex-start !important;
    gap: .55rem;
    min-width: 0;
}

.sidebar-hub__item:has(.sidebar-hub__action) .sidebar-hub__link {
    padding-right: 2rem !important;
}

.sidebar-hub__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-hub__icon {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: .4rem;
    background: #efedea;
    color: #6f6f6f;
    font-size: .625rem;
    transition: background-color .12s ease, color .12s ease;
}

/* Monitors are live: a small green dot on their icon. */
.sidebar-hub__icon--live::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 2px #faf9f7;
}

.sidebar-hub__link:hover .sidebar-hub__icon {
    background: #e7e4e0;
}

.sidebar-hub__link.is-selected .sidebar-hub__icon {
    background: var(--primary-color, #0077ff);
    color: #fff;
}

.sidebar-hub__badge {
    flex: none;
    font-size: .5625rem;
    opacity: .5;
}

.sidebar-hub__action {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .4rem;
    color: #8a8a8a;
    font-size: .625rem;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}

.sidebar-hub__item:hover .sidebar-hub__action,
.sidebar-hub__action:focus-visible {
    opacity: 1;
}

.sidebar-hub__action:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--primary-color, #0077ff);
}

@media (hover: none) {
    .sidebar-hub__action {
        opacity: 1;
    }
}

.sidebar-hub__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .35rem .65625rem .25rem;
    color: #8a8a8a;
    font-size: .703125rem;
    line-height: 1.35;
}

.sidebar-hub__cta {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary-color, #0077ff);
    font-size: .703125rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.sidebar-hub__cta:hover {
    text-decoration: underline;
}

.sidebar-hub__more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .25rem 0 0 .65625rem;
    color: #8a8a8a;
    font-size: .6875rem;
    font-weight: 500;
    text-decoration: none;
}

.sidebar-hub__more i {
    font-size: .5625rem;
    transition: transform .12s ease;
}

.sidebar-hub__more:hover,
.sidebar-hub__more.is-selected {
    color: #1f1f1f;
}

.sidebar-hub__more:hover i {
    transform: translateX(2px);
}

[data-bs-theme="dark"] .sidebar-hub + .sidebar-hub,
[data-bs-theme="dark"] .sidebar-hub--after {
    border-top-color: #3a3a3f;
}

[data-bs-theme="dark"] .sidebar-hub__add:hover,
[data-bs-theme="dark"] .sidebar-hub__add:focus-visible {
    background: #2e2e32;
    color: #fff;
}

[data-bs-theme="dark"] .sidebar-hub__icon {
    background: #2e2e32;
    color: #a0a0a8;
}

[data-bs-theme="dark"] .sidebar-hub__link:hover .sidebar-hub__icon {
    background: #38383d;
}

[data-bs-theme="dark"] .sidebar-hub__icon--live::after {
    box-shadow: 0 0 0 2px #222;
}

[data-bs-theme="dark"] .sidebar-hub__action:hover {
    background: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .sidebar-hub__more:hover,
[data-bs-theme="dark"] .sidebar-hub__more.is-selected {
    color: #fff;
}

/* ============================================================
   FiveX sidebar: show normal (full text) vs rail+context
   ============================================================ */

/* Rail + context: hide normal panel */
.sidebar.is-split .fivex-sidebar-normal,
.sidebar.has-context .fivex-sidebar-normal {
    display: none !important;
}

/* Normal mode: hide the rail, show full-text panel */
.sidebar.is-normal .sidebar-rail {
    display: none !important;
}
.sidebar.is-normal .fivex-sidebar-normal {
    display: flex !important;
    flex-direction: column;
    width: var(--fivex-sidebar-width);
    flex-shrink: 0;
}

/* Rail-only mode: hide full-text panel */
.sidebar.is-rail-only .fivex-sidebar-normal {
    display: none !important;
}

/* Unified sidebar width (normal full menu = rail + context panel) */
:root {
    --fivex-sidebar-width: 240px;
    --fivex-sidebar-rail-width: 72px;
    --fivex-sidebar-context-width: calc(var(--fivex-sidebar-width) - var(--fivex-sidebar-rail-width));
    /* AppStack xl (1200px): at this width and below sidebar is overlay (hamburger) */
    --fivex-sidebar-overlay-max: 1200px;
    /* Drawer motion (iPad / overlay) — ease-out open, faster ease-out close */
    --fivex-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --fivex-sidebar-drawer-open-duration: 280ms;
    --fivex-sidebar-drawer-close-duration: 220ms;
    /* Solid tint matching rgba(0,0,0,0.4) over body bg — for iOS safe areas / browser chrome */
    --fivex-sidebar-drawer-scrim-solid: color-mix(in srgb, var(--bs-body-bg, #fff) 60%, #000 40%);
}

/* Allow width to transition freely in both directions (overrides AppStack base min-width: 240px) */
#sidebar.sidebar {
    min-width: 0 !important;
}

/* Suppress transition during page-load class restore to avoid flash */
.sidebar.sidebar-no-transition {
    transition: none !important;
}

/* Normal mode: full-text sidebar */
.sidebar.is-normal {
    width: var(--fivex-sidebar-width) !important;
    box-sizing: border-box !important;
}

/* One outer border on #sidebar — same edge as split mode */
#sidebar.sidebar.is-normal .sidebar-normal,
#sidebar.sidebar.is-normal .fivex-sidebar-normal {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
}

/* Split mode: rail + context must match normal menu width (avoid flex shrink / double borders) */
:root {
    --fivex-sidebar-rail-expand-ease: cubic-bezier(.22, 1, .36, 1);
    --fivex-sidebar-rail-expand-duration: 240ms;
}

/* AppStack uses 72+240=312px — force 240px total (prevents empty rail strip beside menu) */
.sidebar.has-context,
/* AppStack uses 72+240=312px — force 240px total (prevents empty rail strip beside menu) */
.sidebar.has-context,
#sidebar.sidebar.has-context,
#sidebar.sidebar.is-split.has-context {
    width: var(--fivex-sidebar-width) !important;
    min-width: var(--fivex-sidebar-width) !important;
    max-width: var(--fivex-sidebar-width) !important;
    flex: 0 0 var(--fivex-sidebar-width) !important;
    box-sizing: border-box !important;
    transition: width var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        min-width var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        max-width var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        flex-basis var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease);
}

#sidebar.sidebar.has-context .sidebar-rail,
#sidebar.sidebar.is-split.has-context .sidebar-rail {
    flex: 0 0 var(--fivex-sidebar-rail-width) !important;
    width: var(--fivex-sidebar-rail-width) !important;
    min-width: var(--fivex-sidebar-rail-width) !important;
    max-width: var(--fivex-sidebar-rail-width) !important;
    box-sizing: border-box !important;
    transition: none;
}

/* Context panels stack in one slot (never flex side-by-side during switch) */
#sidebar.sidebar.has-context .sidebar-context,
#sidebar.sidebar.is-split.has-context .sidebar-context {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--fivex-sidebar-rail-width);
    right: 0;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    z-index: 1;
    border-left: none !important;
    border-right: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(0) scale(1) !important;
    transition: none !important;
}

/* Visible context: show links (items start opacity:0 in AppStack; re-show after panel swap) */
#sidebar.sidebar.is-split.has-context:not(.is-rail-hover-expanded) .sidebar-context.fivex-context-visible .sidebar-context-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

#sidebar.sidebar.is-split.has-context:not(.is-rail-hover-expanded) .sidebar-context.fivex-context-visible {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) scale(1) !important;
    z-index: 2;
}

/* Panel switch: hide inactive panels immediately (no AppStack opacity fade) */
#sidebar.sidebar.is-split.has-context:not(.is-rail-hover-expanded) .sidebar-context:not(.fivex-context-visible) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Split + submenu: hover rail → hide context, slide open full main menu (same width, never both panels) */
#sidebar.sidebar.is-split.has-context {
    position: relative;
}

/* Hover expand: keep outer sidebar at standard width (panels swap, no extra footprint) */
#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded {
    width: var(--fivex-sidebar-width) !important;
    min-width: var(--fivex-sidebar-width) !important;
    max-width: var(--fivex-sidebar-width) !important;
    flex: 0 0 var(--fivex-sidebar-width) !important;
}

/* Hover preview: full menu only — rail column must not leave a blank 72px strip */
#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .sidebar-rail {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0;
    pointer-events: none;
    transition: width var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        min-width var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        max-width var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        flex-basis var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        opacity var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        padding var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease);
}

#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .sidebar-context {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        transform var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        visibility 0s linear var(--fivex-sidebar-rail-expand-duration);
}

/* Forbidden: full normal menu + context panel at once (desktop toggle race) */
#sidebar.sidebar.is-normal.has-context .sidebar-context,
#sidebar.sidebar.is-normal.is-split .sidebar-context {
    display: none !important;
}

#sidebar.sidebar.is-normal.is-split.has-context .fivex-sidebar-normal {
    position: relative !important;
    left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none !important;
}

#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .sidebar-rail-nav,
#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .sidebar-rail-footer,
#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .sidebar-rail > a.sidebar-logo,
#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .sidebar-rail > a.sidebar-agency-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease);
}

/* Context open: full menu overlay hidden until rail hover preview (opacity swap, not display toggle) */
#sidebar.sidebar.is-split.has-context .fivex-sidebar-normal {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--fivex-sidebar-width) !important;
    max-width: var(--fivex-sidebar-width) !important;
    height: 100vh;
    min-height: 100vh;
    z-index: 3;
    background: var(--bg-color, #fbfaf8);
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(var(--fivex-sidebar-rail-width) - var(--fivex-sidebar-width)));
    transition: none;
}

[data-bs-theme="dark"] #sidebar.sidebar.is-split.has-context .fivex-sidebar-normal {
    background: #222;
}

#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .fivex-sidebar-normal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
    transition: transform var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        opacity var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease),
        visibility 0s linear 0s,
        box-shadow var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease);
}

[data-bs-theme="dark"] #sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .fivex-sidebar-normal {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
}

/* Collapsed rail (no context): hover → flyout overlay (rail stays 72px, no empty width shell) */
/* Collapsed rail (no context): hover → flyout overlay (rail stays 72px, no empty width shell) */
#sidebar.sidebar.is-rail-only:not(.has-context) {
    position: relative;
    overflow: visible !important;
    width: var(--fivex-sidebar-rail-width) !important;
    min-width: var(--fivex-sidebar-rail-width) !important;
    max-width: var(--fivex-sidebar-rail-width) !important;
    flex: 0 0 var(--fivex-sidebar-rail-width) !important;
    transition: none !important;
    overflow: visible !important;
    width: var(--fivex-sidebar-rail-width) !important;
    min-width: var(--fivex-sidebar-rail-width) !important;
    max-width: var(--fivex-sidebar-rail-width) !important;
    flex: 0 0 var(--fivex-sidebar-rail-width) !important;
    transition: none !important;
}

#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded {
    overflow: visible !important;
    z-index: 1030;
}

#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail-nav,
#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail-footer,
#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail > a.sidebar-logo,
#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail > a.sidebar-agency-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms var(--fivex-sidebar-rail-expand-ease);
    overflow: visible !important;
    z-index: 1030;
}

#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail-nav,
#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail-footer,
#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail > a.sidebar-logo,
#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .sidebar-rail > a.sidebar-agency-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms var(--fivex-sidebar-rail-expand-ease);
}

#sidebar.sidebar.is-rail-only:not(.has-context) .fivex-sidebar-normal {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--fivex-sidebar-width) !important;
    max-width: var(--fivex-sidebar-width) !important;
    height: 100vh;
    min-height: 100vh;
    z-index: 3;
    z-index: 3;
    background: var(--bg-color, #fbfaf8);
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Tucked to rail width — slides out as one panel (not width grow + fade in) */
    transform: translateX(calc(var(--fivex-sidebar-rail-width) - var(--fivex-sidebar-width)));
    transition: transform 200ms var(--fivex-sidebar-rail-expand-ease),
        opacity 200ms var(--fivex-sidebar-rail-expand-ease),
        box-shadow 200ms var(--fivex-sidebar-rail-expand-ease);
    /* Tucked to rail width — slides out as one panel (not width grow + fade in) */
    transform: translateX(calc(var(--fivex-sidebar-rail-width) - var(--fivex-sidebar-width)));
    transition: transform 200ms var(--fivex-sidebar-rail-expand-ease),
        opacity 200ms var(--fivex-sidebar-rail-expand-ease),
        box-shadow 200ms var(--fivex-sidebar-rail-expand-ease);
}

[data-bs-theme="dark"] #sidebar.sidebar.is-rail-only:not(.has-context) .fivex-sidebar-normal {
    background: #222;
}

#sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .fivex-sidebar-normal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
    transition: transform 200ms var(--fivex-sidebar-rail-expand-ease),
        opacity 200ms var(--fivex-sidebar-rail-expand-ease),
        visibility 0s linear 0s,
        box-shadow 200ms var(--fivex-sidebar-rail-expand-ease);
    transition: transform 200ms var(--fivex-sidebar-rail-expand-ease),
        opacity 200ms var(--fivex-sidebar-rail-expand-ease),
        visibility 0s linear 0s,
        box-shadow 200ms var(--fivex-sidebar-rail-expand-ease);
}

[data-bs-theme="dark"] #sidebar.sidebar.is-rail-only:not(.has-context).is-rail-hover-expanded .fivex-sidebar-normal {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
}

/* Normal mode: normal panel full height */
.sidebar.is-normal .sidebar-normal {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

/* Panel-switching links in normal sidebar: arrow points right, never rotates */
.fivex-sidebar-normal .sidebar-normal-link[data-panel]::after {
    content: '\f054'; /* fa-chevron-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    margin-left: auto;
    color: #adb5bd;
    flex-shrink: 0;
    transform: none !important;
}

/* Override the generic collapse arrow for these items */
.fivex-sidebar-normal .sidebar-normal-link[data-bs-toggle="collapse"]::after {
    content: '\f054';
    transform: none !important;
}

/* Sidebar normal footer profile row — match link color (nav --text-color on dark sidebar) */
.sidebar-normal-profile {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: .875rem;
    padding: .45rem .75rem;
    text-decoration: none;
    color: var(--text-color, #212529);
    font-size: .78rem;
    font-weight: 500;
    min-height: 42px;
    transition: background-color .18s ease, color .18s ease;
}
.sidebar-normal-profile:hover,
.sidebar-normal-profile:focus {
    background: #eeebe8;
    color: #1f1f1f;
    text-decoration: none;
}
[data-bs-theme="dark"] .sidebar-normal-profile { color: #e0e0e0; }
[data-bs-theme="dark"] .sidebar-normal-profile:hover,
[data-bs-theme="dark"] .sidebar-normal-profile:focus { background: #2e2e32; color: #fff; }

/* Sidebar dividers — subtle fade, derived from custom nav text color */
#sidebar .sidebar-normal-footer {
    position: relative;
    border-top: none !important;
    padding-top: .875rem;
}
#sidebar .sidebar-normal-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--text-color, #6f6f6f) 16%, transparent) 24%,
        color-mix(in srgb, var(--text-color, #6f6f6f) 16%, transparent) 76%,
        transparent 100%
    );
    pointer-events: none;
}
#sidebar .sidebar-rail-footer {
    border-top: 1px solid color-mix(in srgb, var(--text-color, #6f6f6f) 12%, transparent) !important;
}

/* Rail ↔ context panel — subtle vertical divider (custom nav colors) */
#sidebar.sidebar.has-context .sidebar-rail,
#sidebar.sidebar.is-split.has-context .sidebar-rail {
    position: relative;
    border-right: none !important;
}
#sidebar.sidebar.has-context .sidebar-rail::after,
#sidebar.sidebar.is-split.has-context .sidebar-rail::after {
    content: '';
    position: absolute;
    top: 1rem;
    right: 0;
    bottom: 1rem;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--text-color, #6f6f6f) 16%, transparent) 20%,
        color-mix(in srgb, var(--text-color, #6f6f6f) 16%, transparent) 80%,
        transparent 100%
    );
    pointer-events: none;
}
#sidebar.sidebar.is-split.has-context.is-rail-hover-expanded .sidebar-rail::after {
    display: none;
}

/* Sidebar never consumes horizontal flex space — topbar/main stay full viewport width */
.wrapper > #sidebar.sidebar {
    flex: none !important;
    margin: 0 !important;
}

.wrapper > .main {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.main > .navbar,
.main > nav.navbar {
    position: relative;
    width: 100%;
}

/* ============================================================
   Sidebar overlay below xl (1200px) — matches AppStack + hamburger toggle
   ============================================================ */
@media (max-width: 1200px) {
    /* Sidebar out of flex flow — main content full width (no desktop rail strip on the left) */
    .wrapper > #sidebar.sidebar {
        flex: none !important;
        margin: 0 !important;
    }

    .wrapper > .main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #sidebar.sidebar.is-split.has-context,
    #sidebar.sidebar.has-context,
    #sidebar.sidebar.is-rail-only {
        position: fixed !important;
        flex: none !important;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
    }

    /* Off-screen until .collapsed (hamburger open) — translate3d + webkit prefix for Safari compositing */
    body:not([data-sidebar-position=right]) #sidebar.sidebar:not(.collapsed) {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    body:not([data-sidebar-position=right]) #sidebar.sidebar.collapsed {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* Sidebar fixed overlay — transform only (suppress AppStack width transition on Safari) */
    #sidebar.sidebar {
        position: fixed !important;
        left: 0;
        right: auto !important;
        top: 0;
        z-index: 1050;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
        width: 260px !important;
        min-width: 260px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        box-shadow: none;
        -webkit-transition: -webkit-transform var(--fivex-sidebar-drawer-open-duration) var(--fivex-ease-drawer);
        transition: transform var(--fivex-sidebar-drawer-open-duration) var(--fivex-ease-drawer) !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }

    #sidebar.sidebar.collapsed,
    #sidebar.sidebar.is-drawer-closing {
        will-change: transform;
    }

    #sidebar.sidebar:not(.collapsed):not(.is-drawer-closing) {
        will-change: auto;
    }

    #sidebar.sidebar.is-drawer-closing {
        -webkit-transition-duration: var(--fivex-sidebar-drawer-close-duration);
        transition-duration: var(--fivex-sidebar-drawer-close-duration) !important;
    }

    #sidebar.sidebar.collapsed {
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.14);
    }

    /* Show rail+context or normal with full width in overlay */
    #sidebar.is-split,
    #sidebar.has-context,
    #sidebar.is-normal {
        width: 260px !important;
        min-width: 260px !important;
    }

    /*
     * Drawer main menu (with or without .collapsed): swap layout immediately when class
     * is set — must not wait for .collapsed or chevrons jump during slide-in.
     */
    #sidebar.sidebar.is-drawer-main-menu .sidebar-rail,
    #sidebar.sidebar.is-drawer-main-menu .sidebar-context {
        display: none !important;
    }

    #sidebar.sidebar.is-drawer-main-menu .fivex-sidebar-normal,
    #sidebar.sidebar.is-split.has-context.is-drawer-main-menu .fivex-sidebar-normal {
        display: flex !important;
        flex-direction: column;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        z-index: auto !important;
        overflow: hidden;
    }

    /* Chevrons: fixed slot on the right (no margin-left:auto reflow) + no transitions */
    #sidebar.sidebar.is-drawer-main-menu .fivex-sidebar-normal .sidebar-normal-link[data-panel],
    #sidebar.sidebar.is-drawer-main-menu .fivex-sidebar-normal .sidebar-normal-link[data-bs-toggle="collapse"] {
        padding-right: 1.625rem;
        position: relative;
    }

    #sidebar.sidebar.is-drawer-main-menu .sidebar-normal-link,
    #sidebar.sidebar.is-drawer-main-menu .fivex-sidebar-normal .sidebar-normal-link,
    #sidebar.sidebar.is-drawer-main-menu .sidebar-normal-link::after,
    #sidebar.sidebar.is-drawer-main-menu .fivex-sidebar-normal .sidebar-normal-link::after {
        transition: none !important;
    }

    #sidebar.sidebar.is-drawer-main-menu .fivex-sidebar-normal .sidebar-normal-link[data-panel]::after,
    #sidebar.sidebar.is-drawer-main-menu .sidebar-normal-link[data-bs-toggle="collapse"]::after {
        position: absolute;
        right: 0.875rem;
        top: 50%;
        margin-left: 0;
        transform: translateY(-50%) !important;
    }

    #sidebar.sidebar.is-drawer-main-menu .sidebar-normal-link[data-bs-toggle="collapse"]:not(.collapsed)::after {
        transform: translateY(-50%) rotate(-180deg) !important;
    }

    /* Mobile drawer: full-width context sub-menu (no rail + context squeeze) */
    #sidebar.sidebar.is-mobile-drawer-context .sidebar-rail,
    #sidebar.sidebar.is-mobile-drawer-context .fivex-sidebar-normal {
        display: none !important;
    }

    #sidebar.sidebar.is-mobile-drawer-context.is-split.has-context {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Override desktop absolute context slot (left: 72px) — needs .is-split.has-context for specificity */
    #sidebar.sidebar.is-mobile-drawer-context.is-split.has-context:not(.is-rail-hover-expanded) .sidebar-context {
        position: relative !important;
        inset: auto !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        display: none !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        z-index: auto !important;
    }

    #sidebar.sidebar.is-mobile-drawer-context.is-split.has-context:not(.is-rail-hover-expanded) .sidebar-context.fivex-context-visible {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-scroll {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 1rem 0.625rem 1.5rem;
    }

    #sidebar.sidebar.is-mobile-drawer-context .aia-nav-history {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-title {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin-bottom: 0.625rem;
        padding: 0 0.25rem 0.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-color, #495057);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    [data-bs-theme="dark"] #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-title {
        border-bottom-color: rgba(255, 255, 255, 0.08);
        color: #a0a0a8;
    }

    #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-title::before {
        content: '\2039';
        font-size: 1.125rem;
        line-height: 1;
        opacity: 0.65;
        flex-shrink: 0;
    }

    #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-nav {
        gap: 0;
    }

    #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-item {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-link {
        width: 100%;
        box-sizing: border-box;
        height: 36px;
        padding: 0 0.875rem;
        margin: 1px 0.25rem;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-color, #6b6b6b);
        border-radius: 9px;
        justify-content: flex-start;
    }

    #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-link.is-selected {
        background: #f3f1ef;
        color: #1f1f1f;
        font-weight: 600;
    }

    [data-bs-theme="dark"] #sidebar.sidebar.is-mobile-drawer-context .sidebar-context-link.is-selected {
        background: #2e2e32;
        color: #fff;
    }

    /* Context stagger — tablet only (skipped on phone to avoid jank with slide) */
    @media (hover: hover) and (pointer: fine) {
        #sidebar.sidebar.collapsed .sidebar-context-item {
            opacity: 0;
            transform: translateX(-8px);
            animation: fivex-drawer-context-in 220ms var(--fivex-ease-drawer) forwards;
        }

        #sidebar.sidebar.collapsed .sidebar-context-item:nth-child(1) { animation-delay: 35ms; }
        #sidebar.sidebar.collapsed .sidebar-context-item:nth-child(2) { animation-delay: 55ms; }
        #sidebar.sidebar.collapsed .sidebar-context-item:nth-child(3) { animation-delay: 75ms; }
        #sidebar.sidebar.collapsed .sidebar-context-item:nth-child(4) { animation-delay: 95ms; }
        #sidebar.sidebar.collapsed .sidebar-context-item:nth-child(5) { animation-delay: 115ms; }
        #sidebar.sidebar.collapsed .sidebar-context-item:nth-child(n + 6) { animation-delay: 130ms; }

        @keyframes fivex-drawer-context-in {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    }

    /* Main content takes full width */
    .main {
        width: 100% !important;
        min-width: 0 !important;
    }

    .wrapper > .main {
        padding-left: 0 !important;
    }

    .wrapper > .main > main.content,
    .wrapper > .main > .footer {
        margin-left: 0 !important;
    }

    /* Paint root behind iOS status bar / home indicator when drawer is open */
    html.sidebar-drawer-open,
    body.sidebar-drawer-open {
        background-color: var(--fivex-sidebar-drawer-scrim-solid);
    }

    body.sidebar-drawer-open {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Backdrop — opacity fade (not display toggle); extend into safe areas */
    #sidebar-backdrop {
        display: block;
        position: fixed;
        top: calc(-1 * env(safe-area-inset-top, 0px));
        right: calc(-1 * env(safe-area-inset-right, 0px));
        bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
        left: calc(-1 * env(safe-area-inset-left, 0px));
        background: rgba(0, 0, 0, 0.4);
        z-index: 1049;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        -webkit-transition: opacity var(--fivex-sidebar-drawer-open-duration) var(--fivex-ease-drawer);
        transition: opacity var(--fivex-sidebar-drawer-open-duration) var(--fivex-ease-drawer);
    }

    #sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.sidebar-drawer-closing #sidebar-backdrop {
        -webkit-transition-duration: var(--fivex-sidebar-drawer-close-duration);
        transition-duration: var(--fivex-sidebar-drawer-close-duration);
    }

    /* iPhone / touch: slightly slower drawer, no competing motion */
    @media (pointer: coarse) {
        :root {
            --fivex-sidebar-drawer-open-duration: 380ms;
            --fivex-sidebar-drawer-close-duration: 340ms;
            --fivex-ease-drawer: cubic-bezier(0.33, 0.82, 0.2, 1);
        }

        #sidebar-backdrop {
            transition-property: opacity;
        }

        #sidebar-backdrop:not(.show) {
            transition-delay: 0ms;
        }
    }

    .sidebar-toggle {
        display: flex !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        -webkit-transition: -webkit-transform 160ms var(--fivex-ease-drawer);
        transition: transform 160ms var(--fivex-ease-drawer);
    }

    /* Hamburger-only topbar — logo lives in the drawer, not beside the menu button */
    .topbar-mobile-logo {
        display: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .sidebar-toggle:active {
            transform: scale(0.94);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #sidebar.sidebar,
        #sidebar-backdrop,
        body.sidebar-drawer-closing #sidebar-backdrop {
            transition-duration: 0.01ms !important;
        }

        #sidebar.sidebar.collapsed .sidebar-context-item {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

@media (min-width: 1201px) {
    #sidebar-backdrop {
        display: none !important;
    }

    .sidebar-toggle,
    .navbar .sidebar-toggle,
    a.sidebar-toggle {
        display: none !important;
    }

    /* Desktop: fixed rail/menu — does not push topbar */
    body:not([data-sidebar-position=right]) #sidebar.sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        -webkit-transform: none !important;
        transform: none !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* Offset entire main (topbar + content) beside fixed sidebar */
    #sidebar.sidebar.is-rail-only:not(.has-context) ~ .main {
        padding-left: var(--fivex-sidebar-rail-width);
        transition: padding-left var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease);
    }

    #sidebar.sidebar.is-normal ~ .main,
    #sidebar.sidebar.has-context ~ .main,
    #sidebar.sidebar.is-split.has-context ~ .main {
        padding-left: var(--fivex-sidebar-width);
        transition: padding-left var(--fivex-sidebar-rail-expand-duration) var(--fivex-sidebar-rail-expand-ease);
    }

    #sidebar.sidebar.is-rail-only:not(.has-context) ~ .main > main.content,
    #sidebar.sidebar.is-rail-only:not(.has-context) ~ .main > .footer,
    #sidebar.sidebar.is-normal ~ .main > main.content,
    #sidebar.sidebar.is-normal ~ .main > .footer,
    #sidebar.sidebar.has-context ~ .main > main.content,
    #sidebar.sidebar.has-context ~ .main > .footer,
    #sidebar.sidebar.is-split.has-context ~ .main > main.content,
    #sidebar.sidebar.is-split.has-context ~ .main > .footer {
        margin-left: 0;
    }
}

/* Overlay mode: hamburger + drawer (synced with JS body.fivex-sidebar-overlay-mode) */
body.fivex-sidebar-overlay-mode .navbar .sidebar-toggle,
body.fivex-sidebar-overlay-mode a.sidebar-toggle {
    display: flex !important;
}

body:not(.fivex-sidebar-overlay-mode) .navbar .sidebar-toggle,
body:not(.fivex-sidebar-overlay-mode) a.sidebar-toggle {
    display: none !important;
}

/* Search bar: prevent Bootstrap input-group from breaking rounded button */
.topbar-search.input-group > .topbar-search-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-left: none !important;
    margin-left: 0 !important;
}
.topbar-search.input-group > .topbar-search-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ── Dark/light mode toggle — icon = mode you switch to (moon in light, sun in dark) ── */
[data-bs-theme="light"] .fivex-theme-toggle .nav-theme-toggle-light,
[data-bs-theme="dark"] .fivex-theme-toggle .nav-theme-toggle-dark {
    display: none;
}
[data-bs-theme="light"] .fivex-theme-toggle .nav-theme-toggle-dark,
[data-bs-theme="dark"] .fivex-theme-toggle .nav-theme-toggle-light {
    display: inline;
}
html:not([data-bs-theme]) .fivex-theme-toggle .nav-theme-toggle-light { display: none; }
html:not([data-bs-theme]) .fivex-theme-toggle .nav-theme-toggle-dark  { display: inline; }

/* ── Global #gridSearchInput baseline ── */
#gridSearchInput {
    font-size: 0.875rem;
    height: 2.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #495057);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: none;
}

#gridSearchInput:focus,
#gridSearchInput:focus-visible {
    border-color: var(--primary-color, #3b7ddd);
    box-shadow: 0 0 0 0.2rem rgba(59, 125, 221, 0.25);
    outline: none;
}

#gridSearchInput::placeholder {
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Global grid search bar ── */
.products-search {
    --products-search-height: 2.375rem;
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.products-search:focus-within {
    border-color: var(--primary-color, #3b7ddd);
    box-shadow: 0 0 0 0.2rem rgba(59, 125, 221, 0.25);
}

.products-search__type {
    flex: 0 0 auto;
    width: 6.5rem;
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.products-search .products-search__type .form-select.products-search__select,
.products-search select#searchTypeSelect {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: var(--products-search-height) !important;
    margin: 0 !important;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--bs-body-color, #495057) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 0.65rem !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.products-search .products-search__type .form-select.products-search__select:focus,
.products-search select#searchTypeSelect:focus,
.products-search select#searchTypeSelect:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

.products-search__query {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.products-search .products-search__query .form-control.products-search__input,
.products-search input#gridSearchInput {
    flex: 1 1 auto;
    height: 100%;
    min-height: var(--products-search-height) !important;
    width: 100%;
    padding: 0.375rem 0.75rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: var(--bs-body-bg, #fff) !important;
    font-size: 0.875rem !important;
    color: var(--bs-body-color, #495057) !important;
    box-shadow: none !important;
}

.products-search input#gridSearchInput:focus,
.products-search input#gridSearchInput:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.products-search__input::placeholder {
    color: var(--bs-secondary-color, #6c757d);
}

.products-search__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    min-height: var(--products-search-height);
    padding: 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--primary-color, #3b7ddd);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.products-search__action:hover {
    background: var(--primary-color, #3b7ddd);
    color: #fff;
}

.products-search__action #searchIcon {
    font-size: 0.8125rem;
}


/* ============================================================
   FiveX search bar — redesign
   ============================================================ */
.fivex-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 340px;
    max-width: 100%;
    height: 40px;
    background: #f4f6fb;
    border: 1.5px solid #e8ecf4;
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    overflow: hidden;
}

.fivex-search-wrap:focus-within {
    border-color: var(--primary-color, #0077FF);
    background: #fff;
    box-shadow: 0 0 0 3.5px rgba(0, 119, 255, .10);
    overflow: visible;
}

.fivex-search-icon {
    position: absolute;
    left: 13px;
    font-size: 13px;
    color: #9aa3b8;
    pointer-events: none;
    transition: color .18s ease;
    flex-shrink: 0;
}

.fivex-search-wrap:focus-within .fivex-search-icon {
    color: var(--primary-color, #0077FF);
}

.fivex-search-input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 400;
    color: #2d3148;
    padding: 0 10px 0 36px;
}

.fivex-search-input::placeholder {
    color: #b0b8cc;
    font-weight: 400;
}

.fivex-search-kbd-label--win {
    display: none;
}

html.fivex-platform-win .fivex-search-kbd-label--mac {
    display: none;
}

html.fivex-platform-win .fivex-search-kbd-label--win {
    display: inline;
}

.fivex-search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 7px;
    margin-right: 10px;
    border-radius: 6px;
    background: #edf0f7;
    border: 1px solid #dde2ee;
    font-size: 11px;
    font-weight: 500;
    color: #8892a8;
    letter-spacing: .01em;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    pointer-events: none;
    transition: opacity .18s ease;
}

.fivex-search-wrap:focus-within .fivex-search-kbd {
    opacity: 0;
}

/* Dark mode */
[data-bs-theme="dark"] .fivex-search-wrap {
    background: #1e2030;
    border-color: #2e3250;
}
[data-bs-theme="dark"] .fivex-search-wrap:focus-within {
    background: #252840;
    border-color: var(--primary-color, #0077FF);
}
[data-bs-theme="dark"] .fivex-search-input {
    color: #e0e4f0;
}
[data-bs-theme="dark"] .fivex-search-input::placeholder { color: #4a5070; }
[data-bs-theme="dark"] .fivex-search-kbd { background: #252840; border-color: #323660; color: #5a6080; }

/* Topbar — single row; search left, utilities pinned right (align with main.content padding) */
.topbar-navbar {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  min-height: 56px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.topbar-navbar .sidebar-toggle {
  flex: 0 0 auto;
}

.topbar-navbar .topbar-mobile-logo {
  flex: 0 0 auto;
}

.topbar-search-slot {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

.topbar-search-slot .fivex-search-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 40px;
}

.topbar-search-slot .fivex-search-input {
  min-width: 0;
  text-overflow: ellipsis;
}

.topbar-navbar .topbar-utilities {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 0;
  padding-right: 0;
}

.topbar-utilities > ul.navbar-nav.flex-row {
  gap: 0.5rem;
}

.topbar-utilities .nav-link.dropdown-toggle:not(.topbar-user-trigger) {
  white-space: nowrap;
  max-width: 9rem;
}

.fivex-search-wrap--agency {
  position: relative;
}

@media (max-width: 767.98px) {
  .topbar-navbar .topbar-search-slot {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0 0.125rem;
  }

  .topbar-navbar .topbar-search-slot .fivex-search-wrap {
    position: relative;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 36px;
    background: #f4f6fb;
    border: 1.5px solid #e8ecf4;
    border-radius: 10px;
    overflow: hidden;
  }

  .topbar-navbar .topbar-search-slot .fivex-search-wrap:focus-within {
    border-color: var(--primary-color, #0077FF);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.1);
  }

  .topbar-navbar .topbar-search-slot .fivex-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    color: #9aa3b8;
    pointer-events: none;
  }

  .topbar-navbar .topbar-search-slot .fivex-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 8px 0 34px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 16px; /* prevents iOS zoom on focus */
    color: #2d3148;
  }

  .topbar-navbar .topbar-search-slot .fivex-search-input::placeholder {
    color: #b0b8cc;
  }

  [data-bs-theme="dark"] .topbar-navbar .topbar-search-slot .fivex-search-wrap {
    background: #292929;
    border-color: #3a3a3f;
  }

  [data-bs-theme="dark"] .topbar-navbar .topbar-search-slot .fivex-search-wrap:focus-within {
    background: #353535;
    border-color: var(--primary-color, #0077FF);
    box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.15);
  }

  [data-bs-theme="dark"] .topbar-navbar .topbar-search-slot .fivex-search-input {
    color: #e0e0e0;
  }

  [data-bs-theme="dark"] .topbar-navbar .topbar-search-slot .fivex-search-input::placeholder {
    color: #555;
  }

  [data-bs-theme="dark"] .topbar-navbar .topbar-search-slot .fivex-search-icon {
    color: #666;
  }

  .topbar-utilities .nav-icon,
  .topbar-utilities .nav-flag,
  .topbar-utilities .nav-theme-toggle .nav-icon.js-theme-toggle {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .topbar-utilities .topbar-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* CRM/agency: icon-only help on narrow screens */
  .topbar-utilities .topbar-help-btn {
    font-size: 0;
    padding: 0 0.4rem;
    min-width: 34px;
    justify-content: center;
  }

  .topbar-utilities .topbar-help-btn__icon {
    font-size: 1rem;
    margin: 0 !important;
  }

  .topbar-utilities .topbar-utilities-divider {
    display: none !important;
  }

  .topbar-utilities .topbar-lang-wrap {
    max-width: 4.5rem;
    min-width: 0;
    flex-shrink: 1;
  }
}

@media (min-width: 992px) {
  .topbar-navbar {
    gap: 0.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .topbar-search-slot {
    flex: 0 1 auto;
    margin: 0 0.75rem 0 0;
    max-width: 420px;
  }

  .topbar-search-slot .fivex-search-input {
    font-size: 13.5px;
  }
}

@media (min-width: 992px) {
  .topbar-search-slot {
    max-width: 480px;
  }
}

/* ============================================================
   FiveX search autocomplete — redesign
   ============================================================ */

/* Dropdown container */
.search-autocomplete-menu.ui-menu,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05) !important;
    background: #fff !important;
    padding: 8px !important;
    margin-top: 6px !important;
    overflow: hidden;
    font-family: inherit;
    min-width: 380px;
    max-width: min(520px, 90vw);
    max-height: 72vh;
    overflow-y: auto;
}

/* Scrollbar */
.search-autocomplete-menu.ui-menu::-webkit-scrollbar { width: 4px; }
.search-autocomplete-menu.ui-menu::-webkit-scrollbar-track { background: transparent; }
.search-autocomplete-menu.ui-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 4px; }

/* Section header (category) */
.search-autocomplete-menu .ui-autocomplete-category,
.ui-autocomplete-category {
    background: transparent !important;
    padding: 10px 10px 4px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #9aa3b8 !important;
    text-align: left !important;
    border-bottom: none !important;
}

.search-autocomplete-menu .ui-autocomplete-category:first-child {
    padding-top: 4px !important;
}

/* Individual result item */
.search-autocomplete-menu .ui-menu-item,
.ui-menu.ui-autocomplete .ui-menu-item {
    list-style: none;
    padding: 0;
    margin: 1px 0;
}

.search-autocomplete-menu .ui-menu-item-wrapper,
.ui-menu.ui-autocomplete .ui-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #2d3148 !important;
    cursor: pointer;
    transition: background .12s ease, color .12s ease !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-autocomplete-menu .ui-menu-item-wrapper:hover,
.search-autocomplete-menu .ui-menu-item-wrapper.ui-state-active,
.ui-menu.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-menu.ui-autocomplete .ui-menu-item-wrapper:hover {
    background: #f0f4ff !important;
    color: var(--primary-color, #0077FF) !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
}


/* ============================================================
   DARK MODE — AppStack palette (#1a1a1a / #292929 / #3a3a3f)
   ============================================================ */

/* ── Layout ── */
[data-bs-theme="dark"] body { background: #1a1a1a; color: #a0a0a0; }
[data-bs-theme="dark"] .wrapper .main,
[data-bs-theme="dark"] main.content,
[data-bs-theme="dark"] .content { background-color: #1a1a1a !important; }

/* ── Topbar ── */
[data-bs-theme="dark"] .navbar-bg {
    background: rgba(26,26,26,.96) !important;
    border-bottom-color: #3a3a3f !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
[data-bs-theme="dark"] .fivex-search-wrap {
    background: #292929 !important;
    border-color: #3a3a3f !important;
}
[data-bs-theme="dark"] .fivex-search-wrap:focus-within {
    background: #353535 !important;
    border-color: var(--primary-color, #0077FF) !important;
    box-shadow: 0 0 0 3px rgba(0,119,255,.15) !important;
}
[data-bs-theme="dark"] .fivex-search-input { color: #e0e0e0 !important; }
[data-bs-theme="dark"] .fivex-search-input::placeholder { color: #555 !important; }
[data-bs-theme="dark"] .fivex-search-icon { color: #666 !important; }
[data-bs-theme="dark"] .fivex-search-kbd { background: #353535 !important; border-color: #3a3a3f !important; color: #555 !important; }
[data-bs-theme="dark"] .topbar-utilities .topbar-user-trigger {
  color: #e0e0e0;
}

[data-bs-theme="dark"] .topbar-utilities .topbar-user-trigger:hover,
[data-bs-theme="dark"] .topbar-utilities .topbar-user-trigger:focus-visible {
  background: #292929;
  border-color: #3a3a3f;
  color: #f5f5f6;
}

[data-bs-theme="dark"] .topbar-utilities .topbar-user-trigger.show,
[data-bs-theme="dark"] .topbar-utilities .topbar-user-trigger[aria-expanded="true"] {
  background: #333741;
  border-color: #424651;
  color: #f5f5f6;
}

[data-bs-theme="dark"] .topbar-user-avatar {
    background: linear-gradient(180deg, #333741 0%, #292929 100%) !important;
    border-color: #424651 !important;
    color: #53b1fd !important;
}

[data-bs-theme="dark"] .topbar-user-avatar .far,
[data-bs-theme="dark"] .topbar-user-avatar .fas {
  color: #98a2b3 !important;
}

[data-bs-theme="dark"] .topbar-user-chevron {
  color: #98a2b3;
}

[data-bs-theme="dark"] .topbar-utilities .topbar-user-trigger.show .topbar-user-chevron,
[data-bs-theme="dark"] .topbar-utilities .topbar-user-trigger[aria-expanded="true"] .topbar-user-chevron {
  color: #c4cbd4;
}

[data-bs-theme="dark"] .topbar-trial-pill--hook,
[data-bs-theme="dark"] .topbar-trial-pill--counter.is-urgent {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.4);
}

[data-bs-theme="dark"] .topbar-trial-pill--hook:hover,
[data-bs-theme="dark"] .topbar-trial-pill--counter.is-urgent:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.55);
}

[data-bs-theme="dark"] .topbar-trial-pill--hook .topbar-trial-pill__icon,
[data-bs-theme="dark"] .topbar-trial-pill--counter.is-urgent .topbar-trial-pill__icon {
  background: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}

[data-bs-theme="dark"] .topbar-trial-pill--counter {
  color: color-mix(in srgb, var(--primary-color, #0077ff) 70%, white);
  border-color: color-mix(in srgb, var(--primary-color, #0077ff) 45%, transparent);
}

[data-bs-theme="dark"] .topbar-trial-pill--counter .topbar-trial-pill__icon {
  background: color-mix(in srgb, var(--primary-color, #0077ff) 32%, transparent);
  color: color-mix(in srgb, var(--primary-color, #0077ff) 75%, white);
}

/* ── Cards ── */
[data-bs-theme="dark"],
body[data-theme="dark"] {
  --fivex-card-shadow: none;
  --fivex-card-shadow-hover: none;
}

html[data-bs-theme="dark"] .card,
body[data-theme="dark"] .card,
[data-bs-theme="dark"] .card {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .card-header,
body[data-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-header {
    background-color: var(--bs-tertiary-bg) !important;
    border-bottom-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .card-title,
body[data-theme="dark"] .card-body,
body[data-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-title {
    color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .card-footer,
body[data-theme="dark"] .card-footer,
[data-bs-theme="dark"] .card-footer {
    background-color: var(--bs-tertiary-bg) !important;
    border-top-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .card h6,
body[data-theme="dark"] .card h6,
[data-bs-theme="dark"] .card h6 {
    color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .card small.text-muted,
body[data-theme="dark"] .card small.text-muted,
[data-bs-theme="dark"] .card small.text-muted {
    color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] .hover-card:hover,
body[data-theme="dark"] .hover-card:hover,
[data-bs-theme="dark"] .hover-card:hover {
    background-color: var(--bs-tertiary-bg) !important;
}

/* ── Tables ── */
[data-bs-theme="dark"] .table { color: #a0a0a0; border-color: #3a3a3f; }
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table th {
    background-color: #292929 !important;
    border-color: #3a3a3f !important;
    color: #888 !important;
}
[data-bs-theme="dark"] .table td { border-color: #3a3a3f !important; }
[data-bs-theme="dark"] .table-hover tbody tr:hover td { background-color: #292929 !important; }
[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(255,255,255,.02) !important; }

html[data-bs-theme="dark"] {
    --dt-html-background: #222;
}

html[data-bs-theme="dark"] div.dataTables_scrollBody,
html[data-bs-theme="dark"] div.dataTables_scrollHead,
html[data-bs-theme="dark"] div.dataTables_scrollFoot {
    background: transparent !important;
}

table.dataTable thead tr > .dtfc-fixed-left,
table.dataTable thead tr > .dtfc-fixed-right,
table.dataTable tfoot tr > .dtfc-fixed-left,
table.dataTable tfoot tr > .dtfc-fixed-right {
    z-index: 3;
    background-color: #fff;
}
table.dataTable tbody tr > .dtfc-fixed-left,
table.dataTable tbody tr > .dtfc-fixed-right {
    z-index: 1;
    background-color: #fff;
}
div.dtfc-left-top-blocker,
div.dtfc-right-top-blocker {
    background-color: #fff;
}

html[data-bs-theme="dark"] table.dataTable thead tr > .dtfc-fixed-left,
html[data-bs-theme="dark"] table.dataTable thead tr > .dtfc-fixed-right,
html[data-bs-theme="dark"] table.dataTable tfoot tr > .dtfc-fixed-left,
html[data-bs-theme="dark"] table.dataTable tfoot tr > .dtfc-fixed-right,
html[data-bs-theme="dark"] table.dataTable tbody tr > .dtfc-fixed-left,
html[data-bs-theme="dark"] table.dataTable tbody tr > .dtfc-fixed-right,
html[data-bs-theme="dark"] div.dtfc-left-top-blocker,
html[data-bs-theme="dark"] div.dtfc-right-top-blocker {
    background-color: var(--dt-html-background) !important;
}

[data-bs-theme="dark"] .nice-table th,
[data-bs-theme="dark"] .nice-table thead {
    background: #292929 !important;
    color: #888 !important;
    border-color: #3a3a3f !important;
}
[data-bs-theme="dark"] .nice-table td { border-color: #3a3a3f !important; }
[data-bs-theme="dark"] .nice-table tr:hover td { background: #292929 !important; }

/* ── Forms ── */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] input.form-control,
html[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input.form-control,
[data-bs-theme="dark"] select.form-control {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}
html[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--bs-secondary-color) !important;
    opacity: 1;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--primary-color, #0077FF) !important;
    box-shadow: 0 0 0 3px rgba(0,119,255,.15) !important;
    color: var(--bs-emphasis-color) !important;
}
html[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
}

/* ── Dropdowns & modals ── */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #222 !important;
    border-color: #3a3a3f !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
[data-bs-theme="dark"] .dropdown-item { color: #a0a0a0 !important; }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: #353535 !important; color: #e0e0e0 !important; }
[data-bs-theme="dark"] .dropdown-divider { border-color: #3a3a3f !important; }
[data-bs-theme="dark"] .modal-content {
    background-color: #222 !important;
    border-color: #3a3a3f !important;
    color: #a0a0a0 !important;
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { border-color: #3a3a3f !important; }

/* ── SweetAlert2 — Bootstrap dark tokens (portal-wide) ── */
html[data-bs-theme="dark"] .swal2-popup,
body[data-theme="dark"] .swal2-popup,
[data-bs-theme="dark"] .swal2-popup {
	background: var(--bs-secondary-bg) !important;
	color: var(--bs-body-color) !important;
	border: 1px solid var(--bs-border-color);
}

html[data-bs-theme="dark"] .swal2-title,
body[data-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-title {
	color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .swal2-html-container,
html[data-bs-theme="dark"] .swal2-content,
body[data-theme="dark"] .swal2-html-container,
body[data-theme="dark"] .swal2-content,
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-content {
	color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] .swal2-input,
html[data-bs-theme="dark"] .swal2-textarea,
html[data-bs-theme="dark"] .swal2-select,
html[data-bs-theme="dark"] .swal2-html-container .form-select,
html[data-bs-theme="dark"] .swal2-html-container select,
body[data-theme="dark"] .swal2-input,
body[data-theme="dark"] .swal2-textarea,
body[data-theme="dark"] .swal2-select,
body[data-theme="dark"] .swal2-html-container .form-select,
body[data-theme="dark"] .swal2-html-container select,
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select,
[data-bs-theme="dark"] .swal2-html-container .form-select,
[data-bs-theme="dark"] .swal2-html-container select {
	background-color: var(--bs-body-bg) !important;
	border-color: var(--bs-border-color) !important;
	color: var(--bs-body-color) !important;
	box-shadow: none !important;
}

html[data-bs-theme="dark"] .swal2-input:focus,
html[data-bs-theme="dark"] .swal2-textarea:focus,
html[data-bs-theme="dark"] .swal2-select:focus,
html[data-bs-theme="dark"] .swal2-html-container .form-select:focus,
html[data-bs-theme="dark"] .swal2-html-container select:focus,
body[data-theme="dark"] .swal2-input:focus,
body[data-theme="dark"] .swal2-textarea:focus,
body[data-theme="dark"] .swal2-select:focus,
body[data-theme="dark"] .swal2-html-container .form-select:focus,
body[data-theme="dark"] .swal2-html-container select:focus,
[data-bs-theme="dark"] .swal2-input:focus,
[data-bs-theme="dark"] .swal2-textarea:focus,
[data-bs-theme="dark"] .swal2-select:focus,
[data-bs-theme="dark"] .swal2-html-container .form-select:focus,
[data-bs-theme="dark"] .swal2-html-container select:focus {
	border-color: var(--bs-primary) !important;
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

html[data-bs-theme="dark"] .swal2-cancel,
html[data-bs-theme="dark"] .swal2-cancel.swal2-styled,
body[data-theme="dark"] .swal2-cancel,
body[data-theme="dark"] .swal2-cancel.swal2-styled,
[data-bs-theme="dark"] .swal2-cancel,
[data-bs-theme="dark"] .swal2-cancel.swal2-styled {
	background-color: var(--bs-tertiary-bg) !important;
	border: 1px solid var(--bs-border-color) !important;
	color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .swal2-cancel:hover,
html[data-bs-theme="dark"] .swal2-cancel.swal2-styled:hover,
body[data-theme="dark"] .swal2-cancel:hover,
body[data-theme="dark"] .swal2-cancel.swal2-styled:hover,
[data-bs-theme="dark"] .swal2-cancel:hover,
[data-bs-theme="dark"] .swal2-cancel.swal2-styled:hover {
	background-color: var(--bs-secondary-bg) !important;
	border-color: var(--bs-border-color) !important;
	color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .swal2-close,
body[data-theme="dark"] .swal2-close,
[data-bs-theme="dark"] .swal2-close {
	color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] .swal2-close:hover,
body[data-theme="dark"] .swal2-close:hover,
[data-bs-theme="dark"] .swal2-close:hover {
	color: var(--bs-emphasis-color) !important;
}

html[data-bs-theme="dark"] .swal2-footer,
body[data-theme="dark"] .swal2-footer,
[data-bs-theme="dark"] .swal2-footer {
	border-top-color: var(--bs-border-color) !important;
	color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] .swal2-validation-message,
body[data-theme="dark"] .swal2-validation-message,
[data-bs-theme="dark"] .swal2-validation-message {
	background: var(--bs-tertiary-bg) !important;
	color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .swal2-html-container label,
html[data-bs-theme="dark"] .swal2-html-container p,
body[data-theme="dark"] .swal2-html-container label,
body[data-theme="dark"] .swal2-html-container p,
[data-bs-theme="dark"] .swal2-html-container label,
[data-bs-theme="dark"] .swal2-html-container p {
	color: var(--bs-body-color);
}

/* ── Misc ── */
[data-bs-theme="dark"] .list-group-item {
    background-color: #222 !important;
    border-color: #3a3a3f !important;
    color: #a0a0a0 !important;
}
[data-bs-theme="dark"] .list-group-item:hover { background-color: #292929 !important; }
[data-bs-theme="dark"] .btn-secondary { background-color: #353535 !important; border-color: #3a3a3f !important; color: #a0a0a0 !important; }
[data-bs-theme="dark"] .btn-light { background-color: #292929 !important; border-color: #3a3a3f !important; color: #a0a0a0 !important; }
[data-bs-theme="dark"] .text-muted { color: #666 !important; }
[data-bs-theme="dark"] .text-dark { color: #a0a0a0 !important; }
[data-bs-theme="dark"] .bg-white { background-color: #222 !important; }
[data-bs-theme="dark"] .bg-light { background-color: #292929 !important; }
[data-bs-theme="dark"] hr { border-color: #3a3a3f !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom { border-color: #3a3a3f !important; }

/* ── Search autocomplete ── */
[data-bs-theme="dark"] .search-autocomplete-menu.ui-menu,
[data-bs-theme="dark"] .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    background: #222 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) !important;
}
[data-bs-theme="dark"] .ui-menu.ui-autocomplete .ui-menu-item-wrapper { color: #a0a0a0 !important; }
[data-bs-theme="dark"] .ui-menu.ui-autocomplete .ui-menu-item-wrapper:hover,
[data-bs-theme="dark"] .ui-menu.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: #353535 !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .ui-autocomplete-category { color: #555 !important; }

/* ── Profile dropdown ── */
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] { background: #222 !important; }
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item { background: transparent !important; color: #a0a0a0 !important; }
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] .list-group-item:hover { background: #353535 !important; }
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] span.text-dark,
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="userDropdown"] .text-dark { color: #a0a0a0 !important; }

/* Agency sidebar: custom logo without the blue circle background */
.sidebar-agency-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(2.09687rem - 17px) 0 calc(2.84688rem - 17px);
    text-decoration: none;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 8px;
}
.sidebar-agency-logo:hover { opacity: .85; }
.sidebar-agency-logo img {
    max-height: 36px;
    max-width: 36px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* Custom agency logo in sidebar — no blue circle, clean image display */
.sidebar-custom-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 160px;
    overflow: hidden;
}
.sidebar-custom-logo img {
    max-height: 36px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* Fix Bootstrap modals: .main has overflow:hidden which traps position:fixed
   (Chrome/Safari treat overflow:hidden parents as containing blocks for fixed elements).
   Override to allow modals to escape and be truly viewport-fixed. */
.main {
    overflow: visible !important;
}


/* Auth pages (login, register) — see auth-pages.css */


/* ── Dashboard sub-users assign modal (management homepage) ── */
.dashboard-subusers-modal {
  max-width: 28rem;
}

.dashboard-subusers-modal__content {
  border: 0;
  border-radius: 0.875rem;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.14);
  overflow: hidden;
}

.dashboard-subusers-modal__header {
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 0;
  background: #fff;
}

.dashboard-subusers-modal__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}

.dashboard-subusers-modal__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  color: var(--bs-primary, #0d6efd);
  font-size: 1.125rem;
}

.dashboard-subusers-modal__icon--danger {
  background: rgba(231, 74, 59, 0.1);
  color: #e74a3b;
}

.dashboard-subusers-modal__header .modal-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #101828;
  letter-spacing: -0.02em;
}

.dashboard-subusers-modal__subtitle {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #667085;
}

.dashboard-subusers-modal__body {
  padding: 0.25rem 1.25rem 1.25rem;
}

.dashboard-subusers-modal__section {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.dashboard-subusers-modal__section .app-custom-select,
.dashboard-subusers-modal__section .app-custom-select > .period-selector {
  width: 100%;
}

.dashboard-subusers-modal__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #667085;
}

.dashboard-subusers-modal__hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #667085;
}

.dashboard-subusers-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed rgba(16, 24, 40, 0.12);
  border-radius: 0.75rem;
  background: #f9fafb;
}

.dashboard-subusers-modal__empty-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.04);
  color: #98a2b3;
  font-size: 1.5rem;
}

.dashboard-subusers-modal__empty-text {
  font-size: 0.875rem;
  color: #667085;
}

.dashboard-subusers-modal__footer {
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
  background: #fff;
}

@media (max-width: 575.98px) {
  #dashboardSubUsersModal.show,
  #deleteDashboardModal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  #dashboardSubUsersModal .dashboard-subusers-modal,
  #deleteDashboardModal .dashboard-subusers-modal {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }

  #dashboardSubUsersModal .dashboard-subusers-modal__footer,
  #deleteDashboardModal .dashboard-subusers-modal__footer {
    flex-wrap: wrap;
  }

  #dashboardSubUsersModal .dashboard-subusers-modal__footer .btn,
  #deleteDashboardModal .dashboard-subusers-modal__footer .btn {
    flex: 1 1 auto;
    min-width: calc(50% - 0.25rem);
  }
}

[data-bs-theme="dark"] .dashboard-subusers-modal__content,
[data-bs-theme="dark"] .dashboard-subusers-modal__header,
[data-bs-theme="dark"] .dashboard-subusers-modal__footer {
  background: #292929;
}

[data-bs-theme="dark"] .dashboard-subusers-modal__header .modal-title {
  color: rgba(255, 255, 255, 0.94);
}

[data-bs-theme="dark"] .dashboard-subusers-modal__subtitle,
[data-bs-theme="dark"] .dashboard-subusers-modal__label,
[data-bs-theme="dark"] .dashboard-subusers-modal__hint,
[data-bs-theme="dark"] .dashboard-subusers-modal__empty-text {
  color: #98a2b3;
}

[data-bs-theme="dark"] .dashboard-subusers-modal__empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .dashboard-subusers-modal__empty-icon {
  background: rgba(255, 255, 255, 0.06);
  color: #667085;
}

[data-bs-theme="dark"] .dashboard-subusers-modal__icon--danger {
  background: rgba(231, 74, 59, 0.15);
  color: #f87171;
}

[data-bs-theme="dark"] .dashboard-subusers-modal__footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Quartz: show full-height column separators between header cells. */
.ag-theme-quartz,
.ag-theme-quartz-dark {
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-height: 100%;
}

.ag-theme-alpine .ag-header-cell-resize::after {
    display: none;
}

/* ── New repricer / automation rule modal (automation page) ── */
.new-ad-rule-modal {
  max-width: 28rem;
}

.new-ad-rule-modal__content {
  border: 0;
  border-radius: 0.875rem;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.14);
  overflow: hidden;
}

.new-ad-rule-modal__header {
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 0;
  background: #fff;
}

.new-ad-rule-modal__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}

.new-ad-rule-modal__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  font-size: 1.125rem;
}

.new-ad-rule-modal__icon--repricer {
  background: rgba(var(--bs-success-rgb, 25, 135, 84), 0.12);
  color: var(--bs-success, #198754);
}

.new-ad-rule-modal__icon--advertising {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  color: var(--bs-primary, #0d6efd);
}

.new-ad-rule-modal__header .modal-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #101828;
  letter-spacing: -0.02em;
}

.new-ad-rule-modal__subtitle {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #667085;
}

.new-ad-rule-modal__body {
  padding: 0.25rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.new-ad-rule-modal__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.new-ad-rule-modal__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #667085;
}

.new-ad-rule-modal__hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #667085;
}

.new-ad-rule-modal .form-control,
.new-ad-rule-modal .form-select {
  min-height: 2.375rem;
  border-color: #e4e7ec;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #101828;
  box-shadow: none;
}

.new-ad-rule-modal .form-control:focus,
.new-ad-rule-modal .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.45);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
}

.new-ad-rule-modal__footer {
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 0;
  background: #fff;
}

@media (max-width: 575.98px) {
  #newAdvertisingRuleModal.show {
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
  }

  #newAdvertisingRuleModal .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }

  .new-ad-rule-modal__header,
  .new-ad-rule-modal__body,
  .new-ad-rule-modal__footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .new-ad-rule-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .new-ad-rule-modal__footer .btn {
    width: 100%;
  }
}

[data-bs-theme="dark"] .new-ad-rule-modal__content,
[data-bs-theme="dark"] .new-ad-rule-modal__header,
[data-bs-theme="dark"] .new-ad-rule-modal__footer {
  background: #1c2028;
}

[data-bs-theme="dark"] .new-ad-rule-modal__header .modal-title {
  color: rgba(255, 255, 255, 0.94);
}

[data-bs-theme="dark"] .new-ad-rule-modal__subtitle,
[data-bs-theme="dark"] .new-ad-rule-modal__label,
[data-bs-theme="dark"] .new-ad-rule-modal__hint {
  color: #98a2b3;
}

[data-bs-theme="dark"] .new-ad-rule-modal .form-control,
[data-bs-theme="dark"] .new-ad-rule-modal .form-select {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

/* ── Automation / repricer rules grid ── */
.automation-rules-grid.ag-theme-quartz {
  --ag-row-height: 56px;
  --ag-header-height: 42px;
}

.automation-rules-grid .ag-header-cell-text {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #667085;
}

.automation-rules-grid .ag-row {
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}

.automation-rules-grid .ag-row-hover {
  background: rgba(15, 85, 255, 0.03) !important;
}

.automation-rules-grid .ag-cell {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  overflow: hidden;
}

.automation-rules-grid .ag-cell.automation-rules-grid__desc-cell {
  justify-content: flex-start;
}

.automation-rules-grid__logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2rem;
  padding: 0.25rem 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background: #fff;
}

.automation-rules-grid__logo {
  max-width: 100%;
  max-height: 1.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.automation-rules-grid__desc-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: #101828;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  overflow: hidden;
}

.automation-rules-grid__desc-btn:hover,
.automation-rules-grid__desc-btn:focus-visible {
  color: var(--primary-color, #0f55ff);
  outline: none;
}

.automation-rules-grid__desc-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.automation-rules-grid__type-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.automation-rules-grid__type-icon {
  flex-shrink: 0;
  font-size: 0.6875rem;
  opacity: 0.9;
}

.automation-rules-grid__type-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.automation-rules-grid__type-pill--repricer {
  background: rgba(25, 135, 84, 0.1);
  color: #067647;
}

.automation-rules-grid__type-pill--campaign {
  background: rgba(15, 85, 255, 0.1);
  color: #0f55ff;
}

.automation-rules-grid__type-pill--group,
.automation-rules-grid__type-pill--keyword {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}

.automation-rules-grid__type-pill--category,
.automation-rules-grid__type-pill--target {
  background: rgba(234, 88, 12, 0.1);
  color: #c2410c;
}

.automation-rules-grid__type-pill--product {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.automation-rules-grid__type-pill--default {
  background: rgba(102, 112, 133, 0.12);
  color: #475467;
}

.automation-rules-grid__action-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background: #f9fafb;
  color: #344054;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.automation-rules-grid__action-pill i {
  flex-shrink: 0;
  color: #667085;
}

.automation-rules-grid__toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.automation-rules-grid__activity-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.automation-rules-grid__activity-btn--idle {
  background: #f2f4f7;
  border-color: rgba(16, 24, 40, 0.06);
  color: #667085;
}

.automation-rules-grid__activity-btn--idle:hover {
  background: #eaecf0;
  color: #475467;
}

.automation-rules-grid__activity-btn--live {
  background: rgba(25, 135, 84, 0.1);
  border-color: rgba(25, 135, 84, 0.18);
  color: #067647;
}

.automation-rules-grid__activity-btn--live:hover {
  background: rgba(25, 135, 84, 0.16);
}

.automation-rules-grid__activity-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.6875rem;
  font-weight: 700;
}

.automation-rules-grid__activity-btn--live .automation-rules-grid__activity-count {
  background: #fff;
  color: #067647;
}

.automation-rules-grid__menu-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: #667085;
}

.automation-rules-grid__menu-btn:hover,
.automation-rules-grid__menu-btn:focus-visible {
  color: #344054;
  background: #f2f4f7;
}

.automation-rules-grid__menu-btn.dropdown-toggle::after {
  display: none;
}

@media (max-width: 768px) {
  .automation-rules-grid .ag-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .automation-rules-grid__desc-text {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .automation-rules-grid__action-pill {
    white-space: normal;
  }
}

[data-bs-theme="dark"] .automation-rules-grid .ag-header-cell-text {
  color: #98a2b3;
}

[data-bs-theme="dark"] .automation-rules-grid .ag-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .automation-rules-grid__logo-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .automation-rules-grid__desc-btn {
  color: rgba(255, 255, 255, 0.92);
}

[data-bs-theme="dark"] .automation-rules-grid__action-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
}

[data-bs-theme="dark"] .automation-rules-grid__activity-btn--idle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #98a2b3;
}

[data-bs-theme="dark"] .automation-rules-grid__menu-btn:hover,
[data-bs-theme="dark"] .automation-rules-grid__menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

/* Automation rule modal — scope multiselect fields */
#advertisingRuleModal .automation-scope-field .form-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#advertisingRuleModal .automation-scope-field {
  margin-bottom: 0.75rem !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-scope-field .form-label {
  color: #98a2b3;
}

/* "Alle campagnes, behalve ...": same rhythm as the other scope fields, red chips = excluded */
#advertisingRuleModal .automation-scope-exclude {
  margin-top: 0.75rem;
}

/* Empty: the chip list would take half the width and push the placeholder to the middle */
#advertisingRuleModal .automation-scope-exclude .select2-selection--multiple:not(:has(.select2-selection__choice)) .select2-selection__rendered {
  display: none;
}

#advertisingRuleModal .automation-scope-exclude .select2-selection--multiple:not(:has(.select2-selection__choice)) .select2-search__field {
  height: 1.375rem !important;
  margin: 0;
}

#advertisingRuleModal .automation-scope-exclude .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  background: #fef3f2;
  border-color: rgba(217, 45, 32, 0.2);
  color: #d92d20;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-scope-exclude .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  background: rgba(240, 68, 56, 0.14);
  border-color: rgba(240, 68, 56, 0.3);
  color: #fda29b;
}

#advertisingRuleModal .automation-rule-modal__body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#advertisingRuleModal .automation-rule-modal__header {
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-rule-modal__status:empty {
  display: none;
}

/* Automation rule modal — integrated status strip (header ↔ body) */
#advertisingRuleModal .automation-rule-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 0;
  margin: 0;
}

#advertisingRuleModal .automation-rule-status-banner__main {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 auto;
}

#advertisingRuleModal .automation-rule-status-banner__dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}

#advertisingRuleModal .automation-rule-status-banner__content {
  min-width: 0;
}

#advertisingRuleModal .automation-rule-status-banner__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #344054;
}

#advertisingRuleModal .automation-rule-status-banner__text {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #667085;
}

#advertisingRuleModal .automation-rule-status-banner__action {
  flex-shrink: 0;
}

#advertisingRuleModal .automation-rule-status-banner__action .btn {
  font-weight: 600;
  white-space: nowrap;
}

#advertisingRuleModal .automation-rule-status-banner__activate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(180deg, #2d8cff 0%, #0077ff 100%);
  border: 1px solid #0065d9;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#advertisingRuleModal .automation-rule-status-banner__activate-btn:hover {
  color: #fff;
  background: linear-gradient(180deg, #4da0ff 0%, #0065d9 100%);
  border-color: #005fcc;
  box-shadow: 0 3px 10px rgba(0, 119, 255, 0.28);
  transform: translateY(-1px);
}

#advertisingRuleModal .automation-rule-status-banner__activate-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

#advertisingRuleModal .automation-rule-status-banner__activate-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 119, 255, 0.32);
}

#advertisingRuleModal .automation-rule-status-banner__pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(16, 24, 40, 0.12);
  color: #344054;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

#advertisingRuleModal .automation-rule-status-banner__pause-btn:hover {
  background: #fff;
  border-color: rgba(16, 24, 40, 0.18);
  color: #101828;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-rule-status-banner--inactive {
  background: linear-gradient(90deg, rgba(247, 144, 9, 0.08) 0%, rgba(247, 144, 9, 0.03) 100%);
}

#advertisingRuleModal .automation-rule-status-banner--inactive .automation-rule-status-banner__dot {
  background: #f79009;
  box-shadow: 0 0 0 3px rgba(247, 144, 9, 0.18);
}

#advertisingRuleModal .automation-rule-status-banner--active {
  background: linear-gradient(90deg, rgba(15, 85, 255, 0.07) 0%, rgba(15, 85, 255, 0.02) 100%);
}

#advertisingRuleModal .automation-rule-status-banner--active .automation-rule-status-banner__dot {
  background: #0f55ff;
  box-shadow: 0 0 0 3px rgba(15, 85, 255, 0.16);
  animation: automation-rule-status-pulse 2s ease-in-out infinite;
}

@keyframes automation-rule-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

#advertisingRuleModal .automation-rule-status-banner--active .automation-rule-status-banner__title {
  color: #0f55ff;
}

@media (max-width: 575.98px) {
  #advertisingRuleModal .automation-rule-status-banner {
    flex-wrap: wrap;
    padding: 0.625rem 1rem;
  }

  #advertisingRuleModal .automation-rule-status-banner__text {
    display: none;
  }

  #advertisingRuleModal .automation-rule-status-banner__action {
    width: 100%;
  }

  #advertisingRuleModal .automation-rule-status-banner__action .btn {
    width: 100%;
  }
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-modal__header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner__title {
  color: rgba(255, 255, 255, 0.92);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner__text {
  color: #98a2b3;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner--inactive {
  background: linear-gradient(90deg, rgba(247, 144, 9, 0.14) 0%, rgba(247, 144, 9, 0.04) 100%);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner--active {
  background: linear-gradient(90deg, rgba(0, 119, 255, 0.14) 0%, rgba(0, 119, 255, 0.04) 100%);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner--active .automation-rule-status-banner__title {
  color: #7cb8ff;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner__pause-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner__pause-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner__activate-btn {
  background: linear-gradient(180deg, #3395ff 0%, #0077ff 100%);
  border-color: #3395ff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-status-banner__activate-btn:hover {
  background: linear-gradient(180deg, #4da0ff 0%, #0065d9 100%);
  border-color: #4da0ff;
  box-shadow: 0 3px 12px rgba(0, 119, 255, 0.35);
}

/* Automation rule modal — Aanpassing panel */
#advertisingRuleModal .automation-adjustment-card {
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: none;
}

#advertisingRuleModal .automation-adjustment-card__header {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  background: transparent;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-adjustment-card__title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #344054;
}

#advertisingRuleModal .automation-adjustment-card__body {
  padding: 1rem;
}

#advertisingRuleModal .automation-action-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#advertisingRuleModal .automation-action-panel__block {
  min-width: 0;
}

#advertisingRuleModal .automation-action-panel__block--value {
  padding: 0.875rem;
  background: #f9fafb;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 0.625rem;
}

#advertisingRuleModal .automation-action-panel__footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-action-panel__footer-label {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#advertisingRuleModal .automation-rule-field__label,
#advertisingRuleModal .automation-action-unit-label {
  display: block;
  width: 100%;
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: #64748b;
}

#advertisingRuleModal .automation-action-value-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr);
  gap: 0.875rem 1rem;
  align-items: start;
}

#advertisingRuleModal .automation-action-value-field {
  min-width: 0;
  max-width: 9.5rem;
}

#advertisingRuleModal .automation-action-unit-field {
  min-width: 0;
}

#advertisingRuleModal .automation-action-input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  border-radius: var(--fivex-control-radius, 0.5rem);
}

#advertisingRuleModal .automation-action-input-group .form-control.automation-action-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--fivex-control-height, 38px);
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  border-right: 0;
  border-color: var(--fivex-control-border-color, #d0d5dd);
  border-top-left-radius: var(--fivex-control-radius, 0.5rem);
  border-bottom-left-radius: var(--fivex-control-radius, 0.5rem);
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: #101828;
  background-color: #fff;
  box-shadow: none;
}

#advertisingRuleModal .automation-action-input-group .input-group-text.automation-action-input-suffix {
  flex: 0 0 auto;
  min-width: 2.5rem;
  min-height: var(--fivex-control-height, 38px);
  padding-inline: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #667085;
  background: #f9fafb;
  border-color: var(--fivex-control-border-color, #d0d5dd);
  border-left: 0;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--fivex-control-radius, 0.5rem);
  border-bottom-right-radius: var(--fivex-control-radius, 0.5rem);
}

#advertisingRuleModal .automation-action-input-group:focus-within .form-control.automation-action-input,
#advertisingRuleModal .automation-action-input-group:focus-within .input-group-text.automation-action-input-suffix {
  border-color: var(--fivex-control-focus-border-color, #0f55ff);
}

#advertisingRuleModal .automation-action-input-group:focus-within {
  box-shadow: var(--fivex-control-focus-ring, 0 0 0 0.15rem rgba(15, 85, 255, 0.12));
  border-radius: var(--fivex-control-radius, 0.5rem);
}

#advertisingRuleModal .automation-action-input-group .form-control.automation-action-input:focus {
  box-shadow: none;
}

#advertisingRuleModal .automation-action-input {
  -moz-appearance: textfield;
}

#advertisingRuleModal .automation-action-input::-webkit-outer-spin-button,
#advertisingRuleModal .automation-action-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#advertisingRuleModal .automation-action-native-select,
#advertisingRuleModal .automation-action-panel .form-control:not(.automation-action-input) {
  min-height: var(--fivex-control-height, 38px);
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  border-color: var(--fivex-control-border-color, #d0d5dd);
  border-radius: var(--fivex-control-radius, 0.5rem);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: #101828;
  background-color: #fff;
  box-shadow: none;
}

#advertisingRuleModal .automation-action-native-select:focus,
#advertisingRuleModal .automation-action-panel .form-control:not(.automation-action-input):focus {
  border-color: var(--fivex-control-focus-border-color, #0f55ff);
  box-shadow: var(--fivex-control-focus-ring, 0 0 0 0.15rem rgba(15, 85, 255, 0.12));
}

@media (max-width: 575.98px) {
  #advertisingRuleModal .automation-action-value-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #advertisingRuleModal .automation-action-value-field {
    max-width: none;
  }
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-adjustment-card {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-adjustment-card__header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-adjustment-card__title,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-rule-field__label,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-unit-label,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-panel__footer-label {
  color: #98a2b3;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-panel__block--value {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-panel__footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-input-group .input-group-text.automation-action-input-suffix {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #98a2b3;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-native-select,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-panel .form-control:not(.automation-action-input),
html[data-bs-theme="dark"] #advertisingRuleModal .automation-action-input-group .form-control.automation-action-input {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

/* Automation rule modal — preview DataTables */
#advertisingRuleModal .automation-preview-card {
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: none;
  overflow: hidden;
  background: #fff;
}

#advertisingRuleModal .automation-preview-card__header {
  display: flex;
  align-items: flex-start;
  padding: 1rem 1.125rem;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-preview-card__heading {
  min-width: 0;
}

#advertisingRuleModal .automation-preview-card__title {
  display: flex;
  align-items: center;
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #101828;
}

#advertisingRuleModal .automation-preview-card__subtitle {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #667085;
}

#advertisingRuleModal .automation-preview-card__body {
  background: #fff;
}

#advertisingRuleModal .automation-preview-table-host {
  padding: 0;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  color: #344054;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1rem;
  order: 1;
  margin: 0;
  padding: 0.875rem 1rem;
  background: #fafbfc;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar__left {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar__left > .dt-buttons {
  float: none !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar > .dataTables_filter {
  flex: 0 1 15rem;
  max-width: 15rem;
  margin-left: auto;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar .dataTables_filter input[type="search"],
#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar .dataTables_filter input[type="text"] {
  width: 100%;
  min-height: 2.125rem;
  padding: 0.4375rem 0.75rem 0.4375rem 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: #101828 !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2398a2b3'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.01a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat 0.625rem center / 0.8125rem !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar .dataTables_filter input:focus {
  border-color: var(--primary-color, #0077ff) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.12) !important;
}

#advertisingRuleModal .automation-preview-toolbar-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 2.125rem;
  padding: 0.4375rem 0.875rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

#advertisingRuleModal .automation-preview-toolbar-btn i {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: inherit;
  opacity: 0.75;
}

#advertisingRuleModal .automation-preview-toolbar-btn.buttons-colvis.dropdown-toggle::after {
  margin-left: 0.35rem;
  vertical-align: 0.15em;
  opacity: 0.55;
}

#advertisingRuleModal .automation-preview-toolbar-btn:hover,
#advertisingRuleModal .automation-preview-toolbar-btn:focus-visible {
  color: #101828 !important;
  background: #fff !important;
  border-color: #98a2b3 !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08) !important;
  transform: translateY(-1px);
}

#advertisingRuleModal .automation-preview-toolbar-btn.show,
#advertisingRuleModal .automation-preview-toolbar-btn:active {
  color: #101828 !important;
  background: #f9fafb !important;
  border-color: #0f55ff !important;
  box-shadow: 0 0 0 0.15rem rgba(15, 85, 255, 0.12) !important;
  transform: translateY(0);
}

#advertisingRuleModal .automation-preview-table-host .dt-button-collection {
  margin-top: 0.375rem !important;
  padding: 0.375rem !important;
  background: #fff !important;
  border: 1px solid rgba(16, 24, 40, 0.1) !important;
  border-radius: 0.625rem !important;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12) !important;
}

#advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 2rem;
  margin: 0 !important;
  padding: 0.4375rem 0.625rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #344054 !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.375rem !important;
  box-shadow: none !important;
}

#advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button:hover,
#advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button:focus {
  color: #101828 !important;
  background: #f2f4f7 !important;
}

#advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button-active,
#advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button.dt-button-active {
  color: #0f55ff !important;
  background: rgba(15, 85, 255, 0.08) !important;
  font-weight: 600 !important;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_wrapper > .dataTables_scroll,
#advertisingRuleModal .automation-preview-table-host .dataTables_wrapper > table.dataTable {
  order: 2;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_wrapper > .dataTables_processing {
  display: none !important;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_wrapper > .automation-preview-dt-footer {
  order: 3;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  background: #fafbfc;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer__left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer__left > .dataTables_length {
  float: none !important;
  margin: 0 !important;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #667085;
  white-space: nowrap;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer .dataTables_length select {
  min-width: 3.5rem;
  min-height: 1.875rem;
  padding: 0.125rem 1.75rem 0.125rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #344054 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2398a2b3'%3E%3Cpath d='M4.427 6.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 6H4.604a.25.25 0 0 0-.177.427z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.375rem center !important;
  background-size: 0.875rem !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer__info {
  flex: 1 1 auto;
  min-width: 0;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer__info .dataTables_info {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #667085;
}

#advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer__pages {
  flex: 0 1 auto;
  margin-left: auto;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_scroll,
#advertisingRuleModal .automation-preview-table-host .dataTables_scrollHead,
#advertisingRuleModal .automation-preview-table-host .dataTables_scrollBody {
  border: 0 !important;
}

#advertisingRuleModal .automation-preview-table-host table.dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

#advertisingRuleModal .automation-preview-table-host table.dataTable thead th {
  padding: 0.6875rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #667085;
  background: #f9fafb;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  white-space: nowrap;
  vertical-align: middle;
}

#advertisingRuleModal .automation-preview-table-host table.dataTable tbody td {
  padding: 0.6875rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #344054;
  vertical-align: middle;
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
  font-variant-numeric: tabular-nums;
}

#advertisingRuleModal .automation-preview-table-host table.dataTable tbody tr:last-child td {
  border-bottom: 0;
}

#advertisingRuleModal .automation-preview-table-host table.dataTable tbody tr:hover td {
  background: rgba(15, 85, 255, 0.03);
}

#advertisingRuleModal .automation-preview-table-host table.dataTable tbody td .badge {
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 999px;
}

#advertisingRuleModal .automation-preview-table-host table.dataTable tbody td img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 0.5rem;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

#advertisingRuleModal .automation-preview-table--prices thead th:nth-child(n+5),
#advertisingRuleModal .automation-preview-table--prices tbody td:nth-child(n+5) {
  text-align: right;
}

#advertisingRuleModal .automation-preview-table--prices thead th:nth-child(3),
#advertisingRuleModal .automation-preview-table--prices tbody td:nth-child(3) {
  text-align: center;
  font-variant-numeric: normal;
}

#advertisingRuleModal .automation-preview-table--prices thead th:nth-child(1),
#advertisingRuleModal .automation-preview-table--prices thead th:nth-child(2),
#advertisingRuleModal .automation-preview-table--prices tbody td:nth-child(1),
#advertisingRuleModal .automation-preview-table--prices tbody td:nth-child(2) {
  font-variant-numeric: normal;
}

#advertisingRuleModal .automation-preview-dt-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #344054;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_paginate {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_paginate .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin: 0;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_paginate a.paginate_button,
#advertisingRuleModal .automation-preview-table-host .dataTables_paginate .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #475467 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.375rem !important;
  box-shadow: none !important;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_paginate a.paginate_button.current,
#advertisingRuleModal .automation-preview-table-host .dataTables_paginate .page-item.active .page-link {
  color: var(--primary-color, #0077ff) !important;
  font-weight: 600 !important;
  background: rgba(0, 119, 255, 0.08) !important;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_paginate a.paginate_button:hover:not(.disabled):not(.current),
#advertisingRuleModal .automation-preview-table-host .dataTables_paginate .page-item:not(.disabled) .page-link:hover {
  color: #101828 !important;
  background: rgba(17, 24, 39, 0.06) !important;
}

#advertisingRuleModal .automation-preview-table-host .dataTables_paginate a.paginate_button.disabled,
#advertisingRuleModal .automation-preview-table-host .dataTables_paginate .page-item.disabled .page-link {
  color: #d0d5dd !important;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar > .dataTables_filter {
    flex: 1 1 auto;
    max-width: none;
    margin-left: 0;
  }

  #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer {
    flex-direction: column;
    align-items: stretch;
  }

  #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer__pages {
    margin-left: 0;
  }

  #advertisingRuleModal .automation-preview-table-host .dataTables_paginate .pagination {
    justify-content: center;
  }
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-card__header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-card__title {
  color: rgba(255, 255, 255, 0.92);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-card__subtitle {
  color: #98a2b3;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-card__body {
  background: transparent;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host table.dataTable thead th {
  background: rgba(255, 255, 255, 0.04);
  color: #98a2b3;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host table.dataTable tbody td {
  color: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host table.dataTable tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-toolbar-btn {
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-toolbar-btn:hover,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-toolbar-btn:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-toolbar-btn.show,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-toolbar-btn:active {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(124, 184, 255, 0.45) !important;
  box-shadow: 0 0 0 0.15rem rgba(0, 119, 255, 0.2) !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .dt-button-collection {
  background: #1a1d24 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button {
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button:hover,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button-active,
html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .dt-button-collection .dt-button.dt-button-active {
  color: #7cb8ff !important;
  background: rgba(0, 119, 255, 0.14) !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar .dataTables_filter input[type="search"],
html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-toolbar .dataTables_filter input[type="text"],
html[data-bs-theme="dark"] #advertisingRuleModal .automation-preview-table-host .automation-preview-dt-footer .dataTables_length select {
  color: rgba(255, 255, 255, 0.92) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Automation history — activity calendar */
#automation-history-page .automation-history-calendar-card {
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: none;
  overflow: hidden;
}

#automation-history-page .automation-history-calendar-card__body {
  padding: 1rem 1.25rem 1.25rem;
}

#automation-history-page .automation-history-calendar .gc-calendar {
  padding: 0;
  background: transparent;
  /* calendar-gc ships Inter; the portal font everywhere */
  font-family: inherit;
}

#automation-history-page .automation-history-calendar .gc-calendar-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
}

#automation-history-page .automation-history-calendar .gc-calendar-month-year {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #101828;
}

#automation-history-page .automation-history-calendar .gc-calendar-month-year .year {
  font-weight: 500;
  color: #667085;
}

#automation-history-page .automation-history-calendar .gc-calendar-header button.prev,
#automation-history-page .automation-history-calendar .gc-calendar-header button.next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: 0 !important;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1;
  color: #475467;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 0.5rem;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#automation-history-page .automation-history-calendar .gc-calendar-header button.prev:hover,
#automation-history-page .automation-history-calendar .gc-calendar-header button.next:hover,
#automation-history-page .automation-history-calendar .gc-calendar-header button.prev:focus-visible,
#automation-history-page .automation-history-calendar .gc-calendar-header button.next:focus-visible {
  color: #101828;
  background: #f9fafb;
  border-color: #d0d5dd;
  outline: none;
  box-shadow: none;
}

#automation-history-page .automation-history-calendar .gc-calendar-header .prev {
  margin-left: auto !important;
}

#automation-history-page .automation-history-calendar table.calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.375rem;
  table-layout: fixed;
}

#automation-history-page .automation-history-calendar table.calendar th::before,
#automation-history-page .automation-history-calendar table.calendar tr:not(:last-child) td::before {
  display: none;
}

#automation-history-page .automation-history-calendar table.calendar th {
  position: static;
  padding: 0 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #667085;
  border: 0;
}

#automation-history-page .automation-history-calendar table.calendar td {
  height: 5.25rem;
  width: calc(100% / 7);
  padding: 0.5rem;
  vertical-align: top;
  background: #f9fafb;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 0.625rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#automation-history-page .automation-history-calendar table.calendar td.prev-month,
#automation-history-page .automation-history-calendar table.calendar td.next-month {
  background: #fff;
  opacity: 0.55;
}

#automation-history-page .automation-history-calendar table.calendar td.current-month:hover {
  background: #fff;
  border-color: rgba(0, 119, 255, 0.2);
}

#automation-history-page .automation-history-calendar table.calendar td.event {
  background: #fff;
  border-color: rgba(0, 119, 255, 0.12);
}

#automation-history-page .automation-history-calendar table.calendar td .btn-gc-cell {
  display: block;
  text-decoration: none;
}

#automation-history-page .automation-history-calendar table.calendar td .day-number {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #344054;
}

#automation-history-page .automation-history-calendar table.calendar td.prev-month .day-number,
#automation-history-page .automation-history-calendar table.calendar td.next-month .day-number {
  color: #98a2b3;
}

#automation-history-page .automation-history-calendar table.calendar td .btn-gc-cell.today .day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  color: #fff !important;
  background: var(--primary-color, #0077ff);
  box-shadow: 0 1px 2px rgba(0, 119, 255, 0.24);
}

#automation-history-page .automation-history-calendar .gc-event {
  display: block;
  max-width: 100%;
  margin-top: 0.375rem;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#automation-history-page .automation-history-calendar .gc-event.badge {
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 999px;
}

#automation-history-page .automation-history-calendar .gc-event.cursor-pointer {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#automation-history-page .automation-history-calendar .gc-event.cursor-pointer:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

#automation-history-page .automation-history-calendar__hint {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #667085;
  text-align: center;
  background: #f9fafb;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 0.625rem;
}

#automation-history-page .automation-history-calendar__hint i {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #98a2b3;
}

@media (max-width: 767.98px) {
  #automation-history-page .automation-history-calendar-card__body {
    padding: 0.875rem 0.75rem 1rem;
  }

  #automation-history-page .automation-history-calendar table.calendar {
    border-spacing: 0.25rem;
  }

  #automation-history-page .automation-history-calendar table.calendar td {
    height: 4.25rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
  }

  #automation-history-page .automation-history-calendar table.calendar td .day-number {
    font-size: 0.8125rem;
  }

  #automation-history-page .automation-history-calendar .gc-event {
    display: none;
  }
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar-card {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar .gc-calendar-month-year {
  color: rgba(255, 255, 255, 0.92);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar .gc-calendar-month-year .year {
  color: #98a2b3;
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar .gc-calendar-header button.prev,
html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar .gc-calendar-header button.next {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar table.calendar td {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar table.calendar td.prev-month,
html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar table.calendar td.next-month {
  background: transparent;
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar table.calendar td .day-number {
  color: rgba(255, 255, 255, 0.88);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-calendar__hint {
  color: #98a2b3;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Automation history — log AG Grid */
#automation-history-page .automation-history-log-card {
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: none;
  overflow: hidden;
}

#automation-history-page .automation-history-log-card__body {
  padding: 0.875rem 1rem 1rem;
}

#automation-history-page .automation-history-log-grid__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

#automation-history-page .automation-history-log-grid__search {
  width: 100%;
  max-width: 16rem;
  margin: 0;
}

#automation-history-page .automation-history-log-grid__search-input {
  min-height: 2rem;
  padding-left: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-color: #e4e7ec;
  border-radius: 0.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2398a2b3'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.01a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat 0.625rem center / 0.8125rem;
  box-shadow: none;
}

#automation-history-page .automation-history-log-grid {
  width: 100%;
  height: min(520px, calc(100vh - 28rem));
  min-height: 320px;
}

/* Empty overlay: span full grid width (not just min column track width) */
#automation-history-page .automation-history-log-grid .ag-center-cols-viewport,
#automation-history-page .automation-history-log-grid .ag-center-cols-container,
#automation-history-page .automation-history-log-grid .ag-header-viewport,
#automation-history-page .automation-history-log-grid .ag-header-container {
  min-width: 100%;
}

#automation-history-page .automation-history-log-grid .ag-body-viewport {
  min-width: 100%;
}

#automation-history-page .automation-history-log-grid .ag-overlay-loading-wrapper,
#automation-history-page .automation-history-log-grid .ag-overlay-no-rows-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#automation-history-page .automation-history-log-grid .ag-overlay-loading-center,
#automation-history-page .automation-history-log-grid .ag-overlay-no-rows-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#automation-history-page .automation-history-log-grid ag-overlay-wrapper,
#automation-history-page .automation-history-log-grid .ag-overlay {
  width: 100%;
  height: 100%;
}

#automation-history-page .automation-history-log-grid .ag-overlay-loading-wrapper {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state {
  min-height: min(280px, calc(100% - 2rem));
  padding: 2rem 1.5rem;
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state__icon {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  color: #0f55ff;
  background: rgba(15, 85, 255, 0.08);
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state__title {
  font-size: 1rem;
  color: #344054;
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state__message {
  max-width: 26rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state__bars {
  margin-top: 1.25rem;
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state__bars span {
  background: rgba(15, 85, 255, 0.14);
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state__bars span:nth-child(2) {
  background: rgba(15, 85, 255, 0.28);
}

#automation-history-page .automation-history-log-grid .ag-grid-empty-state__bars span:nth-child(3) {
  background: rgba(15, 85, 255, 0.42);
}

#automation-history-page .automation-history-log-grid .ag-cell img {
  display: block;
  max-width: 3.75rem;
  max-height: 1.75rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

#automation-history-page .automation-history-log-grid .ag-cell .badge {
  font-size: 0.6875rem;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  #automation-history-page .automation-history-log-grid__toolbar {
    justify-content: stretch;
  }

  #automation-history-page .automation-history-log-grid__search {
    max-width: none;
  }

  #automation-history-page .automation-history-log-grid {
    height: min(460px, calc(100vh - 24rem));
    min-height: 280px;
  }
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-card {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid__search-input {
  color: rgba(255, 255, 255, 0.92);
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid .ag-overlay-loading-wrapper {
  background: rgba(22, 26, 35, 0.92);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid .ag-grid-empty-state__icon {
  color: #7cb8ff;
  background: rgba(0, 119, 255, 0.14);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid .ag-grid-empty-state__title {
  color: rgba(255, 255, 255, 0.92);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid .ag-grid-empty-state__message {
  color: #98a2b3;
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid .ag-grid-empty-state__bars span {
  background: rgba(96, 165, 250, 0.2);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid .ag-grid-empty-state__bars span:nth-child(2) {
  background: rgba(96, 165, 250, 0.35);
}

html[data-bs-theme="dark"] #automation-history-page .automation-history-log-grid .ag-grid-empty-state__bars span:nth-child(3) {
  background: rgba(96, 165, 250, 0.5);
}

#advertisingRuleModal .select2-container--bootstrap-5 .select2-selection--single {
  display: flex;
  align-items: center;
  min-height: var(--fivex-control-height, 38px);
  padding-top: 0;
  padding-bottom: 0;
  border-color: var(--fivex-control-border-color, #d0d5dd);
  border-radius: var(--fivex-control-radius, 0.5rem);
  font-size: 0.8125rem;
  font-weight: 500;
}

#advertisingRuleModal .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0.7rem;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #101828;
}

#advertisingRuleModal .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  align-self: center;
  height: 1.5rem;
  width: 2rem;
}

html[data-bs-theme="dark"] #advertisingRuleModal .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: rgba(255, 255, 255, 0.92);
}

/* Automation rule modal — Vereisten header toolbar */
#advertisingRuleModal .automation-requirements-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.875rem 1rem;
  background: #fff;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

#advertisingRuleModal .automation-requirements-card__title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #344054;
}

#advertisingRuleModal .automation-requirements-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-left: auto;
  width: 100%;
}

@media (min-width: 768px) {
  #advertisingRuleModal .automation-requirements-toolbar {
    width: auto;
    max-width: 28rem;
  }
}

#advertisingRuleModal .automation-requirements-toolbar__field {
  flex: 1 1 0;
  min-width: 0;
}

#advertisingRuleModal .automation-requirements-toolbar__field--period {
  flex: 1 1 9.5rem;
}

#advertisingRuleModal .automation-requirements-toolbar__field--match {
  flex: 1.4 1 12rem;
}

#advertisingRuleModal .automation-requirements-toolbar__field .select2-container {
  width: 100% !important;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirements-card__header {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirements-card__title {
  color: rgba(255, 255, 255, 0.92);
}

/* Automation rule modal — requirement rows */
#advertisingRuleModal #requirements_wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

#advertisingRuleModal .automation-requirement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  padding: 0.875rem;
  background: #f9fafb;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 0.625rem;
}

#advertisingRuleModal .automation-requirement__match {
  padding-bottom: 0.5rem;
}

#advertisingRuleModal .automation-requirement__match-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

#advertisingRuleModal .automation-requirement__match-badge--all {
  background: rgba(15, 85, 255, 0.1);
  color: #0f55ff;
}

#advertisingRuleModal .automation-requirement__match-badge--any {
  background: rgba(239, 176, 41, 0.16);
  color: #9a6700;
}

#advertisingRuleModal .automation-requirement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0.625rem;
  min-width: 0;
}

#advertisingRuleModal .automation-requirement__field {
  min-width: 0;
}

#advertisingRuleModal .automation-requirement__label {
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#advertisingRuleModal .automation-requirement__control:not(.select2-hidden-accessible),
#advertisingRuleModal .automation-requirement__value .form-control,
#advertisingRuleModal .automation-requirement__value .select2-container,
#advertisingRuleModal .automation-requirement__field .select2-container {
  width: 100% !important;
}

#advertisingRuleModal .automation-requirement__control:not(.select2-hidden-accessible),
#advertisingRuleModal .automation-requirement__value .form-control {
  min-height: var(--fivex-control-height, 38px);
  resize: none !important;
  border-color: var(--fivex-control-border-color, #d0d5dd);
  border-radius: var(--fivex-control-radius, 0.5rem);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: none;
}

#advertisingRuleModal .requirement-option.form-select {
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  line-height: 1.5;
  color: #101828;
  background-color: #fff;
  cursor: pointer;
}

#advertisingRuleModal select.automation-requirement__control.select2-hidden-accessible {
  width: 1px !important;
  min-height: 0 !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

#advertisingRuleModal .automation-requirement__number-input {
  -moz-appearance: textfield;
}

#advertisingRuleModal .automation-requirement__number-input::-webkit-outer-spin-button,
#advertisingRuleModal .automation-requirement__number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#advertisingRuleModal .automation-requirement__time-input {
  max-width: 100%;
}

#advertisingRuleModal .automation-requirement__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: var(--fivex-control-height, 38px);
  padding: 0;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: var(--fivex-control-radius, 0.5rem);
  color: #667085;
  background: #fff;
}

#advertisingRuleModal .automation-requirement__remove:hover,
#advertisingRuleModal .automation-requirement__remove:focus-visible {
  color: #d92d20;
  border-color: rgba(217, 45, 32, 0.25);
  background: rgba(217, 45, 32, 0.04);
}

#advertisingRuleModal .automation-requirements-add-btn {
  border-radius: 999px;
  padding-inline: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-color: rgba(16, 24, 40, 0.12);
}

#advertisingRuleModal .automation-requirements-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  border: 1px dashed rgba(16, 24, 40, 0.14);
  border-radius: 0.75rem;
  background: #fafbfc;
}

#advertisingRuleModal .automation-requirements-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: rgba(15, 85, 255, 0.08);
  color: #0f55ff;
  font-size: 1rem;
}

#advertisingRuleModal .automation-requirements-empty__title {
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #344054;
}

#advertisingRuleModal .automation-requirements-empty__text {
  max-width: 28rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: #667085;
}

@media (max-width: 991.98px) {
  #advertisingRuleModal .automation-requirement {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "match remove"
      "grid grid";
  }

  #advertisingRuleModal .automation-requirement__match {
    grid-area: match;
    padding-bottom: 0;
  }

  #advertisingRuleModal .automation-requirement__grid {
    grid-area: grid;
    grid-template-columns: 1fr;
  }

  #advertisingRuleModal .automation-requirement__remove {
    grid-area: remove;
    justify-self: end;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #advertisingRuleModal .automation-requirement__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #advertisingRuleModal .automation-requirement__field--value {
    grid-column: 1 / -1;
  }
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirement {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirement__label {
  color: #98a2b3;
}

html[data-bs-theme="dark"] #advertisingRuleModal .requirement-option.form-select {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirement__remove {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #98a2b3;
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirements-empty {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirements-empty__title {
  color: rgba(255, 255, 255, 0.92);
}

html[data-bs-theme="dark"] #advertisingRuleModal .automation-requirements-empty__text {
  color: #98a2b3;
}

/* ── Bulk edit dropdown — hidden until rows selected, primary when visible ── */
.bulk-edit-button-wrapper.d-none,
.edit-selection-wrapper.d-none,
[class*="bulk-"][class*="-edit-button-wrapper"].d-none {
	display: none !important;
}

.bulk-edit-button-wrapper.d-inline-flex,
.edit-selection-wrapper.d-inline-flex,
[class*="bulk-"][class*="-edit-button-wrapper"].d-inline-flex {
	display: inline-flex !important;
	align-items: center;
}

.dt-buttons > .bulk-edit-button-wrapper.d-none,
.dt-buttons > .dropdown[class*="bulk-"][class*="-edit-button-wrapper"].d-none {
	display: none !important;
}

.dt-buttons > .bulk-edit-button-wrapper:not(.d-none),
.dt-buttons > .dropdown[class*="bulk-"][class*="-edit-button-wrapper"].d-inline-flex {
	display: inline-flex !important;
	align-items: center;
}

/* ── Actions dropdown menu (bulk edit toolbars) ── */
.fivex-actions-dropdown-menu {
	min-width: 13.75rem;
	padding: 0.375rem;
	border: 1px solid #eaecf0;
	border-radius: 0.625rem;
	box-shadow:
		0 8px 24px rgba(16, 24, 40, 0.12),
		0 2px 6px rgba(16, 24, 40, 0.06);
}

.fivex-actions-dropdown-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.4375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	color: #344054;
	white-space: nowrap;
	transition:
		background-color 0.12s ease,
		color 0.12s ease;
}

.fivex-actions-dropdown-menu .dropdown-item:hover,
.fivex-actions-dropdown-menu .dropdown-item:focus {
	background-color: #f2f4f7;
	color: #101828;
}

.fivex-actions-dropdown-menu .dropdown-item:active {
	background-color: #eaecf0;
	color: #101828;
}

.fivex-actions-dropdown-menu .dropdown-item > i[class*="fa-"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: auto;
	margin: 0 !important;
	font-size: 0.8125rem;
	flex-shrink: 0;
	color: #667085;
	opacity: 0.9;
}

.fivex-actions-dropdown-menu .dropdown-item:hover > i[class*="fa-"],
.fivex-actions-dropdown-menu .dropdown-item:focus > i[class*="fa-"] {
	color: #475467;
	opacity: 1;
}

.fivex-actions-dropdown-menu .dropdown-item:has(.fa-trash) {
	margin-top: 0.25rem;
	padding-top: 0.625rem;
	border-top: 1px solid #f2f4f7;
}

.fivex-actions-dropdown-menu .dropdown-item:has(.fa-trash) > i[class*="fa-"] {
	color: #667085;
}

html[data-bs-theme="dark"] .fivex-actions-dropdown-menu {
	background: #1d2939;
	border-color: #344054;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .fivex-actions-dropdown-menu .dropdown-item {
	color: #e4e7ec;
}

html[data-bs-theme="dark"] .fivex-actions-dropdown-menu .dropdown-item:hover,
html[data-bs-theme="dark"] .fivex-actions-dropdown-menu .dropdown-item:focus {
	background-color: rgba(255, 255, 255, 0.06);
	color: #f9fafb;
}

html[data-bs-theme="dark"] .fivex-actions-dropdown-menu .dropdown-item > i[class*="fa-"] {
	color: #98a2b3;
}

html[data-bs-theme="dark"] .fivex-actions-dropdown-menu .dropdown-item:hover > i[class*="fa-"],
html[data-bs-theme="dark"] .fivex-actions-dropdown-menu .dropdown-item:focus > i[class*="fa-"] {
	color: #e4e7ec;
}

html[data-bs-theme="dark"] .fivex-actions-dropdown-menu .dropdown-item:has(.fa-trash) {
	border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── fx-border-glow ──────────────────────────────────────────────────────────
   Wrap any button/input in:
     <div class="fx-border-glow">
       <span class="fx-border-glow__glow" aria-hidden="true"></span>
       <span class="fx-border-glow__line" aria-hidden="true"></span>
       <button …>…</button>
     </div>
   Two bright spots 180° apart rotate clockwise along the border.
   __glow  = blurred halo (same gradient, filter:blur behind).
   __line  = crisp bright edge on top.
   Both are oversized rotating squares clipped by overflow:hidden on the wrapper;
   only the 2px padding gap is visible, forming the animated border.
   ─────────────────────────────────────────────────────────────────────────── */
.fx-border-glow {
    position: relative;
    display: inline-flex;
    width: fit-content;
    flex-shrink: 0;
    padding: 3px;
    border-radius: calc(var(--fx-border-radius, 0.375rem) + 3px);
    overflow: hidden;
}
.fx-border-glow__glow,
.fx-border-glow__line {
    position: absolute;
    width: max(250%, 400px);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    pointer-events: none;
    /* Blue #0077FF with bright white hotspot */
    background: conic-gradient(
        from 0deg,
        #0055cc                    0deg,
        #0077ff                   50deg,
        #66b3ff                   80deg,
        #ffffff                   90deg,
        #66b3ff                  100deg,
        #0077ff                  130deg,
        #0055cc                  180deg,
        #0077ff                  230deg,
        #66b3ff                  260deg,
        #ffffff                  270deg,
        #66b3ff                  280deg,
        #0077ff                  310deg,
        #0055cc                  360deg
    );
    animation: fxBorderSpin 4s linear infinite;
}
.fx-border-glow__glow {
    transform: translate(-50%, -50%) rotate(0deg);
    filter: blur(12px);
    opacity: 1;
}
.fx-border-glow__line {
    transform: translate(-50%, -50%) rotate(0deg);
}
.fx-border-glow > *:not(.fx-border-glow__glow):not(.fx-border-glow__line) {
    position: relative;
    z-index: 1;
}
@keyframes fxBorderSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── btn-ai ──────────────────────────────────────────────────────────────────
   Pure-white button for use inside fx-border-glow. Same shape as btn-light
   but no grey tint — background, border and hover all stay #fff.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-ai {
    color: #0077ff;
    background-color: #ffffff;
    border-color: #ffffff;
    font-weight: 500;
}
.btn-ai:hover,
.btn-ai:focus,
.btn-ai:active,
.btn-ai.active {
    color: #0055cc;
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: none;
}
.btn-ai:focus-visible {
    outline: 2px solid #0077ff;
    outline-offset: 2px;
}
/* Bootstrap's default :disabled opacity fade dulls the white button while the
   fx-border-glow ring keeps spinning brightly around it — keep full color/opacity
   during the "Genereren..." loading state so button and glow stay consistent. */
.btn-ai:disabled,
.btn-ai.disabled {
    opacity: 1;
    color: #0077ff;
    background-color: #ffffff;
    border-color: #ffffff;
    cursor: default;
}
[data-bs-theme="dark"] .btn-ai {
    color: #66b3ff;
    background-color: #1a1a2e;
    border-color: #1a1a2e;
}
[data-bs-theme="dark"] .btn-ai:hover,
[data-bs-theme="dark"] .btn-ai:focus {
    background-color: #16213e;
    border-color: #16213e;
}
[data-bs-theme="dark"] .btn-ai:disabled,
[data-bs-theme="dark"] .btn-ai.disabled {
    color: #66b3ff;
    background-color: #1a1a2e;
    border-color: #1a1a2e;
}
/* ── FiveX Copilot Panel (fxcp) ──────────────────────────────────────────────
   Shared component for inline copilot guides (imports, company goals, etc.).
   Set --fxcp-from / --fxcp-to on the wrapper to change the accent gradient.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes fxcp-enter {
    from { opacity:0; transform: translate(-50%,-50%) scale(.88); }
    to   { opacity:1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes fxcp-leave {
    from { opacity:1; transform: translate(-50%,-50%) scale(1); }
    to   { opacity:0; transform: translate(-50%,-50%) scale(.9); }
}
@keyframes fxcp-msg-in {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fxcp-avatar-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
    50%      { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}
@keyframes fxcp-pill-in {
    from { opacity:0; transform: translateY(14px) scale(.9); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
.fxcp-panel {
    --fxcp-from: var(--primary-color, #3b82f6);
    --fxcp-to:   var(--primary-darker-color, #6366f1);
    position: fixed;
    z-index: 1090;
    left: 50%;
    top: 50%;
    width: 390px;
    max-height: 460px;
    background: var(--bs-card-bg, #fff);
    border-radius: 22px;
    box-shadow: 0 28px 72px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Intercom's launcher iframe ships with a z-index far above any app-level value by design, so
   raising .fxcp-panel's own z-index can never out-stack it — hide the launcher instead while the
   panel is open (mirrors emails.php's syncEmailEditingIntercom() / .email-editing-intercom-hidden). */
body.fxcp-panel-open #intercom-container,
body.fxcp-panel-open .intercom-launcher,
body.fxcp-panel-open .intercom-lightweight-app,
body.fxcp-panel-open .intercom-messenger-frame,
body.fxcp-panel-open iframe[name="intercom-messenger-frame"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
.fxcp-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--fxcp-from) 0%, var(--fxcp-to) 100%);
    flex-shrink: 0;
    user-select: none;
}
.fxcp-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
    animation: fxcp-avatar-pulse 3s ease-in-out infinite;
}
.fxcp-titles { flex: 1; min-width: 0; }
.fxcp-title  { font-size: .9rem; font-weight: 700; color: #fff; line-height: 1.2; }
.fxcp-subtitle { font-size: .74rem; color: rgba(255,255,255,.8); margin-top: 1px; }
.fxcp-minimize {
    background: rgba(255,255,255,.18);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .72rem;
    flex-shrink: 0;
    transition: background .15s;
}
.fxcp-minimize:hover { background: rgba(255,255,255,.35); }
.fxcp-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    scroll-behavior: smooth;
}
.fxcp-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: fxcp-msg-in .25s ease both;
}
.fxcp-msg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fxcp-from), var(--fxcp-to));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .6rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.fxcp-msg-bubble {
    background: var(--bs-tertiary-bg, #f3f5f9);
    border-radius: 0 13px 13px 13px;
    padding: 10px 14px;
    font-size: .81rem;
    line-height: 1.55;
    color: var(--bs-body-color);
    max-width: 295px;
}
[data-bs-theme="dark"] .fxcp-msg-bubble { background: rgba(255,255,255,.07); }
/* Inline reference chips */
.fxcp-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 3px;
    margin: 0 .2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff, #eef2ff);
    border: 1px solid rgba(99,102,241,.25);
    color: #4f46e5;
    font-size: .73rem;
    font-weight: 600;
    cursor: default;
    vertical-align: middle;
    line-height: 1.4;
}
.fxcp-ref-chip.is-clickable {
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
}
.fxcp-ref-chip.is-clickable:hover {
    background: linear-gradient(135deg, #dbeafe, #e0e7ff);
    box-shadow: 0 2px 8px rgba(99,102,241,.2);
    transform: translateY(-1px);
}
[data-bs-theme="dark"] .fxcp-ref-chip {
    background: rgba(99,102,241,.15);
    border-color: rgba(99,102,241,.3);
    color: #a5b4fc;
}
/* Inline "asButton" chip (e.g. "Maak report" in the tutorial) — a real btn-outline-primary
   button dropped into a text flow reads as too large and sits flush against the surrounding
   words with no visible gap, so trim it down a notch and give it breathing room either side. */
.fxcp-inline-btn {
    font-size: .72rem;
    padding: .18rem .55rem;
    margin: 0 .25rem;
    vertical-align: middle;
}
/* Page element highlight */
@keyframes fxcp-page-glow-anim {
    0%   { outline-color: rgba(59,130,246,.9); box-shadow: 0 0 0 0   rgba(59,130,246,.5); }
    50%  { outline-color: rgba(59,130,246,.5); box-shadow: 0 0 0 10px rgba(59,130,246,0); }
    100% { outline-color: rgba(59,130,246,.9); box-shadow: 0 0 0 0   rgba(59,130,246,.5); }
}
.fxcp-page-glow {
    outline: 2.5px solid rgba(59,130,246,.9) !important;
    outline-offset: 4px !important;
    border-radius: 6px !important;
    animation: fxcp-page-glow-anim 1s ease 2.5 both !important;
}
/* Collapsed pill */
.fxcp-pill {
    --fxcp-from: var(--primary-color, #3b82f6);
    --fxcp-to:   var(--primary-darker-color, #6366f1);
    position: fixed;
    /* Intercom's default launcher uses vertical_padding:20 + a 48px button (no
       horizontal_padding/vertical_padding override is set in intercomSettings anywhere in
       the codebase) — match bottom + height so both buttons sit on the same horizontal line. */
    bottom: 20px;
    right: 90px;
    z-index: 1090;
    display: none;
    align-items: center;
    gap: 9px;
    padding: 10px 20px 10px 13px;
    background: linear-gradient(135deg, var(--fxcp-from) 0%, var(--fxcp-to) 100%);
    color: #fff;
    border: none;
    border-radius: 30px;
    box-shadow: 0 6px 28px rgba(0,0,0,.2);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.fxcp-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,.25); }
.fxcp-pill-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    overflow: hidden;
}
.fxcp-crosshair-icon { animation: fxcp-crosshair-spin 2.4s linear infinite; }
@keyframes fxcp-crosshair-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 575px) {
    .fxcp-panel { width: calc(100vw - 32px); max-height: 70vh; }
    .fxcp-pill  { right: 16px; bottom: 16px; }
}
/* ── /FiveX Copilot Panel ─────────────────────────────────────────────────── */

/* ── FiveX Copilot — Listing Analyse tutorial variant (fxcp-panel--tutorial) ─
   Docked bottom-right instead of centered (the base panel is meant to overlay the whole
   page; a tutorial needs to leave the highlighted element visible), plus a step rail,
   action row and footer that the base "message drip" panels don't need. */
@keyframes fxcp-dock-enter {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fxcp-dock-leave {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(24px) scale(.96); }
}
.fxcp-panel--tutorial {
    left: auto;
    top: auto;
    right: 24px;
    bottom: 24px;
    transform: none;
    width: 410px;
    max-height: min(72vh, 560px);
    --fxcp-from: #0d6efd;
    --fxcp-to: #6366f1;
}
.fxcp-panel--tutorial.is-drawer-open { right: auto; left: 24px; }
.fxcp-panel--tutorial.is-behind-modal { display: none !important; }
/* Minimized pill (bottom-right) needs the same treatment — a modal doesn't always cover that
   corner, especially on mobile, so it would otherwise keep floating on top of/next to it. */
#fx-listing-tutorial-pill.is-behind-modal { display: none !important; }
.fxcp-steps {
    display: flex;
    gap: 6px;
    padding: 10px 18px 0;
    flex-shrink: 0;
}
.fxcp-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 6px 4px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    text-align: left;
}
.fxcp-step-dot {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    background: var(--bs-tertiary-bg, #f1f3f5);
}
.fxcp-step.is-current { color: var(--bs-body-color, #212529); }
.fxcp-step.is-current .fxcp-step-dot {
    background: linear-gradient(135deg, var(--fxcp-from), var(--fxcp-to));
    color: #fff;
}
.fxcp-step.is-done .fxcp-step-dot { background: #d1fae5; color: #065f46; }
.fxcp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0 18px 14px;
    flex-shrink: 0;
}
.fxcp-footer {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
    flex-shrink: 0;
}
[data-bs-theme="dark"] .fxcp-step-dot { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fxcp-footer { border-top-color: rgba(255,255,255,.08); }
@media (max-width: 575px) {
    .fxcp-panel--tutorial { right: 16px; left: 16px; bottom: 16px; width: auto; max-height: 78vh; }
    .fxcp-panel--tutorial.is-drawer-open { left: 16px; right: 16px; }
    .fxcp-step span:last-child { display: none; }
}
/* ── /Listing Analyse tutorial variant ────────────────────────────────────── */

/* ── Intercom banner offset fix ──────────────────────────────────────────── */
/* Intercom injects body{padding-top} for announcement banners. Without this  */
/* the fixed-height .wrapper extends below the viewport, cutting off content. */
body > .wrapper {
    height: calc(100vh - var(--fivex-body-top-offset, 0px));
    max-height: calc(100vh - var(--fivex-body-top-offset, 0px));
    min-height: calc(100dvh - var(--fivex-body-top-offset, 0px));
}
/* ── /Intercom banner offset fix ─────────────────────────────────────────── */


/* ── CRM sales dialer ──────────────────────────────────────────────────── */
.sales-dialer-header-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
}
.sales-dialer-header-actions .btn {
    border-radius: 0.55rem;
    font-weight: 600;
    box-shadow: none;
}
.sales-dialer-header-actions .sales-dialer-status {
    padding: 0.3rem 0.65rem;
    font-size: 0.7rem;
}
.sales-dialer-more > .dropdown-toggle {
    width: 2.15rem;
    min-width: 2.15rem;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}
.sales-dialer-more > .dropdown-toggle::after {
    display: none;
}
.sales-dialer-more__menu {
    min-width: 14.5rem;
    padding: 0.4rem;
    z-index: 1080;
    border: 1px solid var(--sd-border, var(--bs-border-color, #dee6ed));
    border-radius: 0.7rem;
}
.sales-dialer-more__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    border-radius: 0.45rem;
    font-size: 0.84rem;
    font-weight: 600;
}
.sales-dialer-more__menu .dropdown-item i {
    width: 1.05rem;
    text-align: center;
    color: var(--sd-muted, var(--bs-secondary-color));
}
.sales-dialer-header-actions .sales-dialer-turbo {
    min-height: 1.9rem;
    padding: 0.15rem 0.7rem 0.15rem 0.55rem;
}
.sales-dialer-header-actions .sales-dialer-turbo .form-check-input {
    width: 2em;
    height: 1.1em;
}
.sales-dialer-header-actions .sales-dialer-turbo .form-check-label {
    font-size: 0.75rem;
}
.sales-dialer-page {
    --sd-accent: var(--primary, #0077ff);
    --sd-accent-rgb: var(--primary-rgb, 0, 119, 255);
    --sd-success: var(--bs-success, #3cba75);
    --sd-surface: rgb(var(--bs-card-bg-rgb, 255, 255, 255));
    --sd-muted: var(--bs-secondary-color, #6c757d);
    --sd-border: var(--bs-border-color, #dee6ed);
    --sd-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    min-width: 0;
    max-width: 100%;
}
.sales-dialer-campaigns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: 999px;
    box-shadow: var(--sd-shadow);
}
.sales-dialer-campaign {
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent;
    color: var(--sd-muted);
    box-shadow: none !important;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.4rem 0.9rem;
}
.sales-dialer-campaign:hover {
    background: rgba(var(--sd-accent-rgb), 0.08);
    color: var(--sd-accent);
}
.sales-dialer-campaign.is-active,
a.sales-dialer-campaign.is-active {
    background: var(--sd-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.sales-dialer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1.1rem;
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: 0.75rem;
    box-shadow: var(--sd-shadow);
}
.sales-dialer-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.sales-dialer-history-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: var(--sd-muted);
    font-size: 0.875rem;
}
.sales-dialer-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.7rem;
    background: var(--sd-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.sales-dialer-history-row:hover,
.sales-dialer-history-row:focus {
    border-color: rgba(var(--sd-accent-rgb), 0.45);
    background: rgba(var(--sd-accent-rgb), 0.04);
    box-shadow: 0 0 0 3px rgba(var(--sd-accent-rgb), 0.12);
}
.sales-dialer-history-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.sales-dialer-history-row__main strong {
    font-size: 0.9rem;
    line-height: 1.25;
}
.sales-dialer-history-row__main span {
    font-size: 0.78rem;
    color: var(--sd-muted);
}
.sales-dialer-history-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--sd-muted);
}
.sales-dialer-history-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--sd-accent-rgb), 0.1);
    color: var(--sd-accent);
    font-weight: 700;
}
@media (max-width: 575.98px) {
    #salesDialerHistoryModal.show {
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
    }
    #salesDialerHistoryModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
    }
    .sales-dialer-history-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .sales-dialer-history-row__meta {
        justify-content: flex-start;
    }
}
.sales-dialer-turbo.form-check,
.sales-dialer-turbo.form-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    min-height: 2.15rem;
    padding: 0.28rem 0.85rem 0.28rem 0.7rem;
    border: 1px solid var(--sd-border);
    border-radius: 999px;
    background: var(--sd-surface);
    flex-shrink: 0;
}
.sales-dialer-turbo .form-check-input {
    float: none;
    position: static;
    flex-shrink: 0;
    width: 2.4em;
    height: 1.2em;
    margin: 0;
}
.sales-dialer-turbo .form-check-label {
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sd-muted);
    cursor: pointer;
    white-space: nowrap;
}
.sales-dialer-page.is-turbo .sales-dialer-turbo {
    border-color: rgba(var(--sd-accent-rgb), 0.35);
    background: rgba(var(--sd-accent-rgb), 0.08);
}
.sales-dialer-page.is-turbo .sales-dialer-turbo .form-check-label {
    color: var(--sd-accent);
}
.sales-dialer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--sd-muted) 10%, transparent);
    color: var(--sd-muted);
}
.sales-dialer-status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.sales-dialer-page.is-running .sales-dialer-status {
    background: rgba(var(--sd-accent-rgb), 0.12);
    color: var(--sd-accent);
}
.sales-dialer-page.is-running .sales-dialer-status__dot {
    background: var(--sd-accent);
    box-shadow: 0 0 0 3px rgba(var(--sd-accent-rgb), 0.2);
    animation: sales-dialer-pulse 1.6s ease-in-out infinite;
}
@keyframes sales-dialer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.sales-dialer-pace {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 100%;
    padding: 0.55rem 0.95rem;
    border-radius: 0.7rem;
    background: rgba(var(--sd-accent-rgb), 0.06);
}
.sales-dialer-pace__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}
.sales-dialer-pace__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sd-muted);
    line-height: 1.2;
    margin-bottom: 0.1rem;
    white-space: nowrap;
}
.sales-dialer-pace__value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--sd-accent);
}
.sales-dialer-pace__chart {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.4rem;
    overflow: hidden;
}
.sales-dialer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 0 0 auto;
}
.sales-dialer-stat {
    min-width: 8.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.7rem;
    border: 0;
    background: rgba(var(--sd-accent-rgb), 0.06);
}
.sales-dialer-stat__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sd-muted);
    margin-bottom: 0.1rem;
}
.sales-dialer-stat__value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}
.sales-dialer-stat--timer .sales-dialer-stat__value {
    color: var(--sd-accent);
}
.sales-dialer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (min-width: 992px) {
    .sales-dialer-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
    }
}
.sales-dialer-card,
.sales-dialer-queue-card {
    background: rgb(var(--bs-card-bg-rgb, 255, 255, 255));
    border: 1px solid var(--bs-border-color, #dee6ed);
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: visible;
    flex-shrink: 0;
    height: auto;
    max-height: none;
    min-width: 0;
    max-width: 100%;
}
.sales-dialer-card__header {
    padding: 1.1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--bs-border-color, #dee6ed);
}
.sales-dialer-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-body-color);
}
.sales-dialer-card__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
.sales-dialer-card__body {
    padding: 1.25rem;
}
.sales-dialer-overview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.sales-dialer-overview__header .sales-dialer-overview-search {
    width: 260px;
    max-width: 100%;
}
.sales-dialer-overview__body {
    padding: 0;
    transition: opacity 0.15s ease;
}
.sales-dialer-overview.is-loading .sales-dialer-overview__body {
    opacity: 0.45;
}
.sales-dialer-overview__body #salesDialerOverviewGrid {
    border: 0;
    border-radius: 0 0 0.85rem 0.85rem;
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .sales-dialer-overview__header .sales-dialer-overview-search {
        width: 100%;
    }
}
#salesDialerCallCard .sales-dialer-card__header {
    padding: 0.85rem 1rem 0.55rem;
}
#salesDialerCallCard .sales-dialer-card__body {
    padding: 0.7rem 1rem 0.85rem;
}
.sales-dialer-empty,
.sales-dialer-queue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.sales-dialer-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(var(--primary-rgb, 0, 119, 255), 0.1);
    color: var(--primary, #0077ff);
    font-size: 1.25rem;
}
.sales-dialer-empty__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}
.sales-dialer-empty__text {
    margin: 0;
    max-width: 22rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
.sales-dialer-setup {
    max-width: 36rem;
    margin: 0.5rem auto 0;
}
.sales-dialer-setup__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1.75rem 2.25rem;
    text-align: center;
}
.sales-dialer-setup .sales-dialer-empty__icon {
    width: 4.25rem;
    height: 4.25rem;
    font-size: 1.5rem;
}
.sales-dialer-setup .sales-dialer-empty__title {
    font-size: 1.25rem;
}
.sales-dialer-setup .sales-dialer-empty__text {
    max-width: 26rem;
}
.sales-dialer-setup__steps {
    list-style: none;
    width: 100%;
    max-width: 24rem;
    margin: 0.35rem 0 0.5rem;
    padding: 0;
    text-align: left;
}
.sales-dialer-setup__steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--sd-border);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--bs-body-color);
}
.sales-dialer-setup__steps li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.sales-dialer-setup__num {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--sd-accent-rgb), 0.12);
    color: var(--sd-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.sales-dialer-setup .btn {
    margin-top: 0.35rem;
}
.sales-dialer-contact-item--wide {
    grid-column: 1 / -1;
}
.sales-dialer-lead-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}
.sales-dialer-lead-hero__main {
    min-width: 0;
    flex: 1 1 16rem;
}
.sales-dialer-company {
    margin: 0 0 0.55rem;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--bs-body-color);
}
.sales-dialer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.sales-dialer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--bs-secondary-color) 10%, transparent);
    color: var(--bs-body-color);
}
.sales-dialer-badge--stage {
    background: rgba(var(--primary-rgb, 0, 119, 255), 0.12);
    color: var(--primary, #0077ff);
}
.sales-dialer-badge--attempts {
    font-variant-numeric: tabular-nums;
}
.sales-dialer-badge--callback {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}
.sales-dialer-crm-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--sd-border);
    color: var(--sd-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.sales-dialer-crm-link:hover {
    background: rgba(var(--sd-accent-rgb), 0.08);
    color: var(--sd-accent);
    text-decoration: none;
}
.sales-dialer-attribution {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--sd-muted) 5%, transparent);
}
.sales-dialer-attribution__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    background: rgba(var(--sd-accent-rgb), 0.1);
    color: var(--sd-accent);
    flex-shrink: 0;
}
.sales-dialer-attribution__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.15rem;
}
.sales-dialer-attribution__channel {
    font-weight: 700;
    color: var(--bs-body-color);
}
.sales-dialer-attribution__utm {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
.sales-dialer-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}
@media (min-width: 576px) {
    .sales-dialer-contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.sales-dialer-contact-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.8rem 0.85rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--sd-muted) 5%, transparent);
    min-width: 0;
}
.sales-dialer-contact-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.5rem;
    background: var(--sd-surface);
    color: var(--sd-accent);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--sd-border);
}
.sales-dialer-contact-item__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}
.sales-dialer-contact-item__value {
    display: block;
    color: var(--bs-body-color);
    word-break: break-word;
    text-decoration: none;
}
a.sales-dialer-contact-item__value:hover {
    color: var(--sd-accent);
    text-decoration: underline;
}
a.sales-dialer-contact-item__value:not([href]) {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}
.sales-dialer-contact-item--phone .sales-dialer-contact-item__value {
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.sales-dialer-onboarding {
    margin-bottom: 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(var(--sd-accent-rgb), 0.05) 0%, color-mix(in srgb, var(--sd-muted) 4%, transparent) 100%);
}
.sales-dialer-onboarding__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sd-muted);
    margin-bottom: 0.65rem;
}
.sales-dialer-onboarding__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sales-dialer-onboarding__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 4.5rem;
    min-width: 4.4rem;
    text-align: center;
}
.sales-dialer-onboarding__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-secondary-color) 10%, transparent);
    color: #94a3b8;
    font-size: 0.72rem;
}
.sales-dialer-onboarding__step.is-done .sales-dialer-onboarding__icon {
    background: rgba(var(--sd-accent-rgb), 0.14);
    color: var(--sd-accent);
    box-shadow: inset 0 0 0 1px rgba(var(--sd-accent-rgb), 0.18);
}
.sales-dialer-onboarding__name {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sd-muted);
}
.sales-dialer-onboarding__step.is-done .sales-dialer-onboarding__name {
    color: var(--bs-body-color);
}
.sales-dialer-main,
.sales-dialer-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}
.sales-dialer-sidebar .sales-dialer-empty {
    min-height: 10rem;
    padding: 2rem 1.15rem;
}
.sales-dialer-call-zone {
    margin-bottom: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.sales-dialer-call-zone__head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
}
.sales-dialer-call-zone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.6rem;
    background: #38d99e;
    color: #fff;
    font-size: 0.78rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(56, 217, 158, 0.28);
}
.sales-dialer-call-zone__copy {
    min-width: 0;
}
.sales-dialer-call-zone__title {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-body-color);
}
.sales-dialer-call-zone__hint {
    margin: 0.18rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--sd-muted);
}
.sales-dialer-call-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.3rem;
    min-width: 0;
    width: 100%;
}
#salesDialerCallBody .sales-dialer-call-actions__primary,
.sales-dialer-call-actions__primary {
    width: 100%;
    height: auto !important;
    min-height: 2.35rem !important;
    padding: 0.3rem 0.35rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    border: 0;
    border-radius: 0.45rem;
    background: #38d99e;
    box-shadow: none;
}
#salesDialerCallBody .sales-dialer-call-actions__primary i {
    margin: 0 !important;
    font-size: 0.72rem;
}
.sales-dialer-call-actions__primary:hover,
.sales-dialer-call-actions__primary:focus {
    background: #2fc48e;
    box-shadow: none;
}
#salesDialerCallBody .sales-dialer-call-actions__primary.is-hangup,
.sales-dialer-call-actions__primary.is-hangup {
    background: #e14b4b !important;
    border-color: #e14b4b !important;
}
#salesDialerCallBody .sales-dialer-call-actions__primary.is-hangup:hover,
#salesDialerCallBody .sales-dialer-call-actions__primary.is-hangup:focus,
.sales-dialer-call-actions__primary.is-hangup:hover,
.sales-dialer-call-actions__primary.is-hangup:focus {
    background: #c83d3d !important;
    border-color: #c83d3d !important;
}
.sales-dialer-call-actions__secondary {
    display: contents;
}
#salesDialerCallBody .sales-dialer-call-actions__secondary > .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 2.35rem !important;
    padding: 0.3rem 0.3rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.45rem;
    background: var(--sd-surface);
    box-shadow: none;
    color: var(--bs-body-color);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}
#salesDialerCallBody .sales-dialer-call-actions__secondary > .btn:last-child {
    border-bottom: 1px solid var(--sd-border);
}
#salesDialerCallBody .sales-dialer-call-actions__secondary > .btn i {
    width: auto;
    margin: 0;
    font-size: 0.72rem;
    color: var(--sd-accent);
    text-align: center;
}
#salesDialerCallBody .sales-dialer-call-actions__secondary > .btn:hover,
#salesDialerCallBody .sales-dialer-call-actions__secondary > .btn:focus {
    border-color: rgba(var(--sd-accent-rgb), 0.45);
    background: rgba(var(--sd-accent-rgb), 0.06);
    color: var(--bs-body-color);
    box-shadow: none;
}
.sales-dialer-call-actions a.btn.disabled {
    pointer-events: none;
    opacity: 0.55;
}
.sales-dialer-call-status {
    margin-top: 0.35rem;
    font-size: 0.78rem;
}
.sales-dialer-call-status:empty {
    display: none;
}
.sales-dialer-call-status.is-success { color: var(--bs-success); font-weight: 600; }
.sales-dialer-call-status.is-error { color: var(--bs-danger); font-weight: 600; }
.sales-dialer-session-heading {
    margin: 0.7rem 0 0.6rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--bs-border-color, #dee6ed);
}
.sales-dialer-session-heading__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bs-body-color);
}
.sales-dialer-session-heading__text {
    margin: 0.12rem 0 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}
.sales-dialer-form-section .form-label {
    font-size: 0.8rem;
    font-weight: 600;
}
.sales-dialer-outcome-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem;
    margin: 0 0 0.65rem;
    padding: 3px;
}
.sales-dialer-outcome-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    min-width: 0;
    min-height: 2.65rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.65rem;
    background: var(--sd-surface);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.sales-dialer-outcome-tile:hover {
    border-color: rgba(var(--sd-accent-rgb), 0.45);
    background: rgba(var(--sd-accent-rgb), 0.04);
}
.sales-dialer-outcome-tile:has(.sales-dialer-outcome-tile__input:checked) {
    border-color: var(--sd-accent);
    background: rgba(var(--sd-accent-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--sd-accent-rgb), 0.16);
}
.sales-dialer-outcome-tile:focus-within {
    outline: 2px solid rgba(var(--sd-accent-rgb), 0.35);
    outline-offset: 1px;
}
.sales-dialer-outcome-tile__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    appearance: none;
    cursor: pointer;
}
.sales-dialer-outcome-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--sd-muted) 10%, transparent);
    color: var(--sd-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.sales-dialer-outcome-tile:has(.sales-dialer-outcome-tile__input:checked) .sales-dialer-outcome-tile__icon {
    background: rgba(var(--sd-accent-rgb), 0.16);
    color: var(--sd-accent);
}
.sales-dialer-outcome-tile__text {
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bs-body-color);
}
.sales-dialer-outcome-tile:has(.sales-dialer-outcome-tile__input:checked) .sales-dialer-outcome-tile__text {
    color: var(--sd-accent);
}
.sales-dialer-outcome-hint {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.75rem;
}
.sales-dialer-calendly {
    margin: 0 0 1rem;
    padding: 0.85rem 0.85rem 0.95rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.85rem;
    background: rgba(var(--sd-accent-rgb), 0.035);
}
.sales-dialer-calendly__host {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.sales-dialer-calendly__photo {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--sd-surface);
    box-shadow: 0 0 0 1px var(--sd-border);
}
.sales-dialer-calendly__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-body-color);
}
.sales-dialer-calendly__meta {
    margin: 0.15rem 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sd-muted);
}
.sales-dialer-calendly__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sales-dialer-calendly__chips li {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(var(--sd-accent-rgb), 0.22);
    border-radius: 999px;
    background: var(--sd-surface);
    color: var(--sd-accent);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
}
.sales-dialer-calendly__booked {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(60, 186, 117, 0.28);
    border-radius: 0.7rem;
    background: rgba(60, 186, 117, 0.08);
}
.sales-dialer-calendly__booked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: rgba(60, 186, 117, 0.16);
    color: var(--sd-success);
    flex-shrink: 0;
}
.sales-dialer-calendly__booked strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.25;
}
.sales-dialer-calendly__booked-copy {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--sd-muted);
}
.sales-dialer-calendly__week {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    min-width: 0;
}
.sales-dialer-calendly__week-label {
    flex: 1;
    min-width: 0;
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.sales-dialer-calendly__loading {
    color: var(--sd-muted);
    font-weight: 600;
}
.sales-dialer-calendly__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--sd-border);
    border-radius: 0.55rem;
    background: var(--sd-surface);
    color: var(--bs-body-color);
    cursor: pointer;
}
.sales-dialer-calendly__nav:hover,
.sales-dialer-calendly__nav:focus {
    border-color: rgba(var(--sd-accent-rgb), 0.45);
    background: rgba(var(--sd-accent-rgb), 0.06);
    color: var(--sd-accent);
}
.sales-dialer-calendly__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.sales-dialer-calendly__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
    margin-bottom: 0.65rem;
    padding: 3px;
    min-width: 0;
}
.sales-dialer-calendly__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin: 0;
    padding: 0.4rem 0.1rem 0.35rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.55rem;
    background: var(--sd-surface);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.sales-dialer-calendly__day:hover {
    border-color: rgba(var(--sd-accent-rgb), 0.45);
    background: rgba(var(--sd-accent-rgb), 0.04);
}
.sales-dialer-calendly__day.is-selected {
    border-color: var(--sd-accent);
    background: rgba(var(--sd-accent-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--sd-accent-rgb), 0.16);
}
.sales-dialer-calendly__day.is-empty {
    opacity: 0.42;
}
.sales-dialer-calendly__day-name {
    color: var(--sd-muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sales-dialer-calendly__day.is-selected .sales-dialer-calendly__day-name,
.sales-dialer-calendly__day.is-selected .sales-dialer-calendly__day-num {
    color: var(--sd-accent);
}
.sales-dialer-calendly__day-num {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
}
.sales-dialer-calendly__slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}
.sales-dialer-calendly__slot {
    min-height: 2.15rem;
    padding: 0.35rem 0.25rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.55rem;
    background: var(--sd-surface);
    color: var(--bs-body-color);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.sales-dialer-calendly__slot:hover {
    border-color: rgba(var(--sd-accent-rgb), 0.45);
    background: rgba(var(--sd-accent-rgb), 0.04);
}
.sales-dialer-calendly__slot.is-selected {
    border-color: var(--sd-accent);
    background: rgba(var(--sd-accent-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--sd-accent-rgb), 0.16);
    color: var(--sd-accent);
}
.sales-dialer-calendly__empty,
.sales-dialer-calendly__missing {
    margin: 0 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sd-muted);
    text-align: center;
}
.sales-dialer-calendly__skel {
    pointer-events: none;
    cursor: default;
    border-color: color-mix(in srgb, var(--sd-border) 70%, transparent) !important;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.12) 0%, rgba(148, 163, 184, 0.22) 45%, rgba(148, 163, 184, 0.12) 90%);
    background-size: 200% 100%;
    box-shadow: none !important;
    animation: sales-dialer-calendly-skel 1.15s ease-in-out infinite;
}
.sales-dialer-calendly__day.sales-dialer-calendly__skel {
    min-height: 2.7rem;
    gap: 0.35rem;
}
.sales-dialer-calendly__skel-line {
    display: block;
    width: 62%;
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
}
.sales-dialer-calendly__skel-line--short {
    width: 38%;
    height: 0.6rem;
}
@keyframes sales-dialer-calendly-skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (max-width: 575.98px) {
    .sales-dialer-calendly__days {
        display: flex;
        gap: 0.3rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.4rem;
    }
    .sales-dialer-calendly__day {
        flex: 1 0 2.55rem;
        min-width: 2.55rem;
        padding: 0.4rem 0.15rem 0.35rem;
    }
    .sales-dialer-calendly__day-num {
        font-size: 0.75rem;
    }
    .sales-dialer-calendly__slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.sales-dialer-callback {
    margin: 0 0 1rem;
    padding: 0.85rem 0.85rem 0.95rem;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 0.85rem;
    background: rgba(245, 158, 11, 0.06);
}
.sales-dialer-callback__head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}
.sales-dialer-callback__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    flex-shrink: 0;
}
.sales-dialer-callback__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-body-color);
}
.sales-dialer-callback__meta {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--sd-muted);
}
.sales-dialer-callback__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}
.sales-dialer-callback__chip {
    margin: 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--sd-border);
    border-radius: 999px;
    background: var(--sd-surface);
    color: var(--bs-body-color);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.sales-dialer-callback__chip:hover,
.sales-dialer-callback__chip:focus {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.08);
    color: #b45309;
}
.sales-dialer-callback__chip.is-selected {
    border-color: #d97706;
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.sales-dialer-callback__date-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sd-muted);
}
.sales-dialer-callback__date {
    max-width: 14rem;
}
.sales-dialer-callback__summary {
    margin: 0.65rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: #b45309;
}
.sales-dialer-queue-badge--overdue {
    background: rgba(220, 53, 69, 0.12);
    color: #c0392b;
}
.sales-dialer-context-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}
.sales-dialer-context-empty .sales-dialer-empty__icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
}
@media (min-width: 992px) {
    .sales-dialer-sidebar {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 7rem);
        overflow-x: hidden;
        overflow-y: auto;
        align-items: stretch;
    }
    .sales-dialer-sidebar > .sales-dialer-card {
        flex-shrink: 0;
        max-height: none;
    }
    .sales-dialer-card--context .sales-dialer-card__body {
        overflow: auto;
        max-height: 22rem;
    }
}
.sales-dialer-timeline-item {
    position: relative;
    padding: 0 0 1rem 1rem;
    border-left: 2px solid var(--bs-border-color);
}
.sales-dialer-timeline-item:last-child {
    padding-bottom: 0;
}
.sales-dialer-timeline-item__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.25rem;
}
.sales-dialer-timeline-item__badge {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary, #0077ff);
}
.sales-dialer-timeline-item__date,
.sales-dialer-timeline-item__meta {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}
.sales-dialer-timeline-item__summary {
    margin-top: 0.2rem;
}
.sales-dialer-timeline-item__summary-label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sd-muted, var(--bs-secondary-color));
}
.sales-dialer-timeline-item__body {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--bs-body-color);
    word-break: break-word;
    white-space: pre-wrap;
}
.sales-dialer-queue-table {
    margin: 0;
}
.sales-dialer-queue-card__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.sales-dialer-queue-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    padding: 0.85rem 1.1rem;
    background: color-mix(in srgb, var(--sd-muted) 6%, transparent);
    border-bottom: 1px solid var(--sd-border, #dee6ed);
}
.sales-dialer-queue-table tbody td {
    vertical-align: middle;
    padding: 0.95rem 1.1rem;
    border-color: var(--sd-border, #dee6ed);
}
.sales-dialer-queue-table tbody tr:last-child td {
    border-bottom: 0;
}
.sales-dialer-queue-company {
    font-weight: 700;
    color: var(--bs-body-color);
    text-decoration: none;
}
a.sales-dialer-queue-company:hover {
    color: var(--sd-accent, #0077ff);
    text-decoration: none;
}
.sales-dialer-queue-contact {
    display: block;
    font-weight: 600;
    color: var(--bs-body-color);
}
.sales-dialer-queue-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin-top: 0.2rem;
}
a.sales-dialer-queue-meta {
    text-decoration: none;
}
a.sales-dialer-queue-meta:hover {
    color: var(--sd-accent, #0077ff);
}
.sales-dialer-queue-phone {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
}
.sales-dialer-queue-phone:hover {
    color: var(--sd-accent, #0077ff);
}
.sales-dialer-queue-attempts {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 4.5rem;
}
.sales-dialer-queue-attempts__track {
    display: block;
    height: 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sd-muted) 16%, transparent);
    overflow: hidden;
}
.sales-dialer-queue-attempts__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--sd-accent, #0077ff);
}
.sales-dialer-queue-attempts__fill.is-1 { width: 20%; }
.sales-dialer-queue-attempts__fill.is-2 { width: 40%; }
.sales-dialer-queue-attempts__fill.is-3 { width: 60%; }
.sales-dialer-queue-attempts__fill.is-4 { width: 80%; }
.sales-dialer-queue-attempts__fill.is-5 { width: 100%; }
.sales-dialer-queue-attempts__label {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}
.sales-dialer-queue-badge {
    display: inline-flex;
    align-items: center;
    max-width: 14rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--bs-secondary-color) 12%, transparent);
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sales-dialer-queue-badge--priority,
.sales-dialer-queue-badge--claimed,
.sales-dialer-queue-badge--in_call {
    background: rgba(var(--primary-rgb, 0, 119, 255), 0.12);
    color: var(--primary, #0077ff);
}
.sales-dialer-queue-badge--completed {
    background: rgba(56, 217, 158, 0.16);
    color: #0f9f6e;
}
.sales-dialer-queue-badge--exhausted,
.sales-dialer-queue-badge--skipped,
.sales-dialer-queue-badge--cancelled {
    background: color-mix(in srgb, var(--bs-secondary-color) 14%, transparent);
    color: var(--sd-muted);
}
.sales-dialer-queue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 12rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.swal2-popup.sales-dialer-toast {
    padding: 0.7rem 0.95rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid var(--sd-border, #dee6ed);
}
.swal2-popup.sales-dialer-toast .swal2-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color, #141414);
}
.swal2-popup.sales-dialer-toast .swal2-icon {
    margin: 0 0.65rem 0 0;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    border-width: 2px;
}
@media (max-width: 991.98px) {
    .sales-dialer-page {
        overflow-x: clip;
    }
    .sales-dialer-grid,
    .sales-dialer-toolbar,
    .sales-dialer-campaigns,
    .sales-dialer-calendly,
    .sales-dialer-callback {
        min-width: 0;
        max-width: 100%;
    }
    .sales-dialer-card__header {
        padding: 0.95rem 0.9rem 0.7rem;
    }
    .sales-dialer-card__body {
        padding: 0.9rem;
    }
    .sales-dialer-calendly,
    .sales-dialer-callback {
        padding: 0.7rem;
    }
    .sales-dialer-outcome-tile {
        min-width: 0;
        padding: 0.5rem 0.5rem;
    }
    .sales-dialer-call-zone {
        padding: 0;
    }
}
@media (max-width: 767.98px) {
    .sales-dialer-pace {
        flex: 1 1 100%;
        min-width: 0;
        order: 3;
    }
    .sales-dialer-stats {
        order: 2;
        width: 100%;
    }
    .sales-dialer-card__header {
        padding: 0.85rem 0.8rem 0.65rem;
    }
    .sales-dialer-card__body {
        padding: 0.8rem;
    }
    .sales-dialer-calendly,
    .sales-dialer-callback {
        padding: 0.65rem;
    }
    .sales-dialer-callback__chips {
        gap: 0.35rem;
    }
    .sales-dialer-callback__chip {
        padding: 0.4rem 0.6rem;
    }
}
@media (max-width: 575.98px) {
    .sales-dialer-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .sales-dialer-campaigns {
        display: flex;
        border-radius: 0.85rem;
    }
    .sales-dialer-campaign {
        flex: 1 1 auto;
        text-align: center;
    }
    .sales-dialer-setup .btn,
    #salesDialerSave {
        min-height: 44px;
        width: 100%;
    }
    #salesDialerCallBody .sales-dialer-call-actions__primary,
    #salesDialerCallBody .sales-dialer-call-actions__secondary > .btn {
        height: auto !important;
        min-height: 44px !important;
    }
    .sales-dialer-setup__inner {
        padding: 1.75rem 1.15rem 1.5rem;
    }
    .sales-dialer-company {
        font-size: 1.3rem;
    }
    .sales-dialer-crm-link {
        width: 100%;
        justify-content: center;
    }
    .sales-dialer-card__header,
    .sales-dialer-card__body {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
    .sales-dialer-outcome-tile {
        padding: 0.48rem 0.4rem;
        gap: 0.35rem;
    }
    .sales-dialer-outcome-tile__text {
        font-size: 0.75rem;
    }
    .sales-dialer-calendly__week-label {
        font-size: 0.72rem;
    }
}
.sales-dialer-analytics-toolbar {
    align-items: flex-end;
}
.sales-dialer-analytics-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}
.sales-dialer-analytics-filters .period-selector {
    min-width: 14rem;
}
.sales-dialer-analytics-filters .form-select {
    width: auto;
    min-width: 11rem;
}
.sales-dialer-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.sales-dialer-analytics-kpis .sales-dialer-stat {
    min-width: 0;
}
.sales-dialer-stat--link {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.sales-dialer-stat--link:hover {
    background: rgba(var(--sd-accent-rgb), 0.12);
}
.sales-dialer-stat--link:focus-visible {
    outline: 2px solid var(--sd-accent);
    outline-offset: 2px;
}
.sales-dialer-calls-modal__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.sales-dialer-calls-modal__filters .form-select {
    width: auto;
    min-width: 12rem;
}
.sales-dialer-calls-modal__filters .form-control {
    flex: 1 1 12rem;
    min-width: 0;
}
.sales-dialer-calls-modal__meta {
    margin: 0 0 0.75rem;
    color: var(--sd-muted);
    font-size: 0.8125rem;
}
.sales-dialer-calls-modal__pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--sd-muted);
}
.sales-dialer-queue-badge--conversation,
.sales-dialer-queue-badge--interested,
.sales-dialer-queue-badge--callback {
    background: rgba(56, 217, 158, 0.16);
    color: #0f9f6e;
}
.sales-dialer-queue-badge--no_answer,
.sales-dialer-queue-badge--not_interested,
.sales-dialer-queue-badge--wrong_contact,
.sales-dialer-queue-badge--skipped {
    background: color-mix(in srgb, var(--bs-secondary-color) 14%, transparent);
    color: var(--sd-muted);
}
button.sales-dialer-queue-badge {
    border: 0;
    cursor: pointer;
}
.sales-dialer-analytics-queue {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--sd-muted);
    font-size: 0.875rem;
}
.sales-dialer-analytics-queue__item strong {
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}
.sales-dialer-analytics-charts,
.sales-dialer-analytics-tables {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}
.sales-dialer-analytics-chart {
    min-height: 280px;
}
.sales-dialer-analytics-chart--donut {
    max-width: 28rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .sales-dialer-analytics-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    .sales-dialer-analytics-charts,
    .sales-dialer-analytics-tables {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
    .sales-dialer-analytics-tables--outcomes {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575.98px) {
    .sales-dialer-analytics-filters .period-selector,
    .sales-dialer-analytics-filters .form-select,
    .sales-dialer-analytics-toolbar .btn {
        width: 100%;
        min-width: 0;
    }
}
/* ── /CRM sales dialer ─────────────────────────────────────────────────── */

.partnerline-portal {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0;
}
.partnerline-portal iframe {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: var(--bs-body-bg, #fff);
}
body.partnerline-open {
    overflow: hidden;
}
body.partnerline-open #intercom-container,
body.partnerline-open .intercom-launcher,
body.partnerline-open .intercom-lightweight-app,
body.partnerline-open .intercom-messenger-frame,
body.partnerline-open iframe[name="intercom-messenger-frame"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
body.partnerline-open > .wrapper {
    height: calc(100dvh - var(--fivex-body-top-offset, 0px));
    max-height: calc(100dvh - var(--fivex-body-top-offset, 0px));
    overflow: hidden;
}
body.partnerline-open .main {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden !important;
}
body.partnerline-open main.content#content,
body.partnerline-open .main > main.content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* BS4 class compatibility: markup that still uses Bootstrap 4 names (mr-1, ml-2, text-left, ...)
   gets the spacing it was written for. Same values as the BS5 me-/ms-/pe-/ps- utilities. */
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.mr-1 { margin-right: .25rem !important; }
.pl-1 { padding-left: .25rem !important; }
.pr-1 { padding-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.mr-2 { margin-right: .5rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pr-2 { padding-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-5 { margin-right: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.btn-block { display: block; width: 100%; }
.badge-pill { border-radius: 50rem; }

/* Readable green text on light backgrounds: sb-admin's #1cc875 is 2.2:1 on white. Dark mode keeps the
   bright green (it reads well on dark cards). Same green as the Klantdossier tokens. */
html:not([data-bs-theme="dark"]) body:not([data-theme="dark"]) .text-success,
html:not([data-bs-theme="dark"]) body:not([data-theme="dark"]) .badge-trend-increase,
html:not([data-bs-theme="dark"]) body:not([data-theme="dark"]) main [style*="color:#1cc875"],
html:not([data-bs-theme="dark"]) body:not([data-theme="dark"]) main [style*="color: #1cc875"],
html:not([data-bs-theme="dark"]) body:not([data-theme="dark"]) main [style*="color:#1cc88a"],
html:not([data-bs-theme="dark"]) body:not([data-theme="dark"]) main [style*="color: #1cc88a"] {
    /* also the inline green of profit/amount spans written by controllers */
    color: #067647 !important;
}