/* Screen-reader-only text that becomes visible when keyboard-focused. */
.elw-a11y-sr-only {
	color: var(--message-error-fill) !important;
    font-size: 14px !important;
    font-weight: 200 !important;
}

/* Do not rely on the theme to supply an obvious keyboard focus indicator. */
.xoo-el-container :is(
	a,
	button,
	input,
	select,
	textarea,
	[role="button"],
	[role="tab"]
):focus-visible,
.xoo-el-popup-notice :is(
	a,
	button,
	iframe,
	[role="button"]
):focus-visible {
	outline: 3px solid #005fcc !important;
	outline-offset: 3px !important;
	box-shadow: none !important;
}

/* The original close control is a span. Give it a usable target size. */
.xoo-el-close[role="button"],
.xoo-el-notice-close[role="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	line-height: 1;
}

.xoo-el-tabs [role="tab"] {
	cursor: pointer;
}

.elw-a11y-required-marker {
	margin-inline-start: 0.2em;
	font-weight: 700;
}

.elw-a11y-field-error {
	display: block;
	margin-block-start: 1rem;
	color: var(--message-error-fill) !important;
    font-size: 14px !important;
    font-weight: 200 !important;
}

.xoo-el-container :is(input, select, textarea)[aria-invalid="true"] {
	border-color: #b32d2e !important;
	box-shadow: 0 0 0 1px #b32d2e !important;
}

/* Prevent decorative field icons from obscuring focus outlines. */
.xoo-aff-input-icon[aria-hidden="true"] {
	pointer-events: none;
}

.xoo-aff-pw-toggle{
	bottom: unset !important;
	top: 46px !important;
}

/**
 * Login Modal
 */
button.xoo-el-close {
	font-size: 17px;
	position: absolute;
	right: -9px;
	top: -12px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 100;
	width: 44px !important;
	height: 44px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	box-shadow: rgba(0, 0, 0, 0.17) -1px 2px 10px;
}

button.xoo-el-login-btn {
	height: 44px !important;
}

@media (prefers-reduced-motion: reduce) {
	.xoo-el-container *,
	.xoo-el-container *::before,
	.xoo-el-container *::after,
	.xoo-el-popup-notice *,
	.xoo-el-popup-notice *::before,
	.xoo-el-popup-notice *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.xoo-el-container :focus-visible,
	.xoo-el-popup-notice :focus-visible {
		outline-color: Highlight !important;
	}
}