/* Version 2f3 20230723f
   2026.02.03 - Added unified thumbnail CSS variables */

/* ========================================
   CSS Variables for Thumbnail System
   Shared with index.php
   ======================================== */
:root {
  /* Default: Modern preset (matches Display A) */
  --thumb-border-width: 0px;
  --thumb-border-color: transparent;
  --thumb-shadow-h: 0px;
  --thumb-shadow-v: 4px;
  --thumb-shadow-blur: 12px;
  --thumb-shadow-opacity: 0.3;
  --thumb-border-radius: 8px;
  --thumb-gap: 25px;
}

body,
#bodystyle {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  color: #a0e8e1;
  /* TGA AppGreen */
  background-repeat: no-repeat;
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

/* #player-container {
  position: fixed;
  
  width: 98vw;
  top: calc((100vw - 98vw) / 2);
  left: calc((100vw - 98vw) / 2);
  right: calc((100vw - 98vw) / 2);
  z-index: 100; 
}

#jfvideo {
  width: calc(100vw * 0.98);
  height: calc(100vw * 0.98 * 9 / 16);
} */

#player-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  /* overflow: hidden; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  width: 98vw;
  height: calc(98vw * 9 / 16);
}

#jfvideo {
  max-width: 100%;
  max-height: 96%;
  /* width: auto;
  height: auto; */
  position: relative;
  z-index: 101;
}
#playlistControls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px; /* Adjust the gap between buttons as needed */
  z-index: 100000006; /* Higher z-index than #textDiv */
}

.leftArrow, .closeButton, .rightArrow {
  z-index: 20100;
  text-align: center;
  display: inline-block; /* Change from 'none' to 'inline-block' to make them visible */
  width: 30px; /* Adjust width as needed */
  margin: 0;
  cursor: pointer;
}

#centeredDiv {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  position: absolute;
}

.inFront {
  z-index: 20000;
  position: relative;
}

header {
  height: 8vh;
  /* 12vh 63px; */
  top: 0px;
  width: 100%;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
  line-height: 33px;
  font-size: 1.5rem;
}

.tourTitleHeader,
.tourTitleHeaderMap {
  /*, #galleryHeader{ */
  font-size: 4vw;
  line-height: 4vw;
  right: 0px;
  width: 100%;
  margin: 0px;
  text-align: left;
  font-weight: 300;
  padding-left: 1rem;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}

.tourTitleHeader,
.tourTitleHeaderMap {
  position: absolute;
  top: 5px;
  left: 10px;
}

#tourInfo,
#tourInfoMap {
  position: absolute;
  font-size: 2vw;
  line-height: 2vw;
  text-align: left;
  font-weight: 300;
  top: calc(5px + (100vw / 20));
  left: 30px;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}

header img {
  height: 100%;
  padding: 5px 0;
}

#mapContent {
  top: 0px;
  height: calc(100% - 0px);
  width: 100%;
  position: fixed;
  margin-left: 0rem;
  box-sizing: border-box;
}

#mapcanvas {
  /* display: contents; Den kostede timers arbejde at finde og fjerne */
  display: initial;
  position: absolute;
  bottom: 0px;
  width: 100%;
  top: 0px;
  height: calc(100% - 0px);
  text-align: center;
  box-sizing: border-box;
}

#videoPhotoResCheckBox,
#showMarkersHere {
  line-height: 18px;
  height: 22px;
  font-size: 18px;
  /*  3vw */

  margin-right: 10px;

  border: none;
  background: rgba(38, 202, 140, 1);
  color: #fff;
  font-weight: 300;
  transition: 0.5s;
  cursor: pointer;
}

input[type="button"] {
  line-height: 18px;
  height: 22px;
  font-size: 18px;
  /*  3vw */

  text-align: center;
  display: inline-block;
  text-decoration: none;
  border: none;
  background: rgb(167, 179, 183);
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  transition: 0.5s;
  cursor: pointer;
}

input[type="button"]:hover,
input[type="button"]:active input[type="button"]:focus {
  background: rgb(82, 109, 105);
}

.info {
  width: 100%;
  padding: 0px 2%;
  height: 100px;
}

.galleryContent {
  width: 100vw;
  overflow: auto;
}

.comments {
  float: left;
  width: 100%;
  padding: 20px 0;
  padding-left: 10px;
  padding-right: 20px;

}

