@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Oswald:wght@300&display=swap');

:root {
    --grid-gap: 15px;
}

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

html,
body,
span,
applet,
object,
iframe,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family: 'Lato', 'Roboto', sans-serif;
    background-color: #343a40;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

ul {
    display: flex;
}

.container {
    width: 100%;
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.bg-opacity-35 {
    --tw-bg-opacity: 0.35;
}

.bg-repeat {
    background-repeat: repeat;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.bg-repeat-x {
    background-repeat: repeat-x;
}

.bg-repeat-y {
    background-repeat: repeat-y;
}

.bg-repeat-round {
    background-repeat: round;
}

.bg-repeat-space {
    background-repeat: space;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity));
}

overflow-x-hidden {
    overflow-x: hidden;
}

overflow-y-hidden {
    overflow-y: hidden;
}


.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.-mx-2 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.-mx-3 {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.ml-6 {
    margin-left: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mt-16 {
    margin-top: 4rem;
}



.navbar .navbar-logo {
    font-size: 1rem;
    font-weight: 700;
    margin-right: auto;
    color: #fff;
    font-style: italic;
    text-decoration: none;
    align-items: center; 
}


.navbar .navbar-logo span {
    color: #ffc519;
    align-items: center; 
}

/* Webmap */

#container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#map {
    width: auto;
    height: 86vh;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    bottom: 0px;
}

#sidebar {
    display: block;
    width: 300px;
    height: 100%;
    max-width: 100%;
    float: left;
}

.sidebar-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.sidebar-table {
    position: absolute;
    width: 100%;
    top: 103px;
    bottom: 0px;
    overflow: auto;
}

.panel-heading {
    width: 250px;
}

.panel-body {
    width: 250px;
}

.feature-row {
    cursor: pointer;
    width: 250px;
}

#features {
    margin: 0px;
    border: none;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#sidebar-hide-btn {
    margin-top: -2px;
}

.info {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    font-size: 0.75rem;
    column-gap: 15px;
    overflow-y: auto;
}

.info.multicolumn {
    column-count: 2;
}


.info h6 {
    font-size: 0.3rem;
}

#legendbar {
    text-align: left;
    line-height: 18px;
    color: #555;
}

#legend-hide-btn {
    margin-top: -2px;
}

.legend {
    text-align: left;
    max-width: 400px;
    max-height: 40vh;
    line-height: 18px;
    color: #555;
}

.legend i {
    width: 18px;
    height: 18px;
    padding-left: 4px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}


/* HEADER STYLE*/
.hover-underline-animation {
    display: inline-block;
    position: relative;
    color: #0087ca;
}

.hover-underline-animation:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.header-7-1 .btn-try {
    font-weight: 600;
    padding: 1rem 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    border-radius: 0.75rem;
}

.header-7-1 .btn-fill {
    background-image: linear-gradient(rgba(30, 144, 255, 1),
            rgba(19, 125, 228, 1));
    box-shadow: 0px 21px 45px 0px rgba(215, 236, 255, 0.61);
    transition: 0.1s;
}

.header-7-1 .btn-fill:hover {
    background-image: linear-gradient(rgba(20, 126, 230, 1),
            rgba(20, 126, 230, 1));
    transition: 0.1s;
}

.header-7-1 .btn-explore {
    background-color: #3aad01;
    box-shadow: 0px 21px 45px 0px rgba(215, 236, 255, 0.61);
    transition: 0.1s;
    border-radius: 2rem;
}

.header-7-1 .btn-explore:hover {
    background-color: #2d7807;
    transition: 0.1s;
}

.table-detail .header-7-1 .btn-how {
    font-weight: 500;
    padding: 1rem 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    color: #544c6f;
    transition: 0.1s;
}

.header-7-1 .btn-how:hover {
    color: #147ee6;
    transition: 0.1s;
}

.header-7-1 .text-blue-1 {
    color: #1e90fe;
}

.header-7-1 .title-font {
    font: 700 2.25rem/1.25 "Poppins", sans-serif;
    color: #16005c;
    margin-top: 3.5rem;
    margin-bottom: 1rem;
}

.header-7-1 .caption-font {
    margin-bottom: 1.5rem;
    letter-spacing: 0.025em;
    color: #5d4e8e;
}

.header-7-1 .left-col,
.header-7-1 .right-col {
    width: 100%;
}

.header-7-1 .left-col {
    margin-bottom: 1rem;
}

.header-7-1 .main {
    padding: 1rem 2rem 1rem;
}

.header-7-1 .navbar {
    padding: 1rem;
}


.header-7-1 .navbar-light .navbar-nav .nav-link {
    font: 400 0.875rem/1.25rem Poppins, sans-serif;
    color: #dad9db;
    transition: 0.3s;
}

.header-7-1 .navbar-light .navbar-nav .nav-link.active,
.header-7-1 .navbar-light .navbar-nav .nav-link:hover {
    font: 600 0.875rem/1.25rem Poppins, sans-serif;
    color: #ffc519;
    transition: 0.3s;
}

.header-7-1 .btn-register {
    font: 600 0.875rem/1.25rem Poppins, sans-serif;
    padding: 0.8rem 1.8rem;
    letter-spacing: 0.05em;
}

.header-7-1 .btn-login {
    font: 600 0.875rem/1.25rem Poppins, sans-serif;
    padding: 0.5rem 1.8rem;
    letter-spacing: 0.05em;
    border-radius: 1rem;
    transition: 0.3s;
}

.header-7-1 .btn-login-blue {
    background-color: #5252ff;
    color: #ffffff;
    transition: 0.3s;
}

