html{
    margin:0;
    padding:0;
}


#heading{
  text-align: center;
  font-size:30px;
  font-family: 'Fredericka the Great', serif;
}

 @media screen and (max-width:640px) {
     
        #heading{
            font-size: 20px;
            color:red;
        }
 }

#inputfl1{
  background-color: lightskyblue;
  padding: 5px;
  font-family:Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic, serif;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-radius: 3px;
}

 @media screen and (max-width:640px) {
     
       #inputfl1{
  background-color: lightskyblue;
  padding: 3px;
  font-family:Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 6px;
  border-radius: 3px;
}
 }
#dropdown{
  margin-right: 15px;
  width: 100px;
  height: 35px;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 24px;
  font-weight: 400;
 
}

 @media screen and (max-width:640px) {
     
      #dropdown{
  margin-right: 15px;
  width: 85px;
  height: 25px;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 16px;
  font-weight: 400;
 
}
}
#inputFl{
    margin:0;
  padding: 5px;
  background-color: rgb(71, 93, 153);
  margin-bottom: 5px;

}
#fakalima, #aynkalima, #lamkalima, #lam2kalima{
  margin-left: 2px;
  margin-right: 2px;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 22px;
  height: 32px;
  width: 45px;
  
}

 @media screen and (max-width:640px) {
     
     #fakalima, #aynkalima, #lamkalima, #lam2kalima{
  margin-left: 2px;
  margin-right: 2px;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 16px;
  height: 25px;
  width: 35px;
  
}
}
#makebtn{
  width: 100px;
  background-color: rgb(201, 10, 105);
  color: whitesmoke;
  font-family:Helvetica, sans-serif, Arial ;
  padding: 5px;
  font-weight: bold;
  border: none;
  border-radius: 2px;
  margin-top: 5px;
}

#makebtn:hover {
  cursor: pointer;
  background-color: rgb(67, 67, 194);
}

#result{
  background-color: rgb(180, 183, 185);
  padding: 3px;
  color:rgb(241, 19, 56);
}

/* #damir */
th{
  border: 1px solid rgb(243, 241, 241);
  background-color: rgb(107, 35, 139);
  color: whitesmoke;
}
tr{
  border: 2px solid rgb(107, 35, 139);
}

table {
  font-family: lateef;
  border-collapse: collapse;
  width: 80%;
  text-align: center;

}

#tablediv{
  display: flex;
  justify-content: center;
}

td{
  text-align: center;
  vertical-align: middle;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 27px;}
  
   @media screen and (max-width:640px) {
     
    td{
  text-align: center;
  vertical-align: middle;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 17px;}
}

tr:nth-child(even) {
  background-color: #dddddd;
}
th{
    text-align: center;
  vertical-align: middle;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 25px;
}

 @media screen and (max-width:640px) {
     
  th{
    text-align: center;
  vertical-align: middle;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 16px;
}
}
.bold-1{
  font-family: NotoNaskhArabic;
  font-size: 25px;
  background-color: blueviolet;
  writing-mode: vertical-rl;
 color: aliceblue;
}

 @media screen and (max-width:640px) {
     
 .bold-1{
  display:none;
}

.jins{
    display:none;
}

.adad{
    display:none;
}
}
.namrow{
  font-size:30px ;
  color:whitesmoke;
  background-color: rgb(191, 153, 226);
}

 @media screen and (max-width:640px) {
     
 .namrow{
  font-size:16px ;
  color:whitesmoke;
  background-color: rgb(191, 153, 226);
}
}

#inputFl{
  display: flex;
 
}
#inputfl1{
  display: flex;
}
#main-fial{
  text-align: center;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 3rem;

  color: rgb(201, 10, 105);
}

@media screen and (max-width:640px) {
     
#main-fial{
  text-align: center;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 1.7rem;

  color: rgb(201, 10, 105);
}
}

.uper-div{
  margin: auto;
  width: 80%;
  display: flex;
  justify-content: space-between;
}

#lowdiv{
  margin-left: 0px;
}
/* #lowdiv2{
  margin-right: 150px;
} */
.ism-file{
  direction: rtl;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 26px;
  background-color: rgb(198, 206, 226);
  margin: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
}

 @media screen and (max-width:640px) {
     
 .ism-file{
  direction: rtl;
  font-family: Lateef,NotoNaskhArabic-Medium,NotoNaskhArabic;
  font-size: 17px;
  background-color: rgb(198, 206, 226);
  margin: 1px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
}
}

.firstsect1{
  margin: auto;
  width: 80%;
  display: flex;
  justify-content: space-between;

}

.resultdiv{
  width: 25%;
  
  display: flex;
  justify-content: flex-end;
}


#firstsect{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

   @media screen and (max-width:640px) {
     
     #result{
          font-size: 12px;
        }
   }

#futter-div{
   width:80%;
   background-color: blueviolet;
   text-align:center;
   margin:auto;
   color:white;
 
}

h6{
    color:white;
    padding:3px;
}