h2 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
		
 p{
     line-height:2.5;
 }
 table{
 font-family:dibaj;
 }
 .refrenceclass{
     text-align:left;
     direction:ltr;
 }
    #back0 {
        width: 374px;
        height: 374px;
        background-image: url("circle0.png");

    }
    #back1 {
        width: 374px;
        height: 374px;
        background-image: url("circle1.png");

    }
#px500back1{
     width: 500px;
    height: 49px;;
    background-image: url("bar1.png");
}
#px500back0{
     width: 500px;
    height: 49px;;
    background-image: url("bar0.png");
}
    #front {
        z-index: 2;
        width: 374px;
        height: 374px;
        position: absolute;
        top: 0;
        left: 0;
    }
     #front2 {
        z-index: 2;
        width: 374px;
        height: 174px;
        position: absolute;
        top: 200px;
        left: 0;
    }
      #front500 {
        z-index: 2;
        width: 60px;
        height: 49px;
        position: absolute;
        top: 0px;
        
    }
    .px500div{
    width: 500px;
    height: 49px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;  
    }
    .centersquarediv{
        width: 374px;
    height: 374px;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
    }
    
    
    .centerdiv{

    padding-bottom:10px;
    margin: auto;
        margin-bottom:15px;

    }
    
.table_big {
  text-align:center;
    width:100%;
font-family:dibaj;
direction:rtl;
}


.table_big th{
    border-radius: 10px;
    background: #fff;
    color: black;
    line-height:35px;
    padding:15px;
  }
  
  
.table_bg {
  width:95%;
  font-size:15px;  
  color:#fff;
  text-align:center;
}

.table_bg td{
    border-radius: 3px;
    
    background: #fff;    
    padding:10px;
    color: #000;
  }  
  
  
.spand{
background: #AAE3C0;color:black;
}
.spani{
background: #EEBABD;color:black;
}
.spans{
background: #A7DEEF;color:black;
}
.spanc{
background: #FBEEB3;color:black;
}

.spanwhite{
color:white;background: #fff;
}


:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

div.greenbackg {
        page: greenbackg;
    }


  @page greenbackg {
    background-color: #AEDAA6;
  margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
    }

div.normal {
        page: normalpge;
        font-family:dibaj;

    }
    
   @page normalpge {
    background-color: #fff;
      
     odd-header-name: myHTMLHeader;
     even-header-name: myHTMLHeader;
     odd-footer-name: myhtmlpagefooter;
     even-footer-name: myhtmlpagefooter;
    }   



div.fullpge {
        page: fullpge;
    }
    
   @page fullpge {
    background-color: #fff;
      vertical-align:center;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
    }   
    
    

div.greybg {
        page: greybg;
    }
    
   @page greybg  {
    background-color: #F2F2F2;
      
     odd-header-name: myHTMLHeader;
     even-header-name: myHTMLHeader;
     odd-footer-name: myhtmlpagefooter;
     even-footer-name: myhtmlpagefooter;
    }   


.fullwhitebgwithshadow{
    background-color: #fff;
width:100%;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
font-family:dibaj;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:30px;
    padding-right:30px;
text-align:justify;
direction:rtl;

}


.whitebgwithshadow{
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
font-family:dibaj;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:30px;
    padding-right:30px;
text-align:justify;
direction:rtl;

}
.whitebgwithshadowredborder{
    background-color: #fff;
border: 2px solid #f70000;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
font-family:dibaj;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:30px;
    padding-right:30px;
text-align:justify;
direction:rtl;
margin-bottom: 10px;
}
.whitebgwithshadowredborderblue{
    background-color: #fff;
border: 2px solid #1D5A78;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
font-family:dibaj;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:30px;
    padding-right:30px;
text-align:justify;
direction:rtl;
}

.whitebackheadblue{
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:10px;
    font-weight:bold;
    text-align:center;
    border-bottom: 2px solid #efefef;
    font-size:20px;
font-family:dibaj;
    color: #1D5A78;
    line-height: 18px;
 }

 .whiteback{
    background-color: #fff;
    border-radius: 10px;
    padding-bottom:10px;
    margin-bottom:10px;
    line-height: 28px;
font-family:dibaj;
 }.whitebackhead{
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:10px;
    font-weight:bold;
    text-align:center;
    border-bottom: 2px solid #efefef;
    font-size:20px;
font-family:dibaj;
    color: #923449;
    line-height: 18px;
 }


.orangeback{
    border: 1px solid #EE7869;
    background-color: #FFF9F6;
    border-radius: 10px;
    padding-bottom:10px;
    margin-bottom:10px;
    line-height: 28px;

 }
 .insidepadding{
     padding-right:10px;    
     padding-left:10px;
 }
