@media (max-width:1400px){
    .dashboard-card{
        padding:22px;
    }
    .dashboard-value{
        font-size:30px;
    }
}
@media (max-width:1200px){
      .sidebar{
        width:250px;
    }

    .main-wrapper{
        margin-left:250px;
    }
    .content-area{
        padding:25px;
    }
}
@media (max-width:992px){
    .sidebar{
        left:-270px;

        width:270px;
    }

    .sidebar.active{
        left:0;
    }

    .main-wrapper{
        margin-left:0;

        width:100%;
    }

    .top-header{
        padding:0 20px;
    }

    .content-area{
        padding:20px;
    }

    .footer{
        flex-direction:column;

        gap:10px;

        text-align:center;
    }

}
@media (max-width:768px){

     .sidebar{
        width:270px;
    }
    .top-header{
        height:70px;
        padding:0 15px;
    }
    .page-title{
        font-size:18px;
    }
    .header-right{
        gap:12px;
    }
    .profile-btn span{
        display:none;
    }
    .dashboard-card{
        margin-bottom:20px;
    }
    .dashboard-value{
        font-size:28px;
    }
    .dashboard-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }
    .content-area{
        padding:18px;
    }
    .login-card{
        padding:30px;
    }
}
@media (max-width:576px){
      .sidebar{
        width:270px;
    }
    .top-header{
        padding:0 12px;
    }
    .toggle-btn{
        width:42px;
        height:42px;
    }
    .page-title{
        display:none;
    }
    .header-icon{
        width:40px;
        height:40px;
        font-size:14px;
    }
    .profile-img{
        width:38px;
        height:38px;
    }
    .content-area{
        padding:15px;
    }
    .card-body{
        padding:18px;
    }
    .dashboard-card{
        padding:20px;
    }
    .dashboard-value{
        font-size:24px;
    }
    .dashboard-title{
        font-size:14px;
    }
    .login-card{
        padding:25px;
        border-radius:18px;
    }
    .login-logo{
        width:75px;
        height:75px;
        font-size:30px;
    }
}
@media (max-width:420px){
    .content-area{
        padding:12px;
    }
    .dashboard-card{
        padding:18px;
    }
    .footer{
        font-size:13px;
    }
    .table{
        font-size:13px;
    }
}
@media (max-width:992px){
    .table-responsive{
        overflow-x:auto;
        white-space:nowrap;
    }
}
@media (max-width:576px){
    .btn{
        width:100%;
        margin-bottom:10px;
    }
}
@media (max-width:768px){
    .form-control{
        min-height:46px;
    }
}
@media (max-width:576px){
    .page-header{
        display:block;
    }
    .breadcrumb{
        margin-top:10px;
    }
}
.sidebar-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:998;
}
.sidebar-overlay.active{
    opacity:1;
    visibility:visible;
}