@import '_content/Primo.Shared.Client/Primo.Shared.Client.nmcw5ub2wt.bundle.scp.css';

/* /Components/Common/NotFound.razor.rz.scp.css */
.not-found-container[b-emme4yy09m] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  user-select: none;
  gap: 0.5rem;
}

.not-found-glitch[b-emme4yy09m] {
  position: relative;
  font-size: 10rem;
  font-weight: 900;
  line-height: 1;
  color: var(--dxbl-primary-bg);
  letter-spacing: 0.05em;
  animation: not-found-pulse-b-emme4yy09m 3s ease-in-out infinite;
}
.not-found-glitch[b-emme4yy09m]::before, .not-found-glitch[b-emme4yy09m]::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.not-found-glitch[b-emme4yy09m]::before {
  color: var(--dxbl-danger-bg);
  animation: not-found-glitch-left-b-emme4yy09m 2.5s ease-in-out infinite;
  clip-path: inset(0 65% 0 0);
}
.not-found-glitch[b-emme4yy09m]::after {
  color: var(--dxbl-info-bg);
  animation: not-found-glitch-right-b-emme4yy09m 2.5s ease-in-out infinite;
  clip-path: inset(0 0 0 65%);
}

.not-found-title[b-emme4yy09m] {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--dxbl-text-primary);
  margin: 0;
}

.not-found-message[b-emme4yy09m] {
  font-size: 1.1rem;
  color: var(--dxbl-text-secondary);
  max-width: 400px;
  margin: 0.25rem 0 1rem;
}

@keyframes not-found-pulse-b-emme4yy09m {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}
@keyframes not-found-glitch-left-b-emme4yy09m {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-3px, 2px);
  }
  40% {
    transform: translate(2px, -1px);
  }
  60% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(1px, -2px);
  }
}
@keyframes not-found-glitch-right-b-emme4yy09m {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(3px, -1px);
  }
  40% {
    transform: translate(-2px, 2px);
  }
  60% {
    transform: translate(1px, -1px);
  }
  80% {
    transform: translate(-1px, 2px);
  }
}
/* /Components/Layouts/AuthenticationLayout.razor.rz.scp.css */
/* The design board puts the sign-in card on a full-bleed outdoor-cooking photo under a dark gradient. That
  photograph is not in the repository yet, so the backdrop is the brand black with the gradient already over
  it; dropping the image in later is one background-image away. */
.page[b-ifcqd0ncwk] {
  overflow: auto;
  padding: 20px;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: var(--primo-primary-brand);
  background-image: linear-gradient(160deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.authentication-container[b-ifcqd0ncwk] {
  max-width: 430px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 2.25rem 2rem;
  background-color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.authentication-container > img[b-ifcqd0ncwk] {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 auto 1.5rem;
  user-select: none;
}
/* /Components/Layouts/MainLayout.razor.rz.scp.css */
/* The header div was shorter than the row it sits in, which left a strip of page between it and the sidebar
   under it. */
.gridlayout-header[b-7slrxei8jh] {
  height: 100%;
}

.gridlayout-item[b-7slrxei8jh] {
  position: relative;
}
.gridlayout-item[b-7slrxei8jh]:before {
  content: " ";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.4;
}

.gridlayout-content[b-7slrxei8jh] {
  overflow-y: auto;
  overflow-x: hidden;
  /* White rather than the warm wash: with every panel already carrying a border, a tinted page behind them
     only added a second colour that nothing else on the screen picked up. The header keeps its own hairline
     so the top of the page still reads as a separate band. */
  background-color: #fff;
  min-height: 100%;
  /* The gutter the design leaves between the page and everything standing on it. */
  padding: 1.25rem 1.5rem 2rem;
}

/* A region that is rebuilt (see MainLayout's region keys) is a brand new element, so without this the
   old content disappears and the new content pops in - read as a white flash. Instead the region is
   faded out while its content is still on screen, and the replacement eases in from transparent, so
   both ends of the swap sit at zero opacity and the empty moment in between is never visible.
   The fade-out duration is mirrored by MainLayout._fadeOutDuration; keep the two in step. */
.layout-region[b-7slrxei8jh] {
  animation: layout-region-enter-b-7slrxei8jh 180ms ease-out;
}

.layout-region-leaving[b-7slrxei8jh] {
  opacity: 0;
  transition: opacity 120ms ease-in;
  /* The enter animation would otherwise fight the fade-out and snap the region back to full opacity. */
  animation: none;
  /* Nothing in a region on its way out should still be clickable. */
  pointer-events: none;
}

@keyframes layout-region-enter-b-7slrxei8jh {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Respect a reduced-motion preference: the swap still happens, just without the movement. */
@media (prefers-reduced-motion: reduce) {
  .layout-region[b-7slrxei8jh],
  .layout-region-leaving[b-7slrxei8jh] {
    animation: none;
    transition: none;
  }
}
/* Align Save/Cancel buttons to the left */
[b-7slrxei8jh] .dxbl-grid-edit-form-buttons {
  justify-content: flex-start !important;
}
/* /Components/Pages/Assortment/CatalogProductDrawer.razor.rz.scp.css */
/* Design D3: a 420px quick look over the assortment - header, large photo, price with the stock pill, a
   borderless key/value table, and the add to cart action pinned to the foot. */
.catalog-drawer[b-qm0cjpbg3i] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.catalog-drawer-header[b-qm0cjpbg3i] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--primo-border-panel);
}

.catalog-drawer-icon[b-qm0cjpbg3i] {
  margin-top: 0.25rem;
  color: var(--primo-accent);
}

.catalog-drawer-heading[b-qm0cjpbg3i] {
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-drawer-title[b-qm0cjpbg3i] {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primo-text-heading);
}

.catalog-drawer-subtitle[b-qm0cjpbg3i] {
  font-size: 0.8125rem;
  color: var(--primo-text-secondary);
}

.catalog-drawer-body[b-qm0cjpbg3i] {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.catalog-drawer-image[b-qm0cjpbg3i] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  aspect-ratio: 16/10;
  margin-bottom: 1rem;
  background-color: var(--primo-surface-subtle);
  border: 1px dashed var(--primo-border);
  border-radius: 0.375rem;
  color: var(--primo-text-secondary);
  font-size: 0.8125rem;
}
.catalog-drawer-image i[b-qm0cjpbg3i] {
  font-size: 2rem;
}
.catalog-drawer-image img[b-qm0cjpbg3i] {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.catalog-drawer-price-row[b-qm0cjpbg3i] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.catalog-drawer-description[b-qm0cjpbg3i] {
  margin: 0 0 1rem;
  color: var(--primo-text-secondary);
}

.catalog-drawer-specs[b-qm0cjpbg3i] {
  width: 100%;
  border-collapse: collapse;
}
.catalog-drawer-specs th[b-qm0cjpbg3i],
.catalog-drawer-specs td[b-qm0cjpbg3i] {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--primo-border-section);
  vertical-align: top;
}
.catalog-drawer-specs th[b-qm0cjpbg3i] {
  width: 40%;
  font-weight: 400;
  color: var(--primo-text-secondary);
  text-align: left;
}
.catalog-drawer-specs td[b-qm0cjpbg3i] {
  text-align: right;
  color: var(--primo-text-heading);
}

.catalog-drawer-actions[b-qm0cjpbg3i] {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--primo-border-panel);
}
/* /Components/Pages/Assortment/Overview.razor.rz.scp.css */
/* Design D2: toolbar on one row, a card grid under it, a table as the alternative. The pill, the price line and
   the quantity editor come from the global _catalog.scss, because the list rows and the drawer render them too. */
.catalog[b-fnc5cvf5bv] {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 9rem);
  overflow-y: auto;
}

