/* Shared account/admin form controls. */
.kj-password-control {
	position: relative;
	display: block;
	width: 100%;
}

.kj-password-control input {
	padding-right: 3.25rem !important;
}

.kj-password-toggle {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: .4rem;
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #81736f;
	cursor: pointer;
}

.kj-password-toggle:hover {
	background: rgba(217, 106, 125, .09);
	color: var(--kj-pink-dark, var(--pink-dark, #c1546a));
}

.kj-password-toggle:focus-visible {
	outline: 2px solid var(--kj-pink, var(--pink, #d96a7d));
	outline-offset: 2px;
}

.kj-password-toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.ld-ext-right {
	position: relative;
}

.ld-ext-right > .kj-form-loader {
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 1em;
	height: 1em;
	transform: translateY(-50%);
	border: 2px solid currentColor;
	border-left-color: transparent;
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ld-ext-right.running > .kj-form-loader {
	opacity: 1;
	visibility: visible;
	animation: kj-form-loader-spin .72s linear infinite;
}

.ld-ext-right[aria-busy="true"] {
	cursor: wait;
}

.kj-account-text-button.ld-ext-right {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding-right: 0;
}

.kj-account-text-button.ld-ext-right > .kj-form-loader {
	position: static;
	display: inline-block;
	flex: 0 0 1em;
	transform: none;
}

.kj-account-text-button.ld-ext-right.running > .kj-form-loader {
	animation-name: kj-form-loader-inline-spin;
}

@keyframes kj-form-loader-spin {
	from { transform: translateY(-50%) rotate(0); }
	to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes kj-form-loader-inline-spin {
	from { transform: rotate(0); }
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ld-ext-right.running > .kj-form-loader {
		animation: none;
	}
}

@media (forced-colors: active) {
	.kj-password-toggle:focus-visible {
		outline-color: ButtonText;
	}
}