body {
  height: 100vh;
  margin: 0;
  overflow-y: hidden;
  
}

.container-fluid {
  width: 100%;
  max-height: 100vh;
  margin: 0 auto;
  background-color: fafafa;
  padding: 20px;
  padding-top: 0;
  padding-bottom: 0;
 
  
  
  
}



.column-1 {
  width: 40%;
  padding: 20px;
  
  
}



#search-input {
  width: 90%;
  padding: 6px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 2rem;
}

#department-checkboxes {
  margin-top: 10px;
}

#department-checkboxes label {
  margin-bottom: 10px;
  font-weight: bold;
}

#department-checkboxes input[type="checkbox"] {
  margin-right: 10px;
}

.column-1-sidebar {
  width: 40%;
  flex-basis: 30%;
  padding: 20px;
  
}

#search-form-sidebar {
  margin-bottom: 20px;
  margin-top: 40px;
}

#search-input-sidebar {
  width: 90%;
  padding: 6px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 2rem;
}

#department-checkboxes-sidebar {
  margin-top: 10px;
}

#department-checkboxes-sidebar label {
  margin-bottom: 10px;
  font-weight: bold;
}

#department-checkboxes-sidebar input[type="checkbox"] {
  margin-right: 10px;
}

.checkbox-wrapper {
  margin-bottom: 0.5rem;
}

.search-filters-title {
  margin-bottom: 1rem;
}

#sort-dropdown {
  margin-bottom: 1rem;
  width: 80%;
  
  
}

.sort-dropdown-div {
  width: 100%;
  display: flex;
  justify-content: center;
}

.departments-title {
  margin-bottom: 1rem;
}



.header {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-bottom: 2rem;
  
  
  

}

.btn-primary {
  background-color: #0CAFFF;
  border: none;
}


.column-1 {
  padding: 10px;
  margin-top: 33px;
  width: 25%;
  padding-left: 7px;
  
  
}


.column-2 {
  padding-top: 10px;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
  margin-top: 2rem;
  
  
  
  
}

.table-data, .department-table-data, .location-table-data {
  overflow-y: auto;
  height: calc(100vh - 140px);
  border-right: 1px solid lightgrey;
  border-left: 1px solid lightgrey;

}

.table-data tr:hover, .department-table-data tr:hover, .location-table-data tr:hover {
  background-color: #9AD7F6;
}


.column-2 tr {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 0.846rem;
  padding-bottom: 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid lightgrey;
  padding-left: 0.2rem;
}

.column-2 td {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  border: none;
  
}

.column-2 td h5,
.column-2 td p {
  margin: 0;
}

.column-2 td h5 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}



.column-2 td p {
  color: grey;
}

.column-3 {
  padding: 10px;
  padding-top: 5px;
  height: 100%;
  padding-bottom: 2em;
  
}


.column-2,
.column-3 {
  background-color: white;
 
  
}

.card {
  height: auto;
}
.table-data::-webkit-scrollbar, .department-table-data::-webkit-scrollbar, .location-table-data::-webkit-scrollbar, .department-personnel-wrapper::-webkit-scrollbar, .location-departments-div::-webkit-scrollbar {
  width: 10px;
  
}


.table-data::-webkit-scrollbar-track, .department-table-data::-webkit-scrollbar-track, .location-table-data::-webkit-scrollbar-track, .department-personnel-wrapper::-webkit-scrollbar-track, .location-departments-div::-webkit-scrollbar-track {
  background: #f1f1f1; 
}


.table-data::-webkit-scrollbar-thumb, .department-table-data::-webkit-scrollbar-thumb, .location-table-data::-webkit-scrollbar-thumb, .department-personnel-wrapper::-webkit-scrollbar-thumb, .location-departments-div::-webkit-scrollbar-thumb {
  background: grey;
}



.active-row, .department-active-row, .location-active-row {
  background-color: #9AD7F6;
  
}

