section {
	width: 99%;
	float: left;
	background: ;
	height: auto;
	margin: 10px 10px;
	}
footer	{
	display:block;
    	width:99%;
    	text-align:center;
	padding: 10px;
	color: green;
	border-radius: 20px;
	float: left;
	font-size:25px;
	font-family: 'Jameel Noori Nastaleeq Kasheeda' !important;
	clear:both;
	}
select	{
	font-size:18px;
	color: green;
	
	}
@font-face {
        font-family: "Jameel Noori Nastaleeq Kasheeda";
        src: url("../fonts/Jameel Noori Nastaleeq Kasheeda.ttf");
}
@font-face {
        font-family: "PDMS_Saleem_QuranFont";
        src: url("../fonts/PDMS_Saleem_QuranFont.ttf");
}
a {
  text-decoration: none;
  display: inline-block;
  padding: 4px 4px;
}
* {
  box-sizing: border-box;
}
#myInput {
 	background-color: #f1f1f1;
  	background-position: 10px 10px;
  	background-repeat: no-repeat;
  	width: 20%;
  	font-size: 26px;
  	padding: 6px;
 	border: 1px solid #ddd;
 	margin-bottom: 12px;
  	float: Right;
 	text-align: Right;
	direction: rtl;
	
	
}
#myInput1 {
 	background-color: #f1f1f1;
  	background-position: 10px 10px;
  	background-repeat: no-repeat;
  	width: 20%;
  	font-size: 26px;
  	padding: 6px;
 	border: 1px solid #ddd;
 	margin-bottom: 12px;
  	float: Right;
 	text-align: Right;
	right: 0;
	direction: rtl;
}
#myInput2 {
 	background-color: #f1f1f1;
  	background-position: 10px 10px;
  	background-repeat: no-repeat;
  	width: 20%;
  	font-size: 26px;
  	padding: 6px;
 	border: 1px solid #ddd;
 	margin-bottom: 12px;
  	float: Right;
 	text-align: Right;
	right: 0;
	direction: rtl;
}

#myInput3 {
 	background-color: #f1f1f1;
  	background-position: 10px 10px;
  	background-repeat: no-repeat;
  	width: 20%;
  	font-size: 26px;
  	padding: 6px;
 	border: 1px solid #ddd;
 	margin-bottom: 12px;
  	float: Right;
 	text-align: Right;
	right: 0;
}

#myInput4 {
 	background-color: #f1f1f1;
  	background-position: 10px 10px;
  	background-repeat: no-repeat;
  	width: 20%;
  	font-size: 26px;
  	padding: 6px;
 	border: 1px solid #ddd;
 	margin-bottom: 12px;
  	float: Right;
 	text-align: Right;
	right: 0;
	direction: rtl;
}

#myInput5 {
 	background-color: #f1f1f1;
  	background-position: 10px 10px;
  	background-repeat: no-repeat;
  	width: 20%;
  	font-size: 26px;
  	padding: 6px;
 	border: 1px solid #ddd;
 	margin-bottom: 12px;
  	float: Right;
 	text-align: Right;
	right: 0;
}



#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
	float: right;
	 direction: rtl;
  
th {
    cursor: pointer;
}	 
 
	
}
#myTable th, #myTable td {
  	text-align: Right;
 	padding: 1px;
	padding-right: 5px;
 	border: 1px solid #ddd;
	vertical-align: top;
	
}
#myTable tr {
  	border-bottom: 3px solid #ddd;
	line-height: ;
	vertical-align: top;
}
#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
	
}
.font1{
    font-family:PDMS_Saleem_QuranFont;
	font-size: 25px;
	color:black;
}
.font2{
    font-family:'Jameel Noori Nastaleeq Kasheeda' !important;
	font-size: 25px;
	color:green;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}
input::placeholder {
  	font-family:'Jameel Noori Nastaleeq Kasheeda' !important;
	font-size: 20px;
	color:red;
	text-align: Right;
	
  
}
#myBtnn {
  font-size: 25px;
  border: none;
  outline: none;
  background-color: ;
  color: white;
  cursor: pointer;
	padding: 5px 5px 5px 5px;
	margin-right: 10px;
	color: green;
	width: 180px;
        height: 50px;
	margin-top: 1px;
	font-family: "Jameel Noori Nastaleeq Kasheeda";
	position: fixed;
	right: 400px;
}
.content {     
 	overflow: auto;
	
     } 
     
.content a {
        color: darkblue;
      }
	  
#urdu 	{
  	font-family: 'Jameel Noori Nastaleeq Kasheeda' !important;
	font-size: 25px;
	color: green;
	text-align: right; 
	valign: top;
}

#arabic {
	font-family:PDMS_Saleem_QuranFont ;
	font-size: 25px;
	color: black;
	text-align: right;
}

#urduar 	{
  	font-family: 'Jameel Noori Nastaleeq Kasheeda' !important;
	font-size: 25px;
	color: red;
	text-align: right; 
	valign: top;
}	


#aya	{
  	font-family: 'Jameel Noori Nastaleeq Kasheeda' !important;
	font-size: 25px;
	color: blue;
	text-align: right; 
	valign: top;
}	


#root	{
  	font-family: 'Jameel Noori Nastaleeq Kasheeda' !important;
	font-size: 25px;
	color: blue;
	text-align: right; 
	valign: top;
}

#context	{
  	font-family: 'Jameel Noori Nastaleeq Kasheeda' !important;
	font-size: 25px;
	color: green;
	text-align: right; 
	valign: top;
}



#arabicword {
		font-family:PDMS_Saleem_QuranFont;
		font-size: 25px; 
		color: red;
		text-align: right;
		vertical-align: top;
}
#urduword {
		font-family:'Jameel Noori Nastaleeq Kasheeda' !important;
		font-size: 25px; 
		color: green;
		text-align: right;
		vertical-align: top;

}


#urduInput {
        font-family: 'Jameel Noori Nastaleeq', Arial, sans-serif; /* Or another Urdu font */
        font-size: 18px;
        direction: rtl; /* For right-to-left typing */
        text-align: right;
    }
    #urduKeyboard {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(17px, 1fr));
        gap: 14px;
        margin-top: 0px;
	width: 95%;
	direction: rtl;
    }
    .keyboard-button {
        padding: 4px;
        font-size: 25px;
	color: blue;
        cursor: pointer;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 5px;
	width: 30px;
	height: 35px;
	
    }


#keyboardContainer {
    display: grid;
    grid-template-columns: repeat(42, 1fr); /* Adjust as needed for key layout */
    gap: 5px;
    margin-top: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.key {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif; /* Use an Arabic-friendly font */
}

.key:hover {
    background-color: #e0e0e0;
}

#arabicInput {
    display: block;
    margin: 20px auto;
    font-size: 1.5em;
    padding: 10px;
    text-align: right;
}