.catalog-toolbar[b-fnc5cvf5bv] {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0 0.75rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
  border-bottom: 1px solid var(--primo-border-panel);
}

/* Mirrors the grid's search box (.dxbl-grid-search-box-container in _grid.scss): the icon in the flow ahead of
   a borderless input, so the search reads the same as on every overview. */
.catalog-search[b-fnc5cvf5bv] {
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  max-width: 24rem;
  border-bottom: 1px solid var(--primo-border);
}
.catalog-search .catalog-search-icon[b-fnc5cvf5bv] {
  margin-right: 0.5rem;
  font-size: 0.85rem;
  color: var(--primo-text-muted);
  pointer-events: none;
}
.catalog-search[b-fnc5cvf5bv]  .catalog-search-input {
  flex: 1 1 auto;
  border: 0;
  padding-left: 0;
}
.catalog-search[b-fnc5cvf5bv]  .catalog-search-input .dxbl-text-edit-input,
.catalog-search[b-fnc5cvf5bv]  .catalog-search-input input.form-control {
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  background-color: transparent;
}
.catalog-search[b-fnc5cvf5bv]  .catalog-search-input .dxbl-text-edit-input:focus,
.catalog-search[b-fnc5cvf5bv]  .catalog-search-input input.form-control:focus {
  outline: none;
  box-shadow: none !important;
}

.catalog-categories[b-fnc5cvf5bv] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

[b-fnc5cvf5bv] .catalog-category-lookup {
  width: 14rem;
}

.catalog-count[b-fnc5cvf5bv] {
  margin-left: auto;
  color: var(--primo-text-secondary);
  white-space: nowrap;
}

.catalog-view-toggle[b-fnc5cvf5bv] {
  display: flex;
  gap: 0.25rem;
}

/* As many columns as fit at a generous card width: four on a wide desktop, one on a phone. */
.catalog-grid[b-fnc5cvf5bv] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1rem;
  padding-bottom: 1rem;
}

.catalog-card[b-fnc5cvf5bv] {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.catalog-card:hover[b-fnc5cvf5bv], .catalog-card:focus-visible[b-fnc5cvf5bv] {
  border-color: var(--primo-primary);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
  outline: none;
}

/* The photo is taken out of the flow: an image inside an aspect-ratio box still stretches the box to its own
   height, which is what made a card with a photo twice as tall as one without. */
.catalog-card-image[b-fnc5cvf5bv] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  background-color: var(--primo-surface-subtle);
  border-bottom: 1px dashed var(--primo-border);
  color: var(--primo-text-secondary);
  font-size: 2rem;
}
.catalog-card-image img[b-fnc5cvf5bv] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  object-fit: contain;
}

.catalog-card-body[b-fnc5cvf5bv] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.catalog-eyebrow[b-fnc5cvf5bv] {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primo-accent);
}

.catalog-card-title[b-fnc5cvf5bv] {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primo-text-heading);
}

.catalog-stock-pill[b-fnc5cvf5bv] {
  align-self: flex-start;
}

.catalog-card-actions[b-fnc5cvf5bv] {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.catalog-card-actions[b-fnc5cvf5bv]  .catalog-add {
  flex: 1 1 auto;
}

/* A product that cannot be ordered stays on the shelf, dimmed: a dealer looks up a model it already owns. */
.catalog-card-unavailable .catalog-card-image[b-fnc5cvf5bv] {
  opacity: 0.5;
}
.catalog-card-unavailable .catalog-card-title[b-fnc5cvf5bv],
.catalog-card-unavailable .catalog-price-amount[b-fnc5cvf5bv] {
  color: var(--primo-text-secondary);
}

.catalog-card-skeleton[b-fnc5cvf5bv] {
  pointer-events: none;
}
.catalog-card-skeleton .catalog-card-image[b-fnc5cvf5bv] {
  border-bottom-style: solid;
}
.catalog-card-skeleton .skeleton-line[b-fnc5cvf5bv] {
  height: 0.75rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #e4e6eb 25%, #eff0f3 50%, #e4e6eb 75%);
  background-size: 200% 100%;
  animation: catalog-skeleton-shimmer-b-fnc5cvf5bv 1.5s ease-in-out infinite;
}
.catalog-card-skeleton .skeleton-line-short[b-fnc5cvf5bv] {
  width: 40%;
}
.catalog-card-skeleton .skeleton-line-medium[b-fnc5cvf5bv] {
  width: 65%;
}
.catalog-card-skeleton .skeleton-line-long[b-fnc5cvf5bv] {
  width: 85%;
}

@keyframes catalog-skeleton-shimmer-b-fnc5cvf5bv {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.catalog-empty[b-fnc5cvf5bv] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3.75rem 1rem;
  border: 1px dashed var(--primo-border);
  border-radius: 0.5rem;
  text-align: center;
  color: var(--primo-text-secondary);
}
.catalog-empty i[b-fnc5cvf5bv] {
  font-size: 2rem;
}

.catalog-empty-title[b-fnc5cvf5bv] {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primo-text-heading);
}

.catalog-empty-hint[b-fnc5cvf5bv] {
  margin: 0 0 0.5rem;
}

[b-fnc5cvf5bv] .catalog-list .dxbl-grid-data-row {
  cursor: pointer;
}
/* /Components/Pages/Authentication/ForgotPassword.razor.rz.scp.css */
/* The card is shared by the four authentication pages; see Styles/components/_login.scss. */
/* /Components/Pages/Authentication/Login.razor.rz.scp.css */
/* The card itself is shared by the four authentication pages and lives in Styles/components/_login.scss.
   What is left here is the part only the sign-in page has: the Caps Lock warning and the reset link that
   sits hard against the right edge under the password field. */
.caps-lock-warning[b-sivz605z8l] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--bs-warning-text-emphasis);
}

.login-reminder-container[b-sivz605z8l] {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  /* The shared link spaces itself under an action; here it hangs straight under the field. */
}
.login-reminder-container .auth-secondary-link[b-sivz605z8l] {
  margin-top: 0;
}
/* /Components/Pages/Authentication/ResetPassword.razor.rz.scp.css */
/* The card is shared by the four authentication pages; see Styles/components/_login.scss. */
/* /Components/Pages/Authentication/TwoFactorLogin.razor.rz.scp.css */
/* The card is shared by the four authentication pages; see Styles/components/_login.scss, and the code
  boxes live in the VerificationCodeInput control. */
/* /Components/Pages/Cart/CartAddressFields.razor.rz.scp.css */
/* One checkout address: the street, the postal code beside the city, the country. */
.cart-address[b-vfy1fsi59u] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-address-row[b-vfy1fsi59u] {
  display: flex;
  gap: 0.5rem;
}

[b-vfy1fsi59u] .cart-address-postal-code {
  flex: 0 0 7rem;
}
/* /Components/Pages/Cart/Overview.razor.rz.scp.css */
@charset "UTF-8";
/* Design D4: the line table on the left, a 380px summary card on the right; on a narrow screen the summary
   drops under the lines. The quantity editor comes from the global _catalog.scss, so it reads like the one on
   the assortment. */
