/* CSS Document */

/* Reset default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* #loading_image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: left center;
} */

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #cccccc;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.5s ease; /* Add transition for fade-out effect */
  opacity: 1; /* Default opacity */
  visibility: visible; /* Default visibility */
  margin: 0;
  padding: 0;

  /*	MAKE LOADING SCREEN FADE OUT ON PAGE LOAD	*/
}

#loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("Bandolier Loading.jpg");
  background-size: auto 100%;
  background-position: left center;
  background-repeat: no-repeat;
  filter: blur(8px);
  z-index: 0;
}

#loading p {
  position: relative;
  z-index: 1;
  /*	font-size: 20px;*/
  color: black;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

#loading_text {
  font-size: 15px;
  padding: 7px;
  border-radius: 10px;
  /*	margin-top: 400px;*/
}

@keyframes loading_dot_bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.loading_dot {
  display: inline-block;
  animation: loading_dot_bounce 0.8s ease-in-out infinite;
}
.loading_dot:nth-child(1) {
  animation-delay: 0s;
}
.loading_dot:nth-child(2) {
  animation-delay: 0.15s;
}
.loading_dot:nth-child(3) {
  animation-delay: 0.3s;
}

.loading_enter_button {
  background-color: #e5e5e5;
  cursor: pointer;
  /*	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);*/
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}

.loading_enter_button:hover {
  background-color: #d5d5d5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.loading_mobile_notice {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
  visibility: hidden;
}

#loading_fadeout {
  /*  opacity: 0;*/
  /*  visibility: hidden;*/
  display: none;
}

@font-face {
  font-family: "AlteBold";
  src:
    url("fonts/altehaasgroteskbold-webfont.woff") format("woff"),
    url("fonts/altehaasgroteskbold-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text remains visible during font loading */
}

@font-face {
  font-family: "AlteRegular";
  src:
    url("fonts/altehaasgroteskregular-webfont.woff") format("woff"),
    url("fonts/altehaasgroteskregular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text remains visible during font loading */
}

/* Make the body full height and width with no overflow */
body,
html {
  width: 100%;
  height: 100%;
  overflow-x: auto; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Disable vertical scrolling */
  background-color: #cccccc;
}

/* Styling for the entire scrollbar */
::-webkit-scrollbar {
  height: 8px; /* Height of horizontal scrollbar */
}

/* Styling for the scrollbar track */
::-webkit-scrollbar-track {
  background: #cccccc; /* Light gray background for track */
}

/* Styling for the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: #adadad; /* Color for the thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
}

/* Hover effect for the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
  background: #898989; /* Darker color when hovered */
}

.blur {
  filter: blur(7px) grayscale(1);
  -webkit-filter: blur(7px) grayscale(100%);
}

.font_stock {
  /*	font-family: sans-serif;*/
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  /* font-family:
    Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco,
    "Courier New", "monospace"; */
}

.font_light {
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  /* font-family: "AlteRegular", sans-serif; */
}

.font_heavy {
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  /* font-family: "AlteBold", sans-serif; */
  font-weight: 700;
  /*	font-style: normal;*/
}

a {
  color: black;
}

#entry_scroll {
  position: fixed;
  display: block;
  background-color: #e5e5e5;
  padding: 10px;
  border-radius: 15px;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.07);
}

.ui {
  z-index: 99;
  position: fixed;
  /*	font-size: 30px;*/
  color: black;
}

#ui_loading_title {
  /* font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif; */
  font-size: 30px;
}

#ui_title {
  top: 20px;
  left: 20px;
  font-size: 30px;
}

#ui_menu {
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 30px;
  text-decoration: underline;
  text-decoration-color: rgba(148, 148, 148, 0.5);
}

#ui_menu:hover {
  text-decoration: underline;
  text-decoration-color: black;
}

/*

#ui_menu_img {
	position: relative;
	height: 60px;
	width: auto;
}
*/

#ui_species {
  bottom: 20px;
  left: 20px;
  font-size: 20px;
}

#ui_coords {
  bottom: 20px;
  right: 20px;
  font-size: 20px;
}

.visible {
  /*	visibility: visible;*/
  display: block;
}

.hidden {
  /*	visibility: hidden;*/
  display: none;
}

#map_container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transition: filter 0.3s;
}

#zoom_combo {
  position: relative;
  height: 100%;
}

#zoom_image {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.2s;
  /*    cursor: 'grab';*/
  height: 1000px;
  width: auto;
}

.bandolier {
  position: relative;
  height: 100vh; /* 100% of the viewport height */
  width: calc(
    100vh * (40000 / 1080)
  ); /* Maintain aspect ratio relative to height (width / height)*/
  overflow-x: hidden; /* or scroll */
  white-space: nowrap; /* Ensure content doesn't wrap */
  transition: filter 0.3s;
}

.bandolier img {
  height: 100%; /* Make the image take up the full height */
  width: auto; /* Maintain the aspect ratio */
  display: block;
}

.fieldbook_background {
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.1);
  height: 100vh;
  width: 100vw;
  z-index: 999;
  backdrop-filter: blur(5px) grayscale(50%);
  -webkit-backdrop-filter: blur(5px) grayscale(50%);
  cursor:
    url("cursors/cursor_x.png") 32 32,
    auto;
}

.fb_background_show {
  display: block;
}

/* Hidden fieldbook styles */
.fieldbook {
  display: none; /* Hide all pages by default */
  position: absolute;
  height: auto;
  width: 70vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  text-align: center; /* Centers the image horizontally */
}

.fieldbook_page {
  position: relative;
  /*	height: 100%;*/
  max-width: 100%;
  margin: auto;
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.2);
}

.fb_page_1 {
  cursor:
    url("cursors/cursor_right.png") 32 32,
    auto;
}

.fb_page_2 {
  cursor:
    url("cursors/cursor_left.png") 32 32,
    auto;
}

.fade_visible {
  opacity: 1;
  visibility: visible;
}

.fade_hidden {
  opacity: 0;
  visibility: hidden;
}

.image_credit {
  font-size: 10px;
  margin-left: 20px;
  color: grey;
}

/* Target styles */
.vial_target {
  position: absolute;
  z-index: 9;
  transform-origin: center;
  cursor: pointer;

  opacity: 0.5;
  /*	background-color: blue;*/
}

.swatch_target {
  position: absolute;
  cursor: pointer;
  transition: transform 0s;
  opacity: 0.5;
  /*	background-color: blue;*/
}

@media (max-width: 1024px) {
  #welcome {
    font-size: 14px;
  }
  #ui_species {
    font-size: 14px;
  }
  #ui_coords {
    font-size: 14px;
  }
}