table {
  --td-padding: 1.2rem .8rem;
  --th-padding: 1.2rem .8rem;
  --tf-padding: 1.2rem .8rem;
  --td-font-size: var(--font-body-sm-size, calc(var(--body-font-size) * 0.0875rem));
  --th-font-size: var(--font-body-sm-size, calc(var(--body-font-size) * 0.0875rem));
  --tf-font-size: var(--font-body-sm-size, calc(var(--body-font-size) * 0.0875rem));
  --td-color: rgb(var(--color-foreground), var(--text-color));
  --th-color: rgb(var(--color-foreground), var(--text-color));
  --tf-color: rgb(var(--color-foreground), var(--text-color));
  --tbd-bg: rgb(var(--color-background), 255 255 255);
  --table-border-color: rgba(var(--color-foreground, var(--text-color, 0 0 0))/.15);
  --table-border-style: solid;
  --table-border-width: 1px;
  --td-border-width:0 0 0 0;
  --td-border-color: var(--table-border-color);
  --th-border-width:0 0 0 0;
  --th-border-color: var(--table-border-color);
  --tr-border-width:var(--table-border-width) 0 0 0;
  --tr-border-color: var(--table-border-color);
}
@media (min-width: 768px) {
  table {
    --td-font-size: var(--font-body-size, calc(var(--body-font-size) * 0.1rem));
    --th-font-size: var(--font-body-size, calc(var(--body-font-size) * 0.0875rem));
    --tf-font-size: var(--font-body-size, calc(var(--body-font-size) * 0.1rem));
  }
}
table {
  /* move from customer */
  border-collapse: collapse;
  box-shadow: none;
  width: 100%;
  position: relative;
  table-layout: auto;
  border: var(--table-border-width) var(--table-border-style) var(--table-border-color);
}

table thead,
table thead th {
  font-size: var(--th-font-size);
  text-transform: uppercase;
  color: var(--th-color);
}
table thead th{
  border-width:var(--th-border-width);
  border-color:var(--th-border-color);
}
table tbody {
  background: var(--tbd-bg);
}
table tr{
  border-style:var(--table-border-style);
  border-width:var(--tr-border-width);
  border-color:var(--tr-border-color);
}
table tbody td,
table tbody th{
  border-width:var(--td-border-width);
  border-color:var(--td-border-color);
}
table tbody,
table tbody td,
table tbody th {
  font-size: 1.4rem;
  color: var(--td-color);
}
table tfoot th,
table tfoot td {
  font-size: var(--tf-font-size);
  color: var(--tf-color);
}
table tbody td,
table tbody th {
  padding: var(--td-padding, 1em);
}
table thead th {
  padding: var(--th-padding, 1em);
}

table tfoot th,
table tfoot td {
  padding: var(--tf-padding, 1em);
  border-width:var(--td-border-width);
  border-color:var(--td-border-color);
}

table td:empty {
  display: initial;
}

.upng-posventa-table td:empty {
  display: table-cell;
}

.upng-posventa-table td {
  text-align: right;
}

.upng-posventa-table th {
  text-align: right;
}

@media screen and (min-width: 750px) {
  table {
    /*border: none;
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);*/
  }
  table > tbody > tbody tr:first-of-type {
    border-top: none;
  }
}
@media screen and (forced-colors: active) {
  table {
    border-top: 0.1rem solid transparent;
    border-bottom: 0.1rem solid transparent;
  }
  table > tbody > tr {
    border-top: 0.1rem solid transparent;
  }
}

/* works around colspan phantom border issues */
table > thead::after,
table > tfoot::before {
  content: ' ';
  height: 0.1rem;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  background: rgba(var(--color-foreground, var(--text-color, 0 0 0))/ 0.15);
}

@media screen and (forced-colors: active) {
  table > thead::after,
  table > tfoot::before {
    background: CanvasText;
  }
}

/* mobile table overrides */
    /* table */
      @media (min-width: 551px) and (max-width: 749px) {
            .upng-table-responsive{
              --td-border-width:0 0 0 0;
            }
            .upng-table-responsive thead,
            .upng-table-responsive th,
            .upng-table-responsive tfoot td:first-of-type {
              display: none;
            }
            .upng-table-responsive tr {
              border: 1px solid black;
                  display: grid;
                  grid-template-columns: 1fr 1fr 1fr !important;
            }
            .upng-table-responsive td {
              text-align: left;
              border: none;
              border-bottom: 1px solid rgba(0, 0, 0, 0.243);
            }
            .upng-table-responsive td:has(.upng-linktable),
            .upng-table-responsive td:has(.icon-document){
              display: flex;
                  gap: 1em;
                  align-items: center;
                  justify-content: flex-end;
            }

            .upng-table-responsive td::before {
              color: rgba(var(--td-color), 0.75);
              content: attr(data-label);
              padding-right: 1.6rem;
              text-transform: uppercase;
              flex-grow: 1;
              text-align: left;
              display: block;
              font-weight: bold;
              margin-bottom: 0.5em;
            }
      }

      /* Mobile */
      @media screen and (max-width: 550px) {
          .upng-table-responsive{
            --td-border-width:0 0 0 0;
          }
          .upng-table-responsive thead,
          .upng-table-responsive th,
          .upng-table-responsive tfoot td:first-of-type {
            display: none;
          }
          .upng-table-responsive tr {
            border: 1px solid black;
                display: grid;
                grid-template-columns: 1fr 1fr  !important;
          }
          .upng-table-responsive td {
            text-align: left;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.243);
          }
          .upng-table-responsive td:has(.upng-linktable),
          .upng-table-responsive td:has(.icon-document){
            display: flex;
            gap: 1em;
            align-items: flex-start;
            justify-content: flex-start;
            flex-direction: column;
          }

          .upng-table-responsive td::before {
            color: rgba(var(--td-color), 0.75);
            content: attr(data-label);
            padding-right: 1.6rem;
            text-transform: uppercase;
            flex-grow: 1;
            text-align: left;
            display: block;
            font-weight: bold;
            margin-bottom: 0.5em;
          }
      }

.upng-posventa-table-loader {
  width: 24px;
  height: 24px;
  border: 5px solid #000;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  }

  @keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
} 

.upng-posventa-backorder-table th {
  text-align: left;
}

.upng-posventa-backorder-table td {
  text-align: left;
  font-size: 14px;
}

.upng-filtros-postventa .btn[disabled], .upng-filtros-postventa .btn[aria-disabled=true] {
  opacity: 1;
}