@page {
  size: auto;
  margin: 0;
}

.print{
        display:none;
    }

@media print{
    .print{
        display:block;
    }
    .none-print{
    display:none;
    }
    .sub-container{
        display:none;
    }
    
    .main-content{
        display:none;
    }
    .side-menu{
        display:none;
    }

}


table{
    margin:auto;
    
}
tr:nth-child(odd){background-color:white; }
tr:nth-child(even){background-color:#e3e3e3; }
td{
    padding:5px;
    text-align:center;
    color:gray;
    border-style:solid; 
    border-color:gray;
    border-width:1px;
}
th{
    background:var(--co3);
    color:white;
    padding:5px;
}
.pc{
    display:block;
}
.mobile{
    display:none
}

.center-div{
           display:flex;
           justify-content:center;
           align-items:center;
           height:100%;
           width:100%;
       }
.pop-div{
    position:fixed; 
    z-index:100;
    width:100%;
    height:100vh;
    top:0px;
    left:0px;
    background:rgb(100,100,100,1);
    display:none;
    padding:20px;
}
.close-div{
    position:absolute;
    background:red;
    color:white;
    top:10px;
    right:10px;
    padding:5px;
    cursor:pointer;
    border-radius:20px;
}
.loading{
    display:none; 
    align-items:center; 
    justify-content:center;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px; 
    background:rgba(0,0,0,0.7);
    z-index:99;
}
.loading div{
    border-radius:10px;
    background:white;
    text-align:center;
    padding:10px;
    align-items:center;
}
.loading img{
    width:40px;
    height:auto;
}
 
.table-div{
            width:95%;
            overflow:auto;
            margin:10px auto;
            border-radius:10px;
            height:95%;
           /* max-height:100%;*/
            text-align:center;
        }
   
.table-title{
    width:100%;
    background:var(--co1);
    color:#fff;
    border-radius:0px;
    padding:10px;
}

   .main_menu{
        position:relative;
        width:80%;
        height:auto;
        margin:auto; 
        /*top:50%;
        /*-webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);*/
        animation: 1s ease-out 0s 1 slideInLeft;
        
    }
    .main_menu div{
        margin-bottom:10px;
    }
    
    
    .main-title{
        color:black;
        font-size:130%;
        text-shadow: 2px 2px 2px gray;
    }
    .main-login{
        position:relative;
        background:#ddd;
        width:400px;
        height:auto;
        margin:auto; 
        text-align:center;
        border-radius:20px;
      
    }
    .main-login img{
        position:absolute;
        top:-50px;
        left:125px;
        background:#eee;
        width:100px;
        height:100px;
        border-radius:50%;
        border-style:solid;
        border-width:1px;
        margin:20px;
    }
    .login-input{
        width:100%;
        padding:20px;
        
    }

    .user {
        display:flex;
        align-items:center;
        color:white;
        padding:10px;
        
        
    }
    .user a{
         color:white;
    }
    
    .sub-title{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:40px;
        text-align:center; 
        background:#c9cdd3; 
        padding:7px; 
        color:var(--co1);
    }
    

    
    .sub-container{
        position:absolute;
        top:40px;
        left:0px;
        width:100%;
        bottom:0px;
        overflow:auto;
        padding:7px;
    }
    
    .container-butt{
       
        display:flex;
        justify-content:right;
    }
    .container-butt button{
       display:flex;
       align-items:center;
       padding:5px;
       border-radius:5px;
       margin:5px;
       cursor:pointer;
    }

     .big-butt{
        padding:5px 10px 5px 5px;
        width:95%;
        /*max-width:200px;*/
        margin:5px auto;
        
        background:white;
        color:gray;
        border-radius:5px;
        /*border-bottom-style:solid;*/
        border-width:2px; 
        text-align:right;
        white-space:nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    
        
    }
    .big-butt:hover{
        background:lightcyan;
        /*transform:scale(1.08);*/
    }
    
    .reg-pup{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        bottom:0px; 
        background:rgba(0,0,0,0.7); 
        display:none;
        overflow:auto
    }
    .reg-form{
        margin:auto; 
        border-radius:10px; 
        padding:10px;
        background:#ddd; 
        width:600px;
    }
    .side-menu{
        position:absolute;top:50px; right:0px; bottom:0px; width:220px;overflow-y:auto;background:none;
    }
    
    .main-content{
        position:absolute;top:50px; right:240px; bottom:40px;left:20px;overflow:auto;background:#dde1e8;border-radius:20px;
    }
  
    .sidebar_butt{
        padding:10px;
        width:95%;
        margin:auto;
        margin-bottom:5px;
        background:gray;
        color:white;
        border-radius:5px;
       /* border-bottom-style:solid;*/
        border-width:2px; 
        text-align:center;
        white-space:nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
    .spliter-title{
        padding:10px;
        color:yellow;
        border-radius:10px;
        border:2px solid white;
        margin:auto;
        margin-bottom:10px;
        width:200px;
        text-align:center;
        position: relative;
        box-sizing: border-box;
    }
    .spliter-title::after {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        background: white;
        width: 50px;
        left: 100%;
        top: calc(50% - 2px);
        }
        
     .spliter-title::before {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        background: white;
        width: 50px;
        right: 100%;
        top: calc(50% - 2px);
        }
    .top_raibon{
        display:flex;
        justify-content:space-between;
        width:100%;
        height:50px;
       
    }
    .s-title{
     
        color:white;
        font-family:iransans_bold;
        font-weight:bold;
        font-size:120%;
        padding:10px;
        display:flex;
        align-items:center; 
    }
  
.main-butt{
    position:relative; 
    color:white;
    padding:30px;
    border-radius:10px;
    border-style:solid;
    border-width:2px;
    width:100%;
   text-align:center;
   margin-bottom:20px;
    
}

.notification{
   
    position:absolute;
    width:10px;
    height:10px;
    top:10px;
    left:10px;
    background:red;
    border-radius:100%;
    display:none;
}

   
   
  
   @media(max-width:960px){
       .main-login{
        width:80%;
           
       }
       .side-menu{
           height:100px;
           left:20px;
           right:20px;
           
       }
       .main-content{
           top:200px;
           right:20px;
       }
       
       .pc{
    display:none;
}
.mobile{
    display:block
}
   }