body{
    background-color: #008080 !important;
    /* background-color: #3a8c8e !important; */
}

.navbar .navbar-nav .nav-item{
    padding: 0 10px;
}

.navbar {
    background-color: white; 
    box-shadow: 0 2px 5px rgba(13, 10, 190, 0.1);
    z-index: 999;
    border-bottom: 2px solid #f0f0f0; 
  }

.navbar .nav-link:hover {
    color: #00aeef; 
}


.navba .nav-item.active .nav-link {
    color: #008080; 
}

.navbar .nav-item.active .nav-link:hover {
    color: #008080; 
}


.dropdown-menu .dropdown-item{
    font-size: 13px;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    color: #008080 !important;
    background-color: white !important;
    border-bottom: 2px solid #008080;
}

/* Dropdown item hover style */
.dropdown-menu .dropdown-item:hover {
    color: #00aeef;
    background-color: white;
    border-bottom: 2px solid #00aeef;
   
}

.navbar .navbar-brand img{
  height: 40px; 
  margin-right: 10px;
  transition: height 0.3s ease;
}

@media (max-width: 1200px) {
  .navbar .nav-link {
    font-size: 13px;
  }
}

@media (min-width: 992px) {
    .navbar .nav-link {
        font-size: 13px;
    }
   .navbar .navbar-brand img {
       height: 50px;
   }
}
  .navbar .nav-link:hover {
    color: #00aeef; /* Light green for hover */
    border-bottom: 2px solid #00aeef; /* Underline on hover */
}

.navbar .nav-item.active .nav-link {
    color: #008080; /* Active color */
    border-bottom: 2px solid #008080; 
}

.navbar .nav-item.active .nav-link:hover {
    color: #008080; 
    border-bottom: 2px solid #008080; 
}

/* signup */

.input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.input-container .fa {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.password-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px; /* Adjust icon size if needed */
  }

input[type="password"]::-ms-reveal, 
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-clear-button, 
input[type="password"]::-webkit-inner-spin-button {
    display: none; /* Hides the default icon */
}
  


/* General Flash Message Styling */
.alert {
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 15px;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    display: none; /* Initially hidden for animation */
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Category-specific Colors */
.alert-success {
    background-color: #4CAF50; /* Green */
}

.alert-info {
    background-color: #2196F3; /* Blue */
}

.alert-warning {
    background-color: #FF9800; /* Orange */
}

.alert-danger {
    background-color: #f44336; /* Red */
}

/* Animation for Flash Message */
.animated-message {
    animation: slideDown 0.5s ease-in-out forwards;
}

 
@keyframes slideDown {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Show the message */
.alert.show {
    display: block;
    opacity: 1;
}

/* Optional fade-out effect */
.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out;
    visibility: hidden;
}


.table thead th{
    background-color: #008080;
    color: white;
}
.sort-icon{
    color: #a5a7a7; 
    cursor: pointer;
}



.suggestions { 
    margin-top: 100px;
    position: absolute; 
    background: white; 
    border: 1px solid #ccc; 
    width: 100%; 
    z-index: 1000; 
    max-height: 200px; 
    overflow-y: auto; 
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.suggestion-item { 
    padding: 8px 10px; 
    cursor: pointer; 
    font-size: 14px;
    transition: background 0.2s ease-in-out;
}

.suggestion-item:hover { 
    background: #f0f0f0; 
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    color: #999999 !important;
    margin: 5px 3px;

}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color: white !important;
    border-radius: 10px;
    background: transparent  !important;
    background-color: #008080  !important;

}

.fa ,.fa-eye ,.fa-eye-slash{
    background: linear-gradient(to left, #eeecec, #008080) ; 
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
}





/* input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(50%) sepia(100%) saturate(200%) hue-rotate(180deg);
    background: linear-gradient(to left, #eeecec, #007bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    mask: none;
} */

input[type]:focus {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 
    outline: none; 
}


select:focus {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important; 
    outline: none !important; 
}

.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-container select {
    width: 100%;
    padding-right: 40px; /* Space for the icon */
    appearance: none; /* Removes default dropdown arrow */
}

.select-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    pointer-events: none; /* Prevent clicking on the icon */
}



.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    
    color: white !important; /* Change text color */
    border-radius: 5px !important; /* Optional: Add rounded corners */
    cursor: pointer !important; /* Change the cursor to a pointer */
}






