.#{$prefix} {
	label {
		font-weight: 500;
		line-height: 1.2;
		color: rgb(var(--wpt-lms-gray));
		.required {
			color: rgb(var(--wpt-lms-danger));
			margin-inline-start: 0.125rem;
		}
	}
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="url"],
	select {
		height: 2.375rem;
	}
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="url"],
	select,
	textarea,
	#fillinblank-textarea {
		background-color: rgb(var(--wpt-lms-white));
		border: 1px solid rgb(var(--wpt-lms-box-border));
		border-radius: 0.5rem;
		color: rgb(var(--wpt-lms-black));
		font-family: inherit;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.275rem;
		padding: 0.5rem 0.75rem;
		transition: all 0.15s ease;
		outline: none;
		margin: 0;
	}
	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		opacity: 1;
	}
	select,
	.tablenav select,
	.select2-container .select2-selection__rendered {
		/* border: 0.063rem solid rgb(var(--wpt-lms-primary-800)); */
		border: 0.063rem solid rgb(var(--wpt-lms-box-border));
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22' fill='rgba(144,146,178,1)'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E") no-repeat right 0.25rem top 55%;
		-webkit-appearance: none;
	}
	select,
	.tablenav .actions select,
	.tablenav .actions select {
		padding-right: 2rem;
	}
	.select2-container .select2-selection__rendered:hover,
	select:hover {
		box-shadow: 0 0.25rem 0.25rem rgba(var(--wpt-lms-primary-700), 5%);
		color: rgb(var(--wpt-lms-black));
	}
	input[type="checkbox"]:focus,
	input[type="color"]:focus,
	input[type="date"]:focus,
	input[type="datetime-local"]:focus,
	input[type="datetime"]:focus,
	input[type="email"]:focus,
	input[type="month"]:focus,
	input[type="number"]:focus,
	input[type="password"]:focus,
	input[type="radio"]:focus,
	input[type="search"]:focus,
	input[type="tel"]:focus,
	input[type="text"]:focus,
	input[type="time"]:focus,
	input[type="url"]:focus,
	input[type="week"]:focus,
	select:focus,
	textarea:focus,
	#fillinblank-textarea:focus {
		border-color: rgb(var(--wpt-lms-primary-700));
		outline: none;
		box-shadow: 0 0.25rem 0.25rem rgba(var(--wpt-lms-primary-800), 5%);
		color: rgb(var(--wpt-lms-black));
	}
	input[type="checkbox"]:hover,
	input[type="color"]:hover,
	input[type="date"]:hover,
	input[type="datetime-local"]:hover,
	input[type="datetime"]:hover,
	input[type="email"]:hover,
	input[type="month"]:hover,
	input[type="number"]:hover,
	input[type="password"]:hover,
	input[type="radio"]:hover,
	input[type="search"]:hover,
	input[type="tel"]:hover,
	input[type="text"]:hover,
	input[type="time"]:hover,
	input[type="url"]:hover,
	input[type="week"]:hover,
	select:hover,
	textarea:hover,
	#fillinblank-textarea:hover {
		box-shadow: 0 0.25rem 0.25rem rgba(var(--wpt-lms-primary-700), 5%);
		color: rgb(var(--wpt-lms-black));
	}
	input[type="checkbox"],
	input[type="radio"] {
		border: 0.063rem solid rgb(var(--wpt-lms-input-border));
		border-radius: 0.188rem;
		box-shadow: none;
		width: 1.375rem;
		height: 1.375rem;
		margin: 0;
		flex-shrink: 0;
		transition: all 0.15s ease-in-out;
		-webkit-appearance: none;
	}
	input[type="checkbox"]:checked {
		border-color: rgb(var(--wpt-lms-primary-700));
		background-color: rgb(var(--wpt-lms-primary-700));
		&::before {
			content: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjEwIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgNi41ODYgMTAuMjkzLjI5M2ExIDEgMCAxIDEgMS40MTQgMS40MTRMNCA5LjQxNC4yOTMgNS43MDdhMSAxIDAgMCAxIDEuNDE0LTEuNDE0eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
			margin: 0;
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	input[type="radio"] {
		border: 0.063rem solid rgb(var(--wpt-lms-input-border));
		border-radius: 50%;
		width: 1.375rem;
		height: 1.375rem;
		margin: 0;
		&:checked {
			border-color: rgb(var(--wpt-lms-primary-700));
			background-color: rgb(var(--wpt-lms-white));
			&::before {
				content: "";
				border-radius: 50%;
				width: 0.625rem;
				height: 0.625rem;
				margin: 0.313rem;
				background-color: rgb(var(--wpt-lms-primary-700));
				line-height: 1.14285714;
				display: block;
			}
		}
	}
	& &-form-check {
		display: flex;
		gap: 0.5rem;
		.#{$prefix}-title {
			font-size: 0.938rem;
			font-weight: 600;
		}
		&-control {
			display: flex;
			flex-direction: column;
			gap: 0.188rem;
		}
	}
	& &-toggle {
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		display: flex;
		input[type="checkbox"] {
			background: #fff;
			border: 0.063rem solid rgb(var(--wpt-lms-editor-border));
			border-radius: 0.188rem;
			height: 1.625rem;
			margin: 0;
			transition:
				box-shadow 0.15s ease,
				background-color 0.15s ease;
			width: 1.625rem;
			&:not(:disabled) {
				opacity: 0 !important;
				position: absolute;
				z-index: 3;
			}
			&:checked:before {
				background-position: 50%;
				background-repeat: no-repeat;
				background-size: 0.75rem;
				content: "";
				display: block;
				height: 100%;
				margin: 0;
				width: 100%;
			}
			&:checked+.#{$prefix}-toggle-field-container {
				.#{$prefix}-toggle-switch {
					background: rgb(var(--wpt-lms-primary-700));
					&:before {
						background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path fill="7B2CBF" d="M4,5.9l3.1-3.1c0.2-0.2,0.5-0.2,0.7,0C8,3,8.1,3.3,7.9,3.5c0,0,0,0,0,0L4,7.4L2.1,5.5C1.9,5.3,2,5,2.2,4.8 c0.2-0.2,0.5-0.2,0.7,0L4,5.9z"/></svg>');
						background-size: 1rem;
						left: 1.875rem;
					}
				}
			}
		}
		& .#{$prefix}-toggle-field-container {
			display: flex;
			align-items: center;
			gap: 0.625rem;
		}
		& .#{$prefix}-toggle-text {
			font-weight: 500;
			font-size: 0.875rem;
		}
		& .#{$prefix}-toggle-switch {
			background: rgb(var(--wpt-lms-editor-border));
			border: none;
			border-radius: 0.938rem;
			box-shadow: inset 0 0.063rem 0.125rem rgba(90, 97, 105, 0.15);
			cursor: pointer;
			display: inline-block;
			height: 1.875rem;
			margin: 0;
			padding: 0;
			position: relative;
			transition: all 0.25s ease;
			transition-duration: 0.2s;
			transition-property: background-color, border-color, color, fill, stroke;
			transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1);
			width: 3.5rem;
			overflow: hidden;
			&:before {
				background: rgba(var(--wpt-lms-white)) 50% no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 10 10"><path fill="%23c6c6c6" d="M2.2,2.2c-0.3,0.3-0.3,0.7,0,0.9c0,0,0,0,0,0L4.1,5L2.2,6.9c-0.3,0.3-0.3,0.7,0,0.9c0.3,0.3,0.7,0.3,0.9,0L5,5.9l1.9,1.9c0.3,0.3,0.7,0.3,0.9,0s0.3-0.7,0-0.9l0,0L5.9,5l1.9-1.9c0.3-0.3,0.3-0.7,0-0.9c-0.3-0.3-0.7-0.3-0.9,0L5,4.1L3.1,2.2C2.9,1.9,2.5,1.9,2.2,2.2C2.2,2.2,2.2,2.2,2.2,2.2z"/></svg>');
				background-size: 0.875rem;
				border-radius: 50%;
				box-shadow: 0 0.063rem 0.25rem rgba(24, 24, 72, 0.124);
				display: block;
				height: 1.375rem;
				left: 0.25rem;
				top: 0.25rem;
				position: relative;
				transition: all 0.25s ease;
				transition-duration: 0.2s;
				transition-property: background, left;
				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				width: 1.375rem;
				content: "";
			}
		}
	}
	&-form {
		border: 0.063rem solid rgba(var(--wpt-lms-box-border), 0.5);
		background-color: rgb(var(--wpt-lms-white));
		box-shadow: 0 0.063rem 0.25rem rgba(var(--wpt-lms-primary-800), 5%);
		border-radius: 0.75rem;
		padding: 1.25rem;
		margin: 0 auto;
		gap: 1rem !important;
		.form-group {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			button {
				justify-content: center;
				height: 2.875rem !important;
			}
			.#{$prefix}-form-control {
				padding: 0.75rem !important;
			}
			.description, .qualifications, .achievements_awards {
				font-size: 0.875rem;
				color: rgb(var(--wpt-lms-gray));
			}
			&-right {
				position: relative;
				.#{$prefix}-form-control {
					padding-right: 2rem !important;
				}
				i {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0.75rem;
					margin: auto;
					display: flex;
					align-items: center;
				}
			}
			&-left {
				position: relative;
				.#{$prefix}-form-control {
					padding-left: 2rem !important;
				}
				i {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0.75rem;
					margin: auto;
					display: flex;
					align-items: center;
				}
			}
		}
		&.#{$prefix}-instructor-form {
			width: 40%;
		}
		&.#{$prefix}-student-form {
			width: 40%;
		}
	}
}
.inline-edit-row fieldset input[name="jj"] {
	padding: 0.5rem 0.75rem;
}
.inline-edit-row fieldset input[name="hh"] {
	padding: 0.5rem 0.75rem;
}
.inline-edit-row fieldset input[name="aa"] {
	padding: 0.5rem 0.75rem;
}
.inline-edit-row fieldset input[name="mn"] {
	padding: 0.5rem 0.75rem;
}
fieldset .inline-edit-group {
	.inline-edit-private {
		display: flex;
		align-items: center;
		gap: 0.313rem;
	}
}
#loginform {
	margin-top: 1.875rem;
	width: 30%;
	.login-remember {
		label {
			display: flex;
			align-items: center;
			gap: 0.625rem;
		}
	}
	.login-submit {
		justify-content: flex-start;
	}
	&.#{$prefix}-grid {
		column-gap: 0;
	}
}
// Responsive
@media (max-width: 1400px) {
	.#{$prefix}-form {
		&.#{$prefix}-instructor-form {
			width: 60%;
		}
		&.#{$prefix}-student-form {
			width: 60%;
		}
	}
}
@media (min-width: 768px) and (max-width: 1200px) {
	#loginform {
		width: 60%;
	}
}
@media (max-width: 991px) {
	#loginform {
		width: 90%;
	}
	.#{$prefix}-form {
		&.#{$prefix}-instructor-form {
			width: 100%;
			&.#{$prefix}-grid {
				column-gap: 0;
			}
		}
		&.#{$prefix}-student-form {
			width: 100%;
			&.#{$prefix}-grid {
				column-gap: 0;
			}
		}
	}
}
@media (max-width: 768px) {
	#loginform {
		width: 90%;
	}
	.#{$prefix}-instructor-form {
		width: 100%;
	}
	.#{$prefix}-student-form {
		width: 100%;
	}
}