/**
* 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: var(--ur-primary-light, lighten($primary_color, 47%));
	color: $color_gray_one;
	border-top: 3px solid var(--ur-primary-color, $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-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 {
	border: 1px solid $border_color;
	padding: 20px;

	&.login {
		border: none;
		padding: $spacing_60px $spacing_40px;
		border-radius: $border_radius_8;
		background: $white;

		@media screen and (max-width: 600px) {
			padding: $spacing_40px $spacing_30px;
		}

		@media screen and (max-width: 600px) {
			padding: $spacing_40px $spacing_30px;
		}

		.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: $spacing_20px;
			}

			.ur-lost-password-message {
				font-size: 15px;
				letter-spacing: 0.15px;
				margin-top: 8px;
				margin-bottom: 14px;
				color: #6b6b6b !important;
				font-weight: 400;
			}
		}

		.ur-input-with-icon {
			position: relative;
			display: flex;
			align-items: center;

			.input-icon {
				position: absolute;
				left: $spacing_10px;
				top: 50%;
			}

			input {
				padding-left: $spacing_40px;
			}
		}

		.required {
			margin-left: 5px;
		}

		label[for="user_login"] {
			margin-top: 0;
			margin-bottom: 16px;
			color: #222;
			font-size: 15px;
			font-weight: 500;
			line-height: 19px;
		}

		#user_login {
			border-radius: $border_radius_4;
			border: $border_width solid #e9e9e9;
			height: 48px;

			&::placeholder {
				color: transparent;
			}
		}

		.ur-reset-password-btn {
			border: 1px solid
				var(--ur-button-background-normal-color, $primary_color);
			background: var(
				--ur-button-background-normal-color,
				$primary_color
			);
			width: 100%;
			color: var(--ur-button-text-normal-color, $white);
			letter-spacing: 0.15px;
			//border: 0;
			font-size: 16px;
			font-weight: 500;
			padding: 14px 32px;
			margin-top: 10px;

			&:hover {
				color: var(--ur-button-text-hover-color, $white);
				background: var(--ur-button-background-hover-color, #38488e);
				border-color: var(--ur-button-background-hover-color, #38488e);
			}
		}

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

		&.ur-edit-profile {
			.ur-form-row.edit-user-save-btn-container {
				.btn-primary {
					min-height: 34px;
					background: var(--ur-primary-color, $primary_color);
					border: $border_width solid
						var(--ur-primary-color, $primary_color);
					color: $white;
					border-radius: $border_radius_4;
					font-size: 14px;
					line-height: 24px;
					padding: 0 $spacing_12px;
				}
			}
		}
	}

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

	.register {
		#node_recaptcha_register {
			padding: 0 $spacing_10px;
		}
	}

	#ur-recaptcha-node {
		margin-top: $spacing_10px;

		@media screen and (max-width: 460px) {
			position: relative;
			left: -$spacing_30px;
			transform: scale(0.8);
		}
	}

	* {
		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 $spacing_10px;

			@media screen and (max-width: 600px) {
				width: 100%;
			}

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

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

				input.input-text {
					margin-bottom: 0;
					border-radius: $border_radius_4;
					border: $border_width solid $border-color;
					min-height: 38px;
					font-size: 14px;
					line-height: 20px;
					padding: 0 $spacing_12px;
					color: #383838;

					&:focus {
						border-color: var(
							--ur-primary-color,
							$primary_color
						) !important;
					}
				}
			}

			#user-registration-tfa-footer {
				gap: $spacing_2px;

				.user-registration-Button {
					padding: $spacing_10px $spacing_20px;
					font-size: 14px;
					line-height: 24px;
					box-shadow: none;

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

			.ur-field-item {
				margin-bottom: $spacing_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: $spacing_10px;

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

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

							label {
								display: inline;
							}
						}
					}
				}

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

				.form-row {
					display: block;

					.btn-primary.set-new-pass-btn {
						align-content: center;
						min-height: 36px;
						font-size: 14px;
						line-height: 20px;
						padding: 0 12px;
						color: $primary_color;
						border-color: $primary_color;
					}
				}

				.stripe-container {
					.stripe-card-indicator {
						font-size: 14px;
						line-height: 20px;
						font-weight: $medium;
						background: #ebedf7;
						color: var(--ur-primary-color, $primary_color);
						border-radius: $border_radius_4 $border_radius_4 0 0;
						pointer-events: none;
						padding: $spacing_8px $spacing_16px;
					}

					.stripe-input-container {
						border: 0;

						.StripeElement {
							min-height: 38px;
							height: 38px;
							padding: 0 $spacing_12px;
							border-radius: $border_radius_4;

							&--focus {
								border-color: var(
									--ur-primary-color,
									$primary_color
								);
								border-radius: $border_radius_4;
							}

							.__PrivateStripeElement {
								height: 38px;

								iframe {
									top: $spacing_12px;
								}
							}
						}
					}
				}
			}

			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: 0 $spacing_12px;
				min-height: 38px;
				margin: 0;
				margin-bottom: 10px;
				height: 38px;
				border: $border_width solid $border-color;
				border-radius: $border_radius_4;
				font-size: 14px;
				line-height: 24px;
				color: #383838;
				font-weight: $regular;
				box-shadow: none;
				font-family: inherit;

				&::placeholder {
					color: #bababa;
				}

				&:focus {
					outline: none;
					box-shadow: none;
					border-color: var(--ur-primary-color, $primary_color);
				}
			}

			.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 {
						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,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath d='M19.561 7.403a1.468 1.468 0 0 1 2.02 0 1.339 1.339 0 0 1 0 1.944l-8.57 8.25a1.468 1.468 0 0 1-2.021 0l-8.572-8.25a1.339 1.339 0 0 1 0-1.944 1.468 1.468 0 0 1 2.02 0L12 14.68l7.561-7.278Z'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-position: right 12px center;
				background-size: 14px 14px;
				min-height: 38px;
				max-height: 38px;
				font-size: 14px;
				line-height: 20px;
				padding: 0 $spacing_12px;
				border-radius: $border_radius_4;
				box-shadow: none;
				cursor: pointer;
				color: #383838;
				margin: 0;
				border: $border_width solid $border-color;

				&:focus {
					border-color: var(--ur-primary-color, $primary_color);
					outline: none;
					box-shadow: none;
				}
			}

			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: $semi_bold;
				}
			}

			textarea {
				height: 100px;
				resize: none;
				padding: $spacing_6px $spacing_12px;

				&:focus {
					border-color: var(
						--ur-primary-color,
						$primary_color
					) !important;
				}
			}

			.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;
								}
							}
						}
					}
				}
			}
		}
	}

	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--default {
		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 $border_color;
						outline: none;
						transition: all 0.35s;
						padding: 10px 15px;
						background: $white;
						color: $label_color;
						height: 45px;
						border-radius: $border_radius_4;
					}

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

					textarea {
						height: 100px;
					}

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

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

	&.ur-frontend-form--bordered {
		box-shadow: none !important;
		border: 0 !important;

		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 $border_color;
						outline: none;
						transition: all 0.35s;
						padding: 0 12px;
						background: $input_background_color;
						color: $label_color;
						height: 38px;
					}

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

					textarea {
						height: 100px;
					}

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

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

	&.ur-frontend-form--flat {
		border: none transparent;
		box-shadow: none !important;

		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 {
						outline: none;
						padding: 0 12px;
						background: $white;
						color: $label_color;
						margin-bottom: 10px;
						height: 38px;

						&: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: $border_width solid $border_color;
						border-radius: 25px !important;
						outline: none;
						transition: all 0.35s;
						padding: 0 12px;
						background: $white;
						color: $label_color;
						height: 38px;
					}

					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 {
			border-radius: 30px !important;

			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;
							border-color: $border_color;
						}

						.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: var(--ur-primary-color, $primary_color);
	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: $primary_color;
			color: #ffffff;
			display: block;
			margin: 15px auto 0;

			&:disabled {
				cursor: default;
				opacity: 0.5;

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

	.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;
	}
}

#user-registration-pro-single-user-view {
	.user-registration-user-form-details {
		.empty-list-table-container {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 50px;
		}

		.wp-list-table {
			width: 100%;
			background: $white;
			border: $border_width solid $border-color;
			border-radius: $border_radius_4;

			thead {
				background: none;

				th {
					padding: $spacing_12px $spacing_14px;
					font-size: 14px;
					font-weight: 600;
					border-color: $border-color;
					color: #383838;
					text-align: left;
				}
			}

			tbody {
				tr {
					background: #f8f8fa;

					td {
						padding: $spacing_12px $spacing_14px;
						font-size: 13px;
						color: #383838;
						vertical-align: middle;
					}
				}
			}
		}
	}
}

//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: 7px;
	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: $spacing_10px;
		z-index: 9999;
		display: flex;
		align-items: center;
		border-radius: 4px;
		border-left: 4px solid #49c85f;
		background: #f7fdf8;
		border-top: none;
		margin: $spacing_20px 0px;
		padding-left: $spacing_40px;
	}

	svg {
		position: absolute;
		z-index: 999999;
		margin-top: $spacing_32px;
		margin-left: $spacing_10px;
	}
}

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

	svg {
		margin-right: $spacing_10px;
	}
}

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

	.user-registration-LostPassword {
		color: $primary_color;
	}
}

// Spinner moved inside login and register button.
.user-registration-Button,
.ur-submit-button {
	width: 100%;
	background: var(--ur-primary-color, $primary_color);
	border-radius: $border_radius_4;
	border: 1px solid var(--ur-primary-color, $primary_color);
	color: $white;

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

	.ur-spinner {
		width: 16px;
		height: 16px;
		margin-left: $spacing_6px;
		margin-bottom: $spacing_2px;
		display: inline-block;
		vertical-align: middle;
		@include loader();
		margin-top: $spacing_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,
.ur-form-grid {
	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.
	}
}

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

	@media screen and (max-width: 600px) {
		padding: $spacing_40px $spacing_30px;
	}

	input {
		border-radius: $border_radius_4;
	}

	#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 ReVamped CSS
body {
	&[class*="user-registration-"],
	&[class^="ur-"] {
		/* Minimal WordPress Editor Styles */
		.wp-editor-container {
			border-radius: 8px !important;
			overflow: hidden !important;
		}

		.wp-editor-wrap {
			.wp-editor-tabs {
				.wp-switch-editor:hover {
					background: #e8e8e8 !important;
					color: black !important;
				}
			}

			.mce-toolbar {
				background: white !important;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
				margin-bottom: 0 !important;
				padding: 6px 8px !important;

				&-grp > div {
					padding: 0;
				}

				.mce-btn {
					background: transparent !important;
					border: none !important;
					border-radius: 5px !important;
					margin: 1px !important;
					transition: background-color 0.15s ease !important;

					&:hover {
						background: #e8e8e8 !important;
						box-shadow: none !important;
					}

					&.mce-active {
						background: #d0d0d0 !important;
					}

					button {
						color: #333 !important;
						font-size: 13px !important;
						padding: 4px 6px !important;
						font-weight: normal !important;
						box-shadow: none !important;
						background: transparent !important;
					}

					&:hover button {
						color: #000 !important;
						background: #e8e8e8 !important;
					}

					&.mce-active button {
						color: #000 !important;
						font-weight: 500 !important;
					}
				}

				.mce-separator {
					background: #d0d0d0 !important;
					margin: 2px 4px !important;
					width: 1px !important;
				}
			}

			.mce-edit-area {
				border-top: none !important;
				border-radius: 0 0 6px 6px !important;
				background: #ffffff !important;
			}

			.mce-statusbar {
				background: #fafafa !important;
				border-top: 1px solid #e0e0e0 !important;
				border-radius: 0 0 6px 6px !important;
				color: #666 !important;
				font-size: 11px !important;
				padding: 4px 8px !important;
			}

			.mce-menubar {
				background: #ffffff !important;
				border: 1px solid #e0e0e0 !important;
				border-bottom: none !important;
				border-radius: 6px 6px 0 0 !important;
				padding: 2px 6px !important;

				.mce-menubtn {
					background: transparent !important;
					border: none !important;
					border-radius: 2px !important;
					margin: 1px !important;
					padding: 2px 6px !important;
					transition: background-color 0.15s ease !important;

					&:hover {
						background: #f0f0f0 !important;
					}

					button {
						color: #333 !important;
						font-size: 12px !important;
					}
				}
			}

			/* Dropdown Menus */
			.mce-menu {
				background: white !important;
				border: 1px solid #d0d0d0 !important;
				border-radius: 6px !important;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

				.mce-menu-item {
					padding: 6px 10px !important;
					border-radius: 2px !important;
					margin: 1px !important;

					&:hover {
						background: #f5f5f5 !important;
					}

					&.mce-selected {
						background: #e0e0e0 !important;
						color: #000 !important;
					}
				}
			}

			/* Color Picker */
			.mce-colorbutton .mce-preview {
				border-radius: 4px !important;
				border: 1px solid #d0d0d0 !important;
				left: 6px !important;
			}

			/* Font Size Dropdown */
			.mce-fontsize .mce-txt {
				min-width: 50px !important;
			}

			/* Style Dropdown */
			.mce-styleselect .mce-txt {
				min-width: 100px !important;
			}

			/* Fullscreen Mode */
			&.mce-fullscreen {
				.mce-toolbar {
					background: #ffffff !important;
					border-bottom: 1px solid #e0e0e0 !important;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
				}
			}

			/* Responsive Design */
			@media (max-width: 768px) {
				.mce-toolbar {
					flex-wrap: wrap !important;
				}

				.mce-toolbar .mce-btn {
					margin: 1px !important;
				}

				.mce-toolbar .mce-btn button {
					padding: 3px 5px !important;
					font-size: 11px !important;
				}
			}
		}
	}

	&.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: inherit;
				font-size: inherit;
				font-weight: inherit;
				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 {
				&:has(.ur-grid-2),
				&:has(.ur-grid-3) {
					max-width: 1200px;
				}

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

				&--bordered {
					&:not(.login) {
						box-shadow: none;

						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-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: 1px solid #e1e1e1;
											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;
											border: 1px solid #e1e1e1;
											background: transparent;
										}
									}
								}
							}
						}
					}
				}

				&--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: $spacing_30px auto;
				margin: 0 auto;
				border-radius: $border_radius_4;
				// background: transparent;
				border: 0;

				&:has(.ur-frontend-form--bordered) {
					box-shadow: none;
					border: $border_width solid $border_color;
				}

				&:has(.ur-frontend-form--flat) {
					box-shadow: none;
					border: $border_width solid $border_color;
					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 {
						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);

						.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: var(
											--ur-primary-color,
											$primary_color
										);
										border-radius: 4px;
									}
								}
							}
						}
					}

					&--flat {
						background: $white;

						.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;
									color: $white;
								}
							}
						}
					}
				}

				.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;
							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: $spacing_12px;
						}

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

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

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

								&:focus {
									border-color: var(
										--ur-primary-color,
										$primary_color
									);
								}
							}
						}

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

							.input-wrapper {
								display: block;

								input {
									margin-bottom: 0;
									border-radius: $border_radius_4;
									min-height: 38px;
									max-height: 38px;
									font-size: 14px;
									line-height: 20px;
									padding: 0 $spacing_12px;
									color: #383838;
									box-shadow: none;
									border: $border_width solid $border-color;

									&:focus {
										border-color: var(
											--ur-primary-color,
											$primary_color
										);
										outline: none;
										box-shadow: none;
									}

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

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

					.ur-submit-button {
						width: max-content;
						border: 0;
						padding: 10px 24px;
						color: var(--ur-button-text-normal-color, $white);
						font-size: 15px;
						font-weight: $medium;
						line-height: 24px;
						letter-spacing: 0.15px;
						border: $border_width solid
							var(
								--ur-button-background-normal-color,
								$primary_color
							);
						margin-right: 0;
						background: var(
							--ur-button-background-normal-color,
							$primary_color
						);

						&:hover {
							color: var(--ur-button-text-hover-color, $white);
							background: var(
								--ur-button-background-hover-color,
								#38488e
							);
							border-color: var(
								--ur-button-background-hover-color,
								#38488e
							);
						}
					}

					.user-registration-save-and-continue-button {
						margin-left: 0;
						background: transparent;
						color: var(--ur-primary-color, $primary_color);
						border: $border_width solid
							var(--ur-primary-color, $primary_color);

						&:hover {
							background: var(--ur-primary-color, $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: $spacing_24px;

									.input-wrapper {
										display: block;

										input {
											min-height: 38px;
										}
									}
								}

								> div {
									display: block;
									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: $primary_color;
										//border: 1px solid $primary_color;

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

									.user-registration-Button {
										padding: 10px 24px;
										font-size: 15px;
										line-height: 25px;
										background: var(
											--ur-button-background-normal-color,
											$primary_color
										);
										color: var(
											--ur-button-text-normal-color,
											$white
										);

										&.ur-disabled-btn {
											cursor: not-allowed;
										}

										&:disabled {
											pointer-events: none;
											border-color: #f6f7f7 !important;
										}

										&:hover {
											background: var(
												--ur-button-background-hover-color,
												$primary_color
											);
											//border-color: #38488e;
											color: var(
												--ur-button-text-hover-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: $primary_color;
												border-color: $primary_color;
												color: #ffffff;
											}
										}
									}
								}

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

									label {
										width: auto;
										display: flex;
										align-items: center;
										gap: $spacing_8px;

										input[type="checkbox"] {
											margin: 0;
											// margin-bottom: 20px;
										}
									}

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

										a {
											text-underline-offset: 4px;
											color: var(
												--ur-primary-color,
												$primary_color
											);
										}
									}
								}

								.user-registration-register {
									display: flex;
									width: 100%;
									padding-top: 16px;
									justify-content: center;
									margin-bottom: 0;
									font-size: 14px;
									line-height: 21px;

									a {
										text-underline-offset: 4px;
										color: var(
											--ur-primary-color,
											$primary_color
										);
									}
								}

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

									&.user-registration-social-connect-networks__position_bottom {
										&::before {
											content: attr(data-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;
											left: 50%;
											transform: translateX(-50%);
											width: 20px;
											text-align: center;
										}

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

									&.user-registration-social-connect-networks__position_top {
										&::before {
											content: "";
											position: absolute;
											width: 100%;
											height: 1px;
											bottom: 12px;
											left: 50%;
											transform: translateX(-50%);
											background: #d9d9d9;
											z-index: 0;
										}

										&::after {
											content: attr(data-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;
											left: 50%;
											transform: translateX(-50%);
											width: 20px;
											text-align: center;
										}
									}

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

										.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 {
								background: #ffffff;

								.ur-login-view-doc {
									a {
										border-radius: $border_radius_4;
										cursor: pointer;
										text-decoration: none;
										text-align: center;
										vertical-align: middle;
										white-space: nowrap;
										box-shadow: none;
										font-size: 14px;
										font-weight: $medium;
										letter-spacing: 0px;
										padding: $spacing_10px $spacing_24px;
										border: none;
										background: #edeff7;
										color: var(
											--ur-primary-color,
											$primary_color
										);
										display: block;
										margin: $spacing_32px 0 0;
										transition: all 0.3s ease-in-out;

										&:hover {
											background: var(
												--ur-primary-color,
												$primary_color
											);
											color: $white;
										}
									}

									&:disabled {
										cursor: default;
										opacity: 0.5;

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

							.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: 15px;
									line-height: 26px;
									margin: $spacing_12px 0;

									&:nth-child(3) {
										margin-top: $spacing_24px;
									}
								}

								.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 {
								.ur-tab-content {
									padding: 0;

									form {
										.ur-login-form-setting-block {
											padding: $spacing_20px $spacing_12px
												$spacing_12px;

											&:first-child {
												h2 {
													&.ur-toggle-heading {
														margin-top: 0;
													}
												}
											}

											.ur-toggle-content {
												margin-top: $spacing_24px;
												padding-bottom: $spacing_28px;
												display: flex;
												flex-direction: column;
												gap: $spacing_28px;
											}
										}
									}
								}
							}

							#ur-login-form-setting {
								.ur-login-form-setting-block {
									display: flex;
									flex-direction: column;
									gap: 24px;

									h2 {
										margin: 0 0 $spacing-16px 0;
									}
								}
							}
						}
					}
				}

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

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

body.user-registration-page {
	.elementor-widget-container {
		.user-registration:not(.user-registration-MyAccount) {
			background: transparent;
			border-radius: 0;
		}
	}
}

.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");
							}
						}
					}
				}
			}
		}
	}
}