.cart-layout[b-87jvss5mgu] {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Design D5, failure variant: the banner sits above the lines, its two buttons on a row of their own. ::deep because
   the banner and the buttons render inside child components, which carry no scope attribute. */
[b-87jvss5mgu] .cart-place-failed {
  margin-bottom: 1rem;
}

[b-87jvss5mgu] .cart-place-failed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.cart-panel[b-87jvss5mgu] {
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
}

.cart-lines[b-87jvss5mgu] {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.cart-summary[b-87jvss5mgu] {
  flex: 0 0 23.75rem;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
}

.cart-table[b-87jvss5mgu] {
  width: 100%;
  border-collapse: collapse;
}
.cart-table th[b-87jvss5mgu],
.cart-table td[b-87jvss5mgu] {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--primo-border-section);
  vertical-align: middle;
}
.cart-table th[b-87jvss5mgu] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primo-text-heading);
  text-align: left;
  background-color: var(--primo-surface-muted);
}
.cart-table tbody tr:last-child td[b-87jvss5mgu] {
  border-bottom: 0;
}

.cart-col-quantity[b-87jvss5mgu] {
  width: 8rem;
}

.cart-col-amount[b-87jvss5mgu] {
  width: 9rem;
  text-align: right;
  white-space: nowrap;
}

.cart-col-actions[b-87jvss5mgu] {
  width: 4rem;
  text-align: right;
}

.cart-line-total[b-87jvss5mgu] {
  font-weight: 600;
  color: var(--primo-text-heading);
}

/* A line the order cannot be placed with: the accent tint the design puts on rows that need attention. */
.cart-line-blocked td[b-87jvss5mgu] {
  background-color: rgba(var(--primo-accent-rgb), 0.04);
}

.cart-product-cell[b-87jvss5mgu] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.cart-thumb[b-87jvss5mgu] {
  position: relative;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primo-surface-subtle);
  border: 1px dashed var(--primo-border);
  border-radius: 0.375rem;
  color: var(--primo-text-secondary);
}
.cart-thumb img[b-87jvss5mgu] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  object-fit: contain;
}

.cart-product-text[b-87jvss5mgu] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.cart-product-name[b-87jvss5mgu] {
  font-weight: 600;
  color: var(--primo-text-heading);
}

.cart-product-meta[b-87jvss5mgu] {
  font-size: 0.8125rem;
  color: var(--primo-text-secondary);
}

/* The messages under a product name: one per state, coloured by the status token of that state. */
.cart-line-message[b-87jvss5mgu] {
  font-size: 0.8125rem;
}

.cart-line-message-danger[b-87jvss5mgu] {
  color: var(--primo-status-danger);
}

.cart-line-message-warning[b-87jvss5mgu] {
  color: var(--primo-notice-warning-fg);
}

.cart-line-message-info[b-87jvss5mgu] {
  color: var(--primo-status-info);
}

.cart-summary-title[b-87jvss5mgu] {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primo-text-heading);
}

.cart-summary-total[b-87jvss5mgu] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  border-top: 1px solid var(--primo-border-section);
  border-bottom: 1px solid var(--primo-border-section);
  font-weight: 600;
  color: var(--primo-text-heading);
}

.cart-summary-amount[b-87jvss5mgu] {
  font-size: 1.25rem;
}

.cart-summary-label[b-87jvss5mgu] {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primo-text-heading);
}

.cart-summary-optional[b-87jvss5mgu] {
  font-weight: 400;
  color: var(--primo-text-secondary);
}

.cart-terms[b-87jvss5mgu] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1rem;
  font-size: var(--dxbl-checkbox-font-size, 0.875rem);
}

[b-87jvss5mgu] .cart-terms-check {
  padding-right: 0;
}

[b-87jvss5mgu] .cart-place-order {
  margin-top: 1rem;
  width: 100%;
}

.cart-blocked-reason[b-87jvss5mgu] {
  margin: 0;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--primo-status-danger);
}

.cart-confirmation-hint[b-87jvss5mgu] {
  margin: 0;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--primo-text-secondary);
}

.cart-empty[b-87jvss5mgu] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3.75rem 1rem;
  border-style: dashed;
  text-align: center;
  color: var(--primo-text-secondary);
}
.cart-empty i[b-87jvss5mgu] {
  font-size: 2rem;
}

.cart-empty-title[b-87jvss5mgu] {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primo-text-heading);
}

.cart-empty-hint[b-87jvss5mgu] {
  margin: 0 0 0.5rem;
}

.cart-skeleton[b-87jvss5mgu] {
  padding: 0.5rem 1rem;
  pointer-events: none;
}

.cart-skeleton-line[b-87jvss5mgu] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--primo-border-section);
}
.cart-skeleton-line:last-child[b-87jvss5mgu] {
  border-bottom: 0;
}
.cart-skeleton-line .cart-skeleton-thumb[b-87jvss5mgu] {
  flex: 0 0 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  background-color: var(--primo-surface-subtle);
}
.cart-skeleton-line .skeleton-line[b-87jvss5mgu] {
  height: 0.75rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #e4e6eb 25%, #eff0f3 50%, #e4e6eb 75%);
  background-size: 200% 100%;
  animation: cart-skeleton-shimmer-b-87jvss5mgu 1.5s ease-in-out infinite;
}
.cart-skeleton-line .skeleton-line-long[b-87jvss5mgu] {
  flex: 1 1 auto;
}
.cart-skeleton-line .skeleton-line-short[b-87jvss5mgu] {
  flex: 0 0 6rem;
}

@keyframes cart-skeleton-shimmer-b-87jvss5mgu {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Design §6: lines and summary stack on a narrow screen. */
@media (max-width: 992px) {
  .cart-layout[b-87jvss5mgu] {
    flex-direction: column;
  }
  .cart-summary[b-87jvss5mgu] {
    flex: 1 1 auto;
    position: static;
    width: 100%;
  }
}
.cart-address-default[b-87jvss5mgu] {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--primo-text-secondary);
}

[b-87jvss5mgu] .cart-address-check {
  margin-top: 0.25rem;
}
/* /Components/Pages/Company/Templates/CompanyDetails.razor.rz.scp.css */
/* The dealer's company as one read-only panel, like the panels of the order pages, with the delivery addresses under
   it. */
.company-details[b-z967939pih] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}

.company-details-data[b-z967939pih] {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 10px;
  margin: 0;
  padding: 16px 20px;
  background-color: #fff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 6px;
}
.company-details-data dt[b-z967939pih] {
  font-weight: 600;
}
.company-details-data dd[b-z967939pih] {
  margin: 0;
}

.company-details-line[b-z967939pih] {
  display: block;
}

.company-details-title[b-z967939pih] {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 600;
}
/* /Components/Pages/Configuration/Overview.razor.rz.scp.css */
.container-fluid[b-nty7nbvj4d] {
  padding-bottom: 30px !important;
}

.category-collection[b-nty7nbvj4d] {
  margin-left: 10px;
}
.category-collection:not(:first-child)[b-nty7nbvj4d] {
  margin-top: 30px;
}
.category-collection .row[b-nty7nbvj4d] {
  gap: 10px;
}

[b-nty7nbvj4d] .bi {
  font-size: 1.1em;
  margin-top: 0.1em;
}
/* /Components/Pages/Configuration/Templates/Category.razor.rz.scp.css */
/* A category is a panel like every other card on a page: white, hairline border, the same corner. The icon
   sits on the subtle surface so it still reads as a disc against the panel it is on. */
