@charset "UTF-8";

.loginForm section {width: 50%; float: left; padding-right: 1.5em}
.loginForm section+section {padding: 0 0 0 1.5em}

.checkout-wrap {max-width:1024px; margin:0 auto; padding:3.75rem 1rem}
.checkout-wrap #content {width: 100%;margin-left: 0;padding: 0 0 3.125rem;overflow: unset;min-height: 0;position: relative;}
.checkout-wrap #content .plain-button {background: none;color: #002b49;padding: 0.5em 1em;font-size: 1rem; }
.checkout-wrap #content .plain-button:is(:hover, :focus-visible) {background:var(--bright-blue-a11); color:#fff}

/* position sticky elements */
#content .checkout .right #summary,
#content .checkout .left .fields .shippingMethod,
#content .checkout .left .billing .creditC {top:5.38em; width: 100%; margin: 0; position: sticky; -webkit-position: sticky}


/*grid */
.grid {width:100%; float: left; clear: both; display: block}
.grid .col{float:left; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;}
     .gridInline .col{display: inline-block; float: none}
.grid .col10{width:10%}
.grid .col20{width:20%}
.grid .col25{width:25%}
.grid .col30{width:30%}
.grid .col33{width:33.333%}
.grid .col40{width:40%}
.grid .col50{width:50%}
.grid .col60{width:60%}
.grid .col60{width:60%}
.grid .col66{width:66.666%}
.grid .col70{width:70%}
.grid .col75{width:75%}
.grid .col80{width:80%}
.grid .col90{width:90%}
.grid .colInside{width:100%;background-color:#efefef}

#content .checkout > .grid {padding-bottom: 6em}
#content .checkout,
#content .checkout > form {width:100%; padding-right:0}
#content .checkout h1 {margin-bottom: 1.25em; line-height: 120%}

.checkout .flier-details {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--bright-blue);
  border-radius: 4px;
  color: var(--dark-blue);
  font-size: 0.875em;
  line-height: 1.5em;
  margin-bottom: 1.5em;
  padding: 1em;
}

/* cart tabs - one per active cart (General + any flier with items) */
.content .cart-tabs {list-style:none; margin:0 0 1.5em; display:flex; gap:.25em; padding-left:.25em; border-bottom:1px solid #ddd; overflow: auto;}
.content .cart-tabs li {margin:0; padding:0;}
.content .cart-tabs li:before {display: none;}
.content .cart-tabs li a {display:inline-block; white-space: nowrap; padding:.6em 1.2em; color:#002b49; text-decoration:none !important; border:1px solid #ddd; border-bottom:none; border-radius:4px 4px 0 0; background:#e9e9e9}
.content .cart-tabs li a:is(:hover, :focus-visible) {background:#fff}
.content .cart-tabs li.active a {background:#fff; border-color:#ccc; font-weight:bold; position:relative;}

.checking-out-banner {margin:0 0 1em; padding:.6em 1em; background:#f5f5f5; border:1px solid #ddd; border-radius:4px}

#content .checkout .left .fields.billing fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

#content .checkout .left .fields.billing fieldset .radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
}

#content .checkout .left .fields.billing fieldset .radios label {
    display: inline-block;
}

#content .checkout li {text-indent: 0}
#content .checkout li:before {display: none}
#content .checkout .print {float:right; padding:0.5em 1em; display: inline-block; margin-top: -6em}
#content .checkout .print:before {content: "\f02f"; font-family: FontAwesome; margin-right:0.5em; display:inline-block; font-weight:100}
#content .checkout .print+p {margin: -2em 0 2em; display: block}
#content .checkout .grid { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;}
#content .checkout .creditcard.grid {display: block}
#content .checkout .col .grid {display: block}
#content .checkout img {max-width:100%; height: auto}
#content .checkout .back, #content .checkout .edit {float: right; font-size: 0.8em}
     #content .checkout .back:before,
     #content .checkout .edit:before {content: ""; display: inline-block; width: 0.81em; height: 0.81em; margin-right:0.4em}
     #content .checkout .back:before {background: url(/Products/ShoppingCart/images/icon-cart.svg) no-repeat center / contain}
     #content .checkout .edit:before {background: url(/Products/ShoppingCart/images/icon-pencil.svg) no-repeat center / contain}
#content .checkout section > h1 {font-size: 1.35em; margin-bottom: 0.5em}
#content .checkout section h2 {font-size: 1.15em; margin-bottom:0.5rem;}

/* #content .checkout section>h2,
#content .checkout section #change-shipping-address h2 {
	font-size: 1em;
	margin-bottom: 0.5rem;
	color: #666;
	font-weight: 400;	
} */

#content .checkout section #customer-shipping-address,
#content .checkout section #change-shipping-address {
	margin-top: 0.5em;	
}

#content .checkout .highlight-content {
  background: #fff;
  border: 1px solid #EAEBEC;
  border-radius: 10px;
  line-height: 1.5em;
  padding: 1em;
}

#content .checkout .highlight-content > *:last-child {
  margin-bottom: 0;
}

