/** table.css **/
@import "./_table-cells.css" layer(table-cells);

.table-wrapper,
.standalone-datatable {
  --header-height: 46px;
  --line-color: #eaeaea;
  --fixed-column-max-width: 600px;
  container-type: inline-size;
  container-name: table;
  width: 100%;
  height: var(--p-grid-height, 70vh);
  border-radius: 4px;
  border: 1px solid var(--gray-100, #ddd);
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header'
    'body'
    'footer';
  /* animation: fadeIn 0.2s ease-in-out;
    transition: var(--transition);
    transition-property: width, top, left;
    transition-duration: 250ms;
    transform-origin: top left; */
}

.std-header {
  display: flex;
  justify-content: flex-end;
}

.std-header .right {
  display: flex;
  gap: 6px;
}

.standalone-datatable {
  height: auto !important;
}

.standalone-datatable th:is(.text-uppercase, .sorting)::before {
  content: '';
  font-size: 0;
  z-index: -1;
  display: none !important;
}

.solo-table th:is(.text-uppercase, .sorting)::before {
  content: '';
  font-size: 0;
  z-index: -1;
  display: none !important;
}

.table-wrapper:has(.standalone-datatable) {
  height: min-content;
}

.span-12:has(p-grid):only-child .table-wrapper {
  height: calc(100vh - var(--top-nav-height) - var(--gap-small) * 3);
}

p-grid,
.standalone-datatable table {
  --_height: 400px;
  min-height: var(--_height);
  max-height: 80vh;
}

.table__title {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--gray-800);
  height: 1.8em;
  margin: 0 !important;
  display: flex;
  align-items: center;
  border-radius: 6px;
  white-space: nowrap;
  padding: 0 6px;
}

.table__title:empty {
  min-width: 120px;
}

.table__title:empty {
  background: var(--dashboard-bg);
}

.table-loading+p-grid {
  display: none;
}

.table-wrapper :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p) {
  font-family: 'Roboto', sans-serif !important;
  font-size: inherit;
}

.table-wrapper>*,
p-grid,
p-table-footer {
  display: block;
  grid-column: span 12;
}

.table-wrapper p-grid {
  max-height: var(--_height, 400px);
  overflow: hidden;
}

.table-overflow-wrapper {
  position: relative;
  overflow: auto;
  height: 100%;
  width: 100%;
  background: #fff;
  scrollbar-width: thin;
}

p-grid,
.standalone-datatable:is(table) {
  overflow: auto;
}

.empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--gap-small);
  padding: var(--gap-small);
  text-align: center;
  color: var(--gray-600);

  padding: 10vh;
}

.loading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: 100%;
  gap: var(--gap-small);
  flex-direction: column;
  color: var(--gray-600);
  padding: 10vh;

  grid-column: span 12 !important;
}

.tab-content :is(.loading-wrapper) {
  min-height: 30vh;
}

.state-message {
  position: absolute;
  top: calc(50% + 2em);
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .76;

}

.loading-dots {
  display: flex;
  gap: var(--gap-small);
}

.loading-dots div {
  position: relative;
  width: 8px;
  height: 8px;
  background: #5bbd8a;
  border-radius: 50%;
}

.loading-dots div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #333;
  border-radius: 50%;
  animation: fadeDot 0.6s infinite;
  will-change: opacity;
}

.loading-dots div:nth-child(1)::before {
  animation-delay: 0.2s;
}
.loading-dots div:nth-child(2)::before {
  animation-delay: 0.4s;
}
.loading-dots div:nth-child(3)::before {
  animation-delay: 0.6s;
}

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

.table-overflow-wrapper::-webkit-scrollbar {
  --_size: 8px;
  width: var(--_size);
  height: var(--_size);
}

