/**
 * admin.scss
 * General User Registration admin styles.
 */

/**
 * Imports
 */
@import "variables/variables";
@import "mixins/mixins";
@import "display";
@import "fonts";
@import "tables";
@import "forms";

// Components
@import "components/badge", "components/button", "components/card",
	"components/list-group", "components/modal", "components/nav",
	"components/scroll-ui";

@import "border";
@import "spacing";
@import "containers";
@import "grids";
@import "overlay";

// Layout-related sections
@import "layout/header";

@import "templates/template-setup";

@import "animation";

/**
	 * Styling begins
	 */
.blockUI.blockOverlay {
	@include loader();
}

.toplevel_page_user-registration,
.user-registration-membership_page_user-registration-frontend-list {
	// Design customize for shortcode in list table
	.shortcode {
		.widefat {
			width: calc(100% - 40px);
		}

		.ur-copy-shortcode {
			padding: 4px;
			line-height: 1;
		}
	}
}

.user-registration-membership_page_user-registration-dashboard {
	#wpcontent {
		margin-left: 140px;

		#wpbody-content {
			float: none;
		}
	}
}

.user-registration-membership_page_user-registration-settings {
	.notice {
		display: none;
	}
}

.ur-spinner {
	width: 16px;
	height: 16px;
	margin-left: 6px;
	margin-bottom: 2px;
	display: inline-block;
	vertical-align: middle;
	@include loader();
}

/**
	   * Toggle class.
	   */
.userregistration-forms-hidden {
	display: block;
}

.userregistration-forms-hidden {
	display: none;
}

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

.ur-export-users-page {
	margin-top: 24px;

	.nav-tab-content {
		.nav-tab-inside {
			.postbox {
				width: 50%;
				flex: 1;

				.hndle {
					border-bottom: 1px solid #ccd0d4;
				}

				.ur-input {
					max-width: inherit;
				}
			}
		}

		.hndle,
		.stuffbox .hndle {
			margin: 10px;
			padding-bottom: 10px;
		}

		.stuffbox {
			padding: 10px;
		}
	}
}

.ur-label {
	.user-registration-help-tip {
		margin-left: 4px;
	}

	label span:not(.ur-portal-tooltip) {
		margin-left: 3px;
	}
}

.jconfirm-cell {
	padding-left: 30%;
	padding-right: 30%;
}

.jconfirm-content-pane {
	height: auto !important;

	.ur-shortcut-keyword {
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		font-size: 18px;

		.ur-shortcut-title {
			flex: 3;
		}

		.ur-key {
			display: flex;
			flex: 2;
			column-gap: 8px;
			color: #3498db;

			span {
				border: 1px solid #3498db;
				background-color: #3498db13;
				padding: 5px 15px;
				border-radius: 2px;
			}

			.ur-key-plus {
				margin-top: 5px;
				font-size: 1.2em;
			}

			.ur-key-character {
				width: 15px;
				padding: 5px 10px;
				text-align: center;
			}
		}
	}
}

/**
	 * Addons page
	 **/
.ur_addons_wrap {
	p.refresh {
		margin: 0 0 2em;
	}

	.wp-filter {
		display: none;
	}

	.plugin-card {
		position: relative;

		h3 {
			margin: 0;
			font-size: 18px;
			font-weight: $semi_bold;
			line-height: 24px;
		}

		.name,
		.desc {
			margin-right: 0;
			margin-left: 156px;
		}

		.plugin-card-left {
			.plugin-icon {
				height: 140px;
				width: 140px;
				border: 1px solid #eee;
				border-radius: 2px;
				background-size: contain;
				background-repeat: no-repeat;
			}
		}

		.plugin-card-right {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 20px;
			background-color: #fcfcff;
			border: 1px solid #b7c4ff;
			min-height: 130px;

			.plugin-desc {
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}

			.plugin-card-buttons {
				margin-left: 148px;

				.action-buttons {
					float: right;
					clear: right;
					max-width: 180px;
					margin-left: 10px;

					.install-now:hover {
						border-radius: 2px;
						background-color: #475bb2;
						color: #fff;
					}

					.upgrade-now {
						background: #475bb2 !important;
						color: #fff;
						font-weight: $medium;
					}

					.upgrade-now:hover {
						background: #516be0 !important;
						color: #fff;
					}

					&.upgrade-plan {
						margin: 0 auto;
					}
				}
			}
		}
	}

	.plugin-card-update-failed {
		.notice-error {
			margin: 0;
			padding: 9px 16px 8px;

			.notice-dismiss {
				padding: 17px;
			}
		}
	}

	@media screen and (max-width: 782px) {
		.plugin-card {
			.plugin-card-bottom {
				.action-buttons {
					.button.updating-message {
						&::before,
						&::after {
							margin-top: -1px;
						}
					}
				}
			}
		}

		.plugin-card-update-failed {
			.notice-error {
				padding: 13px 20px;

				.notice-dismiss {
					padding: 21px;
				}
			}
		}
	}
}

.clear {
	clear: both;
}

.wrap.user-registration div.updated,
.wrap.user-registration div.error {
	margin-top: 10px;
}

/**
	 * Form Builder Styles
	 **/
.user-registration-membership_page_add-new-registration,
.toplevel_page_user-registration {
	#wpfooter {
		display: none; //Hide WP footer on form builder page
	}

	.ur-form-container {
		margin: 0;

		.ur-loading-container {
			position: fixed;
			left: 160px;
			right: 0;
			top: 0;
			bottom: 0;
			background: $white;
			display: flex;
			z-index: 9;

			.ur-circle-loading {
				margin: auto;
				left: 30px;
			}
		}

		#menu-management {
			margin-top: 0;

			.menu-edit {
				position: fixed;
				left: 160px;
				right: 0;
				border: none;
				box-shadow: none;
				margin-bottom: 0;
			}
		}

		// Form Builder Fullscreen mode
		#ur-full-screen-mode {
			&.closed {
				.ur-fs-close-label {
					display: none;
				}
			}

			&.opened {
				.ur-fs-open-label {
					display: none;
				}
			}
		}
	}

	#menu-management-liquid {
		margin-top: 0;
		margin-left: -20px;
		min-width: calc(100% + 20px);
	}

	#nav-menu-header {
		padding: 12px;
		display: flex;
		align-items: center;
		position: relative;
		border-color: $border_color;
		background-color: $white;
		z-index: 9;

		.ur-brand-logo {
			border-right: 1px solid $border_color;

			img {
				width: 32px;
				height: 32px;
				margin-right: 8px;
				display: flex;
			}
			a {
				text-decoration: none;
				border: none;
			}
			a:focus {
				outline: none;
				box-shadow: none;
			}
		}

		//  &::before,
		//  &::after {
		// 	 content: "";
		// 	 display: flex;
		// 	 position: absolute;
		// 	 left: 0;
		// 	 right: 0;
		// 	 bottom: 0;
		// 	 background: $white;
		//  }

		//  &::before {
		// 	 top: 0;
		// 	 z-index: -1;
		//  }

		//  &::after {
		// 	 height: 10px;
		// 	 box-shadow: 0px 4px 8px transparentize($gray_base, 0.92);
		// 	 z-index: -2;
		//  }
	}

	.major-publishing-actions {
		clear: both;
		line-height: 28px;
		margin-left: auto;

		.publishing-action {
			text-align: right;
			float: right;

			input {
				&.code {
					width: 280px;
					height: 33px;
					padding: 0 $spacing_6px;
					margin: 0;
					border-color: $grey-50;
					background: $blue-25;
					border-radius: 3px 0 0 3px;
				}
			}
		}
		.login-forms-shortcode-action {
			input {
				&.code {
					font-size: large;
					width: 320px;
					height: 33px;
					padding: 0 $spacing_6px;
					margin: 0;
					border-color: $grey-50;
					background: $blue-25;
					border-radius: 3px 0 0 3px;
					display: inline;
				}
			}
		}

		#copy-shortcode {
			margin-left: -5px;
			border-radius: 0 4px 4px 0;
			background: $blue-50 !important;
			border-color: $grey-50 !important;

			svg {
				fill: $white;
				margin-bottom: 5px;
				vertical-align: middle;
			}
		}
	}
}

/**
	* Backbone modal dialog
	*/
.ur-backbone-modal {
	* {
		box-sizing: border-box;
	}

	.ur-backbone-modal-content {
		position: fixed;
		background-color: $white;
		z-index: 100000;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 500px;

		article {
			overflow: auto;
		}
	}

	&.ur-backbone-modal-content {
		width: 75%;
		min-width: 500px;
	}

	.select2-container {
		width: 100% !important;
	}
}

.ur-backbone-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 360px;
	background-color: $gray_base;
	opacity: 0.7;
	z-index: 99900;
}

.ur-backbone-modal-main {
	padding-bottom: 55px;

	header,
	article {
		display: block;
		position: relative;
	}

	.ur-backbone-modal-header {
		height: auto;
		background-color: $color_gray_five;
		padding: 1em 1.5em;
		border-bottom: 1px solid $border_color;

		h1 {
			margin: 0;
			font-size: 18px;
			font-weight: $bold;
			line-height: 1.5em;
		}

		.modal-close-link {
			cursor: pointer;
			color: #777;
			height: 54px;
			width: 54px;
			padding: 0;
			position: absolute;
			top: 0;
			right: 0;
			text-align: center;
			border: 0;
			border-left: 1px solid $border_color;
			background-color: transparent;
			transition:
				color 0.1s ease-in-out,
				background 0.1s ease-in-out;

			&::before {
				font: normal 22px/50px "dashicons" !important;
				color: $color_gray_two;
				display: block;
				content: "\f335";
				font-weight: $light;
			}

			&:hover,
			&:focus {
				background-color: $color_gray_four;
				border-color: #ccc;
				color: $gray_base;
			}

			&:focus {
				outline: none;
			}
		}
	}

	article {
		padding: 1.5em;

		p {
			margin: 1.5em 0;
		}

		p:first-child {
			margin-top: 0;
		}

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

		.pagination {
			padding: 10px 0 0;
			text-align: center;
		}
	}

	footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 1em 1.5em;
		background-color: $color_gray_five;
		border-top: 1px solid #dfdfdf;
		box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);

		.inner {
			float: right;
			line-height: 23px;

			.button {
				margin-bottom: 0;
			}
		}
	}
}

