@font-face {
    font-family: IRANSansXV;
    src: url(../font/IRANSansXV.woff);
  }

  * {
    font-family: IRANSansXV;
    box-sizing: border-box;
  }

  /* color style */
  :root {
    --body-color: #151521;
    --blue-por: #212e48;
    --normal-text-color: #f8ffff;
    --p-text-color: #6d6d80;
    --blue-color: #009ef7;
    --green-color: #50cd89;
    --red-color: #f1416c;
    --gray-400-color: #78829d;
    --sec-color: #1e1e2d;
    --gray-300-color:#2b2b40;
    --card-padding:1.8rem;
    --yellow-color: rgb(218, 218, 31);

   

    --background-color: 0 2rem 3rem var(--green-color);
    /* padding 1.2rem */
  }
  body {
    background-color: var(--body-color);
    margin: 0 auto;
    padding: 0;
   }


  /* first section */
  /* section style */
  .report {
    display: flex;
    margin: 0 auto;
    max-width: 1289px;
    min-width: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    
  }
  .metting-part {
   margin: 0 auto;
   margin-top: 50px;
  max-width: 1220px;
  height:360%;
  direction: rtl;
  padding: 60px 0px 54px 0px;
  border-radius: 9px;
  background-color: var(--sec-color);
  position: relative;
  z-index: -100;
  }

  .input-meet {
    position: relative;
    border-bottom: 1px solid var(--gray-300-color);
  }

 .input-meet h2 {
    font-size: 17px;
    color: var(--normal-text-color);
    font-weight: 900;
    position: absolute;
    bottom: 8px;
    right: 19px;
 }

 /* left item */

 .leftitem-meet{
    float: left; 
 }

 /* Select option */
 .leftitem-meet select {
    font-size: 15px;
    background-color: var(--gray-300-color);
    color: var(--gray-400-color);
    border: none;
    padding: 4px 30px;
    border-radius: 10px;
    appearance: 2em;
    outline: none;
    margin-left: 50px;
    position: absolute;
    bottom: 18px;
    left: 90px;
 }
 
/* button of leftitem */
 .leftitem-meet button {
   width: 100px;
   height: 35px;
   padding: 5px 13px;
   border: none;
   outline: none;
   background-color: var(--blue-color);
   border-radius: 10px;
   margin-left: 10px;
   position: absolute;
   left: 10px;
   bottom: 15px;
 }

 .leftitem-meet button span{
    font-size: 13px;
    color: var(--normal-text-color);   
 }

/* step 2 */
table {
   border-collapse: collapse;
}

 .recent-order .detaies table tr{
   border-bottom: 1px solid var(--gray-300-color);
 
 }
  
.recent-order table {
   width: 100%;
   border-radius: 2rem;
   padding: 1rem;
   text-align: center;
   margin-top: 20px;
}

.recent-order table th{
   color: var(--normal-text-color);
   padding-bottom: 10px;
   
}

.recent-order table tbody tr td{
   color: var(--p-text-color);
   padding-bottom: 20px;
   padding-top: 12px;

}



.recent-order table .succes {
   color: var(--green-color);
  background-color: var(--box-shadow);

}

.recent-order table .warring{
   color: var(--red-color);
}

.recent-order table .hoshdar{
   color: var(--yellow-color);
} 

/* meeting part end */

/* report part start */
.report-part{
   margin: 0 auto;
  max-width: 1220px;
  height:640%;
  direction: rtl;
  padding: 60px 0px 54px 0px;
  border-radius: 9px;
  background-color: var(--sec-color);
  position: relative;
  margin-top: 30px;
  margin-bottom: 15px;
  z-index: -100;
}

.report-content h2{
   font-size: 20px;
   color: var(--normal-text-color);
   font-weight: 800;
   padding-right: 14px;
   top: 7px;
   right: 19px;
}

.all-content table {
      width: 100%;
      border-radius: 2rem;
      padding: 1rem;
      text-align: center;
      margin-top: 20px;
   }
 

.all-content table tbody td {
  color: var(--p-text-color);
  padding-bottom: 25px;
  padding-top: 15px;
}


.all-content table tbody tr{
   border-color: var(--gray-300-color); 
   border-width: 1px;
   border-bottom-style:  dashed;
   
}

.all-content table .succes{
 display: flex;
 color: var(--green-color);
 margin-top: 12px;
 margin-right: 28px;
 width: 30px;
 height: 15px;
 border-radius: 10px;
 padding: 10px 7px;
}

.all-content table .hoshdar{
   display: flex;
 margin-right: 20px;
 width: 30px;
 height: 1px;
   color: var(--yellow-color);
}

.all-content table .warring {
   display: flex;
   margin-top: 10px;
   margin-right: 28px;
   width: 30px;
   height: 15px;
   border-radius: 10px;
   padding: 10px 7px;
   color: var(--red-color);
   
}

.left-content {
   float: left;
   position: relative;
   bottom: 40px;
   left: 15px;
}

.left-content button{
   background-color: var(--blue-por);
   border: none;
   outline: none;
   border-radius: 10px;
   padding: 0px 24px;
   color: var(--blue-color);
}

.left-content button:hover{
 color: var(--normal-text-color);
 background-color: #009ef7;
 transition-duration: 1s ;
 
}

.left-content button p{
   margin-right: 19px;
}

.left-content i{
   color: var(--normal-text-color);
   position: relative;
   right: 40px;
   top: 2px;
}

/* API KEY START */