.moremob{ display:block; }
.deskcart{ display:block; }.mobcart{ display:none; }

.shopping-tab{padding:30px; background:#fff;     border: 1px solid #eee;} 
.cart-table .product-image { float: left; width: 12%; position:relative; }
.cart-table .product-details { float: left; width: calc(37% - 25px); margin-right:15px; }
.cart-table .invoice { float: left; width: calc(25% - 10px); }
.cart-table .product-price { float: left; width: 12%; margin:0; font-weight: 400; }
.cart-table .product-quantity { float: left; width: 18%; }
.cart-table .product-removal { float: left; width: 9%; }
.cart-table .product-line-price { width: calc(12% - 15px); float: left; text-align: right; font-weight: 500;  }

 
.cart-table .group:before, .cart-table .shopping-tab:before, .cart-table .column-labels:before, .cart-table .product:before, .cart-table .totals-item:before,
.cart-table .group:after, .cart-table .shopping-tab:after, .cart-table .column-labels:after, .cart-table .product:after, .cart-table .totals-item:after { content: ''; display: table; }
.cart-table .group:after, .cart-table .shopping-tab:after, .cart-table .column-labels:after, .cart-table .product:after, .cart-table .totals-item:after { clear: both; }
.cart-table .group, .cart-table .shopping-tab, .cart-table .column-labels, .cart-table .product, .cart-table .totals-item { zoom: 1; }
.cart-table .psymbol{ font-size:14px; } 
.cart-table .column-labels{border-bottom: 1px solid #eee; margin-bottom: 10px;} 
.cart-table .column-labels label { font-weight:500; color:var(--gray); }
 
.cart-table .product { position:relative; margin-bottom:5px; padding:10px; border-bottom: 1px solid #eee; }
.onspecial2.product .product-image { margin-left: -3px; }
.cart-table .product .product-image { text-align: center; }
.cart-table .product .product-image a{display: block;}
.cart-table .product .product-image img { width: 90%; }
.cart-table .product .product-details .product-title { margin-right: 20px; font-size: 14px; font-weight: 500; margin: 0; }
.cart-table .product .product-details .product-description { margin: 5px 20px 5px 0; line-height: 1.4em; }
.cart-table .product .product-quantity input { width: 40px; }
.cart-table .product .remove-product { border: 0; padding: 4px 8px; background-color: #c66; color: #fff; font-size: 12px; border-radius: 3px; }
.cart-table .product .remove-product:hover { background-color: #a44; }
.remove-pro { width: 20px; height: 20px; line-height: 18px; cursor:pointer; float: right; margin-top: 15px; } 
.remove-pro i{ color: var(--gray); padding: 3px; font-size: 16px; } .remove-pro:hover i{color:var(--red);}
.remove svg,.remove-pro svg{ width:22px; height:22px; }

.cart-table .totals .ponum{ width:60%; float:left; }
.cart-table .totals .carttotal{ width:40%; float:right; }
.cart-table .totals .totals-item { float: right; clear: both; width: 100%; }
.cart-table .totals .totals-item label { float: left; clear: both; text-align: right; }
.cart-table .totals .totals-item .totals-value { float: right; text-align: right; }
  
.sug_pro{ display: flex; flex-wrap: wrap; align-items: center;  border-bottom: none!important; background: #fffbf0; margin:0 -15px; padding: 10px 0!important;}
.sug_pro .product-image a img{width:60%!important; margin-right: -15px;}
.sug_pro .remove-pro{right:10px!important;}
.sug_pro .remove-pro i{font-size:12px;}
.sug_pro .product-image a:before{    position: absolute; height: 45px; width: 1px; z-index: 1; content: ""; background:var(--mycolor); margin-top: -25px; left: 16px;}
.sug_pro .product-image a:after{ content: ""; background: var(--mycolor); position: absolute; height: 1px; width: 13px; bottom: 0; left: 16px; top: 20px;}
.sug_pro .product-price{font-weight:400!important;}
.product-image p{font-size:11px; margin-top:5px; line-height: initial;}

.viewOrder .sharico a{ width:auto; }
.order-table .column-labels{ padding:9px; border: 1px solid #eee; border-bottom: 1px solid #eee; }
.order-table .column-labels label{ font-weight:500; color:var(--gray); margin-bottom:0px; }
.order-table .column-labels,.order-table .product{ display: flex; align-items: center; margin-bottom:0px!important; }
.order-table .product-image { float: left; width: 12%; position:relative; }
.order-table .product-details { float: left; width: calc(50% - 25px); margin-right:15px; font-weight:400; }
.order-table .product-price { float: left; width: 15%; margin:0px!important; text-align: right; vertical-align:middle; }
.order-table .psymbol { font-size: 14px; }
.order-table .product-quantity { float: left; width: 10%; text-align: right; vertical-align:middle; }
.order-table .product-removal { float: left; width: 10%; text-align: right; vertical-align:middle; }
.order-table .product-line-price { float: left; width:15%; text-align: right; font-weight:500; justify-content: flex-end; gap:5px; }
.order-table .invoice { float: left; width: calc(25% - 10px); }

.order-table .product{ position:relative; margin-bottom:5px; padding:10px; border: 1px solid #eee; border-top:1px solid #fff; }
.order-table .product:hover{ border: 1px solid var(--mycolor); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.03); }

.odrtotal{ min-width:250px; float:right; }
.odrtotal p{ display:block; padding:7px 10px; overflow:hidden; }
.odrtotal span{ display:block; width:40%; float:left; text-align:right; font-size:14px; color:#424646; font-weight:400; }
.odrtotal font{ display:block; width:60%; float:right; text-align:right; font-size:14px; color:#424646; font-weight:400; }
.odrtotal .total span,.odrtotal .total font{ font-size:16px; color:#424646; font-weight:500; }
.odrtotal .psymbol { font-size: 16px; }

.widget{ width:100%; margin:0px; border:1px solid #d8d8d8; border-radius: 5px; overflow:hidden; }
.widget .widget-title{ margin: 0px; padding: 8px 0px 8px 10px; font-size: 16px; line-height: 20px; color: #424646; text-align: justify; background: #f5f5f5; }
.widget .ptitle{ padding: 7px 10px; color: #424646; font-size: 15px; font-weight: 400; border-top: 1px solid #d8d8d8; }
.widget .ptag{ padding: 7px 10px; color: #424646; font-size: 14px; font-weight: 400; border-top: 1px solid #d8d8d8; }

.order-view{ display:flex; flex-wrap:wrap; width:100%; }
.order-left{ width:30%; overflow:hidden; }
.order-detail{ width:100%; border:1px solid #d6d8db; background:#fafafa; padding:15px; margin-bottom:20px; border-radius:6px; }
.order-detail h4{ font-size:16px; line-height:26px; font-weight:500; margin: 0px 0px 10px 0px; }
.order-detail p{ display: flex; font-size:14px; line-height:24px; font-weight:400; margin:0px; margin-bottom: 10px; }
.order-detail p span{ display: block; width:50%; font-size:14px; line-height:24px; font-weight:400; }
.order-detail p font{ display: block; width:50%; font-size:15px; line-height:24px; font-weight:500; text-align:right; }

.order-header{ width:100%; overflow:hidden; }
.order-header .underline{ position:relative; display:inline-block; font-size: 20px; line-height:40px; font-weight: 700; color:var(--mycolor); margin-bottom: 15px; }
.order-header .underline:before { position: absolute; content: ""; height: 2px; width:100%; background: var(--mycolor); left: 0; bottom: 0; }

.apptab{  position: relative; margin-top:15px; display:flex;} 
.apptab li{display: flex; text-align: center;  width: calc(100%/4 - 10px); margin-right:5px; border: solid 1px transparent;}
.apptab li:last-child{margin-right:0;}
.apptab li a{ display:block; width:100%; background:#fff; border: solid 1px #f7f7f7; height:auto; box-shadow:0px 2px 1px rgb(0 0 0 / 8%); padding:10px; border-radius: 4px}
.apptab li a p{font-size:12px; color: var(--gray); line-height: 14px;}
.app_inf{ /*position: absolute;*/ border-radius: 0 0 4px 4px; left:0; width:100%; margin:-1px 0 25px 0; background:#fff; padding:15px; text-align:left;}
.apptab li img{width:30px; height:auto; display:block; margin:0 auto;}
.apptab li.active .app_inf{display:block;}
.apptab li.active a{padding-bottom:20px; position:relative; z-index:1; border-bottom: 1px solid #fff!important; border-radius:4px 4px 0 0; box-shadow:none;}
.app_inf h5{font-size:14px; margin-bottom:10px;}
.app_hr{margin:5px 0; display:block; font-weight:500;}
.gre_bor .app_hr{color:#1bc71b;} .org_bor .app_hr{color:#ffb224;} .blu_bor .app_hr{color:#247cff;} .red_bor .app_hr{color:#ff4224;}
.active.gre_bor a, .active.gre_bor .app_inf, .gre_bor:hover a, .app_inf.gre_bor{border:solid 1px #1bc71b;}
.active.org_bor a, .active.org_bor .app_inf, .org_bor:hover a, .app_inf.org_bor{border:solid 1px #ffb224;}
.active.blu_bor a, .active.blu_bor .app_inf, .blu_bor:hover a, .app_inf.blu_bor{border:solid 1px #247cff;}
.active.red_bor a, .active.red_bor .app_inf, .red_bor:hover a, .app_inf.red_bor{border:solid 1px #ff4224;}

.gre_bor.active, .org_bor.active, .blu_bor.active, .red_bor.active {border: none;}
.app_inf p{margin-bottom:10px;}

@media screen and (max-width: 991px){
  #viewOrder .modal-dialog{ width:100%; max-width:98%; }
}

@media screen and (max-width: 768px){
  .viewOrder .deskcart{ display:none; } .viewOrder .mobcart{ display:block; }

  .order-table .column-labels{ display: none; } 
  .order-table .product{ flex-direction:column; }
  .order-table .product-details{ width:100%; margin-right: 0px; }
  .order-table .product-image{ width:60px; min-height:initial; flex-basis: 60px; }
  .order-table .product-cont{ width:calc(100% - 50px); }
  .order-table .price-details{ width:calc(100% - 60px); margin-left:60px; margin-top: 8px; }

  .order-table .product-price { width: 30%; text-align: right; vertical-align:middle; }
  .order-table .product-removal { width: 30%; text-align: right; vertical-align:middle; }
  .order-table .product-line-price{ width: 40%; text-align: right; vertical-align:middle; padding-right:10px; }
}

@media screen and (max-width: 700px){
  .deskcart{ display:none; } .mobcart{ display:block; }
  .card.deskcart{ display:none; }

  .cart-table .totals .carttotal{width:100%;}
  .cart-table .product .product-image img{width:50px; margin: 0 10px 0 0;}
  .cart-table .shopping-tab { margin: 0; padding-top: 20px; border-top: 1px solid #eee; }
  .cart-table .column-labels { display: none; }
  .cart-table .product-image { float: left; width: auto; }
  .cart-table .product-image img { margin: 0 0 10px 10px; }
  .cart-table .product-details { float: none; margin-bottom: 10px; width:100%; }
  .cart-table .product-price { clear: both; width: auto; margin-top:6px; }
  .cart-table .product-quantity { width: auto; margin:0 10px; }
  .cart-table .product-quantity:before { content: 'x'; }
  .cart-table .product-removal { width: auto; margin-top:6px; }
  .cart-table .product-line-price { float: right; width: 100%; max-width:120px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
  .remove-pro{ margin-top:0px; }
}
 
@media screen and (max-width: 450px) {

  .cart-table .product-removal { float: right; }
  .cart-table .product-line-price { float: right; clear: left; width: 100%; max-width:initial; margin-top: 10px; justify-content: flex-end; gap: 15px; }
  .cart-table .product .product-line-price:before { content: 'Item Total:'; }
  .cart-table .totals .totals-item label { width: 60%; }
  .cart-table .totals .totals-item .totals-value { width: 40%; }
  .moremob{ display:none!important; }

  .viewOrder .modal-header{ flex-direction:column; }
  .viewOrder .modal-header .close{ margin-top: -20px!important; }
  .order-table .price-details{ width:100%; margin-left:0px; margin-top: 8px; }
  .order-table .product-price { width: 50%; text-align: right; vertical-align:middle; }
  .order-table .product-removal { display:none; }
  .order-table .product-line-price{ width: 50%; text-align: right; vertical-align:middle; padding-right:10px; }
}







/* New Design */
.receipt-card { background: white; border: 2px solid #f0f0f0; border-radius: 16px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.receipt-card:last-child, .receipt-card .receipt-card:last-child{ margin-bottom:0px; }
.receipt-card:hover { border-color:var(--mycolor); box-shadow: 0 8px 24px rgba(46, 125, 50, 0.1); }
.receipt-header { background: #f8f9fa; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 1px solid #e9ecef; }
.receipt-header.expanded { background:var(--mycolor10); border-bottom-color:var(--mycolor); }
.receipt-basic-info { display: flex; align-items: center; gap: 16px; flex: 1; }
.receipt-meta { display: flex; flex-direction: column; gap: 4px; }
.customer-info { font-weight: 600; color: #333; font-size: 14px; }
.date-time { color: #666; font-size: 12px; }
.receipt-summary { display: flex; align-items: center; gap: 20px; }
.order-number { background: var(--mycolor10); color: var(--mycolor); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.order-total { font-size: 16px; font-weight: 700; color: var(--mycolor); }
.expand-icon { color: #666; transition: transform 0.3s ease; }      
.receipt-header.expanded .expand-icon { transform: rotate(180deg); }
.receipt-details { display: none; background: white; }
.receipt-details.expanded { display: block; }
.receipt-card .action-buttons { padding: 16px 20px; background: #f8f9fa; display: flex; gap: 8px; flex-wrap: wrap; justify-content:flex-start; border-bottom: 1px solid #e9ecef; }
.receipt-card .action-btn { background: #2E7D32; color: white; border: none; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 70px; justify-content: center; }
.receipt-card .action-btn:hover { background: #1B5E20; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3); }
.action-btn .svg_ico{ stroke:#fff; }
.action-btn.email { background: #1976d2; }
.action-btn.email:hover { background: #1565c0; }
.action-btn.sms { background: #f57c00; }
.action-btn.sms:hover { background: #ef6c00; }
.action-btn.copy { background: #7b1fa2; }
.action-btn.copy:hover { background: #6a1b9a; }
.action-btn.download { background: #388e3c; }
.action-btn.download:hover { background: #2e7d32; }
.action-btn.view { background: #455a64; }
.action-btn.view:hover { background: #37474f; }
.action-btn.delete { background: #dd1e00; }
.action-btn.delete:hover { background: #b01801; }
.items-section { padding: 20px; max-height:450px; overflow:auto; }
.items-list { margin-bottom: 16px; }
.item-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; gap: 12px; }
.item-row:last-child { border-bottom: none; }
.item-image { width: 32px; height: 32px; background: #f0f0f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.item-image img{ width:100%; height:100%; }
.item-details { flex: 1; }
.item-name { font-weight: 600; color: #333; font-size: 13px; margin-bottom: 2px; }
.item-code { color: #666; font-size: 11px; font-family: monospace; }
.item-price { font-weight: 600; color:var(--mycolor); font-size: 14px; }
.quantity-info { color: #666; font-size: 11px; text-align: right; min-width: 80px; }

.order-totals { background: #f8f9fa; padding: 16px 20px; border-radius: 8px; margin-top: 16px; }
.total-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.total-row:last-child { margin-bottom: 0; font-weight: 700; font-size: 14px; color:var(--mycolor); padding-top: 8px; border-top: 2px solid var(--mycolor); }
.total-label { color: #666; }
.total-value { color: #333; font-weight: 600; }
.total-row:last-child .total-label,.total-row:last-child .total-value{ color:var(--mycolor); }


/* Quotes Acceptance Design */
.quote-acc{ width:100%; overflow:hidden; border:1px solid #e5e7eb; border-radius:10px; }
.quote-head{ display:flex; justify-content: space-between; align-items: flex-start; width:100%; padding:20px 20px; overflow:hidden; }
.quote-head h3{ color:#212529; font-size:30px; line-height:36px; font-weight:600; }
.quote-head span{ display:inline-block; color:var(--mycolor); font-size:13px; line-height: 16px; padding:4px 10px; background:#f1f5f9; }
.quote-head font{ display:inline-block; color:#ccc; font-size:13px; line-height: 16px; }
.quote-bline{ width:100%; height:4px; background:var(--mycolor); }

.quote-body{ width:100%; padding:20px 20px; overflow:hidden; }
.quote-info{ display:flex; width:100%; padding:20px 20px; overflow:hidden; background:#fff; border-radius:10px; }
.quote-info > svg{ border: 1px solid #ccc; padding: 2px; border-radius: 6px; }
.quote-cont .title{ color:#1e293b; font-size:14px; line-height: 18px; font-weight:400; }
.quote-cont ul li{ color:#1e293b; font-size:14px; line-height: 18px; font-weight:400; padding:4px 0px; }
.quote-cont ul li h4{ color:#1e293b; font-size:18px; line-height: 22px; font-weight:600; }

.quote-pro{ display:flex; background:#f8fafc; border:solid 1px #f2f2f2; padding:15px; margin-bottom:10px; }
.quote-pro:hover{ border:solid 1px var(--mycolor); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.03); }
.quote-pro:last-child{ margin-bottom:0px; }
.quote-pro-con{ width:100%; display:flex; justify-content:space-between; }
.quote-pro-img{ width:100px; text-align:center; }
.quote-pro-img img{ height:80px; }

.qty-div{ width:100px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.qty-div font{ display:inline-block; min-width:35px; text-align:center; padding:5px; color:#fff; font-size:14px; border-radius:5px; background:var(--mycolor); }
.price-div{ width:120px; display: flex; flex-direction:column; justify-content:space-around; }
.price-div .price-row{ display:flex; justify-content:space-between; color:#64748b; font-size:14px; line-height:16px; font-weight:400; }

.payimg{ border:solid 1px #f2f2f2; padding:8px 10px; font-size:14px; line-height:16px; border-radius: 5px; }
.quote-foot{ width:100%; padding:20px 20px; overflow:hidden; background:#1e293b; }
.quote-foot .foot-p{ color:#fff; font-size:14px; line-height:18px; }

@media screen and (max-width: 700px){
  .quote-head{ display:flex; flex-direction: column; justify-content:space-between; gap:10px; }
}

@media screen and (max-width: 600px){
  .quote-pro-con{ display:flex; flex-direction: column; justify-content:space-between; gap:10px; }
  .qty-div{ width:50px; }
  .quote-pro-img { width: 70px; }
  .quote-pro-img img{ height:60px; }
}