#ur-field-all-settings {
	.user-registration-login-form-global-settings:not(.ur-toggle-setting) {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ur-toggle-setting {
		display: flex;
		flex-direction: column;
	}

	.user-registration-login-form-global-settings {
		.user-registration-login-form-toggle-option {
			display: flex;
			gap: $spacing_20px;
		}

		// label {
		// 	font-size: 14px;
		// 	flex: 0 0 40%;
		// 	color: #383838;
		// }

		// &--field {
		// 	width: 100%;
		// }

		.user-registration-help-tip {
			top: 3px;
		}

		// .description {
		// 	width: 60%;
		// 	margin-left: auto;
		// }

		&.ur-form-settings-section {
			border-top: 1px solid #e1e1e1;
			padding-top: 20px;

			h4 {
				color: #131313;
				font-weight: 600;
				margin: 0;
			}
		}
	}
}

.user-registration-login-settings-form {
	.ur-form-row {
		.ur-form-grid {
			label {
				margin-top: 0;
				margin-bottom: 0;
			}
		}
	}
}

.user-registration-login-form-container {
	.ur-login-form-settings {
		.user-registration-login-form-global-settings {
			&--field {
				display: flex;
				align-items: center;
			}

			&:has(.error) {
				.select2-selection {
					border-color: #f34c4c !important;
				}
			}

			.error {
				&.inline {
					box-shadow: none;
					color: #f34c4c;
					font-size: 13px;
					font-weight: 400;
					line-height: 20px;
					display: flex;
					align-items: flex-start;
					gap: 8px;
					margin-top: 10px;
					border: 0;

					&::before {
						content: "";
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F34C4C' viewBox='0 0 24 24'%3E%3Cpath d='M20.182 12a8.182 8.182 0 1 0-16.364 0 8.182 8.182 0 0 0 16.364 0ZM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z'/%3E%3Cpath d='M11.091 12V8.363a.91.91 0 1 1 1.818 0V12a.91.91 0 1 1-1.818 0Zm.917 2.727.092.005a.91.91 0 0 1 0 1.809l-.092.004H12a.91.91 0 1 1 0-1.818h.008Z'/%3E%3C/svg%3E");
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: center;
						width: 40px;
						height: 40px;
						position: relative;
						bottom: 6px;
					}
				}
			}
		}
	}

	.ur-builder-wrapper {
		.user-registration-login-form-global-settings {
			&--field {
				display: flex;
				align-items: center;

				.select2-selection {
					position: relative;
				}
			}

			&:has(.error) {
				.select2-selection {
					border-color: #f34c4c !important;
				}
			}

			.error {
				&.inline {
					box-shadow: none;
					color: #f34c4c;
					font-size: 13px;
					font-weight: 400;
					line-height: 20px;
					display: flex;
					align-items: flex-start;
					gap: 8px;
					margin-top: 10px;
					border: 0;

					&::before {
						content: "";
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F34C4C' viewBox='0 0 24 24'%3E%3Cpath d='M20.182 12a8.182 8.182 0 1 0-16.364 0 8.182 8.182 0 0 0 16.364 0ZM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z'/%3E%3Cpath d='M11.091 12V8.363a.91.91 0 1 1 1.818 0V12a.91.91 0 1 1-1.818 0Zm.917 2.727.092.005a.91.91 0 0 1 0 1.809l-.092.004H12a.91.91 0 1 1 0-1.818h.008Z'/%3E%3C/svg%3E");
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: center;
						width: 20px;
						height: 20px;
						position: relative;
						top: 4px;
					}
				}
			}
		}
	}
}

