@font-face {
  font-family: jogjatype;
  src: url(../font/Jogjakartype.ttf);
}

html {
  scroll-behavior: smooth;
}

#panorama {
  width: 100%;
  /* height: 400px; */
}

div.font-jogja {
  font-family: jogjatype;
}

div.custom-tooltip span {
  visibility: visible;
  position: absolute;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.7);
  color: rgb(0, 0, 0);
  text-align: center;
  max-width: 200px;
  padding: 5px 10px;
  margin-left: -220px;
  cursor: default;
}

div.custom-tooltip:hover span {
  visibility: visible;
}

div.custom-tooltip:hover span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.7) transparent transparent transparent;
  bottom: -20px;
  left: -10px;
  margin: 0 50%;
}

div.pnlm-tooltip-ikm span {
  visibility: hidden;
  position: absolute;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.7);
  color: rgb(0, 0, 0);
  text-align: center;
  max-width: 200px;
  padding: 5px 10px;
  margin-left: -220px;
  cursor: default;
}

div.pnlm-tooltip-ikm:hover span {
  visibility: visible;
}

div.pnlm-tooltip-ikm:hover span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.7) transparent transparent transparent;
  bottom: -20px;
  left: -10px;
  margin: 0 50%;
}

#controls {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding-bottom: 3px;
}

.ctrl {
  padding: 8px 5px;
  width: 30px;
  text-align: center;
  background: rgba(200, 200, 200, 0.8);
  display: inline-block;
  cursor: pointer;
}

.ctrl:hover {
  background: rgba(200, 200, 200, 1);
}

div.custom-tooltip span {
  visibility: visible;
  position: absolute;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.7);
  color: rgb(0, 0, 0);
  text-align: center;
  max-width: 200px;
  padding: 5px 10px;
  left: 0px !important;
  top: 20px !important;
  cursor: default;
}

div.custom-tooltip:hover span {
  visibility: visible;
}

div.custom-tooltip span:after {
  /* visibility: visible; */
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.7) transparent transparent transparent;
  bottom: -20px;
  left: -10px;
  margin: 0 50%;
}

.navbar {
  background-color: #fff;
  /* opacity: 60%; */
  z-index: 1;
}

.navbar-page {
  background-color: #fff;
  background: linear-gradient(to right, #fff, #00000000);
  /* opacity: 60%; */
  z-index: 10;
}

nav a img {
  opacity: 100%;
}

.card-float {
  position: fixed;
  /* background-color: #f3f3f3; */
  width: 100%;
  height: 100vh;
  /* margin-right: auto; */
  /* margin-left: auto; */
  /* align-items: center; */
  /* height: 90px; */
  top: 0vh;
  z-index: 1;
  color: #000;
  text-align: center;
  /* box-shadow: 2px 2px 3px rgba(24, 24, 24, 0.178); */
  border-radius: 20px;
}

.card {
  background-color: #f3f3f3c7;
}

.btn-float {
  position: fixed;
  /* margin: auto; */
  /* display: none; */
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #385a97;
  color: #000;
  font-size: 28px;
  text-align: center;
  box-shadow: 2px 2px 3px rgba(24, 24, 24, 0.178);
}

.btn-float i {
  margin-top: 17px;
}

.pnlm-controls-container {
  position: absolute;
  top: 60%;
  left: 4px;
  z-index: 1;
}

.vignette-inset:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: inset 0px 0px 200px 0px black;
}

/* removing shadow on hover

/* Animation Icons */

.custom-hotspot {
  height: 40px;
  width: 40px;
  background: url("../icons/arrow.gif") 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  border: #fff0 solid 0px;
  border-radius: 100px;
}

.custom-hotspot-info {
  height: 30px;
  width: 30px;
  background: url("../icons/iconinformasi.svg");
  background-size: cover;
  background-repeat: no-repeat;
  border: #fff0 solid 0px;
  border-radius: 100px;
}

.custom-hotspot-ramadhan {
  height: 30px;
  width: 30px;
  background: url("../icons/iconramadhan.svg");
  background-size: cover;
  background-repeat: no-repeat;
  border: #fff0 solid 0px;
  border-radius: 100px;
}

.custom-hotspot-ikm {
  height: 30px;
  width: 30px;
  background: url("../icons/iconhome.svg");
  background-size: cover;
  background-repeat: no-repeat;
  border: #fff0 solid 0px;
  border-radius: 100px;
}

@media (max-width: 760px) {
  .custom-hotspot-ramadhan {
    height: 20px;
    width: 20px;
  }

  .custom-hotspot-ikm {
    height: 20px;
    width: 20px;
  }

  .custom-hotspot-info {
    height: 20px;
    width: 20px;
  }

  .custom-hotspot {
    height: 20px;
    width: 20px;
  }
}