.active-row h5, .department-active-row h5, .location-active-row h5 {
  color: white;
}

#add-employee-button, #add-department-button, #add-location-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
 
}


#preloader {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.card {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: none;
  
}

.card-body {
  padding: 1rem;
  padding-top: 2em;
  width: 81%;
}

.card-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  
}

.card-primary, .department-card-primary, .location-card-primary {
  border-bottom: 1px solid lightgrey;
  padding-bottom: 1em;
  padding-top: 2em;

}

.department-card-primary, .location-card-primary  {
  padding-top: 5em;
  padding-bottom: 0;
}

.card-primary {
  padding-top: 3em;
}



.department-card-primary {
  display: flex;
  justify-content: space-between;
}



.card-email {
  color: grey;
}

.department-location-wrapper, .department-personnel-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  color: black;
  
 
}

.department-personnel-wrapper {
  margin-top: 0;
}

#details-department, #details-location {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  
  
  
  

  
}

.department-info {
  color: #0CAFFF;
  font-size: 1.2rem;
}

.toggle-sidebar {
  margin-top: 10px;
  margin-right: 1rem;
}



i {
  margin-right: 0.5rem;
}

i.fa-search, i.fa-sync-alt {
  margin-right: 0.5rem;
}



.add-div {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  

}

.column-1 {
  transition: width 0.3s ease;
}






@media (max-width: 299px) {
  #search-form-mobile {
    display: none;
  }
}

@media (min-width: 300px) and (max-width: 767px) {
  #search-form-mobile {
    display: flex;
  }
}




@media (max-width: 767px) {
 
  
  .container-fluid {
    padding-top: 20px;
    height: auto;
  }

  
  .column-1 {
    display: none;
  }
  .column-2 {
    width: 100% !important;
    margin-top: 0;
    padding-top: 0;
  }

  .table-data {
    width: 100%;
  }

  .header {
    display: none;
  }

  .active-row, .department-active-row, .location-active-row {
    background-color: transparent;
    
  }

  .active-row h5, .department-active-row h5, .location-active-row h5 {
    color: black;
  }

  .table-data tr:hover, .department-table-data tr:hover, .location-table-data tr:hover  {
    background-color: transparent;
  }

  .column-3 {
    width: 84%;
    padding-bottom: 0;
    height: calc(100vh - 80px);
    margin: 0 auto;
  } 

  .card {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   height: calc(100vh - 85px);
   
  }

  .card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    height: calc(100vh - 25px);
    
  }

  .card-primary {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    

    
    font-size: 1.3rem;
  }

  .card-title {
    font-size: 1.5rem;
    
  }

  #search-form-mobile {
    display: flex;
    justify-content: center;
  }
  #edit-button, #delete-button{
    width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
  }

  .department-location-wrapper {
    display: flex;
    flex-direction: column;

  }





  #details-department, #details-location {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 1rem;
    
    
    
    

    
  }

  .department-info {
    color: #0CAFFF;
    font-size: 1.2rem;
  }

  #details-department {
    border-bottom: 1px solid lightgrey;
    margin-bottom: 0;

  }

  .add-div2 {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    
  }

  

  .add-text {
    color: #0CAFFF;
  }

 
  
.column-1-sidebar {
  width: 80%;
}
 


 
}



.edit-buttons-mobile {
  width: 200px;
  display: flex;
  justify-content: space-between;
}





#search-filters-mobile-button {
  width: 40%;
  margin-bottom: 1rem;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
 

}

.dropdown {
  margin-left: 1rem;
}








@media (max-width: 991px) {
  
 

 

  
  .department-info {
    font-size: 1.1rem;
  }

  
}

@media (max-width: 1024px) {
  
 

  .card-body {
    width: 100%;
  }

  


  
}




#collapsed-sidebar {
  position: fixed;
  top: 0;
  left: -100%; 
  width: 100%;
  height: 100vh;
  background-color: #f8f9fa;
  transition: left 0.3s ease-in-out;
  z-index: 1000;
}

