@font-face {
    font-family: 'Amiri';
    src: url('./font/Amiri-Regular.eot');
    src: url('./font/Amiri-Regular.eot?#iefix') format('embedded-opentype'),
         url('./font/Amiri-Regular.woff2') format('woff2'),
         url('./font/Amiri-Regular.woff') format('woff'),
         url('./font/Amiri-Regular.ttf') format('truetype'),
         url('./font/Amiri-Regular.svg#Amiri-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amiri';
    src: url('./font/Amiri-Bold.eot');
    src: url('./font/Amiri-Bold.eot?#iefix') format('embedded-opentype'),
         url('./font/Amiri-Bold.woff2') format('woff2'),
         url('./font/Amiri-Bold.woff') format('woff'),
         url('./font/Amiri-Bold.ttf') format('truetype'),
         url('./font/Amiri-Bold.svg#Amiri-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



@font-face { 
	font-family: 'UrduNasq';
    src: url('./font/UrduNasq.eot?#iefix') format('embedded-opentype'),
         url('./font/UrduNasq.woff') format('woff'),
         url('./font/UrduNasq.ttf') format('truetype'),
         url('./font/UrduNasq.svg#UrduNasq') format('svg');
}



@font-face {
    font-family: 'FreeSans';
    src: url('./font/FreeSans.eot');
    src: url('./font/FreeSans.eot?#iefix') format('embedded-opentype'),
        	url('./font/FreeSans.woff2') format('woff2'),
        	url('./font/FreeSans.woff') format('woff'),
        	url('./font/FreeSans.ttf') format('truetype'),
        	url('./font/FreeSans.svg#FreeSans') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}




html, body{ 
height			: 100%;
margin			: 0px; 
overflow		: hidden;
font-family		: 'FreeSans';
font-size		: 9pt; 
color			: #ACA091;
background-color: #151515;
/*text-size-adjust: none;
	max-height: 1000000000px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;*/
} 


/*  div { border:1px solid red;}   */



:root {

  --Color_CLOCK: 		'white';
  --Color_SEKSALATS: 	'white';
  --Color_LOWFOCUS: 	'white';
  --Color_BGTUBE: 		'white';
  
	--XX_LANG_DIR: 'rtl';
	
	--XX_NOW_ARABIC: 'Amiri';

  --bgSemiLITE: rgba(255,255, 255, 0.15);

  
}


.p_day, .hp_day{
	-webkit-appearance:none;
	-moz-appearance:none;
	
}

/*  LANDSCAPE  */
@media only screen and (orientation:landscape)
{
.cVERTICAL 		{ display: none;}
.cHORIZONTAL 	{ display: block;}


.CSS_FON_SECS {position:absolute;	line-height:1em; font-size:4.7vw; right:9%;   top:8%;   z-index:926; width:13%; color:var(--Color_CLOCK);}
.CSS_FON_HOUR {position:absolute;	line-height:1em; font-size:11vw;  right:25%;  top:3%;	z-index:925; width:auto;  color:var(--Color_CLOCK); }
.CSS_FON_AMPM {position:absolute;	line-height:1em; font-size:3.3vw; right:9%;   top:51%; 	z-index:927; width:13%; color:var(--Color_CLOCK);}

.CSS_MINI_CLK		{visibility:visible; position:absolute; left:0%; top:-30%; width:100%; height:100%; }

.CSS_CLOKO 			{position:absolute;	line-height:1em; font-size:10vw;  left:0%;  top:-10%; z-index:929; width:100%; height:50%;  color:var(--Color_CLOCK); }



.CSS_AYATS_ALONGO	{position:absolute; left:0%; top:-13%; width:100%; height:100%; visibility:visible; font-size:3.0vw; line-height:1.8em; color:var(--Color_SEKSALATS); }



.wwwNAMEar {position:absolute; font-family:var(--XX_NOW_ARABIC);  line-height:1em; font-size:3.2vw; top:17%;  	width:100%; text-align:center;  color:var(--Color_SEKSALATS);}
.wwwNAMEen {position:absolute; font-family:'Amiri'; 	line-height:1em; font-size:2.2vw; top:27%;  	width:100%; text-align:center;  color:var(--Color_SEKSALATS);}
.wwwHOUR   {position:absolute; font-family:'FreeSans'; 	line-height:1em; font-size:4.7vw; bottom:7%;	width:100%; text-align:center; color:var(--Color_CLOCK);}



.wwwIQAMA 	{position:absolute;  left:6%;  top:5%; line-height:1em;  font-size:1.8vw; color:var(--Color_LOWFOCUS);  }
.wwwDemain  {position:absolute; right:5%;  top:5%; line-height:1em;  font-size:1.5vw; color:var(--Color_LOWFOCUS);  }




.CSS_BottomMSG {position:absolute; left:0%; bottom:0%; font-size:2vw; line-height:1.9em; height:9%; width:100%; color:var(--Color_SEKSALATS);}


.cssGeneralMsqNAME				{padding:0.2em; line-height:1em; font-size:2.3vw; color:var(--Color_LOWFOCUS); }
.cssGeneralDate					{padding:0.2em; line-height:1em; font-size:2.3vw; color:var(--Color_SEKSALATS); }
.cssGeneralDate:lang(ar)		{padding:0.2em; line-height:1em; font-size:2.6vw; color:var(--Color_SEKSALATS); }

.cssHRDateYOUM		{padding:0.4em; line-height:1em; font-size:2.7vw; color:var(--Color_SEKSALATS); }
.cssHRDateHIJRI 	{padding:0.4em; line-height:1em; font-size:2.7vw; color:var(--Color_SEKSALATS); }
.cssHRDateMILADI 	{padding:0.4em; line-height:1em; font-size:2.7vw; color:var(--Color_SEKSALATS); }



.cssBtmLOCATION {position:absolute; align-content: left; right:1%; bottom:1%; width:15%; line-height:1em; font-size:1.3vw; color:var(--Color_LOWFOCUS); }
.cssBtmVERSION  {position:absolute;  left:1%; bottom:1%; width:15%; line-height:1em; font-size:1.3vw; color:var(--Color_LOWFOCUS); }

.HRimgLOGO_ALONGO {position:absolute; left:8.5%; top:-8%; width:11%; height:46%; opacity:0.5;}



select {width:100%; padding:1%; text-align:right; font-size:102%;}
select optgroup{padding:1.5%;  color:#913E23;}
select option{padding:1.5%; text-align:right; color:#252525;}

button {margin-top:5%; width:60%; font-size:2vw; padding:2%;}


.cssHelpSCREEN 	{position:absolute; height:100%; width:40%; left:0px; top:0%; visibility:hidden; font-size:1.6vw; z-index:99998; background:#151515;}
.cssSET 		{position:absolute; display:table; left:0%; top:0%; width:100%; height:8%; background-color:#282828;}
.cssMenuBTN 	{width:90%; border-bottom:1px solid; padding:3.4%;}
.cssMenuGRP 	{position:absolute; line-height:1em; left:0%; top:10%; width:100%; height:90%;  overflow-y:auto; }



.cssModelSettingsWINDOW	{font-family:'Amiri'; position:absolute; width:60%; height:100%; left:20%; top:0%; visibility:hidden; font-size:2.1vw; z-index:99993; background:#151515;}
.cssTitlesHOLDER		{position:absolute; display:table; left:0%; top:0%; width:100%; height:10%;z-index:99993}
.cssSettingsDATA		{position:absolute; left:0%; top:10%; width:94%; height:84%; padding:3%;  overflow-y:auto;}



.cssNoMOBILE {position:absolute; left:40%; top:50%; width:20%; height:auto; visibility:hidden;}
.cssCheckBOX {height:3.5vw; width:2.5vw;}
.cccADJUSTER	{font-size:2vw; height:3vw; width:3.5vw;}


.CSS_Marquee {position:absolute; visibility:hidden; left:0%; bottom:0%; line-height:1em; font-size:2.1vw; padding:1.6% 0; height:auto; width:100%; background:var(--Color_BGTUBE); color:var(--Color_SEKSALATS);}

.wwwALONGO	{position:absolute; left:0.5%; bottom:1%; height:38%; width:99%; }


.cssMenuICO	{position:absolute; z-index:9999333; left:1%; top:-2%; font-size:2.5vw; padding:3px;}



.cssHR_DECOMTO_ALONGO 	{position:absolute; z-index:337; left:79%; bottom:54%; width:18%; height:36%;  visibility:hidden; }

.cssHR_NEXTPRAY_DATA_ALONGO	{position:absolute; z-index:337; left:79%; bottom:54%; width:18%; height:36%; visibility:visible; color:var(--Color_SEKSALATS);}

.cssAZANO_ALONGO	{ border-radius:50%; position:absolute; z-index:400; visibility:hidden; left:79%;   bottom:55%;  line-height:1.8em; width:17vw; height:17vw; border:0.5vw solid var(--Color_SEKSALATS); background:var(--Color_BGTUBE); color:var(--Color_SEKSALATS); font-size:2.3vw; text-shadow: 4px 4px 10px rgba(0,0,0, 0.5); }



.CSS_AR33 {font-family:'Amiri';    font-size:1.9vw;}
.CSS_AR44 {font-family:'Amiri';    font-size:1.4vw;}
.CSS_EN33 {font-family:'FreeSans'; font-size:1.2vw;}

input[type='radio'] { vertical-align:middle; width:2.1vw; height:2.1vw;}
}











/*  VERTICAL  */

@media only screen and (orientation:portrait)
{
.cVERTICAL 		{ display: block;}
.cHORIZONTAL 	{ display: none;}

.cssMosqueNAME {position:absolute; left:0%; top:0%; height:100%; width:100%; line-height:1.8em; font-size:4.3vw; color:var(--Color_LOWFOCUS);  text-shadow: 3px 3px 10px rgba(0,0,0, 0.3);}


.CSS_FON_SECS {position:absolute; line-height:1em; font-size:9.8vw;  z-index:926; left:76%;  bottom:43%; width:12%;   color:var(--Color_CLOCK); text-shadow: 4px 4px 10px rgba(0,0,0, 0.5); }
.CSS_FON_HOUR {position:absolute; line-height:1em; font-size:21.3vw; z-index:925; left:24%;  bottom:-15%; width:52%;  color:var(--Color_CLOCK); text-shadow: 4px 4px 10px rgba(0,0,0, 0.5); }
.CSS_FON_AMPM {position:absolute; line-height:1em; font-size:7.1vw;  z-index:927; left:76%;  bottom:3%; width:12%;    color:var(--Color_CLOCK); text-shadow: 4px 4px 10px rgba(0,0,0, 0.5); }

.CSS_CLOKO {position:absolute;	line-height:1em; font-size:18.5vw;  left:0%; bottom:0%;	z-index:929; width:100%;  color:var(--Color_CLOCK);  text-shadow: 4px 4px 10px rgba(0,0,0, 0.5);}

.eeeNAMEar {font-family:var(--XX_NOW_ARABIC);    position:absolute; width:37%; right:4.2%; bottom:16%; line-height:1em; font-size:5.8vw;  color:var(--Color_SEKSALATS); text-shadow: 4px 4px 10px rgba(0,0,0, 0.5);}
.eeeNAMEen {font-family:'Amiri'; position:absolute; width:37%; right:4.2%; bottom:21%; line-height:1em; font-size:4.1vw;  color:var(--Color_SEKSALATS); text-shadow: 4px 4px 10px rgba(0,0,0, 0.5);}
.eeeHOUR   {font-family:'FreeSans'; position:absolute; width:41%; left:1%;    bottom:7%;  line-height:1em; font-size:7.6vw;  letter-spacing: 0.065em;  color:var(--Color_CLOCK); text-shadow: 4px 4px 10px rgba(0,0,0, 0.5); }


.CSS_AYATS {font-size:4.7vw; color:var(--Color_SEKSALATS); text-shadow: 4px 4px 10px rgba(0,0,0, 0.5);}


.eeeIQAMA {position:absolute; left:44%; bottom:14%; text-align:right; width:12%; line-height:1em; font-size:4.5vw;  color:var(--Color_LOWFOCUS); }
.eDemain {position:absolute; line-height:1em; right:18%; top:5%; font-size:3vw;  color:var(--Color_LOWFOCUS); }


.CSS_BottomMSG {position:relative; font-size:4.7vw; line-height:1em; margin-top:2%; height:5%; width:100%; color:var(--Color_SEKSALATS); text-shadow: 3px 3px 10px rgba(0,0,0, 0.3);}

.CSS_Marquee {position:absolute; left:0%; bottom:0%; width:100%; padding:1.5% 0; font-size:4.2vw; line-height:1.2em; background:var(--Color_BGTUBE); color:var(--Color_SEKSALATS);}


.imgLOGO {position:absolute; left:7.5%; bottom:17%; width:24%; height:12%; opacity:0.7; }

.cssVReYOUM   {position:absolute; left:18%; top:42%;     width:64%; line-height:1.5em; font-size:6.1vw;  color:var(--Color_SEKSALATS); text-shadow: 3px 3px 10px rgba(0,0,0, 0.5);}
.cssVReHIJRI  {position:absolute; left:18%; top:64%;     width:64%; line-height:1.5em; font-size:4.7vw;  color:var(--Color_SEKSALATS); text-shadow: 3px 3px 10px rgba(0,0,0, 0.5);}
.cssVReMILADI {position:absolute; left:18%; bottom:5%;   width:64%; line-height:1.5em; font-size:4.7vw;  color:var(--Color_SEKSALATS); text-shadow: 3px 3px 10px rgba(0,0,0, 0.5);}

.cssLocationVERSION	{position:absolute; z-index:99; align-content: left; left:1%; bottom:1%; width:27%; font-size:2.8vw; padding:1%; color:var(--Color_LOWFOCUS); }
/*.cssLocationVERSION	{position:absolute; z-index:99; left:-8%; bottom:0%; width:100%; font-size:2.6vw; padding:1%; color:var(--Color_LOWFOCUS); }
	{position:absolute; align-content: left; right:1%; bottom:1%; width:15%; line-height:1em; font-size:1.3vw; color:var(--Color_LOWFOCUS); }*/
	.cssLocationV	{position:absolute; z-index:99; align-content: left; right:1%; bottom:1%; width:27%; font-size:2.8vw; padding:1%; color:var(--Color_LOWFOCUS); }



select {width:100%; padding:1%; text-align:right; font-size:102%;}
select optgroup{padding:1.5%;  color:#913E23;}
select option{padding:1.5%; text-align:right; color:#252525;}


button {margin-top:5%; width:60%; font-size:3.5vw; padding:2%;}


.cssHelpSCREEN 	{position:absolute; height:100%; width:70%; left:0px; top:0%; visibility:hidden; font-size:3.0vw; z-index:99998; background:#151515;}
.cssSET 		{position:absolute; display:table; left:0%; top:0%; width:100%; height:5%; background-color:#282828;}
.cssMenuBTN 	{width:90%; border-bottom:1px solid; padding:3.4%;z-index:99998}
.cssMenuGRP 	{position:absolute; line-height:1em; left:0%; top:6%; width:100%; height:94%;  overflow-y:auto;z-index:99998 }


.cssModelSettingsWINDOW	{font-family:'Amiri'; position:absolute; width:100%; height:100%; left:0%; top:0%; visibility:hidden; font-size:3.6vw; z-index:99993; background:#151515;}
.cssTitlesHOLDER		{position:absolute; display:table; left:0%; top:0%; width:100%; height:6%;z-index:99993}
.cssSettingsDATA		{position:absolute; left:0%; top:6%; width:94%; height:88%; padding:3%;  overflow-y:auto;}


.cssNoMOBILE {position:absolute; left:30%; top:40%; width:40%; height:auto; visibility:hidden;}
.cssCheckBOX {height:4vw; width:5vw;}
.cccADJUSTER	{font-size:3vw; height:5vw; width:6vw;}

.cssAZANO	{border-radius:50%; position:absolute; z-index:400; visibility:hidden; left:3%; top:46.8%;  line-height:1.8em; width:31vw; height:31vw; border:1vw solid var(--Color_SEKSALATS); background:var(--Color_BGTUBE); color:var(--Color_SEKSALATS); font-size:5.1vw; text-shadow: 4px 4px 10px rgba(0,0,0, 0.5); }


.cccROUND			{font-family:'FreeSans'; border-radius:75px; position:relative; left:39%; top:0px; height:6.4%; width:59%; margin-bottom:1.4%; background:var(--bgSemiLITE); opacity:0.5; }
.cccROUND_ACTIVE	{font-family:'FreeSans'; border-radius:75px; position:relative; left:39%; top:0px; height:6.4%; width:59%; margin-bottom:1.4%; background:var(--bgSemiLITE); opacity:1; }


.cssMenuICO	{position:absolute; z-index:9999333; left:1%; top:-2%; font-size:5vw; padding:3px;}
.cssQiblaICO {position:absolute; z-index:1; right:1%; top:-4%; font-size:5vw; padding:3px;}

.CSS_AR33 {font-family:'Amiri';    font-size:3.9vw;}
.CSS_AR44 {font-family:'Amiri';    font-size:2.9vw;}
.CSS_EN33 {font-family:'FreeSans'; font-size:2.4vw;}

input[type='radio'] { vertical-align:middle; width:3.5vw; height:3.5vw;}
}





.CSS_X_LANG_DIRECTION {direction:var(--XX_LANG_DIR);}




.CSS_BlackSCREEN {position:absolute; z-index:996; left:0px; top:0px; height:100%; width:0%; transition: width 4s ease-out; background: black url() no-repeat center center;}



.CSS_PANO3_VISIBLE	{opacity:0.95; transition: all 3s ease-out;}
.CSS_PANO3_HIDDEN	{opacity:0;    transition: all 3s ease-out;}
 
.CSS_SLIDERS_BG		{
					background: black;
					font-size:9vw; 
					position:absolute; 
					z-index:999; 
					left:-100%; 
					top:0%; 
					height:100%; 
					width:100%;
					color:#F4E2CE;
					opacity:0.95;
					}





.CSS_CORAN	{font-family :'Amiri';}

.CSS_HAFS	{font-family :var(--XX_NOW_ARABIC);}

.CSS_LATINO {font-family :'FreeSans';}

.cssColorLITE 	{color:#ACA091;}
.eLiter 		{color:#D2C7AA;}
.eSmall80		{font-size:80%;}
a 				{color:#D2C7AA; text-decoration:none;}


.CSS_SHADOW		{ text-shadow: 4px 4px 10px rgba(0,0,0, 0.5); }



.cssDISABLED {pointer-events: none; opacity: 0.4;}



.CSS_VR_THEMER	{width:100%; height:30vw; font-size:3vw; text-align:right; background: url() no-repeat center top; background-size:cover;}
.CSS_HR_THEMER	{width:100%; height:7vw;  font-size:2vw; text-align:right; background: url() no-repeat center top; background-size:cover;}

.cPERSO_VR	{width:100%; height:15vw;  font-size:2vw; text-align:right; background: url('./themes/W-PERSO-VR.jpg') no-repeat center top; background-size:cover;}
.cPERSO_HR	{width:100%; height:7vw;   font-size:1vw; text-align:right; background: url('./themes/W-PERSO-HR.jpg') no-repeat center top; background-size:cover;}

.cccTBL1	{margin: 3% 0%; padding-bottom:2%; border-bottom:3px dashed gray;}
.cccTBL2	{margin: 5% 0%; padding-bottom:2%; border-bottom:3px dashed gray;}


.codePERSO	{color:#D5CCB9; padding:2%; width:93%; overflow-wrap: break-word;}


input[type='checkbox'] { vertical-align:middle;}
label { vertical-align:middle;}


.cssMsgIMPORTANT {background-color:#9E2D15; color:#FFDF9A;}


.cssWindowCLOSE	{text-align:right; display:table-cell; vertical-align:middle; background-color:#282828; padding-right:3%;}

.cssWindowTITLE	{width:60%; text-align:left; display:table-cell; vertical-align:middle; color:white; background-color:#282828;}

.cssLocationDATA {width:85%; padding:2% 0 2% 0%; color:white;}