@charset "utf-8";
/* CSS Document */

:root {
	--transition-duration: 2s;
	--header-height: 40px;
	--footer-height: 40px;
	--slider-width: 340px;
	--sub_header-height: 40px;

	--fs-base: 16px;
	--outline-stroke: 1.6px;
	/* ketebalan outline (webkit) */
	--outline-shadow-size: 1px;
	/* fallback outline via text-shadow */
	--shadow-default: 0 2px 6px rgba(0, 0, 0, 0.25);
	--text-shadow-outline:
		1px 1px 0 #000, -1px -1px 0 #000,
		1px -1px 0 #000, -1px 1px 0 #000;
		
    --bg-header: #2c1c00;
    --bg-footer: #3d3d3d;
    --bg-tematik: rgba(113, 73, 0, 0.6);
    --bg-modalheader: #281900;

}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


body {
	font-family: Arial, sans-serif;
	overflow: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #000;
}

/* Header Styles - Exact Match */
header {
	background-color: var(--bg-header);
	color: #fff;
	padding: 15px;
	text-align: center;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 20px;
	padding-right: 20px;
}

/* Home Button - Exact Match */
.home-button {
	background-color: #ff6600;
	color: white;
	border: none;
	padding: 8px 15px;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: normal;
	transition: all 0.3s ease;
}

.home-button:hover {
	background-color: #e55a00;
}

.home-button i {
	font-size: 14px;
}

/* Main Content Styles */
.main-container {
	margin-top: var(--header-height);
	margin-bottom: var(--footer-height);
	flex-grow: 1;
	position: relative;
	overflow: hidden;
	background: #1a1a1a;
}

.main-div {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Content DIVs Styles - Pure Fade Transition */
s .content-wrapper {
	position: relative;
	z-index: 2;
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition-delay: 0.3s;
}

.content-div.active .content-wrapper {
	opacity: 1;
	transform: translateY(0);
}


/* Footer Styles - Exact Match - NO PADDING */
footer {
	background-color: var(--bg-footer);
	color: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1000;
	height: var(--footer-height);
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* Menghapus padding */
	padding: 0;
}

/* Running Text - Exact Match */
.running-text {
	color: white;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	animation: runningText 15s linear infinite;
	font-weight: normal;
	padding-left: 20px;
}

@keyframes runningText {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

/* Button Container - Exact Match - NO PADDING, NO GAP */
.button-container {
 z-index: 2;
	display: flex;
	/* Menghapus padding dan gap */
	padding: 0;
	gap: 0;
	/* Memastikan container mengisi penuh area kanan footer */
	height: 100%;
}

/* Navigation Buttons - Exact Match - NO MARGIN, USING DIV */
.nav-button {
	background-color: #281900;
	color: white;
	border: none;
	padding: 8px 15px;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-weight: normal;
	transition: all 0.3s ease;
	border-radius: 0;
	/* Menghapus semua margin */
	margin: 0;
	/* Memastikan tidak ada spacing antar tombol */

	/* Memastikan tombol mengisi penuh tinggi container */
	height: var(--footer-height);
}

/* Tombol terakhir tidak ada border kanan */
.nav-button:last-child {}

.nav-button:hover {
	background-color: #4f3508;
}

.nav-button.active {
	background-color: #584b34;
}

.nav-button i {
	font-size: 14px;
}

/* Fade transition overlay */
.transition-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
	opacity: 0;
	background: radial-gradient(circle at center,
			rgba(255, 255, 255, 0.1) 0%,
			rgba(255, 255, 255, 0.05) 50%,
			rgba(255, 255, 255, 0) 100%);
	transition: opacity var(--transition-duration) ease-in-out;
}

.transition-overlay.active {
	opacity: 1;
}

/* Loading indicator */
.loading-indicator {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s ease;
}

.loading-indicator.active {
	opacity: 1;
	transform: scale(1);
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.content-div {
		font-size: 1.8rem;
	}

	.nav-button,
	.home-button {
		padding: 6px 12px;
		font-size: 12px;
	}

	.running-text {
		font-size: 12px;
	}
}


.wrapper_data {
	display: flex;
	top:0px;
	height: 100%;
	background-color: #ffffff;
}

/* biru bagian atas 

.wrapper_data {
	display: flex;
top:0px;
	height: 100%;
	background: linear-gradient(
        to bottom,
        #D4D4D4,   /* biru bagian atas */
        #F1FFD6,   /* hijau bagian tengah */
        #97D66F    /* kuning bagian bawah */
    );
}
*/

