.#{$prefix} {
	$h: &;
	& #{$h}-notice {
		margin-top: 1.5rem;
		&.d-none {
			display: none;
		}
	}
	& #{$h}-settings {
		margin-top: 1.5rem;
		font-size: 1rem;
		line-height: 1.25;
		&-navigation {
			display: flex;
			flex-direction: column;
			gap: 0.313rem;
			position: sticky;
			top: 6.5rem;
			a {
				padding: 0.625rem 1rem;
				border-radius: 0.188rem;
				border: 1px solid transparent;
				color: rgba(var(--wpt-lms-black), 0.75);
				display: flex;
				align-items: center;
				gap: 0.625rem;
				text-decoration: none;
				font-size: 0.938rem;
				transition: all 0.15s ease-in-out;
				svg {
					fill: rgb(var(--wpt-lms-primary-700));
					transition: all 0.15s ease-in-out;
				}
				&:hover {
					color: rgb(var(--wpt-lms-black));
					background-color: rgba(var(--wpt-lms-primary-700), 5%);
				}
				&.active {
					border-color: rgb(var(--wpt-lms-box-border));
					background-color: rgb(var(--wpt-lms-white));
					font-weight: 500;
					color: rgb(var(--wpt-lms-black));
					box-shadow: 0 0.063rem 0.25rem rgba(var(--wpt-lms-primary-800), 0.06);
				}
				&:hover,
				&.active {
					svg {
						fill: rgb(var(--wpt-lms-primary-800));
					}
				}
			}
		}
		&-row {
			display: flex;
			flex-flow: row wrap;
			gap: 1rem;
			align-items: center;
			justify-content: space-between;
			#{$h}-form-control {
				flex-grow: 1;
			}
		}
		&-head {
			h2 {
				font-size: 1.125rem;
				color: rgba(var(--wpt-lms-black), 0.5);
				font-weight: 500;
			}
		}
		#{$h}-retry-mode,
		#{$h}-revel-mode {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 0.625rem;
			margin-left: 2.25rem;
			padding: 1.25rem;
			background-color: rgb(var(--wpt-lms-primary-700), 5%);
			width: calc(100% - 2.25rem);
		}
		#{$h}-custom-fileds {
			td {
				vertical-align: middle;
			}
			#{$h}-sort-column {
				width: 3.5rem;
				cursor: move;
				text-align: center;
				vertical-align: middle;
				line-height: 1;
				&.ui-sortable-handle i {
					color: rgb(var(--wpt-lms-input-border));
				}
			}
			#{$h}-actions {
				width: 5rem;
				text-align: center;
				a {
					display: inline-flex;
					i {
						color: rgb(var(--wpt-lms-gray));
					}
				}
			}
			input[type="email"],
			input[type="number"],
			input[type="password"],
			input[type="search"],
			input[type="tel"],
			input[type="text"],
			input[type="url"],
			select {
				width: 100%;
			}
			#{$h}-requires {
				width: 15rem;
			}
			#{$h}-type {
				width: 20rem;
			}
		}
	}
}
