﻿/***** placeholder *****/
/* do not group these rules */

@import url("variables.css");

::-webkit-input-placeholder {
	font-family: var(--theme-font-family) !important;
	color: var(--theme-color-gray) !important;
	opacity: 1 !important;
	font-size: 10px !important;
	text-rendering: initial !important;
}

:-moz-placeholder {
	/* FF 4-18 */
	font-family: var(--theme-font-family) !important;
	color: var(--theme-color-gray) !important;
	opacity: 1 !important;
	font-size: 10px !important;
	text-rendering: initial !important;
}

::-moz-placeholder {
	/* FF 19+ */
	font-family: var(--theme-font-family) !important;
	color: var(--theme-color-gray) !important;
	opacity: 1 !important;
	font-size: 10px !important;
	text-rendering: initial !important;
}

:-ms-input-placeholder {
	/* IE 10+ */
	font-family: var(--theme-font-family) !important;
	color: var(--theme-color-gray) !important;
	opacity: 1 !important;
	font-size: 10px !important;
	text-rendering: initial !important;
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	font-family: var(--theme-font-family) !important;
	color: var(--theme-color-gray) !important;
	opacity: 1 !important;
	font-size: 10px !important;
	text-rendering: initial !important;
}

*::placeholder {
	/* modern browser */
	font-family: var(--theme-font-family) !important;
	color: var(--theme-color-gray) !important;
	opacity: 1 !important;
	font-size: 10px !important;
	text-rendering: geometricPrecision !important;
}

/***** end placeholder *****/

.server-error {
	font-size: 11px;
	padding: 0.7rem 1rem;
	margin: 20px 0 0 0;
}