.custom-hotspot-map {
  height: 40px;
  width: 40px;
  background: url("../icons/arrow.gif");
  background-size: cover;
  background-repeat: no-repeat;
  border: #fff0 solid 0px;
  border-radius: 100px;
}

.custom-link {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 12px;
}

.custom-link:hover {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 12px;
}

/* read more text */
.deskripsi .collapse,
.deskripsi .collapsing {
  height: 3rem;
  /* [NUM_OF_LINES] x [LINE_HEIGHT] */
}

.deskripsi .collapse {
  position: relative;
  /* For ...'s content absolute positioning */
  display: block;
  overflow: hidden;
}

.deskripsi .collapse:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}

.deskripsi .collapse.show {
  height: auto;
  /* You need to reset the height when not collapsed */
}

.deskripsi .collapse.show:before {
  display: none;
  /* Of course you don't want to display ... */
}

.deskripsi a.collapsed:after {
  content: "More...";
  padding-top: 1em;
}

.deskripsi a[class=""]:after {
  content: "Hide";
  padding-top: 1em;
}

/* read more text */

@keyframes flickerAnimation {
  0% {
    border: #fffc solid 7px;
    border-radius: 100px;
  }

  85% {
    border: #fff0 solid 7px;
    border-radius: 100px;
  }

  100% {
    border: #fff solid 7px;
    border-radius: 100px;
  }
}

@-o-keyframes flickerAnimation {
  0% {
    border: #fffc solid 7px;
    border-radius: 100px;
  }

  85% {
    border: #fff0 solid 7px;
    border-radius: 100px;
  }

  100% {
    border: #fff solid 7px;
    border-radius: 100px;
  }
}

@-moz-keyframes flickerAnimation {
  0% {
    border: #fffc solid 7px;
    border-radius: 100px;
  }

  85% {
    border: #fff0 solid 7px;
    border-radius: 100px;
  }

  100% {
    border: #fff solid 7px;
    border-radius: 100px;
  }
}

@-webkit-keyframes flickerAnimation {
  0% {
    border: #fffc solid 7px;
    border-radius: 100px;
  }

  85% {
    border: #fff0 solid 7px;
    border-radius: 100px;
  }

  100% {
    border: #fff solid 7px;
    border-radius: 100px;
  }
}

.nav-pills .nav-btn {
  border-radius: .25rem;
}

.nav-btn {
  display: block;
  padding: .5rem 1rem;
}

.nav-pills .nav-btn.active,
.nav-pills .show>.nav-btn {
  color: #fff;
  background-color: #1c0e5d;
}

/* .custom-hotspot {
	-webkit-animation: flickerAnimation 2.5s infinite;
	-moz-animation: flickerAnimation 2.5s infinite;
	-o-animation: flickerAnimation 2.5s infinite;
	animation: flickerAnimation 2.5s infinite;
}

.custom-hotspot-map {
	-webkit-animation: flickerAnimation 2.5s infinite;
	-moz-animation: flickerAnimation 2.5s infinite;
	-o-animation: flickerAnimation 2.5s infinite;
	animation: flickerAnimation 2.5s infinite;
}

.custom-hotspot-ikm {
	-webkit-animation: flickerAnimation 2.5s infinite;
	-moz-animation: flickerAnimation 2.5s infinite;
	-o-animation: flickerAnimation 2.5s infinite;
	animation: flickerAnimation 2.5s infinite;
}

.custom-hotspot-info {
	-webkit-animation: flickerAnimation 2.5s infinite;
	-moz-animation: flickerAnimation 2.5s infinite;
	-o-animation: flickerAnimation 2.5s infinite;
	animation: flickerAnimation 2.5s infinite;
} */

.cari input[type=text] {
  margin-top: 40px;
  font-size: 14px;
  background: #eeeeee;
  border-radius: 15px 0px 0px 15px;
  color: #6c757d;
  margin-left: 10px;
}

.cari .input-group-append button {
  margin-top: 40px;
  background: #007bff;
  border: none;
  cursor: pointer;
  border-radius: 0px 15px 15px 0px;
  width: 40px;
  margin-right: 10px;
}

.pnlm-panorama-info {
  position: absolute;
  bottom: 4px;
  background-color: #1c0e5d;
  border-radius: 0 3px 3px 0;
  padding-right: 10px;
  color: #fff;
  text-align: left;
  display: none;
  z-index: 2;
  -webkit-transform: translateZ(9999px);
  transform: translateZ(9999px);
}