@keyframes toaster {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(100%);
	}

	10% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	90% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateX(-50%) translateY(100%);
	}
}

.ur-toaster {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #1ea71b;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	display: inline-flex;
	white-space: nowrap;
	z-index: 9999;
	animation: toaster 5s ease-in-out forwards;

	&.urm-error {
		background-color: red;
	}
}

.ur-frontend-form .user-registration-EditAccountForm.edit-password {
	.ur-form-row .ur-form-grid {
		fieldset {
			border: 0;
			padding: 0;
			margin: 0;
		}

		p > input.user-registration-Button.button {
			color: var(--ur-button-text-normal-color, $white);
			background: var(
				--ur-button-background-normal-color,
				$primary_color
			);
			border: $border_width
				var(--ur-button-background-normal-color, $primary_color);
			border-radius: $border_radius_4;
			border-style: inherit;

			&:hover {
				color: var(--ur-button-text-hover-color, $white);
				background: var(--ur-button-background-hover-color, #38488e);
				border-color: var(--ur-button-background-hover-color, #38488e);
			}
		}
	}
}

.urcr-block-notice {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 40px;
	background-color: #e5e7eb;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;

	gap: 8px;
	font-size: 13px;
	color: #111827;
}

.urcr-block-notice .dashicons {
	font-size: 16px;
	line-height: 1;
}

.ur-state-label {
	margin-top: 16px !important;
}

#ur-local-currency-switch-currency {
	margin-bottom: 16px !important;
}

.urm-courses-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 2rem 0;
}