.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: linear-gradient(
        to bottom,
        #ffffff,   /* biru bagian atas */
        #004f04,   /* hijau bagian tengah */
        #000000    /* kuning bagian bawah */
    );
}

/* Atur gambar agar proporsinya tidak rusak */
.wrapper img {
	height: 100vh;
	width: 100%;
	object-fit: contain;
	/* seluruh gambar terlihat */
}


.kotak_peta {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;

	justify-content: center;
	align-items: center;
	z-index: 8888;
	opacity: 1;


}


.main-container {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	background-color: #96C;
}
#main_map {
	position: relative;
	width: 100%;
	height: 100%;
	background: #f8f9fa;
	overflow: hidden;
}
#div_map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 100%;
}
#div_legendabox {
	position: absolute;
	z-index: 100;
	top:10px;
	max-height: calc(100% - 20px);
	right: 20px;
	opacity: 0.7;
	width:400px;

	
	overflow-y: auto;   /* scroll muncul otomatis jika konten terlalu tinggi */
    overflow-x: hidden;
}

#div_legendabox {
    scrollbar-width: none;        /* Firefox */
}

#div_legendabox::-webkit-scrollbar {
    display: none;                /* Chrome, Edge, Safari */
}
.mycollapsibles {
  display: none;
}
#tombol_slider {
	position: absolute;
	top: 10px;
	left: 10px;
	width: auto;
	height: 40px;
	z-index: 2;

}
#tombol_slider.active {
	left: 10;
}
/* SLIDER */
#sliderTematik {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--slider-width));
	width: var(--slider-width);

	background: var(--bg-tematik);
	color: white;
	box-sizing: border-box;
	transition: all 0.35s ease;
	z-index: 5000;

	font-size: 34px;
	font-weight: bold;
}

/* Slider muncul */
#sliderTematik.active {
	left: 0;
}


.content-div {
	display: none;
	width: 100%;
	height: 100%;
	background-color: #000;
}

.content-div.active {
	display: block;
}



.mpoint
{
	cursor:pointer
}
.antara
{
	margin-left: 1px;   /* atur sesuai kebutuhan */
}


    .btn-clouds {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 4px 50px;

    /* ⭐ GRADIENT: Kiri hijau penuh → kanan transparan ⭐ */
    background: linear-gradient(to right, rgba(145, 145, 145, 1),rgba(64, 113, 133, 0), rgba(0, 0, 0, 0));
left: 0px;
    color: white;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 600;
	width: 250px;
    height: 30px;

    overflow: visible;
    transition: 0.25s ease;
    cursor: pointer;
    }
.btn-clouds:hover {
    background: linear-gradient(to right, rgba(200, 120, 50, 1), rgba(0, 0, 0, 0));
    color: #E2FF00; /* ganti warna huruf saat hover */
}

    .btn-clouds .icon-big {
        position: absolute;
        left: 0px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid rgba(0,0,0,0.4);
        box-shadow: 0 2px 3px rgba(0,0,0,0.25);
        background: #D1D1D1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-clouds .icon-big img {
        width: 70%;
        height: 70%;
        object-fit: cover;
    }
 .row-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;

        }

 .toggle {

      position: relative;
      display: inline-block;
	  width: 30px;
      height: 15px;;
      justify-content: center;
      align-items: center;
	  top: 10px;
      cursor: pointer;
    }

    .toggle input {
      display: none;
    }

    .toggle .labels {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 8px;
      font-family: sans-serif;
      
    }


    .toggle .labels::after {
	padding-top:2px;
      content: attr(data-off);
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      color: #bcbcbc;
      background-color: #7e460f;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.0);
      transition: all 0.4s ease-in-out;
	  border-radius: 10px;

    }

    .toggle .labels::before {
		padding-top:2px;
      content: attr(data-on);
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      color: #000000;
      background-color: #f6ff00;
      text-align: center;
      opacity: 0;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.0);
      transition: all 0.4s ease-in-out;
	  border-radius: 10px;

    }

    .toggle input:checked~.labels::after {
      /* flip 180deg */
      transform: rotateY(180deg);
      opacity: 0;
    }

    .toggle input:checked~.labels::before {
      
      opacity: 1;
    }