.category[b-9byeya3pa6] {
  width: 425px;
  min-height: 112px;
  background-color: #fff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.category:hover[b-9byeya3pa6] {
  background-color: var(--primo-primary-50);
  border-color: var(--primo-primary);
}
.category .category-icon[b-9byeya3pa6] {
  background-color: var(--primo-surface-subtle);
  border-radius: 50%;
  height: 40px;
  min-width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.category .category-content[b-9byeya3pa6] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.category .category-content .category-title[b-9byeya3pa6] {
  font-size: 17px;
  font-weight: bold;
}
.category .category-content .category-description[b-9byeya3pa6] {
  font-size: 13px;
  color: #555;
}
/* /Components/Pages/Configuration/Templates/VismaConnectionStatus.razor.rz.scp.css */
/* Sits under the tile groups of the Configuration page and lines up with them: same left margin, same gap above, and
   a panel as wide as two tiles side by side. */
.visma-connection[b-67613j18ox] {
  margin-left: 10px;
  margin-top: 30px;
  max-width: 860px;
}

.visma-connection-warning[b-67613j18ox] {
  margin-bottom: 10px;
}

.visma-connection-details[b-67613j18ox] {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 8px;
  margin: 0;
  padding: 16px 20px;
  background-color: #fff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 6px;
}
.visma-connection-details dt[b-67613j18ox] {
  font-weight: 600;
}
.visma-connection-details dd[b-67613j18ox] {
  margin: 0;
}

/* The status indicator of the design: a dot in the status colour, followed by its label. */
.visma-connection-state[b-67613j18ox] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.visma-connection-state[b-67613j18ox]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.visma-connection-state-available[b-67613j18ox]::before {
  background-color: var(--primo-status-success);
}

.visma-connection-state-unavailable[b-67613j18ox]::before {
  background-color: var(--primo-status-danger);
}

.visma-connection-failure[b-67613j18ox] {
  display: block;
  color: var(--primo-text-muted);
  overflow-wrap: anywhere;
}
/* /Components/Pages/Dealer/Detail.razor.rz.scp.css */
/* The Visma side of a dealer from Visma.net (#123103), under its own data on the general tab. */
.dealer-visma[b-fsrkg26m07] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin-top: 24px;
}
/* /Components/Pages/Dealer/Overview.razor.rz.scp.css */
/* When the dealers were last read from Visma.net, next to the button that reads them now (#123103). */
.dealer-sync-status[b-ahs3jef9tx] {
  margin-right: 0.5rem;
  font-size: 0.9em;
  color: var(--primo-text-muted);
}

.dealer-no-email[b-ahs3jef9tx] {
  font-style: italic;
  color: var(--primo-text-muted);
}

.dealer-create-account-hint[b-ahs3jef9tx] {
  margin: 0.25rem 0 0;
  font-size: 0.9em;
  color: var(--primo-text-muted);
}
/* /Components/Pages/Dealer/Templates/DealerAddressList.razor.rz.scp.css */
/* One line per address, the street above the place, the default location tagged; reads as the panels of the detail
   page around it. */
.dealer-address-list[b-1k0f7vx1x2] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dealer-address[b-1k0f7vx1x2] {
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: 16px;
  padding: 10px 14px;
  background-color: #fff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 6px;
}

.dealer-address-street[b-1k0f7vx1x2] {
  grid-column: 1;
  font-weight: 600;
}

.dealer-address-place[b-1k0f7vx1x2] {
  grid-column: 1;
  color: var(--primo-text-muted);
}

.dealer-address-default[b-1k0f7vx1x2] {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: rgba(var(--primo-status-success-rgb), 0.12);
  color: var(--primo-status-success);
  font-size: 0.8125rem;
}
/* /Components/Pages/Dealer/Templates/VismaDealerDetails.razor.rz.scp.css */
/* The addresses above the contacts, each a list of panels. */
.visma-dealer-details[b-djob23kuw6] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.visma-dealer-details-title[b-djob23kuw6] {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 600;
}

.visma-dealer-contacts[b-djob23kuw6] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.visma-dealer-contact[b-djob23kuw6] {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.5fr) minmax(8rem, 1fr) max-content;
  column-gap: 16px;
  align-items: center;
  padding: 10px 14px;
  background-color: #fff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.visma-dealer-contact-name[b-djob23kuw6] {
  font-weight: 600;
}

.visma-dealer-contact-inactive-row[b-djob23kuw6] {
  color: var(--primo-text-muted);
}

.visma-dealer-contact-inactive[b-djob23kuw6] {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--primo-status-danger);
  color: var(--primo-status-danger);
  font-size: 0.8125rem;
}
/* /Components/Pages/LogViewer/Overview.razor.rz.scp.css */
@charset "UTF-8";
:root[b-b7mwy5qipp] {
  /* Ovasso brand palette, read from the terracotta and warm grey scales of the ovasso.com stylesheet until
     an official brand book arrives. Terracotta is the action colour, its darker steps carry ink on light
     surfaces, warm grey is the page wash. See docs/frontend/design-spec.md section 1. */
  /* Terracotta 700, one step darker than the 600 the site paints its buttons with: white text on 600 is
     3.7:1 and fails AA at label size, on 700 it is 5.2:1. */
  --primo-primary: #a75830;
  --primo-primary-rgb: 167, 88, 48;
  --primo-primary-dark: #874524;
  /* Terracotta 50 from the brand scale: the lightest step of the action colour, for a hover that stays in the
     family instead of borrowing a grey. */
  --primo-primary-50: #faf0eb;
  /* Terracotta is a dark surface, so anything sitting on --primo-primary carries white ink. */
  --primo-primary-fg: #ffffff;
  --primo-accent: #874524;
  --primo-accent-rgb: 135, 69, 36;
  --primo-accent-dark: #663218;
  --primo-secondary: #ece9e3;
  --primo-text-primary: #000000;
  --primo-text-secondary: #7e7e7e;
  /* Bootstrap's .text-primary / .border-primary are ink on white, so they follow the accent rather
     than the action colour; .btn-primary picks up --primo-primary on its own in _buttons.scss. */
  --bs-primary: var(--primo-accent);
  --bs-danger-rgb: rgb(232, 17, 35);
  --dxbl-fl-item-spacing-x: 1.25rem;
  --dxbl-fl-item-spacing-y: 0.35rem;
  --grid-out-of-stock: #ff121273;
  --grid-out-of-stock-hover: #ff1212b8;
  --grid-produce-from-components: #ffa70073;
  --grid-produce-from-components-hover: #ffa700b8;
  --primo-icon-muted: #9c9c9c;
  --primo-icon-muted-dark: #565656;
  --primo-primary-brand: #24241e;
  --primo-icon-accent: #c86b3c;
  --primo-messagebox-btn-primary: var(--primo-primary);
  --primo-messagebox-btn-secondary-text: #343a40;
  --primo-messagebox-btn-secondary-border: #495057;
  /* Shell chrome: the sidebar is the brand black with warm grey labels, and the active item is the
     next warm grey step up with the primary rail on its left edge. */
  --primo-sidebar-bg: #24241e;
  /* White, the same as the icons beside it. A warm grey caption next to a white icon read as two different
     states on a row that only has one; which row is open is said by the rail and the fill, not by dimming
     every other label. */
  --primo-sidebar-label: #ffffff;
  --primo-sidebar-item-active-bg: #3e3d32;
  --primo-status-grey: #b9b9b9;
  --primo-status-success: #25b315;
  --primo-status-success-rgb: 37, 179, 21;
  --primo-status-danger: #c92600;
  --primo-status-warning: #ffa700;
  --primo-status-info: #1560bd;
  --primo-status-dark-blue: #191970;
  --primo-status-yellow: #f6dd29;
  --primo-status-red: #e50000;
  --primo-status-dark-red: #720004;
  --primo-kpi-danger-accent: #e15759;
  --primo-kpi-positive: #28a745;
  --primo-kpi-negative: #dc3545;
  --primo-grid-row-invalid: #e93142;
  /* The rail on a selected grid row. It marks where you are, so it takes the brand terracotta at full
     strength: a rail carries no text, so the contrast that keeps the buttons on 700 does not bind it. */
  --primo-grid-selection: #c86b3c;
  --primo-border: #d6d6d6;
  --primo-border-strong: #8f8f8f;
  --primo-border-muted: #b7b7b7;
  --primo-border-panel: #e4e6eb;
  --primo-border-section: #eceef1;
  --primo-border-faint: #f0f1f3;
  --primo-border-input: #ced4da;
  --primo-surface-muted: #eeeeee;
  --primo-surface-subtle: #f6f5f3;
  --primo-surface-page: #ece9e3;
  --primo-surface-icon-bg: #ececec;
  --primo-text-heading: #2f3437;
  --primo-text-dark: #333333;
  --primo-text-muted: #6c757d;
  --primo-text-subtle: #6f6f6f;
  --primo-popover-text: #303030;
  /* Conditional messages (NoticeBanner): a tinted surface with dark, readable text - the same three
     states everywhere, so a warning in a popup reads the same as a warning on a page. */
  --primo-notice-info-bg: #cff4fc;
  --primo-notice-info-border: #b6effb;
  --primo-notice-info-fg: #055160;
  --primo-notice-warning-bg: #fff3cd;
  --primo-notice-warning-border: #ffecb5;
  --primo-notice-warning-fg: #664d03;
  --primo-notice-error-bg: #f8d7da;
  --primo-notice-error-border: #f5c2c7;
  --primo-notice-error-fg: #842029;
  /* Stock pills on the dealer assortment (design spec §1): orderable = green, low stock = amber (the warning
     triad), not orderable = grey. Surface / border / ink per state. */
  --primo-stock-available-bg: #e4f7e1;
  --primo-stock-available-border: #bfeab8;
  --primo-stock-available-fg: #116a0a;
  --primo-stock-limited-bg: #fff3cd;
  --primo-stock-limited-border: #ffecb5;
  --primo-stock-limited-fg: #664d03;
  --primo-stock-unavailable-bg: #eeeeee;
  --primo-stock-unavailable-border: #d6d6d6;
  --primo-stock-unavailable-fg: #6c757d;
}

