/*@import url(./image-style.css); 
@import url(./print-style.css); 
@import url(./tab-style.css); 
@import url(./pane-layout.css);
@import url(./modal-style.css);
@import url(./tour-tips-style.css);
@import url(./table-style.css);
@import url(./heat-option-style.css);
@import url(./file-list-style.css);*/
.cookie-consent-banner {
  position: fixed;
  bottom: 45px;
  left: 0;
  right: 0;
  background-color: #7089F5; 
  color: white;
  padding: 10px;
  text-align: center;
  z-index: 1000;
}
.cookie-consent-banner button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px;
  margin-left: 20px;
  cursor: pointer;
}
code { 
  font-family: "Courier New", Courier, monospace; 
  background-color: #f9f9f9; 
  padding: 2px 4px; 
}

.scrolling-text-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  color: #7089F5;
  font-size: 1.5rem;
  text-align: center;
}

.scrolling-text {
  position: relative;
  width: 90%;
  transform: translateY(0%) rotateX(25deg); /* Start already visible */
  transform-origin: bottom center;
  animation: scrollUp 25s linear infinite;

  font-family: "Arial", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.8;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0%) rotateX(25deg); /* Already in view */

  }
  100% {
    transform: translateY(-100%) rotateX(25deg); /* Scroll up fully */
  }
}

/* Fade Effect at Top & Bottom */
.scrolling-text-container::before,
.scrolling-text-container::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px; /* Adjust fade height */
  /*background: linear-gradient(to bottom, #7089F5, transparent);*/
  z-index: 1;
}

.scrolling-text-container::before {
  top: 0;
}

.scrolling-text-container::after {
  bottom: 0;
  transform: rotate(180deg);
}


[id*=image-container] {
    position: relative;
    display: flex; /* Use Flexbox to align children in a row */
    overflow: auto;
}
  
[id*=image-container] img {
    /*max-width: 100%;  causes image to resize to display */
    display: block;
    height: auto;
}
  
[id*=image-container] canvas {
    position: absolute;
    top: 0;
    left: 0;
    flex-shrink: 0; /* Prevent the canvas from shrinking */
}
  
[id*="main-image-canvas"] {
    position: absolute;
    /* border: 5px solid #7089F5;  this caused the border to be original size of the image */
    /* top: 0; this caused it to be aligned above the top of the image*/
    left: 0;
}

/* print-style */
@media print {
      /* Let the table expand onto the printed pages */
    .print-block {
      display: block !important;
      width: 100% !important;
      overflow: visible !important;
      float: none !important;   /* just in case */
      position: static !important; /* disable sticky/abs positioning */
    }

    .table-hide-button {
      display: none !important;
    }

    [id*=-field-table] thead th {
      position: static;
      background-color: #fff; /* or inherit for clean print */
      z-index: auto;
      cursor: default;
    }
    thead {
      position: static;
      display: table-header-group;
    }
      /* 🔎 Outline key elements to see what prints */
    table, thead, tbody, tr, th, td {
      width: 100% !important; /* force full width */
      table-layout: fixed;    /* keep column widths stable */
    }

    /* 🔎 Force headers to show as table-header-group */
    thead {
      display: table-header-group !important;
    }
    tfoot {
      display: table-footer-group !important;
    }

    /* 🔎 Make sure sticky is killed in print */
    thead th {
      position: static !important;
    }

    /* 🔎 Prevent row splits */
    tr {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }

    td {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal; /* allow wrapping in print */
      word-wrap: break-word; /* long strings can wrap */
    }
    colgroup col {
      width: 15%; /* adjust to match number of columns */
    }
    html, body {
      display: block; /* Override flex for printing */
    }
    /* Page break before every h2 element */
    div.report-section {
      display: block;
      page-break-before: always; /* For older browsers */
      break-before: page;      /* Modern browsers */
    }
  
    /* Prevent images from being split across pages */
    img {
      page-break-inside: avoid; /* Older syntax */
      break-inside: avoid;      /* Modern browsers */
    }

    /* Additional styling for print layout */
    body {
      margin: 20px;
      font-size: 12pt; /* Adjust font size as needed */
    }

}

