/*
red rgb(255, 230, 230)
blue rgb(230, 230, 255)
green rgb(230, 255, 230)

pink rgb(255, 230, 255)

purple rgb(242, 230, 255)
rgb(255, 230, 242)

lemon rgb(254, 251, 216)
blue rgb(64, 96, 161)
/*
pink #fef6fd , #ffd7f7
red #fff1f2 , #ffa19b	
green #f4fff8 , #e4ffef , #cdffe0 , #b8ffd4
blue #eafbff , #e8f6fe , #cbdcff , #c0e7ff
purple #f0e8ff , #f5e0ff , #e3d4ff
yellow #fffcb8
*/

@font-face {
    font-family: "bhoma";
    src: url("fonts/bhoma.ttf") ;
}

@font-face {
    font-family: "comic sans ms";
    src: url("fonts/comic.ttf") ;
}

@font-face {
    font-family: yekan;
    src: url('fonts/yekan.ttf') format('truetype');}
    
.closedivf{
    display:block;
    background-color:white;
    color:#774f98;  
    font-family: "bhoma"; 
    font-weight:bold;
    font-size: 1rem;
    text-shadow: 2px 2px 4px gray;
    border-bottom:solid 3px rgb(215, 189, 226 );
    /*rgb(228,204,231);
    /*margin-bottom: 2px;          
    /*border-bottom:solid 3px rgb(228,204,231);   */
    /*box-shadow:2px 2px 4px gray;
    /*2px 2px 6px 0px black;*/
    }

.closedive{
    display:block;
    background-color:white ;
    color:#774f98;  
    font-family:comic sans ms; 
    font-weight:bold;
    font-size: 1rem;
    text-shadow: 2px 2px 4px gray;
    border-bottom:solid 3px rgb(215, 189, 226 );
    /*rgb(228,204,231);
    /*margin-bottom: 2px;          
    /*border-bottom:solid 3px rgb(228,204,231);   */
    /*box-shadow:2px 2px 4px 0px gray;*/
    }
    
.closedel {
  cursor: pointer;
  position: relative;
  color: black;
  font-family:Arial; 
}
.closedel:hover{
    background-color:red;
    color:white;
}


.close {
  cursor: pointer;
  position: relative; float: right;
  top:0;  right:0;  padding:0;  width:1.5rem;  height:1.5rem;
  color: white;
  font-size: 1rem;
  font-family:Arial;
  background-color: maroon;
}

.boxkdr{
    position:relative; 
    display:block;
    max-height:90%;
    max-width:90%;   
    overflow-y:auto;
    overflow-x:auto;
   /* border:solid 3px rgb(228,204,231);
    /*rgb(150,70,150);*/   
    box-shadow:2px 2px 4px 0px silver;
    
    background-color:white; 
    padding:0.5rem; 
    margin:0.5rem; 
    color:black;
    /*#7b0099; */
    text-shadow:2px 2px 4px silver; 
    text-align:center;
}


.pntr{
    cursor:pointer;
}

.ntj{
    display:inline-block;
    margin:5px; 
    font-size:1.5rem;
  font-weight:bold;
  color:#7b0099;
  text-shadow:2px 2px 2px silver; 
  }

.rizkdr {
  background-color: white;
  font-size: 1rem;
  line-height:1rem;
  font-family: yekan, comic sans ms;
  display: inline-block;
  margin:0.5rem;  padding:0;  
  box-shadow:5px 5px 5px black;
  box-shadow:2px 2px 6px 0px black;
  border: solid 2px silver;   
}

.rizkdr1 {
  color: white;
  padding:2px; margin:0px;
  font-weight:bold;
  text-shadow:2px 2px 4px gray;
  }

.rizkdr2 {      
    font-weight:normal;  font-size: 0.8rem;
    padding:2px; margin:1px;
    }


.men {
    display: inline-block;
    margin:0.5rem;  padding:5px;
    width:auto;  height:auto;
  background-color:rgb(215, 189, 226 );/*rgb(235, 222, 240);*/
  color: black;
   line-height:1rem;
  font-family: Bhoma, comic sans ms;
  font-weight:bold;
  font-size: 1rem;
    text-shadow: 2px 2px 4px gray;
    text-align:center;     
  cursor: pointer;
  box-shadow:2px 2px 6px 0px black;
  box-shadow:4px 4px 4px 0px gray;
  }