[b-b7mwy5qipp] .lv-level-filter {
  flex: 0 0 auto !important;
  min-width: 140px;
  max-width: 180px;
}

[b-b7mwy5qipp] .lv-date-range {
  flex: 0 1 auto !important;
  min-width: 200px;
  max-width: 280px;
}

[b-b7mwy5qipp] .lv-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

[b-b7mwy5qipp] .lv-badge-error {
  background-color: rgba(232, 17, 35, 0.12);
  color: #c41222;
}

[b-b7mwy5qipp] .lv-badge-warning {
  background-color: rgba(255, 185, 0, 0.15);
  color: #8a6500;
}

[b-b7mwy5qipp] .lv-badge-info {
  background-color: rgba(0, 120, 212, 0.1);
  color: #0063b1;
}

[b-b7mwy5qipp] .lv-badge-debug {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--primo-text-secondary);
}

[b-b7mwy5qipp] .lv-timestamp {
  font-family: monospace;
  font-size: 0.8rem;
}

[b-b7mwy5qipp] .lv-detail {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[b-b7mwy5qipp] .lv-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

[b-b7mwy5qipp] .lv-detail-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--primo-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[b-b7mwy5qipp] .lv-detail-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
  background-color: var(--primo-secondary);
  padding: 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #e0e0e0;
  max-height: 300px;
  overflow-y: auto;
}

[b-b7mwy5qipp] .lv-detail-exception {
  color: #c41222;
  background-color: rgba(232, 17, 35, 0.04);
  border-color: rgba(232, 17, 35, 0.15);
}
/* /Components/Pages/Order/BackOffice/OrderStatusDialog.razor.rz.scp.css */
/* Design A1, status change: the status, the optional remark for the dealer and the two buttons, stacked. */
.order-status-dialog[b-ki68xkntmq] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-status-dialog-field[b-ki68xkntmq] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.order-status-dialog-caption[b-ki68xkntmq] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primo-text-secondary);
}

/* The status dot and its label, in the list and in the box alike. */
.order-status-dialog-option[b-ki68xkntmq] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.order-status-dialog-hint[b-ki68xkntmq] {
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.order-status-dialog-actions[b-ki68xkntmq] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* /Components/Pages/Order/BackOffice/Overview.razor.rz.scp.css */
/* Design A1: the dealer's orders overview (D6) with the dealer column. */
.orders-scope[b-itg7n5ur3t] {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primo-text-secondary);
}

.order-number[b-itg7n5ur3t] {
  color: var(--primo-accent);
  font-weight: 600;
}
/* /Components/Pages/Order/OrderDetailContent.razor.rz.scp.css */
/* Design D7: a head block with the facts of the order and the page's actions, the remarks when there are any, and
   the lines with subtotal and total. Panels and tokens follow the confirmation (D5) and the cart (D4). */
.order-detail[b-n978py1ww2] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-detail-panel[b-n978py1ww2] {
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
}

.order-detail-head[b-n978py1ww2] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.order-detail-facts[b-n978py1ww2] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0;
}

.order-detail-fact dt[b-n978py1ww2] {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--primo-text-secondary);
}
.order-detail-fact dd[b-n978py1ww2] {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primo-text-heading);
}

/* Nested under the fact so they outrank the plain dd rule above. */
.order-detail-fact dd.order-detail-number[b-n978py1ww2] {
  color: var(--primo-accent);
  font-weight: 600;
}

.order-detail-fact dd.order-detail-amount[b-n978py1ww2] {
  font-weight: 600;
}

/* The page's own buttons: they come in as a render fragment, so they carry the page's scope and not this one; the
   wrapper is what places them. */
.order-detail-actions[b-n978py1ww2] {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  gap: 0.5rem;
}

.order-detail-remarks[b-n978py1ww2] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}

.order-detail-remark[b-n978py1ww2] {
  flex: 1 1 18rem;
}
.order-detail-remark p[b-n978py1ww2] {
  margin: 0;
  font-size: 0.875rem;
  white-space: pre-line;
}

.order-detail-addresses[b-n978py1ww2] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}

.order-detail-address[b-n978py1ww2] {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}

.order-detail-group[b-n978py1ww2] {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primo-text-secondary);
}

.order-detail-remark-meta[b-n978py1ww2] {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.order-detail-lines[b-n978py1ww2] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.order-detail-lines th[b-n978py1ww2] {
  padding: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  color: var(--primo-text-heading);
  border-bottom: 1px solid var(--primo-border-section);
}
.order-detail-lines td[b-n978py1ww2] {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--primo-border-section);
  vertical-align: middle;
}
.order-detail-lines tfoot td[b-n978py1ww2] {
  padding: 0.375rem 0;
  border-bottom: 0;
  color: var(--primo-text-secondary);
}
.order-detail-lines tfoot tr:first-child td[b-n978py1ww2] {
  padding-top: 0.75rem;
}

.order-detail-total td[b-n978py1ww2] {
  font-weight: 600;
  color: var(--primo-text-heading);
}