/* tab-style */

  .main-tab-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 50%); /*repeat(2, 1fr); /* One column of equal width */
    /* gap: 10px;  Optional: space between grid items */
  }
  
  .tab-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
      /* gap: 10px;  Optional: space between grid items */
    }
    
  .tab {
    border: 1px solid #ccc;
    /* position: relative;  Added to contain absolute positioned elements */
    margin-bottom: 10px;
    transition: grid-column 0.3s;
  }
  
  .tab-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #f9f9f9; /* Light background color */
    border-bottom: 1px solid #ccc; /* Border to separate from content */
    padding: 10px;
    /* position: relative;  Added to contain absolute positioned elements */
    justify-content: space-between; /* Distribute space between the header and buttons */
  }
    
  .tab-header h2 {
    display: inline;  /* Keep h2 and icon inline */
    margin: 0; /* remove default margin */
    flex: 1; /* Allow the header to take up remaining space */
    color: #007bff; /* Link color */
    text-decoration: underline; /* Underline text */
  }
  
  
  .tab-header h2:hover {
    color: #0056b3; /* Darker color on hover */
    text-decoration: none; /* Remove underline on hover */
  }
  
  .button-right {
    display: flex; /*was flex, but no need for these buttons right now */
    margin-left: auto;
  }

  .tab-buttons {
    display: none; /*was flex, but no need for these buttons right now */
    gap: 10px; /* Optional: space between buttons */
    /*margin-left: auto;*/
    /*position: absolute; */
    right: 10px;  /* Adjust the right positioning as needed */
    top: 50%;
    /* transform: translateY(-50%);  Vertically center the buttons */
  }
  
  .tab-button {
    padding: 5px 10px; /* Adjust padding as needed */
    cursor: pointer; /* Change cursor to pointer for buttons */
    /*margin-left: 10px;*/
    border-color: #7089F5;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    /* color: #007bff;  Link color */
    border-radius: 10px 100px / 120px;
  }
  
  .tab-content {
    /*margin-top: 10px;
    border-top: 1px solid #ccc;
    padding-top: 10px;*/
    display: none; /* Initially hidden */
    padding: 10px;
  }
  
  .data-display {
    margin-top: 10px;
  }
  
  .tab.active .tab-content {
    background-color: #d9d9d9;
    display: block; /* Show content for the active tab */
  
  }
    
  /* Additional styles for the active tab */
  .tab.active {
    grid-column: span 2;
    border: 2px solid #4CAF50; /* Add a border to the active tab */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a slight shadow */
  }
  
  .tab.active .tab-header h2 {
    color: #4CAF50; /* Change the text color of the active tab header */
  }

/* pane-layout */
html, body {
    font-family: Arial, sans-serif;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    /*height: 100vh;   use Flexbox and occupy the full height of the viewport */
    display: flex;
    flex-direction: column;
    /*overflow-x: hidden; /* Prevents horizontal scrolling */
    /*overflow: auto; This setting will break printing */
  }
  
  .top-pane {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding: 10px; */
    background-color: #7089F5;
    color: white;
    border-bottom: 1px solid #ddd;
    width: 100%;
    position: fixed; /* ensure the top is always visible */
    z-index: 2; /* ensure the top is always when scrolling */
    top: 0; /* ensure the top is always at the top of the page */
  }
    
  .bottom-pane {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding: 10px; */
    background-color: #7089F5;
    color: white;
    border-bottom: 1px solid #ddd;
    width: 100%;
    position: fixed; /* ensure is always visible */
    z-index: 1;  /* ensure is always when scrolling */
  }
  
  .bottom-pane {
    bottom: 0;
    border-top: 1px solid #ddd;
  }
  
  .top-pane h1 {
    margin: 0; /* Remove default margin */
    text-align: center; /* Center align the text */
    flex: 1; /* Take up remaining space */
  }
  .top-pane a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: white;
  }
  .top-pane img {
    width: 70px; /* Adjust the size as needed */
    height: 70px;
    margin-right: 20px;
  }
  .footer-pane {
    /*height: 50px; /* Example height */
    background: #7089F5;
    color: white;
}
  .footer-pane a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: white;
  }
  .footer-pane img {
    width: 50px; /* Adjust the size as needed */
    height: 50px;
    margin-right: 20px;
  }
  .user-link {
    margin-left: auto; /* for profile icon location */
  }
