:root {

  /* Main color variable */
  --main-color: #509d67;
  --main-color-rgba-trans: rgba(80, 157, 103, 0.85);

  /* Light theme variables */
  --bg-color-light: #ffffff;
  --font-color-light: #000;
  --bs-border-light: #008f376b;
  --bs-form-light: #b6b6b6;
  --bg-color-gradient-light: linear-gradient(rgba(232,232,232,1) 0%, rgba(81,255,248,1) 25%, rgba(0,156,150,1) 58%, rgba(107,238,119,1) 100%);

  /* Dark theme variables */
  --bg-color-dark: #333;
  --font-color-dark: #fff;
  --bs-border-dark-: #495057;
  --bs-form-dark: #212529;
  --bg-color-gradient-dark: linear-gradient(rgba(2,0,36,1) 0%, rgba(0,156,150,1) 58%, rgba(89,199,99,1) 100%);

  --base-font-size: 16px;
  --font-scale-factor: 1vw;

  --header-color-gradient: linear-gradient(#51fff8 50%, #009c96 100%);
  --footer-light: #51fff8;
  --footer-dark: #009c96;
  --bs-border-width: 1px;
}

[data-bs-theme="light"] {
  --bs-body-bg: var(--bg-color-light);
  --bs-container-bg: #fff;
  --bs-accordion-bg: var(--bs-border-light);
  --bs-card-bg: var(--bs-gray-300);
  --bs-bg-gradient: var(--bg-color-gradient-light);
  --main-text-color: var(--font-color-light);
  --inverted-bg-color: var(--bg-color-dark);
  --inverted-text-color: var(--font-color-dark);
  --footer-color: var(--footer-light);

  --navbar-bg-color: var(--main-color);
  --navbar-text-color: var(--font-color-light);
  --nav-item-hover-text-color: #f8f9fa;

  --bs-font-color: var(--font-color-light);
  --label-color: var(--font-color-light);
  --input-background: var(--input-background-light);
  --input-text: var(--input-text-light);

  --form-border-color: var(--bs-border-light);
  --form-background-color: var(--bs-form-light);
  --bs-focus-ring-color: rgba(1, 99, 53, 0.25);
  --bs-border-color: #000;
  --bs-bg-gradient: var(--bg-color-gradient-light);

  --card-header-color: var(--bs-gray-500);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-color-dark);
  --bs-container-bg: var(--bs-form-dark);
  --bs-card-bg: var(--bs-form-dark);
  --bs-accordion-bg: var(--bs-form-dark);
  --bs-bg-gradient: var(--bg-color-gradient-dark);
  --main-text-color: var(--font-color-dark);
  --inverted-bg-color: var(--bg-color-light);
  --inverted-text-color: var(--font-color-light);
  --footer-color: var(--footer-dark);

  --navbar-bg-color: var(--main-color);
  --navbar-text-color: var(--bs-black);
  --nav-item-hover-text-color: #000000;

  --bs-font-color: var(--font-color-dark);
  --label-color: var(--font-color-dark);
  --input-background: var(--input-background-dark);
  --input-text: var(--input-text-dark);

  --form-border-color: var(--bs-border-dark);
  --form-background-color: var(--bs-form-dark);
  --bs-focus-ring-color: rgba(13, 253, 141, 0.25);
  --bs-border-color: #d7d7d7;
  --bs-bg-gradient: var(--bg-color-gradient-dark);
  --card-header-color: var(--bs-gray-700);
}

[data-bs-theme]{
  --inv-bg:#e9ecef;              /* light mode pill */
  --inv-fg:#343a40;
}
[data-bs-theme=dark]{
  --inv-bg:#495057;              /* dark mode pill */
  --inv-fg:#dee2e6;
}

/* pill by default */
.btn-outline-inverted{
  background:var(--inv-bg);
  color:var(--inv-fg);
  border:1px solid transparent;  /* lighter edge */
  border-radius:.5rem;
  transition:color .15s,background .15s;
}

