@media all and (max-width : 1300px){
    ul.staffs li{width: 25%;}
}

@media all and (max-width : 1100px){
    ul.staffs li{width:33.33%;}
    .pannel-header input{width: 100%;height:40px;}
    .pannel-header select{width: 100%;height:40px;}
    .token-grid .tkns{flex:0 1 25%}
    .statistics-item{width:33.33%;}
    .twenty{width:25%;}
    .wallet-usage li{width:33.33%;}

    .user-overview li div p{font-size:14px;}

    nav li a{padding:6px 10px;}
    nav li a i{margin-right:3px;}
    nav li{margin-right:10px;}

    .dashboard-75{width: 100%;}
    .main-chart{width:50%;margin-top:20px;}

}

@media all and (max-width : 1000px){
    .token-grid .tkns{flex:0 1 33.33%}
    .detailed-report{width:50%;}

    .model.alert{width:50%;}
    .user-overview li div p{font-size:12.5px;}
}


@media all and (max-width : 900px){
    /* ------------------nav--------------- */
    header .logo{width:50px;}
    nav{position:fixed;background:#e9eeff;left:0;top:40px;height:100%;width:280px;padding:0;left:-1500px;transition:all 0.5s}
    nav.open{left:-40px;transition:all 0.3s}
    nav ul{padding:0 20px 20px 20px;box-sizing:border-box;}
    nav li{display:block;width:100%;float:none !important;;padding:15px 0;}
    nav li a.active{color:#21a2da;background:none;}
    nav li a:hover{color:#21a2da;background:none;}
    nav p.label{display:block;padding:10px 20px;box-sizing:border-box;background:#b9b6b6;margin-bottom:15px;}
    nav li a{padding:0;}
    .menu-open{display:block;position:fixed;right:20px;top:20px;z-index:99;font-size:20px;}

    ul.child{position:unset;width:100%;background:none;padding:5px;padding-left:5px;box-sizing:border-box;border-radius:10px;padding-left:21px;box-shadow:none;}

    /* -------------------------------------------------------------- */

    .inner-section{padding-top:80px!important;}

    .user-overview li{width:33.33%;}
    table.dataTable > tbody > tr.child ul.dtr-details{width:100%;}
    table.dataTable > tbody > tr.child ul.dtr-details > li{text-align:left;}
    .popup .popup-wrapper{width: 80%;}
}

@media all and (max-width : 860px){
    nav{padding-left:40px;}
    ul.staffs li{width: 50%;}
    .side-bar{width: 80%;}
    .invoice-pannel{width:100%;}
    .token-wrapper{width:85%;}
    .token-grid .tkns{flex:0 1 50%}

    .side-bar-wrapper{top:55px}
    .pannel-header .btn{padding:10px;height:auto;line-height:unset;}
    .pannel-header .btn i{line-height:18px;}

    .twenty{width:33.33%;}
    .model.alert{width:90%;}
    .wallet-usage li{width:50%;}

    .dashboard-75 .sub-chart{width:30%;margin-right:2%;}
    .dashboard-75 .sub-chart.sub{width:68%;margin-right:0;margin-top:0;margin-bottom:7px;}
    .main-chart{width:50%;}
    .sub-chart .qtr{width:100%;margin-bottom:11px;margin-left:0;}
}

@media all and (max-width : 750px){
    .main-chart{width:100%;margin:0 auto 50px auto;float:none;}
    .sub-chart{width:100%;padding: 0 !important;;}
    .sub-chart .qtr{width:48%;margin-bottom:2%;margin-left:2%;}
    nav li a{padding:8px 10px;font-size:12px;}
    .statistics-item{width:50%;}
    .attendance{width:100%;}
    .dashboard-75 .sub-chart{width:100%;}
    .sub-chart .qtr{width:49%;margin-right:0;margin-left:0;}
    .sub-chart .qtr:nth-child(even){margin-left:2%}
    .dashboard-75 .sub-chart.sub{width:100%;margin:20px 0;}
}

@media all and (max-width : 700px){

}


@media all and (max-width : 650px){

    .form-item{width:50%;margin:0;padding-right:10px;box-sizing:border-box;}
    .search.tables{overflow-x:scroll;}

    .invoicer .service-list{width:60%;}
    .invoicer .more{width:39%;}
    .invoicer table{font-size:12px;}
    .inv-title h3{font-size:14px;}
    .inv-title p{font-size:12px;}
    .selectize-control.single .selectize-input, .invoicer .more{height:40px;}
    .invoicer .inv-footer .more{height:auto;line-height:unset;width:auto;}
    .inv-footer .more i{line-height:auto;margin:1px 5px auto auto !important;}
    .invoicer .inv-table{overflow:scroll;}
    #activity{width:700px;}
    #activity select, #activity input{font-size:12px;}
   
    .detailed-report{width:100%;}

    .user-overview li{width:100%;}
    .wrapper .box{width:90%;}
    .login h1{font-size:23px;}
    .wrapper .box{padding:50px 30px;}
    #upi{height:38px;}
    #req-docs-panel{width: 95% !important;;}
}

@media all and (max-width : 500px){
    .main-chart{width:100%;margin:0 auto 50px auto;float:none;}
    .sub-chart{width:100%;}
    .sub-chart .qtr{width:100%;margin-bottom:2%;margin-left:0;margin-right:0;}
    .sub-chart .qtr:nth-child(2n){margin-left:0;}
    /* header .logo{float:none;margin:0 auto;} */
    nav{padding-left:0;}    
    ul.staffs li{width: 100%;}
    .pannel-header .btn{font-size: 13px;width:auto;}
    .side-bar{width: 100%;}
    .side-bar .input-box{padding: 5px;}
    #print_bill, #feedback{display:none !important;}
    .token-wrapper .input-cover{width:100%;}
    .token-wrapper{margin-top:65px;}
    .token-wrapper .title h3{font-size:19px;}
    .token-grid .tkns{flex:0 0 100%}

    .twenty{width:50%;}
    .statistics-item{width:100%;padding:0;}
    .wallet-usage li{width:100%;}
    div.dt-buttons > .dt-button{font-size:12px !important;padding:7px !important;height:auto !important;;}
    div.table{padding: 10px !important;;}
    nav.open{left: 0}
    .popup .popup-wrapper{width: 90%;}
    .calculator{top: 300px;}
    
    
}

@media all and (max-width : 390px){
    /* nav li a i{display: none !important;;} */
    .side-bar .input-box{width:100%;}
    .twenty{width:100%;}
    .pannel-header-normal .input-wrapper{padding:10px;}
    .pannel-header input{margin:0;}
    .pannel-header select{margin:0;}
    .pannel-header .btn{margin-top:-14px;/*margin-left:50%;transform:translate(-50%);*/width:100%!important;}

    .token-grid .title{text-align:center;}
    .token-grid .title h2{display:block;width:100%;text-align:center;margin-bottom:10px;font-size:23px;}
    .token-grid .title a.btn{float:none;}
    .inner-section h2{display:block;width:100%;}
    .fifty{width:100%;float:none;margin-top:25px;}
    .pannel-header .fifty .btn{width: auto !important;float:none;}
    input, select, textarea{padding:8px;}
    /* .invoicer .inv-footer .btn{width:100%;} */
    #upi{margin-top:5px;}
}

@media all and (max-width : 295px){
    nav li{margin-right:0;}
}