#fbComments {
  background-color: rgba(255, 255, 255, 0.95);
}

.clearfix {
  height: 0px;
  width: 0px;
  clear: both;
}

section h1 {
  font-size: 24px;
  line-height: 24px;
  line-height: 4vw;
  text-align: left;
  margin-bottom: 10px;
  font-weight: 400;
  padding: 0 5px;
}

.tranlucent02 {
  opacity: 0.2;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
}

.tranlucent03 {
  opacity: 0.3;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
}

.tranlucent04 {
  opacity: 0.4;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
}

.elementToFadeOut {
  -webkit-animation: fadeout 4s linear forwards;
  animation: fadeout 4s linear forwards;
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.elementToFadeIn {
  -webkit-animation: fadein 1s linear forwards;
  animation: fadein 1s linear forwards;
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

:-webkit-full-screen,
:fullscreen,
:-ms-fullscreen,
:-moz-full-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: rgba(222, 251, 223, 0.1);
  margin: 0;
  padding: 0;
}

.cssarrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent gold transparent transparent;

  position: absolute;
  /* Remove the element from normal flow */
  top: 0;
  right: 0;
  /* Position the element at top-right corner of the wrapper */
}

.jf-image-large-shadow {
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.35) !important;
  /*overflow: visible !important;*/
  padding: 16px 16px 16px 16px !important;
  /**/
  background-color: white;
  transition: all .3s ease-in-out;
}

.jf-image-shadow {
  /* class="jf-image-shadow  */
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.35) !important;
  /*overflow: visible !important;*/
  padding: 8px 8px 8px 8px !important;
  /**/
  background-color: white;
  transition: all .3s ease-in-out;
}

.jf-image-shadow:hover {
  transform: scale(1.05);
}

.jf-image-small-shadow {
  /* Unified thumbnail styling using CSS variables */
  box-shadow: var(--thumb-shadow-h) var(--thumb-shadow-v) var(--thumb-shadow-blur) rgba(0, 0, 0, var(--thumb-shadow-opacity)) !important;
  padding: var(--thumb-border-width) !important;
  background-color: var(--thumb-border-color);
  border-radius: var(--thumb-border-radius);
  transition: all .3s ease-in-out;
}

.jf-image-small-shadow:hover {
  transform: scale(1.03);
}

.jf-image-infowindow {
  /* class="jf-image-small-shadow  */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35) !important;
  /*overflow: visible !important;*/
  padding: 4px 4px 4px 4px !important;
  border: 1px solid silver;
  /* rgba(0, 0, 0, 0.35); solid  black;*/
  margin: 8px 8px 8px 8px;
  background-color: white;
  transition: all .3s ease-in-out;
}

/* .jf-button-shadow:hover {
  transform: scale(1.03);
} */

/* #player360-container,  */
#galleryOverlay {
  margin-top: calc(100vw / 12);
}

#colorboxGallery, 
#colorbox360Gallery {
  width: 100vw !important;
  /* margin-left: 10px; */
}

#colorboxGallery img, 
#colorbox360Gallery img,
a {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#colorboxGallery figcaption, 
#colorbox360Gallery figcaption {
  width: 100%;
  caption-side: bottom;
}

.my-gallery figure,
#colorboxGallery figure,
#colorbox360Gallery figure {
  margin-left: 20px;
  margin-bottom: 30px;
  /* Se herunder 50px */
  margin-right: 20px;
  margin-top: 10px;
  background-size: cover !important;
  background-position: center !important;
  display: block;
  float: left;
}

#colorboxGallery figure,
#colorbox360Gallery figure {
  margin-bottom: 50px;
}

.my-gallery {
  width: 100%;
}

.my-gallery img,
.epyt-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-gallery figcaption {
  display: none;
}

