.form-control {
	background: $white;
	height: 40px;
	padding-left: 20px;
	color: $text-clr2 !important;
	border-radius: 5px;

	&:focus,
	&.is-invalid:focus {
		outline: none;
		box-shadow: none;
	}

	&::placeholder {
		color: $text-clr2;
	}
}

textarea.form-control {
	min-height: 100px;
	resize: none;
}

.form-floating label {
	color: $text-clr3;
}

// Custom Radio
.custom-radio {
	input[type="radio"] {
		display: none;
		& + span::before,
		& + span::after {
			transition: all 0.3s;
		}
		& + span::after {
			position: absolute;
			left: 0px;
			top: 3px;
			display: inline-block;
			content: "";
			width: 20px;
			height: 20px;
			border: 2px solid $border-clr;
			border-radius: 50%;
			background-color: $white;
			z-index: 100;
		}
		&:checked {
			& + span::after {
				background-color: $white;
				border-color: $primary;
			}
		}
		&:checked {
			& + span::before {
				transform: rotate(45deg);
				position: absolute;
				left: 4px;
				top: 7px;
				width: 12px;
				height: 12px;
				background-color: #3f52e3;
				content: "";
				z-index: 900;
				border-radius: 50%;
			}
		}
	}
	label {
		position: relative;
		cursor: pointer;

		span {
			font-weight: 400;
			font-size: 16px;
			line-height: 26px;
			color: $text-clr2;
			position: relative;
			padding-left: 25px;
		}
	}
}

// Custom Checkbox
.custom-checkbox {
	input[type="checkbox"] {
		display: none;
		& + span::before,
		& + span::after {
			transition: all 0.3s;
		}
		& + span::after {
			position: absolute;
			left: 0px;
			top: 3px;
			display: inline-block;
			content: "";
			width: 20px;
			height: 20px;
			border: 2px solid $border-clr;
			border-radius: 0px;
			background-color: $white;
			z-index: 100;
		}
		& + span.redious-border-5::after {
			border-radius: 5px;
		}
		&:checked {
			& + span::after {
				background-color: $white;
				border-color: $primary;
			}
		}
		&:checked {
			& + span::before {
				transform: rotate(45deg);
				position: absolute;
				left: 7px;
				top: 6px;
				width: 6px;
				height: 11px;
				border-width: 2px;
				border-style: solid;
				border-top: 0;
				border-left: 0;
				border-color: $primary;
				content: "";
				z-index: 900;
			}
		}
	}
	label {
		position: relative;
		cursor: pointer;

		span {
			font-weight: 400;
			font-size: 16px;
			line-height: 26px;
			color: $text-clr2;
			position: relative;
			padding-left: 35px;
		}
	}
}

// Setting Check active/deactive BTN
.setting-check {
	position: relative;
	top: 4px;
	input {
		display: none;
		opacity: 0;
		&:checked ~ label {
			background: $primary;
		}
		&:checked ~ label:after {
			left: 22px;
		}
	}
	label {
		position: relative;
		width: 44px;
		height: 24px;
		display: inline-block;
		background: $border-clr;
		border-radius: 30px;
		cursor: pointer;
		transition: 0.3s;
		&::after {
			content: "";
			position: absolute;
			left: 2px;
			top: 2px;
			width: 20px;
			height: 20px;
			background: $white;
			border-radius: 50%;
			transition: 0.3s;
		}
	}
}

.lang-select {
	width: 120px;
	height: 40px;
}

// Country Code Select Field
.phone-field {
	border: 1px solid $border-clr;
	transition: all 0.5s ease;
	&:focus-within {
		border-color: $form-check-input-focus-border;
	}
}
.country-code-select {
	width: 18%;
	height: 40px;
	padding: 7px 10px;
	border-radius: 5px 0 0 5px;
	transition: all 0.5s ease;
	border-right: 1px solid $border-clr;

	&:hover {
		background-color: $border-clr;
		color: $text-clr1;
	}
}
.phone-number {
	width: 81.9%;
	input {
		height: 40px;
		border-radius: 5px;
		width: 100%;
		border: none;
		padding: 0 10px;
		color: $text-clr1;
		&:focus {
			outline: 0;
		}
	}
}
.country-code-filter {
	position: relative;
	li {
		a {
			display: flex;
			align-items: center;
			gap: 12px;
			color: $text-clr2;
			.country-code-number {
				color: $text-clr2;
				font-size: 16px;
				font-weight: 400;
			}
			.country-flag {
				img {
					height: 20px;
					width: 30px;
				}
			}
			&.dropdown-toggle::after {
				inset-inline-end: 5px;
			}
		}
		ul {
			--hoverCLR: #eee;
			width: 100%;
			max-height: 200px;
			overflow-y: auto;
			padding-top: 0;
			inset: 8px auto auto -11px !important;
			border: 1px solid $border-clr;
			border-radius: 5px;
			li {
				transition: all 0.5s ease;
				&:not(:last-child) {
					margin-bottom: 5px;
				}
				a {
					&:hover,
					&:focus {
						background-color: var(--#{hoverCLR}) !important;
					}
				}
			}
			.country-search {
				position: sticky;
				top: 0px;
				left: 0;
				border: none;
				border-bottom: 1px solid $border-clr;
				padding-left: 10px;
				font-size: 14px;
				width: 100%;
				height: 35px;
				margin-bottom: 5px;
				&:focus {
					outline: none;
					border-bottom: 1px solid $border-clr;
				}
			}
		}
	}
}

.country-code-select {
	&.orgInstructor {
		width: 26%;
	}
}

// Add New Coupon
.add-coupon {
	.phone-number {
		width: 91%;
	}

	.country-code-select {
		width: 9%;
		border-right: 0;
		border-inline-start: 1px solid $border-clr;
		border-radius: 0 5px 5px 0;
	}
}