/* Nested under the table so the header cells follow them too, over the left alignment every th gets above. */
.order-detail-lines .order-detail-col-quantity[b-n978py1ww2] {
  width: 6em;
  text-align: center;
}
.order-detail-lines .order-detail-col-amount[b-n978py1ww2] {
  width: 9em;
  text-align: right;
  white-space: nowrap;
}

.order-detail-product[b-n978py1ww2] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The cart's thumbnail, so a line looks the same before and after it is ordered. */
.order-detail-thumb[b-n978py1ww2] {
  position: relative;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primo-surface-subtle);
  border: 1px dashed var(--primo-border);
  border-radius: 0.375rem;
  color: var(--primo-text-secondary);
}
.order-detail-thumb img[b-n978py1ww2] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  object-fit: contain;
}

.order-detail-product-name[b-n978py1ww2] {
  display: block;
  font-weight: 500;
  color: var(--primo-text-heading);
}

.order-detail-product-code[b-n978py1ww2] {
  display: block;
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.order-detail-skeleton[b-n978py1ww2] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}
.order-detail-skeleton .skeleton-line[b-n978py1ww2] {
  height: 0.75rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #e4e6eb 25%, #eff0f3 50%, #e4e6eb 75%);
  background-size: 200% 100%;
  animation: order-detail-skeleton-shimmer-b-n978py1ww2 1.5s ease-in-out infinite;
}
.order-detail-skeleton .skeleton-line-title[b-n978py1ww2] {
  width: 30%;
  height: 1.25rem;
}
.order-detail-skeleton .skeleton-line-long[b-n978py1ww2] {
  width: 100%;
}
.order-detail-skeleton .skeleton-line-short[b-n978py1ww2] {
  width: 40%;
}

@keyframes order-detail-skeleton-shimmer-b-n978py1ww2 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* /Components/Pages/Order/Overview.razor.rz.scp.css */
/* Design D6: the reference reads as the link into the order, in the accent the confirmation (D5) uses for it. */
.order-number[b-lzc4z1q20v] {
  color: var(--primo-accent);
  font-weight: 600;
}
/* /Components/Pages/Order/Placed.razor.rz.scp.css */
/* Design D5: one centred panel with a green check, the reference line, the lines and the two ways onward. The
   widths and tokens follow the cart (D4), so the confirmation reads as the last step of the same flow. */
.order-placed[b-0c7umqcvly] {
  display: flex;
  justify-content: center;
}

.order-placed-panel[b-0c7umqcvly] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 45rem;
  padding: 2.5rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
  text-align: center;
}

.order-placed-check[b-0c7umqcvly] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(var(--primo-status-success-rgb), 0.12);
  color: var(--primo-status-success);
  font-size: 1.5rem;
}

.order-placed-title[b-0c7umqcvly] {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--primo-text-heading);
}

.order-placed-reference[b-0c7umqcvly] {
  margin: 0;
  font-size: 0.875rem;
  color: var(--primo-text-secondary);
}

.order-placed-number[b-0c7umqcvly] {
  color: var(--primo-accent);
  font-weight: 600;
}

.order-placed-separator[b-0c7umqcvly] {
  margin: 0 0.375rem;
}

.order-placed-table[b-0c7umqcvly] {
  width: 100%;
  margin-top: 0.5rem;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}
.order-placed-table td[b-0c7umqcvly] {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--primo-border-section);
  vertical-align: middle;
}
.order-placed-table tfoot td[b-0c7umqcvly] {
  border-bottom: 0;
  font-weight: 600;
  color: var(--primo-text-heading);
  background-color: var(--primo-surface-muted);
}

.order-placed-amount[b-0c7umqcvly] {
  text-align: right;
  white-space: nowrap;
}

.order-placed-actions[b-0c7umqcvly] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.order-placed-hint[b-0c7umqcvly] {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--primo-text-secondary);
}

.order-placed-skeleton[b-0c7umqcvly] {
  align-items: stretch;
  pointer-events: none;
}
.order-placed-skeleton .skeleton-line[b-0c7umqcvly] {
  height: 0.75rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #e4e6eb 25%, #eff0f3 50%, #e4e6eb 75%);
  background-size: 200% 100%;
  animation: order-placed-skeleton-shimmer-b-0c7umqcvly 1.5s ease-in-out infinite;
}
.order-placed-skeleton .skeleton-line-title[b-0c7umqcvly] {
  width: 40%;
  height: 1.25rem;
  align-self: center;
}
.order-placed-skeleton .skeleton-line-long[b-0c7umqcvly] {
  width: 100%;
}
.order-placed-skeleton .skeleton-line-short[b-0c7umqcvly] {
  width: 30%;
  align-self: center;
}

@keyframes order-placed-skeleton-shimmer-b-0c7umqcvly {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.order-placed-product[b-0c7umqcvly] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The cart's thumbnail, a size down to suit the confirmation's compact list. */
.order-placed-thumb[b-0c7umqcvly] {
  position: relative;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primo-surface-subtle);
  border: 1px dashed var(--primo-border);
  border-radius: 0.375rem;
  color: var(--primo-text-secondary);
}
.order-placed-thumb img[b-0c7umqcvly] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  object-fit: contain;
}
/* /Components/Pages/Product/Overview.razor.rz.scp.css */
.product-manual-banner[b-yl0lr7epz0] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.375rem;
  background-color: var(--primo-surface-subtle);
  border-left: 3px solid var(--primo-primary);
  color: var(--dxbl-text-secondary);
  font-size: 0.875rem;
}
.product-manual-banner > i[b-yl0lr7epz0] {
  line-height: 1.4;
  color: var(--primo-primary-dark);
}
/* /Components/Pages/Product/ProductDrawer.razor.rz.scp.css */
.product-drawer[b-04tpvojek7] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-drawer-header[b-04tpvojek7] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--dxbl-border-color);
}

.product-drawer-code[b-04tpvojek7] {
  font-size: 0.8125rem;
  color: var(--dxbl-text-secondary);
}

.product-drawer-title[b-04tpvojek7] {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.product-drawer-body[b-04tpvojek7] {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.product-drawer-body[b-04tpvojek7]  .dxbl-fl {
  overflow: clip;
}

.product-drawer-group[b-04tpvojek7] {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dxbl-text-secondary);
}
.product-drawer-group:first-child[b-04tpvojek7] {
  margin-top: 0;
}

.product-drawer-image[b-04tpvojek7] {
  width: 100%;
  max-height: 14rem;
  object-fit: contain;
  border-radius: 0.375rem;
  background-color: var(--primo-surface-muted);
  margin-bottom: 0.75rem;
}

.product-drawer-image-actions[b-04tpvojek7] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.product-drawer-empty[b-04tpvojek7] {
  color: var(--dxbl-text-secondary);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.product-drawer-actions[b-04tpvojek7] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--dxbl-border-color);
}
/* /Components/Pages/Product/ProductsTab.razor.rz.scp.css */
.product-thumbnail[b-quwbmto33p] {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
  display: block;
}

.product-thumbnail-empty[b-quwbmto33p] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  background-color: var(--primo-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dxbl-text-secondary);
}

.product-stock-pill[b-quwbmto33p] {
  display: inline-block;
  min-height: 1.5rem;
}