#content .checkout  .no-products-in-cart {text-align: center;padding: 3em 2em;border-radius: 4px;background:url(/images/products/landing-page-top-bg.jpg) no-repeat center / cover}
#content .checkout  .no-products-in-cart h2 {font-size: 1.75em; color:#fff; margin-bottom:1em;}
#content .checkout .left {width:70%; padding-right:3%;}
#content .checkout .left > section {width:100%; float: left; clear:both}
#content .checkout .left .bulky {float: right}
#content .checkout .left [value="Place Order"] {float: right;}
#content .checkout .left .items {width:100%; float: left; clear:both}
#content .checkout .left .items.saved-for-later {margin-top: 2em; padding-top:2em; border-top:1px solid #DBDFE2}
#content .checkout .left .items li {overflow: auto; transition:ease all 200ms; border: 1px solid #EAEBEC; border-radius: 4px; padding: 1.5em 1em; margin: 0 0 0.5em; background:#fff;}
#content .checkout .left .items li:hover {z-index:1; box-shadow: 0 5px 20px rgba(0,0,0,0.1);}
#content .checkout .left .items.saved-for-later li {background: #EDEFF0;}
#content .checkout .left .items.saved-for-later li:hover {box-shadow:none}
#content .checkout .left .items li .product-name {margin-bottom: 0.125em}
#content .checkout .left .items li a:hover .product-name {color: #007DB5}
#content .checkout .left .items li .item-number {font-size: 0.8em; margin-bottom: 0.75em; opacity: 0.75; font-style: italic}
#content .checkout .left .items li .out-of-stock {color:var(--red); margin-bottom: 0.75em;}
#content .checkout .left .items li .col {text-align: right}
#content .checkout .left .items li .col.product-image {min-height: 1px; text-align: center;}
#content .checkout .left .items li .col.product-image a {display: block; background:#fff; width:calc(100% - 1rem); padding-bottom:calc(100% - 1rem); position: relative;}
#content .checkout .left .items li .col.product-image a:hover {opacity: 0.8}
#content .checkout .left .items li .col.product-image a img {max-width: calc(100% - 1rem); max-height: calc(100% - 1rem); display:inline-block; width:auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#content .checkout .left .items li .col40 {text-align: left}
#content .checkout .left .items li .col40+.col20 label {line-height: 2.3rem}
#content .checkout .left .items li .qty-warning {
	clear: both;
	color: var(--red);
	float: left;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 0.75em;
	line-height: 1.25em;
	margin-top: 0.5em;
	text-align: right;
	width: 100%;
}
     #content .checkout .order-confirmation .left .items li .col {text-align: left}
     #content .checkout .order-confirmation .left .items li .col.module {clear: both; margin-left: 20%; font-size: 0.875em}
     #content .checkout .order-confirmation .left .items li .col.module span {float:right}
     #content .checkout .order-confirmation .left .items li .col40 + .col20 label {line-height: 1.3rem}
