/**
* user-registration.scss
* Governs the general look and feel of User Registration sections of stores using themes that do not
* integrate with User Registration specifically.
*/

/**
* Imports
*/
@import "variables/variables";
@import "mixins/mixins";
@import "fonts";
@import "animation";

// Components
@import "components/button", "components/modal";

// loader
.lds-dual-ring {
	width: 100%;
	@include flexbox();
	justify-content: center;
	&::after {
		content: " ";
		display: block;
		width: 35px;
		height: 35px;
		margin: 8px;
		border-radius: 50%;
		border: 6px solid $gray_base;
		border-color: $gray_base transparent $gray_base transparent;
		animation: lds-dual-ring 1.2s linear infinite;
	}
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.ur-gutenberg-form-selector-wrap {
	.components-radio-control__option {
		padding-left: 14px;
		margin-bottom: 20px !important;
	}

	.components-base-control__field {
		display: flex;
		justify-content: center;
	}
}

.wp-core-ui {
	.ur-submit-button {
		color: white;
	}

	select {
		max-width: 100% !important;
	}
}
/**
* Utility classes
*/
.clear {
	clear: both;
}

.user-registration-page .select2-dropdown,
.user-registration-swal2-container {
	z-index: 9999;
}

.user-registration-page .select2-dropdown {
	padding: 0px !important;
}

.ur-timepicker-range {
	display: flex;
}

.timepicker-start {
	margin-right: 1rem;
}
/**
* Main User Registration styles
*/
.user-registration-error,
.user-registration-coupon-error,
.user-registration-info {
	display: block;
	margin: 0 0 10px;
	padding: 10px 15px;
	background-color: lighten($primary_color, 47%);
	color: $color_gray_one;
	border-top: 3px solid $primary_color;
	list-style: none outside;
	@include clearfix();
	width: auto;
	word-wrap: break-word;
	line-height: 1.25;
	text-transform: none;
	font-size: 14px;

	&::before {
		content: "\f348";
		display: inline-block;
		vertical-align: middle;
		font-family: "Dashicons";
		font-size: calc(100% + 10px);
		margin-right: 0.875rem;
	}

	ul {
		margin: 0 !important;
		padding: 0 !important;
		background-color: transparent !important;
	}

	.button {
		float: right;
	}

	li {
		list-style: none outside !important; // Required for default theme compatibility
		padding-left: 0 !important; // Required for default theme compatibility
		margin-left: 0 !important; // Required for default theme compatibility
		flex: 1;
	}

	.message {
		margin: 0;
		padding: 0;
	}
}

// .user-registration-message {
// 	border-top-color: #8fae1b;
// 	background: rgba(#8fae1b, 0.1);
// 	color: darken(#8fae1b, 15%);
// }

.user-registration-info {
	color: #1e85be;
	border-top-color: #1e85be;
}

.user-registration-error{
	border-top-color: $red;
	background: rgba($red, 0.1);
	color: darken($red, 15%);

	&::before {
		content: "\f534";
	}
}
.user-registration-coupon-error {
	border-top-color: $red;
	background: rgba($red, 0.1);
	color: darken($red, 15%);
	margin-top: 10px;
}

.user-registration-membership-notice__container {
	position: fixed;
	top: 20px;
	right: 0px;
	z-index: 1000;
	transition: right 0.5s ease;
	background-color: #f7fdf8;
	border-left: 4px solid #49c85f;
	padding-right: 24px;
	color: #222;
}

.user-registration-membership-notice__red {
	padding: 10px;
}

.user-registration-membership-notice__blue {
	padding: 20px;
}

.user-registration-membership__close_notice {
	color: red;
	cursor: pointer;
	font-weight: bold;
	padding-left: 16px;
}

input.ur-input-border-green:not([type="range"]),
textarea.ur-input-border-green {
	border-color: #1ea71b !important;
}
input.ur-input-border-red,
textarea.ur-input-border-red {
	border-color: $red !important;
}

.ur-frontend-form {
	//margin-bottom: 30px;
	border: 1px solid $border_color;
	padding: 20px;
	box-sizing: border-box;

	&.login {
		border: none;
		padding: 60px;
		border-radius: 8px;
		background: #fff;
		// box-shadow: 0px 4px 16px 0px rgba(17, 17, 26, 0.05), 0px 8px 32px 0px rgba(17, 17, 26, 0.05);

		.ur-lost-password-content-container {
			display: flex;
			flex-direction: column;
			align-items: center;

			.ur-lost-password-title {
				color: var(--Grey-grey-600, #1f1f1f);
				font-size: 32px;
				font-style: normal;
				font-weight: 700;
				line-height: 48px;
				letter-spacing: 0.15px;
				margin: auto;
				margin-top: 20px;
			}
			.ur-lost-password-message {
				font-size: 14px;
				letter-spacing: 0.15px;
				margin-top: 5px;
				margin-bottom: 0;
			}
		}
		.ur-input-with-icon {
			position: relative;
			display: flex;
			align-items: center;

			.input-icon {
				position: absolute;
				left: 10px;
				top: 50%;
			}
			input {
				padding-left: 40px;
			}
		}
		.required {
			margin-left: 5px;
		}
		#user_login {
			border-radius: 4px;
			border: 1px solid #e9e9e9;
		}
		.ur-reset-password-btn {
			border: 1px solid #475bb2;
			background: #475bb2;
			width: 100%;
			color: #fff;
			letter-spacing: 0.15px;
			border: 0;

			&:hover {
				background: #38488e;
				border-color: #38488e;
			}
		}

		input[name="rememberme"]#rememberme {
			vertical-align: middle;
		}
	}

	&.login-registration {
		margin: 0;
		border: none;
		padding: 0;
	}

	.register {
		#node_recaptcha_register {
			padding: 0 10px;
		}
	}

	#ur-recaptcha-node {
		margin-top: 10px;
	}

	* {
		box-sizing: border-box;
	}

	.description {
		display: block;
		font-size: 14px;
		line-height: 1.5;
	}

	.ur-form-row {
		display: flex;

		&:last-child {
			margin-bottom: 0;
		}

		.ur-form-grid {
			flex: 1;
			padding: 0 10px;

			&:nth-child(1n + 2) {
				border-left: 0 none;
			}

			.user-registration-form-row {
				label[for="user_otp"] {
					margin-top: 0;
					margin-bottom: 12px;
					color: #222;
					font-size: 15px;
					font-weight: 500;
					line-height: 19px;
				}

				input.input-text {
					margin-bottom: 0;
					border-radius: 4px;
					border: 1px solid #e9e9e9;
					min-height: 38px;
					font-size: 14px;
					line-height: 20px;
					padding: 0 14px;
					color: #383838;
				}
			}

			#user-registration-tfa-footer {
				gap: 2px;

				.user-registration-Button {
					padding: 10px 20px;
					font-size: 14px;
					line-height: 24px;
					box-shadow: none;

					&:hover {
						background: #38488e;
						border-color: #38488e;
					}
				}
			}

			.ur-field-item {
				margin-bottom: 20px;

				.ur-frontend-field {
					margin-bottom: 0;
				}

				&.field-multiple_choice,
				&.field-subscription_plan,
				&.field-checkbox,
				&.field-radio {
					ul {
						margin: 0;
						padding: 0;
						list-style: none;

						li {
							margin-left: 0;
							line-height: 1.3;
							vertical-align: middle;
							margin-bottom: 10px;

							input,
							label {
								display: inline-block;
								vertical-align: inherit;
							}

							input {
								&[type="checkbox"],
								&[type="radio"] {
									margin-top: 2px;
								}
							}

							label {
								display: inline;
							}
						}
					}
				}

				&:last-child {
					margin-bottom: 0;
				}

				.form-row {
					display: block;
				}
			}
			input {
				border-style: solid;
			}
			input[type="text"],
			input[type="email"],
			input[type="url"],
			input[type="password"],
			input[type="date"],
			input[type="number"],
			input[type="timepicker"],
			input[type="phone"],
			textarea,
			select,
			.__PrivateStripeElement {
				width: 100%;
				padding: 4px 8px;
				border-radius: 0;
				min-height: 36px;
				margin-bottom: 10px;
				line-height: 1.5;

				&::placeholder {
					color: #ddd;
				}
			}

			.ur-range-input {
				margin-bottom: 0px !important;
			}

			input[type="password"] {
				display: inline;
				margin-bottom: 0px;
			}

			.StripeElement {
				padding: 4px 8px;
				border: 1px solid $border_color;

				&.StripeElement--invalid {
					border: 1px solid #ff4f55;
				}
				.__PrivateStripeElement {
					iframe {
						// height: 20px !important;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}

			input[type="checkbox"],
			input[type="radio"] {
				font-size: 12px;
				display: inline-block;
				vertical-align: middle;
				margin-right: 5px;
				margin-left: 20px;

				&:first-child {
					margin-left: 0;
				}
			}

			input[type="radio"]:focus,
			input[type="text"]:focus,
			input[type="email"]:focus,
			input[type="url"]:focus,
			input[type="password"]:focus,
			textarea:focus,
			select:focus,
			button:focus {
				outline: 0;
			}

			input[readonly],
			select[readonly],
			textarea[readonly] {
				cursor: auto;
			}

			select {
				-webkit-appearance: none;
				background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E")
				no-repeat right 5px top 55%;
			}

			legend,
			label {
				display: block;
				font-size: 14px;
				margin-bottom: 10px;
				margin-top: 10px;

				.required {
					text-decoration: none;
					border: none;
					color: $red;
				}

				&.ur-label {
					font-weight: bold;
				}
			}

			textarea {
				padding: 10px;
				height: 100px;
				resize: none;
				padding: 5px 20px;
			}

			.hide_show_password {
				input[type="password"] {
					padding-right: 50px;
				}

				.password-input-group {
					position: relative;

					.password_preview {
						color: $color_gray_two;
						position: absolute;
						top: 50%;
						right: 15px;
						transform: translateY(-50%);

						&.dashicons {
							&.dashicons-hidden {
								opacity: 0.6;

								&:hover {
									opacity: 1;
								}
							}
						}
					}
				}
			}
		}

		.select2-container {
			.select2-selection--multiple {
				border: 1px solid $color_gray_five;

				.select2-selection__rendered {
					display: block;

					li {
						&:last-child {
							margin-left: 0;
						}
					}
				}
				height: inherit;
				.select2-selection__choice {
					margin: 5px;
				}

				.select2-search--inline {
					input[type="text"] {
						margin: 5px;
						height: inherit;
					}
				}
			}
		}
	}

	button,
	input[type="submit"],
	button[type="submit"] {
		padding: 10px 20px;
		line-height: 24px;
		text-align: center;
		word-break: break-word;
		white-space: normal;
		border: none;
		cursor: pointer;
		transition: 0.35s all ease-out;
		border-radius: 4px;
	}

	input[type="submit"] {
		float: right;
	}

	.ur-button-container {
		display: flex;
		margin-top: 10px;
		padding: 0 10px;

		.ur-submit-button {
			margin-left: auto;
		}
	}

	.user-registration-submit-Button {
		float: right;
	}

	.ur-submit-button {
		margin-right: 10px;
		margin-bottom: 0;
	}

	label {
		abbr.required {
			text-decoration: none;
			border: none;
			color: $red;
		}
	}

	&.ur-frontend-form--bordered {
		form {
			.ur-form-row {
				.ur-form-grid {
					input[type="text"],
					input[type="email"],
					input[type="url"],
					input[type="password"],
					input[type="date"],
					input[type="number"],
					textarea,
					select {
						border: none;
						border-bottom: 1px solid $border_color_input;
						outline: none;
						transition: all 0.35s;
						padding: 10px 15px;
						background: $input_background_color;
						color: $label_color;
						height: 45px;
					}

					legend,
					label {
						margin-left: 5px;
						color: $label_color;
					}

					textarea {
						height: 100px;
					}

					.hide_show_password {
						input[type="password"] {
							padding-right: 50px;
						}
					}

					.user-registration-Button {
						// background: $primary_color;
						border: 0;
						border-radius: 4px;
					}
				}
			}

			// input[type="submit"],
			// button[type="submit"],
			// button.user-registration-multi-part-nav-prev,
			// button.user-registration-multi-part-nav-next {
			// 	// background: $input_background_color;
			// 	// border: 1px solid $border_color;
			// 	// color: $label_color;
			// 	border-radius: 0;

			// 	// &:hover {
			// 	// 	background: $primary_color;
			// 	// 	color: $white;
			// 	// 	border-color: $primary_color;
			// 	// }
			// }
		}
	}

	&.ur-frontend-form--flat {
		background: $color_sortable_background;
		border: none transparent;

		form {
			.ur-form-row {
				.ur-form-grid {
					.ur-field-item,
					.form-row {
						margin-bottom: 0;
					}

					input[type="text"],
					input[type="email"],
					input[type="url"],
					input[type="password"],
					input[type="date"],
					input[type="number"],
					textarea,
					select {
						border: none;
						outline: none;
						padding: 10px 15px;
						background: $white;
						color: $label_color;
						margin-bottom: 10px;
						height: 45px;

						&:focus {
							box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
						}
					}

					select {
						margin-bottom: 10px;
					}

					legend,
					label {
						color: $label_color;
					}

					textarea {
						height: 100px;
					}

					.hide_show_password {
						input[type="password"] {
							padding-right: 50px;
						}
					}
				}
			}
		}
	}

	&.ur-frontend-form--rounded {
		form {
			.ur-form-row {
				.ur-form-grid {
					input[type="text"],
					input[type="email"],
					input[type="url"],
					input[type="password"],
					input[type="date"],
					input[type="number"],
					textarea,
					select {
						border: 1px solid $rounded-color;
						border-radius: 25px !important;
						outline: none;
						transition: all 0.35s;
						padding: 10px 15px;
						background: $white;
						color: $label_color;
						height: 45px;
					}

					button[type="button"] {
						border-radius: 25px !important;
					}

					.user-registration-passwordless-login a {
						border-radius: 25px !important;
					}

					legend,
					label {
						margin-left: 5px;
						color: $label_color;
					}

					textarea {
						height: 100px;
					}

					.hide_show_password {
						input[type="password"] {
							padding-right: 50px;
						}
					}
				}
			}

			input[type="submit"],
			button[type="submit"],
			button.user-registration-multi-part-nav-prev,
			button.user-registration-multi-part-nav-next {
				border: 0 none;
				color: $white;
				border-radius: 25px !important;
				float: none;
				display: block;
				padding: 15px 25px;
			}
		}

		&.ur-frontend-form--rounded-edge {
			form {
				.ur-form-row {
					.ur-form-grid {
						input[type="text"],
						input[type="email"],
						input[type="url"],
						input[type="password"],
						input[type="date"],
						input[type="number"],
						textarea,
						select {
							border-radius: 2px;
						}

						.hide_show_password {
							input[type="password"] {
								padding-right: 50px;
							}
						}

						button[type="button"] {
							border-radius: 2px;
						}
					}
				}

				input[type="submit"],
				button[type="submit"],
				button.user-registration-multi-part-nav-prev,
				button.user-registration-multi-part-nav-next {
					border-radius: 2px;
				}
			}
		}
	}

	#ur-submit-message-node {
		margin: 20px 0 0 0;
		//Revamp design for message and error
		&.user-registration-error {
			position: unset;
			margin-bottom: 10px;
			width: 100%;
		}

		&.ur-error {
			background: rgba(206, 0, 0, 0.1);
		}

		&.ur-message.message {
			background: rgba(143, 174, 27, 0.2);
		}
	}
}