.product-stock-pill-low[b-quwbmto33p] {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background-color: var(--primo-primary-50);
  color: var(--primo-primary-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
/* /Components/Pages/QueueMonitor/Overview.razor.rz.scp.css */
.qm-summary-card[b-r50ysu8iu0] {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1.25rem;
  text-align: center;
}

.qm-summary-value[b-r50ysu8iu0] {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.qm-summary-label[b-r50ysu8iu0] {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  margin-top: 0.25rem;
}

.qm-queue-card[b-r50ysu8iu0] {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  height: 100%;
  transition: border-color 0.2s;
}

.qm-queue-card-active[b-r50ysu8iu0] {
  border-color: var(--bs-success);
}

.qm-queue-description[b-r50ysu8iu0] {
  font-size: 0.75rem;
  line-height: 1.4;
}

.qm-queue-stats[b-r50ysu8iu0] {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.qm-queue-stat[b-r50ysu8iu0] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}
.qm-queue-stat > span[b-r50ysu8iu0] {
  font-size: 0.9375rem;
  font-weight: 600;
}
.qm-queue-stat > small[b-r50ysu8iu0] {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qm-queue-meta[b-r50ysu8iu0] {
  display: flex;
  gap: 1rem;
  border-top: 1px solid var(--bs-border-color);
  padding-top: 0.5rem;
}
.qm-queue-meta > small[b-r50ysu8iu0] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.qm-type-badge[b-r50ysu8iu0] {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-weight: 600;
  line-height: 1;
}

.qm-relation-pill[b-r50ysu8iu0] {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: 1rem;
  line-height: 1.4;
  white-space: nowrap;
}

.qm-relation-feeds[b-r50ysu8iu0] {
  background-color: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
  border: 1px solid var(--bs-info-border-subtle);
}

.qm-relation-consumes[b-r50ysu8iu0] {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  border: 1px solid var(--bs-warning-border-subtle);
}

.qm-trigger-dropdown[b-r50ysu8iu0] {
  min-width: 12rem;
}

.qm-spin[b-r50ysu8iu0] {
  animation: qm-spin-b-r50ysu8iu0 1s linear infinite;
}

@keyframes qm-spin-b-r50ysu8iu0 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.qm-indicator[b-r50ysu8iu0] {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bs-secondary);
  flex-shrink: 0;
}

.qm-indicator-active[b-r50ysu8iu0] {
  background-color: var(--bs-success);
  box-shadow: 0 0 6px var(--bs-success);
  animation: qm-pulse-b-r50ysu8iu0 1.5s ease-in-out infinite;
}

.qm-event-grid[b-r50ysu8iu0] {
  max-height: 400px;
  overflow-y: auto;
}

.qm-detail-body[b-r50ysu8iu0] {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.qm-detail-row[b-r50ysu8iu0] {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.75rem;
  line-height: 1.4;
}

.qm-detail-key[b-r50ysu8iu0] {
  font-weight: 600;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  min-width: 5.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.625rem;
}
.qm-detail-key[b-r50ysu8iu0]::after {
  content: ":";
}

.qm-detail-value[b-r50ysu8iu0] {
  color: var(--bs-body-color);
  word-break: break-word;
}

@keyframes qm-pulse-b-r50ysu8iu0 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.qm-connecting[b-r50ysu8iu0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  gap: 1.25rem;
}

.qm-heartbeat-icon[b-r50ysu8iu0] {
  width: 200px;
  height: 36px;
}

.qm-heartbeat-line[b-r50ysu8iu0] {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: qm-heartbeat-draw-b-r50ysu8iu0 3s ease-in-out infinite;
}

.qm-heartbeat-scanline[b-r50ysu8iu0] {
  animation: qm-scanline-b-r50ysu8iu0 2.4s linear infinite;
}

.qm-connecting-text[b-r50ysu8iu0] {
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

@keyframes qm-heartbeat-draw-b-r50ysu8iu0 {
  0% {
    stroke-dashoffset: 600;
    opacity: 0.1;
  }
  40% {
    opacity: 0.35;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
  60% {
    opacity: 0.35;
  }
  100% {
    stroke-dashoffset: -600;
    opacity: 0.1;
  }
}
@keyframes qm-scanline-b-r50ysu8iu0 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  5% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.5;
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateX(320px);
    opacity: 0;
  }
}
/* /Components/Pages/Role/Flyouts/BulkUpdateFlyout.razor.rz.scp.css */
.content-container[b-c2j6sc3oon] {
  width: 400px;
  height: 300px;
}
/* /Components/Pages/Settings/TermsSettingsTab.razor.rz.scp.css */
.terms-settings[b-7ct10bfniq] {
  padding-top: 1rem;
}

.terms-settings-hint[b-7ct10bfniq] {
  color: var(--primo-text-muted);
}

.terms-settings-empty[b-7ct10bfniq] {
  font-style: italic;
  color: var(--primo-text-muted);
}

.terms-settings-actions[b-7ct10bfniq] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* /Components/Pages/Ticket/BackOffice/Overview.razor.rz.scp.css */
/* Design A4: the dealer's board (D8) for all dealers, or the same tickets as a grid, with the view toggle above. */
.tickets-scope[b-jhrxwas4nb] {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primo-text-secondary);
}

.ticket-back-office[b-jhrxwas4nb] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ticket-back-office-view[b-jhrxwas4nb] {
  display: flex;
  justify-content: flex-end;
}
/* /Components/Pages/Ticket/BackOffice/TicketStatusDialog.razor.rz.scp.css */
/* Design A4, status change: the status and the two buttons, stacked. Mirrors the order status dialog. */
.ticket-status-dialog[b-3imjgju2jf] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ticket-status-dialog-field[b-3imjgju2jf] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ticket-status-dialog-caption[b-3imjgju2jf] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primo-text-secondary);
}

/* The status dot and its label, in the list and in the box alike. */
.ticket-status-dialog-option[b-3imjgju2jf] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ticket-status-dialog-actions[b-3imjgju2jf] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* /Components/Pages/Ticket/Overview.razor.rz.scp.css */
/* Design D8: the dealer's tickets as a grid or the board, with the create button and the view toggle above. */
.ticket-overview[b-hg5s1ilxgm] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ticket-overview-bar[b-hg5s1ilxgm] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
/* /Components/Pages/Ticket/TicketAttachmentPicker.razor.rz.scp.css */
/* The drop zone and the list of picked files, shared by the create popup and the reply composer. */
.ticket-attachments-dropzone[b-386om9uutw] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem;
  /* The input border, not the panel one: the panel grey all but disappears on white. */
  border: 1px dashed var(--primo-border-input);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: center;
}
.ticket-attachments-dropzone > i[b-386om9uutw] {
  font-size: 1.5rem;
  color: var(--primo-text-secondary);
}
.ticket-attachments-dropzone:hover[b-386om9uutw] {
  border-color: var(--primo-primary);
}

