/*
	October 2022 shop checkout upgrade
*/

/* This code needs to be set in the shop template on an actual site, with the right colour */
/*
:root {
  --ShopCheckoutUpdateAug2022color: #129dc0;
}
*/
    
@font-face {
  font-family: 'HubbIcons';
  src:  url('/Images/Content/2414/Templates/56328/fonts/HubbIcons.ttf') format('truetype');
}

/* Shop basket changes */
section.slice_ShopBasketOverlay div.ShopBasket { 
    padding: 15px; max-height:90vh; overflow:auto;
} 
section.slice_ShopBasketOverlay div.ShopBasket > table {min-width:300px;}
@media (min-width: 768px) { 
  section.slice_ShopBasketOverlay div.ShopBasket { 
    padding: 30px 40px 30px; 
  } 
  section.slice_ShopBasketOverlay div.ShopBasket > table {min-width:400px;}
}
section.slice_ShopBasketOverlay div.ShopBasket > table tr:nth-child(3n) td {
  padding:10px 0;
}
.slice_ShopBasketOverlay div.ShopBasket table hr {
  border:none;
  border-top:1px solid #cccccc;
}
section.slice_ShopBasketOverlay div.ShopBasket > table > tbody > tr:nth-child(3n+2):not(:last-child) > td:first-child {
  font-size:smaller;
}
section.slice_ShopBasketOverlay div.ShopBasket > div {text-align:left !important;}
section.slice_ShopBasketOverlay div.ShopBasket > div span[id$="_objCheckoutButton"] input {
	padding:9px 0 10px;
  margin:20px 0 0;
  width:100% !important; display:block;
  font-size:20px
}
section.slice_ShopBasketOverlay div.ShopBasket > div span[id$="_objCheckoutButton"] input:hover {
  opacity:0.7;
}
section.slice_ShopBasketOverlay div.ShopBasket > table tr:last-child td {font-size:26px;}
section.slice_ShopBasketOverlay div#BasketOverlayTop span:first-child {
  font-size:0;
}
section.slice_ShopBasketOverlay div#BasketOverlayTop span:first-child::before {
	content:'\e978';
  	font-family:hubb-icons; font-size:32px; padding-right:20px;
  line-height:1;
}
section.slice_ShopBasketOverlay div#BasketOverlayTop span:first-child::after {
	content:'Your basket';
  font-size:26px; line-height:1;
  position:relative; top:-3px;
}
section.slice_ShopBasketOverlay div.ShopBasket table tr:last-child td {text-align:left !important;}
section.slice_ShopBasketOverlay div.ShopBasket table tr:last-child td::before {
	content:'Total:';
  font-size:26px;
}
section.slice_ShopBasketOverlay div.ShopBasket table tr:last-child td b {float:right;}
section.slice_ShopBasketOverlay {background-color:rgba(0,0,0,0.7);}

