/* !importants are necessary here to overcome inline styles on these elements. */
.layoutClass {
  margin-left: 10px;
}

.BidContent {
  margin-right: 5px;
}

.bidsHeader {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.pageStyles .bidItems .bid {
  display: flex;
  width: 100%;
  padding: 5px 20px;
}

.bid .bidTitle {
  flex: 3;
}

.bid .bidStatus {
  display: flex;
  gap: 20px;
  flex: 1;
}

.maxWidth500px #BidsLeftMargin {
  display: none;
}

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

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

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

.maxWidth500px table[class="bidsTbl"] 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[class="bidItems"] tbody:last-child tr:last-child,
.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;
}