/**
 * Ulixes Subscriptions - Frontend Styles
 */
.subscription-details {
	font-size: 0.92em;
	opacity: 0.9;
}

tr.recurring-totals th {
	padding-top: 1.25em;
	font-weight: 700;
	border-top: 2px solid rgba(0, 0, 0, 0.12);
}

tr.recurring-total .first-payment-date {
	margin-top: 4px;
	color: #555;
}

.ulx-view-subscription-wrap .subscription_details td:first-child {
	font-weight: 600;
	width: 35%;
}

.ulx-view-subscription-wrap .subscription_details .button {
	margin-right: 6px;
	margin-bottom: 4px;
}

.ulx-switch-link {
	margin-left: 8px;
	font-size: 0.85em;
	padding: 4px 10px !important;
}

/* Auto-renew toggle switch */
.ulx-auto-renew-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.ulx-auto-renew-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.ulx-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .25s;
	border-radius: 24px;
}

.ulx-toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .25s;
	border-radius: 50%;
}

.ulx-auto-renew-toggle input:checked + .ulx-toggle-slider {
	background-color: #2ea2cc;
}

.ulx-auto-renew-toggle input:checked + .ulx-toggle-slider:before {
	transform: translateX(20px);
}