* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
  }
   @font-face {
    font-family: hesab;
    /* src: url(../fonts/hesab.ttf); */
    src: url(/fonts/hesab.ttf);
   
  } 

  html{box-sizing:border-box}
  /* *:before,*:after{box-sizing:inherit} */
/*
   @font-face {
    font-family: 'hesab';
    src: url('/font/hesab.eot');  
    src: url('/font/hesab.eot?#iefix') format('embedded-opentype'), 
   url('/hesab.woff2') format('woff2'), 
     url('/font/hesab.woff') format('woff'), 
     url('/font/hesab.ttf') format('truetype'),
     url('/font/hesab.svg#svgFontName') format('svg'); 
   } */

 
body{

     /* height: 600px; */
    /* padding: 10px;
    margin: 10px; */ 
    /* font-size: 2vw;  */
   
    
}
/* .center {
    display: flex;
    justify-content: center;
    align-items: center;
   
    /* border: 3px solid green; */
  /* }  */
header{
    /* margin: 10px; */
    /* border: 2px dashed black; */
    
    /* background-image: url("/img/Logo.png"); 

    background-repeat: no-repeat; 
    background-size: 40px;

    background-position: right;
    background-color: rgb(248, 245, 245);
    /* height: 15%;  
color: blue;
text-transform: 20px;


  height: 5vh;
  
  } 
  header div{
    text-align: center  ;
   /* margin: 10px; */
   /* font-size: x-large; */
   /* font-size: 3vh; */
   /* align-items: center;
   height: 10vh;  */
  }
  
  
  main{
    /* background-image: url("/img/background.jpg"); 
    background-repeat: no-repeat;  */
     /* background-size: 80%;  */
    /* background-color: rgb(192, 248, 211); */
  /* height:45vw; */
  /* height:90vh; */
  /* width: 100%;
  height:100%;
    box-sizing: border-box; */
    /* font-size: 2vw;  */
    /* position: relative;
    display: flexbox; */
    /* display: flex;
   position: relative; */
    /* height: 100vh; */
    /* height: 100%; */
    /* align-items: stretch; 
    justify-content: center; */
    /* align-items: center;
  
   
   /* flex-direction: column; */
  }

  .btnTools{

    /* position: absolute; */
    /* position: absolute; */
    /* top:0; */
    /* bottom:calc( 0-10%); */
    /* height: 10%; */
    /* padding: 5vw; */
    /* margin: 10px; */
    /* left: 0; */
   
    /* font-size:30px; */
  }
  footer{
    /* background-color: rgb(250, 146, 146); */
    /* height:15%; 
    background-color: rgb(248, 245, 245);
    text-align: center;
    align-items: center;
    font-size: 2vh;
    /* height: 5vh; */
  }

.fontsmall{
  /* font-size: 3vh; */

}
  
  .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
  }
  .soal{
   /* width: 100%; */
    /* height: 90vh; */
   
    /* height: 100%; */
      /* text-align: center; */
      /* width: fit-content;      */
       /* font-size: calc((75vw - 4.5rem) / 6); */
       /* font-size: 11vw; */
       /* font-stretch: expanded; */
     /* display: flex;
     justify-content: center;
     align-items: center; */
 /* flex-wrap: wrap; */
  /* justify-content: space-between; */
      /* width: calc(100% *   -30px); */
      /* box-sizing: border-box; */
     
      /* font-family:'hesab'; */
    /* word-wrap: calc(); */
    /* border: 2px dotted; */
    /* display: block; */

    /* background-color:chartreuse;  */

   
    
  }
 
  #radioAr{
    font-family:'hesab';

  }
  .ar{
    font-family:'hesab';

  }
  .ar1{
    font-family:'hesab';

  }

/*
  #keybord{
 
    /* padding: 5px;
    margin: 5px; */
    /* width:100% ; */
    /* text-align: center; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* font-size: 2vh;  */
  /* position: absolute;
  bottom:0; */

  /* }*/ 
  
/*
.keybord1 {
  /* display: flex; */
  /* position: relative; */



/* }   /* */
  /* .soal1{
    background-color:brown;
   background-color:bgPrimary; 

  } 

  .soalEN{
 
    text-align: center  ;
    /* height: 200px; */
   /* font-size: 80px;
    font-family:'Arial';
  
 
}
*/
  /* #language-t{

    text-align: center  ;
    border: 2px;
    background-color:#0d6efd;
    width:30px ;
    height: 30px;
  } */

  #tools{
    /* font-size: 2vh; */
/* width: 100%;
   background-color: white; */
      /* direction: rtl; */

      /* position: absolute;
      top: 0; */
     
      /* color: rgb(166, 42, 238); */

      
  }
  .center{
    text-align: center;
  }
/*
  .close{

    position: absolute;
    top: 20px;
    right: 15px;

  } */
  
  /* .star{
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--hexOffset) * -1);
    width: var(--hexOverCol);
    height: 0;
    padding-top: calc(100%*(var(--hexHeight)/var(--colWidth)));
    content: '';
    background-color: #698F3F;
    z-index: -10;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  } */


  /* label{
     direction: rtl; 

  } */
.dir-ar{
  direction: rtl;
}
.dir-en{
  direction: ltr;
}



  /* <div onclick="colorText(1)" class="col p-1 bg-primary text-white">1</div>
    <div onclick="colorText(2)" class="col p-1 bg-success text-white">2</div>
    <div onclick="colorText(3)" class="col p-1 bg-info text-white">3</div>
    <div onclick="colorText(4)" class="col p-1 bg-warning text-white">4</div>
    <div onclick="colorText(5)" class="col p-1 bg-danger text-white">5</div>
    <div onclick="colorText(6)" class="col p-1 bg-secondary text-white">6</div>
    <div onclick="colorText(7)" class="col p-1 bg-dark text-white">7</div>
    <div onclick="colorText(8)" class="col p-1 bg-light text-dark">8</div> */

  #mycheck{

margin-left: 10px;

  }
  .fontzoom{
    font-size:3vw;

  }

  /* #tool{
    font-size:30px;

  } */
  svg{

    height: 40px;
    width: 40px;
  }

  /* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 380px) { 
  .keynumber{
display:none;
}
#keybord{

font-size: small;  
}
#keybord1{
  gap: 5px;
}
}

#boxmain{
/* height:90vh ; */
min-height: 90vh;
width: 100vw;
}
#n{

font-size:14vw;
}
#newNumbet{
  width:50px ;
}