body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ***sidebar start*** */
.sidebar {
  border-right: 1px solid gainsboro;

}

.side-ul .side-li a,
.side-ul li a span {
  text-decoration: none;
  /* color: rgb(150 150 150); */
  padding: 5px;

}

li {
  /* width: 100%; */
}

.side-li a span {
  color: #86729C;
}

.side-li {
  padding: 6px 3px 3px 15px;
  border: 2px solid #e7e0f3;
  border-radius: 12px;
  margin-bottom: 9px;
  color: #86729C;
}

.master-entry-text {
  margin-right: auto;
  /* Pushes the text to the left */

}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.dropdown-content.show {
  max-height: 500px;
  /* Adjust based on content length */
}

.dd-toggle {
  display: flex;
  align-items: center;
  /* Vertically centers the icon */

}
/* 
.dropdown-menu {
  right: 0;
  left: auto;
  border: 2px solid slateblue;
} */

.table thead {
  background-color: #5a3e7b !important;
}

/***navbar***/
.profile-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #007bff;
}

/* .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;

  } */

.input-search i {
  color: gray;

}

.input-search {
  border: none;
  border-radius: 9px;
  padding: 3px;
  width: 27vw;
}

.form-group {
  background-color: #d9dbff;
  border-radius: 30px;
  padding: 3px;
}

.main-container header {
  width: 100%;
  height: 10vh;
  border-bottom: 2px solid darkgray;

}

.menu {
  display: none;
  /* Hidden by default */
  position: absolute;
  top: 60px;
  /* Adjust based on your header height */
  right: 0px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.exportMenu {
  display: none;
  /* Hidden by default */
  position: absolute;
  /* Position it relative to the button */
  right: 0;
  width: 10%;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  border-radius: 5px;
  /* Rounded corners */
}

.exportMenu.show {
  display: inline-block;
  /* Show the menu when toggled */
}

.exportMenu .ul {
  list-style: none;
  padding: 3px;
  margin: 0;
}



.exportMenu a {
  text-decoration: none;
  color: #333;
  display: block;
  /* Make the entire area clickable */
  padding: 4px 6px;
  /* Add padding for better click area */
  transition: background-color 0.2s;
  /* Smooth background transition */
}

.exportMenu a:hover {
  background-color: #f1f1f1;
  /* Change background on hover */
}

.export-option i {
  margin-right: 8px;
  /* Space between icon and text */
  font-size: 16px;
  /* Adjust icon size if needed */
}

#exportExcel i {
  color: #007A33;
  /* Green color for Excel */
}

#exportCSV i {
  color: #FFCC00;
  /* Yellow color for CSV */
}

#exportPDF i {
  color: #D50032;
  /* Red color for PDF */
}

.menu.show {
  display: block;
  /* Show the menu when toggled */
}

.menu ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.menu li {
  margin: 5px 0;
}

.menu a {
  text-decoration: none;
  color: #333;
}

.actionMenu {
  display: none;
  /* Hidden by default */
  position: absolute;
  top: 20px;
  /* Adjust based on your layout */

  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  border-radius: 5px;
  /* Rounded corners */
}

.actionMenu.show {
  display: inline-block;
  /* Show the menu when toggled */
}

.actionMenu ul {
  list-style: none;
  /* padding: 3px; */
  margin: 0;
}



.actionMenu a {
  text-decoration: none;
  color: #333;
  display: block;
  /* Make the entire area clickable */
  /* padding: 4px 6px; */
  /* Add padding for better click area */
  transition: background-color 0.2s;
  /* Smooth background transition */
}

.actionMenu a:hover {
  background-color: #f1f1f1;
  /* Change background on hover */
}

@media (max-width: 992px) {
  .main-container header {
      width: 100%;
      height: 8vh;
      margin-bottom: 80px;

  }

  .profile {
      margin-left: 13px;
  }

  .sidebar {
      margin-bottom: 0px;
  }

  .mq {
      padding: 5px;
  }

  .header-container {
      flex-direction: column;
      align-items: flex-start;
  }


  .menu {
      top: 70;
      right: 8;
      left: 50;
      width: 40%;
  }

  .input-search {
      width: 70vw;
  }


}

@media (max-width: 768px) {
  .main-container header {
      width: 100%;
      height: 8vh;
      margin-bottom: 80px;

  }

  .exportMenu {
      width: 30%;
  }

  .exportMenu a {
      padding: 1px 2px;
  }

  .profile {
      margin-right: 2px;
  }

  .sidebar {
      margin-bottom: 0px;

  }

  /* ***sidebar start*** */


  .side-ul .side-li a,
  .dd-toggle i,
  .side-ul li a span,
  .dd-toggle {
      text-decoration: none;
      /* color: rgb(150 150 150); */
      padding: 5px 30px;

  }

  .mq {
      padding: 3;
  }

  .header-container {
      flex-direction: column;
      align-items: flex-start;
  }


  .menu {
      top: 70;
      right: 8;
      left: 50;
      width: 40%;
  }

  .input-search {
      width: 30vw;
  }


}

@media (max-width: 576px) {
  .main-container header {
      width: 100%;
      height: 8vh;
      margin-bottom: 80px;

  }

  .exportMenu {
      width: 50%;
  }

  .exportMenu .ul {

      padding: 1px;

  }

  .profile {
      margin-left: 13px;
  }

  .sidebar {
      margin-bottom: 0px;
  }

  .mq {
      padding: 5px;
  }

  .header-container {
      flex-direction: column;
      align-items: flex-start;
  }


  .menu {
      top: 70;
      right: 8;
      left: 50;
      width: 40%;
  }

  .input-search {
      width: 60vw;
  }


}

/* .rounded-border {
  border: 1px solid #363636;
  border-radius: 30px;
} */

.Crew-text {
  color: #5a3e7b !important;
  font-weight: bold !important;
}

.table thead {
  color: #fff !important;

}

.table thead,
.table tbody {
  font-size: 11px;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* z-index: 1000; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: 60px;
}


.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
}


.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* ==========export================= */
.rounded-border {
  border: 1px solid #363636;
  border-radius: 30px;
  padding: 7px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #f8f9fa;
  transition: background-color 0.3s;
}

.rounded-border:hover {
  background-color: #e7e7e7;
}

.exit {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.exit:hover,
.exit:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.export-option {
  margin: 10px 0;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.export-option:hover {
  background-color: #e7e7e7;
}

.close {
  position: absolute;
  top: 20px;
  right: 300px;
  color: #EEE8E8;
  float: right;
  font-size: 45px;
  font-weight: bold;
}