html.anytypeWebclipper-auth { width: 640px; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0px); }

#anytypeWebclipper-auth {
	@import "~scss/_mixins";

	.input, .select, .textarea { @include text-small; border: 1px solid var(--color-shape-secondary); width: 100%; border-radius: 1px; }

	.pin {
		.input { width: 32px; height: 40px; @include text-paragraph; border-radius: 6px; }
	}

	.input, .select { height: 32px; padding: 0px 10px; }
	.select { display: flex; align-items: center; padding-right: 20px; }
	.textarea { padding: 10px; resize: none; height: 68px; display: block; }
	.buttonsWrapper { display: flex; flex-direction: column; justify-content: center; gap: 8px 0px; margin: 16px 0px 0px 0px; }
	.loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: var(--color-bg-loader); z-index: 10; }
	.error { @include text-small; margin: 1em 0px 0px 0px; }

	.isFocused { border-color: var(--color-ice) !important; box-shadow: 0px 0px 0px 1px var(--color-ice); }

	.page.pageIndex, 
	.page.pageSuccess { display: flex; flex-direction: column; align-items: center; }

	.page.pageIndex {
		.title { @include text-header3; margin: 0px 0px 24px 0px; }
	}

	.page.pageSuccess {
		.title { @include text-header3; }
	}
}