.header-7-1 .btn-login-blue:hover {
    background-color: #1d1dc5;
    color: #ffffff;
    transition: 0.3s;
}

.header-7-1 .btn-login-orange {
    background-color: transparent;
    color: #ffffff;
    transition: 0.3s;
    border: 1px solid #808080;
}

.header-7-1 .btn-login-orange:hover {
    background-color: #f75b13;
    color: #ffffff;
    transition: 0.3s;
}

.header-7-1 .nav-dropdown {
    background-color: #ffffff;
    padding: 0.625rem;
    border-radius: 0.5rem;
    border: none;
    width: 138px;
    --tw-shadow: 0 0px 20px 0 rgba(156, 156, 156, 0.1),
        0 0px 20px 0 rgba(156, 156, 156, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(167, 167, 167, 0)),
        var(--tw-ring-shadow, 0 0 rgba(167, 167, 167, 0)), var(--tw-shadow);
}

.header-7-1 .dropdown-item a,
.header-7-1 .dropdown-item {
    font: 500 0.75rem/1rem Poppins, sans-serif;
    color: #000;
    background-color: #ffffff;
    transition: 0.2s;
}

.header-7-1 .dropdown-item:focus a,
.header-7-1 .dropdown-item:hover a,
.header-7-1 .dropdown-item:hover {
    transition: 0.2s;
    background-color: #ffc519;
    border-radius: 0.5rem;
}

/* CSS Kustom */

#bahasa {
    display: inline-block;
    
}

#hamburger {
    display: none;
    color: #fff;
    font-size: 3rem;
    align-items: center;
}

.navbar-toggler {
    background-color: rgb(197, 197, 197);
}


@media (min-width: 576px) {
    .header-7-1 .title-font {
        font: 700 3rem/1.25 "Poppins", sans-serif;
    }

    .header-7-1 .dropdown-header .dropdown-header-hover:hover .dropdown-header-icon-arrow {
        display: block;
    }
}

@media (min-width: 768px) {
    .header-7-1 {
        background-image: url("");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .header-7-1 .main {
        padding: 1.5rem 4rem 4rem;
    }

    .header-7-1 .left-col {
        margin-bottom: 4rem;
    }

    .header-7-1 .navbar {
        padding: 2rem 4rem;
    }

    #hamburger {
        display: inline-block;
    }
}

@media (min-width: 992px) {

    .header-7-1 .left-col,
    .header-7-1 .right-col {
        width: 50%;
    }

    .header-7-1 .main {
        padding: 1.5rem 7rem 4rem 9rem;
    }

    .header-7-1 .left-col {
        margin-bottom: 0rem;
    }

    .header-7-1 .title-font {
        font: 700 3.75rem/1.25 "Poppins", sans-serif;
    }

    .header-7-1 .navbar {
        padding: 2rem 6rem;
    }
}

@media (min-width: 1200px) {}

@media all and (min-width: 992px) {
    .header-7-1 .nav-item .dropdown-menu {
        display: none;
    }

    .header-7-1 .nav-item:hover .dropdown-menu {
        display: block;
    }

    .header-7-1 .nav-item .dropdown-menu {
        margin-top: 0;
    }
}

/* END HEADER STYLE */


.leaflet-tooltip.no-background {
    background: transparent;
    border: none;
    box-shadow: none;
    color: none;
    -webkit-text-stroke-width: 0.9px;
    -webkit-text-stroke-color: whitesmoke;
    -webkit-text-fill-color: black;
}

.leaflet-tooltip.no-background-tooltip {
    background: transparent;
    border: none;
    box-shadow: none;
    text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff;
}

.leaflet-control-layers {
    margin-top: 30px;
	overflow: auto;
}

.leaflet-control-layers label {
    font-weight: normal;
    margin-bottom: 0px;
}

.leaflet-control-layers-list input[type="radio"],
input[type="checkbox"] {
    margin: 2px;
}

.leaflet-control-layers-expanded {
    height: 80vh; /* atau tinggi lain yang Anda inginkan */
    overflow-y: auto;
}


#map {
    width: auto;
    height: 86vh;
    margin-bottom: 15px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    bottom: 0px;
}


label.required::after {
    content: '*';
    color: red;
}

.wms-label {
    background-color: white;
    /* Warna latar belakang label */
    padding: 2px;
    /* Ruang di sekitar teks label */
    border: 1px solid #808080;
    /* Garis pinggir label */
    border-radius: 4px;
    /* Sudut melengkung pada label */
}

/*Leaflet Marker Cluster*/
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

/*Marker Cluster Default*/
.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}

.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}

.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}

.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
}

/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
    background-color: rgb(181, 226, 140);
}

.leaflet-oldie .marker-cluster-small div {
    background-color: rgb(110, 204, 57);
}

.leaflet-oldie .marker-cluster-medium {
    background-color: rgb(241, 211, 87);
}

.leaflet-oldie .marker-cluster-medium div {
    background-color: rgb(240, 194, 12);
}

.leaflet-oldie .marker-cluster-large {
    background-color: rgb(253, 156, 115);
}

.leaflet-oldie .marker-cluster-large div {
    background-color: rgb(241, 128, 23);
}

.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}

.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;

    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.marker-cluster span {
    line-height: 30px;
}



/* Plugin*/

/* Leaflet Mouse Position */
.leaflet-container .leaflet-control-mouseposition {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px #bbb;
    padding: 0 5px;
    margin: 3px;
    color: rgb(75, 75, 75);
    font: 10px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}