html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow:hidden;
  }

    iframe {
        display: block;
        background: #000;
        border: none;
        height: 200px;
        width: 300px;
		overflow:hidden;
    }
    
  #map {
    margin-top:40px;
    width:100%;
    height:100%;
  }
  #loading {
    position: absolute;
    width: 220px;
    height: 19px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -110px;
    z-index: 20001;
  }
  #loading .loading-indicator {
    height: auto;
    margin: 0;
  }
  .navbar .brand {
    font-size: 20px;
    font-family: 'Norican', serif;

    color: white;
  }
  .navbar .nav > li > a {
    padding: 13px 10px 11px;
  }
  .navbar .btn, .navbar .btn-group {
    margin-top: 8px;
  }
  .leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: #f7f7f7;
  }
  .leaflet-control-geoloc {
    background-image: url(/img/location.png);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
  }
  video {
  object-fit: fill;
}
.modal{
    height:200px;
}

.nananganim{

	top: 40px;
	z-index: 999;
}
.nananganim {
	width: 300px;
	height: 304px;
	background-image:  url('/nanangputaraja.png');
	position: absolute;
	left: -20px;
	top:10%;
}

.nananginside {
	width: 300px;
	height: 304px;
	background-image:  url('/nanangputaraja.png');
	position: relative;
	left: -40px;
	top:10%;
}

.nananganimgo{
	animation: playputar .9s steps(44) infinite;
	animation-direction: alternate;
}

.dayakanim {
	width: 256px;
	height: 256px;
	background-image:  url('/dayaksprite.png');
	position: absolute;
	left: -20px;
	top:10%;
}
.dayakanimgo{
	animation: playdayak .6s steps(15) infinite;
}

.nananganimend{
	background-image:  url('/nanangsprite.png');
	animation: playnp .8s steps(24) infinite;
}

@keyframes playnp {
	100% { background-position: -7296px; }
}

@keyframes playputar {
	100% { background-position: -13377px; }
}

@keyframes playdayak {
	100% { background-position: -4140px; }
}


#myInput {
  background-image: url('/assets/bootstrap/img/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;

  font-size: 15px;
  padding: 12px 20px 12px 40px;
  margin-left:15px;
  margin-top:10px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 16px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

.roundbox
{  
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px;  
  border-radius: 6px 6px 6px 6px;
}

#defaultCountdown { width: 240px; height: 45px; }

.pantau-icon{
    display: block;
}

svg {
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
  
}

svg:active{
   animation: rotation 2s infinite linear; 
}

.gps_ring {
    transform-origin: 50% 67%;
    
    
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: 1; 
    /*opacity: 0.0*/
    transform: rotate(var(--angle));
}

@-webkit-keyframes pulsate {
        0% {-webkit-transform: scale(0.5, 0.5) rotate(0deg); opacity: 0.0;}
        50% {opacity: 0.7;}
        100% {-webkit-transform: scale(1, 1) rotate(var(--angle)); opacity: 1.0;}
}



.scrollbar4::-webkit-scrollbar {
    width: 12px;
}

.scrollbar4::-webkit-scrollbar-track {
    background-color: transparent;
    border: 1.5px solid #7e7e7e;
    border-radius: 8px;
}

.scrollbar4::-webkit-scrollbar-thumb {
    background-color: #f1f1f1;
    border: 2px solid #616161;
    border-radius: 8px;
}

.my-div-icon{
    width:200px;
    height:40px;
}

.my-div-image{
    width:40px;
    height:40px;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
    border-radius: 50%;
    -webkit-animation: spawn 0.7s ease-out;
    -webkit-animation-iteration-count: 1; 
}

@-webkit-keyframes spawn {
        0% {-webkit-transform: scale(0.5, 0.5); opacity: 0.0;}
        50% {-webkit-transform: scale(1.1, 1.1);}
        100% {-webkit-transform: scale(1, 1) ; opacity: 1.0;}
}

.my-div-span{
    text-align: center;
    width:100px;
    color:brown;
    margin-left:-30px;
    font-size:9px;
}

.gambar-utama{
    width:352px;
}