#user-registration {
	background-color: $white;
	margin: 30px 0;

	&.user-registration,
	* {
		box-sizing: border-box;
	}

	p {
		color: #333333;
	}

	.user-registration-tips {
		font-size: 12px;
		color: $color_gray_three;
		margin-bottom: 0;
	}

	.user-registration-MyAccount-navigation {
		overflow: visible;
		margin: 0;

		ul {
			margin: 0;
			padding: 0;
			display: -webkit-flex;
			display: flex;
			flex-wrap: wrap;

			.user-registration-MyAccount-navigation-link {
				list-style: none;
				padding: 0;
				margin: 0;
				display: inline-block;
				position: relative;
				box-shadow: 0 0 0 rgba(0, 0, 0, 0);

				a {
					padding: 10px 15px;
					display: block;
					font-weight: 400;
					font-size: 14px;
					font-family: sans-serif;
					text-decoration: none;
					border-width: 0 0 0 4px;
					border-style: solid;
					border-color: transparent;
					box-shadow: 0 0 0 rgba(0, 0, 0, 0);
				}

				&.is-active {
					a {
						font-weight: 600;
					}
				}
			}
		}
	}

	.user-registration-MyAccount-content {
		padding: 30px;

		h2 {
			margin-bottom: 30px;
		}

		.user-registration-profile-fields__field-wrapper {
			margin: 0 -10px;
		}

		.ur-form-grid {
			border: 0 none;
			background: transparent;
		}

		.ur-frontend-form {
			border: none;
		}

		h2,
		.edit-password legend {
			font-size: 28px;
			font-weight: 400;
		}

		.user-registration-profile-header {
			margin-bottom: 25px;

			.user-registration-img-container {
				width: 100px;
			}

			h3 {
				font-size: 22px;
				font-weight: 400;
				margin-bottom: 5px;
			}

			header {
				p,
				.button-group {
					margin-bottom: 10px;
				}

				.profile-pic-remove {
					margin-right: 10px;
				}
			}

			.user-registration-nick-name {
				color: $color_gray_two;
			}
		}

		.user-registration-EditProfileForm {
			.user-registration-profile-header {
				.user-registration-img-container {
					width: auto;
				}
			}
		}
	}

	&.user-registration-MyAccount {
		&-content {
			&__body {
				.ur-form-grid {
					.ur-privacy-button {
						input[type="submit"] {
							width: max-content;
						}
					}
				}
			}
		}
	}
}

