@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&display=swap");

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-family: "Baloo Bhaijaan 2", sans-serif;
	min-height: 100vh;
	direction: rtl;
	display: flex;
	justify-content: flex-start;
}

:root {
	/* Start Colors */
	--primary-color: #8d5da7;
	--primary-darkColor: #4d435c;
	--primary-extraDarkColor: #362341;
	--secondary-color: #46a788;
	--secondary2-color: #ff8100;
	--secondary-darkColor: #2d8267;
	--success-color: #48c687;
	--danger-color: #e34c57;
	--warning-color: #f5b031;
	--blue-color: #318cf5;
	--info-color: #555555;
	--white-color: #fff;
	--gray-color: #eee;
	--light-gray-color: #fafafa;
	/* End Colors */

	/* Start Sizes */
	--font-size-x1: 1.4rem;
	--font-size-x2: 1.6rem;
	--font-size-x3: 1.8rem;
	--font-size-x4: 2rem;
	--font-size-x5: 2.2rem;
	--font-size-x6: 2.4rem;
	--font-size-x7: 2.6rem;
	--font-size-x8: 2.8rem;
	--font-size-x9: 3rem;
	--font-size-x10: 3.2rem;
	--font-size-x11: 3.4rem;
	--font-size-x12: 3.6rem;

	--spacing-x1: 0.5rem;
	--spacing-x2: 1rem;
	--spacing-x3: 1.5rem;
	--spacing-x4: 2rem;
	--spacing-x5: 2.5rem;
	--spacing-x6: 3rem;
	--spacing-x7: 3.5rem;
	--spacing-x8: 4rem;
	--spacing-x9: 4.5rem;
	--spacing-x10: 5rem;
	--spacing-x11: 5.5rem;
	--spacing-x12: 6rem;
	/* End Sizes */
	/* Start Other */
	--box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08);
	--border-radius-x5: 5px;
	--border-radius-x8: 8px;
	--border-radius-x10: 10px;
	--border-radius-x15: 15px;
	--border-radius-x20: 20px;
	--border-radius-x30: 30px;
	--border-radius-x50: 50px;
	/* End Other */
}

::-webkit-scrollbar {
	width: var(--spacing-x2);
	background-color: var(--gray-color);
	border-radius: 5rem;
}

::-webkit-scrollbar-thumb {
	background-color: var(--primary-darkColor);
	border-radius: 50rem;
}

a {
	text-decoration: none;
	color: currentColor;
}

ul {
	list-style: none;
}

p,
span,
input,
textarea,
button,
select,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Baloo Bhaijaan 2", sans-serif;
}

input:focus,
select:focus {
	outline: 0;
}

textarea:focus {
	outline-color: var(--primary-color);
}

.main {
	flex: 1;
	min-height: 100vh;
}

h1 {
	font-size: var(--font-size-x9);
}

h2 {
	font-size: var(--font-size-x7);
}

h3 {
	font-size: var(--font-size-x5);
}

h4 {
	font-size: var(--font-size-x3);
}

h5,
h6 {
	font-size: var(--font-size-x2);
}

p {
	font-size: var(--font-size-x2);
}

header {
	background-color: var(--white-color);
	position: sticky;
	top: 0;
	left: 0;
	z-index: 100;
	box-shadow: var(--box-shadow);
}

/* Start Widths */
.width-100 {
	width: 100%;
}

.width-50 {
	width: 50%;
}

.width-33 {
	width: 33%;
}

.width-25 {
	width: 25%;
}

.width-20 {
	width: 20%;
}

/* End Widths */

/* Start Texts Colors Classes */

.text-primary {
	color: var(--primary-color);
}

.text-primary-dark {
	color: var(--primary-darkColor);
}

.text-primary-extra-dark {
	color: var(--primary-extraDarkColor);
}

.text-secondary {
	color: var(--secondary-color);
}

.text-info {
	color: var(--info-color);
}

.text-danger {
	color: var(--danger-color);
}

.text-success {
	color: var(--success-color);
}

.text-warning {
	color: var(--warning-color);
}

.text-white {
	color: var(--white-color);
}

/* End Texts Colors Classes */

/* Start Flex */