.profile-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.initials-bubble {
  background-color: #7089F5;
  outline: 2px solid #d9d9d9;
  color: white;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 4px;
}

.username {
  font-size: 14px;
  color: #333;
}

  .container {
    display: flex;
    flex: 1;  /* Make the container take up the remaining vertical space after the top pane*/
    /* height: 100vh; */
    width: 95%;
    margin-top: 50px; /* Adjust according to top-pane height */
    margin-bottom: 40px; /* Adjust according to bottom-pane height */
  }
  .anchor-target {
    scroll-margin-top: 95px; /* Adjust according to top-pane height */
  }
  main.main-content {
    /*margin-top: 50px; /* Adjust this value to be equal to or greater than the height of the top pane */
    flex: 1; /* make it take up the remaining horizontal space within the .container */
    padding: 20px;
    width:100vh;
    padding-bottom: 90px;
    /*box-sizing: border-box;*/
    /*overflow-y: auto; /* Allow scrolling if content overflows */
    /* margin-left: 211px;  Needed for side pane Adjust according to side-pane width + padding + border*/
    background-image: url(../images/heartWomanBackground.png); 
    background-repeat:space;
    background-position:bottom;
    background-position-y: 5px; 
  }
  /* General item-container rules */
  .item-container {
    width: 100%;
    max-width: 100%;          /* hard stop at parent width */
    box-sizing: border-box;
    overflow: hidden;         /* clip anything that tries to overflow */
  }
  /* Three-column layout inside an item-container */
  .item-container .three-columns {
    display: flex;
    flex-wrap: wrap;          /* allow wrapping if needed */
    gap: 8px;                 /* cleaner spacing than space-between */
    width: 100%;
    box-sizing: border-box;
  }
  /* Items inside three-columns */
  .item-container .three-columns .item {
    flex: 1 1 0;              /* share space evenly */
    min-width: 0;             /* IMPORTANT: prevents overflow from long content */
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Boxed container (the gray boxes) */
  .boxed-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 4px 0;
    padding: 6px 10px;
    border: 1px solid #888;
    background: #f0f0f0;
    box-sizing: border-box;
  }
  
  .navigation {
    justify-content: space-between;
    width: 100%;
  }
  
  button {
    border-color: rgb(33, 3, 89);
    text-align:center;
    margin: 5px;
    border-radius: 10px 100px / 120px;
    /*opacity: 70%;*/
    width: auto;
    cursor: pointer;
    display: inline-block;
    font-size: inherit; /* 1em;*/
    /*margin-bottom: 10px;*/
    /*padding: 2px;*/
  }
  .depressed {
    transform: translateY(2px);
    background-color: #7089F5; /* Darker shade for visual effect */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  }

  .threshold-container {
    max-width: 100%;
    margin-top: 20px;
  }

  .threshold-bar {
    width: 100%;
    height: 50px;
    position: relative;
  }
  label, input, select, textarea {
    /*display: inline-block;*/
    margin: 0;  /* Remove default margin for cleaner styling */
    padding: 0;  /* Remove default padding for cleaner styling */
    padding-right: 5px; 
    padding-left: 5px; 
    margin-bottom: 10px; /* Add margin for spacing */
    margin-right: 10px; /* add margin for spacing */
    border-color:#7089F5;
    font-size: inherit;
    /*max-width: clamp(300px, 100%, 1200px); /* Responsive scaling within defined range */
  }
  textarea {
    width: 100%;
    resize: vertical; /* Allows only vertical resizing */
  }
  
  button#prev, button#next {
    background: none;
    border: none;
    /* font-size: 2em; */
    cursor: pointer;
    pointer-events: all; /* Allows click events */
    color: black; /* Ensures the arrows are visible */
  
  }
  
  button#prev {
    /*position: fixed;*/
    left: 10px;
  }
  
  button#next {
    /*position: fixed;*/
    right: 10px;
  }
  
  button:focus {
    outline: none;
  }
  
  
  .alpha-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    pointer-events: all; /* Allows click events */
    margin: auto; /* centers the text top and bottom in the nevigarion pane */
  }
  
  .three-columns {
    display: flex;
    justify-content: space-between; 
    gap: 8px;                 /* safer than space-between for consistent gaps */
    width: 100%;
    box-sizing: border-box;
  }
  .three-columns .boxed-container {
    flex: 1 1 0;              /* allow shrinking/growing evenly */
    min-width: 0;             /* critical: prevents overflow from long content */
    max-width: 100%;
  }