/* link-like on hover / focus */
.btn-outline-inverted:hover,
.btn-outline-inverted:focus{
  background:transparent;                             /* drop the pill */
  color:var(--bs-link-hover-color,#0d6efd);           /* use Bootstrap’s link colour */
  text-decoration:underline;                          /* underline like a link */
  box-shadow:none;
}

/* optional: slim outline for keyboard users */
.btn-outline-inverted:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

.gradient-background {
  background: var(--bs-bg-gradient);
}

.masked-email {
  color: rgba(var(--bs-link-color-rgb));        /* Bootstrap's default link color */
  text-decoration: underline;
  cursor: pointer;
}

.footer-color {
  background-color: var(--footer-color);
  color: var(--main-text-color);
}

.custom-table thead th,
.custom-table.table thead th {
    background-color: var(--main-color);
    color: var(--main-text-color) !important;
}

/* Give the entire dropdown container a visible border */
.select2-container--bootstrap-5 .select2-dropdown {
  border: 2px solid var(--inverted-text-color); /* or your preferred color */
}

/* Optionally, style the inner <ul> that holds the options */
.select2-container--bootstrap-5 .select2-results__options {
  border: 2px solid var(--inverted-text-color); /* or your preferred color */
}

.select2-container--default .select2-selection--single {
  background-color: var(--bs-body-bg) !important;
  color: var(--main-text-color) !important;
}

.select2-selection__arrow {
    color: var(--main-text-color) !important;
}

.select2-selection__clear {
    color: var(--main-text-color) !important;
}

.select2-selection__choice {
    background-color: var(--main-color) !important;
    color: var(--main-text-color) !important;
}

.select2-results__option {
    background-color: var(--form-background-color) !important;
    color: var(--main-text-color) !important;
}

.select2-search--dropdown {
  background-color: var(--form-background-color) !important;
  border-color: var(--bs-body-bg) !important;
  border-radius: var(--bs-border-radius);
}

.select2-selection__choice__remove {
  color: var(--main-text-color) !important;
}

.select2-results__option--highlighted {
    background-color: var(--main-color) !important;
    color: var(--main-text-color) !important;
}

.select2-results {
  background-color: var(--form-background-color) !important;
  color: var(--main-text-color) !important;
}

/* Add custom class for aria-expanded */
.select2-container[aria-expanded="true"] .select2-selection--multiple {
    background-color: var(--form-background-color) !important;
    border-color: var(--bs-body-bg) !important;
    border: 1px solid var(--form-border-color) !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: inline-flex !important;
  overflow: hidden !important;
  padding-left: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  margin-top: -3px !important;
}

/* Add custom class for aria-expanded */
.select2-container .select2-selection--multiple,
.select2-selection .select2-selection--multiple {
  display: flex !important;
  background-color: var(--form-background-color) !important;
  border-color: var(--form-border-color) !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--main-color) !important;
    color: var(--main-text-color) !important;
    border: 2px solid var(--form-border-color) !important;
}

.custom-fieldset-title > legend {
  font-size: 2.5em; /* Adjust the font size as needed */
  font-weight: bold; /* Optional: make the text bold */
  margin-bottom: 2rem; /* Optional: add some space below the title */
}

.distribution-format {
  font-size: 2.5em; /* Adjust the font size as needed */
  font-weight: bold; /* Optional: make the text bold */
  margin-bottom: 2rem; /* Optional: add some space below the title */
}