.payment-component-wrapper {
	font-family: var(--theme-font-family);
	min-height: 100vh;
	height: 100%;
	padding: 15px;
	background: #eee url("../images/bg.png") repeat;
	display: grid;
}

	.payment-component-wrapper .container-fluid {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.payment-component-wrapper .container-fluid .card {
			border: none;
			border-radius: 30px;
			background-color: rgba(255, 255, 255, 0.95);
			flex: 1 1 auto;
			height: 100%;
			box-shadow: none;
			margin-bottom: 0;
		}

			.payment-component-wrapper .container-fluid .card .card-body {
				background-color: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
			}

				.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper {
					min-width: 220px;
					width: 100%;
					/*max-width: 360px;*/
					max-width: 442px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					row-gap: 30px;
				}

					.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .logo {
						width: 150px;
					}

					.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form {
						width: 100%;
						border: 4px solid var(--theme-color-blue);
						border-radius: 28px;
						background-color: #FFFFFF;
						/*                        display: flex;
                        align-items: center;
                        justify-content: center;*/
						padding: 8px;
					}

						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header {
							padding-bottom: 10px;
						}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header .form-title {
								font-size: 22px;
								font-weight: 500;
								color: var(--theme-color-blue);
								margin-bottom: 0;
							}

						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .sign-in-label {
							font-size: 20px;
							font-weight: 500;
							color: var(--theme-color-blue);
							margin-bottom: 0;
						}


						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header .form-subtitle {
							font-size: 14px;
							font-weight: 300;
							color: var(--theme-color-gray);
							line-height: 20px;
							margin-top: 10px;
							margin-bottom: 0;
							text-wrap: wrap;
						}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header .form-subtitle.subtitle-bold {
								font-weight: 500;
								color: #8B9DAA;
							}


						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group {
							margin: 10px 0;
						}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .resend-otp {
								font-size: 12px;
								line-height: 16px;
								color: #23487A;
								padding-top: 12px;
							}

								.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .resend-otp a {
									font-weight: bold;
									text-decoration: underline;
									cursor: pointer;
								}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group label {
								font-size: 12px;
								/*                                font-weight: 500;*/
								color: var(--theme-color-blue);
								margin-bottom: 0;
								padding-left: 6px;
							}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .forgot-pass-btn {
								border: none;
								background: none;
								padding: 0;
								font-weight: 500;
								font-size: 14px;
								color: var(--theme-color-blue);
							}

								.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .forgot-pass-btn:hover {
									text-decoration: underline
								}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group label sup {
								color: red;
								font-size: 10px;
								vertical-align: sub;
							}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group label span {
								font-size: 11px;
								font-weight: 500;
								color: var(--theme-color-blue);
							}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .form-control {
								border-radius: 8px;
								border: 1px solid var(--theme-color-blue);
								font-size: 12px;
								color: var(--theme-color-gray);
								height: 40px;
								outline: none;
								box-shadow: none;
								padding: .375rem .35rem;
							}

								.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .form-control.password-control {
									display: flex;
									align-items: center;
									column-gap: 5px;
								}

									.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .form-control.password-control input {
										font-size: 12px;
										color: var(--theme-color-gray);
										height: 100%;
										border: none;
										flex: 1 1 auto;
										outline: none;
										box-shadow: none;
									}

									.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .form-control.password-control button {
										background-color: transparent;
										border: none;
										padding: 0;
										outline: none;
									}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-group .error-message {
								color: red;
								font-size: 9px;
								padding-left: 6px;
								line-height: 1.6;
							}

						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-link {
							text-align: center;
							margin: 20px 0;
						}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-link a {
								font-size: 12px;
								font-weight: 500;
								color: var(--theme-color-blue);
								text-decoration: none;
								letter-spacing: inherit;
							}

								.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-link a:hover {
									text-decoration: underline;
									cursor: pointer;
								}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-link.active a {
								text-decoration: underline;
								text-transform: uppercase;
								font-size: 14px;
								font-weight: 500;
							}

						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-buttons {
							display: flex;
							align-items: center;
							justify-content: space-between;
							gap: 20px;
							margin-top: 30px;
						}

						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .btn {
							transform: translateZ(0);
							backface-visibility: hidden;
							-webkit-font-smoothing: subpixel-antialiased;
							font-size: 12px;
							font-weight: 500;
							border: 1px solid;
							scale: 1;
							transition: all 0.15s ease;
							flex: 1 1 auto;
						}

							.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .btn:hover {
								scale: 0.96;
								display: initial;
							}

						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .btn-block {
							display: block;
						}

						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .btn-blue {
							border-color: var(--theme-color-blue);
							background-color: var(--theme-color-blue);
							color: #fff;
							border-radius: 0.5rem;
							width: 150px;
							height: 40px;
						}



						.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper .payment-form .btn-clear {
							border-color: var(--theme-color-blue);
							background-color: #fff;
							color: var(--theme-color-blue);
							border-radius: 0.5rem;
							width: 150px;
							height: 40px;
						}


#payment-information-page {
	margin: 0;
}

	#payment-information-page .paymentInfoForm {
		display: flex;
	}

		#payment-information-page .paymentInfoForm .payment-component-wrapper-left {
			width: 100%;
			max-height: 100vh;
			font-family: var(--theme-font-family);
			min-height: 100vh;
			height: 100%;
			padding: 0 48px;
			background: #eee url("../images/bg.png") repeat;
			display: grid;
		}

			#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

				#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card {
					border: none;
					border-radius: 30px;
					background-color: rgba(255, 255, 255, 0.95);
					flex: 1;
					height: 90%;
					box-shadow: none;
					margin-bottom: 0;
				}

					#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body {
						background-color: transparent;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						height: 100%;
					}


						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper {
							min-width: 220px;
							max-width: 80%;
							width: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							row-gap: 30px;
						}

						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-status-popup {
							max-width: 400px !important;
						}

						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form p {
							font-size: 18px;
							font-family: var(--theme-font-family);
							color: var( --theme-light-blue);
							font-weight: 400;
						}

						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form .text-bold {
							font-weight: 600;
						}

						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-status-popup .payment-form {
							border: 4px solid var(--theme-color-blue) !important;
						}

						/*
                                    #payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .logo {
                                        width: 150px;
                                    }*/
						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form {
							width: 100%;
							border-radius: 28px;
							/*                        display: flex;
                                                                                                                            align-items: center;
                                                                                                                            justify-content: center;*/
							padding: 8px;
							text-align: center;
						}

						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .border {
							border: 4px solid var(--theme-color-blue);
							border-radius: 28px;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 15px 10px 49px 10px;
							background-color: #ffffff;
						}

						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .stripe-img {
							margin-top: min(9rem, calc((100vh - 530px) * 0.35));
						}


						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header .form-title {
							font-size: 22px;
							font-weight: 500;
							color: var( --theme-light-blue);
							margin-bottom: 0;
						}

						#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header h4 {
							font-size: 18px;
							font-weight: 500;
							color: var( --theme-light-blue);
							margin-bottom: 0;
						}

							#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header h4 a {
								text-decoration: none;
								color: #23487A;
							}




		#payment-information-page .paymentInfoForm .payment-component-wrapper-right {
			width: 100%;
			font-family: var(--theme-font-family);
			display: flex;
			justify-content: center;
			align-items: center;
			max-height: 100vh;
			padding: 70px 170px;
			overflow: auto;
		}

			#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container {
				flex: 1 1 auto;
				height: 100%;
				display: flex;
				flex-direction: column;
			}

				#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .order-total {
					margin-top: -5px;
					margin-bottom: 25px;
				}

					#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .order-total label {
						font-size: 20px;
						font-weight: 500;
						color: #163A65;
					}