/**
* Password strength meter
*/
.user-registration-password-strength {
	text-align: center;
	font-weight: 600;
	padding: 3px 0.5em;
	font-size: 1em;
	margin-top: 10px;

	&.strong {
		background-color: #c1e1b9;
		border-color: #83c373;
	}

	&.short {
		background-color: #f1adad;
		border-color: #e35b5b;
	}

	&.bad {
		background-color: #fbc5a9;
		border-color: #f78b53;
	}

	&.good {
		background-color: #ffe399;
		border-color: #ffc733;
	}
}

.user-registration-password-hint {
	margin: 0.5em 0 0;
	display: block;
}

.ur-front-spinner {
	background: url("../images/wpspin_light-2x.gif") no-repeat;
	background-size: 16px 16px;
	display: block;
	opacity: 0.7;
	filter: alpha(opacity=70);
	width: 16px;
	height: 16px;
	margin-left: -40px;
	float: left;
}

.user-registration-form-login {
	.ur-front-spinner {
		margin-left: 0;
		float: right;
		margin-top: 15px;
		margin-right: 20px;
	}
}

.edit-post-visual-editor {
	.ur-gutenberg-form-selector-wrap,
	.user-registration-gutenberg-form-selector-wrap {
		h2 {
			width: 100%;
			margin-bottom: 0.5em;
		}

		.components-base-control {
			width: 100%;
			text-align: center;
		}

		.components-placeholder__fieldset {
			text-align: center;

			img {
				margin: 0 auto;
			}
		}
	}
}

.ur-frontend-form.ur-gutenberg-editor form button[type="submit"] {
	cursor: not-allowed;
}

.ur-frontend-form.ur-gutenberg-editor form .ur-form-row .ur-form-grid input {
	cursor: not-allowed;
}

.ur-hidden {
	display: none;
}

.button-check-all {
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	line-height: 2.15384615;
	min-height: 30px;
	margin: 0;
	padding: 0 10px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	box-sizing: border-box;
}

.ur-form-row {
	margin-bottom: 24px;

	.flatpickr-input {
		padding-left: 32px !important;
	}
	.without_icon {
		padding-left: 10px !important;
	}
	span.input-wrapper {
		position: relative;

		.ur-icon {
			position: absolute;
			top: 50%;
			padding: 8px;
			left: 0;
			transform: translateY(-50%);
		}
	}
}
/* For shortcode embed */

