:root {
  --sidebar-navigation-width: 12rem;
  --sidebar-border-width: 0.25rem;
}

html[lang="de"] [data-lang]:not([data-lang="de"]) {
  display: none!important;
}
html[lang="en"] [data-lang]:not([data-lang="en"]) {
  display: none!important;
}

#pano {
  width: 100vw;
  height: 100vh;
  transition: all 300ms ease-in-out;
}
body.sidebar-minimized #pano {
  width: 100vw;
}
body.sidebar-right #pano,
body.sidebar-minimized #pano {
  margin-left: 0px;
}


body.backdrop #pano {
  filter: blur(10px);
}

#html {
  top: 0;
  bottom: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  position: fixed;
  transition: background 200ms ease-in-out;

  font-family:"MetaCompPro-Normal",sans-serif;
}

#html .btn {
  font-family:"MetaCompPro-Normal",sans-serif;
}
#html h1
,#html h2
,#html h3
,#html .h1
,#html .h2
,#html .h3 {
  font-family:"MetaSerifComp-Medium",sans-serif;
}
#html h4
,#html h5
,#html h6
,#html strong
,#html b
#html .h4
,#html .h5
,#html .h6 {
  font-family:"MetaCompPro-Bold",sans-serif;
}

body.backdrop #html {
  background: rgba(0, 0, 0, .5);
  position: fixed;
}

#html * {
  position: relative;
  pointer-events: all;
}

#html div.logo {
  position: fixed;
  max-width: 10rem;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  transition: all 300ms ease-in-out;
  z-index: 30;
}
#html div.logo img {
  transition: all 300ms ease-in-out;
}

body.sidebar-right #html div.logo {
  left: unset;
  right: 1.5rem;
}



body.welcome #html div.logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  text-align: center;
}
body.welcome #html div.logo .btn {
  background: #1c3d4fa8;
}
body:not(.welcome) #html div.logo div.welcome {
  pointer-events: none;
  display: none;
  /* transition: all 200ms ease-in-out; */
}
body.welcome #html div.logo div.welcome {
  display: block;
  pointer-events: all;
}

body.welcome #html div.start-lang-switch {
  position: fixed;
  z-index: 2;
  transition: all 300ms ease-in-out;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: all 400ms ease-in-out;
}
@media (min-width: 992px) {
  body:not(.welcome) #html div.start-lang-switch {
    display: none;
  }
}

@media (max-width: 991px) {
  #html div.start-lang-switch {
    transform: scale(.5);
  }
  body:not(.welcome) #html div.start-lang-switch {
    position: absolute;
    right: 0;
    top: 0.25rem;
    
  }
}

@media (max-width: 991px) {
  body.welcome #html div.logo img {
    display: block!important;
  }
}



#html .help {
  /* border-radius: 1rem; */
  background-image: repeating-linear-gradient(-45deg, rgba(22,57,76,.9) 0, rgba(22,57,76,.9) 2px, transparent 0, transparent 50%);
  background-size: 5px 5px;
  background-color: rgba(87,87,87,0.7);
  /* inset: 5rem; */
  left: 15rem;
  right: 15rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  z-index: 2;
  max-height: calc(100vh - 1rem);
  transition: all 300ms ease-in-out;
}
#html .help .scrollbars {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 13rem);
  /* max-height: calc(100vh); */
}

#html .help,
#html .help * {
  pointer-events: none;
  z-index: 20;
}
#html .help.show,
#html .help.show * {
  opacity: 1;
  pointer-events: all;
}
#html .help .rounded-circle.icon,
#html .help .rounded.icon {
  width: 36px;
  height: 36px;
}
#html .help img {
  max-height: 36px;
}

body.help-open #html .sidebar-navigation
,body.help-open #html .logo
,body.help-open #html .scene-title
,body.help-open #html button[onclick*="nextscene"]
{
  filter: blur(10px);
  opacity: 0.6;
}