@media (min-width: 768px) {
  #collapsed-sidebar {
    width: 80%;

  }
}

#collapsed-sidebar.active {
  left: 0; 
}

.close-sidebar {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: #000;
  font-size: 20px;
  cursor: pointer;
}

.close-sidebar:hover {
  background: transparent;
  border: none;
  color: grey;
  
}



body.sidebar-open {
  overflow: hidden;
  pointer-events: none;
}

body.sidebar-open #collapsed-sidebar {
  pointer-events: auto;
}


body.inactive-background {
  overflow: hidden;
  pointer-events: none;
}

body.inactive-background:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 999;
}

body.inactive-background #collapsed-sidebar {
  pointer-events: auto;
}



#alert, #alert-container {
  position: fixed;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px; 
  z-index: 1000;
}

@media (max-width: 768px) {
  #alert, #alert-container {
    width: 100%;
    
}
}

#alert-container .alert {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: flex;
  align-items: center;
}

#alert-container .alert.show {
  opacity: 1;
}

#alert-container .alert-message {
  flex-grow: 1;
  margin-right: 10px;
}

#alert-container .btn-close {
  align-self: center;
}


.department-personnel-wrapper, .location-departments-div, .location-personnel-div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  height: 400px;
  overflow-y: auto;
}



#details-department-personnel {
  font-size: 1.1rem;
}

#details-department-personnel-email {
  color: #0CAFFF;
  font-size: 0.8rem;
}

.department-personnel-title{
  border-bottom: 1px solid lightgrey;
  margin-bottom: 0;
  padding-bottom: 1rem;
}



.personnel-info {
  display: flex;
  flex-direction: column;
}

.department-personnel-wrapper .card-text:nth-child(1) {
  margin-bottom: 0;
}

.department-card-body, .location-card-body {
  width: 81%;
  margin-left: 1rem;
}

.location-personnel-title {
  margin-top: 2rem;
  margin-bottom: 0;
}



.location-personnel-wrapper p.card-text {
  margin-bottom: 1.5rem;
  font-size: 20px;
  color: #0CAFFF;


}

.department-personnel-wrapper .card-text:nth-child(1), .location-personnel-div .card-text:nth-child(1)  {
  margin-top: 2rem;
}

.navbar {
  background-color: #0CAFFF;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar-div {
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}




.sidebar {
  width: 100%;
  padding: 0;
  padding-top: 32px;
}

.sidebar-row {
  display: flex;
  align-items: center; 
  width: 100%;
  text-align: left;
  background-color: transparent;
  padding: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  cursor: pointer;
  border-bottom: 1px solid lightgrey;
}

.sidebar-row:hover {
  background-color: lightgrey;
}

.sidebar-row.focused-row {
  background-color: #9AD7F6;
  color: white;
}

.sidebar-row:nth-child(2) i, .sidebar-row:nth-child(3) i {
  margin-right: 1.7rem;

}

.search-input {
  width: 400px;
  margin-right: 10px;
  margin-left: 100px;
}

.sidebar i {
  margin-right: 20px;
}


.locations-personnel-title {
  border-bottom: 1px solid lightgrey;
  padding-bottom: 10px;
}

.location-departments-div, .location-personnel-div  {
  height: 400px;
  overflow-y: auto;
}

#location-departments-name {
  margin-top: 2rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid lightgrey;
}

.department-location-info:nth-child(2) {
  margin-top: 0;
}

.department-location-info p {
  margin-bottom: 0;
}

.department-location-info p:nth-child(2) {
  color: #0CAFFF;
  font-size: 15px;
} 

#location-departments-div {
  max-height: 500px;
}

.department-location-info p:nth-child(1)  {
  margin-top: 2rem;
}

.department-card-primary, .card-primary, .location-card-primary {
  display: flex;
  justify-content: space-between;
  
}

.edit-buttons {
  width: 200px;
  height: 35px;
  display: flex;
  justify-content: flex-end;

}

