html,
body {
	margin: 0;
	min-height: 100%;
	background: var(--neutral-0, #fff);
}

#root {
	min-height: 100vh;
}

#boot-loader {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 24px;
	box-sizing: border-box;
	background: var(--neutral-0, #fff);
}

#boot-loader-logo {
	display: none;
	max-width: min(240px, 60vw);
	max-height: 72px;
	object-fit: contain;
}

.boot-loader-dots {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 20px;
}

.boot-loader-dot {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	animation: boot-loader-bounce 0.6s ease-in-out infinite;
}

.boot-loader-dot-primary {
	background: var(--primary-500, #3b8755);
}

.boot-loader-dot-neutral {
	background: var(--neutral-500, #a3a4b1);
}

.boot-loader-dot-delay-1 {
	animation-delay: 0.12s;
}

.boot-loader-dot-delay-2 {
	animation-delay: 0.24s;
}

@keyframes boot-loader-bounce {
	0%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-15px);
	}
}