.sidebar{
    position:fixed;
    top:0;
    left:0;
    height: 100vh;
    width:200px;
    padding-top: 20px;
    background-color: #514F50;
    transition:width 0.3s ;
}
.sidebar .nav-link {
    display:flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    color: #fff;
}
.sidebar .description {
    font-size: 12px;
}
.sidebar .nav-link:hover{
    background-color: #ea682f;
}
.main-content{
    padding: 25px;
    margin-left: 200px;
    
   
    /* padding: 20px; */
}
.main-content .inventaire .btnact {
    background-color: #ea682f;
}
.main-content .fond {
    background-color: #ea682f;
    color :#fff;
}
/* .main-content .card-body{
    margin-top: px;
} */
.main-content .card .card-header .btnactive{
    background-color: #ea682f;

}
.card {
    margin: 0 !important;
    padding: 0 !important;
}

.card-body, .card-header {
    padding: 10px !important; /* Ajustez la valeur selon vos besoins */
}

button {
    margin: 0 !important;
}

.custom-btn{
    background-color:#514F50;
    color : #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.orange-bg{
    background: #514F50;
}
.text-gray{
    color: #514F50;
}
.custom-btn:hover{
    background-color:#ea682f;
    color : #fff;
}
.main-content .technopet{
    background-color: #514F50;
    color: #ea682f;
}
.main-content .technopet .btntpm{
    background-color: #ea682f;
    color: #fff;
}
.main-content .content:hover{
    background-color: #ea682f;
    color: #fff;
}
.main-content .technopet .tpm:hover{
    background-color: #ea682f;
    color: #fff;
}

/* login */
.card {
    /* width: 100%; */
    /* max-width: 600px;  */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color:#fff;
    margin: 10% 30%;
}

.card-body {
    padding: 2rem;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ced4da;
    border-radius: 5px;
}

.btn-primary {
    width: 100%;
    padding: 0.75rem;
    border-radius: 5px;
    background-color: #514F50;
}
.btn-primary:hover{
    background-color: #ea682f;
}
.pagination {
    display: flex;
    justify-content: center;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

.pagination .page-link {
    border-radius: 50%;
    padding: 0.5rem 0.75rem;
}

.pagination .page-item {
    margin: 0 0.2rem;
}

/* .main-content input:hover{
    background-color: #ea682f ;
    color:#fff;
} */
/* .main-content .technopet .table{
    background-color: #514F50;
    color: #fff;
} */
/* @media(max-width:480px){
    .sidebar{
        width:60px;
    }
    .sidebar .description{
        display:none;
    }
    .sidebar .nav-link{
        justify-content: center;
    }
    .main-content{
        margin-left: 60px;
    }
} */
/* Responsive styles for small screens (including Android devices) */
@media (max-width: 480px) {
    .sidebar {
    

      width: 60px; /* Reduce the sidebar width for small screens */
      transition: width 0.3s ease; /* Smooth transition for sidebar width change */
      overflow: hidden; /* Prevent content overflow */
    }
  
    .sidebar .description {
      display: none; /* Hide sidebar descriptions to save space */
    }
  
    .sidebar .nav-link {
      justify-content: center; /* Center nav links */
      padding: 15px; /* Add padding to increase the touchable area */
    }
  
    .main-content {
      margin-left: 60px; /* Adjust the main content margin to match sidebar width */
      padding: 15px; /* Add padding for better spacing */
      transition: margin-left 0.3s ease; /* Smooth transition for content margin */
    }
  
    .navbar {
      flex-direction: column; /* Stack navbar items vertically */
      align-items: center; /* Center-align navbar items */
      padding: 10px; /* Add padding for better spacing */
    }
  
    .toggle-button {
      display: block; /* Display the toggle button */
      margin: 10px auto; /* Center the toggle button horizontally */
      cursor: pointer; /* Show a pointer cursor on hover */
      padding: 10px; /* Add padding to make it easier to click */
    }
  
    /* Styles for hiding/showing sidebar */
    .sidebar.collapsed {
      width: 0; /* Collapse the sidebar completely */
      overflow: hidden; /* Hide any overflowing content */
    }
  
    .main-content.expanded {
      margin-left: 0; /* Expand the main content width when sidebar is collapsed */
    }
  
    /* Additional touch-friendly styles for Android devices */
    button, .nav-link {
      touch-action: manipulation; /* Optimize for touch interactions */
    }
  
    /* Adjustments for Android's default browser behaviors */
    body {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Remove tap highlight color */
    }
  
    /* Ensure fonts are readable on small screens */
    .content-text {
      font-size: 16px; /* Increase font size for readability */
      line-height: 1.5; /* Improve text readability with proper line height */
    }
  }