@import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Buda:wght@300&display=swap');


@font-face {
	font-family: 'AdobeArabic';
	src: url('../fonts/AdobeArabic-Regular.woff2') format('woff2')
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@ Computers / laptops @@@@@@@@@@@@@@@@@@@@@@@@@ */
@media (min-device-width: 1081px) {


	header {
		height: 60px;
	}

	body {
		background-color: #28e989;
		zoom: 100%;
		-webkit-text-size-adjust: 100%;
		/* Sets base text size to 100% */
		text-size-adjust: 100%;
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;

		counter-reset: myCounter;
		/* initialize a counter called myCounter */
		background-image: url('../images/4991063.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center center;


		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

	}

	.wlogo {
		width: 300px;
		margin: auto;
		/* float: left; width: 300px; */
	}

	.llogo {
		width: 240px;
		margin: auto;
	}


	.avatar {
		bottom: 130px;
		right: 50px;
		/* width: 120px; */
		/* height: auto; */
		z-index: 9999999;
		position: absolute;
		overflow: hidden;
		width: 150px;
		height: auto;
	}

	.helpr {
		width: 130px;
	}

	#header {
		font-family: 'Ubuntu', sans-serif;
		font-size: 40px;
		text-align: center;
		color: #333;
	}

 


	#footer {

		width: 100%;
		background-color: #62bb7b;

		font-family: 'Ubuntu', 'AdobeArabic';
		line-height: 1.6rem;
		font-size: 20px;
		vertical-align: middle;
		text-align: center;
		color: #333;

		margin-top: 20px;
		padding-top: 1rem;
		padding-bottom: 1rem;

		position: fixed;
		bottom: 0;
	}

	#footer a {
		color: rgb(149, 15, 111);
		/* color: #b9eba7; */
		text-decoration: none;

	}


	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		#footer {
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
			background-color: rgba(249, 221, 255, 0.1);
			/* rgba(255, 255, 255, 0.5) */
		}

	}

	#footer a:hover {
		color: rgb(14, 94, 55);
		text-decoration: none;
	}

	.copyrights {
		/* width: auto;
 float: right;
 text-align: left;
 font-size: 18px;
 color: #FFF;
 margin: 10px; */
	}

	.footer-logo {
		/* width: auto;
 float: left; */
	}


	/* Messages */

	.message {
		margin: auto;
		width: 60%;
		text-align: center;
		padding-top: 20px;
		padding: 20px;
		font-family: 'Ubuntu', Quicksand;
		font-size: 24px;
		border-radius: 20px;
		margin-top: 20px;

	}

	.successMsg {
		background-color: #c8f7b7;
		color: #006666;
	}

	.errorMsg {
		background-color: #fcd2d2;
		color: #000000;
	}


	#overlay {
		background-color: #5c92dd;
		display: none;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		overflow-x: hidden;
		z-index: 1;
	}

	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		#overlay {
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(20px);
			background-color: rgba(246, 208, 255, 0.1);
		}

	}


	.active {
		position: fixed;
		/* Sit on top of the page content */
		display: none;
		/* Hidden by default */
		width: 100%;
		/* Full width (cover the whole page) */
		height: 100%;
		/* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		/* z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
		/* cursor: pointer; /* Add a pointer on hover */
	}

	.open,
	.list_questions {
		cursor: pointer;
		font-family: AdobeArabic;
		font-size: 45px;
		border: 1px solid #744fa0;
		text-decoration: none;
	}


	.question-list {
		/* width: 100%; */
		/* direction: ltr; */
		/* padding: 10px; */
	}


	.answer ul:li {
		direction: ltr;
	}

	.openQuestion {
		cursor: pointer;
		font-family: 'Architects Daughter', cursive;
		/*AdobeArabic */
		font-size: 30px;
		padding: 10px;
		margin: 20px;
	}

	.openQuestion:hover {
		color: #3f1471;
	}

	.open:hover {
		animation: wiggle 0.3s infinite;
		/* transform: scale(1.5); */
	}


	.countdown {
		position: absolute;
		right: 80px;
		top: 2px;
		text-align: center;


		padding: 10px;
		margin: 10px;
		background-color: #9deeff;
		border-radius: 5px;

		color: #000000;
		font-family: Harmattan, 'Ubuntu', Quicksand;
		font-size: 24px;

		user-select: none;

		box-shadow: 0 5px 15px 0px rgba(0, 1, 0, 0.5);
		width: auto;

	}


	.questionContainer {
		/* background-color: red; */
		width: 95%;
	}


	.overlayMenue {
		list-style: none;
		color: #FFF;
		font-family: Harmattan, 'Ubuntu', Quicksand;
		font-size: 26px;
		text-align: center;
		width: auto;
		position: fixed;
		top: 60px;
		right: 10px;
	}


	.overlayMenue li {
		background-color: #ae88d1;
		box-shadow: 2 5px 15px 0px rgba(0, 1, 0, 0.5);
		display: inline-block;
		/* vertical-align: top; */
		padding: 10px;
		margin: 8px;
		user-select: none;
		cursor: pointer;
		border-radius: 5px;
	}

	.overlayMenue li:hover {
		background-color: #4d9d00;
		/* bb9cdf */
		color: #000;
	}


	.close {
		cursor: pointer;
		padding: 10px;
		margin: 10px;
		background-color: #ae88d1;
		/* 5acccc */
		border-radius: 5px;
		color: #FFF;
		font-family: Harmattan, 'Ubuntu', Quicksand;
		font-size: 24px;
		position: absolute;
		right: 10px;
		top: 2px;
		user-select: none;
		box-shadow: 0 5px 15px 0px rgba(0, 1, 0, 0.5);

	}


	.close:hover {
		background-color: #bb9cdf;
		color: #000;
	}

	#overlay-footer {
		font-family: 'Ubuntu', Quicksand;
		position: fixed;
		/* right: 10px; */
		bottom: 10px;
		right: 100px;
		color: #ffffff;
		font-size: 14px;
	}


	.next_activity {
		cursor: pointer;
		padding: 20px;
		margin: 10px;
		background-color: rgb(104, 229, 233);
		/* 5acccc */
		border-radius: 5px;
		color: #000;
		font-family: Harmattan, 'Ubuntu', Quicksand;
		font-size: 24px;
		position: fixed;
		/* right: 10px;
 top: 10px; */
		user-select: none;
		box-shadow: 0 5px 15px 0px rgba(0, 1, 0, 0.5);

	}

	.next_activity:hover {
		/* background-color: #4d9d00; */
		color: #FFF;
	}


	#overlay-content {
		/* font-family: 'Ubuntu', 'AdobeArabic', 'sans-serif'; */
		text-align: left;
		/* right */

		width: 90%;
		/* Full width (cover the whole page) */
		height: 80%;
		/* Full height (cover the whole page) */
		top: 600;

	}

	.bravo {
		width: 100%;
		height: 100%;
		/* background-color: #FFFFFF; */
		overflow: hidden;
		position: absolute;

		z-index: 10000;
	}

	#good_job {
		background-image: url("../images/db.gif");
		/*  nj.gif | wow.gif */
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100vw;
		height: 100vh;
		background-color: #c4ff90;
		background-size: 30%;

	}


	#wrong_answer {
		/* background-image: url("../images/cb.gif");    */
		background-repeat: no-repeat;
		background-position: center center;
		width: 100vw;
		height: 100vh;
		background-color: #ffecef;
		background-size: 30%;
	}


	#wrong_answer_explanation {
		/* background-image: url("../images/expln.gif");    */
		/* background-repeat: no-repeat; */
		background-position: center center;
		width: 100vw;
		height: 100vh;
		background-color: #ffecef;

		color: #FFF;
		font-size: 24px;
		/* background-size: 30%; */
	}

	.mrhelper {
		width: auto;
		text-align: center;
		margin: auto;

	}

	.mrhelper img {
		width: 250px;
	}


	.explanation {
		/* https://css-shape.com/wavy-box/ */

		/* width: 50%;
  padding: 30px;
  margin: auto;
  
 */

		--s: 35px;
		/* control the size of the wave */
		--w: 500px;
		/* preferred  width : 350px */
		--c: #bc14da;

		color: #ffffff;
		height: auto;
		margin: auto;


		/* clear: both; */


		width: round(var(--w), 2*var(--s));
		aspect-ratio: 1;
		padding: var(--s);
		box-sizing: border-box;
		border-radius: calc(1.5*var(--s));
		--R: calc(var(--s)/sqrt(2)) at;
		--g: radial-gradient(var(--R) 50%, var(--c) calc(100% - 1px), #0000) 0 0/calc(2*var(--s)) calc(2*var(--s));
		--_c: #0000 100%, var(--c) calc(100% + 1px);
		--_b: calc(2*var(--s)) calc(51% - var(--s)/2) repeat-x;
		background: var(--g),
			radial-gradient(var(--R) 50% calc(100% + var(--s)/2), var(--_c)) var(--s) calc(100% - var(--s)/2)/var(--_b),
			radial-gradient(var(--R) 50% calc(var(--s)/-2), var(--_c)) var(--s) calc(var(--s)/2)/var(--_b);
		--_m: var(--s)/calc(51% - var(--s)/2) calc(2*var(--s)) repeat-y;
		mask: var(--g),
			radial-gradient(var(--R) calc(100% + var(--s)/2) 50%, var(--_c)) calc(100% - var(--s)/2) var(--_m),
			radial-gradient(var(--R) calc(var(--s)/-2) 50%, var(--_c)) calc(var(--s)/2) var(--_m);


	}


	/* tooltip */
	/* HTML: <div class="tooltip">This is the same as #5 but with another shape for the tail </div> */
	.tooltip {
		display: none;
		color: #000;
		font-size: 20px;
		/* max-width: 28ch; */
		text-align: center;
		margin: auto;
		width: 50%;
		font-family: Harmattan, Ubuntu;
	}

	.tooltip {
		--b: 3em;
		/* tail dimension */

		--p: 50%;
		/* main position (0%:left 100%:right) */
		--r: 1.2em;
		/* the radius */

		padding: 1em;
		border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b)/4) min(var(--r), var(--p) - var(--b)/4)/var(--r);
		background: #ffc7c5;
		/* the main color */
		position: relative;
	}

	.tooltip:before {
		content: "";
		position: absolute;
		top: 100%;
		left: clamp(0%, var(--p) - var(--b)/4, 100% - var(--b)/2);
		width: var(--b);
		aspect-ratio: 1;
		background: inherit;
		--g: #000 calc(100% - 1px), #0000;
		-webkit-mask:
			radial-gradient(circle closest-side at 88% 88%, var(--g)),
			radial-gradient(20% 20% at 48% 55%, var(--g)),
			radial-gradient(25% 25% at 25% 0, var(--g));
	}

	/* tooltip */


	.cloud {
		margin-top: 70px;
		width: 350px;
		height: 120px;
		background: #ECEFF1;
		box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
		border-radius: 100px;
	}

	.cloud::after,
	.cloud::before {
		content: "";
		position: relative;
		display: inline-block;
		background: inherit;
		border-radius: inherit;
	}

	.cloud::after {
		width: 100px;
		height: 100px;
		top: -220px;
		left: 50px;
	}

	.cloud::before {
		width: 180px;
		height: 180px;
		top: -70px;
		left: 130px;
	}

	.subject-list {

		width: auto;
	}

	.subject-list li {
		cursor: pointer;
		display: inline-flex;
		list-style: none;
		background-color: #b6f66b;
		margin: 10px;
		font-family: 'Ubuntu', Quicksand;
		font-size: 20px;
		border-radius: 10px;
	}

	.subject-list li a {
		text-align: right;
		width: 200px;
		padding: 40px;
		user-select: none;
		border-radius: 10px;
	}


	/* subject button */

	.reading1 {

		background-color: #7cd5e7;

		background-image: url('../icons/reading.png');
		background-repeat: no-repeat;
		background-position: 4px 4px;
		color: blue;
	}


	.reading2 {
		background-image: url('../icons/reading2.png');
		background-repeat: no-repeat;
		background-position: 6px 12px;
		color: white;
		background-color: #be1f1a;
	}


	.arabic1 {
		background-image: url('../icons/arabic1.png');
		background-repeat: no-repeat;
		background-position: -5px 8px;
		background-color: #ffffff;
		color: rgb(98, 16, 71);
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;

		min-height: 30px;
		background-size: contain;
		background-position: center;
	}

	.arabic1::after {
		content: '   ';
		white-space: normal;
		display: inline-flex;
	}

	.english1 {
		background-image: url('../icons/english1.png');
		background-repeat: no-repeat;
		background-position: -5px 8px;
		background-color: #ffffff;
		color: rgb(98, 16, 71);
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;


		min-height: 30px;
		background-size: contain;
		background-position: center;

	}


	.english1::after {
		content: '   ';
		white-space: normal;
		display: inline-flex;
	}


	.morals-ar {

		background-image: url('../icons/ar-manners.png');
		background-repeat: no-repeat;
		background-position: -5px 8px;
		background-color: #ffffff;
		color: rgb(98, 16, 71);
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;


		min-height: 30px;
		background-size: contain;
		background-position: center;


	}


	/* .english1 {
  background-image: url('../icons/quran.png');
  background-repeat:no-repeat;
  background-position: -5px 8px;
  background-color: #ffffff;
  color: rgb(98, 16, 71);
  font-family: ubuntu;
  font-size: 24px;
  box-shadow: 2px 2px;
}

.english1 {
  background-image: url('../icons/quran.png');
  background-repeat:no-repeat;
  background-position: -5px 8px;
  background-color: #ffffff;
  color: rgb(98, 16, 71);
  font-family: ubuntu;
  font-size: 24px;
  box-shadow: 2px 2px;
} */

	.morals {
		background-image: url('../icons/moral.png');
		background-repeat: no-repeat;
		background-position: -10px 30px;
		background-color: #ffeded;
		/* 48f8fe | */
		color: #ff5d7d;
		background-size: 30%;
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;
		text-align: right;
	}


	.arabic2 {
		background-image: url('../icons/quran.png');
		background-repeat: no-repeat;
		background-position: 0px 0px;
		background-color: #FFFFFF;

		color: green;
	}


	@keyframes wiggle {
		0% {
			transform: rotate(0deg);
		}

		80% {
			transform: rotate(0deg);
		}

		85% {
			transform: rotate(5deg);
		}

		95% {
			transform: rotate(-5deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	.wiggle {
		display: inline-block;
		animation: wiggle 2.5s infinite;
	}

	/* .wiggle:hover {
  animation: none;
} */

	.user_menu-en {
		width: 100%;
	}

	.user_menu-en a {
		background-color: #744fa0;
		padding: 12px;
		margin: 8px;
		display: inline-flex;
		text-decoration: none;
		border-radius: 8px;
		font-size: 1em;
		color: #FFF;
		font-family: 'Harmattan';
	}


	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		.user_menu-en a {
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(5px);
			background-color: rgba(129, 70, 240, 0.5);
			/* rgba(255, 255, 255, 0.5) */
		}

		.warning {
			display: none;
		}
	}


	.user_menu-en a:hover {
		background-color: #28a7e9;
	}

	.user_detail {
		background-color: #a0e08a;
		padding: 12px;
		margin: 8px;
		display: inline;
		text-decoration: none;
		border-radius: 8px;
		font-size: 24px;
		color: #FFF;
		font-family: 'Harmattan';
	}


	.display_score {

		position: fixed;
		width: 900px;
		/* left: 50px; */
		right: 50px;
		bottom: 10px;
 		margin: 10px;

	}

	/* animation Start -------------- */
	.animated {
		-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		display: inline-table;
	}

	@-webkit-keyframes bounce {

		0%,
		100% {
			-webkit-transform: translateY(0);
		}

		50% {
			-webkit-transform: translateY(-45px);
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-45px);
		}
	}

	.bounce {
		-webkit-animation-name: bounce;
		animation-name: bounce;
	}


	.thinking_girl {
		width: 150px;
		height: 220px;
		background-image: url("../images/thinking_star.png");
		background-repeat: no-repeat;
		cursor: pointer;
		filter: grayscale(100%);


	}

	.angry_girl {
		width: 150px;
		height: 220px;
		/* angry_girl */
		background-image: url("../images/angry_star.png");
		background-repeat: no-repeat;
		cursor: pointer;

	}

	.happy_girl {
		width: 150px;
		height: 220px;
		background-image: url("../images/happy_star.png");
		background-repeat: no-repeat;
		cursor: pointer;
	}


	#bouncing-girl {
		/* width: 20px;
  height: 20px; */
		/* background-color: red; */
		/* background-image: url(""); */
		/* position: relative; */
		/* bottom: 10px; */
		/* left: 100px; */


		/* border-radius: 50%; */
	}

	#bouncing-girl:hover {
		animation-play-state: paused;

	}


	/* animation END -------------- */


	.browse,
	.efs {
		cursor: pointer;
	}


	.pcontainer {
		padding: 20px;
		overflow-y: auto;
		/* max-height: 75vh; */
		width: auto;
		height: auto;

		font-family: ubuntu;
	}

	.pcontainer>h2 {
		font-size: 1.4rem;
		/* color: #FFF; */
		color: rgb(96, 0, 118);
		text-align: center;
	}


	/* Student  */

	.profile,
	.inbox,
	.progress {
		/* direction: ltr;
    overflow-y: auto;
    text-align: left; */
		margin: auto;
		margin-bottom: 10px;
		padding: 10px;
		/* background-color: #a0e089; */
		background-color: rgba(225, 91, 255, 0.7);
		border-radius: 10px;
		width: 50%;
	}

	.profile>h3,
	.progress>h3 {
		color: #FFF;
	}

	/* .inbox {
  direction: ltr;
  overflow-y: auto;
  text-align: left;
  padding: 10px;
  margin: 100px;
} */

	.progress {
		overflow-y: auto;
		text-align: left;
		padding: 10px;
		/* margin: 100px; */
		color: #FFFFFF;
		display: flex;
		flex-wrap: nowrap;
	}


	.progress-item {
		width: 150px;
		height: 150px;
		background-color: #28a7e9;
		font-family: 'Ubuntu', 'AdobeArabic', 'sans-serif';
		margin: 10px;
		border-radius: 10%;
		text-align: center;
		vertical-align: middle;
	}

	.changePassword {
		direction: ltr;
		overflow-y: auto;
		text-align: left;
		padding: 10px;
		margin: 100px;
	}

	.reportCard {
		direction: ltr;
		overflow-y: auto;
		text-align: left;
		padding: 10px;
		margin: 100px;
		color: #FFFFFF;
	}


	.email {
		border-collapse: collapse;
		width: 100%;
		font-family: 'Ubuntu', sans-serif;
		font-size: 22px;

	}


	/* Set border-radius on the top-left and bottom-left of the first table data on the table row */
	.email td:first-child,
	.email th:first-child {
		/* border-radius: 10px 0 0 10px; */
		padding: 10px;
		margin: 3px;
	}

	/*  Set border-radius on the top-right and bottom-right of the last table data on the table row */
	.email td:last-child,
	.email th:last-child {
		/* border-radius: 0 10px 10px 0; */
		padding: 10px;
		margin: 3px;
	}


	.email th,
	.email.td {
		text-align: left;
		padding: 8px;

	}

	tr:nth-child(odd) {
		background-color: #ae88d1;
		/* border-bottom: 1px solid gray; */
	}

	tr:nth-child(even) {
		background-color: #f2f2f2;
		/* border-bottom: 1px solid gray; */
	}

	.email tr {
		cursor: pointer;
	}

	.email tr:hover {
		background-color: #dcb8ff;
	}

	.checkmark {
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #eee;
	}


	.lesson-list {
		width: auto;
		height: auto;

	}

	/* lessons cloud */

	.lesson {
		/* margin-top:70px; */
		width: auto;
		height: 100%;
		max-width: 160px;

		background: #84c8f6;
		box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
		/* border: 2px solid red; */
		border-radius: 50px 20px;
		padding: 20px;
		margin: 10px;

		cursor: pointer;
		display: inline-flex;

		font-size: 25px;
		font-family: Harmattan;
		user-select: none;
		position: relative;

	}


	.lesson:hover {
		background-color: #62bb7b;
		font-size: 28px;
		color: #FFFFFF;
	}


	.lesson::before {
		/* for each .article add a ::before element */
		counter-increment: myCounter;
		/* first increment the counter myCounter */
		content: '4';
		/* set the text of this ::before element to the value of counter  */

		font-size: 5em;
		color: #000e0e;
		position: absolute;
		right: 10;
		bottom: 10;
		z-index: -3;
	}


	/* FORM validation - START*/
	/* ------------- */

	form.cmxform {
		width: 370px;
		font-size: 1.0em;
		color: #333;
	}

	form.cmxform legend {
		padding-left: 0;
	}

	form.cmxform legend,
	form.cmxform label {
		color: #333;
	}

	form.cmxform fieldset {
		border: none;
		border-top: 1px solid #C9DCA6;
		/* background: url(../images/cmxform-fieldset.gif) left bottom repeat-x; */
		background-color: #F8FDEF;
	}

	form.cmxform fieldset fieldset {
		background: none;
	}

	form.cmxform fieldset p,
	form.cmxform fieldset fieldset {
		padding: 5px 10px 7px;
		/* background: url(../images/cmxform-divider.gif) left bottom repeat-x; */
	}

	form.cmxform label.error,
	label.error {
		/* remove the next line when you have trouble in IE6 with labels in list */
		color: red;
		font-size: .8rem !important;
		font-weight: bold !important;
		/* font-style: italic */
	}

	div.error {
		display: none;
	}

	input {
		border: 1px solid black;
	}

	input.checkbox {
		border: none
	}

	input:focus {
		border: 1px dotted black;
	}

	input.error {
		border: 1px dotted red !important;
	}

	form.cmxform .gray * {
		color: gray;
	}

	/* ------------- */
	/* FORM validation - END */

	.learnPathCompleted {
		width: 60%;
		height: auto;
		padding: 30px;
		background-color: #28a7e9;
		border-radius: 10px;
		margin-top: 50px;
		margin-left: auto;
		margin-right: auto;
		font-family: ubuntu;
		color: #FFF;
		text-align: center;
	}

	


}