/* First checkout page changes */
section.slice_ShopCheckOut {padding:20px 10px 0;}
@media (min-width:767px) { 
	section.slice_ShopCheckOut {padding-left:20px;padding-right:20px;}
}
section.slice_ShopCheckOut > div > div > br {display:none;}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] {border:none;}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] td {
  border:none !important;
  border-bottom:1px solid #cccccc !important;
  padding-top:15px !important;
  padding-bottom:15px !important;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child td {
  padding-top:10px !important;
  padding-bottom:0 !important;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child td {border-bottom:none !important;}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr.gridheader td {
	font-weight:700; font-size:22px; line-height:1;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] td input[name^="qty_"] {
	width:42px !important; text-align:center;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] td input[name^="qty_"],
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] td input[name^="price_"] {
	padding:3px 5px 2px; border:1px solid #cccccc; border-radius:4px;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child td {vertical-align:top;}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child table b {font-size:14px;}
@media (min-width:467px) {
  section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child table,
  section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child table b {font-size:22px;}
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] 
tr:last-child table.NotSummary tr:first-child {display:none;} /* Hide un-needed 'Total' text */
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child table.Summary {
	background-color:#eeeeee; border:1px solid #cccccc; padding:5px; 
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] tr:last-child table.Summary td {
	padding:0 20px;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] > tbody > tr > td:nth-child(3) a + div {
	font-size:16px; margin-top:2px;
}
section.slice_ShopCheckOut input.sitebutton, 
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] input[type="submit"], 
section.slice_ShopCheckOut input.button, 
section.slice_ShopCheckOut button.button, 
section.slice_ShopCheckOut div.buttonShopItemLink > a {
  padding-left:20px !important; padding-right:20px !important; border-radius:50px;
  line-height:1;
}
section.slice_ShopCheckOut input.button[value="Returning Customer / Website Member"] {
  padding-left:10px !important; padding-right:10px !important;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] input[type="submit"] {
	padding-left:10px !important; padding-right:10px !important;
}
section.slice_ShopCheckOut table.gridstyle[id$="_dgItems"] + div[style] {
  display:none; /* Hide pointless 'img = remove item' text */
}

/* Voucher codes */
section.slice_ShopCheckOut div#divVoucherCode {
  margin:40px 0 0;
  padding:4px 10px 17px 20px !important;
  border:1px solid #cccccc;
}
section.slice_ShopCheckOut div#divVoucherCode > h2:first-child,
section.slice_ShopCheckOut div#divVoucherCode > table[id$="_dgVouchers"] {
  display:none; /* hide pointless title and text */
}
section.slice_ShopCheckOut div#divVoucherCode input[type="text"] {
	padding:5px 5px 4px; border:1px solid #cccccc; border-radius:4px;
}
section.slice_ShopCheckOut div#divVoucherCode > div > br {display:none;}
section.slice_ShopCheckOut div#divVoucherCode > div > b {display:inline-block;padding-right:10px;}
section.slice_ShopCheckOut div#divVoucherCode > div > input[type="text"] {
  margin:0 5px 0 10px;
}
section.slice_ShopCheckOut div#divVoucherCode > div > input[type="submit"] {
  padding-top:4px; padding-bottom:6px; line-height:1;
  position:relative; top:-2px;
}

/* Buttons below Voucher codes */
section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] {
  padding:0;
  display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center;
}
section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] input[id$="_btnContinueShopping"],
section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] input[id$="_btnSaveDraft"] {
  margin:0 20px 0 0 !important;
  background-color:white; color:#414141;
  font-size:18px; padding:10px 30px 12px;
}
section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] input[id$="_btnContinueCheckout"] {
	margin:0 !important;
  font-size:18px; padding:10px 30px 12px;
}
@media (max-width:767px) {
  section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] {
    flex-flow:column-reverse nowrap; justify-content:flex-start; align-items:flex-end;
  }  
  section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] input[id$="_btnContinueShopping"],
  section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] input[id$="_btnSaveDraft"] {
  	margin:15px 0 0 0 !important;
  }
  section.slice_ShopCheckOut div[id$="_ctlShowCartASCX_pnlButtons"] p {margin:0;}
}    
    
section.slice_ShopCheckOut table[id$="_ctlShowCartASCX_dgCartPageItems"] {
	float:none; clear:both; margin-top:30px;
}

/* login controls */
section.slice_ShopCheckOut div[id$="_ctlShopLoginASCX_pnlLoginControls"] {margin:20px 0 60px 105px;}
section.slice_ShopCheckOut div[id$="_ctlShopLoginASCX_pnlLoginControls"] > table {
	background-color:#F3F3F3; border:1px solid #cccccc !important;
  padding:10px 30px 18px !important;
  width:auto !important;
}
@media (max-width:767px) {
	section.slice_ShopCheckOut div[id$="_ctlShopLoginASCX_pnlLoginControls"] {margin:20px 0 0 0;}
  	section.slice_ShopCheckOut div[id$="_ctlShopLoginASCX_pnlLoginControls"] > table {
  		padding:10px 5px 18px !important;
	}
}
section.slice_ShopCheckOut div[id$="_ctlShopLoginASCX_pnlLoginControls"] > div {
 text-align:left !important;
 display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; 
}
section.slice_ShopCheckOut div[id$=ctlShopLoginASCX_pnlLoginControls] div[id$=pnlWebsiteMember] > div {
	text-align:center !important;
}
section.slice_ShopCheckOut div[id$="_ctlShopLoginASCX_pnlLoginControls"] input[id$="_ctlShopLoginASCX_btnBack"] {
	margin:0 !important; background-color:white; color:#414141;
}