#content .checkout.checkout.hide-product-links .left .items li .col40+.col20 label {line-height: 1em; display: block}
#content .checkout .left .items li .col40+.col20 label.unit-price span {font-family:'Roboto Condensed', sans-serif; white-space: nowrap; line-height: 1.3rem; margin-bottom: 0.5em}
#content .checkout.checkout.hide-product-links label.unit-price span {white-space: normal; display: inline-block; margin:0 0.5em 0 0;}
#content .checkout .left .items li .product-quantity {
	display: flex;
	flex-direction: column;
	gap:0.3125em;
}
#content .checkout .left .items li .product-quantity .unit-price {
	color: #012B49;
	display: flex;
	font-family: 'Roboto Condensed', sans-serif;
	flex-wrap:  wrap;
	gap: 0.125em 0.75em;
	justify-content: flex-end;
	align-items: center;
	line-height: 1.125em;
}
#content .checkout .left .items li .product-quantity .unit-price .original-price {
	text-decoration: line-through;
	font-weight: 400;
	color: #747474;
}
#content .checkout .left .items li .product-quantity .unit-price .savings {
	color: var(--green);
	font-size: 0.875em;
	font-style: italic;
	width: 100%;
}
#content .checkout .left .items li .product-quantity .unit-price label {
	line-height: inherit;
}
#content .checkout .left .items li .price {font-family:'Roboto Condensed', sans-serif; text-align: right; font-weight:700; line-height: 1.3rem; color:#012B49}
#content .checkout .left .items span {display: block; line-height: 120%;}
#content .checkout .left .items .option {font-size: 0.8em; margin-top: 0.25em}
#content .checkout .left .items .option span {display: inline-block}
#content .checkout .left .items .selected-option {font-size: 0.9em; margin-bottom: 0.25em}
#content .checkout .left .items .related-products {margin-top: 0.5em; border-top: 1px dashed #ccc; padding-top: 0.5em}
#content .checkout .left .items .related-products > em {font-size: 0.8em;}
#content .checkout .left .items .related-products > div {margin-top: 0.25em; position: relative; padding-right:3em;}
#content .checkout .left .items .related-products > div .ExpandSkus {width: 1em; height: 1em; text-align: center; line-height: 1em; background: #007DB5; color: #fff; border-radius: 2px; display: inline-block; margin-right: 0.5em;}
#content .checkout .left .items .related-products > div .ExpandSkus:hover {background: #007DB5}
#content .checkout .left .items .related-products > div .DependentProducts div {font-size: 0.8em; margin-top: 0.5em; padding-top: 0.5em; position: relative; padding-right: 3.25rem}
#content .checkout .left .items .related-products > div .DependentProducts div+div {border-top: 1px dashed #ccc}
#content .checkout .left .items .related-products > div a:not(.button) {font-size: 0.875em}
#content .checkout .left .items .related-products > div .button {position: absolute; right:0; top: 0.5em; font-size: 0.8rem; padding: 0.25em 0.5em}
#content .checkout .left .items .discounted {}
#content .checkout .left .items .remove,
#content .checkout .left .items .move-to-cart {cursor:pointer; display: inline-block; margin-top: 0.75em; font-size: 0.75em; color: var(--dark-blue)}
#content .checkout .left .items .remove:is(:hover, :focus-visible),
#content .checkout .left .items .move-to-cart:is(:hover, :focus-visible) {color:var(--bright-blue-a11)}
#content .checkout .left .items .remove:before {content: "\00D7\ "; color:#009CDE; font-weight:600}
#content .checkout .left .items .save-for-later:before {content: ""; padding-left: 1.75em; background: url(/images/products/save-for-later.svg) no-repeat center;}
#content .checkout .left .items .move-to-cart {background: var(--bright-blue-a11);padding: 0.35em 0.5em 0.35em 0.25em;border-radius: 2px;color: #fff;}
#content .checkout .left .items .move-to-cart:is(:hover, :focus-visible) {background: #0083BB; color: #fff}
#content .checkout .left .items .move-to-cart:before {content: ""; padding-left: 1.75em; background: url(/images/products/move-to-cart.svg) no-repeat center;}
#content .checkout .left .items input {width: 5.5em}
#content .checkout .left .items input[value="Update Cart"] {width: auto; float: right}
#content .checkout .left .productList {margin:3em 0 5em; padding:0}
#content .checkout .left .productList h1 {text-align: left}
#content .checkout .left .productList h1:before,
#content .checkout .left .productList h1:after {content: ''}
#content .checkout .left .productList .subCat {border:0}
#content .checkout .left .callout {background: #ececec; padding: 3em; margin-top:3em; text-align: center; border-radius: 0.35em}
#content .checkout .left .callout p:first-child {font-style: italic}
#content .checkout .left .callout h1 {font-size: 2em; color:#0085c3; margin: 0.75em 0 1em}
#content .checkout .left .callout p:nth-child(3) {line-height: 150%; color:#666; margin-bottom:2em}
#content .checkout .left .fields {border-bottom: 1px solid #DBDFE2}
#content .checkout .left .fields.closed h1 {margin-bottom: 0}
#content .checkout .left .fields div {margin-bottom: 0.25em}
#content .checkout .left .fields form > div, #content .checkout .left .fields .paypal {margin: 1em 0}
#content .checkout .left .fields.billing form > label {display: inline-block;  border: 1px solid rgba(0,0,0,.2);padding: 0 1em;box-shadow: none; cursor: pointer; line-height: 2.3rem;height: 2.3rem;background: #eee;border-radius: 0.25em;}
#content .checkout .left .fields [type="text"],
#content .checkout .left .fields [type="email"],
#content .checkout .left .fields [type="password"],
#content .checkout .left .fields select {width: 100%}
#content .checkout .left .shipping {padding-bottom: 3em}
#content .checkout .left .shipping.closed {padding: 0 0 1em}
#content .checkout .left .fields .shipping-info {padding-right:5%}
#content .checkout .left .fields .shipping-info.no-padding {padding-right:0}
#content .checkout .left .fields .shippingMethod {padding-left: 1em}
#content .checkout .left .fields .shippingMethod div {margin-bottom: 0; width:100%}
#content .checkout .left .fields .shippingMethod div label {display: block; position: relative; padding-left: 1.5em}
#content .checkout .left .fields .shippingMethod div label input {position: absolute; left: 0}
#content .checkout .left .fields .shippingMethod > #shipMethodContainer {margin-top: 1em; clear:right; font-size: 0.875em}
#content .checkout .left .fields .shippingMethod span {float: right}
#content .checkout .left .text-right {text-align: right}
#content .checkout .left .billing {padding: 0 0 1.75em; margin-bottom:1.75em}
#content .checkout .left .billing.closed {padding: 1em 0}
#content .checkout .left .billing .billingAddress {padding-right:5%}
#content .checkout .left .billing #useAddress {margin-bottom: 2em}
#content .checkout .left .billing .billingAddress :checked ~ label + div,
/*#content .checkout .left .billing .cardInfo label + div {display: none}*/
#content .checkout .left .billing .cardInfo :checked ~ label + div {display: block}
#content .checkout .left .billing .cardInfo {margin-bottom: 1em}
#content .checkout .left .billing .cardInfo .payP .cardOptions {margin-left: -100%}
#content .checkout .left .billing .cardInfo [for="CreditCard"]:before {content: "\f09d"; font-family:FontAwesome; display:inline-block; margin-right:0.25em;}
#content .checkout .left .billing .cardInfo [for="PayPal"]:before {content: "\f1ed"; font-family:FontAwesome; display:inline-block; margin-right:0.25em;}
#content .checkout .left .billing .cardInfo :checked ~ [for="CreditCard"],
#content .checkout .left .billing .cardInfo :checked ~ [for="PayPal"] {color: #000}
#content .checkout .left .billing input + span {font-size: 0.8em; font-style: italic; color:#666; display:block; margin:0.25em 0 0.75em; line-height:120%;}
#content .checkout .left .billing .verNum [type="text"] {width: calc(100% - 2em)}
#content .checkout .left .billing .verNum #que {display: none}
#content .checkout .left .billing .verNum label {cursor: pointer}
#content .checkout .left .billing .verNum label[for="que"] {width:1.25rem; height: 1.25rem; text-align: center; background:#333; line-height: 1.25rem; border-radius:50%; margin-left:0.25em; display:inline-block; vertical-align:middle; transition:all 200ms ease-out; cursor:pointer}
#content .checkout .left .billing .verNum label[for="que"]:before {content: "?"; display: block; color:#fff; font-size: 0.7em}
#content .checkout .left .billing .verNum label[for="que"]:hover,
#content .checkout .left .billing .verNum :checked ~ label[for="que"] {background: #ccc}
#content .checkout .left .billing .verNum aside {display: none; width: 100%; padding:0; margin:1em 0; font-size: 0.8em; line-height: 120%;}
#content .checkout .left .billing .verNum aside strong {display: block}
#content .checkout .left .billing .verNum :checked ~ label[for="que"] + aside {display: block;}
#content .checkout .left .billing .expiration select {width:4em}
#content .checkout .left .billing .expiration select+select {width:5em}
#content .checkout .order-confirmation .left {
	display: grid;
	gap: 2em;
	grid-template-columns: repeat(auto-fill, minmax(min(12em, 100%), 1fr));	
}
#content .checkout .order-confirmation .left .items {
	grid-column: 1/-1;
}
#content .checkout .order-confirmation .left .shipping div {
	margin: 0.75em 0;
}
#content .checkout .order-confirmation .left .items,
#content .checkout .order-confirmation .left .shipping,
#content .checkout .order-confirmation .left .billing {margin: 0; padding-bottom: 0; border-bottom: 0}
#content .checkout .order-confirmation .left .createAccount {margin: 1em 0; padding-bottom: 2em; border-bottom: 1px solid #DBDFE2}
#content .checkout .order-confirmation .left .createAccount h3 {margin: 0}
#content .checkout .order-confirmation .left .billing {padding-top: 0}
#content .checkout .order-confirmation .left section > h1 {margin-bottom: 0}
#content .checkout .order-confirmation .left .items ul {margin-bottom: 0}
#content .checkout .order-confirmation .left .items li:last-child {border: 0}

