@import url('SubscriptionB.css');

#subscription {
	background: url("/vue-src/apps/Subscription/assets/Background.png") lightgray 50% / cover no-repeat;
	background-color: var(--orbe-canvas-bg);
	overflow-y: auto;
	min-height: 100vh;
}

.Subscription-canvas {
	display: flex;
	padding: 0px var(--orbe-spacing-16) 0px var(--orbe-spacing-16);
	align-items: flex-start;
	gap: var(--orbe-spacing-32);
	align-self: stretch;
}

.Subscription-content {
	display: flex;
	padding: var(--orbe-spacing-6) var(--orbe-spacing-8);
	flex-direction: column;
	gap: var(--orbe-spacing-3);
	border-radius: var(--orbe-rounded);
	background: var(--orbe-surface-bg);
}

.Subscription-content-1 {
	display: flex;
	flex-direction: column;
	gap: var(--orbe-spacing-3);
	border-radius: var(--orbe-rounded);
	background: transparent;
}

.icons {
	height: 24px;
	width: 24px;
    border-radius: 20px;
	background-color: black;
}

#googleRenderedButton {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
	border-radius: var(--orbe-rounded);
}
#googleRenderedButton iframe,
#googleRenderedButton > div,
#googleRenderedButton div[id^="gsi_"] {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

.socialImage {
	width: var(--orbe-spacing-12);
    height: var(--orbe-spacing-12);
	border-radius: 50%;
}

.socialLogo {
	width: var(--orbe-spacing-6);
    height: var(--orbe-spacing-6);
}

.text-danger, .text-success {
    font-size: 12px;
}
.Subscription-content-icon {
	width: var(--orbe-spacing-8);
	height: var(--orbe-spacing-8);
	background: var(--orbe-feedback-bg-neutral-bold);
	border-radius: var(--orbe-rounded-full);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--orbe-spacing-3);
}

.Subscription-icon .Icon {
	color: var(--orbe-feedback-fg-on-neutral-bold);
}

.Checklist {
	gap: var(--orbe-spacing-3) !important;
}

.Checklist .Checklist-item.Checklist-item--completed .Checklist-text {
	text-decoration: none !important;
	color: var(--orbe-feedback-fg-subtle-on-positive) !important;
}

.Checklist-text {
	color: var(--orbe-feedback-fg-subtle-on-negative);
}

.Subscription-topContent {
	top: 45px;
}

.Subscription-Title {
	color: var(--orbe-surface-fg);
	font-family: var(--orbe-font-family-heading);
	font-size: 40px;
	font-style: normal;
	font-weight: bold;
	line-height: 48px;
	text-align: left;
}

.Subscription-Title--green {
	color: var(--orbe-surface-fg-on--checked);
}

.Subscription-Description {
	color: var(--orbe-surface-fg--disabled);
	font-family: var(--orbe-font-family-heading);
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	line-height: 28px;
	text-align: left;
}

.SubscriptionFeatures {
	gap: var(--orbe-spacing-7);
}

.SubscriptionFeatureItem-Title {
	overflow: hidden;
	color: var(--orbe-surface-fg);
	text-overflow: ellipsis;
	font-family: var(--orbe-font-family-heading);
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	line-height: 24px;
}

.SubscriptionFeatureItem-Description {
	overflow: hidden;
	color: var(--orbe-surface-fg-subtle);
	text-overflow: ellipsis;
	font-family: var(--orbe-font-family-heading);
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	line-height: 18px;
}

.SubscriptionFeatureNote {
	overflow: hidden;
	color: var(--orbe-surface-fg-subtle);
	text-overflow: ellipsis;
	font-family: var(--orbe-font-family-heading);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}

.PasswordPopover-Title {
	color: var(--orbe-surface-fg-bold);
	font-family: var(--orbe-font-family-heading);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
}

.FormDivider {
	display: flex;
}

.FormDivider-Description {
	color: var(--orbe-surface-fg-subtle);
	font-family: var(--orbe-font-family-heading);
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	line-height: 12px;
	text-align: center;
}

.Subscription-social {
	display: flex;
}

@media (max-width: 1035px) {
	.Mobile {
		margin-top: var(--orbe-spacing-16);
	}
}

@media (max-width: 978px) {
	.Subscription-Title {
		text-align: center;
		font-size: 28px;
		line-height: 28px;
	}

	.Subscription-Description {
		text-align: center;
		font-size: 14px;
		line-height: 20px;
		padding-top: var(--orbe-spacing-1);
		padding-left: var(--orbe-spacing-5);
		padding-right: var(--orbe-spacing-5);
	}

	.SubscriptionFeatures {
		gap: var(--orbe-spacing-5);
	}

	.SubscriptionFeatureItem-Title {
		font-size: 14px;
		line-height: 20px;
	}

	#subscription {
		overflow: visible;
		padding: var(--orbe-spacing-4);
	}
	.Subscription-canvas {
		flex-direction: column;
		padding: var(--orbe-spacing-5);
		gap: var(--orbe-spacing-10);
	}
	.Subscription-content {
		flex-direction: column;
	}
	.Subscription-mobile {
		flex-direction: column;
	}

	.LogoBling {
		transform: translateX(-50%);
	}

	.Subscription-topContent {
		top: 6%;
	}

	.Mobile-title {
		justify-content: center;
		display: flex;
	}
	.Mobile-text {
		text-align: center;
		font: var(--orbe-font-h6);
	}

	.Link, .FormLabel {
		display: inline !important;
	}
}

@media (max-width: 585px) {
	.Line {
		width: 100px;
	}
	.Subscription-social {
		flex-direction: column;
	}
	.socialInfo {
		width: 96px;
	}
}

@media (min-width: 1100px) {
	.Subscription-canvas {
		padding: var(--orbe-spacing-5) var(--orbe-spacing-16);
	}
}

@media (min-width: 2560px) {
	.Subscription-canvas {
		align-items: center;
	}

	.Subscription-content {
		max-height: fit-content;
	}
}