.user-avatar {
    font-size: 1.2rem;
    cursor: pointer;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none;
    /* Initially hidden */
}

.user-dropdown a {
    display: flex;
    /* Changed to flexbox */
    align-items: center;
    /* Align items vertically */
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.user-dropdown a i {
    margin-right: 5px;
    /* Add space between icon and text */
}

.user-dropdown a:hover {
    background-color: #f0f0f0;
}

.user-avatar:hover+.user-dropdown {
    display: block;
}

.user-dropdown .user-role-info,
.user-dropdown .user-id-info,
.user-dropdown .user-rights-info {
    display: block;
    padding: 5px 15px;
    color: #333;
}


.dropzone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white;
    min-height: 150px;
    padding: 20px;
    box-sizing: border-box;
}

/* Styles to fix navbar and footer */
.fixed-top {
    position: fixed;
    z-index: 1000; /* Ensure it's on top */
}

.fixed-bottom {
    position: fixed;
    z-index: 1000; /* Ensure it's on top */
}

/* Add padding to content-wrapper to avoid overlap */
.content-wrapper {
    padding-bottom: 60px;
}

/* Add this rule to template.css */
.modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

/* Add padding to dropdown items */
.dropdown-menu>li>a {
    padding: 10px 20px;
}

@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
    top: 50%;
    margin-top: -9px;
    left: 4px;
    height: 18px;
    width: 18px;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', monospace;
    line-height: 18px;
    content: '+';
    background-color: #337ab7;
  }

  .table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before {
    content: '-';
    background-color: #d33333;
  }

  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
}

.user-dropdown .dropdown-item {
    display: block;
}



/* Add padding to content-wrapper to avoid overlap */
.content-wrapper {
    padding-top: 60px;
    margin-top: 0px;
    
}

.content{
    min-height: calc(100vh - 250px);
}

/* Handle overflow in DataTables wrapper */
.dataTables_wrapper {
    overflow-x: scroll;
}