#portal {
  position: fixed;
  top: 0;
}

html {
  /* set base font size to 13px */
  font-size: 50.782% !important;
}

body {
  color: var(--mu-colors-foreground-text-neutral-plain) !important;
  overscroll-behavior-y: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  scrollbar-width: none;
}

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

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.animate-copy {
  animation: pulse 0.2s;
  transition: all 0.2s;
}

.remove-icon-background svg {
  background: none !important;
}

.remove-content-padding-top .MuiCardContent-root {
  padding-top: 0 !important;
}

[id*="ScrollableDialog"] .infinite-scroll-component {
  overflow: hidden !important;
}

/* 
  TODO: Remove it when macaw will handle media queries in custom properties
  https://github.com/saleor/macaw-ui/issues/498
*/
@media screen and (max-width: 1024px) {
  .mobile-full-height {
    height: auto !important;
  }
}

[data-portal-for="category-list"] > ul > li {
  display: block;
}

[data-portal-for="category-list"] & li > span {
  display: inline;
}

.noBorder {
  border: none;
}

.conditional-metadata label {
  border: none;
}

.scrollArea {
  max-height: calc(100vh - 400px);
}

@media (min-height: 900px) {
  .scrollArea {
    max-height: 600px;
  }
}

.simple-radio-group > *:first-child {
  margin-top: 4px !important;
}

.multiline-toggle-wrapper > * > button {
  align-self: flex-start;
  margin-top: 4px;
}

.simple-radio-group > button {
  min-width: 12px;
}

.sidebar-item-group-trigger {
  button,
  button:hover {
    background-color: transparent;
  }

  button[data-state="open"] {
    background-color: transparent !important;
  }
}

a.command-menu-item {
  display: block;
}

/**
  TODO: Remove this when we have a way to style this via macaw.
  - Currently there is no way in macaw to style conditions attached to attributes.
  - You cannot easily override the current style set when used prop in Box (eg. override current backgroundColor=...)
*/
.command-menu-item[data-focus="true"] {
  background-color: var(--mu-colors-background-default1-hovered) !important;
}

.command-menu tr[data-focus="true"] {
  background-color: var(--mu-colors-background-default1-hovered) !important;
}
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}
._fullSidebarWide_cqob6_1 {
  height: 100%;
  display: none;
}

._drawerWide_cqob6_6 {
  height: 100%;
  display: block;
}

/** This is used when we want to show smaller sidebar sooner than the default 1024px
* in order to show more page content */
@media (min-width: 1200px) {
  ._fullSidebarWide_cqob6_1 {
    display: block;
  }

  ._drawerWide_cqob6_6 {
    display: none;
  }
}
._inputWithPlaceholder_11rv2_1 input::placeholder {
  color: var(--mu-colors-text-default2);
}

._inputWithPlaceholder_11rv2_1 input::-webkit-input-placeholder {
  color: var(--mu-colors-text-default2);
}

._inputWithPlaceholder_11rv2_1 input::-moz-placeholder {
  color: var(--mu-colors-text-default2);
}
._grid_jy2xq_1 {
  grid-template-columns: 1fr;
}

/** Show two columns of permissions when we have enough horizontal space */
@media (min-width: 1640px) or (476px <= width <= 767px) {
  ._grid_jy2xq_1 {
    grid-template-columns: 1fr 1fr;
  }
}
/* Laid out off-screen rather than display:none, so the print copy measures
   its text (see useMeasuredNameHeight) exactly like the on-screen preview —
   a display:none copy only got laid out at print time, too late for the
   measured name height, and printed the SKU at a different position. */
.labelPrintPortalRoot {
  position: fixed;
  top: 0;
  left: -100000px;
  visibility: hidden;
  pointer-events: none;
}

@media print {
  /* The page's own margin would push every printed sheet down by a few
     pixels, past the end of the paper. */
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body > *:not(.labelPrintPortalRoot):not(.orderPrintPortalRoot) {
    display: none !important;
  }

  .labelPrintPortalRoot {
    position: static;
    visibility: visible;
    display: block !important;
  }
}

/* Thermal printers (roll paper) can't print colour or grey: they dither it
   into scattered dots, which reads as faded. Print everything pure black,
   with hard edges on the codes and slightly heavier text. */
@media print {
  .labelPrintPortalRoot[data-thermal="true"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .labelPrintPortalRoot[data-thermal="true"] * {
    color: #000 !important;
    -webkit-text-stroke: 0.25px #000;
  }

  .labelPrintPortalRoot[data-thermal="true"]
    svg
    [fill]:not([fill="none"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]) {
    fill: #000 !important;
  }

  .labelPrintPortalRoot[data-thermal="true"] svg [stroke]:not([stroke="none"]) {
    stroke: #000 !important;
  }

  .labelPrintPortalRoot[data-thermal="true"] svg {
    shape-rendering: crispEdges;
  }

  .labelPrintPortalRoot[data-thermal="true"] img {
    filter: grayscale(1) contrast(1.4);
  }
}
/* Interaction states for the label printing page that macaw Box props can't
   express (hover, focus-within, keyboard-active rows, tile tool reveal). */

.labelSearchRow {
  cursor: pointer;
}

.labelSearchRow:hover,
.labelSearchRow[data-active="true"] {
  background: var(--mu-colors-background-default1-hovered);
}

.labelSearchBox:focus-within {
  border-color: var(--mu-colors-border-accent1);
}

.labelSearchBox input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--mu-colors-text-default1);
  font: inherit;
  font-size: 15px;
  padding: 10px 0;
}