.centering-element {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex {
	display: flex;
}

.flex-center {
	display: flex;
	justify-content: center;
}

.flex-between {
	display: flex;
	justify-content: space-between;
}

.flex-start {
	display: flex;
	justify-content: flex-start;
}

.flex-end {
	display: flex;
	justify-content: flex-end;
}

.flex-evenly {
	display: flex;
	justify-content: space-evenly;
}

.flex-around {
	display: flex;
	justify-content: space-around;
}

.flex-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-center {
	align-items: center;
}

.align-baseline {
	align-items: baseline;
}

.align-end {
	align-items: flex-end;
}

.align-start {
	align-items: flex-start;
}

.gap-x1 {
	gap: var(--spacing-x1);
}

.gap-x2 {
	gap: var(--spacing-x2);
}

.gap-x3 {
	gap: var(--spacing-x3);
}

.gap-x4 {
	gap: var(--spacing-x4);
}

.gap-x5 {
	gap: var(--spacing-x5);
}

.gap-x6 {
	gap: var(--spacing-x6);
}

.gap-x7 {
	gap: var(--spacing-x7);
}

.gap-x8 {
	gap: var(--spacing-x8);
}

.gap-x9 {
	gap: var(--spacing-x9);
}

.gap-x10 {
	gap: var(--spacing-x10);
}

.gap-x11 {
	gap: var(--spacing-x11);
}

.gap-x12 {
	gap: var(--spacing-x12);
}

/* End Flex */

/* Start Grid */
.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

/* End Grid */
/* Start Buttons */
.line-height-1 {
	line-height: 1;
}

.border-none {
	border-color: transparent !important;
}

.background-none {
	background-color: transparent !important;
}

/* Start Fonts */
.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.font-normal {
	font-weight: normal;
}

.font-bold {
	font-weight: bold;
}

.font-eng {
	font-family: "Poppins", sans-serif !important;
}

.font-size-x1 {
	font-size: var(--font-size-x1);
}

.font-size-x2 {
	font-size: var(--font-size-x2);
}

.font-size-x3 {
	font-size: var(--font-size-x3);
}

.font-size-x4 {
	font-size: var(--font-size-x4);
}

.font-size-x5 {
	font-size: var(--font-size-x5);
}

.font-size-x6 {
	font-size: var(--font-size-x6);
}

.font-size-x7 {
	font-size: var(--font-size-x7);
}

.font-size-x8 {
	font-size: var(--font-size-x8);
}

.font-size-x9 {
	font-size: var(--font-size-x9);
}

.font-size-x10 {
	font-size: var(--font-size-x10);
}

.font-size-x11 {
	font-size: var(--font-size-x11);
}

.font-size-x12 {
	font-size: var(--font-size-x12);
}

/* End Fonts */

/* Start Custom  */
.hover-highlight:hover {
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2) !important;
}

.make-circle {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.hide {
	display: none !important;
}

.disable-click {
	pointer-events: none !important;
}

.disabled {
	pointer-events: none !important;
	opacity: 0.3 !important;
}

/* Start Tooltip */
.tooltip-included {
	position: relative;
}

.tooltip {
	width: max-content;
	position: absolute;
	background-color: var(--white-color);
	color: var(--secondary2-color);
	border-radius: var(--border-radius-x5);
	padding: var(--spacing-x1);
	justify-content: center;
	align-items: center;
	font-weight: 600;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.05));
	-webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.05));
	display: none;
	z-index: 1;
}

.tooltip-included:hover .tooltip {
	display: flex;
}

.tooltip::after {
	content: "";
	position: absolute;
	background-color: inherit;
}

.tooltip[data-direction="right"]::after,
.tooltip[data-direction="left"]::after {
	width: 1rem;
	height: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

.tooltip[data-direction="top"]::after,
.tooltip[data-direction="down"]::after {
	width: 1.5rem;
	height: 1rem;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

.tooltip[data-direction="right"] {
	left: 140%;
}

.tooltip[data-direction="right"]::after {
	left: -1rem;
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.tooltip[data-direction="left"] {
	right: 140%;
}

.tooltip[data-direction="left"]::after {
	right: -1rem;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.tooltip[data-direction="top"] {
	bottom: 140%;
}

.tooltip[data-direction="top"]::after {
	bottom: -1rem;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.tooltip[data-direction="down"] {
	top: 140%;
}

.tooltip[data-direction="down"]::after {
	top: -1rem;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* End Tooltip */