#html .help .btn-success {
  background-color: #5ead35!important;
}
#html .help img[src*="gyroscope"] {
  filter: invert(1);
}




@media (max-width: 991px) {
  #html .help {
    left: 0.5rem;
    right: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    transform: none;
  }

  body.thumbs-open #html button[onclick*="nextscene"]
  {
    opacity: 0;
  }
}



#html .sidebar-navigation {
  width: var(--sidebar-navigation-width);
  height: auto;
  /* background-image: repeating-linear-gradient(-45deg, rgba(22,57,76,.9) 0, rgba(22,57,76,.9) 2px, transparent 0, transparent 50%); */
  /* background-size: 5px 5px; */
  /* background-color: rgba(87,87,87,0.7); */
  transition: transform 400ms ease-in-out, filter 300ms ease-in-out, opacity 300ms ease-in-out;
  padding-top: 100px!important;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  /* border-radius: 1rem; */
  box-shadow: 0px 0px 10px -5px #000;
  visibility: hidden;

  background-color: #1c3d4fa8;
  backdrop-filter: blur(6px);

}
body.uba-theme #html .sidebar-navigation {
  visibility: inherit;
}

body.vr-mode #html .sidebar-navigation,
body.gyroscope-mode #html .btn.thumbnails {
  display: none!important;
}

body.sidebar-right #html .sidebar-navigation {

  left: calc(100vw - var(--sidebar-navigation-width) - 0.5rem);
}


body.sidebar-minimized #html .sidebar-navigation {
  transform: translateX(calc(-100% - var(--sidebar-border-width) - 0.5rem));
}

body.sidebar-right.sidebar-minimized #html .sidebar-navigation {
  transform: translateX(calc(100% + var(--sidebar-border-width) + 0.5rem));
}




@media (max-width: 991px) {

  #html .sidebar-navigation {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    border-radius: 0;
    padding-top: 2rem!important;

    box-shadow: unset;
    background-size: unset;
    background-color: unset;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 25%, transparent 100%, transparent);
    backdrop-filter: unset;
  }

  #html .scene-title {
    filter: drop-shadow(1px 1px 2px #000);
  }

  #html button[onclick*="skin_nextscene"] {
    position: absolute;
    top: 50%;
    color: #fff;
    z-index: 10;
    transform: translateY(-50%);
  }
  body.welcome #html button[onclick*="skin_nextscene"] {
    display: none!important;
  }
  #html button[onclick*="skin_nextscene(-1)"] {
    left: 0;
  }
  #html button[onclick*="skin_nextscene(+1)"] {
    right: 0%;

  }
}

@media (min-width: 992px) and (max-height: 750px) {
  #html .sidebar-navigation {
    transform: scale(.9);
    transform-origin: bottom;
  }
}
@media (min-width: 992px) and (max-height: 680px) {
  #html .sidebar-navigation {
    transform: scale(.85);
    transform-origin: bottom;
  }
}




#html .btn[onclick^="toggleLanguage"] {
  background-size: cover;
  background-position: center;
  border: 3px solid #1d3d4f!important;
}

html[lang="de"] #html .btn[onclick^="toggleLanguage"] {
  background-image: url("../img/flag_en.svg");
}
html[lang="en"] #html .btn[onclick^="toggleLanguage"] {
  background-image: url("../img/flag_de.svg");
}





#html .rounded-circle.btn,
#html .rounded.btn {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;


}

#html .sidebar-navigation .rounded-circle.btn,
#html .sidebar-navigation .rounded.btn {

  background-color: #1c3d4f!important;
}

#html .rounded.btn {
  /* border-radius: .25rem!important; */
  font-family: sans-serif;
}

#html .minimize-flip-container .rounded-circle.btn {
  background-color: transparent!important;
}

@media (min-width: 1200px) {
  #html .sidebar-navigation .bigger .rounded-circle,
  #html .sidebar-navigation .bigger .rounded-circle {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
  }
}