.user-registration {
	textarea[disabled="disabled"] {
		background: #dfdfdf !important;
	}

	table.form-table {
		margin: 0;
		position: relative;

		fieldset {
			margin-top: 4px;

			img.help_tip,
			.user-registration-help-tip {
				margin: -3px 0 0 5px;
			}

			p.description {
				margin-bottom: 8px;
			}

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

		th {
			position: relative;
			padding-right: 24px;

			label {
				display: inline-block;
			}

			img.help_tip,
			.user-registration-help-tip {
				margin: 0 -24px 0 0;
				float: right;
			}
		}

		.select2-container {
			display: block;
			max-width: 350px;
			margin-bottom: 3px;
		}

		.forminp-radio ul {
			margin: 0;

			li {
				line-height: 1.4em;
			}
		}

		textarea.input-text {
			height: 100%;
			min-width: 150px;
			display: block;
		}

		input.regular-input {
			width: 25em;
		}

		textarea.wide-input {
			width: 100%;
		}

		.help_tip,
		.user-registration-help-tip {
			padding: 0;
			margin: -4px 0 0 5px;
			vertical-align: middle;
			cursor: help;
			line-height: 1;
		}

		.wp-list-table .user-registration-help-tip {
			float: none;
		}

		.iris-picker {
			z-index: 100;
			display: none;
			position: absolute;
			border: 1px solid #ccc;
			border-radius: 3px;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

			.ui-slider {
				border: 0 !important;
				margin: 0 !important;
				width: auto !important;
				height: auto !important;
				background: none transparent !important;

				.ui-slider-handle {
					margin-bottom: 0 !important;
				}
			}
		}

		.colorpickpreview {
			padding: 3px;
			padding-left: 20px;
			border: 1px solid $border_color;
			border-right: 0;
		}

		.colorpick {
			border-left: 0;
		}

		.image_width_settings {
			vertical-align: middle;

			label {
				margin-left: 10px;
			}
		}

		.dashicons {
			margin-bottom: 2px;
			vertical-align: middle;
		}

		.image-upload {
			td {
				display: flex;
				align-items: baseline;
				flex-direction: column;
				gap: 10px;
			}
		}

		.radio-image {
			td {
				ul {
					display: flex;
					column-gap: 30px;

					li {
						label {
							display: flex;
							flex-direction: column;
							align-items: center;
							max-width: 175px;
							row-gap: 16px;
							border: 1px solid $border_color;
							border-radius: 2px;
							padding: 8px 16px;

							&.selected {
								border-color: #475bb2;
								background-color: #475bb230;
								color: #475bb2;
								font-weight: $semi_bold;
							}

							input {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}

.ur-registered-from {
	display: flex;
	background-color: $white;

	* {
		box-sizing: border-box;
	}

	*:focus {
		outline: 0;
	}

	a {
		text-decoration: none;
	}

	h3,
	h4 {
		color: $gray_base;
		font-weight: $medium;
	}

	h4 {
		font-size: 16px;
	}

	.ur-field {
		label {
			font-weight: $regular;
			word-break: break-all;

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

		input {
			&[type="radio"],
			&[type="checkbox"] {
				opacity: 1;
				box-shadow: none;
				border-color: $border_color;
			}
		}

		&.user-registration-image-options {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: $spacing_12px;

			label {
				border: $border_width solid #ececec;
				padding: $spacing_6px;
				border-radius: $border_radius_4;
				margin-bottom: 0;

				.user-registration-image-choice {
					width: 100%;
					height: 100px;
					display: block;
					margin-bottom: $spacing_8px;
					position: relative;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: $border_radius_2;
					}
				}

				input {
					&[type="radio"],
					&[type="checkbox"] {
						display: none;
					}
				}

				&.ur-image-choice-checked {
					color: #0693e3;
					border-color: #0693e3;

					.user-registration-image-choice {
						&::before {
							content: "";
							position: absolute;
							width: 100%;
							height: 100%;
							background: #222;
							opacity: 0.45;
							z-index: 1;
						}

						&::after {
							content: "";
							position: absolute;
							background: #00be34;
							border-radius: 1px;
							width: 12px;
							height: 12px;
							top: 8px;
							right: 8px;
							z-index: 2;
						}
					}
				}
			}
		}
	}

	.wp-picker-container {
		.wp-picker-input-wrap {
			label {
				display: inline-block;
				width: auto;

				input.wp-color-picker {
					height: auto;
					padding: 3px 5px;
				}
			}
		}
	}

	.ur-no-pointer {
		pointer-events: none;
	}

	.ur-registered-item {
		cursor: move;
		color: $grey-300;
		font-size: 12px;
		border-radius: $border_radius_4;
		margin: 0 $spacing_8px $spacing_16px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		width: calc(33.3333% - 16px);
		background: #fbfbfd;
		border: $border_width solid $blue-50;
		height: 100px;

		.ur-icon {
			font-size: 26px;
			margin-bottom: $spacing_4px;
		}

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

		&.ui-draggable-dragging {
			width: 110px !important; // Inherit js styles
			z-index: 9 !important;
		}

		&.ui-draggable-disabled {
			position: relative;
			opacity: 0.5;

			&::before {
				content: "";
				background-image: url("../images/icons/lock-icon.png");
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				position: absolute;
				width: 16px;
				height: 16px;
				top: $spacing_8px;
				right: $spacing_8px;
			}

			&.ur-upgradable-field {
				cursor: pointer !important;
				opacity: 1;
				color: $grey-100;

				&::before {
					content: "";
					background-image: url("../images/icons/ur-pro-icon.png");
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100%;
					position: absolute;
					border-radius: 2px;
					width: 16px;
					height: 16px;
					top: $spacing_8px;
					right: $spacing_8px;
				}

				&:hover {
					color: $grey-100;
				}
			}

			&:hover {
				color: $grey-300;
				background: #fbfbfd;
				border-color: $blue-50;
				cursor: not-allowed;
			}
		}
	}

	.ur-registered-inputs {
		width: 412px;

		@media (max-width: 1199px) {
			width: 360px;
		}

		.ur-tabs {
			border: 0 none;
			padding: 0;
			font-size: 14px;

			.ur-tab-contents {
				.ur-tab-content {
					// padding: 0;
					&#ur-tab-field-settings {
						margin-top: -$spacing_32px;
						margin-left: -$spacing_12px;
						margin-right: -$spacing_12px;
					}

					#integration_settings_back {
						cursor: pointer;
					}

					.form-settings-tab-back {
						margin-bottom: 0;
						border-radius: 0;
						padding: $spacing_18px $spacing_24px;
						border-bottom: $border_width solid #ececec;
						background: transparent;
						font-size: 15px;
						font-weight: $semi_bold;
						gap: $spacing_16px;
						line-height: 150%;
						display: flex;
						align-items: center;
						color: $grey-400;
						transition: all 0.3s;

						&::before {
							content: "";
							background-image: url("../images/icons/ur-right-arrow.svg");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							width: 18px;
							height: 18px;
							transform: rotate(180deg);
						}

						&:hover {
							&::before {
								filter: brightness(0) saturate(100%) invert(35%)
									sepia(13%) saturate(3079%)
									hue-rotate(194deg) brightness(96%)
									contrast(89%);
							}
						}
					}

					.form-settings-tab {
						margin-bottom: 0;
						border-radius: 0;
						padding: $spacing_18px $spacing_24px;
						border-bottom: $border_width solid #ececec;
						background: transparent;
						font-size: 15px;
						font-weight: $regular;
						line-height: 150%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-right: $spacing_16px;

						&::after {
							content: "";
							background-image: url("../images/icons/ur-right-arrow.svg");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							width: 18px;
							height: 18px;
						}

						&.active {
							background: #fafafa;
							color: $primary_color;
							font-weight: $semi_bold;
							position: relative;

							&::before {
								content: "";
								background: $primary_color;
								width: 4px;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
							}

							&::after {
								filter: invert(36%) sepia(58%) saturate(767%)
									hue-rotate(193deg) brightness(84%)
									contrast(88%);
							}
						}

						&.integration-lists-settings {
							.integration-detail {
								display: flex;
								align-items: center;
								gap: 14px;

								.integration-status {
									position: relative;

									&::before {
										content: "";
										position: absolute;
										width: 8px;
										height: 8px;
										background: #e1e1e1;
										border-radius: 1px;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
									}

									&::after {
										content: "";
										display: block;
										width: 16px;
										height: 16px;
										border: 1px solid #e1e1e1;
										border-radius: 2px;
									}

									&.ur-integration-account-connected {
										&::before {
											background: #4cc741;
										}

										&::after {
											border-color: #4cc741;
										}
									}
								}

								.logo {
									width: 40px;
									height: 40px;
									display: flex;
									overflow: hidden;
									margin: 0;
									border-radius: 4px;
									align-items: center;
									border: 1px solid #ced4da;

									img {
										width: 38px;
										height: 38px;
										display: block;
									}
								}

								h3 {
									font-size: 15px;
									line-height: 150%;
									margin: 0;
									font-weight: $medium;
								}
							}

							.form-settings-sub-tab {
								padding: 0px;
								background: $grey-0;
								align-items: baseline;
							}
						}
					}
				}

				&.ps--active-y {
					.ur-tab-content {
						padding: $spacing_32px $spacing_12px $spacing_12px;
					}
				}
			}

			.ur-tab-content {
				.ur-general-setting-block {
					.ur-toggle-heading {
						margin-top: 0;
					}
				}
			}

			.ur-tab-lists {
				background-color: $color_gray_five;
				background-image: none;
				padding: 0;
				border-radius: 0;
				margin: 0;
				display: flex;
				justify-content: space-between;
				border-bottom: none;
				border-top: 0 none;
				border-right: 0 none;
				border-left: 0 none;

				li {
					background-color: transparent;
					background-image: none;
					border-radius: 0;
					margin: 0;
					margin-bottom: -2px;
					padding: 0px;
					border: 0;
					flex: 1;
					text-align: center;
					border-top: 4px solid transparent;
					transition: all 0.3s ease-in-out;

					&.active {
						margin-bottom: 0;
						padding-bottom: 0;
					}

					a {
						float: none;
						text-decoration: none;
						margin: 0;
						border: none;
						display: block;
						color: $grey-400;
						background: $grey-25;
						padding: $spacing_8px $spacing_16px $spacing_14px;
						font-weight: $medium;
						cursor: pointer;
						font-size: 15px;

						&:focus {
							box-shadow:
								0 0 0 0px transparent,
								0 0 0px 0px transparent;
						}

						&.active {
							background-color: $white;
							color: $primary_color;
							line-height: 24px;
						}
					}

					&.ui-state-hover,
					&.ui-state-active {
						border-top: 4px solid $primary_color;
					}

					&.ui-state-disabled {
						position: relative;
						opacity: 1;

						&:hover {
							&::before {
								content: "";
								position: absolute;
								border-bottom: 15px solid #383838;
								border-left: 12px solid transparent;
								border-right: 12px solid transparent;
								bottom: 0;
								left: 50%;
								transform: translateX(-50%);
								z-index: 1;
							}

							&::after {
								content: "You need to select a \A field in order to enable/ \A view this option";
								white-space: pre;
								text-align: left;
								position: absolute;
								width: 175px;
								height: auto;
								z-index: 9;
								bottom: -80px;
								left: 50%;
								transform: translateX(-50%);
								background: #383838;
								color: #fff;
								font-size: 14px;
								line-height: 150%;
								border-radius: $border_radius_5;
								padding: $spacing_10px $spacing_12px;
							}
						}

						a {
							// cursor: not-allowed;
							opacity: 0.25;
						}
					}
				}
			}

			.ur-tab-contents {
				height: calc(100vh - 130px);
				position: relative;
				overflow-y: auto;
			}

			.ur-tab-content {
				padding: $spacing_32px $spacing_12px $spacing_12px;

				.ur-search-fields {
					display: flex;
					align-items: center;
					position: relative;
					margin-bottom: 26px;

					input.ur-type-text {
						height: 40px;
						font-size: 14px;
						background: transparent;
						border-color: $grey-100;
						border-radius: $border_radius_4;
						padding: $spacing_10px $spacing_16px;
						color: $grey-200;

						&::placeholder {
							color: $grey-200;
						}
					}

					svg {
						position: absolute;
						right: 16px;
						width: 18px;
						height: 18px;
						fill: $grey-200;
					}
				}

				.ur-fields-not-found {
					text-align: center;
					margin-top: 2.85em;

					.ur-fields-not-found-title {
						font-size: 1.7em;
					}
				}

				&#ur-tab-registered-fields,
				&#ur-tab-field-options {
					background-color: $white;
				}

				h2 {
					margin: $spacing_16px 0 $spacing_14px;
					font-size: 15px;
					line-height: 150%;
					font-weight: $medium;
					color: $grey-400;

					~ hr {
						border-top: 1px solid $border-color;
						margin: 0;
					}
				}

				.ur-registered-list {
					display: flex;
					flex-wrap: wrap;
					width: calc(100% + 16px);
					margin-left: -$spacing_8px;
					margin-top: $spacing_18px;

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

		.ur-toggle-heading {
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row-reverse;

			&:before {
				content: "";
				background-image: url("../images/icons/ur-arrow-down.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				float: right;
				//  transform: rotate(180deg);
				width: 18px;
				height: 18px;
				transition: all 0.3s ease-in-out;
			}

			&.closed {
				&:before {
					transform: rotate(180deg);
				}
			}
		}
	}

	input[type="text"],
	input[type="date"],
	input[type="email"],
	input[type="file"],
	input[type="month"],
	input[type="number"],
	input[type="phone"],
	input[type="password"],
	input[type="tel"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	input[type="timepicker"],
	textarea,
	.ui-widget select,
	select {
		width: 100%;
		max-width: 100%;
		height: 32px;
		line-height: initial;
		display: block;
		color: $color_gray_one;
		font-size: 13px;
		padding: 4px 8px;
		border-radius: 3px;
		border: 1px solid $border_color;
		box-shadow: 0 0 0 transparent;

		&:focus {
			border-color: $primary_color;
		}

		&::placeholder {
			color: $color_gray_three;
		}

		&:disabled {
			color: $color_gray_three;
			background: $color_gray_five;
		}
	}

	select {
		padding-right: 0;
	}

	label {
		display: block;
		width: 100%;
		margin-bottom: 8px;
		color: $color_gray_one;
		font-size: 13px;
		font-weight: $medium;
		line-height: 1.25;
	}

	textarea {
		padding: 10px;
		height: 100px;
	}

	.ur-builder-wrapper {
		position: relative;
		flex: 1;
		height: calc(100vh - 89px);
		background: #f1f4f8;
		border-left: 1px solid $border_color;
		overflow-y: auto;

		input[type="text"],
		input[type="date"],
		input[type="email"],
		input[type="file"],
		input[type="month"],
		input[type="number"],
		input[type="phone"],
		input[type="password"],
		input[type="tel"],
		input[type="time"],
		input[type="url"],
		input[type="week"],
		input[type="timepicker"],
		textarea,
		select {
			&:disabled {
				background: $white;
			}
		}

		.ur-builder-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&.ur-multipart {
			.ur-button-quick-links {
				bottom: 60px;
			}

			.ur-builder-wrapper-footer {
				.button.button-style-customizer {
					bottom: 124px;
				}
			}
		}
	}

	.ur-selected-inputs {
		box-sizing: border-box;
		padding: 0 20px;

		.ur-single-row {
			border-radius: 3px;
			position: relative;
			border: 1px solid transparent;

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

			.ur-grids {
				display: flex;
				position: absolute;
				right: 0;
				z-index: 1;
				opacity: 0;
				transition: all 0.2s ease-in;

				button {
					display: flex;
					border-radius: 0;
					border: 0;
					background-color: $color_gray_two;
					color: $white;
					font-size: 16px;
					height: auto;
					width: auto;
					cursor: pointer;
					margin: 0;
					padding: 4px 6px;
					line-height: 1;
					transition: all 0.1s ease-in-out;

					svg {
						width: 16px;
						height: 16px;
						font-size: 16px;
						fill: $grey-0;
						margin-left: 1px;
					}

					&:before {
						font-family: "dashicons";
					}

					&.ur-remove-row {
						&:hover {
							background: $red;
						}
					}

					&:hover {
						background: $primary_color;
					}

					&:first-child {
						// border-radius: 3px 0 0 3px;
						border-radius: 0 0 0 $border_radius_7;
						border-right: 1px solid transparentize($white, 0.8);
					}

					&:nth-child(2) {
						border-radius: 0 $border_radius_7 0 0;
						// background: $grey-50;
						border-left: $border_width solid $grey-0;
					}
				}

				.ur-toggle-grid-content {
					background: $white;
					padding: 1rem;
					position: absolute;
					top: 40px;
					right: 0;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					white-space: nowrap;
					border: 1px solid $border_color;
					border-radius: 4px;
					box-shadow: 1px 4px 14px 1px transparentize($gray_base, 0.9);

					small {
						font-size: 12px;
						margin-bottom: 0.5rem;
						color: $color_gray-two;
					}

					.ur-grid-selector {
						cursor: pointer;
						display: flex;
						margin-right: 0.5rem;

						svg {
							width: 32px;
							height: 32px;
							fill: $color_gray_two;
						}

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

					&::before {
						content: "";
						width: 8px;
						height: 8px;
						border: solid $border_color;
						border-width: 1px;
						border-left: transparent;
						border-bottom: transparent;
						position: absolute;
						top: -5px;
						right: 36px;
						background: $white;
						transform: rotate(-45deg);
					}
				}
			}

			.ur-grid-lists {
				width: 100%;
				display: flex;
				text-align: center;
				box-sizing: border-box;
				justify-content: center;
				border: 1px solid transparent;
				border-radius: 4px;
				transition: all 0.2s ease-in;
				border-left: 0;

				.ur-grid-list-item {
					display: inline-block;
					text-align: left;
					border: 0 none;
					padding: 15px;
					flex: 1;
					border: 1px solid transparent;
					border-radius: 4px;
					transition: all 0.2s ease-in;

					.ur-selected-item {
						margin-bottom: 5px;
						position: relative;
						padding: 15px;
						cursor: move;
						border: 1px solid transparent;
						border-radius: 4px;
						transition: border-color 0.35s;

						.select2-container {
							width: 100% !important;

							.select2-search--inline {
								.select2-search__field {
									height: auto;
									min-width: 10px;
									background: none;
									margin: 0;
								}
							}
						}

						.ur-input-type-signature {
							canvas {
								background: transparentize($white, 0.5);
								border: 1px solid $border_color;
							}
						}

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

						&:hover,
						&.ur-item-active {
							background: $white;
							border: 1px solid $primary_color;
						}

						&.ui-sortable-helper {
							box-shadow: 0 0 10px 5px
								transparentize($gray_base, 0.9);
						}

						&.ui-sortable-placeholder {
							visibility: visible !important;
							border: 1px dashed $color_gray_three;
							background-color: $color_gray_five;
						}

						.ur-action-buttons {
							display: none;
							position: absolute;
							right: 10px;
							width: 50px;
							text-align: center;
							padding: 0;
							font-size: 10px;
							top: 10px;
							color: $color_gray_three;
							top: 0;
							right: -1px;

							span {
								cursor: pointer;
								font-size: 16px;
								height: auto;

								&:hover {
									color: $primary_color;
								}

								&:first-child {
									background: #676f8a;
									padding: $spacing_4px;
									width: 24px;
									height: 24px;
									border-radius: 0 0 0 $border_radius_7;

									&::before {
										// content: "";
										// background-image: url("../images/icons/copy-icon.svg");
										// background-repeat: no-repeat;
										// background-position: center;
										// background-size: 100%;
										// width: 14.22px;
										// height: 14.22px;
										// display: block;
										color: $grey-0;
									}
								}

								&:last-child {
									background: #676d8a;
									padding: $spacing_4px;
									width: 24px;
									height: 24px;
									border-radius: 0 $border_radius_7 0 0;
									border-left: $border_width solid $grey-0;

									&:before {
										content: "\f335" !important;
										color: $grey-0;
									}
								}
							}

							&:hover {
								.ur-action-buttons {
									display: block;
									top: 0;
									right: -3px;
								}
							}

							.ur-trash {
								&:hover {
									color: $red;
								}
							}
						}

						.ur_label_top_left {
							text-align: left;
						}

						.ur_label_center {
							text-align: center;
						}

						.ur_label_top_right {
							text-align: right;
						}

						.ur_label_disabled {
							display: none;
						}

						&:hover {
							.ur-action-buttons {
								display: block;
							}
						}
					}

					> li.ur-item-dragged {
						list-style: none;
						width: 100%;
						text-align: center;
						height: 60px !important;
						box-sizing: border-box;

						.spinner {
							float: none;
						}
					}

					.user-registration-dragged-me {
						display: table;
						width: 100%;
						height: 100%;

						.user-registration-dragged-me-text {
							display: table-cell;
							vertical-align: middle;
							text-align: center;

							p {
								display: inline-block;
								position: relative;
								color: $color_gray_three;
								padding-left: 26px;
								padding-top: 8px;

								&::before {
									position: absolute;
									font-family: "Dashicons";
									content: "\f545";
									font-size: 22px;
									left: 0;
									top: 0;
								}
							}
						}

						&:empty {
							padding: 15px;
							text-align: center;
							border-radius: 4px;
							border: 1px dashed $color_gray_three;
							background-color: $color_gray_five;

							&::before {
								content: "\f132";
								font-size: 32px;
								color: $color_gray_three;
								width: 32px;
								height: 32px;
								font-family: dashicons;
								display: table-cell;
								vertical-align: middle;
							}
						}
					}

					&.ur-sortable-active {
						.ur-registered-item {
							margin-bottom: 0;
						}

						.user-registration-dragged-me {
							display: none;
						}
					}

					&:first-child {
						border-radius: 4px 0 0 4px;
					}

					&:nth-child(2) {
						border-radius: 0;
					}

					&:nth-child(3) {
						border-radius: 0 4px 4px 0;
					}
				}
			}

			&:hover {
				.ur-grids {
					opacity: 1;
				}

				.ur-grid-lists {
					background: $white;
					border: 1px solid $color_gray_three;

					.ur-grid-list-item {
						border-left: 1px solid $color_gray_three;

						&:first-child {
							border-color: transparent;
						}
					}
				}
			}
		}

		.ur-row-buttons {
			display: flex;
			justify-content: center;
			margin-top: 10px;

			.button {
				display: block;
				width: auto;
				height: 32px;
				text-align: center;
				font-family: inherit;

				&::before {
					width: 16px;
					height: 16px;
					font-size: 16px;
					margin-right: 10px;
					font-family: dashicons;
					vertical-align: middle;
					padding: 1px 10px 1px 0;
					border-right: 1px solid transparentize($white, 0.7);
				}
			}
		}

		li.ur-registered-item {
			width: 120px !important;

			&.ui-sortable-placeholder {
				margin-left: 0;
				width: 100% !important;
				visibility: visible !important;
				border: 1px dashed $color_gray_three;
				background-color: $color_gray_five;
			}
		}
	}

	.ur-builder-wrapper-footer {
		.button.button-style-customizer {
			height: 48px !important;
			width: 48px !important;
			bottom: 72px !important;
			box-shadow: 1px 2px 8px transparentize($gray_base, 0.85);

			.dashicons {
				font-size: 24px;
				height: 24px;
				width: 24px;
			}
		}

		.ur-button-quick-links {
			width: 48px;
			height: 48px;
			position: fixed;
			cursor: pointer;
			color: $color_gray-one;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 32px;
			bottom: 16px;
			background: $white;
			border: 1px solid $border_color;
			border-radius: 24px;
			box-shadow: 0px 2px 10px transparentize($gray_base, 0.9);
			z-index: 1;

			span {
				font-size: 20px;
				font-weight: $semi_bold;
				margin: 0 auto;
			}
		}

		.ur-quick-links-content {
			position: fixed;
			background: $white;
			padding: 12px 16px;
			border-radius: 4px;
			bottom: 58px;
			right: 30px;
			z-index: 2;
			width: 225px;
			border: 1px solid $border_color;
			box-shadow: 2px 4px 12px transparentize($gray_base, 0.9);

			li {
				margin-bottom: 8px;
			}

			a {
				color: $color_gray_one;

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

	.ur-general-setting,
	.ur-advance-setting {
		margin: $spacing_16px 0;

		.select2-search--inline {
			display: none;
		}
	}

	.ur-advance-setting-block {
		// margin-top: 25px;
		margin-top: 0;
	}

	.form-row {
		.description {
			color: $grey-300;
			margin: $spacing_4px 0;
			display: block;
		}

		.ur-radio-list,
		.ur-checkbox-list {
			label {
				display: inline;
			}
		}
	}

	.ur-general-setting-block,
	.ur-advance-setting-block {
		display: none;
	}

	.add,
	.remove {
		background: $white;
		border: $border_width solid $border_color;
		color: $color_gray_two;
		cursor: pointer;
		display: flex;
		flex: 1 0 32px;
		align-items: center;
		justify-content: center;
		height: 32px;
		max-width: 32px;
		border-radius: $border_radius_4;
		position: relative;

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

		.dashicons {
			line-height: 22px;
		}

		&.add-icon-group,
		&.remove-icon-group {
			flex: unset;
			max-width: unset;
		}
	}

	.ur-options-list {
		li {
			display: flex;
			align-items: center;
			background-color: #f5f5f5;

			.editor-block-mover__control-drag-handle {
				cursor: grab;

				svg {
					fill: $color_gray_two;
				}
			}

			.ur-multiple-choice .ur-subscription-plan {
				.ur-regular-price,
				.ur-selling-price {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: $spacing_8px;
					padding: $spacing_4px;
					input {
						width: 100%;
					}
				}
			}

			&.ur-multiple-choice,
			&.ur-subscription-plan {
				gap: $spacing_8px;

				input {
					margin-right: 0;
				}

				> input[type="text"] {
					width: 80%;
				}
				.ur-regular-price,
				.ur-selling-price {
					position: relative;

					span {
						position: absolute;
						top: 0;
						background: #e7e7e7;
						padding: $spacing_6px $spacing_8px;
						color: $grey-400;
						border-radius: $border_radius_3;
						top: -60px;
						font-size: 13px;
						opacity: 0;
						visibility: hidden;
						transition: all 0.3s ease-in-out;

						&::after {
							content: "";
							border: 8px solid transparent;
							border-top-color: #e7e7e7;
							height: 0;
							left: 50%;
							transform: translateX(-50%);
							position: absolute;
							top: 100%;
							width: 0;
						}
					}

					&:hover {
						span {
							visibility: visible;
							opacity: 1;
						}
					}
				}

				.add {
					margin-right: 0;
				}
			}
		}

		.ui-sortable-handle {
			padding: $spacing_5px;
			border-radius: $border_radius_3;
			border: $border_width solid transparent;
			flex-direction: column;
			gap: 12px;

			&:active {
				padding: $spacing_5px;
				background: $white;
				border: $border_width solid $primary_color;
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
			}

			&.ui-sortable-placeholder {
				background-color: $color_gray_four;
				visibility: visible !important;
			}

			.ur-options-value-wrapper {
				display: flex;
				align-items: center;
				gap: $spacing_8px;
				width: 100%;
			}

			.ur-image-choice-wrapper {
				width: 100%;

				.upload-button {
					padding: $spacing_8px $spacing_12px;
					font-size: 14px;
					width: 100%;
					border: $border_width dashed #d3d3d3;
					border-radius: $border_radius_3;
					color: #616161;
					cursor: pointer;
				}

				.ur-thumbnail-image {
					margin-top: $spacing_16px;
					margin-bottom: $spacing_8px;
				}
			}
		}
	}

	.urcl-rules {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: $spacing_8px;

		> div {
			margin-right: $spacing_8px;
		}

		.urcl-operator {
			width: 78px;
		}

		.urcl-field,
		.urcl-value {
			max-width: 27%;
			flex: 1 0 27%;
		}
	}
}

/**
	 * Tooltips
	 */

.tips {
	cursor: help;
	text-decoration: none;
}

img.tips {
	padding: $spacing_5px 0 0;
}

.ur_error_tip {
	max-width: 20em;
	line-height: 1.8em;
	position: absolute;
	white-space: normal;
	background: $red;
	margin: 1.5em 1px 0 -1em;
	z-index: 9999999;

	&::after {
		content: "";
		display: block;
		border: $border_radius_8 solid $red;
		border-right-color: transparent;
		border-left-color: transparent;
		border-top-color: transparent;
		position: absolute;
		top: -3px;
		left: 50%;
		margin: -1em 0 0 -3px;
	}
}

.tooltipster-base {
	.tooltipster-box {
		// background-color: #4c5477 !important;
		background: $grey-400 !important;
		padding: $spacing_4px $spacing_8px;
		border-radius: $border_radius_2;
		text-align: center;

		.tooltipster-content {
			padding: $spacing_2px 0;
		}

		.tooltipster-content a {
			color: #9ef01a !important;
		}
	}

	.tooltipster-arrow {
		.tooltipster-arrow-uncropped {
			.tooltipster-arrow-border {
				border-top-color: $grey-400 !important;
				border-bottom-color: $grey-400 !important;
				// border-bottom-color: #4c5477 !important;
				// border-top-color: #4c5477 !important;
			}
		}
	}

	&.ur-selling-price-tooltip {
		.tooltipster-box {
			background-color: rgb(244, 73, 73) !important;
			border: rgb(244, 73, 73);
		}
		.tooltipster-arrow {
			.tooltipster-arrow-uncropped {
				.tooltipster-arrow-border {
					border-top-color: rgb(244, 73, 73) !important;
					border-bottom-color: rgb(244, 73, 73) !important;
				}
				.tooltipster-arrow-background {
					border-top-color: rgb(244, 73, 73) !important;
				}
			}
		}
	}
}

/**
	 * Help Tip
	 */
.user-registration-help-tip,
.ur-portal-tooltip {
	color: $color_gray_two;
	display: inline-block;
	font-size: 22px;
	font-style: normal;
	height: 16px;
	line-height: 16px;
	position: relative;
	vertical-align: baseline;
	width: 16px;
	&:not(.no-icon) {
		&::after {
			background-image: url(../images/settings-icons/information.svg) !important;
			content: "";
			background-repeat: no-repeat !important;
			background-size: 100% !important;
			background-position: center;
			display: block;
			width: 8px;
			height: 15px;
			cursor: pointer;
			padding: 4px;
			border-radius: 3px;
		}
	}
}

#smart-tags {
	text-align: center;
}

.form-settings-tab {
	cursor: pointer;
	padding: $spacing_10px $spacing_15px;
	color: $gray_base;
	background: $color_gray_four;
	margin-bottom: $spacing_10px;
	line-height: 1.2;
	border-radius: $border_radius_4;

	&.active {
		background: $primary_color;
		color: $white;
	}
}

#profile-page form#your-profile .flatpickr-input[readonly] {
	background-color: $white;
}

/**
   * Fullscreen Mode
   **/
body {
	&.ur-full-screen-mode {
		margin-top: -$spacing_32px;

		#wpbody-content {
			padding-bottom: 45px;
		}

		#wpwrap {
			#wpcontent {
				margin-left: 0;
				padding-left: 0;

				#wpadminbar {
					display: none;
				}

				#wpbody {
					.ur-tab-content {
						padding: $spacing_20px;
					}

					#menu-management-liquid {
						margin-top: 0;

						.menu-edit {
							margin-bottom: 0;
							box-shadow: none;
							left: 0 !important;
						}
					}
				}
			}

			#adminmenumain {
				display: none;
			}
		}

		.ur-registered-from {
			.ur-registered-inputs {
				.ur-tabs {
					.ur-tab-contents {
						height: calc(100vh - 98px);
					}
				}
			}

			.ur-builder-wrapper {
				height: calc(100vh - 57px);
			}
		}
	}

	/**
		 * User Registration Builder Loading
		 **/
	.ur-circle-loading {
		position: relative;
		width: 100px !important;
		height: 100px !important;
		transform: translate(-50px, -50px) scale(0.5) translate(50px, 50px);

		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 70px;
			left: 70px;
			animation: ur-circle-loading-keyframe 1.5s linear infinite;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: #475bb2;
		}

		&::after {
			animation-delay: -0.75s;
			background: #668fe5;
		}
	}

	.ur-builder-message-container {
		position: fixed;
		top: $spacing_32px;
		left: 0;
		right: 0;
		max-width: 430px;
		margin: 0 auto;
		z-index: 9999;

		.ur-message {
			display: none;
			margin: 0 auto;
			margin-top: 16px;
			transition: all 240ms cubic-bezier(0, 0, 0.2, 1) 0s;
			z-index: 99999;
			height: 0px;

			.ur-success,
			.ur-error {
				background: $white;
				padding: $spacing_8px $spacing_16px;
				border-radius: $border_radius_3;
				border-left: 3px solid;
				position: relative;
				box-shadow: 0px 1px 8px 2px transparentize($gray_base, 0.9);

				p {
					margin: $spacing_8px 0;

					&::before,
					&::after {
						font-family: dashicons;
						width: 20px;
						height: 20px;
						font-size: 20px;
						margin-right: 8px;
						margin-top: -4px;
						line-height: 1;
						display: inline-block;
						vertical-align: middle;
					}
				}
			}

			.ur-success {
				border-color: $green;

				p {
					&::before {
						content: "\f12a";
						color: $green;
					}
				}
			}

			.ur-error {
				border-color: $red;

				p {
					&::before {
						content: "\f534";
						color: $red;
					}
				}
			}

			.dashicons {
				cursor: pointer;
				position: absolute;
				right: 16px;
				top: 50%;
				transform: translateY(-50%);
				line-height: 1;
			}

			&.entered {
				display: block;
				height: 50px;
				animation: 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) 0s 1
					normal both open-message;

				.ur-error {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: $spacing_16px;

					p {
						margin: 0;
					}

					.ur-message-close {
						position: unset;
						transform: unset;
					}
				}
			}

			&.exiting {
				display: block;
				animation: 120ms cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both
					close-message;
			}

			&:first-child {
				margin-top: 1.5rem;
			}
		}
	}

	.main_header {
		font-weight: $semi_bold;
		font-size: 20px;
		line-height: 27px;
	}

	.ur-p-tag {
		padding: 0px $spacing_20px $spacing_18px $spacing_20px;
		margin: 0px;
		font-style: italic;
	}
}

@media screen and (max-width: 1400px) {
	.ur-registered-from {
		.urcl-rules {
			.urcl-field {
				max-width: 61%;
				flex: 1 0 60%;
				margin-bottom: $spacing_5px;
			}

			.urcl-value {
				order: 4;
				max-width: 87%;
				flex: 1 0 86%;
			}

			.add {
				order: 3;
				margin-right: 0;
			}

			.remove {
				order: 5;
			}
		}
	}
}

@media screen and (max-width: 960px) {
	.ur-registered-from {
		.ur-registered-inputs {
			.ur-tabs .ur-tab-content .ur-registered-list .ur-registered-item {
				float: none;
				// width: 100%;
			}

			.ur-single-row .ur-grid-lists,
			.ur-single-row .ur-grid-lists .ur-grid-list-item,
			.ur-single-row .ur-grid-lists .ur-grid-list-item .ur-selected-item {
				padding: $spacing_10px;
			}
		}
	}
}

@media screen and (max-width: 782px) {
	body.user-registration-membership_page_add-new-registration {
		min-width: 0 !important;
	}

	.ur-registered-from {
		flex-direction: column;

		.ur-registered-inputs {
			width: 100%;
			margin-bottom: $spacing_10px;

			.ur-tabs {
				.ur-tab-content {
					.ur-registered-list {
						.ur-registered-item {
							float: left;
							width: 48%;
						}
					}
				}
			}
		}

		.ur-selected-inputs {
			width: 100%;
		}
	}
}

@media screen and (max-width: 600px) {
	.user-registration-membership_page_add-new-registration
		.major-publishing-actions {
		clear: both;
		padding: 10px 0 19px;
		line-height: 28px;

		.ur-form-name {
			width: 100%;
		}

		.publishing-action {
			text-align: left;
			float: none;
			margin-top: $spacing_15px;
		}
	}

	.ur-registered-from .ur-selected-inputs .ur-single-row .ur-grid-lists {
		flex-direction: column;
		display: block;

		.ur-grid-list-item {
			width: 100% !important;

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

.ur-toggle-section {
	&.ur-form-builder-toggle {
		display: flex;
		gap: 5px;
		align-items: center;

		input[type="checkbox"] {
			width: 30px !important;
			height: 16px !important;

			&:focus {
				outline: none;
				box-shadow: none;
			}
		}

		.slider {
			width: 30px !important;
			height: 16px !important;
			border-radius: 99px;
			padding: $spacing_8px;

			&::before {
				height: 12px !important;
				width: 12px !important;
			}
		}
	}

	.user-registration-toggle-form {
		position: relative;
		display: inline-block;
		width: 36px;
		height: 20px;

		input {
			position: relative;
			z-index: 99;
			opacity: 0;
			height: 22px;
			width: 40px;

			&:checked + .slider {
				background-color: #475bb2;
			}

			&:focus + .slider {
				box-shadow: 0 0 1px #2196f3;
			}

			&:checked + .slider::before {
				transform: translateX(16px);
			}
		}

		.slider {
			position: absolute;
			cursor: pointer;
			inset: 0;
			background-color: #dfe1ea;
			transition: 0.4s;

			&.round {
				border-radius: 30px;
			}

			&.round::before {
				border-radius: 50%;
			}

			&::before {
				position: absolute;
				content: "";
				height: 16px;
				width: 16px;
				left: 2px;
				bottom: 2px;
				background-color: white;
				transition: 0.4s;
				border-radius: 100%;
			}
		}
	}
}

.user-registration-setup {
	font-size: 14px;
	max-width: calc(100% - 32px);
	margin: 20px auto;
	background: white;

	@media (min-width: 960px) {
		max-width: 835px;
	}

	@media (min-width: 1280px) {
		max-width: 1100px;
	}

	.ur-brand-logo {
		border-right: 1px solid $border_color;

		img {
			width: 32px;
			height: 32px;
			margin-right: $spacing_8px;
			display: flex;
		}
	}

	a {
		&:focus {
			box-shadow: none;
		}
	}

	.page-title-action,
	.page-title-action:active {
		top: 0;
		margin-left: $spacing_16px;
	}

	.user-registration-setup-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 $spacing_16px;
		background-color: white;
		border-bottom: $border_width solid $color_gray-lighten;

		@media only screen and (max-width: 768px) {
			padding-top: $spacing_16px;
		}

		.user-registration-logo {
			display: flex;
			flex-wrap: wrap;
			padding-right: 1em;
			border-right: $border_width solid $color_gray-lighten;
			margin-right: 1em;
		}

		h4 {
			margin-left: $spacing_15px;
		}

		.user-registration-tab {
			margin-left: auto;

			@media only screen and (max-width: 768px) {
				width: calc(100% + 32px);
				flex: 0 0 calc(100% + 32px);
				margin-top: $spacing_16px;
				margin-right: -$spacing_16px;
				margin-left: -$spacing_16px;
				border-top: $border_width solid $color_gray-lighten;
			}

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

				.user-registration-tab-nav {
					display: inline-flex;
					margin: 0 $spacing_8px 0 0;

					&.active {
						.user-registration-tab-nav-link {
							color: $primary_color;
							border-color: $primary_color;
						}
					}

					.user-registration-tab-nav-link {
						font-weight: $semi_bold;
						padding: $spacing_18px $spacing_8px $spacing_16px;
						color: #494d50;
						text-decoration: none;
						border-bottom: 2px solid transparent;
					}
				}
			}
		}
	}

	.ur-setup-templates {
		display: flex;
		flex-wrap: wrap;
		padding: $spacing_8px;

		.ur-loading {
			margin: 80px auto;
		}

		.ur-template {
			width: 100%;
			background: white;
			border-radius: $border_radius_4;
			position: relative;
			margin: $spacing_12px;

			@media (min-width: 400px) {
				width: calc(50% - 24px);
				flex: 0 0 calc(50% - 24px);
			}

			@media only screen and (min-width: 768px) {
				width: calc(33.333% - 24px);
				flex: 0 0 calc(33.333% - 24px);
			}

			@media (min-width: 960px) {
				width: calc(25% - 24px);
				flex: 0 0 calc(25% - 24px);
			}

			.user-registration-screenshot {
				cursor: pointer;
				padding: $spacing_8px;
				margin: 0;
				min-height: auto;
				position: relative;
				border-radius: $border_radius_4;
				background: $color_gray-more-lighten;

				@media only screen and (min-width: 1280px) {
					min-height: 280px;
				}

				.user-registration-badge {
					position: absolute;
					bottom: 16px;
					right: 16px;
					z-index: 1;
				}

				.form-action {
					display: none;
					position: absolute;
					left: 0;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					z-index: 1;

					.user-registration-btn {
						&:last-child {
							margin-left: $spacing_8px;
						}
					}
				}
			}

			img {
				display: block;
				width: 100%;
			}

			.user-registration-form-id-container {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.user-registration-template-name {
					font-size: 16px;
					font-weight: $semi_bold;
					margin: $spacing_16px 0;
					color: $gray-base;
					text-decoration: none;

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

			&:hover {
				.user-registration-screenshot::after {
					content: "";
					display: block;
					background: transparentize($gray-base, 0.5);
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
				}

				.form-action {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			&:nth-child(even) {
				float: right;
			}

			.ur-template-overlay {
				position: absolute;
				background-color: rgba(0, 0, 0, 0.5);
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
				visibility: hidden;
				transition: 0.5s background-color ease-in-out;
				color: white;
				text-align: center;
				padding: 40% 0;

				.ur-template-select {
					text-decoration: none;
				}

				&.loading {
					.ur-button,
					.ur-button::before,
					.ur-button::after {
						background: white;
						-webkit-animation: load1 1s infinite ease-in-out;
						animation: load1 1s infinite ease-in-out;
						width: 1em;
						height: 4em;
						padding: 0;
						border-radius: 0;
					}

					.ur-button {
						color: white;
						text-indent: -9999em;
						margin: 0 auto;
						position: relative;
						font-size: 11px;
						-webkit-transform: translateZ(0);
						-ms-transform: translateZ(0);
						transform: translateZ(0);
						-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s;
					}

					.ur-button::before,
					.ur-button::after {
						position: absolute;
						top: 0;
						content: "";
					}

					.ur-button::before {
						left: -1.5em;
						-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s;
					}

					.ur-button::after {
						left: 1.5em;
					}

					@-webkit-keyframes load1 {
						0%,
						80%,
						100% {
							box-shadow: 0 0;
							height: 4em;
						}
						40% {
							box-shadow: 0 -2em;
							height: 5em;
						}
					}
					@keyframes load1 {
						0%,
						80%,
						100% {
							box-shadow: 0 0;
							height: 4em;
						}
						40% {
							box-shadow: 0 -2em;
							height: 5em;
						}
					}
				}
			}

			&:hover .ur-template-overlay,
			.ur-template-overlay.loading {
				opacity: 1;
				visibility: visible;
			}

			.ur-button {
				display: inline-block;
				padding: $spacing_15px $spacing_22px;
				background-color: white;
				color: #000;
				font-size: 12px;
				text-transform: uppercase;
				border: none;
				border-radius: 100px;
			}
		}
	}
}

.user-registration-form-template-wrapper {
	.user-registration-form-template {
		&[data-filter-template="free"] {
			.user-registration-template-wrap[data-plan="premium"] {
				display: none;
			}
		}
		&[data-filter-template="premium"] {
			.user-registration-template-wrap[data-plan="free"] {
				display: none;
			}
		}
	}
}

#user-registration-form-templates {
	padding: 20px;
}

.user-registration {
	.swal2-container {
		h3 {
			font-size: 16px;
			font-weight: $regular;
		}

		.user-registration-trashed {
			button {
				margin: 0;
				transition: all 0.3s ease-in-out;

				&.swal2-confirm {
					background-color: #f75259 !important;
					border: $border_width solid #f75259;
					border-radius: $border_radius_3;
					transition: all 0.3s ease-in-out;
				}

				&.swal2-cancel {
					background: transparent;
					border: $border_width solid $grey-200;
					color: $grey-200;

					&:hover {
						border-color: $grey-500;
						color: $grey-500;
					}
				}
			}
		}
		.user-registration-info {
			.swal2-actions {
				display: flex;
				padding: 10px;
			}
			.swal2-html-container {
				p {
					font-size: 1em;
				}
			}
			button {
				transition: all 0.3s ease-in-out;

				&.swal2-confirm {
					background-color: #475bb2 !important;
					border: $border_width solid #475bb2;
					border-radius: $border_radius_3;
					transition: all 0.3s ease-in-out;
				}

				&.swal2-cancel {
					background: transparent;
					border: $border_width solid $grey-200;
					color: $grey-200;

					&:hover {
						border-color: $grey-500;
						color: $grey-500;
					}
				}
			}
		}

		.swal2-popup {
			width: 400px;

			&.user-registration-settings-swal2 {
				width: auto;

				.swal2-cancel {
					color: white;
				}
			}

			&.swal2-icon-error {
				border-top: 6px solid #ff4f55;
			}

			border-radius: $spacing_10px;
			padding: 0;

			&.user-registration-locked-field {
				border-top: 6px solid #72aee6;

				&.swal2-icon-success {
					border-top: 6px solid #a5dc86;
				}

				&.swal2-icon-warning {
					border-top: 6px solid #facea8;
				}
			}

			.swal2-header {
				padding: $spacing_34px $spacing_40px 0 $spacing_40px;

				.swal2-title {
					margin-bottom: $spacing_4px;

					i {
						margin-bottom: $spacing_16px;
					}
				}

				.swal2-close {
					box-shadow: none;
					top: $spacing_2px;
				}
			}

			&.user-registration-swal2-no-button {
				.swal2-header {
					padding-bottom: $spacing_34px;
				}
			}

			.swal2-content {
				.swal2-validation-message {
					margin-left: 0;
					margin-right: 0;
					border-left: 3px solid #f27474;
					justify-content: flex-start;
					padding: $spacing_12px $spacing_6px $spacing_12px
						$spacing_6px;
				}

				.action-buttons {
					a {
						background-color: #475bb2;
						border: none;
						text-decoration: none;
						color: white;
						font-size: 16px;
						font-weight: 600;
					}
				}
			}

			.swal2-actions {
				margin-top: $spacing_24px;
				background: #fcfcfc;
				border-top: $border_width solid $border-color;
				padding: $spacing_16px;
				border-radius: 0 0 $border_radius_13 $border_radius_13;
				justify-content: center;
				flex-direction: row-reverse;
				gap: $spacing_12px;

				.swal2-confirm {
					background: #475bb2;
					transition: all 0.3s ease-in-out;

					&:hover {
						background: #4b68ec;
					}
				}
			}

			&.user-registration-locked-field {
				.swal2-header {
					padding-bottom: $spacing_4px;

					.swal2-close {
						box-shadow: none;
					}
				}

				.swal2-content {
					padding-left: 0;
					padding-right: 0;

					.swal2-html-container {
						padding-left: $spacing_20px;
						padding-right: $spacing_20px;

						.action-buttons {
							margin-left: -$spacing_20px;
							margin-right: -$spacing_20px;
							border-radius: 0 0 $border_radius_10
								$border_radius_10;
							padding: $spacing_16px;
							text-align: right;
							background: #fcfcfc;
							border-top: $border_width solid $border-color;
						}
					}
				}
			}

			.swal2-actions {
				button {
					&:focus {
						box-shadow: none;
					}

					&:focus-visible {
						outline: none;
					}
				}
			}
		}

		.user-registration-recommend-addons {
			margin-bottom: $spacing_20px;
			padding-bottom: $spacing_16px;
			border-bottom: 2px solid $color_gray-more-lighten;

			.bulk-action-notice {
				margin: 0 0 $spacing_20px;

				p {
					padding: 0;
					margin: $spacing_8px 0 !important;
				}

				&.notice-error {
					.button-link {
						text-decoration: none;
						display: flex;
						align-items: center;
						margin-top: $spacing_8px;

						.toggle-indicator {
							display: inline-flex;
						}
					}

					.bulk-action-errors {
						margin-top: 0;
					}
				}
			}

			.plugins-list-table {
				border-radius: $border_radius_4;

				.plugin-name {
					text-align: left;
				}

				.plugin-status {
					float: right;

					span {
						width: 15px;
						height: 15px;
						overflow: hidden;
						border-radius: 50%;
						position: relative;
						vertical-align: top;
						white-space: nowrap;
						text-indent: -9999px;
						display: inline-block;
						border: 2px solid $color_gray-lighten;

						&.active,
						&.activate-now {
							&::after {
								position: absolute;
								left: 50%;
								top: 50%;
								opacity: 1;
								width: 34%;
								height: 50%;
								content: "";
								transform-origin: left top;
								border-top: 2px solid $color_gray-lighten;
								border-right: 2px solid $color_gray-lighten;
								transform: scaleX(-1) rotate(135deg)
									translate(-58%, -40%);
							}
						}

						&.activate-now {
							border-color: $color_gray-lighten;

							&.updating-message {
								border-color: $color_gray-lighten;
								border-left-color: $green;
							}
						}

						&.active {
							border-color: $green;

							&::after {
								border-top: 2px solid $green;
								border-right: 2px solid $green;
							}
						}

						&.updating-message {
							border-left-color: $green;
							animation: spin 0.75s linear infinite;

							&::after {
								content: none;
							}
						}
					}
				}
			}
		}

		.user-registration-template-install-addon,
		.user-registration-template-continue {
			margin-top: $spacing_20px;
			color: $white;
			text-decoration: none;
		}
	}
}

// ----------------------------------------- FORM BUILDER V2 CSS STARTS -----------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------------------------------------------------------
a.button.ur-smart-tags-list-button {
	top: 29px;
	right: 0;
	width: 30px;
	min-height: 30px;
	color: #494d50;
	position: absolute;
	background: #fff;
	border: 1px solid #cdd0d8;
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(35, 40, 45, 0.1);
}

.ur-advance-setting.ur-advance-default_value,
.ur-general-setting.ur-general-setting-hidden-value,
.ur-advance-setting.ur-advance-pattern_value {
	position: relative;
	margin-bottom: 15px;

	& input.ur-general-setting-field,
	& input.ur_advance_setting.ur-settings-pattern_value {
		width: calc(100% - 40px) !important;
		min-height: 27px;
	}

	& a.button.ur-smart-tags-list-button {
		top: 29px;
		right: 0;
		width: 30px;
		min-height: 30px;
		color: #494d50;
		position: absolute;
		background: #fff;
		border: 1px solid #cdd0d8;
		border-radius: 4px;
		box-shadow: inset 0 1px 2px rgba(35, 40, 45, 0.1);
	}

	& .ur-smart-tags-list-button .dashicons-editor-code::before {
		left: 0;
		right: 0;
		margin: 0 auto;
		line-height: 28px;
		position: absolute;
	}

	& .ur-smart-tags-list {
		right: 0;
		z-index: 1;
		max-height: 123px;
		margin-top: -1px;
		width: 230px;
		overflow-y: auto;
		position: absolute;
		background: #fff;
		border-radius: 4px;
		border: 1px solid #cdd0d8;
		box-shadow: 1px 3px 20px 0 rgba(35, 40, 45, 0.2);

		& .ur-smart-tag-title {
			font-weight: 600;
			background: #f6f7f9;
			border-bottom: 1px solid #cdd0d8;
			font-size: 12px;
			padding: 10px;
		}

		& li {
			padding: 4px 10px;
			font-size: 12px;
		}

		&:hover {
			cursor: pointer;
		}
	}
}

.user-registration-membership_page_user-registration-login-forms {
	.ur-admin-page-topnav {
		.ur-editing-tag {
			padding: $spacing_4px $spacing_10px;
			background: $blue-50;
			border-radius: $border_radius_50;
			font-style: italic;
			font-weight: $regular;
			font-size: 12px;
			line-height: 150%;
			color: $grey-400;
		}

		.major-publishing-actions {
			clear: both;
			line-height: 28px;
			margin-left: auto;

			.publishing-action {
				text-align: right;
				float: right;

				input {
					&.code {
						width: 280px;
						height: 33px;
						padding: 0 $spacing_6px;
						margin: 0;
						border-color: $grey-50;
						background: $blue-25;
						border-radius: 3px 0 0 3px;
					}
				}
			}
			.login-forms-shortcode-action {
				input {
					&.code {
						font-size: large;
						width: 320px;
						height: 33px;
						padding: 0 $spacing_6px;
						margin: 0;
						border-color: $grey-50;
						background: $blue-25;
						border-radius: 3px 0 0 3px;
						display: inline;
					}
				}
			}

			#copy-shortcode {
				margin-left: -5px;
				border-radius: 0 4px 4px 0;
				background: $blue-50 !important;
				border-color: $grey-50 !important;

				svg {
					fill: $white;
					margin-bottom: 5px;
					vertical-align: middle;
				}
			}
		}
	}
}

.user-registration-membership_page_add-new-registration,
.toplevel_page_user-registration {
	#nav-menu-header {
		padding-right: $spacing_30px;

		.ur-form-title {
			font-weight: $semi_bold;
			font-size: 16px;
			line-height: 150%;
			color: #414141;
			padding-left: $spacing_18px;
			padding-right: $spacing_8px;
		}

		.ur-editing-tag {
			padding: $spacing_4px $spacing_10px;
			background: $blue-50;
			border-radius: $border_radius_50;
			font-style: italic;
			font-weight: $regular;
			font-size: 12px;
			line-height: 150%;
			color: $grey-400;
		}

		.publishing-action {
			.button-secondary {
				background: $blue-50;
				border-color: $blue-50;
				box-shadow: 0 1px 0 $blue-50;
				font-size: 14px;
				color: $grey-400;
				border-radius: $border_radius_3;

				&:has(span) {
					width: 33px;
					height: 33px;
				}

				// .dashicons-editor-expand,
				// .dashicons-editor-contract {
				// 	&::before {
				// 		color: $grey-400;
				// 	}
				// }

				.ur-fs-open-label,
				.ur-fs-close-label {
					&::before {
						content: "";
						background-repeat: no-repeat;
						background-position: center;
						background-size: 100%;
						display: block;
						top: -1px;
						left: 1px;
						position: relative;
						width: 19px;
						height: 19px;
					}
				}

				.ur-fs-open-label {
					&::before {
						background-image: url("../images/icons/maximize.svg");
					}
				}

				.ur-fs-close-label {
					&::before {
						background-image: url("../images/icons/minimize.svg");
					}
				}
			}

			.button-primary {
				background: $primary_color;
				font-size: 14px;

				&:hover {
					background: $primary_dark;
					border-color: $primary_dark;
				}

				&.ur-copy-shortcode {
					width: 33px;
					height: 33px;
					padding-left: 0;
					padding-right: 0;
					background: $primary_color;
					border-color: $primary_color;
					box-shadow: none;

					&:hover {
						background: $primary_dark;
						border-color: $primary_dark;
					}

					svg {
						width: 18px;
						height: 18px;
						margin-bottom: 3px;
					}
				}
			}
		}
	}
}

.ur-registered-from {
	.ur-registered-inputs {
		position: relative;

		.nav-tab-wrapper {
		}

		.ur-tab-contents {
			#ur-setting-form {
				.ur-general-setting-block {
					margin-bottom: $spacing_36px;

					&:has(.closed) {
						margin-bottom: 0;
					}
				}
			}

			.ur-toggle-content {
				label {
					font-weight: $regular;
					font-size: 14px;
					line-height: 1.3;
					color: $grey-400;
					display: flex;
					align-items: center;
					gap: $spacing_2px;

					.ur-portal-tooltip {
						width: 12px;

						&::after {
							font-size: 18px;
							line-height: unset;
							color: $grey-100;
						}
					}
				}

				input[type="text"],
				input[type="email"],
				input[type="password"],
				input[type="number"] textarea {
					&::placeholder {
						color: $grey-100;
					}
				}

				input {
					padding: $spacing_18px $spacing_12px;
					background: $grey-0;
					border: $border_width solid $border-color;
					border-radius: $border_radius_4;
					font-weight: $regular;
					font-size: 14px;
					line-height: 150%;
					color: $grey-300;
				}
			}
		}

		button#ur-collapse {
			width: 22px;
			height: 41px;
			background: $grey-0;
			position: absolute;
			bottom: $spacing_100px;
			border-style: solid;
			border-width: $border_width $border_width $border_width 0px;
			border-color: $border-color;
			border-radius: 0 $border_radius_3 $border_radius_3 0;
			z-index: 1;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			right: -$spacing_22px;

			svg {
				width: 12px;
				height: 12px;
				display: block;
				position: relative;
				left: -$spacing_2px;
				transition: all 0.3s ease-in-out;
			}

			&:hover {
				svg {
					left: -$spacing_4px;
				}
			}

			&.open {
				width: 24px;
				height: 44px;

				svg {
					transform: rotate(180deg);
					left: -1px;
					width: 14px;
					height: 14px;
				}

				&:hover {
					svg {
						left: 1px;
					}
				}
			}
		}
	}

	.ur-builder-wrapper {
		.ur-selected-inputs {
			padding: $spacing_30px;
			background: $canva-color;

			.ur-login-form-wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.ur-login-shortcode {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 2rem;

				h1 {
					font-weight: bold;
					font-size: 35px;
					margin-bottom: 2rem;
				}

				p {
					font-size: 16px;
				}
				.ur-login-content {
					margin-left: 10rem;
					margin-right: 5rem;
				}
			}
			.ur-login-view-doc {
				margin-top: 5rem;
				a {
					font-size: large;
					text-decoration: underline;
				}
			}
		}

		.ur-builder {
			&-header {
				padding-top: $spacing_10px;
				padding-bottom: $spacing_24px;
				border-bottom: $border_width solid $border-color;
				margin-bottom: $spacing_32px;

				.user-registration-editable-title {
					margin-top: 0 !important;
					margin-bottom: 0 !important;

					.user-registration-editable-title__input {
						font-size: 22px;
						line-height: 130%;
						color: $grey-500;
						padding: $spacing_4px $spacing_8px $spacing_4px
							$spacing_12px;
						margin: 0;
					}
				}
			}

			&-wrapper-content {
				background: $grey-0;
				border-radius: $border_radius_13;
				padding: $spacing_18px $spacing_32px;
				border: $border_width solid $border-color;

				.ur-single-row {
					.ur-grid-lists {
						.ur-grid-list-item {
							padding: $spacing_20px;
						}

						.ur-selected-item {
							padding: $spacing_10px $spacing_14px $spacing_14px;

							&.ur-item-active {
								// background: $blue-25;
							}
						}
					}
					&:hover {
						.ur-grid-lists {
							background: #fcfcfc;
							border-radius: $border_radius_7;
							border-color: #e7e7e7;
							border-left: 0;

							.ur-selected-item {
								&:hover {
									background: $blue-25;
									border: $border_width dashed $primary_color;
									border-radius: $border_radius_7;
								}
							}

							.ur-grid-list-item {
								border-left: $border_width solid #e7e7e7;
							}
						}
					}
				}
			}
		}

		#ur-field-settings {
			background: $grey-0;
			border: $border_width solid $border-color;
			border-radius: $border_radius_13;
			padding: $spacing_18px $spacing_32px;

			#ur-field-all-settings {
				h3 {
					margin: 0 0 $spacing_32px 0;
					font-size: 22px;
					line-height: 130%;
					font-weight: $semi_bold;
					color: $grey-800;
					border-bottom: $border_width solid $border-color;
					padding: $spacing_10px 0 $spacing_24px;
				}

				.form-row {
					// width: 620px;
					width: 100%;
					max-width: 100%;
					margin-bottom: $spacing_20px;

					&#user_registration_form_setting_minimum_password_strength_field {
						margin-bottom: 0;
					}

					.ur-label {
						font-size: 15px;
						line-height: 140%;
						color: $grey-400;
						display: flex;
						align-items: center;
						width: max-content;

						&.checkbox {
							font-size: 14px;
							line-height: 150%;
							font-weight: $regular;
							margin-bottom: 0;
						}

						.user-registration-help-tip {
							&::after {
								font-size: 18px;
								line-height: unset;
								color: $grey-100;
							}
						}
					}

					input[type="text"],
					input[type="email"],
					input[type="number"],
					select {
						height: 38px;
						border-color: $border-color;
						color: $grey-300;
					}

					select {
						background-image: linear-gradient(
								45deg,
								transparent 50%,
								gray 50%
							),
							linear-gradient(135deg, gray 50%, transparent 50%);
						background-position:
							calc(100% - 15px) calc(1em + 2px),
							calc(100% - 10px) calc(1em + 2px),
							calc(100% - 2.5em) 0.5em;
						background-size:
							5px 5px,
							5px 5px,
							1px 1.5em;
						background-repeat: no-repeat;
					}

					.ur-radio-group-list {
						display: flex;
						gap: $spacing_12px;

						&--item {
							label {
								font-size: 14px;
								font-weight: 600;
								color: $grey-300;
								margin-bottom: 0;
								border: $border_width solid $grey-300;
								border-radius: $border_radius_5;
								text-align: center;
								padding: $spacing_10px;
								align-items: center;
								display: flex;
								transition: all 0.3s ease-in-out;

								input {
									display: none;
								}
							}

							&.very-weak {
								&:hover,
								&.active {
									label {
										color: #f25656;
										border-color: #f25656;
										background-color: #fff4f4;
									}
								}
							}

							&.weak {
								&:hover,
								&.active {
									label {
										color: #ee9936;
										border-color: #ee9936;
										background-color: #fffaf5;
									}
								}
							}

							&.medium {
								&:hover,
								&.active {
									label {
										color: #ffc700;
										border-color: #ffc700;
										background-color: #fffcf1;
									}
								}
							}

							&.strong {
								&:hover,
								&.active {
									label {
										color: #4cc741;
										border-color: #4cc741;
										background-color: #f5fff4;
									}
								}
							}

							&.custom {
								&:hover,
								&.active {
									label {
										color: #475bb3;
										border-color: #475bb3;
										background-color: #ebecf1;
									}
								}
							}
						}
					}
				}

				#integration-selection-settings {
					display: flex;
					flex-direction: column;
					gap: $spacing_24px;
					align-items: center;
					padding: $spacing_100px 0px;
					justify-content: center;

					.integration-selection-settings-contents {
						text-align: center;
						display: flex;
						flex-direction: column;
						width: 40%;

						h3 {
							font-size: 22px;
							line-height: 28px;
							font-weight: 600;
							margin: 0px;
							border: none;
							padding: 0px;
							color: #131313;
						}

						p {
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							color: #6b6b6b;
						}
					}
				}

				.integration-lists-settings {
					.form-settings-sub-tab {
						border-bottom: 0;
						margin-bottom: 0;
					}

					.ur-integration-list {
						padding-bottom: $spacing_16px;
						margin-bottom: $spacing_24px;
					}

					.user-registration-notice {
						margin: 0;
						padding: 0;
					}

					.user-registration-card {
						margin: $spacing_4px 0 $spacing_16px !important;

						&:last-child {
							margin-bottom: $spacing_12px !important;
						}

						&__header {
							border-bottom: 0;
							padding-left: $spacing_20px !important;
							padding-right: $spacing_14px !important;

							.user-registration-card__title {
								color: $grey-400;
								font-size: 16px;
								font-weight: $semi_bold;
								line-height: 24px;
							}

							.user-registration-card__button {
								display: flex;
								align-items: center;

								.button {
									display: flex;
									align-items: center;
									justify-content: center;

									svg {
										width: 22px;
										height: 22px;
										margin: 0;
									}
								}
							}
						}

						&__body {
							border-top: 1px solid #e1e1e1;
							padding-left: $spacing_20px !important;
							padding-right: $spacing_20px !important;

							[class*="urmc-mailchimp-"],
							[class*="ur-mailchimp-"] {
								margin-bottom: $spacing_12px;
							}
						}
					}
				}
			}
		}
	}
	.user-registration-help-tip,
	.ur-portal-tooltip {
		&::after {
			width: 16px;
		}
	}
}

