div.desc{
    float:right;
    text-align: justify;
     border: 1px;
    width: 80%;
    
}
div .headinfo{
    text-align: center;
    width: 100%;

}
p {
    font-family: Nazanin;
    width: 96%;
    text-align: justify;
}
div .headinfo img{
    margin-top: 10px;
    margin-right: 3%;
    width: 120px;
    height: 120px;
    border-radius:15px;
    box-shadow: 3px 3px #ccc;
}
div .headinfo .hdrimg{
    margin-top: 10px;
    float: right;
    width: 24%;
    height: 150px;
}
div .headinfo .mnuimg{
    margin-top: 50px;
    margin-right: 3%;
    border-radius:10px;
    float: right;
    width: 130px;
    height: 140px;
    background-color: #aaf;
    box-shadow : 0 -25px 42px -21px rgba(100,100,100,0.14), 0 25px 42px -21px rgba(100,100,200,0.14);
}
div .num1{
     width: 15%;
    margin-top: 1px;
    float: left;
      border-style: solid;
  border-width: 1px;
    border-radius:50%;
    color:red;
}
div .headinfo img:hover{
    margin-top: 2px;
    box-shadow: 1px 3px #91B3CD;
}
div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div .desc {
    padding: 15px;
    text-align: justify;
    width:80%;
}
.desc canvas{
        padding: 10px;
        margin: 0;
        width: 70%;
        box-shadow: 4px 2px #333;
        border-radius: 20px;
        background-color: #1d4289;
        padding: 2%;
    }
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}
    .headerinfo {
        display:none;
        width:120px;
        height:120px;
        margin:2%;
    }
    .figs .blc .headerinfo .clogo img{
        width:100px;
        height:100px;
    }
    .clogo{
                width:100px;
        height:100px;
    }
    
 .customerheader{
    display: none;
    float: left;
    width: 70%;
    margin-left: 5%;
    margin-top: 5%;
    height: auto;    
    }
.customerside{
    float: right;
    width: 15%;
    margin-top: 5%;
    display: none;
}
.myform{
 margin: 3%;
width: 80%;
box-shadow: 4px 2px #333;
border-radius: 20px;
background-color: #ddf;
padding: 2%;
text-align: center;
}
@media only screen and (max-width: 800px){
    div .headinfo .hdrimg{
    margin-top: 10px;
    margin-right: 3%;
    float: right;
    width: 120px;
    height: 120px;
}
    .docidset{
        width:90%;
        height: auto;
        border-radius:15px;
        margin-right:auto;
        margin-top:40px;
        padding: 3px;
        font-size:14px;  
    }

div .headinfo .mnuimg{
    margin-top: 10px;
    margin-right: 3%;
    float: right;
    width: 130px;
    height: 140px;
    background-color: #aaf;
    box-shadow : 0 -25px 42px -21px rgba(100,100,100,0.14), 0 25px 42px -21px rgba(100,100,200,0.14);
}
.responsive {
        width: 89.99999%;
        margin: 6px 0;
    }   
.group{
        padding: 10px;
        margin: 0;
        text-align: right;
        float:right;
    }
.figs canvas{
        padding: 10px;
        margin: 0;
        width: 95%;
        box-shadow: 4px 2px #333;
        border-radius: 20px;
        background-color: #1d4289;
        padding: 2%;
    }
.desc p canvas{
        padding: 10px;
        margin: 0;
        width: 94%;
        box-shadow: 4px 2px #333;
        border-radius: 20px;
        background-color: #1d4289;
        padding: 2%;
    }
.myform{
    margin: 1%;
    width:98%;
    box-shadow: 4px 2px #333;
    border-radius: 20px;
    background-color: #ddf;
    padding: 2%;
    text-align: center;
}
 #qcharts .know {
padding: 14px;
background-color: #aff;
font-family: sans, serif;
font-size: 16px;
border: 2px solid #ccf;
width: 98%;
margin: 2% 1%;
border-radius: 20px;
box-shadow: 3px 3px #000;
text-align: justify;
}
.cmenu {
    
width: 24%;
float: right;
margin: 2px;
border-radius: 10px;
background-color: #ffc;

padding: 1%;
font-size: 14px;
color: #00f;
font-family: titr;
box-shadow: 2px 1px 1px 2px #000;
}
.blockmenue {
    
width: 80%;
float: right;
margin: 2px;
border-radius: 10px;
background-color: #ffc;

padding: 1%;
font-size: 24px;
color: #00f;
font-family: titr;
box-shadow: 2px 1px 1px 2px #000;
}
 #qcharts input{
    padding: 5px;
    width:50%;
    box-shadow: 3px 4px #000;
    margin-bottom:10px;
    border-radius:10px;
    font-size:24px;
}
.getcode  input[type="radio"]{
   width:20%;    
   }
 .getcode  input{
   width:20%;    
   }
}
@media only screen and (min-width: 1300px){
.responsive {
        width: 79.99999%;
        margin: 6px 0;
    }
    .getcode  input[type="radio"]{
   width:5%;    
   }
.getcode  input{
   width:5%;    
   }
 .docidset{
        width:20%;
        height: auto;
        border-radius:15px;
        margin-right:auto;
        margin-top:40px;
        padding: 3px;
        font-size:14px;  
    }
.group{
    float:right;
    text-align: right;
        padding: 10px;
        margin: 0;
    }
 #qcharts input{
    padding: 5px;
    width:40%;
    box-shadow: 3px 4px #000;
    margin-bottom:10px;
    border-radius:10px;
    font-size:24px;
}
.figs canvas{
        padding: 10px;
        margin: 0;
        width: 65%;
        box-shadow: 4px 2px #333;
        border-radius: 20px;
        background-color: #1d4289;
        padding: 2%;
    }
