#macro_options{
  height: 100vh;
  border-right: var(--gray) 1px solid;
}

/* .in_stock_only .out_of_stock{
  display: none;
} */

#macro_options ul{
  list-style-type: none;
  font-size: 1.7rem;
}

#macro_options ul li{
  margin-bottom: 1rem;
}

#recent_search .item{
  background: var(--p-lblue);
  padding: .2rem;
}

#recent_search .item:hover{
  background: var(--lb-highlight);
}

#recent_search .card-body .dropdown-divider:last-child{
  display: none;
}

.alert-banner{
  position: fixed;
  width: 100%;
  background-color: #7df5b1;
  z-index: 999;
}

.alert-banner.shrink{
  top: 55px;
}

.parts-list{
  min-height: 60vh;
}

.list-price{
  color: var(--p-blue);
}

.cart_quantity{
  display: flex;
}

.cart_quantity input{
  width: 50px;
}

/* parts responsive table */
.lg-sidebar{
  max-width: 100%;
}

.rtable {
	 margin: 0;
	 width: 100%;
	 display: table;
}

/* just to test that it's full height */
table { width: 100px; }
td:nth-child(2) > div { background: lightgray; }


.adv-srch-modal .modal-dialog{
  max-width: 992px;
}

@media screen and (max-width: 992px) {
	.rtable {
		 display: block;
	}

  .rtable .trow {
    border-top: var(--bs-indigo) 3px solid;
    border-bottom: #000 1px solid;
  }

  .rtable:nth-of-type(odd) .trow {
    border-top: var(--bs-cyan) 3px solid;
  }

  /* Each part row sits in its own .rtable on mobile, with a hidden
     .details (description) div between them. Force the hidden state to
     win against any specificity from .details / Bootstrap utilities so
     the description never reserves vertical space between part rows. */
  .details.hide {
    display: none !important;
  }

  /* The part image is rendered with width=70 height=70 in HTML but
     .img-fluid (max-width: 100%; height: auto) lets large source images
     (img-proxy can return originals) scale up to the full mobile cell
     width, producing massive image rows. Constrain it on mobile so the
     image cell stays a known small box. */
  .rtable .trow .cols-1 img {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
  }

  /* The inline style="height: 100%" on cell.cols-10 and on
     .show-converter-options is only meaningful inside the desktop's
     display: table layout (where .rtable has height: 1px and rows
     stretch). On mobile the rows are block and 100% resolves against
     ancestor heights that may bubble up to .parts-list { min-height:
     60vh } and other vh-based containers, producing rows that are
     viewport-heights tall. Force them back to auto. */
  .rtable .trow .cell[style*="height"],
  .rtable .trow .show-converter-options[style*="height"] {
    height: auto !important;
  }

  /* The +/- buttons next to the quantity input inherit `height: 100%`
     from the unscoped `.trow .quantity .btn` rule below. On desktop the
     .rtable is display: table and the cell stretches to row height, so
     100% means the cell's height. On mobile the cell is display: block
     with no defined height, and the percentage resolves against
     ancestor min-heights — turning each +/- into a tall vertical bar.
     Lay .quantity out as a small horizontal flex group on mobile and
     force the buttons back to their natural size. */
  .rtable .trow .quantity {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
  }
  .rtable .trow .quantity .btn {
    height: auto !important;
    flex: 0 0 auto;
  }
}

 .rtable .trow {
	 display: table-row;
	 background: var(--lgray);
}

 .rtable .trow.secondary {
	 background: #FFF;
}
 .rtable .trow.header {
	 color: #FFF;
	 background: var(--p-blue);
}
 .rtable .trow.white {
	 background: #FFF;
}

.rtable .trow:not(.header):hover {
  background: var(--lb-highlight);
}

.rtable .trow.header .cell {
  border-right: #FFF 1px solid;
}

.rtable .trow.header .cell:last-child {
  border-right: none;
}

.rtable .trow.header .bi{
  cursor: pointer;
}

.details .rtable{
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.125);
  display: table;
}

.details .rtable .trow.header {
  font-weight: 900;
  color: #FFF;
  background: var(--bs-gray);
}

.details .rtable .trow {
  display: table-row;
  background: #FFF;
}
.details .rtable .trow.secondary {
  background: #DEDEDE;
}

.rtable .trow:not(.header):hover {
  /* background: var(--lb-highlight) !important; */
}

 @media screen and (max-width: 992px) {
	 .rtable .trow {
		 padding: 14px 0 7px;
		 display: block;
	}
	 .rtable .trow.header {
		 padding: 0;
		 height: 6px;
	}
	 .rtable .trow.header .cell {
		 display: none;
	}
	 .rtable .trow .cell {
		 margin-bottom: 10px;
	}
	 .rtable .trow .cell:before {
		 margin-bottom: 3px;
		 content: attr(data-title);
		 min-width: 98px;
		 font-size: 1rem;
		 line-height: 1rem;
		 font-weight: bold;
		 text-transform: uppercase;
		 color: #777;
		 display: block;
	}
}
 .rtable .cell {
	 padding: 3px 6px;
	 display: table-cell;
   word-break: break-word;
}
 @media screen and (max-width: 992px) {
	 .rtable .cell {
		 padding: 2px 16px;
		 display: block;
	}
  .trow .quantity input,
  .item-details .add-item input{
    display: inline-block;
    max-width: 5rem !important;
  }
}



.trow .quantity .btn,
.item-details .add-item .btn{
  height: 100%;
}

.cols-7{
  display: flex;
}

.cols-7 .btn{
  float: right;
  align-items:flex-end;
}

.availibility{
  color: #27ae60;
}