.table-overflow-wrapper::-webkit-scrollbar-track {
  background: var(--Neutrals-Grey-50, #F4F4F4);
  border-radius: 12px;
}

.table-overflow-wrapper::-webkit-scrollbar-thumb {
  background: var(--Neutrals-Grey-200, #D5D5D5);
  border-radius: 12px;
  cursor: grab;
}

.table-overflow-wrapper::-webkit-scrollbar:hover {
  --_size: 8px;
  background: var(--grey-400);
}

/** #region TABLE HEADER**/

.table__header {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  padding: var(--gap-small);
  min-height: var(--header-height);
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--_border-color, #eaeaea);
  z-index: 1;
}

.table__header,
thead {
  background: color-mix(in srgb, #fff 100%, transparent);
  border-top: none !important;
}

.view-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  background: var(--color-white);
  border-radius: 16px;
}

.view-toggle-wrapper>* {
  cursor: pointer;
}

.view-toggle-wrapper .icon-button {
  color: var(--color-disabled);
}

.view-toggle-wrapper .icon-button {
  flex-shrink: 0;
  fill: var(--neutrals-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;

  color: var(--color-text);
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
  background-color: transparent;

  border-radius: 50%;
}

.view-toggle-wrapper .icon-button:has(:checked) {
  background: var(--color-white, #fff);
}

[view-toggle='true'] .view-toggle-wrapper {
  display: flex;
  align-items: center;
  background: var(--dashboard-bg);
  padding: 2px;
}

[view-toggle='false'] .view-toggle-wrapper {
  display: none;
}

.switch-view-wrapper {
  display: none !important;
}

.switch-view-wrapper--active {
  display: contents !important;
}

.card-view-wrapper {
  padding-top: 0 !important;
  width: 100%;
}

.empty:only-child {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: #fff;
}

#card-view-wrapper ::-webkit-scrollbar {
  width: 12px;
  height: 8px;
}

.card-view-wrapper ::-webkit-scrollbar-track {
  background-color: #fff;
}

.card-view-wrapper ::-webkit-scrollbar-thumb {
  background-color: var(--button-bg-hover);
  cursor: grab;
}

.table-wrapper:has(.card-view-wrapper.switch-view-wrapper--active) {
  background: transparent;
  border: none;
  grid-column: 1 / -1;
  height: 100%;
}

p-table-header {
  grid-column: span 12;
}

.switch-view-wrapper {
  grid-column: span 12;
}

.table-wrapper:has(.card-view-wrapper.switch-view-wrapper--active) :is(.table__header) {
  border-radius: 6px;
  position: sticky;
  top: 4em;
}

.card-view-wrapper {
  padding: 0 !important;
}

.card-view-wrapper.switch-view-wrapper--active {
  display: grid !important;
  padding: 1em;
  height: 67vh;
}

.card-view-wrapper {
  padding-top: 8px;
  display: grid;
  grid-column: span 12;

  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-column: span 12;
  max-height: 75vh;
  gap: calc(var(--gap-small) * 2);
  padding-inline: 1em;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 5em;
  padding-inline: 0;
}

.table-wrapper:has(.expand-toggle:checked) :is(.card-view-wrapper, #card-view-wrapper.switch-view-wrapper--active) {
  max-height: 90vh;
  height: 100%;
}

.card-view-wrapper p-shipment-card {
  /*    width: 100%;*/
}

.card-view-wrapper .shipment-card {
  flex: 1;
  max-width: 100%;
  width: 100%;
  max-width: 425px;
}

.card-view-wrapper.switch-view-wrapper--active+p-table-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  border-top: 1px solid rgb(0 0 0 / 0.1);
}

.icon-button--active {
  opacity: 1;
}

.table__header-left,
.table__header-right {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
}

.table__header-right {
  width: 100%;
  justify-content: flex-end;
  container-name: table-actions;
  container-type: inline-size;
}

@container (width < 500px) {
  .table__header-right .icon-button :not(.icon) {
    display: none !important;
  }
}

.search-wrapper {
  --search-bar-width: 250px;
  position: relative;
  display: flex;
  width: var(--search-bar-width);
  height: 30px;
  padding: 0px 16px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 100px;
  border: 1px solid var(--lines-color, #eaeaea);
  background: var(--grey-100);
  will-change: width;
  transition: var(--transition);
  transition-property: width, background;
}

.search-wrapper::before {
  content: '\E089';
  font-family: 'prompt-icons';
  /* position: absolute; */
  left: 1em;
  font-size: 16px;
  color: var(--gray-600);
  z-index: 1;
  pointer-events: none;
}

.btn-clear {
  position: absolute;
  right: 0.5em;
  font-size: 16px;
  color: var(--gray-600);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  background-color: inherit !important;

  transition: var(--transition);
}

.search-wrapper .search-input {
  --_left: 2.5em;
  position: absolute;
  inset: 0;
  border: none;
  outline: none;
  width: calc(100% - var(--_left) * 1.8);
  height: 100% !important;
  min-height: 0 !important;
  font-size: 14px;
  background: transparent;
  left: var(--_left);
}

.search-wrapper .search-input::placeholder {
  color: var(--gray-600);
  font-size: 12px;
}

.search-wrapper:has(:focus-within, :hover) {
  /*    --search-bar-width: 320px;*/
}

.search-wrapper:has(:placeholder-shown) .btn-clear {
  /* opacity: 0;
  pointer-events: none; */
}

.search-wrapper:has(.search-input:not(:placeholder-shown)) {
  background-color: #6095ff25;
  border: 1px solid #6094ff;
}

.search-wrapper:has(.search-input:not(:placeholder-shown)) .btn-clear {
  color: #6094ff;
  background: transparent !important;
}

.table-config-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
}

@container (width < 60vw) {
  .search-wrapper {
    /* display: none; */
  }

  /* 
  .table__header-right .icon-button :not(.icon){
    display: none !important;
  } */
}

@container (width < 30vw) {
  .search-wrapper {
    display: none;
  }

  .table-config-wrapper {
    /* display: none; */
  }
}

@container (width > 60vw) {
  #quick-search-button {
    display: none;
  }
}

.searchWrapper:has([data-force-show]) {
  opacity: 1;
  pointer-events: auto;
}

/** #region TABLE HEADER **/
.table-wrapper table {
  border-collapse: collapse;
  width: 100%;
  height: min-content;
  table-layout: auto;
  background: inherit;
  border-collapse: separate;
  border-radius: 0;
  translate: 0 -1px;
}

p-grid[border='all'] :is(th, td, thead) {
  border: none;
  background-color: var(--row-bg, #fff);
  border: 1px solid var(--lines-color, #eaeaea);
  border-top: none;
  border-left: none;
}

p-grid[border='top'] :is(th, td, thead) {
  border-top: 1px solid var(--lines-color, #eaeaea);
}

p-grid[border='bottom'] :is(th, td, thead) {
  border-bottom: 1px solid var(--lines-color, #eaeaea);
}

p-grid[border='left'] :is(th, td, thead) {
  border-left: 1px solid var(--lines-color, #eaeaea);
}

p-grid[border='right'] :is(th, td, thead) {
  border-right: 1px solid var(--lines-color, #eaeaea);
}

p-grid[zebra] tr:not([data-expanded='false']:is(:nth-of-type(odd))):nth-of-type(odd):not( :has(th)) {
  --row-bg-opaque: #f8f9fd;
  --row-bg-transparent: rgba(68, 115, 212, 0.04);
  --row-bg: var(--row-bg-opaque);
}

/*
    Overrides for dataables
*/

:is(.standalone-datatable, .solo-table) :is(th, td, thead) {
  border: 1px solid var(--lines-color, #eaeaea);
}

:is(.standalone-datatable, .solo-table) tr:not(:has(th), :has(controlled-table)):nth-child(odd) {
  --row-bg-opaque: #f8f9fd;
  --row-bg-transparent: rgba(68, 115, 212, 0.04);
  --row-bg: var(--row-bg-opaque);
}

:has(tr > .first-non-hidable-column) {
  --row-bg-opaque: #fff !important;
  --row-bg-transparent: rgba(68, 115, 212, 0.04);
  --row-bg: var(--row-bg-opaque) !important;
}

tbody {
  margin-top: 4px;
}

tr[data-clickable]:hover td {
    filter: brightness(0.87);
}

tr[data-clickable] td {
    cursor: pointer;
}

/*td *, td {
    margin: 0px;
}*/

.table-wrapper :is(th, td, .table-cell) {
  font-size: 12px;
  padding: 0 8px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: var(--_width, var(--fixed-column-max-width)) !important;
  max-width: calc(var(--_width, var(--fixed-column-max-width)) + 2em) !important;
  min-width: var(--_width, .5em);
  color: var(--color-text);
}

.table-cell {
  display: table-cell;
}

.inner-cell {
  display: flex;
  justify-content: flex-start;
  gap: var(--gap-small);
}

.row-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  width: min-content;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  padding: 2px;
  margin: auto;
  opacity: 1 !important;
  transition: opacity 0.2s ease-in-out;
  cursor: pointer;
  background: rgb(0 0 0 / 0.03);
  border: 3px;
  /*    background: #FFF;*/
  width: 100%;
}

.disabled-row-action {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

:is(td, .table-cell) .row-action {
  display: flex;
  justify-self: center;
  flex-direction: row;
  margin: auto;
  width: auto;
  height: auto;
  background: rgb(0 0 0 / 0.03);
  border: 3px;
  font-size: 12px;
  cursor: pointer;
}

:is(td, .table-cell):has(.row-action) {
  width: 1% !important;
}

th:has(input[type='checkbox']),
th:has(span:empty),
.no-options {
  --_width: 30px !important;
  width: var(--_width);
  min-width: var(--_width);
}

th:has(span:empty) span::before {
  content: '';
  font-size: 0;
  z-index: -1;
  display: none !important;
  opacity: 0;
}

p-grid th {
  max-width: 300px;
  max-width: 300px;
}

/* .column-header {
  transition: width 800ms ease;
} */

p-grid th[data-header-name='Id'] {
  width: max-content;
  min-width: 0;
}

.column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 10px;
  background-color: white;
  cursor: col-resize;
  z-index: 1;
}

th:hover .column-resizer {
  background-color: #d7d7d7;
}

.truncate-wrapper {
/*  display: inline-block;*/
  width: calc(var(--_width, 100%) + 0.5em);
  max-width: inherit !important;
  min-width: inherit !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  padding-top: 0.50em;

  position: static;
  height: 100%;
  z-index: 0;
}

.truncate-wrapper:not(:has(.tag)){
    padding-top: 0.65em;
}

.truncate-wrapper:has(.row-action) {
  display: contents;
}

.no-options:not(.clickable) {
  padding: 0 !important;
  pointer-events: none;
}

.no-options:not(.clickable) * {
  display: none !important;
}

.context-wrapper .truncate-wrapper {
  min-width: min-content;
}

.table-wrapper table:has(.column-resizer:hover) th {
  pointer-events: none;
}

.table-wrapper table th:has(.column-resizer:hover) {
  pointer-events: auto;
}

.table-wrapper tbody tr:hover .row-action {
  opacity: 1;
  pointer-events: all;
}

.row-pin {
  opacity: 1;
}

:is(th, td):is(:first-of-type, :last-of-type) {
  border-left: none;
  border-right: none;
}

.table-wrapper th {
  position: relative;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-width: var(--_width, 180px);
  width: var(--_width, max-content);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  top: 0;
  transition: var(--transition);
}

th:has(span:empty) {
  pointer-events: none;
}

th>.icon {
  margin: 0;
  display: inline-flex;
  margin-right: 4px !important;
}

.sort-icon {
  padding: 6px;
  box-sizing: border-box;
  border-radius: 2px;
}

.sort-icon:hover {
  background: var(--button-bg-hover);
  filter: brightness(.95);
}

/* th[data-sort-order='ASC'] {
  --_icon: '\e080';
}

th[data-sort-order='DESC'] {
  --_icon: '\e081';
} */

.sort th::before {
  content: var(--_icon);
  font-family: 'prompt-icons';
  font-size: 14px;
  color: var(--gray-600);
  margin-right: 4px;
  display: inline-flex;
  transition: var(--transition);
}

.sort-icon {
  font-family: 'prompt-icons';
  font-size: 14px;
  color: var(--gray-600);
  margin-right: 4px;
  display: inline-flex;
  transition: var(--transition);
}

.table-wrapper :where(th:hover, th[data-config-target], th[data-sort-order]) {
  background: var(--button-bg-hover) !important;
  /* font-weight: 500 !important; */
}

.col-options-button {
  position: absolute;
  top: 50%;
  right: 16px;
  border: none;
  outline: none;
  background: transparent;
  padding: 4px;
  opacity: 0;
  transform: translateY(-50%);
  transition: var(--transition);
}

:is(th:hover, th[data-config-target], th[data-sort-order], th:focus-within) .col-options-button {
  opacity: 1;
}

.table-wrapper thead {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--_border-color, #eaeaea);
  border-collapse: separate;
  border-spacing: 0 5px;
  z-index: 1;
}

.table-wrapper tr {
  background: var(--row-bg, #fff);
  height: var(--row-height, 36px);
  max-height: min(var(--row-height), 36px);
  transition: background 0.2s ease-in-out;
  cursor: default;

/*  animation: fadeIn .25s;*/
}

.table-wrapper tr.pinned {}

.table-wrapper tr.pinned .row-pin {
  background: red;
}

.table-wrapper tbody tr:is(tr:hover):not(:has(.expanded-content)) {
  --row-hover-bg: var(--button-bg-hover);
  background: var(--row);
  filter: brightness(1.05);
}

.table-wrapper tbody tr:is(tr:has(input:checked)) {
  background: var(--prompt-colors-primary-light-2, #f2faf6);
  mix-blend-mode: multiply;
}

.table-wrapper th:hover::after {
  opacity: 1;
}

.row-select {
  --_w: 28px !important;
  position: sticky !important;
  display: table-cell;
  left: 0;
  align-items: center;
  min-width: var(--_w);
  width: var(--_w) !important;
  max-width: var(--_w);
  height: 100%;
  background: inherit;
  translate: -2px 0;
  z-index: 1;

  /* display: none; */
}

th:has(input) {
  pointer-events: all !important;
}

.table-wrapper th.sticky {
  top: 0;
  isolation: isolate;
  z-index: var(--z-index-sticky, 0);
}

.table-wrapper th.sticky span::before {
  content: '\e09f';
  font-family: 'prompt-icons';
  display: inline-block;
  margin-right: 4px;
  opacity: 0.5;
}

.table-wrapper th:has(input, .row-action) .truncate-wrapper::before {
  display: none !important;
}

.table-wrapper th[data-sort-column='ASC'] span::before {
  content: '\E080';
  font-family: 'prompt-icons';
  display: inline-block;
  margin-right: 4px;
  opacity: 0.5;
}

.table-wrapper th[data-sort-column='DESC'] span::before {
  content: '\E081';
  font-family: 'prompt-icons';
  display: inline-block;
  margin-right: 4px;
  opacity: 0.5;
}

.sticky {
  position: sticky !important;
  background-color: var(--row-bg, #fff);
}

.sticky-right {
    right: 0 !important;
    left: unset !important;

}


th:has(.select-options-wrapper) .truncate-wrapper {
  display: contents;
}

.select-options-wrapper {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;

  --_mr: auto;

  & input[name="row-select"] {
    position: relative;
    transform: none;
    left: unset;
    top: unset;
    margin-right: var(--_mr);
  }

   & * {
    outline: 1px solid;
     flex: 1;
   }

   &:has(.select-options-trigger:not([hidden])):hover, &:has(.select-options-trigger[data-config-target]) {
    --_mr: 4px;
    grid-template-columns: 2fr 1fr;
    background-color: var(--button-bg-hover);
   }

   &:hover .select-options-trigger, .select-options-trigger[data-config-target] {
    display: inline;
  }

  .select-options-trigger {
      height: 100%;
      z-index: 2;
      background-color: transparent;

      outline: none;
      border: none;
      display: none;
      will-change: transform, opacity;

      transition: 200ms;
      transition-property: transform, opacity;

      &:hover {
        background-color: var(--button-bg-hover);
      }
    }

    @starting-style {
      .select-options-trigger {
          opacity: 0;
          transform: translateY(-2px);
      }
    }
}

/* .sticky::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--line-color);
  border-right: 1px solid var(--line-color) !important;
} */
.row-select::after {
    display: none;
}

.row-select input {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.tag {
  --_bg-opacity: 100%;
  width: max-content;
  /* height: 2em; */
  border-radius: 100px;
  display: flex;
  align-items: center;
  font-size: 11px;
  flex-grow: 0;
  gap: calc(var(--gap-small) / 2);
  padding: 2px 8px;
  font-weight: 500;
  background-color: color-mix(in oklab,
      var(--_color) var(--_bg-opacity),
      transparent);
  color: var(--text-color, #fff);
  min-width: min-content !important;
}

.tag * {
  height: 1em;
  vertical-align: middle;
  line-height: 1;
  color: inherit;
}

.tag .icon {
  padding: 0 !important;
  font-size: 14px;
}

.tag.no-icon::before {
    content: " ";
    display: none;
}

.tag::before {
  content: var(--_icon);
  font-family: prompt-icons;
  display: inline-flex;
  translate: 0 -2%;
  align-self: center;
}

.tag:has(i)::before {
    display: none !important;
}

.tag[data-variant='light'] {
  --_bg-opacity: 60%;
  --text-color: var(--_color);
}

.tag[data-active='true'] {
  --_color: #5bbd8a;
  --_icon: '';
}

.tag[data-active='false'] {
  --_color: var(--grey-100);
  color: var(--color-black, #000);
  --_icon: '';
}

.tag[data-complete='yes'] {
  --_color: #5bbd8a;
  --_icon: '';
}

.tag[data-complete='no'] {
  --_color: var(--grey-100);
  color: var(--color-text, #000);
  --_icon: '';
}

.tag[data-type='unknown'] {
  --_color: #aaa;
}

.tag:is([data-type='in transit'], [data-type='intransit']) {
  --_color: #f4a100;
  --_icon: '\E0D9';
}

.tag[data-type='delivered'] {
  --_color: #5bbd8a;
  --_icon: '\E114';
}

.tag[data-type='arrived'] {
  --_color: #b200ff;
  --_icon: '\E114';
}

.tag[data-type='late'] {
  --_color: #ed8888;
  --_icon: '\E0DE';
}

.tag[data-type='created'] {
  --_color: #6094ff;
  --_icon: '\E0C0';
}

.tag[data-type='inreview'] {
    --_color: #f4a100;
    /*--_icon: '\E0C0';*/
}

.tag[data-type='pending'] {
    --_color: #6094ff;
    /*--_icon: '\E0C0';*/
}

.tag[data-type='saved'] {
    --_color: #b200ff;
    /*--_icon: '\E0C0';*/
}

.tag[data-type='uploaded'] {
    --_color: #5bbd8a;
    /*--_icon: '\E0C0';*/
}

.tag[data-type='unsuccessful'] {
    --_color: #ed8888;
    /*--_icon: '\E0C0';*/
}

[data-disable-tags] .tag {
  color: var(--color-text);
  --_color: transparent;
  font-weight: normal;
}

.tag[data-type='arrived'] {
  --_color: #b200ff;
  --_icon: '\E0C0';
}


.tag:is([data-type='Air'], [data-type='AIR']) {
  --_color: #06abab;
  --_icon: '\E0A9';
}

.tag:is([data-type='Sea'], [data-type='SEA'], [data-type='SEA - FCL'], [data-type='SEA - LCL'], [data-type='Ocean']) {
    --_color: #007b65;
    --_icon: '\E124';
}

.tag:is([data-type='Road'], [data-type='ROAD'], [data-type='ROA']) {
  --_color: #1c47b7;
  --_icon: '\E069';
}

.tag:is([data-type='Rail'], [data-type='RAIL'], [data-type='RAI']) {
  --_color: #d7d0bd;
  --_icon: '\E152';
  color: #003511;
}

.tag:is([data-type='Standard'], [data-type='STANDARD']) {
  --_color: #007b65;
  --_icon: '';
}

/* statuses */
.tag:is([data-type='Rail'], [data-type='RAIL'], [data-type='RAI']) {
  --_color: #d7d0bd;
  --_icon: '\E152';
  color: #003511;
}

.tag[data-type='active'] {
    --_color: #007BFF ;
}

.tag[data-type='inactive'] {
    --_color: #5e5e5e;
}

.tag:is([data-type='cls'], [data-type='wrk'], [data-type='opn']){
  --text-color:  var(--color-black);
}

/*TRANSPORT MODES*/
[data-transport-mode] {
  font-size: 0;
}

span[data-transport-mode]::before {
  content: var(--_icon);
  font-family: prompt-icons;
  font-size: 14px !important;
  opacity: 0.87;
}

[data-transport-mode='Air'] {
  --_icon: '\E0A9';
}

[data-transport-mode='Sea'] {
  --_icon: '\E124';
}

[data-transport-mode='Road'] {
  --_icon: '\E069';
}

[data-transport-mode='Rail'] {
  --_icon: '\E152';
}

/*TRANSPORT MODES*/
.status::before {
  --_size: 10px;
  --_color: var(--text-color, #fff);
  content: var(--icon, '');
  display: inline-flex;
  width: var(--_size);
  height: var(--_size);
  border-radius: 50%;
  background-color: var(--_color);
  color: var(--_color);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  width: 100%;
  justify-content: center;
  user-select: none;
}

.pagination:last-of-type {
  justify-self: center;
  margin-inline: auto;
}

.page-btn {
  display: flex;
  width: 30px;
  height: 30px;
  aspect-ratio: 1;
  border-radius: 100%;
  padding: 6px;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: transparent;
  color: var(--color-black);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  cursor: pointer;
}

.page-btn:not(.page-btn--active):hover {
  background-color: var(--button-bg-hover);
}

.page-btn--active {
  background-color: var(--color-brand-accent);
  color: var(--neutrals-white, #fff);
}

.page-btn.icon {
  font-size: 18px;
}

.page-btn--active+.page-btn--active {
  display: none;
}

.page-btn[data-value='0']:not(.icon) {
  display: none;
}

.table__footer {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  width: 100%;
  padding: var(--gap-small) calc(var(--gap-small) * 2);
  justify-content: space-between;
  will-change: contents;
}

.table-wrapper[data-show-pagination='False'] p-table-footer {
  display: none !important;
}

.table__summary {
  display: flex;
  align-items: center;
  will-change: contents;
  white-space: nowrap;
  font-size: 12px;
  width: fit-content;
}

.clickable {
  pointer-events: unset;
}

@container (width < 60vw) {
    .table__footer {
        grid-template-columns: 1fr 1fr;
    }

    .btn-dash-text {
        display: none;
    }

    .page-size-control {
        justify-content: flex-end;
    }

    .pagination {
        justify-content: flex-start;
    }

    .table__summary {
        display: none;
    }
}

.page-size-control {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  justify-content: flex-end;
  font-size: 12px;
}

.page-size-control select {
  background-color: transparent;
  /*    width: min-content;*/
  display: flex;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  align-items: center;
  gap: var(--padding-small-button-spacing, 2px);
  border: none;
  /*        border-radius: var(--radius-radius-2-px, 2px);*/
  /*        border: 1px solid var(--lines-color, #eaeaea);*/
}

.select-wrapper {
  position: relative;
  --_padding: 6px;
  width: 56px;
  height: 2.05em;
  border-radius: var(--radius-radius-2-px, 2px);
  border: 1px solid var(--lines-color, #eaeaea);
  display: grid;
  grid-template-columns: 1fr auto;
  cursor: pointer;
  margin: 0;
  gap: 2px;
}

.select-wrapper::after {
  content: '\e02b';
  font-family: 'prompt-icons';
  display: inline-flex;
  pointer-events: none;
  z-index: 1;
  position: absolute;
  top: 50%;
  right: var(--_padding);
  transform: translateY(-50%);
}

.select-wrapper select {
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding-left: var(--_padding);
  position: absolute;
  inset: 0;
  border: 1px solid var(--grey-100);
}

.select-wrapper:hover {
  background-color: var(--dashboard-bg);
}

.page-size-control select:focus {
  outline: none;
}

.page-size-control select option {
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  width: 2em;
  padding: 6px;
  border-radius: var(--radius-radius-2-px, 2px);
  border: 1px solid var(--lines-color, #eaeaea);
}

.page-size-control select option:hover {
  background-color: var(--color-brand-accent);
  color: var(--neutrals-white, #fff);
}

.page-size-control select option:checked {
  background-color: var(--color-brand-accent);
  color: var(--neutrals-white, #fff);
}

.page-size-control select option:disabled {
  background-color: var(--color-white);
  color: var(--color-black);
  opacity: 0.5;
}

.page-size-control select option:disabled:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.page-size-control select option:disabled:checked {
  background-color: var(--color-white);
  color: var(--color-black);
}

.page-size-control select option:disabled:active {
  background-color: var(--color-white);
  color: var(--color-black);
}

.page-size-control select option:disabled:focus {
  background-color: var(--color-white);
  color: var(--color-black);
}

.page-size-control select option:disabled:visited {
  background-color: var(--color-white);
  color: var(--color-black);
}

.page-size-control select option:disabled:focus-visible {
  background-color: var(--color-white);
  color: var(--color-black);
}

.page-size-control select option:disabled:focus-within {
  background-color: var(--color-white);
  color: var(--color-black);
}

.manual-table,
:not(p-grid) table {
  /* border: 1px solid var(--line-color); */
  font-family: Roboto;
}

.manual-table tr,
:not(p-grid) table tr {
  width: 100%;
  display: table-row;
  cursor: pointer;
}

.manual-table td :not(p-grid) table td {
  display: table-cell;
  vertical-align: middle;
  font-family: var(--font-family, 'Roboto') !important;
}

.table--expanded,
.table-wrapper:has(.expand-toggle:checked) {
  --_offset: 2em;
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(100dvw - var(--_offset)) !important;
  height: calc(100dvh - var(--_offset)) !important;
  z-index: var(--z-floating-content, 998);
  isolation: isolate;
}

.expand-toggle {
  display: none;
}

.btn:has(.expand-toggle:checked),
.btn:has(.hidden-cols-toggle:checked) {
  background-color: var(--button-bg-hover);
}

.table-backdrop {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  background: rgba(0 0 0 / 0.3);
  backdrop-filter: blur(3px);
  cursor: default;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

:has(.table--expanded,
  .table-configure-modal,
  .table-wrapper .expand-toggle:checked) .table-backdrop {
  pointer-events: auto;
  opacity: 1;
  z-index: 997;
}

.table-wrapper:has(.solo-table) {
  height: min-content;
  min-height: 400px;
}

.ui-state-highlight {
  background: var(--color-brand-accent) !important;
  color: var(--color-white, #fff) !important;
}

tr.ui-state-highlight :is(td) {
  color: var(--color-white, #fff) !important;
}

.table-overflow-wrapper .row {
  padding: 0 !important;
}

.card-view-wrapper[data-loading='true'] .loading-wrapper {
  display: flex;
}

.card-view-wrapper[data-loading='false'] .loading-wrapper {
  display: none;
}

.card-view-wrapper:empty {
  width: 100%;
  height: 100%;
  background-color: var(--color-white, #ffff);
}

:has(.table--expanded) .card-view-wrapper {
  max-height: 90vh !important;
  height: 90vh !important;
}

/* .card-view-wrapper[data-loading='true']::before {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  color: var(--color-black);
} */

.table-wrapper:has([data-loading='true'], .loading-wrapper:not([hidden]))
:is(button, .btn, input, select, label) {
    pointer-events: none;
    filter: grayscale(1);
    cursor: pointer;
    cursor: not-allowed;
}

.table-wrapper:has([data-loading='true'], .loading-wrapper:not([hidden]))
:has(* > :is(button, .btn, input, select, label)) {
    cursor: wait;
}

.empty-state-title {}

.empty-state {
  display: flex;
}

.empty-state code {
  display: flex;
  gap: 1em;
}

.empty-state .icon {
  font-size: 2em;
  padding: 0.5em;
  opacity: 0.5;
}

.empty-state-title {
  font-weight: 400 !important;
}

.empty-state .filters-container {
  display: flex;
}

.empty-state * {
  white-space: pre;
}

.table-wrapper:has(.hidden-cols-toggle:checked) .hidden-if-all-empty {
  display: none;
}

th.hidden-if-all-empty {
    --_width: max-content;
    width: var(--_width) !important;
    min-width: var(--_width) !important;
}

/* QRS type - Controlled table */
.controlled-table {
    border-radius: 8px;
    /* border: 1px solid var(--lines-color, #EAEAEA); */
    border: none !important;
    --_height: max-content !important;
    --_height: max-content !important;
    height: var(--_height) !important;
    min-height: var(--_height) !important;
}

.controlled-table :is(p-grid) {
  --_height: max-content !important;
  height: var(--_height) !important;
  min-height: var(--_height) !important;
}

.controlled-table :is(p-grid) :is(th, td) {
  border-top: var(--_border-top, none) !important;
  border-left: var(--_border-left, none) !important;
  border-right: var(--_border-right, none) !important;

  border-bottom: 1px solid var(--lines-color, #eaeaea) !important;
  background: var(--bg, transparent) !important;
}

.controlled-table tr {
  background: #fff;
}

.controlled-table .row-action {
  width: 100%;
}

.row-add-action {
  color: var(--badge-delivered-delivered, #49976e);
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  display: flex;
  gap: var(--gap, 8px);
}

.hidden {
  display: none;
}

.action-footer {
  cursor: pointer;
  padding: 8px 24px;
}

.action-footer button {
  pointer-events: none;
  padding: 0;
}

.action-footer:hover {
  background-color: color-mix(in oklab, var(--button-bg-hover) 60%, #fff 80%);
}

.controlled-table :is(p-grid) :is(.grid-actions) {
  --_width: 1% !important;
  justify-content: center;

  background-color: var(--neutrals-white, #fff) !important;

  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-left: 1px solid var(--lines-color, #eaeaea) !important;

  cursor: pointer;
  pointer-events: all;
}

.grid-actions--right {
  position: sticky !important;
  right: 0 !important;
}

.grid-actions-inline {
  display: flex;
  justify-content: center;
  gap: .5em;
}

.grid-actions-inline button {
  background: transparent;
  padding: 4px !important;
}

.route-table :is(td, th) {
  background-color: var(--neutrals-white, #fff);
  border-left: none;
  border-right: none;
}

.controlled-table :is(tr.route-row) {
  border-top: 1px solid var(--prompt-colors-primary-light, #def2e8);
  border-bottom: 1px solid var(--prompt-colors-primary-light, #def2e8);
  background-color: var(--row-bg);
}

:is(.route-row, .route-table thead) :is(td, th) {
  background-color: #f2faf6;
}

.highlight-cell {
  background-color: #f2faf6 !important;
}

.controlled-table :is(td) {
  transition: 0.125s ease-in-out;
}

.controlled-table :is(td):hover {
  background-color: rgba(0 0 0 / 0.03) !important;
}

.controlled-table td:has(.grid-actions):hover {
  background-color: red !important;
}

.routes-wrapper .table-wrapper {
  min-height: max-content;
  border-radius: 8px;
  border: 1px solid var(--lines-color, #eaeaea);
  overflow: hidden;
}

.route-wrapper table {
  border: none !important;
}

.routes-wrapper :is(table.controlled-table, p-grid) {
  --_height: max-content !important;
}

/* td[data-cell-active] {
  background-color: var(--button-bg-hover);
} */

.expanded-content-container {
  position: sticky !important;
  left: 0px;
  width: 100%;
}

td.expanded-content {

  --offset: 2.5em;
  position: relative;
  --padding: 1em;
  --max-width: calc(var(--_width) - var(--padding) * 2);
  /* width: 100%; */
  /* height: 10vh; */
  padding-block: 10px !important;
  padding-left: var(--offset) !important;

  box-sizing: border-box;
  padding-left: var(--offset) !important;

  --row-bg-opaque: #fff !important;
  --row-bg-transparent: rgba(68, 115, 212, 0.04);
  --row-bg: var(--row-bg-opaque);

  background: var(--row-bg) !important;
}

td.expanded-content>* {
  margin: 0 !important;
  padding: 0 !important;
}

.expanded-content::before {
  content: '';
  position: absolute;
  bottom: calc(100% - (var(--offset)));
  left: calc(var(--offset) / 2);
  height: 100%;
  width: 100%;
  border-left: 1px solid var(--lines-color, #eaeaea);
  border-bottom: 1px solid var(--lines-color, #eaeaea);
  border-radius: 8px;
}
/*
td.expanded-content {
    border: none !important;
}*/

tr[data-expanded="true"] > td {
    border-bottom: 1px solid var(--lines-color, #eaeaea) !important;
}

.expanded-content-container:has(+ .expanded-content-container) > td.expanded-content {
    border: none !important;
}

.expanded-content-container:has(+ .expanded-content-container) .expanded-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--offset) / 2);
    width: 1px;
    height: 100%;
    background: var(--lines-color, #eaeaea);
}

.expanded-content-container + .expanded-content-container {
    border-bottom: 2px solid green !important; 
}

td.expanded-content .subgrid-wrapper {
    position: sticky;
    top: 0;
    left: 0px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    width: 100% !important;
    max-width: var(--max-width);
}

[expanded='true'] td.expanded-content {
  position: sticky !important;
  left: 0px;
  width: 100%;
}

table:has(tr[expanded='true']) td:first-child {
  position: sticky;
  left: 0;
  background: white;
  z-index: 2;
}

controlled-table {
  display: block;
  background: var(--button-bg-hover);
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--lines-color, #eaeaea);
  --_min-width: 100% !important;
  
  .table-overflow-wrapper, table {
    --_min-width: 100% !important;
  }
}

/* FIXME: Do better Simo */
controlled-table *:not(button, .subgrid-title, .sort-icon, .loading-wrapper, .loading-dots, .loading-dots > *, .state-message, .tag, th, th *, td, td *) {
  max-width: var(--_width);
  min-width: var(--_min-width, 0) !important;
}

controlled-table table {
  overflow: hidden;
}

controlled-table :is(th, td) {
  border: none !important;
}

controlled-table .loading-wrapper {
  min-height: max(10vh, 100%) !important;
}

controlled-table tr {
  border-top: 1px solid var(--lines-color, #eaeaea) !important;
  border-bottom: 1px solid var(--lines-color, #eaeaea);
}

.expandable-row>td {
  position: relative;
}

.first-non-hidable-column {
  position: relative;
  padding-left: 2.5em !important;
}

.first-non-hidable-column::before, .first-non-hidable-column::after {
  content: '\e02b';
  font-family: prompt-icons;
  position: absolute;
  top: 50%;
  left: 0.8em;
  translate: 0 -50%;
  z-index: 999;
  transition: var(--transition);

  rotate: -90deg;
}

.first-non-hidable-column::after {
    opacity: 0;
}

tr[data-is-loading="true"] > td.first-non-hidable-column::before {
    --_size: 1.1em;
    content: "";
    opacity: 1;
    width: var(--_size);
    height: var(--_size);
    border-radius: 50%;
    border: 2px dotted var(--grey-400);
    animation: spinner 1s linear infinite;
}

.no-data-flag {
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    opacity: .87;
    z-index: 999;
}

/* td:has(> .no-data-flag)::before {
    opacity: 0;
    content: "\e0c4";
    transform: rotate(0deg) !important;
    rotate: 0deg !important;
} */

tr[data-all-subgrid-empty="true"] {
  & > td::before  {
    opacity: 0;
  }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.8;
    }
}



th.first-non-hidable-column::before, th.first-non-hidable-column::after {
    display: none !important;
}

[data-expanded='true']>.first-non-hidable-column::before {
  rotate: 0deg !important;
}

.expandable-row>td:has(.row-action):first-child::before {
  display: none;
}

#copilot-table {
  margin-top: 1em;
}

#copilot-table :is(.table-wrapper, .table-overflow-wrapper, table) {
  background-color: transparent;
}

#copilot-table table {
  border-collapse: separate;
}

#copilot-table .spacer-row {
  background: transparent;
  pointer-events: none;
  display: none;
}

#copilot-table .spacer-row:first-of-type {
  display: none;
}

#copilot-table table td {
  border-bottom: 1px solid var(--lines-color, #eaeaea) !important;
}

#copilot-table :is(.is-route, .is-line) {
  border-left: 1em solid green !important;
}

.controlled-table :is(p-grid) [data-header-name='divider-vertical'] {
  --_width: 1px;
  border-right: 1px solid var(--lines-color) !important;
}

controlled-table .truncate-wrapper {
  min-width: min-content !important;
}

[data-header-name='divider-vertical'] {
  display: none;
}

[data-header-name='divider-vertical']+ :is(th, td) {
  --_border-left: 1px solid var(--line-color) !important;
  border-left: var(--_border-left) !important;
}

#copilot-table .controlled-table :is(td):hover {
  background-color: rgba(0 0 0 / 0) !important;
}

.inline-editor {
  background: rgba(0, 0, 0, 0.1) !important;
  width: 100%;
}

/* Quoting Table  */
/* TODO: Move to own file */
quoting-table .quotings-wrapper-grid {
  --display: grid;
  gap: 1em;
  height: 100%;
}

quoting-table [data-type='main'] th:first-of-type span {
  padding: 2px 4px;
  font-size: 14px !important;
  line-height: 1.5;
  font-weight: normal;

  align-items: center;
  justify-content: center;

  background-color: var(--prompt-colors-primary-light, #def2e8);
  border-radius: 4px;

  color: var(--color-brand-accent-dark, #49976e);
}

quoting-table .additional-data-sections {
  border: 1px solid var(--lines-color, #eaeaea);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--lines-color, #eaeaea);
  display: grid;
  gap: 1px;

  grid-area: add-ons;

  margin-bottom: 1em;
}

.quoting-main-template {
  grid-area: main;
}

.base-data-table-wrapper {
  grid-area: base;
}

.additional-data-section {
  display: grid;
  grid-template-columns: 1.35fr 5fr;
}

.additional-data-section>* {
  height: 100%;

  font-size: 12px;
  padding: 8px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--color-text);
  background-color: #fff;
}

.additional-data-section :first-child {
  display: flex;
  align-items: center;
  font-weight: 700;
  border-right: 1px solid var(--lines-color, #eaeaea);
}

.additional-data-section.tall-row {
  min-height: min(200px, 100%);
}

.quotings-wrapper-grid,
.side-drawer--minimized .quotings-wrapper-grid {
  --display: flex;
  flex-direction: column;
}

.side-drawer--maximized .quotings-wrapper-grid {
  --display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;

  grid-template-areas:
    'main base'
    'main add-ons';
}

.side-drawer--maximized .quotings-wrapper-grid [data-type='main'] {
  grid-row: span 2;
}

td:has(.btn-cell-lookup) {
  position: relative;
}

td:has(.btn-cell-lookup) .inline-editor {
  position: relative;
  width: 100%;
  min-width: 6em;
  z-index: 999;
}

.btn-cell-lookup {
  position: absolute;
  top: 50%;
  right: 1em;
  translate: 0 -50%;
  z-index: 999;
}

/**Grey out row with specific data*/

#Containers-subgrid tr:has(td[data-header-name="ActualEventDateTime"] > .truncate-wrapper:empty) {
  opacity: 0.76;
  filter: grayscale(1);
}

.config-subgrid-button {
  position: absolute;
  top: 4em;
  right: 0;
  width: 2em;
  height: 4em;
  background: var(--button-bg-hover, #fff);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;

  border: 1px solid var(--line-color);
  box-shadow: 0 0 8px 0px rgba(0 0 0 / .08);

  transition: all 400ms;
}

.subgrid-wrapper:has(.subgrid-title) .config-subgrid-button {
    top: 0;
    height: 3em;
}

.config-subgrid-button:hover {
    background: var(--color-white, #fff) !important;
    width: 3em;
}

/* MORE QRS OVERRIDES */
:is(.standalone-datatable, .solo-table, quoting-table) :is(th, td, thead) {
  --border: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--lines-color, #eaeaea) !important;
}

:is(.standalone-datatable, .solo-table) [data-header-name='divider-vertical'] {
  & + td, & + th {
    --_border-left: 1px solid var(--line-color) !important;
    border-left: var(--_border-left) !important;
  }
}

quoting-table :is(th, td) {
  border-bottom: 1px solid var(--lines-color, #eaeaea) !important;
}

#Users tr:has(td[data-header-name="EmailConfirmed"][title="Yes"]) #ResendActivation {
  filter: grayscale(1) opacity(0.3);
  pointer-events: none;
}

p-drawer {
  table {
    tr:last-of-type {

      td {
        border-bottom-color: transparent !important;
      }
    }
  }
}


.subgrid-title {
    padding: .5em;
    width: max-content;
    margin-top: .3em;
    margin-left: .3em;
    border-radius: 4px;
    background: #fff;
}

.absolute-loader-wrapper {
    position: absolute;
    inset: 0;
    background: red;
    transition-duration: 6s;
    transition-property: opacity, background-color;
    background: var(--color-white, #fff);
}

.table-overflow-wrapper:has(.absolute-loader-wrapper) {
    overflow: hidden;
}



/*Responsiveness*/

@media only screen and (max-width: 1028px) {
    .search-wrapper {
        --search-bar-width: 236px;
    }

    .pagination {
        width: 115%;
    }

    .select-wrapper select {
        height: 1.5em !important;
    }

    .card-view-wrapper p-shipment-card {
        width: 90%;
    }
}

@media only screen and (max-width: 1008px) {
    .search-wrapper {
        --search-bar-width: 225px;
    }
}

@media only screen and (max-width: 995px) {
    .search-wrapper {
        --search-bar-width: 210px;
    }
}

@media only screen and (max-width: 980px) {
    .search-wrapper {
        --search-bar-width: 195px;
    }
}

@media only screen and (max-width: 965px) {
    .search-wrapper {
        --search-bar-width: 180px;
    }
}

@media only screen and (max-width: 950px) {
    .search-wrapper {
        --search-bar-width: 160px;
    }
}

@media only screen and (max-width: 932px) {
    .search-wrapper {
        --search-bar-width: 140px;
    }
}

@media only screen and (max-width: 912px) {
    .search-wrapper {
        --search-bar-width: 125px;
    }
}

@media only screen and (max-width: 895px) {
    .search-wrapper {
        --search-bar-width: 110px;
    }
}

@media only screen and (max-width: 889px) {
    .search-wrapper {
        --search-bar-width: 200px;
    }
}

    @media only screen and (max-width: 815px) {
        .pagination {
            width: 125%;
        }

        .select-wrapper select {
            height: 1.5em !important;
        }

        .select-wrapper::after {
            left: 26px !important;
        }

        .page-size-control {
            margin-right: 13px;
        }

        .card-view-wrapper p-shipment-card {
            width: 85%;
        }
    }

.pseudo-row {
  filter: grayscale(1) opacity(.48);
  pointer-events: none;
  margin-left: 1em;

  & > td:first-child {
    border-left: 6px solid #F7F7F7 !important
  }
}