/* registration form */
section.slice_ShopCheckOut div._user_registration_aspx div[id$='_div_ctls_registration_groups'] label {display:inline;}
section.slice_ShopCheckOut div._user_registration_aspx div[id$='outerdiv_ctls_phone'] div.SubCaption, 
section.slice_ShopCheckOut div._user_registration_aspx div[id$='outerdiv_ctls_alt_addr_phone'] div.SubCaption {position:static;}
section.slice_ShopCheckOut div._user_registration_aspx div.SubCaption {text-align:left !important;}
section.slice_ShopCheckOut div._user_registration_aspx 
div#GroupNotesEnclosingDiv td {
	text-align:left !important;
}
section.slice_ShopCheckOut div._user_registration_aspx input[type="text"],
section.slice_ShopCheckOut div._user_registration_aspx input[type="checkbox"],
section.slice_ShopCheckOut div._user_registration_aspx input[type="password"],
section.slice_ShopCheckOut div._user_registration_aspx select {
  max-width:initial !important;
  border-color:#cccccc !important;
}
section.slice_ShopCheckOut div._user_registration_aspx input[type="text"],
section.slice_ShopCheckOut div._user_registration_aspx input[type="password"],
section.slice_ShopCheckOut div._user_registration_aspx select {
  margin:2px 0 !important;
  padding:3px 5px 4px;
  background-color:white;
}
section.slice_ShopCheckOut div._user_registration_aspx 
div[id$='_ctlShopLoginASCX_ctlRegistration_outerdiv_ctls_LDB'] 
table.SubTable > tbody > tr > td:first-child {
	display:none; /* hide pointless 'user name + password' text */
}
section.slice_ShopCheckOut div._user_registration_aspx 
div[id$='_ctlShopLoginASCX_ctlRegistration_outerdiv_ctls_LDB'] td {
	padding-top:1px; padding-bottom:1px;
}
section.slice_ShopCheckOut div._user_registration_aspx div.TopCaption {
  text-align:left; margin-top:40px;
}
section.slice_ShopCheckOut div._user_registration_aspx div#GroupNotesEnclosingDiv > div, 
section.slice_ShopCheckOut div._user_registration_aspx div[id$='_divCaptchaWrapper'] {
  background-color:transparent !important;
  padding:0;
  border:none;
}