.details .lable{
  font-weight: bold;
}

/* Long unbroken strings (e.g. "BUSHINGS/BEARINGS/WASHERS") were clipping
   into the next column. Force them to wrap inside the detail cells.
   Use !important + a broader selector because Masonry sets inline widths
   on the .col-md-6 items and the masonry-positioned items would otherwise
   let inline text overflow into siblings. */
.details,
.details *,
.details .row,
.details .col,
.details [class*="col-"] {
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Keep masonry-positioned content from bleeding into the next part row
   when item heights are taller than masonry's initial measurement. */
.details .more_part_info_target {
  overflow: hidden;
}

/* Keep masonry-positioned content from bleeding into the next part row
   when item heights are taller than masonry's initial measurement. */
.details .more_part_info_target {
  overflow: hidden;
}

.details .col-md-6 .row{
  border-bottom: var(--gray) 2px solid;
}

@media screen and (min-width: 992px) {
  .rtable{
    table-layout: fixed;
    height: 1px; /* this is ignored, but necessary for td to be 100% height */
  }

  .show-converter-options{
    width: 100%;
  }

  .show-converter-options button{
    align-self: auto;
    flex-grow: 1;
    margin: .3rem 0;
    font-size: .8rem;
  }

  .rtable .quantity{
    display: flex;
    flex-wrap: wrap;
  }

  .rtable .quantity input{
    flex-grow: 1
  }

  .rtable .quantity button {
    flex-basis:50%;
    flex-grow: 0;
    max-width: 50%;
    padding: .25rem 0;
  }

  .cols-1{
    width: 5%;
  }
  .cols-2{
    width: 7.5%;
  }
  .cols-3{
    width: 7.5%;
    word-wrap: break-word;
  }
  .cols-4{
    width: 10%;
  }
  .cols-5{
    width: 10%;
  }
  .cols-6{
    width: 5%;
  }
  .cols-7{
    width: 10%;
  }
  .cols-8{
    width: 20%;
  }
  .cols-9{
    width: 8%;
  }
  .cols-10{
    width: 5%;
  }
  .cols-11{
    width: 12%;
  }

  .tem-col-1{
    width: 5%;
  }
  .tem-col-2{
    width: 5%;
  }
  .tem-col-3{
    width: 5%;
  }
  .tem-col-4{
    width: 7.5%;
  }
  .tem-col-5{
    width: 7.5%;
  }
  .tem-col-6{
    width: 20%;
  }
  .tem-col-7{
    width: 30%;
  }
  .tem-col-8{
    width: 5%;
  }
  .tem-col-9{
    width: 5%;
  }
  .tem-col-10{
    width: 10%;
  }

  /* makes it extra small */
  .tbl_tiny .rtable{
    font-size: 14px;
  }

  .tbl_tiny .block{
    display: inline-block;
    max-width: 100%;
  }

  .tbl_tiny .quantity{
    /* display: inline-block; */
  }

  .tbl_tiny .rtable .cols-1 img{
    display: block;
  }

  .tbl_tiny .rtable .cols-1{
    padding: 0;
  }

  .tbl_tiny .rtable .cell {
    padding: 1px 3px;
    vertical-align: top;
  }

  .tbl_tiny .add_item,
  .tbl_tiny .remove_item{
    padding: .1rem .2rem;
    font-size: .3rem;
    line-height: 0.4;
  }

  .tbl_tiny .btn:not(.btn-lg, .search-converters > *){
    padding: .25rem .35rem;
    font-size: .7rem;
    line-height: .9;
  }

  .tbl_tiny .form-control:not(.search-converters > *) {
    padding: .1rem .75rem;
    font-size: .9rem;
    line-height: 1.0;
  }

  .tbl_tiny .mb-lg-1 {
    margin-bottom: .1rem !important;
  }

  .tbl_tiny .big-picture{
    max-height: 250px;
  }

}

@media screen and (max-width: 991px) {
  .parts-display-buttons{
    display: inline;
  }
}

@media screen and (min-width: 992px) and (max-width: 1714px) {
  .parts-display-buttons{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .parts-display-buttons > *{
    flex-grow: 1;
  }
}

@media screen and (min-width: 1715px) {
  .parts-display-buttons a{
    margin-left: .25rem;
  }
}

@media screen and (min-width: 1400px) {
  .btn_a{
    width: 100%;
    max-width: 100%;
  }
  .btn_b{
    width: 65px;
    max-width: 100%;
    margin-right: 0;
  }
  .btn_c{
    /* width: 102px; */
    max-width: 100%;
  }

  .sc_qty{
    width: 80px;
  }

  .sc_img{
    width: 110px;
  }

  .cols-1{
    width: 5%;
  }
  .cols-2{
    width: 7.5%;
  }
  .cols-3{
    width: 7.5%;
    word-wrap: break-word;
  }
  .cols-4{
    width: 10%;
  }
  .cols-5{
    width: 10%;
  }
  .cols-6{
    width: 5%;
  }
  .cols-7{
    width: 10%;
  }
  .cols-8{
    width: 23%;
  }
  .cols-9{
    width: 8%;
  }
  .cols-10{
    width: 5%;
  }
  .cols-11{
    width: 9%;
  }

}

.ms-n5 {
    margin-left: -40px;
}

/* parts display */

.item-details .row:not(.box_buttons){
  margin: 1.5rem 0;
  border-bottom: var(--gray) 2px solid;
}

.item-details .lable{
  font-weight: bold;
  color: var(--p-blue);
}
@media screen and (max-width: 576px) {
  .item-details .box_buttons button{
    width: 100%;
  }
}