#wpcontent {
	.wp-heading-inline {
		font-weight: $semi_bold;
		padding: 0;
		margin: $spacing_20px 0 0;
		font-size: 24px;
		line-height: 120%;
	}

	.user-registration-settings-container {
		margin: $spacing_24px 0 0;

		.user-registration-options-header {
			&--top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&__left {
					display: flex;
					gap: 16px;
					align-items: center;

					h3 {
						margin: 0;
						font-weight: $semi_bold;
						font-size: 24px;
						line-height: 36px;
						color: $grey-500;
					}

					&--icon {
						width: 40px;
						height: 40px;
						background: #edeff7;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 3.75px;

						svg {
							width: 20px;
							height: 20px;

							path {
								fill: #475bb2;
							}
						}
					}
				}

				&__right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: $spacing_10px;

					span.user-registration-toggle-text {
						font-size: 14px;
						line-height: 24px;
						color: #6b6b6b;
						font-weight: 400;
					}
				}
			}

			&--bottom {
				ul {
					display: flex;
					align-items: center;
					gap: $spacing_32px;
					border-bottom: $border_width solid $border-color;
					width: 100%;

					li {
						a {
							font-weight: $regular;
							font-size: 15px;
							line-height: 140%;
							color: $grey-600;
							padding: 0;
							position: relative;
							padding-bottom: $spacing_16px;
							transition: all 0.3s ease-in-out;

							&::before {
								content: "";
								background: $primary_color;
								position: absolute;
								width: 100%;
								height: 3px;
								border-radius: $border_radius_11;
								bottom: 0;
								left: 0;
								opacity: 0;
								transition: all 0.3s ease-in-out;
							}

							&:focus {
								outline: none;
								box-shadow: none;
							}

							&.current,
							&.active {
								font-weight: $semi_bold;
							}

							&:hover,
							&.current,
							&.active {
								color: $primary_color;

								&::before {
									opacity: 1;
								}
							}
						}
					}
				}
			}
		}
	}

	.user-registration-login-form-container {
		.user-registration {
			&__wrap {
				#menu-management-liquid {
					float: none;
				}
				#menu-management {
					.menu-edit {
						position: unset;
					}
				}
				#post-body {
					.ur-registered-from {
						display: flex;
						background-color: transparent;
						.ur-builder-wrapper {
							height: auto;
							overflow-y: unset;
							border-left: 0;
							background: transparent;

							.ur-selected-inputs {
								background: #f0f0f1;
								padding: $spacing_24px;

								.ur-builder-wrapper-content {
									padding: $spacing_20px $spacing_30px
										$spacing_60px;
									border-radius: $border_radius_7;

									.ur-login {
										&-shortcode {
											margin-top: 0;
											display: block;

											h1 {
												margin-bottom: $spacing_12px;
											}

											&--wrapper {
												// width: 45%;
												display: flex;
												align-items: center;
												gap: $spacing_30px;
												// flex-wrap: nowrap;
												flex-wrap: wrap;

												@media (max-width: 1400px) {
													flex-wrap: wrap;
													justify-content: center;
												}

												img {
													margin-left: -$spacing_24px;

													@media (max-width: 1000px) {
														margin-left: 0;
													}

													@media (max-width: 768px) {
														width: 100%;
													}
												}
												.ur-login-content {
													// width: 55%;
													margin-left: 0;
													margin-right: 0;
													padding: $spacing_24px;
													background: #f6f6f6;
													border-radius: $border_radius_7;
													flex: 1;
													p {
														&:first-child {
															margin-top: 0;
														}
													}
													.login-forms-shortcode-action {
														input {
															height: 32px;
															font-size: 15px;
														}

														.ur-copy-shortcode {
															box-shadow: none;
															transition: all 0.3s
																ease-in-out;

															svg {
																path {
																	fill: $primary_color;
																	transition: all
																		0.3s
																		ease-in-out;
																}
															}

															&:hover {
																background: $primary_color !important;

																svg {
																	path {
																		fill: $grey-0;
																	}
																}
															}
														}
													}
												}
											}
										}
										&-view-doc {
											margin-top: $spacing_32px;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 960px) {
	#wpcontent {
		padding-left: 0;
	}

	.user-registration-membership_page_add-new-registration
		.ur-form-container
		#menu-management
		.menu-edit {
		left: $spacing_36px !important;
	}

	.ur-registered-from
		.ur-registered-inputs
		.ur-tab-contents
		button#ur-collapse {
		left: 448px;
	}
}

// Subscription Plan Field > Field Options Design Fix
.ur-registered-from {
	.nav-tab-wrapper {
		.ur-tab-contents {
			.ur-tab-content {
				.ur-general-setting {
					&-options {
						.ur-options-list {
							.ur-subscription-plan {
								flex-direction: column;
								align-items: unset;
								margin-bottom: $spacing_16px;
								padding: $spacing_10px;
								border: $border_width solid #e4e4e4;
								background: #fbfbfb;

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

								&-details {
									display: flex;
									align-items: center;
									gap: $spacing_8px;
								}

								&-sub-details {
									> p {
										display: flex;
										align-items: center;
										gap: $spacing_8px;
										margin-bottom: $spacing_4px;

										select {
											height: 38px;
											padding-left: $spacing_12px;
											padding-right: $spacing_12px;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

// ---------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------------------------------------------------------------------
//------------------------------------------- FORM BUILDER V2 CSS ENDS ------------------------------------------------------------------------

// Users Entries when image choice option is enabled CSS
#your-profile {
	#fieldset-user_registration {
		tbody {
			tr {
				td {
					&:has(.user-registration-user-profile-info) {
						display: grid;
						grid-template-columns: repeat(
							auto-fill,
							minmax(160px, 1fr)
						);
						gap: $spacing_12px;
						width: 760px;

						br {
							display: none;
						}
					}

					.user-registration-user-profile-info {
						input {
							&[type="radio"],
							&[type="checkbox"] {
								display: none;
							}
						}

						.user-registration-image-options {
							display: block;
							border: $border_width solid #d5d5d5;
							border-radius: $border_radius_4;
							padding: $spacing_10px;
							position: relative;

							&:hover {
								color: #0693e3;
								border-color: #0693e3;

								.user-registration-image-choice {
									&::before {
										content: "";
										position: absolute;
										width: 100%;
										height: 100%;
										background: $grey-500;
										opacity: 0.45;
										z-index: 1;
									}

									img {
										transform: scale(1.1);
									}
								}
							}

							.user-registration-image-choice {
								display: block;
								width: 100%;
								height: 100px;
								border-radius: $border_radius_2;
								overflow: hidden;
								position: relative;
								margin-bottom: $spacing_10px;

								img {
									width: 100%;
									height: 100%;
									object-fit: cover;
									border-radius: $border_radius_2;
									transition: all 0.3s ease-in-out;
								}
							}
						}

						input[type="radio"],
						input[type="checkbox"] {
							&:checked ~ label {
								color: #0693e3;
								border-color: #0693e3;

								span {
									&::before {
										content: "";
										position: absolute;
										width: 100%;
										height: 100%;
										background: $grey-500;
										opacity: 0.45;
										z-index: 1;
									}

									&::after {
										content: "";
										position: absolute;
										background: #00be34;
										border-radius: 1px;
										width: 12px;
										height: 12px;
										top: $spacing_8px;
										right: $spacing_8px;
										z-index: 2;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

#ur-smart-tags-selector {
	float: right;
	display: inline-flex;
	gap: 4px;
	align-items: center;
	color: #6b6b6b;
	font-weight: 400;
	font-size: 14px;
	text-decoration: underline;
	padding: 10px 0px;
	cursor: pointer;

	& ~ .select2-container {
		visibility: hidden;
		position: absolute;
		right: 0;
		width: 120px !important;
	}
}

.select2-container {
	&--open {
		&:not(.ur-hide-select2) {
			.ur-select2-dropdown {
				width: 180px !important;

				.select2-search--dropdown {
					width: 98%;
					position: relative;
				}

				.ur-select2-title {
					display: block;
					padding: 4px;
					width: 98%;
					border-radius: 4px;
					color: #383838;

					p {
						padding: 6px 8px;
						background-color: #f4f4f4;
						font-size: 13px;
						font-weight: 600;
						margin: 0px;
					}
				}

				ul {
					&.select2-results__options {
						max-height: 250px !important;
						overflow-y: auto;
						border-top: 1px solid #ccc;

						&::-webkit-scrollbar {
							width: 4px;
						}

						&::-webkit-scrollbar-thumb {
							background-color: #aaa;
							border-radius: 10px !important;
						}

						li {
							&.select2-results__option--highlighted,
							&[data-selected="true"] {
								background: #f8f8fa;
								color: #475bb2;
								border: none;
							}
						}
					}
				}

				.select2-search {
					display: flex;
					align-items: center;
					color: #999999;

					.select2-search__field {
						padding-left: 28px;
					}

					.search-icon {
						position: absolute;
						left: 12px;
						top: 33;
						color: #999;
					}
				}
			}
		}
	}
}

.toplevel_page_user-registration,
body.user-registration {
	#wpcontent {
		padding-left: 0;
	}

	#wpbody-content {
		background: #eff2f6;
		padding-bottom: $spacing_30px;

		#screen-meta-links {
			display: none;
		}
	}
}

.ur-admin-page-topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: $grey-0;
	padding: 0px $spacing_24px;
	border-bottom: $border_width solid #e1e1e1;
	margin-bottom: 25px;

	.ur-page-title__wrapper {
		display: flex;
		align-items: center;
		gap: $spacing_20px;

		&-logo {
			padding: 0px $spacing_20px 0px 0px;
			border-right: 1px solid #e1e1e1;
		}

		&-menu {
			h2 {
				padding: $spacing_24px 0px;
			}

			&__items {
				display: flex;
				gap: 4px;
				margin: 0;

				li {
					font-size: 15px;
					margin-bottom: 0;
					padding: $spacing_24px 0;

					a {
						text-decoration: none;
						color: #1f1f1f;
						padding: $spacing_24px $spacing_16px;
						position: relative;
						transition: all 0.3s;

						&:focus {
							outline: none;
							box-shadow: none;
						}

						&::after {
							content: "";
							background: #475bb2;
							width: 0px;
							height: 3px;
							position: absolute;
							bottom: 0;
							left: 0;
							transition: all 0.3s;
						}

						&:hover,
						&.current {
							color: #475bb2;

							&::after {
								width: 100%;
							}
						}

						&.current {
							font-weight: 600;
						}
					}
				}
			}
		}
	}

	.ur-back-button {
		border-right: $border_width solid $grey-100;
		padding: $spacing_4px $spacing_14px $spacing_4px $spacing_4px;
		display: flex;
		cursor: pointer;

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

	.dashicons {
		&::before {
			color: $grey-400;
		}
	}

	.ur-page-actions {
		display: flex;
		align-items: center;
		gap: $spacing_8px;
		flex-direction: row-reverse;

		a {
			.ur-button-primary {
				border-radius: $border_radius_3;
				background: $primary_color;
				padding: $spacing_6px $spacing_12px;
				font-size: 14px;
				line-height: 150%;
				color: $grey-0;
				transition: all 0.3s ease-in-out;

				&:hover {
					background: darken($primary_color, 10%);
				}
			}
		}

		> .ur-button-primary {
			color: $grey-400;
			font-size: 14px;
			font-weight: 400;
			line-height: 18px;
			background: #eaeaea;
			padding: $spacing_8px $spacing_12px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: $spacing_6px;
			border-radius: $border_radius_3;
			border: $border_width solid #eaeaea;
			cursor: pointer;
			transition: all 0.3s ease-in-out;

			svg {
				width: 14px;
				height: 14px;

				path {
					fill: $grey-400;
				}
			}

			&:hover {
				background: #e1e1e1;
				border-color: #e1e1e1;
			}
		}
	}
}

.user-registration-list-table-container {
	#user-registration-list-table-page {
		max-width: 100%;
		margin-left: $spacing_20px;
		margin-right: $spacing_20px;
	}
}

.user-registration-login-form-container {
	.ur-form-container {
		#menu-management-liquid {
			margin-left: 0;
			min-width: 100%;

			//  .ur-selected-inputs {
			// 	 padding-left: $spacing_20px !important;
			// 	 padding-right: $spacing_20px !important;
			//  }
		}
	}
}

#user-registration-list-table-page {
	max-width: 1280px;
	margin: 25px auto;
	padding: $spacing_24px;
	border-radius: $border_radius_7;
	background: $grey-0;

	.user-registration-list-table-header {
		display: flex;
		gap: 15px;
		align-items: center;
		margin-bottom: 15px;

		a {
			padding: 6px 14px;
			border-radius: 3px;
			border: 1px solid #475bb2;
			background: #f6f7f7;
			color: #475bb2;
			font-size: 14px;
			font-weight: 500;
			line-height: 150%;
			transition: all 0.3s ease-in-out;
			text-decoration: none;
		}
	}

	#user-registration-list-filters-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: $spacing_20px;
		border-bottom: $border_width solid #dcdcdc;
		padding-bottom: $spacing_24px;
		margin-bottom: $spacing_24px;

		ul.subsubsub {
			font-size: 15px;
		}

		#user-registration-pro-users-filters {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: $spacing_12px;
			padding: 0;
			margin-top: 0;

			li {
				div {
					p {
						display: none;
						margin: 0;
					}

					select {
						min-height: 36px;
						padding: $spacing_2px $spacing_12px;
						border-radius: $border_radius_4;
						border-color: $grey-100;
						min-width: 130px;

						&:hover {
							color: $primary_color;
						}

						&:focus {
							box-shadow: none;
							border: $border_width solid $primary_color;
						}
					}
				}
			}

			.user-registration-users-filter-btns {
				display: flex;
				align-items: center;
				gap: $spacing_8px;

				button {
					cursor: pointer;
					transition: all 0.3s ease-in-out;

					&[type="submit"] {
						padding: $spacing_6px $spacing_14px;
						border-radius: $border_radius_3;
						border: $border_width solid $primary_color;
						background: $primary_color;
						color: $grey-0;
						font-size: 14px;
						font-weight: $regular;
						line-height: 150%;
						letter-spacing: 0.3px;

						&:hover {
							background: darken($primary_color, 10%);
							border-color: darken($primary_color, 10%);
						}
					}

					&[type="reset"],
					&[type="button"] {
						border-radius: $border_radius_3;
						border: $border_width solid $grey-300;
						background: #f6f7f7;
						width: 34px;
						height: 34px;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.3s ease-in-out;

						svg {
							width: 16px;
							height: 16px;

							path {
								fill: $grey-400;
							}
						}

						&:hover {
							background: #f2f2f2;
							border-color: $primary_color;

							svg {
								path {
									fill: $primary_color;
								}
							}
						}
					}
				}
			}
		}

		#search-submit {
			img {
				width: 18px;
				height: 18px;
			}
		}

		form {
			position: relative;
		}

		#user-registration-users-advanced-filters {
			display: block;
			position: absolute;
			border-radius: $border_radius_4;
			background: $grey-0;
			box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.13);
			padding: $spacing_20px $spacing_18px;
			right: 0;
			top: 38px;
			z-index: 2;
			width: 360px;

			ul {
				margin: 0;

				li {
					margin: 0;

					p {
						margin-top: 0;
						margin-bottom: $spacing_14px;
						color: $grey-500;
						font-size: 15px;
						font-weight: $semi_bold;
						line-height: 150%;
					}

					input {
						&[type="date"] {
							width: 47%;
							border-radius: $border_radius_4;
							border-color: $grey-100;
							background: $grey-0;
							height: 36px;
						}
					}
				}
			}
		}

		#user-registration-list-search-form {
			width: 275px;
			position: relative;

			#user-registration-list-table-search-input {
				border-radius: $border_radius_4;
				border: $border_width solid $grey-100;
				background: $grey-0;
				padding: 3px 42px 3px $spacing_12px;
				width: 100%;

				&::placeholder {
					color: $grey-200;
				}

				&:focus {
					box-shadow: none;
					border: $border_width solid $primary_color;
				}
			}

			button {
				&#search-submit {
					position: absolute;
					border: 0;
					background: transparent;
					padding: 0;
					width: 18px;
					height: 18px;
					display: flex;
					align-items: center;
					justify-content: center;
					right: $spacing_12px;
					top: $spacing_8px;

					svg {
						path {
							fill: $grey-200;
						}
					}
				}
			}
		}

		form {
			position: relative;
		}
	}

	hr {
		display: none;
	}

	.user-registration-list-table-action-form {
		.tablenav {
			padding: 0;
			margin: 0 0 $spacing_16px;
			height: auto;

			&.bottom {
				margin-bottom: 0;
			}

			.actions {
				display: flex;
				align-items: center;
				gap: $spacing_12px;
				padding-right: $spacing_12px;

				select {
					height: 36px;
					margin: 0;
					border-color: $grey-100;

					&:hover {
						color: $primary_color;
					}

					&:focus {
						box-shadow: none;
						border: $border_width solid $primary_color;
					}
				}

				input {
					&[type="submit"] {
						padding: $spacing_6px $spacing_14px;
						border-radius: $border_radius_3;
						border: $border_width solid $primary_color;
						background: #f6f7f7;
						color: $primary_color;
						font-size: 14px;
						font-weight: $medium;
						line-height: 150%;
						transition: all 0.3s ease-in-out;

						&:hover {
							background: #f2f2f2;
						}
					}
				}
			}

			&-pages {
				margin-bottom: 0;
			}
		}
	}

	table.wp-list-table {
		border-color: #dcdcdc;
		border-radius: $border_radius_5;
		margin-bottom: $spacing-16px;
		overflow: hidden;

		a {
			color: $grey-400;
			transition: all 0.3s ease-in-out;

			&:hover {
				color: $primary_color;
			}
		}

		thead {
			tr {
				td,
				th {
					border-bottom-color: #dcdcdc;
				}

				th {
					font-size: 14px;
					font-weight: $semi_bold;
					line-height: 24px;
					color: $grey-400;

					&.sortable,
					&.sorted {
						padding: 0;

						a {
							font-size: 14px;
							font-weight: $semi_bold;
							line-height: 24px;
							padding: $spacing_12px $spacing_8px;
							display: flex;
							align-items: center;
							gap: $spacing_8px;

							&:focus {
								box-shadow: none;
							}

							.sorting-indicators {
								gap: $spacing_4px;

								.sorting-indicator {
									margin: 0;
								}
							}
						}
					}
				}
			}
		}

		tbody {
			tr {
				td {
					&.username {
						img {
							border-radius: $border_radius_50;
							margin-top: $spacing_2px;
						}
					}

					&.user_status {
						span {
							font-weight: $medium;

							&.user-status {
								&-approved {
									color: $approve_user;
								}

								&-pending {
									color: $pending_user;
								}

								&-denied {
									color: $deny_color;
								}
							}
						}
					}
					&.enable_disable {
						span {
							font-weight: $medium;

							&.enable-disable {
								&-Enabled {
									color: $approve_user;
								}

								&-Disabled {
									color: $deny_color;
								}
							}
						}
					}

					&.actions {
						a {
							color: $primary_color;
							transition: all 0.3s ease-in-out;
							padding-bottom: $spacing_2px;
							position: relative;

							&::before {
								content: "";
								background: $primary_color;
								width: 100%;
								height: 1px;
								position: absolute;
								bottom: 0;
								opacity: 0;
								transition: all 0.3s ease-in-out;
							}

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

							&:focus {
								box-shadow: none;
								outline: none;
							}
						}
					}
				}
			}
		}

		// Bulk checkbox
		input[type="checkbox"]:not(.urcr-enable-access-rule) {
			border-radius: $border_radius_2;
			border-color: $grey-200;
		}
	}
}

// Payment History CSS
.user-registration {
	.ur-membership-header {
		margin-left: 0 !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		border-bottom: 1px solid #e2e8f0;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		gap: 0 !important;
		background: #ffffff;

		img {
			max-width: 36px !important;
			padding: 18px 24px 18px 0;
			border-right: 1px solid #e2e8f0;
			margin-right: 28px;
		}

		a {
			font-size: 16px !important;
			line-height: 26px;
			color: #64748b;
			position: relative;
			padding: 23px 20px;

			&::after {
				content: "";
				background: #475bb2;
				width: 0px;
				height: 3px;
				position: absolute;
				bottom: 0;
				left: 0;
				transition: all 0.3s;
			}

			&.row-title {
				color: #475bb2;

				&:after {
					width: 100%;
				}
			}

			&:hover {
				&::after {
					width: 100%;
				}
			}

			&:focus {
				box-shadow: none;
				outline: none;
			}
		}
	}

	.ur-coupon-tab-contents-wrapper {
		max-width: 1280px;
		margin: 60px auto;
		padding: 0 !important;

		form {
			width: 100% !important;

			.user-registration-card {
				border: 0;
				padding: 28px;

				#ur-coupon-form-container {
					padding: 0 !important;

					#left {
						&-title {
							padding: 0;
							gap: 18px;
							padding-bottom: 20px;
							border-bottom: 1px solid #e9e9e9;
							margin-bottom: 28px;
							gap: 18px;

							a {
								margin-right: 0 !important;
								padding-right: 0 !important;
								border-right: 0 !important;
								width: 40px;
								height: 40px;
								background: #f4f4f4;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 6px;

								&:focus {
									box-shadow: none;
									outline: none;
									border-color: #475bb2;
								}

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

							h3 {
								margin: 0;
								color: #222222;
								font-size: 22px;
								font-weight: 600;
								line-height: 32px;
							}
						}

						&-body {
							display: flex;
							flex-direction: column;
							gap: 24px;

							.ur-coupon-input-container {
								padding: 0 !important;

								.ur-label {
									margin-bottom: 0;

									label {
										margin-bottom: 0;
										color: #383838;
										font-size: 15px;
										font-weight: 500;
										line-height: 21px;
									}
								}

								.ur-admin-template {
									&.ur-input-type-coupon-discount-type {
										.ur-field {
											justify-content: flex-start !important;
											gap: 16px !important;
										}
									}

									.ur-field {
										input,
										select {
											height: 38px;
											border-color: #e9e9e9;
											padding-left: 14px;
											padding-right: 14px;
											color: #383838;

											&::placeholder {
												color: #999999;
											}

											&:focus {
												box-shadow: none;
												outline: none;
												border-color: #475bb2;
											}
										}

										.ur-coupon-discount-type {
											width: 220px;
											padding: 16px !important;
											border-color: #e9e9e9 !important;
											border-radius: 4px !important;
											display: flex;
											flex-direction: column;
											gap: 12px;

											.ur-coupon-type-title {
												gap: 8px;

												input[type="radio"] {
													height: 1rem;
												}

												label {
													padding: 0 !important;
													color: #222222;
													font-size: 15px;
													font-weight: 500;
													line-height: 22px;
												}
											}

											.ur-membership-type-description {
												p {
													margin: 0;
													color: #383838;
													font-size: 14px !important;
													font-weight: 400;
													line-height: 22px;
												}
											}
										}

										.select2 {
											&-selection {
												height: 38px;

												&__rendered {
													line-height: 36px;
												}

												&__arrow {
													height: 36px;
												}

												&--single {
													.select2-selection__rendered {
														padding-left: 14px;
													}
												}

												&--multiple {
													.select2-selection {
														&__rendered {
															gap: 4px;
														}

														&__clear {
															margin-right: 0;
														}

														&__choice {
															border-radius: 5px;
															background: #e9e9e9;
															display: flex;
															align-items: center;
															gap: 8px;
															margin: 4px;
															padding: 0px 8px 0px
																10px;
															border: 0;
															color: #383838;
															flex-direction: row-reverse;

															&__remove {
																color: #383838;
															}
														}
													}
												}
											}
										}
									}
								}

								.user-registration-switch {
									input[type="checkbox"] {
										border-radius: 20px;
										border: 0;
										width: 30px;
										flex: 0 0 30px;
										background: #d5d5d5;
										box-shadow: none;

										&::after {
											width: 12px;
											height: 12px;
											transform: translateX(3px);
										}

										&:checked {
											background: #475bb2;
											border-color: #475bb2;

											&::after {
												transform: translateX(15px);
											}
										}
									}
								}
							}
						}
					}
				}

				.submit {
					margin-bottom: 0;
					padding: 0 !important;
					padding-top: 28px !important;
					border-top: 1px solid #e1e1e1;
					margin-top: 30px;

					.button {
						&-secondary {
							border-radius: 4px;
							box-shadow: none;
							padding: 8px 16px;
							color: #ffffff;
							font-size: 14px;
							font-weight: 400;
							line-height: 24px;
							border: 0;
							background: transparent;
							border: 1px solid #bababa;

							a {
								color: #6b6b6b;
							}
						}

						&-primary {
							border-radius: 4px;
							box-shadow: none;
							padding: 8px 16px;
							color: #ffffff;
							font-size: 14px;
							font-weight: 400;
							line-height: 24px;
							border: 0;
						}
					}
				}
			}
		}
	}

	#user-registration-list-table-page {
		margin: 60px auto;
		padding: 28px 32px;
		box-sizing: border-box;
		max-width: 1280px !important;

		.user-registration-list-table-heading {
			display: flex;
			align-items: center;
			margin-bottom: 24px;

			.ur-page-title__wrapper {
				width: 100%;

				h1 {
					margin: 0;
					color: #222;
					font-size: 22px;
					font-weight: 600;
					line-height: 32px;
				}
			}

			#ur-coupon-add-btn {
				box-shadow: none;
				border-radius: 3px;
				background: #475bb2;
				padding: 8px 20px 8px 16px;
				color: #fff;
				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
				transition: all 0.3s;
			}
		}

		#user-registration-pro-filters-row {
			#user-registration-users-search-form {
				gap: 16px !important;
				flex-wrap: wrap;

				.search-box {
					position: relative;

					input {
						&[type="search"] {
							height: 38px;
							padding-left: 14px;
							padding-right: 14px;
							border-color: #bababa;
							margin: 0;
							width: 220px;
							color: #383838;

							&::placeholder {
								color: #999999;
							}

							&:focus {
								box-shadow: none;
								outline: none;
								border-color: #475bb2;
							}
						}
					}

					#search-submit {
						background: none;
						border: 0;
						padding: 0;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 14px;
						display: flex;

						svg {
							width: 18px;
							height: 18px;

							path {
								fill: #6b6b6b;
							}
						}
					}
				}

				select {
					width: 200px;
					height: 38px;
					padding-left: 14px;
					padding-right: 14px;
					border-color: #bababa;
					margin: 0;
					color: #383838;

					&:focus {
						box-shadow: none;
						outline: none;
						border-color: #475bb2;
					}
				}

				#user-registration-users-filter-btn {
					border-radius: 3px;
					border: 1px solid #475bb2;
					background: #475bb2;
					color: #ffffff;
					padding: 8px 14px;
					color: #ffffff;
					font-size: 13px;
					font-weight: 400;
					line-height: 20px;

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

		#ur-membership-payment-history-form {
			.wrap {
				margin: 0;
			}

			.wp-list-table {
				&.orders {
					thead {
					}

					tbody {
						tr {
							&.no-items {
								background: #ffffff;

								td {
									padding: 0;

									.empty-list-table-container {
										text-align: center;
										margin-top: 30px;
										margin-bottom: 30px;

										img {
											width: 300px;
										}

										h3 {
											margin-top: 16px;
											margin-bottom: 8px;
											color: #222222;
											font-size: 22px;
											font-weight: 600;
											line-height: 32px;
										}

										p {
											color: #6b6b6b;
											font-size: 14px;
											font-weight: 400;
											line-height: 24px;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		#ur-coupon-list-form,
		#ur-membership-payment-history-form {
			margin-top: 24px;
			padding-top: 24px;
			border-top: 1px solid #dcdcdc;

			.wrap {
				margin: 0;

				.tablenav {
					margin: 0;
					padding: 0;
					height: auto;

					.bulkactions {
						padding-right: 0;
						display: flex;
						align-items: center;
						gap: 10px;

						select,
						input {
							margin-right: 0;
						}

						select {
							border-color: #bababa;
							height: 38px;
							width: 220px;
							padding-left: 14px;
							padding-right: 14px;
							color: #383838;
						}

						input[type="submit"] {
							border-radius: 3px;
							border: 1px solid #475bb2;
							background: #f6f7f7;
							padding: 8px 14px;
							color: #475bb2;
							font-size: 13px;
							font-weight: 500;
							line-height: 20px;
						}
					}
				}

				.wp-list-table {
					&.coupons {
						margin-top: 20px;
						margin-bottom: 20px;

						thead {
							tr {
								th {
									&#title {
										width: 220px;
									}
									&#code {
										width: 170px;
									}

									&#amount,
									&#expires {
										width: 180px;
									}

									&#status {
										width: 140px;
									}

									&#action {
										width: 120px;
									}
								}
							}
						}

						tbody {
							tr {
								&:nth-child(odd) {
									background: #f8f8fa;
								}

								td {
									font-size: 14px;
									line-height: 24px;
									color: #383838;
									vertical-align: middle;
								}
							}

							.coupon-active {
								font-weight: 500;
								color: #4cc741;
							}
							.coupon-inactive {
								font-weight: 500;
								color: #f25656;
							}

							.coupon-expired {
								font-weight: 500;
								color: #636363;
							}
						}
					}

					&.orders {
						margin: 20px 0;

						tbody {
							tr {
								td {
									font-size: 14px;
									line-height: 24px;

									&.membership_type {
										.user-registration-badge {
											background: none;
											padding: 0;
											color: #383838;
											font-weight: 500;
										}
									}

									&.status {
										.payment-status-btn {
											display: block;
											width: max-content;
											border-radius: 3px;
											color: #383838;
											font-size: 14px;
											font-weight: 400;
											line-height: 16px;
											padding: 4px 8px;

											&.completed {
												border: 1px solid #4cc741;
												background: #f5fff4;
											}

											&.pending {
												border: 1px solid #ee9936;
												background: #fffaf5;
											}

											&.failed {
												border: 1px solid #f25656;
												background: #fff4f4;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	#payment-detail-modal {
		.modal-content {
			margin: 0;
			border-radius: 12px;
			background: #fff;
			box-shadow: 0px 6px 21px 0px rgba(10, 10, 10, 0.08);
			padding: 28px 32px;
			box-sizing: border-box;
			width: 820px;
			max-width: 100%;

			.modal-header {
				h2 {
					margin: 0;
					color: #222222;
					font-size: 24px;
					font-weight: 700;
					line-height: 34px;
				}

				hr {
					margin: 16px 0 24px;
				}
			}

			.modal-body {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
				gap: 20px;
				align-items: unset;
				justify-content: unset;

				.payment-detail {
					&-box {
						margin-bottom: 0;
					}

					&-label {
						color: #383838;
						font-size: 16px;
						font-weight: 500;
						line-height: 24px;
						margin-bottom: 6px;
					}

					&-data {
						display: flex;
						align-items: center;
						gap: 10px;
						color: #6b6b6b;
						font-size: 15px;
						font-weight: 400;
						line-height: 23px;
						overflow-wrap: break-word;

						.payment-status-btn {
							display: block;
							width: max-content;

							&.completed {
								border: 1px solid #4cc741;
								background: #f5fff4;
							}

							&-pending {
								border: 1px solid #ee9936;
								background: #fffaf5;
							}

							&.failed {
								border: 1px solid #f25656;
								background: #fff4f4;
							}
						}
					}
				}
			}
		}
	}
}

// Delete Popup CSS
.user-registration-membership_page {
	&_user-registration-membership,
	&_user-registration-coupons,
	&_user-registration-members,
	&_member-payment-history {
		.swal2-container {
			.swal2-header {
				padding: 24px !important;
				padding-bottom: 16px !important;

				.swal2-title {
					display: flex !important;
					align-items: center;
					gap: 8px;
					font-size: 18px;
					line-height: 26px;
					margin-bottom: 0;
					width: 100%;
					border-bottom: 1px solid #e9e9e9;
					padding-bottom: 16px;
					color: #222;
					margin-bottom: 0;

					img {
						width: 20px;
						height: 20px;
					}
				}
			}

			.swal2-content {
				padding: 0 24px;

				.swal2-html-container {
					text-align: left;

					p {
						font-size: 15px;
						line-height: 23px;
						color: #383838;
						margin: 0;
					}
				}
			}

			.swal2-actions {
				button {
					margin: 0;

					&.swal2-confirm {
						background: #f25656 !important;

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

// Custom CAPTCHA Form Builder Field Options CSS
.ur-registered-from {
	.ur-general-setting {
		&.ur-setting-captcha {
			.ur-options-list {
				.ui-sortable-handle {
					flex-direction: row;
					flex-wrap: wrap;
				}
			}
		}

		&.ur-general-setting-image-captcha-options {
			.ur-options-list {
				.ur-custom-captcha {
					background: #f2f2f2;
					padding: 12px;
					margin-bottom: 16px;

					.icons-group {
						display: grid;
						grid-template-columns: repeat(
							auto-fill,
							minmax(100px, 1fr)
						);
						gap: 10px;
						width: 100%;

						.icon-wrap {
							background: #ffffff;
							border-radius: 4px;
							padding: 10px;
							text-align: center;

							label {
								margin-bottom: 0;

								.dashicons {
									width: 100%;
									height: 75px;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: 2px;
									background: #fafafa;
									border: 1px solid #d9d9d9;
									transition: all 0.3s;
									cursor: pointer;

									&::before {
										font-size: 24px;
									}

									&:hover {
										background: rgba(240, 242, 249, 1%);
										border-color: #475bb2;
									}
								}

								input {
									&[type="radio"] {
										display: none;

										&:checked ~ .dashicons {
											background: rgba(240, 242, 249, 1%);
											border-color: #475bb2;
										}
									}
								}
							}

							.button {
								width: 100%;
								margin-top: 12px;
								height: auto;
								padding: 2px 10px;
								line-height: 24px;
								font-size: 13px;
							}
						}
					}

					a.remove {
						width: max-content;
						height: auto;
						padding: 6px 12px 6px 8px;
						margin-left: 0 !important;
						align-items: center;
						gap: 4px;

						&:hover {
							background: #fa5252;
							border-color: #fa5252;
						}

						&:focus {
							box-shadow: none;
							outline: none;
						}
					}
				}

				a.add {
					border: 1px solid #e1e1e1;
					padding: 8px 16px;
					height: auto;
				}
			}
		}
	}
}

body {
	&.ur-settings-sidebar-hidden {
		.user-registration-settings-sidebar-container {
			margin-right: -910px;
			display: none;
		}
	}
}
#membership-group-list {
	.wp-list-table.membership_groups {
		.user-registration-switch {
			input[type="checkbox"] {
				border-radius: 10px !important;
				border: 0;
				&:checked {
					border-color: #475bb2;
					background: #475bb2;
				}
				&::after {
					width: 12px;
					height: 12px;
					margin: 4px;
				}
			}
		}
		tbody {
			tr {
				&.no-items {
					background: #ffffff;

					td {
						padding: 0;

						.empty-list-table-container {
							text-align: center;
							margin-top: 30px;
							margin-bottom: 30px;

							img {
								width: 300px;
							}

							h3 {
								margin-top: 16px;
								margin-bottom: 8px;
								color: #222222;
								font-size: 22px;
								font-weight: 600;
								line-height: 32px;
							}

							p {
								color: #6b6b6b;
								font-size: 14px;
								font-weight: 400;
								line-height: 24px;
							}
						}
					}
				}
			}
		}
	}
}

.user-registration {
	.swal2-container {
		.swal2 {
			&-header {
				padding: $spacing_32px $spacing_32px 0;
				// gap: $spacing_16px;
			}

			&-icon {
				margin-block: 0;
				border-color: #41c4ee;
				color: #41c4ee;
				width: 60px;
				height: 60px;

				&-content {
					font-size: 50px;
				}
			}

			&-title {
				color: #131313;
				text-align: center;
				font-size: 22px;
				font-weight: $semi_bold;
				line-height: 30px;
				margin-bottom: 0 !important;
			}

			&-content {
				padding: 0 $spacing_32px;
				margin-top: $spacing_20px;

				input[type="text"] {
					margin: 0;
					height: 38px;
					font-size: 15px;
					line-height: 25px;
					padding: 0 $spacing_12px;
					color: $grey-400;
					border-radius: $border_radius_4;

					&::placeholder {
						color: #999999;
					}

					&:focus {
						outline: none;
						box-shadow: none;
						border-color: $primary_color;
					}
				}

				p {
					margin: 0;
				}

				.swal2-html-container {
					.ur-embed-new-page-container {
						padding-bottom: 0;
						gap: $spacing_18px;
					}

					.ur-embed-select-existing-page-container {
						select {
							min-height: 38px;
							padding-left: 14px;
							margin-top: $spacing_8px;

							&:hover {
								color: $primary_color;
							}

							&:focus {
								box-shadow: none;
								outline: none;
								border-color: $primary_color;
							}
						}
					}
				}
			}

			&-actions {
				margin-top: $spacing_30px !important;
				padding: $spacing_20px $spacing_32px !important;
				gap: $spacing_16px !important;

				button {
					margin: 0;
					text-transform: capitalize;
					padding: $spacing_10px $spacing_14px;
					border-radius: $border_radius_3;
					font-size: 14px;
					font-weight: 400;
					line-height: 16px;
					border: $border_width solid transparent;
					transition: all 0.3s;

					&.swal2-confirm {
						width: 48%;
						background: $primary_color !important;
						color: $grey-0;
						border-color: $primary_color;

						&:hover {
							background: darken($primary_color, 10%);
						}
					}

					&.swal2-cancel {
						width: 45%;
						background: transparent;
						border-color: #6b6b6b;
						color: #6b6b6b;

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

.ur-embed-form-button {
	background: #edeff7 !important;
	border-color: #edeff7 !important;
	box-shadow: 0 1px 0 #edeff7 !important;
	font-size: 14px !important;
	color: #383838 !important;
	border-radius: 3px !important;
}
.embed-form-swl-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 10px;
	justify-content: space-evenly;
}
.ur-embed-container {
	@extend .embed-form-swl-container;
}
.ur-embed-select-existing-page-container {
	@extend .embed-form-swl-container;
	.ur-embed-go-back {
		flex-basis: 100%;
		text-align: center;
		font-size: 14px;
	}
	select {
		width: 80%;
		border: 1px solid #eae2e2;
		margin: -10px;
	}
	p {
		font-size: 1em;
	}
}
.ur-embed-new-page-container {
	@extend .embed-form-swl-container;
	.ur-embed-go-back {
		flex-basis: 100%;
		text-align: center;
		margin-top: 10px;
		font-size: 14px;
	}
	p {
		font-size: 1em;
	}
	input {
		margin-left: -50px;
		width: 80%;
		border: 1px solid #eae2e2;
	}
}

@font-face {
	font-family: "UserRegistration";
	src: url("../fonts/UserRegistration.eot?v5p6f");
	src:
		url("../fonts/UserRegistration.eot?v5p6f#iefix")
			format("embedded-opentype"),
		url("../fonts/UserRegistration.ttf?v5p6f") format("truetype"),
		url("../fonts/UserRegistration.woff?v5p6f") format("woff"),
		url("../fonts/UserRegistration.svg?v5p6f#UserRegistration")
			format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

#elementor-editor-wrapper .ur-icon-user-registration:before,
.elementor-edit-area .ur-icon-user-registration:before {
	content: "\e031";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
#elementor-editor-wrapper .ur-icon-edit-password:before,
.elementor-edit-area .ur-icon-edit-password:before {
	content: "\e045";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
#elementor-editor-wrapper .ur-icon-edit-profile:before,
.elementor-edit-area .ur-icon-edit-profile:before {
	content: "\e046";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
#elementor-editor-wrapper .ur-icon-login:before,
.elementor-edit-area .ur-icon-login:before {
	content: "\e048";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
#elementor-editor-wrapper .form:before,
.elementor-edit-area .form:before {
	content: "\e048";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
#elementor-editor-wrapper .ur-icon-myaccount:before,
.elementor-edit-area .ur-icon-myaccount:before {
	content: "\e047";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
#elementor-editor-wrapper .ur-icon-popup:before,
.elementor-edit-area .ur-icon-popup:before {
	content: "\e043";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
#elementor-editor-wrapper .ur-icon-profile-details:before,
.elementor-edit-area .ur-icon-profile-details:before {
	content: "\e044";
	font-family: "UserRegistration";
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

#integration-settings .ur-nav-premium,
.integration-lists-settings.ur-nav-premium {
	cursor: not-allowed;
	opacity: 0.5;
}

.form-settings-main-tab {
	margin-bottom: 0;
	border-radius: 0;
	padding: $spacing_18px $spacing_24px;
	border-bottom: $border_width solid #ececec;
	background: transparent;
	font-size: 15px;
	font-weight: $regular;
	line-height: 150%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: $spacing_16px;
	&::after {
		content: "";
		background-image: url("../images/icons/ur-right-arrow.svg");
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center;
		width: 18px;
		height: 18px;
	}
}
.form-settings-sub-tab {
	margin-bottom: $spacing_10px;
	border-radius: $border_radius_4;
	padding: $spacing_18px $spacing_24px;
	border-bottom: $border_width solid #ececec;
	background: $color_gray_four;
	font-size: 15px;
	font-weight: $regular;
	line-height: 150%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $spacing_10px $spacing_15px;
	color: $gray_base;
	&.active {
		background: $primary_color;
		color: $white;
	}
}
.integration-lists-settings {
	.form-settings-sub-tab {
		padding: 0px;
		background-color: #ffffff;
		align-items: normal;
		flex-direction: column;
	}
}

#ur-row-section-settings {
	padding: 10px 0px;

	.ur-individual-row-settings {
		display: flex;
		flex-direction: column;
	}
}
// Login Form Builder CSS
body {
	&.user-registration-membership_page_user-registration-login-forms {
		overflow-x: hidden;

		.user-registration-login-form-container {
			.ur-registered-from {
				.ur-login-form-settings {
					max-width: 360px;
					width: 100% !important;

					.nav-tab-wrapper {
						height: 100%;

						.ur-tab-contents {
							height: 100%;
							border-right: 1px solid #e1e1e1;
							padding-bottom: 16px !important;

							#ur-login-form-setting {
								.ur-toggle-content {
									gap: 24px !important;

									select {
										min-height: 38px;
										width: 100%;
										min-width: unset !important;
										margin: 0;
									}

									.select2 {
										&-selection {
											min-height: 38px;

											&__rendered {
												height: 100%;
												padding: 2px 30px 2px 10px;
											}

											&__arrow {
												top: 5px;
											}
										}
									}

									.user-registration-login-form-global-settings {
										.user-registration-login-form-toggle-option {
											display: flex;
											justify-content: space-between;
											gap: 40px;
										}
										label {
											font-weight: 500 !important;
											align-items: end;
										}

										&--field {
											input {
												min-width: unset !important;
												margin: 0;

												&:focus {
													border-color: #475bb2;
												}
											}
										}
									}
									.user-registration-help-tip,
									.ur-portal-tooltip {
										&::after {
											width: 16px;
										}
									}
									label[for="user_registration_login_options_prevent_core_login"]
										span {
										bottom: 18px;
										right: 20px;
									}
								}
							}
						}
					}

					&.collapsed {
						max-width: 0px;
					}

					#ur-collapse {
						background: #fafafc;

						&.close {
							right: -21px;
						}

						&.open {
							left: 0;
						}
					}
				}

				&:has(.collapsed) {
					.ur-login-form-shortcode {
						max-width: 0px;
					}
				}
			}

			.ur-builder-wrapper {
				.ur-selected-inputs {
					position: sticky;
					position: -webkit-sticky;
					top: 30px;
					padding: 30px !important;

					.button-style-customizer {
						position: absolute;
						top: 60px;
						right: 60px;
						margin-right: 10px;
					}
				}
			}

			.ur-registered-inputs {
				&.ur-login-form-shortcode {
					max-width: 350px;
					width: 100% !important;

					.nav-tab-wrapper {
						height: 100%;

						.ur-tab-contents {
							border-left: 1px solid #e1e1e1;
							height: 100%;
							position: sticky;
							position: -webkit-sticky;
							top: 30px;
						}

						.ur-login-shortcode {
							&--wrapper {
								.ur-login-content {
									.login-forms-shortcode-action {
										input[type="text"] {
											padding: 0;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

//  ------------------------------skeleton load css------------------------------------

.ur-registration--loading {
	.loading-content {
		display: flex;
		justify-content: space-between;
		align-items: end;
		flex-wrap: wrap;
		&.table--view {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			grid-gap: 16px;
			padding: 5px 24px 3px 24px;
			&.header {
				background: #f4f4f4;
				padding: 24px;
				margin-bottom: 20px;
				.ur--loading--animate {
					margin-bottom: 0;
				}
				.liner {
					width: 60%;
				}
			}
			.liner {
				width: 30%;
			}
		}
		.loading-text-container {
			width: 70%;
			.ur--loading--animate {
				&.main-text {
					height: 10px;
					width: 65%;
				}
				&.sub-text {
					height: 10px;
					width: 50%;
				}
			}
		}
		.ur--loading--animate {
			margin-bottom: 10px;
			background: #ececec;
			background-image: -webkit-linear-gradient(
				90deg,
				#ddd 0px,
				#e8e8e8 40px,
				#ddd 80px
			);
			background-image: -o-linear-gradient(
				90deg,
				#ddd 0px,
				#e8e8e8 40px,
				#ddd 80px
			);
			background-image: linear-gradient(
				90deg,
				#ddd 0px,
				#e8e8e8 40px,
				#ddd 80px
			);
			background-size: 250px;
			border-radius: 10px;
			-webkit-animation: shine-loading-container-items 0.6s infinite
				ease-out;
			animation: shine-loading-container-items 0.6s infinite ease-out;
			&.loading-btn {
				width: 40px;
				height: 40px;
			}
			&.liner {
				height: 10px;
			}
		}
		.ur--loading--animate--long {
			background: #f4f4f4;
			background-image: -webkit-linear-gradient(
				90deg,
				#f4f4f4 0px,
				#f8f8f8 40px,
				#f8f8f8 70px,
				#f4f4f4 80px
			);
			background-image: -o-linear-gradient(
				90deg,
				#f4f4f4 0px,
				#f8f8f8 40px,
				#f8f8f8 70px,
				#f4f4f4 80px
			);
			background-image: linear-gradient(
				90deg,
				#f4f4f4 0px,
				#f8f8f8 40px,
				#f8f8f8 70px,
				#f4f4f4 80px
			);
			background-size: 1400px;
			border-radius: 10px;
			-webkit-animation: shine-loading-container-items-long 1s infinite
				ease-out;
			animation: shine-loading-container-items-long 1s infinite ease-out;
			&.circular {
				width: 300px;
				height: 300px;
				border-radius: 100%;
				margin: 0 auto;
			}
			&.rectangular {
				width: 100%;
				height: 300px;
			}
			&.liner {
				width: 100%;
				height: 10px;
				margin-bottom: 10px;
				&.short {
					width: 60%;
				}
			}
		}

		@-webkit-keyframes shine-loading-container-items {
			0% {
				background-position: -100px;
			}
			40%,
			100% {
				background-position: 180px;
			}
		}

		@keyframes shine-loading-container-items {
			0% {
				background-position: -100px;
			}
			40%,
			100% {
				background-position: 180px;
			}
		}
		@-webkit-keyframes shine-loading-container-items-long {
			0% {
				background-position: -100px;
			}
			100% {
				background-position: 1200px;
			}
		}

		@keyframes shine-loading-container-items-long {
			0% {
				background-position: -100px;
			}
			100% {
				background-position: 1200px;
			}
		}
	}
}

// For RTL Options CSS
.user-registration {
	&.rtl {
		input,
		textarea,
		select {
			text-align: right;
		}

		.user-registration__wrap {
			.ur-form-subcontainer {
				#menu-management {
					.menu-edit {
						left: 0 !important;
						right: 160px;

						#nav-menu-header {
							padding-left: $spacing_30px;
							padding-right: $spacing_12px;

							.ur-brand-logo {
								border-left: 1px solid #e1e1e1;
								border-right: 0;

								img {
									margin-right: 0;
									margin-left: 8px;
								}
							}

							.ur-form-title {
								padding-right: $spacing_18px;
								padding-left: $spacing_8px;
							}

							.major-publishing-actions {
								margin-right: auto;
								margin-left: unset;
							}
						}

						#post-body {
							.ur-registered {
								&-inputs {
									.nav-tab-wrapper {
										.ur-tab-content {
											.ur-search-input {
												input.ur-type-text {
													padding-right: $spacing_40px;
													color: $grey-400;
												}
											}
										}
									}
								}

								&-from {
									.ur-builder-wrapper {
										.ur-selected-inputs {
											#ur-field-settings {
												select {
													padding-right: $spacing_30px;
												}
											}
										}
									}
								}
							}
						}

						.ur-builder-wrapper {
							.ur-selected-inputs {
								select {
									padding-right: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
}
.urm-shortcode {
	display: flex;
	.ur-copy-shortcode {
		width: 33px;
		height: 33px;
		box-shadow: none;
		border-radius: 0 4px 4px 0;
		background: #edeff7 !important;
		border-color: #e9e9e9 !important;
		min-height: 32px;
		line-height: 2.30769231;
		padding-left: 0;
		padding-right: 0;
	}
	input[type="text"] {
		height: 33px;
		padding: 0 6px;
		margin: 0;
		border-color: #e9e9e9;
		background: #f8f8fa;
		border-radius: 3px 0 0 3px;
	}
	svg {
		fill: #fff;
		width: 18px;
		height: 18px;
		margin-bottom: 3px;
		vertical-align: middle;
	}
}

.tooltipster-sidetip {
	.tooltipster-box {
		background-color: #fff !important;
		max-width: 220px;
		box-shadow: 0 6px 24px 0 rgba(10, 10, 10, 0.1);
		padding: 16px 18px;

		.tooltipster-content {
			font-size: 14px;
			line-height: 20px;
			color: #222;
			padding: 0;
		}
	}
	&.tooltipster-borderless .tooltipster-arrow {
		height: 8px;
		margin-left: -8px;
		width: 16px;
	}
	&.tooltipster-base
		.tooltipster-arrow
		.tooltipster-arrow-uncropped
		.tooltipster-arrow-border {
		border-top-color: #fff !important;
		border-bottom-color: #fff !important;
	}
}

// System infor settings
.user-registration-system-info-setting {
	position: relative;
	margin: 40px;
	padding: 32px 20px 52px 32px;
	box-shadow: 0px 6px 26px 0px rgba(10, 10, 10, 0.08);
	background: #ffffff;
	.user-registration-settings-header {
		margin-bottom: 32px;
		.user-registration-options-header--top__left {
			display: flex;
			align-items: center;
			padding-bottom: 24px;
			border-bottom: 1px solid #eee8f7;
			&--icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				border-radius: 4px;
				background: #eee8f7;
				margin-right: 16px;
				svg {
					width: 20px;
					height: 20px;
					fill: #475bb2;
				}
			}

			h3 {
				margin: 0;
				color: #383838;
				font-size: 24px;
				font-weight: 600;
				line-height: 34px;
			}
		}
	}
	&-copy {
		position: absolute;
		top: 25px;
		right: 18px;
		padding: 8px 14px;
		border-radius: 4px;
		border: 0;
		font-size: 22px;
		line-height: 14px;
		font-weight: 500;
		cursor: pointer;
		color: #ffffff;
	}
	.ur-general-settings-hide {
		display: none;
	}

	table {
		width: 100%;
		border-collapse: collapse;

		th,
		td {
			padding: 10px;
			border: 1px solid #dcdcdc;
			text-align: left;
			font-size: 14px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		th {
			font-weight: 500;
			vertical-align: top;
		}

		tr {
			&:nth-child(even) {
				background: #ffffff;
				th {
					background: #ffffff;
				}
			}

			&:hover {
				background: #f4f4f4;

				th {
					background: #f4f4f4;
				}
			}

			th {
				&[colspan="2"] {
					background: #f4f4f4;
					color: #222222;
					font-size: 15px;
					line-height: 23px;
					font-weight: 500;
					letter-spacing: 0.2px;
				}
			}
		}
	}
}