.urm-course-card {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease;

	&:hover {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	}

	&__illustration {
		flex-shrink: 0;
		width: 200px;
		height: 160px;
		overflow: hidden;
		border-radius: 8px;
		background: #f3f4f6;

		a {
			display: block;
			width: 100%;
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 0.3s ease;
		}

		&:hover img {
			transform: scale(1.05);
		}
	}

	&__content {
		flex: 1;
		min-width: 0;
		text-align: left;
	}

	&__title {
		font-size: 1.25rem;
		font-weight: 600;
		color: #1f2937;
		margin: 0 0 0.5rem 0;
		line-height: 1.4;
	}

	&__meta {
		font-size: 0.875rem;
		color: #6b7280;
	}

	&__progress {
		flex-shrink: 0;
		width: 280px;

		.masteriyo-single-course-stats {
			width: 100%;
		}

		.course-progress-box {
			background: transparent !important;
			padding: 0 !important;
		}

		.progress-header {
			display: flex !important;
			align-items: center !important;
			justify-content: space-between !important;
			gap: 1rem !important;
			margin-bottom: 0.75rem !important;
		}

		.progress-component {
			display: flex !important;
			align-items: baseline !important;
			gap: 0.5rem !important;
			flex-direction: row !important;
		}

		.progress-percent {
			font-size: 1.5rem !important;
			font-weight: 700 !important;
			color: #1f2937 !important;
			order: -1 !important;
			line-height: 1 !important;
			margin: 0 !important;
		}

		.progress-label {
			font-size: 1rem !important;
			font-weight: 400 !important;
			color: #6b7280 !important;
			margin: 0 !important;
			order: 0 !important;
			line-height: 1 !important;
		}

		.completed-component {
			display: flex !important;
			align-items: center !important;
			gap: 0.5rem !important;
		}

		.progress-icon {
			display: flex !important;
			align-items: center !important;
			color: #9ca3af !important;
			cursor: pointer;
			transition: color 0.2s ease;

			&:hover {
				color: #4f46e5 !important;
			}

			svg {
				width: 18px !important;
				height: 18px !important;
				fill: currentColor !important;
			}
		}

		.completed-info {
			font-size: 0.75rem !important;
			color: #6b7280 !important;
		}

		.masteriyo-progress-bar-container {
			width: 100% !important;
			height: 8px !important;
			background: #e5e7eb !important;
			border-radius: 999px !important;
			overflow: hidden !important;
			margin-bottom: 1rem !important;
		}

		.masteriyo-progress-bar {
			width: 100% !important;
			height: 100% !important;
			position: relative !important;
		}

		.masteriyo-progress-fill {
			height: 100% !important;
			width: var(--value, 0%) !important;
			background: linear-gradient(
				90deg,
				#4f46e5 0%,
				#6366f1 100%
			) !important;
			border-radius: 999px !important;
			transition: width 0.6s ease !important;

			&.animate {
				transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
			}
		}

		.masteriyo-hidden {
			display: none !important;
		}
	}
}