#content .checkout .right {width:22em; padding-left:5%;}
#content .checkout .right [type="text"],
#content .checkout .right [type="email"] {}
#content .checkout .right .overview {font-size: 0.9em; font-family:'Roboto Condensed', sans-serif; font-weight:700; padding:1.5rem 1rem; border:1px solid #EAEBEC; border-bottom:0; background: #fff; border-radius: 4px 4px 0 0}
#content .checkout .right .overview .savings {
    background: color-mix(in srgb, var(--green) 15%, transparent);
    border: 1px solid var(--green);
    color: #00233b;
    display: flex;
    font-size: 1.25em;
    justify-content: space-between;
    line-height: 1em;
    margin: -1.5rem -1rem 1.5rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}
#content .checkout .right .action .back-order {font-size: 0.9em;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;padding: 0.5em 0 1rem;background: #fff;border-radius: 0;margin-top: -1em;text-align: center;}
#content .checkout .right .action .back-order input {width:auto; display: inline-block}
#content .checkout .right input[type="text"],
#content .checkout .right input[type="email"],
#content .checkout .right input[type="password"] {background: #fff}
#content .checkout .right .overview hr {margin: 1em 0}
#content .checkout .right .overview.closed {border-radius: 0.35em}
#content .checkout .right .overview ul {margin:0}
#content .checkout .right .overview li {background:none; overflow: auto; text-indent: 0; padding: 0}
#content .checkout .right .overview li+li {margin-top: 0.25em}
#content .checkout .right .overview li.total {font-size: 1.25em; color:#00233b; border:0;margin: 0; padding: 0;}
#content .checkout .right .overview.order-total li.total {border:0;margin-top: 0; padding: 0;}
#content .checkout .right .overview.order-total .actions {padding-top:1.5rem}
#content .checkout .right .overview.order-total .actions .button {width:100%; display:block; text-align:center}
#content .checkout .right .overview.order-total .actions .button + .button {margin-top:0.25rem}
#content .checkout .right .overview li span {background:none; padding: 0; float: right}
#content .checkout .right .overview li:last-child span {font-weight:700; color:#00AC74}
#content .checkout .right .overview li input {width: 7em}
#content .checkout .right .overview li.calculateShipping input[type="text"] {width: calc(100% - 7em); height: 2.5rem; padding: 0 0.5em}
#content .checkout .right .overview li #btnCalcShipping {padding: 0; width:7em; text-align: center; line-height: 1.6rem;  height: 2.5rem; padding: 0}
#content .checkout .right .action {padding: 1.5rem 1rem; border:1px solid #EAEBEC; border-top:0; background: #00233b; border-radius: 0 0 4px 4px}
#content .checkout .right .action label.checkbox {position:relative; margin-bottom:1rem; line-height:1.25em; padding:0.25em 0 0.25em 2em; display: block; text-align:left; color:#fff; font-size:0.875rem}
#content .checkout .right .action label.checkbox input {width:auto;margin:0; position:absolute; top:0.3125rem; left:0.375rem}
#content .checkout .right .action input {width:100%; margin-bottom: 0.25em}
#content .checkout .right .action [value="Login To Checkout"] {margin: 0 0 0.25em}
#content .checkout .right .action .forgot-password {display: block; font-size: 0.875em; color:#fff; opacity: 0.7; text-align: center}
#content .checkout .right .action .forgot-password:hover {opacity: 1}
#content .checkout .right .action > .button {width: 100%; background:var(--bright-blue-a11); border:0; box-shadow:none; text-align: center}
#content .checkout .right .action > .button:is(:hover, :focus-visible) {background:var(--bright-blue-a11); box-shadow: inset 0 0 0 2px var(--bright-blue)}
#content .checkout .right .action >.small{font-size: .75em; color:#fff; font-style: italic; opacity: 0.5}
#content .checkout .right .action >.small:hover {opacity: 1}
#content .checkout .right .action [value="Place Order"] {margin:0}
#content .checkout .right .action .payment-discount {
    background: var(--bright-blue-a11);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
	line-height: 1.25em;
    margin: 1.5em -1em -2.5em;
    padding: 1.5em 1em 1.5em;
    text-align: center;
}
#content .checkout .right .action .payment-discount p {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
}
#content .checkout .right .action .payment-discount p b {
    font-size: 1.125em;
}
#content .checkout .right .discount {margin-top: 3em}
#content .checkout .right .discount span {display: block;}
#content .checkout .right .discount form span {float:right}
#content .checkout .right .discount input {display: inline-block;}
#content .checkout .right .discount [type="submit"] {width: 6em; float: right; height: 2.5rem; padding: 0 0.5em}
#content .checkout .right .discount [type="text"] {width:calc(100% - 6.25em); height: 2.5rem; padding: 0 0.5em}

