@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-400 !important;
	}

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

#wpcontent {
	padding-left: 0;

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

	.wrap {
		margin: 0;
		padding: $spacing_24px;

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

.user-registration-settings {
	display: flex;
	flex-direction: row;
	background: $grey-0;
	filter: drop-shadow(-4px 4px 20px rgba(89, 89, 89, 0.1));

	.user-registration-header {
		flex: 0 0 25%;
		padding: $spacing_24px 0 0;
		background: #fafafc;
		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: 2px;
							bottom: 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_14px 0 $spacing_14px $spacing_22px;
				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: $regular;
						font-size: 14px;
						line-height: 150%;
						color: $grey-400;
					}

					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: -4px;
					opacity: 0;
					transition: all .3s ease-in-out;
				}

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

					path {
						color: $grey-400;
					}
				}

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

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

						.ur-nav__link-icon {
							svg {
								path {
									fill: $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_10px $spacing_12px;
						border-radius: $border_radius_4;
						background: $grey-400;
						color: $grey-0;
						text-align: center;
						transition: .3s opacity;
						width: 200px;
						white-space: pre-line;
						text-align: left;
						top: 50%;
						right: -214px;
						z-index: 10;
						transform: translateY(-50%);

						&::after {
							content: "";
							position: absolute;
							border-right: 12px solid $grey-400;
							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 $grey-0;
							padding: $spacing_4px $spacing_10px;
							background: $grey-0;
							border-radius: $border_radius_2;
							color: $primary_color;
							font-weight: $semi_bold;
							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: 24px;
						width: 24px;

						path {
							fill: $grey-400;
						}
					}
				}

				&: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;

					> p {
						font-size: 14px;
						margin: 0;
					}

					> svg {
						margin-right: $spacing_16px;
					}
				}

				.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: #000;
					}
				}

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

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

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

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

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

	.user-registration-settings-container {
		flex: auto;
		display: flex;
		flex-direction: column;
		padding: $spacing_24px;
		padding-top: 0;

		.user-registration-options-header {
			position: sticky;
			position: -webkit-sticky;
			top: var(--wp-admin--admin-bar--height, $spacing_32px);
			z-index: 5;
			background: $grey-0;
			padding-top: $spacing_24px;

			&--top {
				display: flex;
				align-items: center;

				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_40px;

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

		.user-registration-options-container {

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

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

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

			.user-registration-integrations {
				border-radius: 3px;
				background: #fafafc;
				border: 1px solid #ced4da;
				padding: 10px 20px;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 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: 2px;
					}

					&.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: 4px;
				align-items: center;
				border: 1px solid #ced4da;

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

			.integration-info {
				margin-right: 20px;
			}

			.integration-action {
				background: $grey-0;
				border: $border_width solid $grey-50;
				border-radius: 3px;
				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: #fafafc;
				border: $border_width solid #edeff7 !important;
				border-radius: $border_radius_7;
				margin-top: 0 !important;
				margin-bottom: $spacing_24px;
				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;

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

						&.active {
							border-bottom: 1px 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: 1px 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 0 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;
										}

										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;
											background: #4CC741;
											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;
											}
										}

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

					.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: 600;
							color: $grey-400;
							font-size: 14px;
							flex: 0 0 38%;
							margin-bottom: 0;

							span {
								color: #BABABA;
							}
						}

						&--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%;
								height: 38px;
							}

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

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

								&__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;
									}
								}

								&--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: 36px;
										right: $spacing_8px;
									}
								}
							}

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

							.ur-radio-group-list {
								display: flex;
								gap: 20px;

								&--item {
									max-width: 120px;
									height: auto;
									border: 1px solid #E9E9E9;
									border-radius: 5px;
									text-align: center;
									padding: 6px;
									align-items: center;
									display: flex;

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

										border-color: #475BB2;
									}

									label {
										font-size: 12px;
										font-weight: 600;
										color: #383838;
										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%;
							}
						}
					}
				}

				p.ur-p-tag {
					margin: -$spacing_6px 0 $spacing_24px;
					padding: $spacing_10px $spacing_12px $spacing_10px $spacing_16px;
					background: $grey-0;
					border-left: 3px solid #17a2b8;
					font-weight: $regular;
					color: $grey-300;

					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;
						background: #fafafc;
						border: $border_width solid $blue-50;
						border-radius: $border_radius_9 $border_radius_9 0 0;

						.hndle {
							font-weight: 600;
							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;
								}
							}

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

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

  }