.basket_filler { flex-grow: 1; }

.basket_wrapper_a { padding: 15px 15px; margin: auto; width: 80%; max-width: 900px; border: 1px solid #dddddd; background: #ffffff; border-radius: 4px; margin-bottom: 20px; box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.15);}
.basket_wrapper_b { text-align: left; padding: 12px 12px; margin: auto; width: 80%; max-width: 900px; border: 1px solid #dddddd; background: #ffffff; border-radius: 4px; margin-bottom: 20px; box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.15);  }
.basket_wrapper_b * { margin-left: 2;     text-align: left; }

.basket_inner_wrapper  { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 100vw; padding: 0px; box-sizing: border-box;}

.basket_inner_wrapper2 { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; box-sizing: border-box; }

@media (max-width: 550px) 
{
 .basket_wrapper_a, .basket_wrapper_b { width:100%; padding:0px; padding-bottom: 10px; padding-top: 5px; margin-bottom:10px; margin-top:10px; border:none; border-radius:0; box-shadow:none; border-bottom: 2px solid #dddddd; max-width: 100vw;  }
}

.basket-button {  padding: 4px 4px;  border-radius: 5px;  cursor: pointer;  transition: all 0.3s ease-in-out; display: flex;  align-items: center;justify-content: center; gap: 5px;  min-height: 60px; height: 60px; max-height:60px;  min-width: 180px;  text-decoration: none; box-sizing: border-box;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); border: none;  font-weight: bold; font-family: inherit; cursor: pointer;}

.basket-button2 {  padding: 4px 4px;  border-radius: 5px;  cursor: pointer;  transition: all 0.3s ease-in-out; display: flex;  align-items: center;justify-content: center; gap: 5px;   text-decoration: none; box-sizing: border-box;box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); border: none;  font-weight: bold; font-family: inherit; cursor: pointer; font-size: 18px;}

.basket-button, .basket-button a, .basket-button button { font-family: 'Roboto', Arial, sans-serif;  font-weight: bold; font-size: 1.3rem;   line-height: 1.2;}

.basket-button.grey { background-color:#e0e0e0; background-image:linear-gradient(to bottom, #e0e0e0, #e0e0e0); transition:background-color 1s ease-in-out; color: black; }
.basket-button2.grey { background-color:#e0e0e0; background-image:linear-gradient(to bottom, #e0e0e0, #e0e0e0); transition:background-color 1s ease-in-out; color: black; }
.basket-button.green {   background: linear-gradient(to bottom, #6FD866, #46B24A);    color: black; }
.basket-button.blue {    background: linear-gradient(to bottom, #b3ccff, #1965ff);    color: black; }
.basket-button.bluegrey {    background: linear-gradient(to bottom, #dddddd, #b3ccff);    color: black; }
.basket-button.ltblue {    background: linear-gradient(to bottom, #eeeeff, #b3ccff);    color: black; }
.basket-button:hover { color: black; filter: brightness(1.1); }
.basket-button.green:hover { filter: brightness(1.09); color: #f0f0f0; }
.basket-button.grey:hover {background-color: #46B24A; background-image: linear-gradient(to bottom, #6FD866, #46B24A); color: black;  }
.basket-button2.grey:hover {background-color: #46B24A; background-image: linear-gradient(to bottom, #6FD866, #46B24A); color: black;  }

.basket-button img {  display: block; }
.paypal-button { min-height: 35px; height: auto; padding: 4px 16px; color: white !important;}
.paypal-button:hover { color: black !important; }

#delivery_van_image { display: flex; align-items: center;  margin-right: 10px; }

#delivery_van_image img { height: 64px; width: auto; }

#delivery_title { font-size: 16px; font-weight: bold; display: flex; align-items: center; }

#basket_update_delivery_button { margin-left: auto; }

#DELIVERY { width: 100%; max-width: 100%; padding: 8px; font-size: 16px; font-family: 'Roboto', Arial, sans-serif; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; cursor: pointer; } 
#DELIVERY:focus { outline: none; border-color: #888; } 
#DELIVERY option { font-size: 16px; padding: 5px; white-space: normal; } 
@media (max-width: 550px) { #DELIVERY { font-size: 14px; padding: 6px; } #DELIVERY option { font-size: 14px; } }

#dlocation { width: 100%; max-width: 100%; padding: 8px; font-size: 16px; font-family: 'Roboto', Arial, sans-serif; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; cursor: pointer; } 
#dlocation:focus { outline: none; border-color: #888; } 
@media (max-width: 550px) { #dlocation { font-size: 14px; padding: 6px; }  }


.basket_data{ padding: 8px; font-size: 16px; font-family: 'Roboto', Arial, sans-serif; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; cursor: pointer; } 
.basket_data:focus { outline: none; border-color: #888; } 
@media (max-width: 550px) { .basket_data { font-size: 14px; padding: 6px; }  }


.payment-method-wrapper {    display: flex;    align-items: center;    justify-content: space-between;    flex-wrap: wrap;    width: 100%;   }
.payment-back {    flex: 1 1 24%; }
.payment-title {    flex: 1 1 50%;    text-align: center; }
.payment-right {    flex: 1 1 24%;     text-align: right; }


@media (max-width: 768px) {
    .payment-method-wrapper {  flex-direction: column;  text-align: center; }
    .payment-back,  .payment-title,  .payment-right { flex: 1 1 100%; }
    .payment-title {  margin-top: 12px; }
}


.leftbaskettop { max-width: 180px; order: 1;  flex-shrink: 0; }
.rightbaskettop {max-width: 180px; order: 3;  flex-shrink: 0; text-align: right;}
.centerbaskettop {min-width:200px; flex-grow: 1; max-width: 360px; text-align: center; margin: auto; order: 2;}
.basketheadwrapper {width: 100%; display: flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.bottom_back {  max-width: 180px; }
.bottom_forward {  max-width: 180px; }


@media (max-width: 835px)
{
    .centerbaskettop {  flex-basis: 100%; margin-bottom: 15px;  }
    .leftbaskettop, .rightbaskettop {  flex: 1 1 50%;  text-align: center;   }
	.leftbaskettop { margin-bottom: 10px; }
    .rightbaskettop { text-align: right;   }
	.basketheadwrapper { margin-bottom: 20px; }
}

#billing_address_box { vertical-align: top; border-right: 1px solid #bbbbbb; padding:0px 15px 0px 15px; }
#delivery_address_box { border-right: 1px solid #bbbbbb; padding:0px 15px 0px 15px; }
#billing_address_box table, #delivery_address_box table {     width: 100%;     table-layout: fixed; }


#billing_address_box, #delivery_address_box { flex: 0 0 200px; min-width: 190px; max-width: 225px; }

#delivery_h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  flex: 1 1 450px; min-width: 350px; max-width: 500px;  width: 100%; padding-left: 0px; padding-right: 25px; }


@media (max-width: 1130px) {
    .basket_inner_wrapper2 { flex-wrap: wrap; justify-content: center; }
    #billing_address_box, #delivery_address_box { flex: 1 1 45%; max-width: 225px; min-width: 190px; }
    #delivery_h { flex: 1 1 100%; max-width: 100%; padding-top: 10px; text-align: center;  }
}


@media (max-width: 550px) {
    .basket_inner_wrapper2 { flex-direction: column; align-items: center; } 
    #billing_address_box, #delivery_address_box, #delivery_h { order:2; flex: 1 1 100%; max-width: 100%; padding: 10px; border: none; text-align: center; }
	#delivery_h { order: 1; }
}


#basket_pound_icon {    flex: 0 0 60px;    text-align: center;}
.basket_icon {     height: 64px;     display: block; }
#basket_totals {     flex: 1;     min-width: 200px;  max-width: 450px; margin: auto;    text-align: right; margin-left: 10px;  }
.total_row {     display: flex;     justify-content: space-between;     padding: 5px 0;     align-items: center; }
.total_label {     font-weight: bold;     flex: 1; } 
.price3 {     text-align: right;     width: 95px; }
.price1 {background: transparent; border: none; margin-bottom: 2px; text-align: right; font-weight: bold; color: inherit; color:var(--grey); font-family: inherit; font-size: inherit;}
.price1_ex {background: transparent; border-width: 0px; text-align: right; font-weight: bold; color: #999999; font-size: 10px; color:var(--grey);}


@media (max-width: 550px) 
{
.total_label { font-size: 18px; }
.price3 {  font-size: 18px;  width: 95px; }
}


.hidden_qtycell { display: none; vertical-align: middle; padding-bottom: 3px;}
.basket_remove_icon { width: 32px; height: 32px; }
.hidden_binicon  {float:left; padding-right: 4px;  display: none; vertical-align: middle; padding-top: 1px; }
.hidden_stock_cell { width: 45%; float: left; display: none; vertical-align: middle; padding-left: 2px; padding-right: 5px; text-align: left; }
.hidden_price_cell {float: right; display: none; vertical-align: middle; padding-left: 2px; padding-right: 5px; }
.qtycell_z {padding: 2px 2px 2px 2px; width:15%; }
.qtycell_a {padding: 2px 2px 2px 2px;  }
.zbasket_item { margin: auto; display: flex; flex-wrap: wrap; align-items: center; padding: 8px;  border-bottom: 1px solid #ddd;}
.zbasket_icons { order: 1; flex: 0 0 50px; text-align: center; }
.zqtycell { order: 2; flex: 0 0 40px; text-align: center; }
.zimage { order: 3; flex: 0 0 80px; text-align: center; padding-left: 10px; padding-right: 3px; }
.zprod_id { order: 4; flex: 1; min-width: 120px;  max-width: 75vw; text-align: left; padding-right:5px word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
.zstock_cell { order: 5; flex: 0 0 60px; text-align: center; padding: 2px;}
.zprice_cell { order: 6; flex: 0 0 80px; text-align: center; padding: 2px; }


.zbasket_item2 {width:99%; padding-top:3px; padding-bottom:3px; margin-bottom:3px; margin-top:5px; display:flex; flex-wrap:wrap; background:transparent; align-items:center;}
.zbasket_buttons {flex:0 1 auto; text-align:center; margin-right:8px; margin-top: 10px; width: 180px;}
.zbasket_buttons:last-of-type {margin-right:0;}
#ztotal_basket {flex:1 1 auto; text-align:right;}

/* #ztotal_basket { padding-right: 2px; padding-top: 5px; flex-grow: 2; width: auto; text-align: right; float: right;  } */
 
 
 .extra_message { display: inline-flex; /* long message about discounty */ }
 
@media (max-width: 550px) {
    .zbasket_item { flex-direction: row; justify-content: flex-start;   width: 100vw; overflow: hidden; align-items: center;}
	.zimage {  order: 1;  flex: 0 0 20%; max-width: 19vw; text-align: center;  }
	.zprod_id { order: 2; flex: 0 0 75%;  max-width: 73vw; text-align: left; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; padding-right:1 px; }
	.zbasket_icons, .zqtycell, .zstock_cell, .zprice_cell {  order: 3;   flex: 0 1 24%;  text-align: center; box-sizing: border-box; }
	.zbasket_item > * {   margin-bottom: 5px;  }
	.zbasket_item2 { padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; margin-top: 10px;  }
	.zbasket_item { max-width: 95vw; padding-left: 0px; padding-right: 10px; box-sizing: border-box; }
	.extra_message { display: none; }
	
	
	
	.zprice_cell { margin-left: auto; text-align: right; margin-right: 12px; }
}
 
 .image_mini { max-width: 65px; max-height: 65px;  object-fit: contain;  display: block; }


.voucher-block { height: 60px; display: flex; align-items: center; gap: 8px; padding: 5px; box-sizing: border-box; width: 180px; max-width: 180px; background: #e0e0e0; border-radius: 5px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); }
.voucher-img { height: 40px; flex-shrink: 0; display: block; }
.voucher-content { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
.voucher-input { font: 15px arial; padding: 3px 4px; border-radius: 2px; outline: none; border: 1px solid #cccccc;; width: 95px; transition: border-color 0.3s; text-align: center; }
.voucher-submit { margin-top: 3px; border: none; border-radius: 2px; /*background: #46B24A;*/ background-color:#e0e0e0;  padding: 2px 3px; font-family: 'Lato', Arial, sans-serif; font-size: 14px; color: black; font-weight: bold; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; width: auto; align-self: flex-start; }
.voucher-submit:hover { background: #46B24A; color: #f0f0f0; }
 
 #basket_delivery_wrapper { display: flex; flex-direction:row;  flex-wrap: wrap;  justify-content: flex-start; }
 #basket_delivery_select { float:left; vertical-align: middle; padding: 10px 2px;}
 #basket_update_delivery_button  { float:left;  max-width: 200px; width: auto; padding: 0px 8px 0px 2px;}
 #basket_delivery_price   { flex-grow: 3;  width: auto; text-align: center; float: right; padding: 5px;}
 #basket_sub_wrapper {flex-grow: 3; display: flex; width: auto;  padding: 2px; margin: 2px;}
 #basket_delivery_spacer_cell  { float:left; width: auto;  }
 
 
 #qqzupdate_basket {  max-width: 165px; }
 #qqzquote_basket { max-width: 165px; }
 
 .basket_input_flex {  display: flex; flex-wrap: wrap; flex-direction: row; padding-top: 5px; padding-bottom: 5px; }
 .basket_input_title { min-width: 150px; float: left; }
 .basket_input { float: left; }
 
 .pay_option { display: flex; width: 340px; max-width: 340px; padding: 6px 2px 6px 2px; margin: auto; }
 .pay_image { width: 95px; max-width: 95px; float:left; padding-right: 5px; margin: auto;}
 .pay_text {  width: 240px; max-width: 240px; float:right; padding-left: 2px;}

@media only screen and (min-device-width : 200px) and (max-device-width : 425px) and (orientation : portrait) /*apply to phone */
	{

		/*#billing_address_box { max-width: 148px; border-right: none; padding:0px 7px 0px 7px; }
		#delivery_address_box {  max-width: 148px;  border-right: none ; padding:0px 7px 0px 7px; }*/
	}


@media only screen and (min-width: 200px) and (max-width: 660px)
	{
		#basket_delivery_van {display: none; }
	}
	
@media only screen and (min-width: 200px) and (max-width: 707px) /* reconfigure basket */
	{
	.leftbaskettop { order: 2; width: 45%; text-align: center; margin: auto;}
	.rightbaskettop { order: 3; width: 45%; text-align: center; margin: auto;}
	.centerbaskettop { order: 1; width: 100%; padding-bottom: 5px; padding-left: 8%; padding-right: 8%;}
	}
	
@media only screen and (min-width: 200px) and (max-width: 825px) /* reconfigure basket */
	{
	#basket_delivery_wrapper { flex-direction:column;  }
	#basket_delivery_spacer_cell { width: 25%; }
	}


.vat-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: #333; }
.vat-switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.vat-switch input { opacity: 0; width: 0; height: 0; }
.vat-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.vat-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.vat-switch input:checked + .vat-slider { background-color: #ff5733; } 
.vat-switch input:not(:checked) + .vat-slider { background-color: #2196F3; } /*#46B24A*/
.vat-switch input:checked + .vat-slider:before { transform: translateX(18px); } /* Moves toggle */

@media (max-width: 600px) {
  .vat-switch { width: 40px; height: 22px; }
  .vat-slider:before { width: 16px; height: 16px; left: 3px; bottom: 3px; }
  .vat-switch input:checked + .vat-slider:before { transform: translateX(18px); }
}


.scroll-container { width: 100%; overflow: hidden; position: relative; height: 100px; } 
.scroll-content { display: flex;  flex-direction:row; width: calc(215px * 7); transition: transform 0.5s ease-in-out; } 
.ad-box { width: 215px; height: 95px; flex-shrink: 0; } 
.scroll-button { z-index:10; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; padding: 10px; } 
.left-button { left: 5px; } 
.right-button { right: 5px; }