@keyframes user-registration-heartbeat {
	0% {
		box-shadow: 0 0 0 0 rgba(71, 91, 178, 0.6);
	}
	100% {
		box-shadow: 0 0 0 10px rgba(223, 119, 57, 0);
	}
}
span.ur-shortcode-form-embed-dot {
	display: inline-block;
	width: 12px;
	height: 12px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background-color: #475bb2;
	animation: user-registration-heartbeat 1.5s infinite !important;
	margin: 3px 10px;
}
.wp-editor-tools span.ur-shortcode-form-embed-dot {
	margin-top: 9px;
}

.ur-shortcode-form-embed-theme-tooltip {
	display: none;
}

.ur-shortcode-form-embed-theme.tooltipster-sidetip {
	z-index: 100100 !important;
}

.ur-shortcode-form-embed-theme.tooltipster-sidetip.tooltipster-top {
	.tooltipster-box {
		margin-bottom: 18px;
	}
	.tooltipster-arrow {
		bottom: 8px;
	}
	.tooltipster-arrow-background {
		top: 0;
	}
}

.ur-shortcode-form-embed-theme.tooltipster-sidetip.tooltipster-right {
	.tooltipster-box {
		margin-left: 18px;
	}
	.tooltipster-arrow {
		left: 8px;
	}
}

.ur-shortcode-form-embed-theme.tooltipster-sidetip {
	.tooltipster-box {
		max-width: 260px;
		background: white;
		border: none;
		border-radius: 4px;
		box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
		-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
		-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
	}
	.tooltipster-box .tooltipster-content {
		color: #444444;
		padding: 16px 20px 18px;
		text-align: center;
		div *:first-child {
			margin-top: 0 !important;
		}
		h3 {
			font-size: 16px;
			letter-spacing: 0px;
			line-height: 18px;
			margin: 0;
			color: #23282c;
		}
		p {
			font-size: 14px;
			letter-spacing: 0px;
			line-height: 18px;
			margin: 10px 0 0;
			color: #444444;
		}
		a {
			color: #1d7bac;
		}
		.ur-shortcod-form-embed-theme-done-btn {
			border-radius: 3px;
			cursor: pointer;
			text-decoration: none;
			text-align: center;
			vertical-align: middle;
			white-space: nowrap;
			box-shadow: none;
			font-size: 14px;
			font-weight: 600;
			letter-spacing: 0px;
			padding: 7px 18px;
			border: none;
			background-color: #475bb2;
			color: #ffffff;
			display: block;
			margin: 15px auto 0;

			&:disabled {
				cursor: default;
				opacity: 0.5;
				&:hover {
					background-color: #475bb2;
				}
			}
		}
	}
	.tooltipster-arrow-border {
		border: none;
	}
	.tooltipster-top {
		.tooltipster-arrow-background {
			border-top-color: white;
		}
	}
	.tooltipster-right {
		.tooltipster-arrow-background {
			border-right-color: white;
		}
	}
	.tooltipster-bottom {
		.tooltipster-arrow-background {
			border-bottom-color: white;
		}
	}
}

.block-editor-page {
	.edit-post-layout {
		.components-notice-list > div {
			padding-left: 50px;
		}
	}
	.ur-shortcode-form-embed-dot {
		position: absolute;
		top: 75px;
		left: 20px;
		z-index: 9999;
	}
	.ur-shortcode-form-embed-theme {
		width: 260px !important;
		z-index: 99980 !important;
		margin-top: 5px;
		.tooltipster-box {
			margin-top: 10px;
		}
		.ur-shortcode-form-embed-theme-tooltips-red-arrow {
			position: absolute;
			display: block;
			width: 15px;
			height: 42px;
			top: -65px;
			left: 145px;
			background-image: url(../images/icons/red-arrow.svg);
			background-size: 15px 42px;
			background-repeat: no-repeat;
		}
	}
}

.block-editor-page.is-fullscreen-mode {
	.edit-post-layout {
		.components-notice-list > div {
			padding-left: 125px;
		}
	}
	.ur-shortcode-form-embed-dot {
		left: 75px;
	}
	.ur-shortcode-form-embed-theme {
		.ur-shortcode-form-embed-theme-tooltips-red-arrow {
			left: 105px;
		}
	}
}

.wp-block-user-registration-content-restriction-enhanced {
	.block-editor-inner-blocks {
		margin-bottom: 25px;
	}

	.user-registration-content-restriction-block-note {
		display: flex;
		.dashicons-lock {
			font-size: 25px;
			margin: 1px 5px 0px 0px;
		}
		.user-registration-content-restriction-block-note-text {
			margin: 0px;
		}
	}
}

#ur-frontend-form {
	.empty-list-table-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50px;
	}

}
//Individual oxygen widgets styles.
.oxygen-add-section-accordion-contents[ng-if*="user-registration"] {
	.oxygen-add-section-element {
		min-height: 100px !important;
		line-height: 15px;
	}
}

//Revamp design for message and error
.ur-message-container {
	border-radius: 8px;
	box-shadow:
		0px 4px 16px 0px rgba(17, 17, 26, 0.05),
		0px 8px 32px 0px rgba(17, 17, 26, 0.05);
	padding: 60px;

	.user-registration-message {
		position: relative;
		padding: 10px;
		z-index: 9999;
		display: flex;
		align-items: center;
		border-radius: 4px;
		border-left: 4px solid #49c85f;
		background: #f7fdf8;
		border-top: none;
		margin: 20px 0px;
		padding-left: 40px;
	}

	svg {
		position: absolute;
		z-index: 999999;
		margin-top: 33px;
		margin-left: 10px;
	}
}

.user-registration-error {
	padding: 10px !important;
	display: flex;
	align-items: center;
	border-radius: 4px;
	border-left: 4px solid $red;
	background: 4px solid #fde8e8;
	border-top: none;

	// &::before {
	// 	// content: '';
	// 	content: none;
	// 	display: "";
	// }

	svg {
		margin-right: 10px;
	}
}