.department-card-primary .edit-buttons, .location-card-primary .edit-buttons {
  margin-bottom: 0.5rem;
}

#department-edit-button, #location-edit-button, #edit-button {
  margin-right: 0.8rem;
}

.table-data, .department-table-data, .location-table-data {
  border-top: 1px solid lightgrey;
}



.search-button {
  margin-right: 1rem;
}

@media (max-width: 992px) {
  

  .search-input {
    width: 300px;
    margin-left: 10px;
  }

  .search-button {
    margin-right: 0.5rem;
  }

  .card-body, .department-card-body, .location-card-body {
    width: 100%;
  }

  

  
}



@media (max-width: 768px) {


  
  

  .table-data, .department-table-data, .location-table-data {
    border-right: 0;
    border-left: 0;
    height: calc(100vh - 190px);
  }
  #personnel-count {
    display: none;
  }





.dropdown-parent-container {
  width: 100%;
  display: flex;
  justify-content: center;

  }
.dropdown-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  
}



.navbar-div {
  width: 100%;
  display: flex;
  justify-content: space-between;

}

.navbar-div:nth-child(1), .navbar-div:nth-child(2) {
  width: 0;
}




.dropdown-menu {
  display: none;
  
}

.card-primary {
  padding-top: 2em;

}


.dropdown-menu.dropdown-menu-left {
  text-align: left;
}

.edit-buttons .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header .btn {
  margin-right: 0.5rem;
}



#search-form-mobile {
  margin-bottom: 1rem;
  width: 100%;
  
}

.search-input {
  width: 100%;
  
}

#personnel-count, #department-count, #location-count {
  margin-top: 1rem;
}




}
@media (min-width: 768px) and (max-width: 1200px) {
  .table-data {
    height: calc(100vh - 200px);
  }
}

.header {
  width: 100%;
  height: 50px;
  margin-top: 1rem;
  margin-bottom: 0;
  padding-right: 10px;
  border-bottom: 1px solid lightgrey;
}

@media(max-width: 320px){ 
  #search-form-mobile {
    display: none;
  }
}

.column-3 {
  display: block;
}

.table-data td, .department-table-data td, .location-table-data td {
  background-color: transparent;
}

@media (min-width: 1400px) {
  .container {
      max-width: 1140px;
  }
  .add-buttons {
    width: 500px;
    display: flex;
    justify-content: space-evenly;
  }
}

#add-employee-button-mobile, #add-employee-button-xl, #add-employee-button {
  margin-right: 1rem;
}

#add-department-button-mobile, #add-department-button-xl, #add-department-button {
  margin-right: 1rem;
}

#add-location-button-mobile, #add-location-button-xl, #add-location-button {
  margin-right: 1rem;
}

#back-button {
  margin-left: 1rem;
}


.alert.custom-alert {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.alert.custom-alert.hide {
  opacity: 0;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .column-2 {
    width: 40%;
  }

  .column-3 {
    width: 60%;
  }
}

.header-button {
  cursor: pointer;
  margin-right: 0.5rem;
  
}




.footer {
  position: fixed;
  bottom: 0;
}

@media (max-width: 1200px) {

  .container-fluid {
    padding-left: 17px;
  }
}

.header-button {
  background-color: transparent;
  color: #0d6efd;
}

#personnel-change-button-header.active {
  background-color: #0d6efd;
  color: white;
}

#department-change-button-header.active {
  background-color: #0d6efd;
  color: white;
}

#location-change-button-header.active {
  background-color: #0d6efd;
  color: white;
}

#personnel-change-button-header:not(.active) {
  background-color: transparent;
  color: #0d6efd;
}

#department-change-button-header:not(.active) {
  background-color: transparent;
  color: #0d6efd;
}

#location-change-button-header:not(.active) {
  background-color: transparent;
  color: #0d6efd;
}


.no-results {
  pointer-events: none;
}