body.sidebar-right #html .minimize-flip-container > .icon:nth-child(1){ order: 3; transform: scaleX(-1);}
body #html .minimize-flip-container > .icon:nth-child(2){transform: scaleX(-1); }
body.sidebar-right #html .minimize-flip-container > .icon:nth-child(2){transform: scaleX(1); order:2; }
body.sidebar-right #html .minimize-flip-container > .icon:nth-child(3){ order: 1; }






#html .sidebar-maximize {
  background: rgba(94,173,53,.9);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(calc(100%), -50%);
  padding: 1rem;
  /* border-radius: 0 100% 100% 0; */
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease-in-out;
}
body.sidebar-right #html .sidebar-maximize {
  right: auto;
  left: 0;
  transform: translate(calc(-100%), -50%) scaleX(-1);
}
body.sidebar-minimized #html .sidebar-maximize {
  opacity: 1;
  pointer-events: all;
}
body.welcome #html .sidebar-maximize {
  opacity: 0;
}

body.thumbs-open .sidebar-navigation button[onclick*="thumbs"],
body.floorplan-open .sidebar-navigation button[onclick*="floorplan"],
body.fs-mode .sidebar-navigation button[onclick*="toggleFS"],
body.gyroscope-mode .sidebar-navigation .gyroscope {
  background-color: #5ead35;
  border-color: #5ead35;
  color: #fff;
}


body.gyroscope-mode #html .sidebar-navigation .rounded-circle.btn.gyroscope {
  background-color: #5ead35!important;
}





body.gyroscope-available #html .gyroscope {
  visibility: visible!important;
}




#html .sub-container {
  background-color: #0081c7;
  left: calc(0px - 3rem);
  transform: translate(0, -60px);
  top: 0;
  transition: all 400ms ease-in-out;
  z-index: -1;
  width: 180px;
  height: 180px;
}
body.sidebar-right #html .sub-container {
  right: calc(0px - 3rem);
  left: auto;
}
#html .sub-container.show {
  left: calc(var(--sidebar-navigation-width) + 1rem );
}
body.sidebar-right #html .sub-container.show {
  right: calc(var(--sidebar-navigation-width) + 1rem );
  left: auto;
}
#html .sub-container-open .sub-container-toggler {
  outline: 6px solid #0081c7;
}

#html #logging {
  position: fixed;
  right: .5rem;
  bottom: .5rem;
  background: black;
  padding: 0.5rem;
  font-size: .8rem;
}


#html .sidebar-content {
  width: 50vw;
  max-width: 900px;
  background-color: #f7fcff;
  /* border-right: var(--sidebar-border-width) solid #5ead36; */
  transition: all 400ms ease-in-out;
  padding-top: 100px;
  left: -50vw;
  opacity: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  /* border-radius: 0 1rem 1rem 0; */
  z-index: 20;
}
body.sidebar-right #html .sidebar-content {
  left: auto;
  right: -50vw;
  /* border-radius: 1rem 0 0 1rem; */
}

#html .sidebar-content .ajaxContent {
  padding: 0 2rem;
  height: calc(100% - 5rem);
  color: #000;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 4rem 1rem 0 1rem;
  font-size: 1.1rem;
}
body.sidebar-right #html .sidebar-content .ajaxContent {
  /* direction: rtl; */
}
body.sidebar-right #html .sidebar-content .ajaxContent > div {
  /* direction: ltr; */
}
#html .sidebar-content.show {
  left: 0;
  opacity: 1;
  /* z-index: 10; */
}
body.sidebar-right #html .sidebar-content.show {
  left: auto;
  right: 0;
}
#html .close-sidebar-content {
  position: absolute;
  top: 2rem;
  right: 2rem;
  cursor: pointer;
  z-index: 20;
}
body.sidebar-right .close-sidebar-content {
  right: auto;
  left: 2rem;
}
#html .sidebar-content .ajaxContent::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical scrollbars */
  height: 5px; /* Mostly for horizontal scrollbars */

}