.epyt-gallery-playhover {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto !important;
  max-width: 15% !important;
  min-width: 20px !important;
  text-align: center;
  /* vertical-align: middle !important; */
  transition: opacity ease-out .3s, all ease-out .3s;
  padding: 0;
  margin: 0;
  display: block !important;
  border: none;
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.wrapper img {
  vertical-align: middle;
}

.rotateClass {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#background {
  position: relative;
  overflow: visible;
  background-repeat: no-repeat;
  background-size: cover;

  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

#backgroundImage {
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}


/* The sidepanel menu */
.sidepanel {
  height: 250px;
  /* Specify a height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#firma {
  line-height: 24px;
  height: 28px;
  font-size: 24px;
  /*  3vw */

  text-align: right;
  margin-bottom: 10px;
  font-weight: 400;
  padding: 0 5px;
}

.circularButton {
  width: 40px;
  height: 40px;
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, .9);
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .9);
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .9);

  /* https://stackoverflow.com/questions/5012111/how-to-position-a-div-in-the-middle-of-the-screen-when-the-page-is-bigger-than-t */
  position: fixed;
  right: 30px;
  /* 40px */
  bottom: 30px;
  margin-top: -30px;
  /* -50px set to a negative number 1/2 of your height*/
  margin-left: -30px;
  /*set to a negative number 1/2 of your width*/
  border: 6px solid white;
  cursor: pointer;
  z-index: 999999;
}

#speedAndAltitudeIframe {
  position: fixed;
  top: 0;
  left: 0;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 99999;
}

@media screen and (orientation:portrait) {
  #speedAndAltitudeIframe {
    width: 100vw;
    height: calc(100vh - 80px);
    /* 100px */
  }
}

@media screen and (orientation:landscape) {
  #speedAndAltitudeIframe {
    width: calc(100vw - 80px);
    height: 100vh;
  }
}

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.35) !important;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.backButton {
  top: 3%;
  left: 95%;
  /*  width:100px;
  height:40px; */
  position: absolute;
  z-index: 200;
  background: orange;
}

.context-menu {
  background-color: black;
  border: 1px solid black;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 16px; /* 18 */
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  z-index: 1000;
}

.context-menu li {
  cursor: pointer;
  padding: 2px 8px; /* 4 16*/
  line-height: 1.2; /* Adjust this value to reduce line spacing */
}

.context-menu li:hover {
  background-color: #545353;
}

ul.no-dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.star-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 20px;
  z-index: 1000;
}

.star-icon {
  width: 50px;
  height: 50px;
  cursor: pointer;
  /* Mørk kant og skygge, så den lysegrå stjerne ses oven på lyse fotos */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

/* .star-container {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.star-icon {
  width: 100%;
  height: 100%;
} */

.star-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: midnightblue;
}

.unselectable {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.photo-container, .video-container, .urltarget-container {
  position: relative;
  display: inline-block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  /* Adjust the width as desired */
  height: 40px;
  /* Adjust the height as desired */
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* Adjust the alpha value (0.0 to 1.0) for desired transparency */
  background-image: url('../icons/video-transparent.png');
  /* Replace with the path to your play button icon image */
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.play-360-video-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
   background-image: url('../icons/360video-587500wV.png');
   background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.play-360-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-image: url('../icons/360video-587500wR.png');
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

/* Define the bounce animation configuration for maps marker here */
/* set the default transition time */
:root {
  --delay-time: .5s;
}

@keyframes drop {
  0% {
    transform: translateY(-200px) scaleY(0.9);
    opacity: 0;
  }
  5% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(0px) scaleY(1);
    opacity: 1;
  }
  65% {
    transform: translateY(-17px) scaleY(0.9);
    opacity: 1;
  }
  75% {
    transform: translateY(-22px) scaleY(0.9);
    opacity: 1;
  }
  100% {
    transform: translateY(0px) scaleY(1);
    opacity: 1;
  }
}
.drop {
  animation: drop 0.3s linear forwards var(--delay-time);
}


.fullsize {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This will make sure the image covers the whole area without distorting the aspect ratio */
}

.gm-ui-hover-effect {
  display: none !important;
}


.window-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Prevents scrolling */
  z-index: 1; /* Explicitly set z-index */
}

#textDiv {
  position: fixed;
  bottom: 3%;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  text-align: center;
  padding: 3px;
  text-shadow: rgb(0, 0, 0) 0px 0px 10px;
  font-size: 20px;
  z-index: 100000005;
  display: block;
}

/* Spinner styles */
.spinner-container {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(255, 255, 255, 0.25); */
  z-index: 9999;
  /* display: flex; Use Flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.bottom-right {
  position: absolute;
  bottom: 4px;
  right: 4%;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.fade-in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
/* 
.blur-background::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  z-index: -1;
} */