.orangebackhead{
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:10px;
    font-weight:bold;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    background-color: #EE7869;
    font-size:20px;
    color:white;
    line-height: 18px;
 }
 .milkyback{
    border: 1px solid #214341;
    background-color: #FFFEF2;
    border-radius: 10px;
    padding-bottom:10px;
    margin-bottom:10px;
    line-height: 28px;

 }.milkybackhead{
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:10px;
    font-weight:bold;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    background-color: #214341;
    font-size:20px;
    color:white;
    line-height: 18px;
 }
 
  .grayback{
    border: 1px solid #7e7390;
    background-color: #f7f5fa;
    border-radius: 10px;
    padding-bottom:10px;
    margin-bottom:10px;
    line-height: 28px;

 }.graybackhead{
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:10px;
    font-weight:bold;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    background-color: #7e7390;
    font-size:20px;
    color:white;
    line-height: 18px;
 }
 
 
   .goldback{
    border: 1px solid #f0a541;
    background-color: #f8f7f2;
    border-radius: 10px;
    padding-bottom:10px;
    margin-bottom:10px;
    line-height: 28px;

 }.goldbackhead{
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:10px;
    font-weight:bold;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    background-color: #f0a541;
    font-size:20px;
    color:white;
    line-height: 18px;
 }

blockquote{
  font-size: 1em;
  width:85%;
  margin:30px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-right:8px solid #78C0A8 ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
    text-align: end;

}
.boxborder{
    border: 1px solid #dddfe2;
    margin: 5px 5px 5px 5px;
    background-color: #fff;
    border-radius: 10px;
      padding-left:10px;
      padding-right:10px;
      line-height: 18px;

 }
 .roundedhr {
  border-bottom: 1px solid #bbb;
  border-radius: 5px;
  width:50%;
  margin:auto;
}

.hrholder{
         padding-top:1px;
}
.bodyprogress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.progress {
    height:15px;
  width: 300px;
  border-radius: 20px;
    background: linear-gradient(to left, #d8d8d8, #d8d8d8);

}
.progressleft{
  width: 300px;
  border-radius: 20px;
    background: linear-gradient(to left, #d8d8d8, #d8d8d8);
  direction: ltr;
    height:15px;

}
.progress-done{
    height:15px;
  background: linear-gradient(to left, #f2709c, #ff7492);
  box-shadow: 0 3px 3px -5px #f2709c, 0 2px 5px #f2709c;
  border-radius: 20px;
      line-height: 14px;

  opacity: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  transition: 1s ease 0.3s;
}
.progress-done.efactor{

  background: linear-gradient(to left, #4298B4, #4298B4);
  box-shadow: 0 3px 3px -5px #4298B4, 0 2px 5px #4298B4;

}
.progress-done.sfactor{

  background: linear-gradient(to left, #F25E62, #F25E62);
  box-shadow: 0 3px 3px -5px #F25E62, 0 2px 5px #F25E62;

}

.progress-done.tfactor{

  background: linear-gradient(to left, #88619A, #88619A);
  box-shadow: 0 3px 3px -5px #88619A, 0 2px 5px #88619A;

}
.progress-done.jfactor{

  background: linear-gradient(to left, #33A474, #33A474);
  box-shadow: 0 3px 3px -5px #33A474, 0 2px 5px #33A474;

}








.qansheader {
  background-color: #327a81;
  color: white;
  font-family:dibaj;
  font-size: 1.5em;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
}


.qanstable-users {
  border: 1px solid #327a81;
  font-family:dibaj;
  max-width: calc(100% - 1em);
  margin: 1em auto;
  overflow: hidden;
  width: 800px;
}

.qanstable-users table {
  width: 100%;
}
.qanstable-users table td, .qanstable-users table th {
  color: #2b686e;
  padding: 10px;
}
.qanstable-users table td {
  text-align: center;
  vertical-align: middle;
}
.qanstable-users table td:last-child {
  font-size: 0.95em;
  line-height: 1.4;
  text-align: left;
}
.qanstable-users table th {
  background-color: #daeff1;
  font-weight: 300;
}
.qanstable-users table tr:nth-child(2n) {
  background-color: white;
}
.qanstable-users table tr:nth-child(2n+1) {
  background-color: #edf7f8;
}



#firstof{
font-size:17px;padding:10px;background-color:#F7F8F9;border-top:    5px solid  #185FEF;border-bottom: 5px solid #185FEF;

}
#sepratetablecelltd{
    font-size:20px;text-align: center;border: 1px solid #000000;padding:10px;
}
#sepratetablecellp{
    font-size:20px; vertical-align: middle
}
#tableth{
     font-size:20px;font-weight:bold;   
}

#tablecss{
border: 1px solid #000000; vertical-align: bottom; font-family:dibaj; border-collapse: collapse; 
}
#h2class{
    color:#5C0D19;font-weight:bold;font-size:30px;
}
#h3class{
    color:#5C0D19;font-weight:normal;font-size:20px;
}
#outsidehtmldiv{
      direction: rtl;font-family:dibaj;text-align:justify;
}
#headertable{
border-bottom: 1px solid #000000; vertical-align: bottom; font-family:dibaj; font-size: 9pt; 
}
#footertable{

border-top: 1px solid #000000; vertical-align: bottom; font-family:dibaj; font-size: 9pt; 
}
#boldalignleft{
font-size:20px;font-weight: bold;text-align: right;
}
#tableheaderwhitecolor{
  font-size:20px;font-weight:bold;color:white;padding-top:10px;padding-bottom:10px;
}