.desc p canvas{
        padding: 10px;
        margin: 0;
        width: 70%;
        box-shadow: 4px 2px #333;
        border-radius: 20px;
        background-color: #1d4289;
        padding: 2%;
    }
.myform{
    margin: 1%;
    width:70%;
    box-shadow: 4px 2px #333;
    border-radius: 20px;
    background-color: #77f;
    padding: 2%;
    text-align: center;
}
 #qcharts .know {
padding: 14px;
background-color: #aff;
font-family: sans, serif;
font-size: 16px;
border: 2px solid #ccf;
width: 74%;
margin: 2% 1%;
border-radius: 20px;
box-shadow: 3px 3px #000;
text-align: justify;
}
}
@media only screen and (max-width: 700px){
    .responsive {
        width: 100%;
    }
.docidset{
        width:90%;
        height: auto;
        border-radius:15px;
        margin-right:auto;
        margin-top:40px;
        padding: 3px;
        font-size:14px;  
    }
div .headinfo .mnuimg{
    margin-top: 30px;
    margin-right: 3%;
    float: right;
    width: 130px;
    height: 140px;
    background-color: #aaf;
    box-shadow : 0 -25px 42px -21px rgba(100,100,100,0.14), 0 25px 42px -21px rgba(100,100,200,0.14);
}
 #qcharts input{
    padding: 5px;
    box-shadow: 3px 4px #000;
    width:100%;
    margin-bottom:10px;
    border-radius:10px;
    font-size:14px;
}

.getcode  input[type="radio"]{
   width:30%;    
   }
.getcode  input{
   width:30%;    
   }   
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

 #main{
     text-align: center;
    border:1px;
    width: 100%;
    background-color:#1d4289f;
}
 #main input{
    width: 50%;
}
#demo {
    font-family:Yekan,sans, serif; 
    font-size:16px;
    border: 3px solid #ccc;
    background-color: #91B3CD;
    text-align: justify;
    padding: 20px;
    margin:1%; 
    border-radius: 15px;
    width:100%;
    height:15%;
}
#graph{
    float:left;
    width:55%;
    height:60%;
     margin:2px;
}

#selections{
    background-color: #ddddff;
            font-family:Yekan,sans, serif; 
        font-size:14px; 
    text-align: justify;
    float:left;
    width:17%;
    margin:2%;
   }
#selections headeer{
    background-color: #ddddff;
    color: #000;
    border-radius: 5px;
    padding: 7px;
        font-family:Yekan,sans, serif; 
        font-size:14px; 
    
}
   #chartContainer{
       padding: 20px;
       float:right;
       width:300px;
    height:280px;
   }
   
 #Qlist{
        background-color: #ddddff;
        font-family:Yekan,sans, serif; 
        font-size:20px; 
        float:right;
        width:25%;
        padding: 10px;
        text-align: right;
   }
   .inform{
       margin:auto;
       width:auto;
       text-align:center;
       font-family: Nazanin;
       font-size: 22px;
             box-shadow : 0 -25px 42px -21px rgba(100,100,100,0.14), 0 25px 42px -21px rgba(100,100,200,0.14);
      border: 1px solid;
      padding: 22px;
border-radius: 10px;
   }
   .inform img{
        margin:auto;
        width:150px;
        height:150px;
        box-shadow : 0 -25px 42px -21px rgba(100,100,100,0.14), 0 25px 42px -21px rgba(100,100,200,0.14);
        border: 1px solid;
        border-radius: 10px;
   }
   .inform p{
       text-align:center;
        padding: 22px;
   }
   .inform item{
       text-align:center;
        padding: 3px;
        margin: auto;
        display: block;
        margin-top: 20px;
        width: 150px;
   }