.custom-background {
  /* background: linear-gradient(#868686, var(--main-color)); */
  background: var(--bs-container-bg);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.card.profile-card {
  color: var(--bs-bg-gradient) !important;
}

h1 {
  color: var(--main-text-color);
  font-size: calc(2rem + 3vw);
  padding: 10px 0;
}

body h2 {
  font-size: calc(2rem + 1.5vw);
}

.h3 {
  padding: 10px 0;
  font-size: calc(1rem + 1.5vw);
  border-color: var(--inverted-text-color);
}

body h4 {
  /* color: var(--main-color); */
  font-size: calc(1rem + .75vw);
  padding: 10px 0;
}

body h5 {
  color: var(--main-text-color);
  font-size: calc(1rem + .5vw);
  padding: 10px 0;
}

body h6 {
  background: var(--main-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 10px 0;
  font-size: calc(1rem + 0.35vw);
  -webkit-text-stroke: .3px var(--inverted-text-color); /* Add a white border around the text */
}

/* Ensure images are fluid and responsive */
.custom-img-lg {
  min-height: 100px; /* Default min-height */
  min-width: 100x; /* Default min-width */
}

/* Custom CSS for all form elements */
form label {
  font-size: calc(1rem + 1vw);
}

form input, form select, form textarea {
  font-size: calc(1rem + 1vw);
}

form .form-text {
  font-size: calc(0.875rem + 0.75vw);
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
  form label,
  form input,
  form select,
  form textarea,
  form .form-text {
      font-size: calc(0.875rem + 1.5vw);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  form label,
  form input,
  form select,
  form textarea,
  form .form-text {
      font-size: calc(0.875rem + 1vw);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  form label,
  form input,
  form select,
  form textarea,
  form .form-text {
      font-size: calc(0.875rem + 0.75vw);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  form label,
  form input,
  form select,
  form textarea,
  form .form-text {
      font-size: calc(0.875rem + 0.5vw);
  }
}

@media (min-width: 1200px) {
  form label,
  form input,
  form select,
  form textarea,
  form .form-text {
      font-size: calc(0.875rem + 0.25vw);
  }
}

.navbar {
  background-color: var(--navbar-bg-color);
  color: var(--main-text-color);
  border: 3px solid var(--main-color);
  z-index: 1000; /* Ensure the navbar is on top */
  position: relative;
}

.nav-link {
  background-color: var(--navbar-bg-color);
  color: var(--main-text-color);
  z-index: 1000; /* Ensure the navbar is on top */
  position: relative;
}

.nav-link:hover {
  color: var(--nav-item-hover-text-color) !important;
  background-color: var(--navbar-bg-color);
  z-index: 1000; /* Ensure the navbar is on top */
  position: relative;
}

.dropdown-submenu .dropdown-item:hover,
.dropdown-submenu .dropdown-item:focus {
    background-color: var(--main-color) !important;
    color: white !important;
}

/* Also target the regular dropdown items */
.dropdown-menu > .dropdown-item:hover,
.dropdown-menu > .dropdown-item:focus {
    background-color: var(--main-color) !important;
    color: white !important;
}

@media (max-width: 767px) {
    .custom-small-text {
        font-size: 10px;
    }
}


.toggle-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
  margin-top: 20px;
}


.page-link, .dt-info {
  color: var(--main-color);
  font-style: bold;
}

.page-link {
  color: var(--main-color);
}

.page-link.active {
  background-color: var(--main-color);
  color: var(--main-text-color);
  font-style: bold;
}

.dt-paging-button, .page-item {
  color: var(--main-color);
  font-style: bold;
}

.dt-paging-button .page-item .active {
  background-color: var(--main-color) !important;
  color: var(--main-text-color) !important;
  font-style: bold;
}

#searchBoxContainer {
  display: flex;
  justify-content: center;
  margin-bottom: 1em; /* Adjust as needed for spacing */
}

.dataTables_wrapper .dataTables_filter {
  width:100%;
  text-align:center;
}

.form-control .form-text {
  color: var(--main-text-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
}

.legal-notice-border {
    font-size: 8px !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.legal-notice-border:hover {
    font-size: 8px !important;
    background-color: rgb(255, 255, 255) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 767px) {
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

#transparent-background {
  background-color: rgba(0, 0, 0, 0.7);
}

.input {
  color: var(--input-text-inverted);
}

.form-label {
  color: var(--label-color);
}

ul {
  margin: 0;
}

.container-padding {
  padding-left: 50px;
  padding-right: 50px;
}

.bg-steel {
  background-color: #509d67;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}


/* [data-bs-theme="dark"] .btn-success:not(.pagination-link) {
  background-color: #509d67;
  border-color: #509d67;
  color: #ffffff;
}

[data-bs-theme="light"] .btn-success:not(.pagination-link) {
  background-color: #509d67;
  border-color: #509d67;
  color: #333;
} */

.mt-6{margin-top:5rem;}
#mt-6{margin-top:5rem;}

.mb-6{margin-bottom:5rem;}
#mb-6{margin-bottom:5rem;}

.m-6{margin-top:5rem;
  margin-bottom:5rem;
  margin-right:5rem;
  margin-left:5rem;
}

#m-6{margin-top:5rem;
  margin-bottom:5rem;
  margin-right:5rem;
  margin-left:5rem;
}

.mt-10{margin-top:20rem;}
#mt-10{margin-top:20rem;}

.mb-10{margin-bottom:20rem;}
#mb-10{margin-bottom:20rem;}

.m-10{margin-top:20rem;
  margin-bottom:20rem;
  margin-right:20rem;
  margin-left:20rem;
}

#m-10{margin-top:20rem;
  margin-bottom:20rem;
  margin-right:20rem;
  margin-left:20rem;
}

.dt-info {
  color: var(--main-text-color);
  font-style: bold;
}

.responsive-img {
  width: 2rem; /* or any value you prefer, like 10rem */
  height: 200px; /* Optional: Set a maximum height */
}

.current-page {
  background-color: green;
  color: white;
}

.pagination-link {
  background-color: transparent;
  color: #509d67;
  font-size: 20px;
  font-style: bold;
}

.pagination-container {
  text-align: center;
  margin-inline: auto;
  font-size: 20px;
  font-style: bold;
}

.pagination-link:hover {
  background-color: green;
  color: white;
  font-style: bold;
}

.page-current {
  display: block;
  background-color: #509d67;
  color: white;
  font-size: 12px;
  margin-top: 3px;
  margin-bottom: 3px;
  font-style: bold;
}

.page-link {
  font-style: bold;
}

.button-container a {
  margin: 0;
}

a.btn.btn-outline-info.btn-extra-sm {
  padding: .2rem .3rem;
  font-size: .8rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.border-top.pt-3 {
  display: flex;
  justify-content: space-between;
}

#form-set .item:first-child .delete-form {
  visibility: hidden;
}

.custom-toggler {
  background-color: #509d67;
  font-size: 20px;
  color: #000;
  box-sizing: border-box;
  right: 30x;
  top: -20px;
}

.content-container {
  display: flex;
  justify-content: space-between;
}

.alert {
  color: #000 !important; /* Black text */
  background-color: #f8f9fa !important; /* Light background */
}

.alert-success {
  color: #155724 !important;
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}

.alert-danger {
  color: #721c24 !important;
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
}

.alert-warning {
  color: #856404 !important;
  background-color: #fff3cd !important;
  border-color: #ffeeba !important;
}

.alert-info {
  color: #0c5460 !important;
  background-color: #d1ecf1 !important;
  border-color: #bee5eb !important;
}



[data-bs-theme="light"] .home-content {
  background-color: var(--bs-gray-200);
}

[data-bs-theme="dark"] .home-content {
  background-color: #505050;
}

.title {
  margin: 0;
  margin-bottom: .5rem;
}

.size-column {
  max-width: 250px;
  align-items: center;
  justify-content: center;
}
.form-check {
  display: flex; /* Ensures label and checkbox are on the same line */
  align-items: center; /* Centers checkbox and label vertically */
  margin-bottom: 0; /* Minimizes space between rows */
}
.form-check-label {
  white-space: nowrap; /* Prevents the label from wrapping */
  font-size: 0.85em; /* Adjusts font size to fit better */
  margin-left: 5px; /* Space between checkbox and label */
}
.form-check-input {
  margin-top: 0; /* Aligns checkbox top with the label */
  margin-right: 4px; /* Space before the label */
}
#size-column-col-6 {
  padding-right: 5px; /* Right padding within each column */
  padding-left: 5px; /* Left padding within each column */
}

#h-centered {
  text-align: center;
  margin-top: 20px;
  width: 100%;
}

#h6-centered #h2-centered, #h3-centered #h1-centered{
  text-align: center;
  margin-top: 20px;
}

.card-title {
  text-align: center;
  color: var(--main-color);
  padding: 10px; /* Adjust the padding value as needed */
  display: block;
  border-color: var(--inverted-text-color);
  /* Allow multi‐line wrapping (no forced breaks in the middle of words) */
  white-space: normal;        /* ensures wrapping */
  word-break: keep-all;       /* never break inside words */
  overflow-wrap: normal;      /* or “break-word” if you DO want mid‐word breaks */
}

.genus-species-card {
  text-align: center;
  color: #509d67;
  font-weight: bold;
}

.card-view {
  min-height: 1200px;

}

.cover-image {
  height: 100vh; /* Viewport height */
  width: 100%;
  background-size: cover;
  background-position: center;
  position: fixed; /* Keep it fixed during scrolling */
  top: 0;
  left: 0;
  z-index: -1; /* Ensures content scrolls over the image */
  transition: opacity 0.5s ease-out;
}

.species-name {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2em;
  color: white;
  /* Add more styling as needed */
}

.content {
  margin-top: 100vh; /* Push content below the viewport height */
}


.bottom-margin {
  margin-bottom: 100px; /* Adjust this value as needed */
}

.margin-top {
  margin-top: 100px; /* Adjust this value as needed */
}

@media (max-width: 768px) {
  .bottom-margin {
      margin-bottom: 150px; /* Increase the margin for smaller screens */
  }
}

[data-theme="light"] .bi .bi-arrow-down-left .bi-arrow-down-right .svg-icon {
  font: #000000;
}

[data-theme="dark"] .bi .bi-arrow-down-left .bi-arrow-down-right .svg-icon {
  font: #ffffff;
}

/* Responsive table font sizing for all DataTables */
.table,
.dataTable,
table.dataTable {
    font-size: calc(0.875rem + 0.5vw);
}

.table th,
.table thead th,
.dataTable th,
.dataTable thead th,
table.dataTable th,
table.dataTable thead th {
    font-size: calc(1rem + 0.6vw);
    font-weight: 600;
}

.table td,
.table tbody td,
.dataTable td,
.dataTable tbody td,
table.dataTable td,
table.dataTable tbody td {
    font-size: calc(0.875rem + 0.5vw);
    line-height: 1.4;
}

.table small,
.dataTable small,
table.dataTable small {
    font-size: calc(0.75rem + 0.4vw);
}

/* DataTables specific elements */
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate {
    font-size: calc(0.875rem + 0.4vw);
}

/* Adjust for different screen sizes */
@media (min-width: 1200px) {
    .table,
    .dataTable,
    table.dataTable {
        font-size: calc(1rem + 0.3vw);
    }
    .table th,
    .table thead th,
    .dataTable th,
    .dataTable thead th,
    table.dataTable th,
    table.dataTable thead th {
        font-size: calc(1.1rem + 0.4vw);
    }
    .table td,
    .table tbody td,
    .dataTable td,
    .dataTable tbody td,
    table.dataTable td,
    table.dataTable tbody td {
        font-size: calc(1rem + 0.3vw);
    }
    .table small,
    .dataTable small,
    table.dataTable small {
        font-size: calc(0.85rem + 0.25vw);
    }
    .dataTables_info,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_paginate {
        font-size: calc(0.9rem + 0.3vw);
    }
}

@media (min-width: 1600px) {
    .table,
    .dataTable,
    table.dataTable {
        font-size: calc(1.1rem + 0.2vw);
    }
    .table th,
    .table thead th,
    .dataTable th,
    .dataTable thead th,
    table.dataTable th,
    table.dataTable thead th {
        font-size: calc(1.2rem + 0.3vw);
    }
    .table td,
    .table tbody td,
    .dataTable td,
    .dataTable tbody td,
    table.dataTable td,
    table.dataTable tbody td {
        font-size: calc(1.1rem + 0.2vw);
    }
    .table small,
    .dataTable small,
    table.dataTable small {
        font-size: calc(0.9rem + 0.15vw);
    }
    .dataTables_info,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_paginate {
        font-size: calc(1rem + 0.2vw);
    }
}

/* For very large screens */
@media (min-width: 2000px) {
    .table,
    .dataTable,
    table.dataTable {
        font-size: calc(1.2rem + 0.15vw);
    }
    .table th,
    .table thead th,
    .dataTable th,
    .dataTable thead th,
    table.dataTable th,
    table.dataTable thead th {
        font-size: calc(1.3rem + 0.2vw);
    }
    .table td,
    .table tbody td,
    .dataTable td,
    .dataTable tbody td,
    table.dataTable td,
    table.dataTable tbody td {
        font-size: calc(1.2rem + 0.15vw);
    }
    .table small,
    .dataTable small,
    table.dataTable small {
        font-size: calc(1rem + 0.1vw);
    }
    .dataTables_info,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_paginate {
        font-size: calc(1.1rem + 0.15vw);
    }
}