/* Delivery page */
@media(min-width:992px){
  section.slice_ShopCheckOut table.delivery-container > tbody {
  	display:flex; flex-flow:row nowrap; justify-content:flex-start;align-items:flex-start;
  }
  section.slice_ShopCheckOut table.delivery-container > tbody >tr:first-child {
  	margin-right:30px;
  }
  section.slice_ShopCheckOut table.delivery-container {margin:0;min-width:500px;}
}
section.slice_ShopCheckOut table.delivery-container > tbody > tr > td, 
section.slice_ShopCheckOut table#tblPaymentDetails > tbody > tr > td {
  background-color:#F3F3F3;
  border-width:1px;
  border-radius:0;
  padding:10px 30px !important;
}
section.slice_ShopCheckOut table.delivery-container table.AddressList_AddressTable td:first-child, 
section.slice_ShopCheckOut table.delivery-container table.tblAddress td:first-child {
	vertical-align:top !important;
}
section.slice_ShopCheckOut table.delivery-container input[type="radio"] {
	position:relative; top:7px;
}
section.slice_ShopCheckOut input[type="radio"]:focus {box-shadow:none !important;}
section.slice_ShopCheckOut table.delivery-container input[type="text"],
section.slice_ShopCheckOut table.delivery-container select {
  margin:2px 0 !important;
  padding:3px 5px 4px;
  background-color:white;
  max-width:initial !important;
  border-color:#cccccc !important;
  width:98%;
}
section.slice_ShopCheckOut table.delivery-container table.tblAddress td:first-child {
  text-align:left !important;
  vertical-align: middle !important;
  padding-right:5px;
}
section.slice_ShopCheckOut table.delivery-container h2 {color:#414141;margin:10px 0;}
section.slice_ShopCheckOut table.delivery-container p + h2 {margin-bottom:0;}
section.slice_ShopCheckOut table.delivery-container input[type="submit"] {margin-top:10px;}
section.slice_ShopCheckOut div[id$="_ctlDeliveryASCX_pnlButtons"],
section.slice_ShopCheckOut div[id$="_ctlPaymentASCX_pnlButtons"],
section.slice_ShopCheckOut div[id$="_ctlConfirmASCX_pnlButtons"]
{
  text-align:left !important;
}

section.slice_ShopCheckOut table.delivery-container td.AddressList_Address > label {
	margin-bottom:0;
}
section.slice_ShopCheckOut table.delivery-container table.AddressList_AddressTable:last-child td
{padding-bottom:0;}

section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
table.MultiRowDelivery {border-collapse:collapse;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
table.MultiRowDelivery td {border:1px solid #cccccc; padding:10px;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
table.SingleRowDelivery tr:first-child {display:none;}

section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type  {font-size:20px; font-weight:600 !important; margin-bottom:10px;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type + table > tbody > tr:first-child > td {font-size:0;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type + table > tbody > tr:first-child > td br {display:none;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type + table > tbody > tr:first-child > td > div {font-size:18px;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type + table > tbody > tr:first-child > td > div table td {padding-left:10px;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type + table > tbody > tr:last-child > td {text-align:left !important;}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type + table > tbody > tr:last-child > td span {
  float:right;
}
section.slice_ShopCheckOut table.delivery-container > tbody > tr:last-child > td > 
h2:last-of-type + table > tbody > tr:last-child > td b {
  position:relative; left:90px;
}

section.slice_ShopCheckOut div[id$="_ctlDeliveryASCX_pnlButtons"] input,
section.slice_ShopCheckOut div[id$="_ctlPaymentASCX_pnlButtons"] input,
section.slice_ShopCheckOut div[id$="_ctlConfirmASCX_pnlButtons"] input {
  margin:0 20px 0 0 !important;
  background-color:white; color:#414141;
  font-size:18px; padding:10px 30px 12px;
}
section.slice_ShopCheckOut div[id$="_ctlDeliveryASCX_pnlButtons"] input:last-child,
section.slice_ShopCheckOut div[id$="_ctlPaymentASCX_pnlButtons"] input:last-child,
section.slice_ShopCheckOut div[id$="_ctlConfirmASCX_pnlButtons"] input:last-child,
section.slice_ShopCheckOut center input[id$="_ctlCompletedASCX_btnReturn"] {
  margin:0 20px 0 0 !important;
  background-color:var(--ShopCheckoutUpdateAug2022color); 
  border-color:var(--ShopCheckoutUpdateAug2022color); 
  color:white;
  font-size:18px; padding:10px 30px 12px;
}
section.slice_ShopCheckOut div[id$="_ctlConfirmASCX_pnlButtons"] {margin-top:15px;}

section.slice_ShopCheckOut table#tblPaymentDetails {margin:0;}

section.slice_ShopCheckOut input[type="checkbox"]
{ width: 18px; height: 18px; position: relative; top: 2px; }
section.slice_ShopCheckOut div[id$="_pnlCardholderAddress"] table.tblAddress {
  padding:20px;
  background-color:#F3F3F3;
  border:1px solid #cccccc;
}
section.slice_ShopCheckOut div[id$="_pnlCardholderAddress"] table.tblAddress td:first-child {
  text-align:left !important;
  vertical-align: middle !important;
  padding-right:5px;
}
section.slice_ShopCheckOut div[id$="_pnlCardholderAddress"] input[type="text"],
section.slice_ShopCheckOut div[id$="_pnlCardholderAddress"] select {
  margin:2px 0 !important;
  padding:3px 5px 4px;
  background-color:white;
  max-width:initial !important;
  border-color:#cccccc !important;
  width:98%;
}
section.slice_ShopCheckOut h2 span#spnAddressTitle {font-size:30px;}

/* tool-tip code */
section.slice_ShopCheckOut .whats-this {
  font-size:12px;
  line-height:1.5;
}
body .ui-tooltip { line-height:1.2 !important; }
/* Another style of tip box */
div#tipDiv {background-color:black; color:white; padding:5px 5px 5px 10px; border-radius:10px;}

/* Order confirm */
section.slice_ShopCheckOut > div.container > div > li {padding:0;}
section.slice_ShopCheckOut > div.container > div > li:first-of-type {padding:20px 0 0;}
section.slice_ShopCheckOut > div.container > div > li:first-of-type p,
section.slice_ShopCheckOut > div.container > div > li:nth-of-type(2) p {display:none;}
section.slice_ShopCheckOut > div.container > div > li:nth-of-type(3) b {display:none;}

section.slice_ShopCheckOut > div.container > div > li div#dvFullItemDetails {
	background-color:#F3F3F3; padding:20px; border:1px solid #cccccc;
  margin:10px 0;
}
section.slice_ShopCheckOut > div.container > div > li div#dvFullItemDetails table,
section.slice_ShopCheckOut > div.container > div > li div#dvFullItemDetails h3
{border-collapse:collapse; border:none; padding:0;}
section.slice_ShopCheckOut > div.container > div > li div#dvFullItemDetails table table td {
  padding-right:10px;
}
section.slice_ShopCheckOut > div.container > div > li div#dvFullItemDetails table table table {
	margin-left:auto;
}
section.slice_ShopCheckOut > div.container > div > li div#dvFullItemDetails table table table td {
  padding-right:0;
}

section.slice_ShopCheckOut > div.container > div > h2:first-of-type {
	margin-top:20px;
}

section.slice_ShopCheckOut table[id$="_dgOrders"] {
  margin:0 auto 0 0; background-color:#F3F3F3;
}
section.slice_ShopCheckOut table[id$="_dgOrders"] td {padding:10px 20px;}
section.slice_ShopCheckOut center {text-align:left;}

section.slice_ShopCheckOut h1.hide-in-wo + span.CartProgressHighlighted {display:none;}

section.slice_ShopCheckOut div.GreyBox {
  background-color:#F3F3F3; padding:0 20px 0;
  border:1px solid #cccccc;
  margin:20px 0 0;
}
section.slice_ShopCheckOut div.GreyBox p:last-of-type {display:none;}
section.slice_ShopCheckOut div.ConfirmOrder {font-weight:700; padding:20px 0;}
    
section.slice_ShopCheckOut div#divJavaDownload,
section.slice_ShopCheckOut div#divNonJavaDownload > br,
section.slice_ShopCheckOut div#divNonJavaDownload > a {display:none;}
section.slice_ShopCheckOut div#divNonJavaDownload {
  font-size:0; color:transparent;
}
section.slice_ShopCheckOut div#divNonJavaDownload table {
  font-size:18px; color:black;
}
@media (max-width:467px) {
  section.slice_ShopCheckOut select {font-size:14px !important;} 
}
section.slice_ShopCheckOut div.ZeroPoundConfirmText {margin-top:20px;}