@import"https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap";

:root {
	line-height: 1.6;
	font-weight: 400;
	color-scheme: light;
	color: #000000de;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	direction: rtl
}

body {
	margin: 0;
	min-width: 320px
}

#root {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden
}

.income-calculator-app {
	all: initial;
	direction: rtl;
	background: transparent !important;
	color: inherit
}

.income-calculator-app input::placeholder {
	text-align: right !important;
	direction: rtl !important
}

@property --rotate {
	syntax: "<angle>";
	initial-value: 132deg;
	inherits: false;
}

:root {
	--card-height: 65vh;
	--card-width: calc(var(--card-height) / 1.5)
}

.loading-box {
	padding: 20px 30px;
	position: absolute;
	left: 0;
	right: 0;
	border-radius: 8px;
	z-index: 0;
	isolation: isolate;

	&:before {
		position: absolute;
		content: "";
		top: 15px;
		left: 0;
		right: 0;
		z-index: -1;
		height: 100%;
		width: 100%;
		transform: scale(.9) translateZ(0);
		filter: blur(15px);
		background: linear-gradient(to left, #ff5770, #e4428d, #c42da8, #9e16c3, #6501de, #9e16c3, #c42da8, #e4428d, #ff5770);
		background-size: 200% 200%;
		animation: animateGlow 1.25s linear infinite
	}
}

@keyframes animateGlow {
	0% {
		background-position: 0% 50%
	}

	to {
		background-position: 200% 50%
	}
}