/* Layout: Two Column
Theme: Basic Grey

Appearance.css contains the cosmetic properties for your order
form, such as fonts, colors, background images and borders.

NOTE: There are additional classes that are not listed here
because they currently have no attributes. You can locate
these by downloading and using Firebug.
===============================================================*/

@import url("https://use.typekit.net/dxw0vkm.css");

/* Variables
===============================================================*/
:root {
	--rifm-green: #64ac00;
	--rifm-green-rgb: 100 172 0;
	--rifm-blue: #2b8fbb;
	--rifm-blue-rgb: 43 143 187;
	--rifm-brown: #837372;
	--rifm-brown-rgb: 131 115 114;
	--rifm-dark-gray: #363b36;
	--tcp-bg: #e6e3e3;
}

body, td {
	font: 16px/1.5 Helvetica, Arial, sans-serif;
	color: #222;
	background-color: var(--tcp-bg);
}

img, img a {
	border: 0 none;
}

/* TYPOGRAPHY
===============================================================*/

h1 {
	/* Used for product names */
	font: 700 2rem/1em caecilia;
}

h2 {
	/* Used for upsell product names */
	font: 700 2rem/1em caecilia;
}

h3 {
	/* Used for upsell headline */
	font: 700 1.5rem/1em caecilia;
}

/* Better Strikethrough */
.strikethrough, strike { text-decoration:none; position:relative; }
.strikethrough:before, strike:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%; 
	background:red;
	opacity:.7;
	
	width: 110%;
	height:.1em;
	border-radius:.1em;
	left: -5%;
	white-space:nowrap;
	transform: rotate(-15deg);  
}
.strikethrough.straight::before, strike.straight::before{transform: rotate(0deg);left:-1%;width:102%;}


/* Header & Footer
===============================================================*/
#header, #footer-close {
	background: url(https://richmondfunctionalmedicine.com/wp-content/uploads/2023/08/Connected-Health-Gut-BannerBG.png);
	background-size: cover;
	min-height: 2rem;
}

/* Right Column
===============================================================*/
#rightCol { padding: 1rem 0; }
#rightCol h2 {
	color: var(--rifm-green);
}
#feature-list ul { padding: 0 0 0 2rem; }

#feature-list li + li {
	margin-top: 1em;
}
#feature-list li { list-style: none; }

#feature-list li:before { 
	content: "\2713"; 
	color: var(--rifm-green); 
	float: left;
	margin-left: -2rem;
	font-size: 1.75rem;
}

/* Product Information
===============================================================*/
#form-intro {
	font: 700 2rem/1em caecilia;
	color: var(--rifm-brown);
	text-align: center;
	margin: 0;
}

#callout-title {
	text-align: center;
	color: var(--rifm-green);
	margin: 0 0 0.25rem;
}
#callout-discount {
	text-align: center;
	color: var(--rifm-brown);
	margin: 0 0 0.5rem;
}

#callout-price {
	text-align: center;
	color: var(--rifm-dark-gray);
	margin: 0 0 0.5rem;
}

/* Footer
===============================================================*/
#guarantee h2 {
	color: var(--rifm-blue);
}

/* PRODUCT GRID
===============================================================*/

.priceBold {
	/* Price subtotal on bottom right of product grid */
	font-weight: bold;
}

.discountedPrice {
	text-decoration: line-through;
}

.totalPrice {
	/* Subtotal label on bottom left of product grid */
	font-weight: bold;
}

.soldOut {
	color: #e34825;
	font-size: 14px;
	text-transform: uppercase;
}

.outOfStockText {
	color: #e34825;
}

.qtyField:disabled {
	background-color: #e8e8e8;
}

.optionChosen {
	font-style: italic;
	color: #999;
	font-size: 14px;
}

.updateCart {
	/* Link to update quantity */
	font-size: 10px;
}

.promoField {
	/* Text fields for promo code */
	background: rgb(255 255 255 / 0.3);
	border: 1px solid rgb(var(--rifm-brown-rgb) / 0.5);
	border-radius: 0.25rem;
	-moz-border-radius: 0.25rem;
	-webkit-border-radius: 0.25rem;
	font-size: 1rem;
}