.getcode{
        text-align: center;
        padding: 30px;
        border: 1px solid #fff;
        float: right;
        margin: 1%;
        width: 98%;
        font-size: 22px;
   }
   .getcode input{
    text-align: center;
    padding: 3px;

     width:auto;
     border-radius:10px;
     background-color: #ddd;
     color: black;
     font-family:Yekan;
     font-size: 14px;
   }
.getcode  input[type="checkbox"]{
   width:10%;    
   }
#Qlist headeer{
    padding: 5px;
    font-family:B titr, serif; 
    font-size:20px; 
    background-color: #6666ff;
    color: black;
    text-align: center;
    width:100%;

    float:right;
   }
 #qcharts{
    font-family:Yekan,sans, serif; 
    font-size:16px; 
    padding: 5px;
    width:100%;
}

 #qcharts > div {
    padding: 5px;
    
    border-bottom: 1px solid #000;
}
 .singleItem{
    float: right;
    background-color: #eee;
    box-shadow: 1px 2px #000;
    padding: 1%;
    border-radius: 10px;
    margin: 1%;
    width: 95%;
    text-align:justify;
}
 .singleItem descript {
     display:inline;
    padding: 2px;
    font-family: Nazanin, sans;
    font-size: 14px;
    text-align: justify;
    
}
 .figs .singleItem canvas {
     float: right;
    padding: 2px;
    width: 35%;
    border-radius: 10px;
    margin-right: 2%;
    box-shadow: 0px 0px #000;
}
 #qcharts .gauge{
    float: right;
}
 #qcharts .know{
    float: right;
    text-align: justify;
    background-color: #eee;
    margin: 1%;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 2px 2px #000;
    width: 94%;
}
 #qcharts table tr td{
     padding: 2px;
     height:30px;
        background-color: #ddddff;
        font-family:Yekan,sans, serif; 
        font-size:14px; 
border: 2px solid #ccc;
}


 #qcharts table .ye{
        background-color: #f3ff04;
}
 #qcharts table .re{
        background-color: #f38888;
}
 #qcharts table .gr{
        background-color: #88f388;
}
 #qcharts table .bl{
        background-color: #8888f3;
}
 #qcharts table .wh{
        background-color: #fff;
}

 #qcharts th{
     text-align:center;
    padding: 5px;
    font-family:B titr, serif; 
    font-size:14px; 
    background-color: #6666ff;
  color: black;
border: 1px solid #ccc;
}
 .chart{
     position:relative;
     
     margin-top:5px;
    float:right;
}
@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
.refs{
text-align: left;    
}
.qinfo{
    text-align:justify;
    padding: 5px;
    font-family:Yekan,sans, serif; 
    font-size:14px; 
}
.qinfo p{
    text-align: justify;
    font-family: sans, serif;
    font-size: 14px;
    width: 90%;
    margin-right: 5%;
}
.frm{
    border-radius: 15px;
    background-color: #FFDDFF;
    margin: 2%;
    text-align:center;
    float: right;
    padding: 5px;
    font-family:Yekan,sans, serif; 
    font-size:14px; 
} 
.prof{
        font-family:Yekan,sans, serif; 
    font-size:14px; 
        text-align:justify;
    background-color: #AAF;

    float:right;

    margin: 1%;
    width:100%;
}
.figs{
        font-family:Yekan,sans, serif; 
    font-size:14px; 
        text-align:center;
    background-color: #AAF;
    border-radius: 15px;
    border: 2px solid #ccc;
    float:right;
     padding: 10px;
     margin-top:2%;
    margin-right: 5%;
    width:84%;
}
.freeshow .blc{
    display: block;
    float:right;
    width:90%;
    margin-right:5%;
}
.freeshow canvas{
     padding: 10px;
margin-right: 2%;
width: 95%;
box-shadow: 4px 2px #333;
border-radius: 20px;
background-color: #1d4289;
padding: 2%;
}
.figs canvas{
    float: left;
    margin-left:5%;
    margin-top: 10px;
    width: 70%;
    box-shadow: 0px 0px 1px 1px #333;
    border-radius: 10px;
    background-color: #1d4289;
    padding: 2px;
}
.uprof{
        font-family:Yekan,sans, serif; 
    font-size:14px; 
        text-align:justify;
    background-color: #AAF;
    border-radius: 15px;
    border: 2px solid #ccc;
    float:right;
     padding: 10px;
    margin: 1%;

}
.figs header{
    font-family:B titr, serif; 
    font-size:14px;
    text-align:justify;
    border-radius: 15px;
    width:98%; 
}
.figs header:hover{ 
    background-color: #AFA;
}
.figs .blc{
    display: none;
    float:right;
    width:90%;
    margin-right:5%;
}
.figs .blc{
    display: none;
    float:right;
    width:90%;
    margin-right:5%;
}
.prof header{
    font-family:B titr, serif; 
    font-size:14px; 

    width:90%;     

    margin: auto;
}
.prof header:hover{ 
    background-color: #AFA;
}
.prof .b{
    display: none;
text-align: justify;
width: 80%;
     margin: 1%;
}
   .frm header{
           border-radius: 25px;
 margin: 5px;
    background-color: #66ffff;
    color: black;
    border: 2px solid #ccc;
    text-align:center;
    padding: 5px;
    font-family:B titr, serif; 
    font-size:14px; 
}  
   .frm input{
    border-radius: 15px;
   
    background-color: #ccf;
    color: black;
    border: 5px solid black;
    text-align:center;
    font-family:Yekan,sans, serif; 
    font-size:14px; 
}  
.blockmenue{
    font-family: B Zar;
 text-align: center;   
width: 96%;
float: right;
margin: 1%;
border-radius: 10px;
background-color: #ffc;

padding: 2%;
font-size: 26px;
color: #00f;
font-family: titr;
box-shadow: 2px 1px 1px 2px #000;
}

