[ Avaa Bypassed ]

@import "variables/variables";
@import "mixins/mixins";


// User Registration Global Settings CSS
* {
	box-sizing: border-box;
}

body {
	@media screen and (max-width: 782px) {
		min-width: 600px;
	}
}

// ToolTip CSSs
.tooltipster-sidetip {
	.tooltipster-box {
		background-color: $grey-0 !important;
		max-width: 220px;
		box-shadow: 0px 6px 24px 0px rgba(10, 10, 10, 0.10);
		padding: $spacing_16px $spacing_18px;

		.tooltipster-content {
			font-size: 14px;
			line-height: 20px;
			color: $grey-500;
			padding: 0;

			a {
				color: $primary_color !important;

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

	&.tooltipster-base {
		.tooltipster-arrow {
			.tooltipster-arrow-uncropped {
				.tooltipster-arrow-border {
					border-top-color: $grey-0 !important;
					border-bottom-color: $grey-0 !important;
				}
			}
		}
	}
}

#wpcontent {
	padding-left: 0;

	@media screen and (max-width: 782px) {
		padding-left: 0 !important;
	}

	.wrap {
		margin: 0;
		padding: $spacing_24px;
		background: #EFF2F6;

		.user-registration-header {
			margin: 0;
		}
	}
}

.user-registration-settings {
	display: flex;
    gap: $spacing_24px;
	overflow-x: hidden;

	@media screen and (max-width: 1180px) {
		flex-direction: column;
	}

	&-wrapper {
		display: flex;
		flex-direction: row;
		background: $grey-0;
		filter: drop-shadow(-4px 4px 20px rgba(89, 89, 89, 0.1));
		flex: 1;

		.user-registration-header {
			width: 100%;
			max-width: 300px;
			padding: $spacing_24px 0 0;
			background: $grey-0;
			border-right: $border_width solid $border-color;

			&.collapsed {
				max-width: 70px;

				.user-registration-header--top {
					&-logo {
						img {
							width: 40px;
						}
					}

					.ur-search--top-settings {
						padding-left: $spacing_15px;
						padding-right: $spacing_15px;
						cursor: pointer;

						input {
							padding: 0;
							cursor: pointer;
							transition: all .3s ease-in-out;

							&::placeholder {
								font-size: 0;
							}
						}

						.user-registration-search-icon {
							svg {
								transition: all .3s ease-in-out;
							}
						}

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

								~ .user-registration-search-icon svg {
									fill: $primary_color;
								}
							}
						}
					}

					.ur-search--top-toggle {
						justify-content: center;

						label {
							display: none;
						}
					}
				}

				.user-registration-header--nav {
					.ur-nav__link-label {
						display: none;
					}

					.ur-nav-icon {
						transform: rotate(180deg);
					}
				}
			}

			&--top {
				&-logo {
					text-align: center;
					margin-bottom: $spacing_28px;

					img {
						border: $border_width solid $border-color;
						width: 70px;
						border-radius: 50%;
					}
				}

				.ur-search--top-settings {
					padding-left: $spacing_12px;
					padding-right: $spacing_12px;
					position: relative;
					margin-bottom: $spacing_24px;

					input {
						width: 100%;
						height: 38px;
						padding: $spacing_8px $spacing_40px $spacing_8px $spacing_12px;
						color: $grey-400;

						&::placeholder {
							color: $grey-100;
							font-weight: $regular;
						}

						&.ui-autocomplete-loading {
							background-position: 95% center;
						}
					}

					.user-registration-search-icon {
						position: absolute;
						top: 11px;
						right: $spacing_26px;

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

				.ur-search--top-toggle {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: $spacing_12px;
					padding-right: $spacing_12px;
					margin-bottom: $spacing_20px;

					label {
						font-weight: $semi_bold;
						font-size: 14px;
						line-height: 150%;
						color: $grey-400;
					}

					.user-registration-toggle-form {
						width: 32px;
						height: 16px;

						input {
							width: 32px;
							height: 16px;

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

						.slider {
							&::before {
								width: 12px;
								height: 12px;
								left: $spacing_2px;
								bottom: $spacing_2px;
							}
						}
					}
				}
			}

			.ur-nav-tab-wrapper {
				display: flex;
				flex-direction: column;
				margin: 0;
				overflow: unset;

				.ur-nav__link {
					font-weight: $regular;
					line-height: 150%;
					color: $grey-400;
					padding: $spacing-16px $spacing_20px;
					background: transparent;
					border: 0;
					border-top: $border_width solid $border-color;
					position: relative;
					display: flex;
					align-items: center;
					gap: 15px;
					cursor: pointer;

					&-label {
						> p {
							font-weight: $medium;
							font-size: 15px;
							margin: 0;
							line-height: 21px;
							color: #4e4e4e;
							transition: all 0.3s ease-in-out;
						}

						span.ur-nav__link-label {
							> :not( svg ) {
								opacity: 0.5;
							}
						}
					}

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

					&:not(#ur-settings-collapse)::before {
						content: "";
						background: $primary_color;
						width: 4px;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
						transition: all .3s ease-in-out;
					}

					&:not(#ur-settings-collapse)::after {
						content: "";
						background: $grey-0;
						width: 8px;
						height: 100%;
						position: absolute;
						top: 0;
						right: -$spacing_4px;
						opacity: 0;
						transition: all .3s ease-in-out;
					}

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

					&.ur-nav-premium {
						cursor: not-allowed;

						&:hover {
							background: transparent;
							border-radius: 0;
							color: $grey-400;

							.ur-nav__link-label {
								p {
									color: $grey-400;
								}
							}
						}
						&::before,
						&::after {
							content: none !important;
						}

						span {
							&.ur-nav__link-icon {
								opacity: 0.5;
							}

							&.ur-nav__link-label {
								svg {
									path {
										stroke: none;
									}
								}

								> :not( svg ) {
									opacity: 0.5;
								}
							}
						}

						.ur-tooltip {
							display: none;
							flex-direction: column;
							align-items: flex-end;
							gap: $spacing_10px;
							position: absolute;
							padding: $spacing_16px $spacing_18px;
							border-radius: $border_radius_4;
							box-shadow: 0px 6px 24px 0px rgba(10, 10, 10, 0.10);
							background: $grey-0;
							color: $grey-500;
							font-size: 14px;
							line-height: 20px;
							text-align: center;
							transition: .3s opacity;
							width: 200px;
							white-space: pre-line;
							text-align: left;
							top: 50%;
							right: -200px;
							z-index: 10;
							transform: translateY(-50%);

							&::after {
								content: "";
								position: absolute;
								border-right: 12px solid #e9e9e9;
								border-top: 12px solid transparent;
								border-bottom: 12px solid transparent;
								top: 50%;
								left: -$spacing_12px;
								transform: translateY(-50%);
							}

							a {
								text-decoration: none;
								border: $border_width solid $primary_color;
								padding: $spacing_6px $spacing_12px;
								background: $primary_color;
								border-radius: $border_radius_4;
								color: $grey-0;
								font-weight: $regular;
								letter-spacing: 0.3px;
								transition: all .3s ease-in-out;

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

						&:hover {
							.ur-tooltip {
								display: flex;
							}
						}
					}

					&-icon {
						display: flex;

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

					&:hover,
					&.is-active {
						.ur-nav__link-icon {
							svg {
								path {
									fill: $primary_color;
								}
							}
						}

						.ur-nav__link-label {
							p {
								color: $primary_color;
							}

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

					&-label {
						display: flex;
						justify-content: space-between;
						flex-direction: row;
						width: 100%;
						align-items: center;
					}

					.ur-nav-icon {
						display: flex;
					}

					&:hover {
						.ur-nav-icon {
							img {
								filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);
							}
						}

						.ur-nav__link-label {
							color: #222;
						}
					}

					&:hover,
					&.is-active {
						background: #F8F8FA;
						border-radius: 0;
						color: $primary_color;

						&:not(#ur-settings-collapse)::before {
							opacity: 1;
						}
					}

					&.is-active {
						&:not(#ur-settings-collapse)::after {
							opacity: 1;
							background: #F8F8FA;
						}
					}

					&:last-child {
						border-bottom: $border_width solid $border-color;
					}
				}
			}
		}
	}

	&-sidebar-container {
		display: flex;
		gap: $spacing_32px;
		flex-direction: column;
		padding: $spacing_24px $spacing_8px $spacing_26px $spacing_8px;
		transition: all .3s;
		width: 320px;
		max-width: 100%;

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

		.user-registration-settings-sidebar {
			display: flex;
			flex-direction: column;
			gap: $spacing_20px;

			h2 {
				color: #222222;
				font-size: 18px;
				font-weight: $semi-bold;
				line-height: 140%;
				margin: 0;
				padding-bottom: $spacing-16px;
				margin-bottom: $spacing_20px;
				border-bottom: $border_width solid #EEE8F7;
			}

			p {
				margin: 0;
				color: $grey-400;
				font-size: 16px;
				font-style: normal;
				font-weight: $regular;
				line-height: 24px;
			}

			&__header {
				border-bottom: $border_width solid #e1e1e1;
				padding-bottom: $spacing-16px;

				h3 {
					color: $grey-500;
					font-size: 20px;
					font-weight: $semi-bold;
					line-height: 30px;
					margin: 0px;
				}
			}

			&__body {
				display: flex;
				flex-direction: column;
				gap: $spacing_20px;

				&--list {
					margin: 0;
					display: flex;
					flex-direction: column;
					gap: $spacing-16px;

					&.normal {
						.user-registration-settings-sidebar__body--list-item {
							gap: $spacing_8px;
						}
					}

					&-item {
						display: flex;
						color: $grey-400;
						font-size: 16px;
						font-weight: $regular;
						line-height: 24px;
						margin-bottom: 0;
						gap: $spacing_12px;

						&.card {
							padding: $spacing_12px $spacing-16px;
							border-radius: 6px;
							background: $white;
							border: none;
							margin-top: 0px;

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

						&.completed {
							text-decoration: line-through;
							color: #999999;
						}

						svg {
							position: relative;
							top: 2px;
							width: 20px;
							height: 20px;
						}

						> span {
							flex: 1;
						}

						.button {
							border-radius: 3px;
							border: $border_width solid $primary_color;
							background: $primary_color;
							padding: $spacing_5px $spacing_8px;
							display: block;
							color: $white;
							font-size: 14px;
							font-style: normal;
							font-weight: $medium;
							line-height: 24px;
							text-decoration: none;
							letter-spacing: .05px;
							width: max-content;
							margin: $spacing_20px 0;
							transition: all .3s;

							&:hover {
								background: #2e44a1;
								border-color: #2e44a1;
							}
						}

						a:not(.button) {
							text-decoration: none;

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

							svg{
								position: relative;
								top: $spacing_6px;
								margin-left: 2px;
							}
						}
					}
				}
			}

			&__footer {
				display: flex;
				flex-direction: column;
				gap: 32px;

				&--card {
					background-color: #6969DE;
					padding: $spacing_40px;
					border-radius: 12px;
					display: flex;
					gap: $spacing_24px;
					flex-direction: column;
					align-items: center;

					@media screen and (max-width: 1180px) {
						max-width: 300px;
					}

					> p {
						font-size: 18px;
						line-height: 27px;
						font-weight: $semi-bold;
						text-align: center;
						color: $white;
						padding: 0px $spacing_20px;
						position: relative;

						&::after {
							content: "";
							background-image: url("../images/pro-banner-highlight.png");
							background-repeat: no-repeat;
							background-position: center;
							background-size: 100%;
							position: absolute;
							width: 36px;
							height: 10px;
							right: 70px;
							bottom: -$spacing_4px;
						}
					}

					a {
						text-decoration: none;
						padding: $spacing_12px;
						background: $white;
						border-radius: $border_radius_2;
						color: #3F4D8A;
						font-weight: $semi-bold;
						transition: all .3s;
						width: 100%;
						text-align: center;
						border-radius: 6px;
						font-size: 16px;
						line-height: 24px;

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

.user-registration-settings-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: $spacing_24px;
	padding-top: 0;
	background: #FAFAFC;
	margin-top: 0 !important;

	.user-registration-options-header {
		background: #fafafc;
		padding-top: $spacing_24px;

		&--top {
			display: flex;
			align-items: center;
			padding-bottom: $spacing_24px;
            border-bottom: $border_width solid #EBEBEB;

			h3 {
				margin: 0;
				font-weight: $semi_bold;
				font-size: 26px;
				line-height: 120%;
				color: $grey-800;
			}

			p.submit {
				display: none;
				margin-top: 0;
			}
		}

		&--bottom {
			margin-top: $spacing_32px;

			ul {
				display: flex;
				align-items: center;
				gap: $spacing_32px;
				border-bottom: $border_width solid #EBEBEB !important;
				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 .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 .3s ease-in-out;
						}

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

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

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

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

			.ur-scroll-ui {
				&__scroll-nav {
					padding-bottom: $spacing_28px;
				}
			}
		}
	}

	.user-registration-options-container {
		.ur-searched-settings-focus {
			border: 2px solid #475bb2;
			border-radius: 5px;
			padding: 10px;
		}
		// Success Message CSS
		.notice {
			max-width: 680px;
			padding: $spacing_12px $spacing_12px $spacing_12px $spacing_16px;
			border: 0;
			border-left: 3px solid;
			margin: 0;
			margin-bottom: $spacing_24px;
			background: $greenLight;
			box-shadow: none;

			@media (min-width: 1440px) {
				max-width: 900px;
			}

			&.success {
				border-left-color: $green;
				background: $greenLight;
			}

			&.error {
				border-left-color: $red;
				background: $redLight;
			}

			p {
				margin: 0;
				padding: 0;
				color: $grey-300;

				strong {
					font-weight: $regular;
				}
			}
		}


		.user-registration-integrations {
			border-radius: $border_radius_3;
			background: #fafafc;
			border: $border_width solid #ced4da;
			padding: $spacing_10px $spacing_20px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			margin-bottom: $spacing_10px;
		}

		.integration-header-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.integration-detail {
			display: flex;
			align-items: center;
			gap: $spacing_14px;

			.integration-status {
				position: relative;

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

				&::after {
					content: "";
					display: block;
					width: 16px;
					height: 16px;
					border: $border_width solid $border-color;
					border-radius: $border_radius_2;
				}

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

					&::after {
						border-color: #4CC741;
					}
				}
			}
		}
		.logo {
			width: 50px;
			height: 50px;
			flex: 0 0 50px;
			display: flex;
			overflow: hidden;
			margin: 0;
			border-radius: $border_radius_4;
			align-items: center;
			border: $border_width solid #ced4da;

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

		.ur-captcha-settings-header{
			img{
				width: 75% !important;
				margin-left: 5px !important;
			}
		}

		.integration-info {
			margin-right: $spacing_20px;
		}

		.integration-action {
			background: $grey-0;
			border: $border_width solid $grey-50;
			border-radius: $border_radius_3;
			width: 28px;
			height: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all .3s ease-in-out;

			svg {
				stroke: $grey-300;
				width: 22px;
				height: 22px;
				transition: all .3s ease-in-out;
			}
		}
		// General Settings
		.user-registration-card {
			padding: $spacing_16px $spacing_20px $spacing_22px;
			background: $grey-0;
			border: $border_width solid #EBEBEB !important;
			border-radius: $border_radius_7;
			margin-top: 0 !important;
			margin-bottom: $spacing_28px;
			max-width: 680px;
			position: relative;

			@media (min-width: 1440px) {
				max-width: 900px;
			}

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

			&:has(.integration-header-info) {
				max-width: 100%;
				padding: 0 $spacing_20px 0 $spacing_20px;
				margin-bottom: $spacing_12px !important;

				&.active {
					@media (max-width: 767px) {
						padding-bottom: $spacing_20px;
					}
				}
			}

			&:has(.active) {
				@media (max-width: 767px) {
					padding-bottom: $spacing_20px;
				}
			}

			&.pro-options {
				opacity: .4;

				&::after {
					content: "+";
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: center;
					position: absolute;
					width: 24px;
					height: 24px;
					top: $spacing_16px;
					right: $spacing_16px;
				}
			}

			&__header {
				margin-bottom: $spacing_24px;
				padding: 0 0 $spacing_16px;
				position: relative;
				border-bottom: $border_width solid #EBEBEB !important;

				// Integration Settings
				&.integration-header-info {
					padding: $spacing_16px 0 !important;
					border: 0;
					margin-bottom: 0;
					cursor: pointer;

					&.active {
						border-bottom: $border_width solid #dee0e9;
						padding-bottom: $spacing_18px;

						.integration-action {
							border-color: $primary_color;
							svg {
								stroke: $primary_color;
								transform: rotate(-180deg);
							}
						}
					}
				}
			}

			// Integration Settings
			&.integration-header-info {
				padding: $spacing_16px 0 !important;
				border: 0;
				margin-bottom: 0;
				cursor: pointer;

				&.active {
					border-bottom: $border_width solid #dee0e9;
					padding-bottom: $spacing_18px;

					.integration-action {
						border-color: $primary_color;
						svg {
							stroke: $primary_color;
							transform: rotate(-180deg);
						}
					}
				}
			}

			&__body {
				padding-left: 0;
				padding-right: 0;

				.ur-toggle-section {
					.user-registration-toggle-form {
						width: 32px;
						height: 16px;

						input[type="checkbox"] {
							width: 32px;
							height: 16px;
						}

						.slider {
							&::before {
								width: 12px;
								height: 12px;
								bottom: 2px;
								left: 2px;
							}
						}
					}
				}

				// Integration Settings
				&.integration-body-info {
					padding: $spacing_20px 0 !important;

					.nav-tab-inside {
						> div {
							display: block;
						}
					}

					.postbox {
						padding: 0 !important;
						border: 0 !important;
						box-shadow: none;
						max-width: 100% !important;
						margin-bottom: $spacing_28px;
						border-radius: $border_radius_7 !important;

						.hndle {
							border-bottom: 0;
							padding: 0 !important;
							margin-bottom: $spacing_20px !important;
							font-size: 15px !important;
						}

						.inside {
							.ur-form-row {
								display: flex;
								align-items: center;
								justify-content: space-between;
								gap: $spacing_24px;

								@media (max-width: 991px) {
									flex-direction: column;
									gap: $spacing_6px;
								}

								.ur-form-group {
									width: 50%;

									@media (max-width: 991px) {
										width: 100%;
									}

									.ur-label {
										line-height: 120%;
										color: $grey-400;
									}

									.ur-input {
										padding: $spacing_8px $spacing_10px;
										background: $grey-0;
										border: $border_width solid $border-color;
										border-radius: $border_radius_3;
										height: 38px;

										&::placeholder {
											color: $grey-100;
											font-size: 14px;
											line-height: 150%;
											font-weight: $regular;
										}
									}
								}
							}
						}

						li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: $spacing_20px;
							margin: 0;
							gap: $spacing_16px;

							&:nth-child(even) {
								background: $grey-0;
							}

							&:last-child {
								border-radius: 0 0 $border_radius_7 $border_radius_7;
							}

							@media (max-width: 767px) {
								flex-wrap: wrap;
							}
						}

						.ur-integration-connected-accounts {
							margin: 0;
							border: $border_width solid $border-color;
							border-radius: $border_radius_7;

							&--label {
								width: 300px;

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

								@media (max-width: 991px) {
									width: max-content;
								}
							}

							&--date {
								display: flex;
								align-items: center;
								gap: $spacing_6px;
								margin-left: -260px;

								@media (max-width: 1199px) {
									margin-left: -90px;
								}

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

								&::before {
									content: "";
									display: block;
									min-width: 8px;
									width: 8px;
									height: 8px;
									background: #13bd6f;
									border-radius: 50%;
								}
							}

							&--disconnect {
								display: flex;

								.disconnect {
									padding: $spacing_10px $spacing_14px;
									background: #DC3545;
									border: $border_width solid #DC3545;
									border-radius: $border_radius_3;
									color: $grey-0;
									letter-spacing: 0.2px;
									transition: all .3s ease-in-out;

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

					#mailchimp_accounts {
						margin-left: 0;
					}
				}

				// Emails Settings
				table {
					&.form-table {
						.ur_emails_wrapper {
							padding: 0;
						}
					}

					&.ur_emails {
						border-radius: $border_radius_5;
						overflow: hidden;
						border-color: $border-color;

						thead {
							th {
								padding: $spacing_12px $spacing_16px !important;
								background: $primary_color;
								color: $grey-0;
								font-weight: $semi_bold;
								font-size: 16px;
								line-height: 150%;
								border: $border_width solid $border-color;
								border-top: 0;
								border-bottom: 0;
								border-left: 0;
								letter-spacing: 0.03px;

								&:first-child {
									width: 60%;
								}

								&:nth-child(2),
								&:last-child {
									width: 20%;
									text-align: center;
								}

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

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

								.ur-email-settings-table {
									padding: $spacing_12px $spacing_16px;
									vertical-align: middle;

									&:nth-child(2),
									&:last-child {
										text-align: center;
									}

									&:nth-child(2) {
										padding-left: 0;
										padding-right: 0;

										label {
											font-size: 76%;
										}
									}

									a {
										font-weight: $regular;
										font-size: 14px;
										line-height: 120%;
										color: $primary_color;

										&.button {
											border: 0;
											background: transparent;
											box-shadow: none;
											color: $grey-300;
											display: flex;
											align-items: center;
											justify-content: center;
											padding: 0;
											width: 33px;
											margin: 0 auto;

											span {
												font-size: 18px;
											}

											&:hover {
												border: $border_width solid $primary_color;
												background: $blue-50;

												span {
													color: $primary_color;
												}
											}
										}
									}

									> label {
										padding: $spacing_4px $spacing_8px;
										border-radius: 100px;
										font-weight: $regular !important;
										font-size: 12px;
										line-height: 150%;
										color: $grey-0 !important;

										&:has(.ur-toggle-section) {
											padding: 0;
											background: transparent;
											border-radius: 0px;
										}

										&.ur-email-status {
											background: #4CC741;
										}

										&.ur-email-receiver {
											color: $grey-400 !important;
											font-weight: $semi-bold !important;
										}
									}

									.user-registration-help-tip {
										margin-left: $spacing_6px;
										color: $grey-100;

										&::after {
											content: url('../images/settings-icons/information.svg') !important;
										}
									}
								}
							}
						}
					}
				}

				.user-registration-global-settings {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					margin-bottom: $spacing_28px;

					@media (max-width: 1199px) {
						flex-direction: column;
						gap: $spacing_10px;
					}

					&.urcr_content_restriction_enable {
						display: block;

						.user-registration-global-settings--field {
							flex-direction: unset;
							gap: $spacing_4px;
							margin: $spacing_8px 0 $spacing_24px;
						}
					}

					textarea {
						border-color: $border-color;
						padding: $spacing_8px $spacing_10px;
					}

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

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

					label {
						position: relative;
						vertical-align: top;
						text-align: left;
						line-height: 1.3;
						font-weight: $medium;
						color: $grey-400;
						font-size: 14px;
						flex: 0 0 38%;
						margin-bottom: 0;

						span {
							color: #BABABA;

							&.user-registration-help-tip {
								font-size: 16px;
								top: 3px;
								left: 4px;

								&::after {
									content: "";
									background-image: url('../images/settings-icons/information.svg') !important;
									background-repeat: no-repeat !important;
									background-size: 100% !important;
									background-position: center;
									display: block;
									width: 8px;
									height: 8px;
									cursor: pointer;
									padding: $spacing_4px;
									background: transparent;
									border-radius: $border_radius_3;
								}

								&:hover {
									&::after {
										filter: brightness(0) saturate(100%) invert(33%) sepia(19%) saturate(2330%) hue-rotate(195deg) brightness(100%) contrast(87%);
									}
								}
							}
						}
					}

					&--field {
						display: flex;
						flex-direction: column;
						gap: $spacing_12px;
						line-height: 1.3;
						vertical-align: middle;
						flex: 0 0 60%;

						@media (max-width: 1199px) {
							flex: auto;
							width: 100%;
						}

						input[type='text'],
						input[type='number'] {
							width: 100%;
							min-width: 100% !important;
							height: 38px;
						}

						textarea,
						select {
							min-width: 100% !important;
						}

						.user_registration_send_email_test {
							width: 10%;
						}

						select {
							width: 100%;
							height: 38px;
							padding: $spacing_4px $spacing_10px;
							border: $border_width solid $border-color;
							border-radius: $border_radius_5;

							&:focus,
							&:focus-visible {
								border-width: $border_width;
								border-color: $primary_color;
								box-shadow: none;
							}

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

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

							// @media (max-width: 1199px) {
							// 	width: 100% !important;
							// }

							&--open {
								.select2-selection {
									&__arrow {
										height: 30px;
										b {
											width: 12px;
											border-color: transparent transparent #888 transparent;
											border-width: 0 6px 7px 6px;
										}
									}

									&--multiple {
										&:before {
											content: "";
											position: absolute;
											right: 7px;
											top: 42%;
											border-bottom: 7px solid #888;
											border-left: 6px solid transparent;
											border-right: 6px solid transparent;
											border-top: 0px;
										}
									}
								}

							}
						}

						.select2-selection {
							padding-left: 0;
							padding-right: 0;

							ul {
								flex-wrap: wrap;
							}

							&__choice {
								background: $grey-50;
								border-radius: $border_radius_5;
								border: 0;
								flex-direction: row-reverse;
								gap: $spacing_6px;
								padding: $spacing_4px $spacing_10px;
								font-weight: $regular;
								font-size: 14px;
								line-height: 150%;
								color: $grey-400;
								margin: $spacing_4px;
								margin-right: 0;

								&__remove {
									font-size: 18px;
									font-weight: $regular;
									color: $grey-400;

									&:hover {
										color: #f11d1d;
									}
								}
							}

							&--multiple {
								.select2-selection__rendered {
									padding-left: 0;
									padding-right: 0;
								}

								&:before {
									content: "";
									position: absolute;
									right: 7px;
									top: 42%;
									border-top: 7px solid #888;
									border-left: 6px solid transparent;
									border-right: 6px solid transparent;
								}
							}

							&--single {
								height: 38px;

								.select2-selection__rendered {
									line-height: 36px;
									padding-left: $spacing_10px;
									padding-right: $spacing_30px;

									.select2-selection__clear {
										font-size: 18px;
										font-weight: $regular;
										color: $grey-400;

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

								.select2-selection__arrow {
									height: 30px;
									right: $spacing_8px;
								}
							}

							&__arrow {
								b {
									width: 12px;
									border-color: #888 transparent transparent transparent;
									border-width: 7px 6px 0 6px;
								}
							}
						}

						.ur-toggle-section {
							.user-registration-toggle-form {
								input[type="checkbox"] {
									min-width: 100% !important;
								}
							}
						}

						.ur-radio-group-list {
							display: flex;
							flex-wrap: wrap;
							gap: $spacing-16px;

							&--item {
								max-width: 120px;
								height: auto;
								border: $border_width solid #E9E9E9;
								border-radius: $border_radius_5;
								text-align: center;
								padding: $spacing_6px;
								align-items: center;
								display: flex;

								&.active {
									label{
										color: #475BB2;
										opacity: 1;
									}

									border-color: #475BB2;
								}

								label {
									font-size: 12px;
									font-weight: $semi-bold;
									color: $grey-400;
									opacity: 0.5;

									input {
										display: none;
									}
								}

							}
						}

						.button, .ur-button {
							width: fit-content;
							text-align: center;
						}

						#select-smart-tags {
							color: #2271B1;
							border-color: #2271B1;
							height: 30px;
							text-align: center;
							line-height: 18px;
							width: 30%;
						}
					}

					.ur-captcha-test-button{
						flex: 0 0 38%;

						.user_registration_captcha_setting_captcha_test {
							margin-bottom: 10px;
							.spinner {
								visibility: visible !important;
							}
						}
					}

					.ur-captcha-test{
						flex: 0 0 60%;

						.ur-captcha-test-container {
							min-width: 512px;
							display: block;

							.ur-captcha-notice {
								padding: 8px;
								margin: 2px;
								border-radius: 4px;
								border-width: 0px !important;

								&.success {
									background: rgba(0,255,0,0.3);

									.ur-captcha-notice--icon {
										color: green;
									}
								}

								&.error {
									background: rgba(255,0,0,0.3);

									.disconnect {
										color: red;
									}
								}
							}
						}
					}


				}
			}

			p.ur-p-tag {
				margin-bottom: $spacing_24px;
				padding: $spacing_10px $spacing_12px $spacing_10px $spacing_16px;
				background: rgba(71, 91, 178, 0.04);
				border: $border_width solid $primary_color;
				font-weight: $regular;
				color: $grey-400;
				border-radius: $border_radius_4;
				font-size: 14px;
				line-height: 22px;
				font-style: normal;

				strong {
					font-weight: $semi_bold;
				}
			}
		}

		// Import/Export Settings
		.ur-settings-section-header {
			margin: 0;
		}

		.ur-export-users-page {
			margin-top: 0;

			.nav-tab-inside {
				.postbox {
					width: 100%;
					max-width: 680px;
					padding: $spacing_16px $spacing_20px $spacing_22px;
					border: $border_width solid $grey-50;
					border-radius: $border_radius_7;
					margin-bottom: $spacing_28px;
					background: #fafafc;
					border: $border_width solid $grey-50;
					box-shadow: none;

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

					.hndle {
						font-weight: $semi-bold;
						font-size: 16px;
						line-height: 150%;
						color: $grey-500;
						margin: 0;
						padding-bottom: $spacing_16px;
						margin-bottom: $spacing_28px;
						border-color: $grey-50;
					}

					.inside {
						margin: 0;
						padding: 0;

						p {
							margin: 0;
							margin-bottom: $spacing_12px;
							font-weight: $regular;
							font-size: 14px;
							line-height: 150%;
							color: $grey-400;

							.forms-list {
								height: 38px;
								padding-left: $spacing_12px;
								border: $border_width solid $border-color;
								border-radius: $border_radius_4;
							}
						}

						.button-primary {
							margin-top: $spacing_12px;
							box-shadow: none;
						}

						.ur-export-custom-fields {
							.ur-form-fields-container,
							.ur-form-additional-fields-container,
							select[name="export_format"] {
								margin-bottom: $spacing_16px;
							}

							select[name="export_format"] {
								border-color: #dee0e9;
								height: 38px;
							}

							input[name="date_range"] {
								width: 100%;
								padding: $spacing_4px $spacing_10px;
							}
						}
					}
				}
			}
		}

		#popups-list {
			.ur-list-table-wrapper {
				width: 100%;
				overflow-x: auto;

				.wp-list-table {
					width: 100%;
    				border-collapse: collapse;

					thead {
						tr {
							th {
								&.column {
									&-shortcode,
									&-author,
									&-date {
										width: auto;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	p.submit {
		margin: $spacing_32px 0 0 0;
		padding: 0;

		.button-primary {
			transition: all .3s ease-in-out;
		}
	}
}


.user-registration-ui-autocomplete {
	font-size: 12px !important;

	.ui-menu-item {
		padding: 0px !important;

		.ui-menu-item-wrapper {
			padding: 10px;
			color: black;

			&.ui-state-active {
				color: white;
				background: #0073aa;
			}
		}
	}
}

.user-registration {
	.select2-container {
		.selection {
			.select2-selection--single {
				height: 38px;

				.select2-selection__arrow {
					top: $spacing_4px;
				}
			}
		}
	}
}

.select2-results {
	.select2-results__option {
		&--highlighted[data-selected] {
			background: #475bb2;
		}

		.wrap {
			margin-top: 0;

			&::before {
				font-size: 16px;
				padding-right: $spacing_8px;
			}
		}
	}
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color: rgba(57, 57, 57, 0.35);
}

.user-registration {
	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;

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

// Radio Image Setting
.user-registration-global-settings.radio-image {
	ul {
	  display: flex;
	  flex-direction: row;
	}

	li {
	  display: flex;
	  align-items: center;
	  margin-bottom: 10px;
	}

	input[type="radio"] + img {
	  cursor: pointer;
	}
}

.user-registration-inactive-addon{
	opacity: 0.7;
	pointer-events: pointer;
}