:root {
  --text-color: #121921;
  --background-color: #fbfbfe;
  --primary-color: #2b3d50;
  --secondary-color: #bee9e4;
  --accent-color: #60be9f;
  --accent-contrast-color: #ec9967; /*rgb(190, 124, 96);*/
  --accent-hover-color: rgb(190, 124, 96);

  /* Colors */
  --text: #121921;
  --bg: #fbfbfe;
  --primary: #2b3d50;
  --secondary: #bee9e4;
  --accent: #60be9f;
  --textcontrast: #64d97b;
  --bgcontrast: #64d97b;
  --primarycontrast: #64d97b;
  --secondarycontrast: #64d97b;
  --accentcontrast: #64d97b;

  --text5: hsl(212, 29%, 10%, 5%);
  --text10: hsl(212, 29%, 10%, 10%);
  --text15: hsl(212, 29%, 10%, 15%);
  --text20: hsl(212, 29%, 10%, 20%);
  --text25: hsl(212, 29%, 10%, 25%);
  --text30: hsl(212, 29%, 10%, 30%);
  --text35: hsl(212, 29%, 10%, 35%);
  --text40: hsl(212, 29%, 10%, 40%);
  --text45: hsl(212, 29%, 10%, 45%);
  --text50: hsl(212, 29%, 10%, 50%);
  --text55: hsl(212, 29%, 10%, 55%);
  --text60: hsl(212, 29%, 10%, 60%);
  --text65: hsl(212, 29%, 10%, 65%);
  --text70: hsl(212, 29%, 10%, 70%);
  --text75: hsl(212, 29%, 10%, 75%);
  --text80: hsl(212, 29%, 10%, 80%);
  --text85: hsl(212, 29%, 10%, 85%);
  --text90: hsl(212, 29%, 10%, 90%);
  --text95: hsl(212, 29%, 10%, 95%);

  --primary-100: color-mix(in srgb, var(--primary), #fff 40%);
  --primary-200: color-mix(in srgb, var(--primary), #fff 30%);
  --primary-300: color-mix(in srgb, var(--primary), #fff 20%);
  --primary-400: color-mix(in srgb, var(--primary), #fff 10%);
  --primary-500: var(--primary); /* primary color */
  --primary-600: color-mix(in srgb, var(--primary), #000 10%);
  --primary-700: color-mix(in srgb, var(--primary), #000 20%);
  --primary-800: color-mix(in srgb, var(--primary), #000 30%);
  --primary-900: color-mix(in srgb, var(--primary), #000 40%);

  --secondary-100: color-mix(in srgb, var(--secondary), #fff 40%);
  --secondary-200: color-mix(in srgb, var(--secondary), #fff 30%);
  --secondary-300: color-mix(in srgb, var(--secondary), #fff 20%);
  --secondary-400: color-mix(in srgb, var(--secondary), #fff 10%);
  --secondary-500: var(--secondary); /* primary color */
  --secondary-600: color-mix(in srgb, var(--secondary), #000 10%);
  --secondary-700: color-mix(in srgb, var(--secondary), #000 20%);
  --secondary-800: color-mix(in srgb, var(--secondary), #000 30%);
  --secondary-900: color-mix(in srgb, var(--secondary), #000 40%);

  --primary5: hsl(211, 30%, 24%, 5%);
  --primary10: hsl(211, 30%, 24%, 10%);
  --primary15: hsl(211, 30%, 24%, 15%);
  --primary20: hsl(211, 30%, 24%, 20%);
  --primary25: hsl(211, 30%, 24%, 25%);
  --primary30: hsl(211, 30%, 24%, 30%);
  --primary35: hsl(211, 30%, 24%, 35%);
  --primary40: hsl(211, 30%, 24%, 40%);
  --primary45: hsl(211, 30%, 24%, 45%);
  --primary50: hsl(211, 30%, 24%, 50%);
  --primary55: hsl(211, 30%, 24%, 55%);
  --primary60: hsl(211, 30%, 24%, 60%);
  --primary65: hsl(211, 30%, 24%, 65%);
  --primary70: hsl(211, 30%, 24%, 70%);
  --primary75: hsl(211, 30%, 24%, 75%);
  --primary80: hsl(211, 30%, 24%, 80%);
  --primary85: hsl(211, 30%, 24%, 85%);
  --primary90: hsl(211, 30%, 24%, 90%);
  --primary95: hsl(211, 30%, 24%, 95%);

  --secondary5: hsl(173, 49%, 83%, 5%);
  --secondary10: hsl(173, 49%, 83%, 10%);
  --secondary15: hsl(173, 49%, 83%, 15%);
  --secondary20: hsl(173, 49%, 83%, 20%);
  --secondary25: hsl(173, 49%, 83%, 25%);
  --secondary30: hsl(173, 49%, 83%, 30%);
  --secondary35: hsl(173, 49%, 83%, 35%);
  --secondary40: hsl(173, 49%, 83%, 40%);
  --secondary45: hsl(173, 49%, 83%, 45%);
  --secondary50: hsl(173, 49%, 83%, 50%);
  --secondary55: hsl(173, 49%, 83%, 55%);
  --secondary60: hsl(173, 49%, 83%, 60%);
  --secondary65: hsl(173, 49%, 83%, 65%);
  --secondary70: hsl(173, 49%, 83%, 70%);
  --secondary75: hsl(173, 49%, 83%, 75%);
  --secondary80: hsl(173, 49%, 83%, 80%);
  --secondary85: hsl(173, 49%, 83%, 85%);
  --secondary90: hsl(173, 49%, 83%, 90%);
  --secondary95: hsl(173, 49%, 83%, 95%);

  --accent5: hsl(160, 42%, 56%, 5%);
  --accent10: hsl(160, 42%, 56%, 10%);
  --accent15: hsl(160, 42%, 56%, 15%);
  --accent20: hsl(160, 42%, 56%, 20%);
  --accent25: hsl(160, 42%, 56%, 25%);
  --accent30: hsl(160, 42%, 56%, 30%);
  --accent35: hsl(160, 42%, 56%, 35%);
  --accent40: hsl(160, 42%, 56%, 40%);
  --accent45: hsl(160, 42%, 56%, 45%);
  --accent50: hsl(160, 42%, 56%, 50%);
  --accent55: hsl(160, 42%, 56%, 55%);
  --accent60: hsl(160, 42%, 56%, 60%);
  --accent65: hsl(160, 42%, 56%, 65%);
  --accent70: hsl(160, 42%, 56%, 70%);
  --accent75: hsl(160, 42%, 56%, 75%);
  --accent80: hsl(160, 42%, 56%, 80%);
  --accent85: hsl(160, 42%, 56%, 85%);
  --accent90: hsl(160, 42%, 56%, 90%);
  --accent95: hsl(160, 42%, 56%, 95%);

  --white5: hsl(0, 0%, 100%, 5%);
  --white10: hsla(0, 0%, 100%, 10%);
  --white15: hsl(0, 0%, 100%, 15%);
  --white20: hsl(0, 0%, 100%, 20%);
  --white25: hsl(0, 0%, 100%, 25%);
  --white30: hsl(0, 0%, 100%, 30%);
  --white35: hsl(0, 0%, 100%, 35%);
  --white40: hsl(0, 0%, 100%, 40%);
  --white45: hsl(0, 0%, 100%, 45%);
  --white50: hsl(0, 0%, 100%, 50%);
  --white55: hsl(0, 0%, 100%, 55%);
  --white60: hsl(0, 0%, 100%, 60%);
  --white65: hsl(0, 0%, 100%, 65%);
  --white70: hsl(0, 0%, 100%, 70%);
  --white75: hsl(0, 0%, 100%, 75%);
  --white80: hsl(0, 0%, 100%, 80%);
  --white85: hsl(0, 0%, 100%, 85%);
  --white90: hsl(0, 0%, 100%, 90%);
  --white95: hsla(0, 0%, 100%, 0.95);

  /* Override Bootstrap colors */
  --bs-primary: #ff5733 !important;
  --bs-secondary: #6c757d;
  --bs-success: #28a745;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #17a2b8;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;

  /* Bootstrap Override */
  /*--bs-link-color-rgb: #ff5733;*/
  --bs-blue-100: color-mix(in srgb, var(--bs-blue), #fff 10%);
  --bs-blue-200: color-mix(in srgb, var(--bs-blue), #fff 20%);
  --bs-blue-300: color-mix(in srgb, var(--bs-blue), #fff 30%);
  --bs-blue-400: color-mix(in srgb, var(--bs-blue), #fff 40%);
  --bs-blue-500: color-mix(in srgb, var(--bs-blue), #fff 50%);
  --bs-blue-600: color-mix(in srgb, var(--bs-blue), #fff 60%);
  --bs-blue-700: color-mix(in srgb, var(--bs-blue), #fff 70%);
  --bs-blue-800: color-mix(in srgb, var(--bs-blue), #fff 80%);
  --bs-blue-900: color-mix(in srgb, var(--bs-blue), #fff 90%);

  .primary {
    color: white;
    background-color: var(--primary);
  }
  .primary-100 {
    background-color: var(--primary-100);
  }
  .primary-200 {
    color: white;
    background-color: var(--primary-200);
  }
  .primary-300 {
    color: white;
    background-color: var(--primary-300);
  }
  .primary-400 {
    color: white;
    background-color: var(--primary-400);
  }
  .primary-500 {
    color: white;
    background-color: var(--primary-500);
  }
  .primary-600 {
    color: white;
    background-color: var(--primary-600);
  }
  .primary-700 {
    color: white;
    background-color: var(--primary-700);
  }
  .primary-800 {
    color: white;
    background-color: var(--primary-800);
  }
  .primary-900 {
    color: white;
    background-color: var(--primary-900);
  }

  /* Secondary color */
  .secondary {
    color: white;
    background-color: var(--secondary);
  }
  .secondary-100 {
    background-color: var(--secondary-100);
  }
  .secondary-200 {
    color: white;
    background-color: var(--secondary-200);
  }
  .secondary-300 {
    color: white;
    background-color: var(--secondary-300);
  }
  .secondary-400 {
    color: white;
    background-color: var(--secondary-400);
  }
  .secondary-500 {
    color: white;
    background-color: var(--secondary-500);
  }
  .secondary-600 {
    color: white;
    background-color: var(--secondary-600);
  }
  .secondary-700 {
    color: white;
    background-color: var(--secondary-700);
  }
  .secondary-800 {
    color: white;
    background-color: var(--secondary-800);
  }
  .secondary-900 {
    color: white;
    background-color: var(--secondary-900);
  }

  .accent {
    background-color: var(--accent50);
  }
  .accent-50 {
    background-color: var(--accent5);
  }
  .accent-100 {
    background-color: var(--accent10);
  }
  .accent-150 {
    background-color: var(--accent15);
  }
  .accent-200 {
    background-color: var(--accent20);
  }
  .accent-250 {
    background-color: var(--accent25);
  }
  .accent-300 {
    background-color: var(--accent30);
  }
  .accent-350 {
    background-color: var(--accent35);
  }
  .accent-400 {
    background-color: var(--accent40);
  }
  .accent-450 {
    background-color: var(--accent45);
  }
  .accent-500 {
    background-color: var(--accent50);
  }
  .accent-550 {
    background-color: var(--accent55);
  }
  .accent-600 {
    background-color: var(--accent60);
  }
  .accent-650 {
    background-color: var(--accent65);
  }
  .accent-700 {
    background-color: var(--accent70);
  }
  .accent-750 {
    background-color: var(--accent75);
  }
  .accent-800 {
    background-color: var(--accent80);
  }
  .accent-850 {
    background-color: var(--accent85);
  }
  .accent-900 {
    background-color: var(--accent90);
  }
  .accent-950 {
    background-color: var(--accent95);
  }

  /* #EC9967 */
  .contrast {
    background-color: var(--accent-contrast-color);
  }

  /*.color-effect[data-astro-cid-j7pv25f6] use data-attribute */
  .bg-effect {
    background: linear-gradient(45deg, var(--primary), var(--accent));
  }

  .color-effect {
    background: linear-gradient(120deg, var(--primary), var(--accent));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.form-select {
  font-size: 0.8rem;
  padding: 0.375rem 2rem 0.375rem 0.55rem;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--primary-light400);
}

.brand {
  text-decoration: none;
}

.nav-link:hover {
  color: var(--primary);
}

.download-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

footer .dropdown-item,
footer .dropdown-item:hover {
  background-color: var(--accent);
}

footer ul.dropdown-menu {
  background-color: transparent;
}

footer ul.dropdown-menu:hover {
  display: none;
}

@media (max-width: 768px) {

  header ul.dropdown-menu {    
    position: relative;
    width: 100%;
  }

  #info-icon-alert-downloads {
    display: none;
  }
  .nav-language {
  }
}

a.row-actions-download {
  display: none;
}

/* Texts */
.text-primary {
  color: var(--primary) !important;
}
a.text-primary:hover {
  color: var(--accent) !important;
}
.text-success {
  color: rgb(77, 181, 132) !important;
}

.text-shadow1 {
  text-shadow: 0px 0px 1px #000000;
}
.text-shadow2 {
  text-shadow: 0px 0px 2px #000000;
}
.text-shadow3 {
  text-shadow: 0px 2px 3px #000000;
}
.text-shadow4 {
  text-shadow: 0px 0px 4px #000000;
}
.text-shadow5 {
  text-shadow: 0px 0px 5px #000000;
}
.text-shadow6 {
  text-shadow: 0px 0px 6px #000000;
}

main a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}
main a:hover {
  color: var(--primary);
}

main section:not(#collection-items section) {
  /*:not(#collection-items section)*/
  min-height: calc(100vh - 250px);
}

/* Buttons Overide */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: var(--primary-700); /* #e14c2a; */
  border-color: var(--bs-dark);
}

.btn-link {
  --bs-btn-hover-color: var(--accent);
}
.btn-link:hover {
  opacity: 1 !important;
}

.btn-outline-white:hover {
  background-color: var(--white20);
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: white;
  background-color: var(
    --primary-800
  );
  border-color: var(--primary-900);
}

/* Backgrounds */
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.bg-accent-transparent {
  background-color: rgba(144, 207, 186, 0.84);  
}

/* Offcanvas Downloads */
.offcanvas-header .offcanvas-title {
  word-wrap: break-word;
  max-width: 86%;
}

#offcanvas-download > .offcanvas-header .btn-close {
  position: absolute;
  right: 20px;
  top: 20px;
}

/* Tables */
.table-bordered td:last-child {
  width: 174px;
}

.banner {
  height: calc(100vh - 134px);
}

.banner-overlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
  /*background: linear-gradient(0deg,#2b3d5082,#977c495e);*/
  background: linear-gradient(0deg, #2b3d5082, #977c4900);
  opacity: 0.61;
}

/* Cards */
article.card figure {
  padding: 2rem;
  width: 100%;
  min-height: 233px;

  /*&::before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      background-color: rgba(0, 0, 0, 0.63);
    }*/
}

.card-img-top {
  background-color: #90cfba;
  background-size: cover;
  object-fit: cover;
  padding: 2rem;
  width: 100%;
  min-height: 233px;
}

figure.card-img-top::before {
}

figure > .overlay {
  position: absolute; /* Position overlay absolutely */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 0; /* Ensure overlay is below the text */
}

article .card-body {
  padding: 2rem;
  padding-top: 0;
}
article .card-body .card-text {
  text-align: justify;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  /*
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-spacing: -0.05em;
  text-justify: distribute;
  text-align-last: left;*/
}

#cb-cookie-banner {
  position: fixed;
  padding: 1rem 3rem;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 10000;
  border-radius: 0px;
  display: block;
}

footer img.prr {
  margin-left: -13px;
  height: 41px;
}

#cb-cookie-banner a {
  color: var(--primary-800);
}

#loadingSpinner {
  display: none;
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  font-weight: bold;
}

/* map */
@media (max-width: 768px) {
  #sidebar {
    height: auto;
  }
}

#assetTable div.position-relative, .table-items-container {  
  height: 100%; 
  display: block;
  width: max-content;
  min-height: 2300px;
}

.leaflet-container a:not(.leaflet-control-zoom-in, .leaflet-control-zoom-out) {
  color: var(--accent);
}
.map #nextButton,
.map #prevButton {
  background-color: var(--accent);
  color: white;
}

.map #nextButton:disabled,
.map #prevButton:disabled {
  background-color: transparent;
  color: gray;
}

.map-search #map {
  height: 100%;
}

.map-search .bottom-panel {
  /*display: flex;*/
  overflow-y: auto;
  background-color: aliceblue;
  height: 100vh;
  padding-bottom: 15px;
  height: 77px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  max-height: 250px;
}

.map-search .bottom-panel.active {
  display: block;
  overflow-y: auto;
  background-color: aliceblue;
  height: 100vh;
  padding-bottom: 15px;
  height: 400px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  max-height: 300px;
}

.map-search .bottom-panel .nvbar {
  display: block;
  position: fixed;
  z-index: 100;
  background-color: #e9e9ed;
  width: 100%;
  height: 85px;
  margin: 0;
}
.map-search .pagination-container {
  display: block;
  position: fixed;
  width: 100%;
}

.map-search .assetTable {
  width: 70%;
  position: relative;
  margin-top: 3rem;
}

/*#table-items {
  width: auto;
}*/

#table-container { 
  min-height: 2100px;
}

.table-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red; /* rgba(255, 255, 255, 0.7); *//* Semi-transparent white background */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 100; /* Ensure it's above the table */
    backdrop-filter: blur(3px); /* Blur effect */
    -webkit-backdrop-filter: blur(3px); /* For Safari support */
    pointer-events: none; /* Allows clicks to pass through when not visible */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Smooth fade in/out */
}

.table-overlay.active {
    opacity: 1; /* Visible when active */
    pointer-events: all; /* Blocks clicks when active */
}

.table-overlay-message {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.spinner-border {
    /* Basic spinner styles if you don't have Bootstrap's */
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}


#message-container {
  /* For example, to ensure it takes up space even when empty */
  min-height: 150px; /* Adjust as needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Add more styling like border, background, etc. if you want it to look like a separate block */
  border: 1px solid #dee2e6; /* Example border */
  border-radius: 0.25rem; /* Example rounded corners */
  background-color: #f8f9fa; /* Example light background */
}