/* Mobile captcha readability: keep the task visible and put the answer field below it. */
@media (max-width: 520px) {
	.bn-form-field.is-captcha {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	.bn-form-field.is-captcha > span:first-child,
	.bn-form-field.is-captcha .bn-captcha-preview,
	.bn-form-field.is-captcha > input,
	.bn-form-field.is-captcha .bn-field-error {
		grid-column: 1 / -1 !important;
	}

	.bn-form-field.is-captcha .bn-captcha-preview {
		width: 100% !important;
		max-width: 100%;
		margin: 0;
		justify-content: flex-start;
		overflow: visible;
		white-space: normal;
	}

	.bn-form-field.is-captcha > input {
		display: block;
		width: 100% !important;
		min-width: 0;
		min-height: 48px;
	}

	.bn-page-shell .captcha_body,
	.bn-login-modal .bn-login-dialog .captcha_body {
		display: grid;
		grid-template-columns: 42px 18px 42px 18px 34px !important;
		grid-auto-rows: minmax(42px, auto);
		gap: 8px;
		align-items: center;
	}

	.bn-page-shell .bn-page-content input.captcha_divpole,
	.bn-login-modal .bn-login-dialog input.captcha_divpole {
		grid-column: 1 / -1 !important;
		grid-row: 2;
		width: 100% !important;
		min-width: 0;
		margin: 0;
	}

	.bn-page-shell .captcha_reload,
	.bn-login-modal .bn-login-dialog .captcha_reload {
		grid-column: 5;
		grid-row: 1;
		justify-self: end;
	}
}

@media (max-width: 360px) {
	.bn-page-shell .captcha_body,
	.bn-login-modal .bn-login-dialog .captcha_body {
		grid-template-columns: 36px 16px 36px 16px 32px !important;
		gap: 7px;
	}

	.bn-page-shell .captcha_divimg img,
	.bn-login-modal .bn-login-dialog .captcha_divimg img {
		width: 36px;
		height: 36px;
	}
}