﻿/*
-------------------
PRODUCT
	Recurring Delivery Variant Display
		Buttons
		Remodal popups
		RD iPads (landscape)
-------------------
*/

input[type=number]::-webkit.variant_container-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Recurring Delivery Variant Display */

.variant_container .ui-corner-all,
.variant_container .ui-corner-bottom,
.variant_container .ui-corner-right,
.ui-corner-br {
	margin: 0;
	padding: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border: none;
	outline: none;
}

.variant_container .ui-widget {
	margin: 10px 0 30px;
	background: #fcf7ee;
	color: #034125;
	font-family: inherit;
	font-size: 16px;
	font-size: 1rem;
}

.variant_container .ui-widget-header {
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-weight: 600;
}

.variant_container .ui-state-default,
.variant_container.ui-widget-content .ui-state-default,
.variant_container.ui-widget-header .ui-state-default,
.variant_container.ui-button, html .ui-button.ui-state-disabled:hover,
html .variant_container.ui-button.ui-state-disabled:active {
	border: none;
	border-bottom-width: 0;
	background: none;
	color: inherit;
	font-weight: normal;
}

.variant_container ul#top-tabs li {
	padding: 4px 0;
	font-family: Fontfabric Mont Bold, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 18px;
    text-transform: uppercase;
}

.variant_container .ui-state-active,
.variant_container .ui-widget-content .ui-state-active,
.variant_container .ui-widget-header .ui-state-active,
.variant_container a.ui-button:active, .ui-button:active,
.variant_container .ui-button.ui-state-active:hover {
	border: none;
	background: none;
	font-weight: normal;
}

.variant_container .ui-tabs .ui-tabs-nav li {
	float: none;
	position: relative;
	top: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.variant_container .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.variant_container .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.variant_container .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: default;
}

.variant_container .ui-tabs a,
.variant_container .ui-tabs .tag_line {
    padding: 0;
	outline: 0;
	color: #034125;
	font-family: Fontfabric Mont Bold, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 16px;
}

.variant_container .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: none;
	display: block;
    padding: 0;
}

.variant_container ul#top-tabs.ui-widget-header li a::before {
	position: relative;
	width: 10px;
	top: 2px;
	padding: 0 8px 0 0;
	content: url("/img/icons/inactive.png");
}

.variant_container ul#top-tabs.ui-widget-header li.ui-state-active a::before {
	position: relative;
	width: 10px;
	top: 2px;
	padding: 0 8px 0 0;
	content: url("/img/icons/active.png");
}

.variant_container ul.pricing_boxes {
	margin: 20px 0 30px;
}

.variant_container ul.pricing_boxes li.ui-state-active {
	border-radius: 0;
	border-bottom: 2px solid #034125;
    background-color: #e2e9e1;
	color: #034125;
}

.variant_container .ui-tabs .ui-tabs-nav li.variant_pricing {
	padding: 20px 0;
}

.variant_container ul.pricing_boxes li {
	border-bottom: 1px solid #d6ded4;
}

.variant_container ul.pricing_boxes li:hover {
	border-radius: 0;
    background-color: #e2e9e1;
}

.variant_display_row {
	height: 50px;
	font-size: 14px;
	font-size: 0.875rem;
	clear: left;
}

.variant_container .line-one {
	display: inline-block;
	padding-left: 15px;
	font-size: 15px;
}

.variant_container .line-one span {
	font-family: Fontfabric Mont Book, Arial, Helvetica Neue, Helvetica, sans-serif;
}

.variant_container .line-two {
	float: right;
	padding-right: 15px;
	font-size: 15px;
	text-align: right;
}

.variant_container .product_savings,
.variant_container .line-three,
.variant_container .line-three-single {
	padding: 0 0 0 15px;
	color: #cf1f39;
	font-family: Fontfabric Mont Book, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 12px;
}

.line-three-single {
    padding-left: 20px;
	font-size: 15px;
}

.variant_container .line-three-one-time,
.variant_container .line-three-one-time-single {
	color: #cf1f39;
	font-family: Fontfabric Mont Book, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 12px;
}

.variant_container .line-three-recurring,
.variant_container .line-three-recurring-single {
	color: #cf1f39;
	font-family: Fontfabric Mont Book, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: line-through;
}

.variant_container span.sale_price {
    display: inline-block;
	margin-left: 10px;
    color: #bb2f39;
	text-transform: uppercase;
    text-align: left;
}

.full_price_sale {
    padding-left: 15px;
	text-decoration: line-through;
}

.variant_display {
	text-align: center;
}

.variant_size,
.variant_price,
.variant_button {
	display: inline-block;
	vertical-align: middle;
}

.variant_qty {
	display: inline-block;
	margin: 0 -4px 0 0;
	vertical-align: top;
}

.variant_qty input {
	height: 42px;
    width: 42px;
	padding: 0;
    border: 1px solid #97aaa1;
    color: #034125;
	font-family: Fontfabric Mont Book, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 16px;
    text-align: center;
}

/* Buttons */

.variant_display div.button,
.variant_display input.button {
	display: inline-block;
	cursor: pointer;
	text-align: center;
}