#html .sidebar-content .ajaxContent::-webkit-scrollbar-track { /* Background */
  background: rgba(28,61,79,.15);
  /* border-radius: 1rem; */
}

#html .sidebar-content .ajaxContent::-webkit-scrollbar-thumb { /* Foreground */
  background: rgba(28,61,79,.65);
  /* border-radius: 1rem; */
}

#html .close-sidebar-content i {
  color: #5ead36;
}

#html .sidebar-content .ajaxContent img.img-fluid {
  max-height: 40vh;
  object-fit: cover;
  margin-bottom: 1rem;
}

@media (max-width: 991px) {
  #html .sidebar-content {
    width: calc(100vw - 1rem);
    max-width: unset;
    padding-top: 0;
    top: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    left: -100vw;
    /* border-radius: 1rem; */
  }
  #html .sidebar-content.show {
    left: 0.5rem;
  }
  #html .sidebar-content .ajaxContent {
    padding: 0 1rem;
    height: calc(100% - 6rem);
    margin: 3.5rem 1rem 0 1rem;
  }
  #html .close-sidebar-content {
    top: 1.5rem;
    right: 1rem;
  }
}





#html .scene-title {

  opacity: 0;
  pointer-events: none;
  transition: filter 300ms ease-in-out, opacity 300ms ease-in-out;
  visibility: hidden;
}
#html h1.scene-title {
  position: fixed;
  z-index: 2;
  top: 3.7rem;
  left: calc(var(--sidebar-navigation-width) + 1.5rem);
  background: #1c3d4fa8;
  backdrop-filter: blur(6px);
  max-width: 32vw;
  font-size: 1.85rem;

}

body.uba-theme #html .scene-title {
  visibility: inherit;
}
body.uba-theme.vr-mode #html .scene-title,
body.welcome #html .scene-title {
  visibility: hidden;
}
#html h1.scene-title:not(:empty) {
  padding: 0.3rem 1rem 0.2rem;
}
body.sidebar-right #html h1.scene-title {
  right: calc(var(--sidebar-navigation-width) + 1.5rem);
  left: auto;
}
#html .scene-title.show {
  opacity: 1;
}

#html .scene-thumbs {
  z-index: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  /* border-radius: 0.5rem; */
  padding: 0rem 1rem 2rem 1rem;
  font-size: 1.85rem;
  transition: all 300ms ease-in-out;
  /* opacity: 0; */
  transform: translateY(100%);
  
  width: calc(100vw - var(--sidebar-navigation-width) - 0.5rem);
}
body.sidebar-right #html .scene-thumbs {
  left: 0;
  width: calc(100vw - var(--sidebar-navigation-width) - 0.5rem);
}
#html .scene-thumbs.show {

  transform: translateY(0%);
}
#html .scene-thumbs.show,
#html .scene-thumbs.show * {
  /* pointer-events: all; */
}
#html .scene-thumbs .scrollbars {
  overflow-x: scroll;
  overflow-y: hidden;
  /* padding-left: calc(var(--sidebar-navigation-width) + 2rem); */
}
#html .scene-thumbs .scrollbars::-webkit-scrollbar {
  width: 5px; /* Mostly for vertical scrollbars */
  height: 15px; /* Mostly for horizontal scrollbars */
}
#html .scene-thumbs .scrollbars::-webkit-scrollbar-thumb { /* Foreground */
  background-color: rgba(94,173,53,.9);
  /* border-radius: 1rem; */

}
#html .scene-thumbs .scrollbars::-webkit-scrollbar-track { /* Background */
  background: rgba(0,0,0,0.5);
  margin: 0rem;
}





#html .scene-thumbs .scrollbars  {
  gap: .75rem;
}
#html .scene-thumbs .scrollbars > div {
  width: 10rem;
  /* border-radius: 0.5rem; */
}
/* @media (min-width: 991px) {
  #html .scene-thumbs .scrollbars > div:first-child {
    margin-left: 2rem;
  }
  #html .scene-thumbs .scrollbars > div:last-child {
    margin-right: 2rem;
  }
} */