.footer-pane {
  width: 100%;
  background: #7089F5; /* or your background color */
  padding: 0.4em 1em;
}

.three-columns-center {
  display: flex;
  justify-content: space-between;
  align-items: center;  /* keeps image + text vertically centered */
  flex-wrap: nowrap;    /* prevents wrapping on tablets/phones */
  gap: 1rem;
  max-height: 48px;     /* ensures height matches your icon height */
  overflow: hidden;     /* hides overflow text if needed */
}

.three-columns-center .item {
  display: flex;
  align-items: center;
  white-space: nowrap;  /* keeps text on one line */
  flex: 1 1 auto;
}

.three-columns-center img {
  height: 32px; /* set to your icon height */
  width: auto;
  vertical-align: middle;
}

footer.span {
  font-size: 0.85em;
  text-align: center;
  white-space: nowrap;  /* prevent wrapping on smaller screens */
  overflow: hidden;
  text-overflow: ellipsis; /* adds "..." if text is too long */
}

  
  .item-left,
  .item-right {
    flex: 0 0 15px; /* Fixed width for left and right items */
  }
  
  .item-center {
    flex: 1; /* Allow the center item to take up remaining space */
    text-align: center; /* Center align the content within the center column (optional) */
  }
  
.top-bar { 
  background-color: #7089F5; 
  color: white; 
  width: 100%; 
  display: flex; 
  justify-content: center; /* center the menu horizontally */ 
  align-items: center; 
  padding: 0; 
}

  /* Remove bullet points */
ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Make menu horizontal */
.menu {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

/* Each menu item */
.menu li {
  flex: 1;
  text-align: center;
}

/* Make the link fill the li completely */
.menu li a {
  display: block;
  padding: 15px 0; /* vertical padding */
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* Hover state */
.menu li a:hover {
  background-color: rgba(86, 21, 239, 0.3); /* changes the background */
  color: white; /* optional: keep text readable */
}


  /* Class to show full table height */
  .show-full-table {
    height: auto; /* Adjust height to fit content */
    overflow: visible; /* Disable scrolling */
  }
    /* Class to show full table height */
    .hide-full-table {
      display: none; 
    }
  
  .filter-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  .filter-dropdown {
    background: white;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  /* Select inside boxed-container */
  .filter-dropdown select {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  .filter-dropdown select option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .filter-container:hover .filter-dropdown {
    display: block;
  }
  
  
  .dropdown {
    position: relative;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #7089F5;
    /*min-width: 160px; removed for preference */
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); removed for preference */
    /*z-index: 1; removed not sure why this is required */
  }
  
  .dropdown-content li {
    float: none;
    padding: 12px 16px;
  }
  
  .dropdown-content li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content li a:hover {
    background-color: #7089F5;
  }
  
  .menu li:hover .dropdown-content {
    display: block;
  }

  #cookieConsentModal {  /* # means it is for an ID */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #7089F5;
    padding: 20px;
    z-index: 1000;
    /* Set a maximum height and add bottom margin */
    max-height: 80%;
    /*margin-bottom: 20px;*/
    border-radius: 10px 10px / 10px;
    width: auto;
  
    /* Add overflow-y to enable vertical scrolling if content exceeds max height */
    overflow-y: auto;
}

#cookieConsentModal button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}


 /* modal-style */
 [id*=modal] {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #7089F5;
    padding: 20px;
    z-index: 1;
    /* Set a maximum height and add bottom margin */
    max-height: 80%;
    /*margin-bottom: 20px;*/
    border-radius: 10px 10px / 10px;
    width: auto;
  
    /* Add overflow-y to enable vertical scrolling if content exceeds max height */
    overflow-y: auto;
  }

  .modal-content {
    background-color: #F1E9E9;
    padding: 20px;
    border-radius: 5px;
  }

  .modalExitButton {
    position: absolute; 
    right: 10px; 
    top: 10px;
  }

  .modal-header {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .modal-footer {
    margin-top: 20px;
  }
  .modal-footer button {
    margin: 0 10px;
  }

/* tour-tips-style */
/* Style the tooltip background and text */
.custom-tooltip .shepherd-text {
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
  }
  
  /* Position the tooltip arrow */
  .custom-tooltip .shepherd-arrow {
    display: none; /* Optionally hide the arrow */
  }

  /* Style for the circular "i" icon */
.info-icon {
    display: inline-flex;          /* Keeps the icon inline with the text */
    align-items: center;           /* Centers the "i" within the circle */
    justify-content: center;
    font-size: 0.7rem;             /* Slightly smaller font for superscript effect */
    color: white;
    background-color: #007bff;     /* Blue background */
    border-radius: 50%;            /* Circular shape */
    width: 1.2em;                  /* Circle width */
    height: 1.2em;                 /* Circle height */
    line-height: 1em;              /* Centers text vertically */
    margin-left: 0.3em;            /* Spacing to the right of the text */
    cursor: pointer;
    vertical-align: middle;        /* Aligns with text baseline */
  }
  
  .info-icon i {
    font-style: normal;
    font-weight: bold;
  }
  
/* CSS for the tooltip-term styling */
.tooltip {
  /* border-bottom: 1px dotted #007bff;  /* Dotted underline */
  /* color: #007bff;                    /* Blue text color */
  cursor: help;                      /* Help cursor */
  position: relative;                /* Position for the icon */
  padding-right: 1.5em;              /* Space for the icon */
}

.tooltip::after {
  content: "i";                      /* Info indicator */
  display: inline-flex;
  justify-content: center;
  font-size: 0.7rem;
  color: white;
  background-color: #007bff;         /* Blue background */
  border-radius: 50%;                /* Circular shape */
  width: 1.2em;                      /* Increase size */
  height: 1.2em;                     /* Increase size */
  position: absolute;
  padding: 2px;
  margin-left: 2px;
}

.tooltip strong {
  color: #007bff;                    /* Blue color */
  text-decoration: underline;        /* Underline text */
  cursor: help;                      /* Optional: shows it's interactive */
  font-weight: bold;                 /* Keeps the term bold */
}

 /* table-style */
 table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    text-align: left;
    word-wrap: break-word;
    padding: 8px;
  }

  td {
    max-width: 150px; /* Set max width to avoid overly wide cells */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  th.sort-desc:after {
    content: ' ▼'; /* Change to descending indicator */
  }
  
  th.sort-asc:after {
    content: ' ▲'; /* Change to ascending indicator */
  }

/*managed spot views */
[id*=-field-table] thead th {
  position: sticky;
  top: 0;
  background-color: #f9f9f9;
  z-index: 1;
  cursor: pointer;
}

[id*=-field-table]  thead th.selectable-column:hover {
  background-color: #e0e0e0;
}

[id*=-field-table]  td.active {
  font-weight: bold;
}

.flash {
  position: relative;
  overflow: hidden; /* important */
  max-width: 100vw;
  word-wrap: break-word;
  box-sizing: border-box;
  padding: 12px 16px;
  margin: 10px 0;
  border-radius: 6px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  opacity: 1;
  transition: opacity 0.4s ease;
  animation: fadeSlideIn 0.3s ease-in-out;
}

.flash.success {
  background-color: #38a169; /* green */
}

.flash.error {
  background-color: #e53e3e; /* red */
}

.flash.info {
  background-color: #3182ce; /* blue */
}

.flash.warning {
  background-color: #dd6b20; /* orange */
}

.flash.fade-out {
  opacity: 0;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: none;
  font-size: 1.2em;
  cursor: pointer;
  color: #fff;
  line-height: 1;
}

/* Optional: Fade/slide animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}