.variant_display .button input.btn,
.variant_display a.btn {
	display: inline-block;
    padding: 9px 20px;
    border: none;
	background-color: #20915a;
    color: #fff;
	font-family: Fontfabric Mont Bold, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
	line-height: unset;
    text-align: center;
}

.variant_container .oos {
	display: inline-block;
    padding: 10px 20px;
	border: none;
	font-family: Fontfabric Mont Bold, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
	cursor: not-allowed;
	text-align: center;
}

.variant_container .rd_message {
	padding-left: 22px;
	color: #373737;
	font-family: Fontfabric Mont Book, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 12px;
}

.variant_container .rd_message a {
	color: #373737;
	font-family: Fontfabric Mont Bold, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: underline;
}

.variant_container .rdAddOnce {
    margin: -16px 0 10px;
	padding-left: 13px;
	text-align: left;
}

#addOnce {
	padding-top: 4px;
	color: #034125;
	font-family: Fontfabric Mont Bold, Arial, Helvetica Neue, Helvetica, sans-serif;
	text-transform: uppercase;
}

.ui-tabs div {
    -webkit-transition: all ease 0.05s;
    -moz-transition: all ease 0.05s;
    -o-transition: all ease 0.05s;
    transition: all ease 0.05s;
}

.rdAddOnce input[type="checkbox"] {
    position: relative;
    height: 22px;
    width: 1em;
    margin: 0 3px 0 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: 300ms ease-out;
    border: 0 solid;
    text-shadow: #474747 0 0 1px;
    background: transparent !important;
    color: #fff;
    font-family: "Font Awesome 5 Pro";
    font-size: 21px;
    font-size: 1.3125rem;
    font-weight: 900;
    text-align: center;
}

.rdAddOnce input[type="checkbox"]::after {
    display: inline-block;
    width: 1em;
    content: '\f0c8';
	 -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #034125;
    text-align: center;
}

.rdAddOnce input[type="checkbox"]:hover::after {
    color: #ddd;
    content: '\f14a';
}

.rdAddOnce input[type="checkbox"]:active {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.rdAddOnce input[type="checkbox"]:checked::after {
	content: '\f14a';
	color: #2a9841;
}

.rdAddOnce input[type="checkbox"]:checked:hover::after {
	color: #2a9841;
}

/* Remodal popups */

#headerNewRD {
	margin: 0 0 10px;
	padding-bottom: 10px;
	color: #1b67af;
	font-family: inherit;
    font-size: 28px;
    font-size: 1.75rem;
	font-weight: 600;
	text-align: left;
}

#headerNewRD a img {
    margin-top: 8px;
}

#recurringNewInput {
	width: 575px;
}

#editProperties {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

#editProperties:after {
	display: table;
	width: 100%;
	content: "";
	clear: both;
}

#editProperties div {
	display: block;
	/* IE fix. */
	*display: inline;
	vertical-align: top;
	zoom: 1;
}

#editProperties .create_name,
#editProperties .create_frequency,
#editProperties .create_shipdate {
	float: left;
	display: block;
	padding: 0 0 5px;
	color: inherit;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 600;
}

#editProperties .create_name {
	width: 35%;
	display: table-cell;
}

#editProperties .create_name .name,
#editProperties .create_frequency .name,
#editProperties .create_shipdate .name {
	display: block;
	width: 100%;
	text-align: left;
}

#editProperties .create_name .field {
    margin-top: 5px;
}

#editProperties .create_name input[type=text] {
	height: 34px;
	width: 190px;
	margin-top: 0;
	padding-left: 6px;
	border: 1px solid #999;
	color: #999;
	font-size: 12px;
	font-size: 0.75rem;
}

#editProperties .create_frequency {
	display: table-cell;
	width: 25%;
	margin: 0;
}

#editProperties .create_name .field,
#editProperties .create_frequency .field,
#editProperties .create_shipdate .field {
	float: left;
	display: block;
	width: 100%;
	font-weight: 600;
	text-align: left;
}

#editProperties #frequencySelection {
	height: 34px;
	width: 170px;
	margin-top: 5px;
	padding: 4px 5px 6px 2px;
	border: 1px solid #1b67af;
	font-size: 12px;
	font-size: 0.75rem;
}

#createNewRD-popup .start_shopping_button,
#createNewRD-popup .create_delivery_button {
	position: absolute;
	display: block;
	top: 125px;
	right: 70px;
	padding-top: 0;
	vertical-align: top;
}

#createNewRD-popup .create_delivery_button {
    top: 102px;
    right: 33px;
}

.edit_link {
	width: 100%;
	margin: 20px 0 0;
	padding: 10px 0;
	border-top: 1px solid #ccc;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	clear: both;
}

#createNewRD-popup .edit_link a {
	padding: 0;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

#initial_buttons .button_row {
	margin-top: 20px;
}

#initial_buttons .button_row .button {
	display: inline;
}

#warning_panel .isNotConfirmed {
	display: block;
	width: 100%;
	margin-top: 20px;
}

#warning_panel .link_row {
	display: block;
	width: 100%;
	margin-top: 20px;
}

#warning_panel .link_row a {
	color: #da2b36;
	text-decoration: underline;
}

#warning_panel .link_row .left {
	display: block;
}

#warning_panel .link_row .right {
	display: block;
	width: 100%;
	margin-top: 20px;
}