.stripe-element-error {
	display: flex;
	line-height: 10px;
	flex-wrap: wrap;
	gap: 5px;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header {
	padding-bottom: 10px;
}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header .form-title {
		font-size: 18px;
		font-weight: 500;
		color: var( --theme-light-blue);
		margin-bottom: 0;
	}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-header .form-title, .form-subtitle {
	font-family: var(--theme-font-family);
	color: var(--theme-light-blue);
	font-weight: 300;
	margin-top: 5px;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-header .form-title {
	font-size: 20px;
	font-weight: 600;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-header .form-subtitle {
	font-size: 18px
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group {
	margin: 30px 0;
}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group label {
		font-family: var(--theme-font-family);
		color: var(--theme-light-blue);
		font-weight: 500;
	}

		#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group label sup {
			color: red;
			font-size: 12px;
			vertical-align: sub;
			padding-left: 2px;
		}
	/*                #payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .form-control{
                    margin-top:15px;
                }*/
	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .card-info-field {
		display: flex;
	}

		#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .card-info-field .input-field input {
			width: 310px;
			/*  width:100%*/
		}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field input::placeholder {
		color: #AAB7C4 !important;
		font-size: 18px !important;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field input {
		/*        width: 620px;*/
		height: 60px;
		border-radius: 8px;
		border: 1px solid rgb(227 230 239);
		color: #23487A;
		font-size: 18px;
		padding-left: 15px;
		/*        color: var(--theme-color-black);*/
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field select {
		border-radius: 8px 8px 0 0;
		color: #23487A;
		font-size: 18px;
		background: url('../images/arrow-back.png') no-repeat;
		background-position: 97%;
		background-size: 15px;
		/*        color: var(--theme-color-black);*/
		height: 60px;
	}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .action-buttons {
	display: flex;
	justify-content: center;
	justify-content: center;
}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .action-buttons button img {
		transform: scale(1);
		-webkit-transform: scale(1);
		width: 397px;
		transition: filter 0.3s ease, transform .3s ease-in-out;
		-webkit-transition: filter 0.3s ease, transform .3s ease-in-out;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .action-buttons button.blurred {
		pointer-events: none;
		touch-action: none;
		cursor: default;
	}

		#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .action-buttons button.blurred img {
			filter: opacity(0.5);
			pointer-events: none;
			touch-action: none;
		}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .action-buttons button:hover img {
		-webkit-transform: scale(1.03);
		transform: scale(1.03);
	}

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

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right {
		padding: 70px;
	}
}

@media screen and (max-width:1486px) {
	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .card-info-field .input-field input {
		width: 250px;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field input, select {
		/*        width: 500px;*/
		height: 60px;
		border-radius: 8px;
		border: 1px solid rgb(227 230 239);
		padding-left: 15px;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field select {
		/*        width: 500px;*/
		color: #23487A;
		font-size: 18px;
		border-bottom: none;
		border-radius: 8px 8px 0 0;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper {
		max-width: 100%;
	}
}

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

	#payment-information-page .paymentInfoForm {
		display: block;
	}

		#payment-information-page .paymentInfoForm .payment-component-wrapper-right {
			max-height: unset;
		}

		#payment-information-page .paymentInfoForm .payment-component-wrapper-right {
			padding: 85px;
		}

			#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .action-buttons button img {
				width: 70%;
			}
}

@media screen and (max-width:556px) {
	#payment-information-page .paymentInfoForm .payment-component-wrapper-left {
		padding: 0 10px;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .card-info-field .input-field input {
		width: 175px;
	}



	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field input, select {
		height: 50px;
		border-radius: 8px;
		border: 1px solid rgb(227 230 239);
		padding-left: 15px;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field select {
		/*        color: #8B9DAA;*/
		font-size: 18px;
		border-bottom: none;
		border-radius: 8px 8px 0 0;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .form-buttons button img {
		width: 190px
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form p {
		font-size: 14px;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .theme-form .form-header {
		font-size: 14px;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right {
		padding: 20px;
	}

		#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .order-total label {
			font-size: 16px;
		}
}


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

	.payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper {
		max-width: 328px;
	}
	/*    #payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .input-field input::placeholder {
        font-size: 14px !important;
    }
     .ElementsApp input {

        font-size: 14px !important;
      
    }*/
}

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

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .card-info-field .input-field input {
		width: 140px;
	}

	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container .theme-form .form-header .form-subtitle {
		font-size: 13px;
	}

	/*    .payment-component-wrapper .container-fluid .card .card-body .payment-form-wrapper {
        max-width: 256px;
    }*/
}

.cursor-pointer {
	cursor: pointer;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}



#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header h2 {
	font-size: 22px;
	color: #23487A;
	font-weight: 100;
}


#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .payment-form .form-header .form-subtitle {
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: #8B9DAA;
}

.form-control:focus {
	border-color: inherit;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.stripe-input {
	padding: 19px;
	background: #fff !important;
	height: 60px;
	border-radius: 8px;
	border: 1px solid rgb(227 230 239);
	padding-left: 15px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

	.stripe-input:focus {
		outline: 1px solid #007bff;
	}

.border-danger {
	border: 1px solid #dc3545 !important;
	border-radius: 4px;
}

.error-message {
	font-size: 12px;
	color: red;
	margin-top: 5px;
	white-space: nowrap;
}

.is-invalid {
	border: 1px solid red;
}

.text-danger {
	color: red;
	font-size: 12px;
}


.is-invalid {
	border: 2px solid red;
}

.text-danger {
	color: red;
}



.card-info-field .input-field {
	width: 50%
}



#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .StripeElement--invalid1 {
	border: 0px solid #f88379;
	border-bottom: 1px solid #f88379;
	box-shadow: 0 0 0 1px #f88379;
	background-color: #fbd9e4;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .StripeElement--invalid2 {
	border: 0px solid #f88379;
	box-shadow: 0 0 0 1px #f88379;
	background-color: #fbd9e4;
	border-right: 1px solid #f88379;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .StripeElement--invalid3 {
	border: 0px solid #f88379;
	box-shadow: 0 0 0 1px #f88379;
	background-color: #fbd9e4;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .StripeElement--invalid4 {
	border: 1px solid #f88379;
	border-top: none;
	box-shadow: 0 -1px 1px #f88379;
	background-color: #fbd9e4;
}

.error {
	border: 1px solid #F88379 !important;
}

.input-error {
	font-size: 12px;
	color: red;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .stripe-input:nth-child(2) {
	border-radius: 8px 8px 0 0;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .stripe-input:nth-child(1) {
	border-radius: 0 0 0 8px;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .cvc .stripe-input {
	border-radius: 0 0 8px 0;
}

#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .postal-code .stripe-input {
	border-radius: 0 0 8px 8px;
}

@media screen and (max-width:556px) {
	.stripe-input {
		height: 50px;
	}
}

@media screen and (max-width:369px) {
	#payment-information-page .paymentInfoForm .payment-component-wrapper-right .form-container form .form-group .d-block .error-message {
		font-size: 10px;
	}
}

#resendOtpLink[disabled] {
	pointer-events: none;
	cursor: default;
	color: #707070;
}

@media screen and (max-width: 425px) {
	#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper .logo img {
		width: 180px;
	}
}

@media screen and (max-height: 700px) {
	#payment-information-page .paymentInfoForm .payment-component-wrapper-left .container-fluid .card .card-body .payment-form-wrapper {
		gap: 10px;
	}
}
