/* Autoship */
.autoship-no {
	margin-bottom: 8px;
}

.autoship-label {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 10px 16px 12px 52px;
	cursor: pointer;
}

.autoship-label input.active {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--autoship-border-color, var(--color-alt));
	border-radius: var(--border-radius);
	-webkit-appearance: none;
}

.autoship-label input.active:hover,
.autoship-label input.active:focus {
	--autoship-border-color: var(--color-custom-5);
}

.autoship-label input.active:checked {
	--autoship-border-color: var(--color-custom-1);
	background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path fill="green" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"/></svg>') no-repeat;
	background-position: 13px center;
	background-size: 26px;
	box-shadow: var(--shadow);
}

.autoship-yes .autoship-label input.active:checked {
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}


.autoship-schedule-options .autoship-frequency.active {
	margin: 0;
	padding: 0;
	background: var(--color-white);
	border: 0;
	border-radius: 0;
}

.autoship-schedule-options .autoship-frequency.active:hover,
.autoship-schedule-options .autoship-frequency.active:focus {
	background-color: rgba(0, 0, 0, 0.025);
}

.autoship-schedule-options .autoship-frequency label {
	display: none;
}

/* class applies to select element itself, not a wrapper element */
.autoship-frequency-select {
	display: block !important;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 4px 32px 4px 16px;
	background-color: transparent;
	background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M273.1 347.4c-4.8-4.8-12.5-4.7-17.1.2l-70 73.2V91.2l70 73.2c4.7 4.8 12.4 4.9 17.1.2l19.6-19.6c4.7-4.7 4.7-12.3 0-17L168.5 3.5c-4.7-4.7-12.3-4.7-17 0L27.2 128c-4.7 4.7-4.7 12.3 0 17l19.6 19.6c4.8 4.8 12.5 4.7 17.1-.2l70-73.2v329.6l-70-73.2c-4.7-4.8-12.4-4.9-17.1-.2L27.2 367c-4.7 4.7-4.7 12.3 0 17l124.3 124.5c4.7 4.7 12.3 4.7 17 0L292.8 384c4.7-4.7 4.7-12.3 0-17l-19.7-19.6z"/></svg>' );
	background-repeat: no-repeat, repeat;
	background-position: right 16px top 50%, 0 0;
	background-size: 0.65em auto;
	border: 1px solid var(--color-custom-1);
	border-radius: var(--border-radius);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}