.tabelped td {
	padding-left: 12px;
}

.master_cover {
    width: 100%;
    position: relative;
background-image: 
  linear-gradient(
        to bottom,
		#ffffff,   /* biru bagian atas */
        #ffa507,   /* biru bagian atas */
        #815303,   /* hijau bagian tengah */
		#000000,   /* hijau bagian tengah */
        #000000    /* kuning bagian bawah */
    ),
  url('../../images/profil/intro-bg-2.png?a=2');

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: overlay;

    padding: 80px 0 120px 0;
	height: 100vh;    
	width: 100%;
 display: flex;
  align-items: center;
  justify-content: center;
  
}
  #cloud-scroll_a {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	float: left;
	position: relative;
	-webkit-animation: 1500000s backgroundScroll infinite linear;
	-moz-animation: 1500000s backgroundScroll infinite linear;
	-o-animation: 1500000s backgroundScroll infinite linear;
	-ms-animation: 1500000s backgroundScroll infinite linear;
	animation: 1500000s backgroundScroll infinite linear;
	background-image: url(../../images/profil/clouds.png);
	background-repeat: repeat-x;
	background-position: center top;
	padding: 0px 0 0px 0;
	
justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
	
  }
  #cloud-scroll_b {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	float: left;
	position: relative;
	-webkit-animation: 500000s backgroundScroll infinite linear;
	-moz-animation: 500000s backgroundScroll infinite linear;
	-o-animation: 500000s backgroundScroll infinite linear;
	-ms-animation: 500000s backgroundScroll infinite linear;
	animation: 500000s backgroundScroll infinite linear;
	background-image: url(../../images/profil/clouds.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	padding: 0px 0 0px 0;
	
justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
	
  }
@-webkit-keyframes backgroundScroll {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -99999999px 0;
    }
  }
  
  @keyframes backgroundScroll {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -99999999px 0;
    }
  }
  
   .rowdat {
        height: 100%; /* full layar */
    }

    #kotakdata {
        padding: 5px;
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }

   
#mastermenu {
    height: 100%;
    position: relative;
    padding: 0;

}

#kotakmenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    
    /* Scroll behavior */
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(158, 158, 158, 0.15) transparent;
}

/* Chrome/Edge/Safari */
#kotakmenu::-webkit-scrollbar {
    background-color:#4d8447;
    width:1px
}

/* background of the scrollbar except button or resizer */
#kotakmenu::-webkit-scrollbar-track {
    background-color:#35563B
}
#kotakmenu::-webkit-scrollbar-track:hover {
    background-color:#35563B
}

/* scrollbar itself */
#kotakmenu::-webkit-scrollbar-thumb {
    background-color:#10571d;
    border-radius:16px;
    border:0px solid #fff
}
#kotakmenu::-webkit-scrollbar-thumb:hover {
    background-color:#2d7010;
    border:0px solid #f4f4f4
}

/* set button(top and bottom of the scrollbar) */
#kotakmenu::-webkit-scrollbar-button {display:none}

	
	
	.menudata-container {
            width: 100%; /* Lebar menu */
            padding: 10px; /* Padding di luar item menu */
        }

        /* Menghapus gaya default dari list <ul> */
        .menudata-list {
            list-style-type: none; /* Menghapus bulatan list */
            padding: 0;
            margin: 0;
        }

        /* Gaya untuk setiap item menu */
.menudata-item {
    display: flex;
    justify-content: space-between; /* teks kiri – ikon kanan */
    align-items: center;
    text-align: right; /* agar teks di dalam <span> rata kanan */

    padding: 8px 20px;
    margin-bottom: 5px;
    border-radius: 0px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    background: linear-gradient(to left, rgba(117, 143, 111, 1),rgba(64, 113, 133, 0), rgba(0, 0, 0, 0));
}

