*,
*::after,
*::before {
	box-sizing: border-box;
	direction: rtl;
}

:root {
	--color-primary: rgb(1 170 173);
	--color-primary-light: rgb(10 180 180);
	--color-primary-dark: rgb(0 155 158);
	--color-background: rgb(70 70 70);
}

html {
	font-size: 62.5%;
	font-family: "ksa";
	direction: rtl;
	/* font-family: "DroidArabicKufi"; */
	/* font-family: "NotoNaskhArabicUI"; */
	/* font-family: "NotoKufiArabic"; */
	color: rgb(70 70 70);
}

body {
	background: rgb(241, 241, 241);
}

.main {
	width: 100%;
	display: block;
	margin: 0;
}

.main--margin-top {
	margin-top: 80px;
}

.main-section {
	width: 100%;
}

.english-text {
	display: inline-block;
	direction: ltr;
}

.selected {
	/* box-shadow: 0 0 20px 3px var(--color-primary); */
	border: solid 3px var(--color-primary) !important;
}

.selectable {
	cursor: pointer;
}

.pointer {
	cursor: pointer;
}

@media screen and (min-width: 900px) {
	.main-section {
		padding: 10px;
	}
}