/* CSS for loader */
 #spinner {
 	display: inline-block;
 	border: 16px solid #f3f3f3;
 	border-radius: 50%;
 	border-top: 16px solid #3498db;
 	width: 80px;
 	height: 80px;
 	-webkit-animation: spin 2s linear infinite;
 	animation: spin 2s linear infinite;
 	position: fixed;
 	top: 50%;
 	left: 50%;
 	z-index: 1000;
 	margin-left: -40px;
 	margin-top: -40px;
 }

 #spinner:before {
 	filter: blur(10px);
 }

 @-webkit-keyframes spin {
 	0% {
 		-webkit-transform: rotate(0deg);
 	}

 	100% {
 		-webkit-transform: rotate(360deg);
 	}
 }

 @keyframes spin {
 	0% {
 		transform: rotate(0deg);
 	}

 	100% {
 		transform: rotate(360deg);
 	}
 }

 .loader-container {
 	display: none;
 	background-color: #80808087;
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	z-index: 9999;
 }

 .left-box {
 	width: 55%;
 }


 .forgot-text {
 	display: none;
 }


 .terms-text {
 	font-size: 13px;
 	margin-top: 5px;
 }

 .password-box {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	font-family: var(--font-noto-sans);
 }

 .btn.buttons:hover {
 	background-color: #009CFF !important;
 }

 .container {
 	max-width: 1000px;
 }

 .hidden-content {
 	max-height: 0;
 	overflow: hidden;
 	transition: max-height 0.3s ease;
 }

 .footer .get-started {
 	padding: 0;
 }

 /*membership styles */
 .membership-page {
 	background-color: #F7F7F5;
 	min-height: 100vh;
 	padding: 50px;
 }

 .membership-plan {
 	display: flex;
 	margin-bottom: 20px;
 	position: relative;
 }

 .membership-plan .left {
 	width: 30%;
 	padding: 20px;
 	text-align: center;
 	background-color: #1F1E30;
 	border-top-left-radius: 25px;
 	border-bottom-left-radius: 25px;
 }

 .membership-plan .left img {
 	width: 100%;
 }

 .membership-plan .right {
 	width: 100%;
 	padding: 11px 3px 16px 23px;
 	background-color: #fff;
 	border-top-right-radius: 25px;
 	border-bottom-right-radius: 25px;
 }

 .membership-plan .right .license {
 	font-size: 24px;
 	font-weight: bold;
 	color: #1F1E30;
 	display: flex;
 	justify-content: space-between;
 	margin-right: 10px;

 }

 .membership-plan .right .price {
 	font-size: 22px;
 	font-weight: bold;
 	color: #009CFF;
 }

 .membership-plan .right .price span {
 	font-size: 10px;
 	background: #D8F275;
 	padding: 2px 4px;
 	text-transform: uppercase;
 }

 .membership-plan.selected .right {
 	background-color: #0062A0;
 }

 .membership-plan.selected .right .license,
 .membership-plan.selected .right .price,
 .membership-plan.selected .right small {
 	color: #fff;
 }

 .membership-plan .selected {
 	width: 20px;
 	height: 20px;
 	background-image: url('/xperience/public/unselected-circle.png');
 	text-align: center;
 	display: grid;
 	place-items: center;
 	margin-top: -4px;
 }

 .membership-plan:not(.selected) .selected img {
 	display: none;
 }

 .membership-plan.selected .selected {
 	width: 20px;
 	height: 20px;
 	background-image: url('/xperience/public/selected-circle.png');
 	text-align: center;
 	display: grid;
 	place-items: center;
 	margin-top: -4px;
 }

 .ml-5 {
 	margin-left: 15px;
 }

 /* checkout styles */
 .membership-page .form-label {
 	margin-top: 1rem;
 	font-size: 14px;
 	font-weight: bold;
 	color: #1F1E30;
 }

 .choose-option {
 	margin-bottom: 20px;
 }

 .checkout-form input {
 	font-size: 15px;
 	padding: 12px;
 	border: 1px solid #ededed;
 }

 .checkout-form input::placeholder {
 	font-size: 16px;
 }

 .membership-page .buttons {
 	height: 50px;
 	width: 100%;
 	/* max-width: 180px; */
 }

 .checkout-description {
 	font-size: 18px;
 	display: flex;
 	align-items: center;
 }

 .plan-details {
 	margin-top: 20px;
 	background-color: #1F1E30;
 	color: #fff;
 	padding: 45px 30px 60px;
 	border-radius: 17px;
 	text-align: center;
 	width: 100%;
 }

 .plan-details .table>:not(caption)>*>* {
 	background-color: transparent;
 	color: #fff;
 	border: none;
 	font-size: 16px;
 }

 .plan-details .table td:nth-child(1) {
 	text-align: left;
 	font-size: 16px;
 }

 .plan-details .table.total td:nth-child(2) {
 	color: #63BBF2;
 	font-weight: bold;
 }

 .plan-details a {
 	color: #63BBF2;
 }

 a {
 	color: #1F1E30;
 }

 .plan-details .heading {
 	text-align: left;
 	font-size: 19px;
 	margin-bottom: 28px;
 }

 .checkout-footer {
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-start;
 	align-items: center;
 }

 .checkout-footer .left {
 	padding-right: 30px;
 }

 .checkout-footer button {
 	background-color: #009CFF;
 	border: none;
 	height: 50px !important;
 	font-size: 16px !important;
 	width: 151px !important;
 }

 .checkout-footer .right {
 	max-width: 480px;
 }

 .text-right {
 	text-align: right;
 }

 .membership-page input[name=card_number] {
 	background-image: url('/xperience/public/amex.png');
 	background-repeat: no-repeat;
 	background-position: center right 20px;
 	background-size: 40px;
 	padding-right: 80px;
 }

 #cardNumberInput,
 #card-expiry,
 #card-cvc {
 	text-align: center;
 	font-size: 15px;
 	padding: 12px;
 }

 #cardNumberInput {
 	background-image: url(/xperience/icons/amex.png);
 	background-size: 70px;
 	background-position: right 15px center;
 	background-repeat: no-repeat;
 }

 #card-cvc {
 	background-image: url(/xperience/icons/hide.png);
 	background-size: 30px;
 	background-position: right 15px center;
 	background-repeat: no-repeat;
 }

 /* @media */
 @media screen and (max-width: 992px) {
 	.checkout-description {
 		padding-left: 1.5rem;
 	}
 }

 @media screen and (max-width: 768px) {
 	.center-procees-btns {
 		display: flex;
 		justify-content: center;
 	}

 	.membership-plan .right {
 		width: 100%;
 		border-radius: 25px;
 	}

 	.membership-plan .left {
 		display: none;
 	}
 }

 @media screen and (max-width: 780px) {
 	.get-started {
 		font-size: 30px;
 	}
 }


 @media screen and (max-width:1044px) {
 	.terms-text {
 		text-align: center;
 	}

 	.text-buttons {
 		display: flex;
 		justify-content: center;
 	}
 }

 @media screen and (max-width: 1040px) {
 	.text-buttons {
 		display: flex;
 		justify-content: center;
 	}
 }


 /* @media */
 @media screen and (max-width: 780px) {
 	.user-type-selected {
 		height: 125vh;
 		padding-bottom: 5%;
 	}

 	.get-started {
 		font-size: 30px;
 	}
 }

 @media screen and (max-width: 300px) {
 	.user-type-selected {
 		width: 300px;
 		/* height: 100%; */
 		padding-bottom: 5%;
 	}
 }


 @media screen and (max-width:1044px) {
 	.terms-text {
 		text-align: center;
 	}
 }

 @media screen and (max-width:700px) {
 	.right-box {
 		display: none;
 	}

 	.left-box {
 		width: 100%;
 	}

 	.description {
 		text-align: center;
 	}
 }

 @media screen and (max-width:570px) {


 	.incorrect-details {
 		display: flex;
 		justify-content: center;
 		margin-top: 10px;
 	}
 }

 @media screen and (max-width:1040px) {
 	.forgot-text-1 {
 		display: none;
 	}

 	.forgot-text {
 		display: flex;
 		justify-content: center;
 	}
 }

 @media screen and (max-width: 1040px) {
 	.text-buttons {
 		display: flex;
 		justify-content: center;
 	}
 }

 @media (max-width: 1024px) {
 	.plan-details .heading {
 		font-size: 17px;
 	}

 	.plan-details .table td:nth-child(1),
 	.plan-details .table>:not(caption)>*>* {
 		font-size: 16px;
 	}

 	.plan-details {
 		padding: 50px 12px;
 	}

 	#cardNumberInput,
 	#card-expiry,
 	#card-cvc,
 	.checkout-form input {
 		font-size: 15px;
 		padding: 12px;
 	}

 	.checkout-footer button {
 		height: 50px !important;
 		font-size: 17px !important;
 		width: 190px !important;
 	}

 	.checkout-footer button img {
 		height: 22px !important;
 	}

 	.checkout-description {
 		font-size: 17px;
 	}
 }

 @media screen and (max-width:768px) {
 	.plan-details .heading {
 		font-size: 22px;
 	}

 	.plan-details .table td:nth-child(1),
 	.plan-details .table>:not(caption)>*>* {
 		font-size: 22px;
 	}

 	.plan-details {
 		padding: 50px 30px;
 	}
 }

 @media screen and (max-width:425px) {
 	.checkout-footer {
 		flex-direction: column;
 		align-items: flex-start;
 	}

 	.checkout-footer .right {
 		margin-top: 15px;
 	}

 	.center-btns {
 		display: flex;
 		justify-content: center;
 		margin-top: 20px;
 		margin-bottom: 100px;
 	}
 }