body.sidebar-right #html .scene-thumbs .scrollbars > div:last-child {
  margin-right: 0rem;
}
#html .scene-thumbs .title {
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem;
  margin-top: 1rem;
  margin-bottom: .5rem;
  /* border-radius: 0.5rem; */
  background: #ffffffa8;
  color: #1c3d4f;
  transition: all 400ms ease-in-out;
  display: flex;
  height: 55px;
  align-items: center;
  justify-content: center;
}


#html .scene-thumbs img {
  filter: drop-shadow(0px 0px 4px rgba(0,0,0,.5));
  /* transform: scale(.8); */
  transition: all 400ms ease-in-out;
  transform-origin: bottom;
  /* border-radius: 100%; */
  aspect-ratio: 2/1;
  object-fit: cover;
}

#html .scene-thumbs .active img {
  /* transform: scale(1); */
  /* aspect-ratio: 1/1; */
  
}
#html .scene-thumbs .active .title {
  background: #5ead36;
  color: #fff;
}
#html .scene-thumbs .active .title {
  background: #5ead36;
  color: #fff;
}



@media (max-width: 991px) {
  #html .scene-thumbs {
    width: 100vw;
  }
  #html .scene-thumbs.show {
    margin-bottom: 6rem;
    z-index: 20;
  }
  #html .scene-thumbs .scrollbars {

    padding-left:0;
  }
}









#html .floorplan {
  position: fixed;
  z-index: 2;
  height: 100vh;
  width: calc(100vh * 0.7);
  right: 0;
  bottom: 0rem;
  opacity: 0;
  pointer-events: none;
  transition: all 400ms ease-in-out;
  transform: translateX(100%);
  justify-content: flex-end;
  padding-right: 5rem;
}
body.sidebar-right #html .floorplan {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 5rem;
  /* left: 0;
  right: auto; */
}

#html .floorplan.show,
body.sidebar-right #html .floorplan.show {
  opacity: 1;
  transform: translateX(0);
}


#html .floorplan svg {
  height: 100%;
  max-height: 800px;
  /* --floorplan-shadow: #ffffffcf; */
  /* filter: drop-shadow(0px 0px 4px rgba(0,0,0,.5)) drop-shadow(0px 0px 50px var(--floorplan-shadow)) drop-shadow(0px 0px 100px var(--floorplan-shadow)) drop-shadow(0px 0px 150px var(--floorplan-shadow)); */
  filter: drop-shadow(0px 0px 4px rgba(0,0,0,.5));

}
#html .floorplan svg #gebaeude {

  fill: #ffffffa6;
}
#html .floorplan svg #tunnel {

  fill: #ffffff52;
}
#html .floorplan svg #objekte {

  fill: #ffffffe0;
}
#html .floorplan svg #pois  {
  fill: #5ead36;
  stroke: #5ead36;
  stroke-width: 15px;
}
#html .floorplan svg #pois path {
  cursor: pointer;
}
#html .floorplan svg #pois path.active {
  fill: #ffc107;
  stroke: #ffc107;
}


#html .floorplan svg #radar g {
  display: none;
  color: #5ead36;
  transform-box: fill-box;
  transform-origin: 50% 86%;

}
#html .floorplan svg #radar g path {
  color: #1e3b4b;
}

#html .floorplan svg #radar g :nth-child(1) {
  fill: #ffc107;
}
#html .floorplan svg #radar g :nth-child(2) {
  fill: currentColor;
  opacity: .8;
}
#html .floorplan svg #radar g :nth-child(3) {
  fill: currentColor;
  opacity: .6;
}
#html .floorplan svg #radar g :nth-child(4) {
  fill: currentColor;
  opacity: .2;
}
#html .floorplan svg #radar g :nth-child(5) {
  fill: currentColor;
  opacity: .4;
}
#html .floorplan svg #radar g.active {
  display: inline;
}