body {
  min-width: 300px;
  background-color: #e5e9e4;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.custom-small-text {
  font-size: 0.75rem;
  /* or any other size */
}

.smaller-text {
  font-size: 0.875rem;
  /* Adjust the size as needed */
}

.page-title {
  margin-top: 20px;
}


.custom-btn-fill-form {
  padding: 5px 10px;
  font-size: 8px;
}

/* From Data Table sytles */


/* Custom style for striped rows */
.table-striped tbody tr:nth-of-type(odd) {
  /* Light gray, adjust if needed 
       background-color: #f2f2f2;     */
  background-color: blue;
}

/* Custom style for hover effect */
.table-hover tbody tr:hover {
  background-color: #cce5ff;
  /* Light blue, adjust to make it distinct */
}

/* Adjust cell padding */

.custom-table td,
.custom-table th {
  padding: 2px 2px;
  /* Adjust the padding as needed */
}

/* Or adjust row height directly */
.custom-table tr {
  height: 10px;
  /* Or whatever height suits your design */
}

.custom-table {

  padding-left: 20px;

}


/* end of Data Table styles */

/* From Checkbox styles */

/* Style the checkbox group container */
.checkbox-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: whitesmoke;
}

/* Style the navigation links container */
.checkboxes {
  display: flex;
  align-items: center;
}

/* Style individual checkbox wrappers for horizontal layout */
.checkboxes>div {
  margin-right: 20px;
  /* Adjust spacing between checkboxes */
}

.separator {
  border-left: 1px solid #888686;
  /* Adjust color as needed */
  height: 20px;
  /* Adjust height to control the separator's size */
  display: inline-block;
  /* Ensure it aligns correctly with inline elements */
  /* margin: 0 2px;  */
  /* Space around the separator */
}

.query-button {
  padding: 5px 15px;
  /* Adjust padding as needed */
  cursor: pointer;
  /* Cursor pointer to indicate clickable */
}

/* Ensure the labels and icons are aligned properly */
.label-text {
  margin-right: 1px;
  /* Space between label text and icon */
}

/* Hide icons by default */
/*
  .label-icon {
    display: none;
  }
  */

.label-icon {
  font-size: 16px;
  /* Example size */
  color: #007bff;
  /* Example color, using Bootstrap's primary color */
}

/* End of checkbox styles */


/* From Responsive styles */

/* When the viewport is less than 500px wide */
@media (max-width: 600px) {

  /* Hide text labels */
  .label-text {
    display: none;
  }

  /* Show icons */
  .label-icon {
    display: inline-block;
  }

  /*
    .nav-links {
      gap: 20px;
    }
  */

}

@media (min-width: 1200px) {
  .additional-category {
    display: block !important;
    /* Or inline-block, depending on your layout */
  }

  #the-rest {
    display: none;
  }
}

/* End of Responsive styles */


.three-digit-input {
  width: 65px;
  /* Adjust based on your needs */
  max-width: 100%;
  /* Ensures responsiveness */
}


#cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  /*   gap: 1rem;*/
  padding: 0.5rem;
}

/* Use with the container to shrink the gutter */
.shrink-the-gutter {
  --bs-gutter-x: 0.5rem;
  /* Override horizontal gutter for this container */
  padding-right: 0px;
  padding-left: 0px;
}

.card-tight {
  margin-left: -10px;
  /* Negative margin to pull cards closer together */
  margin-right: -10px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}


.mr-custom {
  margin-right: 1rem;
  /* Adjust as needed */
}


.small-h2 {
  font-size: 1.5em;
  /* Adjust this value as needed */
  font-weight: bold;
}

/* 
* Custom CSS to align the first column to the right
 * Used in the dashboard.ejs file
*/

.dashboard-widget-table td:first-child {
  text-align: right;
}

.dashboard-widget-table tr {
  height: 2rem;
  /* Or whatever height suits your design */

}

.dashboard-widget-table td,
.dashboard-widget-table th {
  padding: 2px 2px;
  /* Adjust the padding as needed */

}


.custom-alert {
  margin-top: 20px;
}

#address-suggestions,
#siteAddress-suggestions {
  z-index: 1050;
  /* Ensures dropdown appears above other content */
  max-height: 300px;
  /* Adjust based on your needs */
  overflow-y: auto;
  /* Allows scrolling within the dropdown */
}

#address-suggestions .list-group-item,
#siteAddress-suggestions .list-group-item {
  background-color: #f0f0f0;
  /* Light gray background */
  color: #333;
  /* Darker text for contrast */
  border: 1px solid #ddd;
  /* Optional: adds a border to each item */
}

#address-suggestions .list-group-item:hover,
#siteAddress-suggestions .list-group-item:hover {
  background-color: #e9e9e9;
  /* Slightly darker gray on hover */
}

#address-suggestions .list-group-item:active,
#siteAddress-suggestions .list-group-item:active {
  background-color: #d9d9d9;
  /* Even darker gray to indicate active selection */
  color: #000;
  /* Optional: change text color for active state */
}

#address-suggestions .list-group-item.highlighted,
#siteAddress-suggestions .list-group-item.highlighted {
  background-color: #cce4ff;
  /* Blue background for highlighted items */
  color: #0056b3;
  /* Matching darker blue text for better readability */
}

.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center align the canvas and button container */
}

input[readonly] {
  border: none;
  background-color: transparent;
  /* Optional: to make the background match the surrounding */
}


.locked {
  background-color: #e9ecef;
  /* Light grey background */
  color: #6c757d;
  /* Grey text color */
  cursor: not-allowed;
  /* Change cursor to indicate non-editable */
}

.save-btn-enabled {
  border: 2px solid red;
}



/* Apply to the whole page */
body.loading {
  cursor: wait;  /* Standard loading cursor */
  
}

.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  /* Light white background */
  z-index: 1050;
  /* High z-index to cover the page */
}

    /* Hide the file input element visually */
    #fileInput {
      display: none;
  }

  h2 {
      font-size: 1.5rem;
  }

  .custom-bar {
      height: 6px;
      /* Increase the height to make the bar thicker */
      background-color: #bdbdbf;
      width: 100%;
      margin: 0;
      border-radius: 10px;
      /* Adjust the value to control the roundness */
  }

  .card-image {
      width: 100%;
      /* Adjusts width as a percentage of its containing card to maintain responsiveness */
      height: auto;
      /* Keeps the height proportional to the width */
      aspect-ratio: 1 / 1;
      /* Ensures the image stays square */
      object-fit: cover;
      /* Ensures the image covers the area without distortion */
      border: 1px solid #ddd;
      border-radius: 5px;
      /* Rounds the corners of the image */
      margin-bottom: 10px;
      /* Adds space between the image and any content below it */
  }