.urm-continue-course-btn {
	display: block !important;
	width: 100% !important;
	padding: 0.75rem 1.5rem !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	background: #4f46e5 !important;
	border: none !important;
	border-radius: 8px !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
	margin-top: 0.5rem !important;

	&:hover {
		background: #4338ca !important;
		color: #ffffff !important;
		text-decoration: none !important;
	}

	&:active {
		background: #3730a3 !important;
	}

	&:focus {
		outline: 2px solid #4f46e5 !important;
		outline-offset: 2px !important;
	}
}

.urm-masteriyo-course-portal {
	margin-top: 2rem;
	padding: 1rem;
	background: #f9fafb;
	border-radius: 8px;
	text-align: center;

	p {
		margin: 0;
		font-size: 0.875rem;
		color: #6b7280;
	}

	a {
		color: #4f46e5;
		font-weight: 600;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}

		span {
			color: inherit;
		}
	}
}

// Responsive Design
@media (max-width: 968px) {
	.urm-course-card {
		gap: 1.5rem;

		&__illustration {
			width: 160px;
			height: 130px;
		}

		&__progress {
			width: 220px;

			.progress-percent {
				font-size: 1.25rem !important;
			}

			.progress-label {
				font-size: 0.875rem !important;
			}
		}
	}
}