.menudata-item span {
    flex: 1;           /* biar teks punya area penuh */
    text-align: right; /* TEKS RATA KANAN */
}
.menudata-item i {
    width: 32px;
    
    font-size: 18px;
    text-align: center;
}	

        /* Efek saat kursor di atas item menu */
        .menudata-item:hover {
            background: linear-gradient(to left, rgba(214, 191, 107, 1),rgba(64, 113, 133, 0), rgba(0, 0, 0, 0));
  
        }
        
        /* Gaya untuk item menu yang sedang aktif/terpilih */
        .menudata-item.active {
            background: linear-gradient(to left, rgba(156, 142, 78, 1),rgba(64, 113, 133, 0), rgba(0, 0, 0, 0));

        }


        /* Gaya untuk ikon */
        .menudata-icon {
            color: #FF0000; /* Warna merah untuk ikon */
            font-size: 18px; /* Ukuran ikon */
            margin-left: 10px; /* Tambahkan jarak ke kiri ikon agar tidak menempel ke teks */
        }
		
		.center-horizontal {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.info-box {
    padding: 14px 18px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
/* JUDUL */
.info-title {
    font-size: 1.25rem;         /* sedikit lebih besar */
    font-weight: 700;           /* bold */
    color: #2a2a2a;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}

/* DESKRIPSI */
.info-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.3rem;
}

/* RINCIAN */
.info-detail {
    font-size: 1rem;
    color: #333;
    margin-left: 15px;
    position: relative;
    line-height: 1.35rem;
}

/* Bullet dekoratif pada rincian */
.info-detail::before {
    content: "•";
    color: #0077ff;
    font-weight: bold;
    margin-right: 6px;
    position: absolute;
    left: -12px;
}

.tematik-button {
	background-color: rgba(136, 111, 67, 0.5);
	color: white;
	border: none;
	padding: 8px 15px;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-weight: normal;
	transition: all 0.3s ease;
	border-radius: 40;
	margin: 0;
	height: 100%;
}


.tematik-button:hover {
	background-color: rgba(157, 130, 83, 0.5);
}

.tematik-button.active {
	background-color: rgba(171, 237, 194, 0.5);
}
.hr-shadow {
  border: 0;
  height: 2px;
  background: #2b6cb0;
  box-shadow: 0 1px 3px rgba(43,108,176,0.45);
  margin: 1.2rem 0;
}

		.mouse
{
cursor:pointer;
}

.mouse:hover {
  transform: scale(1.05);
}

/* efek aktif */
.mouse.active {
  border: 2px solid #ec0000; /* garis biru */
  filter: brightness(0.6) saturate(0.8);
}
.toast-body{padding:.25rem}

.leaflet-grid-label {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 2px 4px;
    border-radius: 3px;
}

.awl_slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: #d3d3d3;
  border: none;        /* penting */
  outline: none;       /* penting */
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Hover */
.awl_slider:hover {
  opacity: 1;
}

/* CHROME thumb */
.awl_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 10px;
  background: #2196f3;
  cursor: pointer;
  border: none;
}

/* FIREFOX thumb */
.awl_slider::-moz-range-thumb {
  width: 25px;
  height: 10px;
  background: #2196f3;
  cursor: pointer;
  border: none;
  border-radius: 0;     /* HAPUS CORNER */
}

/* FIREFOX track */
.awl_slider::-moz-range-track {
  background: #d3d3d3;
  border: none;
  border-radius: 0;     /* HAPUS CORNER */
}

/* FIREFOX progress (bagian kiri track) */
.awl_slider::-moz-range-progress {
  background: #d3d3d3;
  border: none;
  border-radius: 0;     /* HAPUS CORNER */
}

/* FIREFOX — Hapus border saat focus */
.awl_slider::-moz-focus-outer {
  border: 0;
}
.tabel_ped td,
.tabel_ped th {
    padding: 6px;
}


#tabel_point td,
#tabel_point th {
    padding: 6px;
}
#tabel_point tr:hover {

    cursor: pointer;
	color:#FFF;
}


    .rain {
		top: 0px;
	left: 0;
	bottom: 0px;
	width: 100%;

	background-size: cover;
	float: left;
	position:absolute;

        pointer-events: none;
    }

    .drop {
        position: absolute;

        width: 1px;            
        height: 25px;          
        border-radius: 50%;
        opacity: 0.8;          
        filter: blur(0.5px);   
        background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.7),
            rgba(255,255,255,0.3),
            rgba(255,255,255,0)
        );
        transform: rotate(0deg);      /* kemiringan 0° vertikal */
        animation: fall linear infinite;
    }

    @keyframes fall {
        0%   { transform: translateY(-200px) rotate(0deg); }
        100% { transform: translateY(70vh) rotate(0deg); }
    }
	