/* Invisible but on top of the whole zone, so the zone is the click and drop target. */
.ticket-attachments-dropzone[b-386om9uutw]  .ticket-attachments-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ticket-attachments-hint[b-386om9uutw] {
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.ticket-attachments-files[b-386om9uutw] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* The editors' size, so the picked files read as part of the form rather than as body text. */
.ticket-attachments-file[b-386om9uutw] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.ticket-attachments-file-name[b-386om9uutw] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* /Components/Pages/Ticket/TicketBoard.razor.rz.scp.css */
/* Design D8 / A4: a toolbar with search, type filter, the hint and the page's own filters and actions, then one
   swimlane board for every ticket, the type a tag on the card. */
.ticket-board[b-cp7j8byrlg] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ticket-board-toolbar[b-cp7j8byrlg] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Mirrors the assortment search (Assortment/Overview.razor.scss): the icon in the flow ahead of a borderless input on
   one underline, so the two dealer pages search alike. */
.ticket-board-search[b-cp7j8byrlg] {
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  max-width: 24rem;
  border-bottom: 1px solid var(--primo-border);
}
.ticket-board-search .ticket-board-search-icon[b-cp7j8byrlg] {
  margin-right: 0.5rem;
  font-size: 0.85rem;
  color: var(--primo-text-muted);
  pointer-events: none;
}
.ticket-board-search[b-cp7j8byrlg]  .ticket-board-search-input {
  flex: 1 1 auto;
  border: 0;
  padding-left: 0;
}
.ticket-board-search[b-cp7j8byrlg]  .ticket-board-search-input .dxbl-text-edit-input,
.ticket-board-search[b-cp7j8byrlg]  .ticket-board-search-input input.form-control {
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  background-color: transparent;
}
.ticket-board-search[b-cp7j8byrlg]  .ticket-board-search-input .dxbl-text-edit-input:focus,
.ticket-board-search[b-cp7j8byrlg]  .ticket-board-search-input input.form-control:focus {
  outline: none;
  box-shadow: none !important;
}

.ticket-board-toolbar[b-cp7j8byrlg]  .ticket-board-type-filter {
  width: 12rem;
}

/* The back office's dealer picker, passed in by the page; it renders in this toolbar. */
.ticket-board-toolbar[b-cp7j8byrlg]  .ticket-board-dealer-filter {
  width: 14rem;
}

.ticket-board-hint[b-cp7j8byrlg] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--primo-text-secondary);
}

/* The cards and the empty placeholder render inside the board's lanes, outside this component's scope. The wrapper is
   the board's, so the space between cards goes on it. */
.ticket-board[b-cp7j8byrlg]  .swimlane-card-wrapper + .swimlane-card-wrapper {
  margin-top: 0.5rem;
}

/* The same space between cards as the board's default card (8px above and below), which a card template does
   not get from the board. */
.ticket-board[b-cp7j8byrlg]  .ticket-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 8px 0;
  padding: 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
  cursor: pointer;
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-resolved {
  opacity: 0.75;
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-number {
  font-weight: 600;
}

/* The type as a tag beside the number, now that one board holds both types. */
.ticket-board[b-cp7j8byrlg]  .ticket-card-type {
  margin-right: auto;
  margin-left: 0.5rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background-color: var(--primo-surface-subtle);
  border: 1px solid var(--primo-border-panel);
  font-size: 0.6875rem;
  color: var(--primo-text-secondary);
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--primo-primary);
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-subject {
  overflow-wrap: anywhere;
}

/* Back office only: whose ticket it is, above the subject. */
.ticket-board[b-cp7j8byrlg]  .ticket-card-dealer {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primo-text-heading);
  overflow-wrap: anywhere;
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-unread .ticket-card-subject {
  font-weight: 600;
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.ticket-board[b-cp7j8byrlg]  .ticket-card-order {
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--primo-border-input);
  border-radius: 999px;
}

.ticket-board[b-cp7j8byrlg]  .ticket-board-empty {
  padding: 1rem;
  border: 1px dashed var(--primo-border-input);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--primo-text-secondary);
}
/* /Components/Pages/Ticket/TicketComposer.razor.rz.scp.css */
/* Design D10: the composer under the thread, a panel with the message, the files and Send. */
.ticket-composer[b-bwqosedfke] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
}

.ticket-composer-actions[b-bwqosedfke] {
  display: flex;
  justify-content: flex-end;
}
/* /Components/Pages/Ticket/TicketCreatePopup.razor.rz.scp.css */
/* Design D9, create ticket: the type, the optional order, subject and message, a drop zone for the attachments and the
   two buttons, stacked. */
.ticket-create[b-eccpkyyh4p] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ticket-create-field[b-eccpkyyh4p] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ticket-create-caption[b-eccpkyyh4p] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primo-text-secondary);
}

.ticket-create-hint[b-eccpkyyh4p] {
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.ticket-create-actions[b-eccpkyyh4p] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* /Components/Pages/Ticket/TicketDetailContent.razor.rz.scp.css */
/* Design D10: the thread and the composer on the left, a 320px info panel on the right. Both sides write on white
   with the panel edge; the dealer carries the round purple avatar, Primo the square black mark (design-spec
   deviation 14). Panels and tokens follow the order detail (D7). */
.ticket-detail[b-342flsv3ft] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ticket-detail-panel[b-342flsv3ft] {
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
}

.ticket-detail-layout[b-342flsv3ft] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 1.5rem;
}

@media (max-width: 1000px) {
  .ticket-detail-layout[b-342flsv3ft] {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ticket-detail-main[b-342flsv3ft] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* The subject with the page's actions beside it, such as the back office's status button. */
.ticket-detail-head[b-342flsv3ft] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.ticket-detail-actions[b-342flsv3ft] {
  display: flex;
  gap: 0.5rem;
}

.ticket-detail-subject[b-342flsv3ft] {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.ticket-thread[b-342flsv3ft] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-message[b-342flsv3ft] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.ticket-avatar[b-342flsv3ft] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
}

.ticket-avatar-dealer[b-342flsv3ft] {
  border-radius: 50%;
  background-color: var(--primo-accent);
}

.ticket-avatar-primo[b-342flsv3ft] {
  border-radius: 0.25rem;
  background-color: #000000;
}

.ticket-message-card[b-342flsv3ft] {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  /* Both sides on white; the avatar tells them apart. See design-spec deviation 14. */
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
}

.ticket-message-meta[b-342flsv3ft] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  color: var(--primo-text-secondary);
}
.ticket-message-meta strong[b-342flsv3ft] {
  color: var(--primo-text-heading);
}

.ticket-message-new[b-342flsv3ft] {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background-color: var(--primo-accent);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Plain text as typed: keep the line breaks. */
.ticket-message-body[b-342flsv3ft] {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ticket-message-attachments[b-342flsv3ft] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

/* The attachment chip of design D10. */
.ticket-message-attachment[b-342flsv3ft] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--primo-border-input);
  border-radius: 999px;
  background-color: #ffffff;
  font-size: 0.8125rem;
  text-decoration: none;
}

.ticket-message-attachment-size[b-342flsv3ft] {
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}

.ticket-resolved[b-342flsv3ft] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--primo-status-success);
  border-radius: 0.5rem;
  background-color: rgba(var(--primo-status-success-rgb), 0.08);
}
.ticket-resolved > i[b-342flsv3ft] {
  font-size: 1.25rem;
  color: var(--primo-status-success);
}

.ticket-resolved-text[b-342flsv3ft] {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 12rem;
}
.ticket-resolved-text span[b-342flsv3ft] {
  font-size: 0.8125rem;
  color: var(--primo-text-secondary);
}

.ticket-resolved-actions[b-342flsv3ft] {
  display: flex;
  gap: 0.5rem;
}

.ticket-detail-info[b-342flsv3ft] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--primo-border-panel);
  border-radius: 0.5rem;
}

.ticket-detail-facts[b-342flsv3ft] {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
}

.ticket-detail-fact dt[b-342flsv3ft] {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--primo-text-secondary);
}
.ticket-detail-fact dd[b-342flsv3ft] {
  margin: 0.125rem 0 0;
}

.ticket-detail-number[b-342flsv3ft] {
  font-weight: 600;
}

.ticket-detail-email-notice[b-342flsv3ft] {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--primo-border-section);
  font-size: 0.75rem;
  color: var(--primo-text-secondary);
}