@media (max-width: 768px) {
	.urm-course-card {
		flex-wrap: wrap;
		padding: 1.5rem;
		gap: 1.5rem;

		&__illustration {
			display: none;
		}

		&__content {
			flex: 1;
			min-width: 200px;
			text-align: left;
		}

		&__title {
			font-size: 1.125rem !important;
			margin-bottom: 0.375rem !important;
		}

		&__meta {
			font-size: 0.813rem !important;
		}

		&__progress {
			flex: 1;
			min-width: 200px;
			width: auto;

			.progress-header {
				justify-content: flex-start !important;
			}

			.progress-percent {
				font-size: 1.25rem !important;
			}

			.progress-label {
				font-size: 0.875rem !important;
			}
		}
	}
}

@media (max-width: 480px) {
	.urm-course-card {
		padding: 1rem;
		gap: 1rem;

		&__content {
			width: 100%;
			min-width: 0;
		}

		&__title {
			font-size: 1rem !important;
		}

		&__meta {
			font-size: 0.75rem !important;
		}

		&__progress {
			width: 100%;
			min-width: 0;

			.progress-component {
				gap: 0.375rem !important;
			}

			.progress-percent {
				font-size: 1.125rem !important;
			}

			.progress-label {
				font-size: 0.813rem !important;
			}
		}
	}

	.urm-continue-course-btn {
		padding: 0.625rem 1rem !important;
		font-size: 0.875rem !important;
	}

	.urm-masteriyo-course-portal {
		padding: 0.875rem;

		p {
			font-size: 0.75rem;
		}
	}
}

@media (max-width: 360px) {
	.urm-course-card {
		&__title {
			font-size: 0.938rem !important;
		}

		&__progress {
			.progress-percent {
				font-size: 1rem !important;
			}

			.progress-label {
				font-size: 0.75rem !important;
			}
		}
	}
}

// Print styles
@media print {
	.urm-course-card {
		box-shadow: none;
		border: 1px solid #e5e7eb;
		page-break-inside: avoid;
	}

	.urm-continue-course-btn {
		display: none !important;
	}
}

.ur-field-address-state-outer-wrapper {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	.ur-front-spinner {
		margin-left: 0 !important;
		margin-right: -26px;
	}
}

.ur-myaccount-changepassword-header-content {
	display: flex;
	gap: 16px;
	align-items: center;
}

.user-registration-profile-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: column;
	margin-bottom: 20px;
	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;
	}
}