.mytable {
    border-collapse: separate !important;
    border-spacing: 0px !important; /* pengganti cellspacing */
}
	
	
.tombol_data {
    background: #607D8B;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    margin: 6px 0;
    color: white;
    cursor: pointer;

    /* 🔥 Perbaikan utama untuk icon + teks di Firefox */
    display: flex;
    align-items: center;      /* sejajar vertikal */
    justify-content: center; /* teks & icon rata tengah */
    gap: 8px;                 /* jarak icon dan teks */

    line-height: 1;
    min-height: 32px;

    box-shadow: 0 3px 6px rgba(0,0,0,0.22);

    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    transition: background-color .2s ease, transform .2s ease;
}

.tombol_data:active {
    transform: scale(0.96);
}

/* Tombol terakhir tidak ada border kanan */
.tombol_data:last-child {}

.tombol_data:hover {
	filter: brightness(1.3);
	color: #1e1e1e;
}

.tombol_data.active {
	transform: scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.30);
}

.tombol_data i {
	font-size: 14px;
}


.running-text {
    flex: 1;
    height: var(--footer-height);
    position: relative;
}


.marquee-wrap{
  flex:1;
    height: var(--footer-height);

  overflow:hidden;
  display:flex;
  align-items:center;
  position:relative;
  padding-left:18px;            /* agar teks tidak nempel tombol */
  padding-right:18px;
  box-sizing:border-box;
}

/* teks marquee */
.marquee{
  white-space:nowrap;
  display:inline-block;
  will-change: transform;
  /* animasi:
     - 0%..10% : tahan di posisi awal (tampil utuh)
     - 10%..100% : bergerak dari kanan ke kiri sampai selesai
   */

  animation: marqueeAnim 60s cubic-bezier(0.2, 0.1, 0.1, 0.9) infinite;
  /* pause on hover */
}
.marquee:hover { animation-play-state: paused; cursor:text; }

/* keyframes: tahan 3s pertama (sekitar 10% dari 28s = 2.8s), kemudian lanjut menggulir */
@keyframes marqueeAnim {
  0% {
    transform: translateX(100%);
  }
  5% {
    transform: translateX(100%); /* Pause 3 detik */
  }
  100% {
    transform: translateX(-100%);
  }
}

.bgr_tabmenu
{
            background: linear-gradient(to left, rgba(222, 222, 222, 1),rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));

}
.number-marker {
  position: relative;
}

.number-marker::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  background: white;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 68%,
    78% 82%,
    50% 100%,
    22% 82%,
    0% 68%
  );
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index: -1;
}

.number-marker .num {
  width:30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 68%,
    78% 82%,
    50% 100%,
    22% 82%,
    0% 68%
  );
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6px;
  position: relative;
  z-index: 1;
}

.number-damar .damar {

	width: auto;
	height: 30px;
	line-height: 30px;

    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #ADADAD;
    border-radius: 0%;

    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 10px;

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

    box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	
}
.garis-putih {
  border: none;
  border-top: 1px solid #ffffff;
  width: 100%;
  margin: 10px 0;
  box-shadow: 0 0 4px #ffffff;
}


  .fade-img { transition: opacity 1.2s ease-in-out !important; }