/* @@@@@@@@@@@@@@@@@@@@@@@@@ Computers / laptops @@@@@@@@@@@@@@@@@@@@@@@@@ */


/* @@@@@@@@@@@@@@@@@@@@@@@@@ iPad/tablet @@@@@@@@@@@@@@@@@@@@@@@@@ */
@media (max-device-width: 1080px) {

	header {
		height: 30px;
	}

	body {
		background-color: #28a7e9;
		zoom: 100%;
		-webkit-text-size-adjust: 100%;
		/* Sets base text size to 100% */
		text-size-adjust: 100%;

		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;

		counter-reset: myCounter;
		/* initialize a counter called myCounter */
		background-image: url('../images/4991063.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center center;


		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

	}

	.wlogo {
		width: 300px;
		margin: auto;
		/* float: left; width: 300px; */
	}

	.llogo {
		width: 200px;
		margin: auto;
	}

	.avatar {
		bottom: 85px;
		right: 10px;
		/* width: 120px; */
		/* height: auto; */
		z-index: 9999;
		color: #4d9d00;
		position: absolute;
		overflow: hidden;
		width: 150px;
		height: auto;
	}

  
	.helpr {
		width: 130px;
	}

	#header {
		font-family: 'Ubuntu', sans-serif;
		font-size: 40px;
		text-align: center;
		color: #333;
	}

  

	.login {
		margin: auto;
		width: 340px;
		text-align: center;
		margin-top: 80px;

		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20px;
		color: #333;
		line-height: 1.5;
		/* max-width: 50%; */
		padding: 1rem 2rem;

	}

	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		.login {
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(5px);
			background-color: rgba(240, 228, 70, 0.5);
			/* rgba(255, 255, 255, 0.5) */
		}

		.warning {
			display: none;
		}
	}

	.login input {
		font-size: 18px;
		padding: 6px;
		font-family: 'Ubuntu';
		width: 240px;
		margin: 4px;
		border-radius: 8px;
		border: 0px solid #000;
		padding: 14px;
	}

	.login label {
		font-size: 20px;
		padding: 4px;
		width: 180px;
		font-family: 'Ubuntu';
		text-align: center;
		text-transform: uppercase;
		display: inline-block;
	}

	.login input[type="submit"],
	input[type="reset"] {

		font-size: 20px;
		padding: 10px;
		width: 130px;
		font-family: 'Ubuntu';
		text-align: center;
		background-color: rgb(32, 169, 199);
		border: 0px solid #000;
		border-radius: 8px;
		color: white;
		cursor: pointer;
		margin-top: 12px;
	}

	.login input[type="submit"]:hover,
	input[type="reset"]:hover {
		background-color: rgb(78, 174, 191);
	}

	.login input[type="submit"]:active,
	input[type="reset"]:active {
		background-color: #333;
	}




	#footer {
		width: 100%;
		background-color: #62bb7b;
		vertical-align: middle;
		text-align: center;
		padding: 20px;
		font-family: 'Ubuntu', 'AdobeArabic';
		font-size: 16px;
		color: #333;
		line-height: 1.6rem;

		bottom: 0;
		position: fixed;

		margin-top: 10px;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	#footer a {
		color: rgb(149, 15, 111);
		/* color: #b9eba7; */
		text-decoration: none;
	}

	#footer a:hover {
		color: rgb(14, 94, 55);
		text-decoration: none;
	}

	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		#footer {
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
			background-color: rgba(249, 221, 255, 0.1);
			/* rgba(255, 255, 255, 0.5) */
		}

	}

	.copyrights {
		width: auto;
		float: right;
		text-align: left;
		font-size: 16px;
		color: #FFF;
		margin: 10px;
	}

	.footer-logo {
		width: auto;
		float: left;
	}


	/* Messages */
	.message {
		margin: auto;
		width: 60%;
		/* direction :ltr; */
		text-align: center;
		padding: 20px;
		font-family: 'Ubuntu', Quicksand;
		font-size: 24px;
		border-radius: 20px;
		margin-top: 20px;
	}

	.successMsg {
		background-color: #c8f7b7;
		color: #006666;
		/* border-color: #006666; */
	}

	.errorMsg {
		background-color: #fcd2d2;
		color: #000000;
		/* border-color: #ff8367; */

	}

	/* --- */

 

	 


	#overlay {
		display: none;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		/* width: 100vw;
  height: 100vh; */
		background-color: #1e4780;
		overflow-x: hidden;
		z-index: 1;
	}

	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		#overlay {
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(20px);
			background-color: rgba(246, 208, 255, 0.1);
		}

	}


	.active {
		position: fixed;
		/* Sit on top of the page content */
		display: none;
		/* Hidden by default */
		width: 100%;
		/* Full width (cover the whole page) */
		height: 100%;
		/* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		/* z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
		/* cursor: pointer; /* Add a pointer on hover */
	}

	.open,
	.list_questions {
		cursor: pointer;
		font-family: AdobeArabic;
		font-size: 45px;
		border: 1px solid #744fa0;
		text-decoration: none;
	}


	.question-list {
		/* width: 100%;
  direction: ltr;
  padding: 10px; */
	}


	.answer ul:li {
		direction: ltr;
	}

	.openQuestion {
		cursor: pointer;
		font-family: 'Architects Daughter', cursive;
		/*AdobeArabic */
		font-size: 30px;
		padding: 10px;
		margin: 20px;
	}

	.openQuestion:hover {
		color: #3f1471;
	}

	.open:hover {
		animation: wiggle 0.3s infinite;
		/* transform: scale(1.5); */
	}

	.close {
		cursor: pointer;
		padding: 10px;
		margin: 10px;
		background-color: #ae88d1;
		/* 5acccc */
		border-radius: 5px;
		color: #FFF;
		font-family: Harmattan, 'Ubuntu', Quicksand;
		font-size: 24px;
		position: absolute;
		right: 10px;
		top: 2px;
		user-select: none;
		box-shadow: 0 5px 15px 0px rgba(0, 1, 0, 0.5);

	}


	.close:hover {
		background-color: #bb9cdf;
		color: #000;
	}

	#overlay-footer {
		font-family: 'Ubuntu', Quicksand;
		position: fixed;
		/* right: 10px; */
		bottom: 10px;
		right: 100px;
		color: #ffffff;
		font-size: 14px;
	}


	.next_activity {
		cursor: pointer;
		padding: 20px;
		margin: 10px;
		background-color: rgb(104, 229, 233);
		/* 5acccc */
		border-radius: 5px;
		color: #000;
		font-family: Harmattan, 'Ubuntu', Quicksand;
		font-size: 24px;
		position: fixed;
		/* right: 10px;
 top: 10px; */
		user-select: none;
		box-shadow: 0 5px 15px 0px rgba(0, 1, 0, 0.5);

	}

	.next_activity:hover {
		/* background-color: #4d9d00; */
		color: #FFF;
	}

	/* .next_question {

  cursor: pointer;
  padding: 20px;
  margin-top: 40px;
  margin: 10px;
  background-color: #83c446;
  border-radius: 5px;
  color: #000;
  font-family: AdobeArabic ,Harmattan,'Ubuntu', Quicksand;
  font-size: 40px;
  position: fixed;
 left: 40px;
  user-select: none;
 box-shadow: 0 5px 15px 0px rgba(0,1,0,0.5);

} */

	/* .next_question:hover {
    background-color: #4d9d00;
    color: #FFF;
} */

	#overlay-content {
		/* font-family: 'Ubuntu', 'AdobeArabic', 'sans-serif'; */
		text-align: left;
		/* right */

		width: 90%;
		/* Full width (cover the whole page) */
		height: 80%;
		/* Full height (cover the whole page) */
		top: 600;
		/* font-size: 30px; */
		/* left: 0; */
		/* right: 0; */
		/* bottom: 0; */

	}

	#overlay-content {
		/* font-family: 'Ubuntu', 'AdobeArabic', 'sans-serif'; */
		text-align: left;
		/* right */

		width: 90%;
		/* Full width (cover the whole page) */
		height: 80%;
		/* Full height (cover the whole page) */
		top: 600;

	}

	.bravo {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		z-index: 10000;
	}

	#good_job {
		background-image: url("../images/db.gif");
		/*  nj.gif | thumbs_up.gif */
		background-repeat: no-repeat;
		background-position: center center;
		width: 100vw;
		height: 100vh;
		background-color: #c4ff90;
		background-size: 30%;
	}


	#wrong_answer {
		/* oops.gif | thumbs_down.gif |  nj.gif | jb.gif */
		background-image: url("../images/cb.gif");
		background-repeat: no-repeat;
		background-position: center center;
		width: 100vw;
		height: 100vh;
		background-color: #ffecef;
		background-size: 30%;
	}

	.countdown {
		position: absolute;
		right: 80px;
		top: 2px;
		text-align: center;


		padding: 10px;
		margin: 10px;
		background-color: #9deeff;
		border-radius: 5px;

		color: #000000;
		font-family: Harmattan, 'Ubuntu', Quicksand;
		font-size: 24px;

		user-select: none;

		box-shadow: 0 5px 15px 0px rgba(0, 1, 0, 0.5);
		width: auto;
	}


	#wrong_answer_explanation {
		/* background-image: url("../images/expln.gif");    */
		/* background-repeat: no-repeat; */
		background-position: center center;
		width: 100vw;
		height: 100vh;
		background-color: #ffecef;

		color: #FFF;
		font-size: 24px;
		/* background-size: 30%; */
	}


	.mrhelper {
		width: auto;
		text-align: center;
		margin: auto;

	}

	.mrhelper img {
		width: 250px;
	}


	/* tooltip */
	/* HTML: <div class="tooltip">This is the same as #5 but with another shape for the tail </div> */
	.tooltip {
		color: #000;
		font-size: 20px;
		/* max-width: 28ch; */
		text-align: center;
		margin: auto;
		width: 50%;

		font-family: Harmattan, Ubuntu;

	}

	.tooltip {
		--b: 3em;
		/* tail dimension */

		--p: 50%;
		/* main position (0%:left 100%:right) */
		--r: 1.2em;
		/* the radius */

		padding: 1em;
		border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b)/4) min(var(--r), var(--p) - var(--b)/4)/var(--r);
		background: #ffc7c5;
		/* the main color */
		position: relative;
	}

	.tooltip:before {
		content: "";
		position: absolute;
		top: 100%;
		left: clamp(0%, var(--p) - var(--b)/4, 100% - var(--b)/2);
		width: var(--b);
		aspect-ratio: 1;
		background: inherit;
		--g: #000 calc(100% - 1px), #0000;
		-webkit-mask:
			radial-gradient(circle closest-side at 88% 88%, var(--g)),
			radial-gradient(20% 20% at 48% 55%, var(--g)),
			radial-gradient(25% 25% at 25% 0, var(--g));
	}

	/* tooltip */


	.cloud {
		margin-top: 70px;
		width: 350px;
		height: 120px;
		background: #ECEFF1;
		box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
		border-radius: 100px;
	}

	.cloud::after,
	.cloud::before {
		content: "";
		position: relative;
		display: inline-block;
		background: inherit;
		border-radius: inherit;
	}

	.cloud::after {
		width: 100px;
		height: 100px;
		top: -220px;
		left: 50px;
	}

	.cloud::before {
		width: 180px;
		height: 180px;
		top: -70px;
		left: 130px;
	}


	.subject-list {
		clear: both;
		width: auto;
		height: auto;
	}


	.subject-list li {
		cursor: pointer;
		display: inline-flex;
		list-style: none;
		background-color: #b6f66b;
		margin: 10px;
		font-family: 'Ubuntu', Quicksand;
		/* font-size: 20px; */
		border-radius: 10px;
		/* position:absolute; */

	}

	.subject-list li a {

		text-align: right;
		width: 150px;
		height: auto;
		padding: 30px;
		user-select: none;
		border-radius: 10px;

	}

	/* .subject-list li a:hover {
  background-color: #7fb7f4;

} */
	/* subject button */

	.reading1 {

		background-color: #7cd5e7;
		background-image: url('../icons/reading.png');
		background-repeat: no-repeat;
		background-position: 4px 4px;
		color: blue;
	}


	.reading2 {
		background-image: url('../icons/reading2.png');
		background-repeat: no-repeat;
		background-position: 6px 12px;
		color: white;
		background-color: #be1f1a;
	}


	.arabic1 {
		background-image: url('../icons/arabic1.png');
		background-repeat: no-repeat;
		background-position: -5px 8px;
		background-color: #ffffff;
		color: rgb(98, 16, 71);
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;

		min-height: 30px;
		background-size: contain;
		background-position: center;
	}

	.arabic1::after {
		content: '   ';
		white-space: normal;
		display: inline-flex;
	}

	.english1 {
		background-image: url('../icons/english1.png');
		background-repeat: no-repeat;
		background-position: -5px 8px;
		background-color: #ffffff;
		color: rgb(98, 16, 71);
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;


		min-height: 30px;
		background-size: contain;
		background-position: center;

	}


	.english1::after {
		content: '   ';
		white-space: normal;
		display: inline-flex;
	}


	.morals-ar {

		background-image: url('../icons/ar-manners.png');
		background-repeat: no-repeat;
		background-position: -5px 8px;
		background-color: #ffffff;
		color: rgb(98, 16, 71);
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;


		min-height: 30px;
		background-size: contain;
		background-position: center;

	}

	.morals {
		background-image: url('../icons/moral.png');
		background-repeat: no-repeat;
		background-position: -10px 30px;
		background-color: #ffeded;
		/* 48f8fe | */
		color: #ff5d7d;
		background-size: 30%;
		font-family: ubuntu;
		font-size: 24px;
		box-shadow: 2px 2px;
		min-height: 30px;
	}

	.arabic2 {
		background-image: url('../icons/quran.png');
		background-repeat: no-repeat;
		background-position: 0px 0px;
		background-color: #FFFFFF;

		color: green;
	}


	@keyframes wiggle {
		0% {
			transform: rotate(0deg);
		}

		80% {
			transform: rotate(0deg);
		}

		85% {
			transform: rotate(5deg);
		}

		95% {
			transform: rotate(-5deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	.wiggle {
		display: inline-block;
		animation: wiggle 2.5s infinite;
	}

	/* .wiggle:hover {
  animation: none;
} */

	.user_menu-en {
		width: 90%;
	}

	.user_menu-en a {
		background-color: #744fa0;
		padding: 8px;
		margin: 8px;
		display: inline-flex;
		text-decoration: none;
		border-radius: 8px;
		font-size: 1em;
		color: #FFF;
		font-family: 'Harmattan';
	}


	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		.user_menu-en a {
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(5px);
			background-color: rgba(129, 70, 240, 0.5);

		}

		.warning {
			display: none;
		}
	}


	.user_menu-en a:hover {
		background-color: #28a7e9;
	}

	.user_detail {
		background-color: #a0e08a;
		padding: 12px;
		margin: 8px;
		display: inline;
		text-decoration: none;
		border-radius: 8px;
		font-size: 24px;
		color: #FFF;
		font-family: 'Harmattan';
	}


	.display_score {

		position: fixed;
		width: 900px;
		/* left: 50px; */
		right: 50px;
		bottom: 10px;
		 
		margin: 10px;

	}

	/* animation Start -------------- */
	.animated {
		-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		display: inline-table;
	}

	@-webkit-keyframes bounce {

		0%,
		100% {
			-webkit-transform: translateY(0);
		}

		50% {
			-webkit-transform: translateY(-45px);
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-45px);
		}
	}

	.bounce {
		-webkit-animation-name: bounce;
		animation-name: bounce;
	}


	.thinking_girl {
		width: 150px;
		height: 220px;
		background-image: url("../images/thinking_star.png");
		background-repeat: no-repeat;
		cursor: pointer;
		filter: grayscale(100%);


	}

	.angry_girl {
		width: 150px;
		height: 220px;
		/* angry_girl */
		background-image: url("../images/angry_star.png");
		background-repeat: no-repeat;
		cursor: pointer;

	}

	.happy_girl {
		width: 150px;
		height: 220px;
		background-image: url("../images/happy_star.png");
		background-repeat: no-repeat;
		cursor: pointer;
	}


	#bouncing-girl {
		/* width: 20px;
  height: 20px; */
		/* background-color: red; */
		/* background-image: url(""); */
		/* position: relative; */
		/* bottom: 10px; */
		/* left: 100px; */


		/* border-radius: 50%; */
	}

	#bouncing-girl:hover {
		animation-play-state: paused;

	}


	/* animation END -------------- */


	.browse {
		cursor: pointer;
	}


	/* Student  */

	.profile,
	.inbox,
	.progress {
		/* direction: ltr;
  overflow-y: auto;
  text-align: left; */
		margin: auto;
		margin-bottom: 10px;
		padding: 10px;
		/* background-color: #a0e089; */
		background-color: rgba(225, 91, 255, 0.7);
		border-radius: 10px;
		width: 85%;
	}

	.profile>h3,
	.progress>h3,
	.inbox>h3 {
		color: #FFF;
	}

	/* .inbox {
direction: ltr;
overflow-y: auto;
text-align: left;
padding: 10px;
margin: 100px;
} */

	.progress {
		overflow-y: auto;
		text-align: left;
		padding: 10px;
		/* margin: 100px; */
		color: #FFFFFF;
		display: flex;
		flex-wrap: nowrap;
	}


	.progress-item {
		width: 150px;
		height: 150px;
		background-color: #28a7e9;
		font-family: 'Ubuntu', 'AdobeArabic', 'sans-serif';
		margin: 10px;
		border-radius: 10%;
		text-align: center;
		vertical-align: middle;
	}

	.changePassword {
		direction: ltr;
		overflow-y: auto;
		text-align: left;
		padding: 10px;
		margin: 100px;
	}

	.reportCard {
		direction: ltr;
		overflow-y: auto;
		text-align: left;
		padding: 10px;
		margin: 100px;
		color: #FFFFFF;
	}


	.email {
		border-collapse: collapse;
		width: 100%;
		font-family: 'Ubuntu', sans-serif;
		font-size: 22px;

	}


	/* Set border-radius on the top-left and bottom-left of the first table data on the table row */
	.email td:first-child,
	.email th:first-child {
		/* border-radius: 10px 0 0 10px; */
		padding: 10px;
		margin: 3px;
	}

	/*  Set border-radius on the top-right and bottom-right of the last table data on the table row */
	.email td:last-child,
	.email th:last-child {
		/* border-radius: 0 10px 10px 0; */
		padding: 10px;
		margin: 3px;
	}


	.email th,
	.email.td {
		text-align: left;
		padding: 8px;

	}

	tr:nth-child(odd) {
		background-color: #ae88d1;
		/* border-bottom: 1px solid gray; */
	}

	tr:nth-child(even) {
		background-color: #f2f2f2;
		/* border-bottom: 1px solid gray; */
	}

	.email tr {
		cursor: pointer;
	}

	.email tr:hover {
		background-color: #dcb8ff;
	}

	.checkmark {
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #eee;
	}


	.pcontainer {
		padding: 20px;
		overflow-y: auto;
		/* max-height: 75vh; */
		width: auto;
		height: auto;

		font-family: ubuntu;
	}

	.pcontainer>h2 {
		font-size: 1.4rem;
		/* color: #FFF; */
		color: rgb(96, 0, 118);
		text-align: center;
	}

	.sun {
		width: 50px;
		height: 50px;
		/* animation-duration: 100ms;
  z-index: -9; */
		position: fixed;
		user-select: none;
	}


	.lesson-list {
		width: auto;
		height: auto;
		/* margin: 5%;
  overflow: auto;
  overflow-y: auto; */
	}

	/* lessons cloud */

	.lesson {
		/* margin-top:70px; */
		width: auto;
		height: 100%;
		max-width: 160px;

		background: #84c8f6;
		box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
		/* border: 2px solid red; */
		border-radius: 50px 20px;
		padding: 20px;
		margin: 10px;

		cursor: pointer;
		display: inline-flex;

		font-size: 25px;
		font-family: Harmattan;
		user-select: none;
	}

	.lesson:hover {
		background-color: #62bb7b;
		font-size: 28px;
		color: #FFFFFF;
	}

	/* 

  .overlayMenue  {
    list-style: none;
    color: #FFF;
   font-family: Harmattan,'Ubuntu', Quicksand;
   font-size: 26px;
   text-align: center;
   width: auto;
   /* position:fixed; */
	/* top: 60px; */
	/* right: 10px;  */
	/* } */


	.overlayMenue li {

		background-color: #ae88d1;
		box-shadow: 2 5px 15px 0px rgba(0, 1, 0, 0.5);
		display: inline-block;
		/* vertical-align: top; */
		padding: 10px;
		margin: 8px;
		user-select: none;
		cursor: pointer;
		border-radius: 5px;

	}

	.overlayMenue li:hover {
		background-color: #4d9d00;
		/* bb9cdf */
		color: #000;
	}


	/* FORM validation - START*/
	/* ------------- */

	form.cmxform {
		width: 370px;
		font-size: 1.0em;
		color: #333;
	}

	form.cmxform legend {
		padding-left: 0;
	}

	form.cmxform legend,
	form.cmxform label {
		color: #333;
	}

	form.cmxform fieldset {
		border: none;
		border-top: 1px solid #C9DCA6;
		/* background: url(../images/cmxform-fieldset.gif) left bottom repeat-x; */
		background-color: #F8FDEF;
	}

	form.cmxform fieldset fieldset {
		background: none;
	}

	form.cmxform fieldset p,
	form.cmxform fieldset fieldset {
		padding: 5px 10px 7px;
		/* background: url(../images/cmxform-divider.gif) left bottom repeat-x; */
	}

	form.cmxform label.error,
	label.error {
		/* remove the next line when you have trouble in IE6 with labels in list */
		color: red;
		font-size: .8rem !important;
		font-weight: bold !important;
		/* font-style: italic */
	}

	div.error {
		display: none;
	}

	input {
		border: 1px solid black;
	}

	input.checkbox {
		border: none
	}

	input:focus {
		border: 1px dotted black;
	}

	input.error {
		border: 1px dotted red !important;
	}

	form.cmxform .gray * {
		color: gray;
	}

	/* ------------- */
	/* FORM validation - END */


	.learnPathCompleted {
		width: 60%;
		height: auto;
		padding: 30px;
		background-color: #28a7e9;
		border-radius: 10px;
		margin-top: 50px;
		margin-left: auto;
		margin-right: auto;
		font-family: ubuntu;
		color: #FFF;
		text-align: center;
	}
	
	 
}


/* Mobile
@media (max-width: 767px) { }

  Tablet  
@media (min-width: 768px) { }

  Desktop  
@media (min-width: 1024px) { }

  Large Desktop  
@media (min-width: 1440px) { } 
*/