.user-registration-login-extra-section {
	display: flex;
	justify-content: space-between;

	.user-registration-LostPassword {
		color: #475bb2;
	}
}
// Spinner moved inside login and register button.
.user-registration-Button,
.ur-submit-button {
	width: 100%;
	background: #475bb2;
	border-radius: 4px;
	border: 1px solid #475bb2;
	color: #ffffff;

	&:hover {
		background: #38488e;
		border-color: #38488e;
		color: $white;
	}

	.ur-spinner {
		width: 16px;
		height: 16px;
		margin-left: 6px;
		margin-bottom: 2px;
		display: inline-block;
		vertical-align: middle;
		@include loader();
		margin-top: 5px;
		float: right;
	}
}
// Login - Registration  shortcode design.
.ur-login-registration-nav {
	width: 100%;

	ul {
		display: flex;
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100%;

		li {
			flex: 1;
			text-align: center;
			padding: 15px 0;
			cursor: pointer;
			transition: all 0.3s ease;
			color: #c5c5c5;
			font-weight: 500;
			border-radius: 8px 0 0 0;
			border-top: 1px solid #f1f1f1;
			background: #f9f9f9;
			box-shadow:
				0px 4px 16px 0px rgba(17, 17, 26, 0.05),
				0px 8px 32px 0px rgba(17, 17, 26, 0.05);
			clip-path: inset(0px -1px -1px -1px);
			&:first-child {
				border-radius: 8px 0px 0 0;
				border-top: 1px solid #f1f1f1;
				margin-left: 10px;
			}

			&:last-child {
				border-radius: 0 8px 0px 0;
				margin-right: 10px;
			}

			&.active {
				background: #fff;
				color: #1f1f1f;
				border-top: 1px solid #f1f1f1;
			}
		}
	}
}

.login-registration {
	.hidden {
		display: none;
	}
}
// Revamp error design for registration and login form
.ur-field-item {
	input {
		border-radius: 4px !important;
	}
	.user-registration-error {
		width: 100%;
		position: unset;
		letter-spacing: 0.18px;
		font-weight: 400;
		font-size: 12px;
		line-height: 19px;
		padding: 0px !important; //Overriding global error padding.
		border: none !important; //Overriding global error border.
		background: transparent !important; //Overriding global error background.
		margin-left: unset !important; //Overriding global error margin.

		// &::before {
		// 	// content: "\f534" ;
		// 	color : #FF0000 ;

		// }
	}
}

.user-registration.ur-frontend-form {
	background: #fff;
	border-radius: 8px;
	box-shadow:
		0px 4px 16px 0px rgba(17, 17, 26, 0.05),
		0px 8px 32px 0px rgba(17, 17, 26, 0.05);
	padding: 60px;

	input {
		border-radius: 4px;
	}
	#user_email {
		&::before {
			content: "\f348";
			display: inline-block;
			vertical-align: middle;
			font-family: "Dashicon	s";
			font-size: calc(100% + 10px);
			margin-right: 0.875rem;
		}
	}
}
.ur-icon-user {
	margin-right: 0.875rem;
	&::before {
		content: "\f465";
		display: inline-block;
		vertical-align: middle;
		font-family: "Dashicons";
	}
}
.ur-registration-icon {
	position: relative;
	top: 50%;
	padding: 8px;
	left: 0;
	transform: translateY(-50%);
}

.user-registration-login-form-container {
	.ur-registered-from {
		.ur-login-form-wrapper {
			#user-registration {
				width: 100%;
			}
		}
	}
}

// --------------login form design css fixes------------------------------------

.user-registration-membership_page_user-registration-login-forms {
	#wpcontent {
		.ur-admin-page-topnav {
			margin-bottom: 0;
		}
		.user-registration-login-form-container {
			.user-registration__wrap {
				&.wrap {
					margin: 0 auto;
				}
				.ur-form-subcontainer {
					.menu-edit {
						border: none;
					}
					.ur-registered-inputs {
						.ui-widget-content {
							.ur-tab-contents {
								padding: 24px;
								background-color: #fafafa;
								.ur-login-view-doc {
									border-radius: 3px;
									cursor: pointer;
									text-decoration: none;
									text-align: center;
									vertical-align: middle;
									white-space: nowrap;
									box-shadow: none;
									font-size: 14px;
									font-weight: 600;
									letter-spacing: 0px;
									padding: 10px 24px;
									border: none;
									background-color: #475bb2;
									color: #ffffff;
									display: block;
									margin: 24px auto 0;
									a {
										color: #fff;
									}
									&:disabled {
										cursor: default;
										opacity: 0.5;
										&:hover {
											background-color: #475bb2;
										}
									}
								}
							}
							.ur-heading {
								margin-top: 0;
								padding-bottom: 16px;
								border-bottom: 1px solid #e9e9e9;
								text-transform: uppercase;
								font-size: 16px;
								font-weight: 500;
							}
							.ur-login-content {
								p {
									font-size: 16px;
									margin: 20px auto;
								}
							}
						}

						&.ur-login-form-settings {
							.ur-tab-contents {
								padding: 16px 16px 0 16px;
								.ur-tab-content {
									padding: 0;
									form {
										.ur-login-form-setting-block {
											&:first-child {
												h2 {
													&.ur-toggle-heading {
														margin-top: 0;
													}
												}
											}
											.ur-toggle-content {
												margin-top: 24px;
												display: flex;
												flex-direction: column;
												gap: 28px;
												.user-registration-login-form-global-settings {
													display: flex;
													flex-direction: column;
													gap: 12px;
													label {
														font-weight: 600;
														gap: 6px;
														margin-bottom: 0;
														.user-registration-help-tip {
															font-size: 20px;
														}
													}
													select {
														height: 38px;
													}
												}
											}
										}
									}
								}
							}
							#ur-login-form-setting {
								.ur-login-form-setting-block {
									display: flex;
									flex-direction: column;
									gap: 24px;
								}
							}
						}
					}
					#post-body {
						.ur-builder-wrapper {
							.ur-selected-inputs {
								background: transparent;
								padding: 24px;
							}
						}
					}
				}
			}
		}
	}
}

