/* !importants are necessary here to overcome inline styles on these elements. */

.maxWidth500px #BidsLeftMargin {
  display: none;
}

.maxWidth500px table[summary="Bid Items"],
.maxWidth500px table[summary="Bid Items"] tbody,
.maxWidth500px table[summary="Bid Items"] tbody tr {
  display: block;
  clear: both;
}

.maxWidth500px table[summary="Bids"] td,
.maxWidth500px table[summary="Bid Items"] td,
.maxWidth500px table[summary="Bid Details"] td {
  display: block;
  padding: 0;
  width: auto !important;
}

.maxWidth500px table[summary="Bids"] td:first-child {
  margin-top: 0.5em;
}

.maxWidth500px table[summary="Bids"] select {
  width: 100%;
}

.maxWidth500px thead {
  display: block;
  clear: both;
}

.maxWidth500px thead tr {
  display: flex;
  clear: both;
}

.maxWidth500px th[style*="width: 90%"][style*="width: 90%"] {
  width: 80% !important;
}

.maxWidth500px th[style*="width: 10%"][style*="width: 10%"] {
  width: 20% !important;
}

.maxWidth500px td[style*="width: 90%"][style*="width: 90%"] {
  float: left;
  padding: 0.5em 0 0.5em 1em !important;
  width: 78% !important;
}

.maxWidth500px td[style*="width: 10%"][style*="width: 10%"] {
  float: right;
  padding: 0.5em 1em 0.5em 0 !important;
  width: 18% !important;
}

.maxWidth500px td[style*="width: 2%"][style*="width: 2%"] {
  display: none;
}

.maxWidth500px td[style*="width: 70%"][style*="width: 70%"] {
  padding: 1em 1em !important;
}

.maxWidth500px td[style*="width: 8%"][style*="width: 8%"] {
  float: left;
  padding-left: 1em !important;
  padding-bottom: 1em !important;
  width: 5em !important;
}

.maxWidth500px td[style*="width: 20%"][style*="width: 20%"] {
  float: left;
  padding-right: 1em !important;
  padding-bottom: 1em !important;
  width: calc(100% - 5em) !important;
}

.maxWidth500px table[border="1"],
.maxWidth500px table[border="1"] td {
  border: 0;
}

.maxWidth500px table[summary="Bid Items"] tbody:last-child tr:last-child {
  min-height: 14rem; /* Getting around a float issue to ensure background color spans the whole bid. */
}

.maxWidth500px table[summary="Bid Details"] {
  display: block;
}

.maxWidth500px table[summary="Bid Details"] td {
  padding: 0.5em 1em;
}

.maxWidth500px span.BidDetail {
  display: block;
  max-width: calc(
    100vw - 8em - 2px
  ); /* Approximation since targeting parent tables to change display type is not achievable. Overflow auto adds a catch-all for widths that are not perfect. */
  overflow: auto;
}

.maxWidth500px span.BidDetail a {
  word-wrap: break-word;
}