.men:hover {
 background-color:rgb(245, 235, 250);
}

.men {
  align-items: center;
  background-color: initial;
  background-image: linear-gradient(rgba(250, 250, 250, .84), rgba(107, 81, 141, .84) 50%); 
    /*linear-gradient(rgba(179, 132, 201, .84), rgba(57, 31, 91, .84) 50%);*/
  border-radius: 1rem;
  border-width: 0;
  box-shadow: rgba(57, 31, 91, 0.24) 0 2px 2px,rgba(179, 132, 201, 0.4) 0 8px 12px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: Bhoma, comic sans ms;
  font-size: 1rem;
  font-weight: bold;
  justify-content: center;
  letter-spacing: .04rem;
  line-height: 1rem;
  margin: 0;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  text-shadow:2px 2px 4px black;
  
  /*rgba(255, 255, 255, 0.4) 0 0 4px,rgba(255, 255, 255, 0.2) 0 0 12px,rgba(57, 31, 91, 0.6) 1px 1px 4px,rgba(57, 31, 91, 0.32) 4px 4px 16px;*/
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
}

.men:hover {
  background-image: linear-gradient(#B384C9, #391F5B 50%);
}

.titr{
    color:rgb(215, 189, 226 );
}


ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

li{
    display:block;
}  

.drpdwn {
    position: relative;
    display: inline-block;
    margin:0;
}

.drpdwn-cnt {
    display: none;
    position: absolute;
    background-color: white; /*rgb(250,240,240); /*rgb(200,125,210); /*rgb(150,70,150);/*rgb(241,237,237);*/
    border:solid 2px gray;
      box-shadow: 0px 10px 20px 0px gray;
    z-index: 1;
}

.divnot{
    text-align:center;
    color:red; /*#7b0099; /*rgb(150,75,150);*/ 
    text-shadow:2px 2px 4px silver; 
    padding:1rem;
    font-family:Bhoma, comic sans ms; 
    font-size:1rem; font-weight:bold; line-height:1.2rem;
        }

.divtxtf{
    position:fixed; top:1.5rem; left:1rem; right:1rem; bottom:1rem; 
    display:block; visibility:hidden;
    background-color:white; 
    padding:1rem; direction:rtl; color:#7b0099;
    font-family:bhoma; /*font-weight:bold; */
    text-align:right; text-shadow:2px 2px 4px silver; font-size:1.1rem;
    overflow: auto;
}

.divtxte{
    position:fixed; top:1.5rem; left:1rem; right:1rem; bottom:1rem; 
    display:block; visibility:hidden;
    background-color:white; 
    padding:1rem; direction:ltr; color:#7b0099;
    font-family:com8c sans ms; /*font-weight:bold; */
    text-align:left; text-shadow:2px 2px 4px silver; font-size:1.1rem;
    overflow: auto;
}

.table0 { background-color:white; padding:1px; table-layout:auto; width:100%; font-family:yekan; font-size:1rem; line-height:1rem; border-collapse:collapse;  }   

.tr0 { background-color:white; border-bottom:solid 0px gray;}
.td0 { text-align:center; padding:5px;}

.tr0:hover {background-color:#fae6ff;}

.tdvl { text-align:center; direction:ltr;}
.tdvr { text-align:center; direction:rtl;}

.tdvred { text-align:center; direction:ltr; color:red; background-color:white; font-weight:200; font-family:Arial; cursor:pointer;}

#lnk {text-decoration:none; color: black;}

#tkth, #tkth0 {background-color:rgb(150,75,160); color:white;}

.tkth0 {background-color:rgb(150,75,160); color:white;}

#pjdvlk { direction:rtl; background-color:rgb(230,220,230);}
.pjdvli { direction:ltr; background-color:rgb(240,230,240);}/*#fae6ff;}*/

.pjdvliNF {float:left; direction:ltr; background-color:white; padding:2px; font: yekan; }

.tdr { text-align:center; direction:rtl;}
  .tdrf { text-align:right; direction:rtl; color:black; text-shadow:1px 1px 2px white; font-family:Bhoma; font-weight:normal;}
.tdl { text-align:center; direction:ltr; word-break:break-all;}
  /*.tdlf { text-align:left; direction:ltr; color:#7b0099; text-shadow:1px 1px 2px silver; }*/
  .tdlf { text-align:left; direction:ltr; color:black; text-shadow:1px 1px 2px white; font-family:comic sans ms; font-weight:normal; }  

.tdv { text-align:center; direction:ltr;}

.litem{
  display: inline-block;
   border-style:solid;  border-width:0.25rem;  border-color:silver;
   font-size:1rem;
   color:white;  cursor:pointer; padding:0.25rem;
}

/*****************************************/
/* Form container */
.form-container {
  background-color: #f0e6fa;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* Form input styles 
input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  border: 2px solid #d3a4f3;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  background-color: #ffffff;
  transition: border 0.3s ease;
}
*/

input{
    
     font-size:1rem; /*height:1.5rem;*/
     margin:0.5rem;
     padding: 0.5rem;
 
  width: 90%;
  border: 2px solid #d3a4f3;
  border-radius: 8px;
  outline: none;
    transition: border 0.3s ease;
 }


input:focus {
  border-color: #ff69b4; /* Pink border on focus */
}

/* Submit button styles */
a, button {
  padding: 12px 20px;
  background-color: rgb(128, 0, 66);/* #ff69b4;*/
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/*button:hover {
  background-color: #db5cb5;
}*/


/* Card style layout */
.card {
  background: linear-gradient(135deg, #f8c4d1, #d3a4f3);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin: 20px;
  max-width: 600px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
}

/* Heading inside the card */
.card h2 {
  color: #5c3c8a;
  font-size: 24px;
  margin-bottom: 15px;
}

.card p {
  color: #5c3c8a;
  font-size: 16px;
  line-height: 1.6;
}

/* Gradient background */
body {
  /*background: linear-gradient(45deg, #d3a4f3, #ff69b4);*/
  background-color:white;
  font-family: 'Arial', sans-serif;
  color: black;
  margin: 0;
  padding: 0;
}

/* Section padding */
.section {
  padding: 50px 20px;
}

/* Smooth entry animation */
@keyframes slideIn {
  0% { transform: translateY(50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Apply animation */
.card, .form-container {
  animation: slideIn 1s ease-out;
}

/* Link styles */
a {
  text-decoration: none;
  color: white; /* #d3a4f3;*/
  font-weight: bold;
  transition: color 0.3s ease;
}

a:hover, button:hover {
  color: #ff69b4;
}

.srbrg{
  position:relative;
  display:inline-block;
  text-align: center;
  /*top:0.5rem; left: 0.5rem; right:0.5rem;*/
 
  margin:0.5rem; padding:0.5rem;
  background-color:white;
  border-radius: 8px;
  box-shadow:0px 0px 4px 0px #7b0099;
  white-space :nowrap;
  color:#7b0099; 
  font-family:Georgia; 
  font-size:2rem; 
  font-weight:bold; 
  text-shadow:2px 2px 4px gray; 
  line-height:2rem;
 }

button {
      background-color: rgb(150,90,150);/* rgb(128, 0, 66);*/
      color: white;
  font-family:Georgia;
  padding:0.25rem 0.5rem;
  margin:1rem;
  line-height:2rem;
    font-weight:bold;
  /*font-size:0.5rem; */
  border: none;
  border-radius: 0.5rem; /*8px;*/
  cursor: pointer;
  box-shadow:0px 2px 4px 0px gray;
  white-space :nowrap;
  
  background: linear-gradient(45deg, rgb(184, 184, 184), #f2e6ff, #ffffff, #f2e6ff, rgb(184, 184, 184));
  color: #333;
    border-radius: 12px;
  border: 1px solid #9d9d9d;
  box-shadow: 0 0 12px rgba(200,200,200,0.6);
  }
  
  a {
      background-color: rgb(150,90,150);/* rgb(128, 0, 66);*/
      color: white;
  font-family:Georgia;
  padding:0.5rem 1rem;
  margin:0.5rem;
  line-height:3rem;
    font-weight:bold;
  /*font-size:0.5rem; */
  border: none;
  cursor: pointer;
  white-space :nowrap;
  border-radius:0;
  background: linear-gradient(45deg, rgb(184, 184, 184), #f2e6ff, #ffffff, #f2e6ff, rgb(184, 184, 184));
  color: #333;
    
  border: 1px solid #9d9d9d;
    }


 a:hover, button:hover {
  color: #ff69b4;
}

a{
    margin-right:0.25rem;  margin-left:0.25rem;
}

input{
    
     font-size:1rem; /*height:1.5rem;*/
     margin:0.5rem;
     padding: 0.5rem;
 
  width: 90%;
  border:solid 2px rgb(150,90,150);
  border-radius: 8px;
  outline: none;
    transition: border 0.3s ease;
 }


input:focus {
  border-color: rgb(220,160,220); /*#d3a4f3; /*#ff69b4; * Pink border on focus */
}

input{
    width:auto;
    } 
 
/******************************************/
.difclr0 {
    background-color: pink;
}
.difclr0:hover { background-color: lightpink;}

.difclr1 {
      background-color:#E360C4;
       }
.difclr1:hover { background-color:#EA88D3;}

.difclr2 {
      background-color:#016098;
       }
.difclr2:hover { background-color:#4088B2;}

.difclr3 {
      background-color:rgb(235,100,80); 
       }
.difclr3:hover { background-color:rgb(255,120,100);}

.difclr4 {
      background-color:#d550ff;
       }
.difclr4:hover {background-color:#E07CFF;}

.difclr5 {
      background-color:rgb(0, 90, 0);
       }
.difclr5:hover { background-color:rgb(50,140,50);}

.difclr6 {
      background-color:#009fc6;
       }
.difclr6:hover { background-color: #40B7D4;}

.difclr7 {
      background-color:rgb(255, 0, 102);
       }
.difclr7:hover { background-color:rgb(255, 50, 152);}

.difclr8 {
      background-color:#ef9801;
       }
.difclr8:hover { background-color: #F3B240;}

.difclr9 {
      background-color:#851abe;
       }
.difclr9:hover { background-color:#A453CE;}

.difclr10 {
      background-color:rgb(255, 102, 204);
       }
.difclr10:hover { background-color:rgb(255, 152, 254);}
/*
.difclr11 {    
        background-color:#31edec;
 	     }
.difclr11:hover { background-color:#64F2F1;}
*/
.difclr11 {
        background-color:#20acab;
 	     }
.difclr11:hover { background-color:#22bcac;}

.difclr12 {
      background-color:#0293b0;
       }
.difclr12:hover {background-color:#41AEC4;}

.difclr13 {
      background-color:rgb(215,130,180);
       }
.difclr13:hover { background-color:rgb(235,150,200);}

.difclr14 {
      background-color:#774f98;
       }
.difclr14:hover { background-color: #997BB2;}

.difclr15 {
      background-color:#109d58;
       }
.difclr15:hover { background-color: #4CB682;}

.difclr16 {
      background-color:#b93121;
       }
.difclr16:hover { background-color:#CA6458;}

/*.difclr17 {
      background-color:#de8815;
       }
.difclr17:hover { background-color: #E6A650;}*/

.difclr17 {
      background-color:rgb(255,0,0);
       }
.difclr17:hover { background-color: rgb(255,80,80);}

.difclr18 {
      background-color:#0d7e46;
       }
.difclr18:hover { background-color:#4A9E74;}

.difclr19 {
      background-color:#016098;
       }
.difclr19:hover { background-color:#4088B2;}

/*.difclr3 {
      background-color:#ffbf3b;
       }
.difclr3:hover { background-color:#FFCF6C;}*/

.difclr20 {
      background-color:#fe6567;
       }
.difclr20:hover { background-color: #FE8C8D;}

.difclr21 {
      background-color:#ba7eb1;
       }
.difclr21:hover { background-color: #CB9EC4;}

.difclr22 {
      background-color:rgb(108, 36, 76);
       }
.difclr22:hover { background-color:  rgb(158, 86, 126);}

.difclr23 {
      background-color:rgb(240, 112, 43);
       }
.difclr23:hover { background-color:rgb(255, 127, 58);}

.difclr24 {
      background-color:rgb(86, 198, 169);
       }
.difclr24:hover { background-color:rgb(136, 248, 219);}

.difclr25 {
      background-color:rgb(205, 33, 42);  
       }
.difclr25:hover { background-color:rgb(255, 83, 92);}

.difclr26 {
      background-color:rgb(225,170,225);  
       }
.difclr26:hover { background-color:rgb(255,200,255);}

.difclr27 {
      background-color:rgb(0, 107, 84);
       }
.difclr27:hover { background-color:rgb(50, 157, 134);}

.difclr28 {
      background-color:rgb(52, 86, 139);
       }
.difclr28:hover { background-color:rgb(102, 136, 189);}

/*.difclr29 {
      background-color:rgb(232, 167, 152);
       }
.difclr29:hover { background-color:rgb(255, 190, 175);}*/

.difclr29 {
      background-color:rgb(150,50,50);
       }
.difclr29:hover { background-color:rgb(170,70,70);}

.difclr32 {
      background-color:rgb(111, 180, 117);
       }
.difclr32:hover { background-color:rgb(141, 210, 147);}

.difclr31 {
      background-color:#0084bd;
       }
.difclr31:hover { background-color:#40A3CE;}

.difclr30 {
      background-color:rgb(235, 0, 141); 
      }
.difclr30:hover { background-color:rgb(255,0,161);}


.difclr33 {
      background-color:rgb(241,237,237); /*rgb(211,207,207);*/
       }
.difclr33:hover { background-color:white; /*rgb(241,237,237);*/ }

.difclr34 {
      background-color:rgb(150,150,150); /*#fae6ff;*/ 
      }
.difclr34:hover { background-color:rgb(160,160,160); /*rgb(220, 200, 225);*/}

.difclr35 {
      background-color:rgb(150,70,150);    
       }
.difclr35:hover { background-color:rgb(155,80,155);}

.difclr36 {
      background-color:rgb(200,175,190); /*rgb(188,162,147);*/      
      box-shadow:0px 0px 5px 0px gray;
         }
.difclr36:hover { background-color:rgb(210,185,200); /*rgb(195,169,154);*/}

.difclr40 {
      background-color:red; /*#fae6ff;*/ 
      }
.difclr40:hover { background-color:rgb(255, 20, 20); /*rgb(220, 200, 225);*/}


/******************************************/

.clrfnt0 { 
        color:pink;}
.clrfnt0:hover {color:lightpink;}

.clrfnt1 {
      color:#E360C4;
       }
.clrfnt1:hover { color:#EA88D3;}

.clrfnt2 {
      color:#016098;
       }
.clrfnt2:hover { color:#4088B2;}

.clrfnt3 {
      color:rgb(235,100,80); 
       }
.clrfnt3:hover { color:rgb(255,120,100);}

.clrfnt4 {
      color:#d550ff;
       }
.clrfnt4:hover {color:#E07CFF;}

.clrfnt5 {
      color:rgb(0, 90, 0);
       }
.clrfnt5:hover { color:rgb(50,140,50);}

.clrfnt6 {
      color:#009fc6;
       }
.clrfnt6:hover { color: #40B7D4;}

.clrfnt7 {
      color:rgb(255, 0, 102);
       }
.clrfnt7:hover { color:rgb(255, 50, 152);}

.clrfnt8 {
      color:#ef9801;
       }
.clrfnt8:hover { color: #F3B240;}

.clrfnt9 {
      color:#851abe;
       }
.clrfnt9:hover { color:#A453CE;}

.clrfnt10 {
      color:rgb(255, 102, 204);
       }
.clrfnt10:hover { color:rgb(255, 152, 254);}
/*
.clrfnt11 {
        color:#31edec;
 	     }
.clrfnt11:hover { color:#64F2F1;}
*/
.clrfnt11 {
        color:#20acab;
 	     }
.clrfnt11:hover { color:#22bcac;}

.clrfnt12 {
      color:#0293b0;
       }
.clrfnt12:hover {color:#41AEC4;}

.clrfnt13 {
      color:rgb(215,130,180);
       }
.clrfnt13:hover { color:rgb(235,150,200);}

.clrfnt14 {
      color:#774f98;
       }
.clrfnt14:hover { color: #997BB2;}

.clrfnt15 {
      color:#109d58;
       }
.clrfnt15:hover { color: #4CB682;}

.clrfnt16 {
      color:#b93121;
       }
.clrfnt16:hover { color:#CA6458;}

/*.clrfnt17 {
      color:#de8815;
       }
.clrfnt17:hover { color: #E6A650;}*/

.clrfnt17 {
      color:rgb(255,0,0);
       }
.clrfnt17:hover { color: rgb(255,80,80);}

.clrfnt18 {
      color:#0d7e46;
       }
.clrfnt18:hover { color:#4A9E74;}

.clrfnt19 {
      color:#016098;
       }
.clrfnt19:hover { color:#4088B2;}

.clrfnt20 {
      color:#fe6567;
       }
.clrfnt20:hover { color: #FE8C8D;}

.clrfnt21 {
      color:#ba7eb1;
       }
.clrfnt21:hover { color: #CB9EC4;}

.clrfnt22 {
      color:rgb(108, 36, 76);
       }
.clrfnt22:hover { color:  rgb(158, 86, 126);}

.clrfnt23 {
      color:rgb(240, 112, 43);
       }
.clrfnt23:hover { color:rgb(255, 127, 58);}

.clrfnt24 {
      color:rgb(86, 198, 169);
       }
.clrfnt24:hover { color:rgb(136, 248, 219);}

.clrfnt25 {
      color:rgb(205, 33, 42);  
       }
.clrfnt25:hover { color:rgb(255, 83, 92);}

.clrfnt26 {
      color:rgb(225,170,225);  
       }
.clrfnt26:hover { color:rgb(255,200,255);}

.clrfnt27 {
      color:rgb(0, 107, 84);
       }
.clrfnt27:hover { color:rgb(50, 157, 134);}

.clrfnt28 {
      color:rgb(52, 86, 139);
       }
.clrfnt28:hover { color:rgb(102, 136, 189);}

/*.clrfnt29 {
      color:rgb(232, 167, 152);
       }
.clrfnt29:hover { color:rgb(255, 190, 175);}*/

.clrfnt29 {
      color:rgb(150,50,50);
       }
.clrfnt29:hover { color:rgb(170,70,70);}

.clrfnt32 {
      color:rgb(111, 180, 117);
       }
.clrfnt32:hover { color:rgb(141, 210, 147);}

.clrfnt31 {
      color:#0084bd;
       }
.clrfnt31:hover { color:#40A3CE;}

.clrfnt30 {
      color:rgb(235, 0, 141); 
      }
.clrfnt30:hover { color:rgb(255,0,161);}

/*
.card{
    position:relative;
    background-color:white;
     width:10rem;
     height: 15rem;
     box-shadow:0px 0px 5px 1px silver;
     display:inline-block;
     border-radius:5px 5px;
     margin:0.5rem;
     padding:3px;
     cursor:pointer;
     line-height:1rem;
     overflow:hidden;
  }

.cardak{
     background-color:white;
     display:inline-block;
     margin:2px;  padding:2px;
     cursor:pointer;
     box-shadow:2px 2px 4px 0px black;
}

img{
    margin-top:0.5rem;
        width: 90%;
        overflow:hidden;
    margin-bottom:3px;
}

#nmbox{ 
  background-color:#774f98;
    position:relative;
    z-index:0;
    width:100%;
    height:100%;
    
    left:2px;  right:2px;
          margin-top:1rem;
      overflow-y:show;
 }
 
.fixpnl{
  background-color:#774f98;
  position:absolute;
  z-index:1;
  display:block;
  color:black;
  padding:1px;
  font-size:1rem;
  font-weight:bold;
  cursor:pointer;
  text-shadow: 1px 1px 2px silver;
  width:100%;
  height:100%;
  left:2px;  right:2px; 
  overflow-y: auto; 
}

.pnll{
    font-family:comic sans ms;
    left:2px;  
}

.pnlr{
    font-family: "bhoma";
    right:2px;  
}

.tdmenu {
    display: inline-block;
    margin:2px;  padding:2px; 
    width:auto;  height:auto;
    }

.mf{
    font-family:bhoma;
    direction:rtl;
    }

.me{
    font-family:comic sans ms;
    direction:ltr;
    }

.inln{
    display:inline-block;
}

li{
    display:block;
}

.en{
    background-color:red;
    display:inline-block;
    font-family:comic sans ms;
    direction:ltr;
    text-align:left;
    float:left;  left:1rem;
    }

.fa{
    background-color:green;
    display:inline-block;
    font-family:bhoma;
    direction:rtl;
    text-align:right;
    float:right;  right:1rem;
    }

*/