.radius-label {
	
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  /* outline 2 px hitam di semua arah */
  text-shadow:
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000;
  /* tambahan agar tidak terlalu rapuh di retina */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.awl_slidecontainer {
  width: 100%;
}

.blink 
{
      color: "#ffd800";
      animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation 
{
      to {
        visibility: hidden;
      }
  }
  
  

.modal-open .modal.modal-center {
	display: flex!important;
	align-items: center!important;
    .modal-dialog {
        flex-grow: 1;
	z-index: 10;
    }
}
.modal-header
{
	cursor:move;
	color: #EADC00;
	font-family: 'Oswald', sans-serif;
	background-color: #052E06;
	border-radius: 0px; /* Membuat sudut elemen lebih bulat */
	border-bottom: 0px solid #dee2e6;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 10px;

}

.modal-content 
{
	border-radius: 0px; /* Membuat sudut elemen lebih bulat */
}
.modal-footer {

  border-top: 1px solid #dee2e6;
	border-radius: 0px; /* Membuat sudut elemen lebih bulat */
	padding:0px
}

.img-responsive {
    width: 100%;
    height: auto;   /* agar gambar tidak melar */
    display: block;
}


.leaflet-control-velocity {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0 5px;
  margin: 0 !important;
  color: #333;
  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.velocity-overlay {
  position: absolute;
  z-index: 1;
}



.kotak_scroll {
	position:relative;
	top:0px;
    left: 0;
	right: 0;
	bottom: 0;
	
	/* Scroll behavior */
    overflow-y: auto;
	overflow-x: hidden;
	/* Firefox scrollbar */
    scrollbar-width: thin;
	scrollbar-color: rgba(158, 158, 158, 0.15) transparent;
	height: 100%;
}

/* Chrome/Edge/Safari */
.kotak_scroll::-webkit-scrollbar {
    background-color:#fff;
    width:1px
}

/* background of the scrollbar except button or resizer */
.kotak_scroll::-webkit-scrollbar-track {
    background-color:#35563B
}
.kotak_scroll::-webkit-scrollbar-track:hover {
    background-color:#35563B
}

/* scrollbar itself */
.kotak_scroll::-webkit-scrollbar-thumb {
    background-color:#64906C;
    border-radius:16px;
    border:0px solid #fff
}
.kotak_scroll::-webkit-scrollbar-thumb:hover {
    background-color:#BBBBBB;
    border:0px solid #f4f4f4
}

/* set button(top and bottom of the scrollbar) */

.kotak_scroll::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
/* velocity */
.leaflet-control-velocity {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0 5px;
  margin: 0 !important;
  color: #333;
  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.velocity-overlay {
  position: absolute;
  z-index: 1;
}

.circle-wrapper {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #00bcd4;
	background-color: #C8C8C8;
	 display: flex;
    align-items: center;
    justify-content: center;
}

.circle-wrapper img {
    width: 80%;
    height: 80%;
    object-fit: cover;
}
  .posisi_bawah {
   position:absolute;

   bottom:0;
} 



/* Testimonials Section
--------------------------------*/
#testimonials {
    padding: 60px 0;
    box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}

#testimonials .section-header {
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    #testimonials .testimonial-item {
        text-align: center;
    }
}

#testimonials .testimonial-item .testimonial-img {
    width: 120px;
    border-radius: 50%;
    border: 2px solid #d6d6d6;
    float: left;

}

@media (max-width: 767px) {
    #testimonials .testimonial-item .testimonial-img {
        float: none;
        margin: auto;
    }
}

#testimonials .testimonial-item h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #111;
    margin-left: 140px;
}

#testimonials .testimonial-item h4 {
    font-size: 14px;
    color: #999;
    margin: 0 0 15px 0;
    margin-left: 140px;
}

#testimonials .testimonial-item p {
    font-style: italic;
    margin: 0 0 15px 140px;
}

@media (min-width: 992px) {
    #testimonials .testimonial-item p {
        width: 80%;
    }
}

@media (max-width: 767px) {

    #testimonials .testimonial-item h3,
    #testimonials .testimonial-item h4,
    #testimonials .testimonial-item p {
        margin-left: 0;
    }
}

#testimonials .owl-nav,
#testimonials .owl-dots {
    margin-top: 5px;
    text-align: center;
}

#testimonials .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
}

#testimonials .owl-dot.active {
    background-color: #007bff;
}

/* Team Section
--------------------------------*/

#scale-svg {
    display: block;
	margin:0 auto;
}