/**
 * 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-dashboard {
	#wpcontent{
		margin-left: 140px;
	}
  }

  .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, .toplevel_page_user-registration {
	  #wpfooter {
		  display: none; //Hide WP footer on form builder page
	  }

	  .ur-form-container {
		  margin: 0;

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

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

		  #menu-management {
			  margin-top: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		  article {
			  overflow: auto;
		  }
	  }

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

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

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

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

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

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

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

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

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

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

			  &:focus {
				  outline: none;
			  }
		  }
	  }

	  article {
		  padding: 1.5em;

		  p {
			  margin: 1.5em 0;
		  }

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

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

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

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

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

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

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

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

		  fieldset {
			  margin-top: 4px;

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

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

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

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

			  label {
				  display: inline-block;
			  }

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

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

		  .forminp-radio ul {
			  margin: 0;

			  li {
				  line-height: 1.4em;
			  }
		  }

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

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

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

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

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

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

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

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

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

		  .colorpick {
			  border-left: 0;
		  }

		  .image_width_settings {
			  vertical-align: middle;

			  label {
				  margin-left: 10px;
			  }
		  }

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

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

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

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

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

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

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

	  * {
		  box-sizing: border-box;
	  }

	  *:focus {
		  outline: 0;
	  }

	  a {
		  text-decoration: none;
	  }

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

	  h4 {
		  font-size: 16px;
	  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		 &.ui-draggable-disabled {
			 position: relative;
			 opacity: .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: -2px;
					 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;
						 font-size: 15px;

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

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

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

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


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

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

						 a {
							 // cursor: not-allowed;
							 opacity: .25;
						 }
					 }
				 }
			 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

			 &:before {
				 content: "";
				 background-image: url("../images/icons/ur-arrow-down.svg");
				 background-repeat: no-repeat;
				 background-position: center;
				 background-size: 100%;
				 float: right;
				 transform: rotate(180deg);
				 width: 18px;
				 height: 18px;
				 transition: all .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;
		  }
	 }

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

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

				  svg {
					  fill: $color_gray_two;
				  }
			 }

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

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

				 input {
					 margin-right: 0;
				 }

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

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

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

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

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

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

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

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

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

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

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

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

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

		 > div {
			 margin-right: $spacing_8px;
		 }

		  .urcl-operator {
			  width: 78px;
		  }

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

  /**
	* Tooltips
	*/

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

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

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

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

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

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

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

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

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

  /**
	* Help Tip
	*/
  .user-registration-help-tip,
  .ur-portal-tooltip {
	  color: $color_gray_two;
	  display: inline-block;
	  font-size: 22px;
	  font-style: normal;
	  height: 16px;
	  line-height: 16px;
	  position: relative;
	  vertical-align: baseline;
	  width: 16px;

	  &::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, .ur-advance-setting.ur-advance-pattern_value {
	  position: relative;
	  margin-bottom: 15px;

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

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

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

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

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

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

		  &:hover {
			 cursor: pointer;
		  }
	  }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		 .nav-tab-wrapper {

		 }

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

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

			 .ur-toggle-content {
				 label {
					 font-weight: $regular;
					 font-size: 14px;
					 line-height: 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-login-form-wrapper{
				 display: flex;
				 flex-direction: column;
				 align-items: center;
				 justify-content: center;

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

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

				 p{
					 font-size: 16px;
				 }
				 .ur-login-content{
					 margin-left: 10rem;
					 margin-right: 5rem;
				 }

			 }
			 .ur-login-view-doc{
				 margin-top:5rem;
				 a {
					 font-size:large;
					 text-decoration:underline;
				 }

			 }
		 }

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

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

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

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

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

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

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

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

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

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

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

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

					 &#user_registration_form_setting_minimum_password_strength_field {
						 margin-bottom: 0;
					 }

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

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

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

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

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

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

						 &--item {
							 label {
								 font-size: 14px;
								 font-weight: 600;
								 color: $grey-300;
								 margin-bottom: 0;
								 border: $border_width solid $grey-300;
								 border-radius: $border_radius_5;
								 text-align: center;
								 padding: $spacing_10px;
								 align-items: center;
								 display: flex;
								 transition: all .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;
									 }
								 }
							 }
						 }
					 }
				 }
			 }
		 }
	 }
 }

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

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

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

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

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

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

					 li {
						 a {
							 font-weight: $regular;
							 font-size: 15px;
							 line-height: 140%;
							 color: $grey-600;
							 padding: 0;
							 position: relative;
							 padding-bottom: $spacing_16px;
							 transition: all .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,
							 &.active {
								 font-weight: $semi_bold;
							 }

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

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

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

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

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

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

											 h1 {
												 margin-bottom: $spacing_12px;
											 }

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

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

												 img {
													 margin-left: -$spacing_24px;

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

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

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

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

															 &:hover {
																 background: $primary_color !important;

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

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

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

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

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

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

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

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

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



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

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

						 br {
							 display: none;
						 }
					 }

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

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

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

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

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

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

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

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

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

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