/*----14-12-24----*/
 @media(max-width:1550px)
 {
     .btn
     {
         width:180px;
     }
 }
 @media(max-width:1370px)
 {
     .btn
     {
         width:180px;
         margin-bottom:20px;
     }
 }
@media(max-width:1240px)
{
    .form-group
    {
        margin-right: 0px;
    }
    .setting-dropdown-button
    {
        font-size: 14px;
    }
    .setting_table tbody td ,  .setting_table thead th
    {
        text-wrap: nowrap;
        white-space: nowrap;
    }
    
    /*---- 14-12-24---*/
     table tbody tr td
    {
        text-wrap: nowrap;
    }
}
@media(max-width:1024px)
{
    .form-group
    {
        margin-right: 0px;
    }
    table tbody tr td
    {
        text-wrap: nowrap;
    }
    .setting-dropdown-button
    {
        font-size: 14px;
    }
}
@media(max-width:768px)
{
    table tbody tr td , table td th , table, td, th
    {
        text-wrap: nowrap;
        white-space: nowrap;
    }
    .header_title h3
    {
        font-size: 18px;
    }
}
@media(max-width:767px)
{
    .nav_baricon
    {
        padding: 15px;
    }
    .home-section
    {
        width: 100%;
        left: 0px;
    }
    .sidebar {
        transform: translateX(-300px); /* Sidebar hidden */
        transition: transform 0.3s ease; /* Smooth transition when the sidebar opens/closes */
    }
    
    .sidebar.active {
        transform: translateX(0); /* Sidebar visible */
    }
     .sidebar
     {
        z-index: 9999;
        margin-top: 0PX;
        width: 280px !important;
     }
     .sticky
     {
        z-index: 99;
     }
     .sidebar .logo img
     {
        margin-inline: auto !important;
        text-align: center;
        margin-bottom: 20px;
     }
     .sidebar.close ~ .home-section {
        left: 0px;
        width: 100%;
    }
    .sidebar.close .nav-links li a .link_name
    {
        opacity: 1;
    }
    .header_title h3
    {
        padding-left: 0px;
        font-size: 16px;
    }
    .profile_img
    {
        width: 80px;
        height: 80px;
    }
    .toggle_angle
    {
        height: auto;
        top: 120px;
        right: 0px;
    }
    .sidebar.close .nav-links li .sub-menu
    {
        position: relative;
        padding: 6px 6px 14px 80px;
        left: 0px;
    }
    /* .sidebar.close .nav-links li .sub-menu {
        display: none !important;
    } */
    .sidebar
    {
        padding: 10px;
    }
}
@media(max-width:576px)
{
    .order_details_table
    {
        width: 700px;
    }
    .order-details-card
    {
        overflow: hidden;
        padding: 15px;
    }
    .order_details_box
    {
        overflow: scroll;
        width: 100%;
    }
    .nav_tabs
    {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .nav_tabs button
    {
        text-wrap: nowrap;
        margin-bottom: 15px;
    }
}
@media(max-width:480px)
{
    .image_edit
  {
    width: 30px;
    height: 30PX;
    border-radius: 50%;
    background-color: var(--black-color);
    text-align: center;
    line-height:30PX;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  .image_edit i 
  {
    font-size: 12px;
  }
  .notification_bell i
  {
    margin-right: 0px;
  }
  .nav_baricon
  {
    padding: 10px;
  }
  .login_form .login_txt
  {
    font-size: 35px;
    margin-bottom: 15px;
  }
  .login_content p
  {
    font-size: 18px;
  }
  .search_input
  {
    max-width: 100%;
    width: 100%;
  }
  .search_box ,  .status-dropdown
  {
    width: 100%;
  }
  .status-dropdown .action-dropdown-button
  {
    width: 100%;
    max-width: 100%;
  }
  .notification_box
  {
    right: 0px;
    width: 360px;
  }
  .notification_box.active
  {
      transform: scale(1) translatex(4%);
  }
  .add_category_title, .main_title{
    font-size: 18px;
  }
  .order_Card img
  {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  .order_details_table .row
  {
    margin-inline:5px;
  }
  .main_dashboard
  {
    padding: 20px;
  }
}
@media(max-width:375px)
{
    .dow_order
    {
      width: 100% !important;
      max-width: 100%;
    }
    .notification_box
    {
       width: 300px;
    }
}
@media(max-width:320px)
{
    .btn
    {
        width: 180px;
    }
    .login_content
    {
        padding: 60px 10px;
    }
    .login_btn
    {
        width: 100%;
    }
}