.cmenu {
    
width: 16%;
float: right;
margin: 1%;
border-radius: 10px;
background-color: #ffc;

padding: 2%;
font-size: 16px;
color: #00f;
font-family: titr;
box-shadow: 2px 1px 1px 2px #000;
}
@font-face {
        font-family: Kamran;
        src: url('/fonts/Kamran.ttf');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: BZar;
        src: url('/fonts/B_Zar.ttf');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: Nazanin;
        src: url('/fonts/B_Nazanin.ttf');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: Yekan;
        src: url('/fonts/yekan/Yekan.eot');
        src: url('/fonts/yekan/Yekan.eot?#iefix') format('Yekan-opentype'),
        url('/fonts/yekan/Yekan.woff') format('woff'),
        url('/fonts/yekan/Yekan.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}
.cmenu name{
    color: #000;
    padding: 3px;
    border-radius: 10px;
    font-family:Yekan,sans, serif; 
    font-size:10px; 
}
.cmenu:hover{
    box-shadow: 1px 1px 2px 2px #0f3e3e;
    border-radius: 20px;
    font-family:Yekan,sans, serif; 
    font-size:18px;
    background-color: #ddf;
    color: #000;

}
   .frm button{
    border-radius: 15px;
    background-color: #FFFF99;
    color: black;
    width:51%;
       margin-top: 5px;
    border: 2px solid #ccc;
    text-align:center;
    padding: 2px;
    font-family:B titr, serif; 
    font-size:16px; 
} 


.info{
    margin-left: 5px;
    text-align:center;
    padding: 5px;
    font-family:Yekan,sans, serif; 
    font-size:14px; 
} 
   .info header{
           border-radius: 25px;
    background-color: #6666ff;
    color: black;
    border: 2px solid #ccc;
    text-align:center;
    padding: 5px;
    font-family:B titr, serif; 
    font-size:16px; 
}  
#column1 {
        float: left;
    width: 13%;
   height: max-content;
    border: 1px solid black;
	margin: 1%;
	 line-height: 80%;

}
#column1 img{
    float: left;
    width: 45%;
    height:22px;

}
label{
    font-family:B titr, serif; 
    margin:auto;
    border-radius: 5px;
    border: 1px solid #000;
    text-align:right;
    padding: 10px;
}
payed{
    font-family:B titr, serif; 
    margin-left:1%;
    border-radius: 5px;
    border: 3px solid #0f0;
    text-align:center;
    padding: 5px;
    float:left;
}
notpayed{
    font-family:B titr, serif; 
    margin-left:1%;
    border-radius: 5px;
    border: 3px solid #000;
    background-color: #f99;
    text-align:center;
    padding: 5px;
    float:left;
}
label2{
    
    margin-top:1px;
    border-radius: 1px;
    padding-left: 5px;
    padding-right:5px;
}
table {
    border:2px;
}
table td {
     border-radius: 12px;
    background-color: #6666ff;
    color: black;
    border: 2px solid #ccc;
    text-align:center;
    padding: 5px;
    font-family:Nazanin;
}