/* Default sorting styles */
.dataTables_wrapper .sorting,
.dataTables_wrapper .sorting_asc,
.dataTables_wrapper .sorting_desc {
    color: white !important;
}

/* Add spacing between top and bottom sort icons */
.dataTables_wrapper .sorting::before,
.dataTables_wrapper .sorting::after {
    color: white !important;
    content: ""; /* Placeholder for the pseudo-elements */
    display: block; /* Ensures they behave like block elements */
    margin: 5px 0; /* Add vertical space (top and bottom) */
}



.image-container {
    position: relative; /* Set position for layering */
    width: 40px; /* Set the container width */
    height: 40px; /* Set the container height */
    overflow: hidden; /* Ensure the image and gradient stay inside the container */
}

.image-container::after {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #eeecec, #007bff);  
    mix-blend-mode: overlay; /* Blend the gradient with the image */
    pointer-events: none; /* Prevent interaction with the gradient */
    z-index: 1; /* Ensure the gradient is on top */
}

.gradient-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scale the image correctly */
    z-index: 0; /* Keep the image below the gradient */
}


    /* Initially hide address column */
    .address-column {
        display: none;
    }

    /* Add a pointer cursor to indicate interactivity */
    .clickable {
        cursor: pointer;
        color: blue !important;
        text-decoration: underline;
    }

    .date-container {
        position: relative;
        width: 100%;
    }
    .date-container input {
        width: 100%;
        padding-right: 40px; /* Space for the icon */
        appearance: none; /* Remove default styling */
    }
    .date-container input::-webkit-calendar-picker-indicator {
        display: none; /* Hide default icon */
    }
    .date-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #555;
    }


   .btn-primary{
    background-color: #5d6d7e;
   }
    
    .scrollable-list {
        max-height: 150px;
        overflow-y: auto;
        border: 1px solid #ccc;
        padding: 5px;
    }
    

    input[type="checkbox"]:checked + label {
        color: #008080;
    }
    input[type="checkbox"]:checked {
        accent-color: #008080;
    }



    #membersTable_filter, #adminTable_filter, #adminTable_length{
        display: none; 
    }
    

    .count { 
        font-weight: bold;
        margin-top: 10px;
        color:#008080;
    }




    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: none;
        position: relative;
        width: 1.5rem;
        height: 1.5rem;
      }
      
      .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
      .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #2C742F;
        transform: rotate(45deg);
      }
      
        .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
          transform: rotate(-45deg);
        }
        
        /* Default toggler icon color (hamburger) */
        .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232C742F' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }


.analytics-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 1rem;
  }

  .analytics-card {
    flex: 1 1 100px;
    background-color: #008080;
    color: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 8px 5px rgba(0, 0, 0, 0.15);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  @media (hover: hover) {
  .analytics-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 128, 128, 0.35);
  }
}

  .analytics-card .label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 6px;
  }

  .analytics-card .value {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .analytics-card .sub-value {
    font-size: 0.95rem;
    font-weight: bold;
    margin-top: 4px;
  }

  @media (max-width: 480px) {
    .analytics-card {
      padding: 12px;
    }

    .analytics-card .label {
      font-size: 0.8rem;
    }

    .analytics-card .value {
      font-size: 1.1rem;
    }

    .analytics-card .sub-value {
      font-size: 0.9rem;
    }
  }

      .leaflet-tooltip.marker-label {
      background: #d35400;
      color: white;
      font-weight: bold;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
    }



.hidden-on-load {
    display: none;
}
.highlight-fence {
    
    border: 1px solid #008080 !important;
}

/* Centered spinner styling */
.spinner-container {
  background-color: rgba(0, 128, 128, 0.9); /* teal with transparency */
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0 20px rgba(0, 128, 128, 0.6);
}

/* Custom animated spinner */
.custom-spinner {
  width: 3rem;
  height: 3rem;
  border: 4px solid #ffffff;
  border-top: 4px solid #004d4d; /* darker teal */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.progress-bar {
    transition: width 0.4s ease;
}

.limitWarning{
    background: #fff3cd;
    color: #856404;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 0.95em;
}


.form-check-input {
  width: 2.5em;
  height: 1.3em;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: #28a745; /* green when ON */
  border-color: #28a745;
}