.labelTemplateTile {
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

.labelTemplateTile:hover {
  border-color: var(--mu-colors-border-default1-hovered);
}

.labelTemplateTile:focus-visible {
  outline: 2px solid var(--mu-colors-border-accent1);
  outline-offset: 2px;
}

.labelTemplateTile[data-selected="true"] {
  border-color: var(--mu-colors-border-accent1);
  box-shadow: 0 0 0 2px var(--mu-colors-border-accent1);
}

.labelTemplateTileTools {
  opacity: 0;
  transition: opacity 0.15s;
}

.labelTemplateTile:hover .labelTemplateTileTools,
.labelTemplateTile:focus-within .labelTemplateTileTools,
.labelTemplateTile[data-selected="true"] .labelTemplateTileTools {
  opacity: 1;
}

.labelQtyInput {
  width: 40px;
  height: 30px;
  border: 0;
  border-left: 1px solid var(--mu-colors-border-default1);
  border-right: 1px solid var(--mu-colors-border-default1);
  text-align: center;
  background: transparent;
  color: var(--mu-colors-text-default1);
  font: inherit;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

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

@media (prefers-reduced-motion: reduce) {
  .labelTemplateTile,
  .labelTemplateTileTools {
    transition: none;
  }
}

.labelWorkspaceGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* The dashboard's content area is an overflow:auto box that grows with the
   page while the window does the scrolling, so nothing inside it can stick.
   The label page is its own (only) scroll area instead, as tall as the space
   left on screen (set from LabelPrintDialog, which measures what sits above
   it, e.g. the ops top bar); this height is only the first-paint fallback. */
.labelPageScroller {
  height: calc(100vh - 1px);
  overflow-y: auto;
  overscroll-behavior-y: none;
}

/* Stays in view below the sticky page header while the template list
   scrolls. It holds one printed page at a time (see the preview pager), so
   it never needs a scroll area of its own. */
.labelPreviewColumn {
  position: sticky;
  top: 96px;
  min-width: 0;
}

/* Search results beside the queue, so the queue is visible while adding. */
.labelWhatGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px) {
  .labelWorkspaceGrid,
  .labelWhatGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .labelPreviewColumn {
    position: static;
  }
}
.orderPrintPortalRoot {
  display: none;
}

@media print {
  body > *:not(.orderPrintPortalRoot):not(.labelPrintPortalRoot) {
    display: none !important;
  }

  .orderPrintPortalRoot {
    display: block !important;
  }
}
@media print {
  header,
  .portal-no-print,
  button {
    display: none !important;
  }

  main {
    padding: 0 !important;
  }
}

.portal-shell {
  display: flex;
  min-height: 100vh;
}

.portal-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.portal-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.portal-menu-button {
  display: none;
}

.portal-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}

.portal-nav-link:hover {
  background: var(--mu-colors-background-default1Hovered, rgba(127, 127, 127, 0.12));
}

.portal-nav-link--active {
  font-weight: 700;
  background: var(--mu-colors-background-default2, rgba(127, 127, 127, 0.18));
}

.portal-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .portal-sidebar {
    position: fixed;
    left: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .portal-sidebar--open {
    transform: translateX(0);
  }

  .portal-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.35);
  }

  .portal-menu-button {
    display: block;
  }
}

@media print {
  .portal-sidebar {
    display: none !important;
  }
}

.portal-rota {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}

.portal-rota th,
.portal-rota td {
  border: 1px solid rgba(127, 127, 127, 0.25);
  padding: 2px;
  text-align: center;
  white-space: nowrap;
}

.portal-rota thead th {
  font-weight: 500;
  min-width: 34px;
}

.portal-rota-name {
  text-align: left !important;
  padding: 2px 8px !important;
  position: sticky;
  left: 0;
  background: inherit;
  font-weight: 500;
}

.portal-rota-cell {
  height: 34px;
  min-width: 34px;
  max-width: 64px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.portal-rota-cell[draggable="true"] {
  cursor: grab;
}

.portal-rota-weekend {
  background: rgba(127, 127, 127, 0.08);
}

.portal-rota-off {
  background: repeating-linear-gradient(
    45deg,
    rgba(127, 127, 127, 0.18),
    rgba(127, 127, 127, 0.18) 4px,
    transparent 4px,
    transparent 8px
  );
}

.portal-rota-draft {
  outline: 2px dashed #f59e0b;
  outline-offset: -3px;
}

.portal-rota-absent {
  box-shadow: inset 0 -4px 0 #60a5fa;
}

.portal-rota-past {
  opacity: 0.45;
  cursor: default;
}

.portal-rota-hours span {
  display: inline-block;
  margin: 0 3px;
}

.portal-rota-over {
  color: #dc2626;
  font-weight: 700;
}

.portal-rota-legend {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border: 1px solid rgba(127, 127, 127, 0.4);
}

.portal-rota select {
  font-size: 12px;
  max-width: 100%;
}

.portal-header-actions button,
.portal-header-actions a {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .portal-header {
    flex-wrap: wrap;
  }

  .portal-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.portal-signature {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 1;
  background: #fff;
  border: 1px dashed rgba(127, 127, 127, 0.6);
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
}

.portal-rules {
  border-collapse: collapse;
  font-size: 13px;
}

.portal-rules th,
.portal-rules td {
  padding: 4px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
  text-align: left;
}

.portal-rota-short {
  background: rgba(16, 185, 129, 0.15);
  font-size: 10px;
}