#cart-contents {
    right: 0px !important;
    z-index: 100;
}
.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 0) !important;
}
img.avatar.avatar-32.photo {
    border-radius: 32px;
}

body {
            overflow-x: hidden;
            font-family: 'Google Sans', sans-serif; /* Apply Google Sans font */
           
        }
  


      .container-flex {
            display: flex; /* Flex container for sidebar and content */
            flex-grow: 1; /* Ensure it takes the full height */
            margin-top:-9px;
        }
       bi::before, [class^="bi-"]::before, [class*=" bi-"]::before{
  
    font-weight:bold !important;
}
        .sidebar {
            min-height: calc(100vh - 56px); /* Adjusting height for the navbar */
            transition: width 0.3s; /* Smooth transition for width */
            width: 250px; /* Default width */
            flex-shrink: 0; /* Prevent sidebar from shrinking */
        }
          .sidebar.collapsed {
            width: 80px; /* Adjusted width when collapsed */
        }
        .sidebar.collapsed .nav-link {
            justify-content: center;
        }
        .sidebar.collapsed .nav-link span {
            display: none;
        }
        .sidebar.collapsed {
    width: 67px;
    padding: 0 !important;
    margin: 0;
    text-align: center;
}
.dropdown-menu[data-bs-popper] {
    top: 121%;
    left: -101px;
    margin-top: var(--bs-dropdown-spacer);
    border:0;
}
        .flex-fill {
            transition: flex 0.3s; /* Smooth transition for flex-grow */
            flex-grow: 1; /* Ensure it fills the available space */
            overflow: auto; 
          
        }
        button#toggle-sidebar {
    width: 42px;
    padding: 0;
    background: none;
}
       a.nav-link {
    padding: 13px 19px;
}
.sidebar.collapsed .nav-link:focus, .nav-link:hover{
border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
   .nav-link:focus, .nav-link:hover {
    

    
   
}
.sidebar.collapsed a.nav-link i {
    padding-right:0px;
}
a.nav-link i {
    padding-right:12px;
}

        .sidebar.collapsed ~ .flex-fill {
            flex-grow: 3; /* Increase flex-grow when sidebar is collapsed */
        }
        .navbar-brand.collapsed {
            justify-content: center;
        }
        .text-secondary-emphasis {
    color: #9c9c9c !important;
}
      @media (max-width: 768px) {
    .sidebar {
        position: fixed; /* Fix sidebar to the side */
        top: 56px; /* Align below the navbar */
        left: 0; /* Align to the left */
        z-index: 1000; /* Ensure it appears above other elements */
        transform: translateX(-100%); /* Initially hide the sidebar */
        transition: transform 0.3s ease; /* Smooth transition */
        width: 250px; /* Full width when shown */
        height: calc(100vh - 56px); /* Full height minus navbar */
        background: linear-gradient(113deg, #2429d6, #343a40c7) !important;
        color:white !important;
    }
   
     .sidebar.collapsed {
        width: 213px;
        background: none;
        text-align: left;
    }

    .sidebar.collapsed .nav-link span {
            display:inline;
            padding:12px;
        }
    .sidebar.active {
        transform: translateX(0); /* Show the sidebar when active */
       
    }

    .navbar-toggler-xl {
        display: block; /* Ensure the toggle button is visible */
    }

    .flex-fill {
        margin-left: 0; /* Reset margin when sidebar is hidden */
        transition: margin-left 0.3s ease;
        overflow: auto !important;/* Smooth transition for content */
    }
 .fs-6 {
    font-size: .7rem !important;
}
    
}

@media (min-width: 769px) {
    .sidebar {
        position: static; /* Default position for larger screens */
        transform: none; /* No transformation needed */
    }
    .fs-6 {
    font-size: 0.7rem !important;
}

}
.table-responsive {
    overflow-x: auto;
}

.clickable-row {
    cursor: pointer;
}

/* Hide details by default in mobile view */
@media (max-width: 767px) {
    .details-content {
        display: none; /* Hide details by default */
    }

    .collapse.show .details-content {
        display: block; /* Show details when expanded */
    }
}

/* Show details normally in desktop view */
@media (min-width: 768px) {
    .details-content {
        display: block; /* Show details normally */
    }

    .mobile-detail {
        display: table-row; /* Ensure details are displayed */
    }
}