// Login Form Design ReVamped CSS
body {
	&.user-registration-page {
		.ur-frontend-form {
			.ur-form-row {
				.ur-form-grid {
					.field-membership {
						#ur-membership-registration {
							max-width: 100%;
						}
					}
				}
			}
		}

		.user-registration-MyAccount {
			&-content {
				&__body {
					.ur-frontend-form {
						margin-bottom: 0;

						.ur-form-row {
							.ur-form-grid {
								input[type="submit"] {
									width: max-content;
								}
							}
						}
					}
				}
			}
		}
	}

	&.user-registration-page,
	&.ur-multi-device-form-preview,
	&.user-registration-membership_page_user-registration-login-forms {
		.user-registration-error {
			position: unset;
			width: 100%;
			margin: 0 0 24px;
			align-items: center;

			svg {
				width: 28px;
				height: 28px;
			}

			li {
				// color: #222222;
				color: inherit;
				// font-size: 14px;
				font-size: inherit;
				// font-weight: 400;
				font-weight: inherit;
				// line-height: 21px;
				line-height: inherit;
				letter-spacing: 0.15px;

				strong {
					font-weight: 500;
				}
			}
		}

		#user-registration {
			&:not(.user-registration-MyAccount) {

				.user-registration-message {
					align-items: flex-start;
					margin: 0 0 24px;

					li {
						flex: 1;
						list-style: none;
					}
				}
			}

			.ur-message-container {
				box-shadow: none;
				padding: 0;
				border-radius: 0;

				svg {
					display: none;
				}

				.user-registration-message {
					margin-top: 0;
				}
			}
		}

		.user-registration-message {
			background: #f7fdf8;
			padding: 12px 12px 12px 16px;
			border-radius: 4px;
			border-left: 4px solid #49c85f;
			display: flex;
			align-items: center;
			gap: 12px;
			color: #222222;
			font-size: 14px;
			font-weight: 400;
			line-height: 21px;
			letter-spacing: 0.15px;

			&::before {
				content: "";
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 25 25'%3E%3Cpath stroke='%2349C85F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.5 22.5c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z'/%3E%3Cpath stroke='%2349C85F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9.5 12.5 2 2 4-4'/%3E%3C/svg%3E%0A");
				background-position: center;
				background-size: 100%;
				background-repeat: no-repeat;
				width: 24px;
				height: 24px;
				display: block;
			}

			> ul {
				padding-left: 0;
				margin: 0;
				list-style: none;
			}
		}
	}

	.user-registration-error {
		> svg {
			display: none;
		}
	}

	&.user-registration-page,
	&.user-registration-membership_page_user-registration-login-forms {
		.user-registration {
			&.ur-frontend-form {
				max-width: 100%;

				form {
					.ur-button-container {
						width: max-content;
					}
				}

				&--bordered {
					&:not(.login) {
						box-shadow: none;
						border: 1px solid #e9e9e9;

						form {
							.ur-form-row {
								.ur-form-grid {
									input,
									textarea,
									select {
										&:not([type="radio"]),
										&:not([type="checkbox"]),
										&:not([type="file"]) {
											background: transparent;
											border-color: #e9e9e9;
											box-shadow: none;
										}
									}
								}
							}
						}
					}
				}

				&--flat {
					&:not(.login) {
						box-shadow: none;
						border: 1px solid #e9e9e9;
						border-radius: 0;

						form {
							.ur-form-row {
								.ur-form-grid {
									.ur-field-item {
										margin-bottom: 20px;

										&:last-child {
											margin-bottom: 0;
										}
									}

									input,
									textarea,
									select {
										&:not([type="radio"]),
										&:not([type="checkbox"]),
										&:not([type="file"]) {
											background: $white;
											border-color: #e9e9e9;
											box-shadow: none;
											border-radius: 0 !important;
										}
									}
								}
							}

							.ur-button-container {
								.ur-submit-button {
									border-radius: 0;
								}
							}
						}
					}
				}

				&--rounded {
					&:not(.login) {
						form {
							.ur-form-row {
								.ur-form-grid {
									input,
									textarea,
									select {
										&:not([type="radio"]),
										&:not([type="checkbox"]),
										&:not([type="file"]) {
											box-shadow: none;
										}
									}
								}
							}
						}
					}
				}

				&--rounded-edge {
					&:not(.login) {
						border-radius: 30px;

						form {
							.ur-form-row {
								.ur-form-grid {
									input,
									textarea,
									select {
										&:not([type="radio"]),
										&:not([type="checkbox"]),
										&:not([type="file"]) {
											box-shadow: none;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		#user-registration,
		.user-registration {
			&.user-registration-MyAccount {
				max-width: 1280px;
			}

			&:not(.user-registration-MyAccount) {
				max-width: 520px;
				// margin: 0px auto;
				border-radius: 4px;
				background: #ffffff;
				// box-shadow: 0px 4px 16px 0px rgba(17, 17, 26, 0.05), 0px 8px 32px 0px rgba(17, 17, 26, 0.05);
				border: 0;

				@media screen and (max-width: 575px) {
					padding: 40px 30px;
				}

				&:has(.ur-grid-2),
				&:has(.ur-grid-3) {
					max-width: 940px;
				}

				&:has(.ur-frontend-form--bordered) {
					box-shadow: none;
					border: 1px solid #e9e9e9;
				}

				&:has(.ur-frontend-form--flat) {
					box-shadow: none;
					border: 1px solid #e9e9e9;
					border-radius: 0;

					.user-registration-form-login {
						.ur-form-row {
							.ur-form-grid {
								input,
								textarea,
								select {
									&:not([type="radio"]),
									&:not([type="checkbox"]),
									&:not([type="file"]) {
										background: $white;
										border-color: #e9e9e9;
										box-shadow: none;
										border-radius: 0 !important;
									}
								}

								.user-registration-Button {
									border-radius: 0;
								}
							}
						}
					}
				}

				&:has(.ur-frontend-form--rounded-edge) {
					border-radius: 30px;
				}

				.ur-frontend-form {
					&.login {
						// max-width: 520px;
						margin: 0px auto;
						box-shadow: 0px 4px 16px 0px rgba(17, 17, 26, 0.05), 0px 8px 32px 0px rgba(17, 17, 26, 0.05);
						// padding: 60px 50px;

						.user-registration-error {
							display: block;
							color: #222222 !important;
							font-size: 14px;
							line-height: 21px;
							letter-spacing: 0.15px;
							padding: 10px !important;
							font-weight: 400;

							&::before {
								font-weight: 500;
								color: rgb(255,2.5,11.1079545455);
							}

							strong {
								font-weight: 500;
							}
						}
					}

					&--bordered {
						.user-registration-form-login {
							.ur-form-row {
								.ur-form-grid {
									label {
										margin-left: 0;
									}

									.input-text {
										background: transparent;
										height: auto;
									}

									.ur-submit-button {
										background: $primary_color;
										border-radius: 4px;
									}
								}
							}
						}
					}

					&--flat {
						background: transparent;

						.user-registration-form-login {
							.ur-form-row {
								.ur-form-grid {
									.input-text {
										height: auto;
									}

									.ur-submit-button {
										&:disabled {
											background: #eaeaea !important;
										}
									}
								}
							}
						}
					}

					&--rounded {
						.user-registration-form-login {
							.ur-form-row {
								.ur-form-grid {
									label {
										margin-left: 0;
									}

									.input-text {
										height: auto;
									}
								}
							}
						}
					}

					.user-registration-form-login {
						.ur-form-row {
							.ur-form-grid {
								.ur-submit-button {
									margin-right: 0;
								}
							}
						}
					}
				}

				.user-registration-login,
				.user-registration-registration {
					&-title {
						color: #1f1f1f;
						font-size: 32px;
						font-weight: 600;
						line-height: 48px;
						letter-spacing: 0.15px;
						display: block;
						text-align: center;
						margin-bottom: 8px;
					}

					&-description {
						color: #333;
						font-size: 14px;
						font-weight: 400;
						line-height: 21px;
						letter-spacing: 0.15px;
						margin-bottom: 30px;
						text-align: center;
					}
				}

				br {
					display: none;
				}

				.ur-form-row {
					.ur-form-grid {
						#user-registration-tfa-attempts-left {
							margin-bottom: 12px;
						}

						.user-registration-error {
							width: 100%;
							position: unset;
							align-items: center;
							margin-bottom: 24px !important;
							// color: #F25656 !important;
							// font-size: 14px !important;
							// font-weight: 400 !important;
							// line-height: 24px !important;
							letter-spacing: 0.18px;

							&::before {
								margin-right: 4px;
								font-size: 16px;
								color: #f25656;
							}

							svg {
								width: 28px;
								height: 28px;
							}

							li {
								color: #222222;
								font-size: inherit;
								font-weight: 400;
								line-height: inherit;
								letter-spacing: 0.15px;

								strong {
									font-weight: 500;
									padding-right: 4px;
								}
							}
						}

						.user-registration-message {
							margin-left: 10px;
							margin-right: 10px;
							margin-bottom: 24px;

							ul {
								margin: 0;
							}
						}

						.ur-lost-password-content-container {
							margin-bottom: 24px;

							.ur-lost-password-title {
								margin: 0;
							}
						}

						.user-registration-form-row {
							margin-bottom: 12px;

							// label {
							// 	margin-top: 0;
							// 	margin-bottom: 12px;
							// }
						}

						.ur-input-with-icon {
							display: block;

							svg {
								top: 50%;
								transform: translateY(-50%);
								left: 12px;
								width: 14px;
								height: 14px;
							}

							input {
								min-height: 38px;
								max-height: 38px;
								margin-bottom: 0;
								padding: 0 14px 0 36px;

								&:focus {
									border-color: #027abb;
								}
							}
						}

						.ur-field-item {
							label:not(.user-registration-error) {
								margin-top: 0;
								margin-bottom: 12px;
								color: #222;
								font-size: 15px;
								font-weight: 500;
								line-height: 19px;
							}

							.input-wrapper {
								display: block;

								input {
									margin-bottom: 0;
									border-radius: 4px;
									border: 1px solid #e9e9e9;
									min-height: 38px;
									max-height: 38px;
									font-size: 14px;
									line-height: 20px;
									padding: 0 14px;
									color: #383838;

									&:focus {
										border-color: #027abb;
									}

									&::placeholder {
										color: #858585;
									}
								}
							}
						}
					}
				}

				.ur-button-container {
					display: flex !important;
					align-items: center;
					gap: $spacing_4px;
					margin-top: 32px;
					padding: 0 10px;

					.ur-submit-button {
						width: max-content;
						border: 0;
						padding: 10px 24px;
						color: #ffffff;
						font-size: 15px;
						font-weight: $medium;
						line-height: 24px;
						letter-spacing: 0.15px;
						border: $border_width solid $primary_color;
						margin-right: 0;
						background: $primary_color;

						&:hover {
							border-color: #38488e;
						}
					}

					.user-registration-save-and-continue-button {
						margin-left: 0;
						background: transparent;
						color: $primary_color;
						border: $border_width solid $primary_color;

						&:hover {
							background: $primary_color;
							color: $white;
						}
					}
				}

				.ur-frontend-form {
					box-shadow: none;
					margin-bottom: 0;

					.user-registration-form {
						.ur-form-row {
							.ur-form-grid {
								.user-registration-error {
									position: unset;
									width: 100%;
									margin: 0 !important;
								}

								.user-registration-form-row {
									margin-bottom: 24px;

									label {
										// margin-top: 0;
										// margin-bottom: 12px;
										// color: #222;
										// font-size: 15px;
										// font-weight: 500;
										// line-height: 19px;
									}

									.input-wrapper {
										display: block;

										input {
											// margin-bottom: 0;
											// border-radius: 4px;
											// border: 1px solid #e9e9e9;
											min-height: 38px;
											// font-size: 14px;
											// line-height: 20px;
											// padding: 0 14px;
											// color: #383838;

											&:focus {
												// border-color: #027abb;
											}

											&::placeholder {
												// color: #858585;
											}
										}
									}
								}

								> div {
									display: block;
									margin-top: 32px;
									float: unset !important;
									flex-direction: row-reverse;

									input[type="submit"] {
										border: 0;
										padding: 10px 24px;
										color: #ffffff;
										font-size: 15px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0.15px;
										background: #475bb2;
										border: 1px solid #475bb2;

										&:hover {
											background: #38488e;
											border-color: #38488e;
										}
									}

									.user-registration-Button {
										padding: 10px 24px;
										font-size: 15px;
										line-height: 25px;
										background: $primary_color;
										&.ur-disabled-btn {
											cursor: not-allowed;
										}
										&:disabled {
											pointer-events: none;
											border-color: #f6f7f7 !important;
										}

										&:hover {
											background: #38488e;
											border-color: #38488e;
											color: $white;
										}
									}

									&:has(
											.user-registration-passwordless-login
										) {
										display: flex;
										flex-direction: column-reverse;
										gap: 16px !important;
									}

									.user-registration-passwordless-login {
										width: 100%;
										text-align: center;
										margin: 0;

										a {
											font-size: 15px;
											line-height: 25px;
											color: #4e4e4e;
											background: #f4f4f4;
											border: 1px solid #f4f4f4;
											width: 100%;
											display: block;
											padding: 10px 24px;
											border-radius: 4px;
											transition: all 0.3s;

											&:hover {
												background: #475bb2;
												border-color: #475bb2;
												color: #ffffff;
											}
										}
									}
								}

								.user-registration-before-login-btn {
									display: flex;
									align-items: center;
									justify-content: space-between;
									gap: 12px;
									flex-wrap: wrap;
									flex-direction: row;
									margin-top: -4px;
									float: unset;

									label {
										// margin: 0;
										width: auto;
									}

									.user-registration-LostPassword {
										font-size: 14px;
										font-weight: 400;
										line-height: 21px;
										letter-spacing: 0.15px;
										margin: 0;

										a {
											text-underline-offset: 4px;
											color: $primary_color;
										}
									}
								}

								.user-registration-register {
									display: flex;
									width: 100%;
									padding-top: 16px;
									justify-content: center;
									margin-bottom: 0;

									a {
										text-underline-offset: 4px;
										color: $primary_color;
									}
								}

								.user-registration-social-connect-networks {
									flex-direction: column;
									position: relative;
									margin-bottom: 0;

									&::before {
										content: "or";
										font-size: 14px;
										line-height: 24px;
										background: #ffffff;
										padding: 0 10px;
										display: block;
										z-index: 1;
										position: relative;
										color: #333;
										letter-spacing: 0.15px;
									}

									&::after {
										content: "";
										position: absolute;
										width: 100%;
										height: 1px;
										top: 12px;
										left: 50%;
										transform: translateX(-50%);
										background: #d9d9d9;
										z-index: 0;
									}

									.ursc-network-lists {
										display: flex;
										justify-content: center;
										align-items: center;
										gap: 20px;
										width: 100%;

										.ursc-login-media {
											margin: 0;
										}

										&.ursc_theme {
											&_2,
											&_3 {
												.ursc-login-media {
													a {
														width: 40px;
														height: 40px;
														padding: 0;
													}
												}
											}

											&_4 {
												flex-wrap: wrap;

												.ursc-login-media {
													width: 47%;

													.ursc-login-text {
														font-size: 13px;
														line-height: 24px;
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}

				.ur-login-registration-nav {
					ul {
						li {
							margin: 0;
							padding: 16px;
							color: #c5c5c5;
							font-size: 16px;
							font-weight: 500;
							line-height: 21px;
							letter-spacing: 0.85px;
							text-transform: uppercase;
							border: 0;
							box-shadow: none;
							clip-path: none;

							&.active {
								color: #1f1f1f;
							}
						}
					}
				}

				&:has(.ur-login-registration-nav) {
					padding: 0;

					.ur-frontend-form {
						padding: 50px 40px 40px;

						.ur-form-row {
							.ur-form-grid {
								.user-registration {
									margin-top: 0;
								}

								.ur-frontend-form {
									padding: 0;
									box-shadow: none;
									margin-bottom: 0;
								}
							}
						}
					}
				}
			}
		}
	}
	&.woocommerce-checkout {
		.user-registration.urwc-form {
			all: unset;

			.ur-form-row {
				.ur-form-grid {
					margin: 0 -10px;

					.ur-field-item {
						ul,
						ol {
							padding-left: 4px;
						}

						.input-wrapper {
							input {
								&:not([type="checkbox"]),
								&:not([type="radio"]) {
									min-height: 50px;
									max-height: 50px;
									border: 1px solid;
									border-color: inherit;
								}
							}
						}

						select {
							min-height: 50px;
							max-height: 50px;
							border: 1px solid;
							border-color: inherit;
							border-radius: 4px;
						}

						textarea {
							border: 1px solid;
							border-color: inherit;
							border-radius: 4px;
						}
					}
				}
			}
		}
	}
}

.user-registration-login-form-container {
	.ur-registered-from {
		.ur-login-form-wrapper {
			#user-registration {
				width: 100%;
			}
		}
	}
}

// --------------login form design css fixes------------------------------------

.user-registration-membership_page_user-registration-login-forms {
	#wpcontent {
		.ur-admin-page-topnav {
			margin-bottom: 0;
		}
		.user-registration-login-form-container {
			.user-registration__wrap {
				&.wrap {
					margin: 0 auto;
				}
				.ur-form-subcontainer {
					.menu-edit {
						border: none;
					}
					.ur-registered-inputs {
						.ui-widget-content {
							.ur-tab-contents {
								padding: 24px;
								background-color: #ffffff;
								.ur-login-view-doc {
									border-radius: 3px;
									cursor: pointer;
									text-decoration: none;
									text-align: center;
									vertical-align: middle;
									white-space: nowrap;
									box-shadow: none;
									font-size: 14px;
									font-weight: 600;
									letter-spacing: 0px;
									padding: 10px 24px;
									border: none;
									background-color: #475bb2;
									color: #ffffff;
									display: block;
									margin: 24px auto 0;
									a {
										color: #fff;
									}
									&:disabled {
										cursor: default;
										opacity: 0.5;
										&:hover {
											background-color: #475bb2;
										}
									}
								}
							}
							.ur-heading {
								margin-top: 0;
								padding-bottom: 16px;
								border-bottom: 1px solid #e9e9e9;
								text-transform: uppercase;
								font-size: 16px;
							}
							.ur-login-content {
								p {
									font-size: 16px;
									margin: 20px auto;
								}
								.login-forms-shortcode-action {
									display: flex;
									padding: 6px 6px 6px 12px;
									gap: 8px;
									justify-content: space-between;
									width: 100%;
									background: #fff;
									border: 1px solid #edeff7;
									border-radius: 4px;
									input {
										background: transparent;
										border: none;
									}
									.ur-copy-shortcode {
										line-height: unset;
										padding: 6px;
										background: #edeff7;
										border: none;
									}
								}
							}
						}

						&.ur-login-form-settings {
							.ur-tab-contents {
								padding: 16px 16px 0 16px;
								.ur-tab-content {
									padding: 0;
									form {
										.ur-login-form-setting-block {
											&:first-child {
												h2 {
													&.ur-toggle-heading {
														margin-top: 0;
													}
												}
											}
											.ur-toggle-content {
												margin-top: 24px;
												display: flex;
												flex-direction: column;
												gap: 28px;
												.user-registration-login-form-global-settings {
													display: flex;
													flex-direction: column;
													gap: 12px;
													label {
														font-weight: 600;
														gap: 6px;
														margin-bottom: 0;
														.user-registration-help-tip {
															font-size: 20px;
														}
													}
													select {
														height: 38px;
													}
												}
											}
										}
									}
								}
							}
							#ur-login-form-setting {
								.ur-login-form-setting-block {
									display: flex;
									flex-direction: column;
									gap: 24px;
								}
							}
						}
					}
					#post-body {
						.ur-builder-wrapper {
							.ur-selected-inputs {
								background: transparent;
								padding: 24px;
							}
						}
					}
				}

				.user-registration-login-settings-form {
					border-radius: $border_radius_4;

					&#ur-frontend-form {
						border: 1px solid #EDF2F7;
					}

					a {
						pointer-events: none;
					}
				}
			}
		}
	}
}

body.user-registration-page {
	.elementor-widget-container {
		.user-registration:not(.user-registration-MyAccount) {
			background: transparent;
			border-radius: 0;
		}
	}
}
.ur-metabox-field .ur-metabox-field-detail{
	.select2-container {
		.select2-selection--single {
			height: auto;
		}
	}
}
.et-db {
	#et-boc {
		.et-l {
			.et-fb-modules-list {
				ul {
					> li {
						position: relative;

						// Registration Form Icon
						&.urm-registration-form {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/registration-form.svg");
							}
						}

						// Login Form Icon
						&.urm-login-form {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/login-form.svg");
							}
						}

						// Myaccount Icon
						&.urm-myaccount {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/my-account.svg");
							}
						}

						// edit profile Icon
						&.urm-edit-profile {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/edit-profile.svg");
							}
						}

						// Edit Password Icon
						&.urm-edit-password {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/edit-password.svg");
							}
						}

						// Edit Password Icon
						&.urm-content-restriction {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/content-restriction.svg");
							}
						}

						// Membership Group Icon
						&.urm-membership-groups {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/membership-groups.svg");
							}
						}


						// Membership thankyou Icon
						&.urm-membership-thank-you {
							&:before {
								content: "";
								display: inline-block;
								width: 16px;
								height: 16px;
								background-repeat: no-repeat;
								background-position: center;
								background-size: contain;
								background-image: url("./../images/blocks/thankyou.svg");
							}
						}
					}
				}
			}
		}
	}
}