#content .checkout .manageLinks {position: absolute; top: -0.5em; right: 0;}

/* removing links on checkout confirmation page */
#content .checkout.hide-product-links .left .items ul li {pointer-events: none;}
#content .checkout.hide-product-links .left .items .related-products {display: none}
#content .checkout.hide-product-links .left .items h2+div {display: none}

.paypal-button {width:26em !important; max-width:100% !important; height: calc(3rem + 2px) !important; border: 1px solid #0085c3 !important; position: relative !important; max-width:100% !important; background:#339dcf !important}
.paypal-button:hover {background: #0085c3 !important}
.paypal-button span img, 
.paypal-button br + span,
.paypal-button span span,
.paypal-button span.paypal-button-content {display: none !important}
.paypal-button .paypal-button-logo {display: block !important}
.paypal-button .paypal-button-logo:before {content: ""; position: absolute; top:0; left:0; font-size: 1rem; background: url(/images/icons/misc/paypal-logo.svg) no-repeat center #fff; transition: ease all 200ms; width: 3.2rem;height: 100%;display: inline-block;background-size: 23px 27px}
.paypal-button:hover .paypal-button-logo:before {background: url(/images/icons/misc/paypal-logo.svg) no-repeat center #eee;background-size: 23px 27px}
.paypal-button .paypal-button-logo:after {content: "Check out with PayPal ›"; text-shadow: 0 2px 0 #0085c3; vertical-align: middle;font-size: 0.9rem;display: inline-block;padding-left: 3.75rem; line-height: 3rem; font-style: italic;}

.cartTable td{padding:.2em 0}
.cartTable input, .cartTable select, .cartTable textarea,.cartTable table{width:100%;max-width:400px;max-width:30rem}
.cartTable td:first-child{width:1%; white-space:nowrap;padding-right:.2em}
.cartTable table td{width:50%;padding-left:.2em}
.cartTable table td:first-child{width:50%;padding-right:.2em;padding-left:0}
#content .checkout .left50{float:left;width:50%;padding:0 2em 0 0;margin-bottom:1em}
#content .checkout .left50+.left50{padding:0 0 0 2em}
#content .checkout .left50+hr{clear:both}

.cartTabs{white-space:nowrap;float:left}
.cartTabs>*{margin-right:1em}
.cartTabs>*:before{content:"\203A";margin-right:1em;opacity:.5}
.cartTabs>*:first-child:before{content:"";margin-right:0}
.cartTabs .on{background:#ccc;padding:.5em .8em}

.checkout .twoCol{margin-top:4em}
#content .twoSec section{display:inline-block;margin:0;width:50;margin-top:0;float: left;}
#content .threeSec section{display:inline-block;margin:0;width:33%;margin-top:0;float: left;}
.twoSec section, .threeSec section{padding-bottom:2em;display:inline-block;}
.createAccountBtn{line-height:2em;padding-top:2em}
.cartTotal{font-size:1.5em;font-weight:bold}
table input{width:100%}
.checkout table input[type="submit"], .checkout table input[type="radio"], .checkout table input[type="checkbox"],table input[type="submit"], table input[type="radio"], table input[type="checkbox"]{width:auto}
.checkout hr{clear:both}
.checkout .order-confirmation hr{float: left; width:100%}
.threeCol td{width:50%}

.cartRedText  { color:red; }
.cartGreenText  { color:green; }

.wsProductsTable3 {border-collapse:collapse; margin:20px 0; width:100%}

.wsProductsTable { border-collapse:collapse;width:100%; margin:20px 0 20px;border-bottom:1px solid #dadada}
.wsProductsTable tr>*{text-align:right;padding:.5em 0 .5em 1em}
.wsProductsTable tr>*:first-child, .wsProductsTable tr>td:first-child+td{text-align:left;padding-left:0}
.wsProductsTable th {padding-bottom:5px}
.wsProductsTable td {border-top:1px solid #dadada}
.wsProductsTable em, .wsProductsTable td>span {line-height:1.3em;}
.wsProductsTable em, .wsProductsTable td>span, .wsProductsTable2 em, .wsProductsTable3 table tr>td:first-child, .wsProductsTable4 tr>td:first-child {font-size:.9em;opacity:.65;filter:alpha(opacity=65);}
.wsProductsTable3 table tr>td:first-child, .wsProductsTable4 tr>td:first-child  {font-style:italic}
strong.bulky {font-size:1.5em}
.discountCode{white-space:nowrap;float:left}
.updateTotal{float:right}
.products .threeCol section{display:inline-block}
.cartTabs img {position:relative;bottom:-3px}

.wsProductsTable3 table tr>td:first-child.text {opacity:1;filter:alpha(opacity=100); font-style:normal}

#wsDashboardChartTable li:before,
#wsDashboardButtons li:before,
#content .wsDashboardChart li:before,
#wsDashboardLinks ul li:before {display: none}

#content #wsDashboardChartTable tr+tr li {background:none; padding:0 0 0 25px; text-indent:-25px}
#content #wsDashboardChartTable tr+tr ul {background:none; margin-left:30px;}
#content #wsDashboardChartTable tr+tr strong {color:#000; font-size:1.6em}

#wsDashboardButtons, #wsDashboardLinks {position:relative}
#wsDashboardButtons>div, #wsDashboardLinks>div {float:right;position:relative;left:-50%;}
#wsDashboardButtons>div>ul, #wsDashboardLinks>div>div {position:relative;left:50%}
#wsDashboardButtons>div>ul>li, #wsDashboardLinks>div>div>ul {float:left;position:relative;background:none;}
#wsDashboardButtons>div>ul>li>a , #wsDashboardLinks>div>div>ul {padding:15px 0 10px;width:170px; margin:0 25px 20px;}

#wsDashboardButtons>div>ul>li {padding:0}
#wsDashboardButtons li {margin: 0}

#wsDashboardButtons>div>ul>li>a {display:block;border:1px solid #e6e6e6; text-decoration:none;text-align:center;color:#999;
	-moz-border-radius: .5em;border-radius: .5em;
	background: #efefef; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e6e6e6'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e6e6e6)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #f2f2f2,  #e6e6e6); /* for firefox 3.6+ */
	-moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 0 rgba(49,101,155,0);-webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 0 rgba(49,101,155,0);box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 0 rgba(49,101,155,0);
	-webkit-transition: all 300ms ease-out;
	   -moz-transition: all 300ms ease-out;
	     -o-transition: all 100ms ease-out;
	        transition: all 300ms ease-out;
	}
#wsDashboardButtons>div>ul>li>a>strong { font-size:1.6em;color:#333}
#wsDashboardButtons>div>ul>li>a>img { margin:5px 0 0}
#wsDashboardButtons>div>ul>li>a:hover {color:#666;
-webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 45px rgba(49,101,155,0.15);
   -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 45px rgba(49,101,155,0.15);
        box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 45px rgba(49,101,155,0.15);
	}

#wsDashboardLinks>div>div>ul>li{ background:none}
#wsDashboardLinks>div>div>ul>li>a{text-decoration:none}
#wsDashboardLinks>div>div>ul>li img{position:relative;bottom:-3px;margin:0 5px 0 0}

#popover.out-of-stock-warning .popover-wrap {text-align: center;}
#popover.out-of-stock-warning p button {color:var(--dark-blue); display: block; width:100%; max-width:25.5rem; text-align: center; margin:0.625rem auto 0; background:none; border:1px solid rgba(0, 0, 0, 0.1); border-radius: 4px;}
#popover.out-of-stock-warning p button span {font-weight:700;}
#popover.out-of-stock-warning p button.back-to-cart:before {content:""; padding-left: 1em; margin-right: 0.5em; background: url(/images/back-to-cart.svg) no-repeat center;}
#popover.out-of-stock-warning p button.back-to-cart:hover {border-color: var(--bright-blue);}
#popover.out-of-stock-warning p button.remove-all span {color:var(--red)}
#popover.out-of-stock-warning p button.remove-all:before {content:""; padding-left: 1em; margin-right: 0.5em; background: url(/images/remove-all.svg) no-repeat center;}
#popover.out-of-stock-warning p button.remove-all:hover {border-color:var(--red)}
#popover.out-of-stock-warning p button.save-all span {color:var(--green)}
#popover.out-of-stock-warning p button.save-all:before {content:""; padding-left: 1em; margin-right: 0.5em; background: url(/images/save-all.svg) no-repeat center;}
#popover.out-of-stock-warning p button.save-all:hover {border-color:var(--green)}


.mobileOnly {display: none}


@media screen and (max-width: 1023px) {
     #content .checkout .left .items li {overflow: hidden}
     #content .checkout .left .items li .col {width: 100%; text-align:center}
     #content .checkout .left .items li .product-info {width: 60%; padding-right: 1em}
	 #content .checkout .left .items li .product-quantity .unit-price {
		font-size: 1em;
		margin: 0.5em 0;
		justify-content: center;
	 }
     #content .checkout .left .items li .product-price {width: 100%; margin-top: 1em}
     #content .checkout .left .items .remove, 
     #content .checkout .left .items .save-for-later,
     #content .checkout .left .items li .price {display: block;text-align: center;}     
     #content .checkout .left .items li .qty-warning {text-align: center;}     
     #content .checkout .left .items li .unit-price {font-size:0.875rem}
     #content .checkout .left .items li .price {font-weight:700; margin-top: 1em;}
     #content .checkout .left .items li .product-price {margin-top:0}
     #content .checkout .left .items li .product-quantity {margin: 0}
     #content .checkout .left .items li .col.product-image a {display: block; padding: 0 0 10em; max-width: 10em; margin:0 auto 1em}
     #content .checkout .left .items li .col40 + .col20 label.unit-price span {display: inline-block; margin-right:0.25em; white-space: normal;}
     #content .checkout .left .items input[value="Update Cart"] {display: block;float: none;width: auto;margin: 0 auto;}

     #content .checkout .left .shipping form > .grid,
     #content .checkout .left .billing form > .grid {display: block}
     #content .checkout .left .fields .shipping-info,
     #content .checkout .left .fields .shipping-rates,
     #content .checkout .left .billing .billingAddress,
     #content .checkout .left .billing .cardInfo {width: 100%; padding-right: 0}
     #content .checkout .left .billing .creditC {position: relative; margin-top: 2em; top:auto; width:100%}
     #content .checkout .left .billing .cardInfo .cardOptions,
     #content .checkout .left .billing .cardInfo .poOptions {margin-top: 1.5em}
     #content .checkout .left .text-right {clear: both; text-align: center}
     #content .checkout .left .fields.shipping div,
     #content .checkout .left .fields.billing div,
     #content .checkout .left .fields.shipping grid,
     #content .checkout .left .fields.billing grid {width: 100%; display: block}
     .loginForm section,
     .loginForm section+section {width: 100%; float: none; padding: 0}
     .loginForm section+section {margin-top: 3em}

}

@media screen and (max-width:750px) {
     /* resetting overflows for position sticky elements */
     .products .wrap,
     body > * > .wrap,
     #content .checkout,
     .interior main > .wrap,
     #content .checkout > form,
     #alertApp > *, .home .wrap, 
     body > footer > .fatFooter, 
     .interior main:not(.products) > .wrap #content {overflow: unset !important}
     
     .checkout-wrap {padding-top:2em}

     #content .checkout .right #summary, #content .checkout .left .fields .shippingMethod, #content .checkout .left .billing .creditC {position: relative; width:100%; top:auto}
     
     .mobileOnly {display: block}
     .mobileHide {display: none !important}
     .mobileLarge {font-size: 1.125em !important; padding: 0.875em 0; margin-top:1em; width:100%}
     .checkout .twoCol, .checkout .threeCol{
     -webkit-columns:1;
        -moz-columns:1;
             columns:1;
     -webkit-column-gap:0;
        -moz-column-gap:0;
             column-gap:0;
     -webkit-column-rule:0;
        -moz-column-rule:0;
             column-rule:0;
     }
     #content .no-products-in-cart {text-align: center; margin-bottom:2em; padding: 2.5em 1em;border-radius: 4px;background:url(/images/products/landing-page-top-bg.jpg) no-repeat center / cover}
     #content .no-products-in-cart h2 {font-size: 1.5em; line-height:1em; color:#fff; margin-bottom:1em;}
	
	 .content .cart-tabs {
		border: 1px solid #ddd;
		flex-direction: column;
		gap: 0;
		padding: 0;
	 }
	 
	 .content .cart-tabs li {
		width: 100%;
	 }
	 
	 .content .cart-tabs li + li {
		border-top: 1px solid #ddd;
	 }
	 
	 .content .cart-tabs li a {
		border: 0;
		border-radius: 0;
		width: 100%;
		white-space: normal;
	 }
	 
	 .content .cart-tabs li.active a {
		box-shadow: inset 0 0 0 1px var(--bright-blue);
	 }
	
     #content .checkout ul:empty {display: none}
     #content .checkout .right {margin-bottom: 2em}
     #content .checkout section:not(#summary):not(.review) h1,
     #content .checkout section h2,
     #content .checkout .left .fields.billing .cardInfo > .creditC p {margin-bottom: 0}
     #content .checkout .left .shipping:not(.review),
     #content .checkout .left .billing:not(.review) {padding: 0; border: 0}
     #content .checkout .left .text-right {text-align: center}
     #content .checkout section:not(.review):not(.billing)+section:not(.review):not(.billing){margin-top:2em;padding-top:2em;border-top:1px solid #DBDFE2}
     #content .checkout .order-confirmation .left :is(.shipping, .billing) {margin: 0 !important; padding: 0 !important; border: 0 !important;}
     #content .checkout .left50, #content .checkout .left50+.left50{float: none;width:100%;padding:0}
     #content .checkout .CTA {display: none}
     #content .checkout .grid {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
     #content .checkout .left,
     #content .checkout .right {width:100%; order:1}
     #content .checkout .left {border-right: 0; order:2; padding: 0 0 2em}
     #content .checkout .right h2,
     #content .checkout .left h2 {margin-bottom: 0.5rem}
     #content .checkout .left .items h2 {margin-bottom: 0}
     #content .checkout .left .items li {margin:1em 0 0; background:#fff;}
     #content .checkout .left .items li .col,
     #content .checkout .left .items li .price {width: 100%; text-align: center}
     #content .checkout .left .items li .unit-price {font-size:0.875rem}
     #content .checkout .left .items li .price {font-weight:700; margin-top: 1em;}
     #content .checkout .left .items li .product-price {margin-top:0}
     #content .checkout .left .items li .product-quantity {margin: 0}
     #content .checkout .left .items li .col.product-image a {display: block; padding: 0 0 10em; max-width: 10em; margin:0 auto 1em}
     #content .checkout .left .items li .col40 + .col20 label.unit-price span {display: inline-block; margin-right:0.25em; white-space: normal;}
     #content .checkout .left .items input[value="Update Cart"] {display: block;float: none;width: auto;margin: 0 auto;}
     #content .checkout .left .bulky,
     #content .checkout .left .fields.shipping .col50,
     #content .checkout .left .fields.shipping .col60.shipping-info,
     #content .checkout .left .fields.shipping .shipping-rates,
     #content .checkout .left .fields.billing .col50 {width: 100%; padding: 0; display: block; float: none}
     #content .checkout .left .fields.billing .col50 {padding-right: 0}
     #content .checkout .left .fields.billing #useAddress {margin-bottom: 1em}
     #content .checkout .left .fields.shipping .col60,
     #content .checkout .left .fields.billing .col60 {width:70%}
     #content .checkout .left .fields .shippingMethod > .col30 {text-align: left; font-weight: 400}
     #content .checkout .left .fields .shippingMethod > .col70 {font-size: 0.875em}
     #content .checkout .right {padding: 0}
     #content .checkout .right .action > a.bulky {font-size: 1.2em}
     #content .checkout .right .create {display: none}
     /*#content .checkout .right .action {display: none}*/
     #content .checkout .right .action > .button {margin-top:0}
     #content .checkout .left .billing .cardInfo label + div .col {width: 100%}
     #content .checkout .left .billing .cardInfo :checked ~ label + div {display: block; overflow: auto; width: 100%; padding-left: 1.5em}
     #content .checkout .left .billing .cardInfo .cardOptions,
     #content .checkout .left .billing .cardInfo .poOptions {width:100%; margin-top:0.5em}
     #content .checkout .left .billing .cardInfo .payP .cardOptions {margin-left: 0}
     #content .checkout .left .billing .expiration select,
     #content .checkout .left .billing .expiration select+select {width:49%}
     #content .checkout .order-confirmation .right {order: 1; border-top: 0}
     #content .checkout .order-confirmation .left {order: 2}
     #content .checkout .order-confirmation .left .shipping,
     #content .checkout .order-confirmation .left .billing {padding: 1.75em 0}
     #content .checkout .order-confirmation .left .createAccount {border: 0; padding-bottom: 1.75em}
     #content .checkout .order-confirmation .left .items li .col {text-align:center}
     #content .checkout .right .discount {margin-top: 1em}
     #content .checkout.hide-product-links .right .action {display: none}
     .formTable input[type="text"],
     .formTable input[type="password"],
     .formTable input[type="tel"],
     .formTable input[type="number"],
     .formTable input[type="email"],
     .formTable input[type="url"],
     .formTable select,
     .formTable textarea {margin-bottom: 1em}
     #content .roamingButton {position: sticky;position: -webkit-sticky; bottom:0; padding: 0 0 0.75em; background: #f4f6f7; margin-top: 2em;}
     #content .roamingButton:before {content:""; height: 30px; position:absolute; top:-30px; left:0; width:100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4f6f7+0,f4f6f7+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(244,246,247,0) 0%, rgba(244,246,247,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(244,246,247,0) 0%,rgba(244,246,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(244,246,247,0) 0%,rgba(244,246,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f6f7', endColorstr='#f4f6f7',GradientType=0 ); /* IE6-9 */
     }

     #content .loginForm {column-count: 1}
     #content .loginForm section+section {border-top: 1px solid #DBDFE2; padding-top: 2em; margin-top: 1em}

     #content .checkout .left .back-order {clear:both; font-size: 0.9em;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;padding: 0.5em 0 1rem;border-radius: 0;margin-top: -1em;text-align: center;}
     #content .checkout .left .back-order input {width:auto; display: inline-block}

}
@media screen and (max-width:450px) { 
     .noMobile{display:none}
     .wsProductsTable th{font-size:1em}
     .wsProductsTable tr>*{text-align:right;padding:.2em 0 .2em .5em}
     .cartTabs>*{margin-right:.5em}
     .cartTabs>*:before{margin-right:.5em}
}