/* FORMS
===============================================================*/

.checkout, .checkoutShort, .checkoutShortTop, .checkoutShortBottom, .checkoutShortest, .checkoutBottom, .checkoutTop, .qtyField, .optionsDrop {
	/* Form fields used in checkout forms */
	border: 1px solid rgb(var(--rifm-brown-rgb) / 0.5);
	border-radius: 0.25rem;
	-moz-border-radius: 0.25rem;
	-webkit-border-radius: 0.25rem;
	font-size: 1rem;
	color: var(--rifm-dark-gray);
	background-color: rgb(255 255 255 / 0.3);
}
input:focus, select:focus {
	border: 1px solid rgb(var(--rifm-brown-rgb) / 1);
	background-color: rgb(255 255 255 / 0.5);
}

.checkoutDone, .checkoutTopDone, .checkoutBottomDone {
	/* Form fields used on confirmation page */
	font-size: 1rem;
	color: #222;
}

.viewCart, 
.shippingTable, 
.billingTable, 
.paymentMethodTable, 
.shipMethodTable, 
.payplanTable, 
.orderSummary {
	border: none;
	border-collapse: collapse;
}

.viewCart th, 
.payPlan th, 
.summaryCart th, 
.shippingInfo th, 
.billingInfo, 
.shippingTable th, 
.paymentInfo th, 
.signinTable th, 
.paymentMethodTable th, 
.shipMethodTable th, 
.payplanTable th, 
.orderSummary th {
  font: 700 1.5rem/1em caecilia;
  color: var(--rifm-green);
}
.billingTable th { display: none; }

.viewCart td, .viewCartShort td, .payPlan td, .summaryCart td, .shippingInfo td, .billingInfo td, .paymentInfo td, .orderSummary td {
	border-top: 1px solid #ddd;
}

.subtotal { font-weight: bold; }

.cartDiscount {
	/* Discount text */
	color: #f00;
}

.paymentDate, .paymentAmount, .financeDate, .financeAmount { /* Shown in payplan pay schedule box */
	font-size: 12px;
}

.payplanSummaryHeader { /* Header for payplan pay schedule box */
	font-size: 12px;
	font-weight: bold;
}


.paymentMethodTable td:has(.paymentIcon) {
	display: block;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 2px dotted var(--rifm-brown);
}



/* UPSELLS
===============================================================*/

#upsellContainer {
	overflow: hidden;
}

#upsellContainer img {
border: 1px solid #ddd;}

.upsell {
	background-color: #fcfbe9;
	border: 1px solid #f1edb4;
}

.upsellRegPrice {
	font-style: italic;
}



/* LINKS AND BUTTONS
===============================================================*/

a { 
	color: var(--rifm-blue); 
	transition: 0.3s all ease-in-out;
	text-decoration: none;
}
a:hover { color: var(--rifm-dark-gray); }

.codeButton, 
.continueButton,
.upsellButton {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 1rem;
	color: #fff;
	-webkit-border-radius: 0.25rem;
	-moz-border-radius: 0.25rem;
	border-radius: 0.25rem;
	border: none;
	background: var(--rifm-blue);
}

.codeButton { background: rgb(0 0 0 / 0.3); }

.disabledButton { opacity: 0.5; }

.codeButton:hover, .continueButton:hover, .upsellButton:hover {
	color: #fff;
	background: var(--rifm-dark-gray);
	text-decoration: none;
}

.codeButton:active, .continueButton:active, .upsellButton:active {
	position: relative;
	top: 1px;
}



/* MISC
===============================================================*/

.errorMessage {
	color: #dd4949;
}

@media only screen and (max-width : 960px) {
	.viewCart td, .viewCartShort td, .payPlan td, .summaryCart td, .shippingInfo td, .billingInfo td, .paymentInfo td, .orderSummary td {
		border-top: none;
	}

	.viewCart tr:not(:first-child) {
		border-top: 1px solid #ddd;
	}
}

/* PAYPAL SMARTBUTTONS
===============================================================*/

#payPalButtons {
	/* PayPal initial order form page when multiple payment option */
	background-color: #ffffff;
}