/**
 * 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_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_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_page_add-new-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;
			 }
		 }

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

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

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

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

				&.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: -1px;
					padding: 0px;
					border: 0;
					flex: 1;
					text-align: center;
					border-top: 4px solid transparent;
					transition: all .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;

						 &: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: .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: 16px;
					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 .3s ease-in-out;

				// content: "\f142";
				// cursor: pointer;
				// display: block;
				// font: 400 20px/1 Dashicons;
				// line-height: 0.5 !important;
				// padding: 4px;
				// position: relative;
				// right: 0;
				// top: 0;
				// float: right;
			}

			&.closed {
				&:before {
					// content: "\f140";
					transform: rotate(0deg);
				}
			}
		}
	}

	 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-add-new-row {
			 display: block;
			 margin: 20px auto;
			 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;
			 width: 48px;
			 bottom: 72px;
			 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 {
		margin-right: $spacing_8px;
	}

	.ur-options-list {
		li {
			display: flex;
			align-items: center;

			.editor-block-mover__control-drag-handle {
				margin-right: $spacing_8px;
				cursor: grab;

				 svg {
					 fill: $color_gray_two;
				 }
			 }

			input {
				margin-right: $spacing_8px;
			}

			.ur-multiple-choice {
				.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 {
				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 .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;

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

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

	 &::after {
		 @include icon_dashicons("\f223");
		 cursor: help;
	 }
 }

 #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_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_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: 16px;

		 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(14px);
			}
		}

		 .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: .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 {
	.swal2-container {
		h3 {
			font-size: 16px;
			font-weight: $regular;
		}

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

				&.swal2-confirm {
					background-color: #F75259 !important;
					border: $border_width solid #F75259;
					border-radius: $border_radius_3;
					transition: all .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-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: flex-start;
				flex-direction: row-reverse;
				gap: $spacing_12px;

				.swal2-confirm {
					background: #475BB2;
					transition: all .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 {
	 position: relative;
	 margin-bottom: 15px;

	 & input.ur_advance_setting.ur-settings-default-value, & input.ur-general-setting-field {
		 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_page_add-new-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: 140%;
					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 .3s ease-in-out;
			right: -$spacing_22px;

			svg {
				width: 12px;
				height: 12px;
				display: block;
				position: relative;
				left: -$spacing_2px;
				transition: all .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-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 .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;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

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

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





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