[ Avaa Bypassed ]

.ur-form-group {
	margin-bottom: 16px;
}

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

/**
* Form Field
* Set the class name for all input field
**/
.ur-input {
	display: block;
	width: 100%;
	border: 1px solid $border-color;
	border-radius: 4px;
}

// Upload file
.user-registration-custom-file {
	color: $input_color;
	font-size: 14px;
	display: flex;
	align-items: center;
	position: relative;

	input {
		position: absolute;
		z-index: 2;
		width: 100%;
		margin: 0;
		opacity: 0;
	}

	&__label {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 2px 2px 2px 8px;
		background-color: $white;
		border: 1px solid $border-color;
		border-radius: 4px;
		z-index: 1;
	}

	&__button {
		margin-left: auto;
		display: inline-block;
		background: $color_gray_two;
		color: $white;
		padding: 6px 15px;
		border-radius: 4px;
	}

	&+.help {
		margin-top: 4px;
	}
}

.ur-form-field--sm {
	width: 80px;
	flex: 0 0 80px;
}

// Editable Title
.user-registration-editable-title {
	display: inline-flex;
	flex-direction: row-reverse;
	position: relative;

	.user-registration-editable-title__icon {
		background: $color_gray_four;
		color: $color_gray_one;
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		margin-bottom: 0;

		&::after {
			content: "";
			border-radius: 3px;
			position: absolute;
			left: 32px;
			right: calc(100% - 32px);
			height: 32px;
			border-radius: 0 3px 3px 0;
			transition: all 0.3s ease 0s;
		}
	}

	.user-registration-editable-title__input {
		color: $gray_base;
		background: none;
		font-size: 16px;
		font-weight: 500;
		width: auto;
		height: 32px;
		padding: 4px 8px;
		pointer-events: none;
		border: 1px solid transparent !important;
		border-radius: 0 4px 4px 0;
		z-index: 1;

		&.is-editing {
			border-color: transparent;
			pointer-events: all;

			+.user-registration-editable-title__icon {
				color: $white;
				background: $primary_color;
				border-radius: 3px 0 0 3px;

				&::after {
					top: 0;
					right: 0;
					border: 1px solid $primary_color;
				}
			}
		}

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

// User Registration Switch
.user-registration-switch {
	display: inline-flex;
	align-items: center;

	input[type="checkbox"] {
		display: none;

		&.user-registration-switch__control {
			background: $color_gray_two;
			width: 28px;
			height: 18px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			flex: 0 0 28px;
			margin: 0;
			position: relative;
			border: 2px solid $color_gray_two;
			transition: 0.1s transform ease;
			box-sizing: border-box;

			&::before {
				content: none;
			}

			&::after {
				display: inline-block;
				content: "";
				height: 14px;
				width: 14px;
				background: $white;
				border-radius: 50%;
				position: absolute;
				transition: 0.1s transform ease;
			}
		}

		&:checked {
			background: $green;
			border-color: $green;

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

	label {
		margin: 0 0 0 8px !important;
	}
}

.user-registration {
	input {
		border-color: $border-color;
	}

	// Customize Select2 style
	.select2 {
		&.select2-container {
			width: 100% !important;
		}
	}

	.select2-results__option .wrap:before {
		content: "\2610";
		width: 25px;
		height: 25px;
		padding-right: 10px;
	}

	.select2-results__option[data-selected="true"] .wrap:before {
		content: "\2714";
	}

	.select2-drop,
	.select2-dropdown {
		z-index: 999999 !important;
	}

	.select2-results {
		line-height: 1.5em;

		.select2-results__option,
		.select2-results__group {
			margin: 0;
			padding: 8px;
		}
	}

	.select2-dropdown {
		border-color: $color_gray_four;
	}

	.select2-dropdown--below {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	}

	.select2-dropdown--above {
		box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
	}

	.select2-container {
		.select2-selection__rendered.ui-sortable li {
			cursor: move;
		}

		.select2-selection {
			border-color: $color_gray_four;
		}

		.select2-search__field {
			min-width: 20px;
		}

		.select2-selection--single {
			height: 32px;

			.select2-selection__rendered {
				display: block;
				line-height: 32px;
				padding-right: 24px;
			}

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

		.select2-selection--multiple {
			min-height: 28px;
			border-radius: 4px;
			line-height: 1.5;
			border: 1px solid #ddd !important;
			padding-left: 4px;

			li {
				margin: 0;
			}

			.select2-selection__choice {
				padding: 2px 6px;
			}

			.select2-selection__rendered {
				// display: block;
				display: flex;
				margin: 0px;

				.select2-selection__choice {
					margin: 4px;
					line-height: 1.4;
					display: flex;
					align-items: center;
					justify-content: center;

					.select2-selection__choice__remove {
						bottom: 0px;
					}
				}
			}
		}

		.select2-selection__clear {
			color: #999;
			margin-top: -1px;
		}

		.select2-search--inline {
			.select2-search__field {
				font-family: inherit;
				font-size: inherit;
				font-weight: inherit;
				padding: 3px 0;
				margin: 0;
				line-height: 1;
				min-height: 26px;
				height: 32px;
			}
		}
	}
}